@kalink-ui/seedly 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.10.0",
+  "version": "0.11.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",
@@ -46,9 +47,9 @@
     "vite": "^6.2.1",
     "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/dibbly": "0.4.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

@@ -357,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,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/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/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: {