@kalink-ui/seedly 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @kalink-ui/seedly
 
+## 0.8.0
+
+### Minor Changes
+
+- fb11f86: Simplify package exports
+- abdbfa3: Create new Header and Button components
+
 ## 0.7.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "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",
@@ -58,7 +47,7 @@
     "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/eslint-config": "0.7.0",
     "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {

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>>;

package/src/components/button/button.tsx

@@ -1,31 +1,46 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
+import { ComponentType, ReactNode } from 'react';
 
-import { Box } from '../box';
+import {
+  buttonEndSlot,
+  buttonLabel,
+  buttonRecipe,
+  buttonStartSlot,
+  ButtonVariants,
+} from './button.css';
 
-import { buttonRecipe, type ButtonVariants } from './button.css';
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+type ButtonTypes = 'button' | 'a' | ComponentType<any>;
 
-import type { PolymorphicComponentProps } from '@kalink-ui/dibbly/types';
-
-type ButtonProps<TUse extends React.ElementType> =
-  PolymorphicComponentProps<TUse> & {
-    /**
-     * The main variation of the button
-     */
-    variant?: ButtonVariants['variant'];
+type ButtonProps<TUse extends ButtonTypes> = PolymorphicComponentProps<TUse> &
+  ButtonVariants & {
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    children?: string;
   };
 
-export const Button = <TUse extends React.ElementType = 'button'>({
-  className,
-  variant,
-  ...props
-}: ButtonProps<TUse>) => {
-  const { use: Comp = 'button', ...rest } = props;
+export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
+  const {
+    use: Comp = 'button',
+    className,
+    variant,
+    children,
+    startSlot,
+    endSlot,
+    size = 'md',
+    ...rest
+  } = props;
 
   return (
-    <Box
-      use={Comp}
-      className={clsx(buttonRecipe({ variant }), className)}
-      {...rest}
-    />
+    <Comp
+      className={clsx(buttonRecipe({ variant, size }), className)}
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      {...(rest as any)}
+    >
+      {startSlot && <span className={clsx(buttonStartSlot)}>{startSlot}</span>}
+      <span className={clsx(buttonLabel({ size }))}>{children}</span>
+      {endSlot && <span className={clsx(buttonEndSlot)}>{endSlot}</span>}
+    </Comp>
   );
-};
+}

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

@@ -1,8 +1,7 @@
 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 centerRecipe = recipe({
   base: {
@@ -17,6 +16,9 @@ export const centerRecipe = recipe({
   },
 
   variants: {
+    /**
+     * Center align the text too with `text-align: center`
+     */
     andText: {
       true: {
         '@layer': {
@@ -27,6 +29,9 @@ export const centerRecipe = recipe({
       },
     },
 
+    /**
+     * Center child elements based on their content width
+     */
     intrinsic: {
       true: {
         '@layer': {
@@ -39,6 +44,9 @@ export const centerRecipe = recipe({
       },
     },
 
+    /**
+     * The minimum space on either side of the content
+     */
     gutters: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {