@actioneer/ads 0.5.8 → 0.6.0

package/components/date-range-picker.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export type DateRangeValue = {
+    start: string;
+    end: string;
+};
+export interface DateRangePickerProps {
+    value?: DateRangeValue | null;
+    defaultValue?: DateRangeValue | null;
+    onChange?: (value: DateRangeValue | null) => void;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    size?: "sm" | "md";
+    disabled?: boolean;
+    minValue?: string;
+    maxValue?: string;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * ADS date-range picker, adapted from HeroUI's composition-first pattern.
+ * React Aria owns keyboard, focus, locale, and range-selection behavior while
+ * ADS owns every visual token, state, radius, and elevation.
+ */
+export declare function DateRangePicker({ value, defaultValue, onChange, label, description, errorMessage, size, disabled, minValue, maxValue, className, "aria-label": ariaLabel, }: DateRangePickerProps): React.JSX.Element;

package/components/date-range-picker.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as x from "react";
+import { parseDate as u } from "@internationalized/date";
+import { DateRangePicker as H, Label as I, Group as L, DateInput as b, DateSegment as p, Button as l, Text as h, Popover as O, Dialog as T, RangeCalendar as $, Heading as q, CalendarGrid as A, CalendarGridHeader as E, CalendarHeaderCell as F, CalendarGridBody as J, CalendarCell as K } from "react-aria-components";
+import { Calendar as M, ChevronLeft as Q, ChevronRight as U } from "../lib/icons.js";
+import { cn as n } from "../lib/cn.js";
+function N(r) {
+  if (!(r != null && r.start) || !r.end) return null;
+  try {
+    return {
+      start: u(r.start),
+      end: u(r.end)
+    };
+  } catch {
+    return null;
+  }
+}
+function y(r) {
+  if (r)
+    try {
+      return u(r);
+    } catch {
+      return;
+    }
+}
+function W(r) {
+  return r ? {
+    start: r.start.toString(),
+    end: r.end.toString()
+  } : null;
+}
+const X = {
+  sm: {
+    group: "min-h-8 rounded-sm text-xs",
+    trigger: "size-7 rounded-sm"
+  },
+  md: {
+    group: "min-h-10 rounded-md text-sm",
+    trigger: "size-8 rounded-sm"
+  }
+};
+function te({
+  value: r,
+  defaultValue: m,
+  onChange: d,
+  label: c,
+  description: g,
+  errorMessage: s,
+  size: v = "md",
+  disabled: w,
+  minValue: z,
+  maxValue: k,
+  className: D,
+  "aria-label": C
+}) {
+  const f = X[v], R = x.useMemo(() => N(r), [r]), j = x.useMemo(
+    () => N(m),
+    [m]
+  );
+  return /* @__PURE__ */ a(
+    H,
+    {
+      "aria-label": C,
+      className: n("flex w-full flex-col gap-1.5", D),
+      value: r === void 0 ? void 0 : R,
+      defaultValue: j ?? void 0,
+      isDisabled: w,
+      minValue: y(z),
+      maxValue: y(k),
+      isInvalid: !!s,
+      onChange: (t) => d == null ? void 0 : d(W(t)),
+      children: [
+        c && /* @__PURE__ */ e(I, { className: "text-xs font-medium text-foreground", children: c }),
+        /* @__PURE__ */ a(
+          L,
+          {
+            className: n(
+              "flex w-full items-center gap-1 border border-input bg-background px-2 text-foreground shadow-xs outline-none transition-[border-color,box-shadow,background-color]",
+              "hover:bg-muted/40 focus-within:border-ring focus-within:ring-3 focus-within:ring-ring",
+              "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+              "data-[invalid]:border-danger data-[invalid]:ring-danger/20",
+              f.group
+            ),
+            children: [
+              /* @__PURE__ */ e(b, { slot: "start", className: "flex min-w-0 flex-1 items-center", children: (t) => /* @__PURE__ */ e(
+                p,
+                {
+                  segment: t,
+                  className: ({ isFocused: i, isPlaceholder: o }) => n(
+                    "rounded-xs px-0.5 tabular-nums outline-none",
+                    o && "text-muted-foreground",
+                    i && "bg-primary text-primary-foreground"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "shrink-0 text-muted-foreground", children: "–" }),
+              /* @__PURE__ */ e(b, { slot: "end", className: "flex min-w-0 flex-1 items-center", children: (t) => /* @__PURE__ */ e(
+                p,
+                {
+                  segment: t,
+                  className: ({ isFocused: i, isPlaceholder: o }) => n(
+                    "rounded-xs px-0.5 tabular-nums outline-none",
+                    o && "text-muted-foreground",
+                    i && "bg-primary text-primary-foreground"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                l,
+                {
+                  "aria-label": "Open calendar",
+                  className: n(
+                    "ml-auto inline-flex shrink-0 items-center justify-center border border-transparent text-muted-foreground outline-none transition-colors",
+                    "hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring data-[pressed]:bg-muted",
+                    f.trigger
+                  ),
+                  children: /* @__PURE__ */ e(M, { className: "size-4" })
+                }
+              )
+            ]
+          }
+        ),
+        g && !s && /* @__PURE__ */ e(h, { slot: "description", className: "text-xs text-muted-foreground", children: g }),
+        s && /* @__PURE__ */ e(h, { slot: "errorMessage", className: "text-xs text-danger", children: s }),
+        /* @__PURE__ */ e(
+          O,
+          {
+            placement: "bottom end",
+            offset: 6,
+            className: "z-50 w-72 rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-elevation outline-none entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95",
+            children: /* @__PURE__ */ e(T, { className: "outline-none", children: /* @__PURE__ */ a($, { className: "w-full", visibleDuration: { months: 1 }, children: [
+              /* @__PURE__ */ a("header", { className: "mb-3 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ e(
+                  l,
+                  {
+                    slot: "previous",
+                    className: "inline-flex size-8 items-center justify-center rounded-sm border border-input bg-background text-foreground outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring disabled:opacity-40",
+                    children: /* @__PURE__ */ e(Q, { className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ e(q, { className: "text-sm font-semibold" }),
+                /* @__PURE__ */ e(
+                  l,
+                  {
+                    slot: "next",
+                    className: "inline-flex size-8 items-center justify-center rounded-sm border border-input bg-background text-foreground outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring disabled:opacity-40",
+                    children: /* @__PURE__ */ e(U, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ a(A, { weekdayStyle: "short", className: "w-full border-separate border-spacing-0.5", children: [
+                /* @__PURE__ */ e(E, { children: (t) => /* @__PURE__ */ e(F, { className: "h-7 text-center text-xs font-medium text-muted-foreground", children: t }) }),
+                /* @__PURE__ */ e(J, { children: (t) => /* @__PURE__ */ e(
+                  K,
+                  {
+                    date: t,
+                    className: ({
+                      isDisabled: i,
+                      isFocusVisible: o,
+                      isOutsideMonth: B,
+                      isSelected: G,
+                      isSelectionEnd: P,
+                      isSelectionStart: S,
+                      isUnavailable: V
+                    }) => n(
+                      "relative flex size-8 items-center justify-center rounded-sm text-xs tabular-nums outline-none transition-colors",
+                      "hover:bg-muted",
+                      G && "bg-muted font-medium text-foreground",
+                      (S || P) && "bg-primary text-primary-foreground hover:bg-primary",
+                      B && "text-muted-foreground/45",
+                      (i || V) && "pointer-events-none text-muted-foreground/35 line-through",
+                      o && "ring-3 ring-ring"
+                    )
+                  }
+                ) })
+              ] })
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  te as DateRangePicker
+};

package/components/drawer.d.ts

@@ -22,10 +22,12 @@ export interface DrawerProps extends VariantProps<typeof panelVariants> {
 export interface ModalDrawerProps extends VariantProps<typeof panelVariants> {
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    /** Accessible name for the modal drawer dialog. */
+    "aria-label": string;
     className?: string;
     children: React.ReactNode;
 }
-export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size, className, children, }: ModalDrawerProps): React.ReactPortal;
+export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size, className, children, "aria-label": ariaLabel, }: ModalDrawerProps): React.ReactPortal;
 /**
  * Drawer — an in-flow side panel that slides in beside content instead of
  * portaling over the whole page. No backdrop, no scroll lock; the surrounding

package/components/drawer.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as i, jsxs as v } from "react/jsx-runtime";
+import { jsx as i, jsxs as b } from "react/jsx-runtime";
 import * as a from "react";
-import { createPortal as D } from "react-dom";
-import { MotionConfig as p, AnimatePresence as b, motion as h } from "motion/react";
+import { createPortal as E } from "react-dom";
+import { MotionConfig as y, AnimatePresence as z, motion as w } from "motion/react";
 import { Close as R } from "../lib/icons.js";
-import { cva as E } from "class-variance-authority";
-import { cn as o } from "../lib/cn.js";
-import { springSheet as f, drawerOffset as u, drawerBackdropVariants as j } from "../lib/motion.js";
-const z = E(
+import { cva as j } from "class-variance-authority";
+import { cn as n } from "../lib/cn.js";
+import { springSheet as l, drawerOffset as h, drawerBackdropVariants as F } from "../lib/motion.js";
+const N = j(
   [
     "relative flex flex-col",
     "bg-elevated text-foreground",
@@ -43,12 +43,17 @@ const z = E(
     ],
     defaultVariants: { side: "right", size: "md" }
   }
-), F = {
+), A = {
   right: "justify-end items-stretch",
   left: "justify-start items-stretch",
   bottom: "justify-center items-end"
+}, B = {
+  sm: "25%",
+  md: "33.333333%",
+  lg: "50%",
+  xl: "66.666667%"
 };
-function N({
+function k({
   onClick: t,
   className: e
 }) {
@@ -58,7 +63,7 @@ function N({
       type: "button",
       onClick: t,
       "aria-label": "Close",
-      className: o(
+      className: n(
         "absolute inline-flex size-8 items-center justify-center",
         "rounded-sm text-muted-foreground",
         "transition-[background,color,transform] duration-150 ease-out motion-reduce:transition-none hover:bg-muted hover:text-foreground",
@@ -71,38 +76,39 @@ function N({
     }
   );
 }
-function q({
+function G({
   open: t,
   onOpenChange: e,
-  side: r,
-  size: w,
-  className: x,
-  children: g
+  side: s,
+  size: d,
+  className: v,
+  children: x,
+  "aria-label": g
 }) {
-  const l = r ?? "right", n = a.useRef(null), d = a.useRef(null);
+  const r = s ?? "right", c = a.useRef(null), m = a.useRef(null);
   return a.useEffect(() => {
     if (!t) return;
-    d.current = document.activeElement;
-    const c = document.body.style.overflow;
+    m.current = document.activeElement;
+    const f = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const m = (s) => {
-      s.key === "Escape" && (s.stopPropagation(), e(!1));
+    const u = (o) => {
+      o.key === "Escape" && (o.stopPropagation(), e(!1));
     };
-    document.addEventListener("keydown", m);
-    const k = requestAnimationFrame(() => {
-      var s;
-      (s = n.current) == null || s.focus();
+    document.addEventListener("keydown", u);
+    const D = requestAnimationFrame(() => {
+      var o;
+      (o = c.current) == null || o.focus();
     });
     return () => {
-      var s, y;
-      document.removeEventListener("keydown", m), document.body.style.overflow = c, cancelAnimationFrame(k), (y = (s = d.current) == null ? void 0 : s.focus) == null || y.call(s);
+      var o, p;
+      document.removeEventListener("keydown", u), document.body.style.overflow = f, cancelAnimationFrame(D), (p = (o = m.current) == null ? void 0 : o.focus) == null || p.call(o);
     };
-  }, [t, e]), D(
-    /* @__PURE__ */ i(p, { reducedMotion: "user", children: /* @__PURE__ */ i(b, { children: t && /* @__PURE__ */ v("div", { className: o("fixed inset-0 z-50 flex", F[l]), children: [
+  }, [t, e]), E(
+    /* @__PURE__ */ i(y, { reducedMotion: "user", children: /* @__PURE__ */ i(z, { children: t && /* @__PURE__ */ b("div", { className: n("fixed inset-0 z-50 flex", A[r]), children: [
       /* @__PURE__ */ i(
-        h.div,
+        w.div,
         {
-          variants: j,
+          variants: F,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
@@ -112,26 +118,27 @@ function q({
         },
         "backdrop"
       ),
-      /* @__PURE__ */ v(
-        h.div,
+      /* @__PURE__ */ b(
+        w.div,
         {
-          ref: n,
-          initial: u[l],
-          animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: f },
-          exit: { ...u[l], transition: f },
+          ref: c,
+          initial: h[r],
+          animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
+          exit: { ...h[r], pointerEvents: "none", transition: l },
           role: "dialog",
           "aria-modal": "true",
+          "aria-label": g,
           tabIndex: -1,
-          className: o(z({ side: l, size: w }), "relative outline-none", x),
+          className: n(N({ side: r, size: d }), "relative outline-none", v),
           children: [
             /* @__PURE__ */ i(
-              N,
+              k,
               {
                 onClick: () => e(!1),
                 className: "right-4 top-4"
               }
             ),
-            g
+            x
           ]
         },
         "panel"
@@ -140,96 +147,109 @@ function q({
     document.body
   );
 }
-function A({
+function L({
   open: t,
   onOpenChange: e,
-  side: r,
-  size: w,
-  className: x,
-  children: g,
-  "aria-label": l
+  side: s,
+  size: d,
+  className: v,
+  children: x,
+  "aria-label": g
 }) {
-  const n = r ?? "right", d = a.useRef(null);
+  const r = s ?? "right", c = d ?? "md", m = a.useRef(null);
   return a.useEffect(() => {
     if (!t) return;
-    const c = (m) => {
-      m.key === "Escape" && e(!1);
+    const f = (u) => {
+      u.key === "Escape" && e(!1);
     };
-    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
-  }, [t, e]), /* @__PURE__ */ i(p, { reducedMotion: "user", children: /* @__PURE__ */ i(b, { initial: !1, children: t && /* @__PURE__ */ v(
-    h.aside,
+    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
+  }, [t, e]), /* @__PURE__ */ i(y, { reducedMotion: "user", children: /* @__PURE__ */ i(z, { initial: !1, children: t && /* @__PURE__ */ i(
+    w.div,
     {
-      ref: d,
-      initial: u[n],
-      animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: f },
-      exit: { ...u[n], transition: f },
-      role: "complementary",
-      "aria-label": l,
-      className: o(
-        z({ side: n, size: w }),
-        "relative shrink-0 overflow-hidden rounded-lg bg-card shadow-none outline-none",
-        x
+      initial: r === "bottom" ? { height: "0%" } : { width: 0 },
+      animate: r === "bottom" ? { height: B[c], transition: l } : { width: "auto", transition: l },
+      exit: r === "bottom" ? { height: "0%", pointerEvents: "none", transition: l } : { width: 0, pointerEvents: "none", transition: l },
+      className: n(
+        "shrink-0 overflow-hidden",
+        r === "bottom" ? "w-full" : "h-full"
       ),
-      children: [
-        /* @__PURE__ */ i(
-          N,
-          {
-            onClick: () => e(!1),
-            className: "right-2 top-1"
-          }
-        ),
-        g
-      ]
+      children: /* @__PURE__ */ b(
+        w.aside,
+        {
+          ref: m,
+          initial: h[r],
+          animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
+          exit: { ...h[r], pointerEvents: "none", transition: l },
+          role: "complementary",
+          "aria-label": g,
+          className: n(
+            N({ side: r, size: d }),
+            "relative shrink-0 overflow-hidden rounded-lg bg-card shadow-none outline-none",
+            r === "bottom" && "h-full",
+            v
+          ),
+          children: [
+            /* @__PURE__ */ i(
+              k,
+              {
+                onClick: () => e(!1),
+                className: "right-2 top-1"
+              }
+            ),
+            x
+          ]
+        }
+      )
     },
-    "inline-drawer"
+    "inline-drawer-slot"
   ) }) });
 }
-const S = A, B = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+const J = L, M = a.forwardRef(({ className: t, ...e }, s) => /* @__PURE__ */ i(
   "div",
   {
-    ref: r,
-    className: o("flex flex-col gap-1 px-6 py-4 pr-14", t),
+    ref: s,
+    className: n("flex flex-col gap-1 px-6 py-4 pr-14", t),
     ...e
   }
 ));
-B.displayName = "DrawerHeader";
-const L = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+M.displayName = "DrawerHeader";
+const V = a.forwardRef(({ className: t, ...e }, s) => /* @__PURE__ */ i(
   "h2",
   {
-    ref: r,
-    className: o("text-lg font-medium text-foreground", t),
+    ref: s,
+    className: n("text-lg font-medium text-foreground", t),
     ...e
   }
 ));
-L.displayName = "DrawerTitle";
-const M = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+V.displayName = "DrawerTitle";
+const I = a.forwardRef(({ className: t, ...e }, s) => /* @__PURE__ */ i(
   "div",
   {
-    ref: r,
+    ref: s,
     tabIndex: 0,
-    className: o("flex-1 overflow-y-auto px-6 py-4 text-xs text-foreground", t),
+    className: n("flex-1 overflow-y-auto px-6 py-4 text-xs text-foreground", t),
     ...e
   }
 ));
-M.displayName = "DrawerBody";
-const V = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+I.displayName = "DrawerBody";
+const P = a.forwardRef(({ className: t, ...e }, s) => /* @__PURE__ */ i(
   "div",
   {
-    ref: r,
-    className: o(
+    ref: s,
+    className: n(
       "flex items-center justify-end gap-2 px-6 py-4",
       t
     ),
     ...e
   }
 ));
-V.displayName = "DrawerFooter";
+P.displayName = "DrawerFooter";
 export {
-  A as Drawer,
-  M as DrawerBody,
-  V as DrawerFooter,
-  B as DrawerHeader,
-  L as DrawerTitle,
-  S as InlineDrawer,
-  q as ModalDrawer
+  L as Drawer,
+  I as DrawerBody,
+  P as DrawerFooter,
+  M as DrawerHeader,
+  V as DrawerTitle,
+  J as InlineDrawer,
+  G as ModalDrawer
 };

package/components/index.d.ts

@@ -28,6 +28,7 @@ export * from './radio';
 export * from './switch';
 export * from './number-field';
 export * from './select';
+export * from './date-range-picker';
 export * from './autocomplete';
 export * from './slider';
 export * from './segmented';