@puzzle-ui/ui 0.4.0 → 0.5.0

package/README.md

@@ -1,7 +1,6 @@
----
-title: Getting Started
-description: Install Puzzle in your React app, build your first interface, and customize the theme.
----
+# Getting Started
+
+Install Puzzle in your React app, build your first interface, and customize the theme.
 
 > \[!WARNING\] **Puzzle is not ready for production use.**
 >

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/rating/index.cjs

@@ -0,0 +1,84 @@
+"use client";
+const require_rating_utils = require("./rating.utils.cjs");
+;/* empty css             */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _puzzle_ui_icons = require("@puzzle-ui/icons");
+// src/components/data-display/rating/index.tsx
+const ICONS = {
+	full: "ph:star-fill",
+	half: "ph:star-half-fill",
+	empty: "ph:star"
+};
+const SIZE_MAP = {
+	sm: 16,
+	md: 20,
+	lg: 24
+};
+const Rating = ({ value, defaultValue = 0, onValueChange, max = 5, precision = .5, size = "md", readOnly = false, disabled = false, color = "var(--puzzle-color-warning, #FABC0A)", emptyColor = "var(--puzzle-color-border)", className, style, "aria-label": ariaLabel = "Rating", onKeyDown, ...props }) => {
+	if (!Number.isInteger(max) || max < 1 || max > 10) throw new Error("Rating max must be an integer between 1 and 10.");
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = (0, react.useState)(() => require_rating_utils.normalizeRating(defaultValue, max, precision));
+	const currentValue = require_rating_utils.normalizeRating(isControlled ? value : internalValue, max, precision);
+	const commitValue = (nextValue) => {
+		if (disabled || readOnly) return;
+		const next = require_rating_utils.normalizeRating(nextValue, max, precision);
+		if (next === currentValue) return;
+		if (!isControlled) setInternalValue(next);
+		onValueChange?.(next);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled || readOnly) return;
+		const nextValue = require_rating_utils.getNextRating(currentValue, event.key, max, precision);
+		if (nextValue === void 0) return;
+		event.preventDefault();
+		commitValue(nextValue);
+	};
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-rating", disabled && "puzzle-rating-disabled", readOnly && "puzzle-rating-readonly", className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: classes,
+		style: {
+			...style,
+			"--puzzle-rating-color": color,
+			"--puzzle-rating-empty-color": emptyColor
+		},
+		role: readOnly ? "img" : "slider",
+		tabIndex: disabled || readOnly ? void 0 : 0,
+		"aria-label": readOnly ? `${ariaLabel}: ${currentValue} out of ${max} stars` : ariaLabel,
+		"aria-valuemin": readOnly ? void 0 : 0,
+		"aria-valuemax": readOnly ? void 0 : max,
+		"aria-valuenow": readOnly ? void 0 : currentValue,
+		"aria-valuetext": readOnly ? void 0 : `${currentValue} out of ${max} stars`,
+		"aria-disabled": disabled || void 0,
+		"aria-readonly": readOnly || void 0,
+		onKeyDown: handleKeyDown,
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-readonly": readOnly || void 0,
+		children: Array.from({ length: max }, (_, index) => {
+			const state = require_rating_utils.getRatingStarState(currentValue, index);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-rating__star",
+				"data-state": state,
+				"aria-hidden": "true",
+				onClick: (event) => {
+					const rect = event.currentTarget.getBoundingClientRect();
+					const isHalf = precision === .5 && event.clientX < rect.left + rect.width / 2;
+					commitValue(index + (isHalf ? .5 : 1));
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+					name: ICONS[state],
+					size: SIZE_MAP[size],
+					"aria-hidden": "true",
+					focusable: "false"
+				})
+			}, index);
+		})
+	});
+};
+exports.Rating = Rating;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/data-display/rating/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useState","normalizeRating","getNextRating","cn","getRatingStarState","Icon"],"sources":["../../../../src/components/data-display/rating/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type CSSProperties, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Icon } from \"@puzzle-ui/icons\";\n\nimport type { RatingProps, RatingSize } from \"./rating.types\";\n\nimport {\n  getNextRating,\n  getRatingStarState,\n  normalizeRating,\n} from \"./rating.utils\";\n\nimport \"./rating.css\";\n\nconst ICONS = {\n  full: \"ph:star-fill\",\n  half: \"ph:star-half-fill\",\n  empty: \"ph:star\",\n} as const;\n\nconst SIZE_MAP = {\n  sm: 16,\n  md: 20,\n  lg: 24,\n} as const;\n\nconst Rating = ({\n  value,\n  defaultValue = 0,\n  onValueChange,\n  max = 5,\n  precision = 0.5,\n  size = \"md\",\n  readOnly = false,\n  disabled = false,\n  color = \"var(--puzzle-color-warning, #FABC0A)\",\n  emptyColor = \"var(--puzzle-color-border)\",\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Rating\",\n  onKeyDown,\n  ...props\n}: RatingProps) => {\n  if (!Number.isInteger(max) || max < 1 || max > 10) {\n    throw new Error(\"Rating max must be an integer between 1 and 10.\");\n  }\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    normalizeRating(defaultValue, max, precision),\n  );\n\n  const currentValue = normalizeRating(\n    isControlled ? value : internalValue,\n    max,\n    precision,\n  );\n\n  const commitValue = (nextValue: number) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    const next = normalizeRating(nextValue, max, precision);\n\n    if (next === currentValue) {\n      return;\n    }\n\n    if (!isControlled) {\n      setInternalValue(next);\n    }\n\n    onValueChange?.(next);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled || readOnly) {\n      return;\n    }\n\n    const nextValue = getNextRating(currentValue, event.key, max, precision);\n\n    if (nextValue === undefined) {\n      return;\n    }\n\n    event.preventDefault();\n    commitValue(nextValue);\n  };\n\n  const classes = cn(\n    \"puzzle-rating\",\n    disabled && \"puzzle-rating-disabled\",\n    readOnly && \"puzzle-rating-readonly\",\n    className,\n  );\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      style={\n        {\n          ...style,\n          \"--puzzle-rating-color\": color,\n          \"--puzzle-rating-empty-color\": emptyColor,\n        } as CSSProperties\n      }\n      role={readOnly ? \"img\" : \"slider\"}\n      tabIndex={disabled || readOnly ? undefined : 0}\n      aria-label={\n        readOnly\n          ? `${ariaLabel}: ${currentValue} out of ${max} stars`\n          : ariaLabel\n      }\n      aria-valuemin={readOnly ? undefined : 0}\n      aria-valuemax={readOnly ? undefined : max}\n      aria-valuenow={readOnly ? undefined : currentValue}\n      aria-valuetext={\n        readOnly ? undefined : `${currentValue} out of ${max} stars`\n      }\n      aria-disabled={disabled || undefined}\n      aria-readonly={readOnly || undefined}\n      onKeyDown={handleKeyDown}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n    >\n      {Array.from({ length: max }, (_, index) => {\n        const state = getRatingStarState(currentValue, index);\n\n        return (\n          <span\n            key={index}\n            className=\"puzzle-rating__star\"\n            data-state={state}\n            aria-hidden=\"true\"\n            onClick={(event) => {\n              const rect = event.currentTarget.getBoundingClientRect();\n\n              const isHalf =\n                precision === 0.5 && event.clientX < rect.left + rect.width / 2;\n\n              commitValue(index + (isHalf ? 0.5 : 1));\n            }}\n          >\n            <Icon\n              name={ICONS[state]}\n              size={SIZE_MAP[size]}\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            />\n          </span>\n        );\n      })}\n    </div>\n  );\n};\n\nexport { Rating, type RatingProps, type RatingSize };\n"],"mappings":";;;;;;;;AAiBA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;CACN,OAAO;AACT;AAEA,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,UAAU,EACd,OACA,eAAe,GACf,eACA,MAAM,GACN,YAAY,IACZ,OAAO,MACP,WAAW,OACX,WAAW,OACX,QAAQ,wCACR,aAAa,8BACb,WACA,OACA,cAAc,YAAY,UAC1B,WACA,GAAG,YACc;CACjB,IAAI,CAAC,OAAO,UAAU,GAAG,KAAK,MAAM,KAAK,MAAM,IAC7C,MAAM,IAAI,MAAM,iDAAiD;CAGnE,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,qBAAA,GAAoBA,MAAAA,SAAAA,OACxCC,qBAAAA,gBAAgB,cAAc,KAAK,SAAS,CAC9C;CAEA,MAAM,eAAeA,qBAAAA,gBACnB,eAAe,QAAQ,eACvB,KACA,SACF;CAEA,MAAM,eAAe,cAAsB;EACzC,IAAI,YAAY,UACd;EAGF,MAAM,OAAOA,qBAAAA,gBAAgB,WAAW,KAAK,SAAS;EAEtD,IAAI,SAAS,cACX;EAGF,IAAI,CAAC,cACH,iBAAiB,IAAI;EAGvB,gBAAgB,IAAI;CACtB;CAEA,MAAM,iBAAiB,UAAyC;EAC9D,YAAY,KAAK;EAEjB,IAAI,MAAM,oBAAoB,YAAY,UACxC;EAGF,MAAM,YAAYC,qBAAAA,cAAc,cAAc,MAAM,KAAK,KAAK,SAAS;EAEvE,IAAI,cAAc,KAAA,GAChB;EAGF,MAAM,eAAe;EACrB,YAAY,SAAS;CACvB;CAEA,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CACd,iBACA,YAAY,0BACZ,YAAY,0BACZ,SACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACJ,WAAW;EACX,OACE;GACE,GAAG;GACH,yBAAyB;GACzB,+BAA+B;EACjC;EAEF,MAAM,WAAW,QAAQ;EACzB,UAAU,YAAY,WAAW,KAAA,IAAY;EAC7C,cACE,WACI,GAAG,UAAU,IAAI,aAAa,UAAU,IAAI,UAC5C;EAEN,iBAAe,WAAW,KAAA,IAAY;EACtC,iBAAe,WAAW,KAAA,IAAY;EACtC,iBAAe,WAAW,KAAA,IAAY;EACtC,kBACE,WAAW,KAAA,IAAY,GAAG,aAAa,UAAU,IAAI;EAEvD,iBAAe,YAAY,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAC3B,WAAW;EACX,aAAW;EACX,iBAAe,YAAY,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAE1B,UAAA,MAAM,KAAK,EAAE,QAAQ,IAAI,IAAI,GAAG,UAAU;GACzC,MAAM,QAAQC,qBAAAA,mBAAmB,cAAc,KAAK;GAEpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAEE,WAAU;IACV,cAAY;IACZ,eAAY;IACZ,UAAU,UAAU;KAClB,MAAM,OAAO,MAAM,cAAc,sBAAsB;KAEvD,MAAM,SACJ,cAAc,MAAO,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;KAEhE,YAAY,SAAS,SAAS,KAAM,EAAE;IACxC;IAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,MAAD;KACE,MAAM,MAAM;KACZ,MAAM,SAAS;KACf,eAAY;KACZ,WAAU;IACX,CAAA;GACG,GAnBC,KAmBD;EAEV,CAAC;CACE,CAAA;AAET"}

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

@@ -0,0 +1,3 @@
+import { RatingProps, RatingSize } from "./rating.types.cjs";
+declare const Rating: ({ value, defaultValue, onValueChange, max, precision, size, readOnly, disabled, color, emptyColor, className, style, "aria-label": ariaLabel, onKeyDown, ...props }: RatingProps) => import("react").JSX.Element;
+export { Rating, type RatingProps, type RatingSize };

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

@@ -0,0 +1,3 @@
+import { RatingProps, RatingSize } from "./rating.types.js";
+declare const Rating: ({ value, defaultValue, onValueChange, max, precision, size, readOnly, disabled, color, emptyColor, className, style, "aria-label": ariaLabel, onKeyDown, ...props }: RatingProps) => import("react").JSX.Element;
+export { Rating, type RatingProps, type RatingSize };

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

@@ -0,0 +1,84 @@
+"use client";
+import { getNextRating, getRatingStarState, normalizeRating } from "./rating.utils.js";
+import "./rating.css";
+import { cn } from "@puzzle-ui/core";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "@puzzle-ui/icons";
+// src/components/data-display/rating/index.tsx
+const ICONS = {
+	full: "ph:star-fill",
+	half: "ph:star-half-fill",
+	empty: "ph:star"
+};
+const SIZE_MAP = {
+	sm: 16,
+	md: 20,
+	lg: 24
+};
+const Rating = ({ value, defaultValue = 0, onValueChange, max = 5, precision = .5, size = "md", readOnly = false, disabled = false, color = "var(--puzzle-color-warning, #FABC0A)", emptyColor = "var(--puzzle-color-border)", className, style, "aria-label": ariaLabel = "Rating", onKeyDown, ...props }) => {
+	if (!Number.isInteger(max) || max < 1 || max > 10) throw new Error("Rating max must be an integer between 1 and 10.");
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(() => normalizeRating(defaultValue, max, precision));
+	const currentValue = normalizeRating(isControlled ? value : internalValue, max, precision);
+	const commitValue = (nextValue) => {
+		if (disabled || readOnly) return;
+		const next = normalizeRating(nextValue, max, precision);
+		if (next === currentValue) return;
+		if (!isControlled) setInternalValue(next);
+		onValueChange?.(next);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled || readOnly) return;
+		const nextValue = getNextRating(currentValue, event.key, max, precision);
+		if (nextValue === void 0) return;
+		event.preventDefault();
+		commitValue(nextValue);
+	};
+	const classes = cn("puzzle-rating", disabled && "puzzle-rating-disabled", readOnly && "puzzle-rating-readonly", className);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: classes,
+		style: {
+			...style,
+			"--puzzle-rating-color": color,
+			"--puzzle-rating-empty-color": emptyColor
+		},
+		role: readOnly ? "img" : "slider",
+		tabIndex: disabled || readOnly ? void 0 : 0,
+		"aria-label": readOnly ? `${ariaLabel}: ${currentValue} out of ${max} stars` : ariaLabel,
+		"aria-valuemin": readOnly ? void 0 : 0,
+		"aria-valuemax": readOnly ? void 0 : max,
+		"aria-valuenow": readOnly ? void 0 : currentValue,
+		"aria-valuetext": readOnly ? void 0 : `${currentValue} out of ${max} stars`,
+		"aria-disabled": disabled || void 0,
+		"aria-readonly": readOnly || void 0,
+		onKeyDown: handleKeyDown,
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-readonly": readOnly || void 0,
+		children: Array.from({ length: max }, (_, index) => {
+			const state = getRatingStarState(currentValue, index);
+			return /* @__PURE__ */ jsx("span", {
+				className: "puzzle-rating__star",
+				"data-state": state,
+				"aria-hidden": "true",
+				onClick: (event) => {
+					const rect = event.currentTarget.getBoundingClientRect();
+					const isHalf = precision === .5 && event.clientX < rect.left + rect.width / 2;
+					commitValue(index + (isHalf ? .5 : 1));
+				},
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: ICONS[state],
+					size: SIZE_MAP[size],
+					"aria-hidden": "true",
+					focusable: "false"
+				})
+			}, index);
+		})
+	});
+};
+export { Rating };
+
+//# sourceMappingURL=index.js.map

package/dist/components/data-display/rating/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/data-display/rating/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type CSSProperties, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Icon } from \"@puzzle-ui/icons\";\n\nimport type { RatingProps, RatingSize } from \"./rating.types\";\n\nimport {\n  getNextRating,\n  getRatingStarState,\n  normalizeRating,\n} from \"./rating.utils\";\n\nimport \"./rating.css\";\n\nconst ICONS = {\n  full: \"ph:star-fill\",\n  half: \"ph:star-half-fill\",\n  empty: \"ph:star\",\n} as const;\n\nconst SIZE_MAP = {\n  sm: 16,\n  md: 20,\n  lg: 24,\n} as const;\n\nconst Rating = ({\n  value,\n  defaultValue = 0,\n  onValueChange,\n  max = 5,\n  precision = 0.5,\n  size = \"md\",\n  readOnly = false,\n  disabled = false,\n  color = \"var(--puzzle-color-warning, #FABC0A)\",\n  emptyColor = \"var(--puzzle-color-border)\",\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Rating\",\n  onKeyDown,\n  ...props\n}: RatingProps) => {\n  if (!Number.isInteger(max) || max < 1 || max > 10) {\n    throw new Error(\"Rating max must be an integer between 1 and 10.\");\n  }\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    normalizeRating(defaultValue, max, precision),\n  );\n\n  const currentValue = normalizeRating(\n    isControlled ? value : internalValue,\n    max,\n    precision,\n  );\n\n  const commitValue = (nextValue: number) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    const next = normalizeRating(nextValue, max, precision);\n\n    if (next === currentValue) {\n      return;\n    }\n\n    if (!isControlled) {\n      setInternalValue(next);\n    }\n\n    onValueChange?.(next);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled || readOnly) {\n      return;\n    }\n\n    const nextValue = getNextRating(currentValue, event.key, max, precision);\n\n    if (nextValue === undefined) {\n      return;\n    }\n\n    event.preventDefault();\n    commitValue(nextValue);\n  };\n\n  const classes = cn(\n    \"puzzle-rating\",\n    disabled && \"puzzle-rating-disabled\",\n    readOnly && \"puzzle-rating-readonly\",\n    className,\n  );\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      style={\n        {\n          ...style,\n          \"--puzzle-rating-color\": color,\n          \"--puzzle-rating-empty-color\": emptyColor,\n        } as CSSProperties\n      }\n      role={readOnly ? \"img\" : \"slider\"}\n      tabIndex={disabled || readOnly ? undefined : 0}\n      aria-label={\n        readOnly\n          ? `${ariaLabel}: ${currentValue} out of ${max} stars`\n          : ariaLabel\n      }\n      aria-valuemin={readOnly ? undefined : 0}\n      aria-valuemax={readOnly ? undefined : max}\n      aria-valuenow={readOnly ? undefined : currentValue}\n      aria-valuetext={\n        readOnly ? undefined : `${currentValue} out of ${max} stars`\n      }\n      aria-disabled={disabled || undefined}\n      aria-readonly={readOnly || undefined}\n      onKeyDown={handleKeyDown}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n    >\n      {Array.from({ length: max }, (_, index) => {\n        const state = getRatingStarState(currentValue, index);\n\n        return (\n          <span\n            key={index}\n            className=\"puzzle-rating__star\"\n            data-state={state}\n            aria-hidden=\"true\"\n            onClick={(event) => {\n              const rect = event.currentTarget.getBoundingClientRect();\n\n              const isHalf =\n                precision === 0.5 && event.clientX < rect.left + rect.width / 2;\n\n              commitValue(index + (isHalf ? 0.5 : 1));\n            }}\n          >\n            <Icon\n              name={ICONS[state]}\n              size={SIZE_MAP[size]}\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            />\n          </span>\n        );\n      })}\n    </div>\n  );\n};\n\nexport { Rating, type RatingProps, type RatingSize };\n"],"mappings":";;;;;;;;AAiBA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;CACN,OAAO;AACT;AAEA,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,UAAU,EACd,OACA,eAAe,GACf,eACA,MAAM,GACN,YAAY,IACZ,OAAO,MACP,WAAW,OACX,WAAW,OACX,QAAQ,wCACR,aAAa,8BACb,WACA,OACA,cAAc,YAAY,UAC1B,WACA,GAAG,YACc;CACjB,IAAI,CAAC,OAAO,UAAU,GAAG,KAAK,MAAM,KAAK,MAAM,IAC7C,MAAM,IAAI,MAAM,iDAAiD;CAGnE,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,eACxC,gBAAgB,cAAc,KAAK,SAAS,CAC9C;CAEA,MAAM,eAAe,gBACnB,eAAe,QAAQ,eACvB,KACA,SACF;CAEA,MAAM,eAAe,cAAsB;EACzC,IAAI,YAAY,UACd;EAGF,MAAM,OAAO,gBAAgB,WAAW,KAAK,SAAS;EAEtD,IAAI,SAAS,cACX;EAGF,IAAI,CAAC,cACH,iBAAiB,IAAI;EAGvB,gBAAgB,IAAI;CACtB;CAEA,MAAM,iBAAiB,UAAyC;EAC9D,YAAY,KAAK;EAEjB,IAAI,MAAM,oBAAoB,YAAY,UACxC;EAGF,MAAM,YAAY,cAAc,cAAc,MAAM,KAAK,KAAK,SAAS;EAEvE,IAAI,cAAc,KAAA,GAChB;EAGF,MAAM,eAAe;EACrB,YAAY,SAAS;CACvB;CAEA,MAAM,UAAU,GACd,iBACA,YAAY,0BACZ,YAAY,0BACZ,SACF;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW;EACX,OACE;GACE,GAAG;GACH,yBAAyB;GACzB,+BAA+B;EACjC;EAEF,MAAM,WAAW,QAAQ;EACzB,UAAU,YAAY,WAAW,KAAA,IAAY;EAC7C,cACE,WACI,GAAG,UAAU,IAAI,aAAa,UAAU,IAAI,UAC5C;EAEN,iBAAe,WAAW,KAAA,IAAY;EACtC,iBAAe,WAAW,KAAA,IAAY;EACtC,iBAAe,WAAW,KAAA,IAAY;EACtC,kBACE,WAAW,KAAA,IAAY,GAAG,aAAa,UAAU,IAAI;EAEvD,iBAAe,YAAY,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAC3B,WAAW;EACX,aAAW;EACX,iBAAe,YAAY,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAE1B,UAAA,MAAM,KAAK,EAAE,QAAQ,IAAI,IAAI,GAAG,UAAU;GACzC,MAAM,QAAQ,mBAAmB,cAAc,KAAK;GAEpD,OACE,oBAAC,QAAD;IAEE,WAAU;IACV,cAAY;IACZ,eAAY;IACZ,UAAU,UAAU;KAClB,MAAM,OAAO,MAAM,cAAc,sBAAsB;KAEvD,MAAM,SACJ,cAAc,MAAO,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;KAEhE,YAAY,SAAS,SAAS,KAAM,EAAE;IACxC;IAEA,UAAA,oBAAC,MAAD;KACE,MAAM,MAAM;KACZ,MAAM,SAAS;KACf,eAAY;KACZ,WAAU;IACX,CAAA;GACG,GAnBC,KAmBD;EAEV,CAAC;CACE,CAAA;AAET"}

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

@@ -0,0 +1,72 @@
+.puzzle-rating {
+  align-items: center;
+  gap: var(--puzzle-space-1, .25rem);
+  width: fit-content;
+  color: var(--puzzle-rating-color);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  direction: ltr;
+  display: inline-flex;
+}
+
+.puzzle-rating__star {
+  color: var(--puzzle-rating-empty-color);
+  user-select: none;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  display: inline-flex;
+}
+
+.puzzle-rating__star[data-state="full"], .puzzle-rating__star[data-state="half"] {
+  color: var(--puzzle-rating-color);
+}
+
+.puzzle-rating__star svg {
+  display: block;
+}
+
+.puzzle-rating:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 3px;
+  border-radius: var(--puzzle-radius-sm, .25rem);
+}
+
+.puzzle-rating-disabled {
+  cursor: not-allowed;
+  opacity: .55;
+}
+
+.puzzle-rating-readonly {
+  cursor: default;
+}
+
+.puzzle-rating[data-size="sm"] {
+  gap: var(--puzzle-space-1, .25rem);
+}
+
+.puzzle-rating[data-size="lg"] {
+  gap: var(--puzzle-space-2, .5rem);
+}
+
+@media (forced-colors: active) {
+  .puzzle-rating__star {
+    color: graytext;
+  }
+
+  .puzzle-rating__star[data-state="full"], .puzzle-rating__star[data-state="half"] {
+    color: highlight;
+  }
+
+  .puzzle-rating:focus-visible {
+    outline-color: highlight;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-rating, .puzzle-rating__star {
+    transition: none;
+  }
+}

package/dist/components/data-display/rating/rating.types.d.cts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef } from "react";
+type RatingSize = "sm" | "md" | "lg";
+type RatingProps = Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "role" | "value"> & {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  precision?: 0.5 | 1;
+  size?: RatingSize;
+  readOnly?: boolean;
+  disabled?: boolean;
+  color?: string;
+  emptyColor?: string;
+};
+export type { RatingProps, RatingSize };

package/dist/components/data-display/rating/rating.types.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef } from "react";
+type RatingSize = "sm" | "md" | "lg";
+type RatingProps = Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "role" | "value"> & {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  precision?: 0.5 | 1;
+  size?: RatingSize;
+  readOnly?: boolean;
+  disabled?: boolean;
+  color?: string;
+  emptyColor?: string;
+};
+export type { RatingProps, RatingSize };

package/dist/components/data-display/rating/rating.utils.cjs

@@ -0,0 +1,27 @@
+// src/components/data-display/rating/rating.utils.ts
+const normalizeRating = (value, max, precision) => {
+	if (!Number.isFinite(value)) return 0;
+	return Math.round(Math.min(max, Math.max(0, value)) / precision) * precision;
+};
+const getRatingStarState = (value, index) => {
+	const remainder = value - index;
+	if (remainder >= 1) return "full";
+	if (remainder >= .5) return "half";
+	return "empty";
+};
+const getNextRating = (value, key, max, precision) => {
+	switch (key) {
+		case "ArrowRight":
+		case "ArrowUp": return normalizeRating(value + precision, max, precision);
+		case "ArrowLeft":
+		case "ArrowDown": return normalizeRating(value - precision, max, precision);
+		case "Home": return 0;
+		case "End": return max;
+		default: return;
+	}
+};
+exports.getNextRating = getNextRating;
+exports.getRatingStarState = getRatingStarState;
+exports.normalizeRating = normalizeRating;
+
+//# sourceMappingURL=rating.utils.cjs.map