@kalink-ui/seedly 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kalink-ui/seedly
 
+## 0.6.0
+
+### Minor Changes
+
+- 87e2ae2: Create new Dibbly package to centralize utils and common types
+
 ## 0.5.0
 
 ### Minor Changes

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.5.0",
+  "version": "0.6.0",
+  "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
+  "author": "Louis Gollut",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kalink/kalink-ui.git"
+  },
   "exports": {
     "./box": "./src/components/box/index.ts",
     "./button": "./src/components/button/index.ts",
@@ -15,7 +21,10 @@
     "./stack": "./src/components/stack/index.ts",
     "./switcher": "./src/components/switcher/index.ts",
     "./styles": "./src/styles/index.ts",
+    "./styles/reset": "./src/styles/reset.css.ts",
+    "./styles/layers": "./src/styles/layers.css.ts",
     "./types": "./src/types/index.ts",
+    "./text": "./src/components/text/index.ts",
     "./utils": "./src/utils/index.ts"
   },
   "devDependencies": {
@@ -39,37 +48,39 @@
     "@vanilla-extract/sprinkles": "^1.6.3",
     "@vanilla-extract/vite-plugin": "^5.0.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "storybook": "^8.6.4",
-    "tsup": "^8.4.0",
     "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/eslint-config": "0.3.0",
-    "@kalink-ui/typescript-config": "0.2.0"
+    "@kalink-ui/typescript-config": "0.3.0",
+    "@kalink-ui/eslint-config": "0.4.0",
+    "@kalink-ui/dibbly": "0.1.0"
   },
   "peerDependencies": {
-    "@vanilla-extract/css": "^1",
-    "@vanilla-extract/css-utils": "^0.1",
-    "@vanilla-extract/dynamic": "^2",
-    "@vanilla-extract/recipes": "^0.5",
-    "@vanilla-extract/sprinkles": "^1",
-    "react": "^19",
-    "react-dom": "^19"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/dynamic": "^2.1.2",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "clsx": "^2.1.1"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "build-storybook": "storybook build",
     "dev": "storybook dev -p 6006 --no-open",
+    "test": "vitest",
     "tsc": "tsc --noEmit"
   }
 }

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

@@ -1,6 +1,7 @@
 import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -11,35 +12,55 @@ export const boxRecipe = recipe({
   variants: {
     variant: {
       solid: {
-        color: colorForeground,
-        backgroundColor: colorBackground,
+        '@layer': {
+          [components]: {
+            color: colorForeground,
+            backgroundColor: colorBackground,
+          },
 
-        vars: {
-          [colorForeground]: sys.color.foreground,
-          [colorBackground]: sys.color.background,
+          vars: {
+            [colorForeground]: sys.color.foreground,
+            [colorBackground]: sys.color.background,
+          },
         },
       },
 
       outline: {
-        color: colorBackground,
-        backgroundColor: 'transparent',
+        '@layer': {
+          [components]: {
+            color: colorBackground,
+            backgroundColor: 'transparent',
 
-        borderColor: colorBackground,
-        borderStyle: 'solid',
-        borderWidth: '1px',
+            borderColor: colorBackground,
+            borderStyle: 'solid',
+            borderWidth: '1px',
+          },
+        },
       },
     },
 
     spacing: mapContractVars(sys.spacing, (key) => ({
-      padding: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          padding: sys.spacing[key],
+        },
+      },
     })),
 
     elevation: mapContractVars(sys.elevation, (key) => ({
-      boxShadow: sys.elevation[key],
+      '@layer': {
+        [components]: {
+          boxShadow: sys.elevation[key],
+        },
+      },
     })),
 
     radius: mapContractVars(sys.shape.corner, (key) => ({
-      borderRadius: sys.shape.corner[key],
+      '@layer': {
+        [components]: {
+          borderRadius: sys.shape.corner[key],
+        },
+      },
     })),
   },
 });

package/src/components/box/box.tsx

@@ -2,8 +2,7 @@ import { clsx } from 'clsx';
 
 import { boxRecipe, type BoxVariants } from './box.css';
 
-import type { PolymorphicComponentProps } from '../../types/utils.types.js';
-
+import type { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 
 type BoxProps<TUse extends React.ElementType> =
   PolymorphicComponentProps<TUse> & {

package/src/components/button/button.tsx

@@ -4,8 +4,7 @@ import { Box } from '../box';
 
 import { buttonRecipe, type ButtonVariants } from './button.css';
 
-import type { PolymorphicComponentProps } from '../../types/utils.types';
-
+import type { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 
 type ButtonProps<TUse extends React.ElementType> =
   PolymorphicComponentProps<TUse> & {
@@ -16,7 +15,6 @@ type ButtonProps<TUse extends React.ElementType> =
   };
 
 export const Button = <TUse extends React.ElementType = 'button'>({
-  children,
   className,
   variant,
   ...props
@@ -24,12 +22,10 @@ export const Button = <TUse extends React.ElementType = 'button'>({
   const { use: Comp = 'button', ...rest } = props;
 
   return (
-    <Comp
-      use={Box}
+    <Box
+      use={Comp}
       className={clsx(buttonRecipe({ variant }), className)}
       {...rest}
-    >
-      {children}
-    </Comp>
+    />
   );
 };

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

@@ -1,33 +1,50 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
 export const centerRecipe = recipe({
   base: {
-    display: 'block',
-    boxSizing: 'content-box',
-    marginInline: 'auto',
-    maxInlineSize: sys.layout.measure,
+    '@layer': {
+      [components]: {
+        display: 'block',
+        boxSizing: 'content-box',
+        marginInline: 'auto',
+        maxInlineSize: sys.layout.measure,
+      },
+    },
   },
 
   variants: {
     andText: {
       true: {
-        textAlign: 'center',
+        '@layer': {
+          [components]: {
+            textAlign: 'center',
+          },
+        },
       },
     },
 
     intrinsic: {
       true: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
+        '@layer': {
+          [components]: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          },
+        },
       },
     },
 
     gutters: mapContractVars(sys.spacing, (key) => ({
-      paddingInline: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          paddingInline: sys.spacing[key],
+        },
+      },
     })),
   },
 });

package/src/components/center/center.tsx

@@ -1,8 +1,7 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { centerRecipe, CenterVariants } from './center.css';
 
 type CenterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {

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

@@ -1,57 +1,110 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
 export const clusterRecipe = recipe({
   base: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+      },
+    },
   },
 
   variants: {
     spacing: mapContractVars(sys.spacing, (key) => ({
-      gap: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          gap: sys.spacing[key],
+        },
+      },
     })),
 
     justify: {
       start: {
-        justifyContent: 'flex-start',
+        '@layer': {
+          [components]: {
+            justifyContent: 'flex-start',
+          },
+        },
       },
       end: {
-        justifyContent: 'flex-end',
+        '@layer': {
+          [components]: {
+            justifyContent: 'flex-end',
+          },
+        },
       },
       center: {
-        justifyContent: 'center',
+        '@layer': {
+          [components]: {
+            justifyContent: 'center',
+          },
+        },
       },
       spaceBetween: {
-        justifyContent: 'space-between',
+        '@layer': {
+          [components]: {
+            justifyContent: 'space-between',
+          },
+        },
       },
       spaceAround: {
-        justifyContent: 'space-around',
+        '@layer': {
+          [components]: {
+            justifyContent: 'space-around',
+          },
+        },
       },
       spaceEvenly: {
-        justifyContent: 'space-evenly',
+        '@layer': {
+          [components]: {
+            justifyContent: 'space-evenly',
+          },
+        },
       },
     },
 
     align: {
       start: {
-        alignItems: 'flex-start',
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-start',
+          },
+        },
       },
       end: {
-        alignItems: 'flex-end',
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-end',
+          },
+        },
       },
       center: {
-        alignItems: 'center',
+        '@layer': {
+          [components]: {
+            alignItems: 'center',
+          },
+        },
       },
       stretch: {
-        alignItems: 'stretch',
+        '@layer': {
+          [components]: {
+            alignItems: 'stretch',
+          },
+        },
       },
       baseline: {
-        alignItems: 'baseline',
+        '@layer': {
+          [components]: {
+            alignItems: 'baseline',
+          },
+        },
       },
     },
   },

package/src/components/cluster/cluster.tsx

@@ -1,8 +1,7 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { clusterRecipe, ClusterVariants } from './cluster.css';
 
 type ClusterProps<TUse extends ElementType> =

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

@@ -1,6 +1,7 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -9,52 +10,80 @@ export const minSizeVar = createVar();
 
 export const coverRecipe = recipe({
   base: {
-    display: 'flex',
-    flexDirection: 'column',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexDirection: 'column',
 
-    minBlockSize: minSizeVar,
-    padding: spaceVar,
+        minBlockSize: minSizeVar,
+        padding: spaceVar,
 
-    vars: {
-      [minSizeVar]: '100vh',
+        vars: {
+          [minSizeVar]: '100vh',
+        },
+      },
     },
   },
 
   variants: {
     spacing: mapContractVars(sys.spacing, (key) => ({
-      sys: {
-        [spaceVar]: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          vars: {
+            [spaceVar]: sys.spacing[key],
+          },
+        },
       },
     })),
 
     noPad: {
       true: {
-        padding: 0,
+        '@layer': {
+          [components]: {
+            padding: 0,
+          },
+        },
       },
     },
   },
 });
 
 globalStyle(`${coverRecipe.classNames.base} > *`, {
-  marginBlock: spaceVar,
+  '@layer': {
+    [components]: {
+      marginBlock: spaceVar,
+    },
+  },
 });
 
 globalStyle(
   `${coverRecipe.classNames.base} > :first-child:not([data-cover-center])`,
   {
-    marginBlockStart: 0,
+    '@layer': {
+      [components]: {
+        marginBlockStart: 0,
+      },
+    },
   },
 );
 
 globalStyle(
   `${coverRecipe.classNames.base} > :last-child:not([data-cover-center])`,
   {
-    marginBlockEnd: 0,
+    '@layer': {
+      [components]: {
+        marginBlockEnd: 0,
+      },
+    },
   },
 );
 
 globalStyle(`${coverRecipe.classNames.base} > [data-cover-center]`, {
-  marginBlock: 'auto',
+  '@layer': {
+    [components]: {
+      marginBlock: 'auto',
+    },
+  },
 });
 
 export type CoverVariants = NonNullable<RecipeVariants<typeof coverRecipe>>;

package/src/components/cover/cover.tsx

@@ -1,11 +1,10 @@
 'use client';
 
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { coverRecipe, CoverVariants, minSizeVar } from './cover.css';
 
 type CoverProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {

package/src/components/frame/frame.css.ts

@@ -1,16 +1,22 @@
 import { createVar, globalStyle, style } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
+
 const ratioVar = createVar();
 
 const baseFrame = style({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+  '@layer': {
+    [components]: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
 
-  overflow: 'hidden',
+      overflow: 'hidden',
 
-  aspectRatio: ratioVar,
+      aspectRatio: ratioVar,
+    },
+  },
 });
 
 export const frameRecipe = recipe({
@@ -19,33 +25,57 @@ export const frameRecipe = recipe({
   variants: {
     ratio: {
       '1:1': {
-        vars: {
-          [ratioVar]: '1 / 1',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '1 / 1',
+            },
+          },
         },
       },
       '3:2': {
-        vars: {
-          [ratioVar]: '3 / 2',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '3 / 2',
+            },
+          },
         },
       },
       '2:3': {
-        vars: {
-          [ratioVar]: '2 / 3',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '2 / 3',
+            },
+          },
         },
       },
       '4:3': {
-        vars: {
-          [ratioVar]: '4 / 3',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '4 / 3',
+            },
+          },
         },
       },
       '16:9': {
-        vars: {
-          [ratioVar]: '16 / 9',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '16 / 9',
+            },
+          },
         },
       },
       '9:16': {
-        vars: {
-          [ratioVar]: '9 / 16',
+        '@layer': {
+          [components]: {
+            vars: {
+              [ratioVar]: '9 / 16',
+            },
+          },
         },
       },
     },
@@ -53,9 +83,13 @@ export const frameRecipe = recipe({
 });
 
 globalStyle(`${baseFrame} > img, ${baseFrame} > video`, {
-  inlineSize: '100%',
-  blockSize: '100%',
-  objectFit: 'cover',
+  '@layer': {
+    [components]: {
+      inlineSize: '100%',
+      blockSize: '100%',
+      objectFit: 'cover',
+    },
+  },
 });
 
 export type FrameVariants = NonNullable<RecipeVariants<typeof frameRecipe>>;

package/src/components/frame/frame.tsx

@@ -1,8 +1,7 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { frameRecipe, FrameVariants } from './frame.css';
 
 type FrameProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {

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

@@ -1,6 +1,7 @@
 import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -8,17 +9,25 @@ export const minSizeVar = createVar();
 
 export const gridRecipe = recipe({
   base: {
-    display: 'grid',
-    gridTemplateColumns: `repeat(auto-fill, minmax(min(${minSizeVar}, 100%), 1fr))`,
+    '@layer': {
+      [components]: {
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(min(${minSizeVar}, 100%), 1fr))`,
 
-    vars: {
-      [minSizeVar]: '250px',
+        vars: {
+          [minSizeVar]: '250px',
+        },
+      },
     },
   },
 
   variants: {
     spacing: mapContractVars(sys.spacing, (key) => ({
-      gridGap: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          gridGap: sys.spacing[key],
+        },
+      },
     })),
   },
 });

package/src/components/grid/grid.tsx

@@ -1,11 +1,10 @@
 'use client';
 
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { gridRecipe, GridVariants, minSizeVar } from './grid.css';
 
 type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {

package/src/components/sidebar/sidebar.css.ts

@@ -1,6 +1,7 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -9,22 +10,34 @@ export const contentMinWidthVar = createVar();
 
 export const sidebarRecipe = recipe({
   base: {
-    display: 'flex',
-    flexWrap: 'wrap',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexWrap: 'wrap',
 
-    vars: {
-      [contentMinWidthVar]: '50%',
+        vars: {
+          [contentMinWidthVar]: '50%',
+        },
+      },
     },
   },
 
   variants: {
     spacing: mapContractVars(sys.spacing, (key) => ({
-      gap: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          gap: sys.spacing[key],
+        },
+      },
     })),
 
     noStretch: {
       true: {
-        alignItems: 'flex-start',
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-start',
+          },
+        },
       },
     },
 
@@ -46,23 +59,39 @@ export const sidebarRecipe = recipe({
 });
 
 globalStyle(`${sidebarRecipe.classNames.base} > *`, {
-  flexGrow: 1,
+  '@layer': {
+    [components]: {
+      flexGrow: 1,
+    },
+  },
 });
 
 globalStyle(`${sidebarRecipe.classNames.variants.sideWidth.true} > *`, {
-  flexBasis: sideWidthVar,
+  '@layer': {
+    [components]: {
+      flexBasis: sideWidthVar,
+    },
+  },
 });
 
 globalStyle(`${sidebarRecipe.classNames.variants.side.left} > :last-child`, {
-  flexBasis: 0,
-  flexGrow: 999,
-  minInlineSize: contentMinWidthVar,
+  '@layer': {
+    [components]: {
+      flexBasis: 0,
+      flexGrow: 999,
+      minInlineSize: contentMinWidthVar,
+    },
+  },
 });
 
 globalStyle(`${sidebarRecipe.classNames.variants.side.right} > :first-child`, {
-  flexBasis: 0,
-  flexGrow: 999,
-  minInlineSize: contentMinWidthVar,
+  '@layer': {
+    [components]: {
+      flexBasis: 0,
+      flexGrow: 999,
+      minInlineSize: contentMinWidthVar,
+    },
+  },
 });
 
 export type SidebarVariants = NonNullable<RecipeVariants<typeof sidebarRecipe>>;

package/src/components/sidebar/sidebar.tsx

@@ -1,11 +1,10 @@
 'use client';
 
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import {
   contentMinWidthVar,
   sidebarRecipe,

package/src/components/stack/stack.css.ts

@@ -1,6 +1,7 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -8,9 +9,13 @@ const spacing = createVar();
 
 export const stackRecipe = recipe({
   base: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+      },
+    },
   },
 
   variants: {
@@ -19,8 +24,12 @@ export const stackRecipe = recipe({
     },
 
     spacing: mapContractVars(sys.spacing, (key) => ({
-      vars: {
-        [spacing]: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          vars: {
+            [spacing]: sys.spacing[key],
+          },
+        },
       },
     })),
   },
@@ -29,7 +38,11 @@ export const stackRecipe = recipe({
 globalStyle(
   `${stackRecipe.classNames.base} > * + *, ${stackRecipe.classNames.variants.recursive.true} * + *`,
   {
-    marginBlockStart: spacing,
+    '@layer': {
+      [components]: {
+        marginBlockStart: spacing,
+      },
+    },
   },
 );
 

package/src/components/stack/stack.tsx

@@ -1,8 +1,7 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { stackRecipe, StackVariants } from './stack.css';
 
 type StackProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {

package/src/components/switcher/switcher.css.ts

@@ -1,6 +1,7 @@
 import { createVar, globalStyle } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { components } from '../../styles/layers.css';
 import { sys } from '../../styles/system-contract.css';
 import { mapContractVars } from '../../utils/map-contract-vars';
 
@@ -9,11 +10,15 @@ export const limitVar = createVar();
 
 export const switcherRecipe = recipe({
   base: {
-    display: 'flex',
-    flexWrap: 'wrap',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexWrap: 'wrap',
 
-    vars: {
-      [thresholdVar]: sys.layout.measure,
+        vars: {
+          [thresholdVar]: sys.layout.measure,
+        },
+      },
     },
   },
 
@@ -22,7 +27,11 @@ export const switcherRecipe = recipe({
      * The space (margin) between the child elements
      */
     spacing: mapContractVars(sys.spacing, (key) => ({
-      gap: sys.spacing[key],
+      '@layer': {
+        [components]: {
+          gap: sys.spacing[key],
+        },
+      },
     })),
 
     /**
@@ -39,8 +48,12 @@ export const switcherRecipe = recipe({
 });
 
 globalStyle(`${switcherRecipe.classNames.base} > *`, {
-  flexBasis: `calc((${thresholdVar} - 100%) * 999)`,
-  flexGrow: 1,
+  '@layer': {
+    [components]: {
+      flexBasis: `calc((${thresholdVar} - 100%) * 999)`,
+      flexGrow: 1,
+    },
+  },
 });
 
 globalStyle(
@@ -48,7 +61,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[2]
   } > :nth-last-child(n+3) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 
@@ -57,7 +74,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[3]
   } > :nth-last-child(n+4) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 
@@ -66,7 +87,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[4]
   } > :nth-last-child(n+5) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 
@@ -75,7 +100,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[5]
   } > :nth-last-child(n+6) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 
@@ -84,7 +113,11 @@ globalStyle(
     switcherRecipe.classNames.variants.limit[6]
   } > :nth-last-child(n+7) ~ *`,
   {
-    flexBasis: '100%',
+    '@layer': {
+      [components]: {
+        flexBasis: '100%',
+      },
+    },
   },
 );
 

package/src/components/switcher/switcher.tsx

@@ -1,11 +1,10 @@
 'use client';
 
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { PolymorphicComponentProps } from '../../types/utils.types';
-
 import { switcherRecipe, SwitcherVariants, thresholdVar } from './switcher.css';
 
 type SwitcherProps<TUse extends ElementType> =

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export { Text } from './text';

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

@@ -0,0 +1,15 @@
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+export const textRecipe = recipe({
+  variants: {
+    ellipsis: {
+      true: {
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+      },
+    },
+  },
+});
+
+export type TextVariants = NonNullable<RecipeVariants<typeof textRecipe>>;

package/src/components/text/text.tsx

@@ -0,0 +1,43 @@
+import { getProp } from '@kalink-ui/dibbly';
+import { PathsOf, PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { typography as typographyVariants } from '../../styles/typography.css';
+import { Box } from '../box';
+
+import { textRecipe, type TextVariants } from './text.css';
+
+type TextProps<TUse extends React.ElementType> =
+  PolymorphicComponentProps<TUse> & {
+    /**
+     * The typography used to render the text.
+     */
+    typography?: PathsOf<typeof typographyVariants>;
+    /**
+     * If true, use an ellipsis when the text overflows the element.
+     */
+    ellipsis?: TextVariants['ellipsis'];
+  };
+
+export function Text<TUse extends ElementType>({
+  className,
+  typography,
+  ellipsis,
+  ...props
+}: TextProps<TUse>) {
+  const { use = 'span', ...rest } = props;
+
+  return (
+    <Box
+      // See `frontend/components/box/box.types.ts` for why the cast is required
+      use={use as TextProps<TUse>['use']}
+      className={clsx(
+        textRecipe({ ellipsis }),
+        typography && getProp(typographyVariants, typography),
+        className,
+      )}
+      {...rest}
+    />
+  );
+}

package/src/styles/layers.css.ts

@@ -0,0 +1,6 @@
+import { globalLayer } from '@vanilla-extract/css';
+
+export const base = globalLayer('base');
+export const components = globalLayer('components');
+export const utilities = globalLayer('utilities');
+export const overrides = globalLayer('overrides');

package/src/styles/reset.css.ts

@@ -0,0 +1,116 @@
+/**
+ * Minimal reset based on Josh's Custom CSS Reset
+ * https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+import { globalStyle } from '@vanilla-extract/css';
+
+import { base } from './layers.css';
+
+globalStyle('*, *::before, *::after', {
+  '@layer': {
+    [base]: {
+      boxSizing: 'border-box',
+    },
+  },
+});
+
+globalStyle('*', {
+  '@layer': {
+    [base]: {
+      margin: 0,
+    },
+  },
+});
+
+globalStyle('body', {
+  '@layer': {
+    [base]: {
+      WebkitFontSmoothing: 'antialiased',
+    },
+  },
+});
+
+globalStyle('img, picture, video, canvas, svg', {
+  '@layer': {
+    [base]: {
+      display: 'block',
+      maxWidth: '100%',
+    },
+  },
+});
+
+globalStyle('input, button, textarea, select', {
+  '@layer': {
+    [base]: {
+      font: 'inherit',
+    },
+  },
+});
+
+globalStyle('p, h1, h2, h3, h4, h5, h6', {
+  '@layer': {
+    [base]: {
+      overflowWrap: 'break-word',
+    },
+  },
+});
+
+globalStyle('p', {
+  '@layer': {
+    [base]: {
+      textWrap: 'pretty',
+    },
+  },
+});
+
+globalStyle('h1, h2, h3, h4, h5, h6', {
+  '@layer': {
+    [base]: {
+      textWrap: 'balance',
+    },
+  },
+});
+
+globalStyle('button', {
+  '@layer': {
+    [base]: {
+      border: 'none',
+
+      cursor: 'pointer',
+    },
+  },
+});
+
+globalStyle('a', {
+  '@layer': {
+    [base]: {
+      textDecoration: 'none',
+    },
+  },
+});
+
+globalStyle('fieldset', {
+  '@layer': {
+    [base]: {
+      padding: 0,
+
+      border: 'none',
+    },
+  },
+});
+
+globalStyle('legend', {
+  '@layer': {
+    [base]: {
+      width: '100%',
+    },
+  },
+});
+
+globalStyle('pre', {
+  '@layer': {
+    [base]: {
+      whiteSpace: 'pre-wrap',
+    },
+  },
+});

package/src/styles/seed/seed.tsx

@@ -6,7 +6,7 @@ import {
   type SprinklesFnBase,
 } from '../../utils/extract-sprinkles-props';
 
-import type { PolymorphicComponentProps } from '../../types/utils.types';
+import type { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
 import type { ElementType } from 'react';
 
 /**
@@ -22,10 +22,10 @@ export type SeedProps<
   TSprinklesFn extends SprinklesFnBase,
 > = PolymorphicComponentProps<TUse> & GetSprinkles<TSprinklesFn>;
 
-export interface CreateSeedParams<SprinklesFn> {
+export type CreateSeedParams<SprinklesFn> = {
   sprinkles: SprinklesFn;
   defaultClassName?: string;
-}
+};
 
 export function plantSeed<SprinklesFn extends SprinklesFnBase>({
   sprinkles,

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

@@ -1,12 +1,12 @@
 import { createThemeContract } from '@vanilla-extract/css';
 
-const typeContract = {
+export const typeContract = {
   font: null,
   weight: null,
   lineHeight: null,
   tracking: null,
   size: null,
-};
+} as const;
 
 export const sys = createThemeContract({
   layout: {

package/src/styles/typography.css.ts

@@ -0,0 +1,23 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+import { sys } from './system-contract.css';
+
+type TypographySize = 'large' | 'medium' | 'small';
+
+export const typography = Object.entries(sys.typography).reduce(
+  (acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: styleVariants(value, (variant) => {
+        return {
+          fontFamily: variant.font,
+          fontWeight: variant.weight,
+          lineHeight: variant.lineHeight,
+          letterSpacing: variant.tracking,
+          fontSize: variant.size,
+        };
+      }),
+    };
+  },
+  {} as Record<keyof typeof sys.typography, Record<TypographySize, string>>,
+);

package/src/utils/extract-sprinkles-props.ts

@@ -1,6 +1,7 @@
 import type { SprinklesProperties } from '@vanilla-extract/sprinkles';
 import type { UnknownRecord } from 'type-fest';
 
+/* eslint-disable-next-line @typescript-eslint/consistent-type-definitions */
 export interface SprinklesFnBase {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   (...args: any): string;

package/src/utils/index.ts

@@ -1,3 +1,2 @@
 export { extractSprinklesProps } from './extract-sprinkles-props';
-export { isObject } from './is-object';
 export { mapContractVars } from './map-contract-vars';

package/src/types/index.ts

@@ -1,5 +0,0 @@
-export {
-  type PolymorphicComponentProps,
-  type DistributiveOmit,
-  type UnwrapArray,
-} from './utils.types';

package/src/types/utils.types.ts

@@ -1,15 +0,0 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any
-  ? Omit<T, TOmitted>
-  : never;
-
-export type UnwrapArray<R> = R extends unknown[] ? UnwrapArray<R[number]> : R;
-
-export type PolymorphicComponentProps<TUse extends ElementType> = {
-  use?: TUse;
-} & DistributiveOmit<
-  ComponentPropsWithRef<ElementType extends TUse ? 'div' : TUse>,
-  'use'
->;

package/src/utils/is-object.ts

@@ -1,3 +0,0 @@
-export const isObject = <T extends object>(value: unknown): value is T => {
-  return !!value && typeof value === "object" && !Array.isArray(value);
-};