@kalink-ui/seedly 0.8.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @kalink-ui/seedly
 
+## 0.10.0
+
+### Minor Changes
+
+- 84903c1: Add multiple components
+
+  - ButtonIcon
+  - TextField
+  - Select
+  - Textarea
+  - Label
+  - Loader
+  - LoaderOverly
+
+## 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.10.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",
+    "typescript": "^5.8.2",
     "vite": "^6.2.1",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.8",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.7.0",
-    "@kalink-ui/dibbly": "0.2.0"
+    "@kalink-ui/dibbly": "0.4.0",
+    "@kalink-ui/eslint-config": "0.9.0",
+    "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",
@@ -57,19 +57,27 @@
     "@vanilla-extract/recipes": "^0.5.5",
     "@vanilla-extract/sprinkles": "^1.6.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "typescript": "^5.8.2"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-scroll-area": "^1.2.6",
+    "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-slot": "^1.2.0",
     "clsx": "^2.1.1"
   },
   "publishConfig": {
     "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,11 +1,7 @@
-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();
+import { mapContractVars, sys } from '@kalink-ui/seedly/styles';
+import { components } from '@kalink-ui/seedly/styles/layers';
 
 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/button/button.css.ts

@@ -13,9 +13,6 @@ import { transition } from '../../styles/transition';
 export const buttonVars = createThemeContract({
   borderRadius: null,
   textTransform: null,
-});
-
-const vars = createThemeContract({
   color: {
     text: null,
     background: null,
@@ -42,22 +39,22 @@ export const buttonRecipe = recipe({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: vars.spacing.inner,
+        gap: buttonVars.spacing.inner,
 
-        paddingBlock: vars.spacing.block,
-        paddingInline: vars.spacing.inline,
+        paddingBlock: buttonVars.spacing.block,
+        paddingInline: buttonVars.spacing.inline,
 
-        color: vars.color.text,
+        color: buttonVars.color.text,
         textTransform: fallbackVar(buttonVars.textTransform, 'unset'),
-        backgroundColor: vars.color.background,
+        backgroundColor: buttonVars.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,
+        borderWidth: buttonVars.border.width,
+        borderStyle: buttonVars.border.style,
+        borderColor: buttonVars.border.color,
+        boxShadow: buttonVars.shadow.level,
 
         transition: transition(
           ['background-color', 'box-shadow', 'border-color', 'color'],
@@ -81,11 +78,11 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              ...assignVars(vars.color, {
+              ...assignVars(buttonVars.color, {
                 text: sys.color.background,
                 background: sys.color.foreground,
               }),
-              ...assignVars(vars.border, {
+              ...assignVars(buttonVars.border, {
                 width: '1px',
                 style: 'solid',
                 color: 'transparent',
@@ -93,19 +90,19 @@ export const buttonRecipe = recipe({
             },
             ':hover': {
               vars: {
-                [vars.color.background]:
+                [buttonVars.color.background]:
                   `color-mix(in srgb, ${sys.color.foreground}, ${sys.color.background} calc(100% * ${sys.state.hovered.opacity}))`,
-                [vars.shadow.level]: sys.elevation.minimal,
+                [buttonVars.shadow.level]: sys.elevation.minimal,
               },
             },
             ':disabled': {
               vars: {
-                ...assignVars(vars.color, {
+                ...assignVars(buttonVars.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`,
+                [buttonVars.shadow.level]: sys.elevation.none,
+                [buttonVars.border.color]: `transparent`,
               },
             },
           },
@@ -115,11 +112,11 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              ...assignVars(vars.color, {
+              ...assignVars(buttonVars.color, {
                 text: sys.color.foreground,
                 background: 'unset',
               }),
-              ...assignVars(vars.border, {
+              ...assignVars(buttonVars.border, {
                 width: '1px',
                 style: 'solid',
                 color: sys.color.foreground,
@@ -128,16 +125,16 @@ export const buttonRecipe = recipe({
             selectors: {
               '&:hover': {
                 vars: {
-                  [vars.color.background]:
+                  [buttonVars.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]:
+                  [buttonVars.color.background]: 'unset',
+                  [buttonVars.color.text]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
-                  [vars.border.color]:
+                  [buttonVars.border.color]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
                 },
               },
@@ -149,11 +146,11 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              ...assignVars(vars.color, {
+              ...assignVars(buttonVars.color, {
                 text: sys.color.foreground,
                 background: 'unset',
               }),
-              ...assignVars(vars.border, {
+              ...assignVars(buttonVars.border, {
                 width: '1px',
                 style: 'solid',
                 color: 'transparent',
@@ -162,14 +159,14 @@ export const buttonRecipe = recipe({
             selectors: {
               '&:hover': {
                 vars: {
-                  [vars.color.background]:
+                  [buttonVars.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]:
+                  [buttonVars.color.background]: 'unset',
+                  [buttonVars.color.text]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
                 },
               },
@@ -185,11 +182,11 @@ export const buttonRecipe = recipe({
             textDecoration: 'none',
 
             vars: {
-              ...assignVars(vars.color, {
+              ...assignVars(buttonVars.color, {
                 text: sys.color.foreground,
                 background: 'unset',
               }),
-              ...assignVars(vars.spacing, {
+              ...assignVars(buttonVars.spacing, {
                 block: '0',
                 inline: '0',
                 inner: '0',
@@ -203,7 +200,7 @@ export const buttonRecipe = recipe({
               '&:disabled': {
                 textDecoration: 'none',
                 vars: {
-                  [vars.color.text]:
+                  [buttonVars.color.text]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
                 },
               },
@@ -217,7 +214,7 @@ export const buttonRecipe = recipe({
       sm: {
         '@layer': {
           [components]: {
-            vars: assignVars(vars.spacing, {
+            vars: assignVars(buttonVars.spacing, {
               block: sys.spacing[2],
               inline: sys.spacing[3],
               inner: sys.spacing[3],
@@ -228,7 +225,7 @@ export const buttonRecipe = recipe({
       md: {
         '@layer': {
           [components]: {
-            vars: assignVars(vars.spacing, {
+            vars: assignVars(buttonVars.spacing, {
               block: sys.spacing[2],
               inline: sys.spacing[4],
               inner: sys.spacing[4],
@@ -239,7 +236,7 @@ export const buttonRecipe = recipe({
       lg: {
         '@layer': {
           [components]: {
-            vars: assignVars(vars.spacing, {
+            vars: assignVars(buttonVars.spacing, {
               block: sys.spacing[3],
               inline: sys.spacing[6],
               inner: sys.spacing[6],
@@ -260,8 +257,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -276,8 +273,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -292,8 +289,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -308,8 +305,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -324,8 +321,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -340,8 +337,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },

package/src/components/button/button.tsx

@@ -11,14 +11,15 @@ import {
 } from './button.css';
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-type ButtonTypes = 'button' | 'a' | ComponentType<any>;
+export type ButtonTypes = 'button' | 'a' | ComponentType<any>;
 
-type ButtonProps<TUse extends ButtonTypes> = PolymorphicComponentProps<TUse> &
-  ButtonVariants & {
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
-    children?: string;
-  };
+export type ButtonProps<TUse extends ButtonTypes> =
+  PolymorphicComponentProps<TUse> &
+    ButtonVariants & {
+      startSlot?: ReactNode;
+      endSlot?: ReactNode;
+      children?: string;
+    };
 
 export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
   const {
@@ -39,7 +40,9 @@ export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
       {...(rest as any)}
     >
       {startSlot && <span className={clsx(buttonStartSlot)}>{startSlot}</span>}
-      <span className={clsx(buttonLabel({ size }))}>{children}</span>
+      {children && (
+        <span className={clsx(buttonLabel({ size }))}>{children}</span>
+      )}
       {endSlot && <span className={clsx(buttonEndSlot)}>{endSlot}</span>}
     </Comp>
   );

package/src/components/button/index.ts

@@ -1,2 +1,2 @@
-export { Button } from './button';
+export { Button, type ButtonProps, type ButtonTypes } from './button';
 export { buttonRecipe, type ButtonVariants } from './button.css';

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

@@ -0,0 +1,90 @@
+import { assignVars, globalStyle } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+import { buttonRecipe, buttonVars } from '../button/button.css';
+
+export const buttonIcon = recipe({
+  base: [buttonRecipe.classNames.base],
+
+  variants: {
+    variant: buttonRecipe.classNames.variants.variant,
+    size: {
+      sm: {
+        '@layer': {
+          [components]: {
+            vars: assignVars(buttonVars.spacing, {
+              block: sys.spacing[2],
+              inline: sys.spacing[2],
+              inner: sys.spacing[2],
+            }),
+          },
+        },
+      },
+      md: {
+        '@layer': {
+          [components]: {
+            vars: assignVars(buttonVars.spacing, {
+              block: sys.spacing[2],
+              inline: sys.spacing[2],
+              inner: sys.spacing[2],
+            }),
+          },
+        },
+      },
+      lg: {
+        '@layer': {
+          [components]: {
+            vars: assignVars(buttonVars.spacing, {
+              block: sys.spacing[3],
+              inline: sys.spacing[3],
+              inner: sys.spacing[3],
+            }),
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'ghost',
+    size: 'md',
+  },
+});
+
+globalStyle(`${buttonIcon.classNames.variants.size.sm} > svg`, {
+  width: calc.multiply(
+    sys.typography.label.small.lineHeight,
+    sys.typography.label.small.size,
+  ),
+  height: calc.multiply(
+    sys.typography.label.small.lineHeight,
+    sys.typography.label.small.size,
+  ),
+});
+
+globalStyle(`${buttonIcon.classNames.variants.size.md} > svg`, {
+  width: calc.multiply(
+    sys.typography.label.medium.lineHeight,
+    sys.typography.label.medium.size,
+  ),
+  height: calc.multiply(
+    sys.typography.label.medium.lineHeight,
+    sys.typography.label.medium.size,
+  ),
+});
+
+globalStyle(`${buttonIcon.classNames.variants.size.lg} > svg`, {
+  width: calc.multiply(
+    sys.typography.label.large.lineHeight,
+    sys.typography.label.large.size,
+  ),
+  height: calc.multiply(
+    sys.typography.label.large.lineHeight,
+    sys.typography.label.large.size,
+  ),
+});
+
+export type ButtonIconVariants = NonNullable<RecipeVariants<typeof buttonIcon>>;

package/src/components/button-icon/button-icon.tsx

@@ -0,0 +1,23 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
+
+import { ButtonTypes } from '../button/button';
+
+import { buttonIcon, ButtonIconVariants } from './button-icon.css';
+
+export type ButtonIconProps<TUse extends ButtonTypes> =
+  PolymorphicComponentProps<TUse> & ButtonIconVariants;
+
+export function ButtonIcon<TUse extends ButtonTypes>(
+  props: ButtonIconProps<TUse>,
+) {
+  const { use: Comp = 'button', className, variant, size, ...rest } = props;
+
+  return (
+    <Comp
+      className={clsx(buttonIcon({ variant, size }), buttonIcon, className)}
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      {...(rest as any)}
+    />
+  );
+}

package/src/components/button-icon/index.ts

@@ -0,0 +1 @@
+export { ButtonIcon, type ButtonIconProps } from './button-icon';

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',
+          },
+        },
+      },
+    },
+  },
+});