@kalink-ui/seedly 0.34.4 → 0.35.0

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

@@ -9,67 +9,7 @@ import {
   buttonVariantStyles,
 } from '../button/button.css';
 
-export const buttonIcon = recipe({
-  base: [buttonRecipe.classNames.base],
-
-  variants: {
-    variant: buttonRecipe.classNames.variants.variant,
-    size: {
-      sm: [
-        buttonRecipe.classNames.variants.size.sm,
-        {
-          '@layer': {
-            [overrides]: {
-              vars: assignVars(buttonVars.spacing, {
-                block: sys.spacing[2],
-                inline: sys.spacing[2],
-                inner: sys.spacing[2],
-              }),
-            },
-          },
-        },
-      ],
-      md: [
-        buttonRecipe.classNames.variants.size.md,
-        {
-          '@layer': {
-            [overrides]: {
-              vars: assignVars(buttonVars.spacing, {
-                block: sys.spacing[2],
-                inline: sys.spacing[2],
-                inner: sys.spacing[2],
-              }),
-            },
-          },
-        },
-      ],
-      lg: [
-        buttonRecipe.classNames.variants.size.lg,
-        {
-          '@layer': {
-            [overrides]: {
-              vars: assignVars(buttonVars.spacing, {
-                block: sys.spacing[3],
-                inline: sys.spacing[3],
-                inner: sys.spacing[3],
-              }),
-            },
-          },
-        },
-      ],
-    },
-  },
-
-  defaultVariants: {
-    variant: 'ghost',
-    size: 'md',
-  },
-});
-
-export type ButtonIconVariants = NonNullable<RecipeVariants<typeof buttonIcon>>;
-
-// Responsive variants
-const buttonIconSizeStyles = {
+const buttonIconSizeOverrides = {
   sm: {
     '@layer': {
       [overrides]: {
@@ -105,8 +45,32 @@ const buttonIconSizeStyles = {
   },
 } as const;
 
+const buttonIconSizeStyles = {
+  sm: [buttonRecipe.classNames.variants.size.sm, buttonIconSizeOverrides.sm],
+  md: [buttonRecipe.classNames.variants.size.md, buttonIconSizeOverrides.md],
+  lg: [buttonRecipe.classNames.variants.size.lg, buttonIconSizeOverrides.lg],
+};
+
+export const buttonIconRecipe = recipe({
+  base: [buttonRecipe.classNames.base],
+
+  variants: {
+    variant: buttonRecipe.classNames.variants.variant,
+    size: buttonIconSizeStyles,
+  },
+
+  defaultVariants: {
+    variant: 'ghost',
+    size: 'md',
+  },
+});
+
+export type ButtonIconVariants = NonNullable<
+  RecipeVariants<typeof buttonIconRecipe>
+>;
+
 export const sizeAt = createResponsiveVariants({
-  styles: buttonIconSizeStyles,
+  styles: buttonIconSizeOverrides,
   media: defaultMedia,
 });
 

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

@@ -1,9 +1,9 @@
 import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { buttonIcon, sizeAt, variantAt } from './button-icon.css';
+import { buttonIconRecipe, sizeAt, variantAt } from './button-icon.css';
 
 export const buttonIconResponsive = responsiveRecipe({
-  recipe: buttonIcon,
+  recipe: buttonIconRecipe,
   at: { size: sizeAt, variant: variantAt },
   order: defaultOrder,
 });

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

@@ -1,5 +1,4 @@
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
-import { clsx } from 'clsx';
 
 import { AccessibleIcon } from '../accessible-icon';
 import { ButtonTypes } from '../button/button';
@@ -9,11 +8,10 @@ import { buttonIconResponsive } from './button-icon.responsive';
 
 import type { Responsive } from '../../styles/responsive';
 
-type ButtonIconVariantResponsive = {
-  [K in keyof ButtonIconVariants]?: Responsive<
-    NonNullable<ButtonIconVariants[K]>
-  >;
-};
+export interface ButtonIconVariantResponsive {
+  size?: Responsive<NonNullable<ButtonIconVariants['size']>>;
+  variant?: Responsive<NonNullable<ButtonIconVariants['variant']>>;
+}
 
 export type ButtonIconProps<TUse extends ButtonTypes> =
   PolymorphicComponentProps<TUse> &
@@ -36,7 +34,7 @@ export function ButtonIcon<TUse extends ButtonTypes>(
 
   return (
     <Comp
-      className={clsx(buttonIconResponsive({ variant, size }), className)}
+      className={buttonIconResponsive({ variant, size }, className)}
       {...(rest as Record<string, unknown>)}
     >
       <AccessibleIcon label={label}>{children}</AccessibleIcon>

package/src/components/card/card.css.ts

@@ -1,12 +1,8 @@
-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({
+export const cardFooterRecipe = recipe({
   base: {
     '@layer': {
       [components]: {

package/src/components/card/card.tsx

@@ -2,14 +2,13 @@ import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { Box, Cluster, Stack } from '@kalink-ui/seedly';
-import { Spacing } from '@kalink-ui/seedly/styles';
+import { Box, type BoxProps } from '../box';
+import { Cluster, type ClusterProps } from '../cluster';
+import { Stack } from '../stack';
 
-import { BoxProps } from '../box';
-import { ClusterProps } from '../cluster';
-
-import { card, cardBody, cardFooter, cardHeader } from './card.css';
+import { cardFooterRecipe } from './card.css';
 
+import type { Spacing } from '../../styles';
 import type { Responsive } from '../../styles/responsive';
 
 export type CardRootElement = 'article' | 'div';
@@ -37,7 +36,7 @@ export function Card<TUse extends CardRootElement = 'article'>(
       use={use as CardProps['use']}
       variant={variant}
       spacing={spacing}
-      className={clsx(card, className)}
+      className={className}
       {...rest}
     >
       <Stack align="stretch" spacing={verticalSpacing ?? spacing}>
@@ -52,7 +51,7 @@ Card.Header = function CardHeader<TUse extends ElementType = 'header'>(
 ) {
   const { use: Comp = 'header', className, ...rest } = props;
 
-  return <Comp className={clsx(cardHeader, className)} {...rest} />;
+  return <Comp className={className} {...rest} />;
 };
 
 Card.Body = function CardBody<TUse extends ElementType = 'div'>(
@@ -60,7 +59,7 @@ Card.Body = function CardBody<TUse extends ElementType = 'div'>(
 ) {
   const { use: Comp = 'div', className, ...rest } = props;
 
-  return <Comp className={clsx(cardBody, className)} {...rest} />;
+  return <Comp className={className} {...rest} />;
 };
 
 type CardFooterProps<TUse extends ElementType = 'footer'> = ClusterProps<TUse>;
@@ -68,12 +67,13 @@ type CardFooterProps<TUse extends ElementType = 'footer'> = ClusterProps<TUse>;
 Card.Footer = function CardFooter<TUse extends ElementType = 'footer'>(
   props: CardFooterProps<TUse>,
 ) {
-  const { use = 'footer', className, ...rest } = props;
+  const { use = 'footer', spacing = 2, className, ...rest } = props;
 
   return (
     <Cluster
       use={use as CardFooterProps['use']}
-      className={clsx(cardFooter, className)}
+      className={clsx(cardFooterRecipe(), className)}
+      spacing={spacing}
       {...rest}
     />
   );

package/src/components/center/center.css.ts

@@ -1,4 +1,4 @@
-import { createVar } from '@vanilla-extract/css';
+import { assignVars, createThemeContract } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import {
@@ -9,19 +9,58 @@ import {
 } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const gutterSize = createVar();
+export const centerVars = createThemeContract({
+  spacing: {
+    gutters: null,
+  },
+  layout: {
+    measure: null,
+  },
+});
+
+const centerSpacingDefaults = assignVars(centerVars.spacing, {
+  gutters: sys.spacing[0],
+});
+
+const centerLayoutDefaults = assignVars(centerVars.layout, {
+  measure: sys.layout.measure,
+});
 
 // Shared variant style maps to support responsive overrides
 export const centerGuttersStyles = mapContractVars(sys.spacing, (key) => ({
   '@layer': {
     [components]: {
       vars: {
-        [gutterSize]: sys.spacing[key],
+        ...assignVars(centerVars.spacing, {
+          gutters: sys.spacing[key],
+        }),
       },
     },
   },
 }));
 
+export const centerAndTextStyles = {
+  true: {
+    '@layer': {
+      [components]: {
+        textAlign: 'center',
+      },
+    },
+  },
+} as const;
+
+export const centerIntrinsicStyles = {
+  true: {
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      },
+    },
+  },
+} as const;
+
 export const centerRecipe = recipe({
   base: {
     '@layer': {
@@ -29,8 +68,13 @@ export const centerRecipe = recipe({
         display: 'block',
         boxSizing: 'content-box',
         marginInline: 'auto',
-        maxInlineSize: sys.layout.measure,
-        paddingInline: gutterSize,
+        maxInlineSize: centerVars.layout.measure,
+        paddingInline: centerVars.spacing.gutters,
+
+        vars: {
+          ...centerSpacingDefaults,
+          ...centerLayoutDefaults,
+        },
       },
     },
   },
@@ -40,28 +84,14 @@ export const centerRecipe = recipe({
      * Center align the text too with `text-align: center`
      */
     andText: {
-      true: {
-        '@layer': {
-          [components]: {
-            textAlign: 'center',
-          },
-        },
-      },
+      ...centerAndTextStyles,
     },
 
     /**
      * Center child elements based on their content width
      */
     intrinsic: {
-      true: {
-        '@layer': {
-          [components]: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          },
-        },
-      },
+      ...centerIntrinsicStyles,
     },
 
     /**
@@ -77,3 +107,13 @@ export const guttersAt = createResponsiveVariants({
   styles: centerGuttersStyles,
   media: defaultMedia,
 });
+
+export const andTextAt = createResponsiveVariants({
+  styles: centerAndTextStyles,
+  media: defaultMedia,
+});
+
+export const intrinsicAt = createResponsiveVariants({
+  styles: centerIntrinsicStyles,
+  media: defaultMedia,
+});

package/src/components/center/center.responsive.ts

@@ -1,9 +1,9 @@
 import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { centerRecipe, guttersAt } from './center.css';
+import { andTextAt, centerRecipe, guttersAt, intrinsicAt } from './center.css';
 
 export const centerResponsive = responsiveRecipe({
   recipe: centerRecipe,
-  at: { gutters: guttersAt },
+  at: { gutters: guttersAt, andText: andTextAt, intrinsic: intrinsicAt },
   order: defaultOrder,
 });

package/src/components/center/center.tsx

@@ -1,5 +1,4 @@
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { CenterVariants } from './center.css';
@@ -9,8 +8,10 @@ import type { Responsive } from '../../styles/responsive';
 
 export type CenterProps<TUse extends ElementType> =
   PolymorphicComponentProps<TUse> &
-    Omit<CenterVariants, 'gutters'> & {
+    Omit<CenterVariants, 'gutters' | 'andText' | 'intrinsic'> & {
+      andText?: Responsive<NonNullable<CenterVariants['andText']>>;
       gutters?: Responsive<NonNullable<CenterVariants['gutters']>>;
+      intrinsic?: Responsive<NonNullable<CenterVariants['intrinsic']>>;
     };
 
 /**
@@ -30,10 +31,7 @@ export function Center<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(
-        centerResponsive({ andText, gutters, intrinsic }),
-        className,
-      )}
+      className={centerResponsive({ andText, gutters, intrinsic }, className)}
       {...rest}
     />
   );

package/src/components/center/index.ts

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

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

@@ -1,100 +1,43 @@
+import { assignVars, createThemeContract } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import {
-  createResponsiveVariants,
-  defaultMedia,
-  mapContractVars,
-  sys,
-} from '../../styles';
+import { createResponsiveVariants, defaultMedia, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
+import {
+  createSpacingVarStyles,
+  flexAlignItemsWithBaselineStyles,
+  flexJustifyContentStyles,
+} from '../layout-maps';
 
-// Shared variant style maps so we can reuse them for responsive overrides
-export const clusterSpacingStyles = mapContractVars(sys.spacing, (key) => ({
-  '@layer': {
-    [components]: {
-      gap: sys.spacing[key],
-    },
+export const clusterVars = createThemeContract({
+  spacing: {
+    gap: null,
   },
-}));
+});
 
-export const clusterJustifyStyles = {
-  start: {
-    '@layer': {
-      [components]: {
-        justifyContent: 'flex-start',
-      },
-    },
-  },
-  end: {
-    '@layer': {
-      [components]: {
-        justifyContent: 'flex-end',
-      },
-    },
-  },
-  center: {
-    '@layer': {
-      [components]: {
-        justifyContent: 'center',
-      },
-    },
-  },
-  spaceBetween: {
-    '@layer': {
-      [components]: {
-        justifyContent: 'space-between',
-      },
-    },
-  },
-  spaceAround: {
-    '@layer': {
-      [components]: {
-        justifyContent: 'space-around',
-      },
-    },
-  },
-  spaceEvenly: {
-    '@layer': {
-      [components]: {
-        justifyContent: 'space-evenly',
-      },
-    },
-  },
-} as const;
+const clusterSpacingDefaults = assignVars(clusterVars.spacing, {
+  gap: sys.spacing[0],
+});
 
-export const clusterAlignStyles = {
-  start: {
-    '@layer': {
-      [components]: {
-        alignItems: 'flex-start',
-      },
-    },
-  },
-  end: {
-    '@layer': {
-      [components]: {
-        alignItems: 'flex-end',
-      },
-    },
-  },
-  center: {
-    '@layer': {
-      [components]: {
-        alignItems: 'center',
-      },
-    },
-  },
-  stretch: {
+// Shared variant style maps so we can reuse them for responsive overrides
+export const clusterSpacingStyles = createSpacingVarStyles(clusterVars.spacing);
+
+export const clusterJustifyStyles = flexJustifyContentStyles;
+
+export const clusterAlignStyles = flexAlignItemsWithBaselineStyles;
+
+export const clusterDirectionStyles = {
+  row: {
     '@layer': {
       [components]: {
-        alignItems: 'stretch',
+        flexDirection: 'row',
       },
     },
   },
-  baseline: {
+  rowReverse: {
     '@layer': {
       [components]: {
-        alignItems: 'baseline',
+        flexDirection: 'row-reverse',
       },
     },
   },
@@ -108,6 +51,11 @@ export const clusterRecipe = recipe({
         flexWrap: 'wrap',
         justifyContent: 'flex-start',
         alignItems: 'flex-start',
+        gap: clusterVars.spacing.gap,
+
+        vars: {
+          ...clusterSpacingDefaults,
+        },
       },
     },
   },
@@ -128,22 +76,7 @@ export const clusterRecipe = recipe({
      */
     align: clusterAlignStyles,
 
-    direction: {
-      row: {
-        '@layer': {
-          [components]: {
-            flexDirection: 'row',
-          },
-        },
-      },
-      rowReverse: {
-        '@layer': {
-          [components]: {
-            flexDirection: 'row-reverse',
-          },
-        },
-      },
-    },
+    direction: clusterDirectionStyles,
   },
 });
 
@@ -163,3 +96,8 @@ export const alignAt = createResponsiveVariants({
   styles: clusterAlignStyles,
   media: defaultMedia,
 });
+
+export const directionAt = createResponsiveVariants({
+  styles: clusterDirectionStyles,
+  media: defaultMedia,
+});

package/src/components/cluster/cluster.responsive.ts

@@ -1,9 +1,20 @@
 import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { alignAt, clusterRecipe, justifyAt, spacingAt } from './cluster.css';
+import {
+  alignAt,
+  clusterRecipe,
+  directionAt,
+  justifyAt,
+  spacingAt,
+} from './cluster.css';
 
 export const clusterResponsive = responsiveRecipe({
   recipe: clusterRecipe,
-  at: { spacing: spacingAt, justify: justifyAt, align: alignAt },
+  at: {
+    spacing: spacingAt,
+    justify: justifyAt,
+    align: alignAt,
+    direction: directionAt,
+  },
   order: defaultOrder,
 });

package/src/components/cluster/cluster.tsx

@@ -1,5 +1,4 @@
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { ClusterVariants } from './cluster.css';
@@ -9,10 +8,11 @@ import type { Responsive } from '../../styles/responsive';
 
 export type ClusterProps<TUse extends ElementType> =
   PolymorphicComponentProps<TUse> &
-    Omit<ClusterVariants, 'spacing' | 'justify' | 'align'> & {
+    Omit<ClusterVariants, 'spacing' | 'justify' | 'align' | 'direction'> & {
       spacing?: Responsive<NonNullable<ClusterVariants['spacing']>>;
       justify?: Responsive<NonNullable<ClusterVariants['justify']>>;
       align?: Responsive<NonNullable<ClusterVariants['align']>>;
+      direction?: Responsive<NonNullable<ClusterVariants['direction']>>;
     };
 
 /**
@@ -20,10 +20,11 @@ export type ClusterProps<TUse extends ElementType> =
  *
  * https://every-layout.dev/layouts/cluster
  */
-export function Cluster<TUse extends ElementType>({
+export function Cluster<TUse extends ElementType = 'div'>({
   spacing,
   justify,
   align,
+  direction,
   className,
   ...props
 }: ClusterProps<TUse>) {
@@ -31,8 +32,8 @@ export function Cluster<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(
-        clusterResponsive({ spacing, align, justify }),
+      className={clusterResponsive(
+        { spacing, align, justify, direction },
         className,
       )}
       {...rest}

package/src/components/cluster/index.ts

@@ -1,2 +1,6 @@
 export { Cluster, type ClusterProps } from './cluster';
-export { clusterRecipe, type ClusterVariants } from './cluster.css';
+export {
+  clusterRecipe,
+  clusterVars,
+  type ClusterVariants,
+} from './cluster.css';

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

@@ -1,14 +1,46 @@
 'use client';
 
+import { clsx } from 'clsx';
 import { Command as CommandPrimitive } from 'cmdk';
 import { ComponentPropsWithoutRef } from 'react';
 
-import { menuItem } from '../menu/menu-item.css';
+import {
+  buildTypographyOverrides,
+  getResponsiveBase,
+  mapResponsiveSizeToTypography,
+  type Responsive,
+  type Tone,
+} from '../../styles';
+import { menuItemRecipe, type MenuItemVariants } from '../menu/menu-item.css';
 
 export type CommandEmptyProps = ComponentPropsWithoutRef<
   typeof CommandPrimitive.Empty
->;
+> & {
+  tone?: Tone;
+  size?: Responsive<NonNullable<MenuItemVariants['size']>>;
+};
 
-export function CommandEmpty(props: CommandEmptyProps) {
-  return <CommandPrimitive.Empty className={menuItem()} {...props} />;
+export function CommandEmpty({
+  tone,
+  size,
+  className,
+  ...props
+}: CommandEmptyProps) {
+  const baseSize = getResponsiveBase(size) ?? 'md';
+  const typographySize = mapResponsiveSizeToTypography(size);
+  const typographyOverrides = buildTypographyOverrides({
+    variant: 'body',
+    size: typographySize,
+  });
+
+  return (
+    <CommandPrimitive.Empty
+      className={clsx(
+        menuItemRecipe({ tone, size: baseSize }),
+        typographyOverrides,
+        className,
+      )}
+      {...props}
+    />
+  );
 }