@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

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

@@ -0,0 +1,135 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as e from "react";
+import { cva as u } from "class-variance-authority";
+import { cn as s } from "../../lib/utils.js";
+import { Button as l } from "./button.js";
+import { Input as d } from "./input.js";
+import { Textarea as c } from "./textarea.js";
+const v = /* @__PURE__ */ e.forwardRef(
+  ({ className: r, ...a }, t) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: t,
+      "data-slot": "input-group",
+      role: "group",
+      className: s(
+        "group/input-group relative flex w-full items-center rounded-m border border-[var(--color-interaction-border-input)] bg-[var(--color-interaction-background-input-neutral)] outline-none transition-[color,box-shadow,border-color]",
+        // Default height for inputs
+        "h-[var(--size-m)] has-[>textarea]:h-auto",
+        // Adjust padding when inline addons are present
+        "has-[>[data-align=inline-start]]:[&>input]:pl-[var(--space-xs)]",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-[var(--space-xs)]",
+        // Block alignment for textareas
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>textarea]:pb-[var(--space-m)]",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>textarea]:pt-[var(--space-m)]",
+        // Hover state
+        "hover:border-[var(--color-interaction-border-input-hovered)]",
+        // Focus state
+        "has-[[data-slot=input-group-control]:focus-visible]:border-[#005f85] has-[[data-slot=input-group-control]:focus-visible]:shadow-[0px_0px_0px_2px_rgba(0,95,133,0.2),0px_3px_4px_0px_rgba(0,14,20,0.03)]",
+        // Invalid state
+        "has-[[data-slot][aria-invalid=true]]:border-[var(--color-border-error-bold)]",
+        // Disabled state
+        "group-data-[disabled=true]/input-group:opacity-50 group-data-[disabled=true]/input-group:cursor-not-allowed",
+        r
+      ),
+      ...a
+    }
+  )
+);
+v.displayName = "InputGroup";
+const b = u(
+  "text-[var(--color-text-secondary)] flex h-auto cursor-text select-none items-center justify-center gap-[var(--space-xs)] py-[var(--space-s)] [&]:text-body-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-xs [&>svg:not([class*='size-'])]:size-[var(--size-s)]",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-[var(--space-s)] has-[>button]:pl-[var(--space-xs)] has-[>.inline-flex]:pl-[var(--space-xs)] has-[>kbd]:ml-[-var(--space-xs)]",
+        "inline-end": "order-last pr-[var(--space-s)] has-[>button]:pr-[var(--space-xs)] has-[>.inline-flex]:pr-[var(--space-xs)] has-[>kbd]:mr-[-var(--space-xs)]",
+        "block-start": "order-first w-full justify-start px-[var(--space-m)] pt-[var(--space-m)] group-has-[>input]/input-group:pt-[var(--space-s)]",
+        "block-end": "order-last w-full justify-start px-[var(--space-m)] pb-[var(--space-m)] group-has-[>input]/input-group:pb-[var(--space-s)]"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+), x = /* @__PURE__ */ e.forwardRef(
+  ({ className: r, align: a = "inline-start", ...t }, n) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: n,
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": a,
+      className: s(b({ align: a }), r),
+      onClick: (p) => {
+        p.target.closest("button") || p.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...t
+    }
+  )
+);
+x.displayName = "InputGroupAddon";
+const f = /* @__PURE__ */ e.forwardRef(({ className: r, type: a = "button", variant: t = "ghost", size: n = "s", ...p }, i) => /* @__PURE__ */ o(
+  l,
+  {
+    ref: i,
+    type: a,
+    variant: t,
+    size: n,
+    className: s("shadow-none", r),
+    ...p
+  }
+));
+f.displayName = "InputGroupButton";
+const g = /* @__PURE__ */ e.forwardRef(
+  ({ className: r, ...a }, t) => /* @__PURE__ */ o(
+    "span",
+    {
+      ref: t,
+      className: s(
+        "text-[var(--color-text-secondary)] flex items-center gap-[var(--space-xs)] [&]:text-body-sm [&_svg:not([class*='size-'])]:size-[var(--size-s)] [&_svg]:pointer-events-none",
+        r
+      ),
+      ...a
+    }
+  )
+);
+g.displayName = "InputGroupText";
+const m = /* @__PURE__ */ e.forwardRef(
+  ({ className: r, size: a, ...t }, n) => /* @__PURE__ */ o(
+    d,
+    {
+      ref: n,
+      "data-slot": "input-group-control",
+      size: a,
+      className: s(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 focus-visible:shadow-none",
+        r
+      ),
+      ...t
+    }
+  )
+);
+m.displayName = "InputGroupInput";
+const h = /* @__PURE__ */ e.forwardRef(({ className: r, ...a }, t) => /* @__PURE__ */ o(
+  c,
+  {
+    ref: t,
+    "data-slot": "input-group-control",
+    className: s(
+      "flex-1 resize-none rounded-none border-0 bg-transparent py-[var(--space-m)] shadow-none focus-visible:ring-0 focus-visible:shadow-none",
+      r
+    ),
+    ...a
+  }
+));
+h.displayName = "InputGroupTextarea";
+export {
+  v as InputGroup,
+  x as InputGroupAddon,
+  f as InputGroupButton,
+  m as InputGroupInput,
+  g as InputGroupText,
+  h as InputGroupTextarea,
+  b as inputGroupAddonVariants
+};

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

@@ -0,0 +1,78 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import * as v from "react";
+import { cva as m } from "class-variance-authority";
+import { cn as c } from "../../lib/utils.js";
+import { Icon as b } from "./icon.js";
+const n = m(
+  "flex w-full rounded-m border transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--color-text-tertiary)] focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_rgba(0,95,133,0.2),0px_3px_4px_0px_rgba(0,14,20,0.03)] disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-[var(--color-interaction-background-input-neutral)] text-[var(--color-text-primary)]",
+          "border-[var(--color-interaction-border-input)]",
+          "hover:border-[var(--color-interaction-border-input-hovered)]",
+          "focus-visible:border-[#005f85]"
+        ],
+        error: [
+          "bg-[var(--color-interaction-background-input-neutral)] text-[var(--color-text-primary)]",
+          "border-[var(--color-border-error-bold)]",
+          "focus-visible:border-[var(--color-border-error-bold)]"
+        ]
+      },
+      size: {
+        s: "h-[var(--size-s)] px-[var(--space-s)] 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-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "m"
+    }
+  }
+), u = /* @__PURE__ */ v.forwardRef(
+  ({ className: o, variant: t, size: r, type: e = "text", ...s }, i) => {
+    if (e === "search") {
+      const l = r === "s" ? "s" : "m", p = r === "s" ? "pl-[calc(var(--space-m)+var(--size-3xs)+var(--space-s))]" : "pl-[calc(var(--space-m)+var(--size-2xs)+var(--space-s))]";
+      return /* @__PURE__ */ d("div", { className: "relative", children: [
+        /* @__PURE__ */ a(
+          b,
+          {
+            name: "search",
+            size: l,
+            color: "tertiary",
+            className: "absolute left-[var(--space-m)] top-1/2 -translate-y-1/2 pointer-events-none"
+          }
+        ),
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: e,
+            className: c(
+              n({ variant: t, size: r }),
+              p,
+              o
+            ),
+            ref: i,
+            ...s
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ a(
+      "input",
+      {
+        type: e,
+        className: c(n({ variant: t, size: r }), o),
+        ref: i,
+        ...s
+      }
+    );
+  }
+);
+u.displayName = "Input";
+export {
+  u as Input,
+  n as inputVariants
+};

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

@@ -0,0 +1,57 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as t from "react";
+import { cva as m } from "class-variance-authority";
+import { cn as o } from "../../lib/utils.js";
+const d = m(
+  "inline-flex items-center justify-center rounded-xs font-mono font-medium transition-colors select-none relative",
+  {
+    variants: {
+      variant: {
+        light: [
+          "bg-grey-25/50",
+          "text-[var(--color-text-secondary)]",
+          "border border-[var(--color-border-primary-subtle)]"
+        ],
+        dark: [
+          "bg-grey-800/50",
+          "text-[var(--grey-200)]",
+          "border border-[var(--grey-alpha-400)]"
+        ]
+      },
+      size: {
+        s: "px-[var(--space-2xs)] py-[var(--space-null)] min-w-[var(--size-2xs)] [&]:text-body-xsm",
+        m: "px-[var(--space-s)] py-[var(--space-2xs)] min-w-[var(--size-m)] [&]:text-body-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "light",
+      size: "s"
+    }
+  }
+), p = /* @__PURE__ */ t.forwardRef(
+  ({ className: r, variant: e, size: a, ...i }, n) => /* @__PURE__ */ s(
+    "kbd",
+    {
+      className: o(d({ variant: e, size: a, className: r })),
+      ref: n,
+      ...i
+    }
+  )
+);
+p.displayName = "Kbd";
+const c = /* @__PURE__ */ t.forwardRef(
+  ({ className: r, ...e }, a) => /* @__PURE__ */ s(
+    "span",
+    {
+      className: o("inline-flex items-center gap-[var(--space-xs)]", r),
+      ref: a,
+      ...e
+    }
+  )
+);
+c.displayName = "KbdGroup";
+export {
+  p as Kbd,
+  c as KbdGroup,
+  d as kbdVariants
+};

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

@@ -0,0 +1,54 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import * as d from "react";
+import { cva as m } from "class-variance-authority";
+import { cn as p } from "../../lib/utils.js";
+import { Icon as x } from "./icon.js";
+import { TooltipProvider as b, Tooltip as h, TooltipTrigger as f, TooltipContent as y } from "./tooltip.js";
+const u = m(
+  "cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        s: "[&]:text-body-sm",
+        m: "[&]:text-body-md"
+      },
+      color: {
+        primary: "text-[var(--color-text-primary)]",
+        secondary: "text-[var(--color-text-tertiary)]"
+      }
+    },
+    defaultVariants: {
+      size: "m",
+      color: "primary"
+    }
+  }
+), v = /* @__PURE__ */ d.forwardRef(
+  ({ className: o, children: l, required: t, info: e, size: i, color: s, ...n }, c) => /* @__PURE__ */ r(
+    "label",
+    {
+      ref: c,
+      className: p(u({ size: i, color: s }), o),
+      ...n,
+      children: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-[var(--space-xs)]", children: [
+        l,
+        t && /* @__PURE__ */ r("span", { className: "text-[var(--color-text-error-bold)]", "aria-label": "required", children: "*" }),
+        e && /* @__PURE__ */ r(b, { children: /* @__PURE__ */ a(h, { children: [
+          /* @__PURE__ */ r(f, { asChild: !0, children: /* @__PURE__ */ r("span", { className: "inline-flex cursor-help", children: /* @__PURE__ */ r(
+            x,
+            {
+              name: "info",
+              size: "s",
+              color: "secondary",
+              "aria-label": e
+            }
+          ) }) }),
+          /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r("p", { children: e }) })
+        ] }) })
+      ] })
+    }
+  )
+);
+v.displayName = "Label";
+export {
+  v as Label
+};

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

@@ -0,0 +1,161 @@
+import { jsx as d, jsxs as T } from "react/jsx-runtime";
+import p from "react";
+import { cva as L } from "class-variance-authority";
+import { cn as u } from "../../lib/utils.js";
+import { Button as k } from "./button.js";
+import { Icon as w } from "./icon.js";
+L("", {
+  variants: {
+    size: {
+      default: "",
+      small: ""
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const O = {
+  default: {
+    container: "gap-[var(--space-m)]",
+    navButton: "h-[var(--size-m)] w-[var(--size-m)]",
+    navIcon: "h-[var(--size-xs)] w-[var(--size-xs)]",
+    yearGridGap: "gap-[var(--space-m)]",
+    yearSectionGap: "gap-[var(--space-s)]",
+    yearHeader: "text-label-sm",
+    monthGridGap: "gap-[var(--space-xs)]",
+    monthButton: "px-[var(--space-xs)] py-[var(--space-s)] text-body-sm",
+    monthBorderRadius: "rounded-m"
+  },
+  small: {
+    container: "gap-[var(--space-s)]",
+    navButton: "h-[var(--size-s)] w-[var(--size-s)]",
+    navIcon: "h-4 w-4",
+    yearGridGap: "gap-[var(--space-s)]",
+    yearSectionGap: "gap-[var(--space-xs)]",
+    yearHeader: "[&]:text-caption-medium-sm [&]:font-medium py-[var(--space-s)]",
+    monthGridGap: "gap-1",
+    monthButton: "px-1 py-[var(--space-xs)] [&]:text-caption-sm",
+    monthBorderRadius: "rounded-s"
+  }
+}, n = (r) => new Date(r.getFullYear(), r.getMonth(), 1), Q = (r) => r.toLocaleDateString("en-US", { month: "short" }), W = (r) => Array.from({ length: 12 }, (a, o) => new Date(r, o, 1)), X = (r, a, o, l) => {
+  const f = n(r);
+  if (a) {
+    const i = n(a);
+    if (f < i) return !0;
+  }
+  if (o) {
+    const i = n(o);
+    if (f > i) return !0;
+  }
+  if (l && l.length > 0) {
+    const i = f.getTime();
+    for (const g of l)
+      if (n(g).getTime() === i)
+        return !0;
+  }
+  return !1;
+}, B = (r, a, o) => {
+  if (!a) return !1;
+  const l = n(r).getTime(), f = n(a).getTime();
+  if (!o)
+    return l > f;
+  const i = n(o).getTime();
+  return l > f && l < i;
+}, v = (r, a) => !r || !a ? !1 : n(r).getTime() === n(a).getTime(), Z = /* @__PURE__ */ p.forwardRef(
+  ({
+    value: r,
+    onChange: a,
+    mode: o,
+    size: l = "default",
+    yearCount: f,
+    startYear: i,
+    minDate: g,
+    maxDate: Y,
+    disabledDates: I,
+    className: R,
+    monthLabelFormat: S,
+    yearLabelFormat: b,
+    enableNavigation: h = !1,
+    onYearNavigate: G
+  }, C) => {
+    const [c, M] = p.useState(null), [z, x] = p.useState(null), [y, N] = p.useState(
+      i || (/* @__PURE__ */ new Date()).getFullYear()
+    ), s = O[l], A = f ?? (o === "single" ? 1 : 2), H = h ? y : i || (/* @__PURE__ */ new Date()).getFullYear(), D = Array.from({ length: A }, (e, t) => H + t), _ = () => {
+      const e = y - 1;
+      N(e), G?.(e);
+    }, E = () => {
+      const e = y + 1;
+      N(e), G?.(e);
+    }, P = (e) => {
+      if (o === "single") {
+        a(n(e));
+        return;
+      }
+      if (!c)
+        M(n(e));
+      else {
+        const t = c < e ? c : e, m = c < e ? e : c;
+        a([n(t), n(m)]), M(null), x(null);
+      }
+    }, j = (e) => c || !r ? !1 : Array.isArray(r) ? v(e, r[0]) || v(e, r[1]) : v(e, r), q = (e) => {
+      if (c || !r || !Array.isArray(r)) return !1;
+      const [t, m] = r;
+      return B(e, t, m);
+    }, F = (e) => !c || !z ? !1 : B(e, c, z);
+    return /* @__PURE__ */ d("div", { ref: C, className: u("flex flex-col", s.container, R), children: /* @__PURE__ */ T("div", { className: u("flex items-center", s.yearGridGap), children: [
+      h && /* @__PURE__ */ d(
+        k,
+        {
+          variant: "default",
+          size: "s",
+          onClick: _,
+          className: u(s.navButton, "p-0 shrink-0"),
+          children: /* @__PURE__ */ d(w, { name: "chevron-left", className: s.navIcon })
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: u("flex flex-1", s.yearGridGap), children: D.map((e) => /* @__PURE__ */ T("div", { className: u("flex-1 flex flex-col", s.yearSectionGap), children: [
+        /* @__PURE__ */ d("div", { className: u(s.yearHeader, "text-[var(--color-text-primary)] text-center"), children: b ? b(e) : e }),
+        /* @__PURE__ */ d("div", { className: u("grid grid-cols-3", s.monthGridGap), children: W(e).map((t) => {
+          const m = X(t, g, Y, I), U = j(t), V = q(t), J = F(t), K = v(t, c);
+          return /* @__PURE__ */ d(
+            "button",
+            {
+              onClick: () => !m && P(t),
+              onMouseEnter: () => !m && x(t),
+              onMouseLeave: () => x(null),
+              disabled: m,
+              className: u(
+                "transition-colors",
+                s.monthBorderRadius,
+                s.monthButton,
+                "bg-[var(--color-background-neutral-subtle)] text-[var(--color-text-primary)]",
+                "hover:bg-[var(--color-background-neutral-hovered)]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                (V || J) && "bg-[var(--color-background-blue-subtle)] text-[var(--color-text-primary)]",
+                (U || K) && "!bg-[var(--color-background-blue-bold)] !text-[var(--color-text-on-action)]"
+              ),
+              children: S ? S(t) : Q(t)
+            },
+            t.getTime()
+          );
+        }) })
+      ] }, e)) }),
+      h && /* @__PURE__ */ d(
+        k,
+        {
+          variant: "default",
+          size: "s",
+          onClick: E,
+          className: u(s.navButton, "p-0 shrink-0"),
+          children: /* @__PURE__ */ d(w, { name: "chevron-right", className: s.navIcon })
+        }
+      )
+    ] }) });
+  }
+);
+Z.displayName = "MonthPicker";
+export {
+  Z as MonthPicker
+};

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

@@ -0,0 +1,109 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import * as L from "react";
+import { cn as h } from "../../lib/utils.js";
+import { Button as l } from "./button.js";
+import { ButtonGroup as I } from "./button-group.js";
+import { Icon as r } from "./icon.js";
+import { DropdownMenu as $, DropdownMenuTrigger as j, DropdownMenuContent as B, DropdownMenuLabel as E, DropdownMenuItem as F } from "./dropdown-menu.js";
+const y = /* @__PURE__ */ L.forwardRef(
+  ({
+    className: w,
+    variant: p = "default",
+    currentPage: s,
+    totalItems: i,
+    pageSize: o,
+    onPageChange: t,
+    onPageSizeChange: u,
+    pageSizeOptions: f = [10, 25, 50, 100],
+    onNextPageHover: M,
+    onPreviousPageHover: v,
+    ...N
+  }, x) => {
+    const c = Math.ceil(i / o), b = (s - 1) * o + 1, g = Math.min(s * o, i), D = () => t(1), R = () => t(Math.max(1, s - 1)), k = () => t(Math.min(c, s + 1)), T = () => t(c), m = s === 1, d = s === c || i === 0, C = (e) => {
+      const G = (s - 1) * o + 1, q = Math.ceil(G / e);
+      u(e), t(Math.max(1, q));
+    };
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: x,
+        className: h("flex items-center gap-[var(--space-s)]", w),
+        ...N,
+        children: [
+          /* @__PURE__ */ n(I, { size: "s", children: [
+            p === "full" && /* @__PURE__ */ a(
+              l,
+              {
+                onClick: D,
+                disabled: m,
+                "aria-label": "Go to first page",
+                className: "px-[var(--space-s)] aspect-square",
+                children: /* @__PURE__ */ a(r, { name: "arrow-left-to-line", className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ a(
+              l,
+              {
+                onClick: R,
+                disabled: m,
+                "aria-label": "Go to previous page",
+                className: "px-[var(--space-s)] aspect-square",
+                onMouseEnter: m ? void 0 : v,
+                children: /* @__PURE__ */ a(r, { name: "arrow-left", className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ a(
+              l,
+              {
+                onClick: k,
+                disabled: d,
+                "aria-label": "Go to next page",
+                className: "px-[var(--space-s)] aspect-square",
+                onMouseEnter: d ? void 0 : M,
+                children: /* @__PURE__ */ a(r, { name: "arrow-right", className: "w-4 h-4" })
+              }
+            ),
+            p === "full" && /* @__PURE__ */ a(
+              l,
+              {
+                onClick: T,
+                disabled: d,
+                "aria-label": "Go to last page",
+                className: "px-[var(--space-s)] aspect-square",
+                children: /* @__PURE__ */ a(r, { name: "arrow-right-to-line", className: "w-4 h-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n($, { children: [
+            /* @__PURE__ */ a(j, { asChild: !0, children: /* @__PURE__ */ n(l, { variant: "ghost", size: "s", className: "gap-1 min-w-0", children: [
+              /* @__PURE__ */ a("span", { className: "whitespace-nowrap", children: i === 0 ? "0 of 0" : `${b}-${g} of ${i}` }),
+              /* @__PURE__ */ a(r, { name: "chevron-down", className: "w-4 h-4" })
+            ] }) }),
+            /* @__PURE__ */ n(B, { align: "end", className: "min-w-[80px]", children: [
+              /* @__PURE__ */ a(E, { children: "Items per page" }),
+              f.map((e) => /* @__PURE__ */ n(
+                F,
+                {
+                  onClick: () => C(e),
+                  className: h(
+                    "cursor-pointer",
+                    e === o && "font-medium"
+                  ),
+                  children: [
+                    e,
+                    e === o && /* @__PURE__ */ a(r, { name: "check", className: "w-4 h-4 ml-auto text-[var(--color-icon-brand-bold)]" })
+                  ]
+                },
+                e
+              ))
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+y.displayName = "Pagination";
+export {
+  y as Pagination
+};

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

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+import * as o from "@radix-ui/react-popover";
+import { cn as s } from "../../lib/utils.js";
+const c = o.Root, f = o.Trigger, v = o.Anchor, m = /* @__PURE__ */ n.forwardRef(({ className: e, align: r = "center", sideOffset: a = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+  o.Content,
+  {
+    ref: d,
+    align: r,
+    sideOffset: a,
+    className: s(
+      "z-50 w-[var(--radix-popover-trigger-width)] min-w-[16rem] overflow-hidden rounded-l border border-[var(--color-border-divider)] bg-[var(--color-surface-primary)] p-[var(--space-2xl)] text-[var(--color-text-primary)] shadow-xl outline-none 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",
+      e
+    ),
+    ...i
+  }
+) }));
+m.displayName = o.Content.displayName;
+export {
+  c as Popover,
+  v as PopoverAnchor,
+  m as PopoverContent,
+  f as PopoverTrigger
+};

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

@@ -0,0 +1,66 @@
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import * as g from "react";
+import * as o from "@radix-ui/react-progress";
+import { cn as s } from "../../lib/utils.js";
+import { cva as l } from "class-variance-authority";
+const v = l(
+  "relative h-2 w-full rounded-full border border-[var(--color-border-primary-medium)] bg-white p-px",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--color-background-neutral-subtlest)]",
+        success: "bg-[var(--color-background-success-subtle)]",
+        warning: "bg-[var(--color-background-warning-subtle)]",
+        error: "bg-[var(--color-background-error-subtle)]"
+      },
+      size: {
+        s: "h-1",
+        m: "h-2",
+        l: "h-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "m"
+    }
+  }
+), p = l(
+  "h-full w-full flex-1 transition-all duration-300 ease-in-out rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--color-background-blue-bold)]",
+        success: "bg-[var(--green-500)]",
+        warning: "bg-[var(--orange-500)]",
+        error: "bg-[var(--red-500)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), h = /* @__PURE__ */ g.forwardRef(({ className: n, value: r, variant: e, size: i, showLabel: d, formatLabel: t, ...c }, u) => {
+  const b = (m) => `${Math.round(m)}%`;
+  return /* @__PURE__ */ f("div", { className: "w-full", children: [
+    /* @__PURE__ */ a("div", { className: s(v({ variant: e, size: i, className: n })), children: /* @__PURE__ */ a(
+      o.Root,
+      {
+        ref: u,
+        className: "relative h-full w-full overflow-hidden rounded-full bg-[var(--color-background-neutral-subtlest)]",
+        ...c,
+        children: /* @__PURE__ */ a(
+          o.Indicator,
+          {
+            className: s(p({ variant: e })),
+            style: { transform: `translateX(-${100 - (r || 0)}%)` }
+          }
+        )
+      }
+    ) }),
+    d && r !== void 0 && r !== null && /* @__PURE__ */ a("div", { className: "mt-1 text-caption-sm text-[var(--color-text-secondary)]", children: t ? t(r) : b(r) })
+  ] });
+});
+h.displayName = o.Root.displayName;
+export {
+  h as Progress
+};