@kalink-ui/seedly 0.34.4 → 0.35.0

package/src/components/form-field/form-field.tsx

@@ -4,6 +4,8 @@ import { useState, useCallback, ReactNode } from 'react';
 
 import { FormFieldContextProvider } from './form-field-context';
 
+import type { Tone } from '../../styles';
+
 export interface FormFieldProps {
   name: string;
   label: string;
@@ -12,6 +14,7 @@ export interface FormFieldProps {
   hideErrorMessage: boolean;
   hideLabel: boolean;
   disabled?: boolean;
+  tone?: Tone;
 }
 
 export function FormField({
@@ -22,6 +25,7 @@ export function FormField({
   hideErrorMessage = false,
   hideLabel = false,
   disabled,
+  tone,
 }: FormFieldProps) {
   const [messageIds, setMessageIds] = useState<string[]>([]);
 
@@ -48,6 +52,7 @@ export function FormField({
         label,
         disabled,
         hideLabel,
+        tone,
       }}
     >
       {children}

package/src/components/form-field/index.ts

@@ -1,6 +1,6 @@
 export { useFormFieldContext } from './form-field-context';
 export { useFormFieldItemContext } from './form-field-item-context';
-export { formFieldStyle, formFieldVars } from './form-field.css';
+export { formFieldRecipe, formFieldVars } from './form-field.css';
 export { FormFieldControl } from './form-field-control';
 export { FormFieldDescription } from './form-field-description';
 export { FormFieldError } from './form-field-error';

package/src/components/frame/frame.css.ts

@@ -1,9 +1,92 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css';
+import {
+  assignVars,
+  createThemeContract,
+  globalStyle,
+  style,
+} from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
+import { createResponsiveVariants, defaultMedia } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const frameRatioVar = createVar();
+export const frameVars = createThemeContract({
+  layout: {
+    ratio: null,
+  },
+});
+
+const frameLayoutDefaults = assignVars(frameVars.layout, {
+  ratio: 'auto',
+});
+
+export const frameRatioStyles = {
+  '1:1': {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(frameVars.layout, {
+            ratio: '1 / 1',
+          }),
+        },
+      },
+    },
+  },
+  '3:2': {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(frameVars.layout, {
+            ratio: '3 / 2',
+          }),
+        },
+      },
+    },
+  },
+  '2:3': {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(frameVars.layout, {
+            ratio: '2 / 3',
+          }),
+        },
+      },
+    },
+  },
+  '4:3': {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(frameVars.layout, {
+            ratio: '4 / 3',
+          }),
+        },
+      },
+    },
+  },
+  '16:9': {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(frameVars.layout, {
+            ratio: '16 / 9',
+          }),
+        },
+      },
+    },
+  },
+  '9:16': {
+    '@layer': {
+      [components]: {
+        vars: {
+          ...assignVars(frameVars.layout, {
+            ratio: '9 / 16',
+          }),
+        },
+      },
+    },
+  },
+} as const;
 
 const baseFrame = style({
   '@layer': {
@@ -14,7 +97,11 @@ const baseFrame = style({
 
       overflow: 'hidden',
 
-      aspectRatio: frameRatioVar,
+      aspectRatio: frameVars.layout.ratio,
+
+      vars: {
+        ...frameLayoutDefaults,
+      },
     },
   },
 });
@@ -26,62 +113,7 @@ export const frameRecipe = recipe({
     /**
      * The ratio of the frame
      */
-    ratio: {
-      '1:1': {
-        '@layer': {
-          [components]: {
-            vars: {
-              [frameRatioVar]: '1 / 1',
-            },
-          },
-        },
-      },
-      '3:2': {
-        '@layer': {
-          [components]: {
-            vars: {
-              [frameRatioVar]: '3 / 2',
-            },
-          },
-        },
-      },
-      '2:3': {
-        '@layer': {
-          [components]: {
-            vars: {
-              [frameRatioVar]: '2 / 3',
-            },
-          },
-        },
-      },
-      '4:3': {
-        '@layer': {
-          [components]: {
-            vars: {
-              [frameRatioVar]: '4 / 3',
-            },
-          },
-        },
-      },
-      '16:9': {
-        '@layer': {
-          [components]: {
-            vars: {
-              [frameRatioVar]: '16 / 9',
-            },
-          },
-        },
-      },
-      '9:16': {
-        '@layer': {
-          [components]: {
-            vars: {
-              [frameRatioVar]: '9 / 16',
-            },
-          },
-        },
-      },
-    },
+    ratio: frameRatioStyles,
   },
 });
 
@@ -96,3 +128,8 @@ globalStyle(`${baseFrame} > img, ${baseFrame} > video`, {
 });
 
 export type FrameVariants = NonNullable<RecipeVariants<typeof frameRecipe>>;
+
+export const ratioAt = createResponsiveVariants({
+  styles: frameRatioStyles,
+  media: defaultMedia,
+});

package/src/components/frame/frame.responsive.ts

@@ -0,0 +1,9 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import { frameRecipe, ratioAt } from './frame.css';
+
+export const frameResponsive = responsiveRecipe({
+  recipe: frameRecipe,
+  at: { ratio: ratioAt },
+  order: defaultOrder,
+});

package/src/components/frame/frame.tsx

@@ -1,19 +1,25 @@
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { frameRecipe, FrameVariants } from './frame.css';
+import { FrameVariants } from './frame.css';
+import { frameResponsive } from './frame.responsive';
+
+import type { Responsive } from '../../styles/responsive';
 
 type FrameProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  FrameVariants;
+  Omit<FrameVariants, 'ratio'> & {
+    ratio?: Responsive<NonNullable<FrameVariants['ratio']>>;
+  };
 
 /**
  * A custom element for augmenting image ratios
  *
  * https://every-layout.dev/layouts/frame
  */
-export function Frame<TUse extends ElementType>(props: FrameProps<TUse>) {
+export function Frame<TUse extends ElementType = 'div'>(
+  props: FrameProps<TUse>,
+) {
   const { use: Comp = 'div', className, ratio, ...rest } = props;
 
-  return <Comp className={clsx(frameRecipe({ ratio }), className)} {...rest} />;
+  return <Comp className={frameResponsive({ ratio }, className)} {...rest} />;
 }

package/src/components/frame/index.ts

@@ -1,2 +1,2 @@
 export { Frame } from './frame';
-export { frameRecipe, frameRatioVar, type FrameVariants } from './frame.css';
+export { frameRecipe, frameVars, type FrameVariants } from './frame.css';

package/src/components/grid/grid-child.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { gridChildResponsive } from './grid-child.responsive';
@@ -9,13 +8,18 @@ import { gridChildResponsive } from './grid-child.responsive';
 import type { GridChildVariants } from './grid-child.css';
 import type { Responsive } from '../../styles/responsive';
 
-type GridChildVariantResponsive = {
-  [K in keyof GridChildVariants]?: Responsive<
-    NonNullable<GridChildVariants[K]>
-  >;
-};
+interface GridChildVariantResponsive {
+  colSpan?: Responsive<NonNullable<GridChildVariants['colSpan']>>;
+  rowSpan?: Responsive<NonNullable<GridChildVariants['rowSpan']>>;
+  colStart?: Responsive<NonNullable<GridChildVariants['colStart']>>;
+  colEnd?: Responsive<NonNullable<GridChildVariants['colEnd']>>;
+  rowStart?: Responsive<NonNullable<GridChildVariants['rowStart']>>;
+  rowEnd?: Responsive<NonNullable<GridChildVariants['rowEnd']>>;
+  justifySelf?: Responsive<NonNullable<GridChildVariants['justifySelf']>>;
+  alignSelf?: Responsive<NonNullable<GridChildVariants['alignSelf']>>;
+}
 
-type GridChildProps<TUse extends ElementType> =
+export type GridChildProps<TUse extends ElementType> =
   PolymorphicComponentProps<TUse> & GridChildVariantResponsive;
 
 export function GridChild<TUse extends ElementType>({
@@ -38,8 +42,8 @@ export function GridChild<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(
-        gridChildResponsive({
+      className={gridChildResponsive(
+        {
           colSpan,
           rowSpan,
           colStart,
@@ -48,7 +52,7 @@ export function GridChild<TUse extends ElementType>({
           rowEnd,
           justifySelf,
           alignSelf,
-        }),
+        },
         className,
       )}
       {...(domProps as Record<string, unknown>)}

package/src/components/grid/grid.css.ts

@@ -1,157 +1,65 @@
-import { createVar, type StyleRule } from '@vanilla-extract/css';
+import {
+  assignVars,
+  createThemeContract,
+  type StyleRule,
+} 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,
+  gridAlignContentStyles,
+  gridAlignItemsStyles,
+  gridJustifyContentStyles,
+  gridJustifyItemsStyles,
+} from '../layout-maps';
 
-export const minSizeVar = createVar();
-
-// Shared variant style maps so we can reuse them for responsive overrides
-export const gridSpacingStyles = mapContractVars(sys.spacing, (key) => ({
-  '@layer': {
-    [components]: {
-      gap: sys.spacing[key],
-    },
+export const gridVars = createThemeContract({
+  spacing: {
+    gap: null,
   },
-}));
-
-export const gridColumnSpacingStyles = mapContractVars(sys.spacing, (key) => ({
-  '@layer': {
-    [components]: {
-      columnGap: sys.spacing[key],
-    },
+  columnSpacing: {
+    gap: null,
   },
-}));
-
-export const gridRowSpacingStyles = mapContractVars(sys.spacing, (key) => ({
-  '@layer': {
-    [components]: {
-      rowGap: sys.spacing[key],
-    },
+  rowSpacing: {
+    gap: null,
   },
-}));
-
-export const gridJustifyItemsStyles = {
-  start: {
-    '@layer': {
-      [components]: { justifyItems: 'start' },
-    },
-  },
-  end: {
-    '@layer': {
-      [components]: { justifyItems: 'end' },
-    },
+  layout: {
+    minCellSize: null,
   },
-  center: {
-    '@layer': {
-      [components]: { justifyItems: 'center' },
-    },
-  },
-  stretch: {
-    '@layer': {
-      [components]: { justifyItems: 'stretch' },
-    },
-  },
-} as const;
+});
 
-export const gridAlignItemsStyles = {
-  start: {
-    '@layer': {
-      [components]: { alignItems: 'start' },
-    },
-  },
-  end: {
-    '@layer': {
-      [components]: { alignItems: 'end' },
-    },
-  },
-  center: {
-    '@layer': {
-      [components]: { alignItems: 'center' },
-    },
-  },
-  stretch: {
-    '@layer': {
-      [components]: { alignItems: 'stretch' },
-    },
-  },
-} as const;
+const gridSpacingDefaults = assignVars(gridVars.spacing, {
+  gap: sys.spacing[0],
+});
 
-export const gridJustifyContentStyles = {
-  start: {
-    '@layer': {
-      [components]: { justifyContent: 'start' },
-    },
-  },
-  end: {
-    '@layer': {
-      [components]: { justifyContent: '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 gridLayoutDefaults = assignVars(gridVars.layout, {
+  minCellSize: '250px',
+});
 
-export const gridAlignContentStyles = {
-  start: {
-    '@layer': {
-      [components]: { alignContent: 'start' },
-    },
-  },
-  end: {
-    '@layer': {
-      [components]: { alignContent: 'end' },
-    },
-  },
-  center: {
-    '@layer': {
-      [components]: { alignContent: 'center' },
-    },
-  },
-  spaceBetween: {
-    '@layer': {
-      [components]: { alignContent: 'space-between' },
-    },
-  },
-  spaceAround: {
-    '@layer': {
-      [components]: { alignContent: 'space-around' },
-    },
-  },
-  spaceEvenly: {
-    '@layer': {
-      [components]: { alignContent: 'space-evenly' },
-    },
-  },
-  stretch: {
-    '@layer': {
-      [components]: { alignContent: 'stretch' },
-    },
-  },
-} as const;
+// Shared variant style maps so we can reuse them for responsive overrides
+export const gridSpacingStyles = createSpacingVarStyles(
+  gridVars.spacing,
+  'gap',
+);
+
+export const gridColumnSpacingStyles = createSpacingVarStyles(
+  gridVars.columnSpacing,
+  'columnGap',
+);
+
+export const gridRowSpacingStyles = createSpacingVarStyles(
+  gridVars.rowSpacing,
+  'rowGap',
+);
+
+export {
+  gridAlignContentStyles,
+  gridAlignItemsStyles,
+  gridJustifyContentStyles,
+  gridJustifyItemsStyles,
+};
 
 const columnCountValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
 type ColumnCount = (typeof columnCountValues)[number];
@@ -176,14 +84,14 @@ export const autoLayoutStyles = {
   fill: {
     '@layer': {
       [components]: {
-        gridTemplateColumns: `repeat(auto-fill, minmax(min(${minSizeVar}, 100%), 1fr))`,
+        gridTemplateColumns: `repeat(auto-fill, minmax(min(${gridVars.layout.minCellSize}, 100%), 1fr))`,
       },
     },
   },
   fit: {
     '@layer': {
       [components]: {
-        gridTemplateColumns: `repeat(auto-fit, minmax(min(${minSizeVar}, 100%), 1fr))`,
+        gridTemplateColumns: `repeat(auto-fit, minmax(min(${gridVars.layout.minCellSize}, 100%), 1fr))`,
       },
     },
   },
@@ -194,9 +102,11 @@ export const gridRecipe = recipe({
     '@layer': {
       [components]: {
         display: 'grid',
+        gap: gridVars.spacing.gap,
 
         vars: {
-          [minSizeVar]: '250px',
+          ...gridSpacingDefaults,
+          ...gridLayoutDefaults,
         },
       },
     },
@@ -257,8 +167,6 @@ export const spacingAt = createResponsiveVariants({
   media: defaultMedia,
 });
 
-// gridFitStyles now declared above for reuse
-
 export const columnSpacingAt = createResponsiveVariants({
   styles: gridColumnSpacingStyles,
   media: defaultMedia,

package/src/components/grid/grid.tsx

@@ -2,25 +2,35 @@
 
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { GridVariants, minSizeVar } from './grid.css';
+import { defaultOrder, resolveResponsive } from '../../styles/responsive';
+
+import { gridVars, GridVariants } from './grid.css';
 import { gridResponsive } from './grid.responsive';
 
 import type { Responsive } from '../../styles/responsive';
 
-type GridVariantResponsive = {
-  [K in keyof GridVariants]?: Responsive<NonNullable<GridVariants[K]>>;
-};
+interface GridVariantResponsive {
+  spacing?: Responsive<NonNullable<GridVariants['spacing']>>;
+  columnSpacing?: Responsive<NonNullable<GridVariants['columnSpacing']>>;
+  rowSpacing?: Responsive<NonNullable<GridVariants['rowSpacing']>>;
+  columns?: Responsive<NonNullable<GridVariants['columns']>>;
+  autoLayout?: Responsive<NonNullable<GridVariants['autoLayout']>>;
+  justifyItems?: Responsive<NonNullable<GridVariants['justifyItems']>>;
+  alignItems?: Responsive<NonNullable<GridVariants['alignItems']>>;
+  justifyContent?: Responsive<NonNullable<GridVariants['justifyContent']>>;
+  alignContent?: Responsive<NonNullable<GridVariants['alignContent']>>;
+}
 
-type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  GridVariantResponsive & {
-    /**
-     * The minimum size of a grid cell
-     */
-    minSize?: string;
-  };
+export type GridProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> &
+    GridVariantResponsive & {
+      /**
+       * The minimum size of a grid cell
+       */
+      minSize?: string;
+    };
 
 /**
  * The Grid layout provides a flexible, responsive grid system. It can also
@@ -30,7 +40,7 @@ type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
  *
  * https://every-layout.dev/layouts/grid/
  */
-export function Grid<TUse extends ElementType>(props: GridProps<TUse>) {
+export function Grid<TUse extends ElementType = 'div'>(props: GridProps<TUse>) {
   const {
     use: Comp = 'div',
     minSize,
@@ -47,24 +57,36 @@ export function Grid<TUse extends ElementType>(props: GridProps<TUse>) {
     ...rest
   } = props;
 
+  const autoLayoutMap = resolveResponsive(autoLayout, defaultOrder);
+  const columnsMap = resolveResponsive(columns, defaultOrder);
+  const columnsEntries = Object.entries(columnsMap).filter(
+    ([breakpoint]) =>
+      autoLayoutMap[breakpoint as keyof typeof autoLayoutMap] == null,
+  );
+  const columnsForLayout = columnsEntries.length
+    ? (Object.fromEntries(columnsEntries) as Responsive<
+        NonNullable<GridVariants['columns']>
+      >)
+    : undefined;
+
   return (
     <Comp
-      className={clsx(
-        gridResponsive({
+      className={gridResponsive(
+        {
           spacing,
           columnSpacing,
           rowSpacing,
-          columns: autoLayout ? undefined : columns,
+          columns: columnsForLayout,
           autoLayout,
           justifyItems,
           alignItems,
           justifyContent,
           alignContent,
-        }),
+        },
         className,
       )}
       style={assignInlineVars({
-        ...(minSize && { [minSizeVar]: minSize }),
+        ...(minSize && { [gridVars.layout.minCellSize]: minSize }),
       })}
       {...(rest as Record<string, unknown>)}
     />

package/src/components/grid/index.ts

@@ -1,3 +1,4 @@
-export { Grid } from './grid';
-export { GridChild } from './grid-child';
-export { gridRecipe, type GridVariants } from './grid.css';
+export { Grid, type GridProps } from './grid';
+export { GridChild, type GridChildProps } from './grid-child';
+export { gridRecipe, gridVars, type GridVariants } from './grid.css';
+export type { GridChildVariants } from './grid-child.css';