@kalink-ui/seedly 0.34.4 → 0.35.0

package/src/components/sheet/sheet-title.tsx

@@ -6,7 +6,7 @@ import { ComponentPropsWithRef } from 'react';
 import { Heading, HeadingProps, HeadingTypes } from '../heading';
 import { TextProps } from '../text';
 
-type SheetTitleProps<TUse extends HeadingTypes> = ComponentPropsWithRef<
+export type SheetTitleProps<TUse extends HeadingTypes> = ComponentPropsWithRef<
   typeof Title
 > &
   HeadingProps<TUse>;

package/src/components/sidebar/index.ts

@@ -1,2 +1,6 @@
 export { Sidebar } from './sidebar';
-export { sidebarRecipe, type SidebarVariants } from './sidebar.css';
+export {
+  sidebarRecipe,
+  sidebarVars,
+  type SidebarVariants,
+} from './sidebar.css';

package/src/components/sidebar/sidebar.css.ts

@@ -1,22 +1,46 @@
-import { createVar, globalStyle } from '@vanilla-extract/css';
+import {
+  assignVars,
+  createThemeContract,
+  globalStyle,
+} from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import {
   createResponsiveVariants,
   defaultMedia,
-  sys,
   mapContractVars,
+  sys,
 } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const sideWidthVar = createVar();
-export const contentMinWidthVar = createVar();
+export const sidebarVars = createThemeContract({
+  spacing: {
+    gap: null,
+  },
+  layout: {
+    sideWidth: null,
+    contentMinWidth: null,
+  },
+});
+
+const sidebarSpacingDefaults = assignVars(sidebarVars.spacing, {
+  gap: sys.spacing[0],
+});
+
+const sidebarLayoutDefaults = assignVars(sidebarVars.layout, {
+  sideWidth: 'auto',
+  contentMinWidth: '50%',
+});
 
 // Shared variant styles to support responsive overrides
 export const sidebarSpacingStyles = mapContractVars(sys.spacing, (key) => ({
   '@layer': {
     [components]: {
-      gap: sys.spacing[key],
+      vars: {
+        ...assignVars(sidebarVars.spacing, {
+          gap: sys.spacing[key],
+        }),
+      },
     },
   },
 }));
@@ -27,9 +51,11 @@ export const sidebarRecipe = recipe({
       [components]: {
         display: 'flex',
         flexWrap: 'wrap',
+        gap: sidebarVars.spacing.gap,
 
         vars: {
-          [contentMinWidthVar]: '50%',
+          ...sidebarSpacingDefaults,
+          ...sidebarLayoutDefaults,
         },
       },
     },
@@ -82,7 +108,7 @@ globalStyle(`${sidebarRecipe.classNames.base} > *`, {
 globalStyle(`${sidebarRecipe.classNames.variants.sideWidth.true} > *`, {
   '@layer': {
     [components]: {
-      flexBasis: sideWidthVar,
+      flexBasis: sidebarVars.layout.sideWidth,
     },
   },
 });
@@ -92,7 +118,7 @@ globalStyle(`${sidebarRecipe.classNames.variants.side.left} > :last-child`, {
     [components]: {
       flexBasis: 0,
       flexGrow: 999,
-      minInlineSize: contentMinWidthVar,
+      minInlineSize: sidebarVars.layout.contentMinWidth,
     },
   },
 });
@@ -102,7 +128,7 @@ globalStyle(`${sidebarRecipe.classNames.variants.side.right} > :first-child`, {
     [components]: {
       flexBasis: 0,
       flexGrow: 999,
-      minInlineSize: contentMinWidthVar,
+      minInlineSize: sidebarVars.layout.contentMinWidth,
     },
   },
 });

package/src/components/sidebar/sidebar.tsx

@@ -2,14 +2,9 @@
 
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import {
-  contentMinWidthVar,
-  SidebarVariants,
-  sideWidthVar,
-} from './sidebar.css';
+import { SidebarVariants, sidebarVars } from './sidebar.css';
 import { sidebarResponsive } from './sidebar.responsive';
 
 import type { Responsive } from '../../styles/responsive';
@@ -50,13 +45,15 @@ export function Sidebar<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(
-        sidebarResponsive({ side, sideWidth: !!sideWidth, spacing, noStretch }),
+      className={sidebarResponsive(
+        { side, sideWidth: !!sideWidth, spacing, noStretch },
         className,
       )}
       style={assignInlineVars({
-        ...(sideWidth && { [sideWidthVar]: sideWidth }),
-        ...(contentMinWidth && { [contentMinWidthVar]: contentMinWidth }),
+        ...(sideWidth && { [sidebarVars.layout.sideWidth]: sideWidth }),
+        ...(contentMinWidth && {
+          [sidebarVars.layout.contentMinWidth]: contentMinWidth,
+        }),
       })}
       {...rest}
     />

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

@@ -18,13 +18,13 @@ const pulseKeyframe = keyframes({
   },
 });
 
-export const skeleton = recipe({
+export const skeletonRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
         display: 'block',
 
-        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
+        backgroundColor: `color-mix(in srgb, ${sys.surface.foreground} 10%, transparent)`,
 
         animationName: pulseKeyframe,
         animationDuration: '1500ms',
@@ -37,20 +37,17 @@ export const skeleton = recipe({
 
   variants: {
     type: {
-      text: [
-        typography.body.medium,
-        {
-          '@layer': {
-            [components]: {
-              selectors: {
-                '&:empty::before': {
-                  content: '"\\00a0"',
-                },
+      text: {
+        '@layer': {
+          [components]: {
+            selectors: {
+              '&:empty::before': {
+                content: '"\\00a0"',
               },
             },
           },
         },
-      ],
+      },
 
       field: {
         '@layer': {
@@ -81,6 +78,12 @@ export const skeleton = recipe({
       },
     },
 
+    size: {
+      sm: typography.body.small,
+      md: typography.body.medium,
+      lg: typography.body.large,
+    },
+
     withChildren: {
       true: {
         '@layer': {
@@ -118,10 +121,16 @@ export const skeleton = recipe({
       },
     },
   },
+
+  defaultVariants: {
+    size: 'md',
+  },
 });
 
-globalStyle(`${skeleton.classNames.variants.withChildren.true} *`, {
+globalStyle(`${skeletonRecipe.classNames.variants.withChildren.true} *`, {
   visibility: 'hidden',
 });
 
-export type SkeletonVariants = NonNullable<RecipeVariants<typeof skeleton>>;
+export type SkeletonVariants = NonNullable<
+  RecipeVariants<typeof skeletonRecipe>
+>;

package/src/components/skeleton/skeleton.tsx

@@ -1,32 +1,51 @@
 import { clsx } from 'clsx';
 import { Children, ElementType } from 'react';
 
+import {
+  buildTypographyOverrides,
+  getResponsiveBase,
+  mapResponsiveSizeToTypography,
+  type Responsive,
+} from '../../styles';
 import { Box, BoxProps } from '../box';
 
-import { skeleton, SkeletonVariants } from './skeleton.css';
+import { skeletonRecipe, SkeletonVariants } from './skeleton.css';
 
 export type SkeletonProps<TUse extends ElementType> = Omit<
   SkeletonVariants,
-  'withChildren'
+  'withChildren' | 'size'
 > &
-  BoxProps<TUse>;
+  BoxProps<TUse> & {
+    size?: Responsive<NonNullable<SkeletonVariants['size']>>;
+  };
 
-export const Skeleton = <TUse extends ElementType>({
+export function Skeleton<TUse extends ElementType>({
   children,
   className,
   type = 'text',
   radius = 'small',
+  size,
   ...props
-}: SkeletonProps<TUse>) => {
+}: SkeletonProps<TUse>) {
   const withChildren = Children.count(children) > 0;
+  const baseSize = getResponsiveBase(size) ?? 'md';
+  const typographySize = mapResponsiveSizeToTypography(size);
+  const typographyOverrides =
+    type === 'text'
+      ? buildTypographyOverrides({ variant: 'body', size: typographySize })
+      : undefined;
 
   return (
     <Box
-      className={clsx(skeleton({ withChildren, type }), className)}
+      className={clsx(
+        skeletonRecipe({ withChildren, type, size: baseSize }),
+        typographyOverrides,
+        className,
+      )}
       radius={radius}
       {...props}
     >
       {children}
     </Box>
   );
-};
+}

package/src/components/stack/index.ts

@@ -1,2 +1,2 @@
 export { Stack, type StackProps } from './stack';
-export { stackRecipe, type StackVariants } from './stack.css';
+export { stackRecipe, stackVars, type StackVariants } from './stack.css';

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

@@ -1,60 +1,28 @@
-import { createVar } from '@vanilla-extract/css';
+import { assignVars, createThemeContract } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys, mapContractVars } from '../../styles';
+import { sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 import {
   createResponsiveVariants,
   defaultMedia,
 } from '../../styles/responsive';
+import { createSpacingVarStyles, flexAlignItemsStyles } from '../layout-maps';
 
-const spacing = createVar({
-  syntax: '<length>',
-  initialValue: sys.spacing['0'],
-  inherits: false,
+export const stackVars = createThemeContract({
+  spacing: {
+    gap: null,
+  },
+});
+
+const stackSpacingDefaults = assignVars(stackVars.spacing, {
+  gap: sys.spacing[0],
 });
 
 // Shared variant style maps so we can reuse them for responsive overrides
-export const stackSpacingStyles = mapContractVars(sys.spacing, (key) => ({
-  '@layer': {
-    [components]: {
-      vars: {
-        [spacing]: sys.spacing[key],
-      },
-    },
-  },
-}));
+export const stackSpacingStyles = createSpacingVarStyles(stackVars.spacing);
 
-export const stackAlignStyles = {
-  start: {
-    '@layer': {
-      [components]: {
-        alignItems: 'flex-start',
-      },
-    },
-  },
-  center: {
-    '@layer': {
-      [components]: {
-        alignItems: 'center',
-      },
-    },
-  },
-  end: {
-    '@layer': {
-      [components]: {
-        alignItems: 'flex-end',
-      },
-    },
-  },
-  stretch: {
-    '@layer': {
-      [components]: {
-        alignItems: 'stretch',
-      },
-    },
-  },
-} as const;
+export const stackAlignStyles = flexAlignItemsStyles;
 
 export const stackRecipe = recipe({
   base: {
@@ -63,7 +31,11 @@ export const stackRecipe = recipe({
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'flex-start',
-        gap: spacing,
+        gap: stackVars.spacing.gap,
+
+        vars: {
+          ...stackSpacingDefaults,
+        },
       },
     },
   },

package/src/components/stack/stack.tsx

@@ -1,5 +1,4 @@
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { StackVariants } from './stack.css';
@@ -34,7 +33,7 @@ export function Stack<TUse extends ElementType = 'div'>({
 
   return (
     <Comp
-      className={clsx(stackResponsive({ spacing, align }), className)}
+      className={stackResponsive({ spacing, align }, className)}
       {...rest}
     />
   );

package/src/components/switcher/index.ts

@@ -1,2 +1,6 @@
 export { Switcher, type SwitcherProps } from './switcher';
-export { switcherRecipe, type SwitcherVariants } from './switcher.css';
+export {
+  switcherRecipe,
+  switcherVars,
+  type SwitcherVariants,
+} from './switcher.css';

package/src/components/switcher/switcher.css.ts

@@ -1,35 +1,87 @@
-import { createVar, globalStyle } from '@vanilla-extract/css';
+import {
+  assignVars,
+  createThemeContract,
+  globalStyle,
+} from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import {
   createResponsiveVariants,
   defaultMedia,
-  sys,
   mapContractVars,
+  sys,
 } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const thresholdVar = createVar();
-export const limitVar = createVar();
+export const switcherVars = createThemeContract({
+  spacing: {
+    gap: null,
+  },
+  layout: {
+    threshold: null,
+  },
+});
+
+const switcherSpacingDefaults = assignVars(switcherVars.spacing, {
+  gap: sys.spacing[0],
+});
+
+const switcherLayoutDefaults = assignVars(switcherVars.layout, {
+  threshold: sys.layout.measure,
+});
 
 // Shared variant styles to support responsive overrides
 export const switcherSpacingStyles = mapContractVars(sys.spacing, (key) => ({
   '@layer': {
     [components]: {
-      gap: sys.spacing[key],
+      vars: {
+        ...assignVars(switcherVars.spacing, {
+          gap: sys.spacing[key],
+        }),
+      },
     },
   },
 }));
 
+export const switcherLimitStyles = {
+  2: {
+    '@layer': {
+      [components]: {},
+    },
+  },
+  3: {
+    '@layer': {
+      [components]: {},
+    },
+  },
+  4: {
+    '@layer': {
+      [components]: {},
+    },
+  },
+  5: {
+    '@layer': {
+      [components]: {},
+    },
+  },
+  6: {
+    '@layer': {
+      [components]: {},
+    },
+  },
+} as const;
+
 export const switcherRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
         display: 'flex',
         flexWrap: 'wrap',
+        gap: switcherVars.spacing.gap,
 
         vars: {
-          [thresholdVar]: sys.layout.measure,
+          ...switcherSpacingDefaults,
+          ...switcherLayoutDefaults,
         },
       },
     },
@@ -44,89 +96,35 @@ export const switcherRecipe = recipe({
     /**
      * The maximum number of elements allowed to appear in the horizontal configuration
      */
-    limit: {
-      2: {},
-      3: {},
-      4: {},
-      5: {},
-      6: {},
-    },
+    limit: switcherLimitStyles,
   },
 });
 
+const limitValues = [2, 3, 4, 5, 6] as const;
+
+const limitSelector = (limitClass: string, limit: number) =>
+  `${limitClass} > :nth-last-child(n+${limit + 1}), ${limitClass} > :nth-last-child(n+${limit + 1}) ~ *`;
+
 globalStyle(`${switcherRecipe.classNames.base} > *`, {
   '@layer': {
     [components]: {
-      flexBasis: `calc((${thresholdVar} - 100%) * 999)`,
+      flexBasis: `calc((${switcherVars.layout.threshold} - 100%) * 999)`,
       flexGrow: 1,
     },
   },
 });
 
-globalStyle(
-  `${switcherRecipe.classNames.variants.limit[2]} > :nth-last-child(n+3), ${
-    switcherRecipe.classNames.variants.limit[2]
-  } > :nth-last-child(n+3) ~ *`,
-  {
-    '@layer': {
-      [components]: {
-        flexBasis: '100%',
-      },
-    },
-  },
-);
+limitValues.forEach((limit) => {
+  const limitClass = switcherRecipe.classNames.variants.limit[limit];
 
-globalStyle(
-  `${switcherRecipe.classNames.variants.limit[3]} > :nth-last-child(n+4), ${
-    switcherRecipe.classNames.variants.limit[3]
-  } > :nth-last-child(n+4) ~ *`,
-  {
+  globalStyle(limitSelector(limitClass, limit), {
     '@layer': {
       [components]: {
         flexBasis: '100%',
       },
     },
-  },
-);
-
-globalStyle(
-  `${switcherRecipe.classNames.variants.limit[4]} > :nth-last-child(n+5), ${
-    switcherRecipe.classNames.variants.limit[4]
-  } > :nth-last-child(n+5) ~ *`,
-  {
-    '@layer': {
-      [components]: {
-        flexBasis: '100%',
-      },
-    },
-  },
-);
-
-globalStyle(
-  `${switcherRecipe.classNames.variants.limit[5]} > :nth-last-child(n+6), ${
-    switcherRecipe.classNames.variants.limit[5]
-  } > :nth-last-child(n+6) ~ *`,
-  {
-    '@layer': {
-      [components]: {
-        flexBasis: '100%',
-      },
-    },
-  },
-);
-
-globalStyle(
-  `${switcherRecipe.classNames.variants.limit[6]} > :nth-last-child(n+7), ${
-    switcherRecipe.classNames.variants.limit[6]
-  } > :nth-last-child(n+7) ~ *`,
-  {
-    '@layer': {
-      [components]: {
-        flexBasis: '100%',
-      },
-    },
-  },
-);
+  });
+});
 
 export type SwitcherVariants = NonNullable<
   RecipeVariants<typeof switcherRecipe>
@@ -136,3 +134,38 @@ export const spacingAt = createResponsiveVariants({
   styles: switcherSpacingStyles,
   media: defaultMedia,
 });
+
+export const limitAt = createResponsiveVariants({
+  styles: switcherLimitStyles,
+  media: defaultMedia,
+});
+
+Object.entries(limitAt).forEach(([breakpoint, styles]) => {
+  const query = defaultMedia[breakpoint as keyof typeof defaultMedia];
+
+  if (!query) {
+    return;
+  }
+
+  const styleMap = styles as Record<number, string>;
+
+  limitValues.forEach((limit) => {
+    const limitClass = styleMap[limit];
+
+    if (!limitClass) {
+      return;
+    }
+
+    globalStyle(limitSelector(limitClass, limit), {
+      '@media': {
+        [query]: {
+          '@layer': {
+            [components]: {
+              flexBasis: '100%',
+            },
+          },
+        },
+      },
+    });
+  });
+});

package/src/components/switcher/switcher.responsive.ts

@@ -1,9 +1,9 @@
 import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { spacingAt, switcherRecipe } from './switcher.css';
+import { limitAt, spacingAt, switcherRecipe } from './switcher.css';
 
 export const switcherResponsive = responsiveRecipe({
   recipe: switcherRecipe,
-  at: { spacing: spacingAt },
+  at: { spacing: spacingAt, limit: limitAt },
   order: defaultOrder,
 });

package/src/components/switcher/switcher.tsx

@@ -2,22 +2,22 @@
 
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { SwitcherVariants, thresholdVar } from './switcher.css';
+import { SwitcherVariants, switcherVars } from './switcher.css';
 import { switcherResponsive } from './switcher.responsive';
 
 import type { Responsive } from '../../styles/responsive';
 
 export type SwitcherProps<TUse extends ElementType> =
   PolymorphicComponentProps<TUse> &
-    Omit<SwitcherVariants, 'spacing'> & {
+    Omit<SwitcherVariants, 'spacing' | 'limit'> & {
       /**
        * The threshold at which to switch between horizontal and vertical layouts
        */
       threshold?: string;
       spacing?: Responsive<NonNullable<SwitcherVariants['spacing']>>;
+      limit?: Responsive<NonNullable<SwitcherVariants['limit']>>;
     };
 
 /**
@@ -37,9 +37,9 @@ export function Switcher<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(switcherResponsive({ spacing, limit }), className)}
+      className={switcherResponsive({ spacing, limit }, className)}
       style={assignInlineVars({
-        ...(threshold && { [thresholdVar]: threshold }),
+        ...(threshold && { [switcherVars.layout.threshold]: threshold }),
       })}
       {...props}
     />