@kalink-ui/seedly 0.26.3 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kalink-ui/seedly
 
+## 0.27.0
+
+### Minor Changes
+
+- 3a1d6bd: feat(seedly/grid): introduce responsive Grid layout with GridChild
+  - Add `Grid` component with responsive variants for spacing, columns, fit
+    (auto-fill/auto-fit), and content/item alignment.
+  - Add `GridChild` for per-item spans, line starts/ends, and self alignment.
+  - Support `minSize` via CSS var to control auto-fit/auto-fill behavior.
+  - Export `Grid`, `GridChild`, and `gridRecipe` from the Grid module.
+  - Include Storybook stories demonstrating fixed columns, auto-fit, and spans.
+
 ## 0.26.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.26.3",
+  "version": "0.27.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -43,8 +43,8 @@
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3",
-    "@kalink-ui/eslint-config": "0.10.0",
-    "@kalink-ui/typescript-config": "0.4.0"
+    "@kalink-ui/typescript-config": "0.4.0",
+    "@kalink-ui/eslint-config": "0.10.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",

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

@@ -0,0 +1,191 @@
+import { type StyleRule } from '@vanilla-extract/css';
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+import { components } from '../../styles/layers.css';
+import {
+  createResponsiveVariants,
+  defaultMedia,
+} from '../../styles/responsive';
+
+const oneToTwelve = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
+type OneToTwelve = (typeof oneToTwelve)[number];
+
+const oneToThirteen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] as const;
+type OneToThirteen = (typeof oneToThirteen)[number];
+type LineIndex = OneToThirteen | -1;
+
+const colSpanStyles = Object.fromEntries(
+  oneToTwelve.map((n) => [
+    n,
+    {
+      '@layer': {
+        [components]: {
+          gridColumn: `auto / span ${n}`,
+        },
+      },
+    },
+  ]),
+) as Record<OneToTwelve, { '@layer': Record<string, { gridColumn: string }> }>;
+
+const rowSpanStyles = Object.fromEntries(
+  oneToTwelve.map((n) => [
+    n,
+    {
+      '@layer': {
+        [components]: {
+          gridRow: `auto / span ${n}`,
+        },
+      },
+    },
+  ]),
+) as Record<OneToTwelve, { '@layer': Record<string, { gridRow: string }> }>;
+
+const colStartStyles = Object.fromEntries(
+  oneToThirteen.map((n) => [
+    n,
+    {
+      '@layer': {
+        [components]: {
+          gridColumnStart: n,
+        },
+      },
+    },
+  ]),
+) as Record<
+  OneToThirteen,
+  { '@layer': Record<string, { gridColumnStart: number }> }
+>;
+
+const colEndStyles = Object.fromEntries(
+  [...oneToThirteen, -1 as const].map((n) => [
+    n,
+    {
+      '@layer': {
+        [components]: {
+          gridColumnEnd: n,
+        },
+      },
+    },
+  ]),
+) as Record<LineIndex, { '@layer': Record<string, { gridColumnEnd: number }> }>;
+
+const rowStartStyles = Object.fromEntries(
+  oneToThirteen.map((n) => [
+    n,
+    {
+      '@layer': {
+        [components]: {
+          gridRowStart: n,
+        },
+      },
+    },
+  ]),
+) as Record<
+  OneToThirteen,
+  { '@layer': Record<string, { gridRowStart: number }> }
+>;
+
+const rowEndStyles = Object.fromEntries(
+  [...oneToThirteen, -1 as const].map((n) => [
+    n,
+    {
+      '@layer': {
+        [components]: {
+          gridRowEnd: n,
+        },
+      },
+    },
+  ]),
+) as Record<LineIndex, { '@layer': Record<string, { gridRowEnd: number }> }>;
+
+const justifySelfStyles = {
+  start: {
+    '@layer': { [components]: { justifySelf: 'start' } },
+  },
+  end: {
+    '@layer': { [components]: { justifySelf: 'end' } },
+  },
+  center: {
+    '@layer': { [components]: { justifySelf: 'center' } },
+  },
+  stretch: {
+    '@layer': { [components]: { justifySelf: 'stretch' } },
+  },
+} as const;
+
+const alignSelfStyles = {
+  start: {
+    '@layer': { [components]: { alignSelf: 'start' } },
+  },
+  end: {
+    '@layer': { [components]: { alignSelf: 'end' } },
+  },
+  center: {
+    '@layer': { [components]: { alignSelf: 'center' } },
+  },
+  stretch: {
+    '@layer': { [components]: { alignSelf: 'stretch' } },
+  },
+} as const;
+
+export const gridChildRecipe = recipe({
+  base: {
+    '@layer': {
+      [components]: {},
+    },
+  },
+  variants: {
+    colSpan: colSpanStyles,
+    rowSpan: rowSpanStyles,
+    colStart: colStartStyles,
+    colEnd: colEndStyles,
+    rowStart: rowStartStyles,
+    rowEnd: rowEndStyles,
+    justifySelf: justifySelfStyles,
+    alignSelf: alignSelfStyles,
+  },
+});
+
+export type GridChildVariants = NonNullable<
+  RecipeVariants<typeof gridChildRecipe>
+>;
+
+export const colSpanAt = createResponsiveVariants({
+  styles: colSpanStyles as Record<OneToTwelve, StyleRule | StyleRule[]>,
+  media: defaultMedia,
+});
+
+export const rowSpanAt = createResponsiveVariants({
+  styles: rowSpanStyles as Record<OneToTwelve, StyleRule | StyleRule[]>,
+  media: defaultMedia,
+});
+
+export const colStartAt = createResponsiveVariants({
+  styles: colStartStyles as Record<OneToThirteen, StyleRule | StyleRule[]>,
+  media: defaultMedia,
+});
+
+export const colEndAt = createResponsiveVariants({
+  styles: colEndStyles as Record<LineIndex, StyleRule | StyleRule[]>,
+  media: defaultMedia,
+});
+
+export const rowStartAt = createResponsiveVariants({
+  styles: rowStartStyles as Record<OneToThirteen, StyleRule | StyleRule[]>,
+  media: defaultMedia,
+});
+
+export const rowEndAt = createResponsiveVariants({
+  styles: rowEndStyles as Record<LineIndex, StyleRule | StyleRule[]>,
+  media: defaultMedia,
+});
+
+export const justifySelfAt = createResponsiveVariants({
+  styles: justifySelfStyles,
+  media: defaultMedia,
+});
+
+export const alignSelfAt = createResponsiveVariants({
+  styles: alignSelfStyles,
+  media: defaultMedia,
+});

package/src/components/grid/grid-child.responsive.ts

@@ -0,0 +1,28 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import {
+  alignSelfAt,
+  colEndAt,
+  colSpanAt,
+  colStartAt,
+  gridChildRecipe,
+  justifySelfAt,
+  rowEndAt,
+  rowSpanAt,
+  rowStartAt,
+} from './grid-child.css';
+
+export const gridChildResponsive = responsiveRecipe({
+  recipe: gridChildRecipe,
+  at: {
+    colSpan: colSpanAt,
+    rowSpan: rowSpanAt,
+    colStart: colStartAt,
+    colEnd: colEndAt,
+    rowStart: rowStartAt,
+    rowEnd: rowEndAt,
+    justifySelf: justifySelfAt,
+    alignSelf: alignSelfAt,
+  },
+  order: defaultOrder,
+});

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+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]>
+  >;
+};
+
+type GridChildProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & GridChildVariantResponsive;
+
+export function GridChild<TUse extends ElementType>({
+  className,
+  ...props
+}: GridChildProps<TUse>) {
+  const { use: Comp = 'div', ...rest } = props;
+
+  const {
+    colSpan,
+    rowSpan,
+    colStart,
+    colEnd,
+    rowStart,
+    rowEnd,
+    justifySelf,
+    alignSelf,
+    ...domProps
+  } = rest as GridChildVariantResponsive & Record<string, unknown>;
+
+  return (
+    <Comp
+      className={clsx(
+        gridChildResponsive({
+          colSpan,
+          rowSpan,
+          colStart,
+          colEnd,
+          rowStart,
+          rowEnd,
+          justifySelf,
+          alignSelf,
+        }),
+        className,
+      )}
+      {...(domProps as Record<string, unknown>)}
+    />
+  );
+}

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

@@ -1,11 +1,11 @@
-import { createVar } from '@vanilla-extract/css';
+import { createVar, type StyleRule } 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';
 
@@ -15,17 +15,185 @@ export const minSizeVar = createVar();
 export const gridSpacingStyles = mapContractVars(sys.spacing, (key) => ({
   '@layer': {
     [components]: {
-      gridGap: sys.spacing[key],
+      gap: sys.spacing[key],
+    },
+  },
+}));
+
+export const gridColumnSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      columnGap: sys.spacing[key],
     },
   },
 }));
 
+export const gridRowSpacingStyles = mapContractVars(sys.spacing, (key) => ({
+  '@layer': {
+    [components]: {
+      rowGap: sys.spacing[key],
+    },
+  },
+}));
+
+export const gridJustifyItemsStyles = {
+  start: {
+    '@layer': {
+      [components]: { justifyItems: 'start' },
+    },
+  },
+  end: {
+    '@layer': {
+      [components]: { justifyItems: 'end' },
+    },
+  },
+  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;
+
+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;
+
+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;
+
+const columnCountValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
+type ColumnCount = (typeof columnCountValues)[number];
+
+const gridColumnsStyles = Object.fromEntries(
+  columnCountValues.map((n) => [
+    n,
+    {
+      '@layer': {
+        [components]: {
+          gridTemplateColumns: `repeat(${n}, 1fr)`,
+        },
+      },
+    },
+  ]),
+) as Record<
+  ColumnCount,
+  { '@layer': Record<string, { gridTemplateColumns: string }> }
+>;
+
+export const gridFitStyles = {
+  fill: {
+    '@layer': {
+      [components]: {
+        gridTemplateColumns: `repeat(auto-fill, minmax(min(${minSizeVar}, 100%), 1fr))`,
+      },
+    },
+  },
+  fit: {
+    '@layer': {
+      [components]: {
+        gridTemplateColumns: `repeat(auto-fit, minmax(min(${minSizeVar}, 100%), 1fr))`,
+      },
+    },
+  },
+} as const;
+
 export const gridRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
         display: 'grid',
-        gridTemplateColumns: `repeat(auto-fill, minmax(min(${minSizeVar}, 100%), 1fr))`,
 
         vars: {
           [minSizeVar]: '250px',
@@ -39,6 +207,46 @@ export const gridRecipe = recipe({
      * The spacing between the grid cell
      */
     spacing: gridSpacingStyles,
+
+    /**
+     * The spacing between columns only
+     */
+    columnSpacing: gridColumnSpacingStyles,
+
+    /**
+     * The spacing between rows only
+     */
+    rowSpacing: gridRowSpacingStyles,
+
+    /**
+     * Force a fixed number of columns
+     */
+    columns: gridColumnsStyles,
+
+    /**
+     * Whether to use auto-fill (default) or auto-fit
+     */
+    fit: gridFitStyles,
+
+    /**
+     * Grid item alignment along inline axis
+     */
+    justifyItems: gridJustifyItemsStyles,
+
+    /**
+     * Grid item alignment along block axis
+     */
+    alignItems: gridAlignItemsStyles,
+
+    /**
+     * Content alignment within the grid inline axis
+     */
+    justifyContent: gridJustifyContentStyles,
+
+    /**
+     * Content alignment within the grid block axis
+     */
+    alignContent: gridAlignContentStyles,
   },
 });
 
@@ -48,3 +256,45 @@ export const spacingAt = createResponsiveVariants({
   styles: gridSpacingStyles,
   media: defaultMedia,
 });
+
+// gridFitStyles now declared above for reuse
+
+export const columnSpacingAt = createResponsiveVariants({
+  styles: gridColumnSpacingStyles,
+  media: defaultMedia,
+});
+
+export const rowSpacingAt = createResponsiveVariants({
+  styles: gridRowSpacingStyles,
+  media: defaultMedia,
+});
+
+export const columnsAt = createResponsiveVariants({
+  styles: gridColumnsStyles as Record<ColumnCount, StyleRule | StyleRule[]>,
+  media: defaultMedia,
+});
+
+export const fitAt = createResponsiveVariants({
+  styles: gridFitStyles,
+  media: defaultMedia,
+});
+
+export const justifyItemsAt = createResponsiveVariants({
+  styles: gridJustifyItemsStyles,
+  media: defaultMedia,
+});
+
+export const alignItemsAt = createResponsiveVariants({
+  styles: gridAlignItemsStyles,
+  media: defaultMedia,
+});
+
+export const justifyContentAt = createResponsiveVariants({
+  styles: gridJustifyContentStyles,
+  media: defaultMedia,
+});
+
+export const alignContentAt = createResponsiveVariants({
+  styles: gridAlignContentStyles,
+  media: defaultMedia,
+});

package/src/components/grid/grid.responsive.ts

@@ -1,9 +1,30 @@
 import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { gridRecipe, spacingAt } from './grid.css';
+import {
+  alignContentAt,
+  alignItemsAt,
+  columnsAt,
+  fitAt,
+  gridRecipe,
+  justifyContentAt,
+  justifyItemsAt,
+  rowSpacingAt,
+  spacingAt,
+  columnSpacingAt,
+} from './grid.css';
 
 export const gridResponsive = responsiveRecipe({
   recipe: gridRecipe,
-  at: { spacing: spacingAt },
+  at: {
+    spacing: spacingAt,
+    columnSpacing: columnSpacingAt,
+    rowSpacing: rowSpacingAt,
+    columns: columnsAt,
+    fit: fitAt,
+    justifyItems: justifyItemsAt,
+    alignItems: alignItemsAt,
+    justifyContent: justifyContentAt,
+    alignContent: alignContentAt,
+  },
   order: defaultOrder,
 });

package/src/components/grid/grid.tsx

@@ -10,17 +10,20 @@ import { gridResponsive } from './grid.responsive';
 
 import type { Responsive } from '../../styles/responsive';
 
+type GridVariantResponsive = {
+  [K in keyof GridVariants]?: Responsive<NonNullable<GridVariants[K]>>;
+};
+
 type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  Omit<GridVariants, 'spacing'> & {
+  GridVariantResponsive & {
     /**
      * The minimum size of a grid cell
      */
     minSize?: string;
-    spacing?: Responsive<NonNullable<GridVariants['spacing']>>;
   };
 
 /**
- * The Grid layout provides a flexible, responsive grid system that
+ * The Grid layout provides a flexible, responsive grid system. It can also
  * arranges elements in a structured, multi-column format, automatically
  * adjusting the number of columns based on the available space and
  * predefined constraints.
@@ -28,20 +31,44 @@ type GridProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
  * https://every-layout.dev/layouts/grid/
  */
 export function Grid<TUse extends ElementType>({
-  spacing,
   minSize,
   className,
   ...props
 }: GridProps<TUse>) {
-  const { use: Comp = 'div', ...rest } = props;
+  const {
+    use: Comp = 'div',
+    spacing,
+    columnSpacing,
+    rowSpacing,
+    columns = { xs: 4, md: 8, lg: 12 },
+    fit,
+    justifyItems,
+    alignItems,
+    justifyContent,
+    alignContent,
+    ...rest
+  } = props;
 
   return (
     <Comp
-      className={clsx(gridResponsive({ spacing }), className)}
+      className={clsx(
+        gridResponsive({
+          spacing,
+          columnSpacing,
+          rowSpacing,
+          columns,
+          fit,
+          justifyItems,
+          alignItems,
+          justifyContent,
+          alignContent,
+        }),
+        className,
+      )}
       style={assignInlineVars({
         ...(minSize && { [minSizeVar]: minSize }),
       })}
-      {...rest}
+      {...(rest as Record<string, unknown>)}
     />
   );
 }

package/src/components/grid/index.ts

@@ -1,2 +1,3 @@
 export { Grid } from './grid';
+export { GridChild } from './grid-child';
 export { gridRecipe, type GridVariants } from './grid.css';

package/src/styles/define-responsive-properties.ts

@@ -72,6 +72,7 @@ export const defineResponsiveProperties = ({
       justifySelf: ['start', 'end', 'center', 'stretch'],
       alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
       alignSelf: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+      alignContent: ['start', 'end', 'center', 'stretch'],
 
       position: [
         'absolute',