@tosui/react 0.1.2 → 0.1.4

package/README.md

@@ -1,73 +1,119 @@
-# React + TypeScript + Vite
+# @tosui/react
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A themable, orderly, simple UI component library for React. 40 components with CSS Modules styling, responsive props, TypeScript-first types, and constraint-driven design.
 
-Currently, two official plugins are available:
+## Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+npm install @tosui/react
+# or
+pnpm add @tosui/react
+```
+
+## Setup
+
+```tsx
+// Import base styles in your entry point (required)
+import "@tosui/react/styles.css";
+
+// Optionally import IBM Plex fonts
+import "@tosui/react/fonts.css";
+```
+
+## Usage
+
+```tsx
+import { Box, Text, Heading, Button } from "@tosui/react";
+
+function App() {
+  return (
+    <Box p={6}>
+      <Heading size="3xl" weight="semibold">
+        Welcome
+      </Heading>
+      <Text color="foreground-muted">
+        A constraint-driven design system for React
+      </Text>
+      <Button>Get Started</Button>
+    </Box>
+  );
+}
+```
+
+## Components
+
+| Category | Components |
+|----------|------------|
+| **Primitives** | Box, Text, Heading |
+| **Layout** | Stack, HStack, VStack, Flex, Grid, Container, Divider, Spacer |
+| **Forms** | Button, IconButton, Input, Select, Textarea, Checkbox, Radio, Switch, FormField, Label |
+| **Navigation** | Link, Tabs, Breadcrumb, Menu, Pagination |
+| **Feedback** | Alert, Badge, Progress, Skeleton, Spinner |
+| **Data Display** | Avatar, Card, Image, List, Code |
+| **Overlays** | Modal, Tooltip, Popover, Accordion |
+
+## Key Concepts
+
+### Spacing
 
-## React Compiler
+4px base unit with multipliers 0–32:
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+```tsx
+<Box p={4} />        // 16px padding
+<Box m={8} />        // 32px margin
+<Box gap={2} />      // 8px gap
+```
+
+### Responsive Props
 
-## Expanding the ESLint configuration
+Mobile-first breakpoints — `base` (0), `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px):
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+```tsx
+<Box p={{ base: 2, md: 4, lg: 6 }} />
+<Box display={{ base: "none", md: "block" }} />
+```
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+### Color Tokens
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+Semantic names that adapt to light/dark mode:
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```tsx
+<Box bg="surface" color="foreground" />
+<Box bg="primary-default" color="foreground-inverted" />
+<Text color="foreground-muted">Secondary text</Text>
+<Box bg="error-subtle" color="error-default">Error message</Box>
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+**Surface & Text**: `foreground`, `foreground-muted`, `foreground-subtle`, `foreground-inverted`, `background`, `surface`
+**Border**: `border`, `border-muted`
+**Brand**: `primary-default`, `primary-emphasis`, `primary-subtle`, `accent-default`, `accent-emphasis`, `accent-subtle`
+**Feedback**: `success-*`, `warning-*`, `error-*`, `info-*` (each with `-default`, `-emphasis`, `-subtle`)
+
+### Polymorphic Components
+
+```tsx
+<Box as="section" />
+<Text as="label" />
+<Heading as="h1" />
+<Button as="a" href="/signup">Sign Up</Button>
 ```
+
+### Theming
+
+Override CSS variables to customize:
+
+```css
+:root {
+  --t-light-primary-default: #your-brand-color;
+  --t-dark-primary-default: #your-dark-brand-color;
+  --t-spacing-unit: 8px;
+}
+```
+
+## Documentation
+
+Full documentation with interactive examples: [https://dgca.github.io/tosui/](https://dgca.github.io/tosui/)
+
+## License
+
+MIT

package/dist/components/Box/grid/grid.d.ts

@@ -1,9 +1,10 @@
+import { ResponsiveValue } from '../../../utils/breakpoints';
 import { StyleResult } from '../shared';
 export type JustifySelfValue = "auto" | "start" | "end" | "center" | "stretch";
 export type GridProps = {
     justifySelf?: JustifySelfValue;
-    gridTemplateColumns?: string;
-    gridTemplateRows?: string;
+    gridTemplateColumns?: ResponsiveValue<string>;
+    gridTemplateRows?: ResponsiveValue<string>;
 };
 export type GridStateProps = {
     _hover?: GridProps;

package/dist/components/Box/grid/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AA+CF,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,WAAW,CAab"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAKL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAI/E,MAAM,MAAM,SAAS,GAAG;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,mBAAmB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAoFF,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,WAAW,CAab"}

package/dist/components/Box/grid/grid.js

@@ -1,34 +1,54 @@
-import { STATE_SUFFIXES, STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import { STATE_CLASS_SUFFIXES, STATE_SUFFIXES, RESPONSIVE_KEYS } from "../shared/constants.js";
 import styles from "./grid.module.css.js";
 import clsx from "clsx";
 function getJustifySelfClass(value, state) {
   const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
   return stateClassSuffix ? styles[`justify-self-${value}${stateClassSuffix}`] : styles[`justify-self-${value}`];
 }
+function getGridTemplateProp(key, varPrefix, value, state = "base") {
+  const result = { className: "", style: {} };
+  if (value === void 0) return result;
+  const stateSuffix = STATE_SUFFIXES[state];
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  if (typeof value !== "object") {
+    const className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
+    result.className = className || "";
+    result.style[`--t-${varPrefix}${stateSuffix}`] = value;
+    return result;
+  }
+  for (const responsiveKey of RESPONSIVE_KEYS) {
+    const val = value[responsiveKey];
+    if (val === void 0) continue;
+    let className;
+    let varName;
+    if (responsiveKey === "base") {
+      className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
+      varName = `--t-${varPrefix}${stateSuffix}`;
+    } else {
+      className = stateClassSuffix ? styles[`${key}_${responsiveKey}${stateClassSuffix}`] : styles[`${key}_${responsiveKey}`];
+      varName = `--t-${varPrefix}_${responsiveKey}${stateSuffix}`;
+    }
+    if (className) {
+      result.className = clsx(result.className, className);
+    }
+    result.style[varName] = val;
+  }
+  return result;
+}
 function getGridStylesForState(props, state) {
   if (!props) return { className: "", style: {} };
   const { justifySelf, gridTemplateColumns, gridTemplateRows } = props;
   const classes = [];
   const style = {};
-  const stateVarSuffix = STATE_SUFFIXES[state];
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
   if (justifySelf) {
     const cls = getJustifySelfClass(justifySelf, state);
     if (cls) classes.push(cls);
   }
-  if (gridTemplateColumns !== void 0) {
-    const gridColsClass = stateClassSuffix ? styles[`grid-cols${stateClassSuffix}`] : styles["grid-cols"];
-    if (gridColsClass) classes.push(gridColsClass);
-    style[`--t-grid-cols${stateVarSuffix}`] = gridTemplateColumns;
-  }
-  if (gridTemplateRows !== void 0) {
-    const gridRowsClass = stateClassSuffix ? styles[`grid-rows${stateClassSuffix}`] : styles["grid-rows"];
-    if (gridRowsClass) classes.push(gridRowsClass);
-    style[`--t-grid-rows${stateVarSuffix}`] = gridTemplateRows;
-  }
+  const colsResult = getGridTemplateProp("grid-cols", "grid-cols", gridTemplateColumns, state);
+  const rowsResult = getGridTemplateProp("grid-rows", "grid-rows", gridTemplateRows, state);
   return {
-    className: clsx(...classes),
-    style
+    className: clsx(...classes, colsResult.className, rowsResult.className),
+    style: { ...style, ...colsResult.style, ...rowsResult.style }
   };
 }
 function getGridStyles(props) {

package/dist/components/Box/grid/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sources":["../../../../src/components/Box/grid/grid.ts"],"sourcesContent":["import {\n  STATE_SUFFIXES,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./grid.module.css\";\nimport clsx from \"clsx\";\n\nexport type JustifySelfValue = \"auto\" | \"start\" | \"end\" | \"center\" | \"stretch\";\n\nexport type GridProps = {\n  justifySelf?: JustifySelfValue;\n  gridTemplateColumns?: string;\n  gridTemplateRows?: string;\n};\n\nexport type GridStateProps = {\n  _hover?: GridProps;\n};\n\nfunction getJustifySelfClass(value: JustifySelfValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`justify-self-${value}${stateClassSuffix}`]\n    : styles[`justify-self-${value}`];\n}\n\nfunction getGridStylesForState(\n  props: GridProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const { justifySelf, gridTemplateColumns, gridTemplateRows } = props;\n\n  const classes: string[] = [];\n  const style: Record<string, string> = {};\n  const stateVarSuffix = STATE_SUFFIXES[state];\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  // Enumerated prop\n  if (justifySelf) {\n    const cls = getJustifySelfClass(justifySelf, state);\n    if (cls) classes.push(cls);\n  }\n\n  // Variable-based props\n  if (gridTemplateColumns !== undefined) {\n    const gridColsClass = stateClassSuffix ? styles[`grid-cols${stateClassSuffix}`] : styles[\"grid-cols\"];\n    if (gridColsClass) classes.push(gridColsClass);\n    style[`--t-grid-cols${stateVarSuffix}`] = gridTemplateColumns;\n  }\n\n  if (gridTemplateRows !== undefined) {\n    const gridRowsClass = stateClassSuffix ? styles[`grid-rows${stateClassSuffix}`] : styles[\"grid-rows\"];\n    if (gridRowsClass) classes.push(gridRowsClass);\n    style[`--t-grid-rows${stateVarSuffix}`] = gridTemplateRows;\n  }\n\n  return {\n    className: clsx(...classes),\n    style,\n  };\n}\n\nexport function getGridStyles(\n  props: GridProps & GridStateProps\n): StyleResult {\n  const { justifySelf, gridTemplateColumns, gridTemplateRows, _hover } = props;\n\n  const baseStyles = getGridStylesForState(\n    { justifySelf, gridTemplateColumns, gridTemplateRows },\n    \"base\"\n  );\n  const hoverStyles = getGridStylesForState(_hover, \"hover\");\n\n  return {\n    className: clsx(baseStyles.className, hoverStyles.className),\n    style: { ...baseStyles.style, ...hoverStyles.style } as Record<string, string>,\n  };\n}\n"],"names":[],"mappings":";;;AAqBA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,sBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,EAAE,aAAa,qBAAqB,iBAAA,IAAqB;AAE/D,QAAM,UAAoB,CAAA;AAC1B,QAAM,QAAgC,CAAA;AACtC,QAAM,iBAAiB,eAAe,KAAK;AAC3C,QAAM,mBAAmB,qBAAqB,KAAK;AAGnD,MAAI,aAAa;AACf,UAAM,MAAM,oBAAoB,aAAa,KAAK;AAClD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAGA,MAAI,wBAAwB,QAAW;AACrC,UAAM,gBAAgB,mBAAmB,OAAO,YAAY,gBAAgB,EAAE,IAAI,OAAO,WAAW;AACpG,QAAI,cAAe,SAAQ,KAAK,aAAa;AAC7C,UAAM,gBAAgB,cAAc,EAAE,IAAI;AAAA,EAC5C;AAEA,MAAI,qBAAqB,QAAW;AAClC,UAAM,gBAAgB,mBAAmB,OAAO,YAAY,gBAAgB,EAAE,IAAI,OAAO,WAAW;AACpG,QAAI,cAAe,SAAQ,KAAK,aAAa;AAC7C,UAAM,gBAAgB,cAAc,EAAE,IAAI;AAAA,EAC5C;AAEA,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,OAAO;AAAA,IAC1B;AAAA,EAAA;AAEJ;AAEO,SAAS,cACd,OACa;AACb,QAAM,EAAE,aAAa,qBAAqB,kBAAkB,WAAW;AAEvE,QAAM,aAAa;AAAA,IACjB,EAAE,aAAa,qBAAqB,iBAAA;AAAA,IACpC;AAAA,EAAA;AAEF,QAAM,cAAc,sBAAsB,QAAQ,OAAO;AAEzD,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,MAAA;AAAA,EAAM;AAEvD;"}
+{"version":3,"file":"grid.js","sources":["../../../../src/components/Box/grid/grid.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  RESPONSIVE_KEYS,\n  STATE_SUFFIXES,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./grid.module.css\";\nimport clsx from \"clsx\";\n\nexport type JustifySelfValue = \"auto\" | \"start\" | \"end\" | \"center\" | \"stretch\";\n\ntype GridTemplateKey = \"grid-cols\" | \"grid-rows\";\n\nexport type GridProps = {\n  justifySelf?: JustifySelfValue;\n  gridTemplateColumns?: ResponsiveValue<string>;\n  gridTemplateRows?: ResponsiveValue<string>;\n};\n\nexport type GridStateProps = {\n  _hover?: GridProps;\n};\n\nfunction getJustifySelfClass(value: JustifySelfValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`justify-self-${value}${stateClassSuffix}`]\n    : styles[`justify-self-${value}`];\n}\n\nfunction getGridTemplateProp(\n  key: GridTemplateKey,\n  varPrefix: string,\n  value: ResponsiveValue<string> | undefined,\n  state: StateKey = \"base\"\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  const stateSuffix = STATE_SUFFIXES[state];\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  if (typeof value !== \"object\") {\n    const className = stateClassSuffix\n      ? styles[`${key}${stateClassSuffix}`]\n      : styles[key];\n    result.className = className || \"\";\n    result.style[`--t-${varPrefix}${stateSuffix}`] = value;\n    return result;\n  }\n\n  for (const responsiveKey of RESPONSIVE_KEYS) {\n    const val = value[responsiveKey];\n    if (val === undefined) continue;\n\n    let className: string | undefined;\n    let varName: string;\n\n    if (responsiveKey === \"base\") {\n      className = stateClassSuffix\n        ? styles[`${key}${stateClassSuffix}`]\n        : styles[key];\n      varName = `--t-${varPrefix}${stateSuffix}`;\n    } else {\n      className = stateClassSuffix\n        ? styles[`${key}_${responsiveKey}${stateClassSuffix}`]\n        : styles[`${key}_${responsiveKey}`];\n      varName = `--t-${varPrefix}_${responsiveKey}${stateSuffix}`;\n    }\n\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n    result.style[varName] = val;\n  }\n\n  return result;\n}\n\nfunction getGridStylesForState(\n  props: GridProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const { justifySelf, gridTemplateColumns, gridTemplateRows } = props;\n\n  const classes: string[] = [];\n  const style: Record<string, string> = {};\n\n  if (justifySelf) {\n    const cls = getJustifySelfClass(justifySelf, state);\n    if (cls) classes.push(cls);\n  }\n\n  const colsResult = getGridTemplateProp(\"grid-cols\", \"grid-cols\", gridTemplateColumns, state);\n  const rowsResult = getGridTemplateProp(\"grid-rows\", \"grid-rows\", gridTemplateRows, state);\n\n  return {\n    className: clsx(...classes, colsResult.className, rowsResult.className),\n    style: { ...style, ...colsResult.style, ...rowsResult.style },\n  };\n}\n\nexport function getGridStyles(\n  props: GridProps & GridStateProps\n): StyleResult {\n  const { justifySelf, gridTemplateColumns, gridTemplateRows, _hover } = props;\n\n  const baseStyles = getGridStylesForState(\n    { justifySelf, gridTemplateColumns, gridTemplateRows },\n    \"base\"\n  );\n  const hoverStyles = getGridStylesForState(_hover, \"hover\");\n\n  return {\n    className: clsx(baseStyles.className, hoverStyles.className),\n    style: { ...baseStyles.style, ...hoverStyles.style } as Record<string, string>,\n  };\n}\n"],"names":[],"mappings":";;;AAyBA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,oBACP,KACA,WACA,OACA,QAAkB,QACL;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAEhC,QAAM,cAAc,eAAe,KAAK;AACxC,QAAM,mBAAmB,qBAAqB,KAAK;AAEnD,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,YAAY,mBACd,OAAO,GAAG,GAAG,GAAG,gBAAgB,EAAE,IAClC,OAAO,GAAG;AACd,WAAO,YAAY,aAAa;AAChC,WAAO,MAAM,OAAO,SAAS,GAAG,WAAW,EAAE,IAAI;AACjD,WAAO;AAAA,EACT;AAEA,aAAW,iBAAiB,iBAAiB;AAC3C,UAAM,MAAM,MAAM,aAAa;AAC/B,QAAI,QAAQ,OAAW;AAEvB,QAAI;AACJ,QAAI;AAEJ,QAAI,kBAAkB,QAAQ;AAC5B,kBAAY,mBACR,OAAO,GAAG,GAAG,GAAG,gBAAgB,EAAE,IAClC,OAAO,GAAG;AACd,gBAAU,OAAO,SAAS,GAAG,WAAW;AAAA,IAC1C,OAAO;AACL,kBAAY,mBACR,OAAO,GAAG,GAAG,IAAI,aAAa,GAAG,gBAAgB,EAAE,IACnD,OAAO,GAAG,GAAG,IAAI,aAAa,EAAE;AACpC,gBAAU,OAAO,SAAS,IAAI,aAAa,GAAG,WAAW;AAAA,IAC3D;AAEA,QAAI,WAAW;AACb,aAAO,YAAY,KAAK,OAAO,WAAW,SAAS;AAAA,IACrD;AACA,WAAO,MAAM,OAAO,IAAI;AAAA,EAC1B;AAEA,SAAO;AACT;AAEA,SAAS,sBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,EAAE,aAAa,qBAAqB,iBAAA,IAAqB;AAE/D,QAAM,UAAoB,CAAA;AAC1B,QAAM,QAAgC,CAAA;AAEtC,MAAI,aAAa;AACf,UAAM,MAAM,oBAAoB,aAAa,KAAK;AAClD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,QAAM,aAAa,oBAAoB,aAAa,aAAa,qBAAqB,KAAK;AAC3F,QAAM,aAAa,oBAAoB,aAAa,aAAa,kBAAkB,KAAK;AAExF,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,SAAS,WAAW,WAAW,WAAW,SAAS;AAAA,IACtE,OAAO,EAAE,GAAG,OAAO,GAAG,WAAW,OAAO,GAAG,WAAW,MAAA;AAAA,EAAM;AAEhE;AAEO,SAAS,cACd,OACa;AACb,QAAM,EAAE,aAAa,qBAAqB,kBAAkB,WAAW;AAEvE,QAAM,aAAa;AAAA,IACjB,EAAE,aAAa,qBAAqB,iBAAA;AAAA,IACpC;AAAA,EAAA;AAEF,QAAM,cAAc,sBAAsB,QAAQ,OAAO;AAEzD,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,MAAA;AAAA,EAAM;AAEvD;"}

package/dist/components/Box/grid/grid.module.css

@@ -1,19 +1,69 @@
 /* justifySelf */
-._justify-self-auto_1s4ho_2 { justify-self: auto; }
-._justify-self-auto\:h_1s4ho_3:hover { justify-self: auto; }
-._justify-self-start_1s4ho_4 { justify-self: start; }
-._justify-self-start\:h_1s4ho_5:hover { justify-self: start; }
-._justify-self-end_1s4ho_6 { justify-self: end; }
-._justify-self-end\:h_1s4ho_7:hover { justify-self: end; }
-._justify-self-center_1s4ho_8 { justify-self: center; }
-._justify-self-center\:h_1s4ho_9:hover { justify-self: center; }
-._justify-self-stretch_1s4ho_10 { justify-self: stretch; }
-._justify-self-stretch\:h_1s4ho_11:hover { justify-self: stretch; }
+._justify-self-auto_hzpp0_2 { justify-self: auto; }
+._justify-self-auto\:h_hzpp0_3:hover { justify-self: auto; }
+._justify-self-start_hzpp0_4 { justify-self: start; }
+._justify-self-start\:h_hzpp0_5:hover { justify-self: start; }
+._justify-self-end_hzpp0_6 { justify-self: end; }
+._justify-self-end\:h_hzpp0_7:hover { justify-self: end; }
+._justify-self-center_hzpp0_8 { justify-self: center; }
+._justify-self-center\:h_hzpp0_9:hover { justify-self: center; }
+._justify-self-stretch_hzpp0_10 { justify-self: stretch; }
+._justify-self-stretch\:h_hzpp0_11:hover { justify-self: stretch; }
 
 /* gridTemplateColumns (variable-based) */
-._grid-cols_1s4ho_14 { grid-template-columns: var(--t-grid-cols); }
-._grid-cols\:h_1s4ho_15:hover { grid-template-columns: var(--t-grid-cols-h); }
+._grid-cols_hzpp0_14 { grid-template-columns: var(--t-grid-cols); }
+._grid-cols\:h_hzpp0_15:hover { grid-template-columns: var(--t-grid-cols-h); }
+
+@media (min-width: 640px) {
+  ._grid-cols_sm_hzpp0_18 { grid-template-columns: var(--t-grid-cols_sm); }
+  ._grid-cols_sm\:h_hzpp0_19:hover { grid-template-columns: var(--t-grid-cols_sm-h); }
+}
+
+@media (min-width: 768px) {
+  ._grid-cols_md_hzpp0_23 { grid-template-columns: var(--t-grid-cols_md); }
+  ._grid-cols_md\:h_hzpp0_24:hover { grid-template-columns: var(--t-grid-cols_md-h); }
+}
+
+@media (min-width: 1024px) {
+  ._grid-cols_lg_hzpp0_28 { grid-template-columns: var(--t-grid-cols_lg); }
+  ._grid-cols_lg\:h_hzpp0_29:hover { grid-template-columns: var(--t-grid-cols_lg-h); }
+}
+
+@media (min-width: 1280px) {
+  ._grid-cols_xl_hzpp0_33 { grid-template-columns: var(--t-grid-cols_xl); }
+  ._grid-cols_xl\:h_hzpp0_34:hover { grid-template-columns: var(--t-grid-cols_xl-h); }
+}
+
+@media (min-width: 1536px) {
+  ._grid-cols_2xl_hzpp0_38 { grid-template-columns: var(--t-grid-cols_2xl); }
+  ._grid-cols_2xl\:h_hzpp0_39:hover { grid-template-columns: var(--t-grid-cols_2xl-h); }
+}
 
 /* gridTemplateRows (variable-based) */
-._grid-rows_1s4ho_18 { grid-template-rows: var(--t-grid-rows); }
-._grid-rows\:h_1s4ho_19:hover { grid-template-rows: var(--t-grid-rows-h); }
+._grid-rows_hzpp0_43 { grid-template-rows: var(--t-grid-rows); }
+._grid-rows\:h_hzpp0_44:hover { grid-template-rows: var(--t-grid-rows-h); }
+
+@media (min-width: 640px) {
+  ._grid-rows_sm_hzpp0_47 { grid-template-rows: var(--t-grid-rows_sm); }
+  ._grid-rows_sm\:h_hzpp0_48:hover { grid-template-rows: var(--t-grid-rows_sm-h); }
+}
+
+@media (min-width: 768px) {
+  ._grid-rows_md_hzpp0_52 { grid-template-rows: var(--t-grid-rows_md); }
+  ._grid-rows_md\:h_hzpp0_53:hover { grid-template-rows: var(--t-grid-rows_md-h); }
+}
+
+@media (min-width: 1024px) {
+  ._grid-rows_lg_hzpp0_57 { grid-template-rows: var(--t-grid-rows_lg); }
+  ._grid-rows_lg\:h_hzpp0_58:hover { grid-template-rows: var(--t-grid-rows_lg-h); }
+}
+
+@media (min-width: 1280px) {
+  ._grid-rows_xl_hzpp0_62 { grid-template-rows: var(--t-grid-rows_xl); }
+  ._grid-rows_xl\:h_hzpp0_63:hover { grid-template-rows: var(--t-grid-rows_xl-h); }
+}
+
+@media (min-width: 1536px) {
+  ._grid-rows_2xl_hzpp0_67 { grid-template-rows: var(--t-grid-rows_2xl); }
+  ._grid-rows_2xl\:h_hzpp0_68:hover { grid-template-rows: var(--t-grid-rows_2xl-h); }
+}

package/dist/components/Box/grid/grid.module.css.js

@@ -1,18 +1,38 @@
 const styles = {
-  "justify-self-auto": "_justify-self-auto_1s4ho_2",
-  "justify-self-auto:h": "_justify-self-auto:h_1s4ho_3",
-  "justify-self-start": "_justify-self-start_1s4ho_4",
-  "justify-self-start:h": "_justify-self-start:h_1s4ho_5",
-  "justify-self-end": "_justify-self-end_1s4ho_6",
-  "justify-self-end:h": "_justify-self-end:h_1s4ho_7",
-  "justify-self-center": "_justify-self-center_1s4ho_8",
-  "justify-self-center:h": "_justify-self-center:h_1s4ho_9",
-  "justify-self-stretch": "_justify-self-stretch_1s4ho_10",
-  "justify-self-stretch:h": "_justify-self-stretch:h_1s4ho_11",
-  "grid-cols": "_grid-cols_1s4ho_14",
-  "grid-cols:h": "_grid-cols:h_1s4ho_15",
-  "grid-rows": "_grid-rows_1s4ho_18",
-  "grid-rows:h": "_grid-rows:h_1s4ho_19"
+  "justify-self-auto": "_justify-self-auto_hzpp0_2",
+  "justify-self-auto:h": "_justify-self-auto:h_hzpp0_3",
+  "justify-self-start": "_justify-self-start_hzpp0_4",
+  "justify-self-start:h": "_justify-self-start:h_hzpp0_5",
+  "justify-self-end": "_justify-self-end_hzpp0_6",
+  "justify-self-end:h": "_justify-self-end:h_hzpp0_7",
+  "justify-self-center": "_justify-self-center_hzpp0_8",
+  "justify-self-center:h": "_justify-self-center:h_hzpp0_9",
+  "justify-self-stretch": "_justify-self-stretch_hzpp0_10",
+  "justify-self-stretch:h": "_justify-self-stretch:h_hzpp0_11",
+  "grid-cols": "_grid-cols_hzpp0_14",
+  "grid-cols:h": "_grid-cols:h_hzpp0_15",
+  "grid-cols_sm": "_grid-cols_sm_hzpp0_18",
+  "grid-cols_sm:h": "_grid-cols_sm:h_hzpp0_19",
+  "grid-cols_md": "_grid-cols_md_hzpp0_23",
+  "grid-cols_md:h": "_grid-cols_md:h_hzpp0_24",
+  "grid-cols_lg": "_grid-cols_lg_hzpp0_28",
+  "grid-cols_lg:h": "_grid-cols_lg:h_hzpp0_29",
+  "grid-cols_xl": "_grid-cols_xl_hzpp0_33",
+  "grid-cols_xl:h": "_grid-cols_xl:h_hzpp0_34",
+  "grid-cols_2xl": "_grid-cols_2xl_hzpp0_38",
+  "grid-cols_2xl:h": "_grid-cols_2xl:h_hzpp0_39",
+  "grid-rows": "_grid-rows_hzpp0_43",
+  "grid-rows:h": "_grid-rows:h_hzpp0_44",
+  "grid-rows_sm": "_grid-rows_sm_hzpp0_47",
+  "grid-rows_sm:h": "_grid-rows_sm:h_hzpp0_48",
+  "grid-rows_md": "_grid-rows_md_hzpp0_52",
+  "grid-rows_md:h": "_grid-rows_md:h_hzpp0_53",
+  "grid-rows_lg": "_grid-rows_lg_hzpp0_57",
+  "grid-rows_lg:h": "_grid-rows_lg:h_hzpp0_58",
+  "grid-rows_xl": "_grid-rows_xl_hzpp0_62",
+  "grid-rows_xl:h": "_grid-rows_xl:h_hzpp0_63",
+  "grid-rows_2xl": "_grid-rows_2xl_hzpp0_67",
+  "grid-rows_2xl:h": "_grid-rows_2xl:h_hzpp0_68"
 };
 export {
   styles as default

package/dist/components/Box/grid/grid.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"grid.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Grid/Grid.d.ts

@@ -1,12 +1,13 @@
 import { ElementType } from 'react';
 import { Polymorphic } from '../../types/Polymorphic';
+import { ResponsiveValue } from '../../utils/breakpoints';
 import { BoxOwnProps } from '../Box/Box';
 import { JustifyContentValue, AlignItemsValue, SpacingValue } from '../Box/flexbox/flexbox';
 export type GridOwnProps = Omit<BoxOwnProps, "display" | "gridTemplateColumns" | "gridTemplateRows" | "gap" | "gapRow" | "gapColumn" | "justifyContent" | "alignItems"> & {
-    /** Grid template columns (CSS value) */
-    columns?: string;
-    /** Grid template rows (CSS value) */
-    rows?: string;
+    /** Grid template columns — CSS value or responsive object */
+    columns?: ResponsiveValue<string>;
+    /** Grid template rows — CSS value or responsive object */
+    rows?: ResponsiveValue<string>;
     /** Gap between grid items (0-32 spacing multiplier or string) */
     gap?: SpacingValue;
     /** Row gap between grid items (0-32 spacing multiplier or string) */

package/dist/components/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EACV,mBAAmB,EACnB,eAAe,EACf,YAAY,EACb,MAAM,kCAAkC,CAAC;AAM1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,WAAW,EACT,SAAS,GACT,qBAAqB,GACrB,kBAAkB,GAClB,KAAK,GACL,QAAQ,GACR,WAAW,GACX,gBAAgB,GAChB,YAAY,CACf,GAAG;IACF,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,gDAAgD;IAChD,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,gDAAgD;IAChD,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,wCAAwC;IACxC,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,yCAAyC;IACzC,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CAChE,CAAC,EACD,YAAY,CACb,CAAC;AAMF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,OAAO,EACP,IAAI,EACJ,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAkBd"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EACV,mBAAmB,EACnB,eAAe,EACf,YAAY,EACb,MAAM,kCAAkC,CAAC;AAM1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,WAAW,EACT,SAAS,GACT,qBAAqB,GACrB,kBAAkB,GAClB,KAAK,GACL,QAAQ,GACR,WAAW,GACX,gBAAgB,GAChB,YAAY,CACf,GAAG;IACF,6DAA6D;IAC7D,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAClC,0DAA0D;IAC1D,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,iEAAiE;IACjE,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,gDAAgD;IAChD,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,gDAAgD;IAChD,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,wCAAwC;IACxC,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,yCAAyC;IACzC,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CAChE,CAAC,EACD,YAAY,CACb,CAAC;AAMF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,OAAO,EACP,IAAI,EACJ,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAkBd"}

package/dist/components/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type {\n  JustifyContentValue,\n  AlignItemsValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type GridOwnProps = Omit<\n  BoxOwnProps,\n  | \"display\"\n  | \"gridTemplateColumns\"\n  | \"gridTemplateRows\"\n  | \"gap\"\n  | \"gapRow\"\n  | \"gapColumn\"\n  | \"justifyContent\"\n  | \"alignItems\"\n> & {\n  /** Grid template columns (CSS value) */\n  columns?: string;\n  /** Grid template rows (CSS value) */\n  rows?: string;\n  /** Gap between grid items (0-32 spacing multiplier or string) */\n  gap?: SpacingValue;\n  /** Row gap between grid items (0-32 spacing multiplier or string) */\n  gapRow?: SpacingValue;\n  /** Column gap between grid items (0-32 spacing multiplier or string) */\n  gapColumn?: SpacingValue;\n  /** Justify items along the inline (row) axis */\n  justify?: JustifyContentValue;\n  /** Align items along the block (column) axis */\n  align?: AlignItemsValue;\n  /** Justify content (distribute rows) */\n  justifyContent?: JustifyContentValue;\n  /** Align content (distribute columns) */\n  alignContent?: JustifyContentValue;\n};\n\nexport type GridProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  GridOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Grid - Explicit CSS Grid layout component\n *\n * A polymorphic grid container with shorthand props:\n * - Default element: <div>\n * - Always renders with display=\"grid\"\n * - columns -> gridTemplateColumns\n * - rows -> gridTemplateRows\n * - gap, gapRow, gapColumn\n * - justify -> justifyItems (alignment within cells)\n * - align -> alignItems (alignment within cells)\n * - justifyContent, alignContent (distribution of grid tracks)\n */\nexport function Grid<T extends ElementType = \"div\">({\n  as,\n  columns,\n  rows,\n  gap,\n  gapRow,\n  gapColumn,\n  justify,\n  align,\n  justifyContent,\n  alignContent,\n  children,\n  ...rest\n}: GridProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"grid\"\n      gridTemplateColumns={columns}\n      gridTemplateRows={rows}\n      gap={gap}\n      gapRow={gapRow}\n      gapColumn={gapColumn}\n      justifyContent={justify ?? justifyContent}\n      alignItems={align ?? alignContent}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAkEO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,qBAAqB;AAAA,QACrB,kBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,WAAW;AAAA,QAC3B,YAAY,SAAS;AAAA,QACpB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type {\n  JustifyContentValue,\n  AlignItemsValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type GridOwnProps = Omit<\n  BoxOwnProps,\n  | \"display\"\n  | \"gridTemplateColumns\"\n  | \"gridTemplateRows\"\n  | \"gap\"\n  | \"gapRow\"\n  | \"gapColumn\"\n  | \"justifyContent\"\n  | \"alignItems\"\n> & {\n  /** Grid template columns — CSS value or responsive object */\n  columns?: ResponsiveValue<string>;\n  /** Grid template rows — CSS value or responsive object */\n  rows?: ResponsiveValue<string>;\n  /** Gap between grid items (0-32 spacing multiplier or string) */\n  gap?: SpacingValue;\n  /** Row gap between grid items (0-32 spacing multiplier or string) */\n  gapRow?: SpacingValue;\n  /** Column gap between grid items (0-32 spacing multiplier or string) */\n  gapColumn?: SpacingValue;\n  /** Justify items along the inline (row) axis */\n  justify?: JustifyContentValue;\n  /** Align items along the block (column) axis */\n  align?: AlignItemsValue;\n  /** Justify content (distribute rows) */\n  justifyContent?: JustifyContentValue;\n  /** Align content (distribute columns) */\n  alignContent?: JustifyContentValue;\n};\n\nexport type GridProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  GridOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Grid - Explicit CSS Grid layout component\n *\n * A polymorphic grid container with shorthand props:\n * - Default element: <div>\n * - Always renders with display=\"grid\"\n * - columns -> gridTemplateColumns\n * - rows -> gridTemplateRows\n * - gap, gapRow, gapColumn\n * - justify -> justifyItems (alignment within cells)\n * - align -> alignItems (alignment within cells)\n * - justifyContent, alignContent (distribution of grid tracks)\n */\nexport function Grid<T extends ElementType = \"div\">({\n  as,\n  columns,\n  rows,\n  gap,\n  gapRow,\n  gapColumn,\n  justify,\n  align,\n  justifyContent,\n  alignContent,\n  children,\n  ...rest\n}: GridProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"grid\"\n      gridTemplateColumns={columns}\n      gridTemplateRows={rows}\n      gap={gap}\n      gapRow={gapRow}\n      gapColumn={gapColumn}\n      justifyContent={justify ?? justifyContent}\n      alignItems={align ?? alignContent}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAmEO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,qBAAqB;AAAA,QACrB,kBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,WAAW;AAAA,QAC3B,YAAY,SAAS;AAAA,QACpB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}