@enadhq/enad-react-sdk 1.1.0 → 1.3.0

package/dist/client/cart/components/cart-drawer.mjs

@@ -37,7 +37,7 @@ function CartEmptyState({ message, onClose, buttonLabel }) {
 			children: message
 		}), /* @__PURE__ */ jsx(Button, {
 			onClick: onClose,
-			variant: "outline",
+			variant: "outlined",
 			children: buttonLabel
 		})]
 	});
@@ -64,7 +64,7 @@ function CartItemDetails({ item, currencyCode, onClose, onUpdateQuantity, onRemo
 				onClick: onClose,
 				children: item.displayName
 			}), /* @__PURE__ */ jsx(Button, {
-				variant: "ghost",
+				variant: "plain",
 				size: "icon",
 				className: "h-5 w-5 flex-shrink-0",
 				onClick: () => onRemove(item.id),
@@ -236,7 +236,7 @@ function CartDrawer({ isOpen, onClose, className, labels = {} }) {
 						children: title
 					}), /* @__PURE__ */ jsx(Button, {
 						ref: closeButtonRef,
-						variant: "ghost",
+						variant: "plain",
 						size: "icon",
 						onClick: onClose,
 						"aria-label": "Close cart",

package/dist/client/cart/components/cart-drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cart-drawer.mjs","names":[],"sources":["../../../../src/client/cart/components/cart-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useCallback } from \"react\";\nimport { useCart } from \"../../cart/hooks/useCart\";\nimport type { CartItem, CartTotals as CartTotalsType } from \"../../cart/types/adapter\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Button } from \"../../ui/button\";\nimport { Price } from \"../../storefront/components/price\";\nimport { QuantityPicker } from \"../../storefront/product/quantity-picker\";\n\nexport interface CartDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  className?: string;\n  labels?: {\n    title?: string;\n    emptyCartMessage?: string;\n    continueShopping?: string;\n    subtotal?: string;\n    discount?: string;\n    tax?: string;\n    total?: string;\n    proceedToCheckout?: string;\n  };\n}\n\nfunction CartLoadingSkeleton() {\n  return (\n    <div className=\"space-y-6\" aria-busy=\"true\" aria-label=\"Loading cart items\">\n      {[1, 2, 3].map((i) => (\n        <div key={i} className=\"flex gap-4 animate-pulse\">\n          <div className=\"w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <div className=\"h-4 w-3/4 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n            <div className=\"h-4 w-1/3 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n            <div className=\"h-4 w-1/4 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction CartEmptyState({\n  message,\n  onClose,\n  buttonLabel,\n}: {\n  message: string;\n  onClose: () => void;\n  buttonLabel: string;\n}) {\n  return (\n    <div className=\"flex flex-col items-center justify-center h-full text-center\">\n      <p className=\"text-(--enad-text-muted-color) mb-4\">{message}</p>\n      <Button onClick={onClose} variant=\"outline\">\n        {buttonLabel}\n      </Button>\n    </div>\n  );\n}\n\nfunction CartItemImage({ imageUrl, alt }: { imageUrl?: string; alt: string }) {\n  return (\n    <div className=\"relative w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius) overflow-hidden\">\n      {imageUrl ? (\n        <img src={imageUrl} alt={alt} className=\"object-cover\" />\n      ) : (\n        <div className=\"w-full h-full bg-(--enad-border-color)\" />\n      )}\n    </div>\n  );\n}\n\nfunction CartItemDetails({\n  item,\n  currencyCode,\n  onClose,\n  onUpdateQuantity,\n  onRemove,\n}: {\n  item: CartItem;\n  currencyCode: string;\n  onClose: () => void;\n  onUpdateQuantity: (itemId: string, quantity: number) => void;\n  onRemove: (itemId: string) => void;\n}) {\n  const TrashIcon = useIcon(\"trash\");\n\n  return (\n    <div className=\"flex flex-1 min-w-0 justify-between flex-col\">\n      <div className=\"flex justify-between gap-2 mb-2\">\n        <a\n          href={`/products/${item.productSlug || item.productVariantId}`}\n          className=\"font-medium text-sm text-(--enad-link-color) hover:text-(--enad-link-hover-color) transition-colors\"\n          onClick={onClose}\n        >\n          {item.displayName}\n        </a>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"h-5 w-5 flex-shrink-0\"\n          onClick={() => onRemove(item.id)}\n          aria-label={`Remove ${item.displayName}`}\n        >\n          <TrashIcon className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      <div>\n        <Price\n          amount={item.unitPrice.amount / 100}\n          currency={currencyCode}\n          className=\"text-sm text-(--enad-text-muted-color) mb-1\"\n        />\n\n        <QuantityPicker\n          value={item.quantity}\n          onChange={(qty) => onUpdateQuantity(item.id, qty)}\n          size=\"sm\"\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction CartItemRow({\n  item,\n  currencyCode,\n  onClose,\n  onUpdateQuantity,\n  onRemove,\n}: {\n  item: CartItem;\n  currencyCode: string;\n  onClose: () => void;\n  onUpdateQuantity: (itemId: string, quantity: number) => void;\n  onRemove: (itemId: string) => void;\n}) {\n  return (\n    <div className=\"flex gap-4\" role=\"listitem\">\n      <CartItemImage imageUrl={item.imageUrl} alt={item.displayName} />\n      <CartItemDetails\n        item={item}\n        currencyCode={currencyCode}\n        onClose={onClose}\n        onUpdateQuantity={onUpdateQuantity}\n        onRemove={onRemove}\n      />\n    </div>\n  );\n}\n\nfunction CartTotals({\n  totals,\n  currencyCode,\n  labels,\n}: {\n  totals: CartTotalsType;\n  currencyCode: string;\n  labels: {\n    subtotal: string;\n    discount: string;\n    tax: string;\n    total: string;\n    proceedToCheckout: string;\n  };\n}) {\n  return (\n    <div className=\"p-6 space-y-4\">\n      <div className=\"flex justify-between text-sm\">\n        <span className=\"text-(--enad-text-muted-color)\">{labels.subtotal}</span>\n        <Price amount={totals.subtotal.amount / 100} currency={currencyCode} />\n      </div>\n\n      {totals.discount.amount > 0 && (\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-(--enad-text-muted-color)\">{labels.discount}</span>\n          <span className=\"text-(--enad-success-color)\">\n            -<Price amount={totals.discount.amount / 100} currency={currencyCode} />\n          </span>\n        </div>\n      )}\n\n      {totals.tax.amount > 0 && (\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-(--enad-text-muted-color)\">{labels.tax}</span>\n          <Price amount={totals.tax.amount / 100} currency={currencyCode} />\n        </div>\n      )}\n\n      <div className=\"flex justify-between text-lg font-bold pt-4 border-t border-(--enad-border-color)\">\n        <span className=\"text-(--enad-text-primary-color)\">{labels.total}</span>\n        <Price amount={totals.total.amount / 100} currency={currencyCode} />\n      </div>\n\n      <Button className=\"w-full py-6 text-sm font-medium uppercase tracking-wider\" size=\"lg\">\n        {labels.proceedToCheckout}\n      </Button>\n    </div>\n  );\n}\n\nfunction useCartDrawer(isOpen: boolean, onClose: () => void) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const { cart, isLoading, removeItem, updateItem } = useCart();\n\n  useEffect(() => {\n    if (isOpen) {\n      const timer = setTimeout(() => closeButtonRef.current?.focus(), 100);\n      return () => clearTimeout(timer);\n    }\n  }, [isOpen]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  const handleUpdateQuantity = (itemId: string, newQuantity: number) => {\n    updateItem({ itemId, quantity: newQuantity });\n  };\n\n  const handleRemoveItem = (itemId: string) => {\n    removeItem({ itemId });\n  };\n\n  return {\n    drawerRef,\n    closeButtonRef,\n    cart,\n    isLoading,\n    items: cart?.items || [],\n    totals: cart?.totals,\n    currencyCode: cart?.currencyCode || \"SEK\",\n    handleKeyDown,\n    handleUpdateQuantity,\n    handleRemoveItem,\n  };\n}\n\nfunction CartContent({\n  isLoading,\n  items,\n  currencyCode,\n  emptyCartMessage,\n  continueShopping,\n  onClose,\n  onUpdateQuantity,\n  onRemove,\n}: {\n  isLoading: boolean;\n  items: CartItem[];\n  currencyCode: string;\n  emptyCartMessage: string;\n  continueShopping: string;\n  onClose: () => void;\n  onUpdateQuantity: (itemId: string, quantity: number) => void;\n  onRemove: (itemId: string) => void;\n}) {\n  if (isLoading) return <CartLoadingSkeleton />;\n  if (items.length === 0) {\n    return (\n      <CartEmptyState message={emptyCartMessage} onClose={onClose} buttonLabel={continueShopping} />\n    );\n  }\n  return (\n    <div className=\"space-y-6\" role=\"list\" aria-label=\"Cart items\">\n      {items.map((item) => (\n        <CartItemRow\n          key={item.id}\n          item={item}\n          currencyCode={currencyCode}\n          onClose={onClose}\n          onUpdateQuantity={onUpdateQuantity}\n          onRemove={onRemove}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function CartDrawer({ isOpen, onClose, className, labels = {} }: CartDrawerProps) {\n  const CloseIcon = useIcon(\"close\");\n\n  const {\n    title = \"Shopping Cart\",\n    emptyCartMessage = \"Your cart is empty\",\n    continueShopping = \"Continue Shopping\",\n    subtotal = \"Subtotal\",\n    discount = \"Discount\",\n    tax = \"Tax\",\n    total = \"Total\",\n    proceedToCheckout = \"Proceed to Checkout\",\n  } = labels;\n\n  const {\n    drawerRef,\n    closeButtonRef,\n    isLoading,\n    items,\n    totals,\n    currencyCode,\n    handleKeyDown,\n    handleUpdateQuantity,\n    handleRemoveItem,\n  } = useCartDrawer(isOpen, onClose);\n\n  return (\n    <>\n      <div\n        className={`fixed font-enad inset-0 bg-black/60 backdrop-blur-sm z-50 transition-opacity duration-300 motion-reduce:transition-none ${\n          isOpen ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\n        }`}\n        onClick={onClose}\n        aria-hidden=\"true\"\n      />\n\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={title}\n        onKeyDown={handleKeyDown}\n        className={`fixed top-0 right-0 h-full w-full md:w-[480px] bg-(--enad-surface) z-50 transform transition-transform duration-300 ease-in-out motion-reduce:transition-none ${\n          isOpen ? \"translate-x-0\" : \"translate-x-full\"\n        } ${className ?? \"\"}`}\n      >\n        <div className=\"flex flex-col h-full\">\n          <div className=\"flex items-center justify-between p-6\">\n            <h2 className=\"text-xl font-heading font-bold tracking-wider uppercase text-(--enad-text-primary-color)\">\n              {title}\n            </h2>\n            <Button\n              ref={closeButtonRef}\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={onClose}\n              aria-label=\"Close cart\"\n            >\n              <CloseIcon className=\"h-5 w-5\" />\n            </Button>\n          </div>\n\n          <div className=\"flex-1 overflow-y-auto p-6\">\n            <CartContent\n              isLoading={isLoading}\n              items={items}\n              currencyCode={currencyCode}\n              emptyCartMessage={emptyCartMessage}\n              continueShopping={continueShopping}\n              onClose={onClose}\n              onUpdateQuantity={handleUpdateQuantity}\n              onRemove={handleRemoveItem}\n            />\n          </div>\n\n          {items.length > 0 && totals && (\n            <CartTotals\n              totals={totals}\n              currencyCode={currencyCode}\n              labels={{ subtotal, discount, tax, total, proceedToCheckout }}\n            />\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"cart-drawer.mjs","names":[],"sources":["../../../../src/client/cart/components/cart-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useCallback } from \"react\";\nimport { useCart } from \"../../cart/hooks/useCart\";\nimport type { CartItem, CartTotals as CartTotalsType } from \"../../cart/types/adapter\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Button } from \"../../ui/button\";\nimport { Price } from \"../../storefront/components/price\";\nimport { QuantityPicker } from \"../../storefront/product/quantity-picker\";\n\nexport interface CartDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  className?: string;\n  labels?: {\n    title?: string;\n    emptyCartMessage?: string;\n    continueShopping?: string;\n    subtotal?: string;\n    discount?: string;\n    tax?: string;\n    total?: string;\n    proceedToCheckout?: string;\n  };\n}\n\nfunction CartLoadingSkeleton() {\n  return (\n    <div className=\"space-y-6\" aria-busy=\"true\" aria-label=\"Loading cart items\">\n      {[1, 2, 3].map((i) => (\n        <div key={i} className=\"flex gap-4 animate-pulse\">\n          <div className=\"w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <div className=\"h-4 w-3/4 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n            <div className=\"h-4 w-1/3 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n            <div className=\"h-4 w-1/4 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction CartEmptyState({\n  message,\n  onClose,\n  buttonLabel,\n}: {\n  message: string;\n  onClose: () => void;\n  buttonLabel: string;\n}) {\n  return (\n    <div className=\"flex flex-col items-center justify-center h-full text-center\">\n      <p className=\"text-(--enad-text-muted-color) mb-4\">{message}</p>\n      <Button onClick={onClose} variant=\"outlined\">\n        {buttonLabel}\n      </Button>\n    </div>\n  );\n}\n\nfunction CartItemImage({ imageUrl, alt }: { imageUrl?: string; alt: string }) {\n  return (\n    <div className=\"relative w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius) overflow-hidden\">\n      {imageUrl ? (\n        <img src={imageUrl} alt={alt} className=\"object-cover\" />\n      ) : (\n        <div className=\"w-full h-full bg-(--enad-border-color)\" />\n      )}\n    </div>\n  );\n}\n\nfunction CartItemDetails({\n  item,\n  currencyCode,\n  onClose,\n  onUpdateQuantity,\n  onRemove,\n}: {\n  item: CartItem;\n  currencyCode: string;\n  onClose: () => void;\n  onUpdateQuantity: (itemId: string, quantity: number) => void;\n  onRemove: (itemId: string) => void;\n}) {\n  const TrashIcon = useIcon(\"trash\");\n\n  return (\n    <div className=\"flex flex-1 min-w-0 justify-between flex-col\">\n      <div className=\"flex justify-between gap-2 mb-2\">\n        <a\n          href={`/products/${item.productSlug || item.productVariantId}`}\n          className=\"font-medium text-sm text-(--enad-link-color) hover:text-(--enad-link-hover-color) transition-colors\"\n          onClick={onClose}\n        >\n          {item.displayName}\n        </a>\n        <Button\n          variant=\"plain\"\n          size=\"icon\"\n          className=\"h-5 w-5 flex-shrink-0\"\n          onClick={() => onRemove(item.id)}\n          aria-label={`Remove ${item.displayName}`}\n        >\n          <TrashIcon className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      <div>\n        <Price\n          amount={item.unitPrice.amount / 100}\n          currency={currencyCode}\n          className=\"text-sm text-(--enad-text-muted-color) mb-1\"\n        />\n\n        <QuantityPicker\n          value={item.quantity}\n          onChange={(qty) => onUpdateQuantity(item.id, qty)}\n          size=\"sm\"\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction CartItemRow({\n  item,\n  currencyCode,\n  onClose,\n  onUpdateQuantity,\n  onRemove,\n}: {\n  item: CartItem;\n  currencyCode: string;\n  onClose: () => void;\n  onUpdateQuantity: (itemId: string, quantity: number) => void;\n  onRemove: (itemId: string) => void;\n}) {\n  return (\n    <div className=\"flex gap-4\" role=\"listitem\">\n      <CartItemImage imageUrl={item.imageUrl} alt={item.displayName} />\n      <CartItemDetails\n        item={item}\n        currencyCode={currencyCode}\n        onClose={onClose}\n        onUpdateQuantity={onUpdateQuantity}\n        onRemove={onRemove}\n      />\n    </div>\n  );\n}\n\nfunction CartTotals({\n  totals,\n  currencyCode,\n  labels,\n}: {\n  totals: CartTotalsType;\n  currencyCode: string;\n  labels: {\n    subtotal: string;\n    discount: string;\n    tax: string;\n    total: string;\n    proceedToCheckout: string;\n  };\n}) {\n  return (\n    <div className=\"p-6 space-y-4\">\n      <div className=\"flex justify-between text-sm\">\n        <span className=\"text-(--enad-text-muted-color)\">{labels.subtotal}</span>\n        <Price amount={totals.subtotal.amount / 100} currency={currencyCode} />\n      </div>\n\n      {totals.discount.amount > 0 && (\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-(--enad-text-muted-color)\">{labels.discount}</span>\n          <span className=\"text-(--enad-success-color)\">\n            -<Price amount={totals.discount.amount / 100} currency={currencyCode} />\n          </span>\n        </div>\n      )}\n\n      {totals.tax.amount > 0 && (\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-(--enad-text-muted-color)\">{labels.tax}</span>\n          <Price amount={totals.tax.amount / 100} currency={currencyCode} />\n        </div>\n      )}\n\n      <div className=\"flex justify-between text-lg font-bold pt-4 border-t border-(--enad-border-color)\">\n        <span className=\"text-(--enad-text-primary-color)\">{labels.total}</span>\n        <Price amount={totals.total.amount / 100} currency={currencyCode} />\n      </div>\n\n      <Button className=\"w-full py-6 text-sm font-medium uppercase tracking-wider\" size=\"lg\">\n        {labels.proceedToCheckout}\n      </Button>\n    </div>\n  );\n}\n\nfunction useCartDrawer(isOpen: boolean, onClose: () => void) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const { cart, isLoading, removeItem, updateItem } = useCart();\n\n  useEffect(() => {\n    if (isOpen) {\n      const timer = setTimeout(() => closeButtonRef.current?.focus(), 100);\n      return () => clearTimeout(timer);\n    }\n  }, [isOpen]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  const handleUpdateQuantity = (itemId: string, newQuantity: number) => {\n    updateItem({ itemId, quantity: newQuantity });\n  };\n\n  const handleRemoveItem = (itemId: string) => {\n    removeItem({ itemId });\n  };\n\n  return {\n    drawerRef,\n    closeButtonRef,\n    cart,\n    isLoading,\n    items: cart?.items || [],\n    totals: cart?.totals,\n    currencyCode: cart?.currencyCode || \"SEK\",\n    handleKeyDown,\n    handleUpdateQuantity,\n    handleRemoveItem,\n  };\n}\n\nfunction CartContent({\n  isLoading,\n  items,\n  currencyCode,\n  emptyCartMessage,\n  continueShopping,\n  onClose,\n  onUpdateQuantity,\n  onRemove,\n}: {\n  isLoading: boolean;\n  items: CartItem[];\n  currencyCode: string;\n  emptyCartMessage: string;\n  continueShopping: string;\n  onClose: () => void;\n  onUpdateQuantity: (itemId: string, quantity: number) => void;\n  onRemove: (itemId: string) => void;\n}) {\n  if (isLoading) return <CartLoadingSkeleton />;\n  if (items.length === 0) {\n    return (\n      <CartEmptyState message={emptyCartMessage} onClose={onClose} buttonLabel={continueShopping} />\n    );\n  }\n  return (\n    <div className=\"space-y-6\" role=\"list\" aria-label=\"Cart items\">\n      {items.map((item) => (\n        <CartItemRow\n          key={item.id}\n          item={item}\n          currencyCode={currencyCode}\n          onClose={onClose}\n          onUpdateQuantity={onUpdateQuantity}\n          onRemove={onRemove}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function CartDrawer({ isOpen, onClose, className, labels = {} }: CartDrawerProps) {\n  const CloseIcon = useIcon(\"close\");\n\n  const {\n    title = \"Shopping Cart\",\n    emptyCartMessage = \"Your cart is empty\",\n    continueShopping = \"Continue Shopping\",\n    subtotal = \"Subtotal\",\n    discount = \"Discount\",\n    tax = \"Tax\",\n    total = \"Total\",\n    proceedToCheckout = \"Proceed to Checkout\",\n  } = labels;\n\n  const {\n    drawerRef,\n    closeButtonRef,\n    isLoading,\n    items,\n    totals,\n    currencyCode,\n    handleKeyDown,\n    handleUpdateQuantity,\n    handleRemoveItem,\n  } = useCartDrawer(isOpen, onClose);\n\n  return (\n    <>\n      <div\n        className={`fixed font-enad inset-0 bg-black/60 backdrop-blur-sm z-50 transition-opacity duration-300 motion-reduce:transition-none ${\n          isOpen ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\n        }`}\n        onClick={onClose}\n        aria-hidden=\"true\"\n      />\n\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={title}\n        onKeyDown={handleKeyDown}\n        className={`fixed top-0 right-0 h-full w-full md:w-[480px] bg-(--enad-surface) z-50 transform transition-transform duration-300 ease-in-out motion-reduce:transition-none ${\n          isOpen ? \"translate-x-0\" : \"translate-x-full\"\n        } ${className ?? \"\"}`}\n      >\n        <div className=\"flex flex-col h-full\">\n          <div className=\"flex items-center justify-between p-6\">\n            <h2 className=\"text-xl font-heading font-bold tracking-wider uppercase text-(--enad-text-primary-color)\">\n              {title}\n            </h2>\n            <Button\n              ref={closeButtonRef}\n              variant=\"plain\"\n              size=\"icon\"\n              onClick={onClose}\n              aria-label=\"Close cart\"\n            >\n              <CloseIcon className=\"h-5 w-5\" />\n            </Button>\n          </div>\n\n          <div className=\"flex-1 overflow-y-auto p-6\">\n            <CartContent\n              isLoading={isLoading}\n              items={items}\n              currencyCode={currencyCode}\n              emptyCartMessage={emptyCartMessage}\n              continueShopping={continueShopping}\n              onClose={onClose}\n              onUpdateQuantity={handleUpdateQuantity}\n              onRemove={handleRemoveItem}\n            />\n          </div>\n\n          {items.length > 0 && totals && (\n            <CartTotals\n              totals={totals}\n              currencyCode={currencyCode}\n              labels={{ subtotal, discount, tax, total, proceedToCheckout }}\n            />\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/client/cart/components/cart-trigger.mjs

@@ -11,7 +11,7 @@ function CartTrigger({ isOpen, onOpenChange, labels = {}, className = "" }) {
 	const itemCount = cart?.items?.reduce((total, item) => total + item.quantity, 0) ?? 0;
 	const ariaLabel = itemCount > 0 ? `${cartLabel} (${itemCount} ${itemCount === 1 ? "item" : "items"})` : cartLabel;
 	return /* @__PURE__ */ jsxs(Button, {
-		variant: "ghost",
+		variant: "plain",
 		className: `relative size-10 ${className}`,
 		onClick: () => onOpenChange(!isOpen),
 		"aria-label": ariaLabel,

package/dist/client/cart/components/cart-trigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cart-trigger.mjs","names":[],"sources":["../../../../src/client/cart/components/cart-trigger.tsx"],"sourcesContent":["\"use client\"\n\nimport { Button } from \"../../ui/button\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { useCart } from \"../hooks/useCart\"\n\nexport interface CartTriggerProps {\n  isOpen: boolean\n  onOpenChange: (open: boolean) => void\n  labels?: {\n    cartLabel?: string\n  }\n  className?: string\n}\n\nexport function CartTrigger({\n  isOpen,\n  onOpenChange,\n  labels = {},\n  className = \"\",\n}: CartTriggerProps) {\n  const CartIcon = useIcon(\"cart\")\n  const { cartLabel = \"Cart\" } = labels\n  const { cart } = useCart()\n\n  const itemCount =\n    cart?.items?.reduce((total, item) => total + item.quantity, 0) ?? 0\n\n  const ariaLabel =\n    itemCount > 0\n      ? `${cartLabel} (${itemCount} ${itemCount === 1 ? \"item\" : \"items\"})`\n      : cartLabel\n\n  return (\n    <Button\n      variant=\"ghost\"\n      className={`relative size-10 ${className}`}\n      onClick={() => onOpenChange(!isOpen)}\n      aria-label={ariaLabel}\n    >\n      <CartIcon className=\"size-5\" />\n      {itemCount > 0 && (\n        <span className=\"absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold\">\n          {itemCount}\n        </span>\n      )}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,YAAY,EAC1B,QACA,cACA,SAAS,EAAE,EACX,YAAY,MACO;CACnB,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,SAAS,SAAS;CAE1B,MAAM,YACJ,MAAM,OAAO,QAAQ,OAAO,SAAS,QAAQ,KAAK,UAAU,EAAE,IAAI;CAEpE,MAAM,YACJ,YAAY,IACR,GAAG,UAAU,IAAI,UAAU,GAAG,cAAc,IAAI,SAAS,QAAQ,KACjE;AAEN,QACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAW,oBAAoB;EAC/B,eAAe,aAAa,CAAC,OAAO;EACpC,cAAY;YAJd,CAME,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA,EAC9B,YAAY,KACX,oBAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA,CAEF"}
+{"version":3,"file":"cart-trigger.mjs","names":[],"sources":["../../../../src/client/cart/components/cart-trigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"../../ui/button\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { useCart } from \"../hooks/useCart\";\n\nexport interface CartTriggerProps {\n  isOpen: boolean;\n  onOpenChange: (open: boolean) => void;\n  labels?: {\n    cartLabel?: string;\n  };\n  className?: string;\n}\n\nexport function CartTrigger({\n  isOpen,\n  onOpenChange,\n  labels = {},\n  className = \"\",\n}: CartTriggerProps) {\n  const CartIcon = useIcon(\"cart\");\n  const { cartLabel = \"Cart\" } = labels;\n  const { cart } = useCart();\n\n  const itemCount = cart?.items?.reduce((total, item) => total + item.quantity, 0) ?? 0;\n\n  const ariaLabel =\n    itemCount > 0 ? `${cartLabel} (${itemCount} ${itemCount === 1 ? \"item\" : \"items\"})` : cartLabel;\n\n  return (\n    <Button\n      variant=\"plain\"\n      className={`relative size-10 ${className}`}\n      onClick={() => onOpenChange(!isOpen)}\n      aria-label={ariaLabel}\n    >\n      <CartIcon className=\"size-5\" />\n      {itemCount > 0 && (\n        <span className=\"absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold\">\n          {itemCount}\n        </span>\n      )}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,YAAY,EAC1B,QACA,cACA,SAAS,EAAE,EACX,YAAY,MACO;CACnB,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,SAAS,SAAS;CAE1B,MAAM,YAAY,MAAM,OAAO,QAAQ,OAAO,SAAS,QAAQ,KAAK,UAAU,EAAE,IAAI;CAEpF,MAAM,YACJ,YAAY,IAAI,GAAG,UAAU,IAAI,UAAU,GAAG,cAAc,IAAI,SAAS,QAAQ,KAAK;AAExF,QACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAW,oBAAoB;EAC/B,eAAe,aAAa,CAAC,OAAO;EACpC,cAAY;YAJd,CAME,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA,EAC9B,YAAY,KACX,oBAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA,CAEF"}

package/dist/client/storefront/blocks/card-video.mjs

@@ -21,7 +21,7 @@ function CardVideo({ thumbnail, videoUrl, title, caption, aspectRatio = "16:9",
 			}) : /* @__PURE__ */ jsx("div", { className: "size-full bg-muted" }), /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0 flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "flex size-14 items-center justify-center rounded-full bg-white/90 text-foreground transition-transform group-hover:scale-110",
+					className: "flex size-14 items-center justify-center rounded-full bg-white/90 text-foreground",
 					children: /* @__PURE__ */ jsx(PlayIcon, { className: "ml-0.5 size-6 fill-current" })
 				})
 			})]

package/dist/client/storefront/blocks/card-video.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"card-video.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/card-video.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { cn } from \"../../ui/utils\"\nimport type { CardVideoProps } from \"../types\"\n\nconst aspectClasses: Record<string, string> = {\n  \"4:3\": \"aspect-[4/3]\",\n  \"1:1\": \"aspect-square\",\n  \"16:9\": \"aspect-video\",\n}\n\nfunction CardVideo({\n  thumbnail,\n  videoUrl,\n  title,\n  caption,\n  aspectRatio = \"16:9\",\n  className,\n}: CardVideoProps) {\n  const PlayIcon = useIcon(\"play\")\n  const card = (\n    <div className={cn(\"group overflow-hidden\", className)}>\n      <div className={cn(\"relative bg-muted\", aspectClasses[aspectRatio])}>\n        {thumbnail?.src ? (\n          <img\n            src={thumbnail.src}\n            alt={thumbnail.alt ?? title ?? \"\"}\n            className=\"size-full object-cover\"\n          />\n        ) : (\n          <div className=\"size-full bg-muted\" />\n        )}\n\n        {/* Play button overlay */}\n        <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30\">\n          <div className=\"flex size-14 items-center justify-center rounded-full bg-white/90 text-foreground transition-transform group-hover:scale-110\">\n            <PlayIcon className=\"ml-0.5 size-6 fill-current\" />\n          </div>\n        </div>\n      </div>\n\n      {(title || caption) && (\n        <div className=\"mt-3\">\n          {title && <p className=\"text-sm font-medium text-foreground\">{title}</p>}\n          {caption && <p className=\"mt-1 text-sm text-muted-foreground\">{caption}</p>}\n        </div>\n      )}\n    </div>\n  )\n\n  if (videoUrl) {\n    return (\n      <a href={videoUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"block\">\n        {card}\n      </a>\n    )\n  }\n\n  return card\n}\n\nexport { CardVideo, type CardVideoProps }\n"],"mappings":";;;;;AAKA,MAAM,gBAAwC;CAC5C,OAAO;CACP,OAAO;CACP,QAAQ;CACT;AAED,SAAS,UAAU,EACjB,WACA,UACA,OACA,SACA,cAAc,QACd,aACiB;CACjB,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,OACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,UAAU;YAAtD,CACE,qBAAC,OAAD;GAAK,WAAW,GAAG,qBAAqB,cAAc,aAAa;aAAnE,CACG,WAAW,MACV,oBAAC,OAAD;IACE,KAAK,UAAU;IACf,KAAK,UAAU,OAAO,SAAS;IAC/B,WAAU;IACV,CAAA,GAEF,oBAAC,OAAD,EAAK,WAAU,sBAAuB,CAAA,EAIxC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,UAAD,EAAU,WAAU,8BAA+B,CAAA;KAC/C,CAAA;IACF,CAAA,CACF;OAEJ,SAAS,YACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SAAS,oBAAC,KAAD;IAAG,WAAU;cAAuC;IAAU,CAAA,EACvE,WAAW,oBAAC,KAAD;IAAG,WAAU;cAAsC;IAAY,CAAA,CACvE;KAEJ;;AAGR,KAAI,SACF,QACE,oBAAC,KAAD;EAAG,MAAM;EAAU,QAAO;EAAS,KAAI;EAAsB,WAAU;YACpE;EACC,CAAA;AAIR,QAAO"}
+{"version":3,"file":"card-video.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/card-video.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { cn } from \"../../ui/utils\";\nimport type { CardVideoProps } from \"../types\";\n\nconst aspectClasses: Record<string, string> = {\n  \"4:3\": \"aspect-[4/3]\",\n  \"1:1\": \"aspect-square\",\n  \"16:9\": \"aspect-video\",\n};\n\nfunction CardVideo({\n  thumbnail,\n  videoUrl,\n  title,\n  caption,\n  aspectRatio = \"16:9\",\n  className,\n}: CardVideoProps) {\n  const PlayIcon = useIcon(\"play\");\n  const card = (\n    <div className={cn(\"group overflow-hidden\", className)}>\n      <div className={cn(\"relative bg-muted\", aspectClasses[aspectRatio])}>\n        {thumbnail?.src ? (\n          <img\n            src={thumbnail.src}\n            alt={thumbnail.alt ?? title ?? \"\"}\n            className=\"size-full object-cover\"\n          />\n        ) : (\n          <div className=\"size-full bg-muted\" />\n        )}\n\n        {/* Play button overlay */}\n        <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30\">\n          <div className=\"flex size-14 items-center justify-center rounded-full bg-white/90 text-foreground\">\n            <PlayIcon className=\"ml-0.5 size-6 fill-current\" />\n          </div>\n        </div>\n      </div>\n\n      {(title || caption) && (\n        <div className=\"mt-3\">\n          {title && <p className=\"text-sm font-medium text-foreground\">{title}</p>}\n          {caption && <p className=\"mt-1 text-sm text-muted-foreground\">{caption}</p>}\n        </div>\n      )}\n    </div>\n  );\n\n  if (videoUrl) {\n    return (\n      <a href={videoUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"block\">\n        {card}\n      </a>\n    );\n  }\n\n  return card;\n}\n\nexport { CardVideo, type CardVideoProps };\n"],"mappings":";;;;;AAKA,MAAM,gBAAwC;CAC5C,OAAO;CACP,OAAO;CACP,QAAQ;CACT;AAED,SAAS,UAAU,EACjB,WACA,UACA,OACA,SACA,cAAc,QACd,aACiB;CACjB,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,OACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,UAAU;YAAtD,CACE,qBAAC,OAAD;GAAK,WAAW,GAAG,qBAAqB,cAAc,aAAa;aAAnE,CACG,WAAW,MACV,oBAAC,OAAD;IACE,KAAK,UAAU;IACf,KAAK,UAAU,OAAO,SAAS;IAC/B,WAAU;IACV,CAAA,GAEF,oBAAC,OAAD,EAAK,WAAU,sBAAuB,CAAA,EAIxC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,UAAD,EAAU,WAAU,8BAA+B,CAAA;KAC/C,CAAA;IACF,CAAA,CACF;OAEJ,SAAS,YACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SAAS,oBAAC,KAAD;IAAG,WAAU;cAAuC;IAAU,CAAA,EACvE,WAAW,oBAAC,KAAD;IAAG,WAAU;cAAsC;IAAY,CAAA,CACvE;KAEJ;;AAGR,KAAI,SACF,QACE,oBAAC,KAAD;EAAG,MAAM;EAAU,QAAO;EAAS,KAAI;EAAsB,WAAU;YACpE;EACC,CAAA;AAIR,QAAO"}

package/dist/client/storefront/blocks/gallery-with-link-blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gallery-with-link-blocks.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/gallery-with-link-blocks.tsx"],"mappings":";;;;iBAIS,qBAAA,CAAA;EACP,OAAA;EACA,QAAA;EACA;AAAA,GACC,0BAAA,GAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"gallery-with-link-blocks.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/gallery-with-link-blocks.tsx"],"mappings":";;;;iBAKS,qBAAA,CAAA;EAAwB,OAAA;EAAS,QAAA;EAAU;AAAA,GAAa,0BAAA,GAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/blocks/gallery-with-link-blocks.mjs

@@ -1,4 +1,5 @@
 import { cn } from "../../ui/utils.mjs";
+import { Carousel, CarouselContent, CarouselItem } from "../../ui-resolver/carousel.mjs";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/blocks/gallery-with-link-blocks.tsx
@@ -17,11 +18,18 @@ function GalleryWithLinkBlocks({ heading, children, className }) {
 				children: heading
 			})
 		}), /* @__PURE__ */ jsx("div", {
-			className: "flex gap-4 overflow-x-auto px-4 scrollbar-none md:px-8",
-			children: React$1.Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
-				className: "w-52 shrink-0 sm:w-60 md:w-72 lg:w-80",
-				children: child
-			}))
+			className: "px-4 md:px-8",
+			children: /* @__PURE__ */ jsx(Carousel, {
+				opts: {
+					align: "start",
+					slidesToScroll: "auto",
+					containScroll: "trimSnaps"
+				},
+				children: /* @__PURE__ */ jsx(CarouselContent, { children: React$1.Children.map(children, (child, i) => /* @__PURE__ */ jsx(CarouselItem, {
+					className: "basis-auto w-52 sm:w-60 md:w-72 lg:w-80",
+					children: child
+				}, i)) })
+			})
 		})]
 	});
 }

package/dist/client/storefront/blocks/gallery-with-link-blocks.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gallery-with-link-blocks.mjs","names":["React"],"sources":["../../../../src/client/storefront/blocks/gallery-with-link-blocks.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport type { GalleryWithLinkBlocksProps } from \"../types\"\n\nfunction GalleryWithLinkBlocks({\n  heading,\n  children,\n  className,\n}: GalleryWithLinkBlocksProps) {\n  return (\n    <section className={cn(\"py-12\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 md:px-8\">\n        {heading && (\n          <h2\n            className=\"mb-6 text-2xl font-heading text-foreground md:text-3xl\"\n            style={{ fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties}\n          >\n            {heading}\n          </h2>\n        )}\n      </div>\n      <div className=\"flex gap-4 overflow-x-auto px-4 scrollbar-none md:px-8\">\n        {React.Children.map(children, (child) => (\n          <div className=\"w-52 shrink-0 sm:w-60 md:w-72 lg:w-80\">{child}</div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport { GalleryWithLinkBlocks, type GalleryWithLinkBlocksProps }\n"],"mappings":";;;;AAIA,SAAS,sBAAsB,EAC7B,SACA,UACA,aAC6B;AAC7B,QACE,qBAAC,WAAD;EAAS,WAAW,GAAG,SAAS,UAAU;YAA1C,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,WACC,oBAAC,MAAD;IACE,WAAU;IACV,OAAO;KAAE,YAAY;KAA8B,eAAe;KAAgC,eAAe;KAAiC;cAEjJ;IACE,CAAA;GAEH,CAAA,EACN,oBAAC,OAAD;GAAK,WAAU;aACZA,QAAM,SAAS,IAAI,WAAW,UAC7B,oBAAC,OAAD;IAAK,WAAU;cAAyC;IAAY,CAAA,CACpE;GACE,CAAA,CACE"}
+{"version":3,"file":"gallery-with-link-blocks.mjs","names":["React"],"sources":["../../../../src/client/storefront/blocks/gallery-with-link-blocks.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { Carousel, CarouselContent, CarouselItem } from \"../../ui-resolver/carousel\";\nimport type { GalleryWithLinkBlocksProps } from \"../types\";\n\nfunction GalleryWithLinkBlocks({ heading, children, className }: GalleryWithLinkBlocksProps) {\n  return (\n    <section className={cn(\"py-12\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 md:px-8\">\n        {heading && (\n          <h2\n            className=\"mb-6 text-2xl font-heading text-foreground md:text-3xl\"\n            style={\n              {\n                fontWeight: \"var(--enad-heading-weight)\",\n                letterSpacing: \"var(--enad-heading-tracking)\",\n                textTransform: \"var(--enad-heading-transform)\",\n              } as unknown as React.CSSProperties\n            }\n          >\n            {heading}\n          </h2>\n        )}\n      </div>\n      <div className=\"px-4 md:px-8\">\n        <Carousel opts={{ align: \"start\", slidesToScroll: \"auto\", containScroll: \"trimSnaps\" }}>\n          <CarouselContent>\n            {React.Children.map(children, (child, i) => (\n              <CarouselItem key={i} className=\"basis-auto w-52 sm:w-60 md:w-72 lg:w-80\">\n                {child}\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n      </div>\n    </section>\n  );\n}\n\nexport { GalleryWithLinkBlocks, type GalleryWithLinkBlocksProps };\n"],"mappings":";;;;;AAKA,SAAS,sBAAsB,EAAE,SAAS,UAAU,aAAyC;AAC3F,QACE,qBAAC,WAAD;EAAS,WAAW,GAAG,SAAS,UAAU;YAA1C,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,WACC,oBAAC,MAAD;IACE,WAAU;IACV,OACE;KACE,YAAY;KACZ,eAAe;KACf,eAAe;KAChB;cAGF;IACE,CAAA;GAEH,CAAA,EACN,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,UAAD;IAAU,MAAM;KAAE,OAAO;KAAS,gBAAgB;KAAQ,eAAe;KAAa;cACpF,oBAAC,iBAAD,EAAA,UACGA,QAAM,SAAS,IAAI,WAAW,OAAO,MACpC,oBAAC,cAAD;KAAsB,WAAU;eAC7B;KACY,EAFI,EAEJ,CACf,EACc,CAAA;IACT,CAAA;GACP,CAAA,CACE"}

package/dist/client/storefront/blocks/gallery.d.ts

@@ -2,6 +2,15 @@ import { GalleryProps } from "../types.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/storefront/blocks/gallery.d.ts
+declare const galleryRecipe: (props?: ({
+  layout?: "grid" | "masonry" | "filmstrip" | undefined;
+} & {
+  className?: Partial<Record<"grid" | "root" | "heading", string>> | undefined;
+}) | undefined) => {
+  grid: string;
+  root: string;
+  heading: string;
+};
 declare function Gallery({
   heading,
   variant,
@@ -9,5 +18,5 @@ declare function Gallery({
   className
 }: GalleryProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-export { Gallery, type GalleryProps };
+export { Gallery, type GalleryProps, galleryRecipe };
 //# sourceMappingURL=gallery.d.ts.map

package/dist/client/storefront/blocks/gallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gallery.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/gallery.tsx"],"mappings":";;;;iBAIS,OAAA,CAAA;EAAU,OAAA;EAAS,OAAA;EAAkB,QAAA;EAAU;AAAA,GAAa,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"gallery.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/gallery.tsx"],"mappings":";;;;cAOM,aAAA,GAAa,KAAA;;;cAqBjB,OAAA,CAAA,MAAA;AAAA;;;;;iBAQO,OAAA,CAAA;EAAU,OAAA;EAAS,OAAA;EAAS,QAAA;EAAU;AAAA,GAAa,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/blocks/gallery.mjs

@@ -1,54 +1,78 @@
 import { cn } from "../../ui/utils.mjs";
+import { defineSlotRecipe } from "../../ui-resolver/recipe.mjs";
+import { useVariantDefault } from "../../ui-resolver/context.mjs";
+import { Carousel, CarouselContent, CarouselItem } from "../../ui-resolver/carousel.mjs";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/blocks/gallery.tsx
-function Gallery({ heading, variant = "grid", children, className }) {
+const galleryRecipe = defineSlotRecipe({
+	slots: [
+		"root",
+		"heading",
+		"grid"
+	],
+	base: {
+		root: "px-4 py-12 md:px-8",
+		heading: "mb-6 text-2xl font-heading text-foreground md:text-3xl",
+		grid: ""
+	},
+	variants: { layout: {
+		grid: { grid: "grid gap-[var(--enad-gallery-gap,1rem)]" },
+		masonry: { grid: "columns-2 gap-[var(--enad-gallery-gap,1rem)] md:columns-3 [&>*]:mb-[var(--enad-gallery-gap,1rem)] [&>*]:break-inside-avoid" },
+		filmstrip: { grid: "flex gap-[var(--enad-gallery-gap,1rem)] overflow-x-auto snap-x snap-mandatory scrollbar-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&>*]:w-64 [&>*]:shrink-0 [&>*]:snap-start md:[&>*]:w-80" }
+	} },
+	defaultVariants: { layout: "grid" }
+});
+const headingStyle = {
+	fontWeight: "var(--enad-heading-weight)",
+	letterSpacing: "var(--enad-heading-tracking)",
+	textTransform: "var(--enad-heading-transform)"
+};
+function Gallery({ heading, variant, children, className }) {
+	const galleryDefault = useVariantDefault("gallery");
+	const layout = variant ?? galleryDefault ?? "grid";
 	const childCount = React$1.Children.count(children);
 	if (childCount === 0) return null;
+	const classes = galleryRecipe({ layout });
+	const gridColsClass = layout === "grid" ? childCount === 1 ? "grid-cols-1" : "grid-cols-2 md:grid-cols-3 lg:grid-cols-[repeat(var(--enad-gallery-columns,4),minmax(0,1fr))]" : "";
 	const headingEl = heading ? /* @__PURE__ */ jsx("h2", {
-		className: "mb-6 text-2xl font-heading text-foreground md:text-3xl",
-		style: {
-			fontWeight: "var(--enad-heading-weight)",
-			letterSpacing: "var(--enad-heading-tracking)",
-			textTransform: "var(--enad-heading-transform)"
-		},
+		className: classes.heading,
+		style: headingStyle,
 		children: heading
 	}) : null;
-	if (variant === "masonry") return /* @__PURE__ */ jsx("section", {
-		className: cn("px-4 py-12 md:px-8", className),
+	if (layout === "filmstrip") return /* @__PURE__ */ jsx("section", {
+		className: cn(classes.root, className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "mx-auto max-w-7xl",
-			children: [headingEl, /* @__PURE__ */ jsx("div", {
-				className: "columns-2 gap-4 md:columns-3 [&>*]:mb-4 [&>*]:break-inside-avoid",
-				children
-			})]
-		})
-	});
-	if (variant === "filmstrip") return /* @__PURE__ */ jsx("section", {
-		className: cn("px-4 py-12 md:px-8", className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "mx-auto max-w-7xl",
-			children: [headingEl, /* @__PURE__ */ jsx("div", {
-				role: "region",
+			children: [headingEl, /* @__PURE__ */ jsx(Carousel, {
+				opts: {
+					align: "start",
+					slidesToScroll: "auto",
+					containScroll: "trimSnaps"
+				},
 				"aria-label": heading ?? "Gallery",
-				tabIndex: 0,
-				className: "flex gap-4 overflow-x-auto snap-x snap-mandatory scrollbar-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&>*]:w-64 [&>*]:shrink-0 [&>*]:snap-start md:[&>*]:w-80",
-				children
+				children: /* @__PURE__ */ jsx(CarouselContent, {
+					className: "-ml-[var(--enad-gallery-gap,1rem)]",
+					children: React$1.Children.map(children, (child, i) => /* @__PURE__ */ jsx(CarouselItem, {
+						className: "basis-auto pl-[var(--enad-gallery-gap,1rem)] w-64 md:w-80",
+						children: child
+					}, i))
+				})
 			})]
 		})
 	});
 	return /* @__PURE__ */ jsx("section", {
-		className: cn("px-4 py-12 md:px-8", className),
+		className: cn(classes.root, className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "mx-auto max-w-7xl",
 			children: [headingEl, /* @__PURE__ */ jsx("div", {
-				className: cn("grid gap-4", childCount === 1 ? "grid-cols-1" : "grid-cols-2 md:grid-cols-3 lg:grid-cols-4"),
+				className: cn(classes.grid, gridColsClass),
 				children
 			})]
 		})
 	});
 }
 //#endregion
-export { Gallery };
+export { Gallery, galleryRecipe };
 
 //# sourceMappingURL=gallery.mjs.map

package/dist/client/storefront/blocks/gallery.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gallery.mjs","names":["React"],"sources":["../../../../src/client/storefront/blocks/gallery.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport type { GalleryProps } from \"../types\"\n\nfunction Gallery({ heading, variant = \"grid\", children, className }: GalleryProps) {\n  const childCount = React.Children.count(children)\n\n  if (childCount === 0) return null\n\n  const headingEl = heading ? (\n    <h2\n      className=\"mb-6 text-2xl font-heading text-foreground md:text-3xl\"\n      style={{ fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties}\n    >\n      {heading}\n    </h2>\n  ) : null\n\n  /* ─── Masonry variant ─── */\n  if (variant === \"masonry\") {\n    return (\n      <section className={cn(\"px-4 py-12 md:px-8\", className)}>\n        <div className=\"mx-auto max-w-7xl\">\n          {headingEl}\n          <div className=\"columns-2 gap-4 md:columns-3 [&>*]:mb-4 [&>*]:break-inside-avoid\">\n            {children}\n          </div>\n        </div>\n      </section>\n    )\n  }\n\n  /* ─── Filmstrip variant ─── */\n  if (variant === \"filmstrip\") {\n    return (\n      <section className={cn(\"px-4 py-12 md:px-8\", className)}>\n        <div className=\"mx-auto max-w-7xl\">\n          {headingEl}\n          <div\n            role=\"region\"\n            aria-label={heading ?? \"Gallery\"}\n            tabIndex={0}\n            className=\"flex gap-4 overflow-x-auto snap-x snap-mandatory scrollbar-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&>*]:w-64 [&>*]:shrink-0 [&>*]:snap-start md:[&>*]:w-80\"\n          >\n            {children}\n          </div>\n        </div>\n      </section>\n    )\n  }\n\n  /* ─── Grid variant (default) ─── */\n  return (\n    <section className={cn(\"px-4 py-12 md:px-8\", className)}>\n      <div className=\"mx-auto max-w-7xl\">\n        {headingEl}\n        <div className={cn(\n          \"grid gap-4\",\n          childCount === 1\n            ? \"grid-cols-1\"\n            : \"grid-cols-2 md:grid-cols-3 lg:grid-cols-4\",\n        )}>\n          {children}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { Gallery, type GalleryProps }\n"],"mappings":";;;;AAIA,SAAS,QAAQ,EAAE,SAAS,UAAU,QAAQ,UAAU,aAA2B;CACjF,MAAM,aAAaA,QAAM,SAAS,MAAM,SAAS;AAEjD,KAAI,eAAe,EAAG,QAAO;CAE7B,MAAM,YAAY,UAChB,oBAAC,MAAD;EACE,WAAU;EACV,OAAO;GAAE,YAAY;GAA8B,eAAe;GAAgC,eAAe;GAAiC;YAEjJ;EACE,CAAA,GACH;AAGJ,KAAI,YAAY,UACd,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,sBAAsB,UAAU;YACrD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,OAAD;IAAK,WAAU;IACZ;IACG,CAAA,CACF;;EACE,CAAA;AAKd,KAAI,YAAY,YACd,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,sBAAsB,UAAU;YACrD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,OAAD;IACE,MAAK;IACL,cAAY,WAAW;IACvB,UAAU;IACV,WAAU;IAET;IACG,CAAA,CACF;;EACE,CAAA;AAKd,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,sBAAsB,UAAU;YACrD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,OAAD;IAAK,WAAW,GACd,cACA,eAAe,IACX,gBACA,4CACL;IACE;IACG,CAAA,CACF;;EACE,CAAA"}
+{"version":3,"file":"gallery.mjs","names":["React"],"sources":["../../../../src/client/storefront/blocks/gallery.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { Carousel, CarouselContent, CarouselItem } from \"../../ui-resolver/carousel\";\nimport { defineSlotRecipe } from \"../../ui-resolver/recipe\";\nimport { useVariantDefault } from \"../../ui-resolver/context\";\nimport type { GalleryProps } from \"../types\";\n\nconst galleryRecipe = defineSlotRecipe({\n  slots: [\"root\", \"heading\", \"grid\"] as const,\n  base: {\n    root: \"px-4 py-12 md:px-8\",\n    heading: \"mb-6 text-2xl font-heading text-foreground md:text-3xl\",\n    grid: \"\",\n  },\n  variants: {\n    layout: {\n      grid: {\n        grid: \"grid gap-[var(--enad-gallery-gap,1rem)]\",\n      },\n      masonry: {\n        grid: \"columns-2 gap-[var(--enad-gallery-gap,1rem)] md:columns-3 [&>*]:mb-[var(--enad-gallery-gap,1rem)] [&>*]:break-inside-avoid\",\n      },\n      filmstrip: {\n        grid: \"flex gap-[var(--enad-gallery-gap,1rem)] overflow-x-auto snap-x snap-mandatory scrollbar-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&>*]:w-64 [&>*]:shrink-0 [&>*]:snap-start md:[&>*]:w-80\",\n      },\n    },\n  },\n  defaultVariants: { layout: \"grid\" },\n});\n\nconst headingStyle = {\n  fontWeight: \"var(--enad-heading-weight)\",\n  letterSpacing: \"var(--enad-heading-tracking)\",\n  textTransform: \"var(--enad-heading-transform)\",\n} as unknown as React.CSSProperties;\n\nfunction Gallery({ heading, variant, children, className }: GalleryProps) {\n  const galleryDefault = useVariantDefault(\"gallery\");\n  const layout = variant ?? galleryDefault ?? \"grid\";\n  const childCount = React.Children.count(children);\n\n  if (childCount === 0) return null;\n\n  const classes = galleryRecipe({ layout });\n\n  const gridColsClass =\n    layout === \"grid\"\n      ? childCount === 1\n        ? \"grid-cols-1\"\n        : \"grid-cols-2 md:grid-cols-3 lg:grid-cols-[repeat(var(--enad-gallery-columns,4),minmax(0,1fr))]\"\n      : \"\";\n\n  const headingEl = heading ? (\n    <h2 className={classes.heading} style={headingStyle}>\n      {heading}\n    </h2>\n  ) : null;\n\n  if (layout === \"filmstrip\") {\n    return (\n      <section className={cn(classes.root, className)}>\n        <div className=\"mx-auto max-w-7xl\">\n          {headingEl}\n          <Carousel\n            opts={{ align: \"start\", slidesToScroll: \"auto\", containScroll: \"trimSnaps\" }}\n            aria-label={heading ?? \"Gallery\"}\n          >\n            <CarouselContent className=\"-ml-[var(--enad-gallery-gap,1rem)]\">\n              {React.Children.map(children, (child, i) => (\n                <CarouselItem\n                  key={i}\n                  className=\"basis-auto pl-[var(--enad-gallery-gap,1rem)] w-64 md:w-80\"\n                >\n                  {child}\n                </CarouselItem>\n              ))}\n            </CarouselContent>\n          </Carousel>\n        </div>\n      </section>\n    );\n  }\n\n  return (\n    <section className={cn(classes.root, className)}>\n      <div className=\"mx-auto max-w-7xl\">\n        {headingEl}\n        <div className={cn(classes.grid, gridColsClass)}>{children}</div>\n      </div>\n    </section>\n  );\n}\n\nexport { Gallery, galleryRecipe, type GalleryProps };\n"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB,iBAAiB;CACrC,OAAO;EAAC;EAAQ;EAAW;EAAO;CAClC,MAAM;EACJ,MAAM;EACN,SAAS;EACT,MAAM;EACP;CACD,UAAU,EACR,QAAQ;EACN,MAAM,EACJ,MAAM,2CACP;EACD,SAAS,EACP,MAAM,8HACP;EACD,WAAW,EACT,MAAM,6PACP;EACF,EACF;CACD,iBAAiB,EAAE,QAAQ,QAAQ;CACpC,CAAC;AAEF,MAAM,eAAe;CACnB,YAAY;CACZ,eAAe;CACf,eAAe;CAChB;AAED,SAAS,QAAQ,EAAE,SAAS,SAAS,UAAU,aAA2B;CACxE,MAAM,iBAAiB,kBAAkB,UAAU;CACnD,MAAM,SAAS,WAAW,kBAAkB;CAC5C,MAAM,aAAaA,QAAM,SAAS,MAAM,SAAS;AAEjD,KAAI,eAAe,EAAG,QAAO;CAE7B,MAAM,UAAU,cAAc,EAAE,QAAQ,CAAC;CAEzC,MAAM,gBACJ,WAAW,SACP,eAAe,IACb,gBACA,kGACF;CAEN,MAAM,YAAY,UAChB,oBAAC,MAAD;EAAI,WAAW,QAAQ;EAAS,OAAO;YACpC;EACE,CAAA,GACH;AAEJ,KAAI,WAAW,YACb,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,QAAQ,MAAM,UAAU;YAC7C,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,UAAD;IACE,MAAM;KAAE,OAAO;KAAS,gBAAgB;KAAQ,eAAe;KAAa;IAC5E,cAAY,WAAW;cAEvB,oBAAC,iBAAD;KAAiB,WAAU;eACxBA,QAAM,SAAS,IAAI,WAAW,OAAO,MACpC,oBAAC,cAAD;MAEE,WAAU;gBAET;MACY,EAJR,EAIQ,CACf;KACc,CAAA;IACT,CAAA,CACP;;EACE,CAAA;AAId,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,QAAQ,MAAM,UAAU;YAC7C,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,OAAD;IAAK,WAAW,GAAG,QAAQ,MAAM,cAAc;IAAG;IAAe,CAAA,CAC7D;;EACE,CAAA"}

package/dist/client/storefront/blocks/hero.d.ts

@@ -2,7 +2,18 @@ import { HeroProps } from "../types.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/storefront/blocks/hero.d.ts
+declare const heroRecipe: (props?: ({
+  layout?: "overlay" | "minimal" | "split" | "banner" | "image-only" | undefined;
+  contentWidth?: "sm" | "md" | "lg" | undefined;
+} & {
+  className?: Partial<Record<"overlay" | "root" | "content" | "background", string>> | undefined;
+}) | undefined) => {
+  overlay: string;
+  root: string;
+  content: string;
+  background: string;
+};
 declare function Hero(props: HeroProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Hero, type HeroProps };
+export { Hero, type HeroProps, heroRecipe };
 //# sourceMappingURL=hero.d.ts.map

package/dist/client/storefront/blocks/hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/hero.tsx"],"mappings":";;;;iBA4bS,IAAA,CAAK,KAAA,EAAO,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"hero.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/hero.tsx"],"mappings":";;;;cAkBM,UAAA,GAAU,KAAA;;;;cAoCd,OAAA,CAAA,MAAA;AAAA;;;;;;iBAgTO,IAAA,CAAK,KAAA,EAAO,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}