@lglab/compose-ui 0.10.0 → 0.11.0

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

@@ -1,18 +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 { ToggleSize, ToggleVariant } 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;
+    ({ className, orientation, ...props }: ToggleGroupRootProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type ToggleGroupItemProps = React.ComponentProps<typeof Toggle> & {
+    /** Visual style of the toggle item */
+    variant?: ToggleVariant;
     /** Size of the toggle item */
     size?: ToggleSize;
 };
 declare const ToggleGroupItem: {
-    ({ className, size, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, variant, size, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { ToggleGroupRoot, ToggleGroupItem };

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

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

package/dist/components/toggle.d.ts

@@ -1,12 +1,14 @@
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
-import { ToggleSize } from '../lib/toggle-variants';
+import { ToggleSize, ToggleVariant } from '../lib/toggle-variants';
 import * as React from 'react';
 type ToggleProps = React.ComponentProps<typeof BaseToggle> & {
+    /** Visual style of the toggle */
+    variant?: ToggleVariant;
     /** Size of the toggle */
     size?: ToggleSize;
 };
 declare const Toggle: {
-    ({ className, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, variant, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Toggle };

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

@@ -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"}
+{"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.es.js

@@ -7,7 +7,7 @@ import { twMerge as _ } from "tailwind-merge";
 import { AlertDialog as d } 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 h from "react";
+import * as N from "react";
 import { ScrollArea as m } from "@base-ui/react/scroll-area";
 import { Switch as A } from "@base-ui/react/switch";
 import { Toggle as T } from "@base-ui/react/toggle";
@@ -15,7 +15,7 @@ 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 N } from "@base-ui/react/progress";
+import { Progress as h } from "@base-ui/react/progress";
 import { ToggleGroup as I } from "@base-ui/react/toggle-group";
 const u = n(
   [
@@ -204,9 +204,9 @@ const Q = ({
   className: o,
   children: s
 }) => {
-  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 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), V = (() => {
     const p = i[0];
-    return h.isValidElement(p) && p.type === P ? p.props.size ?? "default" : "default";
+    return N.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)),
@@ -248,7 +248,7 @@ const Y = ({
   m.Scrollbar,
   {
     className: r(
-      "flex touch-none select-none p-0.5 transition-colors duration-150 ease-out",
+      "flex touch-none select-none p-0.5 transition-colors duration-200 ease-out",
       "data-hovering:bg-muted/50",
       a === "vertical" && "h-full w-2.5",
       a === "horizontal" && "h-2.5 w-full flex-col",
@@ -298,7 +298,7 @@ const te = ({ className: e, ...a }) => /* @__PURE__ */ t(
     className: r(
       "aspect-square h-full rounded-full bg-background",
       "shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-muted-foreground/20",
-      "transition-all duration-150",
+      "transition-all duration-200",
       "data-checked:translate-x-4",
       "dark:shadow-black/25 dark:bg-foreground dark:data-checked:bg-background",
       "data-disabled:opacity-100",
@@ -310,25 +310,36 @@ const te = ({ className: e, ...a }) => /* @__PURE__ */ t(
 te.displayName = "SwitchThumb";
 const R = n(
   [
-    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium",
+    "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",
-    "border border-border bg-background hover:bg-muted shadow-xs",
-    "transition-all duration-150",
-    "data-pressed:border-primary data-pressed:bg-primary data-pressed:text-primary-foreground data-pressed:shadow-sm"
+    "select-none transition-colors duration-200"
   ],
   {
     variants: {
+      variant: {
+        default: [
+          "border border-border bg-background shadow-xs",
+          "hover:bg-accent hover:text-accent-foreground",
+          "data-pressed:border-primary data-pressed:bg-primary data-pressed:text-primary-foreground data-pressed:shadow-none"
+        ],
+        ghost: ["hover:bg-accent"]
+      },
       size: {
-        sm: "h-8 min-w-8 px-2 gap-1.5",
-        default: "h-9 min-w-9 px-2.5",
-        lg: "h-10 min-w-10 px-3"
+        sm: "h-8 min-w-8 px-2.5 gap-1.5",
+        default: "h-9 min-w-9 px-3",
+        lg: "h-10 min-w-10 px-3.5",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "default"
     }
   }
-), re = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(T, { className: r(R({ size: a }), e), ...o });
+), re = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(T, { className: r(R({ variant: a, size: o }), e), ...s });
 re.displayName = "Toggle";
 const oe = ({ className: e, ...a }) => /* @__PURE__ */ t(f.Root, { className: r("flex flex-col", e), ...a });
 oe.displayName = "TabsRoot";
@@ -460,24 +471,24 @@ const be = n(
   }
 );
 ye.displayName = "DialogPopup";
-const Ne = ({ className: e, ...a }) => /* @__PURE__ */ t(
+const he = ({ className: e, ...a }) => /* @__PURE__ */ t(
   l.Title,
   {
     className: r("text-lg font-semibold leading-none tracking-tight", e),
     ...a
   }
 );
-Ne.displayName = "DialogTitle";
+he.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(
+const Ne = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
   l.Close,
   {
     className: r(u({ variant: a ?? "outline", size: o }), e),
     ...s
   }
 );
-he.displayName = "DialogClose";
+Ne.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(
@@ -620,8 +631,8 @@ const Le = ({ className: e, ...a }) => /* @__PURE__ */ t(
 );
 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(() => {
+  const i = o ?? 0, [c, g] = N.useState(a ? 0 : i);
+  return N.useEffect(() => {
     if (a) {
       const x = requestAnimationFrame(() => {
         const v = requestAnimationFrame(() => {
@@ -673,10 +684,10 @@ const $e = ({ className: e, ...a }) => /* @__PURE__ */ t(
   }
 );
 $e.displayName = "MeterLabel";
-const Je = ({ className: e, ...a }) => /* @__PURE__ */ t(N.Root, { className: r("w-full", e), ...a });
+const Je = ({ className: e, ...a }) => /* @__PURE__ */ t(h.Root, { className: r("w-full", e), ...a });
 Je.displayName = "ProgressRoot";
 const Ke = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  N.Track,
+  h.Track,
   {
     className: r(
       "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
@@ -687,7 +698,7 @@ const Ke = ({ className: e, ...a }) => /* @__PURE__ */ t(
 );
 Ke.displayName = "ProgressTrack";
 const Oe = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  N.Indicator,
+  h.Indicator,
   {
     className: r(
       "h-full rounded-full bg-primary transition-all duration-1000 ease-out-expo",
@@ -698,7 +709,7 @@ const Oe = ({ className: e, ...a }) => /* @__PURE__ */ t(
 );
 Oe.displayName = "ProgressIndicator";
 const Qe = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  N.Value,
+  h.Value,
   {
     className: r("text-sm font-medium text-foreground", e),
     ...a
@@ -706,25 +717,48 @@ const Qe = ({ className: e, ...a }) => /* @__PURE__ */ t(
 );
 Qe.displayName = "ProgressValue";
 const Ue = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  N.Label,
+  h.Label,
   {
     className: r("text-sm font-medium text-foreground", e),
     ...a
   }
 );
 Ue.displayName = "ProgressLabel";
-const We = ({ className: e, ...a }) => /* @__PURE__ */ t(
+const We = ({ className: e, orientation: a, ...o }) => /* @__PURE__ */ t(
   I,
   {
+    orientation: a,
     className: r(
-      "inline-flex items-center gap-[2px] p-[3px] rounded-md border bg-muted/50",
+      "inline-flex",
+      a === "vertical" && "flex-col",
+      // Connected items: collapse borders, round only outer corners
+      "*:rounded-none [&>*:not(:first-child)]:-ml-px",
+      "[&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md",
+      // Vertical orientation adjustments
+      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",
       e
     ),
-    ...a
+    ...o
   }
 );
 We.displayName = "ToggleGroupRoot";
-const Xe = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(T, { className: r(R({ size: a }), e), ...o });
+const Xe = ({
+  className: e,
+  variant: a,
+  size: o,
+  ...s
+}) => /* @__PURE__ */ t(
+  T,
+  {
+    className: r(
+      R({ variant: a, size: o }),
+      // Ghost variant in toggle-group: add borders, no background when pressed
+      a === "ghost" && "border border-border",
+      e
+    ),
+    ...s
+  }
+);
 Xe.displayName = "ToggleGroupItem";
 export {
   Me as AccordionHeader,
@@ -748,14 +782,14 @@ export {
   Q as AvatarStack,
   F as Button,
   fe as DialogBackdrop,
-  he as DialogClose,
+  Ne as DialogClose,
   xe as DialogDescription,
   we as DialogFooter,
   ve as DialogHeader,
   ye as DialogPopup,
   pe as DialogPortal,
   me as DialogRoot,
-  Ne as DialogTitle,
+  he as DialogTitle,
   ge as DialogTrigger,
   Te as DrawerBackdrop,
   Se as DrawerClose,

package/dist/lib/toggle-variants.d.ts

@@ -1,5 +1,7 @@
-export type ToggleSize = 'sm' | 'default' | 'lg';
+export type ToggleSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+export type ToggleVariant = 'default' | 'ghost';
 export declare const toggleVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=toggle-variants.d.ts.map

package/dist/lib/toggle-variants.d.ts.map

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

package/dist/styles/default.css

@@ -78,7 +78,7 @@
 
 @layer base {
   * {
-    @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;
+    @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;
   }
 }
 

package/package.json

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