@puzzle-ui/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,128 @@
+.puzzle-alert {
+  --alert-color: var(--puzzle-color-info, #3b82f6);
+  --alert-background: color-mix(in srgb, var(--alert-color) 10%, transparent);
+  --alert-border: color-mix(in srgb, var(--alert-color) 30%, transparent);
+  align-items: flex-start;
+  gap: var(--puzzle-space-3, .75rem);
+  width: 100%;
+  padding: var(--puzzle-space-4, 1rem);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: var(--puzzle-color-text, inherit);
+  background: var(--alert-background);
+  font-family: var(--puzzle-font-family-body, inherit);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  border: 1px solid #0000;
+  display: flex;
+  position: relative;
+}
+
+.puzzle-alert--success {
+  --alert-color: var(--puzzle-color-success, #22c55e);
+}
+
+.puzzle-alert--info {
+  --alert-color: var(--puzzle-color-info, #3b82f6);
+}
+
+.puzzle-alert--warning {
+  --alert-color: var(--puzzle-color-warning, #f59e0b);
+}
+
+.puzzle-alert--error {
+  --alert-color: var(--puzzle-color-danger, #ef4444);
+}
+
+.puzzle-alert--standard {
+  border-color: var(--alert-border);
+}
+
+.puzzle-alert--outlined {
+  border-color: var(--alert-color);
+  background: none;
+}
+
+.puzzle-alert--filled {
+  background: var(--alert-color);
+  color: var(--puzzle-color-primary-foreground, #fff);
+}
+
+.puzzle-alert--filled .puzzle-alert__icon, .puzzle-alert--filled .puzzle-alert__close {
+  color: inherit;
+}
+
+.puzzle-alert__icon-wrapper {
+  color: var(--alert-color);
+  flex-shrink: 0;
+  align-items: flex-start;
+  padding-top: .125rem;
+  display: flex;
+}
+
+.puzzle-alert--filled .puzzle-alert__icon-wrapper {
+  color: inherit;
+}
+
+.puzzle-alert__icon {
+  flex-shrink: 0;
+  display: block;
+}
+
+.puzzle-alert__content {
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-alert__title {
+  font-weight: var(--puzzle-font-weight-semibold, 600);
+}
+
+.puzzle-alert__description {
+  min-width: 0;
+}
+
+.puzzle-alert__description > :first-child {
+  margin-top: 0;
+}
+
+.puzzle-alert__description > :last-child {
+  margin-bottom: 0;
+}
+
+.puzzle-alert__close {
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  width: 2rem;
+  height: 2rem;
+  color: var(--alert-color);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin: -.375rem -.375rem 0 0;
+  padding: 0;
+  display: inline-flex;
+}
+
+.puzzle-alert--filled .puzzle-alert__close {
+  color: inherit;
+}
+
+.puzzle-alert__close:hover {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.puzzle-alert__close:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .puzzle-alert__close {
+    transition: background-color .12s;
+  }
+}

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from "react";
+type AlertSeverity = "success" | "info" | "warning" | "error";
+type AlertVariant = "standard" | "outlined" | "filled";
+type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+  severity?: AlertSeverity;
+  variant?: AlertVariant;
+  title?: ReactNode;
+  icon?: ReactNode | false;
+  closable?: boolean;
+  closeLabel?: string;
+  onClose?: () => void;
+  children?: ReactNode;
+};
+export type { AlertProps, AlertSeverity, AlertVariant };

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from "react";
+type AlertSeverity = "success" | "info" | "warning" | "error";
+type AlertVariant = "standard" | "outlined" | "filled";
+type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+  severity?: AlertSeverity;
+  variant?: AlertVariant;
+  title?: ReactNode;
+  icon?: ReactNode | false;
+  closable?: boolean;
+  closeLabel?: string;
+  onClose?: () => void;
+  children?: ReactNode;
+};
+export type { AlertProps, AlertSeverity, AlertVariant };

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

@@ -0,0 +1,11 @@
+// src/components/data-display/alert/alert.utils.ts
+const getAlertSemantics = (severity) => {
+	const isUrgent = severity === "error" || severity === "warning";
+	return {
+		role: isUrgent ? "alert" : "status",
+		ariaLive: isUrgent ? "assertive" : "polite"
+	};
+};
+exports.getAlertSemantics = getAlertSemantics;
+
+//# sourceMappingURL=alert.utils.cjs.map

package/dist/components/data-display/alert/alert.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.utils.cjs","names":[],"sources":["../../../../src/components/data-display/alert/alert.utils.ts"],"sourcesContent":["import type { AlertSeverity } from \"./alert.types\";\n\ntype AlertSemantics = {\n  role: \"alert\" | \"status\";\n  ariaLive: \"assertive\" | \"polite\";\n};\n\nconst getAlertSemantics = (severity: AlertSeverity): AlertSemantics => {\n  const isUrgent = severity === \"error\" || severity === \"warning\";\n\n  return {\n    role: isUrgent ? \"alert\" : \"status\",\n    ariaLive: isUrgent ? \"assertive\" : \"polite\",\n  };\n};\n\nexport { getAlertSemantics };\nexport type { AlertSemantics };\n"],"mappings":";AAOA,MAAM,qBAAqB,aAA4C;CACrE,MAAM,WAAW,aAAa,WAAW,aAAa;CAEtD,OAAO;EACL,MAAM,WAAW,UAAU;EAC3B,UAAU,WAAW,cAAc;CACrC;AACF"}

package/dist/components/data-display/alert/alert.utils.js

@@ -0,0 +1,11 @@
+// src/components/data-display/alert/alert.utils.ts
+const getAlertSemantics = (severity) => {
+	const isUrgent = severity === "error" || severity === "warning";
+	return {
+		role: isUrgent ? "alert" : "status",
+		ariaLive: isUrgent ? "assertive" : "polite"
+	};
+};
+export { getAlertSemantics };
+
+//# sourceMappingURL=alert.utils.js.map

package/dist/components/data-display/alert/alert.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.utils.js","names":[],"sources":["../../../../src/components/data-display/alert/alert.utils.ts"],"sourcesContent":["import type { AlertSeverity } from \"./alert.types\";\n\ntype AlertSemantics = {\n  role: \"alert\" | \"status\";\n  ariaLive: \"assertive\" | \"polite\";\n};\n\nconst getAlertSemantics = (severity: AlertSeverity): AlertSemantics => {\n  const isUrgent = severity === \"error\" || severity === \"warning\";\n\n  return {\n    role: isUrgent ? \"alert\" : \"status\",\n    ariaLive: isUrgent ? \"assertive\" : \"polite\",\n  };\n};\n\nexport { getAlertSemantics };\nexport type { AlertSemantics };\n"],"mappings":";AAOA,MAAM,qBAAqB,aAA4C;CACrE,MAAM,WAAW,aAAa,WAAW,aAAa;CAEtD,OAAO;EACL,MAAM,WAAW,UAAU;EAC3B,UAAU,WAAW,cAAc;CACrC;AACF"}

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

@@ -0,0 +1,103 @@
+;/* empty css            */
+const require_alert_utils = require("./alert.utils.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/data-display/alert/index.tsx
+const AlertIcon = ({ severity }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		className: "puzzle-alert__icon",
+		viewBox: "0 0 24 24",
+		width: "20",
+		height: "20",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: {
+			success: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }) }),
+			info: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 16v-4" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 8h.01" })
+			] }),
+			warning: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10.3 3.9 1.8 18.1A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.9L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 9v4" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
+			] }),
+			error: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m15 9-6 6" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m9 9 6 6" })
+			] })
+		}[severity]
+	});
+};
+const CloseIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "18",
+	height: "18",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m18 6-12 12M6 6l12 12" })
+});
+const Alert = ({ severity = "info", variant = "standard", title, icon, closable = false, closeLabel = "Dismiss alert", onClose, children, className, style, ...props }) => {
+	const [dismissed, setDismissed] = (0, react.useState)(false);
+	if (dismissed) return null;
+	const handleClose = () => {
+		setDismissed(true);
+		onClose?.();
+	};
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-alert", `puzzle-alert--${severity}`, `puzzle-alert--${variant}`, className);
+	const semantics = require_alert_utils.getAlertSemantics(severity);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...props,
+		className: classes,
+		style,
+		role: semantics.role,
+		"aria-live": semantics.ariaLive,
+		"aria-atomic": "true",
+		children: [
+			icon !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "puzzle-alert__icon-wrapper",
+				children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon, { severity })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "puzzle-alert__content",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "puzzle-alert__title",
+					children: title
+				}), children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "puzzle-alert__description",
+					children
+				})]
+			}),
+			closable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "puzzle-alert__close",
+				"aria-label": closeLabel,
+				onClick: handleClose,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, {})
+			})
+		]
+	});
+};
+exports.Alert = Alert;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useState","cn","getAlertSemantics"],"sources":["../../../../src/components/data-display/alert/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\n\nimport type { AlertProps, AlertSeverity, AlertVariant } from \"./alert.types\";\n\nimport \"./alert.css\";\nimport { getAlertSemantics } from \"./alert.utils\";\n\nconst AlertIcon = ({ severity }: { severity: AlertSeverity }) => {\n  const paths: Record<AlertSeverity, ReactNode> = {\n    success: (\n      <>\n        <path d=\"m5 12 4 4L19 6\" />\n      </>\n    ),\n    info: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M12 16v-4\" />\n        <path d=\"M12 8h.01\" />\n      </>\n    ),\n    warning: (\n      <>\n        <path d=\"M10.3 3.9 1.8 18.1A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.9L13.7 3.9a2 2 0 0 0-3.4 0Z\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </>\n    ),\n    error: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"m15 9-6 6\" />\n        <path d=\"m9 9 6 6\" />\n      </>\n    ),\n  };\n\n  return (\n    <svg\n      className=\"puzzle-alert__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"20\"\n      height=\"20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      {paths[severity]}\n    </svg>\n  );\n};\n\nconst CloseIcon = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    width=\"18\"\n    height=\"18\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <path d=\"m18 6-12 12M6 6l12 12\" />\n  </svg>\n);\n\nconst Alert = ({\n  severity = \"info\",\n  variant = \"standard\",\n  title,\n  icon,\n  closable = false,\n  closeLabel = \"Dismiss alert\",\n  onClose,\n  children,\n  className,\n  style,\n  ...props\n}: AlertProps) => {\n  const [dismissed, setDismissed] = useState(false);\n\n  if (dismissed) {\n    return null;\n  }\n\n  const handleClose = () => {\n    setDismissed(true);\n    onClose?.();\n  };\n\n  const classes = cn(\n    \"puzzle-alert\",\n    `puzzle-alert--${severity}`,\n    `puzzle-alert--${variant}`,\n    className,\n  );\n\n  const semantics = getAlertSemantics(severity);\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      style={style}\n      role={semantics.role}\n      aria-live={semantics.ariaLive}\n      aria-atomic=\"true\"\n    >\n      {icon !== false && (\n        <div className=\"puzzle-alert__icon-wrapper\">\n          {icon ?? <AlertIcon severity={severity} />}\n        </div>\n      )}\n\n      <div className=\"puzzle-alert__content\">\n        {title && <div className=\"puzzle-alert__title\">{title}</div>}\n\n        {children && (\n          <div className=\"puzzle-alert__description\">{children}</div>\n        )}\n      </div>\n\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"puzzle-alert__close\"\n          aria-label={closeLabel}\n          onClick={handleClose}\n        >\n          <CloseIcon />\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport { Alert, type AlertProps, type AlertSeverity, type AlertVariant };\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import { AlertProps, AlertSeverity, AlertVariant } from "./alert.types.cjs";
+declare const Alert: ({ severity, variant, title, icon, closable, closeLabel, onClose, children, className, style, ...props }: AlertProps) => import("react").JSX.Element | null;
+export { Alert, type AlertProps, type AlertSeverity, type AlertVariant };

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

@@ -0,0 +1,3 @@
+import { AlertProps, AlertSeverity, AlertVariant } from "./alert.types.js";
+declare const Alert: ({ severity, variant, title, icon, closable, closeLabel, onClose, children, className, style, ...props }: AlertProps) => import("react").JSX.Element | null;
+export { Alert, type AlertProps, type AlertSeverity, type AlertVariant };

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

@@ -0,0 +1,103 @@
+import "./alert.css";
+import { getAlertSemantics } from "./alert.utils.js";
+import { cn } from "@puzzle-ui/core";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/data-display/alert/index.tsx
+const AlertIcon = ({ severity }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		className: "puzzle-alert__icon",
+		viewBox: "0 0 24 24",
+		width: "20",
+		height: "20",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: {
+			success: /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) }),
+			info: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10"
+				}),
+				/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+				/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+			] }),
+			warning: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("path", { d: "M10.3 3.9 1.8 18.1A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.9L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
+				/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+				/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+			] }),
+			error: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10"
+				}),
+				/* @__PURE__ */ jsx("path", { d: "m15 9-6 6" }),
+				/* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
+			] })
+		}[severity]
+	});
+};
+const CloseIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	width: "18",
+	height: "18",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ jsx("path", { d: "m18 6-12 12M6 6l12 12" })
+});
+const Alert = ({ severity = "info", variant = "standard", title, icon, closable = false, closeLabel = "Dismiss alert", onClose, children, className, style, ...props }) => {
+	const [dismissed, setDismissed] = useState(false);
+	if (dismissed) return null;
+	const handleClose = () => {
+		setDismissed(true);
+		onClose?.();
+	};
+	const classes = cn("puzzle-alert", `puzzle-alert--${severity}`, `puzzle-alert--${variant}`, className);
+	const semantics = getAlertSemantics(severity);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: classes,
+		style,
+		role: semantics.role,
+		"aria-live": semantics.ariaLive,
+		"aria-atomic": "true",
+		children: [
+			icon !== false && /* @__PURE__ */ jsx("div", {
+				className: "puzzle-alert__icon-wrapper",
+				children: icon ?? /* @__PURE__ */ jsx(AlertIcon, { severity })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "puzzle-alert__content",
+				children: [title && /* @__PURE__ */ jsx("div", {
+					className: "puzzle-alert__title",
+					children: title
+				}), children && /* @__PURE__ */ jsx("div", {
+					className: "puzzle-alert__description",
+					children
+				})]
+			}),
+			closable && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "puzzle-alert__close",
+				"aria-label": closeLabel,
+				onClick: handleClose,
+				children: /* @__PURE__ */ jsx(CloseIcon, {})
+			})
+		]
+	});
+};
+export { Alert };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/data-display/alert/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\n\nimport type { AlertProps, AlertSeverity, AlertVariant } from \"./alert.types\";\n\nimport \"./alert.css\";\nimport { getAlertSemantics } from \"./alert.utils\";\n\nconst AlertIcon = ({ severity }: { severity: AlertSeverity }) => {\n  const paths: Record<AlertSeverity, ReactNode> = {\n    success: (\n      <>\n        <path d=\"m5 12 4 4L19 6\" />\n      </>\n    ),\n    info: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M12 16v-4\" />\n        <path d=\"M12 8h.01\" />\n      </>\n    ),\n    warning: (\n      <>\n        <path d=\"M10.3 3.9 1.8 18.1A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.9L13.7 3.9a2 2 0 0 0-3.4 0Z\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </>\n    ),\n    error: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"m15 9-6 6\" />\n        <path d=\"m9 9 6 6\" />\n      </>\n    ),\n  };\n\n  return (\n    <svg\n      className=\"puzzle-alert__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"20\"\n      height=\"20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      {paths[severity]}\n    </svg>\n  );\n};\n\nconst CloseIcon = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    width=\"18\"\n    height=\"18\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <path d=\"m18 6-12 12M6 6l12 12\" />\n  </svg>\n);\n\nconst Alert = ({\n  severity = \"info\",\n  variant = \"standard\",\n  title,\n  icon,\n  closable = false,\n  closeLabel = \"Dismiss alert\",\n  onClose,\n  children,\n  className,\n  style,\n  ...props\n}: AlertProps) => {\n  const [dismissed, setDismissed] = useState(false);\n\n  if (dismissed) {\n    return null;\n  }\n\n  const handleClose = () => {\n    setDismissed(true);\n    onClose?.();\n  };\n\n  const classes = cn(\n    \"puzzle-alert\",\n    `puzzle-alert--${severity}`,\n    `puzzle-alert--${variant}`,\n    className,\n  );\n\n  const semantics = getAlertSemantics(severity);\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      style={style}\n      role={semantics.role}\n      aria-live={semantics.ariaLive}\n      aria-atomic=\"true\"\n    >\n      {icon !== false && (\n        <div className=\"puzzle-alert__icon-wrapper\">\n          {icon ?? <AlertIcon severity={severity} />}\n        </div>\n      )}\n\n      <div className=\"puzzle-alert__content\">\n        {title && <div className=\"puzzle-alert__title\">{title}</div>}\n\n        {children && (\n          <div className=\"puzzle-alert__description\">{children}</div>\n        )}\n      </div>\n\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"puzzle-alert__close\"\n          aria-label={closeLabel}\n          onClick={handleClose}\n        >\n          <CloseIcon />\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport { Alert, type AlertProps, type AlertSeverity, type AlertVariant };\n"],"mappings":";;;;;;AAQA,MAAM,aAAa,EAAE,eAA4C;CA8B/D,OACE,oBAAC,OAAD;EACE,WAAU;EACV,SAAQ;EACR,OAAM;EACN,QAAO;EACP,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,eAAY;EACZ,WAAU;EAET,UAAA;GA1CH,SACE,oBAAA,YAAA,EAAA,UACE,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA,EAC1B,CAAA;GAEJ,MACE,qBAAA,YAAA,EAAA,UAAA;IACE,oBAAC,UAAD;KAAQ,IAAG;KAAK,IAAG;KAAK,GAAE;IAAM,CAAA;IAChC,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;IACrB,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GACrB,EAAA,CAAA;GAEJ,SACE,qBAAA,YAAA,EAAA,UAAA;IACE,oBAAC,QAAD,EAAM,GAAE,qFAAsF,CAAA;IAC9F,oBAAC,QAAD,EAAM,GAAE,UAAW,CAAA;IACnB,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;GACtB,EAAA,CAAA;GAEJ,OACE,qBAAA,YAAA,EAAA,UAAA;IACE,oBAAC,UAAD;KAAQ,IAAG;KAAK,IAAG;KAAK,GAAE;IAAM,CAAA;IAChC,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;IACrB,oBAAC,QAAD,EAAM,GAAE,WAAY,CAAA;GACpB,EAAA,CAAA;EAkBG,EAAE;CACJ,CAAA;AAET;AAEA,MAAM,kBACJ,oBAAC,OAAD;CACE,SAAQ;CACR,OAAM;CACN,QAAO;CACP,MAAK;CACL,QAAO;CACP,aAAY;CACZ,eAAc;CACd,eAAY;CACZ,WAAU;CAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,wBAAyB,CAAA;AAC9B,CAAA;AAGP,MAAM,SAAS,EACb,WAAW,QACX,UAAU,YACV,OACA,MACA,WAAW,OACX,aAAa,iBACb,SACA,UACA,WACA,OACA,GAAG,YACa;CAChB,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,IAAI,WACF,OAAO;CAGT,MAAM,oBAAoB;EACxB,aAAa,IAAI;EACjB,UAAU;CACZ;CAEA,MAAM,UAAU,GACd,gBACA,iBAAiB,YACjB,iBAAiB,WACjB,SACF;CAEA,MAAM,YAAY,kBAAkB,QAAQ;CAE5C,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,UAAU;EAChB,aAAW,UAAU;EACrB,eAAY;EANd,UAAA;GAQG,SAAS,SACR,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,QAAQ,oBAAC,WAAD,EAAqB,SAAW,CAAA;GACtC,CAAA;GAGP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SAAS,oBAAC,OAAD;KAAK,WAAU;KAAuB,UAAA;IAAW,CAAA,GAE1D,YACC,oBAAC,OAAD;KAAK,WAAU;KAA6B;IAAc,CAAA,CAEzD;;GAEJ,YACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,cAAY;IACZ,SAAS;IAET,UAAA,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EAEP;;AAET"}

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

@@ -0,0 +1,30 @@
+.puzzle-avatar {
+  background-color: var(--puzzle-color-secondary);
+  border: var(--puzzle-border-width-strong, 2px) solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-full, 50%);
+  color: var(--puzzle-color-secondary-foreground);
+  font-weight: var(--puzzle-font-weight-bold, 700);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  overflow: hidden;
+  container-type: inline-size;
+}
+
+.puzzle-avatar-square {
+  border-radius: var(--puzzle-radius-md, .5rem);
+}
+
+.puzzle-avatar-circle {
+  border-radius: var(--puzzle-radius-full, 9999px);
+}
+
+.puzzle-avatar-initials {
+  font-size: clamp(.5rem, 32cqw, 4rem);
+  font-weight: var(--puzzle-font-weight-bold, 700);
+  line-height: var(--puzzle-font-line-height-none, 1);
+  font-synthesis: none;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

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

@@ -0,0 +1,42 @@
+"use client";
+;/* empty css             */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/data-display/avatar/index.tsx
+const Avatar = ({ src, alt, size: propsSize = 32, shape = "circle", className, onError, ...rest }) => {
+	const [failedSrc, setFailedSrc] = (0, react.useState)(null);
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-avatar", `puzzle-avatar-${shape}`, className);
+	const size = Math.max(propsSize, 1);
+	if (src && failedSrc !== src) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src,
+		alt,
+		width: size,
+		height: size,
+		className: classes,
+		...rest,
+		onError: (event) => {
+			onError?.(event);
+			setFailedSrc(src);
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		role: "img",
+		"aria-label": alt || void 0,
+		"aria-hidden": alt ? void 0 : true,
+		className: classes,
+		style: {
+			width: size,
+			height: size
+		},
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: "puzzle-avatar-initials",
+			children: (0, _puzzle_ui_core.nameToInitials)(alt ?? "")
+		})
+	});
+};
+exports.Avatar = Avatar;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useState","cn","nameToInitials"],"sources":["../../../../src/components/data-display/avatar/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, nameToInitials } from \"@puzzle-ui/core\";\nimport { useState, type ComponentPropsWithRef } from \"react\";\nimport \"./avatar.css\";\n\ntype AvatarShape = \"circle\" | \"square\";\ntype AvatarProps = Omit<\n  ComponentPropsWithRef<\"img\">,\n  \"src\" | \"alt\" | \"width\" | \"height\"\n> & {\n  src?: string;\n  alt?: string;\n  size?: number;\n  shape?: AvatarShape;\n};\n\nconst Avatar = ({\n  src,\n  alt,\n  size: propsSize = 32,\n  shape = \"circle\",\n  className,\n  onError,\n  ...rest\n}: AvatarProps) => {\n  const [failedSrc, setFailedSrc] = useState<string | null>(null);\n  const classes = cn(\"puzzle-avatar\", `puzzle-avatar-${shape}`, className);\n  const size = Math.max(propsSize, 1);\n  if (src && failedSrc !== src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        width={size}\n        height={size}\n        className={classes}\n        {...rest}\n        onError={(event) => {\n          onError?.(event);\n          setFailedSrc(src);\n        }}\n      />\n    );\n  }\n  return (\n    <span\n      role=\"img\"\n      aria-label={alt || undefined}\n      aria-hidden={alt ? undefined : true}\n      className={classes}\n      style={{ width: size, height: size }}\n      {...(rest as object)}\n    >\n      <span aria-hidden=\"true\" className=\"puzzle-avatar-initials\">\n        {nameToInitials(alt ?? \"\")}\n      </span>\n    </span>\n  );\n};\n\nexport { Avatar, type AvatarProps, type AvatarShape };\n"],"mappings":";;;;;;AAiBA,MAAM,UAAU,EACd,KACA,KACA,MAAM,YAAY,IAClB,QAAQ,UACR,WACA,SACA,GAAG,WACc;CACjB,MAAM,CAAC,WAAW,iBAAA,GAAgBA,MAAAA,SAAAA,CAAwB,IAAI;CAC9D,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CAAG,iBAAiB,iBAAiB,SAAS,SAAS;CACvE,MAAM,OAAO,KAAK,IAAI,WAAW,CAAC;CAClC,IAAI,OAAO,cAAc,KACvB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACO;EACA;EACL,OAAO;EACP,QAAQ;EACR,WAAW;EACX,GAAI;EACJ,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,aAAa,GAAG;EAClB;CACD,CAAA;CAGL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,MAAK;EACL,cAAY,OAAO,KAAA;EACnB,eAAa,MAAM,KAAA,IAAY;EAC/B,WAAW;EACX,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;EACnC,GAAK;EAEL,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChCC,WAAAA,GAAAA,gBAAAA,eAAAA,CAAe,OAAO,EAAE;EACrB,CAAA;CACF,CAAA;AAEV"}

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

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef } from "react";
+type AvatarShape = "circle" | "square";
+type AvatarProps = Omit<ComponentPropsWithRef<"img">, "src" | "alt" | "width" | "height"> & {
+  src?: string;
+  alt?: string;
+  size?: number;
+  shape?: AvatarShape;
+};
+declare const Avatar: ({ src, alt, size: propsSize, shape, className, onError, ...rest }: AvatarProps) => import("react").JSX.Element;
+export { Avatar, type AvatarProps, type AvatarShape };

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

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef } from "react";
+type AvatarShape = "circle" | "square";
+type AvatarProps = Omit<ComponentPropsWithRef<"img">, "src" | "alt" | "width" | "height"> & {
+  src?: string;
+  alt?: string;
+  size?: number;
+  shape?: AvatarShape;
+};
+declare const Avatar: ({ src, alt, size: propsSize, shape, className, onError, ...rest }: AvatarProps) => import("react").JSX.Element;
+export { Avatar, type AvatarProps, type AvatarShape };

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

@@ -0,0 +1,42 @@
+"use client";
+import "./avatar.css";
+import { cn, nameToInitials } from "@puzzle-ui/core";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/data-display/avatar/index.tsx
+const Avatar = ({ src, alt, size: propsSize = 32, shape = "circle", className, onError, ...rest }) => {
+	const [failedSrc, setFailedSrc] = useState(null);
+	const classes = cn("puzzle-avatar", `puzzle-avatar-${shape}`, className);
+	const size = Math.max(propsSize, 1);
+	if (src && failedSrc !== src) return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		width: size,
+		height: size,
+		className: classes,
+		...rest,
+		onError: (event) => {
+			onError?.(event);
+			setFailedSrc(src);
+		}
+	});
+	return /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": alt || void 0,
+		"aria-hidden": alt ? void 0 : true,
+		className: classes,
+		style: {
+			width: size,
+			height: size
+		},
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "puzzle-avatar-initials",
+			children: nameToInitials(alt ?? "")
+		})
+	});
+};
+export { Avatar };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/data-display/avatar/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, nameToInitials } from \"@puzzle-ui/core\";\nimport { useState, type ComponentPropsWithRef } from \"react\";\nimport \"./avatar.css\";\n\ntype AvatarShape = \"circle\" | \"square\";\ntype AvatarProps = Omit<\n  ComponentPropsWithRef<\"img\">,\n  \"src\" | \"alt\" | \"width\" | \"height\"\n> & {\n  src?: string;\n  alt?: string;\n  size?: number;\n  shape?: AvatarShape;\n};\n\nconst Avatar = ({\n  src,\n  alt,\n  size: propsSize = 32,\n  shape = \"circle\",\n  className,\n  onError,\n  ...rest\n}: AvatarProps) => {\n  const [failedSrc, setFailedSrc] = useState<string | null>(null);\n  const classes = cn(\"puzzle-avatar\", `puzzle-avatar-${shape}`, className);\n  const size = Math.max(propsSize, 1);\n  if (src && failedSrc !== src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        width={size}\n        height={size}\n        className={classes}\n        {...rest}\n        onError={(event) => {\n          onError?.(event);\n          setFailedSrc(src);\n        }}\n      />\n    );\n  }\n  return (\n    <span\n      role=\"img\"\n      aria-label={alt || undefined}\n      aria-hidden={alt ? undefined : true}\n      className={classes}\n      style={{ width: size, height: size }}\n      {...(rest as object)}\n    >\n      <span aria-hidden=\"true\" className=\"puzzle-avatar-initials\">\n        {nameToInitials(alt ?? \"\")}\n      </span>\n    </span>\n  );\n};\n\nexport { Avatar, type AvatarProps, type AvatarShape };\n"],"mappings":";;;;;;AAiBA,MAAM,UAAU,EACd,KACA,KACA,MAAM,YAAY,IAClB,QAAQ,UACR,WACA,SACA,GAAG,WACc;CACjB,MAAM,CAAC,WAAW,gBAAgB,SAAwB,IAAI;CAC9D,MAAM,UAAU,GAAG,iBAAiB,iBAAiB,SAAS,SAAS;CACvE,MAAM,OAAO,KAAK,IAAI,WAAW,CAAC;CAClC,IAAI,OAAO,cAAc,KACvB,OACE,oBAAC,OAAD;EACO;EACA;EACL,OAAO;EACP,QAAQ;EACR,WAAW;EACX,GAAI;EACJ,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,aAAa,GAAG;EAClB;CACD,CAAA;CAGL,OACE,oBAAC,QAAD;EACE,MAAK;EACL,cAAY,OAAO,KAAA;EACnB,eAAa,MAAM,KAAA,IAAY;EAC/B,WAAW;EACX,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;EACnC,GAAK;EAEL,UAAA,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChC,UAAA,eAAe,OAAO,EAAE;EACrB,CAAA;CACF,CAAA;AAEV"}