@kalink-ui/seedly 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @kalink-ui/seedly
 
+## 0.11.0
+
+### Minor Changes
+
+- 4a6ec83: Create command component
+- ad0b4d1: [Stack] Fix inheritance of the spacing property
+- 2371dd4: [Button] Fix how slot behave in the flex context
+- 4e6b205: [Cover] Reexport `minSizeVar` custom property
+
+## 0.10.0
+
+### Minor Changes
+
+- 84903c1: Add multiple components
+
+  - ButtonIcon
+  - TextField
+  - Select
+  - Textarea
+  - Label
+  - Loader
+  - LoaderOverly
+
 ## 0.9.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -37,18 +37,19 @@
     "@vanilla-extract/vite-plugin": "^5.0.1",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.21.0",
+    "lucide-react": "^0.511.0",
     "react": "^19.0.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^19.0.0",
     "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/dibbly": "0.3.0",
+    "@kalink-ui/eslint-config": "0.9.0",
     "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.8.0"
+    "@kalink-ui/dibbly": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",
@@ -57,10 +58,17 @@
     "@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": {
-    "clsx": "^2.1.1"
+    "@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",
+    "cmdk": "^1.1.1"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,7 +1,7 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mapContractVars, sys } from '../../styles';
-import { components } from '../../styles/layers.css';
+import { mapContractVars, sys } from '@kalink-ui/seedly/styles';
+import { components } from '@kalink-ui/seedly/styles/layers';
 
 export const boxRecipe = recipe({
   variants: {

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',
             },
           },
         },
@@ -360,7 +357,12 @@ export const buttonLabel = recipe({
   },
 });
 
-export const buttonStartSlot = style({});
-export const buttonEndSlot = style({});
+const buttonSlot = style({
+  flexShrink: 0,
+});
+
+export const buttonSlotStart = style([buttonSlot]);
+
+export const buttonSlotEnd = style([buttonSlot]);
 
 export type ButtonVariants = NonNullable<RecipeVariants<typeof buttonRecipe>>;

package/src/components/button/button.tsx

@@ -3,22 +3,23 @@ import { clsx } from 'clsx';
 import { ComponentType, ReactNode } from 'react';
 
 import {
-  buttonEndSlot,
   buttonLabel,
   buttonRecipe,
-  buttonStartSlot,
+  buttonSlotEnd,
+  buttonSlotStart,
   ButtonVariants,
 } 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 {
@@ -38,9 +39,11 @@ export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
       /* 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>}
+      {startSlot && <span className={clsx(buttonSlotStart)}>{startSlot}</span>}
+      {children && (
+        <span className={clsx(buttonLabel({ size }))}>{children}</span>
+      )}
+      {endSlot && <span className={clsx(buttonSlotEnd)}>{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.tsx

@@ -10,11 +10,14 @@ import { ClusterProps } from '../cluster';
 
 import { card, cardBody, cardFooter, cardHeader } from './card.css';
 
-export type CardProps<TUse extends ElementType = 'article'> = BoxProps<TUse> & {
-  verticalSpacing?: Spacing;
-};
+export type CardRootElement = 'article' | 'div';
+
+export type CardProps<TUse extends CardRootElement = 'article'> =
+  BoxProps<TUse> & {
+    verticalSpacing?: Spacing;
+  };
 
-export function Card<TUse extends ElementType = 'article'>(
+export function Card<TUse extends CardRootElement = 'article'>(
   props: CardProps<TUse>,
 ) {
   const {

package/src/components/card/index.ts

@@ -1 +1 @@
-export { Card } from './card';
+export { Card, type CardProps, type CardRootElement } from './card';

package/src/components/center/center.tsx

@@ -4,8 +4,8 @@ import { ElementType } from 'react';
 
 import { centerRecipe, CenterVariants } from './center.css';
 
-type CenterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  CenterVariants;
+export type CenterProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & CenterVariants;
 
 /**
  * A custom element for centering a block-level element horizontally,

package/src/components/center/index.ts

@@ -1,2 +1,2 @@
-export { Center } from './center';
+export { Center, type CenterProps } from './center';
 export { centerRecipe, type CenterVariants } from './center.css';

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

@@ -115,6 +115,23 @@ export const clusterRecipe = recipe({
         },
       },
     },
+
+    direction: {
+      row: {
+        '@layer': {
+          [components]: {
+            flexDirection: 'row',
+          },
+        },
+      },
+      rowReverse: {
+        '@layer': {
+          [components]: {
+            flexDirection: 'row-reverse',
+          },
+        },
+      },
+    },
   },
 });
 

package/src/components/command/command-empty.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithoutRef } from 'react';
+
+import { menuItem } from '../menu/menu-item.css';
+
+export type CommandEmptyProps = ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Empty
+>;
+
+export function CommandEmpty(props: CommandEmptyProps) {
+  return <CommandPrimitive.Empty className={menuItem()} {...props} />;
+}

package/src/components/command/command-group.css.ts

@@ -0,0 +1,34 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+import { sys, typography } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const commandGroup = style([
+  typography.label.small,
+  {
+    '@layer': {
+      [components]: {
+        selectors: {
+          '&[hidden]': {
+            display: 'none',
+
+            position: 'absolute',
+          },
+        },
+      },
+    },
+  },
+]);
+
+globalStyle(`${commandGroup} [cmdk-group-heading]`, {
+  '@layer': {
+    [components]: {
+      position: 'relative',
+
+      color: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.muted.light} * 100%), transparent)`,
+
+      cursor: 'default',
+      userSelect: 'none',
+    },
+  },
+});

package/src/components/command/command-group.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef } from 'react';
+
+import { commandGroup } from './command-group.css';
+
+export function CommandGroup({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      className={clsx(commandGroup, className)}
+      {...props}
+    />
+  );
+}