@puzzle-ui/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,91 @@
+.puzzle-badge {
+  display: inline-flex;
+  position: relative;
+}
+
+.puzzle-badge > .puzzle-badge-indicator {
+  aspect-ratio: 1;
+  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;
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+  padding: .25em;
+  display: inline-flex;
+  position: absolute;
+}
+
+.puzzle-badge-primary > .puzzle-badge-indicator {
+  background-color: var(--puzzle-color-primary);
+  color: var(--puzzle-color-primary-foreground);
+}
+
+.puzzle-badge-secondary > .puzzle-badge-indicator {
+  background-color: var(--puzzle-color-secondary);
+  color: var(--puzzle-color-secondary-foreground);
+}
+
+.puzzle-badge-accent > .puzzle-badge-indicator {
+  background-color: var(--puzzle-color-accent);
+  color: var(--puzzle-color-accent-foreground);
+}
+
+.puzzle-badge-danger > .puzzle-badge-indicator {
+  background-color: var(--puzzle-color-danger);
+  color: var(--puzzle-color-danger-foreground);
+}
+
+.puzzle-badge-info > .puzzle-badge-indicator {
+  background-color: var(--puzzle-color-info);
+  color: var(--puzzle-color-info-foreground);
+}
+
+.puzzle-badge.rectangular.top.left > .puzzle-badge-indicator {
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+}
+
+.puzzle-badge.rectangular.bottom.left > .puzzle-badge-indicator {
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%);
+}
+
+.puzzle-badge.rectangular.top.right > .puzzle-badge-indicator {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.puzzle-badge.rectangular.bottom.right > .puzzle-badge-indicator {
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+}
+
+.puzzle-badge.circular.top.left > .puzzle-badge-indicator {
+  top: 14.6447%;
+  left: 14.6447%;
+  transform: translate(-50%, -50%);
+}
+
+.puzzle-badge.circular.top.right > .puzzle-badge-indicator {
+  top: 14.6447%;
+  left: 85.3553%;
+  transform: translate(-50%, -50%);
+}
+
+.puzzle-badge.circular.bottom.left > .puzzle-badge-indicator {
+  top: 81.8198%;
+  left: 18.1802%;
+  transform: translate(-50%, -50%);
+}
+
+.puzzle-badge.circular.bottom.right > .puzzle-badge-indicator {
+  top: 85.3553%;
+  left: 85.3553%;
+  transform: translate(-50%, -50%);
+}

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

@@ -0,0 +1,31 @@
+;/* empty css            */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/data-display/badge/index.tsx
+const Badge = ({ content, size = 20, color = "primary", anchorOrigin = {
+	vertical: "top",
+	horizontal: "right"
+}, anchorOverlap = "rectangular", className, children }) => {
+	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);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classes,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-badge-indicator",
+			style: {
+				fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,
+				minHeight: `${resolvedSize}px`,
+				minWidth: `${resolvedSize}px`,
+				backgroundColor: isHex ? color : void 0,
+				color: isHex ? isDark ? "var(--puzzle-color-light-foreground)" : "var(--puzzle-color-dark-foreground)" : void 0
+			},
+			children: content
+		})]
+	});
+};
+exports.Badge = Badge;
+
+//# sourceMappingURL=index.cjs.map

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

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

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+type AnchorOrigin = {
+  vertical: "top" | "bottom";
+  horizontal: "left" | "right";
+};
+type AnchorOverlap = "rectangular" | "circular";
+type BadgeColor = "primary" | "secondary" | "accent" | "danger" | "info" | `#${string}`;
+type BadgeProps = {
+  content: ReactNode;
+  size?: number;
+  color?: BadgeColor;
+  anchorOrigin?: AnchorOrigin;
+  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 };

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+type AnchorOrigin = {
+  vertical: "top" | "bottom";
+  horizontal: "left" | "right";
+};
+type AnchorOverlap = "rectangular" | "circular";
+type BadgeColor = "primary" | "secondary" | "accent" | "danger" | "info" | `#${string}`;
+type BadgeProps = {
+  content: ReactNode;
+  size?: number;
+  color?: BadgeColor;
+  anchorOrigin?: AnchorOrigin;
+  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 };

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

@@ -0,0 +1,31 @@
+import "./badge.css";
+import { cn, isDarkColor, isHexColor } from "@puzzle-ui/core";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/data-display/badge/index.tsx
+const Badge = ({ content, size = 20, color = "primary", anchorOrigin = {
+	vertical: "top",
+	horizontal: "right"
+}, anchorOverlap = "rectangular", className, children }) => {
+	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);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "puzzle-badge-indicator",
+			style: {
+				fontSize: `clamp(0.7rem, calc(${resolvedSize}px - 1em), 4rem)`,
+				minHeight: `${resolvedSize}px`,
+				minWidth: `${resolvedSize}px`,
+				backgroundColor: isHex ? color : void 0,
+				color: isHex ? isDark ? "var(--puzzle-color-light-foreground)" : "var(--puzzle-color-dark-foreground)" : void 0
+			},
+			children: content
+		})]
+	});
+};
+export { Badge };
+
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,164 @@
+.puzzle-card {
+  --puzzle-card-padding: var(--puzzle-space-4, 1rem);
+  --puzzle-card-gap: var(--puzzle-space-3, .75rem);
+  box-sizing: border-box;
+  gap: var(--puzzle-card-gap);
+  min-width: 0;
+  padding: var(--puzzle-card-padding);
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+  border: var(--puzzle-border-width, 1px) solid transparent;
+  border-radius: var(--puzzle-radius-lg, .75rem);
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-card--elevated {
+  background: var(--puzzle-color-surface-elevated, var(--puzzle-color-surface));
+  box-shadow: var(--puzzle-elevation-2, var(--puzzle-shadow-md, none));
+}
+
+.puzzle-card--outlined {
+  border-color: var(--puzzle-color-border);
+}
+
+.puzzle-card--filled {
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-card--ghost {
+  box-shadow: none;
+  background: none;
+  border-color: #0000;
+}
+
+.puzzle-card--sm {
+  --puzzle-card-padding: var(--puzzle-space-3, .75rem);
+  --puzzle-card-gap: var(--puzzle-space-2, .5rem);
+  border-radius: var(--puzzle-radius-md, .5rem);
+}
+
+.puzzle-card--md {
+  --puzzle-card-padding: var(--puzzle-space-4, 1rem);
+  --puzzle-card-gap: var(--puzzle-space-3, .75rem);
+}
+
+.puzzle-card--lg {
+  --puzzle-card-padding: var(--puzzle-space-6, 1.5rem);
+  --puzzle-card-gap: var(--puzzle-space-4, 1rem);
+  border-radius: var(--puzzle-radius-xl, 1rem);
+}
+
+.puzzle-card--horizontal {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.puzzle-card__header {
+  align-items: start;
+  column-gap: var(--puzzle-space-3, .75rem);
+  row-gap: var(--puzzle-space-1, .25rem);
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-width: 0;
+  display: grid;
+}
+
+.puzzle-card__title {
+  min-width: 0;
+  color: inherit;
+  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);
+  grid-column: 1;
+  margin: 0;
+}
+
+.puzzle-card--sm .puzzle-card__title {
+  font-size: var(--puzzle-font-size-base, 1rem);
+}
+
+.puzzle-card__description {
+  min-width: 0;
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  grid-column: 1;
+  margin: 0;
+}
+
+.puzzle-card__action {
+  grid-area: 1 / 2 / span 2;
+  place-self: start end;
+}
+
+.puzzle-card__content {
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-card__footer {
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  min-width: 0;
+  border-top: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border);
+  flex-wrap: wrap;
+  margin-block-start: auto;
+  padding-block-start: var(--puzzle-card-gap);
+  display: flex;
+}
+
+.puzzle-card__media {
+  border-radius: max(0px, calc(var(--puzzle-radius-lg, .75rem) - var(--puzzle-card-padding)));
+  min-width: 0;
+  overflow: hidden;
+}
+
+.puzzle-card__media > :first-child {
+  width: 100%;
+  max-width: 100%;
+  display: block;
+}
+
+.puzzle-card--interactive {
+  cursor: pointer;
+  font: inherit;
+  text-align: start;
+  transition: border-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        transform var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  text-decoration: none;
+}
+
+.puzzle-card--interactive:hover {
+  border-color: var(--puzzle-color-border-strong, var(--puzzle-color-border));
+  box-shadow: var(--puzzle-elevation-2, var(--puzzle-shadow-md, none));
+}
+
+.puzzle-card--interactive:active {
+  transform: translateY(1px);
+}
+
+.puzzle-card--interactive:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 3px;
+}
+
+.puzzle-card--interactive:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (width <= 40rem) {
+  .puzzle-card--horizontal {
+    flex-direction: column;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-card--interactive {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,42 @@
+;/* empty css           */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+// src/components/data-display/card/index.tsx
+const Card = ({ as, variant = "outlined", size = "md", orientation = "vertical", interactive = false, className, children, ...props }) => {
+	const Component = as ?? (interactive ? "href" in props ? "a" : "button" : "div");
+	return (0, react.createElement)(Component, {
+		...props,
+		...Component === "button" && !("type" in props) ? { type: "button" } : {},
+		className: (0, _puzzle_ui_core.cn)("puzzle-card", `puzzle-card--${variant}`, `puzzle-card--${size}`, `puzzle-card--${orientation}`, interactive && "puzzle-card--interactive", className),
+		"data-variant": variant,
+		"data-size": size,
+		"data-orientation": orientation,
+		"data-interactive": interactive ? "" : void 0
+	}, children);
+};
+const createCardPart = (defaultElement, className) => {
+	const Part = ({ as, className: customClassName, children, ...props }) => {
+		return (0, react.createElement)(as ?? defaultElement, {
+			...props,
+			className: (0, _puzzle_ui_core.cn)(className, customClassName)
+		}, children);
+	};
+	return Part;
+};
+const CardHeader = createCardPart("div", "puzzle-card__header");
+const CardTitle = createCardPart("h3", "puzzle-card__title");
+const CardDescription = createCardPart("p", "puzzle-card__description");
+const CardAction = createCardPart("div", "puzzle-card__action");
+const CardContent = createCardPart("div", "puzzle-card__content");
+const CardFooter = createCardPart("div", "puzzle-card__footer");
+const CardMedia = createCardPart("div", "puzzle-card__media");
+exports.Card = Card;
+exports.CardAction = CardAction;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardMedia = CardMedia;
+exports.CardTitle = CardTitle;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["createElement","cn"],"sources":["../../../../src/components/data-display/card/index.tsx"],"sourcesContent":["import {\n  createElement,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport \"./card.css\";\n\ntype CardVariant = \"elevated\" | \"outlined\" | \"filled\" | \"ghost\";\ntype CardSize = \"sm\" | \"md\" | \"lg\";\ntype CardOrientation = \"vertical\" | \"horizontal\";\n\ntype CardOwnProps<C extends ElementType> = {\n  as?: C;\n  variant?: CardVariant;\n  size?: CardSize;\n  orientation?: CardOrientation;\n  interactive?: boolean;\n  className?: string;\n  children?: ReactNode;\n};\n\ntype CardProps<C extends ElementType = \"div\"> = CardOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof CardOwnProps<C>>;\n\ntype CardPartOwnProps<C extends ElementType> = {\n  as?: C;\n  className?: string;\n  children?: ReactNode;\n};\n\ntype CardPartProps<C extends ElementType> = CardPartOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof CardPartOwnProps<C>>;\n\nconst Card = <C extends ElementType = \"div\">({\n  as,\n  variant = \"outlined\",\n  size = \"md\",\n  orientation = \"vertical\",\n  interactive = false,\n  className,\n  children,\n  ...props\n}: CardProps<C>) => {\n  // Interactive cards need native keyboard behavior, so they never fall back to a div.\n  const Component = (as ??\n    (interactive ? (\"href\" in props ? \"a\" : \"button\") : \"div\")) as ElementType;\n\n  return createElement(\n    Component,\n    {\n      ...props,\n      ...(Component === \"button\" && !(\"type\" in props)\n        ? { type: \"button\" }\n        : {}),\n      className: cn(\n        \"puzzle-card\",\n        `puzzle-card--${variant}`,\n        `puzzle-card--${size}`,\n        `puzzle-card--${orientation}`,\n        interactive && \"puzzle-card--interactive\",\n        className,\n      ),\n      \"data-variant\": variant,\n      \"data-size\": size,\n      \"data-orientation\": orientation,\n      \"data-interactive\": interactive ? \"\" : undefined,\n    } as never,\n    children,\n  );\n};\n\nconst createCardPart = <C extends ElementType>(\n  defaultElement: C,\n  className: string,\n) => {\n  const Part = <T extends ElementType = C>({\n    as,\n    className: customClassName,\n    children,\n    ...props\n  }: CardPartProps<T>) => {\n    const Component = (as ?? defaultElement) as ElementType;\n\n    return createElement(\n      Component,\n      {\n        ...props,\n        className: cn(className, customClassName),\n      } as never,\n      children,\n    );\n  };\n\n  return Part;\n};\n\nconst CardHeader = createCardPart(\"div\", \"puzzle-card__header\");\nconst CardTitle = createCardPart(\"h3\", \"puzzle-card__title\");\nconst CardDescription = createCardPart(\"p\", \"puzzle-card__description\");\nconst CardAction = createCardPart(\"div\", \"puzzle-card__action\");\nconst CardContent = createCardPart(\"div\", \"puzzle-card__content\");\nconst CardFooter = createCardPart(\"div\", \"puzzle-card__footer\");\nconst CardMedia = createCardPart(\"div\", \"puzzle-card__media\");\n\nexport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardAction,\n  CardContent,\n  CardFooter,\n  CardMedia,\n  type CardVariant,\n  type CardSize,\n  type CardOrientation,\n  type CardPartProps,\n  type CardProps,\n};\n"],"mappings":";;;;AAmCA,MAAM,QAAuC,EAC3C,IACA,UAAU,YACV,OAAO,MACP,cAAc,YACd,cAAc,OACd,WACA,UACA,GAAG,YACe;CAElB,MAAM,YAAa,OAChB,cAAe,UAAU,QAAQ,MAAM,WAAY;CAEtD,QAAA,GAAOA,MAAAA,cAAAA,CACL,WACA;EACE,GAAG;EACH,GAAI,cAAc,YAAY,EAAE,UAAU,SACtC,EAAE,MAAM,SAAS,IACjB,CAAC;EACL,YAAA,GAAWC,gBAAAA,GAAAA,CACT,eACA,gBAAgB,WAChB,gBAAgB,QAChB,gBAAgB,eAChB,eAAe,4BACf,SACF;EACA,gBAAgB;EAChB,aAAa;EACb,oBAAoB;EACpB,oBAAoB,cAAc,KAAK,KAAA;CACzC,GACA,QACF;AACF;AAEA,MAAM,kBACJ,gBACA,cACG;CACH,MAAM,QAAmC,EACvC,IACA,WAAW,iBACX,UACA,GAAG,YACmB;EAGtB,QAAA,GAAOD,MAAAA,cAAAA,CAFY,MAAM,gBAIvB;GACE,GAAG;GACH,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,WAAW,eAAe;EAC1C,GACA,QACF;CACF;CAEA,OAAO;AACT;AAEA,MAAM,aAAa,eAAe,OAAO,qBAAqB;AAC9D,MAAM,YAAY,eAAe,MAAM,oBAAoB;AAC3D,MAAM,kBAAkB,eAAe,KAAK,0BAA0B;AACtE,MAAM,aAAa,eAAe,OAAO,qBAAqB;AAC9D,MAAM,cAAc,eAAe,OAAO,sBAAsB;AAChE,MAAM,aAAa,eAAe,OAAO,qBAAqB;AAC9D,MAAM,YAAY,eAAe,OAAO,oBAAoB"}

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

@@ -0,0 +1,29 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type CardVariant = "elevated" | "outlined" | "filled" | "ghost";
+type CardSize = "sm" | "md" | "lg";
+type CardOrientation = "vertical" | "horizontal";
+type CardOwnProps<C extends ElementType> = {
+  as?: C;
+  variant?: CardVariant;
+  size?: CardSize;
+  orientation?: CardOrientation;
+  interactive?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+type CardProps<C extends ElementType = "div"> = CardOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof CardOwnProps<C>>;
+type CardPartOwnProps<C extends ElementType> = {
+  as?: C;
+  className?: string;
+  children?: ReactNode;
+};
+type CardPartProps<C extends ElementType> = CardPartOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof CardPartOwnProps<C>>;
+declare const Card: <C extends ElementType = "div">({ as, variant, size, orientation, interactive, className, children, ...props }: CardProps<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardHeader: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardTitle: <T extends ElementType = "h3">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardDescription: <T extends ElementType = "p">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardAction: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardContent: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardFooter: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardMedia: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, type CardOrientation, type CardPartProps, type CardProps, type CardSize, CardTitle, type CardVariant };

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

@@ -0,0 +1,29 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type CardVariant = "elevated" | "outlined" | "filled" | "ghost";
+type CardSize = "sm" | "md" | "lg";
+type CardOrientation = "vertical" | "horizontal";
+type CardOwnProps<C extends ElementType> = {
+  as?: C;
+  variant?: CardVariant;
+  size?: CardSize;
+  orientation?: CardOrientation;
+  interactive?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+type CardProps<C extends ElementType = "div"> = CardOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof CardOwnProps<C>>;
+type CardPartOwnProps<C extends ElementType> = {
+  as?: C;
+  className?: string;
+  children?: ReactNode;
+};
+type CardPartProps<C extends ElementType> = CardPartOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof CardPartOwnProps<C>>;
+declare const Card: <C extends ElementType = "div">({ as, variant, size, orientation, interactive, className, children, ...props }: CardProps<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardHeader: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardTitle: <T extends ElementType = "h3">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardDescription: <T extends ElementType = "p">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardAction: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardContent: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardFooter: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CardMedia: <T extends ElementType = "div">({ as, className: customClassName, children, ...props }: CardPartProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, type CardOrientation, type CardPartProps, type CardProps, type CardSize, CardTitle, type CardVariant };

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

@@ -0,0 +1,35 @@
+import "./card.css";
+import { cn } from "@puzzle-ui/core";
+import { createElement } from "react";
+// src/components/data-display/card/index.tsx
+const Card = ({ as, variant = "outlined", size = "md", orientation = "vertical", interactive = false, className, children, ...props }) => {
+	const Component = as ?? (interactive ? "href" in props ? "a" : "button" : "div");
+	return createElement(Component, {
+		...props,
+		...Component === "button" && !("type" in props) ? { type: "button" } : {},
+		className: cn("puzzle-card", `puzzle-card--${variant}`, `puzzle-card--${size}`, `puzzle-card--${orientation}`, interactive && "puzzle-card--interactive", className),
+		"data-variant": variant,
+		"data-size": size,
+		"data-orientation": orientation,
+		"data-interactive": interactive ? "" : void 0
+	}, children);
+};
+const createCardPart = (defaultElement, className) => {
+	const Part = ({ as, className: customClassName, children, ...props }) => {
+		return createElement(as ?? defaultElement, {
+			...props,
+			className: cn(className, customClassName)
+		}, children);
+	};
+	return Part;
+};
+const CardHeader = createCardPart("div", "puzzle-card__header");
+const CardTitle = createCardPart("h3", "puzzle-card__title");
+const CardDescription = createCardPart("p", "puzzle-card__description");
+const CardAction = createCardPart("div", "puzzle-card__action");
+const CardContent = createCardPart("div", "puzzle-card__content");
+const CardFooter = createCardPart("div", "puzzle-card__footer");
+const CardMedia = createCardPart("div", "puzzle-card__media");
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/data-display/card/index.tsx"],"sourcesContent":["import {\n  createElement,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport \"./card.css\";\n\ntype CardVariant = \"elevated\" | \"outlined\" | \"filled\" | \"ghost\";\ntype CardSize = \"sm\" | \"md\" | \"lg\";\ntype CardOrientation = \"vertical\" | \"horizontal\";\n\ntype CardOwnProps<C extends ElementType> = {\n  as?: C;\n  variant?: CardVariant;\n  size?: CardSize;\n  orientation?: CardOrientation;\n  interactive?: boolean;\n  className?: string;\n  children?: ReactNode;\n};\n\ntype CardProps<C extends ElementType = \"div\"> = CardOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof CardOwnProps<C>>;\n\ntype CardPartOwnProps<C extends ElementType> = {\n  as?: C;\n  className?: string;\n  children?: ReactNode;\n};\n\ntype CardPartProps<C extends ElementType> = CardPartOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof CardPartOwnProps<C>>;\n\nconst Card = <C extends ElementType = \"div\">({\n  as,\n  variant = \"outlined\",\n  size = \"md\",\n  orientation = \"vertical\",\n  interactive = false,\n  className,\n  children,\n  ...props\n}: CardProps<C>) => {\n  // Interactive cards need native keyboard behavior, so they never fall back to a div.\n  const Component = (as ??\n    (interactive ? (\"href\" in props ? \"a\" : \"button\") : \"div\")) as ElementType;\n\n  return createElement(\n    Component,\n    {\n      ...props,\n      ...(Component === \"button\" && !(\"type\" in props)\n        ? { type: \"button\" }\n        : {}),\n      className: cn(\n        \"puzzle-card\",\n        `puzzle-card--${variant}`,\n        `puzzle-card--${size}`,\n        `puzzle-card--${orientation}`,\n        interactive && \"puzzle-card--interactive\",\n        className,\n      ),\n      \"data-variant\": variant,\n      \"data-size\": size,\n      \"data-orientation\": orientation,\n      \"data-interactive\": interactive ? \"\" : undefined,\n    } as never,\n    children,\n  );\n};\n\nconst createCardPart = <C extends ElementType>(\n  defaultElement: C,\n  className: string,\n) => {\n  const Part = <T extends ElementType = C>({\n    as,\n    className: customClassName,\n    children,\n    ...props\n  }: CardPartProps<T>) => {\n    const Component = (as ?? defaultElement) as ElementType;\n\n    return createElement(\n      Component,\n      {\n        ...props,\n        className: cn(className, customClassName),\n      } as never,\n      children,\n    );\n  };\n\n  return Part;\n};\n\nconst CardHeader = createCardPart(\"div\", \"puzzle-card__header\");\nconst CardTitle = createCardPart(\"h3\", \"puzzle-card__title\");\nconst CardDescription = createCardPart(\"p\", \"puzzle-card__description\");\nconst CardAction = createCardPart(\"div\", \"puzzle-card__action\");\nconst CardContent = createCardPart(\"div\", \"puzzle-card__content\");\nconst CardFooter = createCardPart(\"div\", \"puzzle-card__footer\");\nconst CardMedia = createCardPart(\"div\", \"puzzle-card__media\");\n\nexport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardAction,\n  CardContent,\n  CardFooter,\n  CardMedia,\n  type CardVariant,\n  type CardSize,\n  type CardOrientation,\n  type CardPartProps,\n  type CardProps,\n};\n"],"mappings":";;;;AAmCA,MAAM,QAAuC,EAC3C,IACA,UAAU,YACV,OAAO,MACP,cAAc,YACd,cAAc,OACd,WACA,UACA,GAAG,YACe;CAElB,MAAM,YAAa,OAChB,cAAe,UAAU,QAAQ,MAAM,WAAY;CAEtD,OAAO,cACL,WACA;EACE,GAAG;EACH,GAAI,cAAc,YAAY,EAAE,UAAU,SACtC,EAAE,MAAM,SAAS,IACjB,CAAC;EACL,WAAW,GACT,eACA,gBAAgB,WAChB,gBAAgB,QAChB,gBAAgB,eAChB,eAAe,4BACf,SACF;EACA,gBAAgB;EAChB,aAAa;EACb,oBAAoB;EACpB,oBAAoB,cAAc,KAAK,KAAA;CACzC,GACA,QACF;AACF;AAEA,MAAM,kBACJ,gBACA,cACG;CACH,MAAM,QAAmC,EACvC,IACA,WAAW,iBACX,UACA,GAAG,YACmB;EAGtB,OAAO,cAFY,MAAM,gBAIvB;GACE,GAAG;GACH,WAAW,GAAG,WAAW,eAAe;EAC1C,GACA,QACF;CACF;CAEA,OAAO;AACT;AAEA,MAAM,aAAa,eAAe,OAAO,qBAAqB;AAC9D,MAAM,YAAY,eAAe,MAAM,oBAAoB;AAC3D,MAAM,kBAAkB,eAAe,KAAK,0BAA0B;AACtE,MAAM,aAAa,eAAe,OAAO,qBAAqB;AAC9D,MAAM,cAAc,eAAe,OAAO,sBAAsB;AAChE,MAAM,aAAa,eAAe,OAAO,qBAAqB;AAC9D,MAAM,YAAY,eAAe,OAAO,oBAAoB"}

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

@@ -0,0 +1,80 @@
+.puzzle-image {
+  vertical-align: middle;
+  max-width: 100%;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+
+.puzzle-image__media {
+  z-index: 1;
+  object-fit: cover;
+  object-position: center;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  display: block;
+  position: relative;
+}
+
+.puzzle-image[data-image-ratio="true"] .puzzle-image__media {
+  width: 100%;
+  height: 100%;
+}
+
+.puzzle-image[data-image-fill="true"] .puzzle-image__media {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+}
+
+.puzzle-image__picture {
+  vertical-align: top;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.puzzle-image[data-image-ratio="true"] .puzzle-image__picture, .puzzle-image[data-image-fill="true"] .puzzle-image__picture {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.puzzle-image__blur {
+  z-index: 0;
+  object-fit: cover;
+  filter: blur(16px);
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: absolute;
+  inset: 0;
+  transform: scale(1.08);
+}
+
+.puzzle-image__placeholder {
+  z-index: 2;
+  pointer-events: none;
+  place-items: center;
+  display: grid;
+  position: absolute;
+  inset: 0;
+}
+
+.puzzle-image__fallback {
+  z-index: 1;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  min-height: 2.5rem;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.puzzle-image[data-image-ratio="true"] .puzzle-image__fallback, .puzzle-image[data-image-fill="true"] .puzzle-image__fallback {
+  width: 100%;
+  height: 100%;
+}