@timmbr/ui 1.9.0 → 1.11.0

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"}

package/dist/components/Snackbar/Snackbar.styles.js

@@ -0,0 +1,37 @@
+import { cva } from 'class-variance-authority';
+
+const snackbarHostVariants = cva(
+  "pointer-events-none fixed inset-x-3 z-[110] flex justify-center bottom-[calc(0.75rem+env(safe-area-inset-bottom)+var(--toast-offset-bottom,0px))] transition-[bottom] duration-200 sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2"
+);
+const snackbarVariants = cva(
+  "pointer-events-auto flex w-full min-h-12 touch-pan-y select-none items-center gap-3 rounded-md bg-grey-950 py-2.5 pl-4 pr-2 font-sans text-grey-50 shadow-xl sm:w-auto sm:min-w-[22rem] sm:max-w-[36rem] motion-safe:transition-[transform,opacity] motion-safe:duration-200",
+  {
+    variants: {
+      open: {
+        true: "translate-y-0 opacity-100",
+        false: "translate-y-2 opacity-0"
+      }
+    },
+    defaultVariants: { open: true }
+  }
+);
+const snackbarIconVariants = cva("size-5 shrink-0", {
+  variants: {
+    variant: {
+      default: "hidden",
+      info: "text-grey-300",
+      success: "text-success",
+      warning: "text-warning",
+      destructive: "text-destructive"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+const snackbarActionVariants = cva(
+  "shrink-0 rounded-sm px-2.5 py-2 text-body-3 font-bold uppercase tracking-wide text-primary-200 transition-colors hover:bg-grey-50/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-grey-50"
+);
+const snackbarCloseVariants = cva(
+  "flex size-8 shrink-0 items-center justify-center rounded-full text-grey-400 transition-colors hover:bg-grey-50/10 hover:text-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-grey-50"
+);
+
+export { snackbarActionVariants, snackbarCloseVariants, snackbarHostVariants, snackbarIconVariants, snackbarVariants };

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

@@ -0,0 +1,36 @@
+import type * as React from 'react';
+export type SnackbarVariant = 'default' | 'success' | 'info' | 'warning' | 'destructive';
+export interface SnackbarAction {
+    label: React.ReactNode;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export interface SnackbarOptions {
+    /** Re-showing the same id replaces it instead of queueing another. */
+    id?: string;
+    /** Second line, smaller (keep it short: snackbars are glanceable). */
+    description?: React.ReactNode;
+    variant?: SnackbarVariant;
+    /** One inline action, e.g. "View cart". Tapping it also dismisses the snackbar. */
+    action?: SnackbarAction;
+    /** Milliseconds on screen. Defaults to 4000, or 6000 with an action (time to reach it). */
+    duration?: number;
+    onDismiss?: () => void;
+}
+export interface SnackbarItem extends SnackbarOptions {
+    id: string;
+    message: React.ReactNode;
+    /** False while it animates out. */
+    open: boolean;
+}
+export interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    item: SnackbarItem;
+    onDismiss: () => void;
+    /** Labels for assistive tech. */
+    dismissLabel?: string;
+}
+export interface SnackbarHostProps {
+    /** Accessible name of the dismiss control (snackbars can be swiped away too). */
+    dismissLabel?: string;
+    className?: string;
+}
+//# sourceMappingURL=Snackbar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAEzF,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mFAAmF;IACnF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,YAAa,SAAQ,eAAe;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SnackbarHostProps } from './Snackbar.types';
+export declare function SnackbarHost({ dismissLabel, className }: SnackbarHostProps): React.JSX.Element;
+//# sourceMappingURL=SnackbarHost.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarHost.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarHost.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAS1D,wBAAgB,YAAY,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,iBAAiB,qBAsB1E"}

package/dist/components/Snackbar/SnackbarHost.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { Snackbar } from './Snackbar.js';
+import { snackbarHostVariants } from './Snackbar.styles.js';
+import { snackbarStore } from './snackbarStore.js';
+
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function SnackbarHost({ dismissLabel, className }) {
+  const current = React.useSyncExternalStore(snackbarStore.subscribe, snackbarStore.getCurrent, () => null);
+  useIsomorphicLayoutEffect(() => snackbarStore.registerHost(), []);
+  const urgent = current?.variant === "destructive";
+  const dismiss = React.useCallback(() => {
+    if (current) snackbarStore.dismiss(current.id);
+  }, [current]);
+  const content = current && /* @__PURE__ */ jsx(Snackbar, { item: current, onDismiss: dismiss, dismissLabel }, current.id);
+  return /* @__PURE__ */ jsxs("div", { className: cn(snackbarHostVariants(), className), "data-slot": "snackbar-host", children: [
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "contents", children: !urgent && content }),
+    /* @__PURE__ */ jsx("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: "contents", children: urgent && content })
+  ] });
+}
+
+export { SnackbarHost };

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

@@ -0,0 +1,6 @@
+export * from './Snackbar';
+export * from './SnackbarHost';
+export * from './snackbarStore';
+export * from './Snackbar.types';
+export * from './Snackbar.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

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

@@ -0,0 +1,42 @@
+import type * as React from 'react';
+import type { SnackbarItem, SnackbarOptions } from './Snackbar.types';
+/** How long the closing animation runs before the next snackbar shows. */
+export declare const SNACKBAR_EXIT_MS = 180;
+type Listener = () => void;
+/**
+ * One snackbar at a time (the mobile pattern): showing a new one closes the current one first;
+ * extra ones wait their turn. Re-showing an id that's on screen or queued updates it in place.
+ */
+declare class SnackbarStore {
+    private current;
+    private queue;
+    private listeners;
+    private exitTimer;
+    private hosts;
+    /** SnackbarHost registers while mounted; toast() only routes to snackbars when one is. */
+    registerHost: () => () => void;
+    hasHost: () => boolean;
+    subscribe: (listener: Listener) => () => void;
+    getCurrent: () => SnackbarItem | null;
+    private notify;
+    show(message: React.ReactNode, options?: SnackbarOptions): string;
+    dismiss(id?: string): void;
+    private close;
+    private next;
+    /** Test helper. */
+    reset(): void;
+}
+export declare const snackbarStore: SnackbarStore;
+type VariantShortcut = (message: React.ReactNode, options?: Omit<SnackbarOptions, 'variant'>) => string;
+export interface SnackbarFunction {
+    (message: React.ReactNode, options?: SnackbarOptions): string;
+    success: VariantShortcut;
+    info: VariantShortcut;
+    warning: VariantShortcut;
+    error: VariantShortcut;
+    dismiss: (id?: string) => void;
+}
+/** Shows a snackbar: `snackbar('Saved')`, `snackbar.success('Added to cart', { action })`. */
+export declare const snackbar: SnackbarFunction;
+export {};
+//# sourceMappingURL=snackbarStore.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snackbarStore.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/snackbarStore.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAmB,MAAM,kBAAkB,CAAC;AAEvF,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAE3B;;;GAGG;AACH,cAAM,aAAa;IACjB,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,SAAS,CAA4C;IAC7D,OAAO,CAAC,KAAK,CAAK;IAElB,0FAA0F;IAC1F,YAAY,mBAKV;IAEF,OAAO,gBAAwB;IAE/B,SAAS,GAAI,UAAU,QAAQ,gBAK7B;IAEF,UAAU,4BAAsB;IAEhC,OAAO,CAAC,MAAM;IAId,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,GAAE,eAAoB,GAAG,MAAM;IAsBrE,OAAO,CAAC,EAAE,CAAC,EAAE,MAAM;IAMnB,OAAO,CAAC,KAAK;IAab,OAAO,CAAC,IAAI;IAKZ,mBAAmB;IACnB,KAAK;CAMN;AAED,eAAO,MAAM,aAAa,eAAsB,CAAC;AAEjD,KAAK,eAAe,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,KAAK,MAAM,CAAC;AAExG,MAAM,WAAW,gBAAgB;IAC/B,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC9D,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAOD,8FAA8F;AAC9F,eAAO,MAAM,QAAQ,EAAE,gBAStB,CAAC"}

package/dist/components/Snackbar/snackbarStore.js

@@ -0,0 +1,87 @@
+"use client";
+const SNACKBAR_EXIT_MS = 180;
+class SnackbarStore {
+  current = null;
+  queue = [];
+  listeners = /* @__PURE__ */ new Set();
+  exitTimer;
+  hosts = 0;
+  /** SnackbarHost registers while mounted; toast() only routes to snackbars when one is. */
+  registerHost = () => {
+    this.hosts += 1;
+    return () => {
+      this.hosts -= 1;
+    };
+  };
+  hasHost = () => this.hosts > 0;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  getCurrent = () => this.current;
+  notify() {
+    this.listeners.forEach((listener) => listener());
+  }
+  show(message, options = {}) {
+    const id = options.id ?? Math.random().toString(36).slice(2, 9);
+    const item = { ...options, id, message, open: true };
+    if (this.current?.id === id && this.current.open) {
+      this.current = item;
+      this.notify();
+      return id;
+    }
+    const queued = this.queue.findIndex((q) => q.id === id);
+    if (queued >= 0) {
+      this.queue[queued] = item;
+      return id;
+    }
+    this.queue.unshift(item);
+    if (this.current?.open) this.close();
+    else if (!this.current) this.next();
+    return id;
+  }
+  dismiss(id) {
+    if (!id) this.queue = [];
+    if (this.current && (!id || this.current.id === id)) this.close();
+    else if (id) this.queue = this.queue.filter((q) => q.id !== id);
+  }
+  close() {
+    if (!this.current || !this.current.open) return;
+    const closing = this.current;
+    this.current = { ...closing, open: false };
+    this.notify();
+    closing.onDismiss?.();
+    clearTimeout(this.exitTimer);
+    this.exitTimer = setTimeout(() => {
+      this.current = null;
+      this.next();
+    }, SNACKBAR_EXIT_MS);
+  }
+  next() {
+    this.current = this.queue.shift() ?? null;
+    this.notify();
+  }
+  /** Test helper. */
+  reset() {
+    clearTimeout(this.exitTimer);
+    this.current = null;
+    this.queue = [];
+    this.notify();
+  }
+}
+const snackbarStore = new SnackbarStore();
+const withVariant = (variant) => (message, options) => snackbarStore.show(message, { ...options, variant });
+const snackbar = Object.assign(
+  (message, options) => snackbarStore.show(message, options),
+  {
+    success: withVariant("success"),
+    info: withVariant("info"),
+    warning: withVariant("warning"),
+    error: withVariant("destructive"),
+    dismiss: (id) => snackbarStore.dismiss(id)
+  }
+);
+
+export { SNACKBAR_EXIT_MS, snackbar, snackbarStore };

package/dist/components/StockMeter/StockMeter.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { StockMeterProps } from './StockMeter.types';
+/**
+ * "Only 3 left" urgency line with a short bar. Renders nothing above `threshold` or when sold
+ * out (urgency only helps while it's true and the item can still be bought).
+ */
+export declare const StockMeter: React.ForwardRefExoticComponent<StockMeterProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=StockMeter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StockMeter.d.ts","sourceRoot":"","sources":["../../../src/components/StockMeter/StockMeter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,wFAetB,CAAC"}

package/dist/components/StockMeter/StockMeter.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { stockMeterFillVariants, stockMeterTrackVariants, stockMeterVariants } from './StockMeter.styles.js';
+
+const StockMeter = React.forwardRef(
+  ({ available, threshold = 5, label, className, ...props }, ref) => {
+    if (available <= 0 || available > threshold) return null;
+    const text = label ? label(available) : `Hurry! Only ${available} left in stock`;
+    const fill = Math.max(8, Math.round(available / (threshold * 2) * 100));
+    return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "stock-meter", className: cn(stockMeterVariants(), className), ...props, children: [
+      /* @__PURE__ */ jsx("p", { className: "text-body-2 font-semibold text-primary", children: text }),
+      /* @__PURE__ */ jsx("div", { className: stockMeterTrackVariants(), "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: stockMeterFillVariants(), style: { width: `${fill}%` } }) })
+    ] });
+  }
+);
+StockMeter.displayName = "StockMeter";
+
+export { StockMeter };

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

@@ -0,0 +1,4 @@
+export declare const stockMeterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stockMeterTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stockMeterFillVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=StockMeter.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StockMeter.styles.d.ts","sourceRoot":"","sources":["../../../src/components/StockMeter/StockMeter.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,oFAAuC,CAAC;AAEvE,eAAO,MAAM,uBAAuB,oFAA6D,CAAC;AAElG,eAAO,MAAM,sBAAsB,oFAAwE,CAAC"}

package/dist/components/StockMeter/StockMeter.styles.js

@@ -0,0 +1,7 @@
+import { cva } from 'class-variance-authority';
+
+const stockMeterVariants = cva("flex flex-col gap-2 font-sans");
+const stockMeterTrackVariants = cva("h-1 w-full overflow-hidden rounded-full bg-grey-200");
+const stockMeterFillVariants = cva("h-full rounded-full bg-primary transition-[width] duration-300");
+
+export { stockMeterFillVariants, stockMeterTrackVariants, stockMeterVariants };

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

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+export interface StockMeterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Units that can still be bought. */
+    available: number;
+    /** Shows at or below this many units. Defaults to 5. */
+    threshold?: number;
+    /** Message for a count; defaults to "Hurry! Only N left in stock". */
+    label?: (available: number) => string;
+}
+//# sourceMappingURL=StockMeter.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StockMeter.types.d.ts","sourceRoot":"","sources":["../../../src/components/StockMeter/StockMeter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CACvC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StockMeter/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}

package/dist/components/Swatch/Swatch.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { SwatchProps } from './Swatch.types';
+/** Relative luminance of a #RRGGBB colour (0 dark … 1 light); null when not a hex colour. */
+export declare function swatchLuminance(color: string): number | null;
+/**
+ * A colour dot (finish, fabric, colour options). The colour comes from data, so it's passed as a
+ * CSS variable rather than a class. Light colours get a border so they stay visible on white.
+ * Decorative by default; pass `label` when the swatch is the only way the colour is named.
+ */
+export declare const Swatch: React.ForwardRefExoticComponent<SwatchProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Swatch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.d.ts","sourceRoot":"","sources":["../../../src/components/Swatch/Swatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,6FAA6F;AAC7F,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAS5D;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,qFAoBlB,CAAC"}

package/dist/components/Swatch/Swatch.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { swatchVariants } from './Swatch.styles.js';
+
+function swatchLuminance(color) {
+  const match = /^#?([0-9a-f]{6})$/i.exec(color.trim());
+  if (!match) return null;
+  const n = parseInt(match[1], 16);
+  const [r, g, b] = [n >> 16 & 255, n >> 8 & 255, n & 255].map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+const Swatch = React.forwardRef(
+  ({ color, size, selected, label, className, style, ...props }, ref) => {
+    const luminance = swatchLuminance(color);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-slot": "swatch",
+        "data-selected": selected ? "" : void 0,
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : true,
+        className: cn(
+          swatchVariants({ size, selected: !!selected, light: luminance !== null && luminance > 0.8 }),
+          className
+        ),
+        style: { ...style, ["--swatch"]: color },
+        ...props
+      }
+    );
+  }
+);
+Swatch.displayName = "Swatch";
+
+export { Swatch, swatchLuminance };

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

@@ -0,0 +1,8 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const swatchVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    selected?: boolean | null | undefined;
+    light?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SwatchVariants = VariantProps<typeof swatchVariants>;
+//# sourceMappingURL=Swatch.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Swatch/Swatch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;;;8EAqB1B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/Swatch/Swatch.styles.js

@@ -0,0 +1,26 @@
+import { cva } from 'class-variance-authority';
+
+const swatchVariants = cva(
+  "inline-block shrink-0 rounded-full bg-[var(--swatch)] ring-offset-2 ring-offset-grey-50 transition-shadow",
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-7"
+      },
+      selected: {
+        true: "ring-2 ring-primary",
+        false: ""
+      },
+      /** Very light colours need an edge to show on white. */
+      light: {
+        true: "border border-grey-300",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "md", selected: false, light: false }
+  }
+);
+
+export { swatchVariants };

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

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+export interface SwatchProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Any CSS colour; hex (#RRGGBB) also gets a border when very light. */
+    color: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Ring around the dot. */
+    selected?: boolean;
+    /** Accessible name; omit when a visible label sits next to the swatch. */
+    label?: string;
+}
+//# sourceMappingURL=Swatch.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.types.d.ts","sourceRoot":"","sources":["../../../src/components/Swatch/Swatch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACvF,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Swatch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAMxD,OAAO,KAAK,EAAiB,UAAU,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnF,eAAO,MAAM,aAAa,6CAA0B,CAAC;AAWrD,eAAO,MAAM,aAAa,6FAexB,CAAC;AAGH,eAAO,MAAM,KAAK,kFAuChB,CAAC;AAGH,eAAO,MAAM,WAAW,iKAatB,CAAC;AAGH,eAAO,MAAM,UAAU,gKAgBrB,CAAC;AAGH,eAAO,MAAM,UAAU,0JAUrB,CAAC;AAGH,eAAO,MAAM,gBAAgB,gKAU3B,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAMxD,OAAO,KAAK,EAAiB,UAAU,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnF,eAAO,MAAM,aAAa,6CAA0B,CAAC;AAerD,eAAO,MAAM,aAAa,6FAgBzB,CAAC;AAGF,eAAO,MAAM,KAAK,kFAsCjB,CAAC;AAGF,eAAO,MAAM,WAAW,iKAatB,CAAC;AAGH,eAAO,MAAM,UAAU,gKAgBrB,CAAC;AAGH,eAAO,MAAM,UAAU,0JAUrB,CAAC;AAGH,eAAO,MAAM,gBAAgB,gKAU3B,CAAC"}