@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/fundamental/radio-group.js

@@ -0,0 +1,64 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as c from "react";
+import * as r from "@radix-ui/react-radio-group";
+import { Circle as l } from "lucide-react";
+import { cva as i } from "class-variance-authority";
+import { cn as t } from "../../lib/utils.js";
+const b = i("grid gap-[var(--space-s)]"), n = i(
+  "peer w-[var(--size-2xs)] h-[var(--size-2xs)] shrink-0 rounded-full 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)]",
+          "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-text-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)]",
+          "disabled:border-[var(--color-border-disabled)] disabled:bg-[var(--color-surface-primary)]",
+          "disabled:data-[state=checked]:border-[var(--color-border-disabled)] disabled:data-[state=checked]:bg-[var(--color-background-disabled)] disabled:data-[state=checked]:text-[var(--color-text-disabled)]"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), v = i(
+  "flex items-center justify-center text-current [&>svg]:w-[var(--dimension-150)] [&>svg]:h-[var(--dimension-150)]"
+), u = /* @__PURE__ */ c.forwardRef(({ className: o, ...a }, d) => /* @__PURE__ */ e(
+  r.Root,
+  {
+    className: t(b(), o),
+    ...a,
+    ref: d
+  }
+));
+u.displayName = r.Root.displayName;
+const m = /* @__PURE__ */ c.forwardRef(({ className: o, variant: a, ...d }, s) => /* @__PURE__ */ e(
+  r.Item,
+  {
+    ref: s,
+    className: t(n({ variant: a }), o),
+    ...d,
+    children: /* @__PURE__ */ e(
+      r.Indicator,
+      {
+        className: t(v()),
+        children: /* @__PURE__ */ e(l, { className: "fill-current" })
+      }
+    )
+  }
+));
+m.displayName = r.Item.displayName;
+export {
+  u as RadioGroup,
+  m as RadioGroupItem,
+  n as radioGroupItemVariants,
+  b as radioGroupVariants
+};

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

@@ -0,0 +1,43 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as t from "react-resizable-panels";
+import { Icon as o } from "./icon.js";
+import { cn as i } from "../../lib/utils.js";
+const d = ({
+  className: r,
+  ...a
+}) => /* @__PURE__ */ e(
+  t.PanelGroup,
+  {
+    className: i(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      r
+    ),
+    ...a
+  }
+), f = t.Panel, p = ({
+  withHandle: r,
+  className: a,
+  ...l
+}) => /* @__PURE__ */ e(
+  t.PanelResizeHandle,
+  {
+    className: i(
+      "relative flex w-px items-center justify-center bg-[var(--color-border-primary-subtle)] after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      a
+    ),
+    ...l,
+    children: r && /* @__PURE__ */ e("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-s border border-[var(--color-border-primary-subtle)] bg-[var(--color-background-secondary)]", children: /* @__PURE__ */ e(
+      o,
+      {
+        name: "grip-vertical",
+        size: "s",
+        className: "text-[var(--color-icon-secondary)]"
+      }
+    ) })
+  }
+);
+export {
+  p as ResizableHandle,
+  f as ResizablePanel,
+  d as ResizablePanelGroup
+};

package/dist/es/components/fundamental/scroll-area.js

@@ -0,0 +1,38 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import * as s from "react";
+import * as r from "@radix-ui/react-scroll-area";
+import { cn as t } from "../../lib/utils.js";
+const m = /* @__PURE__ */ s.forwardRef(({ className: o, children: l, ...a }, c) => /* @__PURE__ */ d(
+  r.Root,
+  {
+    ref: c,
+    className: t("relative overflow-hidden", o),
+    ...a,
+    children: [
+      /* @__PURE__ */ e(r.Viewport, { className: "h-full w-full rounded-[inherit]", children: l }),
+      /* @__PURE__ */ e(i, {}),
+      /* @__PURE__ */ e(r.Corner, {})
+    ]
+  }
+));
+m.displayName = r.Root.displayName;
+const i = /* @__PURE__ */ s.forwardRef(({ className: o, orientation: l = "vertical", ...a }, c) => /* @__PURE__ */ e(
+  r.ScrollAreaScrollbar,
+  {
+    ref: c,
+    orientation: l,
+    className: t(
+      "flex touch-none select-none transition-colors",
+      l === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      o
+    ),
+    ...a,
+    children: /* @__PURE__ */ e(r.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-[var(--color-border-primary)]" })
+  }
+));
+i.displayName = r.ScrollAreaScrollbar.displayName;
+export {
+  m as ScrollArea,
+  i as ScrollBar
+};

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

@@ -0,0 +1,136 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import * as l from "react";
+import * as e from "@radix-ui/react-select";
+import { cva as d } from "class-variance-authority";
+import { cn as s } from "../../lib/utils.js";
+import { Icon as n } from "./icon.js";
+const u = d(
+  "flex w-full items-center justify-between gap-[var(--space-xs)] rounded-s border bg-[var(--color-surface-primary)] text-[var(--color-text-primary)] transition-all duration-150 ease-in-out placeholder:text-[var(--color-text-tertiary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-100 disabled:bg-[var(--color-background-disabled)] disabled:text-[var(--color-text-disabled)]",
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-[var(--color-interaction-border-input)]",
+          "enabled:hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
+          "enabled:hover:border-[var(--color-interaction-border-input-hovered)]",
+          "enabled:hover:shadow-sm"
+        ],
+        error: [
+          "border-[var(--color-border-error-bold)]",
+          "enabled:hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
+          "enabled:hover:border-[var(--color-border-error-bold)]",
+          "enabled:hover:shadow-sm",
+          "focus-visible:border-[var(--color-border-error-bold)]"
+        ]
+      },
+      size: {
+        s: "h-[var(--size-s)] px-[var(--space-m)] py-[var(--space-xs)] text-body-sm",
+        m: "h-[var(--size-m)] px-[var(--space-m)] py-[var(--space-s)] text-body-md",
+        l: "h-[var(--size-l)] px-[var(--space-l)] py-[var(--space-m)] text-body-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "m"
+    }
+  }
+), v = d(
+  "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-m border border-[var(--color-border-primary-medium)] bg-[var(--color-surface-primary)] text-[var(--color-text-primary)] shadow-[0px_0px_12px_-2px_rgba(0,14,20,0.08),0px_16px_24px_-8px_rgba(0,14,20,0.08),0px_4px_8px_-4px_rgba(0,14,20,0.04),0px_1px_1px_0px_rgba(0,14,20,0.02)] 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+), f = d(
+  "relative flex w-full cursor-default select-none items-center h-8 rounded-s outline-none focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 px-2 py-1 text-body-md",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+), x = d(
+  "px-2 py-1 [&]:text-body-medium-sm text-[var(--color-text-tertiary)]"
+), h = d(
+  "h-px bg-[var(--color-border-primary-subtle)] my-[var(--space-xs)]"
+), R = e.Root, j = e.Group, k = e.Value, y = /* @__PURE__ */ l.forwardRef(({ className: t, variant: o, size: a, children: i, ...c }, p) => {
+  const b = a || "m";
+  return /* @__PURE__ */ m(
+    e.Trigger,
+    {
+      ref: p,
+      className: s(u({ variant: o, size: a }), t),
+      ...c,
+      children: [
+        i,
+        /* @__PURE__ */ r(e.Icon, { asChild: !0, children: /* @__PURE__ */ r(n, { name: "chevron-down", size: b }) })
+      ]
+    }
+  );
+});
+y.displayName = e.Trigger.displayName;
+const g = /* @__PURE__ */ l.forwardRef(({ className: t, children: o, position: a = "popper", modal: i = !1, ...c }, p) => /* @__PURE__ */ r(e.Portal, { children: /* @__PURE__ */ m(
+  e.Content,
+  {
+    ref: p,
+    className: s(
+      v(),
+      a === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      t
+    ),
+    position: a,
+    ...c,
+    children: [
+      /* @__PURE__ */ r(e.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ r(n, { name: "chevron-up", size: "s" }) }),
+      /* @__PURE__ */ r(
+        e.Viewport,
+        {
+          className: s(
+            "p-2",
+            a === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: o })
+        }
+      ),
+      /* @__PURE__ */ r(e.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ r(n, { name: "chevron-down", size: "s" }) })
+    ]
+  }
+) }));
+g.displayName = e.Content.displayName;
+const w = /* @__PURE__ */ l.forwardRef(({ className: t, children: o, ...a }, i) => /* @__PURE__ */ m(
+  e.Item,
+  {
+    ref: i,
+    className: s(f(), t),
+    ...a,
+    children: [
+      /* @__PURE__ */ r(e.ItemText, { children: o }),
+      /* @__PURE__ */ r("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ r(e.ItemIndicator, { children: /* @__PURE__ */ r(n, { name: "check", size: "s", color: "brand" }) }) })
+    ]
+  }
+));
+w.displayName = e.Item.displayName;
+const N = /* @__PURE__ */ l.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ r(
+  e.Label,
+  {
+    ref: a,
+    className: s(x(), t),
+    ...o
+  }
+));
+N.displayName = e.Label.displayName;
+const S = /* @__PURE__ */ l.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ r(
+  e.Separator,
+  {
+    ref: a,
+    className: s(h(), t),
+    ...o
+  }
+));
+S.displayName = e.Separator.displayName;
+export {
+  R as Select,
+  g as SelectContent,
+  j as SelectGroup,
+  w as SelectItem,
+  N as SelectLabel,
+  S as SelectSeparator,
+  y as SelectTrigger,
+  k as SelectValue,
+  v as selectContentVariants,
+  f as selectItemVariants,
+  u as selectTriggerVariants
+};

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

@@ -0,0 +1,47 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as p from "react";
+import * as m from "@radix-ui/react-separator";
+import { cn as l } from "../../lib/utils.js";
+import { Icon as c } from "./icon.js";
+const f = /* @__PURE__ */ p.forwardRef(
+  ({
+    className: t,
+    layout: i = "vertical",
+    decorative: a = !0,
+    type: s = "line",
+    ...e
+  }, n) => {
+    const r = i === "horizontal" ? "vertical" : "horizontal";
+    return s === "dot" && i === "horizontal" ? /* @__PURE__ */ o(
+      "div",
+      {
+        ref: n,
+        role: a ? "presentation" : "separator",
+        "aria-orientation": r,
+        className: l(
+          "flex h-[1em] shrink-0 items-center justify-center",
+          t
+        ),
+        ...e,
+        children: /* @__PURE__ */ o(c, { name: "dot", size: "l", color: "tertiary" })
+      }
+    ) : /* @__PURE__ */ o(
+      m.Root,
+      {
+        ref: n,
+        decorative: a,
+        orientation: r,
+        className: l(
+          "shrink-0 bg-[var(--grey-alpha-100)]",
+          r === "horizontal" ? "h-px w-full" : "h-7 w-px",
+          t
+        ),
+        ...e
+      }
+    );
+  }
+);
+f.displayName = m.Root.displayName;
+export {
+  f as Separator
+};

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

@@ -0,0 +1,134 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import * as i from "react";
+import * as a from "@radix-ui/react-dialog";
+import { cva as g } from "class-variance-authority";
+import { cn as l } from "../../lib/utils.js";
+import { Button as S } from "./button.js";
+const c = i.createContext({ overlay: !1 }), w = ({ modal: t, overlay: e = !1, ...r }) => /* @__PURE__ */ o(c.Provider, { value: { overlay: e }, children: /* @__PURE__ */ o(a.Root, { modal: t ?? e, ...r }) });
+w.displayName = "Sheet";
+const V = a.Trigger, B = a.Close, C = a.Portal, m = /* @__PURE__ */ i.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  a.Overlay,
+  {
+    className: l(
+      "fixed inset-0 z-50 bg-[var(--color-background-blanket)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      t
+    ),
+    ...e,
+    ref: r
+  }
+));
+m.displayName = a.Overlay.displayName;
+const D = g(
+  "fixed z-50 gap-[var(--space-l)] bg-[var(--color-surface-primary)] p-[var(--space-3xl)] shadow-xl transition ease-in-out overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-[var(--space-s)] top-[var(--space-s)] rounded-m border-b border-[var(--color-border-primary-subtle)] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-[var(--space-s)] bottom-[var(--space-s)] rounded-m border-t border-[var(--color-border-primary-subtle)] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-[var(--space-s)] left-[var(--space-s)] rounded-m w-3/4 border-r border-[var(--color-border-primary-subtle)] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-[var(--space-s)] right-[var(--space-s)] rounded-m w-3/4 border-l border-[var(--color-border-primary-subtle)] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+), O = /* @__PURE__ */ i.forwardRef(({ side: t = "right", className: e, children: r, showClose: p = !0, dismissible: d = !0, overlay: f, onPointerDownOutside: v, onInteractOutside: u, onFocusOutside: h, ...y }, x) => {
+  const b = i.useContext(c), N = f ?? b.overlay;
+  return /* @__PURE__ */ n(C, { children: [
+    N && /* @__PURE__ */ o(m, {}),
+    /* @__PURE__ */ n(
+      a.Content,
+      {
+        ref: x,
+        className: l(D({ side: t }), e),
+        ...y,
+        onPointerDownOutside: (s) => {
+          d || s.preventDefault(), v?.(s);
+        },
+        onInteractOutside: (s) => {
+          d || s.preventDefault(), u?.(s);
+        },
+        onFocusOutside: (s) => {
+          d || s.preventDefault(), h?.(s);
+        },
+        children: [
+          r,
+          p && /* @__PURE__ */ o(a.Close, { asChild: !0, children: /* @__PURE__ */ o(
+            S,
+            {
+              variant: "default",
+              size: "m",
+              icon: "x",
+              iconPosition: "only",
+              className: "absolute right-[var(--space-l)] top-[var(--space-l)]",
+              children: /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+});
+O.displayName = a.Content.displayName;
+const P = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: l(
+      "flex flex-col space-y-[var(--space-s)] text-center sm:text-left",
+      t
+    ),
+    ...e
+  }
+);
+P.displayName = "SheetHeader";
+const R = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: l(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-[var(--space-s)]",
+      t
+    ),
+    ...e
+  }
+);
+R.displayName = "SheetFooter";
+const T = /* @__PURE__ */ i.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  a.Title,
+  {
+    ref: r,
+    className: l(
+      "text-heading-lg text-[var(--color-text-primary)]",
+      t
+    ),
+    ...e
+  }
+));
+T.displayName = a.Title.displayName;
+const j = /* @__PURE__ */ i.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  a.Description,
+  {
+    ref: r,
+    className: l("text-body-md text-[var(--color-text-secondary)]", t),
+    ...e
+  }
+));
+j.displayName = a.Description.displayName;
+export {
+  w as Sheet,
+  B as SheetClose,
+  O as SheetContent,
+  j as SheetDescription,
+  R as SheetFooter,
+  P as SheetHeader,
+  m as SheetOverlay,
+  C as SheetPortal,
+  T as SheetTitle,
+  V as SheetTrigger
+};