@kalink-ui/seedly 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @kalink-ui/seedly
 
+## 0.8.1
+
+### Patch Changes
+
+- 6670251: Do not ignore arg-types files from npm package
+
+## 0.8.0
+
+### Minor Changes
+
+- fb11f86: Simplify package exports
+- abdbfa3: Create new Header and Button components
+
 ## 0.7.0
 
 ### Minor Changes

package/build-storybook.log

@@ -0,0 +1,67 @@
+
+> @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -10,22 +10,10 @@
     "url": "git+https://github.com/Kalink/kalink-ui.git"
   },
   "exports": {
-    "./box": "./src/components/box/index.ts",
-    "./button": "./src/components/button/index.ts",
-    "./center": "./src/components/center/index.ts",
-    "./cluster": "./src/components/cluster/index.ts",
-    "./cover": "./src/components/cover/index.ts",
-    "./frame": "./src/components/frame/index.ts",
-    "./grid": "./src/components/grid/index.ts",
-    "./sidebar": "./src/components/sidebar/index.ts",
-    "./stack": "./src/components/stack/index.ts",
-    "./switcher": "./src/components/switcher/index.ts",
+    ".": "./src/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"
+    "./styles/layers": "./src/styles/layers.css.ts"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.5",
@@ -50,6 +38,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.21.0",
     "react": "^19.0.0",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^19.0.0",
     "storybook": "^8.6.4",
     "type-fest": "^4.37.0",
@@ -57,9 +46,9 @@
     "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.5.0",
-    "@kalink-ui/typescript-config": "0.4.0"
+    "@kalink-ui/typescript-config": "0.4.0",
+    "@kalink-ui/eslint-config": "0.7.0",
+    "@kalink-ui/dibbly": "0.2.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",

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

@@ -1,15 +1,17 @@
 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';
-import { sys } from '../../styles/system-contract.css';
-import { mapContractVars } from '../../utils/map-contract-vars';
 
 export const colorForeground = createVar();
 export const colorBackground = createVar();
 
 export const boxRecipe = recipe({
   variants: {
+    /**
+     * The main variation of the box
+     */
     variant: {
       solid: {
         '@layer': {
@@ -39,6 +41,9 @@ export const boxRecipe = recipe({
       },
     },
 
+    /**
+     * The spacing between the box borders and its contents
+     */
     spacing: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {
@@ -47,6 +52,9 @@ export const boxRecipe = recipe({
       },
     })),
 
+    /**
+     * The elevation of the box
+     */
     elevation: mapContractVars(sys.elevation, (key) => ({
       '@layer': {
         [components]: {
@@ -55,6 +63,9 @@ export const boxRecipe = recipe({
       },
     })),
 
+    /**
+     * The radius of the box
+     */
     radius: mapContractVars(sys.shape.corner, (key) => ({
       '@layer': {
         [components]: {

package/src/components/box/box.tsx

@@ -1,31 +1,11 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
+import { ElementType } from 'react';
 
-import { boxRecipe, type BoxVariants } from './box.css';
+import { BoxVariants, boxRecipe } from './box.css';
 
-import type { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
-
-type BoxProps<TUse extends React.ElementType> =
-  PolymorphicComponentProps<TUse> & {
-    /**
-     * The main variation of the box
-     */
-    variant?: BoxVariants['variant'];
-
-    /**
-     * The spacing between the box borders and its contents
-     */
-    spacing?: BoxVariants['spacing'];
-
-    /**
-     * The elevation of the box
-     */
-    elevation?: BoxVariants['elevation'];
-
-    /**
-     * The radius of the box
-     */
-    radius?: BoxVariants['radius'];
-  };
+type BoxProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
+  BoxVariants;
 
 /**
  * A evenly spaced container for grouping related elements. Can
@@ -33,14 +13,14 @@ type BoxProps<TUse extends React.ElementType> =
  *
  * https://every-layout.dev/layouts/box
  */
-export const Box = <TUse extends React.ElementType = 'div'>({
+export function Box<TUse extends ElementType = 'div'>({
   spacing,
   radius,
   elevation,
   className,
   variant,
   ...props
-}: BoxProps<TUse>) => {
+}: BoxProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return (
@@ -52,4 +32,4 @@ export const Box = <TUse extends React.ElementType = 'div'>({
       {...rest}
     />
   );
-};
+}

package/src/components/button/button.css.ts

@@ -1,33 +1,366 @@
-import { createTheme } from '@vanilla-extract/css';
+import {
+  assignVars,
+  createThemeContract,
+  fallbackVar,
+  style,
+} from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys } from '../../styles/system-contract.css';
+import { sys, typography } from '../../styles';
+import { components } from '../../styles/layers.css';
+import { transition } from '../../styles/transition';
 
-export const [buttonTheme, buttonsys] = createTheme({
+export const buttonVars = createThemeContract({
+  borderRadius: null,
+  textTransform: null,
+});
+
+const vars = createThemeContract({
   color: {
-    light: sys.color.foreground,
-    dark: sys.color.background,
+    text: null,
+    background: null,
+  },
+  spacing: {
+    block: null,
+    inline: null,
+    inner: null,
+  },
+  border: {
+    width: null,
+    style: null,
+    color: null,
+  },
+  shadow: {
+    level: null,
   },
 });
 
 export const buttonRecipe = recipe({
   base: {
-    padding: '0',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: vars.spacing.inner,
+
+        paddingBlock: vars.spacing.block,
+        paddingInline: vars.spacing.inline,
+
+        color: vars.color.text,
+        textTransform: fallbackVar(buttonVars.textTransform, 'unset'),
+        backgroundColor: vars.color.background,
+        borderRadius: fallbackVar(
+          buttonVars.borderRadius,
+          sys.shape.corner.none,
+        ),
+        borderWidth: vars.border.width,
+        borderStyle: vars.border.style,
+        borderColor: vars.border.color,
+        boxShadow: vars.shadow.level,
 
-    backgroundColor: 'unset',
-    border: 'unset',
+        transition: transition(
+          ['background-color', 'box-shadow', 'border-color', 'color'],
+          { duration: 'short.3' },
+        ),
 
-    cursor: 'pointer',
+        ':disabled': {
+          cursor: 'not-allowed',
+        },
+      },
+    },
   },
+
   variants: {
+    /**
+     * The main variation of the button
+     */
     variant: {
       bare: {},
-      plain: {},
-      outline: {},
-      ghost: {},
-      link: {},
+      plain: {
+        '@layer': {
+          [components]: {
+            vars: {
+              ...assignVars(vars.color, {
+                text: sys.color.background,
+                background: sys.color.foreground,
+              }),
+              ...assignVars(vars.border, {
+                width: '1px',
+                style: 'solid',
+                color: 'transparent',
+              }),
+            },
+            ':hover': {
+              vars: {
+                [vars.color.background]:
+                  `color-mix(in srgb, ${sys.color.foreground}, ${sys.color.background} calc(100% * ${sys.state.hovered.opacity}))`,
+                [vars.shadow.level]: sys.elevation.minimal,
+              },
+            },
+            ':disabled': {
+              vars: {
+                ...assignVars(vars.color, {
+                  text: `color-mix(in srgb, ${sys.color.background} calc(100% * ${sys.state.muted.light}), transparent)`,
+                  background: `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+                }),
+                [vars.shadow.level]: sys.elevation.none,
+                [vars.border.color]: `transparent`,
+              },
+            },
+          },
+        },
+      },
+      outline: {
+        '@layer': {
+          [components]: {
+            vars: {
+              ...assignVars(vars.color, {
+                text: sys.color.foreground,
+                background: 'unset',
+              }),
+              ...assignVars(vars.border, {
+                width: '1px',
+                style: 'solid',
+                color: sys.color.foreground,
+              }),
+            },
+            selectors: {
+              '&:hover': {
+                vars: {
+                  [vars.color.background]:
+                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.hovered.opacity}), transparent)`,
+                },
+              },
+              '&:disabled': {
+                vars: {
+                  [vars.color.background]: 'unset',
+                  [vars.color.text]:
+                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+                  [vars.border.color]:
+                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+                },
+              },
+            },
+          },
+        },
+      },
+      ghost: {
+        '@layer': {
+          [components]: {
+            vars: {
+              ...assignVars(vars.color, {
+                text: sys.color.foreground,
+                background: 'unset',
+              }),
+              ...assignVars(vars.border, {
+                width: '1px',
+                style: 'solid',
+                color: 'transparent',
+              }),
+            },
+            selectors: {
+              '&:hover': {
+                vars: {
+                  [vars.color.background]:
+                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.hovered.opacity}), transparent)`,
+                },
+              },
+              '&:disabled': {
+                vars: {
+                  [vars.color.background]: 'unset',
+                  [vars.color.text]:
+                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+                },
+              },
+            },
+          },
+        },
+      },
+      link: {
+        '@layer': {
+          [components]: {
+            display: 'inline-flex',
+
+            textDecoration: 'none',
+
+            vars: {
+              ...assignVars(vars.color, {
+                text: sys.color.foreground,
+                background: 'unset',
+              }),
+              ...assignVars(vars.spacing, {
+                block: '0',
+                inline: '0',
+                inner: '0',
+              }),
+            },
+            selectors: {
+              '&:hover': {
+                textDecoration: 'underline',
+              },
+
+              '&:disabled': {
+                textDecoration: 'none',
+                vars: {
+                  [vars.color.text]:
+                    `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+
+    size: {
+      sm: {
+        '@layer': {
+          [components]: {
+            vars: assignVars(vars.spacing, {
+              block: sys.spacing[2],
+              inline: sys.spacing[3],
+              inner: sys.spacing[3],
+            }),
+          },
+        },
+      },
+      md: {
+        '@layer': {
+          [components]: {
+            vars: assignVars(vars.spacing, {
+              block: sys.spacing[2],
+              inline: sys.spacing[4],
+              inner: sys.spacing[4],
+            }),
+          },
+        },
+      },
+      lg: {
+        '@layer': {
+          [components]: {
+            vars: assignVars(vars.spacing, {
+              block: sys.spacing[3],
+              inline: sys.spacing[6],
+              inner: sys.spacing[6],
+            }),
+          },
+        },
+      },
     },
   },
+
+  compoundVariants: [
+    {
+      variants: {
+        variant: 'bare',
+        size: 'sm',
+      },
+      style: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [vars.spacing.block]: '0',
+              [vars.spacing.inline]: '0',
+            },
+          },
+        },
+      },
+    },
+    {
+      variants: {
+        variant: 'bare',
+        size: 'md',
+      },
+      style: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [vars.spacing.block]: '0',
+              [vars.spacing.inline]: '0',
+            },
+          },
+        },
+      },
+    },
+    {
+      variants: {
+        variant: 'bare',
+        size: 'lg',
+      },
+      style: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [vars.spacing.block]: '0',
+              [vars.spacing.inline]: '0',
+            },
+          },
+        },
+      },
+    },
+    {
+      variants: {
+        variant: 'link',
+        size: 'sm',
+      },
+      style: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [vars.spacing.block]: '0',
+              [vars.spacing.inline]: '0',
+            },
+          },
+        },
+      },
+    },
+    {
+      variants: {
+        variant: 'link',
+        size: 'md',
+      },
+      style: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [vars.spacing.block]: '0',
+              [vars.spacing.inline]: '0',
+            },
+          },
+        },
+      },
+    },
+    {
+      variants: {
+        variant: 'link',
+        size: 'lg',
+      },
+      style: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [vars.spacing.block]: '0',
+              [vars.spacing.inline]: '0',
+            },
+          },
+        },
+      },
+    },
+  ],
 });
 
+export const buttonLabel = recipe({
+  variants: {
+    size: {
+      sm: [typography.label.small],
+      md: [typography.label.medium],
+      lg: [typography.label.large],
+    },
+  },
+});
+
+export const buttonStartSlot = style({});
+export const buttonEndSlot = style({});
+
 export type ButtonVariants = NonNullable<RecipeVariants<typeof buttonRecipe>>;