npm - @puzzle-ui/ui - Versions diffs - 0.5.1 → 0.6.0 - Mend

@puzzle-ui/ui 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +6 -7
package/dist/components/data-display/badge/index.cjs +1 -1
package/dist/components/data-display/badge/index.cjs.map +1 -1
package/dist/components/data-display/badge/index.js +1 -1
package/dist/components/data-display/badge/index.js.map +1 -1
package/dist/components/layout/grid/grid.css +63 -0
package/dist/components/layout/grid/index.cjs +65 -0
package/dist/components/layout/grid/index.cjs.map +1 -0
package/dist/components/layout/grid/index.d.cts +38 -0
package/dist/components/layout/grid/index.d.ts +38 -0
package/dist/components/layout/grid/index.js +64 -0
package/dist/components/layout/grid/index.js.map +1 -0
package/dist/index.cjs +76 -73
package/dist/index.d.cts +2 -1
package/dist/index.d.ts +2 -1
package/dist/index.js +2 -1
package/package.json +5 -5

package/README.md CHANGED Viewed

@@ -1,14 +1,13 @@
 # @puzzle-ui/ui
-Accessible, token-driven React components for building Puzzle interfaces.
+Composable, token-driven React components for building React interfaces with Puzzle.
 **Documentation:** [https://puzzle-ui.com/docs/ui](https://puzzle-ui.com/docs/ui)
-> [!WARNING]
-> **Puzzle is not ready for production use.** APIs, component props, package
-> exports, and styling may change without notice. Accessibility and framework
-> compatibility are still being tested. Use it for experimentation and
-> evaluation.
+Component API maturity is listed on each component's documentation page.
+Paper, Skeleton, Label, Background, Breadcrumbs, Sidebar, and Backdrop are
+Experimental because their current validation evidence is limited. Review
+documented accessibility and framework details when integrating components.
 `@puzzle-ui/ui` provides composable, router-independent React components:
 actions, data display, editors, forms, layout, navigation, overlays,
@@ -61,7 +60,7 @@ export const App = () => (
 | Data display | Alert, Avatar, Badge, Card, EmptyState, Image, Paper, Progress, Rating, Skeleton                              |
 | Editors      | TextEditor, TextEditorToolbar, TextRenderer                                                                   |
 | Forms        | Autocomplete, Checkbox, ColorPicker, DatePicker, FileUpload, FormField, inputs, Radio, Select, Slider, Switch |
-| Layout       | AppBar, AspectRatio, Container, PageLayout, ResizablePanels, ScrollArea, Section, Separator, Sidebar, Stack   |
+| Layout       | AppBar, AspectRatio, Container, Grid, GridItem, PageLayout, ResizablePanels, ScrollArea, Section, Separator, Sidebar, Stack |
 | Navigation   | Accordion, Breadcrumbs, Carousel, Link, Pagination, Tabs, TreeView                                            |
 | Overlays     | Command, ContextMenu, Dialog, Drawer, DropdownMenu, Notification, Popover, Tooltip                            |
 | Typography   | Heading, Text                                                                                                 |

package/dist/components/data-display/badge/index.cjs CHANGED Viewed

@@ -21,7 +21,7 @@ const Badge = ({ content, size = 20, color = "primary", anchorOrigin = {
 		anchorOrigin.horizontal,
 		anchorOverlap
 	], children == null && "puzzle-badge-standalone", !isHex && `puzzle-badge-${color}`, className);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(children == null ? "span" : "div", {
 		className: classes,
 		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: (0, _puzzle_ui_core.cn)("puzzle-badge-indicator", isSingleCharacter && "puzzle-badge-indicator--single"),

package/dist/components/data-display/badge/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","names":["isHexColor","isDarkColor","cn"],"sources":["../../../../src/components/data-display/badge/index.tsx"],"sourcesContent":["import { cn, isDarkColor, isHexColor } from \"@puzzle-ui/core\";\nimport { type ReactNode } from \"react\";\nimport \"./badge.css\";\n\ntype AnchorOrigin = {\n vertical: \"top\" \| \"bottom\";\n horizontal: \"left\" \| \"right\";\n};\n\ntype AnchorOffset = {\n vertical: number;\n horizontal: number;\n};\n\ntype AnchorOverlap = \"rectangular\" \| \"circular\";\ntype BadgeColor =\n \| \"primary\"\n \| \"secondary\"\n \| \"accent\"\n \| \"danger\"\n \| \"info\"\n \| `#${string}`;\n\ntype BadgeProps = {\n content: ReactNode;\n size?: number;\n color?: BadgeColor;\n anchorOrigin?: AnchorOrigin;\n anchorOffset?: AnchorOffset;\n anchorOverlap?: AnchorOverlap;\n className?: string;\n children?: ReactNode;\n};\n\nconst Badge = ({\n content,\n size = 20,\n color = \"primary\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n anchorOffset = { vertical: 0, horizontal: 0 },\n anchorOverlap = \"rectangular\",\n className,\n children,\n}: BadgeProps) => {\n if (!Number.isFinite(anchorOffset.vertical) \|\| !Number.isFinite(anchorOffset.horizontal)) {\n throw new TypeError(\"Badge anchorOffset values must be finite numbers.\");\n }\n\n const resolvedSize = Math.max(size, 16);\n const isHex = isHexColor(color);\n const isDark = isHex ? isDarkColor(color) : false;\n\n const textContent =\n typeof content === \"string\" \|\| typeof content === \"number\"\n ? String(content).trim()\n : null;\n const isSingleCharacter =\n textContent != null && Array.from(textContent).length === 1;\n\n const classes = cn(\n \"puzzle-badge\",\n children != null && [\n anchorOrigin.vertical,\n anchorOrigin.horizontal,\n anchorOverlap,\n ],\n children == null && \"puzzle-badge-standalone\",\n !isHex && `puzzle-badge-${color}`,\n className,\n );\n\n return (\n <~~div~~ className={classes}>\n {children}\n <span\n className={cn(\n \"puzzle-badge-indicator\",\n isSingleCharacter && \"puzzle-badge-indicator--single\",\n )}\n style={{\n fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,\n minHeight: `${resolvedSize}px`,\n minWidth: `${resolvedSize}px`,\n translate: children != null\n ? `${anchorOffset.horizontal * (anchorOrigin.horizontal === \"left\" ? 1 : -1)}px ${anchorOffset.vertical * (anchorOrigin.vertical === \"top\" ? 1 : -1)}px`\n : undefined,\n backgroundColor: isHex ? color : undefined,\n color: isHex\n ? isDark\n ? \"var(--puzzle-color-light-foreground)\"\n : \"var(--puzzle-color-dark-foreground)\"\n : undefined,\n }}\n >\n {content}\n </span>\n </~~div~~>\n );\n};\n\nexport {\n Badge,\n type BadgeProps,\n type BadgeColor,\n type AnchorOrigin,\n type AnchorOffset,\n type AnchorOverlap,\n};\n"],"mappings":";;;;;AAkCA,MAAM,SAAS,EACb,SACA,OAAO,IACP,QAAQ,WACR,eAAe;CAAE,UAAU;CAAO,YAAY;AAAQ,GACtD,eAAe;CAAE,UAAU;CAAG,YAAY;AAAE,GAC5C,gBAAgB,eAChB,WACA,eACgB;CAChB,IAAI,CAAC,OAAO,SAAS,aAAa,QAAQ,KAAK,CAAC,OAAO,SAAS,aAAa,UAAU,GACrF,MAAM,IAAI,UAAU,mDAAmD;CAGzE,MAAM,eAAe,KAAK,IAAI,MAAM,EAAE;CACtC,MAAM,SAAA,GAAQA,gBAAAA,WAAAA,CAAW,KAAK;CAC9B,MAAM,SAAS,SAAA,GAAQC,gBAAAA,YAAAA,CAAY,KAAK,IAAI;CAE5C,MAAM,cACJ,OAAO,YAAY,YAAY,OAAO,YAAY,WAC9C,OAAO,OAAO,CAAC,CAAC,KAAK,IACrB;CACN,MAAM,oBACJ,eAAe,QAAQ,MAAM,KAAK,WAAW,CAAC,CAAC,WAAW;CAE5D,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CACd,gBACA,YAAY,QAAQ;EAClB,aAAa;EACb,aAAa;EACb;CACF,GACA,YAAY,QAAQ,2BACpB,CAAC,SAAS,gBAAgB,SAC1B,SACF;~~CAEA~~,OACE,iBAAA,GAAA,kBAAA,KAAA,~~CAAC~~,~~OAAD~~;~~EAAK~~,WAAW;~~EAAhB~~,UAAA,CACG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,YAAA,GAAWA,gBAAAA,GAAAA,CACT,0BACA,qBAAqB,gCACvB;GACA,OAAO;IACL,UAAU,sBAAsB,aAAa;IAC7C,WAAW,GAAG,aAAa;IAC3B,UAAU,GAAG,aAAa;IAC1B,WAAW,YAAY,OACnB,GAAG,aAAa,cAAc,aAAa,eAAe,SAAS,IAAI,IAAI,KAAK,aAAa,YAAY,aAAa,aAAa,QAAQ,IAAI,IAAI,MACnJ,KAAA;IACJ,iBAAiB,QAAQ,QAAQ,KAAA;IACjC,OAAO,QACH,SACE,yCACA,wCACF,KAAA;GACN;GAEC,UAAA;EACG,CAAA,~~CACH~~;;~~AAET~~"}
1	+ {"version":3,"file":"index.cjs","names":["isHexColor","isDarkColor","cn"],"sources":["../../../../src/components/data-display/badge/index.tsx"],"sourcesContent":["import { cn, isDarkColor, isHexColor } from \"@puzzle-ui/core\";\nimport { type ReactNode } from \"react\";\nimport \"./badge.css\";\n\ntype AnchorOrigin = {\n vertical: \"top\" \| \"bottom\";\n horizontal: \"left\" \| \"right\";\n};\n\ntype AnchorOffset = {\n vertical: number;\n horizontal: number;\n};\n\ntype AnchorOverlap = \"rectangular\" \| \"circular\";\ntype BadgeColor =\n \| \"primary\"\n \| \"secondary\"\n \| \"accent\"\n \| \"danger\"\n \| \"info\"\n \| `#${string}`;\n\ntype BadgeProps = {\n content: ReactNode;\n size?: number;\n color?: BadgeColor;\n anchorOrigin?: AnchorOrigin;\n anchorOffset?: AnchorOffset;\n anchorOverlap?: AnchorOverlap;\n className?: string;\n children?: ReactNode;\n};\n\nconst Badge = ({\n content,\n size = 20,\n color = \"primary\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n anchorOffset = { vertical: 0, horizontal: 0 },\n anchorOverlap = \"rectangular\",\n className,\n children,\n}: BadgeProps) => {\n if (!Number.isFinite(anchorOffset.vertical) \|\| !Number.isFinite(anchorOffset.horizontal)) {\n throw new TypeError(\"Badge anchorOffset values must be finite numbers.\");\n }\n\n const resolvedSize = Math.max(size, 16);\n const isHex = isHexColor(color);\n const isDark = isHex ? isDarkColor(color) : false;\n\n const textContent =\n typeof content === \"string\" \|\| typeof content === \"number\"\n ? String(content).trim()\n : null;\n const isSingleCharacter =\n textContent != null && Array.from(textContent).length === 1;\n\n const classes = cn(\n \"puzzle-badge\",\n children != null && [\n anchorOrigin.vertical,\n anchorOrigin.horizontal,\n anchorOverlap,\n ],\n children == null && \"puzzle-badge-standalone\",\n !isHex && `puzzle-badge-${color}`,\n className,\n );\n\n const Component = children == null ? \"span\" : \"div\";\n\n return (\n <Component className={classes}>\n {children}\n <span\n className={cn(\n \"puzzle-badge-indicator\",\n isSingleCharacter && \"puzzle-badge-indicator--single\",\n )}\n style={{\n fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,\n minHeight: `${resolvedSize}px`,\n minWidth: `${resolvedSize}px`,\n translate: children != null\n ? `${anchorOffset.horizontal * (anchorOrigin.horizontal === \"left\" ? 1 : -1)}px ${anchorOffset.vertical * (anchorOrigin.vertical === \"top\" ? 1 : -1)}px`\n : undefined,\n backgroundColor: isHex ? color : undefined,\n color: isHex\n ? isDark\n ? \"var(--puzzle-color-light-foreground)\"\n : \"var(--puzzle-color-dark-foreground)\"\n : undefined,\n }}\n >\n {content}\n </span>\n </Component>\n );\n};\n\nexport {\n Badge,\n type BadgeProps,\n type BadgeColor,\n type AnchorOrigin,\n type AnchorOffset,\n type AnchorOverlap,\n};\n"],"mappings":";;;;;AAkCA,MAAM,SAAS,EACb,SACA,OAAO,IACP,QAAQ,WACR,eAAe;CAAE,UAAU;CAAO,YAAY;AAAQ,GACtD,eAAe;CAAE,UAAU;CAAG,YAAY;AAAE,GAC5C,gBAAgB,eAChB,WACA,eACgB;CAChB,IAAI,CAAC,OAAO,SAAS,aAAa,QAAQ,KAAK,CAAC,OAAO,SAAS,aAAa,UAAU,GACrF,MAAM,IAAI,UAAU,mDAAmD;CAGzE,MAAM,eAAe,KAAK,IAAI,MAAM,EAAE;CACtC,MAAM,SAAA,GAAQA,gBAAAA,WAAAA,CAAW,KAAK;CAC9B,MAAM,SAAS,SAAA,GAAQC,gBAAAA,YAAAA,CAAY,KAAK,IAAI;CAE5C,MAAM,cACJ,OAAO,YAAY,YAAY,OAAO,YAAY,WAC9C,OAAO,OAAO,CAAC,CAAC,KAAK,IACrB;CACN,MAAM,oBACJ,eAAe,QAAQ,MAAM,KAAK,WAAW,CAAC,CAAC,WAAW;CAE5D,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CACd,gBACA,YAAY,QAAQ;EAClB,aAAa;EACb,aAAa;EACb;CACF,GACA,YAAY,QAAQ,2BACpB,CAAC,SAAS,gBAAgB,SAC1B,SACF;CAIA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAHgB,YAAY,OAAO,SAAS,OAG5C;EAAW,WAAW;EAAtB,UAAA,CACG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,YAAA,GAAWA,gBAAAA,GAAAA,CACT,0BACA,qBAAqB,gCACvB;GACA,OAAO;IACL,UAAU,sBAAsB,aAAa;IAC7C,WAAW,GAAG,aAAa;IAC3B,UAAU,GAAG,aAAa;IAC1B,WAAW,YAAY,OACnB,GAAG,aAAa,cAAc,aAAa,eAAe,SAAS,IAAI,IAAI,KAAK,aAAa,YAAY,aAAa,aAAa,QAAQ,IAAI,IAAI,MACnJ,KAAA;IACJ,iBAAiB,QAAQ,QAAQ,KAAA;IACjC,OAAO,QACH,SACE,yCACA,wCACF,KAAA;GACN;GAEC,UAAA;EACG,CAAA,CACG;;AAEf"}

package/dist/components/data-display/badge/index.js CHANGED Viewed

@@ -21,7 +21,7 @@ const Badge = ({ content, size = 20, color = "primary", anchorOrigin = {
 		anchorOrigin.horizontal,
 		anchorOverlap
 	], children == null && "puzzle-badge-standalone", !isHex && `puzzle-badge-${color}`, className);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(children == null ? "span" : "div", {
 		className: classes,
 		children: [children, /* @__PURE__ */ jsx("span", {
 			className: cn("puzzle-badge-indicator", isSingleCharacter && "puzzle-badge-indicator--single"),

package/dist/components/data-display/badge/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/data-display/badge/index.tsx"],"sourcesContent":["import { cn, isDarkColor, isHexColor } from \"@puzzle-ui/core\";\nimport { type ReactNode } from \"react\";\nimport \"./badge.css\";\n\ntype AnchorOrigin = {\n vertical: \"top\" \| \"bottom\";\n horizontal: \"left\" \| \"right\";\n};\n\ntype AnchorOffset = {\n vertical: number;\n horizontal: number;\n};\n\ntype AnchorOverlap = \"rectangular\" \| \"circular\";\ntype BadgeColor =\n \| \"primary\"\n \| \"secondary\"\n \| \"accent\"\n \| \"danger\"\n \| \"info\"\n \| `#${string}`;\n\ntype BadgeProps = {\n content: ReactNode;\n size?: number;\n color?: BadgeColor;\n anchorOrigin?: AnchorOrigin;\n anchorOffset?: AnchorOffset;\n anchorOverlap?: AnchorOverlap;\n className?: string;\n children?: ReactNode;\n};\n\nconst Badge = ({\n content,\n size = 20,\n color = \"primary\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n anchorOffset = { vertical: 0, horizontal: 0 },\n anchorOverlap = \"rectangular\",\n className,\n children,\n}: BadgeProps) => {\n if (!Number.isFinite(anchorOffset.vertical) \|\| !Number.isFinite(anchorOffset.horizontal)) {\n throw new TypeError(\"Badge anchorOffset values must be finite numbers.\");\n }\n\n const resolvedSize = Math.max(size, 16);\n const isHex = isHexColor(color);\n const isDark = isHex ? isDarkColor(color) : false;\n\n const textContent =\n typeof content === \"string\" \|\| typeof content === \"number\"\n ? String(content).trim()\n : null;\n const isSingleCharacter =\n textContent != null && Array.from(textContent).length === 1;\n\n const classes = cn(\n \"puzzle-badge\",\n children != null && [\n anchorOrigin.vertical,\n anchorOrigin.horizontal,\n anchorOverlap,\n ],\n children == null && \"puzzle-badge-standalone\",\n !isHex && `puzzle-badge-${color}`,\n className,\n );\n\n return (\n <~~div~~ className={classes}>\n {children}\n <span\n className={cn(\n \"puzzle-badge-indicator\",\n isSingleCharacter && \"puzzle-badge-indicator--single\",\n )}\n style={{\n fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,\n minHeight: `${resolvedSize}px`,\n minWidth: `${resolvedSize}px`,\n translate: children != null\n ? `${anchorOffset.horizontal * (anchorOrigin.horizontal === \"left\" ? 1 : -1)}px ${anchorOffset.vertical * (anchorOrigin.vertical === \"top\" ? 1 : -1)}px`\n : undefined,\n backgroundColor: isHex ? color : undefined,\n color: isHex\n ? isDark\n ? \"var(--puzzle-color-light-foreground)\"\n : \"var(--puzzle-color-dark-foreground)\"\n : undefined,\n }}\n >\n {content}\n </span>\n </~~div~~>\n );\n};\n\nexport {\n Badge,\n type BadgeProps,\n type BadgeColor,\n type AnchorOrigin,\n type AnchorOffset,\n type AnchorOverlap,\n};\n"],"mappings":";;;;;AAkCA,MAAM,SAAS,EACb,SACA,OAAO,IACP,QAAQ,WACR,eAAe;CAAE,UAAU;CAAO,YAAY;AAAQ,GACtD,eAAe;CAAE,UAAU;CAAG,YAAY;AAAE,GAC5C,gBAAgB,eAChB,WACA,eACgB;CAChB,IAAI,CAAC,OAAO,SAAS,aAAa,QAAQ,KAAK,CAAC,OAAO,SAAS,aAAa,UAAU,GACrF,MAAM,IAAI,UAAU,mDAAmD;CAGzE,MAAM,eAAe,KAAK,IAAI,MAAM,EAAE;CACtC,MAAM,QAAQ,WAAW,KAAK;CAC9B,MAAM,SAAS,QAAQ,YAAY,KAAK,IAAI;CAE5C,MAAM,cACJ,OAAO,YAAY,YAAY,OAAO,YAAY,WAC9C,OAAO,OAAO,CAAC,CAAC,KAAK,IACrB;CACN,MAAM,oBACJ,eAAe,QAAQ,MAAM,KAAK,WAAW,CAAC,CAAC,WAAW;CAE5D,MAAM,UAAU,GACd,gBACA,YAAY,QAAQ;EAClB,aAAa;EACb,aAAa;EACb;CACF,GACA,YAAY,QAAQ,2BACpB,CAAC,SAAS,gBAAgB,SAC1B,SACF;~~CAEA~~,OACE,~~qBAAC~~,~~OAAD~~;~~EAAK~~,WAAW;~~EAAhB~~,UAAA,CACG,UACD,oBAAC,QAAD;GACE,WAAW,GACT,0BACA,qBAAqB,gCACvB;GACA,OAAO;IACL,UAAU,sBAAsB,aAAa;IAC7C,WAAW,GAAG,aAAa;IAC3B,UAAU,GAAG,aAAa;IAC1B,WAAW,YAAY,OACnB,GAAG,aAAa,cAAc,aAAa,eAAe,SAAS,IAAI,IAAI,KAAK,aAAa,YAAY,aAAa,aAAa,QAAQ,IAAI,IAAI,MACnJ,KAAA;IACJ,iBAAiB,QAAQ,QAAQ,KAAA;IACjC,OAAO,QACH,SACE,yCACA,wCACF,KAAA;GACN;GAEC,UAAA;EACG,CAAA,~~CACH~~;;~~AAET~~"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/data-display/badge/index.tsx"],"sourcesContent":["import { cn, isDarkColor, isHexColor } from \"@puzzle-ui/core\";\nimport { type ReactNode } from \"react\";\nimport \"./badge.css\";\n\ntype AnchorOrigin = {\n vertical: \"top\" \| \"bottom\";\n horizontal: \"left\" \| \"right\";\n};\n\ntype AnchorOffset = {\n vertical: number;\n horizontal: number;\n};\n\ntype AnchorOverlap = \"rectangular\" \| \"circular\";\ntype BadgeColor =\n \| \"primary\"\n \| \"secondary\"\n \| \"accent\"\n \| \"danger\"\n \| \"info\"\n \| `#${string}`;\n\ntype BadgeProps = {\n content: ReactNode;\n size?: number;\n color?: BadgeColor;\n anchorOrigin?: AnchorOrigin;\n anchorOffset?: AnchorOffset;\n anchorOverlap?: AnchorOverlap;\n className?: string;\n children?: ReactNode;\n};\n\nconst Badge = ({\n content,\n size = 20,\n color = \"primary\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n anchorOffset = { vertical: 0, horizontal: 0 },\n anchorOverlap = \"rectangular\",\n className,\n children,\n}: BadgeProps) => {\n if (!Number.isFinite(anchorOffset.vertical) \|\| !Number.isFinite(anchorOffset.horizontal)) {\n throw new TypeError(\"Badge anchorOffset values must be finite numbers.\");\n }\n\n const resolvedSize = Math.max(size, 16);\n const isHex = isHexColor(color);\n const isDark = isHex ? isDarkColor(color) : false;\n\n const textContent =\n typeof content === \"string\" \|\| typeof content === \"number\"\n ? String(content).trim()\n : null;\n const isSingleCharacter =\n textContent != null && Array.from(textContent).length === 1;\n\n const classes = cn(\n \"puzzle-badge\",\n children != null && [\n anchorOrigin.vertical,\n anchorOrigin.horizontal,\n anchorOverlap,\n ],\n children == null && \"puzzle-badge-standalone\",\n !isHex && `puzzle-badge-${color}`,\n className,\n );\n\n const Component = children == null ? \"span\" : \"div\";\n\n return (\n <Component className={classes}>\n {children}\n <span\n className={cn(\n \"puzzle-badge-indicator\",\n isSingleCharacter && \"puzzle-badge-indicator--single\",\n )}\n style={{\n fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,\n minHeight: `${resolvedSize}px`,\n minWidth: `${resolvedSize}px`,\n translate: children != null\n ? `${anchorOffset.horizontal * (anchorOrigin.horizontal === \"left\" ? 1 : -1)}px ${anchorOffset.vertical * (anchorOrigin.vertical === \"top\" ? 1 : -1)}px`\n : undefined,\n backgroundColor: isHex ? color : undefined,\n color: isHex\n ? isDark\n ? \"var(--puzzle-color-light-foreground)\"\n : \"var(--puzzle-color-dark-foreground)\"\n : undefined,\n }}\n >\n {content}\n </span>\n </Component>\n );\n};\n\nexport {\n Badge,\n type BadgeProps,\n type BadgeColor,\n type AnchorOrigin,\n type AnchorOffset,\n type AnchorOverlap,\n};\n"],"mappings":";;;;;AAkCA,MAAM,SAAS,EACb,SACA,OAAO,IACP,QAAQ,WACR,eAAe;CAAE,UAAU;CAAO,YAAY;AAAQ,GACtD,eAAe;CAAE,UAAU;CAAG,YAAY;AAAE,GAC5C,gBAAgB,eAChB,WACA,eACgB;CAChB,IAAI,CAAC,OAAO,SAAS,aAAa,QAAQ,KAAK,CAAC,OAAO,SAAS,aAAa,UAAU,GACrF,MAAM,IAAI,UAAU,mDAAmD;CAGzE,MAAM,eAAe,KAAK,IAAI,MAAM,EAAE;CACtC,MAAM,QAAQ,WAAW,KAAK;CAC9B,MAAM,SAAS,QAAQ,YAAY,KAAK,IAAI;CAE5C,MAAM,cACJ,OAAO,YAAY,YAAY,OAAO,YAAY,WAC9C,OAAO,OAAO,CAAC,CAAC,KAAK,IACrB;CACN,MAAM,oBACJ,eAAe,QAAQ,MAAM,KAAK,WAAW,CAAC,CAAC,WAAW;CAE5D,MAAM,UAAU,GACd,gBACA,YAAY,QAAQ;EAClB,aAAa;EACb,aAAa;EACb;CACF,GACA,YAAY,QAAQ,2BACpB,CAAC,SAAS,gBAAgB,SAC1B,SACF;CAIA,OACE,qBAHgB,YAAY,OAAO,SAAS,OAG5C;EAAW,WAAW;EAAtB,UAAA,CACG,UACD,oBAAC,QAAD;GACE,WAAW,GACT,0BACA,qBAAqB,gCACvB;GACA,OAAO;IACL,UAAU,sBAAsB,aAAa;IAC7C,WAAW,GAAG,aAAa;IAC3B,UAAU,GAAG,aAAa;IAC1B,WAAW,YAAY,OACnB,GAAG,aAAa,cAAc,aAAa,eAAe,SAAS,IAAI,IAAI,KAAK,aAAa,YAAY,aAAa,aAAa,QAAQ,IAAI,IAAI,MACnJ,KAAA;IACJ,iBAAiB,QAAQ,QAAQ,KAAA;IACjC,OAAO,QACH,SACE,yCACA,wCACF,KAAA;GACN;GAEC,UAAA;EACG,CAAA,CACG;;AAEf"}

package/dist/components/layout/grid/grid.css ADDED Viewed

@@ -0,0 +1,63 @@
+.puzzle-grid {
+  grid-template-columns: var(--puzzle-grid-columns-mobile);
+  grid-template-rows: var(--puzzle-grid-rows-mobile);
+  row-gap: var(--puzzle-grid-row-gap-mobile);
+  column-gap: var(--puzzle-grid-column-gap-mobile);
+  justify-items: var(--puzzle-grid-align-h-mobile);
+  align-items: var(--puzzle-grid-align-v-mobile);
+  grid-auto-flow: var(--puzzle-grid-auto-flow-mobile);
+  min-width: 0;
+  display: grid;
+}
+.puzzle-grid > * {
+  min-width: 0;
+}
+.puzzle-grid-item {
+  grid-column: var(--puzzle-grid-item-column-start-mobile) / var(--puzzle-grid-item-column-end-mobile);
+  grid-row-end: var(--puzzle-grid-item-row-span-mobile);
+  grid-row-start: var(--puzzle-grid-item-row-start-mobile);
+  justify-self: var(--puzzle-grid-item-align-h-mobile);
+  align-self: var(--puzzle-grid-item-align-v-mobile);
+}
+@media (width >= 768px) {
+  .puzzle-grid {
+    grid-template-columns: var(--puzzle-grid-columns-tablet);
+    grid-template-rows: var(--puzzle-grid-rows-tablet);
+    row-gap: var(--puzzle-grid-row-gap-tablet);
+    column-gap: var(--puzzle-grid-column-gap-tablet);
+    justify-items: var(--puzzle-grid-align-h-tablet);
+    align-items: var(--puzzle-grid-align-v-tablet);
+    grid-auto-flow: var(--puzzle-grid-auto-flow-tablet);
+  }
+  .puzzle-grid-item {
+    grid-column: var(--puzzle-grid-item-column-start-tablet) / var(--puzzle-grid-item-column-end-tablet);
+    grid-row-end: var(--puzzle-grid-item-row-span-tablet);
+    grid-row-start: var(--puzzle-grid-item-row-start-tablet);
+    justify-self: var(--puzzle-grid-item-align-h-tablet);
+    align-self: var(--puzzle-grid-item-align-v-tablet);
+  }
+}
+@media (width >= 1024px) {
+  .puzzle-grid {
+    grid-template-columns: var(--puzzle-grid-columns-desktop);
+    grid-template-rows: var(--puzzle-grid-rows-desktop);
+    row-gap: var(--puzzle-grid-row-gap-desktop);
+    column-gap: var(--puzzle-grid-column-gap-desktop);
+    justify-items: var(--puzzle-grid-align-h-desktop);
+    align-items: var(--puzzle-grid-align-v-desktop);
+    grid-auto-flow: var(--puzzle-grid-auto-flow-desktop);
+  }
+  .puzzle-grid-item {
+    grid-column: var(--puzzle-grid-item-column-start-desktop) / var(--puzzle-grid-item-column-end-desktop);
+    grid-row-end: var(--puzzle-grid-item-row-span-desktop);
+    grid-row-start: var(--puzzle-grid-item-row-start-desktop);
+    justify-self: var(--puzzle-grid-item-align-h-desktop);
+    align-self: var(--puzzle-grid-item-align-v-desktop);
+  }
+}

package/dist/components/layout/grid/index.cjs ADDED Viewed

@@ -0,0 +1,65 @@
+;/* empty css           */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+// src/components/layout/grid/index.tsx
+const responsiveStyle = (property, value, format = (value) => value) => {
+	const styles = {};
+	if (value === void 0) return styles;
+	let current = typeof value === "object" ? value.mobile : value;
+	for (const breakpoint of _puzzle_ui_core.BREAKPOINTS) {
+		if (typeof value === "object") current = value[breakpoint] ?? current;
+		styles[`--puzzle-grid-${property}-${breakpoint}`] = format(current);
+	}
+	return styles;
+};
+const positiveInteger = (value, prop) => {
+	if (!Number.isInteger(value) || value < 1) throw new RangeError(`Grid ${prop} must be a positive integer.`);
+	return value;
+};
+const tracks = (value) => typeof value === "number" ? `repeat(${positiveInteger(value, "columns/rows")}, minmax(0, 1fr))` : value;
+const span = (value) => `span ${positiveInteger(value, "span")}`;
+const line = (value) => {
+	if (typeof value === "number" && (!Number.isInteger(value) || value === 0)) throw new RangeError("Grid start lines must be non-zero integers or auto.");
+	return value;
+};
+const gaps = {
+	"0": "0",
+	xs: "var(--puzzle-space-1, 0.25rem)",
+	sm: "var(--puzzle-space-2, 0.5rem)",
+	md: "var(--puzzle-space-4, 1rem)",
+	lg: "var(--puzzle-space-8, 2rem)",
+	xl: "var(--puzzle-space-16, 4rem)"
+};
+const Grid = ({ as, columns = 1, rows = "none", minChildWidth, gap = "md", rowGap = gap, columnGap = gap, alignH = "stretch", alignV = "stretch", autoFlow = "row", children, className, style, ...props }) => (0, react.createElement)(as ?? "div", {
+	...props,
+	className: (0, _puzzle_ui_core.cn)("puzzle-grid", className),
+	style: {
+		...responsiveStyle("columns", columns, tracks),
+		...responsiveStyle("columns", minChildWidth, (width) => `repeat(auto-fit, minmax(min(100%, ${width}), 1fr))`),
+		...responsiveStyle("rows", rows, tracks),
+		...responsiveStyle("row-gap", rowGap, (value) => gaps[value]),
+		...responsiveStyle("column-gap", columnGap, (value) => gaps[value]),
+		...responsiveStyle("align-h", alignH),
+		...responsiveStyle("align-v", alignV),
+		...responsiveStyle("auto-flow", autoFlow),
+		...style
+	}
+}, children);
+const GridItem = ({ as, colSpan = 1, rowSpan = 1, colStart, rowStart = "auto", alignH = "auto", alignV = "auto", children, className, style, ...props }) => (0, react.createElement)(as ?? "div", {
+	...props,
+	className: (0, _puzzle_ui_core.cn)("puzzle-grid-item", className),
+	style: {
+		...responsiveStyle("item-column-end", colSpan, (value) => value === "full" ? "-1" : span(value)),
+		...responsiveStyle("item-column-start", colSpan, (value) => value === "full" ? "1" : "auto"),
+		...responsiveStyle("item-row-span", rowSpan, span),
+		...responsiveStyle("item-column-start", colStart, line),
+		...responsiveStyle("item-row-start", rowStart, line),
+		...responsiveStyle("item-align-h", alignH),
+		...responsiveStyle("item-align-v", alignV),
+		...style
+	}
+}, children);
+exports.Grid = Grid;
+exports.GridItem = GridItem;
+//# sourceMappingURL=index.cjs.map

package/dist/components/layout/grid/index.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.cjs","names":["BREAKPOINTS","createElement","cn"],"sources":["../../../../src/components/layout/grid/index.tsx"],"sourcesContent":["import { BREAKPOINTS, cn, type ResponsiveValue } from \"@puzzle-ui/core\";\nimport {\n createElement,\n type ComponentPropsWithRef,\n type CSSProperties,\n type ElementType,\n type ReactNode,\n} from \"react\";\nimport \"./grid.css\";\n\ntype GridGap = \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype GridAlignment = \"start\" | \"center\" | \"end\" | \"stretch\";\ntype GridTracks = number | string;\ntype GridSpan = number | \"full\";\ntype GridLine = number | \"auto\";\ntype GridAutoFlow = NonNullable<CSSProperties[\"gridAutoFlow\"]>;\n\ntype RootProps<C extends ElementType> = {\n as?: C;\n children?: ReactNode;\n className?: string;\n style?: CSSProperties;\n};\n\ntype GridOwnProps<C extends ElementType> = RootProps<C> & {\n columns?: ResponsiveValue<GridTracks>;\n rows?: ResponsiveValue<GridTracks>;\n minChildWidth?: ResponsiveValue<string>;\n gap?: ResponsiveValue<GridGap>;\n rowGap?: ResponsiveValue<GridGap>;\n columnGap?: ResponsiveValue<GridGap>;\n alignH?: ResponsiveValue<GridAlignment>;\n alignV?: ResponsiveValue<GridAlignment>;\n autoFlow?: ResponsiveValue<GridAutoFlow>;\n};\n\ntype GridProps<C extends ElementType = \"div\"> = GridOwnProps<C> &\n Omit<ComponentPropsWithRef<C>, keyof GridOwnProps<C>>;\n\ntype GridItemOwnProps<C extends ElementType> = RootProps<C> & {\n colSpan?: ResponsiveValue<GridSpan>;\n rowSpan?: ResponsiveValue<number>;\n colStart?: ResponsiveValue<GridLine>;\n rowStart?: ResponsiveValue<GridLine>;\n alignH?: ResponsiveValue<GridAlignment | \"auto\">;\n alignV?: ResponsiveValue<GridAlignment | \"auto\">;\n};\n\ntype GridItemProps<C extends ElementType = \"div\"> = GridItemOwnProps<C> &\n Omit<ComponentPropsWithRef<C>, keyof GridItemOwnProps<C>>;\n\ntype GridStyle = CSSProperties &\n Record<`--puzzle-grid-${string}`, string | number | undefined>;\n\nconst responsiveStyle = <T extends string | number>(\n property: string,\n value: ResponsiveValue<T>,\n format: (value: T) => string | number = (value) => value,\n): GridStyle => {\n const styles: GridStyle = {};\n if (value === undefined) return styles;\n\n let current = typeof value === \"object\" ? value.mobile : value;\n for (const breakpoint of BREAKPOINTS) {\n if (typeof value === \"object\") {\n current = value[breakpoint] ?? current;\n }\n styles[`--puzzle-grid-${property}-${breakpoint}`] = format(current);\n }\n return styles;\n};\n\nconst positiveInteger = (value: number, prop: string) => {\n if (!Number.isInteger(value) || value < 1) {\n throw new RangeError(`Grid ${prop} must be a positive integer.`);\n }\n return value;\n};\n\nconst tracks = (value: GridTracks) =>\n typeof value === \"number\"\n ? `repeat(${positiveInteger(value, \"columns/rows\")}, minmax(0, 1fr))`\n : value;\n\nconst span = (value: number) => `span ${positiveInteger(value, \"span\")}`;\n\nconst line = (value: GridLine) => {\n if (typeof value === \"number\" && (!Number.isInteger(value) || value === 0)) {\n throw new RangeError(\"Grid start lines must be non-zero integers or auto.\");\n }\n return value;\n};\n\nconst gaps: Record<GridGap, string> = {\n \"0\": \"0\",\n xs: \"var(--puzzle-space-1, 0.25rem)\",\n sm: \"var(--puzzle-space-2, 0.5rem)\",\n md: \"var(--puzzle-space-4, 1rem)\",\n lg: \"var(--puzzle-space-8, 2rem)\",\n xl: \"var(--puzzle-space-16, 4rem)\",\n};\n\nconst Grid = <C extends ElementType = \"div\">({\n as,\n columns = 1,\n rows = \"none\",\n minChildWidth,\n gap = \"md\",\n rowGap = gap,\n columnGap = gap,\n alignH = \"stretch\",\n alignV = \"stretch\",\n autoFlow = \"row\",\n children,\n className,\n style,\n ...props\n}: GridProps<C>) =>\n createElement(\n as ?? \"div\",\n {\n ...props,\n className: cn(\"puzzle-grid\", className),\n style: {\n ...responsiveStyle(\"columns\", columns, tracks),\n ...responsiveStyle(\n \"columns\",\n minChildWidth,\n (width) => `repeat(auto-fit, minmax(min(100%, ${width}), 1fr))`,\n ),\n ...responsiveStyle(\"rows\", rows, tracks),\n ...responsiveStyle(\"row-gap\", rowGap, (value) => gaps[value]),\n ...responsiveStyle(\"column-gap\", columnGap, (value) => gaps[value]),\n ...responsiveStyle(\"align-h\", alignH),\n ...responsiveStyle(\"align-v\", alignV),\n ...responsiveStyle(\"auto-flow\", autoFlow),\n ...style,\n },\n },\n children,\n );\n\nconst GridItem = <C extends ElementType = \"div\">({\n as,\n colSpan = 1,\n rowSpan = 1,\n colStart,\n rowStart = \"auto\",\n alignH = \"auto\",\n alignV = \"auto\",\n children,\n className,\n style,\n ...props\n}: GridItemProps<C>) =>\n createElement(\n as ?? \"div\",\n {\n ...props,\n className: cn(\"puzzle-grid-item\", className),\n style: {\n ...responsiveStyle(\"item-column-end\", colSpan, (value) =>\n value === \"full\" ? \"-1\" : span(value),\n ),\n ...responsiveStyle(\"item-column-start\", colSpan, (value) =>\n value === \"full\" ? \"1\" : \"auto\",\n ),\n ...responsiveStyle(\"item-row-span\", rowSpan, span),\n ...responsiveStyle(\"item-column-start\", colStart, line),\n ...responsiveStyle(\"item-row-start\", rowStart, line),\n ...responsiveStyle(\"item-align-h\", alignH),\n ...responsiveStyle(\"item-align-v\", alignV),\n ...style,\n },\n },\n children,\n );\n\nexport {\n Grid,\n GridItem,\n type GridProps,\n type GridItemProps,\n type GridGap,\n type GridAlignment,\n type GridTracks,\n type GridSpan,\n type GridLine,\n type GridAutoFlow,\n};\n"],"mappings":";;;;AAsDA,MAAM,mBACJ,UACA,OACA,UAAyC,UAAU,UACrC;CACd,MAAM,SAAoB,CAAC;CAC3B,IAAI,UAAU,KAAA,GAAW,OAAO;CAEhC,IAAI,UAAU,OAAO,UAAU,WAAW,MAAM,SAAS;CACzD,KAAK,MAAM,cAAcA,gBAAAA,aAAa;EACpC,IAAI,OAAO,UAAU,UACnB,UAAU,MAAM,eAAe;EAEjC,OAAO,iBAAiB,SAAS,GAAG,gBAAgB,OAAO,OAAO;CACpE;CACA,OAAO;AACT;AAEA,MAAM,mBAAmB,OAAe,SAAiB;CACvD,IAAI,CAAC,OAAO,UAAU,KAAK,KAAK,QAAQ,GACtC,MAAM,IAAI,WAAW,QAAQ,KAAK,6BAA6B;CAEjE,OAAO;AACT;AAEA,MAAM,UAAU,UACd,OAAO,UAAU,WACb,UAAU,gBAAgB,OAAO,cAAc,EAAE,qBACjD;AAEN,MAAM,QAAQ,UAAkB,QAAQ,gBAAgB,OAAO,MAAM;AAErE,MAAM,QAAQ,UAAoB;CAChC,IAAI,OAAO,UAAU,aAAa,CAAC,OAAO,UAAU,KAAK,KAAK,UAAU,IACtE,MAAM,IAAI,WAAW,qDAAqD;CAE5E,OAAO;AACT;AAEA,MAAM,OAAgC;CACpC,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,QAAuC,EAC3C,IACA,UAAU,GACV,OAAO,QACP,eACA,MAAM,MACN,SAAS,KACT,YAAY,KACZ,SAAS,WACT,SAAS,WACT,WAAW,OACX,UACA,WACA,OACA,GAAG,aAAA,GAEHC,MAAAA,cAAAA,CACE,MAAM,OACN;CACE,GAAG;CACH,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,eAAe,SAAS;CACtC,OAAO;EACL,GAAG,gBAAgB,WAAW,SAAS,MAAM;EAC7C,GAAG,gBACD,WACA,gBACC,UAAU,qCAAqC,MAAM,SACxD;EACA,GAAG,gBAAgB,QAAQ,MAAM,MAAM;EACvC,GAAG,gBAAgB,WAAW,SAAS,UAAU,KAAK,MAAM;EAC5D,GAAG,gBAAgB,cAAc,YAAY,UAAU,KAAK,MAAM;EAClE,GAAG,gBAAgB,WAAW,MAAM;EACpC,GAAG,gBAAgB,WAAW,MAAM;EACpC,GAAG,gBAAgB,aAAa,QAAQ;EACxC,GAAG;CACL;AACF,GACA,QACF;AAEF,MAAM,YAA2C,EAC/C,IACA,UAAU,GACV,UAAU,GACV,UACA,WAAW,QACX,SAAS,QACT,SAAS,QACT,UACA,WACA,OACA,GAAG,aAAA,GAEHD,MAAAA,cAAAA,CACE,MAAM,OACN;CACE,GAAG;CACH,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,oBAAoB,SAAS;CAC3C,OAAO;EACL,GAAG,gBAAgB,mBAAmB,UAAU,UAC9C,UAAU,SAAS,OAAO,KAAK,KAAK,CACtC;EACA,GAAG,gBAAgB,qBAAqB,UAAU,UAChD,UAAU,SAAS,MAAM,MAC3B;EACA,GAAG,gBAAgB,iBAAiB,SAAS,IAAI;EACjD,GAAG,gBAAgB,qBAAqB,UAAU,IAAI;EACtD,GAAG,gBAAgB,kBAAkB,UAAU,IAAI;EACnD,GAAG,gBAAgB,gBAAgB,MAAM;EACzC,GAAG,gBAAgB,gBAAgB,MAAM;EACzC,GAAG;CACL;AACF,GACA,QACF"}

package/dist/components/layout/grid/index.d.cts ADDED Viewed

@@ -0,0 +1,38 @@
+import { CSSProperties, ComponentPropsWithRef, ElementType, ReactNode } from "react";
+import { ResponsiveValue } from "@puzzle-ui/core";
+type GridGap = "0" | "xs" | "sm" | "md" | "lg" | "xl";
+type GridAlignment = "start" | "center" | "end" | "stretch";
+type GridTracks = number | string;
+type GridSpan = number | "full";
+type GridLine = number | "auto";
+type GridAutoFlow = NonNullable<CSSProperties["gridAutoFlow"]>;
+type RootProps<C extends ElementType> = {
+  as?: C;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+};
+type GridOwnProps<C extends ElementType> = RootProps<C> & {
+  columns?: ResponsiveValue<GridTracks>;
+  rows?: ResponsiveValue<GridTracks>;
+  minChildWidth?: ResponsiveValue<string>;
+  gap?: ResponsiveValue<GridGap>;
+  rowGap?: ResponsiveValue<GridGap>;
+  columnGap?: ResponsiveValue<GridGap>;
+  alignH?: ResponsiveValue<GridAlignment>;
+  alignV?: ResponsiveValue<GridAlignment>;
+  autoFlow?: ResponsiveValue<GridAutoFlow>;
+};
+type GridProps<C extends ElementType = "div"> = GridOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof GridOwnProps<C>>;
+type GridItemOwnProps<C extends ElementType> = RootProps<C> & {
+  colSpan?: ResponsiveValue<GridSpan>;
+  rowSpan?: ResponsiveValue<number>;
+  colStart?: ResponsiveValue<GridLine>;
+  rowStart?: ResponsiveValue<GridLine>;
+  alignH?: ResponsiveValue<GridAlignment | "auto">;
+  alignV?: ResponsiveValue<GridAlignment | "auto">;
+};
+type GridItemProps<C extends ElementType = "div"> = GridItemOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof GridItemOwnProps<C>>;
+declare const Grid: <C extends ElementType = "div">({ as, columns, rows, minChildWidth, gap, rowGap, columnGap, alignH, alignV, autoFlow, children, className, style, ...props }: GridProps<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const GridItem: <C extends ElementType = "div">({ as, colSpan, rowSpan, colStart, rowStart, alignH, alignV, children, className, style, ...props }: GridItemProps<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export { Grid, type GridAlignment, type GridAutoFlow, type GridGap, GridItem, type GridItemProps, type GridLine, type GridProps, type GridSpan, type GridTracks };

package/dist/components/layout/grid/index.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import { ResponsiveValue } from "@puzzle-ui/core";
+import { CSSProperties, ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type GridGap = "0" | "xs" | "sm" | "md" | "lg" | "xl";
+type GridAlignment = "start" | "center" | "end" | "stretch";
+type GridTracks = number | string;
+type GridSpan = number | "full";
+type GridLine = number | "auto";
+type GridAutoFlow = NonNullable<CSSProperties["gridAutoFlow"]>;
+type RootProps<C extends ElementType> = {
+  as?: C;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+};
+type GridOwnProps<C extends ElementType> = RootProps<C> & {
+  columns?: ResponsiveValue<GridTracks>;
+  rows?: ResponsiveValue<GridTracks>;
+  minChildWidth?: ResponsiveValue<string>;
+  gap?: ResponsiveValue<GridGap>;
+  rowGap?: ResponsiveValue<GridGap>;
+  columnGap?: ResponsiveValue<GridGap>;
+  alignH?: ResponsiveValue<GridAlignment>;
+  alignV?: ResponsiveValue<GridAlignment>;
+  autoFlow?: ResponsiveValue<GridAutoFlow>;
+};
+type GridProps<C extends ElementType = "div"> = GridOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof GridOwnProps<C>>;
+type GridItemOwnProps<C extends ElementType> = RootProps<C> & {
+  colSpan?: ResponsiveValue<GridSpan>;
+  rowSpan?: ResponsiveValue<number>;
+  colStart?: ResponsiveValue<GridLine>;
+  rowStart?: ResponsiveValue<GridLine>;
+  alignH?: ResponsiveValue<GridAlignment | "auto">;
+  alignV?: ResponsiveValue<GridAlignment | "auto">;
+};
+type GridItemProps<C extends ElementType = "div"> = GridItemOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof GridItemOwnProps<C>>;
+declare const Grid: <C extends ElementType = "div">({ as, columns, rows, minChildWidth, gap, rowGap, columnGap, alignH, alignV, autoFlow, children, className, style, ...props }: GridProps<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const GridItem: <C extends ElementType = "div">({ as, colSpan, rowSpan, colStart, rowStart, alignH, alignV, children, className, style, ...props }: GridItemProps<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export { Grid, type GridAlignment, type GridAutoFlow, type GridGap, GridItem, type GridItemProps, type GridLine, type GridProps, type GridSpan, type GridTracks };

package/dist/components/layout/grid/index.js ADDED Viewed

@@ -0,0 +1,64 @@
+import "./grid.css";
+import { BREAKPOINTS, cn } from "@puzzle-ui/core";
+import { createElement } from "react";
+// src/components/layout/grid/index.tsx
+const responsiveStyle = (property, value, format = (value) => value) => {
+	const styles = {};
+	if (value === void 0) return styles;
+	let current = typeof value === "object" ? value.mobile : value;
+	for (const breakpoint of BREAKPOINTS) {
+		if (typeof value === "object") current = value[breakpoint] ?? current;
+		styles[`--puzzle-grid-${property}-${breakpoint}`] = format(current);
+	}
+	return styles;
+};
+const positiveInteger = (value, prop) => {
+	if (!Number.isInteger(value) || value < 1) throw new RangeError(`Grid ${prop} must be a positive integer.`);
+	return value;
+};
+const tracks = (value) => typeof value === "number" ? `repeat(${positiveInteger(value, "columns/rows")}, minmax(0, 1fr))` : value;
+const span = (value) => `span ${positiveInteger(value, "span")}`;
+const line = (value) => {
+	if (typeof value === "number" && (!Number.isInteger(value) || value === 0)) throw new RangeError("Grid start lines must be non-zero integers or auto.");
+	return value;
+};
+const gaps = {
+	"0": "0",
+	xs: "var(--puzzle-space-1, 0.25rem)",
+	sm: "var(--puzzle-space-2, 0.5rem)",
+	md: "var(--puzzle-space-4, 1rem)",
+	lg: "var(--puzzle-space-8, 2rem)",
+	xl: "var(--puzzle-space-16, 4rem)"
+};
+const Grid = ({ as, columns = 1, rows = "none", minChildWidth, gap = "md", rowGap = gap, columnGap = gap, alignH = "stretch", alignV = "stretch", autoFlow = "row", children, className, style, ...props }) => createElement(as ?? "div", {
+	...props,
+	className: cn("puzzle-grid", className),
+	style: {
+		...responsiveStyle("columns", columns, tracks),
+		...responsiveStyle("columns", minChildWidth, (width) => `repeat(auto-fit, minmax(min(100%, ${width}), 1fr))`),
+		...responsiveStyle("rows", rows, tracks),
+		...responsiveStyle("row-gap", rowGap, (value) => gaps[value]),
+		...responsiveStyle("column-gap", columnGap, (value) => gaps[value]),
+		...responsiveStyle("align-h", alignH),
+		...responsiveStyle("align-v", alignV),
+		...responsiveStyle("auto-flow", autoFlow),
+		...style
+	}
+}, children);
+const GridItem = ({ as, colSpan = 1, rowSpan = 1, colStart, rowStart = "auto", alignH = "auto", alignV = "auto", children, className, style, ...props }) => createElement(as ?? "div", {
+	...props,
+	className: cn("puzzle-grid-item", className),
+	style: {
+		...responsiveStyle("item-column-end", colSpan, (value) => value === "full" ? "-1" : span(value)),
+		...responsiveStyle("item-column-start", colSpan, (value) => value === "full" ? "1" : "auto"),
+		...responsiveStyle("item-row-span", rowSpan, span),
+		...responsiveStyle("item-column-start", colStart, line),
+		...responsiveStyle("item-row-start", rowStart, line),
+		...responsiveStyle("item-align-h", alignH),
+		...responsiveStyle("item-align-v", alignV),
+		...style
+	}
+}, children);
+export { Grid, GridItem };
+//# sourceMappingURL=index.js.map

package/dist/components/layout/grid/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/grid/index.tsx"],"sourcesContent":["import { BREAKPOINTS, cn, type ResponsiveValue } from \"@puzzle-ui/core\";\nimport {\n createElement,\n type ComponentPropsWithRef,\n type CSSProperties,\n type ElementType,\n type ReactNode,\n} from \"react\";\nimport \"./grid.css\";\n\ntype GridGap = \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype GridAlignment = \"start\" | \"center\" | \"end\" | \"stretch\";\ntype GridTracks = number | string;\ntype GridSpan = number | \"full\";\ntype GridLine = number | \"auto\";\ntype GridAutoFlow = NonNullable<CSSProperties[\"gridAutoFlow\"]>;\n\ntype RootProps<C extends ElementType> = {\n as?: C;\n children?: ReactNode;\n className?: string;\n style?: CSSProperties;\n};\n\ntype GridOwnProps<C extends ElementType> = RootProps<C> & {\n columns?: ResponsiveValue<GridTracks>;\n rows?: ResponsiveValue<GridTracks>;\n minChildWidth?: ResponsiveValue<string>;\n gap?: ResponsiveValue<GridGap>;\n rowGap?: ResponsiveValue<GridGap>;\n columnGap?: ResponsiveValue<GridGap>;\n alignH?: ResponsiveValue<GridAlignment>;\n alignV?: ResponsiveValue<GridAlignment>;\n autoFlow?: ResponsiveValue<GridAutoFlow>;\n};\n\ntype GridProps<C extends ElementType = \"div\"> = GridOwnProps<C> &\n Omit<ComponentPropsWithRef<C>, keyof GridOwnProps<C>>;\n\ntype GridItemOwnProps<C extends ElementType> = RootProps<C> & {\n colSpan?: ResponsiveValue<GridSpan>;\n rowSpan?: ResponsiveValue<number>;\n colStart?: ResponsiveValue<GridLine>;\n rowStart?: ResponsiveValue<GridLine>;\n alignH?: ResponsiveValue<GridAlignment | \"auto\">;\n alignV?: ResponsiveValue<GridAlignment | \"auto\">;\n};\n\ntype GridItemProps<C extends ElementType = \"div\"> = GridItemOwnProps<C> &\n Omit<ComponentPropsWithRef<C>, keyof GridItemOwnProps<C>>;\n\ntype GridStyle = CSSProperties &\n Record<`--puzzle-grid-${string}`, string | number | undefined>;\n\nconst responsiveStyle = <T extends string | number>(\n property: string,\n value: ResponsiveValue<T>,\n format: (value: T) => string | number = (value) => value,\n): GridStyle => {\n const styles: GridStyle = {};\n if (value === undefined) return styles;\n\n let current = typeof value === \"object\" ? value.mobile : value;\n for (const breakpoint of BREAKPOINTS) {\n if (typeof value === \"object\") {\n current = value[breakpoint] ?? current;\n }\n styles[`--puzzle-grid-${property}-${breakpoint}`] = format(current);\n }\n return styles;\n};\n\nconst positiveInteger = (value: number, prop: string) => {\n if (!Number.isInteger(value) || value < 1) {\n throw new RangeError(`Grid ${prop} must be a positive integer.`);\n }\n return value;\n};\n\nconst tracks = (value: GridTracks) =>\n typeof value === \"number\"\n ? `repeat(${positiveInteger(value, \"columns/rows\")}, minmax(0, 1fr))`\n : value;\n\nconst span = (value: number) => `span ${positiveInteger(value, \"span\")}`;\n\nconst line = (value: GridLine) => {\n if (typeof value === \"number\" && (!Number.isInteger(value) || value === 0)) {\n throw new RangeError(\"Grid start lines must be non-zero integers or auto.\");\n }\n return value;\n};\n\nconst gaps: Record<GridGap, string> = {\n \"0\": \"0\",\n xs: \"var(--puzzle-space-1, 0.25rem)\",\n sm: \"var(--puzzle-space-2, 0.5rem)\",\n md: \"var(--puzzle-space-4, 1rem)\",\n lg: \"var(--puzzle-space-8, 2rem)\",\n xl: \"var(--puzzle-space-16, 4rem)\",\n};\n\nconst Grid = <C extends ElementType = \"div\">({\n as,\n columns = 1,\n rows = \"none\",\n minChildWidth,\n gap = \"md\",\n rowGap = gap,\n columnGap = gap,\n alignH = \"stretch\",\n alignV = \"stretch\",\n autoFlow = \"row\",\n children,\n className,\n style,\n ...props\n}: GridProps<C>) =>\n createElement(\n as ?? \"div\",\n {\n ...props,\n className: cn(\"puzzle-grid\", className),\n style: {\n ...responsiveStyle(\"columns\", columns, tracks),\n ...responsiveStyle(\n \"columns\",\n minChildWidth,\n (width) => `repeat(auto-fit, minmax(min(100%, ${width}), 1fr))`,\n ),\n ...responsiveStyle(\"rows\", rows, tracks),\n ...responsiveStyle(\"row-gap\", rowGap, (value) => gaps[value]),\n ...responsiveStyle(\"column-gap\", columnGap, (value) => gaps[value]),\n ...responsiveStyle(\"align-h\", alignH),\n ...responsiveStyle(\"align-v\", alignV),\n ...responsiveStyle(\"auto-flow\", autoFlow),\n ...style,\n },\n },\n children,\n );\n\nconst GridItem = <C extends ElementType = \"div\">({\n as,\n colSpan = 1,\n rowSpan = 1,\n colStart,\n rowStart = \"auto\",\n alignH = \"auto\",\n alignV = \"auto\",\n children,\n className,\n style,\n ...props\n}: GridItemProps<C>) =>\n createElement(\n as ?? \"div\",\n {\n ...props,\n className: cn(\"puzzle-grid-item\", className),\n style: {\n ...responsiveStyle(\"item-column-end\", colSpan, (value) =>\n value === \"full\" ? \"-1\" : span(value),\n ),\n ...responsiveStyle(\"item-column-start\", colSpan, (value) =>\n value === \"full\" ? \"1\" : \"auto\",\n ),\n ...responsiveStyle(\"item-row-span\", rowSpan, span),\n ...responsiveStyle(\"item-column-start\", colStart, line),\n ...responsiveStyle(\"item-row-start\", rowStart, line),\n ...responsiveStyle(\"item-align-h\", alignH),\n ...responsiveStyle(\"item-align-v\", alignV),\n ...style,\n },\n },\n children,\n );\n\nexport {\n Grid,\n GridItem,\n type GridProps,\n type GridItemProps,\n type GridGap,\n type GridAlignment,\n type GridTracks,\n type GridSpan,\n type GridLine,\n type GridAutoFlow,\n};\n"],"mappings":";;;;AAsDA,MAAM,mBACJ,UACA,OACA,UAAyC,UAAU,UACrC;CACd,MAAM,SAAoB,CAAC;CAC3B,IAAI,UAAU,KAAA,GAAW,OAAO;CAEhC,IAAI,UAAU,OAAO,UAAU,WAAW,MAAM,SAAS;CACzD,KAAK,MAAM,cAAc,aAAa;EACpC,IAAI,OAAO,UAAU,UACnB,UAAU,MAAM,eAAe;EAEjC,OAAO,iBAAiB,SAAS,GAAG,gBAAgB,OAAO,OAAO;CACpE;CACA,OAAO;AACT;AAEA,MAAM,mBAAmB,OAAe,SAAiB;CACvD,IAAI,CAAC,OAAO,UAAU,KAAK,KAAK,QAAQ,GACtC,MAAM,IAAI,WAAW,QAAQ,KAAK,6BAA6B;CAEjE,OAAO;AACT;AAEA,MAAM,UAAU,UACd,OAAO,UAAU,WACb,UAAU,gBAAgB,OAAO,cAAc,EAAE,qBACjD;AAEN,MAAM,QAAQ,UAAkB,QAAQ,gBAAgB,OAAO,MAAM;AAErE,MAAM,QAAQ,UAAoB;CAChC,IAAI,OAAO,UAAU,aAAa,CAAC,OAAO,UAAU,KAAK,KAAK,UAAU,IACtE,MAAM,IAAI,WAAW,qDAAqD;CAE5E,OAAO;AACT;AAEA,MAAM,OAAgC;CACpC,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,QAAuC,EAC3C,IACA,UAAU,GACV,OAAO,QACP,eACA,MAAM,MACN,SAAS,KACT,YAAY,KACZ,SAAS,WACT,SAAS,WACT,WAAW,OACX,UACA,WACA,OACA,GAAG,YAEH,cACE,MAAM,OACN;CACE,GAAG;CACH,WAAW,GAAG,eAAe,SAAS;CACtC,OAAO;EACL,GAAG,gBAAgB,WAAW,SAAS,MAAM;EAC7C,GAAG,gBACD,WACA,gBACC,UAAU,qCAAqC,MAAM,SACxD;EACA,GAAG,gBAAgB,QAAQ,MAAM,MAAM;EACvC,GAAG,gBAAgB,WAAW,SAAS,UAAU,KAAK,MAAM;EAC5D,GAAG,gBAAgB,cAAc,YAAY,UAAU,KAAK,MAAM;EAClE,GAAG,gBAAgB,WAAW,MAAM;EACpC,GAAG,gBAAgB,WAAW,MAAM;EACpC,GAAG,gBAAgB,aAAa,QAAQ;EACxC,GAAG;CACL;AACF,GACA,QACF;AAEF,MAAM,YAA2C,EAC/C,IACA,UAAU,GACV,UAAU,GACV,UACA,WAAW,QACX,SAAS,QACT,SAAS,QACT,UACA,WACA,OACA,GAAG,YAEH,cACE,MAAM,OACN;CACE,GAAG;CACH,WAAW,GAAG,oBAAoB,SAAS;CAC3C,OAAO;EACL,GAAG,gBAAgB,mBAAmB,UAAU,UAC9C,UAAU,SAAS,OAAO,KAAK,KAAK,CACtC;EACA,GAAG,gBAAgB,qBAAqB,UAAU,UAChD,UAAU,SAAS,MAAM,MAC3B;EACA,GAAG,gBAAgB,iBAAiB,SAAS,IAAI;EACjD,GAAG,gBAAgB,qBAAqB,UAAU,IAAI;EACtD,GAAG,gBAAgB,kBAAkB,UAAU,IAAI;EACnD,GAAG,gBAAgB,gBAAgB,MAAM;EACzC,GAAG,gBAAgB,gBAAgB,MAAM;EACzC,GAAG;CACL;AACF,GACA,QACF"}

package/dist/index.cjs CHANGED Viewed

@@ -41,31 +41,32 @@ const require_index$30 = require("./components/layout/bottom-navigation/index.cj
 const require_index$31 = require("./components/layout/breadcrumbs/index.cjs");
 const require_index$32 = require("./components/layout/collapsable-sidebar/index.cjs");
 const require_index$33 = require("./components/layout/container/index.cjs");
-const require_index$34 = require("./components/layout/page-layout/index.cjs");
-const require_index$35 = require("./components/layout/resizable-panels/index.cjs");
-const require_index$36 = require("./components/layout/scroll-area/index.cjs");
-const require_index$37 = require("./components/layout/section/index.cjs");
-const require_index$38 = require("./components/layout/section-stack/index.cjs");
-const require_index$39 = require("./components/layout/separator/index.cjs");
-const require_index$40 = require("./components/layout/sidebar/index.cjs");
-const require_index$41 = require("./components/layout/stack/index.cjs");
-const require_index$42 = require("./components/navigation/accordion/index.cjs");
-const require_index$43 = require("./components/navigation/carousel/index.cjs");
+const require_index$34 = require("./components/layout/grid/index.cjs");
+const require_index$35 = require("./components/layout/page-layout/index.cjs");
+const require_index$36 = require("./components/layout/resizable-panels/index.cjs");
+const require_index$37 = require("./components/layout/scroll-area/index.cjs");
+const require_index$38 = require("./components/layout/section/index.cjs");
+const require_index$39 = require("./components/layout/section-stack/index.cjs");
+const require_index$40 = require("./components/layout/separator/index.cjs");
+const require_index$41 = require("./components/layout/sidebar/index.cjs");
+const require_index$42 = require("./components/layout/stack/index.cjs");
+const require_index$43 = require("./components/navigation/accordion/index.cjs");
+const require_index$44 = require("./components/navigation/carousel/index.cjs");
 const require_controller = require("./components/navigation/carousel/controller.cjs");
-const require_index$44 = require("./components/navigation/link/index.cjs");
-const require_index$45 = require("./components/navigation/pagination/index.cjs");
-const require_index$46 = require("./components/navigation/tabs/index.cjs");
-const require_index$47 = require("./components/navigation/tree-view/index.cjs");
-const require_index$48 = require("./components/overlays/backdrop/index.cjs");
-const require_index$49 = require("./components/overlays/command/index.cjs");
-const require_index$50 = require("./components/overlays/context-menu/index.cjs");
-const require_index$51 = require("./components/overlays/dialog/index.cjs");
-const require_index$52 = require("./components/overlays/drawer/index.cjs");
-const require_index$53 = require("./components/overlays/dropdown-menu/index.cjs");
-const require_index$54 = require("./components/overlays/notification/index.cjs");
-const require_index$55 = require("./components/overlays/popout/index.cjs");
-const require_index$56 = require("./components/overlays/portal/index.cjs");
-const require_index$57 = require("./components/overlays/popover/index.cjs");
+const require_index$45 = require("./components/navigation/link/index.cjs");
+const require_index$46 = require("./components/navigation/pagination/index.cjs");
+const require_index$47 = require("./components/navigation/tabs/index.cjs");
+const require_index$48 = require("./components/navigation/tree-view/index.cjs");
+const require_index$49 = require("./components/overlays/backdrop/index.cjs");
+const require_index$50 = require("./components/overlays/command/index.cjs");
+const require_index$51 = require("./components/overlays/context-menu/index.cjs");
+const require_index$52 = require("./components/overlays/dialog/index.cjs");
+const require_index$53 = require("./components/overlays/drawer/index.cjs");
+const require_index$54 = require("./components/overlays/dropdown-menu/index.cjs");
+const require_index$55 = require("./components/overlays/notification/index.cjs");
+const require_index$56 = require("./components/overlays/popout/index.cjs");
+const require_index$57 = require("./components/overlays/portal/index.cjs");
+const require_index$58 = require("./components/overlays/popover/index.cjs");
 const require_dropdown_menu_content = require("./components/overlays/dropdown-menu/dropdown-menu-content.cjs");
 const require_dropdown_menu_trigger = require("./components/overlays/dropdown-menu/dropdown-menu-trigger.cjs");
 const require_dropdown_menu_items = require("./components/overlays/dropdown-menu/dropdown-menu-items.cjs");
@@ -73,19 +74,19 @@ const require_dropdown_menu_radio = require("./components/overlays/dropdown-menu
 const require_target = require("./components/overlays/portal/target.cjs");
 const require_notification_provider = require("./components/overlays/notification/notification-provider.cjs");
 const require_use_notification = require("./components/overlays/notification/use-notification.cjs");
-const require_index$58 = require("./components/overlays/tooltip/index.cjs");
+const require_index$59 = require("./components/overlays/tooltip/index.cjs");
 const require_text = require("./components/typography/text.cjs");
 const require_heading = require("./components/typography/heading.cjs");
-const require_index$59 = require("./components/utilities/preview/index.cjs");
-const require_index$60 = require("./components/utilities/scroll-lock/index.cjs");
-const require_index$61 = require("./components/utilities/transition/index.cjs");
-exports.Accordion = require_index$42.Accordion;
+const require_index$60 = require("./components/utilities/preview/index.cjs");
+const require_index$61 = require("./components/utilities/scroll-lock/index.cjs");
+const require_index$62 = require("./components/utilities/transition/index.cjs");
+exports.Accordion = require_index$43.Accordion;
 exports.Alert = require_index$3.Alert;
 exports.AppBar = require_index$27.AppBar;
 exports.AspectRatio = require_index$28.AspectRatio;
 exports.Autocomplete = require_index$13.Autocomplete;
 exports.Avatar = require_index$4.Avatar;
-exports.Backdrop = require_index$48.Backdrop;
+exports.Backdrop = require_index$49.Backdrop;
 exports.Background = require_index$29.Background;
 exports.Badge = require_index$5.Badge;
 exports.BottomNavigation = require_index$30.BottomNavigation;
@@ -101,32 +102,32 @@ exports.CardFooter = require_index$6.CardFooter;
 exports.CardHeader = require_index$6.CardHeader;
 exports.CardMedia = require_index$6.CardMedia;
 exports.CardTitle = require_index$6.CardTitle;
-exports.Carousel = require_index$43.Carousel;
+exports.Carousel = require_index$44.Carousel;
 exports.CarouselController = require_controller.CarouselController;
 exports.Checkbox = require_index$14.Checkbox;
 exports.CircularProgress = require_circular_progress.CircularProgress;
 exports.CollapsableSidebar = require_index$32.CollapsableSidebar;
 exports.ColorPicker = require_index$15.ColorPicker;
-exports.Command = require_index$49.Command;
-exports.CommandDialog = require_index$49.CommandDialog;
+exports.Command = require_index$50.Command;
+exports.CommandDialog = require_index$50.CommandDialog;
 exports.Container = require_index$33.Container;
-exports.ContextMenu = require_index$50.ContextMenu;
-exports.ContextMenuCheckboxItem = require_index$50.ContextMenuCheckboxItem;
-exports.ContextMenuContent = require_index$50.ContextMenuContent;
-exports.ContextMenuGroup = require_index$50.ContextMenuGroup;
-exports.ContextMenuItem = require_index$50.ContextMenuItem;
-exports.ContextMenuLabel = require_index$50.ContextMenuLabel;
-exports.ContextMenuRadioGroup = require_index$50.ContextMenuRadioGroup;
-exports.ContextMenuRadioItem = require_index$50.ContextMenuRadioItem;
-exports.ContextMenuSeparator = require_index$50.ContextMenuSeparator;
-exports.ContextMenuSub = require_index$50.ContextMenuSub;
-exports.ContextMenuSubContent = require_index$50.ContextMenuSubContent;
-exports.ContextMenuSubTrigger = require_index$50.ContextMenuSubTrigger;
-exports.ContextMenuTrigger = require_index$50.ContextMenuTrigger;
+exports.ContextMenu = require_index$51.ContextMenu;
+exports.ContextMenuCheckboxItem = require_index$51.ContextMenuCheckboxItem;
+exports.ContextMenuContent = require_index$51.ContextMenuContent;
+exports.ContextMenuGroup = require_index$51.ContextMenuGroup;
+exports.ContextMenuItem = require_index$51.ContextMenuItem;
+exports.ContextMenuLabel = require_index$51.ContextMenuLabel;
+exports.ContextMenuRadioGroup = require_index$51.ContextMenuRadioGroup;
+exports.ContextMenuRadioItem = require_index$51.ContextMenuRadioItem;
+exports.ContextMenuSeparator = require_index$51.ContextMenuSeparator;
+exports.ContextMenuSub = require_index$51.ContextMenuSub;
+exports.ContextMenuSubContent = require_index$51.ContextMenuSubContent;
+exports.ContextMenuSubTrigger = require_index$51.ContextMenuSubTrigger;
+exports.ContextMenuTrigger = require_index$51.ContextMenuTrigger;
 exports.DatePicker = require_index$16.DatePicker;
-exports.Dialog = require_index$51.Dialog;
-exports.Drawer = require_index$52.Drawer;
-exports.DropdownMenu = require_index$53.DropdownMenu;
+exports.Dialog = require_index$52.Dialog;
+exports.Drawer = require_index$53.Drawer;
+exports.DropdownMenu = require_index$54.DropdownMenu;
 exports.DropdownMenuCheckboxItem = require_dropdown_menu_items.DropdownMenuCheckboxItem;
 exports.DropdownMenuContent = require_dropdown_menu_content.DropdownMenuContent;
 exports.DropdownMenuGroup = require_dropdown_menu_items.DropdownMenuGroup;
@@ -144,44 +145,46 @@ exports.EmptyStateMedia = require_index$7.EmptyStateMedia;
 exports.EmptyStateTitle = require_index$7.EmptyStateTitle;
 exports.FileUpload = require_index$17.FileUpload;
 exports.FormField = require_index$18.FormField;
+exports.Grid = require_index$34.Grid;
+exports.GridItem = require_index$34.GridItem;
 exports.Heading = require_heading.Heading;
 exports.Image = require_index$8.Image;
 exports.InputGroup = require_input_group.InputGroup;
 exports.Label = require_index$19.Label;
 exports.LinearProgress = require_linear_progress.LinearProgress;
-exports.Link = require_index$44.Link;
-exports.Notification = require_index$54.Notification;
+exports.Link = require_index$45.Link;
+exports.Notification = require_index$55.Notification;
 exports.NotificationProvider = require_notification_provider.NotificationProvider;
-exports.NotificationViewport = require_index$54.NotificationViewport;
+exports.NotificationViewport = require_index$55.NotificationViewport;
 exports.NumberInput = require_number_input.NumberInput;
-exports.PageLayout = require_index$34.PageLayout;
-exports.Pagination = require_index$45.Pagination;
+exports.PageLayout = require_index$35.PageLayout;
+exports.Pagination = require_index$46.Pagination;
 exports.Paper = require_index$9.Paper;
-exports.Popout = require_index$55.Popout;
-exports.Popover = require_index$57.Popover;
-exports.Portal = require_index$56.Portal;
+exports.Popout = require_index$56.Popout;
+exports.Popover = require_index$58.Popover;
+exports.Portal = require_index$57.Portal;
 exports.PortalTarget = require_target.PortalTarget;
-exports.Preview = require_index$59.Preview;
+exports.Preview = require_index$60.Preview;
 exports.Radio = require_index$20.Radio;
 exports.RadioGroup = require_index$20.RadioGroup;
 exports.Rating = require_index$10.Rating;
-exports.ResizableHandle = require_index$35.ResizableHandle;
-exports.ResizablePanel = require_index$35.ResizablePanel;
-exports.ResizablePanels = require_index$35.ResizablePanels;
-exports.ScrollArea = require_index$36.ScrollArea;
-exports.ScrollLock = require_index$60.ScrollLock;
-exports.Section = require_index$37.Section;
-exports.SectionStack = require_index$38.SectionStack;
+exports.ResizableHandle = require_index$36.ResizableHandle;
+exports.ResizablePanel = require_index$36.ResizablePanel;
+exports.ResizablePanels = require_index$36.ResizablePanels;
+exports.ScrollArea = require_index$37.ScrollArea;
+exports.ScrollLock = require_index$61.ScrollLock;
+exports.Section = require_index$38.Section;
+exports.SectionStack = require_index$39.SectionStack;
 exports.Select = require_index$21.Select;
-exports.Separator = require_index$39.Separator;
-exports.Sidebar = require_index$40.Sidebar;
+exports.Separator = require_index$40.Separator;
+exports.Sidebar = require_index$41.Sidebar;
 exports.Skeleton = require_index$11.Skeleton;
 exports.Slider = require_index$22.Slider;
-exports.Stack = require_index$41.Stack;
+exports.Stack = require_index$42.Stack;
 exports.Stepper = require_index$23.Stepper;
 exports.Switch = require_index$24.Switch;
-exports.Tabs = require_index$46.Tabs;
-exports.TabsTab = require_index$46.TabsTab;
+exports.Tabs = require_index$47.Tabs;
+exports.TabsTab = require_index$47.TabsTab;
 exports.Text = require_text.Text;
 exports.TextAreaInput = require_text_area_input.TextAreaInput;
 exports.TextEditor = require_index$12.TextEditor;
@@ -191,8 +194,8 @@ exports.TextRenderer = require_text_renderer.TextRenderer;
 exports.TimePicker = require_index$25.TimePicker;
 exports.ToggleGroup = require_index$2.ToggleGroup;
 exports.TokenInput = require_index$26.TokenInput;
-exports.Tooltip = require_index$58.Tooltip;
-exports.Transition = require_index$61.Transition;
-exports.TreeView = require_index$47.TreeView;
+exports.Tooltip = require_index$59.Tooltip;
+exports.Transition = require_index$62.Transition;
+exports.TreeView = require_index$48.TreeView;
 exports.useCarouselContext = require_controller.useCarouselContext;
 exports.useNotification = require_use_notification.useNotification;

package/dist/index.d.cts CHANGED Viewed

@@ -58,6 +58,7 @@ import { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, Bott
 import { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from "./components/layout/breadcrumbs/index.cjs";
 import { CollapsableSidebar, CollapsableSidebarEntry, CollapsableSidebarExpansion, CollapsableSidebarGroup, CollapsableSidebarItem, CollapsableSidebarProps, SidebarItemBase, WithClickHandler, WithLink } from "./components/layout/collapsable-sidebar/index.cjs";
 import { Container, ContainerProps } from "./components/layout/container/index.cjs";
+import { Grid, GridAlignment, GridAutoFlow, GridGap, GridItem, GridItemProps, GridLine, GridProps, GridSpan, GridTracks } from "./components/layout/grid/index.cjs";
 import { PageLayout, PageLayoutProps, SidebarPlacement } from "./components/layout/page-layout/index.cjs";
 import { ResizableHandle, ResizableHandleProps, ResizablePanel, ResizablePanelProps, ResizablePanels, ResizablePanelsOrientation, ResizablePanelsProps } from "./components/layout/resizable-panels/index.cjs";
 import { ScrollArea, ScrollAreaProps } from "./components/layout/scroll-area/index.cjs";
@@ -104,4 +105,4 @@ import { Heading, HeadingLevel, HeadingProps } from "./components/typography/hea
 import { Preview, PreviewAlign, PreviewDevice, PreviewJustify, PreviewProps } from "./components/utilities/preview/index.cjs";
 import { ScrollLock, ScrollLockProps } from "./components/utilities/scroll-lock/index.cjs";
 import { Transition, TransitionPhase, TransitionProps, TransitionTemplate } from "./components/utilities/transition/index.cjs";
-export { Accordion, type AccordionItemData, type AccordionItemId, type AccordionProps, type AccordionType, type AccordionValue, Alert, type AlertProps, type AlertSeverity, type AlertVariant, type AnchorOffset, type AnchorOrigin, type AnchorOverlap, AppBar, type AppBarNavigationItem, type AppBarProps, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteInputChangeReason, type AutocompleteMultipleProps, type AutocompleteOption, type AutocompleteOptionRenderState, type AutocompleteProps, type AutocompleteSingleProps, type AutocompleteSize, type AutocompleteValue, Avatar, type AvatarProps, type AvatarShape, Backdrop, type BackdropProps, Background, type BackgroundFade, type BackgroundMeshColors, type BackgroundPattern, type BackgroundProps, Badge, type BadgeColor, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, type CardOrientation, type CardPartProps, type CardProps, type CardSize, CardTitle, type CardVariant, Carousel, type CarouselAlignment, type CarouselAlignmentConfig, type CarouselButtonAlignment, type CarouselContextValue, CarouselController, type CarouselControllerProps, type CarouselPagerAlignment, type CarouselProps, Checkbox, type CheckboxProps, type CheckboxSize, CircularProgress, type CircularProgressProps, type CircularProgressSize, CollapsableSidebar, type CollapsableSidebarEntry, type CollapsableSidebarExpansion, type CollapsableSidebarGroup, type CollapsableSidebarItem, type CollapsableSidebarProps, ColorPicker, type ColorPickerFormat, type ColorPickerProps, type ColorPickerSwatch, Command, CommandDialog, type CommandDialogProps, type CommandItem, type CommandProps, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, type ContextMenuCheckedState, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLabel, type ContextMenuLabelProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSubCompound as ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DatePickerSize, Dialog, type DialogProps, Drawer, type DrawerProps, CompoundDropdownMenu as DropdownMenu, type DropdownMenuAlignment, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, type DropdownMenuCheckedState, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuPosition, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, EmptyStateContent, EmptyStateDescription, EmptyStateHeader, EmptyStateMedia, type EmptyStateMediaProps, type EmptyStateMediaVariant, type EmptyStateProps, type EmptyStateSize, EmptyStateTitle, type EmptyStateVariant, FileUpload, type FileUploadItem, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type FileUploadStatus, type FileUploadUploadContext, type FileUploadUploadHandler, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, Image, type ImageFit, type ImagePlaceholder, type ImageProps, type ImageRadius, type ImageSource, type ImageSourceData, type ImageSourceSet, InputGroup, type InputGroupAddonAlign, type InputGroupAddonProps, type InputGroupProps, Label, type LabelProps, LinearProgress, type LinearProgressProps, Link, type LinkProps, Notification, type NotificationAction, type NotificationInput, type NotificationItem, type NotificationOptions, type NotificationPosition, type NotificationProps, NotificationProvider, type NotificationProviderProps, type NotificationSeverity, NotificationViewport, type NotificationViewportProps, NumberInput, type NumberInputProps, PageLayout, type PageLayoutProps, type PagerAlignmentConfig, Pagination, type PaginationProps, Paper, type PaperProps, Popout, type PopoutAction, type PopoutAlignment, type PopoutPosition, type PopoutProps, type PopoutTriggerProps, Popover, type PopoverProps, Portal, type PortalProps, PortalTarget, type PortalTargetProps, Preview, type PreviewAlign, type PreviewDevice, type PreviewJustify, type PreviewProps, type ProgressProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, Rating, type RatingProps, type RatingSize, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, ResizablePanels, type ResizablePanelsOrientation, type ResizablePanelsProps, type ResponsiveDirection, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollLock, type ScrollLockProps, Section, type SectionProps, SectionStack, type SectionStackProps, type SectionTheme, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, type SelectSize, Separator, type SeparatorOrientation, type SeparatorProps, Sidebar, type SidebarItemBase, type SidebarPlacement, type SidebarProps, Skeleton, type SkeletonProps, type SkeletonRadius, Slider, type SliderMark, type SliderProps, type SliderSize, Stack, type StackCrossAlignment, type StackMainAlignment, type StackProps, Stepper, type StepperOrientation, type StepperProps, type StepperStepProps, Switch, type SwitchProps, type SwitchSize, Tabs, type TabsPosition, type TabsProps, TabsTab, type TabsTabProps, Text, type TextAlign, TextAreaInput, type TextAreaInputProps, type TextBlock, type TextBlockType, type TextBlockVariant, type TextDocument, TextEditor, type TextEditorProps, TextEditorToolbar, type TextEditorToolbarProps, type TextInline, TextInput, type TextInputProps, type TextInputType, type TextListType, type TextMark, type TextPoint, type TextProps, TextRenderer, type TextRendererProps, type TextSelection, type TextType, TimePicker, type TimePickerProps, type TimePickerSize, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupOrientation, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, TokenInput, type TokenInputMode, type TokenInputProps, type TokenInputSize, Tooltip, type TooltipArrowSide, type TooltipContentProps, type TooltipProps, Transition, type TransitionPhase, type TransitionProps, type TransitionTemplate, TreeView, type TreeViewItem, type TreeViewItemState, type TreeViewProps, type TreeViewSelectionMode, type TreeViewSize, type WithClickHandler, type WithLink, useCarouselContext, useNotification };
+export { Accordion, type AccordionItemData, type AccordionItemId, type AccordionProps, type AccordionType, type AccordionValue, Alert, type AlertProps, type AlertSeverity, type AlertVariant, type AnchorOffset, type AnchorOrigin, type AnchorOverlap, AppBar, type AppBarNavigationItem, type AppBarProps, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteInputChangeReason, type AutocompleteMultipleProps, type AutocompleteOption, type AutocompleteOptionRenderState, type AutocompleteProps, type AutocompleteSingleProps, type AutocompleteSize, type AutocompleteValue, Avatar, type AvatarProps, type AvatarShape, Backdrop, type BackdropProps, Background, type BackgroundFade, type BackgroundMeshColors, type BackgroundPattern, type BackgroundProps, Badge, type BadgeColor, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, type CardOrientation, type CardPartProps, type CardProps, type CardSize, CardTitle, type CardVariant, Carousel, type CarouselAlignment, type CarouselAlignmentConfig, type CarouselButtonAlignment, type CarouselContextValue, CarouselController, type CarouselControllerProps, type CarouselPagerAlignment, type CarouselProps, Checkbox, type CheckboxProps, type CheckboxSize, CircularProgress, type CircularProgressProps, type CircularProgressSize, CollapsableSidebar, type CollapsableSidebarEntry, type CollapsableSidebarExpansion, type CollapsableSidebarGroup, type CollapsableSidebarItem, type CollapsableSidebarProps, ColorPicker, type ColorPickerFormat, type ColorPickerProps, type ColorPickerSwatch, Command, CommandDialog, type CommandDialogProps, type CommandItem, type CommandProps, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, type ContextMenuCheckedState, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLabel, type ContextMenuLabelProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSubCompound as ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DatePickerSize, Dialog, type DialogProps, Drawer, type DrawerProps, CompoundDropdownMenu as DropdownMenu, type DropdownMenuAlignment, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, type DropdownMenuCheckedState, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuPosition, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, EmptyStateContent, EmptyStateDescription, EmptyStateHeader, EmptyStateMedia, type EmptyStateMediaProps, type EmptyStateMediaVariant, type EmptyStateProps, type EmptyStateSize, EmptyStateTitle, type EmptyStateVariant, FileUpload, type FileUploadItem, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type FileUploadStatus, type FileUploadUploadContext, type FileUploadUploadHandler, FormField, type FormFieldProps, Grid, type GridAlignment, type GridAutoFlow, type GridGap, GridItem, type GridItemProps, type GridLine, type GridProps, type GridSpan, type GridTracks, Heading, type HeadingLevel, type HeadingProps, Image, type ImageFit, type ImagePlaceholder, type ImageProps, type ImageRadius, type ImageSource, type ImageSourceData, type ImageSourceSet, InputGroup, type InputGroupAddonAlign, type InputGroupAddonProps, type InputGroupProps, Label, type LabelProps, LinearProgress, type LinearProgressProps, Link, type LinkProps, Notification, type NotificationAction, type NotificationInput, type NotificationItem, type NotificationOptions, type NotificationPosition, type NotificationProps, NotificationProvider, type NotificationProviderProps, type NotificationSeverity, NotificationViewport, type NotificationViewportProps, NumberInput, type NumberInputProps, PageLayout, type PageLayoutProps, type PagerAlignmentConfig, Pagination, type PaginationProps, Paper, type PaperProps, Popout, type PopoutAction, type PopoutAlignment, type PopoutPosition, type PopoutProps, type PopoutTriggerProps, Popover, type PopoverProps, Portal, type PortalProps, PortalTarget, type PortalTargetProps, Preview, type PreviewAlign, type PreviewDevice, type PreviewJustify, type PreviewProps, type ProgressProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, Rating, type RatingProps, type RatingSize, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, ResizablePanels, type ResizablePanelsOrientation, type ResizablePanelsProps, type ResponsiveDirection, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollLock, type ScrollLockProps, Section, type SectionProps, SectionStack, type SectionStackProps, type SectionTheme, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, type SelectSize, Separator, type SeparatorOrientation, type SeparatorProps, Sidebar, type SidebarItemBase, type SidebarPlacement, type SidebarProps, Skeleton, type SkeletonProps, type SkeletonRadius, Slider, type SliderMark, type SliderProps, type SliderSize, Stack, type StackCrossAlignment, type StackMainAlignment, type StackProps, Stepper, type StepperOrientation, type StepperProps, type StepperStepProps, Switch, type SwitchProps, type SwitchSize, Tabs, type TabsPosition, type TabsProps, TabsTab, type TabsTabProps, Text, type TextAlign, TextAreaInput, type TextAreaInputProps, type TextBlock, type TextBlockType, type TextBlockVariant, type TextDocument, TextEditor, type TextEditorProps, TextEditorToolbar, type TextEditorToolbarProps, type TextInline, TextInput, type TextInputProps, type TextInputType, type TextListType, type TextMark, type TextPoint, type TextProps, TextRenderer, type TextRendererProps, type TextSelection, type TextType, TimePicker, type TimePickerProps, type TimePickerSize, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupOrientation, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, TokenInput, type TokenInputMode, type TokenInputProps, type TokenInputSize, Tooltip, type TooltipArrowSide, type TooltipContentProps, type TooltipProps, Transition, type TransitionPhase, type TransitionProps, type TransitionTemplate, TreeView, type TreeViewItem, type TreeViewItemState, type TreeViewProps, type TreeViewSelectionMode, type TreeViewSize, type WithClickHandler, type WithLink, useCarouselContext, useNotification };

package/dist/index.d.ts CHANGED Viewed

@@ -58,6 +58,7 @@ import { BottomNavigation, BottomNavigationItem, BottomNavigationItemProps, Bott
 import { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from "./components/layout/breadcrumbs/index.js";
 import { CollapsableSidebar, CollapsableSidebarEntry, CollapsableSidebarExpansion, CollapsableSidebarGroup, CollapsableSidebarItem, CollapsableSidebarProps, SidebarItemBase, WithClickHandler, WithLink } from "./components/layout/collapsable-sidebar/index.js";
 import { Container, ContainerProps } from "./components/layout/container/index.js";
+import { Grid, GridAlignment, GridAutoFlow, GridGap, GridItem, GridItemProps, GridLine, GridProps, GridSpan, GridTracks } from "./components/layout/grid/index.js";
 import { PageLayout, PageLayoutProps, SidebarPlacement } from "./components/layout/page-layout/index.js";
 import { ResizableHandle, ResizableHandleProps, ResizablePanel, ResizablePanelProps, ResizablePanels, ResizablePanelsOrientation, ResizablePanelsProps } from "./components/layout/resizable-panels/index.js";
 import { ScrollArea, ScrollAreaProps } from "./components/layout/scroll-area/index.js";
@@ -104,4 +105,4 @@ import { Heading, HeadingLevel, HeadingProps } from "./components/typography/hea
 import { Preview, PreviewAlign, PreviewDevice, PreviewJustify, PreviewProps } from "./components/utilities/preview/index.js";
 import { ScrollLock, ScrollLockProps } from "./components/utilities/scroll-lock/index.js";
 import { Transition, TransitionPhase, TransitionProps, TransitionTemplate } from "./components/utilities/transition/index.js";
-export { Accordion, type AccordionItemData, type AccordionItemId, type AccordionProps, type AccordionType, type AccordionValue, Alert, type AlertProps, type AlertSeverity, type AlertVariant, type AnchorOffset, type AnchorOrigin, type AnchorOverlap, AppBar, type AppBarNavigationItem, type AppBarProps, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteInputChangeReason, type AutocompleteMultipleProps, type AutocompleteOption, type AutocompleteOptionRenderState, type AutocompleteProps, type AutocompleteSingleProps, type AutocompleteSize, type AutocompleteValue, Avatar, type AvatarProps, type AvatarShape, Backdrop, type BackdropProps, Background, type BackgroundFade, type BackgroundMeshColors, type BackgroundPattern, type BackgroundProps, Badge, type BadgeColor, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, type CardOrientation, type CardPartProps, type CardProps, type CardSize, CardTitle, type CardVariant, Carousel, type CarouselAlignment, type CarouselAlignmentConfig, type CarouselButtonAlignment, type CarouselContextValue, CarouselController, type CarouselControllerProps, type CarouselPagerAlignment, type CarouselProps, Checkbox, type CheckboxProps, type CheckboxSize, CircularProgress, type CircularProgressProps, type CircularProgressSize, CollapsableSidebar, type CollapsableSidebarEntry, type CollapsableSidebarExpansion, type CollapsableSidebarGroup, type CollapsableSidebarItem, type CollapsableSidebarProps, ColorPicker, type ColorPickerFormat, type ColorPickerProps, type ColorPickerSwatch, Command, CommandDialog, type CommandDialogProps, type CommandItem, type CommandProps, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, type ContextMenuCheckedState, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLabel, type ContextMenuLabelProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSubCompound as ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DatePickerSize, Dialog, type DialogProps, Drawer, type DrawerProps, CompoundDropdownMenu as DropdownMenu, type DropdownMenuAlignment, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, type DropdownMenuCheckedState, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuPosition, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, EmptyStateContent, EmptyStateDescription, EmptyStateHeader, EmptyStateMedia, type EmptyStateMediaProps, type EmptyStateMediaVariant, type EmptyStateProps, type EmptyStateSize, EmptyStateTitle, type EmptyStateVariant, FileUpload, type FileUploadItem, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type FileUploadStatus, type FileUploadUploadContext, type FileUploadUploadHandler, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, Image, type ImageFit, type ImagePlaceholder, type ImageProps, type ImageRadius, type ImageSource, type ImageSourceData, type ImageSourceSet, InputGroup, type InputGroupAddonAlign, type InputGroupAddonProps, type InputGroupProps, Label, type LabelProps, LinearProgress, type LinearProgressProps, Link, type LinkProps, Notification, type NotificationAction, type NotificationInput, type NotificationItem, type NotificationOptions, type NotificationPosition, type NotificationProps, NotificationProvider, type NotificationProviderProps, type NotificationSeverity, NotificationViewport, type NotificationViewportProps, NumberInput, type NumberInputProps, PageLayout, type PageLayoutProps, type PagerAlignmentConfig, Pagination, type PaginationProps, Paper, type PaperProps, Popout, type PopoutAction, type PopoutAlignment, type PopoutPosition, type PopoutProps, type PopoutTriggerProps, Popover, type PopoverProps, Portal, type PortalProps, PortalTarget, type PortalTargetProps, Preview, type PreviewAlign, type PreviewDevice, type PreviewJustify, type PreviewProps, type ProgressProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, Rating, type RatingProps, type RatingSize, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, ResizablePanels, type ResizablePanelsOrientation, type ResizablePanelsProps, type ResponsiveDirection, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollLock, type ScrollLockProps, Section, type SectionProps, SectionStack, type SectionStackProps, type SectionTheme, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, type SelectSize, Separator, type SeparatorOrientation, type SeparatorProps, Sidebar, type SidebarItemBase, type SidebarPlacement, type SidebarProps, Skeleton, type SkeletonProps, type SkeletonRadius, Slider, type SliderMark, type SliderProps, type SliderSize, Stack, type StackCrossAlignment, type StackMainAlignment, type StackProps, Stepper, type StepperOrientation, type StepperProps, type StepperStepProps, Switch, type SwitchProps, type SwitchSize, Tabs, type TabsPosition, type TabsProps, TabsTab, type TabsTabProps, Text, type TextAlign, TextAreaInput, type TextAreaInputProps, type TextBlock, type TextBlockType, type TextBlockVariant, type TextDocument, TextEditor, type TextEditorProps, TextEditorToolbar, type TextEditorToolbarProps, type TextInline, TextInput, type TextInputProps, type TextInputType, type TextListType, type TextMark, type TextPoint, type TextProps, TextRenderer, type TextRendererProps, type TextSelection, type TextType, TimePicker, type TimePickerProps, type TimePickerSize, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupOrientation, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, TokenInput, type TokenInputMode, type TokenInputProps, type TokenInputSize, Tooltip, type TooltipArrowSide, type TooltipContentProps, type TooltipProps, Transition, type TransitionPhase, type TransitionProps, type TransitionTemplate, TreeView, type TreeViewItem, type TreeViewItemState, type TreeViewProps, type TreeViewSelectionMode, type TreeViewSize, type WithClickHandler, type WithLink, useCarouselContext, useNotification };
+export { Accordion, type AccordionItemData, type AccordionItemId, type AccordionProps, type AccordionType, type AccordionValue, Alert, type AlertProps, type AlertSeverity, type AlertVariant, type AnchorOffset, type AnchorOrigin, type AnchorOverlap, AppBar, type AppBarNavigationItem, type AppBarProps, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteInputChangeReason, type AutocompleteMultipleProps, type AutocompleteOption, type AutocompleteOptionRenderState, type AutocompleteProps, type AutocompleteSingleProps, type AutocompleteSize, type AutocompleteValue, Avatar, type AvatarProps, type AvatarShape, Backdrop, type BackdropProps, Background, type BackgroundFade, type BackgroundMeshColors, type BackgroundPattern, type BackgroundProps, Badge, type BadgeColor, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, type CardOrientation, type CardPartProps, type CardProps, type CardSize, CardTitle, type CardVariant, Carousel, type CarouselAlignment, type CarouselAlignmentConfig, type CarouselButtonAlignment, type CarouselContextValue, CarouselController, type CarouselControllerProps, type CarouselPagerAlignment, type CarouselProps, Checkbox, type CheckboxProps, type CheckboxSize, CircularProgress, type CircularProgressProps, type CircularProgressSize, CollapsableSidebar, type CollapsableSidebarEntry, type CollapsableSidebarExpansion, type CollapsableSidebarGroup, type CollapsableSidebarItem, type CollapsableSidebarProps, ColorPicker, type ColorPickerFormat, type ColorPickerProps, type ColorPickerSwatch, Command, CommandDialog, type CommandDialogProps, type CommandItem, type CommandProps, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, type ContextMenuCheckedState, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLabel, type ContextMenuLabelProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSubCompound as ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DatePickerSize, Dialog, type DialogProps, Drawer, type DrawerProps, CompoundDropdownMenu as DropdownMenu, type DropdownMenuAlignment, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, type DropdownMenuCheckedState, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuPosition, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, EmptyStateContent, EmptyStateDescription, EmptyStateHeader, EmptyStateMedia, type EmptyStateMediaProps, type EmptyStateMediaVariant, type EmptyStateProps, type EmptyStateSize, EmptyStateTitle, type EmptyStateVariant, FileUpload, type FileUploadItem, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type FileUploadStatus, type FileUploadUploadContext, type FileUploadUploadHandler, FormField, type FormFieldProps, Grid, type GridAlignment, type GridAutoFlow, type GridGap, GridItem, type GridItemProps, type GridLine, type GridProps, type GridSpan, type GridTracks, Heading, type HeadingLevel, type HeadingProps, Image, type ImageFit, type ImagePlaceholder, type ImageProps, type ImageRadius, type ImageSource, type ImageSourceData, type ImageSourceSet, InputGroup, type InputGroupAddonAlign, type InputGroupAddonProps, type InputGroupProps, Label, type LabelProps, LinearProgress, type LinearProgressProps, Link, type LinkProps, Notification, type NotificationAction, type NotificationInput, type NotificationItem, type NotificationOptions, type NotificationPosition, type NotificationProps, NotificationProvider, type NotificationProviderProps, type NotificationSeverity, NotificationViewport, type NotificationViewportProps, NumberInput, type NumberInputProps, PageLayout, type PageLayoutProps, type PagerAlignmentConfig, Pagination, type PaginationProps, Paper, type PaperProps, Popout, type PopoutAction, type PopoutAlignment, type PopoutPosition, type PopoutProps, type PopoutTriggerProps, Popover, type PopoverProps, Portal, type PortalProps, PortalTarget, type PortalTargetProps, Preview, type PreviewAlign, type PreviewDevice, type PreviewJustify, type PreviewProps, type ProgressProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, Rating, type RatingProps, type RatingSize, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, ResizablePanels, type ResizablePanelsOrientation, type ResizablePanelsProps, type ResponsiveDirection, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollLock, type ScrollLockProps, Section, type SectionProps, SectionStack, type SectionStackProps, type SectionTheme, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, type SelectSize, Separator, type SeparatorOrientation, type SeparatorProps, Sidebar, type SidebarItemBase, type SidebarPlacement, type SidebarProps, Skeleton, type SkeletonProps, type SkeletonRadius, Slider, type SliderMark, type SliderProps, type SliderSize, Stack, type StackCrossAlignment, type StackMainAlignment, type StackProps, Stepper, type StepperOrientation, type StepperProps, type StepperStepProps, Switch, type SwitchProps, type SwitchSize, Tabs, type TabsPosition, type TabsProps, TabsTab, type TabsTabProps, Text, type TextAlign, TextAreaInput, type TextAreaInputProps, type TextBlock, type TextBlockType, type TextBlockVariant, type TextDocument, TextEditor, type TextEditorProps, TextEditorToolbar, type TextEditorToolbarProps, type TextInline, TextInput, type TextInputProps, type TextInputType, type TextListType, type TextMark, type TextPoint, type TextProps, TextRenderer, type TextRendererProps, type TextSelection, type TextType, TimePicker, type TimePickerProps, type TimePickerSize, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupOrientation, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, TokenInput, type TokenInputMode, type TokenInputProps, type TokenInputSize, Tooltip, type TooltipArrowSide, type TooltipContentProps, type TooltipProps, Transition, type TransitionPhase, type TransitionProps, type TransitionTemplate, TreeView, type TreeViewItem, type TreeViewItemState, type TreeViewProps, type TreeViewSelectionMode, type TreeViewSize, type WithClickHandler, type WithLink, useCarouselContext, useNotification };

package/dist/index.js CHANGED Viewed

@@ -40,6 +40,7 @@ import { BottomNavigation, BottomNavigationItem } from "./components/layout/bott
 import { Breadcrumbs } from "./components/layout/breadcrumbs/index.js";
 import { CollapsableSidebar } from "./components/layout/collapsable-sidebar/index.js";
 import { Container } from "./components/layout/container/index.js";
+import { Grid, GridItem } from "./components/layout/grid/index.js";
 import { PageLayout } from "./components/layout/page-layout/index.js";
 import { ResizableHandle, ResizablePanel, ResizablePanels } from "./components/layout/resizable-panels/index.js";
 import { ScrollArea } from "./components/layout/scroll-area/index.js";
@@ -78,4 +79,4 @@ import { Heading } from "./components/typography/heading.js";
 import { Preview } from "./components/utilities/preview/index.js";
 import { ScrollLock } from "./components/utilities/scroll-lock/index.js";
 import { Transition } from "./components/utilities/transition/index.js";
-export { Accordion, Alert, AppBar, AspectRatio, Autocomplete, Avatar, Backdrop, Background, Badge, BottomNavigation, BottomNavigationItem, Breadcrumbs, Button, ButtonGroup, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Carousel, CarouselController, Checkbox, CircularProgress, CollapsableSidebar, ColorPicker, Command, CommandDialog, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSubCompound as ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DatePicker, Dialog, Drawer, CompoundDropdownMenu as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, EmptyStateContent, EmptyStateDescription, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, FileUpload, FormField, Heading, Image, InputGroup, Label, LinearProgress, Link, Notification, NotificationProvider, NotificationViewport, NumberInput, PageLayout, Pagination, Paper, Popout, Popover, Portal, PortalTarget, Preview, Radio, RadioGroup, Rating, ResizableHandle, ResizablePanel, ResizablePanels, ScrollArea, ScrollLock, Section, SectionStack, Select, Separator, Sidebar, Skeleton, Slider, Stack, Stepper, Switch, Tabs, TabsTab, Text, TextAreaInput, TextEditor, TextEditorToolbar, TextInput, TextRenderer, TimePicker, ToggleGroup, TokenInput, Tooltip, Transition, TreeView, useCarouselContext, useNotification };
+export { Accordion, Alert, AppBar, AspectRatio, Autocomplete, Avatar, Backdrop, Background, Badge, BottomNavigation, BottomNavigationItem, Breadcrumbs, Button, ButtonGroup, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Carousel, CarouselController, Checkbox, CircularProgress, CollapsableSidebar, ColorPicker, Command, CommandDialog, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSubCompound as ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DatePicker, Dialog, Drawer, CompoundDropdownMenu as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, EmptyStateContent, EmptyStateDescription, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, FileUpload, FormField, Grid, GridItem, Heading, Image, InputGroup, Label, LinearProgress, Link, Notification, NotificationProvider, NotificationViewport, NumberInput, PageLayout, Pagination, Paper, Popout, Popover, Portal, PortalTarget, Preview, Radio, RadioGroup, Rating, ResizableHandle, ResizablePanel, ResizablePanels, ScrollArea, ScrollLock, Section, SectionStack, Select, Separator, Sidebar, Skeleton, Slider, Stack, Stepper, Switch, Tabs, TabsTab, Text, TextAreaInput, TextEditor, TextEditorToolbar, TextInput, TextRenderer, TimePicker, ToggleGroup, TokenInput, Tooltip, Transition, TreeView, useCarouselContext, useNotification };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@puzzle-ui/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "UI components for Puzzle",
   "homepage": "https://puzzle-ui.com",
   "repository": {
@@ -47,10 +47,10 @@
     "prepack": "tsdown"
   },
   "dependencies": {
-    "@puzzle-ui/core": "^0.5.1",
-    "@puzzle-ui/hooks": "^0.5.1",
-    "@puzzle-ui/icons": "^0.5.1",
-    "@puzzle-ui/theme": "^0.5.1"
+    "@puzzle-ui/core": "^0.6.0",
+    "@puzzle-ui/hooks": "^0.6.0",
+    "@puzzle-ui/icons": "^0.6.0",
+    "@puzzle-ui/theme": "^0.6.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",