@puzzle-ui/ui 0.3.0 → 0.5.0

package/README.md

@@ -1,98 +1,98 @@
-# @puzzle-ui/ui
+# Getting Started
 
-Composable React UI components for Puzzle: actions, forms, data display,
-layout, navigation, overlays, typography, and utilities.
+Install Puzzle in your React app, build your first interface, and customize the theme.
 
-> Puzzle is under active development and is not ready for production use.
-> APIs, styling, accessibility coverage, and framework compatibility may
-> change. Use it for experimentation and evaluation.
+> \[!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.
 
-## Installation
+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`.
 
-Install the UI library and its theme provider:
+**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.
 
-```sh
-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
-```
+## Prerequisites
 
-Requires React and React DOM 19 (`^19.0.0`) and a bundler that supports CSS
-imports, such as Vite. Consumers do not need Bun.
+- 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.
 
-## Usage
+## Set up a new project
 
-```tsx
-import { Theme } from "@puzzle-ui/theme";
-import { Button } from "@puzzle-ui/ui";
+Simple run our @puzzle-ui/create project template to get started.
 
-export const App = () => (
-  <Theme>
-    <main>
-      <h1>Hello, Puzzle</h1>
-      <Button onClick={() => window.alert("Hello!")}>
-        Get started
-      </Button>
-    </main>
-  </Theme>
-);
+npm:
+
+```bash
+npx @puzzle-ui/create
+```
+
+bun:
+
+```bash
+bunx @puzzle-ui/create
 ```
 
-`Theme` supplies the design tokens and global defaults. Component CSS is
-imported automatically; no separate Puzzle stylesheet or Tailwind setup is
-required. Customize colors, fonts, spacing, and other tokens through
-[`@puzzle-ui/theme`](../theme/README.md).
+Puzzle can set up a new project for you with the following framework options:
 
-## Components and imports
+- Basic React app
+- Tanstack start
+- Next.js
 
-Use named imports from `@puzzle-ui/ui`. Components include buttons, cards,
-inputs, dialogs, tabs, navigation, layout primitives, and typography.
-Internal component paths are not exported package entry points.
+Furthermore you can choose to install tailwindcss or not.
+It directly installs all dependencies and sets up the project for you.
 
-Browse the repository's
-[component documentation](../../apps/site/content/docs/components/ui) for
-examples, props, and accessibility guidance. Interactive components need a
-client boundary in React Server Component applications.
+## Set up in an existing project:
 
-The package ships ESM and CommonJS builds with matching TypeScript
-declarations. Its CSS requires a CSS-aware bundler rather than bare Node.js.
-Test your chosen components in your framework; compatibility is still being
-evaluated.
+Install the UI library and theme package in your application's directory. Choose your package manager below:
 
-## Development
+npm:
 
-From an installed repository checkout:
+```bash
+npm install @puzzle-ui/ui --save
+```
+
+bun:
 
-```sh
-npm run build --workspace=@puzzle-ui/ui
+```bash
+bun add @puzzle-ui/create
 ```
 
-`prepack` rebuilds the package before packing or publishing. See the root
-[publishing guide](../../README.md#publishing-packages).
+pnpm:
 
-## Tests
+```bash
+pnpm add @puzzle-ui/ui
+```
 
-Three layers, selected by file name and run by Vitest projects (see `vitest.config.ts`):
+yarn:
 
-| Layer     | File pattern          | Environment      | Script                   |
-| --------- | --------------------- | ---------------- | ------------------------ |
-| Unit      | `*.unit.test.ts`      | Node, no DOM     | `bun run test:unit`      |
-| Component | `*.test.tsx` / `.ts`  | jsdom            | `bun run test:component` |
-| Browser   | `*.browser.test.tsx`  | Chromium (Playwright) | `bun run test:browser` |
+```bash
+yarn add @puzzle-ui/ui
+```
 
-- **Unit**: pure logic (utilities, normalizers).
-- **Component**: rendering, ARIA and interaction with Testing Library.
-- **Browser**: behavior that needs real layout, computed styles, focus or pointer input.
+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.
 
-`bun run vitest` runs unit and component; `bun run test:all` runs everything. The first browser run needs `bunx playwright install chromium`.
+## Your first interface
 
-Run these test commands from this package directory in a repository
-checkout, after installing workspace dependencies.
+Import components from `"@puzzle-ui/ui` and wrap your application in `Theme` from `"@puzzle-ui/theme`:
 
-## License
+```tsx
+import { Theme } from "@puzzle-ui/theme";
+import { Button } from "@puzzle-ui/ui";
 
-MIT. See [LICENSE](../../LICENSE); the published license is at `dist/LICENSE`.
+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>
+);
+```

package/dist/components/actions/button/button.css

@@ -44,7 +44,7 @@
 }
 
 .puzzle-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
-  filter: brightness(.93);
+  background: color-mix(in srgb, var(--puzzle-color-primary) 88%, var(--puzzle-color-text));
 }
 
 .puzzle-button--secondary {
@@ -53,7 +53,7 @@
 }
 
 .puzzle-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
-  filter: brightness(.96);
+  background: color-mix(in srgb, var(--puzzle-color-surface-sunken) 85%, var(--puzzle-color-text));
 }
 
 .puzzle-button--outline {
@@ -160,7 +160,10 @@
 }
 
 .puzzle-button__content {
+  gap: var(--puzzle-button-gap, var(--puzzle-space-2, .5rem));
+  flex-direction: row;
   flex: 0 auto;
+  display: inline-flex;
 }
 
 .puzzle-button__leading, .puzzle-button__trailing, .puzzle-button__spinner {

package/dist/components/actions/button-group/button-group.css

@@ -24,41 +24,40 @@
 }
 
 .puzzle-button-group--attached {
+  --puzzle-button-group-divider-color: var(--puzzle-color-border);
+  isolation: isolate;
   gap: 0;
 }
 
-.puzzle-button-group--attached > :not(:first-child) {
-  margin-inline-start: -1px;
-}
-
-.puzzle-button-group--horizontal .puzzle-button-group--attached {
-  border-radius: inherit;
+.puzzle-button-group--attached > :is(:hover, :focus-visible) {
+  z-index: 1;
+  position: relative;
 }
 
-.puzzle-button-group--attached > :not(:first-child):not(:last-child) {
-  border-radius: 0;
+.puzzle-button-group--horizontal.puzzle-button-group--attached > :not(:first-child) {
+  border-inline-start: 1px solid var(--puzzle-button-group-divider-color);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  margin-inline-start: -1px;
 }
 
-.puzzle-button-group--horizontal .puzzle-button-group--attached > :first-child {
+.puzzle-button-group--horizontal.puzzle-button-group--attached > :not(:last-child) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 
-.puzzle-button-group--horizontal .puzzle-button-group--attached > :last-child {
+.puzzle-button-group--vertical.puzzle-button-group--attached > :not(:first-child) {
+  border-block-start: 1px solid var(--puzzle-button-group-divider-color);
   border-start-start-radius: 0;
-  border-end-start-radius: 0;
+  border-start-end-radius: 0;
+  margin-block-start: -1px;
 }
 
-.puzzle-button-group--vertical .puzzle-button-group--attached > :first-child {
+.puzzle-button-group--vertical.puzzle-button-group--attached > :not(:last-child) {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
 }
 
-.puzzle-button-group--vertical .puzzle-button-group--attached > :last-child {
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
-}
-
 .puzzle-button-group--disabled {
   cursor: not-allowed;
 }

package/dist/components/data-display/badge/badge.css

@@ -1,22 +1,30 @@
 .puzzle-badge {
+  justify-content: center;
+  align-items: center;
   display: inline-flex;
   position: relative;
 }
 
 .puzzle-badge > .puzzle-badge-indicator {
-  aspect-ratio: 1;
+  box-sizing: border-box;
+  padding: var(--puzzle-space-1) var(--puzzle-space-2);
   border-radius: var(--puzzle-radius-full, 50%);
   font-weight: var(--puzzle-font-weight-normal, 400);
   line-height: var(--puzzle-font-line-height-none, 1);
   text-align: center;
+  white-space: nowrap;
   vertical-align: middle;
   justify-content: center;
   align-items: center;
-  padding: .25em;
   display: inline-flex;
   position: absolute;
 }
 
+.puzzle-badge > .puzzle-badge-indicator--single {
+  padding-inline: var(--puzzle-space-1);
+  aspect-ratio: 1;
+}
+
 .puzzle-badge-primary > .puzzle-badge-indicator {
   background-color: var(--puzzle-color-primary);
   color: var(--puzzle-color-primary-foreground);
@@ -89,3 +97,8 @@
   left: 85.3553%;
   transform: translate(-50%, -50%);
 }
+
+.puzzle-badge.puzzle-badge-standalone > .puzzle-badge-indicator {
+  position: static;
+  transform: none;
+}

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

@@ -6,19 +6,30 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const Badge = ({ content, size = 20, color = "primary", anchorOrigin = {
 	vertical: "top",
 	horizontal: "right"
+}, anchorOffset = {
+	vertical: 0,
+	horizontal: 0
 }, anchorOverlap = "rectangular", className, children }) => {
+	if (!Number.isFinite(anchorOffset.vertical) || !Number.isFinite(anchorOffset.horizontal)) throw new TypeError("Badge anchorOffset values must be finite numbers.");
 	const resolvedSize = Math.max(size, 16);
 	const isHex = (0, _puzzle_ui_core.isHexColor)(color);
 	const isDark = isHex ? (0, _puzzle_ui_core.isDarkColor)(color) : false;
-	const classes = (0, _puzzle_ui_core.cn)("puzzle-badge", anchorOrigin.vertical, anchorOrigin.horizontal, anchorOverlap, !isHex && `puzzle-badge-${color}`, className);
+	const textContent = typeof content === "string" || typeof content === "number" ? String(content).trim() : null;
+	const isSingleCharacter = textContent != null && Array.from(textContent).length === 1;
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-badge", children != null && [
+		anchorOrigin.vertical,
+		anchorOrigin.horizontal,
+		anchorOverlap
+	], children == null && "puzzle-badge-standalone", !isHex && `puzzle-badge-${color}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: classes,
 		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "puzzle-badge-indicator",
+			className: (0, _puzzle_ui_core.cn)("puzzle-badge-indicator", isSingleCharacter && "puzzle-badge-indicator--single"),
 			style: {
 				fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,
 				minHeight: `${resolvedSize}px`,
 				minWidth: `${resolvedSize}px`,
+				translate: children != null ? `${anchorOffset.horizontal * (anchorOrigin.horizontal === "left" ? 1 : -1)}px ${anchorOffset.vertical * (anchorOrigin.vertical === "top" ? 1 : -1)}px` : void 0,
 				backgroundColor: isHex ? color : void 0,
 				color: isHex ? isDark ? "var(--puzzle-color-light-foreground)" : "var(--puzzle-color-dark-foreground)" : void 0
 			},

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 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  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  anchorOverlap = \"rectangular\",\n  className,\n  children,\n}: BadgeProps) => {\n  const resolvedSize = Math.max(size, 16);\n  const isHex = isHexColor(color);\n  const isDark = isHex ? isDarkColor(color) : false;\n\n  const classes = cn(\n    \"puzzle-badge\",\n    anchorOrigin.vertical,\n    anchorOrigin.horizontal,\n    anchorOverlap,\n    !isHex && `puzzle-badge-${color}`,\n    className,\n  );\n\n  return (\n    <div className={classes}>\n      {children}\n      <span\n        className=\"puzzle-badge-indicator\"\n        style={{\n          fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,\n          minHeight: `${resolvedSize}px`,\n          minWidth: `${resolvedSize}px`,\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 AnchorOverlap,\n};\n"],"mappings":";;;;;AA4BA,MAAM,SAAS,EACb,SACA,OAAO,IACP,QAAQ,WACR,eAAe;CAAE,UAAU;CAAO,YAAY;AAAQ,GACtD,gBAAgB,eAChB,WACA,eACgB;CAChB,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,WAAA,GAAUC,gBAAAA,GAAAA,CACd,gBACA,aAAa,UACb,aAAa,YACb,eACA,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,WAAU;GACV,OAAO;IACL,UAAU,sBAAsB,aAAa;IAC7C,WAAW,GAAG,aAAa;IAC3B,UAAU,GAAG,aAAa;IAC1B,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  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"}

package/dist/components/data-display/badge/index.d.cts

@@ -3,6 +3,10 @@ type AnchorOrigin = {
   vertical: "top" | "bottom";
   horizontal: "left" | "right";
 };
+type AnchorOffset = {
+  vertical: number;
+  horizontal: number;
+};
 type AnchorOverlap = "rectangular" | "circular";
 type BadgeColor = "primary" | "secondary" | "accent" | "danger" | "info" | `#${string}`;
 type BadgeProps = {
@@ -10,9 +14,10 @@ type BadgeProps = {
   size?: number;
   color?: BadgeColor;
   anchorOrigin?: AnchorOrigin;
+  anchorOffset?: AnchorOffset;
   anchorOverlap?: AnchorOverlap;
   className?: string;
   children?: ReactNode;
 };
-declare const Badge: ({ content, size, color, anchorOrigin, anchorOverlap, className, children }: BadgeProps) => import("react").JSX.Element;
-export { type AnchorOrigin, type AnchorOverlap, Badge, type BadgeColor, type BadgeProps };
+declare const Badge: ({ content, size, color, anchorOrigin, anchorOffset, anchorOverlap, className, children }: BadgeProps) => import("react").JSX.Element;
+export { type AnchorOffset, type AnchorOrigin, type AnchorOverlap, Badge, type BadgeColor, type BadgeProps };

package/dist/components/data-display/badge/index.d.ts

@@ -3,6 +3,10 @@ type AnchorOrigin = {
   vertical: "top" | "bottom";
   horizontal: "left" | "right";
 };
+type AnchorOffset = {
+  vertical: number;
+  horizontal: number;
+};
 type AnchorOverlap = "rectangular" | "circular";
 type BadgeColor = "primary" | "secondary" | "accent" | "danger" | "info" | `#${string}`;
 type BadgeProps = {
@@ -10,9 +14,10 @@ type BadgeProps = {
   size?: number;
   color?: BadgeColor;
   anchorOrigin?: AnchorOrigin;
+  anchorOffset?: AnchorOffset;
   anchorOverlap?: AnchorOverlap;
   className?: string;
   children?: ReactNode;
 };
-declare const Badge: ({ content, size, color, anchorOrigin, anchorOverlap, className, children }: BadgeProps) => import("react").JSX.Element;
-export { type AnchorOrigin, type AnchorOverlap, Badge, type BadgeColor, type BadgeProps };
+declare const Badge: ({ content, size, color, anchorOrigin, anchorOffset, anchorOverlap, className, children }: BadgeProps) => import("react").JSX.Element;
+export { type AnchorOffset, type AnchorOrigin, type AnchorOverlap, Badge, type BadgeColor, type BadgeProps };

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

@@ -6,19 +6,30 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const Badge = ({ content, size = 20, color = "primary", anchorOrigin = {
 	vertical: "top",
 	horizontal: "right"
+}, anchorOffset = {
+	vertical: 0,
+	horizontal: 0
 }, anchorOverlap = "rectangular", className, children }) => {
+	if (!Number.isFinite(anchorOffset.vertical) || !Number.isFinite(anchorOffset.horizontal)) throw new TypeError("Badge anchorOffset values must be finite numbers.");
 	const resolvedSize = Math.max(size, 16);
 	const isHex = isHexColor(color);
 	const isDark = isHex ? isDarkColor(color) : false;
-	const classes = cn("puzzle-badge", anchorOrigin.vertical, anchorOrigin.horizontal, anchorOverlap, !isHex && `puzzle-badge-${color}`, className);
+	const textContent = typeof content === "string" || typeof content === "number" ? String(content).trim() : null;
+	const isSingleCharacter = textContent != null && Array.from(textContent).length === 1;
+	const classes = cn("puzzle-badge", children != null && [
+		anchorOrigin.vertical,
+		anchorOrigin.horizontal,
+		anchorOverlap
+	], children == null && "puzzle-badge-standalone", !isHex && `puzzle-badge-${color}`, className);
 	return /* @__PURE__ */ jsxs("div", {
 		className: classes,
 		children: [children, /* @__PURE__ */ jsx("span", {
-			className: "puzzle-badge-indicator",
+			className: cn("puzzle-badge-indicator", isSingleCharacter && "puzzle-badge-indicator--single"),
 			style: {
 				fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,
 				minHeight: `${resolvedSize}px`,
 				minWidth: `${resolvedSize}px`,
+				translate: children != null ? `${anchorOffset.horizontal * (anchorOrigin.horizontal === "left" ? 1 : -1)}px ${anchorOffset.vertical * (anchorOrigin.vertical === "top" ? 1 : -1)}px` : void 0,
 				backgroundColor: isHex ? color : void 0,
 				color: isHex ? isDark ? "var(--puzzle-color-light-foreground)" : "var(--puzzle-color-dark-foreground)" : void 0
 			},

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 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  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  anchorOverlap = \"rectangular\",\n  className,\n  children,\n}: BadgeProps) => {\n  const resolvedSize = Math.max(size, 16);\n  const isHex = isHexColor(color);\n  const isDark = isHex ? isDarkColor(color) : false;\n\n  const classes = cn(\n    \"puzzle-badge\",\n    anchorOrigin.vertical,\n    anchorOrigin.horizontal,\n    anchorOverlap,\n    !isHex && `puzzle-badge-${color}`,\n    className,\n  );\n\n  return (\n    <div className={classes}>\n      {children}\n      <span\n        className=\"puzzle-badge-indicator\"\n        style={{\n          fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,\n          minHeight: `${resolvedSize}px`,\n          minWidth: `${resolvedSize}px`,\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 AnchorOverlap,\n};\n"],"mappings":";;;;;AA4BA,MAAM,SAAS,EACb,SACA,OAAO,IACP,QAAQ,WACR,eAAe;CAAE,UAAU;CAAO,YAAY;AAAQ,GACtD,gBAAgB,eAChB,WACA,eACgB;CAChB,MAAM,eAAe,KAAK,IAAI,MAAM,EAAE;CACtC,MAAM,QAAQ,WAAW,KAAK;CAC9B,MAAM,SAAS,QAAQ,YAAY,KAAK,IAAI;CAE5C,MAAM,UAAU,GACd,gBACA,aAAa,UACb,aAAa,YACb,eACA,CAAC,SAAS,gBAAgB,SAC1B,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACG,UACD,oBAAC,QAAD;GACE,WAAU;GACV,OAAO;IACL,UAAU,sBAAsB,aAAa;IAC7C,WAAW,GAAG,aAAa;IAC3B,UAAU,GAAG,aAAa;IAC1B,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  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"}

package/dist/components/data-display/empty-state/empty-state.css

@@ -0,0 +1,128 @@
+.puzzle-empty-state {
+  --empty-state-padding: var(--puzzle-space-6, 1.5rem);
+  --empty-state-gap: var(--puzzle-space-3, .75rem);
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  gap: var(--empty-state-gap);
+  width: 100%;
+  min-width: 0;
+  padding: var(--empty-state-padding);
+  color: var(--puzzle-color-text);
+  font-family: var(--puzzle-font-family-body, inherit);
+  text-align: center;
+  border-radius: var(--puzzle-radius-lg, .75rem);
+  border: 1px solid #0000;
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-empty-state--sm {
+  --empty-state-padding: var(--puzzle-space-4, 1rem);
+  --empty-state-gap: var(--puzzle-space-2, .5rem);
+}
+
+.puzzle-empty-state--md {
+  --empty-state-padding: var(--puzzle-space-6, 1.5rem);
+  --empty-state-gap: var(--puzzle-space-3, .75rem);
+}
+
+.puzzle-empty-state--lg {
+  --empty-state-padding: var(--puzzle-space-8, 2rem);
+  --empty-state-gap: var(--puzzle-space-4, 1rem);
+  border-radius: var(--puzzle-radius-xl, 1rem);
+}
+
+.puzzle-empty-state--default {
+  background: none;
+}
+
+.puzzle-empty-state--outlined {
+  border-style: dashed;
+  border-color: var(--puzzle-color-border);
+}
+
+.puzzle-empty-state--filled {
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-empty-state__header {
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-empty-state__media {
+  color: var(--puzzle-color-text-muted);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.puzzle-empty-state__media--icon {
+  border-radius: var(--puzzle-radius-lg, .75rem);
+  background: var(--puzzle-color-surface-sunken);
+  width: 3rem;
+  height: 3rem;
+  color: var(--puzzle-color-text-muted);
+}
+
+.puzzle-empty-state--lg .puzzle-empty-state__media--icon {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+
+.puzzle-empty-state__media > svg {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: block;
+}
+
+.puzzle-empty-state__title {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-lg, 1.125rem);
+  font-weight: var(--puzzle-font-weight-semibold, 600);
+  line-height: var(--puzzle-font-line-height-tight, 1.25);
+  margin: 0;
+}
+
+.puzzle-empty-state--sm .puzzle-empty-state__title {
+  font-size: var(--puzzle-font-size-base, 1rem);
+}
+
+.puzzle-empty-state--lg .puzzle-empty-state__title {
+  font-size: var(--puzzle-font-size-lg, 1.125rem);
+}
+
+.puzzle-empty-state__description {
+  max-width: 36rem;
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  margin: 0;
+}
+
+.puzzle-empty-state__content {
+  justify-content: center;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  flex-wrap: wrap;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+}
+
+@media (width <= 30rem) {
+  .puzzle-empty-state__content {
+    flex-direction: column;
+  }
+
+  .puzzle-empty-state__content > * {
+    max-width: 100%;
+  }
+}

package/dist/components/data-display/empty-state/empty-state.utils.cjs

@@ -0,0 +1,6 @@
+let _puzzle_ui_core = require("@puzzle-ui/core");
+// src/components/data-display/empty-state/empty-state.utils.ts
+const getEmptyStateClasses = (size, variant, className) => (0, _puzzle_ui_core.cn)("puzzle-empty-state", `puzzle-empty-state--${size}`, `puzzle-empty-state--${variant}`, className);
+exports.getEmptyStateClasses = getEmptyStateClasses;
+
+//# sourceMappingURL=empty-state.utils.cjs.map

package/dist/components/data-display/empty-state/empty-state.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.utils.cjs","names":["cn"],"sources":["../../../../src/components/data-display/empty-state/empty-state.utils.ts"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\n\ntype EmptyStateSize = \"sm\" | \"md\" | \"lg\";\ntype EmptyStateVariant = \"default\" | \"outlined\" | \"filled\";\n\nconst getEmptyStateClasses = (\n  size: EmptyStateSize,\n  variant: EmptyStateVariant,\n  className?: string,\n) =>\n  cn(\n    \"puzzle-empty-state\",\n    `puzzle-empty-state--${size}`,\n    `puzzle-empty-state--${variant}`,\n    className,\n  );\n\nexport { getEmptyStateClasses };\n"],"mappings":";;AAKA,MAAM,wBACJ,MACA,SACA,eAAA,GAEAA,gBAAAA,GAAAA,CACE,sBACA,uBAAuB,QACvB,uBAAuB,WACvB,SACF"}

package/dist/components/data-display/empty-state/empty-state.utils.js

@@ -0,0 +1,6 @@
+import { cn } from "@puzzle-ui/core";
+// src/components/data-display/empty-state/empty-state.utils.ts
+const getEmptyStateClasses = (size, variant, className) => cn("puzzle-empty-state", `puzzle-empty-state--${size}`, `puzzle-empty-state--${variant}`, className);
+export { getEmptyStateClasses };
+
+//# sourceMappingURL=empty-state.utils.js.map

package/dist/components/data-display/empty-state/empty-state.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.utils.js","names":[],"sources":["../../../../src/components/data-display/empty-state/empty-state.utils.ts"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\n\ntype EmptyStateSize = \"sm\" | \"md\" | \"lg\";\ntype EmptyStateVariant = \"default\" | \"outlined\" | \"filled\";\n\nconst getEmptyStateClasses = (\n  size: EmptyStateSize,\n  variant: EmptyStateVariant,\n  className?: string,\n) =>\n  cn(\n    \"puzzle-empty-state\",\n    `puzzle-empty-state--${size}`,\n    `puzzle-empty-state--${variant}`,\n    className,\n  );\n\nexport { getEmptyStateClasses };\n"],"mappings":";;AAKA,MAAM,wBACJ,MACA,SACA,cAEA,GACE,sBACA,uBAAuB,QACvB,uBAAuB,WACvB,SACF"}