@kalink-ui/seedly 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kalink-ui/seedly
 
+## 0.9.0
+
+### Minor Changes
+
+- 7fe5a15: Fix issues with TypeScript config and setup Github Actions
+
 ## 0.8.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.8.1",
+  "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.3.0",
     "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.7.0",
-    "@kalink-ui/dibbly": "0.2.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/build-storybook.log

@@ -1,67 +0,0 @@
-
-> @kalink-ui/seedly@0.8.0 build-storybook /Users/louis/dev/kalink-ui/packages/seedly
-> storybook build --output-dir\=/tmp/chromatic--31226-9S6bTYf09Tsv --webpack-stats-json\=/tmp/chromatic--31226-9S6bTYf09Tsv
-
-@storybook/core v8.6.4
-
-info => Cleaning outputDir: ../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv
-info => Loading presets
-info => Building manager..
-info => Manager built (106 ms)
-info => Building preview..
-vite v6.2.1 building for production...
-transforming...
-✓ 172 modules transformed.
-rendering chunks...
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/iframe.html                                       17.54 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/layers.css.ts-C66eHa0l.css                  0.07 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/text-or75WcbY.css                           0.11 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/frame-wUsZLpNa.css                          0.38 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/grid-svOAN5eX.css                           0.84 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/seed-BSZyHzsv.css                           0.86 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/stack-fHq0j-Mf.css                          0.94 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/sidebar-BfSQAuXb.css                        0.95 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/center-DXS2n_JN.css                         1.03 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cover-ClXyrnXr.css                          1.03 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cluster-BYRTQ7OR.css                        1.04 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/switcher-CaEmo08Z.css                       1.15 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/box-C2bbsHZY.css                            1.38 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/typography.css.ts-SSimWp8t.css              2.25 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/button-Bz5cKKrj.css                         2.70 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-CT6mYyLc.js                         0.16 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-BtThajRf.js                         0.17 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-DoMOH9fu.js                         0.23 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/vanilla-extract-dynamic.esm-BUlnp6I2.js     0.31 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-caVMbCIR.js                         0.69 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/typography.css-DQ-nfkim.js                  0.75 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/index-ogSvIofg.js                           0.77 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/stack-CyXomRKS.js                           0.78 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cluster.stories-CPq7agrP.js                 0.82 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cluster-Dy3GR3gU.js                         0.94 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/frame.stories-5pt_eAa4.js                   0.98 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/clsx-yWx7DIeZ.js                            1.09 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/common-args-BxOi7vI0.js                     1.16 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/heading.stories-DnTp5v4g.js                 1.18 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/center.stories-DVx4loHB.js                  1.24 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/box.stories-D4I0_iYq.js                     1.31 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/text.stories-B94F4zrO.js                    1.38 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/cover.stories-D5Tpwx4p.js                   1.44 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/switcher.stories-vZpJAqZC.js                1.62 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/grid.stories-Cg2miXZJ.js                    1.66 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/sidebar.stories-BsY8S9Y-.js                 1.87 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/createRuntimeFn-62c9670f.esm-BmIeg6ni.js    2.04 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/stack.stories-B3r3rUis.js                   2.14 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-A6H2BGQG.js                         3.40 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-xOAuwTm5.js                         4.87 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/seed.stories-OnvavYFI.js                    5.10 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-DY_pW_WS.js                         7.62 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/button.stories-CoUSjtPq.js                  7.87 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/preview-CuLlOZat.js                         8.08 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/entry-preview-B0dZ39Bz.js                  38.10 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/react-18-Uoay0tNS.js                      177.34 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/iframe-2U23pR0X.js                        210.78 kB
-../../../../../../tmp/chromatic--31226-9S6bTYf09Tsv/assets/index-0CFqCGht.js                         658.80 kB
-✓ built in 1.79s
-info => Preview built (2.14 s)
-info => preview stats written to /tmp/chromatic--31226-9S6bTYf09Tsv/preview-stats.json
-info => Output directory: /tmp/chromatic--31226-9S6bTYf09Tsv