@lglab/compose-ui 0.9.1 → 0.10.0

package/dist/components/toggle-group.d.ts

@@ -0,0 +1,20 @@
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { ToggleSize } from '../lib/toggle-variants';
+import * as React from 'react';
+type ToggleGroupRootProps = React.ComponentProps<typeof BaseToggleGroup>;
+declare const ToggleGroupRoot: {
+    ({ className, ...props }: ToggleGroupRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type ToggleGroupItemProps = React.ComponentProps<typeof Toggle> & {
+    /** Size of the toggle item */
+    size?: ToggleSize;
+};
+declare const ToggleGroupItem: {
+    ({ className, size, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ToggleGroupRoot, ToggleGroupItem };
+export type { ToggleGroupRootProps, ToggleGroupItemProps };
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/toggle-group.d.ts.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerBackdrop, DrawerPopup, D
 export { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel, } from './components/accordion';
 export { MeterRoot, MeterTrack, MeterIndicator, MeterValue, MeterLabel, } from './components/meter';
 export { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValue, ProgressLabel, } from './components/progress';
+export { ToggleGroupRoot, ToggleGroupItem } from './components/toggle-group';
 export type { ButtonProps } from './components/button';
 export type { AlertDialogRootProps, AlertDialogTriggerProps, AlertDialogPortalProps, AlertDialogBackdropProps, AlertDialogViewportProps, AlertDialogPopupProps, AlertDialogTitleProps, AlertDialogDescriptionProps, AlertDialogCloseProps, } from './components/alert-dialog';
 export type { AvatarRootProps, AvatarImageProps, AvatarFallbackProps, AvatarStackProps, } from './components/avatar';
@@ -24,4 +25,5 @@ export type { DrawerRootProps, DrawerTriggerProps, DrawerPortalProps, DrawerBack
 export type { AccordionRootProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionPanelProps, } from './components/accordion';
 export type { MeterRootProps, MeterTrackProps, MeterIndicatorProps, MeterValueProps, MeterLabelProps, } from './components/meter';
 export type { ProgressRootProps, ProgressTrackProps, ProgressIndicatorProps, ProgressValueProps, ProgressLabelProps, } from './components/progress';
+export type { ToggleGroupRootProps, ToggleGroupItemProps, } from './components/toggle-group';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.es.js

@@ -1,21 +1,22 @@
 "use client";
 import { jsx as t, jsxs as k } from "react/jsx-runtime";
-import { Button as V } from "@base-ui/react/button";
+import { Button as S } from "@base-ui/react/button";
 import { cva as n } from "class-variance-authority";
-import { clsx as R } from "clsx";
-import { twMerge as S } from "tailwind-merge";
+import { clsx as C } from "clsx";
+import { twMerge as _ } from "tailwind-merge";
 import { AlertDialog as d } from "@base-ui/react/alert-dialog";
-import { AlertDialog as ga } from "@base-ui/react/alert-dialog";
+import { AlertDialog as ya } from "@base-ui/react/alert-dialog";
 import { Avatar as w } from "@base-ui/react/avatar";
-import * as N from "react";
+import * as h from "react";
 import { ScrollArea as m } from "@base-ui/react/scroll-area";
 import { Switch as A } from "@base-ui/react/switch";
-import { Toggle as C } from "@base-ui/react/toggle";
+import { Toggle as T } from "@base-ui/react/toggle";
 import { Tabs as f } from "@base-ui/react/tabs";
 import { Dialog as l } from "@base-ui/react/dialog";
 import { Accordion as b } from "@base-ui/react/accordion";
 import { Meter as y } from "@base-ui/react/meter";
-import { Progress as h } from "@base-ui/react/progress";
+import { Progress as N } from "@base-ui/react/progress";
+import { ToggleGroup as I } from "@base-ui/react/toggle-group";
 const u = n(
   [
     "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"
@@ -46,9 +47,9 @@ const u = n(
   }
 );
 function r(...e) {
-  return S(R(e));
+  return _(C(e));
 }
-const _ = ({
+const F = ({
   className: e,
   variant: a,
   size: o,
@@ -56,7 +57,7 @@ const _ = ({
   children: i,
   ...c
 }) => /* @__PURE__ */ t(
-  V,
+  S,
   {
     className: r(u({ variant: a, size: o }), e),
     disabled: s,
@@ -64,10 +65,10 @@ const _ = ({
     children: i
   }
 );
-_.displayName = "Button";
-const I = (e) => /* @__PURE__ */ t(d.Root, { ...e });
-I.displayName = "AlertDialogRoot";
-const F = ({
+F.displayName = "Button";
+const B = (e) => /* @__PURE__ */ t(d.Root, { ...e });
+B.displayName = "AlertDialogRoot";
+const M = ({
   className: e,
   variant: a,
   size: o,
@@ -79,10 +80,10 @@ const F = ({
     ...s
   }
 );
-F.displayName = "AlertDialogTrigger";
-const B = (e) => /* @__PURE__ */ t(d.Portal, { ...e });
-B.displayName = "AlertDialogPortal";
-const M = ({ className: e, ...a }) => /* @__PURE__ */ t(
+M.displayName = "AlertDialogTrigger";
+const j = (e) => /* @__PURE__ */ t(d.Portal, { ...e });
+j.displayName = "AlertDialogPortal";
+const L = ({ className: e, ...a }) => /* @__PURE__ */ t(
   d.Backdrop,
   {
     className: r(
@@ -94,16 +95,16 @@ const M = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-M.displayName = "AlertDialogBackdrop";
-const j = ({ className: e, ...a }) => /* @__PURE__ */ t(
+L.displayName = "AlertDialogBackdrop";
+const H = ({ className: e, ...a }) => /* @__PURE__ */ t(
   d.Viewport,
   {
     className: r("fixed inset-0 z-50 flex items-center justify-center p-4", e),
     ...a
   }
 );
-j.displayName = "AlertDialogViewport";
-const L = n(
+H.displayName = "AlertDialogViewport";
+const G = n(
   [
     "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
     "w-full max-w-[calc(100vw-2rem)] rounded-lg border border-border bg-background p-6 shadow-lg",
@@ -127,25 +128,25 @@ const L = n(
       size: "default"
     }
   }
-), H = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
+), q = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
   d.Popup,
   {
-    className: r(L({ size: a }), e),
+    className: r(G({ size: a }), e),
     ...o
   }
 );
-H.displayName = "AlertDialogPopup";
-const q = ({ className: e, ...a }) => /* @__PURE__ */ t(
+q.displayName = "AlertDialogPopup";
+const E = ({ className: e, ...a }) => /* @__PURE__ */ t(
   d.Title,
   {
     className: r("text-lg font-semibold leading-none tracking-tight", e),
     ...a
   }
 );
-q.displayName = "AlertDialogTitle";
-const E = ({ className: e, ...a }) => /* @__PURE__ */ t(d.Description, { className: r("mt-2", e), ...a });
-E.displayName = "AlertDialogDescription";
-const $ = ({
+E.displayName = "AlertDialogTitle";
+const $ = ({ className: e, ...a }) => /* @__PURE__ */ t(d.Description, { className: r("mt-2", e), ...a });
+$.displayName = "AlertDialogDescription";
+const J = ({
   className: e,
   variant: a,
   size: o,
@@ -157,8 +158,8 @@ const $ = ({
     ...s
   }
 );
-$.displayName = "AlertDialogClose";
-const T = n(
+J.displayName = "AlertDialogClose";
+const z = n(
   [
     "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
     "bg-muted text-foreground",
@@ -176,17 +177,17 @@ const T = n(
       size: "default"
     }
   }
-), z = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(w.Root, { className: r(T({ size: a }), e), ...o });
-z.displayName = "AvatarRoot";
-const G = ({ className: e, ...a }) => /* @__PURE__ */ t(
+), P = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(w.Root, { className: r(z({ size: a }), e), ...o });
+P.displayName = "AvatarRoot";
+const K = ({ className: e, ...a }) => /* @__PURE__ */ t(
   w.Image,
   {
     className: r("aspect-square h-full w-full object-cover", e),
     ...a
   }
 );
-G.displayName = "AvatarImage";
-const J = ({ className: e, ...a }) => /* @__PURE__ */ t(
+K.displayName = "AvatarImage";
+const O = ({ className: e, ...a }) => /* @__PURE__ */ t(
   w.Fallback,
   {
     className: r(
@@ -196,16 +197,16 @@ const J = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-J.displayName = "AvatarFallback";
-const K = ({
+O.displayName = "AvatarFallback";
+const Q = ({
   "aria-label": e,
   maxVisible: a,
   className: o,
   children: s
 }) => {
-  const i = N.Children.toArray(s), c = i.length, g = a !== void 0 ? Math.min(a, c) : c, x = c - g, v = i.slice(0, g), P = (() => {
+  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 = (() => {
     const p = i[0];
-    return N.isValidElement(p) && p.type === z ? p.props.size ?? "default" : "default";
+    return h.isValidElement(p) && p.type === P ? p.props.size ?? "default" : "default";
   })();
   return /* @__PURE__ */ k("ul", { "aria-label": e, className: r("flex -space-x-2", o), children: [
     v.map((p, D) => /* @__PURE__ */ t("li", { children: p }, D)),
@@ -216,7 +217,7 @@ const K = ({
           "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
           "bg-muted text-foreground border-2 border-background",
           "font-medium",
-          T({ size: P })
+          z({ size: V })
         ),
         children: [
           "+",
@@ -226,20 +227,20 @@ const K = ({
     ) })
   ] });
 };
-K.displayName = "AvatarStack";
-const O = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Root, { className: r("relative", e), ...a });
-O.displayName = "ScrollAreaRoot";
-const Q = ({ className: e, ...a }) => /* @__PURE__ */ t(
+Q.displayName = "AvatarStack";
+const U = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Root, { className: r("relative", e), ...a });
+U.displayName = "ScrollAreaRoot";
+const W = ({ className: e, ...a }) => /* @__PURE__ */ t(
   m.Viewport,
   {
     className: r("h-full overscroll-contain pr-3", e),
     ...a
   }
 );
-Q.displayName = "ScrollAreaViewport";
-const U = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Content, { className: r("min-w-full", e), ...a });
-U.displayName = "ScrollAreaContent";
-const W = ({
+W.displayName = "ScrollAreaViewport";
+const X = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Content, { className: r("min-w-full", e), ...a });
+X.displayName = "ScrollAreaContent";
+const Y = ({
   className: e,
   orientation: a = "vertical",
   ...o
@@ -257,8 +258,8 @@ const W = ({
     ...o
   }
 );
-W.displayName = "ScrollAreaScrollbar";
-const X = ({ className: e, ...a }) => /* @__PURE__ */ t(
+Y.displayName = "ScrollAreaScrollbar";
+const Z = ({ className: e, ...a }) => /* @__PURE__ */ t(
   m.Thumb,
   {
     className: r(
@@ -269,10 +270,10 @@ const X = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-X.displayName = "ScrollAreaThumb";
-const Y = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Corner, { className: r("bg-muted/50", e), ...a });
-Y.displayName = "ScrollAreaCorner";
-const Z = ({ className: e, ...a }) => /* @__PURE__ */ t(
+Z.displayName = "ScrollAreaThumb";
+const ee = ({ className: e, ...a }) => /* @__PURE__ */ t(m.Corner, { className: r("bg-muted/50", e), ...a });
+ee.displayName = "ScrollAreaCorner";
+const ae = ({ className: e, ...a }) => /* @__PURE__ */ t(
   A.Root,
   {
     className: r(
@@ -290,8 +291,8 @@ const Z = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-Z.displayName = "SwitchRoot";
-const ee = ({ className: e, ...a }) => /* @__PURE__ */ t(
+ae.displayName = "SwitchRoot";
+const te = ({ className: e, ...a }) => /* @__PURE__ */ t(
   A.Thumb,
   {
     className: r(
@@ -306,8 +307,8 @@ const ee = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-ee.displayName = "SwitchThumb";
-const ae = n(
+te.displayName = "SwitchThumb";
+const R = n(
   [
     "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium",
     "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
@@ -327,11 +328,11 @@ const ae = n(
       size: "default"
     }
   }
-), te = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(C, { className: r(ae({ size: a }), e), ...o });
-te.displayName = "Toggle";
-const re = ({ className: e, ...a }) => /* @__PURE__ */ t(f.Root, { className: r("flex flex-col", e), ...a });
-re.displayName = "TabsRoot";
-const oe = n(
+), re = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(T, { className: r(R({ size: a }), e), ...o });
+re.displayName = "Toggle";
+const oe = ({ className: e, ...a }) => /* @__PURE__ */ t(f.Root, { className: r("flex flex-col", e), ...a });
+oe.displayName = "TabsRoot";
+const se = n(
   ["relative inline-flex w-fit items-center gap-1", "rounded-lg bg-muted p-1"],
   {
     variants: {
@@ -344,15 +345,15 @@ const oe = n(
       orientation: "horizontal"
     }
   }
-), se = ({ className: e, orientation: a = "horizontal", ...o }) => /* @__PURE__ */ t(
+), le = ({ className: e, orientation: a = "horizontal", ...o }) => /* @__PURE__ */ t(
   f.List,
   {
-    className: r(oe({ orientation: a }), e),
+    className: r(se({ orientation: a }), e),
     ...o
   }
 );
-se.displayName = "TabsList";
-const le = n(
+le.displayName = "TabsList";
+const ie = n(
   [
     "relative z-10 inline-flex items-center justify-center whitespace-nowrap",
     "rounded-md px-3 py-1.5 text-sm font-medium",
@@ -373,9 +374,9 @@ const le = n(
       size: "default"
     }
   }
-), ie = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(f.Tab, { className: r(le({ size: a }), e), ...o });
-ie.displayName = "TabsTab";
-const ne = n(
+), ne = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(f.Tab, { className: r(ie({ size: a }), e), ...o });
+ne.displayName = "TabsTab";
+const de = n(
   ["absolute rounded-md bg-background shadow-sm", "transition-all duration-200 ease-out"],
   {
     variants: {
@@ -388,33 +389,33 @@ const ne = n(
       orientation: "horizontal"
     }
   }
-), de = ({
+), ce = ({
   className: e,
   orientation: a = "horizontal",
   ...o
 }) => /* @__PURE__ */ t(
   f.Indicator,
   {
-    className: r(ne({ orientation: a }), e),
+    className: r(de({ orientation: a }), e),
     ...o
   }
 );
-de.displayName = "TabsIndicator";
-const ce = ({ className: e, ...a }) => /* @__PURE__ */ t(f.Panel, { className: r("mt-2 ring-offset-background", e), ...a });
-ce.displayName = "TabsPanel";
-const ue = (e) => /* @__PURE__ */ t(l.Root, { ...e });
-ue.displayName = "DialogRoot";
-const me = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
+ce.displayName = "TabsIndicator";
+const ue = ({ className: e, ...a }) => /* @__PURE__ */ t(f.Panel, { className: r("mt-2 ring-offset-background", e), ...a });
+ue.displayName = "TabsPanel";
+const me = (e) => /* @__PURE__ */ t(l.Root, { ...e });
+me.displayName = "DialogRoot";
+const ge = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
   l.Trigger,
   {
     className: r(u({ variant: a, size: o }), e),
     ...s
   }
 );
-me.displayName = "DialogTrigger";
-const ge = (e) => /* @__PURE__ */ t(l.Portal, { ...e });
-ge.displayName = "DialogPortal";
-const pe = ({ className: e, ...a }) => /* @__PURE__ */ t(
+ge.displayName = "DialogTrigger";
+const pe = (e) => /* @__PURE__ */ t(l.Portal, { ...e });
+pe.displayName = "DialogPortal";
+const fe = ({ className: e, ...a }) => /* @__PURE__ */ t(
   l.Backdrop,
   {
     className: r(
@@ -426,8 +427,8 @@ const pe = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-pe.displayName = "DialogBackdrop";
-const fe = n(
+fe.displayName = "DialogBackdrop";
+const be = n(
   [
     "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
     "w-full max-w-[calc(100vw-2rem)] rounded-lg border border-border bg-background p-6 shadow-lg",
@@ -451,35 +452,35 @@ const fe = n(
       size: "default"
     }
   }
-), be = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
+), ye = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
   l.Popup,
   {
-    className: r(fe({ size: a }), e),
+    className: r(be({ size: a }), e),
     ...o
   }
 );
-be.displayName = "DialogPopup";
-const ye = ({ className: e, ...a }) => /* @__PURE__ */ t(
+ye.displayName = "DialogPopup";
+const Ne = ({ className: e, ...a }) => /* @__PURE__ */ t(
   l.Title,
   {
     className: r("text-lg font-semibold leading-none tracking-tight", e),
     ...a
   }
 );
-ye.displayName = "DialogTitle";
-const he = ({ className: e, ...a }) => /* @__PURE__ */ t(l.Description, { className: r("mt-2", e), ...a });
-he.displayName = "DialogDescription";
-const xe = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
+Ne.displayName = "DialogTitle";
+const xe = ({ className: e, ...a }) => /* @__PURE__ */ t(l.Description, { className: r("mt-2", e), ...a });
+xe.displayName = "DialogDescription";
+const he = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
   l.Close,
   {
     className: r(u({ variant: a ?? "outline", size: o }), e),
     ...s
   }
 );
-xe.displayName = "DialogClose";
-const Ne = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1 mb-5", e), ...a });
-Ne.displayName = "DialogHeader";
-const ve = ({ className: e, ...a }) => /* @__PURE__ */ t(
+he.displayName = "DialogClose";
+const ve = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1 mb-5", e), ...a });
+ve.displayName = "DialogHeader";
+const we = ({ className: e, ...a }) => /* @__PURE__ */ t(
   "div",
   {
     className: r(
@@ -489,20 +490,20 @@ const ve = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-ve.displayName = "DialogFooter";
-const we = (e) => /* @__PURE__ */ t(l.Root, { ...e });
-we.displayName = "DrawerRoot";
-const De = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
+we.displayName = "DialogFooter";
+const De = (e) => /* @__PURE__ */ t(l.Root, { ...e });
+De.displayName = "DrawerRoot";
+const ke = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
   l.Trigger,
   {
     className: r(u({ variant: a, size: o }), e),
     ...s
   }
 );
-De.displayName = "DrawerTrigger";
-const ke = (e) => /* @__PURE__ */ t(l.Portal, { ...e });
-ke.displayName = "DrawerPortal";
-const Ae = ({ className: e, ...a }) => /* @__PURE__ */ t(
+ke.displayName = "DrawerTrigger";
+const Ae = (e) => /* @__PURE__ */ t(l.Portal, { ...e });
+Ae.displayName = "DrawerPortal";
+const Te = ({ className: e, ...a }) => /* @__PURE__ */ t(
   l.Backdrop,
   {
     className: r(
@@ -514,8 +515,8 @@ const Ae = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-Ae.displayName = "DrawerBackdrop";
-const Te = n(
+Te.displayName = "DrawerBackdrop";
+const ze = n(
   [
     "fixed z-50 flex flex-col bg-background p-6 shadow-lg",
     "transition-transform duration-300 ease-out",
@@ -551,51 +552,51 @@ const Te = n(
       side: "right"
     }
   }
-), ze = ({ className: e, side: a, ...o }) => /* @__PURE__ */ t(
+), Pe = ({ className: e, side: a, ...o }) => /* @__PURE__ */ t(
   l.Popup,
   {
-    className: r(Te({ side: a }), e),
+    className: r(ze({ side: a }), e),
     ...o
   }
 );
-ze.displayName = "DrawerPopup";
-const Pe = ({ className: e, ...a }) => /* @__PURE__ */ t(
+Pe.displayName = "DrawerPopup";
+const Re = ({ className: e, ...a }) => /* @__PURE__ */ t(
   l.Title,
   {
     className: r("text-lg font-semibold leading-none tracking-tight", e),
     ...a
   }
 );
-Pe.displayName = "DrawerTitle";
+Re.displayName = "DrawerTitle";
 const Ve = ({ className: e, ...a }) => /* @__PURE__ */ t(l.Description, { className: r("", e), ...a });
 Ve.displayName = "DrawerDescription";
-const Re = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
+const Se = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
   l.Close,
   {
     className: r(u({ variant: a ?? "outline", size: o }), e),
     ...s
   }
 );
-Re.displayName = "DrawerClose";
-const Se = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1.5", e), ...a });
-Se.displayName = "DrawerHeader";
-const Ce = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("py-5", e), ...a });
-Ce.displayName = "DrawerContent";
-const _e = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("", e), ...a });
-_e.displayName = "DrawerFooter";
-const Ie = ({ className: e, ...a }) => /* @__PURE__ */ t(b.Root, { className: r("w-full", e), ...a });
-Ie.displayName = "AccordionRoot";
-const Fe = ({ className: e, ...a }) => /* @__PURE__ */ t(
+Se.displayName = "DrawerClose";
+const Ce = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1.5", e), ...a });
+Ce.displayName = "DrawerHeader";
+const _e = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("py-5", e), ...a });
+_e.displayName = "DrawerContent";
+const Ie = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("", e), ...a });
+Ie.displayName = "DrawerFooter";
+const Fe = ({ className: e, ...a }) => /* @__PURE__ */ t(b.Root, { className: r("w-full", e), ...a });
+Fe.displayName = "AccordionRoot";
+const Be = ({ className: e, ...a }) => /* @__PURE__ */ t(
   b.Item,
   {
     className: r("border-b border-border last:border-b-0", e),
     ...a
   }
 );
-Fe.displayName = "AccordionItem";
-const Be = ({ className: e, ...a }) => /* @__PURE__ */ t(b.Header, { className: r("flex", e), ...a });
-Be.displayName = "AccordionHeader";
-const Me = ({ className: e, children: a, ...o }) => /* @__PURE__ */ t(
+Be.displayName = "AccordionItem";
+const Me = ({ className: e, ...a }) => /* @__PURE__ */ t(b.Header, { className: r("flex", e), ...a });
+Me.displayName = "AccordionHeader";
+const je = ({ className: e, children: a, ...o }) => /* @__PURE__ */ t(
   b.Trigger,
   {
     className: r(
@@ -606,8 +607,8 @@ const Me = ({ className: e, children: a, ...o }) => /* @__PURE__ */ t(
     children: a
   }
 );
-Me.displayName = "AccordionTrigger";
-const je = ({ className: e, ...a }) => /* @__PURE__ */ t(
+je.displayName = "AccordionTrigger";
+const Le = ({ className: e, ...a }) => /* @__PURE__ */ t(
   b.Panel,
   {
     className: r(
@@ -617,10 +618,10 @@ const je = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-je.displayName = "AccordionPanel";
-const Le = ({ className: e, animated: a, value: o, ...s }) => {
-  const i = o ?? 0, [c, g] = N.useState(a ? 0 : i);
-  return N.useEffect(() => {
+Le.displayName = "AccordionPanel";
+const He = ({ className: e, animated: a, value: o, ...s }) => {
+  const i = o ?? 0, [c, g] = h.useState(a ? 0 : i);
+  return h.useEffect(() => {
     if (a) {
       const x = requestAnimationFrame(() => {
         const v = requestAnimationFrame(() => {
@@ -633,8 +634,8 @@ const Le = ({ className: e, animated: a, value: o, ...s }) => {
       g(i ?? 0);
   }, [a, i]), /* @__PURE__ */ t(y.Root, { className: r("w-full", e), value: c, ...s });
 };
-Le.displayName = "MeterRoot";
-const He = ({ className: e, ...a }) => /* @__PURE__ */ t(
+He.displayName = "MeterRoot";
+const Ge = ({ className: e, ...a }) => /* @__PURE__ */ t(
   y.Track,
   {
     className: r(
@@ -644,7 +645,7 @@ const He = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-He.displayName = "MeterTrack";
+Ge.displayName = "MeterTrack";
 const qe = ({ className: e, ...a }) => /* @__PURE__ */ t(
   y.Indicator,
   {
@@ -672,10 +673,10 @@ const $e = ({ className: e, ...a }) => /* @__PURE__ */ t(
   }
 );
 $e.displayName = "MeterLabel";
-const Ge = ({ className: e, ...a }) => /* @__PURE__ */ t(h.Root, { className: r("w-full", e), ...a });
-Ge.displayName = "ProgressRoot";
-const Je = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  h.Track,
+const Je = ({ className: e, ...a }) => /* @__PURE__ */ t(N.Root, { className: r("w-full", e), ...a });
+Je.displayName = "ProgressRoot";
+const Ke = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  N.Track,
   {
     className: r(
       "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
@@ -684,9 +685,9 @@ const Je = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-Je.displayName = "ProgressTrack";
-const Ke = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  h.Indicator,
+Ke.displayName = "ProgressTrack";
+const Oe = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  N.Indicator,
   {
     className: r(
       "h-full rounded-full bg-primary transition-all duration-1000 ease-out-expo",
@@ -695,87 +696,102 @@ const Ke = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-Ke.displayName = "ProgressIndicator";
-const Oe = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  h.Value,
+Oe.displayName = "ProgressIndicator";
+const Qe = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  N.Value,
   {
     className: r("text-sm font-medium text-foreground", e),
     ...a
   }
 );
-Oe.displayName = "ProgressValue";
-const Qe = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  h.Label,
+Qe.displayName = "ProgressValue";
+const Ue = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  N.Label,
   {
     className: r("text-sm font-medium text-foreground", e),
     ...a
   }
 );
-Qe.displayName = "ProgressLabel";
+Ue.displayName = "ProgressLabel";
+const We = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  I,
+  {
+    className: r(
+      "inline-flex items-center gap-[2px] p-[3px] rounded-md border bg-muted/50",
+      e
+    ),
+    ...a
+  }
+);
+We.displayName = "ToggleGroupRoot";
+const Xe = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(T, { className: r(R({ size: a }), e), ...o });
+Xe.displayName = "ToggleGroupItem";
 export {
-  Be as AccordionHeader,
-  Fe as AccordionItem,
-  je as AccordionPanel,
-  Ie as AccordionRoot,
-  Me as AccordionTrigger,
-  ga as AlertDialog,
-  M as AlertDialogBackdrop,
-  $ as AlertDialogClose,
-  E as AlertDialogDescription,
-  H as AlertDialogPopup,
-  B as AlertDialogPortal,
-  I as AlertDialogRoot,
-  q as AlertDialogTitle,
-  F as AlertDialogTrigger,
-  j as AlertDialogViewport,
-  J as AvatarFallback,
-  G as AvatarImage,
-  z as AvatarRoot,
-  K as AvatarStack,
-  _ as Button,
-  pe as DialogBackdrop,
-  xe as DialogClose,
-  he as DialogDescription,
-  ve as DialogFooter,
-  Ne as DialogHeader,
-  be as DialogPopup,
-  ge as DialogPortal,
-  ue as DialogRoot,
-  ye as DialogTitle,
-  me as DialogTrigger,
-  Ae as DrawerBackdrop,
-  Re as DrawerClose,
-  Ce as DrawerContent,
+  Me as AccordionHeader,
+  Be as AccordionItem,
+  Le as AccordionPanel,
+  Fe as AccordionRoot,
+  je as AccordionTrigger,
+  ya as AlertDialog,
+  L as AlertDialogBackdrop,
+  J as AlertDialogClose,
+  $ as AlertDialogDescription,
+  q as AlertDialogPopup,
+  j as AlertDialogPortal,
+  B as AlertDialogRoot,
+  E as AlertDialogTitle,
+  M as AlertDialogTrigger,
+  H as AlertDialogViewport,
+  O as AvatarFallback,
+  K as AvatarImage,
+  P as AvatarRoot,
+  Q as AvatarStack,
+  F as Button,
+  fe as DialogBackdrop,
+  he as DialogClose,
+  xe as DialogDescription,
+  we as DialogFooter,
+  ve as DialogHeader,
+  ye as DialogPopup,
+  pe as DialogPortal,
+  me as DialogRoot,
+  Ne as DialogTitle,
+  ge as DialogTrigger,
+  Te as DrawerBackdrop,
+  Se as DrawerClose,
+  _e as DrawerContent,
   Ve as DrawerDescription,
-  _e as DrawerFooter,
-  Se as DrawerHeader,
-  ze as DrawerPopup,
-  ke as DrawerPortal,
-  we as DrawerRoot,
-  Pe as DrawerTitle,
-  De as DrawerTrigger,
+  Ie as DrawerFooter,
+  Ce as DrawerHeader,
+  Pe as DrawerPopup,
+  Ae as DrawerPortal,
+  De as DrawerRoot,
+  Re as DrawerTitle,
+  ke as DrawerTrigger,
   qe as MeterIndicator,
   $e as MeterLabel,
-  Le as MeterRoot,
-  He as MeterTrack,
+  He as MeterRoot,
+  Ge as MeterTrack,
   Ee as MeterValue,
-  Ke as ProgressIndicator,
-  Qe as ProgressLabel,
-  Ge as ProgressRoot,
-  Je as ProgressTrack,
-  Oe as ProgressValue,
-  U as ScrollAreaContent,
-  Y as ScrollAreaCorner,
-  O as ScrollAreaRoot,
-  W as ScrollAreaScrollbar,
-  X as ScrollAreaThumb,
-  Q as ScrollAreaViewport,
-  Z as SwitchRoot,
-  ee as SwitchThumb,
-  de as TabsIndicator,
-  se as TabsList,
-  ce as TabsPanel,
-  re as TabsRoot,
-  ie as TabsTab,
-  te as Toggle
+  Oe as ProgressIndicator,
+  Ue as ProgressLabel,
+  Je as ProgressRoot,
+  Ke as ProgressTrack,
+  Qe as ProgressValue,
+  X as ScrollAreaContent,
+  ee as ScrollAreaCorner,
+  U as ScrollAreaRoot,
+  Y as ScrollAreaScrollbar,
+  Z as ScrollAreaThumb,
+  W as ScrollAreaViewport,
+  ae as SwitchRoot,
+  te as SwitchThumb,
+  ce as TabsIndicator,
+  le as TabsList,
+  ue as TabsPanel,
+  oe as TabsRoot,
+  ne as TabsTab,
+  re as Toggle,
+  Xe as ToggleGroupItem,
+  We as ToggleGroupRoot
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "A collection of components built with Base UI & Tailwind CSS",
   "author": "LGLab",
   "license": "MIT",