@kalink-ui/seedly 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kalink-ui/seedly
 
+## 0.9.0
+
+### Minor Changes
+
+- 7fe5a15: Fix issues with TypeScript config and setup Github Actions
+
+## 0.8.1
+
+### Patch Changes
+
+- 6670251: Do not ignore arg-types files from npm package
+
 ## 0.8.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -17,14 +17,14 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.5",
-    "@storybook/addon-docs": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/addon-onboarding": "^8.6.4",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.4",
-    "@storybook/test": "^8.6.4",
+    "@storybook/addon-docs": "^8.6.9",
+    "@storybook/addon-essentials": "^8.6.9",
+    "@storybook/addon-interactions": "^8.6.9",
+    "@storybook/addon-onboarding": "^8.6.9",
+    "@storybook/blocks": "^8.6.9",
+    "@storybook/react": "^8.6.9",
+    "@storybook/react-vite": "^8.6.9",
+    "@storybook/test": "^8.6.9",
     "@turbo/gen": "^2.4.4",
     "@types/node": "^22.13.9",
     "@types/react": "19.0.10",
@@ -40,15 +40,15 @@
     "react": "^19.0.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^19.0.0",
-    "storybook": "^8.6.4",
+    "storybook": "^8.6.9",
     "type-fest": "^4.37.0",
     "typescript": "5.8.2",
     "vite": "^6.2.1",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.8",
-    "@kalink-ui/dibbly": "0.2.0",
-    "@kalink-ui/eslint-config": "0.7.0",
-    "@kalink-ui/typescript-config": "0.4.0"
+    "@kalink-ui/dibbly": "0.3.0",
+    "@kalink-ui/typescript-config": "0.4.0",
+    "@kalink-ui/eslint-config": "0.8.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",
@@ -66,10 +66,12 @@
     "access": "public"
   },
   "scripts": {
-    "lint": "eslint . --max-warnings 0",
+    "lint": "eslint --max-warnings 0",
+    "lint:fix": "pnpm lint --fix",
     "build-storybook": "storybook build",
     "dev": "storybook dev -p 6006 --no-open",
-    "test": "vitest",
-    "tsc": "tsc --noEmit"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "tsc": "tsc -b"
   }
 }

package/src/components/box/box.css.ts

@@ -1,12 +1,8 @@
-import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { mapContractVars, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const colorForeground = createVar();
-export const colorBackground = createVar();
-
 export const boxRecipe = recipe({
   variants: {
     /**
@@ -16,13 +12,8 @@ export const boxRecipe = recipe({
       solid: {
         '@layer': {
           [components]: {
-            color: colorForeground,
-            backgroundColor: colorBackground,
-          },
-
-          vars: {
-            [colorForeground]: sys.color.foreground,
-            [colorBackground]: sys.color.background,
+            color: sys.color.foreground,
+            backgroundColor: sys.color.background,
           },
         },
       },
@@ -30,10 +21,10 @@ export const boxRecipe = recipe({
       outline: {
         '@layer': {
           [components]: {
-            color: colorBackground,
+            color: sys.color.foreground,
             backgroundColor: 'transparent',
 
-            borderColor: colorBackground,
+            borderColor: sys.color.foreground,
             borderStyle: 'solid',
             borderWidth: '1px',
           },

package/src/components/box/box.tsx

@@ -4,8 +4,8 @@ import { ElementType } from 'react';
 
 import { BoxVariants, boxRecipe } from './box.css';
 
-type BoxProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  BoxVariants;
+export type BoxProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & BoxVariants;
 
 /**
  * A evenly spaced container for grouping related elements. Can

package/src/components/box/index.ts

@@ -1,2 +1,2 @@
-export { Box } from './box';
+export { Box, type BoxProps } from './box';
 export { boxRecipe, type BoxVariants } from './box.css';

package/src/components/card/card.css.ts

@@ -0,0 +1,42 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { components } from '../../styles/layers.css';
+
+export const card = style({});
+export const cardHeader = style({});
+export const cardBody = style({});
+export const cardFooter = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        display: 'flex',
+      },
+    },
+  },
+  variants: {
+    align: {
+      start: {
+        '@layer': {
+          [components]: {
+            justifyContent: 'flex-start',
+          },
+        },
+      },
+      center: {
+        '@layer': {
+          [components]: {
+            justifyContent: 'center',
+          },
+        },
+      },
+      end: {
+        '@layer': {
+          [components]: {
+            justifyContent: 'flex-end',
+          },
+        },
+      },
+    },
+  },
+});

package/src/components/card/card.tsx

@@ -0,0 +1,73 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { Box, Cluster, Stack } from '@kalink-ui/seedly';
+import { Spacing } from '@kalink-ui/seedly/styles';
+
+import { BoxProps } from '../box';
+import { ClusterProps } from '../cluster';
+
+import { card, cardBody, cardFooter, cardHeader } from './card.css';
+
+export type CardProps<TUse extends ElementType = 'article'> = BoxProps<TUse> & {
+  verticalSpacing?: Spacing;
+};
+
+export function Card<TUse extends ElementType = 'article'>(
+  props: CardProps<TUse>,
+) {
+  const {
+    use = 'article',
+    variant = 'solid',
+    className,
+    spacing = 4,
+    verticalSpacing,
+    children,
+    ...rest
+  } = props;
+
+  return (
+    <Box
+      use={use as CardProps['use']}
+      variant={variant}
+      spacing={spacing}
+      className={clsx(card, className)}
+      {...rest}
+    >
+      <Stack spacing={verticalSpacing ?? spacing}>{children}</Stack>
+    </Box>
+  );
+}
+
+Card.Header = function CardHeader<TUse extends ElementType = 'header'>(
+  props: PolymorphicComponentProps<TUse>,
+) {
+  const { use: Comp = 'header', className, ...rest } = props;
+
+  return <Comp className={clsx(cardHeader, className)} {...rest} />;
+};
+
+Card.Body = function CardBody<TUse extends ElementType = 'div'>(
+  props: PolymorphicComponentProps<TUse>,
+) {
+  const { use: Comp = 'div', className, ...rest } = props;
+
+  return <Comp className={clsx(cardBody, className)} {...rest} />;
+};
+
+type CardFooterProps<TUse extends ElementType = 'footer'> = ClusterProps<TUse>;
+
+Card.Footer = function CardFooter<TUse extends ElementType = 'footer'>(
+  props: CardFooterProps<TUse>,
+) {
+  const { use = 'footer', className, ...rest } = props;
+
+  return (
+    <Cluster
+      use={use as CardFooterProps['use']}
+      className={clsx(cardFooter, className)}
+      {...rest}
+    />
+  );
+};

package/src/components/card/index.ts

@@ -0,0 +1 @@
+export { Card } from './card';

package/src/components/center/center.css.ts

@@ -1,6 +1,6 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mapContractVars , sys } from '../../styles';
+import { mapContractVars, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const centerRecipe = recipe({

package/src/components/cluster/cluster.css.ts

@@ -1,6 +1,6 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mapContractVars , sys } from '../../styles';
+import { mapContractVars, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const clusterRecipe = recipe({

package/src/components/cluster/cluster.tsx

@@ -4,8 +4,8 @@ import { ElementType } from 'react';
 
 import { clusterRecipe, ClusterVariants } from './cluster.css';
 
-type ClusterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  ClusterVariants;
+export type ClusterProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & ClusterVariants;
 
 /**
  * A custom element for grouping items, with control over the margin between them

package/src/components/cluster/index.ts

@@ -1,2 +1,2 @@
-export { Cluster } from './cluster';
+export { Cluster, type ClusterProps } from './cluster';
 export { clusterRecipe, type ClusterVariants } from './cluster.css';

package/src/components/cover/cover.css.ts

@@ -1,7 +1,7 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys , mapContractVars } from '../../styles';
+import { sys, mapContractVars } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 const spaceVar = createVar();

package/src/components/grid/grid.css.ts

@@ -1,7 +1,7 @@
 import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys , mapContractVars } from '../../styles';
+import { sys, mapContractVars } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const minSizeVar = createVar();

package/src/components/heading/heading.css.ts

@@ -1,5 +1,52 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-export const headingRecipe = recipe({});
+import { mapContractVars, sys } from '../../styles';
+import { components } from '../../styles/layers.css';
 
-export type HeadingVariants = NonNullable<RecipeVariants<typeof headingRecipe>>;
+export const headingRoot = recipe({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  variants: {
+    align: {
+      start: {
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-start',
+            textAlign: 'start',
+          },
+        },
+      },
+      center: {
+        '@layer': {
+          [components]: {
+            alignItems: 'center',
+            textAlign: 'center',
+          },
+        },
+      },
+      end: {
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-end',
+            textAlign: 'end',
+          },
+        },
+      },
+    },
+
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      '@layer': {
+        [components]: {
+          gap: sys.spacing[key],
+        },
+      },
+    })),
+  },
+});
+
+export type HeadingRootVariants = NonNullable<
+  RecipeVariants<typeof headingRoot>
+>;

package/src/components/heading/heading.tsx

@@ -1,83 +1,102 @@
-import { getProp, PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
+import { ElementType, ReactElement } from 'react';
 
-import {
-  typography,
-  Spacing,
-  TypographySize,
-  TypographyVariant,
-} from '../../styles';
+import { Spacing, TypographySize, TypographyVariant } from '../../styles';
 import { ConditionalWrapper } from '../conditional-wrapper';
-import { Stack } from '../stack';
+import { Text, TextProps } from '../text';
 
-import { headingRecipe } from './heading.css';
+import { headingRoot } from './heading.css';
 
-type HeadingTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type HeadingTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-type HeadingProps<TUse extends HeadingTypes> =
-  PolymorphicComponentProps<TUse> & {
-    /**
-     * The size of the typography used to render the text.
-     */
-    size?: TypographySize;
+export type HeadingProps<TUse extends ElementType = 'h2'> = Omit<
+  TextProps<TUse>,
+  'variant' | 'children'
+> & {
+  /**
+   * The typography used to render the text.
+   */
+  variant: Extract<TypographyVariant, 'display' | 'headline' | 'title'>;
 
-    /**
-     * The typography used to render the text.
-     */
-    variant: Extract<TypographyVariant, 'display' | 'headline' | 'title'>;
+  /**
+   * If provided, the text will be rendered before the title.
+   */
+  pretitle?: ReactElement<TextProps<'p'>>;
 
-    /**
-     * The text to render.
-     */
-    children: string;
+  /**
+   * If provided, the text will be rendered after the title.
+   */
+  subtitle?: ReactElement<TextProps<'p'>>;
 
-    /**
-     * If provided, the text will be rendered before the title.
-     */
-    pretitle?: string;
+  /**
+   * The spacing between the title and the pretitle or subtitle.
+   */
+  spacing?: Spacing;
 
-    /**
-     * If provided, the text will be rendered after the title.
-     */
-    subtitle?: string;
+  /**
+   * The text to render.
+   */
+  children: string;
+};
 
-    /**
-     * The spacing between the title and the pretitle or subtitle.
-     */
-    spacing?: Spacing;
-  };
-
-export function Heading<TUse extends HeadingTypes>(props: HeadingProps<TUse>) {
-  const {
-    children,
-    className,
-    size = 'medium',
-    use: Comp = 'h1',
-    variant,
-    pretitle,
-    subtitle,
-    spacing,
-    ...rest
-  } = props;
+const headingMapping: Record<
+  HeadingTypes,
+  { variant: TypographyVariant; size: TypographySize }
+> = {
+  h1: { variant: 'display', size: 'large' },
+  h2: { variant: 'display', size: 'medium' },
+  h3: { variant: 'display', size: 'small' },
+  h4: { variant: 'headline', size: 'large' },
+  h5: { variant: 'headline', size: 'medium' },
+  h6: { variant: 'headline', size: 'small' },
+};
 
+export function Heading<TUse extends HeadingTypes>({
+  children,
+  use = 'h2',
+  size,
+  variant,
+  align,
+  spacing,
+  pretitle,
+  subtitle,
+  ...rest
+}: HeadingProps<TUse>) {
   return (
     <ConditionalWrapper
-      use={Stack}
-      spacing={spacing}
+      use={'hgroup'}
       condition={!!pretitle || !!subtitle}
+      className={clsx(headingRoot({ align, spacing }))}
     >
-      {pretitle && <span>{pretitle}</span>}
-      <Comp
-        className={clsx(
-          headingRecipe(),
-          getProp(typography, `${variant}.${size}`),
-          className,
-        )}
+      {pretitle}
+
+      <Text
+        use={use}
+        align={align}
+        variant={variant ?? headingMapping[use].variant}
+        size={size ?? headingMapping[use].size}
         {...rest}
       >
         {children}
-      </Comp>
-      {subtitle && <span>{subtitle}</span>}
+      </Text>
+
+      {subtitle}
     </ConditionalWrapper>
   );
 }
+
+Heading.Pretitle = function HeadingPretitle({
+  variant = 'title',
+  size = 'medium',
+  ...rest
+}: TextProps<'p'>) {
+  return <Text use="p" variant={variant} size={size} {...rest} />;
+};
+
+Heading.Subtitle = function HeadingSubtitle({
+  variant = 'title',
+  size = 'medium',
+  ...rest
+}: TextProps<'p'>) {
+  return <Text use="p" variant={variant} size={size} {...rest} />;
+};

package/src/components/heading/index.ts

@@ -1 +1,2 @@
-export { Heading } from './heading';
+export { Heading, type HeadingTypes, type HeadingProps } from './heading';
+export { headingRoot, type HeadingRootVariants } from './heading.css';

package/src/components/index.ts

@@ -1,13 +1,14 @@
 export { Box } from './box';
 export { Button } from './button';
+export { Card } from './card';
 export { Center } from './center';
 export { Cluster } from './cluster';
-export { ConditionalWrapper } from "./conditional-wrapper";
+export { ConditionalWrapper } from './conditional-wrapper';
 export { Cover } from './cover';
 export { Frame } from './frame';
 export { Grid } from './grid';
-export { Heading } from "./heading";
-export { plantSeed } from './seed';
+export { Heading } from './heading';
+export { plantSeed, withSeed } from './seed';
 export { Sidebar } from './sidebar';
 export { Stack } from './stack';
 export { Switcher } from './switcher';

package/src/components/seed/index.ts

@@ -1 +1 @@
-export { plantSeed } from './seed';
+export { plantSeed, withSeed } from './seed';

package/src/components/seed/seed.tsx

@@ -1,6 +1,6 @@
 import { type PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
-import { type ElementType } from 'react';
+import { ComponentType, type ElementType } from 'react';
 
 import {
   extractSprinklesProps,
@@ -48,3 +48,40 @@ export function plantSeed<SprinklesFn extends SprinklesFnBase>({
 
   return Seed;
 }
+
+/**
+ * A higher-order component that injects sprinkles and default className.
+ */
+export function withSeed<SprinklesFn extends SprinklesFnBase>({
+  sprinkles,
+  defaultClassName,
+}: CreateSeedParams<SprinklesFn>) {
+  return function wrapWithSprinkles<TProps, TUse extends ElementType>(
+    WrappedComponent: ComponentType<PolymorphicComponentProps<TUse> & TProps>,
+  ) {
+    const ComponentWithSeed = (
+      props: SeedProps<TUse, SprinklesFn> & TProps,
+    ) => {
+      const { className, ...rest } = props;
+
+      const [sprinklesProps, componentProps] = extractSprinklesProps(
+        rest,
+        sprinkles,
+      );
+
+      return (
+        // @ts-expect-error - TODO: fix this
+        <WrappedComponent
+          className={clsx(
+            sprinkles(sprinklesProps),
+            defaultClassName,
+            className,
+          )}
+          {...componentProps}
+        />
+      );
+    };
+
+    return ComponentWithSeed;
+  };
+}

package/src/components/text/text.css.ts

@@ -1,25 +1,164 @@
-import { style } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
+
+const lineClampNumber = createVar();
+
+const lineClamp = style({
+  '@layer': {
+    [components]: {
+      display: '-webkit-box',
+      WebkitLineClamp: lineClampNumber,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+    },
+  },
+});
+
 export const textRecipe = recipe({
   variants: {
+    /**
+     * Controls the wrapping of the text.
+     */
+    wrap: {
+      true: {
+        '@layer': {
+          [components]: {
+            textWrap: 'wrap',
+          },
+        },
+      },
+      false: {
+        '@layer': {
+          [components]: {
+            textWrap: 'nowrap',
+          },
+        },
+      },
+      balance: {
+        '@layer': {
+          [components]: {
+            textWrap: 'balance',
+          },
+        },
+      },
+      pretty: {
+        '@layer': {
+          [components]: {
+            textWrap: 'pretty',
+          },
+        },
+      },
+    },
+
     /**
      * If true, use an ellipsis when the text overflows the element.
      */
-    ellipsis: {
+    truncate: {
       true: {
-        display: 'inline-block',
-        maxWidth: '100%',
-        overflow: 'hidden',
+        '@layer': {
+          [components]: {
+            display: 'inline-block',
+            maxWidth: '100%',
+            overflow: 'hidden',
+
+            textOverflow: 'ellipsis',
+          },
+        },
+      },
+    },
+
+    /**
+     * If provided, the text will be truncated and displayed with a maximum of
+     * the provided number of lines.
+     */
+    lineClamp: {
+      2: [
+        lineClamp,
+        {
+          '@layer': {
+            [components]: {
+              vars: {
+                [lineClampNumber]: '2',
+              },
+            },
+          },
+        },
+      ],
+      3: [
+        lineClamp,
+        {
+          '@layer': {
+            [components]: {
+              vars: {
+                [lineClampNumber]: '3',
+              },
+            },
+          },
+        },
+      ],
+      4: [
+        lineClamp,
+        {
+          '@layer': {
+            [components]: {
+              vars: {
+                [lineClampNumber]: '4',
+              },
+            },
+          },
+        },
+      ],
+      5: [
+        lineClamp,
+        {
+          '@layer': {
+            [components]: {
+              vars: {
+                [lineClampNumber]: '5',
+              },
+            },
+          },
+        },
+      ],
+    },
 
-        textOverflow: 'ellipsis',
+    /**
+     * Controls the alignment of the text.
+     */
+    align: {
+      start: {
+        '@layer': {
+          [components]: {
+            textAlign: 'start',
+          },
+        },
+      },
+      center: {
+        '@layer': {
+          [components]: {
+            textAlign: 'center',
+          },
+        },
+      },
+      end: {
+        '@layer': {
+          [components]: {
+            textAlign: 'end',
+          },
+        },
       },
     },
   },
 });
 
 export const textEllipsisWrapper = style({
-  whiteSpace: 'nowrap',
+  '@layer': {
+    [components]: {
+      whiteSpace: 'nowrap',
+    },
+  },
 });
 
 export type TextVariants = NonNullable<RecipeVariants<typeof textRecipe>>;

package/src/components/text/text.tsx

@@ -1,8 +1,4 @@
-import {
-  DistributiveOmit,
-  PolymorphicComponentProps,
-  getProp,
-} from '@kalink-ui/dibbly';
+import { PolymorphicComponentProps, getProp } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
@@ -10,48 +6,44 @@ import { TypographySize, TypographyVariant, typography } from '../../styles';
 
 import { TextVariants, textRecipe, textEllipsisWrapper } from './text.css';
 
-export type TextProps<TUse extends React.ElementType> = DistributiveOmit<
-  PolymorphicComponentProps<TUse>,
-  'children'
-> &
-  TextVariants & {
-    /**
-     * The size of the typography used to render the text.
-     */
-    size?: TypographySize;
+export type TextProps<TUse extends React.ElementType> =
+  PolymorphicComponentProps<TUse> &
+    TextVariants & {
+      /**
+       * The size of the typography used to render the text.
+       */
+      size?: TypographySize;
 
-    /**
-     * The typography variant used to render the text.
-     */
-    variant?: Extract<TypographyVariant, 'body' | 'caption' | 'label'>;
-
-    /**
-     * The text to render.
-     */
-    children: string;
-  };
+      /**
+       * The typography variant used to render the text.
+       */
+      variant?: TypographyVariant;
+    };
 
 export function Text<TUse extends ElementType>(props: TextProps<TUse>) {
   const {
     children,
     className,
-    ellipsis,
+    truncate,
+    lineClamp,
     size = 'medium',
     use: Comp = 'span',
     variant = 'body',
+    wrap,
+    align,
     ...rest
   } = props;
 
   return (
     <Comp
       className={clsx(
-        textRecipe({ ellipsis }),
         getProp(typography, `${variant}.${size}`),
+        textRecipe({ truncate, lineClamp, align, wrap }),
         className,
       )}
       {...rest}
     >
-      {ellipsis ? (
+      {truncate ? (
         <span className={textEllipsisWrapper}>{children}</span>
       ) : (
         children

package/src/styles/system-contract.css.ts

@@ -28,8 +28,6 @@ export const sys = createThemeContract({
   color: {
     background: null,
     foreground: null,
-    muted: null,
-    outline: null,
   },
 
   state: {

package/src/styles/typography.css.ts

@@ -1,5 +1,6 @@
 import { styleVariants } from '@vanilla-extract/css';
 
+import { base } from './layers.css';
 import { sys, TypographySize, TypographyVariant } from './system-contract.css';
 
 export const typography = Object.entries(sys.typography).reduce(
@@ -8,11 +9,15 @@ export const typography = Object.entries(sys.typography).reduce(
       ...acc,
       [key]: styleVariants(value, (variant) => {
         return {
-          fontFamily: variant.font,
-          fontWeight: variant.weight,
-          lineHeight: variant.lineHeight,
-          letterSpacing: variant.tracking,
-          fontSize: variant.size,
+          '@layer': {
+            [base]: {
+              fontFamily: variant.font,
+              fontWeight: variant.weight,
+              lineHeight: variant.lineHeight,
+              letterSpacing: variant.tracking,
+              fontSize: variant.size,
+            },
+          },
         };
       }),
     };

package/src/utils/arg-types/arg-types-from-recipe.ts

@@ -0,0 +1,36 @@
+import { type ComplexStyleRule } from '@vanilla-extract/css';
+import { type RuntimeFn } from '@vanilla-extract/recipes';
+
+type RecipeStyleRule = ComplexStyleRule | string;
+type VariantDefinitions = Record<string, RecipeStyleRule>;
+type VariantGroups = Record<string, VariantDefinitions>;
+
+export function argTypesFromRecipe(
+  recipe: RuntimeFn<VariantGroups>,
+  excludes: string[] = [],
+) {
+  return Object.entries(recipe.classNames.variants).reduce(
+    (acc, [name, variant]) => {
+      if (excludes.includes(name)) {
+        return acc;
+      }
+
+      const options = Object.keys(variant);
+      let control = options.length > 5 ? 'select' : 'radio';
+
+      if (options.length === 1 && options[0] === 'true') {
+        options.push('false');
+        control = 'boolean';
+      }
+
+      return {
+        ...acc,
+        [name]: {
+          control,
+          options,
+        },
+      };
+    },
+    {},
+  );
+}

package/src/utils/arg-types/arg-types-from-sprinkles.ts

@@ -0,0 +1,43 @@
+import { isObject } from '@kalink-ui/dibbly';
+
+type ArgTypesFromSprinklesProps = {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  props: Record<string, any>;
+  excludes?: string[];
+  category?: string;
+} & {};
+
+export function argTypesFromSprinkles({
+  props,
+  excludes = [],
+  category = 'Sprinkles props',
+}: ArgTypesFromSprinklesProps) {
+  return Object.entries(props).reduce((acc, [name]) => {
+    if (Array.isArray(excludes) && excludes.includes(name)) {
+      return acc;
+    }
+
+    let options = props[name] || [];
+    let control = 'select';
+
+    if (options.length === 1 && options[0] === 'true') {
+      options.push('false');
+      control = 'boolean';
+    }
+
+    if (isObject(options)) {
+      options = Object.fromEntries(
+        Object.keys(options).map((key) => [key, key]),
+      );
+    }
+
+    return {
+      ...acc,
+      [name]: {
+        control,
+        options,
+        table: { category },
+      },
+    };
+  }, {});
+}

package/src/utils/arg-types/common/composable.ts

@@ -0,0 +1,13 @@
+export const composable = {
+  children: {
+    control: false,
+    description: 'Content of the component.',
+    defaultValue: '',
+    table: {
+      category: 'Intrinsic props',
+      type: {
+        summary: 'ReactNode',
+      },
+    },
+  },
+};

package/src/utils/arg-types/common/index.ts

@@ -0,0 +1,4 @@
+export { composable } from './composable';
+export { polymorphic } from './polymorphic';
+export { referable } from './referable';
+export { stylable } from './stylable';

package/src/utils/arg-types/common/polymorphic.ts

@@ -0,0 +1,14 @@
+export const polymorphic = {
+  use: {
+    control: false,
+    description:
+      'The component used to render the root node of the component. Either a string to use an `JSX.IntrinsicElements` or a component reference to use a `React.ComponentType`',
+    defaultValue: '',
+    table: {
+      category: 'Intrinsic props',
+      type: {
+        summary: 'ElementType',
+      },
+    },
+  },
+};

package/src/utils/arg-types/common/referable.ts

@@ -0,0 +1,10 @@
+export const referable = {
+  ref: {
+    control: false,
+    description: 'Ref passed to the component root.',
+    defaultValue: '',
+    table: {
+      category: 'Intrinsic props',
+    },
+  },
+};

package/src/utils/arg-types/common/stylable.ts

@@ -0,0 +1,14 @@
+export const stylable = {
+  className: {
+    control: false,
+    description:
+      'A class name string passed to the component. Merged with the inner class names.',
+    defaultValue: '',
+    table: {
+      category: 'Intrinsic props',
+      type: {
+        summary: 'string',
+      },
+    },
+  },
+};

package/src/utils/arg-types/common-args.ts

@@ -0,0 +1,26 @@
+/* eslint-disable import/namespace */
+import * as CommonArgDefs from './common';
+
+export enum CommonArgs {
+  COMPOSABLE = 'composable',
+  POLYMORPHIC = 'polymorphic',
+  STYLABLE = 'stylable',
+  REFERABLE = 'referable',
+}
+
+export function commonArgs(args: CommonArgs[]) {
+  const argTypes: Partial<Record<string, object>> = {};
+  const knownArgs = Object.values(CommonArgs);
+
+  for (const arg of args) {
+    if (!knownArgs.includes(arg)) {
+      continue;
+    }
+
+    for (const argDef in CommonArgDefs[arg]) {
+      argTypes[argDef] = (CommonArgDefs[arg] as Record<string, object>)[argDef];
+    }
+  }
+
+  return argTypes;
+}

package/src/utils/arg-types/index.ts

@@ -0,0 +1,3 @@
+export { argTypesFromRecipe } from './arg-types-from-recipe';
+export { argTypesFromSprinkles } from './arg-types-from-sprinkles';
+export { commonArgs, CommonArgs } from './common-args';