@kalink-ui/seedly 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @kalink-ui/seedly
 
+## 0.12.0
+
+### Minor Changes
+
+- 0f1ff4b: [loader] Correctly use layers to define component styles
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -37,6 +37,7 @@
     "@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",
@@ -47,8 +48,8 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.8",
     "@kalink-ui/dibbly": "0.4.0",
-    "@kalink-ui/eslint-config": "0.9.0",
-    "@kalink-ui/typescript-config": "0.4.0"
+    "@kalink-ui/typescript-config": "0.4.0",
+    "@kalink-ui/eslint-config": "0.9.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",
@@ -66,7 +67,8 @@
     "@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"
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,8 +2,10 @@ import {
   assignVars,
   createThemeContract,
   fallbackVar,
+  globalStyle,
   style,
 } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, typography } from '../../styles';
@@ -357,7 +359,57 @@ 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]);
+
+globalStyle(`${buttonRecipe.classNames.variants.size.sm} svg`, {
+  '@layer': {
+    [components]: {
+      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(`${buttonRecipe.classNames.variants.size.md} svg`, {
+  '@layer': {
+    [components]: {
+      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(`${buttonRecipe.classNames.variants.size.lg} svg`, {
+  '@layer': {
+    [components]: {
+      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 ButtonVariants = NonNullable<RecipeVariants<typeof buttonRecipe>>;

package/src/components/button/button.tsx

@@ -3,10 +3,10 @@ import { clsx } from 'clsx';
 import { ComponentType, ReactNode } from 'react';
 
 import {
-  buttonEndSlot,
   buttonLabel,
   buttonRecipe,
-  buttonStartSlot,
+  buttonSlotEnd,
+  buttonSlotStart,
   ButtonVariants,
 } from './button.css';
 
@@ -39,11 +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>}
+      {startSlot && <span className={clsx(buttonSlotStart)}>{startSlot}</span>}
       {children && (
         <span className={clsx(buttonLabel({ size }))}>{children}</span>
       )}
-      {endSlot && <span className={clsx(buttonEndSlot)}>{endSlot}</span>}
+      {endSlot && <span className={clsx(buttonSlotEnd)}>{endSlot}</span>}
     </Comp>
   );
 }

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

@@ -1,5 +1,4 @@
-import { assignVars, globalStyle } from '@vanilla-extract/css';
-import { calc } from '@vanilla-extract/css-utils';
+import { assignVars } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys } from '../../styles';
@@ -12,39 +11,48 @@ export const buttonIcon = recipe({
   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],
-            }),
+      sm: [
+        buttonRecipe.classNames.variants.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],
-            }),
+      ],
+      md: [
+        buttonRecipe.classNames.variants.size.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],
-            }),
+      ],
+      lg: [
+        buttonRecipe.classNames.variants.size.lg,
+        {
+          '@layer': {
+            [components]: {
+              vars: assignVars(buttonVars.spacing, {
+                block: sys.spacing[3],
+                inline: sys.spacing[3],
+                inner: sys.spacing[3],
+              }),
+            },
           },
         },
-      },
+      ],
     },
   },
 
@@ -54,37 +62,4 @@ export const buttonIcon = recipe({
   },
 });
 
-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/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}
+    />
+  );
+}

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

@@ -0,0 +1,31 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+import { sys, transition } from '../../styles';
+
+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',
+
+      vars: {
+        [outlineColor]: sys.color.foreground,
+      },
+    },
+  },
+
+  vars: {
+    [outlineColor]: sys.color.foreground,
+  },
+});

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { mergeRefs } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef, ReactNode, useRef } from 'react';
+
+import { InputWrapper } from '../input/input-wrapper';
+import { input } from '../input/input.css';
+
+import { commandInputWrapper } from './command-input.css';
+
+export type CommandInputProps = ComponentPropsWithRef<
+  typeof CommandPrimitive.Input
+> & {
+  icon?: ReactNode;
+};
+
+export function CommandInput({
+  className,
+  disabled,
+  ref,
+  icon,
+  ...props
+}: CommandInputProps) {
+  const innerRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <InputWrapper
+      inputRef={innerRef}
+      disabled={disabled}
+      variant="bare"
+      className={commandInputWrapper}
+    >
+      {icon}
+      <CommandPrimitive.Input
+        ref={mergeRefs([ref, innerRef])}
+        className={clsx(input, className)}
+        disabled={disabled}
+        {...props}
+      />
+    </InputWrapper>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+
+export const commandItem = recipe({
+  base: {
+    cursor: 'pointer',
+
+    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',
+      },
+
+      '&:active': {
+        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.focused} * 100%), transparent)`,
+        outline: 'none',
+      },
+    },
+  },
+});
+
+export type CommandItemVariants = NonNullable<
+  RecipeVariants<typeof commandItem>
+>;

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

@@ -0,0 +1,35 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef, ComponentType } from 'react';
+
+import { Cluster } from '../cluster';
+import { menuItem, menuItemIcon } from '../menu/menu-item.css';
+
+export type CommandItemProps = ComponentPropsWithRef<
+  typeof CommandPrimitive.Item
+> & {
+  inset?: boolean;
+  icon?: ComponentType<{ className?: string }>;
+};
+
+export function CommandItem({
+  className,
+  inset,
+  icon: IconComp,
+  children,
+  ...props
+}: CommandItemProps) {
+  return (
+    <CommandPrimitive.Item
+      className={clsx(menuItem({ inset }), className)}
+      {...props}
+    >
+      <Cluster spacing={2} align="center">
+        {IconComp && <IconComp className={menuItemIcon} />}
+        {children}
+      </Cluster>
+    </CommandPrimitive.Item>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { style } from '@vanilla-extract/css';
+
+import { sys, transition } from '../../styles';
+
+export const commandList = style({
+  width: '100%',
+  maxHeight: 350,
+  overflow: 'auto',
+  paddingInline: sys.spacing[2],
+  paddingBlockEnd: sys.spacing[2],
+
+  overscrollBehavior: 'contain',
+  transition: transition(['height']),
+});

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

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

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef } from 'react';
+
+import {
+  MenuSeparatorVariants,
+  menuSeparator,
+} from '../menu/menu-separator.css';
+
+export type CommandSeparatorProps = ComponentPropsWithRef<
+  typeof CommandPrimitive.Separator
+> &
+  MenuSeparatorVariants;
+
+export function CommandSeparator({
+  className,
+  spacing = 4,
+  offset = true,
+  ...props
+}: CommandSeparatorProps) {
+  return (
+    <CommandPrimitive.Separator
+      className={clsx(menuSeparator({ offset, spacing }), className)}
+      {...props}
+    />
+  );
+}

package/src/components/command/command.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentPropsWithRef } from 'react';
+
+import { Stack, StackVariants } from '../stack';
+
+export type CommandProps = ComponentPropsWithRef<typeof CommandPrimitive> & {
+  spacing?: StackVariants['spacing'];
+};
+
+export function Command({
+  className,
+  children,
+  spacing = 2,
+  ...props
+}: CommandProps) {
+  return (
+    <CommandPrimitive className={clsx(className)} {...props}>
+      <Stack spacing={spacing}>{children}</Stack>
+    </CommandPrimitive>
+  );
+}

package/src/components/command/index.ts

@@ -0,0 +1,7 @@
+export { Command } from './command';
+export { CommandInput } from './command-input';
+export { CommandList } from './command-list';
+export { CommandEmpty } from './command-empty';
+export { CommandGroup } from './command-group';
+export { CommandItem } from './command-item';
+export { CommandSeparator } from './command-separator';

package/src/components/cover/index.ts

@@ -1,2 +1,2 @@
 export { Cover } from './cover';
-export { coverRecipe, type CoverVariants } from './cover.css';
+export { coverRecipe, minSizeVar, type CoverVariants } from './cover.css';

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './button-icon';
 export * from './card';
 export * from './center';
 export * from './cluster';
+export * from './command';
 export * from './conditional-wrapper';
 export * from './cover';
 export * from './divider';
@@ -15,6 +16,7 @@ export * from './input';
 export * from './label';
 export * from './loader';
 export * from './loader-overlay';
+export * from './popover';
 export * from './scroll-area';
 export * from './seed';
 export * from './select';

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

@@ -211,6 +211,7 @@ export const input = style({
 
       flexGrow: 1,
       flexBasis: 1,
+      width: '100%',
 
       paddingTop: 0,
       paddingBottom: 0,

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

@@ -1,30 +1,43 @@
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
 
 export const loaderOverlay = recipe({
   base: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
 
-    height: '100%',
-    width: '100%',
+        height: '100%',
+        width: '100%',
 
-    zIndex: 1000,
+        zIndex: 1000,
 
-    backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
+        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
+      },
+    },
   },
 
   variants: {
     position: {
       absolute: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
+        '@layer': {
+          [components]: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+          },
+        },
       },
       relative: {
-        position: 'relative',
+        '@layer': {
+          [components]: {
+            position: 'relative',
+          },
+        },
       },
     },
   },

package/src/components/popover/popover-content.css.ts

@@ -2,7 +2,7 @@ import { createVar, keyframes } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys } from '../../styles';
+import { mapContractVars, sys } from '../../styles';
 
 const translateX = createVar();
 const offsetX = createVar();
@@ -28,10 +28,6 @@ const leave = keyframes({
 
 export const popoverContent = recipe({
   base: {
-    padding: sys.spacing[1],
-
-    boxShadow: sys.elevation.high,
-
     animationDuration: sys.motion.duration.short[2],
     animationTimingFunction: sys.motion.easing.standard,
     animationFillMode: 'forwards',
@@ -99,6 +95,10 @@ export const popoverContent = recipe({
         overflow: 'hidden',
       },
     },
+
+    elevation: mapContractVars(sys.elevation, (key) => ({
+      boxShadow: sys.elevation[key],
+    })),
   },
 });
 

package/src/components/popover/popover-content.tsx

@@ -51,12 +51,16 @@ export function PopoverContent({
   portaled = true,
   scrollable = true,
   maxHeight = 'var(--radix-popover-content-available-height)',
+  elevation,
   ...props
 }: PopoverContentProps) {
   const content = (
     <Content
       align={align}
-      className={clsx(popoverContent({ width, scrollable }), className)}
+      className={clsx(
+        popoverContent({ width, scrollable, elevation }),
+        className,
+      )}
       sideOffset={0}
       asChild
       collisionPadding={16}

package/src/components/stack/stack.css.ts

@@ -4,7 +4,11 @@ import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 import { sys, mapContractVars } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-const spacing = createVar();
+const spacing = createVar({
+  syntax: '<length>',
+  initialValue: sys.spacing['0'],
+  inherits: false,
+});
 
 export const stackRecipe = recipe({
   base: {