@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

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

@@ -0,0 +1,51 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as s from "react";
+import * as r from "@radix-ui/react-checkbox";
+import { Minus as n, Check as b } from "lucide-react";
+import { cva as t } from "class-variance-authority";
+import { cn as o } from "../../lib/utils.js";
+const l = t(
+  "peer w-[var(--size-2xs)] h-[var(--size-2xs)] shrink-0 rounded-s border-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 cursor-pointer hover:cursor-pointer [&:not(:disabled)]:cursor-pointer disabled:cursor-not-allowed disabled:opacity-100 box-border",
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]",
+          "hover:border-[var(--color-interaction-border-input-hovered)]",
+          "data-[state=checked]:border-[var(--color-border-brand-bold)] data-[state=checked]:bg-[var(--color-background-blue-bold)] data-[state=checked]:text-[var(--color-text-on-action)]",
+          "data-[state=indeterminate]:border-[var(--color-border-brand-bold)] data-[state=indeterminate]:bg-[var(--color-background-blue-bold)] data-[state=indeterminate]:text-[var(--color-text-on-action)]",
+          "disabled:border-none disabled:bg-[var(--color-background-disabled)]",
+          "disabled:data-[state=checked]:border-none disabled:data-[state=checked]:bg-[var(--color-background-disabled)] disabled:data-[state=checked]:text-[var(--color-icon-disabled)]",
+          "disabled:data-[state=indeterminate]:border-none disabled:data-[state=indeterminate]:bg-[var(--color-background-disabled)] disabled:data-[state=indeterminate]:text-[var(--color-icon-disabled)]"
+        ],
+        error: [
+          "border-[var(--color-border-error-bold)] bg-[var(--color-surface-primary)]",
+          "hover:border-[var(--color-border-error-bold)]",
+          "data-[state=checked]:border-[var(--color-border-error-bold)] data-[state=checked]:bg-[var(--color-background-error-subtle)] data-[state=checked]:text-[var(--color-text-on-error)]",
+          "data-[state=indeterminate]:border-[var(--color-border-error-bold)] data-[state=indeterminate]:bg-[var(--color-background-error-subtle)] data-[state=indeterminate]:text-[var(--color-text-on-error)]",
+          "disabled:border-none disabled:bg-[var(--color-background-disabled)]",
+          "disabled:data-[state=checked]:border-none disabled:data-[state=checked]:bg-[var(--color-background-disabled)] disabled:data-[state=checked]:text-[var(--color-icon-disabled)]",
+          "disabled:data-[state=indeterminate]:border-none disabled:data-[state=indeterminate]:bg-[var(--color-background-disabled)] disabled:data-[state=indeterminate]:text-[var(--color-icon-disabled)]"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), v = t(
+  "flex items-center justify-center text-current [&>svg]:w-[var(--size-3xs)] [&>svg]:h-[var(--size-3xs)]"
+), u = /* @__PURE__ */ s.forwardRef(({ className: d, variant: i, ...a }, c) => /* @__PURE__ */ e(
+  r.Root,
+  {
+    ref: c,
+    className: o(l({ variant: i }), d),
+    ...a,
+    children: /* @__PURE__ */ e(r.Indicator, { className: o(v()), children: a.checked === "indeterminate" ? /* @__PURE__ */ e(n, {}) : /* @__PURE__ */ e(b, {}) })
+  }
+));
+u.displayName = r.Root.displayName;
+export {
+  u as Checkbox,
+  l as checkboxVariants
+};

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

@@ -0,0 +1,55 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import * as n from "react";
+import * as e from "@radix-ui/react-collapsible";
+import { cn as c } from "../../lib/utils.js";
+import { Icon as p } from "./icon.js";
+const u = e.Root, d = /* @__PURE__ */ n.forwardRef(({ className: t, children: a, hideIcon: r = !1, asChild: i = !1, ...s }, l) => i ? /* @__PURE__ */ o(
+  e.CollapsibleTrigger,
+  {
+    ref: l,
+    asChild: !0,
+    ...s,
+    children: a
+  }
+) : /* @__PURE__ */ m(
+  e.CollapsibleTrigger,
+  {
+    ref: l,
+    className: c(
+      "[&]:text-body-medium-md flex flex-1 cursor-pointer items-center justify-between gap-[var(--space-s)] py-[var(--space-l)] text-left text-[var(--color-text-primary)] transition-all focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:outline-none [&[data-state=open]>svg]:rotate-180",
+      t
+    ),
+    ...s,
+    children: [
+      a,
+      !r && /* @__PURE__ */ o(
+        p,
+        {
+          name: "chevron-down",
+          size: "m",
+          color: "tertiary",
+          className: "shrink-0 transition-transform duration-200"
+        }
+      )
+    ]
+  }
+));
+d.displayName = e.CollapsibleTrigger.displayName;
+const f = /* @__PURE__ */ n.forwardRef(({ className: t, children: a, ...r }, i) => /* @__PURE__ */ o(
+  e.CollapsibleContent,
+  {
+    ref: i,
+    className: c(
+      "[&]:text-body-md data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-[var(--color-text-secondary)]",
+      t
+    ),
+    ...r,
+    children: /* @__PURE__ */ o("div", { className: "pt-0 pb-[var(--space-l)]", children: a })
+  }
+));
+f.displayName = e.CollapsibleContent.displayName;
+export {
+  u as Collapsible,
+  f as CollapsibleContent,
+  d as CollapsibleTrigger
+};

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

@@ -0,0 +1,229 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import * as m from "react";
+import { Check as k } from "lucide-react";
+import { cn as n } from "../../lib/utils.js";
+import { useIsDesktop as T } from "../../lib/hooks.js";
+import { Command as y, CommandInput as O, CommandList as D, CommandEmpty as z, CommandGroup as j, CommandItem as I } from "./command.js";
+import { Popover as E, PopoverTrigger as G, PopoverContent as L } from "./popover.js";
+import { Drawer as P, DrawerTrigger as R, DrawerContent as q } from "./drawer.js";
+function W({
+  options: o,
+  value: c,
+  onValueChange: d,
+  placeholder: v = "Select option...",
+  searchPlaceholder: u = "Search options...",
+  emptyMessage: p = "No options found",
+  disabled: b = !1,
+  className: f,
+  popoverClassName: C,
+  trigger: g,
+  clearable: x
+}) {
+  const [i, s] = m.useState(!1), [N, t] = m.useState(""), h = T(), S = o.find((a) => a.value === c), w = m.useCallback((a) => {
+    d?.(a === c ? "" : a), s(!1);
+  }, [c, d]);
+  return h ? /* @__PURE__ */ e("div", { className: n("w-full", f), children: /* @__PURE__ */ r(E, { open: i, onOpenChange: s, children: [
+    /* @__PURE__ */ e(G, { asChild: !0, children: g({ open: i, selectedOption: S, placeholder: v, disabled: b }) }),
+    /* @__PURE__ */ e(
+      L,
+      {
+        className: n(
+          "w-[var(--radix-popover-trigger-width)] min-w-[16rem] p-0",
+          C
+        ),
+        children: /* @__PURE__ */ r(y, { children: [
+          /* @__PURE__ */ e(
+            O,
+            {
+              placeholder: u,
+              value: N,
+              onValueChange: t,
+              clearable: x,
+              onClear: () => t("")
+            }
+          ),
+          /* @__PURE__ */ r(D, { children: [
+            /* @__PURE__ */ e(z, { children: p }),
+            /* @__PURE__ */ e(j, { children: o.map((a) => /* @__PURE__ */ r(
+              I,
+              {
+                value: a.value,
+                disabled: a.disabled,
+                onSelect: w,
+                className: "h-[var(--size-m)] px-[var(--space-m)] transition-colors hover:bg-[var(--color-background-neutral-subtlest-hovered)] aria-selected:bg-[var(--color-background-neutral-subtlest-hovered)]",
+                children: [
+                  a.label,
+                  /* @__PURE__ */ e(
+                    k,
+                    {
+                      className: n(
+                        "ml-auto h-4 w-4 text-[var(--color-icon-brand-bold)]",
+                        c === a.value ? "opacity-100" : "opacity-0"
+                      )
+                    }
+                  )
+                ]
+              },
+              a.value
+            )) })
+          ] })
+        ] })
+      }
+    )
+  ] }) }) : /* @__PURE__ */ e("div", { className: n("w-full", f), children: /* @__PURE__ */ r(P, { open: i, onOpenChange: s, children: [
+    /* @__PURE__ */ e(R, { asChild: !0, children: g({ open: i, selectedOption: S, placeholder: v, disabled: b }) }),
+    /* @__PURE__ */ r(q, { className: n("p-0", C), children: [
+      /* @__PURE__ */ e("div", { className: "space-y-[var(--space-xs)] px-[var(--space-m)] pb-[var(--space-m)]", children: /* @__PURE__ */ r(y, { children: [
+        /* @__PURE__ */ e(
+          O,
+          {
+            placeholder: u,
+            value: N,
+            onValueChange: t,
+            clearable: x,
+            onClear: () => t("")
+          }
+        ),
+        /* @__PURE__ */ r(D, { children: [
+          /* @__PURE__ */ e(z, { children: p }),
+          /* @__PURE__ */ e(j, { children: o.map((a) => /* @__PURE__ */ r(
+            I,
+            {
+              value: a.value,
+              disabled: a.disabled,
+              onSelect: w,
+              className: "h-[var(--size-l)] px-[var(--space-m)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+              children: [
+                a.label,
+                /* @__PURE__ */ e(
+                  k,
+                  {
+                    className: n(
+                      "ml-auto h-4 w-4 text-[var(--color-icon-brand-bold)]",
+                      c === a.value ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                )
+              ]
+            },
+            a.value
+          )) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "h-[env(safe-area-inset-bottom)]" })
+    ] })
+  ] }) });
+}
+function X({
+  options: o,
+  values: c = [],
+  onValuesChange: d,
+  placeholder: v = "Select options...",
+  searchPlaceholder: u = "Search options...",
+  emptyMessage: p = "No options found",
+  disabled: b = !1,
+  className: f,
+  popoverClassName: C,
+  trigger: g,
+  maxDisplayedItems: x = 3,
+  clearable: i
+}) {
+  const [s, N] = m.useState(!1), [t, h] = m.useState(""), S = T(), w = o.filter((l) => c.includes(l.value)), a = m.useCallback((l) => {
+    c.includes(l) ? d?.(c.filter((A) => A !== l)) : d?.([...c, l]);
+  }, [c, d]);
+  return S ? /* @__PURE__ */ e("div", { className: n("w-full", f), children: /* @__PURE__ */ r(E, { open: s, onOpenChange: N, children: [
+    /* @__PURE__ */ e(G, { asChild: !0, children: g({ open: s, selectedOptions: w, placeholder: v, disabled: b, maxDisplayedItems: x }) }),
+    /* @__PURE__ */ e(
+      L,
+      {
+        className: n(
+          "w-[var(--radix-popover-trigger-width)] min-w-[16rem] p-0",
+          C
+        ),
+        children: /* @__PURE__ */ r(y, { children: [
+          /* @__PURE__ */ e(
+            O,
+            {
+              placeholder: u,
+              value: t,
+              onValueChange: h,
+              clearable: i,
+              onClear: () => h("")
+            }
+          ),
+          /* @__PURE__ */ r(D, { children: [
+            /* @__PURE__ */ e(z, { children: p }),
+            /* @__PURE__ */ e(j, { children: o.map((l) => /* @__PURE__ */ r(
+              I,
+              {
+                value: l.value,
+                disabled: l.disabled,
+                onSelect: a,
+                className: "h-[var(--size-m)] px-[var(--space-m)] transition-colors hover:bg-[var(--color-background-neutral-subtlest-hovered)] aria-selected:bg-[var(--color-background-neutral-subtlest-hovered)]",
+                children: [
+                  l.label,
+                  /* @__PURE__ */ e(
+                    k,
+                    {
+                      className: n(
+                        "ml-auto h-4 w-4 text-[var(--color-icon-brand-bold)]",
+                        c.includes(l.value) ? "opacity-100" : "opacity-0"
+                      )
+                    }
+                  )
+                ]
+              },
+              l.value
+            )) })
+          ] })
+        ] })
+      }
+    )
+  ] }) }) : /* @__PURE__ */ e("div", { className: n("w-full", f), children: /* @__PURE__ */ r(P, { open: s, onOpenChange: N, children: [
+    /* @__PURE__ */ e(R, { asChild: !0, children: g({ open: s, selectedOptions: w, placeholder: v, disabled: b, maxDisplayedItems: x }) }),
+    /* @__PURE__ */ r(q, { className: n("p-0", C), children: [
+      /* @__PURE__ */ e("div", { className: "space-y-[var(--space-xs)] px-[var(--space-m)] pb-[var(--space-m)]", children: /* @__PURE__ */ r(y, { children: [
+        /* @__PURE__ */ e(
+          O,
+          {
+            placeholder: u,
+            value: t,
+            onValueChange: h,
+            clearable: i,
+            onClear: () => h("")
+          }
+        ),
+        /* @__PURE__ */ r(D, { children: [
+          /* @__PURE__ */ e(z, { children: p }),
+          /* @__PURE__ */ e(j, { children: o.map((l) => /* @__PURE__ */ r(
+            I,
+            {
+              value: l.value,
+              disabled: l.disabled,
+              onSelect: a,
+              className: "h-[var(--size-l)] px-[var(--space-m)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+              children: [
+                l.label,
+                /* @__PURE__ */ e(
+                  k,
+                  {
+                    className: n(
+                      "ml-auto h-4 w-4 text-[var(--color-icon-brand-bold)]",
+                      c.includes(l.value) ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                )
+              ]
+            },
+            l.value
+          )) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "h-[env(safe-area-inset-bottom)]" })
+    ] })
+  ] }) });
+}
+export {
+  W as Combobox,
+  X as MultiCombobox
+};

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

@@ -0,0 +1,155 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import * as d from "react";
+import * as m from "@radix-ui/react-dialog";
+import { Command as t } from "cmdk";
+import { cn as s } from "../../lib/utils.js";
+import { Icon as b } from "./icon.js";
+import { Button as _ } from "./button.js";
+import { inputVariants as h } from "./input.js";
+const c = /* @__PURE__ */ d.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+  t,
+  {
+    ref: o,
+    loop: !0,
+    className: s(
+      "flex h-full w-full flex-col overflow-hidden rounded-m bg-[var(--color-surface-primary)] text-[var(--color-text-primary)]",
+      e
+    ),
+    ...a
+  }
+));
+c.displayName = t.displayName;
+const L = ({ children: e, ...a }) => /* @__PURE__ */ r(m.Root, { ...a, children: /* @__PURE__ */ l(m.Portal, { children: [
+  /* @__PURE__ */ r(
+    m.Overlay,
+    {
+      className: s(
+        "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-black/25"
+      )
+    }
+  ),
+  /* @__PURE__ */ r(
+    m.Content,
+    {
+      className: s(
+        "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 grid w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-l border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-0 shadow-lg duration-200 max-w-[450px]"
+      ),
+      "aria-describedby": void 0,
+      children: /* @__PURE__ */ r(c, { className: "[&_[cmdk-group-heading]]:px-[var(--space-m)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--color-text-tertiary)] [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-item]]:px-[var(--space-m)] [&_[cmdk-item]]:min-h-[var(--size-m)] [&_[cmdk-item]]:py-[var(--space-s)] [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4", children: e })
+    }
+  )
+] }) }), N = /* @__PURE__ */ d.forwardRef(({ className: e, size: a = "m", clearable: o = !0, onClear: u, value: i, ...x }, f) => {
+  const p = o && i && String(i).length > 0, v = a === "s" ? "s" : "m", y = a === "s" ? "pl-[30px]" : "pl-[34px]", g = p ? "pr-[calc(var(--size-s)+var(--space-m)+var(--space-s))]" : "";
+  return /* @__PURE__ */ l("div", { className: "relative p-[var(--space-s)] border-b border-[var(--color-border-primary-subtle)]", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ r(
+      b,
+      {
+        name: "search",
+        size: v,
+        color: "tertiary",
+        className: "absolute left-[18px] top-1/2 -translate-y-1/2 pointer-events-none"
+      }
+    ),
+    /* @__PURE__ */ r(
+      t.Input,
+      {
+        ref: f,
+        value: i,
+        className: s(
+          h({ size: a, variant: "default" }),
+          y,
+          g,
+          // Force typography to override cmdk defaults
+          a === "s" && "[&]:text-body-sm",
+          a === "m" && "[&]:text-body-md",
+          a === "l" && "[&]:text-body-md",
+          // Force focus styles to override cmdk defaults - includes outer blue ring
+          "[&]:focus-visible:outline-none",
+          "[&]:focus-visible:border-[#005f85]",
+          "[&]:focus-visible:!shadow-[0px_0px_0px_2px_rgba(0,95,133,0.2),0px_3px_4px_0px_rgba(0,14,20,0.03)]",
+          "[&]:focus:outline-none",
+          "[&]:focus:!shadow-[0px_0px_0px_2px_rgba(0,95,133,0.2),0px_3px_4px_0px_rgba(0,14,20,0.03)]",
+          e
+        ),
+        ...x
+      }
+    ),
+    p && /* @__PURE__ */ r(
+      _,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "s",
+        icon: "x",
+        iconPosition: "only",
+        onClick: (n) => {
+          n.preventDefault(), n.stopPropagation(), u?.();
+        },
+        className: "absolute right-[var(--space-m)] top-1/2 -translate-y-1/2 active:!translate-y-[-50%]",
+        "aria-label": "Clear search"
+      }
+    )
+  ] });
+});
+N.displayName = t.Input.displayName;
+const w = /* @__PURE__ */ d.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+  t.List,
+  {
+    ref: o,
+    className: s("max-h-[300px] overflow-y-auto overflow-x-hidden", e),
+    ...a
+  }
+));
+w.displayName = t.List.displayName;
+const k = /* @__PURE__ */ d.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+  t.Empty,
+  {
+    ref: o,
+    className: s("py-6 text-center [&]:text-body-md text-[var(--color-text-secondary)]", e),
+    ...a
+  }
+));
+k.displayName = t.Empty.displayName;
+const C = /* @__PURE__ */ d.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+  t.Group,
+  {
+    ref: o,
+    className: s(
+      "overflow-hidden p-[var(--space-s)] text-[var(--color-text-primary)] [&_[cmdk-group-heading]]:px-[var(--space-m)] [&_[cmdk-group-heading]]:py-[var(--space-s)] [&_[cmdk-group-heading]]:[&]:text-body-medium-sm [&_[cmdk-group-heading]]:text-[var(--color-text-tertiary)]",
+      e
+    ),
+    ...a
+  }
+));
+C.displayName = t.Group.displayName;
+const R = /* @__PURE__ */ d.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+  t.Separator,
+  {
+    ref: o,
+    className: s("-mx-1 h-px bg-[var(--color-border-primary-subtle)]", e),
+    ...a
+  }
+));
+R.displayName = t.Separator.displayName;
+const I = /* @__PURE__ */ d.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+  t.Item,
+  {
+    ref: o,
+    className: s(
+      "[&]:text-body-md relative flex cursor-pointer select-none items-center rounded-m px-[var(--space-m)] min-h-[var(--size-m)] py-[var(--space-s)] outline-none transition-colors aria-selected:bg-[var(--color-background-neutral-subtlest-hovered)] aria-selected:text-[var(--color-text-primary)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      e
+    ),
+    ...a
+  }
+));
+I.displayName = t.Item.displayName;
+export {
+  c as Command,
+  L as CommandDialog,
+  k as CommandEmpty,
+  C as CommandGroup,
+  N as CommandInput,
+  I as CommandItem,
+  w as CommandList,
+  R as CommandSeparator
+};