@puzzle-ui/ui 0.5.0 → 0.6.0

package/README.md

@@ -1,98 +1,82 @@
-# Getting Started
+# @puzzle-ui/ui
 
-Install Puzzle in your React app, build your first interface, and customize the theme.
+Composable, token-driven React components for building React interfaces with Puzzle.
 
-> \[!WARNING\] **Puzzle is not ready for production use.**
->
-> This project is under active development. APIs, component props,
-> package exports, styling, and internal implementation may change
-> without notice. Components may be incomplete, and testing,
-> accessibility, documentation, and framework compatibility are not yet
-> guaranteed. Use it for experimentation and evaluation only---not for
-> production applications.
+**Documentation:** [https://puzzle-ui.com/docs/ui](https://puzzle-ui.com/docs/ui)
 
-Puzzle is a TypeScript and React UI component library built around reusable components and shared design tokens. Its components are composable and router-independent, with styling supplied by `"@puzzle-ui/theme`. The framework is setup to be compatible with `Next.js`, `Tanstack Start` and `react-router`.
+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 is under active development and is not ready for production use.** APIs, props, exports, and styling may change without notice. Accessibility and framework compatibility are still being tested. Use the project for experimentation and evaluation.
+`@puzzle-ui/ui` provides composable, router-independent React components:
+actions, data display, editors, forms, layout, navigation, overlays,
+typography, and utilities. Components use semantic HTML and native browser
+behavior first, and all styling comes from the CSS custom properties supplied
+by [`@puzzle-ui/theme`](https://puzzle-ui.com/docs/theme), so one `Theme`
+provider styles your whole application.
 
-## Prerequisites
-
-- A package manager: npm, Bun, pnpm, or Yarn.
-- An existing React application with a bundler that supports CSS imports, such as Vite.
-- Familiarity with React and TypeScript. The UI and theme packages require React and React DOM 19 or later within the supported React 19 range.
-
-## Set up a new project
-
-Simple run our @puzzle-ui/create project template to get started.
-
-npm:
+## Install
 
 ```bash
-npx @puzzle-ui/create
+npm install @puzzle-ui/ui @puzzle-ui/theme
+# or
+bun add @puzzle-ui/ui @puzzle-ui/theme
+# or
+pnpm add @puzzle-ui/ui @puzzle-ui/theme
+# or
+yarn add @puzzle-ui/ui @puzzle-ui/theme
 ```
 
-bun:
-
-```bash
-bunx @puzzle-ui/create
-```
-
-Puzzle can set up a new project for you with the following framework options:
-
-- Basic React app
-- Tanstack start
-- Next.js
+React and React DOM 19 are peer dependencies and should already be installed
+in your application.
 
-Furthermore you can choose to install tailwindcss or not.
-It directly installs all dependencies and sets up the project for you.
+To start a new project with Puzzle preconfigured, run
+[`npx @puzzle-ui/create`](https://puzzle-ui.com/docs/create).
 
-## Set up in an existing project:
+## Usage
 
-Install the UI library and theme package in your application's directory. Choose your package manager below:
-
-npm:
-
-```bash
-npm install @puzzle-ui/ui --save
-```
-
-bun:
-
-```bash
-bun add @puzzle-ui/create
-```
+Wrap your application in `Theme` and import components from `@puzzle-ui/ui`:
 
-pnpm:
+```tsx
+import { Theme } from "@puzzle-ui/theme";
+import { Button, Stack, Text } from "@puzzle-ui/ui";
 
-```bash
-pnpm add @puzzle-ui/ui
+export const App = () => (
+  <Theme>
+    <Stack direction="col" gap="sm">
+      <Text>Build your interface with Puzzle.</Text>
+      <Button>Get started</Button>
+    </Stack>
+  </Theme>
+);
 ```
 
-yarn:
+## Component categories
 
-```bash
-yarn add @puzzle-ui/ui
-```
+| Category     | Components                                                                                                    |
+| ------------ | ------------------------------------------------------------------------------------------------------------- |
+| Actions      | Button, ButtonGroup, ToggleGroup                                                                              |
+| 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, 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                                                                                                 |
+| Utilities    | Portal, Preview, ScrollLock, Transition                                                                       |
 
-These commands install published packages; they do not clone the repository or build its workspaces. Puzzle does not require Bun in your application. React and React DOM are peer dependencies and should already be installed in your app.
+Browse every component with live examples, props, and accessibility guidance
+in the [component documentation](https://puzzle-ui.com/docs/ui).
 
-## Your first interface
+## Framework integration
 
-Import components from `"@puzzle-ui/ui` and wrap your application in `Theme` from `"@puzzle-ui/theme`:
+Components do not depend on a router or framework. Use the `components`
+prop of `Theme` to provide your framework's link and image components; see
+[Component Overrides](https://puzzle-ui.com/docs/theme/components).
 
-```tsx
-import { Theme } from "@puzzle-ui/theme";
-import { Button } from "@puzzle-ui/ui";
+## Related packages
 
-export const App = () => (
-  <Theme>
-    <main>
-      <h1>Hello, Puzzle</h1>
-      <p>Build your interface with reusable components and shared tokens.</p>
-      <Button onClick={() => window.alert("Welcome to Puzzle!")}>
-        Get started
-      </Button>
-    </main>
-  </Theme>
-);
-```
+- [`@puzzle-ui/theme`](https://puzzle-ui.com/docs/theme) — design tokens and the `Theme` provider.
+- [`@puzzle-ui/icons`](https://puzzle-ui.com/docs/icons) — icon components.
+- [`@puzzle-ui/hooks`](https://puzzle-ui.com/docs/hooks) — reusable React hooks.

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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/components/navigation/tree-view/index.cjs

@@ -12,7 +12,7 @@ const getTextValue = (item) => {
 	return "";
 };
 const normalizeSearchText = (value) => value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLocaleLowerCase();
-const TreeView = ({ items, selectionMode = "single", defaultExpandedIds = [], expandedIds, onExpandedChange, defaultSelectedIds = [], selectedIds, onSelectionChange, defaultFocusedId, onFocusedChange, loadChildren, onLoadChildrenError, onItemActivate, getItemActive, renderItem, renderIcon, renderLabel, expandOnItemClick = false, typeahead = true, size = "md", indentation, loadingLabel = "Loading…", loadErrorLabel = "Could not load children. Collapse and expand to retry.", itemClassName, className, style, dir, ...rootProps }) => {
+const TreeView = ({ items, selectionMode = "single", defaultExpandedIds = [], expandedIds, onExpandedChange, defaultSelectedIds = [], selectedIds, onSelectionChange, defaultFocusedId, onFocusedChange, loadChildren, onLoadChildrenError, onItemActivate, getItemActive, renderItem, renderIcon, renderLabel, expandOnItemClick = true, typeahead = true, size = "md", indentation, loadingLabel = "Loading…", loadErrorLabel = "Could not load children. Collapse and expand to retry.", itemClassName, className, style, dir, ...rootProps }) => {
 	const generatedId = (0, react.useId)();
 	const isExpandedControlled = expandedIds !== void 0;
 	const isSelectionControlled = selectedIds !== void 0;