@timmbr/ui 1.8.0 → 1.10.0

package/dist/components/ProductGallery/ProductGalleryLightbox.js

@@ -0,0 +1,210 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { ZoomOut, ZoomIn, X, ChevronLeft, ChevronRight } from '@timmbr/icons';
+import { productGalleryLightboxButtonVariants, productGalleryLightboxVariants } from './ProductGallery.styles.js';
+
+const MAX_SCALE = 3;
+const ZOOM_STEP = 2;
+const SWIPE_PX = 50;
+const TAP_SLOP_PX = 10;
+const FIT = { scale: 1, x: 0, y: 0 };
+function ProductGalleryLightbox({
+  open,
+  onOpenChange,
+  images,
+  index,
+  onIndexChange,
+  renderImage,
+  labels,
+  onCloseAutoFocus
+}) {
+  const [view, setView] = React.useState(FIT);
+  const pointers = React.useRef(/* @__PURE__ */ new Map());
+  const pinch = React.useRef(null);
+  const lastTap = React.useRef(0);
+  const lastPointerType = React.useRef("mouse");
+  const swipe = React.useRef(null);
+  const [dragX, setDragX] = React.useState(0);
+  const total = images.length;
+  const image = images[index];
+  const [shown, setShown] = React.useState({ index, open });
+  if (shown.index !== index || shown.open !== open) {
+    setShown({ index, open });
+    setView(FIT);
+  }
+  const handleOpenChange = (next) => {
+    if (!next) {
+      pointers.current.clear();
+      pinch.current = null;
+      swipe.current = null;
+      lastTap.current = 0;
+      setDragX(0);
+    }
+    onOpenChange(next);
+  };
+  const go = (delta) => {
+    const next = index + delta;
+    if (next >= 0 && next < total) onIndexChange(next);
+  };
+  const zoomTo = (scale) => setView((current) => {
+    const clamped = Math.min(MAX_SCALE, Math.max(1, scale));
+    return clamped === 1 ? FIT : { ...current, scale: clamped };
+  });
+  const toggleZoom = () => zoomTo(view.scale > 1 ? 1 : ZOOM_STEP);
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowRight") go(1);
+    else if (event.key === "ArrowLeft") go(-1);
+    else if (event.key === "+" || event.key === "=") zoomTo(view.scale + 0.5);
+    else if (event.key === "-") zoomTo(view.scale - 0.5);
+  };
+  const distance = () => {
+    const [a, b] = [...pointers.current.values()];
+    return Math.hypot(a.x - b.x, a.y - b.y);
+  };
+  const onPointerDown = (event) => {
+    lastPointerType.current = event.pointerType;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.current.size === 1) {
+      swipe.current = { x: event.clientX, y: event.clientY, multi: false };
+    } else {
+      if (swipe.current) swipe.current.multi = true;
+      setDragX(0);
+    }
+    if (pointers.current.size === 2) pinch.current = { distance: distance(), scale: view.scale };
+  };
+  const onPointerMove = (event) => {
+    const previous = pointers.current.get(event.pointerId);
+    if (!previous) return;
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pinch.current && pointers.current.size === 2) {
+      zoomTo(pinch.current.scale * distance() / pinch.current.distance);
+    } else if (view.scale > 1) {
+      const dx = event.clientX - previous.x;
+      const dy = event.clientY - previous.y;
+      setView((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));
+    } else if (swipe.current && !swipe.current.multi && event.pointerType !== "mouse") {
+      setDragX(event.clientX - swipe.current.x);
+    }
+  };
+  const onPointerUp = (event) => {
+    const start = pointers.current.get(event.pointerId);
+    pointers.current.delete(event.pointerId);
+    if (pointers.current.size < 2) pinch.current = null;
+    const gesture = swipe.current;
+    if (pointers.current.size === 0) {
+      swipe.current = null;
+      setDragX(0);
+    }
+    if (!start || event.pointerType === "mouse") return;
+    if (gesture && !gesture.multi && view.scale === 1) {
+      const dx = event.clientX - gesture.x;
+      const dy = event.clientY - gesture.y;
+      if (Math.abs(dx) > SWIPE_PX && Math.abs(dx) > Math.abs(dy)) {
+        lastTap.current = 0;
+        go(dx < 0 ? 1 : -1);
+        return;
+      }
+    }
+    const still = gesture && !gesture.multi && Math.hypot(event.clientX - gesture.x, event.clientY - gesture.y) < TAP_SLOP_PX;
+    if (!still) {
+      lastTap.current = 0;
+      return;
+    }
+    const now = Date.now();
+    if (now - lastTap.current < 300) {
+      lastTap.current = 0;
+      toggleZoom();
+    } else {
+      lastTap.current = now;
+    }
+  };
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      className: productGalleryLightboxVariants(),
+      onKeyDown,
+      onCloseAutoFocus,
+      "aria-describedby": void 0,
+      "data-slot": "product-gallery-lightbox",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 p-3 sm:p-4", children: [
+          /* @__PURE__ */ jsxs(DialogPrimitive.Title, { className: "text-body-2 font-semibold tabular-nums", children: [
+            labels.position(index, total),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: image ? ` — ${image.alt}` : "" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: productGalleryLightboxButtonVariants(),
+                "aria-label": view.scale > 1 ? labels.zoomOut : labels.zoomIn,
+                onClick: toggleZoom,
+                children: view.scale > 1 ? /* @__PURE__ */ jsx(ZoomOut, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ZoomIn, { "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(DialogPrimitive.Close, { className: productGalleryLightboxButtonVariants(), "aria-label": labels.close, children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative min-h-0 flex-1 touch-none select-none overflow-hidden",
+            onDoubleClick: () => lastPointerType.current === "mouse" && toggleZoom(),
+            onWheel: (event) => zoomTo(view.scale - event.deltaY * 2e-3),
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            style: { cursor: view.scale > 1 ? "grab" : "zoom-in" },
+            "data-slot": "product-gallery-lightbox-stage",
+            children: [
+              image && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `absolute inset-0 ease-out motion-reduce:transition-none ${dragX ? "" : "transition-transform duration-150"}`,
+                  style: { transform: `translate(${view.x + dragX}px, ${view.y}px) scale(${view.scale})` },
+                  children: renderImage(image, {
+                    priority: false,
+                    sizes: "100vw",
+                    slot: "lightbox",
+                    className: "object-contain"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${productGalleryLightboxButtonVariants()} absolute left-3 top-1/2 hidden -translate-y-1/2 md:flex`,
+                  "aria-label": labels.previous,
+                  disabled: index === 0,
+                  onClick: () => go(-1),
+                  onPointerDown: (event) => event.stopPropagation(),
+                  children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${productGalleryLightboxButtonVariants()} absolute right-3 top-1/2 hidden -translate-y-1/2 md:flex`,
+                  "aria-label": labels.next,
+                  disabled: index >= total - 1,
+                  onClick: () => go(1),
+                  onPointerDown: (event) => event.stopPropagation(),
+                  children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+export { ProductGalleryLightbox };

package/dist/components/ProductGallery/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ProductGallery';
+export * from './ProductGallery.types';
+export * from './ProductGallery.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ProductGallery/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProductGallery/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC"}

package/dist/components/QuantityStepper/QuantityStepper.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { QuantityStepperProps } from './QuantityStepper.types';
+/**
+ * − value + for a quantity. The buttons stop at `min` and `max` (e.g. the units in stock), and
+ * the value is announced when it changes. Arrow up/down on either button steps too.
+ */
+export declare const QuantityStepper: React.ForwardRefExoticComponent<QuantityStepperProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=QuantityStepper.d.ts.map

package/dist/components/QuantityStepper/QuantityStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityStepper.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityStepper/QuantityStepper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,eAAe,6FAmD3B,CAAC"}

package/dist/components/QuantityStepper/QuantityStepper.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Minus, Plus } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { quantityStepperButtonVariants, quantityStepperValueVariants, quantityStepperVariants } from './QuantityStepper.styles.js';
+
+const QuantityStepper = React.forwardRef(
+  ({ value, onChange, min = 1, max = 99, size, disabled = false, labels, className, ...props }, ref) => {
+    const clamp = (next) => Math.min(Math.max(next, min), Math.max(min, max));
+    const step = (delta) => {
+      const next = clamp(value + delta);
+      if (next !== value) onChange(next);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "ArrowUp" || event.key === "ArrowRight") {
+        event.preventDefault();
+        step(1);
+      } else if (event.key === "ArrowDown" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        step(-1);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-label": labels?.group ?? "Quantity",
+        "data-slot": "quantity-stepper",
+        className: cn(quantityStepperVariants({ size, disabled }), className),
+        onKeyDown: disabled ? void 0 : onKeyDown,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels?.decrease ?? "Decrease quantity",
+              disabled: disabled || value <= min,
+              onClick: () => step(-1),
+              className: quantityStepperButtonVariants(),
+              children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true", className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx("output", { "aria-live": "polite", className: quantityStepperValueVariants(), "data-slot": "quantity-stepper-value", children: value }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels?.increase ?? "Increase quantity",
+              disabled: disabled || value >= max,
+              onClick: () => step(1),
+              className: quantityStepperButtonVariants(),
+              children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true", className: "size-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+QuantityStepper.displayName = "QuantityStepper";
+
+export { QuantityStepper };

package/dist/components/QuantityStepper/QuantityStepper.styles.d.ts

@@ -0,0 +1,8 @@
+/** Bordered box: − value +, on a white surface with the 4px radius used by fields. */
+export declare const quantityStepperVariants: (props?: ({
+    size?: "md" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const quantityStepperButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const quantityStepperValueVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=QuantityStepper.styles.d.ts.map

package/dist/components/QuantityStepper/QuantityStepper.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityStepper.styles.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityStepper/QuantityStepper.styles.ts"],"names":[],"mappings":"AAEA,sFAAsF;AACtF,eAAO,MAAM,uBAAuB;;;8EAenC,CAAC;AAEF,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF,eAAO,MAAM,4BAA4B,oFAAoE,CAAC"}

package/dist/components/QuantityStepper/QuantityStepper.styles.js

@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority';
+
+const quantityStepperVariants = cva(
+  "inline-flex shrink-0 items-center rounded-sm border border-grey-300 bg-grey-50 font-sans text-grey-950",
+  {
+    variants: {
+      size: {
+        md: "h-11",
+        lg: "h-[52px]"
+      },
+      disabled: {
+        true: "opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "md", disabled: false }
+  }
+);
+const quantityStepperButtonVariants = cva(
+  "flex h-full w-10 items-center justify-center rounded-sm text-grey-500 transition-colors hover:text-grey-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:text-grey-300"
+);
+const quantityStepperValueVariants = cva("min-w-6 text-center text-body-1 font-semibold tabular-nums");
+
+export { quantityStepperButtonVariants, quantityStepperValueVariants, quantityStepperVariants };

package/dist/components/QuantityStepper/QuantityStepper.types.d.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+export interface QuantityStepperLabels {
+    /** Accessible name of the whole control. */
+    group?: string;
+    decrease?: string;
+    increase?: string;
+}
+export interface QuantityStepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value: number;
+    onChange: (value: number) => void;
+    /** Defaults to 1. */
+    min?: number;
+    /** The + button disables here (e.g. units in stock). Defaults to 99. */
+    max?: number;
+    /** `md` matches the default button height (44px); `lg` matches a 52px buy button. */
+    size?: 'md' | 'lg';
+    disabled?: boolean;
+    labels?: QuantityStepperLabels;
+}
+//# sourceMappingURL=QuantityStepper.types.d.ts.map

package/dist/components/QuantityStepper/QuantityStepper.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityStepper.types.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityStepper/QuantityStepper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,qBAAqB;IACpC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAClG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC"}

package/dist/components/QuantityStepper/index.d.ts

@@ -0,0 +1,4 @@
+export * from './QuantityStepper';
+export * from './QuantityStepper.types';
+export * from './QuantityStepper.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/QuantityStepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityStepper/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC"}

package/dist/components/RangeSlider/RangeSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,eAAO,MAAM,WAAW,0FAyIvB,CAAC"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,eAAO,MAAM,WAAW,0FA2IvB,CAAC"}

package/dist/components/RangeSlider/RangeSlider.js

@@ -25,6 +25,8 @@ const RangeSlider = React.forwardRef(
     onValueCommit,
     onApply,
     onReset,
+    thumbLabels = ["Minimum value", "Maximum value"],
+    resetDisabled = false,
     disabled,
     ...props
   }, ref) => {
@@ -98,7 +100,7 @@ const RangeSlider = React.forwardRef(
                   SliderPrimitive.Thumb,
                   {
                     className: rangeSliderThumbVariants(),
-                    "aria-label": index === 0 ? "Minimum value" : "Maximum value"
+                    "aria-label": thumbLabels[index === 0 ? 0 : 1]
                   },
                   index
                 ))
@@ -111,8 +113,8 @@ const RangeSlider = React.forwardRef(
               {
                 type: "button",
                 onClick: handleReset,
-                disabled,
-                className: "text-body-3 font-medium text-muted hover:text-foreground transition-colors cursor-pointer disabled:opacity-50",
+                disabled: disabled || resetDisabled,
+                className: "rounded-sm text-body-3 font-semibold text-foreground underline decoration-border underline-offset-4 transition-colors cursor-pointer hover:text-primary hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:no-underline disabled:opacity-40 disabled:hover:text-foreground",
                 children: resetLabel
               }
             ),

package/dist/components/RangeSlider/RangeSlider.types.d.ts

@@ -64,5 +64,12 @@ export interface RangeSliderProps extends Omit<React.ComponentPropsWithoutRef<ty
      * Callback fired when the Reset button is clicked.
      */
     onReset?: () => void;
+    /**
+     * Accessible names of the two thumbs (translate these).
+     * @default ['Minimum value', 'Maximum value']
+     */
+    thumbLabels?: [string, string];
+    /** Disables Reset (e.g. nothing to reset). */
+    resetDisabled?: boolean;
 }
 //# sourceMappingURL=RangeSlider.types.d.ts.map

package/dist/components/RangeSlider/RangeSlider.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.types.d.ts","sourceRoot":"","sources":["../../../src/components/RangeSlider/RangeSlider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAC3D,OAAO,GAAG,cAAc,GAAG,eAAe,GAAG,eAAe,CAC7D,EACD,mBAAmB;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
+{"version":3,"file":"RangeSlider.types.d.ts","sourceRoot":"","sources":["../../../src/components/RangeSlider/RangeSlider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAC3D,OAAO,GAAG,cAAc,GAAG,eAAe,GAAG,eAAe,CAC7D,EACD,mBAAmB;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/dist/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAU1D,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAEhE,eAAO,MAAM,MAAM,uFAwHlB,CAAC;AAKF,eAAO,MAAM,UAAU,uCAAuB,CAAC;AAC/C,eAAO,MAAM,aAAa,8GAA0B,CAAC;AACrD,eAAO,MAAM,WAAW,0GAAwB,CAAC;AACjD,eAAO,MAAM,aAAa,2GAA0B,CAAC;AACrD,eAAO,MAAM,UAAU,wGAAuB,CAAC;AAC/C,eAAO,MAAM,WAAW,yGAAwB,CAAC;AACjD,eAAO,MAAM,WAAW,yGAAwB,CAAC;AACjD,eAAO,MAAM,eAAe,6GAA4B,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAU1D,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAEhE,eAAO,MAAM,MAAM,uFAiIlB,CAAC;AAKF,eAAO,MAAM,UAAU,uCAAuB,CAAC;AAC/C,eAAO,MAAM,aAAa,8GAA0B,CAAC;AACrD,eAAO,MAAM,WAAW,0GAAwB,CAAC;AACjD,eAAO,MAAM,aAAa,2GAA0B,CAAC;AACrD,eAAO,MAAM,UAAU,wGAAuB,CAAC;AAC/C,eAAO,MAAM,WAAW,yGAAwB,CAAC;AACjD,eAAO,MAAM,WAAW,yGAAwB,CAAC;AACjD,eAAO,MAAM,eAAe,6GAA4B,CAAC"}

package/dist/components/Select/Select.js

@@ -26,8 +26,12 @@ const Select = React.forwardRef(
     onValueChange,
     disabled,
     children,
+    ariaLabel,
+    id: customId,
     ...props
   }, ref) => {
+    const generatedId = React.useId();
+    const triggerId = customId ?? generatedId;
     const isError = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
     const globalMotion = useGlobalAnimation();
@@ -38,7 +42,14 @@ const Select = React.forwardRef(
         className: cn("flex flex-col gap-1.5 w-full font-sans", containerClassName),
         style,
         children: [
-          label && /* @__PURE__ */ jsx("label", { className: "text-body-3 font-semibold text-foreground tracking-wide select-none", children: label }),
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: triggerId,
+              className: "text-body-3 font-semibold text-foreground tracking-wide select-none",
+              children: label
+            }
+          ),
           /* @__PURE__ */ jsxs(
             SelectPrimitive.Root,
             {
@@ -52,6 +63,8 @@ const Select = React.forwardRef(
                   SelectPrimitive.Trigger,
                   {
                     ref,
+                    id: triggerId,
+                    "aria-label": ariaLabel,
                     "data-slot": "select-trigger",
                     "aria-invalid": isError ? "true" : void 0,
                     className: cn(

package/dist/components/Select/Select.types.d.ts

@@ -13,6 +13,10 @@ export interface SelectProps extends Omit<SelectPrimitive.SelectProps, 'children
      * Field label displayed above the select trigger.
      */
     label?: string;
+    /** Accessible name when there is no visible `label` (e.g. a compact "Sort by" control). */
+    ariaLabel?: string;
+    /** Id of the trigger (generated when omitted); the visible label points at it. */
+    id?: string;
     /**
      * Placeholder text shown when no value is selected.
      */

package/dist/components/Select/Select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,EACnD,qBAAqB;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,EACnD,qBAAqB;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SnackbarProps } from './Snackbar.types';
+/**
+ * One snackbar: message (and an optional second line), one inline action, a small close button.
+ * It leaves on its own after `duration` (paused while hovered, focused or touched), when swiped
+ * sideways or down, or when its action is used.
+ */
+export declare const Snackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Snackbar.d.ts.map

package/dist/components/Snackbar/Snackbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAatD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,sFA+FpB,CAAC"}

package/dist/components/Snackbar/Snackbar.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { snackbarIconVariants, snackbarActionVariants, snackbarCloseVariants, snackbarVariants } from './Snackbar.styles.js';
+
+const ICONS = {
+  default: Info,
+  info: Info,
+  success: CheckCircle,
+  warning: AlertTriangle,
+  destructive: AlertCircle
+};
+const SWIPE_DISMISS_PX = 48;
+const Snackbar = React.forwardRef(
+  ({ item, onDismiss, dismissLabel = "Dismiss", className, style, ...props }, ref) => {
+    const variant = item.variant ?? "default";
+    const Icon = ICONS[variant];
+    const duration = item.duration ?? (item.action ? 6e3 : 4e3);
+    const [paused, setPaused] = React.useState(false);
+    const remaining = React.useRef(duration);
+    React.useEffect(() => {
+      remaining.current = duration;
+    }, [item, duration]);
+    React.useEffect(() => {
+      if (!item.open || paused || duration === Infinity) return;
+      const started = Date.now();
+      const timer = setTimeout(onDismiss, remaining.current);
+      return () => {
+        clearTimeout(timer);
+        remaining.current -= Date.now() - started;
+      };
+    }, [item, paused, duration, onDismiss]);
+    const start = React.useRef(null);
+    const [drag, setDrag] = React.useState({ x: 0, y: 0 });
+    const onPointerDown = (event) => {
+      if (event.target.closest("button")) return;
+      start.current = { x: event.clientX, y: event.clientY };
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+      setPaused(true);
+    };
+    const onPointerMove = (event) => {
+      if (!start.current) return;
+      setDrag({
+        x: event.clientX - start.current.x,
+        y: Math.max(0, event.clientY - start.current.y)
+      });
+    };
+    const onPointerEnd = () => {
+      if (!start.current) return;
+      start.current = null;
+      setPaused(false);
+      if (Math.abs(drag.x) > SWIPE_DISMISS_PX || drag.y > SWIPE_DISMISS_PX) onDismiss();
+      else setDrag({ x: 0, y: 0 });
+    };
+    const dragging = drag.x !== 0 || drag.y !== 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "snackbar",
+        "data-variant": variant,
+        "data-state": item.open ? "open" : "closed",
+        className: cn(snackbarVariants({ open: item.open }), dragging && "transition-none", className),
+        style: {
+          ...style,
+          ...dragging && {
+            transform: `translate(${drag.x}px, ${drag.y}px)`,
+            opacity: Math.max(0.3, 1 - Math.max(Math.abs(drag.x), drag.y) / 200)
+          }
+        },
+        onMouseEnter: () => setPaused(true),
+        onMouseLeave: () => setPaused(false),
+        onFocus: () => setPaused(true),
+        onBlur: () => setPaused(false),
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: onPointerEnd,
+        onPointerCancel: onPointerEnd,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: snackbarIconVariants({ variant }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 py-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-body-2 font-medium leading-snug", children: item.message }),
+            item.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-body-3 leading-snug text-grey-300", children: item.description })
+          ] }),
+          item.action && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: snackbarActionVariants(),
+              onClick: (event) => {
+                item.action?.onClick(event);
+                onDismiss();
+              },
+              children: item.action.label
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": dismissLabel, className: snackbarCloseVariants(), onClick: onDismiss, children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" }) })
+        ]
+      }
+    );
+  }
+);
+Snackbar.displayName = "Snackbar";
+
+export { Snackbar };

package/dist/components/Snackbar/Snackbar.styles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Bottom of the screen, above anything pinned there (pages set --toast-offset-bottom to a bar's
+ * height) and the home indicator. Full width minus margins on phones; a compact bar centred on
+ * wider screens.
+ */
+export declare const snackbarHostVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Inverse surface (dark bar, light text), as on Android and most shopping apps. */
+export declare const snackbarVariants: (props?: ({
+    open?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const snackbarIconVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Text action: light primary on the dark bar (high contrast), no button chrome. */
+export declare const snackbarActionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const snackbarCloseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=Snackbar.styles.d.ts.map

package/dist/components/Snackbar/Snackbar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,gBAAgB;;8EAW5B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;8EAW/B,CAAC;AAEH,oFAAoF;AACpF,eAAO,MAAM,sBAAsB,oFAElC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAEjC,CAAC"}