ixia-ui-react 2.0.0 → 2.1.0

package/dist/alert-dialog/index.js

@@ -1,5 +1,5 @@
 import { t as cn } from "../cn-BDi0DfT5.js";
-import { t as Button$1 } from "../button-BpUC-R1J.js";
+import { t as Button$1 } from "../button-DXQvyQyj.js";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement } from "react";

package/dist/bento-box/index.js

@@ -28,7 +28,7 @@ const bentoBoxVariants = cva("group/box flex size-full min-h-0 flex-col overflow
 	}
 });
 // src/components/bento-box/bento-box.tsx
-function BentoBox$1({ elevation, fill, size, className, ref, ...props }) {
+function BentoBox$1({ elevation, fill, size = "medium", className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-size": size,
 		className: cn(bentoBoxVariants({

package/dist/bento-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["BentoBox","BentoBoxRoot"],"sources":["../../src/components/bento-box/bento-box.types.ts","../../src/components/bento-box/bento-box.tsx","../../src/components/bento-box/bento-box-action.tsx","../../src/components/bento-box/bento-box-content.tsx","../../src/components/bento-box/bento-box-description.tsx","../../src/components/bento-box/bento-box-footer.tsx","../../src/components/bento-box/bento-box-header.tsx","../../src/components/bento-box/bento-box-title.tsx","../../src/components/bento-box/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nconst bentoBoxVariants = cva(\n  'group/box flex size-full min-h-0 flex-col overflow-hidden border border-border bg-surface',\n  {\n    defaultVariants: {\n      elevation: 'medium',\n      fill: false,\n      size: 'medium',\n    },\n    variants: {\n      elevation: {\n        high: 'shadow-sm',\n        low: 'shadow-2xs',\n        medium: 'shadow-xs',\n        none: '',\n        veryHigh: 'shadow-md',\n      },\n      fill: {\n        false: '',\n        true: 'p-0!',\n      },\n      size: {\n        large: 'gap-md rounded-3xl p-lg',\n        medium: 'gap-sm rounded-2xl p-md',\n        small: 'gap-xs rounded-xl p-sm',\n      },\n    },\n  },\n)\n\ntype BentoBoxProps = React.ComponentProps<'div'> & VariantProps<typeof bentoBoxVariants>\ntype BentoBoxHeaderProps = React.ComponentProps<'div'>\ntype BentoBoxTitleProps = React.ComponentProps<'span'>\ntype BentoBoxContentProps = React.ComponentProps<'div'>\ntype BentoBoxDescriptionProps = React.ComponentProps<'span'>\ntype BentoBoxActionProps = React.ComponentProps<'div'>\ntype BentoBoxFooterProps = React.ComponentProps<'div'>\n\nexport type {\n  BentoBoxProps,\n  BentoBoxHeaderProps,\n  BentoBoxTitleProps,\n  BentoBoxContentProps,\n  BentoBoxDescriptionProps,\n  BentoBoxActionProps,\n  BentoBoxFooterProps,\n}\nexport { bentoBoxVariants }\n","import { cn } from '@/utils/cn'\n\nimport { bentoBoxVariants } from './bento-box.types'\nimport type { BentoBoxProps } from './bento-box.types'\n\nexport function BentoBox({ elevation, fill, size, className, ref, ...props }: BentoBoxProps) {\n  return (\n    <div\n      data-size={size}\n      className={cn(bentoBoxVariants({ className, elevation, fill, size }))}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxActionProps } from './bento-box.types'\n\nexport function BentoBoxAction({ className, ref, ...props }: BentoBoxActionProps) {\n  return (\n    <div\n      className={cn(\n        'col-start-2 row-span-2 row-start-1 self-start justify-self-end pl-lg',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxContentProps } from './bento-box.types'\n\nexport function BentoBoxContent({ className, ref, ...props }: BentoBoxContentProps) {\n  return (\n    <div className={cn('flex min-h-0 flex-1 flex-col gap-3xs', className)} ref={ref} {...props} />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxDescriptionProps } from './bento-box.types'\n\nexport function BentoBoxDescription({ className, ref, ...props }: BentoBoxDescriptionProps) {\n  return (\n    <span\n      className={cn(\n        'text-on-surface-variant group-data-[size=large]/box:style-text-prose-0 group-data-[size=medium]/box:style-text-prose--1 group-data-[size=small]/box:style-text-prose--2',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxFooterProps } from './bento-box.types'\n\nexport function BentoBoxFooter({ className, ref, ...props }: BentoBoxFooterProps) {\n  return (\n    <div\n      className={cn(\n        'mt-auto flex flex-wrap items-center justify-start gap-sm not-first:group-data-[size=large]/box:gap-lg not-first:group-data-[size=medium]/box:gap-md group-data-[size=small]/box:gap-sm',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxHeaderProps } from './bento-box.types'\n\nexport function BentoBoxHeader({ className, ref, ...props }: BentoBoxHeaderProps) {\n  return (\n    <div\n      className={cn(\n        'group/box-header grid auto-rows-min items-start space-y-2xs group-data-[size=large]/box:gap-0 group-data-[size=medium]/box:gap-0 group-data-[size=small]/box:gap-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxTitleProps } from './bento-box.types'\n\nexport function BentoBoxTitle({ className, ref, ...props }: BentoBoxTitleProps) {\n  return (\n    <span\n      className={cn(\n        'group-data-[size=large]/box:style-text-strong-1 not-first:group-data-[size=large]/box:pt-xs group-data-[size=medium]/box:style-text-strong-0 not-first:group-data-[size=medium]/box:pt-2xs group-data-[size=small]/box:style-text-strong--1 not-first:group-data-[size=small]/box:pt-3xs',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { BentoBox as BentoBoxRoot } from './bento-box'\nimport { BentoBoxAction } from './bento-box-action'\nimport { BentoBoxContent } from './bento-box-content'\nimport { BentoBoxDescription } from './bento-box-description'\nimport { BentoBoxFooter } from './bento-box-footer'\nimport { BentoBoxHeader } from './bento-box-header'\nimport { BentoBoxTitle } from './bento-box-title'\n\nconst BentoBox = Object.assign(BentoBoxRoot, {\n  Action: BentoBoxAction,\n  Content: BentoBoxContent,\n  Description: BentoBoxDescription,\n  Footer: BentoBoxFooter,\n  Header: BentoBoxHeader,\n  Title: BentoBoxTitle,\n})\n\nexport type {\n  BentoBoxActionProps,\n  BentoBoxContentProps,\n  BentoBoxDescriptionProps,\n  BentoBoxFooterProps,\n  BentoBoxHeaderProps,\n  BentoBoxProps,\n  BentoBoxTitleProps,\n} from './bento-box.types'\n\nexport { BentoBoxAction } from './bento-box-action'\nexport { BentoBoxContent } from './bento-box-content'\nexport { BentoBoxDescription } from './bento-box-description'\nexport { BentoBoxFooter } from './bento-box-footer'\nexport { BentoBoxHeader } from './bento-box-header'\nexport { BentoBoxTitle } from './bento-box-title'\n\nexport { BentoBox }\n"],"mappings":";;;;AAGA,MAAM,mBAAmB,IACvB,6FACA;CACE,iBAAiB;EACf,WAAW;EACX,MAAM;EACN,MAAM;CACR;CACA,UAAU;EACR,WAAW;GACT,MAAM;GACN,KAAK;GACL,QAAQ;GACR,MAAM;GACN,UAAU;EACZ;EACA,MAAM;GACJ,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CACF;;ACzBA,SAAgBA,WAAS,EAAE,WAAW,MAAM,MAAM,WAAW,KAAK,GAAG,SAAwB;CAC3F,OACE,oBAAC,OAAD;EACE,aAAW;EACX,WAAW,GAAG,iBAAiB;GAAE;GAAW;GAAW;GAAM;EAAK,CAAC,CAAC;EAC/D;EACL,GAAI;CACL,CAAA;AAEL;;ACVA,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA8B;CAChF,OACE,oBAAC,OAAD;EACE,WAAW,GACT,wEACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACXA,SAAgB,gBAAgB,EAAE,WAAW,KAAK,GAAG,SAA+B;CAClF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,wCAAwC,SAAS;EAAQ;EAAK,GAAI;CAAQ,CAAA;AAEjG;;ACJA,SAAgB,oBAAoB,EAAE,WAAW,KAAK,GAAG,SAAmC;CAC1F,OACE,oBAAC,QAAD;EACE,WAAW,GACT,2KACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACXA,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA8B;CAChF,OACE,oBAAC,OAAD;EACE,WAAW,GACT,0LACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACXA,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA8B;CAChF,OACE,oBAAC,OAAD;EACE,WAAW,GACT,sKACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACXA,SAAgB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CAC9E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,4RACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACPA,MAAM,WAAW,OAAO,OAAOC,YAAc;CAC3C,QAAQ;CACR,SAAS;CACT,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,CAAC"}
+{"version":3,"file":"index.js","names":["BentoBox","BentoBoxRoot"],"sources":["../../src/components/bento-box/bento-box.types.ts","../../src/components/bento-box/bento-box.tsx","../../src/components/bento-box/bento-box-action.tsx","../../src/components/bento-box/bento-box-content.tsx","../../src/components/bento-box/bento-box-description.tsx","../../src/components/bento-box/bento-box-footer.tsx","../../src/components/bento-box/bento-box-header.tsx","../../src/components/bento-box/bento-box-title.tsx","../../src/components/bento-box/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nconst bentoBoxVariants = cva(\n  'group/box flex size-full min-h-0 flex-col overflow-hidden border border-border bg-surface',\n  {\n    defaultVariants: {\n      elevation: 'medium',\n      fill: false,\n      size: 'medium',\n    },\n    variants: {\n      elevation: {\n        high: 'shadow-sm',\n        low: 'shadow-2xs',\n        medium: 'shadow-xs',\n        none: '',\n        veryHigh: 'shadow-md',\n      },\n      fill: {\n        false: '',\n        true: 'p-0!',\n      },\n      size: {\n        large: 'gap-md rounded-3xl p-lg',\n        medium: 'gap-sm rounded-2xl p-md',\n        small: 'gap-xs rounded-xl p-sm',\n      },\n    },\n  },\n)\n\ntype BentoBoxProps = React.ComponentProps<'div'> & VariantProps<typeof bentoBoxVariants>\ntype BentoBoxHeaderProps = React.ComponentProps<'div'>\ntype BentoBoxTitleProps = React.ComponentProps<'span'>\ntype BentoBoxContentProps = React.ComponentProps<'div'>\ntype BentoBoxDescriptionProps = React.ComponentProps<'span'>\ntype BentoBoxActionProps = React.ComponentProps<'div'>\ntype BentoBoxFooterProps = React.ComponentProps<'div'>\n\nexport type {\n  BentoBoxProps,\n  BentoBoxHeaderProps,\n  BentoBoxTitleProps,\n  BentoBoxContentProps,\n  BentoBoxDescriptionProps,\n  BentoBoxActionProps,\n  BentoBoxFooterProps,\n}\nexport { bentoBoxVariants }\n","import { cn } from '@/utils/cn'\n\nimport { bentoBoxVariants } from './bento-box.types'\nimport type { BentoBoxProps } from './bento-box.types'\n\nexport function BentoBox({\n  elevation,\n  fill,\n  size = 'medium',\n  className,\n  ref,\n  ...props\n}: BentoBoxProps) {\n  return (\n    <div\n      data-size={size}\n      className={cn(bentoBoxVariants({ className, elevation, fill, size }))}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxActionProps } from './bento-box.types'\n\nexport function BentoBoxAction({ className, ref, ...props }: BentoBoxActionProps) {\n  return (\n    <div\n      className={cn(\n        'col-start-2 row-span-2 row-start-1 self-start justify-self-end pl-lg',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxContentProps } from './bento-box.types'\n\nexport function BentoBoxContent({ className, ref, ...props }: BentoBoxContentProps) {\n  return (\n    <div className={cn('flex min-h-0 flex-1 flex-col gap-3xs', className)} ref={ref} {...props} />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxDescriptionProps } from './bento-box.types'\n\nexport function BentoBoxDescription({ className, ref, ...props }: BentoBoxDescriptionProps) {\n  return (\n    <span\n      className={cn(\n        'text-on-surface-variant group-data-[size=large]/box:style-text-prose-0 group-data-[size=medium]/box:style-text-prose--1 group-data-[size=small]/box:style-text-prose--2',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxFooterProps } from './bento-box.types'\n\nexport function BentoBoxFooter({ className, ref, ...props }: BentoBoxFooterProps) {\n  return (\n    <div\n      className={cn(\n        'mt-auto flex flex-wrap items-center justify-start gap-sm not-first:group-data-[size=large]/box:gap-lg not-first:group-data-[size=medium]/box:gap-md group-data-[size=small]/box:gap-sm',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxHeaderProps } from './bento-box.types'\n\nexport function BentoBoxHeader({ className, ref, ...props }: BentoBoxHeaderProps) {\n  return (\n    <div\n      className={cn(\n        'group/box-header grid auto-rows-min items-start space-y-2xs group-data-[size=large]/box:gap-0 group-data-[size=medium]/box:gap-0 group-data-[size=small]/box:gap-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { BentoBoxTitleProps } from './bento-box.types'\n\nexport function BentoBoxTitle({ className, ref, ...props }: BentoBoxTitleProps) {\n  return (\n    <span\n      className={cn(\n        'group-data-[size=large]/box:style-text-strong-1 not-first:group-data-[size=large]/box:pt-xs group-data-[size=medium]/box:style-text-strong-0 not-first:group-data-[size=medium]/box:pt-2xs group-data-[size=small]/box:style-text-strong--1 not-first:group-data-[size=small]/box:pt-3xs',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { BentoBox as BentoBoxRoot } from './bento-box'\nimport { BentoBoxAction } from './bento-box-action'\nimport { BentoBoxContent } from './bento-box-content'\nimport { BentoBoxDescription } from './bento-box-description'\nimport { BentoBoxFooter } from './bento-box-footer'\nimport { BentoBoxHeader } from './bento-box-header'\nimport { BentoBoxTitle } from './bento-box-title'\n\nconst BentoBox = Object.assign(BentoBoxRoot, {\n  Action: BentoBoxAction,\n  Content: BentoBoxContent,\n  Description: BentoBoxDescription,\n  Footer: BentoBoxFooter,\n  Header: BentoBoxHeader,\n  Title: BentoBoxTitle,\n})\n\nexport type {\n  BentoBoxActionProps,\n  BentoBoxContentProps,\n  BentoBoxDescriptionProps,\n  BentoBoxFooterProps,\n  BentoBoxHeaderProps,\n  BentoBoxProps,\n  BentoBoxTitleProps,\n} from './bento-box.types'\n\nexport { BentoBoxAction } from './bento-box-action'\nexport { BentoBoxContent } from './bento-box-content'\nexport { BentoBoxDescription } from './bento-box-description'\nexport { BentoBoxFooter } from './bento-box-footer'\nexport { BentoBoxHeader } from './bento-box-header'\nexport { BentoBoxTitle } from './bento-box-title'\n\nexport { BentoBox }\n"],"mappings":";;;;AAGA,MAAM,mBAAmB,IACvB,6FACA;CACE,iBAAiB;EACf,WAAW;EACX,MAAM;EACN,MAAM;CACR;CACA,UAAU;EACR,WAAW;GACT,MAAM;GACN,KAAK;GACL,QAAQ;GACR,MAAM;GACN,UAAU;EACZ;EACA,MAAM;GACJ,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CACF;;ACzBA,SAAgBA,WAAS,EACvB,WACA,MACA,OAAO,UACP,WACA,KACA,GAAG,SACa;CAChB,OACE,oBAAC,OAAD;EACE,aAAW;EACX,WAAW,GAAG,iBAAiB;GAAE;GAAW;GAAW;GAAM;EAAK,CAAC,CAAC;EAC/D;EACL,GAAI;CACL,CAAA;AAEL;;ACjBA,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA8B;CAChF,OACE,oBAAC,OAAD;EACE,WAAW,GACT,wEACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACXA,SAAgB,gBAAgB,EAAE,WAAW,KAAK,GAAG,SAA+B;CAClF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,wCAAwC,SAAS;EAAQ;EAAK,GAAI;CAAQ,CAAA;AAEjG;;ACJA,SAAgB,oBAAoB,EAAE,WAAW,KAAK,GAAG,SAAmC;CAC1F,OACE,oBAAC,QAAD;EACE,WAAW,GACT,2KACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACXA,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA8B;CAChF,OACE,oBAAC,OAAD;EACE,WAAW,GACT,0LACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACXA,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA8B;CAChF,OACE,oBAAC,OAAD;EACE,WAAW,GACT,sKACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACXA,SAAgB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CAC9E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,4RACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACPA,MAAM,WAAW,OAAO,OAAOC,YAAc;CAC3C,QAAQ;CACR,SAAS;CACT,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,CAAC"}

package/dist/button/index.d.ts

@@ -1,3 +1,3 @@
 import { t as ButtonProps } from "../button.types-BFKrBCGd.js";
-import { t as Button } from "../index-bVyqfhJS.js";
+import { t as Button } from "../index-uaJUy56Z.js";
 export { Button, type ButtonProps as ButtonExtendedProps };

package/dist/button/index.js

@@ -1 +1 @@
-export { t as Button } from "../button-BpUC-R1J.js";
+export { t as Button } from "../button-DXQvyQyj.js";

package/dist/{button-BpUC-R1J.js → button-DXQvyQyj.js}

@@ -1,11 +1,12 @@
 import { t as cn } from "./cn-BDi0DfT5.js";
 import { t as hasSingleElementChild } from "./has-single-element-child-DLGI0Dh2.js";
 import { t as trimTextChildren } from "./trim-text-children-CQRFg2fL.js";
+import { n as useButtonGroupContext } from "./button-group-context-CScS9Ntz.js";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react";
 // src/components/button/button.types.ts
-const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center rounded-full whitespace-nowrap transition-all select-none disabled:pointer-events-none disabled:opacity-50", {
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center rounded-full whitespace-nowrap transition-all select-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", {
 	compoundVariants: [
 		{
 			className: "bg-brand-default text-brand-on-default hover:bg-brand-muted",
@@ -286,22 +287,23 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
 	}
 });
 // src/components/button/button.tsx
-function Button$1({ tone, variant, size, className, children, ...props }) {
+function Button$1(buttonProps) {
+	const group = useButtonGroupContext(), { size = group?.size, tone = group?.tone, variant = group?.variant, className, children, ...props } = buttonProps;
 	let iconOnly = void 0;
 	if (hasSingleElementChild(children)) iconOnly = "";
 	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
 		"data-icon-only": iconOnly,
 		"data-size": size,
 		className: cn(buttonVariants({
-			className,
 			size,
 			tone,
 			variant
-		})),
+		}), group && "border-0 shadow-none", group && variant === "elevated" && "not-active:hover:shadow-none active:scale-100", group && variant === "elevated" && tone === "neutral" && "not-active:hover:text-neutral-on-container active:bg-surface", className),
 		...props,
 		children: trimTextChildren(children)
 	});
 }
 export { buttonVariants as n, Button$1 as t };
 
-//# sourceMappingURL=button-BpUC-R1J.js.map
+//# sourceMappingURL=button-DXQvyQyj.js.map

package/dist/button-DXQvyQyj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-DXQvyQyj.js","names":["Button","BaseButton"],"sources":["../src/components/button/button.types.ts","../src/components/button/button.tsx"],"sourcesContent":["import type { Button as BaseButton } from '@base-ui/react'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nexport const buttonVariants = cva(\n  'inline-flex cursor-pointer items-center justify-center rounded-full whitespace-nowrap transition-all select-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n  {\n    compoundVariants: [\n      {\n        className: 'bg-brand-default text-brand-on-default hover:bg-brand-muted',\n        tone: 'brand',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-accent-default text-accent-on-default hover:bg-accent-muted',\n        tone: 'accent',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-neutral-default text-neutral-on-default hover:bg-neutral-muted',\n        tone: 'neutral',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-error-default text-error-on-default hover:bg-error-muted',\n        tone: 'error',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-info-default text-info-on-default hover:bg-info-muted',\n        tone: 'info',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-success-default text-success-on-default hover:bg-success-muted',\n        tone: 'success',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-warning-default text-warning-on-default hover:bg-warning-muted',\n        tone: 'warning',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-brand-container text-brand-on-container hover:bg-brand-container-high',\n        tone: 'brand',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-accent-container text-accent-on-container hover:bg-accent-container-high',\n        tone: 'accent',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-neutral-container text-neutral-on-container hover:bg-neutral-container-high',\n        tone: 'neutral',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-error-container text-error-on-container hover:bg-error-container-high',\n        tone: 'error',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-info-container text-info-on-container hover:bg-info-container-high',\n        tone: 'info',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-success-container text-success-on-container hover:bg-success-container-high',\n        tone: 'success',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-warning-container text-warning-on-container hover:bg-warning-container-high',\n        tone: 'warning',\n        variant: 'secondary',\n      },\n      {\n        className:\n          'border-brand-border text-brand-default hover:bg-brand-container hover:text-brand-on-container',\n        tone: 'brand',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-accent-border text-accent-default hover:bg-accent-container hover:text-accent-on-container',\n        tone: 'accent',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-neutral-border text-neutral-default hover:bg-neutral-container hover:text-neutral-on-container',\n        tone: 'neutral',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-error-border text-error-default hover:bg-error-container hover:text-error-on-container',\n        tone: 'error',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-info-border text-info-default hover:bg-info-container hover:text-info-on-container',\n        tone: 'info',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-success-border text-success-default hover:bg-success-container hover:text-success-on-container',\n        tone: 'success',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-warning-border text-warning-default hover:bg-warning-container hover:text-warning-on-container',\n        tone: 'warning',\n        variant: 'outline',\n      },\n      {\n        className: 'text-brand-default hover:bg-brand-container hover:text-brand-on-container',\n        tone: 'brand',\n        variant: 'ghost',\n      },\n      {\n        className: 'text-accent-default hover:bg-accent-container hover:text-accent-on-container',\n        tone: 'accent',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'text-neutral-default hover:bg-neutral-container hover:text-neutral-on-container',\n        tone: 'neutral',\n        variant: 'ghost',\n      },\n      {\n        className: 'text-error-default hover:bg-error-container hover:text-error-on-container',\n        tone: 'error',\n        variant: 'ghost',\n      },\n      {\n        className: 'text-info-default hover:bg-info-container hover:text-info-on-container',\n        tone: 'info',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'text-success-default hover:bg-success-container hover:text-success-on-container',\n        tone: 'success',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'text-warning-default hover:bg-warning-container hover:text-warning-on-container',\n        tone: 'warning',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'border-brand-border bg-brand-container text-brand-on-container hover:border-brand-border-strong hover:bg-brand-container-high',\n        tone: 'brand',\n        variant: 'soft',\n      },\n      {\n        className:\n          'border-accent-border bg-accent-container text-accent-on-container hover:border-accent-border-strong hover:bg-accent-container-high',\n        tone: 'accent',\n        variant: 'soft',\n      },\n      {\n        className:\n          'border-neutral-border bg-neutral-container text-neutral-on-container hover:border-neutral-border-strong hover:bg-neutral-container-high',\n        tone: 'neutral',\n        variant: 'soft',\n      },\n      {\n        className:\n          'border-error-border bg-error-container text-error-on-container hover:border-error-border-strong hover:bg-error-container-high',\n        tone: 'error',\n        variant: 'soft',\n      },\n      {\n        className:\n          'border-info-border bg-info-container text-info-on-container hover:border-info-border-strong hover:bg-info-container-high',\n        tone: 'info',\n        variant: 'soft',\n      },\n      {\n        className:\n          'border-success-border bg-success-container text-success-on-container hover:border-success-border-strong hover:bg-success-container-high',\n        tone: 'success',\n        variant: 'soft',\n      },\n      {\n        className:\n          'border-warning-border bg-warning-container text-warning-on-container hover:border-warning-border-strong hover:bg-warning-container-high',\n        tone: 'warning',\n        variant: 'soft',\n      },\n      {\n        className:\n          'bg-brand-container text-brand-on-container not-active:hover:bg-brand-container-high',\n        tone: 'brand',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-accent-container text-accent-on-container not-active:hover:bg-accent-container-high',\n        tone: 'accent',\n        variant: 'elevated',\n      },\n      {\n        className: 'bg-surface-2 text-on-surface not-active:hover:bg-surface-3',\n        tone: 'neutral',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-error-container text-error-on-container not-active:hover:bg-error-container-high',\n        tone: 'error',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-info-container text-info-on-container not-active:hover:bg-info-container-high',\n        tone: 'info',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-success-container text-success-on-container not-active:hover:bg-success-container-high',\n        tone: 'success',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-warning-container text-warning-on-container not-active:hover:bg-warning-container-high',\n        tone: 'warning',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'text-brand-default hover:decoration-brand-default [&>svg]:text-brand-default/50 hover:[&>svg]:text-brand-default',\n        tone: 'brand',\n        variant: 'link',\n      },\n      {\n        className:\n          'text-accent-default hover:decoration-accent-default [&>svg]:text-accent-default/50 hover:[&>svg]:text-accent-default',\n        tone: 'accent',\n        variant: 'link',\n      },\n      {\n        className:\n          'text-neutral-default hover:decoration-neutral-default [&>svg]:text-neutral-default/50 hover:[&>svg]:text-neutral-default',\n        tone: 'neutral',\n        variant: 'link',\n      },\n      {\n        className:\n          'text-error-default hover:decoration-error-default [&>svg]:text-error-default/50 hover:[&>svg]:text-error-default',\n        tone: 'error',\n        variant: 'link',\n      },\n      {\n        className:\n          'text-info-default hover:decoration-info-default [&>svg]:text-info-default/50 hover:[&>svg]:text-info-default',\n        tone: 'info',\n        variant: 'link',\n      },\n      {\n        className:\n          'text-success-default hover:decoration-success-default [&>svg]:text-success-default/50 hover:[&>svg]:text-success-default',\n        tone: 'success',\n        variant: 'link',\n      },\n      {\n        className:\n          'text-warning-default hover:decoration-warning-default [&>svg]:text-warning-default/50 hover:[&>svg]:text-warning-default',\n        tone: 'warning',\n        variant: 'link',\n      },\n    ],\n    defaultVariants: {\n      size: 'medium',\n      tone: 'brand',\n      variant: 'fill',\n    },\n    variants: {\n      size: {\n        extraSmall:\n          'h-md gap-3xs px-2xs font-body text-xs leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-md [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-xs',\n        large:\n          'h-2xl min-w-2xl gap-xs px-md font-body text-lg leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-2xl [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-lg',\n        medium:\n          'h-xl min-w-xl gap-2xs px-sm font-body text-base leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-xl [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-md',\n        small:\n          'h-lg min-w-lg gap-3xs px-xs font-body text-sm leading-none font-medium [&:where([data-icon-only]:has(>svg:only-child))]:size-lg [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-sm',\n      },\n      tone: {\n        accent: '',\n        brand: '',\n        error: '',\n        info: '',\n        neutral: '',\n        success: '',\n        warning: '',\n      },\n      variant: {\n        elevated: 'shadow-xs not-active:hover:shadow-md',\n        fill: 'active:scale-95',\n        ghost: 'active:scale-95',\n        link: 'size-fit! p-0! underline decoration-transparent underline-offset-2 [&>svg]:transition-colors',\n        outline: 'border active:scale-95',\n        secondary: 'active:scale-95',\n        soft: 'border active:scale-95',\n      },\n    },\n  },\n)\n\nexport type ButtonProps = React.ComponentProps<typeof BaseButton> &\n  VariantProps<typeof buttonVariants>\n","import { Button as BaseButton } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\nimport { hasSingleElementChild } from '@/utils/has-single-element-child'\nimport { trimTextChildren } from '@/utils/trim-text-children'\n\nimport { useButtonGroupContext } from '../button-group/button-group-context'\nimport { buttonVariants } from './button.types'\nimport type { ButtonProps } from './button.types'\n\nexport function Button(buttonProps: ButtonProps) {\n  const group = useButtonGroupContext(),\n    {\n      size = group?.size,\n      tone = group?.tone,\n      variant = group?.variant,\n      className,\n      children,\n      ...props\n    } = buttonProps\n\n  let iconOnly: '' | undefined = undefined\n\n  if (hasSingleElementChild(children)) {\n    iconOnly = ''\n  }\n\n  return (\n    <BaseButton\n      data-slot=\"button\"\n      data-icon-only={iconOnly}\n      data-size={size}\n      className={cn(\n        buttonVariants({ size, tone, variant }),\n        group && 'border-0 shadow-none',\n        group && variant === 'elevated' && 'not-active:hover:shadow-none active:scale-100',\n        group &&\n          variant === 'elevated' &&\n          tone === 'neutral' &&\n          'not-active:hover:text-neutral-on-container active:bg-surface',\n        className,\n      )}\n      {...props}\n    >\n      {trimTextChildren(children)}\n    </BaseButton>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,MAAa,iBAAiB,IAC5B,gOACA;CACE,kBAAkB;EAChB;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;CACF;CACA,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,YACE;GACF,OACE;GACF,QACE;GACF,OACE;EACJ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,OAAO;GACP,MAAM;GACN,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,SAAS;GACP,UAAU;GACV,MAAM;GACN,OAAO;GACP,MAAM;GACN,SAAS;GACT,WAAW;GACX,MAAM;EACR;CACF;AACF,CACF;;ACtTA,SAAgBA,SAAO,aAA0B;CAC/C,MAAM,QAAQ,sBAAsB,GAClC,EACE,OAAO,OAAO,MACd,OAAO,OAAO,MACd,UAAU,OAAO,SACjB,WACA,UACA,GAAG,UACD;CAEN,IAAI,WAA2B,KAAA;CAE/B,IAAI,sBAAsB,QAAQ,GAChC,WAAW;CAGb,OACE,oBAACC,QAAD;EACE,aAAU;EACV,kBAAgB;EAChB,aAAW;EACX,WAAW,GACT,eAAe;GAAE;GAAM;GAAM;EAAQ,CAAC,GACtC,SAAS,wBACT,SAAS,YAAY,cAAc,iDACnC,SACE,YAAY,cACZ,SAAS,aACT,gEACF,SACF;EACA,GAAI;EAEH,UAAA,iBAAiB,QAAQ;CAChB,CAAA;AAEhB"}

package/dist/button-group/index.d.ts

@@ -1,2 +1,2 @@
-import { n as ButtonGroupProps, t as ButtonGroup } from "../index-B3MK1QYh.js";
+import { n as ButtonGroupProps, t as ButtonGroup } from "../index-CpNMNewO.js";
 export { ButtonGroup, type ButtonGroupProps };

package/dist/button-group/index.js

@@ -1 +1 @@
-export { t as ButtonGroup } from "../button-group-7azbqlcO.js";
+export { t as ButtonGroup } from "../button-group-BiSk3iIf.js";

package/dist/button-group-BiSk3iIf.js

@@ -0,0 +1,269 @@
+import { t as cn } from "./cn-BDi0DfT5.js";
+import { t as ButtonGroupContext } from "./button-group-context-CScS9Ntz.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+// src/components/button-group/button-group.types.ts
+const buttonGroupVariants = cva("inline-flex cursor-pointer items-center justify-center overflow-hidden rounded-full whitespace-nowrap transition-all select-none disabled:pointer-events-none disabled:opacity-50 [&>:where([data-slot=button],button)]:rounded-none", {
+	compoundVariants: [
+		{
+			className: "bg-brand-default text-brand-on-default",
+			tone: "brand",
+			variant: "fill"
+		},
+		{
+			className: "bg-accent-default text-accent-on-default",
+			tone: "accent",
+			variant: "fill"
+		},
+		{
+			className: "bg-neutral-default text-neutral-on-default",
+			tone: "neutral",
+			variant: "fill"
+		},
+		{
+			className: "bg-error-default text-error-on-default",
+			tone: "error",
+			variant: "fill"
+		},
+		{
+			className: "bg-info-default text-info-on-default",
+			tone: "info",
+			variant: "fill"
+		},
+		{
+			className: "bg-success-default text-success-on-default",
+			tone: "success",
+			variant: "fill"
+		},
+		{
+			className: "bg-warning-default text-warning-on-default",
+			tone: "warning",
+			variant: "fill"
+		},
+		{
+			className: "bg-brand-container text-brand-on-container",
+			tone: "brand",
+			variant: "secondary"
+		},
+		{
+			className: "bg-accent-container text-accent-on-container",
+			tone: "accent",
+			variant: "secondary"
+		},
+		{
+			className: "bg-neutral-container text-neutral-on-container",
+			tone: "neutral",
+			variant: "secondary"
+		},
+		{
+			className: "bg-error-container text-error-on-container",
+			tone: "error",
+			variant: "secondary"
+		},
+		{
+			className: "bg-info-container text-info-on-container",
+			tone: "info",
+			variant: "secondary"
+		},
+		{
+			className: "bg-success-container text-success-on-container",
+			tone: "success",
+			variant: "secondary"
+		},
+		{
+			className: "bg-warning-container text-warning-on-container",
+			tone: "warning",
+			variant: "secondary"
+		},
+		{
+			className: "border-brand-border text-brand-default",
+			tone: "brand",
+			variant: "outline"
+		},
+		{
+			className: "border-accent-border text-accent-default",
+			tone: "accent",
+			variant: "outline"
+		},
+		{
+			className: "border-neutral-border text-neutral-default",
+			tone: "neutral",
+			variant: "outline"
+		},
+		{
+			className: "border-error-border text-error-default",
+			tone: "error",
+			variant: "outline"
+		},
+		{
+			className: "border-info-border text-info-default",
+			tone: "info",
+			variant: "outline"
+		},
+		{
+			className: "border-success-border text-success-default",
+			tone: "success",
+			variant: "outline"
+		},
+		{
+			className: "border-warning-border text-warning-default",
+			tone: "warning",
+			variant: "outline"
+		},
+		{
+			className: "text-brand-default",
+			tone: "brand",
+			variant: "ghost"
+		},
+		{
+			className: "text-accent-default",
+			tone: "accent",
+			variant: "ghost"
+		},
+		{
+			className: "text-neutral-default",
+			tone: "neutral",
+			variant: "ghost"
+		},
+		{
+			className: "text-error-default",
+			tone: "error",
+			variant: "ghost"
+		},
+		{
+			className: "text-info-default",
+			tone: "info",
+			variant: "ghost"
+		},
+		{
+			className: "text-success-default",
+			tone: "success",
+			variant: "ghost"
+		},
+		{
+			className: "text-warning-default",
+			tone: "warning",
+			variant: "ghost"
+		},
+		{
+			className: "border-brand-border bg-brand-container text-brand-on-container",
+			tone: "brand",
+			variant: "soft"
+		},
+		{
+			className: "border-accent-border bg-accent-container text-accent-on-container",
+			tone: "accent",
+			variant: "soft"
+		},
+		{
+			className: "border-neutral-border bg-neutral-container text-neutral-on-container",
+			tone: "neutral",
+			variant: "soft"
+		},
+		{
+			className: "border-error-border bg-error-container text-error-on-container",
+			tone: "error",
+			variant: "soft"
+		},
+		{
+			className: "border-info-border bg-info-container text-info-on-container",
+			tone: "info",
+			variant: "soft"
+		},
+		{
+			className: "border-success-border bg-success-container text-success-on-container",
+			tone: "success",
+			variant: "soft"
+		},
+		{
+			className: "border-warning-border bg-warning-container text-warning-on-container",
+			tone: "warning",
+			variant: "soft"
+		},
+		{
+			className: "bg-brand-container text-brand-on-container",
+			tone: "brand",
+			variant: "elevated"
+		},
+		{
+			className: "bg-accent-container text-accent-on-container",
+			tone: "accent",
+			variant: "elevated"
+		},
+		{
+			className: "bg-surface-2 text-on-surface",
+			tone: "neutral",
+			variant: "elevated"
+		},
+		{
+			className: "bg-error-container text-error-on-container",
+			tone: "error",
+			variant: "elevated"
+		},
+		{
+			className: "bg-info-container text-info-on-container",
+			tone: "info",
+			variant: "elevated"
+		},
+		{
+			className: "bg-success-container text-success-on-container",
+			tone: "success",
+			variant: "elevated"
+		},
+		{
+			className: "bg-warning-container text-warning-on-container",
+			tone: "warning",
+			variant: "elevated"
+		}
+	],
+	defaultVariants: {
+		orientation: "horizontal",
+		tone: "brand",
+		variant: "fill"
+	},
+	variants: {
+		orientation: {
+			horizontal: "[&>*+*]:relative [&>*+*]:before:absolute [&>*+*]:before:top-1/2 [&>*+*]:before:left-0 [&>*+*]:before:h-1/2 [&>*+*]:before:w-px [&>*+*]:before:-translate-y-1/2 [&>*+*]:before:content-[\"\"]",
+			vertical: "flex-col [&>*+*]:relative [&>*+*]:before:absolute [&>*+*]:before:top-0 [&>*+*]:before:left-1/2 [&>*+*]:before:h-px [&>*+*]:before:w-1/2 [&>*+*]:before:-translate-x-1/2 [&>*+*]:before:content-[\"\"]"
+		},
+		tone: {
+			accent: "[&>*+*]:before:bg-accent-border",
+			brand: "[&>*+*]:before:bg-brand-border",
+			error: "[&>*+*]:before:bg-error-border",
+			info: "[&>*+*]:before:bg-info-border",
+			neutral: "[&>*+*]:before:bg-neutral-border",
+			success: "[&>*+*]:before:bg-success-border",
+			warning: ""
+		},
+		variant: {
+			elevated: "shadow-xs",
+			fill: "",
+			ghost: "",
+			outline: "border",
+			secondary: "",
+			soft: "border"
+		}
+	}
+});
+// src/components/button-group/button-group.tsx
+function ButtonGroup({ size = "medium", variant = "fill", tone = "brand", orientation, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(ButtonGroupContext, {
+		value: {
+			size,
+			tone,
+			variant
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(buttonGroupVariants({
+				orientation,
+				tone,
+				variant
+			}), className),
+			ref,
+			...props
+		})
+	});
+}
+export { ButtonGroup as t };
+
+//# sourceMappingURL=button-group-BiSk3iIf.js.map

package/dist/button-group-BiSk3iIf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-BiSk3iIf.js","names":[],"sources":["../src/components/button-group/button-group.types.ts","../src/components/button-group/button-group.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nimport type { ButtonProps } from '../button/button.types'\n\nexport const buttonGroupVariants = cva(\n  'inline-flex cursor-pointer items-center justify-center overflow-hidden rounded-full whitespace-nowrap transition-all select-none disabled:pointer-events-none disabled:opacity-50 [&>:where([data-slot=button],button)]:rounded-none',\n  {\n    compoundVariants: [\n      {\n        className: 'bg-brand-default text-brand-on-default',\n        tone: 'brand',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-accent-default text-accent-on-default',\n        tone: 'accent',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-neutral-default text-neutral-on-default',\n        tone: 'neutral',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-error-default text-error-on-default',\n        tone: 'error',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-info-default text-info-on-default',\n        tone: 'info',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-success-default text-success-on-default',\n        tone: 'success',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-warning-default text-warning-on-default',\n        tone: 'warning',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-brand-container text-brand-on-container',\n        tone: 'brand',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-accent-container text-accent-on-container',\n        tone: 'accent',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-neutral-container text-neutral-on-container',\n        tone: 'neutral',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-error-container text-error-on-container',\n        tone: 'error',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-info-container text-info-on-container',\n        tone: 'info',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-success-container text-success-on-container',\n        tone: 'success',\n        variant: 'secondary',\n      },\n      {\n        className: 'bg-warning-container text-warning-on-container',\n        tone: 'warning',\n        variant: 'secondary',\n      },\n      {\n        className: 'border-brand-border text-brand-default',\n        tone: 'brand',\n        variant: 'outline',\n      },\n      {\n        className: 'border-accent-border text-accent-default',\n        tone: 'accent',\n        variant: 'outline',\n      },\n      {\n        className: 'border-neutral-border text-neutral-default',\n        tone: 'neutral',\n        variant: 'outline',\n      },\n      {\n        className: 'border-error-border text-error-default',\n        tone: 'error',\n        variant: 'outline',\n      },\n      {\n        className: 'border-info-border text-info-default',\n        tone: 'info',\n        variant: 'outline',\n      },\n      {\n        className: 'border-success-border text-success-default',\n        tone: 'success',\n        variant: 'outline',\n      },\n      {\n        className: 'border-warning-border text-warning-default',\n        tone: 'warning',\n        variant: 'outline',\n      },\n      {\n        className: 'text-brand-default',\n        tone: 'brand',\n        variant: 'ghost',\n      },\n      {\n        className: 'text-accent-default',\n        tone: 'accent',\n        variant: 'ghost',\n      },\n      {\n        className: 'text-neutral-default',\n        tone: 'neutral',\n        variant: 'ghost',\n      },\n      {\n        className: 'text-error-default',\n        tone: 'error',\n        variant: 'ghost',\n      },\n      {\n        className: 'text-info-default',\n        tone: 'info',\n        variant: 'ghost',\n      },\n      {\n        className: 'text-success-default',\n        tone: 'success',\n        variant: 'ghost',\n      },\n      {\n        className: 'text-warning-default',\n        tone: 'warning',\n        variant: 'ghost',\n      },\n      {\n        className: 'border-brand-border bg-brand-container text-brand-on-container',\n        tone: 'brand',\n        variant: 'soft',\n      },\n      {\n        className: 'border-accent-border bg-accent-container text-accent-on-container',\n        tone: 'accent',\n        variant: 'soft',\n      },\n      {\n        className: 'border-neutral-border bg-neutral-container text-neutral-on-container',\n        tone: 'neutral',\n        variant: 'soft',\n      },\n      {\n        className: 'border-error-border bg-error-container text-error-on-container',\n        tone: 'error',\n        variant: 'soft',\n      },\n      {\n        className: 'border-info-border bg-info-container text-info-on-container',\n        tone: 'info',\n        variant: 'soft',\n      },\n      {\n        className: 'border-success-border bg-success-container text-success-on-container',\n        tone: 'success',\n        variant: 'soft',\n      },\n      {\n        className: 'border-warning-border bg-warning-container text-warning-on-container',\n        tone: 'warning',\n        variant: 'soft',\n      },\n      {\n        className: 'bg-brand-container text-brand-on-container',\n        tone: 'brand',\n        variant: 'elevated',\n      },\n      {\n        className: 'bg-accent-container text-accent-on-container',\n        tone: 'accent',\n        variant: 'elevated',\n      },\n      {\n        className: 'bg-surface-2 text-on-surface',\n        tone: 'neutral',\n        variant: 'elevated',\n      },\n      {\n        className: 'bg-error-container text-error-on-container',\n        tone: 'error',\n        variant: 'elevated',\n      },\n      {\n        className: 'bg-info-container text-info-on-container',\n        tone: 'info',\n        variant: 'elevated',\n      },\n      {\n        className: 'bg-success-container text-success-on-container',\n        tone: 'success',\n        variant: 'elevated',\n      },\n      {\n        className: 'bg-warning-container text-warning-on-container',\n        tone: 'warning',\n        variant: 'elevated',\n      },\n    ],\n    defaultVariants: {\n      orientation: 'horizontal',\n      tone: 'brand',\n      variant: 'fill',\n    },\n    variants: {\n      orientation: {\n        horizontal:\n          '[&>*+*]:relative [&>*+*]:before:absolute [&>*+*]:before:top-1/2 [&>*+*]:before:left-0 [&>*+*]:before:h-1/2 [&>*+*]:before:w-px [&>*+*]:before:-translate-y-1/2 [&>*+*]:before:content-[\"\"]',\n        vertical:\n          'flex-col [&>*+*]:relative [&>*+*]:before:absolute [&>*+*]:before:top-0 [&>*+*]:before:left-1/2 [&>*+*]:before:h-px [&>*+*]:before:w-1/2 [&>*+*]:before:-translate-x-1/2 [&>*+*]:before:content-[\"\"]',\n      },\n      tone: {\n        accent: '[&>*+*]:before:bg-accent-border',\n        brand: '[&>*+*]:before:bg-brand-border',\n        error: '[&>*+*]:before:bg-error-border',\n        info: '[&>*+*]:before:bg-info-border',\n        neutral: '[&>*+*]:before:bg-neutral-border',\n        success: '[&>*+*]:before:bg-success-border',\n        warning: '',\n      },\n      variant: {\n        elevated: 'shadow-xs',\n        fill: '',\n        ghost: '',\n        outline: 'border',\n        secondary: '',\n        soft: 'border',\n      },\n    },\n  },\n)\n\nexport type ButtonGroupProps = React.ComponentProps<'div'> &\n  VariantProps<typeof buttonGroupVariants> &\n  Pick<ButtonProps, 'size'>\n","import { cn } from '@/utils/cn'\n\nimport { ButtonGroupContext } from './button-group-context'\nimport { buttonGroupVariants } from './button-group.types'\nimport type { ButtonGroupProps } from './button-group.types'\n\nexport function ButtonGroup({\n  size = 'medium',\n  variant = 'fill',\n  tone = 'brand',\n  orientation,\n  className,\n  ref,\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <ButtonGroupContext value={{ size, tone, variant }}>\n      <div\n        className={cn(buttonGroupVariants({ orientation, tone, variant }), className)}\n        ref={ref}\n        {...props}\n      />\n    </ButtonGroupContext>\n  )\n}\n"],"mappings":";;;;;AAKA,MAAa,sBAAsB,IACjC,wOACA;CACE,kBAAkB;EAChB;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,aAAa;GACX,YACE;GACF,UACE;EACJ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,OAAO;GACP,MAAM;GACN,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,SAAS;GACP,UAAU;GACV,MAAM;GACN,OAAO;GACP,SAAS;GACT,WAAW;GACX,MAAM;EACR;CACF;AACF,CACF;;ACrPA,SAAgB,YAAY,EAC1B,OAAO,UACP,UAAU,QACV,OAAO,SACP,aACA,WACA,KACA,GAAG,SACgB;CACnB,OACE,oBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAM;GAAM;EAAQ;EAC/C,UAAA,oBAAC,OAAD;GACE,WAAW,GAAG,oBAAoB;IAAE;IAAa;IAAM;GAAQ,CAAC,GAAG,SAAS;GACvE;GACL,GAAI;EACL,CAAA;CACiB,CAAA;AAExB"}

package/dist/button-group-context-CScS9Ntz.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+// src/components/button-group/button-group-context.ts
+const ButtonGroupContext = createContext(void 0);
+const useButtonGroupContext = () => useContext(ButtonGroupContext);
+export { useButtonGroupContext as n, ButtonGroupContext as t };
+
+//# sourceMappingURL=button-group-context-CScS9Ntz.js.map

package/dist/button-group-context-CScS9Ntz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-context-CScS9Ntz.js","names":[],"sources":["../src/components/button-group/button-group-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { ButtonGroupProps } from './button-group.types'\n\ntype ButtonGroupContextValue = Pick<ButtonGroupProps, 'size' | 'tone' | 'variant'>\n\nconst ButtonGroupContext = createContext<ButtonGroupContextValue | undefined>(undefined),\n  useButtonGroupContext = () => useContext(ButtonGroupContext)\n\nexport { ButtonGroupContext, useButtonGroupContext }\n"],"mappings":";;AAMA,MAAM,qBAAqB,cAAmD,KAAA,CAAS;AACrF,MAAA,8BAA8B,WAAW,kBAAkB"}

package/dist/calendar/index.js

@@ -1,7 +1,7 @@
 import { t as cn } from "../cn-BDi0DfT5.js";
 import { t as formatDate } from "../utils-BI2x7nW5.js";
 import { n as Icon } from "../icon-D3JWfCa2.js";
-import { n as buttonVariants, t as Button } from "../button-BpUC-R1J.js";
+import { n as buttonVariants, t as Button } from "../button-DXQvyQyj.js";
 import { a as SelectPopup, c as SelectIcon, i as SelectTitle, n as SelectValue, o as SelectList, r as SelectTrigger, s as SelectItem, t as Select } from "../select-DncJXYim.js";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/code-block/index.d.ts

@@ -1,3 +1,4 @@
+import { t as CopyButton } from "../index-DVMheqs_.js";
 import { r as SelectTrigger } from "../index-CIDOd4Z8.js";
 import { t as Tabs } from "../index-DyQYoAUf.js";
 import React$1 from "react";
@@ -19,7 +20,9 @@ interface CodeBlockValue {
   icon?: React.ReactNode;
 }
 type CodeBlockTabsProps = React.ComponentProps<typeof Tabs>;
-type CodeBlockCopyProps = React.ComponentProps<'button'>;
+type CodeBlockCopyProps = Omit<React.ComponentProps<typeof CopyButton>, 'children' | 'content'> & {
+  children?: React.ReactNode;
+};
 type CodeBlockNameProps = React.ComponentProps<'div'>;
 type CodeBlockSelectProps = React.ComponentProps<typeof SelectTrigger>;
 type CodeBlockHeaderGroupProps = React.ComponentProps<'div'>;
@@ -28,7 +31,7 @@ type CodeBlockActionsProps = React.ComponentProps<'div'>;
 type CodeBlockWindowProps = React.ComponentProps<'div'>;
 declare function CodeBlock$1({ items, defaultValue, className, ref, ...props }: CodeBlockProps): React$1.JSX.Element;
 export declare function CodeBlockActions({ className, ref, ...props }: CodeBlockActionsProps): import("react").JSX.Element;
-export declare function CodeBlockCopy({ className, children, disabled, ref, ...props }: CodeBlockCopyProps): React$1.JSX.Element;
+export declare function CodeBlockCopy({ className, children, disabled, ref, ...props }: CodeBlockCopyProps): import("react").JSX.Element;
 export declare function CodeBlockDownload({ className, children, disabled, ref, ...props }: CodeBlockDownloadProps): React$1.JSX.Element;
 type CodeBlockHeaderProps = React.ComponentProps<'div'>;
 export declare function CodeBlockHeader({ className, ref, ...props }: CodeBlockHeaderProps): import("react").JSX.Element;

package/dist/code-block/index.js

@@ -1,10 +1,11 @@
 import { t as cn } from "../cn-BDi0DfT5.js";
 import { n as Icon } from "../icon-D3JWfCa2.js";
 import { t as trimTextChildren } from "../trim-text-children-CQRFg2fL.js";
-import { t as Button } from "../button-BpUC-R1J.js";
+import { t as Button } from "../button-DXQvyQyj.js";
 import { a as SelectPopup, c as SelectIcon, i as SelectTitle, n as SelectValue, o as SelectList, r as SelectTrigger, s as SelectItem, t as Select } from "../select-DncJXYim.js";
+import { t as CopyButton } from "../copy-button-BAG-P44v.js";
 import { i as TabsList, n as TabsTab, t as Tabs } from "../tabs-DTC7coap.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 // src/components/code-block/code-block.tsx
 const CodeBlockContext = React.createContext(void 0);
@@ -37,39 +38,23 @@ function CodeBlockActions({ className, ref, ...props }) {
 	});
 }
 // src/components/code-block/code-block-copy.tsx
-const COPY_TIMEOUT = 2e3;
 const COPY_STATUS_ICON = {
-	false: /* @__PURE__ */ jsx(Icon, {
-		name: "copy",
-		className: "animate-in zoom-in"
-	}),
-	true: /* @__PURE__ */ jsx(Icon, {
-		name: "selected",
-		className: "animate-in zoom-in"
-	})
+	false: /* @__PURE__ */ jsx(Icon, { name: "copy" }),
+	true: /* @__PURE__ */ jsx(Icon, { name: "selected" })
 };
 function CodeBlockCopy({ className, children, disabled, ref, ...props }) {
-	const { currentValue } = useCodeBlock(), { code } = currentValue, [copied, setCopied] = React.useState(false), handleClick = async () => {
-		try {
-			if (code === void 0) throw new Error("No source code available to copy");
-			await navigator.clipboard.writeText(code);
-			setCopied(true);
-			setTimeout(() => setCopied(false), COPY_TIMEOUT);
-		} catch (error) {
-			console.error("Failed to copy text:", error);
-		}
-	};
-	return /* @__PURE__ */ jsxs(Button, {
+	const { currentValue } = useCodeBlock(), { code } = currentValue;
+	return /* @__PURE__ */ jsx(CopyButton, {
 		"aria-label": "Copy code",
 		className: cn("", className),
-		onClick: handleClick,
 		ref,
 		size: "medium",
 		tone: "neutral",
 		variant: "ghost",
 		...props,
+		content: code ?? "",
 		disabled: disabled || code === void 0,
-		children: [children, COPY_STATUS_ICON[`${copied}`]]
+		children: (copied) => /* @__PURE__ */ jsxs(Fragment, { children: [children, COPY_STATUS_ICON[`${copied}`]] })
 	});
 }
 // src/components/code-block/code-block-download.tsx