@lglab/compose-ui 0.10.0 → 0.12.0

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.
@@ -0,0 +1,20 @@
1
+ import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
2
+ import * as React from 'react';
3
+ type CollapsibleRootProps = React.ComponentProps<typeof BaseCollapsible.Root>;
4
+ declare const CollapsibleRoot: {
5
+ ({ className, ...props }: CollapsibleRootProps): import("react/jsx-runtime").JSX.Element;
6
+ displayName: string;
7
+ };
8
+ type CollapsibleTriggerProps = React.ComponentProps<typeof BaseCollapsible.Trigger>;
9
+ declare const CollapsibleTrigger: {
10
+ ({ className, ...props }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
11
+ displayName: string;
12
+ };
13
+ type CollapsiblePanelProps = React.ComponentProps<typeof BaseCollapsible.Panel>;
14
+ declare const CollapsiblePanel: {
15
+ ({ className, ...props }: CollapsiblePanelProps): import("react/jsx-runtime").JSX.Element;
16
+ displayName: string;
17
+ };
18
+ export { CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel };
19
+ export type { CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps };
20
+ //# sourceMappingURL=collapsible.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../src/components/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAE7E,QAAA,MAAM,eAAe;8BAA6B,oBAAoB;;CAErE,CAAA;AAQD,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAA;AAEnF,QAAA,MAAM,kBAAkB;8BAA6B,uBAAuB;;CAO3E,CAAA;AAQD,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAA;AAE/E,QAAA,MAAM,gBAAgB;8BAA6B,qBAAqB;;CAavE,CAAA;AAQD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,CAAA;AAEhE,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,CAAA"}
@@ -1,18 +1,20 @@
1
1
  import { Toggle } from '@base-ui/react/toggle';
2
2
  import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
3
- import { ToggleSize } from '../lib/toggle-variants';
3
+ import { ToggleSize, ToggleVariant } from '../lib/toggle-variants';
4
4
  import * as React from 'react';
5
5
  type ToggleGroupRootProps = React.ComponentProps<typeof BaseToggleGroup>;
6
6
  declare const ToggleGroupRoot: {
7
- ({ className, ...props }: ToggleGroupRootProps): import("react/jsx-runtime").JSX.Element;
7
+ ({ className, orientation, ...props }: ToggleGroupRootProps): import("react/jsx-runtime").JSX.Element;
8
8
  displayName: string;
9
9
  };
10
10
  type ToggleGroupItemProps = React.ComponentProps<typeof Toggle> & {
11
+ /** Visual style of the toggle item */
12
+ variant?: ToggleVariant;
11
13
  /** Size of the toggle item */
12
14
  size?: ToggleSize;
13
15
  };
14
16
  declare const ToggleGroupItem: {
15
- ({ className, size, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
17
+ ({ className, variant, size, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
16
18
  displayName: string;
17
19
  };
18
20
  export { ToggleGroupRoot, ToggleGroupItem };
@@ -1 +1 @@
1
- {"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,wBAAwB,CAAA;AAOxE,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAExE,QAAA,MAAM,eAAe;8BAA6B,oBAAoB;;CAUrE,CAAA;AAQD,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAChE,8BAA8B;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,eAAe;oCAAmC,oBAAoB;;CAE3E,CAAA;AAQD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,CAAA;AAE3C,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA"}
1
+ {"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,UAAU,EACf,KAAK,aAAa,EAEnB,MAAM,wBAAwB,CAAA;AAO/B,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAExE,QAAA,MAAM,eAAe;2CAA0C,oBAAoB;;CAkBlF,CAAA;AAQD,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAChE,sCAAsC;IACtC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,eAAe;6CAKlB,oBAAoB;;CAYtB,CAAA;AAQD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,CAAA;AAE3C,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA"}
@@ -1,12 +1,14 @@
1
1
  import { Toggle as BaseToggle } from '@base-ui/react/toggle';
2
- import { ToggleSize } from '../lib/toggle-variants';
2
+ import { ToggleSize, ToggleVariant } from '../lib/toggle-variants';
3
3
  import * as React from 'react';
4
4
  type ToggleProps = React.ComponentProps<typeof BaseToggle> & {
5
+ /** Visual style of the toggle */
6
+ variant?: ToggleVariant;
5
7
  /** Size of the toggle */
6
8
  size?: ToggleSize;
7
9
  };
8
10
  declare const Toggle: {
9
- ({ className, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
11
+ ({ className, variant, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
10
12
  displayName: string;
11
13
  };
12
14
  export { Toggle };
@@ -1 +1 @@
1
- {"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,wBAAwB,CAAA;AAOxE,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IAC3D,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,MAAM;oCAAmC,WAAW;;CAEzD,CAAA;AAQD,OAAO,EAAE,MAAM,EAAE,CAAA;AAEjB,YAAY,EAAE,WAAW,EAAE,CAAA"}
1
+ {"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,UAAU,EACf,KAAK,aAAa,EAEnB,MAAM,wBAAwB,CAAA;AAO/B,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IAC3D,iCAAiC;IACjC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,MAAM;6CAA4C,WAAW;;CAIlE,CAAA;AAQD,OAAO,EAAE,MAAM,EAAE,CAAA;AAEjB,YAAY,EAAE,WAAW,EAAE,CAAA"}
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { Button } from './components/button';
2
+ export { CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel, } from './components/collapsible';
2
3
  export { AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogBackdrop, AlertDialogViewport, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, } from './components/alert-dialog';
3
4
  export { AlertDialog } from '@base-ui/react/alert-dialog';
4
5
  export { AvatarRoot, AvatarImage, AvatarFallback, AvatarStack } from './components/avatar';
@@ -13,6 +14,7 @@ export { MeterRoot, MeterTrack, MeterIndicator, MeterValue, MeterLabel, } from '
13
14
  export { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValue, ProgressLabel, } from './components/progress';
14
15
  export { ToggleGroupRoot, ToggleGroupItem } from './components/toggle-group';
15
16
  export type { ButtonProps } from './components/button';
17
+ export type { CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps, } from './components/collapsible';
16
18
  export type { AlertDialogRootProps, AlertDialogTriggerProps, AlertDialogPortalProps, AlertDialogBackdropProps, AlertDialogViewportProps, AlertDialogPopupProps, AlertDialogTitleProps, AlertDialogDescriptionProps, AlertDialogCloseProps, } from './components/alert-dialog';
17
19
  export type { AvatarRootProps, AvatarImageProps, AvatarFallbackProps, AvatarStackProps, } from './components/avatar';
18
20
  export type { ScrollAreaRootProps, ScrollAreaViewportProps, ScrollAreaContentProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaCornerProps, } from './components/scroll-area';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/index.es.js CHANGED
@@ -1,22 +1,23 @@
1
1
  "use client";
2
- import { jsx as t, jsxs as k } from "react/jsx-runtime";
2
+ import { jsx as t, jsxs as A } from "react/jsx-runtime";
3
3
  import { Button as S } from "@base-ui/react/button";
4
4
  import { cva as n } from "class-variance-authority";
5
- import { clsx as C } from "clsx";
6
- import { twMerge as _ } from "tailwind-merge";
5
+ import { clsx as _ } from "clsx";
6
+ import { twMerge as I } from "tailwind-merge";
7
+ import { Collapsible as w } from "@base-ui/react/collapsible";
7
8
  import { AlertDialog as d } from "@base-ui/react/alert-dialog";
8
- import { AlertDialog as ya } from "@base-ui/react/alert-dialog";
9
- import { Avatar as w } from "@base-ui/react/avatar";
10
- import * as h from "react";
9
+ import { AlertDialog as wa } from "@base-ui/react/alert-dialog";
10
+ import { Avatar as D } from "@base-ui/react/avatar";
11
+ import * as x from "react";
11
12
  import { ScrollArea as m } from "@base-ui/react/scroll-area";
12
- import { Switch as A } from "@base-ui/react/switch";
13
- import { Toggle as T } from "@base-ui/react/toggle";
13
+ import { Switch as T } from "@base-ui/react/switch";
14
+ import { Toggle as z } from "@base-ui/react/toggle";
14
15
  import { Tabs as f } from "@base-ui/react/tabs";
15
- import { Dialog as l } from "@base-ui/react/dialog";
16
+ import { Dialog as s } from "@base-ui/react/dialog";
16
17
  import { Accordion as b } from "@base-ui/react/accordion";
17
18
  import { Meter as y } from "@base-ui/react/meter";
18
- import { Progress as N } from "@base-ui/react/progress";
19
- import { ToggleGroup as I } from "@base-ui/react/toggle-group";
19
+ import { Progress as h } from "@base-ui/react/progress";
20
+ import { ToggleGroup as F } from "@base-ui/react/toggle-group";
20
21
  const u = n(
21
22
  [
22
23
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
@@ -47,43 +48,67 @@ const u = n(
47
48
  }
48
49
  );
49
50
  function r(...e) {
50
- return _(C(e));
51
+ return I(_(e));
51
52
  }
52
- const F = ({
53
+ const j = ({
53
54
  className: e,
54
55
  variant: a,
55
56
  size: o,
56
- disabled: s,
57
+ disabled: l,
57
58
  children: i,
58
59
  ...c
59
60
  }) => /* @__PURE__ */ t(
60
61
  S,
61
62
  {
62
63
  className: r(u({ variant: a, size: o }), e),
63
- disabled: s,
64
+ disabled: l,
64
65
  ...c,
65
66
  children: i
66
67
  }
67
68
  );
68
- F.displayName = "Button";
69
- const B = (e) => /* @__PURE__ */ t(d.Root, { ...e });
70
- B.displayName = "AlertDialogRoot";
71
- const M = ({
69
+ j.displayName = "Button";
70
+ const B = ({ className: e, ...a }) => /* @__PURE__ */ t(w.Root, { className: r("w-full", e), ...a });
71
+ B.displayName = "CollapsibleRoot";
72
+ const M = ({ className: e, ...a }) => /* @__PURE__ */ t(
73
+ w.Trigger,
74
+ {
75
+ className: r("flex items-center justify-between font-medium", e),
76
+ ...a
77
+ }
78
+ );
79
+ M.displayName = "CollapsibleTrigger";
80
+ const L = ({ className: e, ...a }) => /* @__PURE__ */ t(
81
+ w.Panel,
82
+ {
83
+ className: r(
84
+ '[&[hidden]:not([hidden="until-found"])]:hidden h-(--collapsible-panel-height)',
85
+ "overflow-hidden duration-200 transition-all ease-out",
86
+ "data-ending-style:h-0",
87
+ "data-starting-style:h-0",
88
+ e
89
+ ),
90
+ ...a
91
+ }
92
+ );
93
+ L.displayName = "CollapsiblePanel";
94
+ const H = (e) => /* @__PURE__ */ t(d.Root, { ...e });
95
+ H.displayName = "AlertDialogRoot";
96
+ const G = ({
72
97
  className: e,
73
98
  variant: a,
74
99
  size: o,
75
- ...s
100
+ ...l
76
101
  }) => /* @__PURE__ */ t(
77
102
  d.Trigger,
78
103
  {
79
104
  className: r(u({ variant: a, size: o }), e),
80
- ...s
105
+ ...l
81
106
  }
82
107
  );
83
- M.displayName = "AlertDialogTrigger";
84
- const j = (e) => /* @__PURE__ */ t(d.Portal, { ...e });
85
- j.displayName = "AlertDialogPortal";
86
- const L = ({ className: e, ...a }) => /* @__PURE__ */ t(
108
+ G.displayName = "AlertDialogTrigger";
109
+ const q = (e) => /* @__PURE__ */ t(d.Portal, { ...e });
110
+ q.displayName = "AlertDialogPortal";
111
+ const E = ({ className: e, ...a }) => /* @__PURE__ */ t(
87
112
  d.Backdrop,
88
113
  {
89
114
  className: r(
@@ -95,16 +120,16 @@ const L = ({ className: e, ...a }) => /* @__PURE__ */ t(
95
120
  ...a
96
121
  }
97
122
  );
98
- L.displayName = "AlertDialogBackdrop";
99
- const H = ({ className: e, ...a }) => /* @__PURE__ */ t(
123
+ E.displayName = "AlertDialogBackdrop";
124
+ const $ = ({ className: e, ...a }) => /* @__PURE__ */ t(
100
125
  d.Viewport,
101
126
  {
102
127
  className: r("fixed inset-0 z-50 flex items-center justify-center p-4", e),
103
128
  ...a
104
129
  }
105
130
  );
106
- H.displayName = "AlertDialogViewport";
107
- const G = n(
131
+ $.displayName = "AlertDialogViewport";
132
+ const J = n(
108
133
  [
109
134
  "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
110
135
  "w-full max-w-[calc(100vw-2rem)] rounded-lg border border-border bg-background p-6 shadow-lg",
@@ -128,38 +153,38 @@ const G = n(
128
153
  size: "default"
129
154
  }
130
155
  }
131
- ), q = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
156
+ ), K = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
132
157
  d.Popup,
133
158
  {
134
- className: r(G({ size: a }), e),
159
+ className: r(J({ size: a }), e),
135
160
  ...o
136
161
  }
137
162
  );
138
- q.displayName = "AlertDialogPopup";
139
- const E = ({ className: e, ...a }) => /* @__PURE__ */ t(
163
+ K.displayName = "AlertDialogPopup";
164
+ const O = ({ className: e, ...a }) => /* @__PURE__ */ t(
140
165
  d.Title,
141
166
  {
142
167
  className: r("text-lg font-semibold leading-none tracking-tight", e),
143
168
  ...a
144
169
  }
145
170
  );
146
- E.displayName = "AlertDialogTitle";
147
- const $ = ({ className: e, ...a }) => /* @__PURE__ */ t(d.Description, { className: r("mt-2", e), ...a });
148
- $.displayName = "AlertDialogDescription";
149
- const J = ({
171
+ O.displayName = "AlertDialogTitle";
172
+ const Q = ({ className: e, ...a }) => /* @__PURE__ */ t(d.Description, { className: r("mt-2", e), ...a });
173
+ Q.displayName = "AlertDialogDescription";
174
+ const U = ({
150
175
  className: e,
151
176
  variant: a,
152
177
  size: o,
153
- ...s
178
+ ...l
154
179
  }) => /* @__PURE__ */ t(
155
180
  d.Close,
156
181
  {
157
182
  className: r(u({ variant: a ?? "outline", size: o }), e),
158
- ...s
183
+ ...l
159
184
  }
160
185
  );
161
- J.displayName = "AlertDialogClose";
162
- const z = n(
186
+ U.displayName = "AlertDialogClose";
187
+ const P = n(
163
188
  [
164
189
  "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
165
190
  "bg-muted text-foreground",
@@ -177,18 +202,18 @@ const z = n(
177
202
  size: "default"
178
203
  }
179
204
  }
180
- ), P = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(w.Root, { className: r(z({ size: a }), e), ...o });
181
- P.displayName = "AvatarRoot";
182
- const K = ({ className: e, ...a }) => /* @__PURE__ */ t(
183
- w.Image,
205
+ ), R = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(D.Root, { className: r(P({ size: a }), e), ...o });
206
+ R.displayName = "AvatarRoot";
207
+ const W = ({ className: e, ...a }) => /* @__PURE__ */ t(
208
+ D.Image,
184
209
  {
185
210
  className: r("aspect-square h-full w-full object-cover", e),
186
211
  ...a
187
212
  }
188
213
  );
189
- K.displayName = "AvatarImage";
190
- const O = ({ className: e, ...a }) => /* @__PURE__ */ t(
191
- w.Fallback,
214
+ W.displayName = "AvatarImage";
215
+ const X = ({ className: e, ...a }) => /* @__PURE__ */ t(
216
+ D.Fallback,
192
217
  {
193
218
  className: r(
194
219
  "flex h-full w-full items-center justify-center font-medium",
@@ -197,50 +222,50 @@ const O = ({ className: e, ...a }) => /* @__PURE__ */ t(
197
222
  ...a
198
223
  }
199
224
  );
200
- O.displayName = "AvatarFallback";
201
- const Q = ({
225
+ X.displayName = "AvatarFallback";
226
+ const Y = ({
202
227
  "aria-label": e,
203
228
  maxVisible: a,
204
229
  className: o,
205
- children: s
230
+ children: l
206
231
  }) => {
207
- const i = h.Children.toArray(s), c = i.length, g = a !== void 0 ? Math.min(a, c) : c, x = c - g, v = i.slice(0, g), V = (() => {
232
+ const i = x.Children.toArray(l), c = i.length, g = a !== void 0 ? Math.min(a, c) : c, N = c - g, v = i.slice(0, g), C = (() => {
208
233
  const p = i[0];
209
- return h.isValidElement(p) && p.type === P ? p.props.size ?? "default" : "default";
234
+ return x.isValidElement(p) && p.type === R ? p.props.size ?? "default" : "default";
210
235
  })();
211
- return /* @__PURE__ */ k("ul", { "aria-label": e, className: r("flex -space-x-2", o), children: [
212
- v.map((p, D) => /* @__PURE__ */ t("li", { children: p }, D)),
213
- x > 0 && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ k(
236
+ return /* @__PURE__ */ A("ul", { "aria-label": e, className: r("flex -space-x-2", o), children: [
237
+ v.map((p, k) => /* @__PURE__ */ t("li", { children: p }, k)),
238
+ N > 0 && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ A(
214
239
  "span",
215
240
  {
216
241
  className: r(
217
242
  "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
218
243
  "bg-muted text-foreground border-2 border-background",
219
244
  "font-medium",
220
- z({ size: V })
245
+ P({ size: C })
221
246
  ),
222
247
  children: [
223
248
  "+",
224
- x
249
+ N
225
250
  ]
226
251
  }
227
252
  ) })
228
253
  ] });
229
254
  };
230
- Q.displayName = "AvatarStack";
231
- const U = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Root, { className: r("relative", e), ...a });
232
- U.displayName = "ScrollAreaRoot";
233
- const W = ({ className: e, ...a }) => /* @__PURE__ */ t(
255
+ Y.displayName = "AvatarStack";
256
+ const Z = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Root, { className: r("relative", e), ...a });
257
+ Z.displayName = "ScrollAreaRoot";
258
+ const ee = ({ className: e, ...a }) => /* @__PURE__ */ t(
234
259
  m.Viewport,
235
260
  {
236
261
  className: r("h-full overscroll-contain pr-3", e),
237
262
  ...a
238
263
  }
239
264
  );
240
- W.displayName = "ScrollAreaViewport";
241
- const X = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Content, { className: r("min-w-full", e), ...a });
242
- X.displayName = "ScrollAreaContent";
243
- const Y = ({
265
+ ee.displayName = "ScrollAreaViewport";
266
+ const ae = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Content, { className: r("min-w-full", e), ...a });
267
+ ae.displayName = "ScrollAreaContent";
268
+ const te = ({
244
269
  className: e,
245
270
  orientation: a = "vertical",
246
271
  ...o
@@ -248,7 +273,7 @@ const Y = ({
248
273
  m.Scrollbar,
249
274
  {
250
275
  className: r(
251
- "flex touch-none select-none p-0.5 transition-colors duration-150 ease-out",
276
+ "flex touch-none select-none p-0.5 transition-colors duration-200 ease-out",
252
277
  "data-hovering:bg-muted/50",
253
278
  a === "vertical" && "h-full w-2.5",
254
279
  a === "horizontal" && "h-2.5 w-full flex-col",
@@ -258,8 +283,8 @@ const Y = ({
258
283
  ...o
259
284
  }
260
285
  );
261
- Y.displayName = "ScrollAreaScrollbar";
262
- const Z = ({ className: e, ...a }) => /* @__PURE__ */ t(
286
+ te.displayName = "ScrollAreaScrollbar";
287
+ const re = ({ className: e, ...a }) => /* @__PURE__ */ t(
263
288
  m.Thumb,
264
289
  {
265
290
  className: r(
@@ -270,11 +295,11 @@ const Z = ({ className: e, ...a }) => /* @__PURE__ */ t(
270
295
  ...a
271
296
  }
272
297
  );
273
- Z.displayName = "ScrollAreaThumb";
274
- const ee = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Corner, { className: r("bg-muted/50", e), ...a });
275
- ee.displayName = "ScrollAreaCorner";
276
- const ae = ({ className: e, ...a }) => /* @__PURE__ */ t(
277
- A.Root,
298
+ re.displayName = "ScrollAreaThumb";
299
+ const oe = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Corner, { className: r("bg-muted/50", e), ...a });
300
+ oe.displayName = "ScrollAreaCorner";
301
+ const le = ({ className: e, ...a }) => /* @__PURE__ */ t(
302
+ T.Root,
278
303
  {
279
304
  className: r(
280
305
  "relative flex h-6 w-10 rounded-full",
@@ -291,14 +316,14 @@ const ae = ({ className: e, ...a }) => /* @__PURE__ */ t(
291
316
  ...a
292
317
  }
293
318
  );
294
- ae.displayName = "SwitchRoot";
295
- const te = ({ className: e, ...a }) => /* @__PURE__ */ t(
296
- A.Thumb,
319
+ le.displayName = "SwitchRoot";
320
+ const se = ({ className: e, ...a }) => /* @__PURE__ */ t(
321
+ T.Thumb,
297
322
  {
298
323
  className: r(
299
324
  "aspect-square h-full rounded-full bg-background",
300
325
  "shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-muted-foreground/20",
301
- "transition-all duration-150",
326
+ "transition-all duration-200",
302
327
  "data-checked:translate-x-4",
303
328
  "dark:shadow-black/25 dark:bg-foreground dark:data-checked:bg-background",
304
329
  "data-disabled:opacity-100",
@@ -307,32 +332,43 @@ const te = ({ className: e, ...a }) => /* @__PURE__ */ t(
307
332
  ...a
308
333
  }
309
334
  );
310
- te.displayName = "SwitchThumb";
311
- const R = n(
335
+ se.displayName = "SwitchThumb";
336
+ const V = n(
312
337
  [
313
- "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium",
338
+ "inline-flex items-center justify-center gap-2 rounded-md",
339
+ "text-sm font-medium",
314
340
  "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
315
- "border border-border bg-background hover:bg-muted shadow-xs",
316
- "transition-all duration-150",
317
- "data-pressed:border-primary data-pressed:bg-primary data-pressed:text-primary-foreground data-pressed:shadow-sm"
341
+ "select-none transition-colors duration-200"
318
342
  ],
319
343
  {
320
344
  variants: {
345
+ variant: {
346
+ default: [
347
+ "border border-border bg-background shadow-xs",
348
+ "hover:bg-accent hover:text-accent-foreground",
349
+ "data-pressed:border-primary data-pressed:bg-primary data-pressed:text-primary-foreground data-pressed:shadow-none"
350
+ ],
351
+ ghost: ["hover:bg-accent"]
352
+ },
321
353
  size: {
322
- sm: "h-8 min-w-8 px-2 gap-1.5",
323
- default: "h-9 min-w-9 px-2.5",
324
- lg: "h-10 min-w-10 px-3"
354
+ sm: "h-8 min-w-8 px-2.5 gap-1.5",
355
+ default: "h-9 min-w-9 px-3",
356
+ lg: "h-10 min-w-10 px-3.5",
357
+ icon: "size-9",
358
+ "icon-sm": "size-8",
359
+ "icon-lg": "size-10"
325
360
  }
326
361
  },
327
362
  defaultVariants: {
363
+ variant: "default",
328
364
  size: "default"
329
365
  }
330
366
  }
331
- ), re = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(T, { className: r(R({ size: a }), e), ...o });
332
- re.displayName = "Toggle";
333
- const oe = ({ className: e, ...a }) => /* @__PURE__ */ t(f.Root, { className: r("flex flex-col", e), ...a });
334
- oe.displayName = "TabsRoot";
335
- const se = n(
367
+ ), ie = ({ className: e, variant: a, size: o, ...l }) => /* @__PURE__ */ t(z, { className: r(V({ variant: a, size: o }), e), ...l });
368
+ ie.displayName = "Toggle";
369
+ const ne = ({ className: e, ...a }) => /* @__PURE__ */ t(f.Root, { className: r("flex flex-col", e), ...a });
370
+ ne.displayName = "TabsRoot";
371
+ const de = n(
336
372
  ["relative inline-flex w-fit items-center gap-1", "rounded-lg bg-muted p-1"],
337
373
  {
338
374
  variants: {
@@ -345,15 +381,15 @@ const se = n(
345
381
  orientation: "horizontal"
346
382
  }
347
383
  }
348
- ), le = ({ className: e, orientation: a = "horizontal", ...o }) => /* @__PURE__ */ t(
384
+ ), ce = ({ className: e, orientation: a = "horizontal", ...o }) => /* @__PURE__ */ t(
349
385
  f.List,
350
386
  {
351
- className: r(se({ orientation: a }), e),
387
+ className: r(de({ orientation: a }), e),
352
388
  ...o
353
389
  }
354
390
  );
355
- le.displayName = "TabsList";
356
- const ie = n(
391
+ ce.displayName = "TabsList";
392
+ const ue = n(
357
393
  [
358
394
  "relative z-10 inline-flex items-center justify-center whitespace-nowrap",
359
395
  "rounded-md px-3 py-1.5 text-sm font-medium",
@@ -374,9 +410,9 @@ const ie = n(
374
410
  size: "default"
375
411
  }
376
412
  }
377
- ), ne = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(f.Tab, { className: r(ie({ size: a }), e), ...o });
378
- ne.displayName = "TabsTab";
379
- const de = n(
413
+ ), me = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(f.Tab, { className: r(ue({ size: a }), e), ...o });
414
+ me.displayName = "TabsTab";
415
+ const ge = n(
380
416
  ["absolute rounded-md bg-background shadow-sm", "transition-all duration-200 ease-out"],
381
417
  {
382
418
  variants: {
@@ -389,34 +425,34 @@ const de = n(
389
425
  orientation: "horizontal"
390
426
  }
391
427
  }
392
- ), ce = ({
428
+ ), pe = ({
393
429
  className: e,
394
430
  orientation: a = "horizontal",
395
431
  ...o
396
432
  }) => /* @__PURE__ */ t(
397
433
  f.Indicator,
398
434
  {
399
- className: r(de({ orientation: a }), e),
435
+ className: r(ge({ orientation: a }), e),
400
436
  ...o
401
437
  }
402
438
  );
403
- ce.displayName = "TabsIndicator";
404
- const ue = ({ className: e, ...a }) => /* @__PURE__ */ t(f.Panel, { className: r("mt-2 ring-offset-background", e), ...a });
405
- ue.displayName = "TabsPanel";
406
- const me = (e) => /* @__PURE__ */ t(l.Root, { ...e });
407
- me.displayName = "DialogRoot";
408
- const ge = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
409
- l.Trigger,
439
+ pe.displayName = "TabsIndicator";
440
+ const fe = ({ className: e, ...a }) => /* @__PURE__ */ t(f.Panel, { className: r("mt-2 ring-offset-background", e), ...a });
441
+ fe.displayName = "TabsPanel";
442
+ const be = (e) => /* @__PURE__ */ t(s.Root, { ...e });
443
+ be.displayName = "DialogRoot";
444
+ const ye = ({ className: e, variant: a, size: o, ...l }) => /* @__PURE__ */ t(
445
+ s.Trigger,
410
446
  {
411
447
  className: r(u({ variant: a, size: o }), e),
412
- ...s
448
+ ...l
413
449
  }
414
450
  );
415
- ge.displayName = "DialogTrigger";
416
- const pe = (e) => /* @__PURE__ */ t(l.Portal, { ...e });
417
- pe.displayName = "DialogPortal";
418
- const fe = ({ className: e, ...a }) => /* @__PURE__ */ t(
419
- l.Backdrop,
451
+ ye.displayName = "DialogTrigger";
452
+ const he = (e) => /* @__PURE__ */ t(s.Portal, { ...e });
453
+ he.displayName = "DialogPortal";
454
+ const Ne = ({ className: e, ...a }) => /* @__PURE__ */ t(
455
+ s.Backdrop,
420
456
  {
421
457
  className: r(
422
458
  "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
@@ -427,8 +463,8 @@ const fe = ({ className: e, ...a }) => /* @__PURE__ */ t(
427
463
  ...a
428
464
  }
429
465
  );
430
- fe.displayName = "DialogBackdrop";
431
- const be = n(
466
+ Ne.displayName = "DialogBackdrop";
467
+ const xe = n(
432
468
  [
433
469
  "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
434
470
  "w-full max-w-[calc(100vw-2rem)] rounded-lg border border-border bg-background p-6 shadow-lg",
@@ -452,35 +488,35 @@ const be = n(
452
488
  size: "default"
453
489
  }
454
490
  }
455
- ), ye = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
456
- l.Popup,
491
+ ), ve = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
492
+ s.Popup,
457
493
  {
458
- className: r(be({ size: a }), e),
494
+ className: r(xe({ size: a }), e),
459
495
  ...o
460
496
  }
461
497
  );
462
- ye.displayName = "DialogPopup";
463
- const Ne = ({ className: e, ...a }) => /* @__PURE__ */ t(
464
- l.Title,
498
+ ve.displayName = "DialogPopup";
499
+ const we = ({ className: e, ...a }) => /* @__PURE__ */ t(
500
+ s.Title,
465
501
  {
466
502
  className: r("text-lg font-semibold leading-none tracking-tight", e),
467
503
  ...a
468
504
  }
469
505
  );
470
- Ne.displayName = "DialogTitle";
471
- const xe = ({ className: e, ...a }) => /* @__PURE__ */ t(l.Description, { className: r("mt-2", e), ...a });
472
- xe.displayName = "DialogDescription";
473
- const he = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
474
- l.Close,
506
+ we.displayName = "DialogTitle";
507
+ const De = ({ className: e, ...a }) => /* @__PURE__ */ t(s.Description, { className: r("mt-2", e), ...a });
508
+ De.displayName = "DialogDescription";
509
+ const ke = ({ className: e, variant: a, size: o, ...l }) => /* @__PURE__ */ t(
510
+ s.Close,
475
511
  {
476
512
  className: r(u({ variant: a ?? "outline", size: o }), e),
477
- ...s
513
+ ...l
478
514
  }
479
515
  );
480
- he.displayName = "DialogClose";
481
- const ve = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1 mb-5", e), ...a });
482
- ve.displayName = "DialogHeader";
483
- const we = ({ className: e, ...a }) => /* @__PURE__ */ t(
516
+ ke.displayName = "DialogClose";
517
+ const Ae = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1 mb-5", e), ...a });
518
+ Ae.displayName = "DialogHeader";
519
+ const Te = ({ className: e, ...a }) => /* @__PURE__ */ t(
484
520
  "div",
485
521
  {
486
522
  className: r(
@@ -490,21 +526,21 @@ const we = ({ className: e, ...a }) => /* @__PURE__ */ t(
490
526
  ...a
491
527
  }
492
528
  );
493
- we.displayName = "DialogFooter";
494
- const De = (e) => /* @__PURE__ */ t(l.Root, { ...e });
495
- De.displayName = "DrawerRoot";
496
- const ke = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
497
- l.Trigger,
529
+ Te.displayName = "DialogFooter";
530
+ const ze = (e) => /* @__PURE__ */ t(s.Root, { ...e });
531
+ ze.displayName = "DrawerRoot";
532
+ const Pe = ({ className: e, variant: a, size: o, ...l }) => /* @__PURE__ */ t(
533
+ s.Trigger,
498
534
  {
499
535
  className: r(u({ variant: a, size: o }), e),
500
- ...s
536
+ ...l
501
537
  }
502
538
  );
503
- ke.displayName = "DrawerTrigger";
504
- const Ae = (e) => /* @__PURE__ */ t(l.Portal, { ...e });
505
- Ae.displayName = "DrawerPortal";
506
- const Te = ({ className: e, ...a }) => /* @__PURE__ */ t(
507
- l.Backdrop,
539
+ Pe.displayName = "DrawerTrigger";
540
+ const Re = (e) => /* @__PURE__ */ t(s.Portal, { ...e });
541
+ Re.displayName = "DrawerPortal";
542
+ const Ve = ({ className: e, ...a }) => /* @__PURE__ */ t(
543
+ s.Backdrop,
508
544
  {
509
545
  className: r(
510
546
  "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
@@ -515,8 +551,8 @@ const Te = ({ className: e, ...a }) => /* @__PURE__ */ t(
515
551
  ...a
516
552
  }
517
553
  );
518
- Te.displayName = "DrawerBackdrop";
519
- const ze = n(
554
+ Ve.displayName = "DrawerBackdrop";
555
+ const Ce = n(
520
556
  [
521
557
  "fixed z-50 flex flex-col bg-background p-6 shadow-lg",
522
558
  "transition-transform duration-300 ease-out",
@@ -552,51 +588,51 @@ const ze = n(
552
588
  side: "right"
553
589
  }
554
590
  }
555
- ), Pe = ({ className: e, side: a, ...o }) => /* @__PURE__ */ t(
556
- l.Popup,
591
+ ), Se = ({ className: e, side: a, ...o }) => /* @__PURE__ */ t(
592
+ s.Popup,
557
593
  {
558
- className: r(ze({ side: a }), e),
594
+ className: r(Ce({ side: a }), e),
559
595
  ...o
560
596
  }
561
597
  );
562
- Pe.displayName = "DrawerPopup";
563
- const Re = ({ className: e, ...a }) => /* @__PURE__ */ t(
564
- l.Title,
598
+ Se.displayName = "DrawerPopup";
599
+ const _e = ({ className: e, ...a }) => /* @__PURE__ */ t(
600
+ s.Title,
565
601
  {
566
602
  className: r("text-lg font-semibold leading-none tracking-tight", e),
567
603
  ...a
568
604
  }
569
605
  );
570
- Re.displayName = "DrawerTitle";
571
- const Ve = ({ className: e, ...a }) => /* @__PURE__ */ t(l.Description, { className: r("", e), ...a });
572
- Ve.displayName = "DrawerDescription";
573
- const Se = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
574
- l.Close,
606
+ _e.displayName = "DrawerTitle";
607
+ const Ie = ({ className: e, ...a }) => /* @__PURE__ */ t(s.Description, { className: r("", e), ...a });
608
+ Ie.displayName = "DrawerDescription";
609
+ const Fe = ({ className: e, variant: a, size: o, ...l }) => /* @__PURE__ */ t(
610
+ s.Close,
575
611
  {
576
612
  className: r(u({ variant: a ?? "outline", size: o }), e),
577
- ...s
578
- }
579
- );
580
- Se.displayName = "DrawerClose";
581
- const Ce = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1.5", e), ...a });
582
- Ce.displayName = "DrawerHeader";
583
- const _e = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("py-5", e), ...a });
584
- _e.displayName = "DrawerContent";
585
- const Ie = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("", e), ...a });
586
- Ie.displayName = "DrawerFooter";
587
- const Fe = ({ className: e, ...a }) => /* @__PURE__ */ t(b.Root, { className: r("w-full", e), ...a });
588
- Fe.displayName = "AccordionRoot";
589
- const Be = ({ className: e, ...a }) => /* @__PURE__ */ t(
613
+ ...l
614
+ }
615
+ );
616
+ Fe.displayName = "DrawerClose";
617
+ const je = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1.5", e), ...a });
618
+ je.displayName = "DrawerHeader";
619
+ const Be = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("py-5", e), ...a });
620
+ Be.displayName = "DrawerContent";
621
+ const Me = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("", e), ...a });
622
+ Me.displayName = "DrawerFooter";
623
+ const Le = ({ className: e, ...a }) => /* @__PURE__ */ t(b.Root, { className: r("w-full", e), ...a });
624
+ Le.displayName = "AccordionRoot";
625
+ const He = ({ className: e, ...a }) => /* @__PURE__ */ t(
590
626
  b.Item,
591
627
  {
592
628
  className: r("border-b border-border last:border-b-0", e),
593
629
  ...a
594
630
  }
595
631
  );
596
- Be.displayName = "AccordionItem";
597
- const Me = ({ className: e, ...a }) => /* @__PURE__ */ t(b.Header, { className: r("flex", e), ...a });
598
- Me.displayName = "AccordionHeader";
599
- const je = ({ className: e, children: a, ...o }) => /* @__PURE__ */ t(
632
+ He.displayName = "AccordionItem";
633
+ const Ge = ({ className: e, ...a }) => /* @__PURE__ */ t(b.Header, { className: r("flex", e), ...a });
634
+ Ge.displayName = "AccordionHeader";
635
+ const qe = ({ className: e, children: a, ...o }) => /* @__PURE__ */ t(
600
636
  b.Trigger,
601
637
  {
602
638
  className: r(
@@ -607,8 +643,8 @@ const je = ({ className: e, children: a, ...o }) => /* @__PURE__ */ t(
607
643
  children: a
608
644
  }
609
645
  );
610
- je.displayName = "AccordionTrigger";
611
- const Le = ({ className: e, ...a }) => /* @__PURE__ */ t(
646
+ qe.displayName = "AccordionTrigger";
647
+ const Ee = ({ className: e, ...a }) => /* @__PURE__ */ t(
612
648
  b.Panel,
613
649
  {
614
650
  className: r(
@@ -618,24 +654,24 @@ const Le = ({ className: e, ...a }) => /* @__PURE__ */ t(
618
654
  ...a
619
655
  }
620
656
  );
621
- Le.displayName = "AccordionPanel";
622
- const He = ({ className: e, animated: a, value: o, ...s }) => {
623
- const i = o ?? 0, [c, g] = h.useState(a ? 0 : i);
624
- return h.useEffect(() => {
657
+ Ee.displayName = "AccordionPanel";
658
+ const $e = ({ className: e, animated: a, value: o, ...l }) => {
659
+ const i = o ?? 0, [c, g] = x.useState(a ? 0 : i);
660
+ return x.useEffect(() => {
625
661
  if (a) {
626
- const x = requestAnimationFrame(() => {
662
+ const N = requestAnimationFrame(() => {
627
663
  const v = requestAnimationFrame(() => {
628
664
  g(i ?? 0);
629
665
  });
630
666
  return () => cancelAnimationFrame(v);
631
667
  });
632
- return () => cancelAnimationFrame(x);
668
+ return () => cancelAnimationFrame(N);
633
669
  } else
634
670
  g(i ?? 0);
635
- }, [a, i]), /* @__PURE__ */ t(y.Root, { className: r("w-full", e), value: c, ...s });
671
+ }, [a, i]), /* @__PURE__ */ t(y.Root, { className: r("w-full", e), value: c, ...l });
636
672
  };
637
- He.displayName = "MeterRoot";
638
- const Ge = ({ className: e, ...a }) => /* @__PURE__ */ t(
673
+ $e.displayName = "MeterRoot";
674
+ const Je = ({ className: e, ...a }) => /* @__PURE__ */ t(
639
675
  y.Track,
640
676
  {
641
677
  className: r(
@@ -645,8 +681,8 @@ const Ge = ({ className: e, ...a }) => /* @__PURE__ */ t(
645
681
  ...a
646
682
  }
647
683
  );
648
- Ge.displayName = "MeterTrack";
649
- const qe = ({ className: e, ...a }) => /* @__PURE__ */ t(
684
+ Je.displayName = "MeterTrack";
685
+ const Ke = ({ className: e, ...a }) => /* @__PURE__ */ t(
650
686
  y.Indicator,
651
687
  {
652
688
  className: r(
@@ -656,27 +692,27 @@ const qe = ({ className: e, ...a }) => /* @__PURE__ */ t(
656
692
  ...a
657
693
  }
658
694
  );
659
- qe.displayName = "MeterIndicator";
660
- const Ee = ({ className: e, ...a }) => /* @__PURE__ */ t(
695
+ Ke.displayName = "MeterIndicator";
696
+ const Oe = ({ className: e, ...a }) => /* @__PURE__ */ t(
661
697
  y.Value,
662
698
  {
663
699
  className: r("text-sm font-medium text-foreground", e),
664
700
  ...a
665
701
  }
666
702
  );
667
- Ee.displayName = "MeterValue";
668
- const $e = ({ className: e, ...a }) => /* @__PURE__ */ t(
703
+ Oe.displayName = "MeterValue";
704
+ const Qe = ({ className: e, ...a }) => /* @__PURE__ */ t(
669
705
  y.Label,
670
706
  {
671
707
  className: r("text-sm font-medium text-foreground", e),
672
708
  ...a
673
709
  }
674
710
  );
675
- $e.displayName = "MeterLabel";
676
- const Je = ({ className: e, ...a }) => /* @__PURE__ */ t(N.Root, { className: r("w-full", e), ...a });
677
- Je.displayName = "ProgressRoot";
678
- const Ke = ({ className: e, ...a }) => /* @__PURE__ */ t(
679
- N.Track,
711
+ Qe.displayName = "MeterLabel";
712
+ const Ue = ({ className: e, ...a }) => /* @__PURE__ */ t(h.Root, { className: r("w-full", e), ...a });
713
+ Ue.displayName = "ProgressRoot";
714
+ const We = ({ className: e, ...a }) => /* @__PURE__ */ t(
715
+ h.Track,
680
716
  {
681
717
  className: r(
682
718
  "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
@@ -685,9 +721,9 @@ const Ke = ({ className: e, ...a }) => /* @__PURE__ */ t(
685
721
  ...a
686
722
  }
687
723
  );
688
- Ke.displayName = "ProgressTrack";
689
- const Oe = ({ className: e, ...a }) => /* @__PURE__ */ t(
690
- N.Indicator,
724
+ We.displayName = "ProgressTrack";
725
+ const Xe = ({ className: e, ...a }) => /* @__PURE__ */ t(
726
+ h.Indicator,
691
727
  {
692
728
  className: r(
693
729
  "h-full rounded-full bg-primary transition-all duration-1000 ease-out-expo",
@@ -696,102 +732,128 @@ const Oe = ({ className: e, ...a }) => /* @__PURE__ */ t(
696
732
  ...a
697
733
  }
698
734
  );
699
- Oe.displayName = "ProgressIndicator";
700
- const Qe = ({ className: e, ...a }) => /* @__PURE__ */ t(
701
- N.Value,
735
+ Xe.displayName = "ProgressIndicator";
736
+ const Ye = ({ className: e, ...a }) => /* @__PURE__ */ t(
737
+ h.Value,
702
738
  {
703
739
  className: r("text-sm font-medium text-foreground", e),
704
740
  ...a
705
741
  }
706
742
  );
707
- Qe.displayName = "ProgressValue";
708
- const Ue = ({ className: e, ...a }) => /* @__PURE__ */ t(
709
- N.Label,
743
+ Ye.displayName = "ProgressValue";
744
+ const Ze = ({ className: e, ...a }) => /* @__PURE__ */ t(
745
+ h.Label,
710
746
  {
711
747
  className: r("text-sm font-medium text-foreground", e),
712
748
  ...a
713
749
  }
714
750
  );
715
- Ue.displayName = "ProgressLabel";
716
- const We = ({ className: e, ...a }) => /* @__PURE__ */ t(
717
- I,
751
+ Ze.displayName = "ProgressLabel";
752
+ const ea = ({ className: e, orientation: a, ...o }) => /* @__PURE__ */ t(
753
+ F,
718
754
  {
755
+ orientation: a,
719
756
  className: r(
720
- "inline-flex items-center gap-[2px] p-[3px] rounded-md border bg-muted/50",
757
+ "inline-flex",
758
+ a === "vertical" && "flex-col",
759
+ // Connected items: collapse borders, round only outer corners
760
+ "*:rounded-none [&>*:not(:first-child)]:-ml-px",
761
+ "[&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md",
762
+ // Vertical orientation adjustments
763
+ a === "vertical" && "[&>*:not(:first-child)]:ml-0 [&>*:not(:first-child)]:-mt-px [&>*:first-child]:rounded-bl-none [&>*:last-child]:rounded-r-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md",
721
764
  e
722
765
  ),
723
- ...a
766
+ ...o
767
+ }
768
+ );
769
+ ea.displayName = "ToggleGroupRoot";
770
+ const aa = ({
771
+ className: e,
772
+ variant: a,
773
+ size: o,
774
+ ...l
775
+ }) => /* @__PURE__ */ t(
776
+ z,
777
+ {
778
+ className: r(
779
+ V({ variant: a, size: o }),
780
+ // Ghost variant in toggle-group: add borders, no background when pressed
781
+ a === "ghost" && "border border-border",
782
+ e
783
+ ),
784
+ ...l
724
785
  }
725
786
  );
726
- We.displayName = "ToggleGroupRoot";
727
- const Xe = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(T, { className: r(R({ size: a }), e), ...o });
728
- Xe.displayName = "ToggleGroupItem";
787
+ aa.displayName = "ToggleGroupItem";
729
788
  export {
730
- Me as AccordionHeader,
731
- Be as AccordionItem,
732
- Le as AccordionPanel,
733
- Fe as AccordionRoot,
734
- je as AccordionTrigger,
735
- ya as AlertDialog,
736
- L as AlertDialogBackdrop,
737
- J as AlertDialogClose,
738
- $ as AlertDialogDescription,
739
- q as AlertDialogPopup,
740
- j as AlertDialogPortal,
741
- B as AlertDialogRoot,
742
- E as AlertDialogTitle,
743
- M as AlertDialogTrigger,
744
- H as AlertDialogViewport,
745
- O as AvatarFallback,
746
- K as AvatarImage,
747
- P as AvatarRoot,
748
- Q as AvatarStack,
749
- F as Button,
750
- fe as DialogBackdrop,
751
- he as DialogClose,
752
- xe as DialogDescription,
753
- we as DialogFooter,
754
- ve as DialogHeader,
755
- ye as DialogPopup,
756
- pe as DialogPortal,
757
- me as DialogRoot,
758
- Ne as DialogTitle,
759
- ge as DialogTrigger,
760
- Te as DrawerBackdrop,
761
- Se as DrawerClose,
762
- _e as DrawerContent,
763
- Ve as DrawerDescription,
764
- Ie as DrawerFooter,
765
- Ce as DrawerHeader,
766
- Pe as DrawerPopup,
767
- Ae as DrawerPortal,
768
- De as DrawerRoot,
769
- Re as DrawerTitle,
770
- ke as DrawerTrigger,
771
- qe as MeterIndicator,
772
- $e as MeterLabel,
773
- He as MeterRoot,
774
- Ge as MeterTrack,
775
- Ee as MeterValue,
776
- Oe as ProgressIndicator,
777
- Ue as ProgressLabel,
778
- Je as ProgressRoot,
779
- Ke as ProgressTrack,
780
- Qe as ProgressValue,
781
- X as ScrollAreaContent,
782
- ee as ScrollAreaCorner,
783
- U as ScrollAreaRoot,
784
- Y as ScrollAreaScrollbar,
785
- Z as ScrollAreaThumb,
786
- W as ScrollAreaViewport,
787
- ae as SwitchRoot,
788
- te as SwitchThumb,
789
- ce as TabsIndicator,
790
- le as TabsList,
791
- ue as TabsPanel,
792
- oe as TabsRoot,
793
- ne as TabsTab,
794
- re as Toggle,
795
- Xe as ToggleGroupItem,
796
- We as ToggleGroupRoot
789
+ Ge as AccordionHeader,
790
+ He as AccordionItem,
791
+ Ee as AccordionPanel,
792
+ Le as AccordionRoot,
793
+ qe as AccordionTrigger,
794
+ wa as AlertDialog,
795
+ E as AlertDialogBackdrop,
796
+ U as AlertDialogClose,
797
+ Q as AlertDialogDescription,
798
+ K as AlertDialogPopup,
799
+ q as AlertDialogPortal,
800
+ H as AlertDialogRoot,
801
+ O as AlertDialogTitle,
802
+ G as AlertDialogTrigger,
803
+ $ as AlertDialogViewport,
804
+ X as AvatarFallback,
805
+ W as AvatarImage,
806
+ R as AvatarRoot,
807
+ Y as AvatarStack,
808
+ j as Button,
809
+ L as CollapsiblePanel,
810
+ B as CollapsibleRoot,
811
+ M as CollapsibleTrigger,
812
+ Ne as DialogBackdrop,
813
+ ke as DialogClose,
814
+ De as DialogDescription,
815
+ Te as DialogFooter,
816
+ Ae as DialogHeader,
817
+ ve as DialogPopup,
818
+ he as DialogPortal,
819
+ be as DialogRoot,
820
+ we as DialogTitle,
821
+ ye as DialogTrigger,
822
+ Ve as DrawerBackdrop,
823
+ Fe as DrawerClose,
824
+ Be as DrawerContent,
825
+ Ie as DrawerDescription,
826
+ Me as DrawerFooter,
827
+ je as DrawerHeader,
828
+ Se as DrawerPopup,
829
+ Re as DrawerPortal,
830
+ ze as DrawerRoot,
831
+ _e as DrawerTitle,
832
+ Pe as DrawerTrigger,
833
+ Ke as MeterIndicator,
834
+ Qe as MeterLabel,
835
+ $e as MeterRoot,
836
+ Je as MeterTrack,
837
+ Oe as MeterValue,
838
+ Xe as ProgressIndicator,
839
+ Ze as ProgressLabel,
840
+ Ue as ProgressRoot,
841
+ We as ProgressTrack,
842
+ Ye as ProgressValue,
843
+ ae as ScrollAreaContent,
844
+ oe as ScrollAreaCorner,
845
+ Z as ScrollAreaRoot,
846
+ te as ScrollAreaScrollbar,
847
+ re as ScrollAreaThumb,
848
+ ee as ScrollAreaViewport,
849
+ le as SwitchRoot,
850
+ se as SwitchThumb,
851
+ pe as TabsIndicator,
852
+ ce as TabsList,
853
+ fe as TabsPanel,
854
+ ne as TabsRoot,
855
+ me as TabsTab,
856
+ ie as Toggle,
857
+ aa as ToggleGroupItem,
858
+ ea as ToggleGroupRoot
797
859
  };
@@ -1,5 +1,7 @@
1
- export type ToggleSize = 'sm' | 'default' | 'lg';
1
+ export type ToggleSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
2
+ export type ToggleVariant = 'default' | 'ghost';
2
3
  export declare const toggleVariants: (props?: ({
3
- size?: "default" | "sm" | "lg" | null | undefined;
4
+ variant?: "default" | "ghost" | null | undefined;
5
+ size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
4
6
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
5
7
  //# sourceMappingURL=toggle-variants.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"toggle-variants.d.ts","sourceRoot":"","sources":["../../src/lib/toggle-variants.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;AAEhD,eAAO,MAAM,cAAc;;8EAoB1B,CAAA"}
1
+ {"version":3,"file":"toggle-variants.d.ts","sourceRoot":"","sources":["../../src/lib/toggle-variants.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AACjF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAA;AAE/C,eAAO,MAAM,cAAc;;;8EA+B1B,CAAA"}
@@ -78,7 +78,7 @@
78
78
 
79
79
  @layer base {
80
80
  * {
81
- @apply focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-disabled:pointer-events-none data-disabled:opacity-70;
81
+ @apply focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:z-1 data-disabled:pointer-events-none data-disabled:opacity-70;
82
82
  }
83
83
  }
84
84
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lglab/compose-ui",
3
- "version": "0.10.0",
3
+ "version": "0.12.0",
4
4
  "description": "A collection of components built with Base UI & Tailwind CSS",
5
5
  "author": "LGLab",
6
6
  "license": "MIT",