feat(solid): simplfy typography

components/solid/src/components/ui/primitives/heading.tsx

@@ -1,27 +1,11 @@
-import { mergeProps, splitProps } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-import { css, cx } from 'styled-system/css'
-import { type HTMLStyledProps, splitCssProps } from 'styled-system/jsx'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
 import { type TextVariantProps, text } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
 
-type As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+type TextProps = TextVariantProps & { as?: React.ElementType }
 
-export type HeadingProps = TextVariantProps & {
-  as?: As
-} & HTMLStyledProps<As>
-
-export const Heading = (props: HeadingProps) => {
-  const mergedProps = mergeProps({ as: 'h2' }, props)
-  const [variantProps, headingProps] = splitProps(mergedProps, ['size'])
-  const [cssProps, elementProps] = splitCssProps(headingProps)
-  const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])
-  const className = text({ variant: 'heading', size: variantProps.size })
-
-  return (
-    <Dynamic
-      component={localProps.as}
-      class={cx(className, css(cssProps), localProps.class)}
-      {...rootProps}
-    />
-  )
-}
+export type HeadingProps = ComponentProps<typeof Heading>
+export const Heading = styled('h2', text, {
+  defaultProps: { variant: 'heading' },
+}) as StyledComponent<'h2', TextProps>

components/solid/src/components/ui/primitives/text.tsx

@@ -1,27 +1,9 @@
-import type { Assign, HTMLArkProps } from '@ark-ui/solid'
-import { mergeProps, splitProps } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-import { css, cx } from 'styled-system/css'
-import { splitCssProps } from 'styled-system/jsx'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
 import { type TextVariantProps, text } from 'styled-system/recipes'
-import type { JsxStyleProps } from 'styled-system/types'
+import type { StyledComponent } from 'styled-system/types'
 
-export interface TextProps extends Assign<JsxStyleProps, HTMLArkProps<'p'>>, TextVariantProps {
-  as?: 'p' | 'label' | 'div' | 'span'
-}
+type ParagraphProps = TextVariantProps & { as?: JSX.ElementType }
 
-export const Text = (props: TextProps) => {
-  const mergedProps = mergeProps({ as: 'p' }, props)
-  const [variantProps, textProps] = splitProps(mergedProps, ['size', 'variant'])
-  const [cssProps, elementProps] = splitCssProps(textProps)
-  const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])
-  const className = text(variantProps)
-
-  return (
-    <Dynamic
-      component={localProps.as}
-      class={cx(className, css(cssProps), localProps.class)}
-      {...rootProps}
-    />
-  )
-}
+export type TextProps = ComponentProps<typeof Text>
+export const Text = styled('p', text) as StyledComponent<'p', ParagraphProps>

website/public/registry/latest/solid/components/heading.json

@@ -4,7 +4,7 @@
   "variants": [
     {
       "file": "primitives/heading.tsx",
-      "content": "import { mergeProps, splitProps } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { css, cx } from 'styled-system/css'\nimport { type HTMLStyledProps, splitCssProps } from 'styled-system/jsx'\nimport { type TextVariantProps, text } from 'styled-system/recipes'\n\ntype As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport type HeadingProps = TextVariantProps & {\n  as?: As\n} & HTMLStyledProps<As>\n\nexport const Heading = (props: HeadingProps) => {\n  const mergedProps = mergeProps({ as: 'h2' }, props)\n  const [variantProps, headingProps] = splitProps(mergedProps, ['size'])\n  const [cssProps, elementProps] = splitCssProps(headingProps)\n  const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])\n  const className = text({ variant: 'heading', size: variantProps.size })\n\n  return (\n    <Dynamic\n      component={localProps.as}\n      class={cx(className, css(cssProps), localProps.class)}\n      {...rootProps}\n    />\n  )\n}\n",
+      "content": "import type { ComponentProps } from 'solid-js'\nimport { styled } from 'styled-system/jsx'\nimport { type TextVariantProps, text } from 'styled-system/recipes'\nimport type { StyledComponent } from 'styled-system/types'\n\ntype TextProps = TextVariantProps & { as?: React.ElementType }\n\nexport type HeadingProps = ComponentProps<typeof Heading>\nexport const Heading = styled('h2', text, {\n  defaultProps: { variant: 'heading' },\n}) as StyledComponent<'h2', TextProps>\n",
       "exports": "export { Heading, type HeadingProps } from './heading'"
     }
   ]

website/public/registry/latest/solid/components/text.json

@@ -4,7 +4,7 @@
   "variants": [
     {
       "file": "primitives/text.tsx",
-      "content": "import type { Assign, HTMLArkProps } from '@ark-ui/solid'\nimport { mergeProps, splitProps } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { css, cx } from 'styled-system/css'\nimport { splitCssProps } from 'styled-system/jsx'\nimport { type TextVariantProps, text } from 'styled-system/recipes'\nimport type { JsxStyleProps } from 'styled-system/types'\n\nexport interface TextProps extends Assign<JsxStyleProps, HTMLArkProps<'p'>>, TextVariantProps {\n  as?: 'p' | 'label' | 'div' | 'span'\n}\n\nexport const Text = (props: TextProps) => {\n  const mergedProps = mergeProps({ as: 'p' }, props)\n  const [variantProps, textProps] = splitProps(mergedProps, ['size', 'variant'])\n  const [cssProps, elementProps] = splitCssProps(textProps)\n  const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])\n  const className = text(variantProps)\n\n  return (\n    <Dynamic\n      component={localProps.as}\n      class={cx(className, css(cssProps), localProps.class)}\n      {...rootProps}\n    />\n  )\n}\n",
+      "content": "import type { ComponentProps } from 'solid-js'\nimport { styled } from 'styled-system/jsx'\nimport { type TextVariantProps, text } from 'styled-system/recipes'\nimport type { StyledComponent } from 'styled-system/types'\n\ntype ParagraphProps = TextVariantProps & { as?: JSX.ElementType }\n\nexport type TextProps = ComponentProps<typeof Text>\nexport const Text = styled('p', text) as StyledComponent<'p', ParagraphProps>\n",
       "exports": "export { Text, type TextProps } from './text'"
     }
   ]