@kalink-ui/seedly 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @kalink-ui/seedly
 
+## 0.17.0
+
+### Minor Changes
+
+- 6d46df7: Fix styling issues after Stack component update
+- 141fc36: [Skeleton] Add new Skeleton component
+
 ## 0.16.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -16,37 +16,33 @@
     "./styles/layers": "./src/styles/layers.css.ts"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.5",
-    "@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",
-    "@types/react-dom": "19.0.4",
-    "@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",
-    "@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",
-    "vite": "^6.2.1",
+    "@chromatic-com/storybook": "^4.0.0",
+    "@storybook/addon-docs": "^9.0.8",
+    "@storybook/addon-onboarding": "^9.0.8",
+    "@storybook/react-vite": "^9.0.8",
+    "@turbo/gen": "^2.5.4",
+    "@types/node": "^24.0.0",
+    "@types/react": "19.1.7",
+    "@types/react-dom": "19.1.6",
+    "@vanilla-extract/css": "^1.17.3",
+    "@vanilla-extract/css-utils": "^0.1.5",
+    "@vanilla-extract/dynamic": "^2.1.4",
+    "@vanilla-extract/recipes": "^0.5.6",
+    "@vanilla-extract/sprinkles": "^1.6.4",
+    "@vanilla-extract/vite-plugin": "^5.0.5",
+    "@vitejs/plugin-react": "^4.5.2",
+    "eslint": "^9.28.0",
+    "eslint-plugin-storybook": "9.0.8",
+    "lucide-react": "^0.514.0",
+    "react": "^19.1.0",
+    "react-docgen-typescript": "^2.4.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^9.0.8",
+    "type-fest": "^4.41.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.8",
+    "vitest": "^3.2.3",
     "@kalink-ui/dibbly": "0.5.0",
     "@kalink-ui/eslint-config": "0.9.0",
     "@kalink-ui/typescript-config": "0.4.0"
@@ -62,11 +58,11 @@
     "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",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-slot": "^1.2.3",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1"
   },

package/src/components/card/card.tsx

@@ -38,7 +38,9 @@ export function Card<TUse extends CardRootElement = 'article'>(
       className={clsx(card, className)}
       {...rest}
     >
-      <Stack spacing={verticalSpacing ?? spacing}>{children}</Stack>
+      <Stack align="stretch" spacing={verticalSpacing ?? spacing}>
+        {children}
+      </Stack>
     </Box>
   );
 }

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

@@ -8,6 +8,10 @@ export const commandGroup = style([
   {
     '@layer': {
       [components]: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: sys.spacing[2],
+
         selectors: {
           '&[hidden]': {
             display: 'none',

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

@@ -1,31 +1,36 @@
 import { createVar, style } from '@vanilla-extract/css';
 
 import { sys, transition } from '../../styles';
+import { components } from '../../styles/layers.css';
 
 const outlineColor = createVar();
 
 export const commandInputWrapper = style({
-  padding: sys.spacing[2],
-
-  borderBottomWidth: 1,
-  borderBottomStyle: 'solid',
-  borderBottomColor: outlineColor,
-
-  transition: transition(['border-color', 'box-shadow'], {
-    duration: 'short.2',
-  }),
-
-  selectors: {
-    '&:focus, &:focus-within, &:focus-visible': {
-      boxShadow: 'unset',
+  '@layer': {
+    [components]: {
+      padding: sys.spacing[2],
+
+      borderBottomWidth: 1,
+      borderBottomStyle: 'solid',
+      borderBottomColor: outlineColor,
+
+      transition: transition(['border-color', 'box-shadow'], {
+        duration: 'short.2',
+      }),
+
+      selectors: {
+        '&:focus, &:focus-within, &:focus-visible': {
+          boxShadow: 'unset',
+
+          vars: {
+            [outlineColor]: sys.color.foreground,
+          },
+        },
+      },
 
       vars: {
         [outlineColor]: sys.color.foreground,
       },
     },
   },
-
-  vars: {
-    [outlineColor]: sys.color.foreground,
-  },
 });

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

@@ -1,22 +1,27 @@
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
 
 export const commandItem = recipe({
   base: {
-    cursor: 'pointer',
+    '@layer': {
+      [components]: {
+        cursor: 'pointer',
 
-    color: sys.color.foreground,
+        color: sys.color.foreground,
 
-    selectors: {
-      '&[data-selected=true]': {
-        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.muted.dark} * 100%), transparent)`,
-        outline: 'none',
-      },
+        selectors: {
+          '&[data-selected=true]': {
+            backgroundColor: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.muted.dark} * 100%), transparent)`,
+            outline: 'none',
+          },
 
-      '&:active': {
-        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.focused} * 100%), transparent)`,
-        outline: 'none',
+          '&:active': {
+            backgroundColor: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.focused} * 100%), transparent)`,
+            outline: 'none',
+          },
+        },
       },
     },
   },

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

@@ -1,14 +1,50 @@
-import { style } from '@vanilla-extract/css';
+import { createVar, globalStyle } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 
-import { sys, transition } from '../../styles';
+import { mapContractVars, sys, transition } from '../../styles';
+import { components } from '../../styles/layers.css';
 
-export const commandList = style({
-  width: '100%',
-  maxHeight: 350,
-  overflow: 'auto',
-  paddingInline: sys.spacing[2],
-  paddingBlockEnd: sys.spacing[2],
+const spacingVar = createVar();
 
-  overscrollBehavior: 'contain',
-  transition: transition(['height']),
+export const commandList = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacingVar,
+
+        width: '100%',
+        maxHeight: 350,
+        overflow: 'auto',
+        paddingInline: sys.spacing[2],
+        paddingBlockEnd: sys.spacing[2],
+
+        overscrollBehavior: 'contain',
+        transition: transition(['height']),
+      },
+    },
+  },
+
+  variants: {
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      '@layer': {
+        [components]: {
+          vars: {
+            [spacingVar]: sys.spacing[key],
+          },
+        },
+      },
+    })),
+  },
+});
+
+globalStyle(`${commandList.classNames.base} [cmdk-list-sizer]`, {
+  '@layer': {
+    [components]: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: spacingVar,
+    },
+  },
 });

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

@@ -4,15 +4,23 @@ import { clsx } from 'clsx';
 import { Command as CommandPrimitive } from 'cmdk';
 import { ComponentPropsWithRef } from 'react';
 
+import { StackProps } from '../stack';
+
 import { commandList } from './command-list.css';
 
+type CommandListProps = ComponentPropsWithRef<typeof CommandPrimitive.List> & {
+  spacing?: StackProps<'div'>['spacing'];
+};
+
 export function CommandList({
   className,
+  spacing = 4,
   ...props
-}: ComponentPropsWithRef<typeof CommandPrimitive.List>) {
+}: CommandListProps) {
   return (
     <CommandPrimitive.List
-      className={clsx(commandList, className)}
+      className={clsx(commandList({ spacing }), className)}
+      asChild
       {...props}
     />
   );

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

@@ -12,17 +12,16 @@ import {
 export type CommandSeparatorProps = ComponentPropsWithRef<
   typeof CommandPrimitive.Separator
 > &
-  MenuSeparatorVariants;
+  Omit<MenuSeparatorVariants, 'spacing'>;
 
 export function CommandSeparator({
   className,
-  spacing = 4,
   offset = true,
   ...props
 }: CommandSeparatorProps) {
   return (
     <CommandPrimitive.Separator
-      className={clsx(menuSeparator({ offset, spacing }), className)}
+      className={clsx(menuSeparator({ offset }), className)}
       {...props}
     />
   );

package/src/components/command/command.tsx

@@ -18,7 +18,9 @@ export function Command({
 }: CommandProps) {
   return (
     <CommandPrimitive className={clsx(className)} {...props}>
-      <Stack spacing={spacing}>{children}</Stack>
+      <Stack spacing={spacing} align="stretch">
+        {children}
+      </Stack>
     </CommandPrimitive>
   );
 }

package/src/components/loader-overlay/loader-overlay.css.ts

@@ -16,7 +16,7 @@ export const loaderOverlay = recipe({
 
         zIndex: 1000,
 
-        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
+        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 5%, transparent)`,
       },
     },
   },

package/src/components/loader-overlay/loader-overlay.tsx

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 
+import { Box } from '../box';
 import { Center } from '../center';
 import { MoonLoader } from '../loader';
 import { Stack, StackProps } from '../stack';
@@ -20,11 +21,14 @@ export function LoaderOverlay({
   spacing = 2,
 }: LoaderOverlayProps) {
   return (
-    <div className={clsx(loaderOverlay({ position }), className)}>
+    <Box
+      spacing={spacing}
+      className={clsx(loaderOverlay({ position }), className)}
+    >
       <Stack use={Center} align="center" spacing={spacing} intrinsic andText>
         <MoonLoader active forceMount />
         {text && <Text>{text}</Text>}
       </Stack>
-    </div>
+    </Box>
   );
 }

package/src/components/menu/menu-separator.css.ts

@@ -33,6 +33,7 @@ export const menuSeparator = recipe({
     offset: {
       true: {
         marginInline: calc.negate(sys.spacing[2]),
+        marginBlock: calc.negate(sys.spacing[2]),
       },
     },
 

package/src/components/skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from './skeleton';

package/src/components/skeleton/skeleton.css.ts

@@ -0,0 +1,127 @@
+import { globalStyle, keyframes } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys, typography } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+const pulseKeyframe = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+
+  '50%': {
+    opacity: 0.4,
+  },
+
+  '100%': {
+    opacity: 1,
+  },
+});
+
+export const skeleton = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        display: 'block',
+
+        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
+
+        animationName: pulseKeyframe,
+        animationDuration: '1500ms',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: sys.motion.easing.standard,
+        animationDelay: '500ms',
+      },
+    },
+  },
+
+  variants: {
+    type: {
+      text: [
+        typography.body.medium,
+        {
+          '@layer': {
+            [components]: {
+              selectors: {
+                '&:empty::before': {
+                  content: '"\\00a0"',
+                },
+              },
+            },
+          },
+        },
+      ],
+
+      field: {
+        '@layer': {
+          [components]: {
+            display: 'block',
+            width: '100%',
+            height: sys.spacing[6],
+          },
+        },
+      },
+
+      paragraph: {
+        '@layer': {
+          [components]: {
+            display: 'block',
+            width: '100%',
+            height: sys.spacing[16],
+          },
+        },
+      },
+
+      block: {
+        '@layer': {
+          [components]: {
+            aspectRatio: '1',
+          },
+        },
+      },
+    },
+
+    withChildren: {
+      true: {
+        '@layer': {
+          [components]: {
+            maxWidth: 'fit-content',
+            height: 'auto',
+          },
+        },
+      },
+    },
+
+    corner: {
+      square: {
+        '@layer': {
+          [components]: {
+            borderRadius: sys.shape.corner.none,
+          },
+        },
+      },
+
+      rounded: {
+        '@layer': {
+          [components]: {
+            borderRadius: sys.shape.corner.small,
+          },
+        },
+      },
+
+      circle: {
+        '@layer': {
+          [components]: {
+            borderRadius: sys.shape.corner.circle,
+          },
+        },
+      },
+    },
+  },
+});
+
+globalStyle(`${skeleton.classNames.variants.withChildren.true} *`, {
+  visibility: 'hidden',
+});
+
+export type SkeletonVariants = NonNullable<RecipeVariants<typeof skeleton>>;

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,32 @@
+import { clsx } from 'clsx';
+import { Children, ElementType } from 'react';
+
+import { Box, BoxProps } from '../box';
+
+import { skeleton, SkeletonVariants } from './skeleton.css';
+
+export type SkeletonProps<TUse extends ElementType> = Omit<
+  SkeletonVariants,
+  'withChildren'
+> &
+  BoxProps<TUse>;
+
+export const Skeleton = <TUse extends ElementType>({
+  children,
+  className,
+  type = 'text',
+  radius = 'small',
+  ...props
+}: SkeletonProps<TUse>) => {
+  const withChildren = Children.count(children) > 0;
+
+  return (
+    <Box
+      className={clsx(skeleton({ withChildren, type }), className)}
+      radius={radius}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};