@enadhq/enad-react-sdk 1.0.0 → 1.1.0

package/dist/client/storefront/primitives/password-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.mjs","names":["React"],"sources":["../../../../src/client/storefront/primitives/password-input.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { StorefrontInput, type StorefrontInputProps } from \"./input\";\n\ninterface PasswordInputProps extends Omit<StorefrontInputProps, \"type\" | \"icon\" | \"onIconClick\"> {\n  showLabel?: string;\n  hideLabel?: string;\n}\n\nfunction PasswordInput({ showLabel = \"Show\", hideLabel = \"Hide\", ...props }: PasswordInputProps) {\n  const [visible, setVisible] = React.useState(false);\n\n  return (\n    <StorefrontInput\n      {...props}\n      type={visible ? \"text\" : \"password\"}\n      icon={<span className=\"text-xs select-none\">{visible ? hideLabel : showLabel}</span>}\n      onIconClick={() => setVisible((v) => !v)}\n    />\n  );\n}\n\nexport { PasswordInput, type PasswordInputProps };\n"],"mappings":";;;;;AAUA,SAAS,cAAc,EAAE,YAAY,QAAQ,YAAY,QAAQ,GAAG,SAA6B;CAC/F,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,MAAM;AAEnD,QACE,oBAAC,iBAAD;EACE,GAAI;EACJ,MAAM,UAAU,SAAS;EACzB,MAAM,oBAAC,QAAD;GAAM,WAAU;aAAuB,UAAU,YAAY;GAAiB,CAAA;EACpF,mBAAmB,YAAY,MAAM,CAAC,EAAE;EACxC,CAAA"}

package/dist/client/storefront/primitives/quick-links.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/primitives/quick-links.d.ts
+interface QuickLink {
+  label: string;
+  href: string;
+}
+interface QuickLinksProps {
+  links: QuickLink[];
+  className?: string;
+}
+declare function QuickLinks({
+  links,
+  className
+}: QuickLinksProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { type QuickLink, QuickLinks, type QuickLinksProps };
+//# sourceMappingURL=quick-links.d.ts.map

package/dist/client/storefront/primitives/quick-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-links.d.ts","names":[],"sources":["../../../../src/client/storefront/primitives/quick-links.tsx"],"mappings":";;;UAEU,SAAA;EACR,KAAA;EACA,IAAA;AAAA;AAAA,UAGQ,eAAA;EACR,KAAA,EAAO,SAAA;EACP,SAAA;AAAA;AAAA,iBAGO,UAAA,CAAA;EAAa,KAAA;EAAO;AAAA,GAAa,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/primitives/quick-links.mjs

@@ -0,0 +1,22 @@
+import { cn } from "../../ui/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/primitives/quick-links.tsx
+function QuickLinks({ links, className }) {
+	if (links.length === 0) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Quick links",
+		className: cn("overflow-x-auto", className),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "flex gap-2",
+			children: links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				href: link.href,
+				className: "inline-flex whitespace-nowrap rounded-[var(--enad-button-radius)] border border-border px-4 py-2 text-sm transition-colors hover:bg-primary hover:text-primary-foreground",
+				children: link.label
+			}) }, link.label + link.href))
+		})
+	});
+}
+//#endregion
+export { QuickLinks };
+
+//# sourceMappingURL=quick-links.mjs.map

package/dist/client/storefront/primitives/quick-links.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-links.mjs","names":[],"sources":["../../../../src/client/storefront/primitives/quick-links.tsx"],"sourcesContent":["import { cn } from \"../../ui/utils\"\n\ninterface QuickLink {\n  label: string\n  href: string\n}\n\ninterface QuickLinksProps {\n  links: QuickLink[]\n  className?: string\n}\n\nfunction QuickLinks({ links, className }: QuickLinksProps) {\n  if (links.length === 0) return null\n\n  return (\n    <nav aria-label=\"Quick links\" className={cn(\"overflow-x-auto\", className)}>\n      <ul className=\"flex gap-2\">\n        {links.map((link) => (\n          <li key={link.label+link.href}>\n            <a\n              href={link.href}\n              className=\"inline-flex whitespace-nowrap rounded-[var(--enad-button-radius)] border border-border px-4 py-2 text-sm transition-colors hover:bg-primary hover:text-primary-foreground\"\n            >\n              {link.label}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  )\n}\n\nexport { QuickLinks, type QuickLink, type QuickLinksProps }\n\n"],"mappings":";;;AAYA,SAAS,WAAW,EAAE,OAAO,aAA8B;AACzD,KAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QACE,oBAAC,OAAD;EAAK,cAAW;EAAc,WAAW,GAAG,mBAAmB,UAAU;YACvE,oBAAC,MAAD;GAAI,WAAU;aACX,MAAM,KAAK,SACV,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD;IACE,MAAM,KAAK;IACX,WAAU;cAET,KAAK;IACJ,CAAA,EACD,EAPI,KAAK,QAAM,KAAK,KAOpB,CACL;GACC,CAAA;EACD,CAAA"}

package/dist/client/storefront/primitives/select.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/primitives/select.d.ts
+interface SelectOption {
+  value: string;
+  label: string;
+}
+interface StorefrontSelectProps {
+  options: SelectOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+  className?: string;
+}
+declare function StorefrontSelect({
+  options,
+  value,
+  onValueChange,
+  label,
+  placeholder,
+  disabled,
+  required,
+  error,
+  className
+}: StorefrontSelectProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type SelectOption, StorefrontSelect, type StorefrontSelectProps };
+//# sourceMappingURL=select.d.ts.map

package/dist/client/storefront/primitives/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../../../src/client/storefront/primitives/select.tsx"],"mappings":";;;UAcU,YAAA;EACR,KAAA;EACA,KAAA;AAAA;AAAA,UAGQ,qBAAA;EACR,OAAA,EAAS,YAAA;EACT,KAAA;EACA,aAAA,IAAiB,KAAA;EACjB,KAAA;EACA,WAAA;EACA,QAAA;EACA,QAAA;EACA,KAAA;EACA,SAAA;AAAA;AAAA,iBAGO,gBAAA,CAAA;EACP,OAAA;EACA,KAAA;EACA,aAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,QAAA;EACA,KAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/primitives/select.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import { Label } from "../../ui-resolver/label.mjs";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../../ui-resolver/select.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/primitives/select.tsx
+function StorefrontSelect({ options, value, onValueChange, label, placeholder = "Select...", disabled, required, error, className }) {
+	const id = React$1.useId();
+	const errorId = `${id}-error`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		children: [
+			label && /* @__PURE__ */ jsxs(Label, {
+				htmlFor: id,
+				className: "text-xs font-medium uppercase tracking-wide",
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "text-(--enad-error-color) ml-0.5",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Select, {
+				value,
+				onValueChange,
+				disabled,
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					id,
+					className: "w-full",
+					"aria-invalid": error ? true : void 0,
+					"aria-describedby": error ? errorId : void 0,
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+				}), /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+					value: option.value,
+					children: option.label
+				}, option.value)) }) })]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				className: "text-(--enad-error-color) text-sm",
+				children: error
+			})
+		]
+	});
+}
+//#endregion
+export { StorefrontSelect };
+
+//# sourceMappingURL=select.mjs.map

package/dist/client/storefront/primitives/select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.mjs","names":["React"],"sources":["../../../../src/client/storefront/primitives/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../../ui-resolver/select\";\nimport { Label } from \"../../ui-resolver/label\";\nimport { cn } from \"../../ui/utils\";\n\ninterface SelectOption {\n  value: string;\n  label: string;\n}\n\ninterface StorefrontSelectProps {\n  options: SelectOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  error?: string;\n  className?: string;\n}\n\nfunction StorefrontSelect({\n  options,\n  value,\n  onValueChange,\n  label,\n  placeholder = \"Select...\",\n  disabled,\n  required,\n  error,\n  className,\n}: StorefrontSelectProps) {\n  const id = React.useId();\n  const errorId = `${id}-error`;\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", className)}>\n      {label && (\n        <Label htmlFor={id} className=\"text-xs font-medium uppercase tracking-wide\">\n          {label}\n          {required && <span className=\"text-(--enad-error-color) ml-0.5\">*</span>}\n        </Label>\n      )}\n      <Select value={value} onValueChange={onValueChange} disabled={disabled}>\n        <SelectTrigger\n          id={id}\n          className=\"w-full\"\n          aria-invalid={error ? true : undefined}\n          aria-describedby={error ? errorId : undefined}\n        >\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      {error && (\n        <p id={errorId} role=\"alert\" className=\"text-(--enad-error-color) text-sm\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n\nexport { StorefrontSelect, type StorefrontSelectProps, type SelectOption };\n"],"mappings":";;;;;;;AA+BA,SAAS,iBAAiB,EACxB,SACA,OACA,eACA,OACA,cAAc,aACd,UACA,UACA,OACA,aACwB;CACxB,MAAM,KAAKA,QAAM,OAAO;CACxB,MAAM,UAAU,GAAG,GAAG;AAEtB,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,UAAU;YAAtD;GACG,SACC,qBAAC,OAAD;IAAO,SAAS;IAAI,WAAU;cAA9B,CACG,OACA,YAAY,oBAAC,QAAD;KAAM,WAAU;eAAmC;KAAQ,CAAA,CAClE;;GAEV,qBAAC,QAAD;IAAe;IAAsB;IAAyB;cAA9D,CACE,oBAAC,eAAD;KACM;KACJ,WAAU;KACV,gBAAc,QAAQ,OAAO,KAAA;KAC7B,oBAAkB,QAAQ,UAAU,KAAA;eAEpC,oBAAC,aAAD,EAA0B,aAAe,CAAA;KAC3B,CAAA,EAChB,oBAAC,eAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UACG,QAAQ,KAAK,WACZ,oBAAC,YAAD;KAA+B,OAAO,OAAO;eAC1C,OAAO;KACG,EAFI,OAAO,MAEX,CACb,EACU,CAAA,EACA,CAAA,CACT;;GACR,SACC,oBAAC,KAAD;IAAG,IAAI;IAAS,MAAK;IAAQ,WAAU;cACpC;IACC,CAAA;GAEF"}

package/dist/client/storefront/primitives/text-link.d.ts

@@ -0,0 +1,16 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/primitives/text-link.d.ts
+interface StorefrontTextLinkProps extends React$1.ComponentProps<"a"> {
+  serif?: boolean;
+}
+declare function StorefrontTextLink({
+  className,
+  serif,
+  children,
+  ...props
+}: StorefrontTextLinkProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StorefrontTextLink, type StorefrontTextLinkProps };
+//# sourceMappingURL=text-link.d.ts.map

package/dist/client/storefront/primitives/text-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.d.ts","names":[],"sources":["../../../../src/client/storefront/primitives/text-link.tsx"],"mappings":";;;;UAIU,uBAAA,SAAgC,OAAA,CAAM,cAAA;EAC9C,KAAA;AAAA;AAAA,iBAGO,kBAAA,CAAA;EAAqB,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/primitives/text-link.mjs

@@ -0,0 +1,20 @@
+import { cn } from "../../ui/utils.mjs";
+import { Button } from "../../ui-resolver/button.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/primitives/text-link.tsx
+function StorefrontTextLink({ className, serif, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "link",
+		asChild: true,
+		className: cn(serif && "font-serif text-2xl", className),
+		children: /* @__PURE__ */ jsx("a", {
+			...props,
+			children
+		})
+	});
+}
+//#endregion
+export { StorefrontTextLink };
+
+//# sourceMappingURL=text-link.mjs.map

package/dist/client/storefront/primitives/text-link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.mjs","names":[],"sources":["../../../../src/client/storefront/primitives/text-link.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button } from \"../../ui-resolver/button\";\nimport { cn } from \"../../ui/utils\";\n\ninterface StorefrontTextLinkProps extends React.ComponentProps<\"a\"> {\n  serif?: boolean;\n}\n\nfunction StorefrontTextLink({ className, serif, children, ...props }: StorefrontTextLinkProps) {\n  return (\n    <Button variant=\"link\" asChild className={cn(serif && \"font-serif text-2xl\", className)}>\n      <a {...props}>{children}</a>\n    </Button>\n  );\n}\n\nexport { StorefrontTextLink, type StorefrontTextLinkProps };\n"],"mappings":";;;;;AAQA,SAAS,mBAAmB,EAAE,WAAW,OAAO,UAAU,GAAG,SAAkC;AAC7F,QACE,oBAAC,QAAD;EAAQ,SAAQ;EAAO,SAAA;EAAQ,WAAW,GAAG,SAAS,uBAAuB,UAAU;YACrF,oBAAC,KAAD;GAAG,GAAI;GAAQ;GAAa,CAAA;EACrB,CAAA"}

package/dist/client/storefront/product/color-swatch.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/product/color-swatch.d.ts
+interface ColorSwatchProps {
+  color: string;
+  selected: boolean;
+  onClick: () => void;
+  label: string;
+  className?: string;
+}
+declare function ColorSwatch({
+  color,
+  selected,
+  onClick,
+  label,
+  className
+}: ColorSwatchProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ColorSwatch, type ColorSwatchProps };
+//# sourceMappingURL=color-swatch.d.ts.map

package/dist/client/storefront/product/color-swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.d.ts","names":[],"sources":["../../../../src/client/storefront/product/color-swatch.tsx"],"mappings":";;;UAKU,gBAAA;EACR,KAAA;EACA,QAAA;EACA,OAAA;EACA,KAAA;EACA,SAAA;AAAA;AAAA,iBAGO,WAAA,CAAA;EAAc,KAAA;EAAO,QAAA;EAAU,OAAA;EAAS,KAAA;EAAO;AAAA,GAAa,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/product/color-swatch.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/product/color-swatch.tsx
+function ColorSwatch({ color, selected, onClick, label, className }) {
+	const bgStyle = React$1.useMemo(() => ({ backgroundColor: color }), [color]);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		className: cn("enad-interactive relative flex size-8 items-center justify-center rounded-full border-2 transition-all hit-area-2", selected ? "border-primary ring-2 ring-primary/30" : "border-transparent hover:border-muted-foreground/30", className),
+		"aria-label": label,
+		"aria-pressed": selected,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "size-6 rounded-full border border-border",
+			style: bgStyle
+		})
+	});
+}
+//#endregion
+export { ColorSwatch };
+
+//# sourceMappingURL=color-swatch.mjs.map

package/dist/client/storefront/product/color-swatch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.mjs","names":["React"],"sources":["../../../../src/client/storefront/product/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\n\ninterface ColorSwatchProps {\n  color: string\n  selected: boolean\n  onClick: () => void\n  label: string\n  className?: string\n}\n\nfunction ColorSwatch({ color, selected, onClick, label, className }: ColorSwatchProps) {\n  const bgStyle = React.useMemo(() => ({ backgroundColor: color }), [color])\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"enad-interactive relative flex size-8 items-center justify-center rounded-full border-2 transition-all hit-area-2\",\n        selected\n          ? \"border-primary ring-2 ring-primary/30\"\n          : \"border-transparent hover:border-muted-foreground/30\",\n        className\n      )}\n      aria-label={label}\n      aria-pressed={selected}\n    >\n      <span\n        className=\"size-6 rounded-full border border-border\"\n        style={bgStyle}\n      />\n    </button>\n  )\n}\n\nexport { ColorSwatch, type ColorSwatchProps }\n"],"mappings":";;;;;AAaA,SAAS,YAAY,EAAE,OAAO,UAAU,SAAS,OAAO,aAA+B;CACrF,MAAM,UAAUA,QAAM,eAAe,EAAE,iBAAiB,OAAO,GAAG,CAAC,MAAM,CAAC;AAE1E,QACE,oBAAC,UAAD;EACE,MAAK;EACI;EACT,WAAW,GACT,qHACA,WACI,0CACA,uDACJ,UACD;EACD,cAAY;EACZ,gBAAc;YAEd,oBAAC,QAAD;GACE,WAAU;GACV,OAAO;GACP,CAAA;EACK,CAAA"}

package/dist/client/storefront/product/index.d.ts

@@ -0,0 +1,5 @@
+import { ColorSwatch, ColorSwatchProps } from "./color-swatch.js";
+import { MaterialOption, MaterialSelector, MaterialSelectorProps } from "./material-selector.js";
+import { QuantityPicker, QuantityPickerProps } from "./quantity-picker.js";
+import { ProductUSP, ProductUSPProps } from "./product-usp.js";
+export { ColorSwatch, type ColorSwatchProps, type MaterialOption, MaterialSelector, type MaterialSelectorProps, ProductUSP, type ProductUSPProps, QuantityPicker, type QuantityPickerProps };

package/dist/client/storefront/product/index.mjs

@@ -0,0 +1,5 @@
+import { QuantityPicker } from "./quantity-picker.mjs";
+import { ColorSwatch } from "./color-swatch.mjs";
+import { MaterialSelector } from "./material-selector.mjs";
+import { ProductUSP } from "./product-usp.mjs";
+export { ColorSwatch, MaterialSelector, ProductUSP, QuantityPicker };

package/dist/client/storefront/product/material-selector.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/product/material-selector.d.ts
+interface MaterialOption {
+  value: string;
+  label: string;
+  image?: string;
+  color?: string;
+}
+interface MaterialSelectorProps {
+  options: MaterialOption[];
+  selected: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+declare function MaterialSelector({
+  options,
+  selected,
+  onChange,
+  className
+}: MaterialSelectorProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type MaterialOption, MaterialSelector, type MaterialSelectorProps };
+//# sourceMappingURL=material-selector.d.ts.map

package/dist/client/storefront/product/material-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"material-selector.d.ts","names":[],"sources":["../../../../src/client/storefront/product/material-selector.tsx"],"mappings":";;;UAKU,cAAA;EACR,KAAA;EACA,KAAA;EACA,KAAA;EACA,KAAA;AAAA;AAAA,UAGQ,qBAAA;EACR,OAAA,EAAS,cAAA;EACT,QAAA;EACA,QAAA,GAAW,KAAA;EACX,SAAA;AAAA;AAAA,iBAGO,gBAAA,CAAA;EAAmB,OAAA;EAAS,QAAA;EAAU,QAAA;EAAU;AAAA,GAAa,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/product/material-selector.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/product/material-selector.tsx
+function MaterialSelector({ options, selected, onChange, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": "Select material",
+		className: cn("flex flex-wrap gap-3", className),
+		children: options.map((option) => {
+			const isSelected = option.value === selected;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": isSelected,
+				"aria-label": option.label,
+				onClick: () => onChange(option.value),
+				className: cn("enad-interactive flex size-12 items-center justify-center overflow-hidden rounded-full border-2 transition-all", isSelected ? "border-primary ring-2 ring-primary/30" : "border-transparent hover:border-muted-foreground/30"),
+				children: option.image ? /* @__PURE__ */ jsx("img", {
+					src: option.image,
+					alt: option.label,
+					className: "size-full rounded-full object-cover"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "size-full rounded-full",
+					style: { backgroundColor: option.color ?? "#ccc" }
+				})
+			}, option.value);
+		})
+	});
+}
+//#endregion
+export { MaterialSelector };
+
+//# sourceMappingURL=material-selector.mjs.map

package/dist/client/storefront/product/material-selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"material-selector.mjs","names":[],"sources":["../../../../src/client/storefront/product/material-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\n\ninterface MaterialOption {\n  value: string\n  label: string\n  image?: string\n  color?: string\n}\n\ninterface MaterialSelectorProps {\n  options: MaterialOption[]\n  selected: string\n  onChange: (value: string) => void\n  className?: string\n}\n\nfunction MaterialSelector({ options, selected, onChange, className }: MaterialSelectorProps) {\n  return (\n    <div role=\"radiogroup\" aria-label=\"Select material\" className={cn(\"flex flex-wrap gap-3\", className)}>\n      {options.map((option) => {\n        const isSelected = option.value === selected\n\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            aria-label={option.label}\n            onClick={() => onChange(option.value)}\n            className={cn(\n              \"enad-interactive flex size-12 items-center justify-center overflow-hidden rounded-full border-2 transition-all\",\n              isSelected\n                ? \"border-primary ring-2 ring-primary/30\"\n                : \"border-transparent hover:border-muted-foreground/30\"\n            )}\n          >\n            {option.image ? (\n              <img\n                src={option.image}\n                alt={option.label}\n                className=\"size-full rounded-full object-cover\"\n              />\n            ) : (\n              <span className=\"size-full rounded-full\" style={{ backgroundColor: option.color ?? \"#ccc\" }} />\n            )}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n\nexport { MaterialSelector, type MaterialSelectorProps, type MaterialOption }\n"],"mappings":";;;;;AAmBA,SAAS,iBAAiB,EAAE,SAAS,UAAU,UAAU,aAAoC;AAC3F,QACE,oBAAC,OAAD;EAAK,MAAK;EAAa,cAAW;EAAkB,WAAW,GAAG,wBAAwB,UAAU;YACjG,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,OAAO,UAAU;AAEpC,UACE,oBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,gBAAc;IACd,cAAY,OAAO;IACnB,eAAe,SAAS,OAAO,MAAM;IACrC,WAAW,GACT,kHACA,aACI,0CACA,sDACL;cAEA,OAAO,QACN,oBAAC,OAAD;KACE,KAAK,OAAO;KACZ,KAAK,OAAO;KACZ,WAAU;KACV,CAAA,GAEF,oBAAC,QAAD;KAAM,WAAU;KAAyB,OAAO,EAAE,iBAAiB,OAAO,SAAS,QAAQ;KAAI,CAAA;IAE1F,EAtBF,OAAO,MAsBL;IAEX;EACE,CAAA"}

package/dist/client/storefront/product/product-usp.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/product/product-usp.d.ts
+interface ProductUSPProps {
+  text: string;
+  className?: string;
+}
+declare function ProductUSP({
+  text,
+  className
+}: ProductUSPProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProductUSP, type ProductUSPProps };
+//# sourceMappingURL=product-usp.d.ts.map

package/dist/client/storefront/product/product-usp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-usp.d.ts","names":[],"sources":["../../../../src/client/storefront/product/product-usp.tsx"],"mappings":";;;UAIU,eAAA;EACR,IAAA;EACA,SAAA;AAAA;AAAA,iBAGO,UAAA,CAAA;EAAa,IAAA;EAAM;AAAA,GAAa,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/product/product-usp.mjs

@@ -0,0 +1,19 @@
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/product/product-usp.tsx
+function ProductUSP({ text, className }) {
+	const CheckIcon = useIcon("check");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-green-500" }), /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-muted-foreground",
+			children: text
+		})]
+	});
+}
+//#endregion
+export { ProductUSP };
+
+//# sourceMappingURL=product-usp.mjs.map

package/dist/client/storefront/product/product-usp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-usp.mjs","names":[],"sources":["../../../../src/client/storefront/product/product-usp.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { cn } from \"../../ui/utils\"\n\ninterface ProductUSPProps {\n  text: string\n  className?: string\n}\n\nfunction ProductUSP({ text, className }: ProductUSPProps) {\n  const CheckIcon = useIcon(\"check\")\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <CheckIcon className=\"size-4 shrink-0 text-green-500\" />\n      <span className=\"text-sm text-muted-foreground\">{text}</span>\n    </div>\n  )\n}\n\nexport { ProductUSP, type ProductUSPProps }\n"],"mappings":";;;;;AASA,SAAS,WAAW,EAAE,MAAM,aAA8B;CACxD,MAAM,YAAY,QAAQ,QAAQ;AAClC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,2BAA2B,UAAU;YAAxD,CACE,oBAAC,WAAD,EAAW,WAAU,kCAAmC,CAAA,EACxD,oBAAC,QAAD;GAAM,WAAU;aAAiC;GAAY,CAAA,CACzD"}

package/dist/client/storefront/product/quantity-picker.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/product/quantity-picker.d.ts
+interface QuantityPickerProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  size?: "sm" | "default";
+  className?: string;
+}
+declare function QuantityPicker({
+  value,
+  onChange,
+  min,
+  max,
+  size,
+  className
+}: QuantityPickerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { QuantityPicker, type QuantityPickerProps };
+//# sourceMappingURL=quantity-picker.d.ts.map

package/dist/client/storefront/product/quantity-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-picker.d.ts","names":[],"sources":["../../../../src/client/storefront/product/quantity-picker.tsx"],"mappings":";;;UAOU,mBAAA;EACR,KAAA;EACA,QAAA,GAAW,KAAA;EACX,GAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;AAAA;AAAA,iBAGO,cAAA,CAAA;EACP,KAAA;EACA,QAAA;EACA,GAAA;EACA,GAAA;EACA,IAAA;EACA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/product/quantity-picker.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/product/quantity-picker.tsx
+function QuantityPicker({ value, onChange, min = 1, max = 99, size = "default", className }) {
+	const MinusIcon = useIcon("minus");
+	const PlusIcon = useIcon("plus");
+	const atMin = value <= min;
+	const atMax = value >= max;
+	const compact = size === "sm";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center gap-0 rounded-[var(--enad-input-radius)] border border-input", className),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				onClick: () => onChange(Math.max(min, value - 1)),
+				disabled: atMin,
+				"aria-label": "Decrease quantity",
+				className: cn("rounded-none rounded-l-[var(--enad-input-radius)]", compact ? "h-5 w-5" : "hit-area-y-1"),
+				children: /* @__PURE__ */ jsx(MinusIcon, { className: compact ? "size-3" : "size-4" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("flex items-center justify-center font-medium tabular-nums", compact ? "h-5 w-8 text-xs" : "size-9 text-sm"),
+				"aria-live": "polite",
+				"aria-label": `Quantity: ${value}`,
+				children: value
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				onClick: () => onChange(Math.min(max, value + 1)),
+				disabled: atMax,
+				"aria-label": "Increase quantity",
+				className: cn("rounded-none rounded-r-[var(--enad-input-radius)]", compact ? "h-5 w-5" : "hit-area-y-1"),
+				children: /* @__PURE__ */ jsx(PlusIcon, { className: compact ? "size-3" : "size-4" })
+			})
+		]
+	});
+}
+//#endregion
+export { QuantityPicker };
+
+//# sourceMappingURL=quantity-picker.mjs.map

package/dist/client/storefront/product/quantity-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-picker.mjs","names":[],"sources":["../../../../src/client/storefront/product/quantity-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Button } from \"../../ui/button\";\nimport { cn } from \"../../ui/utils\";\n\ninterface QuantityPickerProps {\n  value: number;\n  onChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  size?: \"sm\" | \"default\";\n  className?: string;\n}\n\nfunction QuantityPicker({\n  value,\n  onChange,\n  min = 1,\n  max = 99,\n  size = \"default\",\n  className,\n}: QuantityPickerProps) {\n  const MinusIcon = useIcon(\"minus\");\n  const PlusIcon = useIcon(\"plus\");\n  const atMin = value <= min;\n  const atMax = value >= max;\n\n  const compact = size === \"sm\";\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex items-center gap-0 rounded-[var(--enad-input-radius)] border border-input\",\n        className,\n      )}\n    >\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        onClick={() => onChange(Math.max(min, value - 1))}\n        disabled={atMin}\n        aria-label=\"Decrease quantity\"\n        className={cn(\n          \"rounded-none rounded-l-[var(--enad-input-radius)]\",\n          compact ? \"h-5 w-5\" : \"hit-area-y-1\",\n        )}\n      >\n        <MinusIcon className={compact ? \"size-3\" : \"size-4\"} />\n      </Button>\n\n      <span\n        className={cn(\n          \"flex items-center justify-center font-medium tabular-nums\",\n          compact ? \"h-5 w-8 text-xs\" : \"size-9 text-sm\",\n        )}\n        aria-live=\"polite\"\n        aria-label={`Quantity: ${value}`}\n      >\n        {value}\n      </span>\n\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        onClick={() => onChange(Math.min(max, value + 1))}\n        disabled={atMax}\n        aria-label=\"Increase quantity\"\n        className={cn(\n          \"rounded-none rounded-r-[var(--enad-input-radius)]\",\n          compact ? \"h-5 w-5\" : \"hit-area-y-1\",\n        )}\n      >\n        <PlusIcon className={compact ? \"size-3\" : \"size-4\"} />\n      </Button>\n    </div>\n  );\n}\n\nexport { QuantityPicker, type QuantityPickerProps };\n"],"mappings":";;;;;;;AAgBA,SAAS,eAAe,EACtB,OACA,UACA,MAAM,GACN,MAAM,IACN,OAAO,WACP,aACsB;CACtB,MAAM,YAAY,QAAQ,QAAQ;CAClC,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,MAAM,UAAU,SAAS;AAEzB,QACE,qBAAC,OAAD;EACE,WAAW,GACT,yFACA,UACD;YAJH;GAME,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAe,SAAS,KAAK,IAAI,KAAK,QAAQ,EAAE,CAAC;IACjD,UAAU;IACV,cAAW;IACX,WAAW,GACT,qDACA,UAAU,YAAY,eACvB;cAED,oBAAC,WAAD,EAAW,WAAW,UAAU,WAAW,UAAY,CAAA;IAChD,CAAA;GAET,oBAAC,QAAD;IACE,WAAW,GACT,6DACA,UAAU,oBAAoB,iBAC/B;IACD,aAAU;IACV,cAAY,aAAa;cAExB;IACI,CAAA;GAEP,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAe,SAAS,KAAK,IAAI,KAAK,QAAQ,EAAE,CAAC;IACjD,UAAU;IACV,cAAW;IACX,WAAW,GACT,qDACA,UAAU,YAAY,eACvB;cAED,oBAAC,UAAD,EAAU,WAAW,UAAU,WAAW,UAAY,CAAA;IAC/C,CAAA;GACL"}