ixia-ui-react 1.8.0 → 2.1.0

package/dist/toast/index.js

@@ -0,0 +1,216 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { n as Icon } from "../icon-D3JWfCa2.js";
+import { t as Button } from "../button-DXQvyQyj.js";
+import { t as Separator } from "../separator-DgIQp1cB.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Toast as Toast$1 } from "@base-ui/react/toast";
+// src/components/toast/anchored-toast-item.tsx
+function AnchoredToastItem({ className, ref, toast, ...props }) {
+	return /* @__PURE__ */ jsxs(Toast$1.Root, {
+		className: cn("group flex w-max origin-(--transform-origin) flex-col rounded-full bg-surface px-sm py-2xs shadow-lg transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0", className),
+		ref,
+		toast,
+		...props,
+		children: [/* @__PURE__ */ jsx(Toast$1.Arrow, { className: "data-[side=bottom]:-top-3xs data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-3xs data-[side=top]:rotate-180" }), /* @__PURE__ */ jsx(Toast$1.Content, { children: /* @__PURE__ */ jsx(Toast$1.Description, { className: "style-text-default--1" }) })]
+	});
+}
+// src/components/toast/toast-manager.ts
+const createToastManager = () => {
+	const manager = Toast$1.createToastManager(), add = (options) => manager.add({
+		...options,
+		data: {
+			...options.data,
+			icon: options.icon,
+			variant: options.variant
+		}
+	});
+	return {
+		...manager,
+		add
+	};
+};
+const useToastManager = () => {
+	const toast = Toast$1.useToastManager(), add = (options) => toast.add({
+		...options,
+		data: {
+			...options.data,
+			icon: options.icon,
+			variant: options.variant
+		}
+	});
+	return {
+		add,
+		toasts: toast.toasts
+	};
+};
+// src/components/toast/anchored-toasts.tsx
+function AnchoredToasts({ className, ref, ...props }) {
+	const { toasts } = useToastManager();
+	return /* @__PURE__ */ jsx(Toast$1.Portal, { children: /* @__PURE__ */ jsx(Toast$1.Viewport, {
+		"aria-label": "Anchored notifications",
+		className: cn("fixed top-auto right-[1rem] bottom-[1rem] z-10 mx-auto flex w-[250px] sm:right-[2rem] sm:bottom-[2rem] sm:w-[300px]", className),
+		ref,
+		...props,
+		children: toasts.map((toast) => /* @__PURE__ */ jsx(Toast$1.Positioner, {
+			className: "z-[calc(1000-var(--toast-index))]",
+			toast,
+			children: /* @__PURE__ */ jsx(AnchoredToastItem, { toast })
+		}, toast.id))
+	}) });
+}
+// src/components/toast/stack-toast-item.tsx
+const DEFAULT_DURATION = 1e4;
+const RING_RADIUS = 14;
+const RING_CIRCUMFERENCE = Math.PI * 28;
+function getVariantBgColor(variant) {
+	switch (variant) {
+		case "brand": return "bg-brand-default";
+		case "accent": return "bg-accent-default";
+		case "neutral": return "bg-neutral-default";
+		case "error": return "bg-error-default";
+		case "info": return "bg-info-default";
+		case "success": return "bg-success-default";
+		case "warning": return "bg-warning-default";
+		default: return "bg-neutral-default";
+	}
+}
+function getVariantBorderColor(variant) {
+	switch (variant) {
+		case "brand": return "border-brand-border-strong";
+		case "accent": return "border-accent-border-strong";
+		case "neutral": return "border-neutral-border-strong";
+		case "error": return "border-error-border-strong";
+		case "info": return "border-info-border-strong";
+		case "success": return "border-success-border-strong";
+		case "warning": return "border-warning-border-strong";
+		default: return "border-neutral-border-strong";
+	}
+}
+function getVariantIcon(variant, icon) {
+	if (icon) return React.createElement(icon);
+	switch (variant) {
+		case "error": return /* @__PURE__ */ jsx(Icon, {
+			name: "error",
+			weight: "fill"
+		});
+		case "success": return /* @__PURE__ */ jsx(Icon, {
+			name: "success",
+			weight: "fill"
+		});
+		case "warning": return /* @__PURE__ */ jsx(Icon, {
+			name: "warning",
+			weight: "fill"
+		});
+		default: return /* @__PURE__ */ jsx(Icon, {
+			name: "info",
+			weight: "fill"
+		});
+	}
+}
+function StackToastItem({ className, ref, toast, ...props }) {
+	const duration = toast.timeout ?? DEFAULT_DURATION, variant = toast.data?.variant, icon = toast.data?.icon;
+	return /* @__PURE__ */ jsxs(Toast$1.Root, {
+		className: cn("absolute right-[0px] bottom-[0px] left-auto z-[calc(1000-var(--toast-index))] mr-[0px] flex h-2xl origin-bottom transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] items-center justify-center gap-xs overflow-hidden rounded-full border bg-surface bg-clip-padding pr-sm shadow-lg select-none [--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s] after:absolute after:top-full after:left-[0px] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:h-(--toast-height) data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:transform-[translateY(150%)] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)]", className, getVariantBorderColor(variant)),
+		ref,
+		toast,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("flex aspect-square size-2xl items-center justify-center [&>svg]:size-lg [&>svg]:text-on-surface-inverse", getVariantBgColor(variant)),
+			children: getVariantIcon(variant, icon)
+		}), /* @__PURE__ */ jsxs(Toast$1.Content, {
+			className: "flex items-center justify-center gap-3xs overflow-hidden pl-2xs transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Toast$1.Title, { className: "style-text-strong--1" }), /* @__PURE__ */ jsx(Toast$1.Description, { className: "style-text-prose--1 whitespace-nowrap text-on-surface-variant" })] }), /* @__PURE__ */ jsxs("div", {
+				className: "ml-xl flex h-lg grow items-center justify-center gap-xs",
+				children: [
+					/* @__PURE__ */ jsx(Toast$1.Action, { render: ({ onClick, children }) => /* @__PURE__ */ jsx(Button, {
+						"data-testid": "toast-action-button",
+						onClick,
+						size: "small",
+						tone: toast.data?.variant,
+						variant: "soft",
+						children
+					}) }),
+					toast.actionProps && /* @__PURE__ */ jsx(Separator, {
+						variant: "strong",
+						orientation: "vertical",
+						weight: "thinnest"
+					}),
+					/* @__PURE__ */ jsxs(Toast$1.Close, {
+						"aria-label": "Close",
+						className: "relative flex size-sm items-center justify-center rounded-full bg-transparent p-xs text-on-surface-variant transition-colors hover:cursor-pointer hover:bg-error-container hover:text-error-on-container",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "pointer-events-none absolute inset-[0px] z-10 flex items-center justify-center",
+							children: /* @__PURE__ */ jsxs("svg", {
+								width: "100%",
+								height: "100%",
+								viewBox: "0 0 32 32",
+								className: "block -rotate-90",
+								children: [/* @__PURE__ */ jsx("style", { children: `
+                      @keyframes toast-drain-${toast.id} {
+                        from { stroke-dashoffset: 0; }
+                        to   { stroke-dashoffset: ${RING_CIRCUMFERENCE}; }
+                      }
+                ` }), /* @__PURE__ */ jsx("circle", {
+									cx: "16",
+									cy: "16",
+									r: RING_RADIUS,
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeDasharray: RING_CIRCUMFERENCE,
+									strokeLinecap: "round",
+									className: "text-error-border-strong",
+									style: { animation: `toast-drain-${toast.id} ${duration}ms linear forwards` }
+								})]
+							})
+						}), /* @__PURE__ */ jsx(Icon, {
+							name: "close",
+							className: "size-sm shrink-0"
+						})]
+					})
+				]
+			})]
+		})]
+	}, toast.id);
+}
+// src/components/toast/stack-toasts.tsx
+function StackToasts({ className, ref, ...props }) {
+	const { toasts } = useToastManager();
+	return /* @__PURE__ */ jsx(Toast$1.Portal, { children: /* @__PURE__ */ jsx(Toast$1.Viewport, {
+		"aria-label": "Notifications",
+		className: cn("fixed top-auto right-[1rem] bottom-[1rem] z-10 mx-auto flex w-[250px] sm:right-[2rem] sm:bottom-[2rem] sm:w-[300px]", className),
+		ref,
+		...props,
+		children: toasts.map((toast) => /* @__PURE__ */ jsx(StackToastItem, { toast }, toast.id))
+	}) });
+}
+// src/components/toast/toast-managers.ts
+const anchoredToastManager = createToastManager();
+const stackToastManager = createToastManager();
+// src/components/toast/toast-provider.tsx
+function ToastProvider({ children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Toast$1.Provider, {
+			timeout: 1e4,
+			toastManager: anchoredToastManager,
+			children: /* @__PURE__ */ jsx(AnchoredToasts, {})
+		}),
+		/* @__PURE__ */ jsx(Toast$1.Provider, {
+			timeout: 1e4,
+			toastManager: stackToastManager,
+			children: /* @__PURE__ */ jsx(StackToasts, {})
+		}),
+		children
+	] });
+}
+// src/components/toast/toast.tsx
+const Toast = Object.assign(ToastProvider, {
+	AnchoredToastItem,
+	AnchoredToasts,
+	StackToastItem,
+	StackToasts
+});
+export { AnchoredToastItem, AnchoredToasts, StackToastItem, StackToasts, Toast, ToastProvider, anchoredToastManager, stackToastManager, useToastManager };
+
+//# sourceMappingURL=index.js.map

package/dist/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BaseToast","BaseToast","BaseToast","BaseToast","BaseToast","BaseToast"],"sources":["../../src/components/toast/anchored-toast-item.tsx","../../src/components/toast/toast-manager.ts","../../src/components/toast/anchored-toasts.tsx","../../src/components/toast/stack-toast-item.tsx","../../src/components/toast/stack-toasts.tsx","../../src/components/toast/toast-managers.ts","../../src/components/toast/toast-provider.tsx","../../src/components/toast/toast.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AnchoredToastItemProps } from './toast.types'\n\nexport function AnchoredToastItem({ className, ref, toast, ...props }: AnchoredToastItemProps) {\n  return (\n    <BaseToast.Root\n      className={cn(\n        'group flex w-max origin-(--transform-origin) flex-col rounded-full bg-surface px-sm py-2xs shadow-lg transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0',\n        className,\n      )}\n      ref={ref}\n      toast={toast}\n      {...props}\n    >\n      <BaseToast.Arrow className=\"data-[side=bottom]:-top-3xs data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-3xs data-[side=top]:rotate-180\" />\n      <BaseToast.Content>\n        <BaseToast.Description className=\"style-text-default--1\" />\n      </BaseToast.Content>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport type { ToastManagerAddOptions } from '@base-ui/react/toast'\n\nimport type { IconComponent } from '../icon'\nimport type { ToastVariant } from './toast.types'\n\ntype ToastAddOptions = ToastManagerAddOptions<object> & {\n  icon?: IconComponent\n  variant?: ToastVariant\n}\n\nconst createToastManager = () => {\n    const manager = BaseToast.createToastManager(),\n      add = (options: ToastAddOptions) =>\n        manager.add({\n          ...options,\n          data: {\n            ...options.data,\n            icon: options.icon,\n            variant: options.variant,\n          },\n        })\n\n    return {\n      ...manager,\n      add,\n    }\n  },\n  useToastManager = () => {\n    const toast = BaseToast.useToastManager(),\n      add = (options: ToastAddOptions) =>\n        toast.add({\n          ...options,\n          data: {\n            ...options.data,\n            icon: options.icon,\n            variant: options.variant,\n          },\n        })\n\n    return { add, toasts: toast.toasts }\n  }\n\nexport { createToastManager, useToastManager }\n","import { Toast as BaseToast } from '@base-ui/react/toast'\n\nimport { cn } from '@/utils/cn'\n\nimport { AnchoredToastItem } from './anchored-toast-item'\nimport { useToastManager } from './toast-manager'\nimport type { AnchoredToastProps } from './toast.types'\n\nexport function AnchoredToasts({ className, ref, ...props }: AnchoredToastProps) {\n  const { toasts } = useToastManager()\n\n  return (\n    <BaseToast.Portal>\n      <BaseToast.Viewport\n        aria-label=\"Anchored notifications\"\n        className={cn(\n          'fixed top-auto right-[1rem] bottom-[1rem] z-10 mx-auto flex w-[250px] sm:right-[2rem] sm:bottom-[2rem] sm:w-[300px]',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {toasts.map((toast) => (\n          <BaseToast.Positioner\n            className=\"z-[calc(1000-var(--toast-index))]\"\n            key={toast.id}\n            toast={toast}\n          >\n            <AnchoredToastItem toast={toast} />\n          </BaseToast.Positioner>\n        ))}\n      </BaseToast.Viewport>\n    </BaseToast.Portal>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport type { IconComponent } from '../icon'\nimport { Separator } from '../separator'\nimport type { StackToastItemProps, ToastVariant } from './toast.types'\n\nconst DEFAULT_DURATION = 10_000,\n  RING_RADIUS = 14,\n  RING_DIAMETER = RING_RADIUS + RING_RADIUS,\n  RING_CIRCUMFERENCE = Math.PI * RING_DIAMETER\n\nfunction getVariantBgColor(variant: ToastVariant | undefined): string {\n  switch (variant) {\n    case 'brand': {\n      return 'bg-brand-default'\n    }\n    case 'accent': {\n      return 'bg-accent-default'\n    }\n    case 'neutral': {\n      return 'bg-neutral-default'\n    }\n    case 'error': {\n      return 'bg-error-default'\n    }\n    case 'info': {\n      return 'bg-info-default'\n    }\n    case 'success': {\n      return 'bg-success-default'\n    }\n    case 'warning': {\n      return 'bg-warning-default'\n    }\n    default: {\n      return 'bg-neutral-default'\n    }\n  }\n}\n\nfunction getVariantBorderColor(variant: ToastVariant | undefined): string {\n  switch (variant) {\n    case 'brand': {\n      return 'border-brand-border-strong'\n    }\n    case 'accent': {\n      return 'border-accent-border-strong'\n    }\n    case 'neutral': {\n      return 'border-neutral-border-strong'\n    }\n    case 'error': {\n      return 'border-error-border-strong'\n    }\n    case 'info': {\n      return 'border-info-border-strong'\n    }\n    case 'success': {\n      return 'border-success-border-strong'\n    }\n    case 'warning': {\n      return 'border-warning-border-strong'\n    }\n    default: {\n      return 'border-neutral-border-strong'\n    }\n  }\n}\n\nfunction getVariantIcon(variant: ToastVariant | undefined, icon?: IconComponent) {\n  if (icon) {\n    return React.createElement(icon)\n  }\n  switch (variant) {\n    case 'error': {\n      return <Icon name=\"error\" weight=\"fill\" />\n    }\n    case 'success': {\n      return <Icon name=\"success\" weight=\"fill\" />\n    }\n    case 'warning': {\n      return <Icon name=\"warning\" weight=\"fill\" />\n    }\n    default: {\n      return <Icon name=\"info\" weight=\"fill\" />\n    }\n  }\n}\n\nexport function StackToastItem({ className, ref, toast, ...props }: StackToastItemProps) {\n  const duration = toast.timeout ?? DEFAULT_DURATION,\n    variant = toast.data?.variant,\n    icon = toast.data?.icon\n\n  return (\n    <BaseToast.Root\n      className={cn(\n        \"absolute right-[0px] bottom-[0px] left-auto z-[calc(1000-var(--toast-index))] mr-[0px] flex h-2xl origin-bottom transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] items-center justify-center gap-xs overflow-hidden rounded-full border bg-surface bg-clip-padding pr-sm shadow-lg select-none [--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s] after:absolute after:top-full after:left-[0px] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:h-(--toast-height) data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:transform-[translateY(150%)] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)]\",\n        className,\n        getVariantBorderColor(variant),\n      )}\n      key={toast.id}\n      ref={ref}\n      toast={toast}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex aspect-square size-2xl items-center justify-center [&>svg]:size-lg [&>svg]:text-on-surface-inverse',\n          getVariantBgColor(variant),\n        )}\n      >\n        {getVariantIcon(variant, icon)}\n      </div>\n      <BaseToast.Content className=\"flex items-center justify-center gap-3xs overflow-hidden pl-2xs transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100\">\n        <div>\n          <BaseToast.Title className=\"style-text-strong--1\" />\n          <BaseToast.Description className=\"style-text-prose--1 whitespace-nowrap text-on-surface-variant\" />\n        </div>\n        <div className=\"ml-xl flex h-lg grow items-center justify-center gap-xs\">\n          <BaseToast.Action\n            render={({ onClick, children }) => (\n              <Button\n                data-testid=\"toast-action-button\"\n                onClick={onClick}\n                size=\"small\"\n                tone={toast.data?.variant}\n                variant=\"soft\"\n              >\n                {children}\n              </Button>\n            )}\n          />\n          {toast.actionProps && (\n            <Separator variant=\"strong\" orientation=\"vertical\" weight=\"thinnest\" />\n          )}\n          <BaseToast.Close\n            aria-label=\"Close\"\n            className=\"relative flex size-sm items-center justify-center rounded-full bg-transparent p-xs text-on-surface-variant transition-colors hover:cursor-pointer hover:bg-error-container hover:text-error-on-container\"\n          >\n            <span className=\"pointer-events-none absolute inset-[0px] z-10 flex items-center justify-center\">\n              <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 32 32\" className=\"block -rotate-90\">\n                <style>{`\n                      @keyframes toast-drain-${toast.id} {\n                        from { stroke-dashoffset: 0; }\n                        to   { stroke-dashoffset: ${RING_CIRCUMFERENCE}; }\n                      }\n                `}</style>\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  r={RING_RADIUS}\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeDasharray={RING_CIRCUMFERENCE}\n                  strokeLinecap=\"round\"\n                  className=\"text-error-border-strong\"\n                  style={{\n                    animation: `toast-drain-${toast.id} ${duration}ms linear forwards`,\n                  }}\n                />\n              </svg>\n            </span>\n\n            <Icon name=\"close\" className=\"size-sm shrink-0\" />\n          </BaseToast.Close>\n        </div>\n      </BaseToast.Content>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\n\nimport { cn } from '@/utils/cn'\n\nimport { StackToastItem } from './stack-toast-item'\nimport { useToastManager } from './toast-manager'\nimport type { StackToastProps } from './toast.types'\n\nexport function StackToasts({ className, ref, ...props }: StackToastProps) {\n  const { toasts } = useToastManager()\n\n  return (\n    <BaseToast.Portal>\n      <BaseToast.Viewport\n        aria-label=\"Notifications\"\n        className={cn(\n          'fixed top-auto right-[1rem] bottom-[1rem] z-10 mx-auto flex w-[250px] sm:right-[2rem] sm:bottom-[2rem] sm:w-[300px]',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {toasts.map((toast) => (\n          <StackToastItem key={toast.id} toast={toast} />\n        ))}\n      </BaseToast.Viewport>\n    </BaseToast.Portal>\n  )\n}\n","import { createToastManager } from './toast-manager'\n\nconst anchoredToastManager = createToastManager(),\n  stackToastManager = createToastManager()\n\nexport { anchoredToastManager, stackToastManager }\n","import { Toast as BaseToast } from '@base-ui/react/toast'\n\nimport { AnchoredToasts } from './anchored-toasts'\nimport { StackToasts } from './stack-toasts'\nimport { anchoredToastManager, stackToastManager } from './toast-managers'\nimport type { ToastProviderProps } from './toast.types'\n\nexport function ToastProvider({ children }: ToastProviderProps) {\n  return (\n    <>\n      <BaseToast.Provider timeout={10_000} toastManager={anchoredToastManager}>\n        <AnchoredToasts />\n      </BaseToast.Provider>\n      <BaseToast.Provider timeout={10_000} toastManager={stackToastManager}>\n        <StackToasts />\n      </BaseToast.Provider>\n      {children}\n    </>\n  )\n}\n","import { AnchoredToastItem } from './anchored-toast-item'\nimport { AnchoredToasts } from './anchored-toasts'\nimport { StackToastItem } from './stack-toast-item'\nimport { StackToasts } from './stack-toasts'\nimport { ToastProvider } from './toast-provider'\n\nconst Toast = Object.assign(ToastProvider, {\n  AnchoredToastItem,\n  AnchoredToasts,\n  StackToastItem,\n  StackToasts,\n})\n\nexport { Toast }\n"],"mappings":";;;;;;;;AAMA,SAAgB,kBAAkB,EAAE,WAAW,KAAK,OAAO,GAAG,SAAiC;CAC7F,OACE,qBAACA,QAAU,MAAX;EACE,WAAW,GACT,+PACA,SACF;EACK;EACE;EACP,GAAI;EAPN,UAAA,CASE,oBAACA,QAAU,OAAX,EAAiB,WAAU,2MAA4M,CAAA,GACvO,oBAACA,QAAU,SAAX,EAAA,UACE,oBAACA,QAAU,aAAX,EAAuB,WAAU,wBAAyB,CAAA,EACzC,CAAA,CACL;;AAEpB;;ACZA,MAAM,2BAA2B;CAC7B,MAAM,UAAUC,QAAU,mBAAmB,GAC3C,OAAO,YACL,QAAQ,IAAI;EACV,GAAG;EACH,MAAM;GACJ,GAAG,QAAQ;GACX,MAAM,QAAQ;GACd,SAAS,QAAQ;EACnB;CACF,CAAC;CAEL,OAAO;EACL,GAAG;EACH;CACF;AACF;AACA,MAAA,wBAAwB;CACtB,MAAM,QAAQA,QAAU,gBAAgB,GACtC,OAAO,YACL,MAAM,IAAI;EACR,GAAG;EACH,MAAM;GACJ,GAAG,QAAQ;GACX,MAAM,QAAQ;GACd,SAAS,QAAQ;EACnB;CACF,CAAC;CAEL,OAAO;EAAE;EAAK,QAAQ,MAAM;CAAO;AACrC;;ACjCF,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA6B;CAC/E,MAAM,EAAE,WAAW,gBAAgB;CAEnC,OACE,oBAACC,QAAU,QAAX,EAAA,UACE,oBAACA,QAAU,UAAX;EACE,cAAW;EACX,WAAW,GACT,uHACA,SACF;EACK;EACL,GAAI;EAEH,UAAA,OAAO,KAAK,UACX,oBAACA,QAAU,YAAX;GACE,WAAU;GAEH;GAEP,UAAA,oBAAC,mBAAD,EAA0B,MAAQ,CAAA;EACd,GAJf,MAAM,EAIS,CACvB;CACiB,CAAA,EACJ,CAAA;AAEtB;;ACvBA,MAAM,mBAAmB;AACvB,MAAA,cAAc;AAEd,MAAA,qBAAqB,KAAK,KAAK;AAEjC,SAAS,kBAAkB,SAA2C;CACpE,QAAQ,SAAR;EACE,KAAK,SACH,OAAO;EAET,KAAK,UACH,OAAO;EAET,KAAK,WACH,OAAO;EAET,KAAK,SACH,OAAO;EAET,KAAK,QACH,OAAO;EAET,KAAK,WACH,OAAO;EAET,KAAK,WACH,OAAO;EAET,SACE,OAAO;CAEX;AACF;AAEA,SAAS,sBAAsB,SAA2C;CACxE,QAAQ,SAAR;EACE,KAAK,SACH,OAAO;EAET,KAAK,UACH,OAAO;EAET,KAAK,WACH,OAAO;EAET,KAAK,SACH,OAAO;EAET,KAAK,QACH,OAAO;EAET,KAAK,WACH,OAAO;EAET,KAAK,WACH,OAAO;EAET,SACE,OAAO;CAEX;AACF;AAEA,SAAS,eAAe,SAAmC,MAAsB;CAC/E,IAAI,MACF,OAAO,MAAM,cAAc,IAAI;CAEjC,QAAQ,SAAR;EACE,KAAK,SACH,OAAO,oBAAC,MAAD;GAAM,MAAK;GAAQ,QAAO;EAAQ,CAAA;EAE3C,KAAK,WACH,OAAO,oBAAC,MAAD;GAAM,MAAK;GAAU,QAAO;EAAQ,CAAA;EAE7C,KAAK,WACH,OAAO,oBAAC,MAAD;GAAM,MAAK;GAAU,QAAO;EAAQ,CAAA;EAE7C,SACE,OAAO,oBAAC,MAAD;GAAM,MAAK;GAAO,QAAO;EAAQ,CAAA;CAE5C;AACF;AAEA,SAAgB,eAAe,EAAE,WAAW,KAAK,OAAO,GAAG,SAA8B;CACvF,MAAM,WAAW,MAAM,WAAW,kBAChC,UAAU,MAAM,MAAM,SACtB,OAAO,MAAM,MAAM;CAErB,OACE,qBAACC,QAAU,MAAX;EACE,WAAW,GACT,ytEACA,WACA,sBAAsB,OAAO,CAC/B;EAEK;EACE;EACP,GAAI;EATN,UAAA,CAWE,oBAAC,OAAD;GACE,WAAW,GACT,2GACA,kBAAkB,OAAO,CAC3B;GAEC,UAAA,eAAe,SAAS,IAAI;EAC1B,CAAA,GACL,qBAACA,QAAU,SAAX;GAAmB,WAAU;GAA7B,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA,CACE,oBAACA,QAAU,OAAX,EAAiB,WAAU,uBAAwB,CAAA,GACnD,oBAACA,QAAU,aAAX,EAAuB,WAAU,gEAAiE,CAAA,CAC/F,EAAA,CAAA,GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAACA,QAAU,QAAX,EACE,SAAS,EAAE,SAAS,eAClB,oBAAC,QAAD;MACE,eAAY;MACH;MACT,MAAK;MACL,MAAM,MAAM,MAAM;MAClB,SAAQ;MAEP;KACK,CAAA,EAEX,CAAA;KACA,MAAM,eACL,oBAAC,WAAD;MAAW,SAAQ;MAAS,aAAY;MAAW,QAAO;KAAY,CAAA;KAExE,qBAACA,QAAU,OAAX;MACE,cAAW;MACX,WAAU;MAFZ,UAAA,CAIE,oBAAC,QAAD;OAAM,WAAU;OACd,UAAA,qBAAC,OAAD;QAAK,OAAM;QAAO,QAAO;QAAO,SAAQ;QAAY,WAAU;QAA9D,UAAA,CACE,oBAAC,SAAD,EAAA,UAAQ;+CACuB,MAAM,GAAG;;oDAEJ,mBAAmB;;kBAE9C,CAAA,GACT,oBAAC,UAAD;SACE,IAAG;SACH,IAAG;SACH,GAAG;SACH,MAAK;SACL,QAAO;SACP,aAAY;SACZ,iBAAiB;SACjB,eAAc;SACd,WAAU;SACV,OAAO,EACL,WAAW,eAAe,MAAM,GAAG,GAAG,SAAS,oBACjD;QACD,CAAA,CACE;;MACD,CAAA,GAEN,oBAAC,MAAD;OAAM,MAAK;OAAQ,WAAU;MAAoB,CAAA,CAClC;;IACd;GACY,CAAA,CAAA;EACL,CAAA,CAAA;CApET,GAAA,MAAM,EAoEG;AAEpB;;ACxKA,SAAgB,YAAY,EAAE,WAAW,KAAK,GAAG,SAA0B;CACzE,MAAM,EAAE,WAAW,gBAAgB;CAEnC,OACE,oBAACC,QAAU,QAAX,EAAA,UACE,oBAACA,QAAU,UAAX;EACE,cAAW;EACX,WAAW,GACT,uHACA,SACF;EACK;EACL,GAAI;EAEH,UAAA,OAAO,KAAK,UACX,oBAAC,gBAAD,EAAsC,MAAQ,GAAzB,MAAM,EAAmB,CAC/C;CACiB,CAAA,EACJ,CAAA;AAEtB;;AC1BA,MAAM,uBAAuB,mBAAmB;AAC9C,MAAA,oBAAoB,mBAAmB;;ACIzC,SAAgB,cAAc,EAAE,YAAgC;CAC9D,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAACC,QAAU,UAAX;GAAoB,SAAS;GAAQ,cAAc;GACjD,UAAA,oBAAC,gBAAD,CAAiB,CAAA;EACC,CAAA;EACpB,oBAACA,QAAU,UAAX;GAAoB,SAAS;GAAQ,cAAc;GACjD,UAAA,oBAAC,aAAD,CAAc,CAAA;EACI,CAAA;EACnB;CACD,EAAA,CAAA;AAEN;;ACbA,MAAM,QAAQ,OAAO,OAAO,eAAe;CACzC;CACA;CACA;CACA;AACF,CAAC"}

package/dist/toggle/index.d.ts

@@ -0,0 +1,2 @@
+import { n as ToggleProps, t as Toggle } from "../index-C15xiG9O.js";
+export { Toggle, type ToggleProps };

package/dist/toggle/index.js

@@ -0,0 +1 @@
+export { t as Toggle } from "../toggle-ZT9thVmz.js";

package/dist/toggle-ZT9thVmz.js

@@ -0,0 +1,73 @@
+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 { t as ToggleGroupContext } from "./toggle-group-context-CBNZEf1I.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+// src/components/toggle/toggle.types.ts
+const toggleVariants = cva("flex items-center justify-center rounded-full text-on-surface-variant transition-all hover:cursor-pointer disabled:opacity-70", {
+	defaultVariants: {
+		size: "medium",
+		tone: "brand"
+	},
+	variants: {
+		size: {
+			large: "h-2xl gap-xs px-sm font-body text-base 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",
+			medium: "h-xl gap-2xs px-xs font-body text-sm 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",
+			small: "h-lg gap-3xs px-2xs font-body text-xs 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"
+		},
+		tone: {
+			accent: "hover:not-disabled:bg-accent-container hover:not-disabled:text-accent-on-container data-pressed:text-accent-default",
+			brand: "hover:not-disabled:bg-brand-container hover:not-disabled:text-brand-on-container data-pressed:text-brand-default",
+			error: "hover:not-disabled:bg-error-container hover:not-disabled:text-error-on-container data-pressed:text-error-default",
+			info: "hover:not-disabled:bg-info-container hover:not-disabled:text-info-on-container data-pressed:text-info-default",
+			neutral: "hover:not-disabled:bg-neutral-container hover:not-disabled:text-neutral-on-container data-pressed:text-neutral-default",
+			success: "hover:not-disabled:bg-success-container hover:not-disabled:text-success-on-container data-pressed:text-success-default",
+			warning: "hover:not-disabled:bg-warning-container hover:not-disabled:text-warning-on-container data-pressed:text-warning-default"
+		}
+	}
+});
+const toggleGroupHoverVariants = cva("", {
+	defaultVariants: { tone: "brand" },
+	variants: { tone: {
+		accent: "hover:not-disabled:bg-accent-container-high",
+		brand: "hover:not-disabled:bg-brand-container-high",
+		error: "hover:not-disabled:bg-error-container-high",
+		info: "hover:not-disabled:bg-info-container-high",
+		neutral: "hover:not-disabled:bg-neutral-container-high",
+		success: "hover:not-disabled:bg-success-container-high",
+		warning: "hover:not-disabled:bg-warning-container-high"
+	} }
+});
+// src/components/toggle/toggle.tsx
+function getContent(children, state) {
+	if (typeof children === "function") return children(state);
+	return children;
+}
+function Toggle$1({ size, tone, className, children, ref, ...props }) {
+	const toggleGroupContext = useContext(ToggleGroupContext), effectiveSize = size ?? toggleGroupContext?.size ?? "medium";
+	return /* @__PURE__ */ jsx(Toggle, {
+		ref,
+		...props,
+		render: (innerProps, state) => {
+			const content = getContent(children, state);
+			let iconOnly = void 0;
+			if (hasSingleElementChild(content)) iconOnly = "";
+			return /* @__PURE__ */ jsx("button", {
+				...innerProps,
+				"data-icon-only": iconOnly,
+				className: cn(toggleVariants({
+					size: effectiveSize,
+					tone
+				}), toggleGroupContext?.hasBackground && toggleGroupHoverVariants({ tone }), className),
+				type: "button",
+				children: trimTextChildren(content)
+			});
+		}
+	});
+}
+export { Toggle$1 as t };
+
+//# sourceMappingURL=toggle-ZT9thVmz.js.map

package/dist/toggle-ZT9thVmz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-ZT9thVmz.js","names":["Toggle","BaseToggle"],"sources":["../src/components/toggle/toggle.types.ts","../src/components/toggle/toggle.tsx"],"sourcesContent":["import type { Toggle, ToggleState } from '@base-ui/react'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nexport const toggleVariants = cva(\n    'flex items-center justify-center rounded-full text-on-surface-variant transition-all hover:cursor-pointer disabled:opacity-70',\n    {\n      defaultVariants: {\n        size: 'medium',\n        tone: 'brand',\n      },\n      variants: {\n        size: {\n          large:\n            'h-2xl gap-xs px-sm font-body text-base 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 gap-2xs px-xs font-body text-sm 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 gap-3xs px-2xs font-body text-xs 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            'hover:not-disabled:bg-accent-container hover:not-disabled:text-accent-on-container data-pressed:text-accent-default',\n          brand:\n            'hover:not-disabled:bg-brand-container hover:not-disabled:text-brand-on-container data-pressed:text-brand-default',\n          error:\n            'hover:not-disabled:bg-error-container hover:not-disabled:text-error-on-container data-pressed:text-error-default',\n          info: 'hover:not-disabled:bg-info-container hover:not-disabled:text-info-on-container data-pressed:text-info-default',\n          neutral:\n            'hover:not-disabled:bg-neutral-container hover:not-disabled:text-neutral-on-container data-pressed:text-neutral-default',\n          success:\n            'hover:not-disabled:bg-success-container hover:not-disabled:text-success-on-container data-pressed:text-success-default',\n          warning:\n            'hover:not-disabled:bg-warning-container hover:not-disabled:text-warning-on-container data-pressed:text-warning-default',\n        },\n      },\n    },\n  ),\n  toggleGroupHoverVariants = cva('', {\n    defaultVariants: {\n      tone: 'brand',\n    },\n    variants: {\n      tone: {\n        accent: 'hover:not-disabled:bg-accent-container-high',\n        brand: 'hover:not-disabled:bg-brand-container-high',\n        error: 'hover:not-disabled:bg-error-container-high',\n        info: 'hover:not-disabled:bg-info-container-high',\n        neutral: 'hover:not-disabled:bg-neutral-container-high',\n        success: 'hover:not-disabled:bg-success-container-high',\n        warning: 'hover:not-disabled:bg-warning-container-high',\n      },\n    },\n  })\n\nexport type ToggleProps = Omit<React.ComponentProps<typeof Toggle>, 'children'> &\n  VariantProps<typeof toggleVariants> & {\n    children?: React.ReactNode | ((state: ToggleState) => React.ReactNode)\n  }\n","import type { ToggleState } from '@base-ui/react'\nimport { Toggle as BaseToggle } from '@base-ui/react/toggle'\nimport { useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nimport { cn } from '@/utils/cn'\nimport { hasSingleElementChild } from '@/utils/has-single-element-child'\nimport { trimTextChildren } from '@/utils/trim-text-children'\n\nimport { ToggleGroupContext } from '../toggle-group/toggle-group-context'\nimport { toggleGroupHoverVariants, toggleVariants } from './toggle.types'\nimport type { ToggleProps } from './toggle.types'\n\nfunction getContent(children: ToggleProps['children'], state: ToggleState): ReactNode {\n  if (typeof children === 'function') {\n    return children(state)\n  }\n  return children\n}\n\nexport function Toggle({ size, tone, className, children, ref, ...props }: ToggleProps) {\n  const toggleGroupContext = useContext(ToggleGroupContext),\n    effectiveSize = size ?? toggleGroupContext?.size ?? 'medium'\n\n  return (\n    <BaseToggle\n      ref={ref}\n      {...props}\n      render={(innerProps, state) => {\n        const content = getContent(children, state)\n        let iconOnly: '' | undefined = undefined\n\n        if (hasSingleElementChild(content)) {\n          iconOnly = ''\n        }\n\n        return (\n          <button\n            {...innerProps}\n            data-icon-only={iconOnly}\n            className={cn(\n              toggleVariants({ size: effectiveSize, tone }),\n              toggleGroupContext?.hasBackground && toggleGroupHoverVariants({ tone }),\n              className,\n            )}\n            type=\"button\"\n          >\n            {trimTextChildren(content)}\n          </button>\n        )\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;AAIA,MAAa,iBAAiB,IAC1B,iIACA;CACE,iBAAiB;EACf,MAAM;EACN,MAAM;CACR;CACA,UAAU;EACR,MAAM;GACJ,OACE;GACF,QACE;GACF,OACE;EACJ;EACA,MAAM;GACJ,QACE;GACF,OACE;GACF,OACE;GACF,MAAM;GACN,SACE;GACF,SACE;GACF,SACE;EACJ;CACF;AACF,CACF;AACA,MAAA,2BAA2B,IAAI,IAAI;CACjC,iBAAiB,EACf,MAAM,QACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,SAAS;CACX,EACF;AACF,CAAC;;ACxCH,SAAS,WAAW,UAAmC,OAA+B;CACpF,IAAI,OAAO,aAAa,YACtB,OAAO,SAAS,KAAK;CAEvB,OAAO;AACT;AAEA,SAAgBA,SAAO,EAAE,MAAM,MAAM,WAAW,UAAU,KAAK,GAAG,SAAsB;CACtF,MAAM,qBAAqB,WAAW,kBAAkB,GACtD,gBAAgB,QAAQ,oBAAoB,QAAQ;CAEtD,OACE,oBAACC,QAAD;EACO;EACL,GAAI;EACJ,SAAS,YAAY,UAAU;GAC7B,MAAM,UAAU,WAAW,UAAU,KAAK;GAC1C,IAAI,WAA2B,KAAA;GAE/B,IAAI,sBAAsB,OAAO,GAC/B,WAAW;GAGb,OACE,oBAAC,UAAD;IACE,GAAI;IACJ,kBAAgB;IAChB,WAAW,GACT,eAAe;KAAE,MAAM;KAAe;IAAK,CAAC,GAC5C,oBAAoB,iBAAiB,yBAAyB,EAAE,KAAK,CAAC,GACtE,SACF;IACA,MAAK;IAEJ,UAAA,iBAAiB,OAAO;GACnB,CAAA;EAEZ;CACD,CAAA;AAEL"}

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

@@ -0,0 +1,10 @@
+import { VariantProps } from "class-variance-authority";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+declare const toggleGroupVariants: (props?: ({
+  size?: "large" | "medium" | "small" | null | undefined;
+  variant?: "default" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ToggleGroupProps = React.ComponentProps<typeof ToggleGroup$1> & VariantProps<typeof toggleGroupVariants>;
+export declare function ToggleGroup({ size, variant, className, ref, ...props }: ToggleGroupProps): import("react").JSX.Element;
+export type { ToggleGroupProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/toggle-group/index.js

@@ -0,0 +1,63 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { t as ToggleGroupContext } from "../toggle-group-context-CBNZEf1I.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+// src/components/toggle-group/toggle-group.types.ts
+const toggleGroupVariants = cva("group flex w-fit items-center justify-center gap-3xs rounded-full", {
+	compoundVariants: [
+		{
+			className: "p-3xs",
+			size: "small",
+			variant: "default"
+		},
+		{
+			className: "p-2xs",
+			size: "medium",
+			variant: "default"
+		},
+		{
+			className: "p-2xs",
+			size: "large",
+			variant: "default"
+		}
+	],
+	defaultVariants: {
+		size: "medium",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			large: "",
+			medium: "",
+			small: ""
+		},
+		variant: {
+			default: "bg-surface-low",
+			ghost: "bg-transparent"
+		}
+	}
+});
+// src/components/toggle-group/toggle-group.tsx
+function ToggleGroup({ size = "medium", variant, className, ref, ...props }) {
+	const displaySize = size ?? "medium", hasBackground = variant === void 0 || variant === "default";
+	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		value: {
+			hasBackground,
+			size: displaySize
+		},
+		children: /* @__PURE__ */ jsx(ToggleGroup$1, {
+			className: cn(toggleGroupVariants({
+				className,
+				size: displaySize,
+				variant
+			})),
+			"data-size": displaySize,
+			ref,
+			...props
+		})
+	});
+}
+export { ToggleGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/toggle-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BaseToggleGroup"],"sources":["../../src/components/toggle-group/toggle-group.types.ts","../../src/components/toggle-group/toggle-group.tsx"],"sourcesContent":["import type { ToggleGroup } from '@base-ui/react/toggle-group'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nexport const toggleGroupVariants = cva(\n  'group flex w-fit items-center justify-center gap-3xs rounded-full',\n  {\n    compoundVariants: [\n      {\n        className: 'p-3xs',\n        size: 'small',\n        variant: 'default',\n      },\n      {\n        className: 'p-2xs',\n        size: 'medium',\n        variant: 'default',\n      },\n      {\n        className: 'p-2xs',\n        size: 'large',\n        variant: 'default',\n      },\n    ],\n    defaultVariants: {\n      size: 'medium',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        large: '',\n        medium: '',\n        small: '',\n      },\n      variant: {\n        default: 'bg-surface-low',\n        ghost: 'bg-transparent',\n      },\n    },\n  },\n)\n\nexport type ToggleGroupProps = React.ComponentProps<typeof ToggleGroup> &\n  VariantProps<typeof toggleGroupVariants>\n","import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\n\nimport { cn } from '@/utils/cn'\n\nimport { ToggleGroupContext } from './toggle-group-context'\nimport { toggleGroupVariants } from './toggle-group.types'\nimport type { ToggleGroupProps } from './toggle-group.types'\n\nexport function ToggleGroup({\n  size = 'medium',\n  variant,\n  className,\n  ref,\n  ...props\n}: ToggleGroupProps) {\n  const displaySize = size ?? 'medium',\n    hasBackground = variant === undefined || variant === 'default'\n  return (\n    <ToggleGroupContext.Provider value={{ hasBackground, size: displaySize }}>\n      <BaseToggleGroup\n        className={cn(toggleGroupVariants({ className, size: displaySize, variant }))}\n        data-size={displaySize}\n        ref={ref}\n        {...props}\n      />\n    </ToggleGroupContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAIA,MAAa,sBAAsB,IACjC,qEACA;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;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,OAAO;EACT;CACF;AACF,CACF;;AChCA,SAAgB,YAAY,EAC1B,OAAO,UACP,SACA,WACA,KACA,GAAG,SACgB;CACnB,MAAM,cAAc,QAAQ,UAC1B,gBAAgB,YAAY,KAAA,KAAa,YAAY;CACvD,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;GAAE;GAAe,MAAM;EAAY;EACrE,UAAA,oBAACA,eAAD;GACE,WAAW,GAAG,oBAAoB;IAAE;IAAW,MAAM;IAAa;GAAQ,CAAC,CAAC;GAC5E,aAAW;GACN;GACL,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC"}

package/dist/toggle-group-context-CBNZEf1I.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+// src/components/toggle-group/toggle-group-context.ts
+const ToggleGroupContext = createContext(void 0);
+export { ToggleGroupContext as t };
+
+//# sourceMappingURL=toggle-group-context-CBNZEf1I.js.map

package/dist/toggle-group-context-CBNZEf1I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-context-CBNZEf1I.js","names":[],"sources":["../src/components/toggle-group/toggle-group-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\ninterface ToggleGroupContextType {\n  hasBackground: boolean\n  size?: 'small' | 'medium' | 'large'\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextType | undefined>(undefined),\n  useToggleGroupContext = () => {\n    const context = useContext(ToggleGroupContext)\n    return context\n  }\n\nexport { ToggleGroupContext, useToggleGroupContext }\nexport type { ToggleGroupContextType }\n"],"mappings":";;AAOA,MAAM,qBAAqB,cAAkD,KAAA,CAAS"}

package/dist/tooltip/index.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+type TooltipProps = ComponentProps<typeof Tooltip$1.Root>;
+type TooltipTriggerProps = ComponentProps<typeof Tooltip$1.Trigger>;
+type TooltipContentProps = ComponentProps<typeof Tooltip$1.Popup> & {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  alignOffset?: number;
+  sideOffset?: number;
+};
+declare function Tooltip$2({ ...props }: TooltipProps): import("react").JSX.Element;
+export declare function TooltipContent({ side, alignOffset, sideOffset, className, children, ...props }: TooltipContentProps): import("react").JSX.Element;
+export declare function TooltipTrigger({ children, ...props }: TooltipTriggerProps): import("react").JSX.Element;
+declare const Tooltip: typeof Tooltip$2 & {
+  Content: typeof TooltipContent;
+  Trigger: typeof TooltipTrigger;
+};
+export { Tooltip, type TooltipContentProps, type TooltipProps, type TooltipTriggerProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/tooltip/index.js

@@ -0,0 +1 @@
+export { t as Tooltip, r as TooltipContent, n as TooltipTrigger } from "../tooltip-B6z3tDbW.js";

package/dist/tooltip-B6z3tDbW.js

@@ -0,0 +1,41 @@
+import { t as cn } from "./cn-BDi0DfT5.js";
+import { jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/components/tooltip/tooltip.tsx
+function Tooltip$2({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsx(Tooltip.Root, { ...props }) });
+}
+// src/components/tooltip/tooltip-context.tsx
+const DEFAULT_ALIGN_OFFSET = 0;
+const DEFAULT_SIDE_OFFSET = 5;
+function TooltipContent({ side = "top", alignOffset = DEFAULT_ALIGN_OFFSET, sideOffset = DEFAULT_SIDE_OFFSET, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		className: "z-50",
+		side,
+		alignOffset,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+			className: cn("w-fit origin-(--transform-origin) animate-in rounded-md bg-surface-2 px-xs py-3xs text-sm text-balance shadow-md fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+			...props,
+			children
+		})
+	}) });
+}
+// src/components/tooltip/tooltip-trigger.tsx
+function TooltipTrigger({ children, ...props }) {
+	let render = void 0;
+	if (isValidElement(children)) render = children;
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		render,
+		...props
+	});
+}
+// src/components/tooltip/index.ts
+const Tooltip$1 = Object.assign(Tooltip$2, {
+	Content: TooltipContent,
+	Trigger: TooltipTrigger
+});
+export { TooltipTrigger as n, TooltipContent as r, Tooltip$1 as t };
+
+//# sourceMappingURL=tooltip-B6z3tDbW.js.map

package/dist/tooltip-B6z3tDbW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-B6z3tDbW.js","names":["Tooltip","BaseTooltip","BaseTooltip","BaseTooltip","Tooltip","TooltipRoot"],"sources":["../src/components/tooltip/tooltip.tsx","../src/components/tooltip/tooltip-context.tsx","../src/components/tooltip/tooltip-trigger.tsx","../src/components/tooltip/index.ts"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'\n\nimport type { TooltipProps } from './tooltip.types'\n\nexport function Tooltip({ ...props }: TooltipProps) {\n  return (\n    <BaseTooltip.Provider>\n      <BaseTooltip.Root {...props} />\n    </BaseTooltip.Provider>\n  )\n}\n","import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'\n\nimport { cn } from '@/utils/cn'\n\nimport type { TooltipContentProps } from './tooltip.types'\n\nconst DEFAULT_ALIGN_OFFSET = 0,\n  DEFAULT_SIDE_OFFSET = 5\n\nexport function TooltipContent({\n  side = 'top',\n  alignOffset = DEFAULT_ALIGN_OFFSET,\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  className,\n  children,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <BaseTooltip.Portal>\n      <BaseTooltip.Positioner\n        className=\"z-50\"\n        side={side}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n      >\n        <BaseTooltip.Popup\n          className={cn(\n            'w-fit origin-(--transform-origin) animate-in rounded-md bg-surface-2 px-xs py-3xs text-sm text-balance shadow-md fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </BaseTooltip.Popup>\n      </BaseTooltip.Positioner>\n    </BaseTooltip.Portal>\n  )\n}\n","import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'\nimport { isValidElement } from 'react'\nimport type { ReactElement } from 'react'\n\nimport type { TooltipTriggerProps } from './tooltip.types'\n\nexport function TooltipTrigger({ children, ...props }: TooltipTriggerProps) {\n  let render: ReactElement | undefined = undefined\n  if (isValidElement(children)) {\n    render = children\n  }\n\n  return <BaseTooltip.Trigger render={render} {...props} />\n}\n","import { Tooltip as TooltipRoot } from './tooltip'\nimport { TooltipContent } from './tooltip-context'\nimport { TooltipTrigger } from './tooltip-trigger'\n\nconst Tooltip = Object.assign(TooltipRoot, {\n  Content: TooltipContent,\n  Trigger: TooltipTrigger,\n})\n\nexport type { TooltipContentProps, TooltipProps, TooltipTriggerProps } from './tooltip.types'\nexport { TooltipContent } from './tooltip-context'\nexport { TooltipTrigger } from './tooltip-trigger'\n\nexport { Tooltip }\n"],"mappings":";;;;;AAIA,SAAgBA,UAAQ,EAAE,GAAG,SAAuB;CAClD,OACE,oBAACC,QAAY,UAAb,EAAA,UACE,oBAACA,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA,EACV,CAAA;AAE1B;;ACJA,MAAM,uBAAuB;AAC3B,MAAA,sBAAsB;AAExB,SAAgB,eAAe,EAC7B,OAAO,OACP,cAAc,sBACd,aAAa,qBACb,WACA,UACA,GAAG,SACmB;CACtB,OACE,oBAACC,QAAY,QAAb,EAAA,UACE,oBAACA,QAAY,YAAb;EACE,WAAU;EACJ;EACO;EACD;EAEZ,UAAA,oBAACA,QAAY,OAAb;GACE,WAAW,GACT,oYACA,SACF;GACA,GAAI;GAEH;EACgB,CAAA;CACG,CAAA,EACN,CAAA;AAExB;;AC/BA,SAAgB,eAAe,EAAE,UAAU,GAAG,SAA8B;CAC1E,IAAI,SAAmC,KAAA;CACvC,IAAI,eAAe,QAAQ,GACzB,SAAS;CAGX,OAAO,oBAACC,QAAY,SAAb;EAA6B;EAAQ,GAAI;CAAQ,CAAA;AAC1D;;ACTA,MAAMC,YAAU,OAAO,OAAOC,WAAa;CACzC,SAAS;CACT,SAAS;AACX,CAAC"}

package/dist/trim-text-children-CQRFg2fL.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { Children, Fragment as Fragment$1, isValidElement } from "react";
+// src/utils/trim-text-children.tsx
+const EMPTY = 0;
+/**
+* Wraps loose text children in a `text-box-trim` span. Flex containers can't trim their
+* anonymous text items, so without this the text is centred on rounded font metrics and
+* drifts off-centre at fluid font sizes and browser zoom levels.
+*/
+function trimTextChildren(children) {
+	const result = [], text = [], flush = () => {
+		if (text.length === EMPTY) return;
+		result.push(/* @__PURE__ */ jsx("span", {
+			"data-slot": "text",
+			className: "text-box-trim",
+			children: text.join("")
+		}, `trim-text-${result.length}`));
+		text.length = EMPTY;
+	};
+	for (const child of Children.toArray(children)) if (typeof child === "string" || typeof child === "number") text.push(child);
+	else if (isValidElement(child) && child.type === Fragment$1) {
+		flush();
+		result.push(/* @__PURE__ */ jsx(Fragment$1, { children: trimTextChildren(child.props.children) }, child.key));
+	} else {
+		flush();
+		result.push(child);
+	}
+	flush();
+	return result;
+}
+export { trimTextChildren as t };
+
+//# sourceMappingURL=trim-text-children-CQRFg2fL.js.map

package/dist/trim-text-children-CQRFg2fL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trim-text-children-CQRFg2fL.js","names":["Fragment"],"sources":["../src/utils/trim-text-children.tsx"],"sourcesContent":["import { Children, Fragment, isValidElement } from 'react'\nimport type { ReactNode } from 'react'\n\nconst EMPTY = 0\n\n/**\n * Wraps loose text children in a `text-box-trim` span. Flex containers can't trim their\n * anonymous text items, so without this the text is centred on rounded font metrics and\n * drifts off-centre at fluid font sizes and browser zoom levels.\n */\nexport function trimTextChildren(children: ReactNode): ReactNode {\n  const result: ReactNode[] = [],\n    text: (string | number)[] = [],\n    flush = () => {\n      if (text.length === EMPTY) {\n        return\n      }\n      result.push(\n        <span key={`trim-text-${result.length}`} data-slot=\"text\" className=\"text-box-trim\">\n          {text.join('')}\n        </span>,\n      )\n      text.length = EMPTY\n    }\n\n  for (const child of Children.toArray(children)) {\n    if (typeof child === 'string' || typeof child === 'number') {\n      text.push(child)\n    } else if (isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment) {\n      flush()\n      result.push(<Fragment key={child.key}>{trimTextChildren(child.props.children)}</Fragment>)\n    } else {\n      flush()\n      result.push(child)\n    }\n  }\n  flush()\n\n  return result\n}\n"],"mappings":";;;AAGA,MAAM,QAAQ;;;;;;AAOd,SAAgB,iBAAiB,UAAgC;CAC/D,MAAM,SAAsB,CAAC,GAC3B,OAA4B,CAAC,GAC7B,cAAc;EACZ,IAAI,KAAK,WAAW,OAClB;EAEF,OAAO,KACL,oBAAC,QAAD;GAAyC,aAAU;GAAO,WAAU;GACjE,UAAA,KAAK,KAAK,EAAE;EACT,GAFK,aAAa,OAAO,QAEzB,CACR;EACA,KAAK,SAAS;CAChB;CAEF,KAAK,MAAM,SAAS,SAAS,QAAQ,QAAQ,GAC3C,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,KAAK,KAAK,KAAK;MACV,IAAI,eAAyC,KAAK,KAAK,MAAM,SAASA,YAAU;EACrF,MAAM;EACN,OAAO,KAAK,oBAACA,YAAD,EAAA,UAA2B,iBAAiB,MAAM,MAAM,QAAQ,EAAY,GAA7D,MAAM,GAAuD,CAAC;CAC3F,OAAO;EACL,MAAM;EACN,OAAO,KAAK,KAAK;CACnB;CAEF,MAAM;CAEN,OAAO;AACT"}

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+import { ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export declare const formatDate: (date: Date, locale?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions) => string;
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { t as formatDate } from "../utils-BI2x7nW5.js";
+export { cn, formatDate };

package/dist/utils-BI2x7nW5.js

@@ -0,0 +1,5 @@
+// src/utils/date-time.ts
+const formatDate = (date, locale, options) => new Intl.DateTimeFormat(locale, options).format(date);
+export { formatDate as t };
+
+//# sourceMappingURL=utils-BI2x7nW5.js.map

package/dist/utils-BI2x7nW5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-BI2x7nW5.js","names":[],"sources":["../src/utils/date-time.ts"],"sourcesContent":["export const formatDate = (\n  date: Date,\n  locale?: Intl.LocalesArgument,\n  options?: Intl.DateTimeFormatOptions,\n): string => new Intl.DateTimeFormat(locale, options).format(date)\n"],"mappings":";AAAA,MAAa,cACX,MACA,QACA,YACW,IAAI,KAAK,eAAe,QAAQ,OAAO,CAAC,CAAC,OAAO,IAAI"}