@kalink-ui/seedly 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kalink-ui/seedly
 
+## 0.7.0
+
+### Minor Changes
+
+- 0c7e758: Change eslint config export strategy
+
+## 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.7.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/dibbly": "0.2.0",
+    "@kalink-ui/eslint-config": "0.5.0",
+    "@kalink-ui/typescript-config": "0.4.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> & {