@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/fundamental/date-picker.js

@@ -0,0 +1,119 @@
+import { jsxs as s, jsx as t, Fragment as O } from "react/jsx-runtime";
+import * as c from "react";
+import { format as f } from "date-fns";
+import { Calendar as w } from "lucide-react";
+import { cn as x } from "../../lib/utils.js";
+import { Button as C } from "./button.js";
+import { Calendar as N } from "./calendar.js";
+import { Popover as y, PopoverTrigger as k, PopoverContent as g } from "./popover.js";
+const j = /* @__PURE__ */ c.forwardRef(
+  ({
+    date: r,
+    onDateChange: m,
+    placeholder: u = "Pick a date",
+    disabled: o = !1,
+    className: p,
+    formatStr: n = "PPP",
+    fromDate: a,
+    toDate: i,
+    ...d
+  }, h) => {
+    const [P, l] = c.useState(!1);
+    return /* @__PURE__ */ s(y, { open: P, onOpenChange: l, children: [
+      /* @__PURE__ */ t(k, { asChild: !0, children: /* @__PURE__ */ s(
+        C,
+        {
+          ref: h,
+          variant: "default",
+          className: x(
+            "w-full justify-start text-left font-normal",
+            !r && "text-[var(--color-text-tertiary)]",
+            p
+          ),
+          disabled: o,
+          ...d,
+          children: [
+            /* @__PURE__ */ t(w, { className: "mr-2 h-4 w-4" }),
+            r ? f(r, n) : /* @__PURE__ */ t("span", { children: u })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(g, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ t(
+        N,
+        {
+          mode: "single",
+          selected: r,
+          onSelect: (e) => {
+            m?.(e), l(!1);
+          },
+          disabled: (e) => !!(o || a && e < a || i && e > i),
+          initialFocus: !0
+        }
+      ) })
+    ] });
+  }
+);
+j.displayName = "DatePicker";
+const F = /* @__PURE__ */ c.forwardRef(
+  ({
+    dateRange: r,
+    onDateRangeChange: m,
+    placeholder: u = "Pick a date range",
+    disabled: o = !1,
+    className: p,
+    formatStr: n = "LLL dd, y",
+    fromDate: a,
+    toDate: i,
+    ...d
+  }, h) => {
+    const [P, l] = c.useState(!1);
+    return /* @__PURE__ */ s(y, { open: P, onOpenChange: l, children: [
+      /* @__PURE__ */ t(k, { asChild: !0, children: /* @__PURE__ */ s(
+        C,
+        {
+          ref: h,
+          variant: "default",
+          className: x(
+            "w-full justify-start text-left font-normal",
+            !r?.from && "text-[var(--color-text-tertiary)]",
+            p
+          ),
+          disabled: o,
+          ...d,
+          children: [
+            /* @__PURE__ */ t(w, { className: "mr-2 h-4 w-4" }),
+            r?.from ? r.to ? /* @__PURE__ */ s(O, { children: [
+              f(r.from, n),
+              " -",
+              " ",
+              f(r.to, n)
+            ] }) : f(r.from, n) : /* @__PURE__ */ t("span", { children: u })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(g, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ t(
+        N,
+        {
+          mode: "range",
+          defaultMonth: r?.from,
+          selected: r,
+          onSelect: (e) => {
+            const v = {
+              from: e?.from || void 0,
+              to: e?.to || void 0
+            };
+            m?.(v), v.from && v.to && l(!1);
+          },
+          disabled: (e) => !!(o || a && e < a || i && e > i),
+          numberOfMonths: 2,
+          initialFocus: !0
+        }
+      ) })
+    ] });
+  }
+);
+F.displayName = "DateRangePicker";
+export {
+  j as DatePicker,
+  F as DateRangePicker
+};

package/dist/es/components/fundamental/dialog.js

@@ -0,0 +1,106 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import * as i from "react";
+import * as o from "@radix-ui/react-dialog";
+import { cn as r } from "../../lib/utils.js";
+import { Icon as n } from "./icon.js";
+import { Button as m } from "./button.js";
+const D = o.Root, w = o.Trigger, p = o.Portal, C = o.Close, d = /* @__PURE__ */ i.forwardRef(({ className: a, ...e }, s) => /* @__PURE__ */ t(
+  o.Overlay,
+  {
+    ref: s,
+    className: r(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--color-background-blanket)]",
+      a
+    ),
+    ...e
+  }
+));
+d.displayName = o.Overlay.displayName;
+const f = /* @__PURE__ */ i.forwardRef(({ className: a, children: e, ...s }, c) => /* @__PURE__ */ l(p, { children: [
+  /* @__PURE__ */ t(d, {}),
+  /* @__PURE__ */ l(
+    o.Content,
+    {
+      ref: c,
+      className: r(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 flex flex-col w-[calc(100%-2rem)] max-w-lg max-h-[85vh] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-l border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] shadow-xl duration-200 sm:max-w-[425px]",
+        a
+      ),
+      "aria-describedby": void 0,
+      ...s,
+      children: [
+        e,
+        /* @__PURE__ */ t(o.Close, { asChild: !0, children: /* @__PURE__ */ l(
+          m,
+          {
+            variant: "ghost",
+            size: "s",
+            className: "absolute top-3 right-3 h-8 w-8 p-0",
+            children: [
+              /* @__PURE__ */ t(n, { name: "x", size: "m" }),
+              /* @__PURE__ */ t("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        ) })
+      ]
+    }
+  )
+] }));
+f.displayName = o.Content.displayName;
+const x = ({
+  className: a,
+  ...e
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: r(
+      "flex flex-col space-y-[var(--space-s)] border-b border-[var(--color-border-primary-subtle)] px-[var(--space-2xl)] py-[var(--space-l)] text-center sm:text-left",
+      a
+    ),
+    ...e
+  }
+);
+x.displayName = "DialogHeader";
+const v = ({
+  className: a,
+  ...e
+}) => /* @__PURE__ */ t("div", { className: r("flex-1 overflow-y-auto px-[var(--space-2xl)] py-[var(--space-2xl)]", a), ...e });
+v.displayName = "DialogBody";
+const y = ({
+  className: a,
+  ...e
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: r(
+      "flex flex-col-reverse border-t border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-base)] p-[var(--space-2xl)] py-[var(--space-l)] sm:flex-row sm:justify-end sm:space-x-[var(--space-s)]",
+      a
+    ),
+    ...e
+  }
+);
+y.displayName = "DialogFooter";
+const g = /* @__PURE__ */ i.forwardRef(({ className: a, ...e }, s) => /* @__PURE__ */ t(
+  o.Title,
+  {
+    ref: s,
+    className: r(
+      "[&]:text-heading-md text-[var(--color-text-primary)]",
+      a
+    ),
+    ...e
+  }
+));
+g.displayName = o.Title.displayName;
+export {
+  D as Dialog,
+  v as DialogBody,
+  C as DialogClose,
+  f as DialogContent,
+  y as DialogFooter,
+  x as DialogHeader,
+  d as DialogOverlay,
+  p as DialogPortal,
+  g as DialogTitle,
+  w as DialogTrigger
+};

package/dist/es/components/fundamental/drawer.js

@@ -0,0 +1,93 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import * as l from "react";
+import { Drawer as a } from "vaul";
+import { cn as s } from "../../lib/utils.js";
+const m = ({
+  shouldScaleBackground: r = !0,
+  ...e
+}) => /* @__PURE__ */ o(a.Root, { shouldScaleBackground: r, ...e });
+m.displayName = "Drawer";
+const g = a.Trigger, n = a.Portal, b = a.Close, i = /* @__PURE__ */ l.forwardRef(({ className: r, ...e }, t) => /* @__PURE__ */ o(
+  a.Overlay,
+  {
+    ref: t,
+    className: s(
+      "fixed inset-0 z-50 bg-[var(--color-background-blanket)]",
+      r
+    ),
+    ...e
+  }
+));
+i.displayName = a.Overlay.displayName;
+const p = /* @__PURE__ */ l.forwardRef(({ className: r, children: e, ...t }, d) => /* @__PURE__ */ c(n, { children: [
+  /* @__PURE__ */ o(i, {}),
+  /* @__PURE__ */ c(
+    a.Content,
+    {
+      ref: d,
+      className: s(
+        "fixed bottom-0 left-0 right-0 z-50 w-full max-w-none flex h-auto flex-col rounded-t-lg border-t border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] shadow-xl",
+        r
+      ),
+      style: {
+        width: "100vw",
+        ...t.style
+      },
+      ...t,
+      children: [
+        /* @__PURE__ */ o("div", { className: "mx-auto mt-[var(--space-s)] h-1 w-12 rounded-full bg-[var(--color-text-secondary)] opacity-60" }),
+        e
+      ]
+    }
+  )
+] }));
+p.displayName = "DrawerContent";
+const w = ({
+  className: r,
+  ...e
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: s("grid gap-[var(--space-s)] p-[var(--space-m)] text-center sm:text-left", r),
+    ...e
+  }
+);
+w.displayName = "DrawerHeader";
+const f = ({
+  className: r,
+  ...e
+}) => /* @__PURE__ */ o("div", { className: s("mt-auto flex flex-col gap-[var(--space-s)] p-[var(--space-m)]", r), ...e });
+f.displayName = "DrawerFooter";
+const y = /* @__PURE__ */ l.forwardRef(({ className: r, ...e }, t) => /* @__PURE__ */ o(
+  a.Title,
+  {
+    ref: t,
+    className: s(
+      "text-heading-lg text-[var(--color-text-primary)]",
+      r
+    ),
+    ...e
+  }
+));
+y.displayName = a.Title.displayName;
+const x = /* @__PURE__ */ l.forwardRef(({ className: r, ...e }, t) => /* @__PURE__ */ o(
+  a.Description,
+  {
+    ref: t,
+    className: s("text-body-md text-[var(--color-text-secondary)]", r),
+    ...e
+  }
+));
+x.displayName = a.Description.displayName;
+export {
+  m as Drawer,
+  b as DrawerClose,
+  p as DrawerContent,
+  x as DrawerDescription,
+  f as DrawerFooter,
+  w as DrawerHeader,
+  i as DrawerOverlay,
+  n as DrawerPortal,
+  y as DrawerTitle,
+  g as DrawerTrigger
+};