@rafal.lemieszewski/tide-ui 0.85.1 → 0.87.0

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

@@ -1,15 +1,16 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import * as L from "react";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import * as q 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 { Button as c } from "./button.js";
+import { ButtonGroup as A } 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(
+import { ArrowLeftToLine as I, ArrowLeft as $, ArrowRight as j, ArrowRightToLine as B, ChevronDown as E, Check as F } from "lucide-react";
+import { DropdownMenu as y, DropdownMenuTrigger as P, DropdownMenuContent as H, DropdownMenuLabel as J, DropdownMenuItem as K } from "./dropdown-menu.js";
+const O = /* @__PURE__ */ q.forwardRef(
   ({
     className: w,
-    variant: p = "default",
-    currentPage: s,
+    variant: d = "default",
+    currentPage: a,
     totalItems: i,
     pageSize: o,
     onPageChange: t,
@@ -19,9 +20,9 @@ const y = /* @__PURE__ */ L.forwardRef(
     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));
+    const l = Math.ceil(i / o), b = (a - 1) * o + 1, g = Math.min(a * o, i), D = () => t(1), R = () => t(Math.max(1, a - 1)), L = () => t(Math.min(l, a + 1)), T = () => t(l), m = a === 1, p = a === l || i === 0, C = (s) => {
+      const k = (a - 1) * o + 1, G = Math.ceil(k / s);
+      u(s), t(Math.max(1, G));
     };
     return /* @__PURE__ */ n(
       "div",
@@ -30,71 +31,71 @@ const y = /* @__PURE__ */ L.forwardRef(
         className: h("flex items-center gap-[var(--space-s)]", w),
         ...N,
         children: [
-          /* @__PURE__ */ n(I, { size: "s", children: [
-            p === "full" && /* @__PURE__ */ a(
-              l,
+          /* @__PURE__ */ n(A, { size: "s", children: [
+            d === "full" && /* @__PURE__ */ e(
+              c,
               {
                 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" })
+                children: /* @__PURE__ */ e(r, { name: I, className: "w-4 h-4" })
               }
             ),
-            /* @__PURE__ */ a(
-              l,
+            /* @__PURE__ */ e(
+              c,
               {
                 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" })
+                children: /* @__PURE__ */ e(r, { name: $, className: "w-4 h-4" })
               }
             ),
-            /* @__PURE__ */ a(
-              l,
+            /* @__PURE__ */ e(
+              c,
               {
-                onClick: k,
-                disabled: d,
+                onClick: L,
+                disabled: p,
                 "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" })
+                onMouseEnter: p ? void 0 : M,
+                children: /* @__PURE__ */ e(r, { name: j, className: "w-4 h-4" })
               }
             ),
-            p === "full" && /* @__PURE__ */ a(
-              l,
+            d === "full" && /* @__PURE__ */ e(
+              c,
               {
                 onClick: T,
-                disabled: d,
+                disabled: p,
                 "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" })
+                children: /* @__PURE__ */ e(r, { name: B, 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(y, { children: [
+            /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ n(c, { variant: "ghost", size: "s", className: "gap-1 min-w-0", children: [
+              /* @__PURE__ */ e("span", { className: "whitespace-nowrap", children: i === 0 ? "0 of 0" : `${b}-${g} of ${i}` }),
+              /* @__PURE__ */ e(r, { name: E, 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,
+            /* @__PURE__ */ n(H, { align: "end", className: "min-w-[80px]", children: [
+              /* @__PURE__ */ e(J, { children: "Items per page" }),
+              f.map((s) => /* @__PURE__ */ n(
+                K,
                 {
-                  onClick: () => C(e),
+                  onClick: () => C(s),
                   className: h(
                     "cursor-pointer",
-                    e === o && "font-medium"
+                    s === 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)]" })
+                    s,
+                    s === o && /* @__PURE__ */ e(r, { name: F, className: "w-4 h-4 ml-auto text-[var(--color-icon-brand-bold)]" })
                   ]
                 },
-                e
+                s
               ))
             ] })
           ] })
@@ -103,7 +104,7 @@ const y = /* @__PURE__ */ L.forwardRef(
     );
   }
 );
-y.displayName = "Pagination";
+O.displayName = "Pagination";
 export {
-  y as Pagination
+  O as Pagination
 };

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

@@ -1,10 +1,11 @@
 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 { cva as i } from "class-variance-authority";
 import { cn as s } from "../../lib/utils.js";
 import { Icon as n } from "./icon.js";
-const u = d(
+import { ChevronUp as f, ChevronDown as b, Check as v } from "lucide-react";
+const x = i(
   "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: {
@@ -34,47 +35,47 @@ const u = d(
       size: "m"
     }
   }
-), v = d(
+), h = i(
   "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(
+), y = i(
   "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(
+), g = i(
   "px-2 py-1 [&]:text-body-medium-sm text-[var(--color-text-tertiary)]"
-), h = d(
+), w = i(
   "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";
+), T = e.Root, L = e.Group, B = e.Value, N = /* @__PURE__ */ l.forwardRef(({ className: t, variant: o, size: a, children: d, ...c }, p) => {
+  const u = a || "m";
   return /* @__PURE__ */ m(
     e.Trigger,
     {
       ref: p,
-      className: s(u({ variant: o, size: a }), t),
+      className: s(x({ variant: o, size: a }), t),
       ...c,
       children: [
-        i,
-        /* @__PURE__ */ r(e.Icon, { asChild: !0, children: /* @__PURE__ */ r(n, { name: "chevron-down", size: b }) })
+        d,
+        /* @__PURE__ */ r(e.Icon, { asChild: !0, children: /* @__PURE__ */ r(n, { name: b, size: u }) })
       ]
     }
   );
 });
-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(
+N.displayName = e.Trigger.displayName;
+const S = /* @__PURE__ */ l.forwardRef(({ className: t, children: o, position: a = "popper", modal: d = !1, ...c }, p) => /* @__PURE__ */ r(e.Portal, { children: /* @__PURE__ */ m(
   e.Content,
   {
     ref: p,
     className: s(
-      v(),
+      h(),
       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.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ r(n, { name: f, size: "s" }) }),
       /* @__PURE__ */ r(
         e.Viewport,
         {
@@ -85,52 +86,52 @@ const g = /* @__PURE__ */ l.forwardRef(({ className: t, children: o, position: a
           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" }) })
+      /* @__PURE__ */ r(e.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ r(n, { name: b, size: "s" }) })
     ]
   }
 ) }));
-g.displayName = e.Content.displayName;
-const w = /* @__PURE__ */ l.forwardRef(({ className: t, children: o, ...a }, i) => /* @__PURE__ */ m(
+S.displayName = e.Content.displayName;
+const _ = /* @__PURE__ */ l.forwardRef(({ className: t, children: o, ...a }, d) => /* @__PURE__ */ m(
   e.Item,
   {
-    ref: i,
-    className: s(f(), t),
+    ref: d,
+    className: s(y(), 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" }) }) })
+      /* @__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: v, size: "s", color: "brand" }) }) })
     ]
   }
 ));
-w.displayName = e.Item.displayName;
-const N = /* @__PURE__ */ l.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ r(
+_.displayName = e.Item.displayName;
+const z = /* @__PURE__ */ l.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ r(
   e.Label,
   {
     ref: a,
-    className: s(x(), t),
+    className: s(g(), t),
     ...o
   }
 ));
-N.displayName = e.Label.displayName;
-const S = /* @__PURE__ */ l.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ r(
+z.displayName = e.Label.displayName;
+const V = /* @__PURE__ */ l.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ r(
   e.Separator,
   {
     ref: a,
-    className: s(h(), t),
+    className: s(w(), t),
     ...o
   }
 ));
-S.displayName = e.Separator.displayName;
+V.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
+  T as Select,
+  S as SelectContent,
+  L as SelectGroup,
+  _ as SelectItem,
+  z as SelectLabel,
+  V as SelectSeparator,
+  N as SelectTrigger,
+  B as SelectValue,
+  h as selectContentVariants,
+  y as selectItemVariants,
+  x as selectTriggerVariants
 };

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

@@ -1,9 +1,10 @@
 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(
+import * as l from "@radix-ui/react-separator";
+import { cn as m } from "../../lib/utils.js";
+import { Icon as f } from "./icon.js";
+import { Dot as c } from "./custom-icons.js";
+const h = /* @__PURE__ */ p.forwardRef(
   ({
     className: t,
     layout: i = "vertical",
@@ -18,20 +19,20 @@ const f = /* @__PURE__ */ p.forwardRef(
         ref: n,
         role: a ? "presentation" : "separator",
         "aria-orientation": r,
-        className: l(
+        className: m(
           "flex h-[1em] shrink-0 items-center justify-center",
           t
         ),
         ...e,
-        children: /* @__PURE__ */ o(c, { name: "dot", size: "l", color: "tertiary" })
+        children: /* @__PURE__ */ o(f, { name: c, size: "l", color: "tertiary" })
       }
     ) : /* @__PURE__ */ o(
-      m.Root,
+      l.Root,
       {
         ref: n,
         decorative: a,
         orientation: r,
-        className: l(
+        className: m(
           "shrink-0 bg-[var(--grey-alpha-100)]",
           r === "horizontal" ? "h-px w-full" : "h-7 w-px",
           t
@@ -41,7 +42,7 @@ const f = /* @__PURE__ */ p.forwardRef(
     );
   }
 );
-f.displayName = m.Root.displayName;
+h.displayName = l.Root.displayName;
 export {
-  f as Separator
+  h as Separator
 };