@timmbr/ui 1.9.0 → 1.11.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/RadioCard/RadioCard.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { RadioCardProps } from './RadioCard.types';
+/**
+ * A selectable row or tile for choices that need more than a label (a payment method, a delivery
+ * speed). Place inside a `RadioGroup`: the whole card is the radio, so the group's `value`,
+ * `onValueChange`, arrow-key navigation and `name` work as usual.
+ */
+export declare const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=RadioCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCard/RadioCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,SAAS,0FAwCrB,CAAC"}

package/dist/components/RadioCard/RadioCard.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { cn } from '@timmbr/utils';
+import { resolveMotion } from '../../types/motion.js';
+import { radioCardMarkerClass, radioCardDotClass, radioCardVariants } from './RadioCard.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const RadioCard = React.forwardRef(
+  ({ className, variant, label, description, icon, trailing, motion, ...props }, ref) => {
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
+    return /* @__PURE__ */ jsxs(
+      RadioGroupPrimitive.Item,
+      {
+        ref,
+        "data-slot": "radio-card",
+        className: cn(
+          radioCardVariants({ variant }),
+          !shouldAnimate && "transition-none",
+          motionClass,
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center justify-center", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-body-2 font-medium leading-tight", children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-body-3 leading-normal text-muted-foreground", children: description })
+          ] }),
+          trailing ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: trailing }) : /* @__PURE__ */ jsx("span", { className: radioCardMarkerClass, "aria-hidden": "true", children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: radioCardDotClass }) })
+        ]
+      }
+    );
+  }
+);
+RadioCard.displayName = "RadioCard";
+
+export { RadioCard };

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

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const radioCardVariants: (props?: ({
+    variant?: "row" | "card" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The round marker at the end of a card (replaced by `trailing`). */
+export declare const radioCardMarkerClass = "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-grey-300 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 group-data-[state=checked]:border-primary";
+export declare const radioCardDotClass = "h-2.5 w-2.5 rounded-full bg-primary";
+export type RadioCardVariants = VariantProps<typeof radioCardVariants>;
+//# sourceMappingURL=RadioCard.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCard/RadioCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,iBAAiB;;8EAiB7B,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,oBAAoB,qLACmJ,CAAC;AAErL,eAAO,MAAM,iBAAiB,wCAAwC,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/RadioCard/RadioCard.styles.js

@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority';
+
+const radioCardVariants = cva(
+  "group flex w-full items-center gap-3 text-left font-sans text-foreground transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      /**
+       * - `row`: no surface of its own, for lists inside a card (divide them with `divide-y` on the group);
+       * - `card`: a bordered tile that highlights when selected.
+       */
+      variant: {
+        row: "py-4",
+        card: "rounded-[8px] border border-grey-200 dark:border-grey-800 bg-card p-4 hover:border-grey-400 data-[state=checked]:border-primary"
+      }
+    },
+    defaultVariants: {
+      variant: "row"
+    }
+  }
+);
+const radioCardMarkerClass = "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-grey-300 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 group-data-[state=checked]:border-primary";
+const radioCardDotClass = "h-2.5 w-2.5 rounded-full bg-primary";
+
+export { radioCardDotClass, radioCardMarkerClass, radioCardVariants };

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

@@ -0,0 +1,28 @@
+import type * as React from 'react';
+import type * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import type { RadioCardVariants } from './RadioCard.styles';
+import type { MotionProp } from '../../types/motion';
+export interface RadioCardProps extends Omit<RadioGroupPrimitive.RadioGroupItemProps, 'children'>, RadioCardVariants {
+    /**
+     * Main text of the option.
+     */
+    label: React.ReactNode;
+    /**
+     * Supporting text under the label.
+     */
+    description?: React.ReactNode;
+    /**
+     * Leading visual (an icon or logo), shown before the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Replaces the round selection marker at the end (e.g. a chevron).
+     * The card is still announced and navigated as a radio.
+     */
+    trailing?: React.ReactNode;
+    /**
+     * Motion transition control.
+     */
+    motion?: MotionProp;
+}
+//# sourceMappingURL=RadioCard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCard/RadioCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,UAAU,CAAC,EAC/D,iBAAiB;IACnB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,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/Skeleton/Skeleton.styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const skeletonVariants: (props?: ({
-    variant?: "text" | "circular" | "rectangular" | "card" | null | undefined;
+    variant?: "text" | "card" | "circular" | "rectangular" | null | undefined;
     animation?: "none" | "pulse" | "wave" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SkeletonVariants = VariantProps<typeof skeletonVariants>;