@oneplatformdev/ui 0.1.10-21 → 0.1.10-22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/Sidebar/Sidebar.d.ts.map +1 -1
  3. package/Sidebar/Sidebar.js +132 -128
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## 0.1.10-22 (2025-09-16)
2
+
3
+ ### 🧱 Updated Dependencies
4
+
5
+ - Updated @oneplatformdev/utils to 0.1.1-72
6
+ - Updated @oneplatformdev/hooks to 0.1.0-58
7
+ - Updated @oneplatformdev/tokens to 0.0.1-45
8
+
1
9
  ## 0.1.10-21 (2025-09-16)
2
10
 
3
11
  ### 🧱 Updated Dependencies
package/Sidebar/Sidebar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAU5D,OAAO,EAEL,cAAc,EAGf,MAAM,YAAY,CAAA;AASnB,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU,GAAG,WAAW,CAAA;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,cAAc,sCAAmD,CAAA;AAEvE,iBAAS,UAAU,mBAOlB;AAED,QAAA,MAAM,eAAe;kBAGH,OAAO;WACd,OAAO;mBACC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;gDAqGzC,CAAA;AAGD,QAAA,MAAM,OAAO;WAGF,MAAM,GAAG,OAAO;cACb,SAAS,GAAG,UAAU,GAAG,OAAO;kBAC5B,WAAW,GAAG,MAAM,GAAG,MAAM;gDA+F9C,CAAA;AAGD,QAAA,MAAM,cAAc,0JAuBlB,CAAA;AAGF,QAAA,MAAM,WAAW,kLA0Bf,CAAA;AAGF,QAAA,MAAM,YAAY,6JAehB,CAAA;AAGF,QAAA,MAAM,YAAY,uJAehB,CAAA;AAGF,QAAA,MAAM,aAAa,mKAYjB,CAAA;AAGF,QAAA,MAAM,aAAa,mKAYjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,iOAYpB,CAAA;AAGF,QAAA,MAAM,cAAc,mKAelB,CAAA;AAGF,QAAA,MAAM,YAAY,mKAYhB,CAAA;AAGF,QAAA,MAAM,iBAAiB;cAEqB,OAAO;gDAgBjD,CAAA;AAGF,QAAA,MAAM,kBAAkB;cAEuB,OAAO;mDAkBpD,CAAA;AAGF,QAAA,MAAM,mBAAmB,mKAUvB,CAAA;AAGF,QAAA,MAAM,WAAW,yKAUf,CAAA;AAGF,QAAA,MAAM,eAAe,kKAUnB,CAAA;AAyBF,QAAA,MAAM,iBAAiB;cAGT,OAAO;eACN,OAAO;cACR,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC;;;;iIAmDjE,CAAA;AAGD,QAAA,MAAM,iBAAiB;cAGT,OAAO;kBACH,OAAO;mDAwBvB,CAAA;AAGF,QAAA,MAAM,gBAAgB,mKAkBpB,CAAA;AAGF,QAAA,MAAM,mBAAmB;eAGV,OAAO;gDAgCpB,CAAA;AAGF,QAAA,MAAM,cAAc,yKAclB,CAAA;AAGF,QAAA,MAAM,kBAAkB,kKAG6B,CAAA;AAGrD,QAAA,MAAM,oBAAoB;cAGZ,OAAO;WACV,IAAI,GAAG,IAAI;eACP,OAAO;mDAsBpB,CAAA;AAGF,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,CAAA"}
1
+ {"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAEL,cAAc,EAGf,MAAM,YAAY,CAAC;AASpB,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU,GAAG,WAAW,CAAA;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,cAAc,sCAAmD,CAAC;AAExE,iBAAS,UAAU,mBAOlB;AAED,QAAA,MAAM,eAAe;kBAGL,OAAO;WACd,OAAO;mBACC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;gDAsGvC,CAAC;AAGF,QAAA,MAAM,OAAO;WAGJ,MAAM,GAAG,OAAO;cACb,SAAS,GAAG,UAAU,GAAG,OAAO;kBAC5B,WAAW,GAAG,MAAM,GAAG,MAAM;gDA+F5C,CAAC;AAGF,QAAA,MAAM,cAAc,0JAuBlB,CAAC;AAGH,QAAA,MAAM,WAAW,kLA0Bf,CAAC;AAGH,QAAA,MAAM,YAAY,6JAehB,CAAC;AAGH,QAAA,MAAM,YAAY,uJAehB,CAAC;AAGH,QAAA,MAAM,aAAa,mKAYjB,CAAC;AAGH,QAAA,MAAM,aAAa,mKAYjB,CAAC;AAGH,QAAA,MAAM,gBAAgB,iOAYpB,CAAC;AAGH,QAAA,MAAM,cAAc,mKAelB,CAAC;AAGH,QAAA,MAAM,YAAY,mKAYhB,CAAC;AAGH,QAAA,MAAM,iBAAiB;cAEqB,OAAO;gDAgBjD,CAAC;AAGH,QAAA,MAAM,kBAAkB;cAEuB,OAAO;mDAkBpD,CAAC;AAGH,QAAA,MAAM,mBAAmB,mKAUvB,CAAC;AAGH,QAAA,MAAM,WAAW,yKAUf,CAAC;AAGH,QAAA,MAAM,eAAe,kKAUnB,CAAC;AAyBH,QAAA,MAAM,iBAAiB;cAGX,OAAO;eACN,OAAO;cACR,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC;;;;iIAmD/D,CAAC;AAGF,QAAA,MAAM,iBAAiB;cAGX,OAAO;kBACH,OAAO;mDAwBrB,CAAC;AAGH,QAAA,MAAM,gBAAgB,mKAkBpB,CAAC;AAGH,QAAA,MAAM,mBAAmB;eAGZ,OAAO;gDAgClB,CAAC;AAGH,QAAA,MAAM,cAAc,yKAclB,CAAC;AAGH,QAAA,MAAM,kBAAkB,kKAG6B,CAAC;AAGtD,QAAA,MAAM,oBAAoB;cAGd,OAAO;WACV,IAAI,GAAG,IAAI;eACP,OAAO;mDAsBlB,CAAC;AAGH,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,CAAC"}
package/Sidebar/Sidebar.js CHANGED
@@ -1,20 +1,21 @@
1
1
  import { jsx as r, jsxs as S } from "react/jsx-runtime";
2
+ import { Input as _ } from "../Input/Input.js";
3
+ import { Separator as I } from "../Separator/Separator.js";
4
+ import { Sheet as z, SheetContent as B } from "../Sheet/Sheet.js";
5
+ import { Skeleton as M } from "../Skeleton/Skeleton.js";
6
+ import { Slot as g } from "@radix-ui/react-slot";
7
+ import { cva as E } from "class-variance-authority";
8
+ import { PanelLeft as T } from "lucide-react";
2
9
  import * as i from "react";
3
- import { Slot as h } from "@radix-ui/react-slot";
4
- import { cva as _ } from "class-variance-authority";
5
- import { PanelLeft as I } from "lucide-react";
6
- import { useIsMobile as z } from "../hooks/dist/useIsMobile/useIsMobile.js";
7
- import { cn as d } from "@oneplatformdev/utils";
8
- import { Button as B } from "../Button/Button.js";
10
+ import { cn as o } from "@oneplatformdev/utils";
11
+ import { useIsMobile as A } from "../hooks/dist/useIsMobile/useIsMobile.js";
12
+ import { Button as D } from "../Button/Button.js";
9
13
  import "../Button/buttonVariants.js";
10
- import { Input as E } from "../Input/Input.js";
11
- import { Separator as T } from "../Separator/Separator.js";
12
- import { Sheet as A, SheetContent as D } from "../Sheet/Sheet.js";
13
- import { Skeleton as R } from "../Skeleton/Skeleton.js";
14
- import { TooltipProvider as O, TooltipRoot as G, TooltipTrigger as H, TooltipContent as K } from "../Tooltip/TooltipRoot.js";
15
- const L = "sidebar:state", j = 3600 * 24 * 7, P = "16rem", $ = "18rem", V = "3rem", W = "b", M = i.createContext(null);
14
+ import { TooltipProvider as O, TooltipTrigger as G, TooltipContent as H } from "../Tooltip/TooltipRoot.js";
15
+ import { Tooltip as K } from "../Tooltip/Tooltip.js";
16
+ const L = "sidebar:state", j = 3600 * 24 * 7, P = "16rem", $ = "18rem", V = "3rem", W = "b", R = i.createContext(null);
16
17
  function N() {
17
- const a = i.useContext(M);
18
+ const a = i.useContext(R);
18
19
  if (!a)
19
20
  throw new Error("useSidebar must be used within a SidebarProvider.");
20
21
  return a;
@@ -24,37 +25,40 @@ const q = i.forwardRef(
24
25
  defaultOpen: a = !0,
25
26
  open: e,
26
27
  onOpenChange: t,
27
- className: o,
28
+ className: d,
28
29
  style: n,
29
30
  children: s,
30
- ...f
31
+ ...c
31
32
  }, m) => {
32
- const c = z(), [p, u] = i.useState(!1), [v, C] = i.useState(a), g = e ?? v, x = i.useCallback(
33
+ const u = A(), [f, b] = i.useState(!1), [h, C] = i.useState(a), p = e ?? h, v = i.useCallback(
33
34
  (l) => {
34
- const b = typeof l == "function" ? l(g) : l;
35
- t ? t(b) : C(b), document.cookie = `${L}=${b}; path=/; max-age=${j}`;
35
+ if (t)
36
+ return t?.(
37
+ typeof l == "function" ? l(p) : l
38
+ );
39
+ C(l), document.cookie = `${L}=${p}; path=/; max-age=${j}`;
36
40
  },
37
- [t, g]
38
- ), w = i.useCallback(() => c ? u((l) => !l) : x((l) => !l), [c, x, u]);
41
+ [t, p]
42
+ ), x = i.useCallback(() => u ? b((l) => !l) : v((l) => !l), [u, v, b]);
39
43
  i.useEffect(() => {
40
- const l = (b) => {
41
- b.key === W && (b.metaKey || b.ctrlKey) && (b.preventDefault(), w());
44
+ const l = (w) => {
45
+ w.key === W && (w.metaKey || w.ctrlKey) && (w.preventDefault(), x());
42
46
  };
43
47
  return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
44
- }, [w]);
45
- const y = g ? "expanded" : "collapsed", k = i.useMemo(
48
+ }, [x]);
49
+ const y = p ? "expanded" : "collapsed", k = i.useMemo(
46
50
  () => ({
47
51
  state: y,
48
- open: g,
49
- setOpen: x,
50
- isMobile: c,
51
- openMobile: p,
52
- setOpenMobile: u,
53
- toggleSidebar: w
52
+ open: p,
53
+ setOpen: v,
54
+ isMobile: u,
55
+ openMobile: f,
56
+ setOpenMobile: b,
57
+ toggleSidebar: x
54
58
  }),
55
- [y, g, x, c, p, u, w]
59
+ [y, p, v, u, f, b, x]
56
60
  );
57
- return /* @__PURE__ */ r(M.Provider, { value: k, children: /* @__PURE__ */ r(O, { delayDuration: 0, children: /* @__PURE__ */ r(
61
+ return /* @__PURE__ */ r(R.Provider, { value: k, children: /* @__PURE__ */ r(O, { delayDuration: 0, children: /* @__PURE__ */ r(
58
62
  "div",
59
63
  {
60
64
  style: {
@@ -62,12 +66,12 @@ const q = i.forwardRef(
62
66
  "--sidebar-width-icon": V,
63
67
  ...n
64
68
  },
65
- className: d(
66
- "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
67
- o
69
+ className: o(
70
+ "group/sidebar-wrapper flex max-h-svh w-full h-full has-data-[variant=inset]:bg-sidebar",
71
+ d
68
72
  ),
69
73
  ref: m,
70
- ...f,
74
+ ...c,
71
75
  children: s
72
76
  }
73
77
  ) }) });
@@ -79,24 +83,24 @@ const F = i.forwardRef(
79
83
  side: a = "left",
80
84
  variant: e = "sidebar",
81
85
  collapsible: t = "offcanvas",
82
- className: o,
86
+ className: d,
83
87
  children: n,
84
88
  ...s
85
- }, f) => {
86
- const { isMobile: m, state: c, openMobile: p, setOpenMobile: u } = N();
89
+ }, c) => {
90
+ const { isMobile: m, state: u, openMobile: f, setOpenMobile: b } = N();
87
91
  return t === "none" ? /* @__PURE__ */ r(
88
92
  "div",
89
93
  {
90
- className: d(
94
+ className: o(
91
95
  "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
92
- o
96
+ d
93
97
  ),
94
- ref: f,
98
+ ref: c,
95
99
  ...s,
96
100
  children: n
97
101
  }
98
- ) : m ? /* @__PURE__ */ r(A, { open: p, onOpenChange: u, ...s, children: /* @__PURE__ */ r(
99
- D,
102
+ ) : m ? /* @__PURE__ */ r(z, { open: f, onOpenChange: b, ...s, children: /* @__PURE__ */ r(
103
+ B,
100
104
  {
101
105
  "data-sidebar": "sidebar",
102
106
  "data-mobile": "true",
@@ -110,17 +114,17 @@ const F = i.forwardRef(
110
114
  ) }) : /* @__PURE__ */ S(
111
115
  "div",
112
116
  {
113
- ref: f,
117
+ ref: c,
114
118
  className: "group peer hidden md:block text-sidebar-foreground",
115
- "data-state": c,
116
- "data-collapsible": c === "collapsed" ? t : "",
119
+ "data-state": u,
120
+ "data-collapsible": u === "collapsed" ? t : "",
117
121
  "data-variant": e,
118
122
  "data-side": a,
119
123
  children: [
120
124
  /* @__PURE__ */ r(
121
125
  "div",
122
126
  {
123
- className: d(
127
+ className: o(
124
128
  "duration-200 relative h-svh w-(--sidebar-width) bg-transparent transition-[width] ease-linear",
125
129
  "group-data-[collapsible=offcanvas]:w-0",
126
130
  "group-data-[side=right]:rotate-180",
@@ -131,19 +135,19 @@ const F = i.forwardRef(
131
135
  /* @__PURE__ */ r(
132
136
  "div",
133
137
  {
134
- className: d(
138
+ className: o(
135
139
  "duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
136
140
  a === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
137
141
  // Adjust the padding for floating and inset variants.
138
142
  e === "floating" || e === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
139
- o
143
+ d
140
144
  ),
141
145
  ...s,
142
146
  children: /* @__PURE__ */ r(
143
147
  "div",
144
148
  {
145
149
  "data-sidebar": "sidebar",
146
- className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
150
+ className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
147
151
  children: n
148
152
  }
149
153
  )
@@ -155,22 +159,22 @@ const F = i.forwardRef(
155
159
  }
156
160
  );
157
161
  F.displayName = "Sidebar";
158
- const U = i.forwardRef(({ className: a, onClick: e, ...t }, o) => {
159
- const { toggleSidebar: n } = N();
162
+ const U = i.forwardRef(({ className: a, onClick: e, children: t, ...d }, n) => {
163
+ const { toggleSidebar: s } = N();
160
164
  return /* @__PURE__ */ S(
161
- B,
165
+ D,
162
166
  {
163
- ref: o,
167
+ ref: n,
164
168
  "data-sidebar": "trigger",
165
169
  variant: "ghost",
166
170
  size: "icon",
167
- className: d("h-7 w-7", a),
168
- onClick: (s) => {
169
- e?.(s), n();
171
+ className: o("h-7 w-7", a),
172
+ onClick: (c) => {
173
+ e?.(c), s();
170
174
  },
171
- ...t,
175
+ ...d,
172
176
  children: [
173
- /* @__PURE__ */ r(I, {}),
177
+ t || /* @__PURE__ */ r(T, {}),
174
178
  /* @__PURE__ */ r("span", { className: "sr-only", children: "Toggle Sidebar" })
175
179
  ]
176
180
  }
@@ -178,7 +182,7 @@ const U = i.forwardRef(({ className: a, onClick: e, ...t }, o) => {
178
182
  });
179
183
  U.displayName = "SidebarTrigger";
180
184
  const X = i.forwardRef(({ className: a, ...e }, t) => {
181
- const { toggleSidebar: o } = N();
185
+ const { toggleSidebar: d } = N();
182
186
  return /* @__PURE__ */ r(
183
187
  "button",
184
188
  {
@@ -186,13 +190,13 @@ const X = i.forwardRef(({ className: a, ...e }, t) => {
186
190
  "data-sidebar": "rail",
187
191
  "aria-label": "Toggle Sidebar",
188
192
  tabIndex: -1,
189
- onClick: o,
193
+ onClick: d,
190
194
  title: "Toggle Sidebar",
191
- className: d(
195
+ className: o(
192
196
  "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
193
197
  "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
194
198
  "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
195
- "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
199
+ "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
196
200
  "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
197
201
  "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
198
202
  a
@@ -206,9 +210,9 @@ const Y = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
206
210
  "main",
207
211
  {
208
212
  ref: t,
209
- className: d(
210
- "relative flex min-h-svh flex-1 flex-col bg-background",
211
- "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
213
+ className: o(
214
+ "relative flex flex-1 flex-col grow w-full min-h-full max-h-full bg-background overflow-hidden",
215
+ "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
212
216
  a
213
217
  ),
214
218
  ...e
@@ -216,11 +220,11 @@ const Y = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
216
220
  ));
217
221
  Y.displayName = "SidebarInset";
218
222
  const J = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
219
- E,
223
+ _,
220
224
  {
221
225
  ref: t,
222
226
  "data-sidebar": "input",
223
- className: d(
227
+ className: o(
224
228
  "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
225
229
  a
226
230
  ),
@@ -233,7 +237,7 @@ const Q = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
233
237
  {
234
238
  ref: t,
235
239
  "data-sidebar": "header",
236
- className: d("flex flex-col gap-2 p-2", a),
240
+ className: o("flex flex-col gap-2 p-2", a),
237
241
  ...e
238
242
  }
239
243
  ));
@@ -243,17 +247,17 @@ const Z = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
243
247
  {
244
248
  ref: t,
245
249
  "data-sidebar": "footer",
246
- className: d("flex flex-col gap-2 p-2", a),
250
+ className: o("flex flex-col gap-2 p-2", a),
247
251
  ...e
248
252
  }
249
253
  ));
250
254
  Z.displayName = "SidebarFooter";
251
255
  const ee = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
252
- T,
256
+ I,
253
257
  {
254
258
  ref: t,
255
259
  "data-sidebar": "separator",
256
- className: d("mx-2 w-auto bg-sidebar-border", a),
260
+ className: o("mx-2 w-auto bg-sidebar-border", a),
257
261
  ...e
258
262
  }
259
263
  ));
@@ -263,7 +267,7 @@ const ae = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
263
267
  {
264
268
  ref: t,
265
269
  "data-sidebar": "content",
266
- className: d(
270
+ className: o(
267
271
  "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
268
272
  a
269
273
  ),
@@ -276,18 +280,18 @@ const te = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
276
280
  {
277
281
  ref: t,
278
282
  "data-sidebar": "group",
279
- className: d("relative flex w-full min-w-0 flex-col p-2", a),
283
+ className: o("relative flex w-full min-w-0 flex-col p-2", a),
280
284
  ...e
281
285
  }
282
286
  ));
283
287
  te.displayName = "SidebarGroup";
284
- const re = i.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PURE__ */ r(
285
- e ? h : "div",
288
+ const re = i.forwardRef(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
289
+ e ? g : "div",
286
290
  {
287
- ref: o,
291
+ ref: d,
288
292
  "data-sidebar": "group-label",
289
- className: d(
290
- "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
293
+ className: o(
294
+ "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
291
295
  "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
292
296
  a
293
297
  ),
@@ -295,15 +299,15 @@ const re = i.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PU
295
299
  }
296
300
  ));
297
301
  re.displayName = "SidebarGroupLabel";
298
- const ie = i.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PURE__ */ r(
299
- e ? h : "button",
302
+ const ie = i.forwardRef(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
303
+ e ? g : "button",
300
304
  {
301
- ref: o,
305
+ ref: d,
302
306
  "data-sidebar": "group-action",
303
- className: d(
304
- "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
307
+ className: o(
308
+ "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
305
309
  // Increases the hit area of the button on mobile.
306
- "after:absolute after:-inset-2 md:after:hidden",
310
+ "after:absolute after:-inset-2 after:md:hidden",
307
311
  "group-data-[collapsible=icon]:hidden",
308
312
  a
309
313
  ),
@@ -311,38 +315,38 @@ const ie = i.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PU
311
315
  }
312
316
  ));
313
317
  ie.displayName = "SidebarGroupAction";
314
- const de = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
318
+ const oe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
315
319
  "div",
316
320
  {
317
321
  ref: t,
318
322
  "data-sidebar": "group-content",
319
- className: d("w-full text-sm", a),
323
+ className: o("w-full text-sm", a),
320
324
  ...e
321
325
  }
322
326
  ));
323
- de.displayName = "SidebarGroupContent";
324
- const oe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
327
+ oe.displayName = "SidebarGroupContent";
328
+ const de = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
325
329
  "ul",
326
330
  {
327
331
  ref: t,
328
332
  "data-sidebar": "menu",
329
- className: d("flex w-full min-w-0 flex-col gap-1", a),
333
+ className: o("flex w-full min-w-0 flex-col gap-1", a),
330
334
  ...e
331
335
  }
332
336
  ));
333
- oe.displayName = "SidebarMenu";
337
+ de.displayName = "SidebarMenu";
334
338
  const ne = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
335
339
  "li",
336
340
  {
337
341
  ref: t,
338
342
  "data-sidebar": "menu-item",
339
- className: d("group/menu-item relative", a),
343
+ className: o("group/menu-item relative", a),
340
344
  ...e
341
345
  }
342
346
  ));
343
347
  ne.displayName = "SidebarMenuItem";
344
- const se = _(
345
- "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
348
+ const se = E(
349
+ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
346
350
  {
347
351
  variants: {
348
352
  variant: {
@@ -365,48 +369,48 @@ const se = _(
365
369
  asChild: a = !1,
366
370
  isActive: e = !1,
367
371
  variant: t = "default",
368
- size: o = "default",
372
+ size: d = "default",
369
373
  tooltip: n,
370
374
  className: s,
371
- ...f
375
+ ...c
372
376
  }, m) => {
373
- const c = a ? h : "button", { isMobile: p, state: u } = N(), v = /* @__PURE__ */ r(
374
- c,
377
+ const u = a ? g : "button", { isMobile: f, state: b } = N(), h = /* @__PURE__ */ r(
378
+ u,
375
379
  {
376
380
  ref: m,
377
381
  "data-sidebar": "menu-button",
378
- "data-size": o,
382
+ "data-size": d,
379
383
  "data-active": e,
380
- className: d(se({ variant: t, size: o }), s),
381
- ...f
384
+ className: o(se({ variant: t, size: d }), s),
385
+ ...c
382
386
  }
383
387
  );
384
388
  return n ? (typeof n == "string" && (n = {
385
389
  children: n
386
- }), /* @__PURE__ */ S(G, { children: [
387
- /* @__PURE__ */ r(H, { asChild: !0, children: v }),
390
+ }), /* @__PURE__ */ S(K, { children: [
391
+ /* @__PURE__ */ r(G, { asChild: !0, children: h }),
388
392
  /* @__PURE__ */ r(
389
- K,
393
+ H,
390
394
  {
391
395
  side: "right",
392
396
  align: "center",
393
- hidden: u !== "collapsed" || p,
397
+ hidden: b !== "collapsed" || f,
394
398
  ...n
395
399
  }
396
400
  )
397
- ] })) : v;
401
+ ] })) : h;
398
402
  }
399
403
  );
400
404
  le.displayName = "SidebarMenuButton";
401
- const ce = i.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...o }, n) => /* @__PURE__ */ r(
402
- e ? h : "button",
405
+ const ce = i.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...d }, n) => /* @__PURE__ */ r(
406
+ e ? g : "button",
403
407
  {
404
408
  ref: n,
405
409
  "data-sidebar": "menu-action",
406
- className: d(
407
- "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
410
+ className: o(
411
+ "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
408
412
  // Increases the hit area of the button on mobile.
409
- "after:absolute after:-inset-2 md:after:hidden",
413
+ "after:absolute after:-inset-2 after:md:hidden",
410
414
  "peer-data-[size=sm]/menu-button:top-1",
411
415
  "peer-data-[size=default]/menu-button:top-1.5",
412
416
  "peer-data-[size=lg]/menu-button:top-2.5",
@@ -414,7 +418,7 @@ const ce = i.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, .
414
418
  t && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
415
419
  a
416
420
  ),
417
- ...o
421
+ ...d
418
422
  }
419
423
  ));
420
424
  ce.displayName = "SidebarMenuAction";
@@ -423,7 +427,7 @@ const ue = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
423
427
  {
424
428
  ref: t,
425
429
  "data-sidebar": "menu-badge",
426
- className: d(
430
+ className: o(
427
431
  "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
428
432
  "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
429
433
  "peer-data-[size=sm]/menu-button:top-1",
@@ -436,25 +440,25 @@ const ue = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
436
440
  }
437
441
  ));
438
442
  ue.displayName = "SidebarMenuBadge";
439
- const be = i.forwardRef(({ className: a, showIcon: e = !1, ...t }, o) => {
443
+ const be = i.forwardRef(({ className: a, showIcon: e = !1, ...t }, d) => {
440
444
  const n = i.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
441
445
  return /* @__PURE__ */ S(
442
446
  "div",
443
447
  {
444
- ref: o,
448
+ ref: d,
445
449
  "data-sidebar": "menu-skeleton",
446
- className: d("rounded-md h-8 flex gap-2 px-2 items-center", a),
450
+ className: o("rounded-md h-8 flex gap-2 px-2 items-center", a),
447
451
  ...t,
448
452
  children: [
449
453
  e && /* @__PURE__ */ r(
450
- R,
454
+ M,
451
455
  {
452
456
  className: "size-4 rounded-md",
453
457
  "data-sidebar": "menu-skeleton-icon"
454
458
  }
455
459
  ),
456
460
  /* @__PURE__ */ r(
457
- R,
461
+ M,
458
462
  {
459
463
  className: "h-4 flex-1 max-w-(--skeleton-width)",
460
464
  "data-sidebar": "menu-skeleton-text",
@@ -473,8 +477,8 @@ const fe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
473
477
  {
474
478
  ref: t,
475
479
  "data-sidebar": "menu-sub",
476
- className: d(
477
- "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
480
+ className: o(
481
+ "ml-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border pl-2.5 pr-0.5 py-0.5",
478
482
  "group-data-[collapsible=icon]:hidden",
479
483
  a
480
484
  ),
@@ -484,20 +488,20 @@ const fe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
484
488
  fe.displayName = "SidebarMenuSub";
485
489
  const pe = i.forwardRef(({ ...a }, e) => /* @__PURE__ */ r("li", { ref: e, ...a }));
486
490
  pe.displayName = "SidebarMenuSubItem";
487
- const me = i.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: o, ...n }, s) => /* @__PURE__ */ r(
488
- a ? h : "a",
491
+ const me = i.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: d, ...n }, s) => /* @__PURE__ */ r(
492
+ a ? g : "a",
489
493
  {
490
494
  ref: s,
491
495
  "data-sidebar": "menu-sub-button",
492
496
  "data-size": e,
493
497
  "data-active": t,
494
- className: d(
495
- "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
498
+ className: o(
499
+ "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
496
500
  "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
497
501
  e === "sm" && "text-xs",
498
502
  e === "md" && "text-sm",
499
503
  "group-data-[collapsible=icon]:hidden",
500
- o
504
+ d
501
505
  ),
502
506
  ...n
503
507
  }
@@ -509,12 +513,12 @@ export {
509
513
  Z as SidebarFooter,
510
514
  te as SidebarGroup,
511
515
  ie as SidebarGroupAction,
512
- de as SidebarGroupContent,
516
+ oe as SidebarGroupContent,
513
517
  re as SidebarGroupLabel,
514
518
  Q as SidebarHeader,
515
519
  J as SidebarInput,
516
520
  Y as SidebarInset,
517
- oe as SidebarMenu,
521
+ de as SidebarMenu,
518
522
  ce as SidebarMenuAction,
519
523
  ue as SidebarMenuBadge,
520
524
  le as SidebarMenuButton,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.1.10-21",
3
+ "version": "0.1.10-22",
4
4
  "description": "React hook library",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [
@@ -110,8 +110,8 @@
110
110
  "sonner": "^2.0.7",
111
111
  "vaul": "^1.1.2",
112
112
  "zod": "^4.1.8",
113
- "@oneplatformdev/tokens": "^0.0.1-44",
114
- "@oneplatformdev/hooks": "^0.1.0-57",
115
- "@oneplatformdev/utils": "^0.1.1-71"
113
+ "@oneplatformdev/hooks": "^0.1.0-58",
114
+ "@oneplatformdev/utils": "^0.1.1-72",
115
+ "@oneplatformdev/tokens": "^0.0.1-45"
116
116
  }
117
117
  }