ixia-ui-react 1.8.0 → 2.0.0

package/dist/button-group-7azbqlcO.js

@@ -0,0 +1,269 @@
+import { t as cn } from "./cn-BDi0DfT5.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 *:rounded-none *:bg-transparent disabled:pointer-events-none disabled:opacity-50 [&>button]:text-inherit", {
+	compoundVariants: [
+		{
+			className: "bg-brand-default text-brand-on-default [&>button:hover]:bg-brand-muted",
+			tone: "brand",
+			variant: "fill"
+		},
+		{
+			className: "bg-accent-default text-accent-on-default [&>button:hover]:bg-accent-muted",
+			tone: "accent",
+			variant: "fill"
+		},
+		{
+			className: "bg-neutral-default text-neutral-on-default [&>button:hover]:bg-neutral-muted",
+			tone: "neutral",
+			variant: "fill"
+		},
+		{
+			className: "bg-error-default text-error-on-default [&>button:hover]:bg-error-muted",
+			tone: "error",
+			variant: "fill"
+		},
+		{
+			className: "bg-info-default text-info-on-default [&>button:hover]:bg-info-muted",
+			tone: "info",
+			variant: "fill"
+		},
+		{
+			className: "bg-success-default text-success-on-default [&>button:hover]:bg-success-muted",
+			tone: "success",
+			variant: "fill"
+		},
+		{
+			className: "bg-warning-default text-warning-on-default [&>button:hover]:bg-warning-muted",
+			tone: "warning",
+			variant: "fill"
+		},
+		{
+			className: "bg-brand-container text-brand-on-container [&>button:hover]:bg-brand-container-high",
+			tone: "brand",
+			variant: "secondary"
+		},
+		{
+			className: "bg-accent-container text-accent-on-container [&>button:hover]:bg-accent-container-high",
+			tone: "accent",
+			variant: "secondary"
+		},
+		{
+			className: "bg-neutral-container text-neutral-on-container [&>button:hover]:bg-neutral-container-high",
+			tone: "neutral",
+			variant: "secondary"
+		},
+		{
+			className: "bg-error-container text-error-on-container [&>button:hover]:bg-error-container-high",
+			tone: "error",
+			variant: "secondary"
+		},
+		{
+			className: "bg-info-container text-info-on-container [&>button:hover]:bg-info-container-high",
+			tone: "info",
+			variant: "secondary"
+		},
+		{
+			className: "bg-success-container text-success-on-container [&>button:hover]:bg-success-container-high",
+			tone: "success",
+			variant: "secondary"
+		},
+		{
+			className: "bg-warning-container text-warning-on-container [&>button:hover]:bg-warning-container-high",
+			tone: "warning",
+			variant: "secondary"
+		},
+		{
+			className: "border-brand-border text-brand-default [&>button:hover]:bg-brand-container [&>button:hover]:text-brand-on-container",
+			tone: "brand",
+			variant: "outline"
+		},
+		{
+			className: "border-accent-border text-accent-default [&>button:hover]:bg-accent-container [&>button:hover]:text-accent-on-container",
+			tone: "accent",
+			variant: "outline"
+		},
+		{
+			className: "border-neutral-border text-neutral-default [&>button:hover]:bg-neutral-container [&>button:hover]:text-neutral-on-container",
+			tone: "neutral",
+			variant: "outline"
+		},
+		{
+			className: "border-error-border text-error-default [&>button:hover]:bg-error-container [&>button:hover]:text-error-on-container",
+			tone: "error",
+			variant: "outline"
+		},
+		{
+			className: "border-info-border text-info-default [&>button:hover]:bg-info-container [&>button:hover]:text-info-on-container",
+			tone: "info",
+			variant: "outline"
+		},
+		{
+			className: "border-success-border text-success-default [&>button:hover]:bg-success-container [&>button:hover]:text-success-on-container",
+			tone: "success",
+			variant: "outline"
+		},
+		{
+			className: "border-warning-border text-warning-default [&>button:hover]:bg-warning-container [&>button:hover]:text-warning-on-container",
+			tone: "warning",
+			variant: "outline"
+		},
+		{
+			className: "text-brand-default [&>button:hover]:bg-brand-container [&>button:hover]:text-brand-on-container",
+			tone: "brand",
+			variant: "ghost"
+		},
+		{
+			className: "text-accent-default [&>button:hover]:bg-accent-container [&>button:hover]:text-accent-on-container",
+			tone: "accent",
+			variant: "ghost"
+		},
+		{
+			className: "text-neutral-default [&>button:hover]:bg-neutral-container [&>button:hover]:text-neutral-on-container",
+			tone: "neutral",
+			variant: "ghost"
+		},
+		{
+			className: "text-error-default [&>button:hover]:bg-error-container [&>button:hover]:text-error-on-container",
+			tone: "error",
+			variant: "ghost"
+		},
+		{
+			className: "text-info-default [&>button:hover]:bg-info-container [&>button:hover]:text-info-on-container",
+			tone: "info",
+			variant: "ghost"
+		},
+		{
+			className: "text-success-default [&>button:hover]:bg-success-container [&>button:hover]:text-success-on-container",
+			tone: "success",
+			variant: "ghost"
+		},
+		{
+			className: "text-warning-default [&>button:hover]:bg-warning-container [&>button:hover]:text-warning-on-container",
+			tone: "warning",
+			variant: "ghost"
+		},
+		{
+			className: "border-brand-border bg-brand-container text-brand-on-container [&>button:hover]:bg-brand-container-high",
+			tone: "brand",
+			variant: "soft"
+		},
+		{
+			className: "border-accent-border bg-accent-container text-accent-on-container [&>button:hover]:bg-accent-container-high",
+			tone: "accent",
+			variant: "soft"
+		},
+		{
+			className: "border-neutral-border bg-neutral-container text-neutral-on-container [&>button:hover]:bg-neutral-container-high",
+			tone: "neutral",
+			variant: "soft"
+		},
+		{
+			className: "border-error-border bg-error-container text-error-on-container [&>button:hover]:bg-error-container-high",
+			tone: "error",
+			variant: "soft"
+		},
+		{
+			className: "border-info-border bg-info-container text-info-on-container [&>button:hover]:bg-info-container-high",
+			tone: "info",
+			variant: "soft"
+		},
+		{
+			className: "border-success-border bg-success-container text-success-on-container [&>button:hover]:bg-success-container-high",
+			tone: "success",
+			variant: "soft"
+		},
+		{
+			className: "border-warning-border bg-warning-container text-warning-on-container [&>button:hover]:bg-warning-container-high",
+			tone: "warning",
+			variant: "soft"
+		},
+		{
+			className: "bg-brand-container text-brand-on-container [&>button]:not-active:hover:bg-brand-container-high [&>button]:active:bg-brand-container",
+			tone: "brand",
+			variant: "elevated"
+		},
+		{
+			className: "bg-accent-container text-accent-on-container [&>button]:not-active:hover:bg-accent-container-high [&>button]:active:bg-accent-container",
+			tone: "accent",
+			variant: "elevated"
+		},
+		{
+			className: "bg-surface-2 text-on-surface [&>button]:not-active:hover:bg-surface-3 [&>button]:not-active:hover:text-neutral-on-container [&>button]:active:bg-surface",
+			tone: "neutral",
+			variant: "elevated"
+		},
+		{
+			className: "bg-error-container text-error-on-container [&>button]:not-active:hover:bg-error-container-high [&>button]:active:bg-error-container",
+			tone: "error",
+			variant: "elevated"
+		},
+		{
+			className: "bg-info-container text-info-on-container [&>button]:not-active:hover:bg-info-container-high [&>button]:active:bg-info-container",
+			tone: "info",
+			variant: "elevated"
+		},
+		{
+			className: "bg-success-container text-success-on-container [&>button]:not-active:hover:bg-success-container-high [&>button]:active:bg-success-container",
+			tone: "success",
+			variant: "elevated"
+		},
+		{
+			className: "bg-warning-container text-warning-on-container [&>button]:not-active:hover:bg-warning-container-high [&>button]:active:bg-warning-container",
+			tone: "warning",
+			variant: "elevated"
+		}
+	],
+	defaultVariants: {
+		orientation: "horizontal",
+		size: "medium",
+		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-[\"\"]"
+		},
+		size: {
+			extraSmall: "*:font-body *:text-xs *:leading-none *:font-medium [&>button]:h-md [&>button]:min-w-0 [&>button]:gap-3xs [&>button]:px-2xs [&>button>svg]:size-xs [&>button[data-icon-only]:has(>svg:only-child)]:size-md [&>button[data-icon-only]:has(>svg:only-child)]:p-0",
+			large: "*:font-body *:text-lg *:leading-none *:font-medium [&>button]:h-2xl [&>button]:min-w-2xl [&>button]:gap-xs [&>button]:px-md [&>button>svg]:size-lg [&>button[data-icon-only]:has(>svg:only-child)]:size-2xl [&>button[data-icon-only]:has(>svg:only-child)]:p-0",
+			medium: "*:font-body *:text-base *:leading-none *:font-medium [&>button]:h-xl [&>button]:min-w-xl [&>button]:gap-2xs [&>button]:px-sm [&>button>svg]:size-md [&>button[data-icon-only]:has(>svg:only-child)]:size-xl [&>button[data-icon-only]:has(>svg:only-child)]:p-0",
+			small: "*:font-body *:text-sm *:leading-none *:font-medium [&>button]:h-lg [&>button]:min-w-lg [&>button]:gap-3xs [&>button]:px-xs [&>button>svg]:size-sm [&>button[data-icon-only]:has(>svg:only-child)]:size-lg [&>button[data-icon-only]:has(>svg:only-child)]:p-0"
+		},
+		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 *:active:scale-100!",
+			fill: "",
+			ghost: "",
+			outline: "border",
+			secondary: "",
+			soft: "border"
+		}
+	}
+});
+// src/components/button-group/button-group.tsx
+function ButtonGroup({ size, variant, tone, orientation, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(buttonGroupVariants({
+			orientation,
+			size,
+			tone,
+			variant
+		}), className),
+		ref,
+		...props
+	});
+}
+export { ButtonGroup as t };
+
+//# sourceMappingURL=button-group-7azbqlcO.js.map

package/dist/button-group-7azbqlcO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-7azbqlcO.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\nexport const buttonGroupVariants = cva(\n  'inline-flex cursor-pointer items-center justify-center overflow-hidden rounded-full whitespace-nowrap transition-all select-none *:rounded-none *:bg-transparent disabled:pointer-events-none disabled:opacity-50 [&>button]:text-inherit',\n  {\n    compoundVariants: [\n      {\n        className: 'bg-brand-default text-brand-on-default [&>button:hover]:bg-brand-muted',\n        tone: 'brand',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-accent-default text-accent-on-default [&>button:hover]:bg-accent-muted',\n        tone: 'accent',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-neutral-default text-neutral-on-default [&>button:hover]:bg-neutral-muted',\n        tone: 'neutral',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-error-default text-error-on-default [&>button:hover]:bg-error-muted',\n        tone: 'error',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-info-default text-info-on-default [&>button:hover]:bg-info-muted',\n        tone: 'info',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-success-default text-success-on-default [&>button:hover]:bg-success-muted',\n        tone: 'success',\n        variant: 'fill',\n      },\n      {\n        className: 'bg-warning-default text-warning-on-default [&>button:hover]:bg-warning-muted',\n        tone: 'warning',\n        variant: 'fill',\n      },\n      {\n        className:\n          'bg-brand-container text-brand-on-container [&>button:hover]:bg-brand-container-high',\n        tone: 'brand',\n        variant: 'secondary',\n      },\n      {\n        className:\n          'bg-accent-container text-accent-on-container [&>button:hover]:bg-accent-container-high',\n        tone: 'accent',\n        variant: 'secondary',\n      },\n      {\n        className:\n          'bg-neutral-container text-neutral-on-container [&>button:hover]:bg-neutral-container-high',\n        tone: 'neutral',\n        variant: 'secondary',\n      },\n      {\n        className:\n          'bg-error-container text-error-on-container [&>button:hover]:bg-error-container-high',\n        tone: 'error',\n        variant: 'secondary',\n      },\n      {\n        className:\n          'bg-info-container text-info-on-container [&>button:hover]:bg-info-container-high',\n        tone: 'info',\n        variant: 'secondary',\n      },\n      {\n        className:\n          'bg-success-container text-success-on-container [&>button:hover]:bg-success-container-high',\n        tone: 'success',\n        variant: 'secondary',\n      },\n      {\n        className:\n          'bg-warning-container text-warning-on-container [&>button:hover]:bg-warning-container-high',\n        tone: 'warning',\n        variant: 'secondary',\n      },\n      {\n        className:\n          'border-brand-border text-brand-default [&>button:hover]:bg-brand-container [&>button:hover]:text-brand-on-container',\n        tone: 'brand',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-accent-border text-accent-default [&>button:hover]:bg-accent-container [&>button:hover]:text-accent-on-container',\n        tone: 'accent',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-neutral-border text-neutral-default [&>button:hover]:bg-neutral-container [&>button:hover]:text-neutral-on-container',\n        tone: 'neutral',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-error-border text-error-default [&>button:hover]:bg-error-container [&>button:hover]:text-error-on-container',\n        tone: 'error',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-info-border text-info-default [&>button:hover]:bg-info-container [&>button:hover]:text-info-on-container',\n        tone: 'info',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-success-border text-success-default [&>button:hover]:bg-success-container [&>button:hover]:text-success-on-container',\n        tone: 'success',\n        variant: 'outline',\n      },\n      {\n        className:\n          'border-warning-border text-warning-default [&>button:hover]:bg-warning-container [&>button:hover]:text-warning-on-container',\n        tone: 'warning',\n        variant: 'outline',\n      },\n      {\n        className:\n          'text-brand-default [&>button:hover]:bg-brand-container [&>button:hover]:text-brand-on-container',\n        tone: 'brand',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'text-accent-default [&>button:hover]:bg-accent-container [&>button:hover]:text-accent-on-container',\n        tone: 'accent',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'text-neutral-default [&>button:hover]:bg-neutral-container [&>button:hover]:text-neutral-on-container',\n        tone: 'neutral',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'text-error-default [&>button:hover]:bg-error-container [&>button:hover]:text-error-on-container',\n        tone: 'error',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'text-info-default [&>button:hover]:bg-info-container [&>button:hover]:text-info-on-container',\n        tone: 'info',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'text-success-default [&>button:hover]:bg-success-container [&>button:hover]:text-success-on-container',\n        tone: 'success',\n        variant: 'ghost',\n      },\n      {\n        className:\n          'text-warning-default [&>button:hover]:bg-warning-container [&>button: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 [&>button: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 [&>button: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 [&>button: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 [&>button: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 [&>button: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 [&>button: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 [&>button:hover]:bg-warning-container-high',\n        tone: 'warning',\n        variant: 'soft',\n      },\n      {\n        className:\n          'bg-brand-container text-brand-on-container [&>button]:not-active:hover:bg-brand-container-high [&>button]:active:bg-brand-container',\n        tone: 'brand',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-accent-container text-accent-on-container [&>button]:not-active:hover:bg-accent-container-high [&>button]:active:bg-accent-container',\n        tone: 'accent',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-surface-2 text-on-surface [&>button]:not-active:hover:bg-surface-3 [&>button]:not-active:hover:text-neutral-on-container [&>button]:active:bg-surface',\n        tone: 'neutral',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-error-container text-error-on-container [&>button]:not-active:hover:bg-error-container-high [&>button]:active:bg-error-container',\n        tone: 'error',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-info-container text-info-on-container [&>button]:not-active:hover:bg-info-container-high [&>button]:active:bg-info-container',\n        tone: 'info',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-success-container text-success-on-container [&>button]:not-active:hover:bg-success-container-high [&>button]:active:bg-success-container',\n        tone: 'success',\n        variant: 'elevated',\n      },\n      {\n        className:\n          'bg-warning-container text-warning-on-container [&>button]:not-active:hover:bg-warning-container-high [&>button]:active:bg-warning-container',\n        tone: 'warning',\n        variant: 'elevated',\n      },\n    ],\n    defaultVariants: {\n      orientation: 'horizontal',\n      size: 'medium',\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      size: {\n        extraSmall:\n          '*:font-body *:text-xs *:leading-none *:font-medium [&>button]:h-md [&>button]:min-w-0 [&>button]:gap-3xs [&>button]:px-2xs [&>button>svg]:size-xs [&>button[data-icon-only]:has(>svg:only-child)]:size-md [&>button[data-icon-only]:has(>svg:only-child)]:p-0',\n        large:\n          '*:font-body *:text-lg *:leading-none *:font-medium [&>button]:h-2xl [&>button]:min-w-2xl [&>button]:gap-xs [&>button]:px-md [&>button>svg]:size-lg [&>button[data-icon-only]:has(>svg:only-child)]:size-2xl [&>button[data-icon-only]:has(>svg:only-child)]:p-0',\n        medium:\n          '*:font-body *:text-base *:leading-none *:font-medium [&>button]:h-xl [&>button]:min-w-xl [&>button]:gap-2xs [&>button]:px-sm [&>button>svg]:size-md [&>button[data-icon-only]:has(>svg:only-child)]:size-xl [&>button[data-icon-only]:has(>svg:only-child)]:p-0',\n        small:\n          '*:font-body *:text-sm *:leading-none *:font-medium [&>button]:h-lg [&>button]:min-w-lg [&>button]:gap-3xs [&>button]:px-xs [&>button>svg]:size-sm [&>button[data-icon-only]:has(>svg:only-child)]:size-lg [&>button[data-icon-only]:has(>svg:only-child)]:p-0',\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 *:active:scale-100!',\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","import { cn } from '@/utils/cn'\n\nimport { buttonGroupVariants } from './button-group.types'\nimport type { ButtonGroupProps } from './button-group.types'\n\nexport function ButtonGroup({\n  size,\n  variant,\n  tone,\n  orientation,\n  className,\n  ref,\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <div\n      className={cn(buttonGroupVariants({ orientation, size, tone, variant }), className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;AAGA,MAAa,sBAAsB,IACjC,6OACA;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,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,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,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,WACE;GACF,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,MAAM;GACN,SAAS;EACX;CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;EACN,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,aAAa;GACX,YACE;GACF,UACE;EACJ;EACA,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,SAAS;GACT,WAAW;GACX,MAAM;EACR;CACF;AACF,CACF;;AClSA,SAAgB,YAAY,EAC1B,MACA,SACA,MACA,aACA,WACA,KACA,GAAG,SACgB;CACnB,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,oBAAoB;GAAE;GAAa;GAAM;GAAM;EAAQ,CAAC,GAAG,SAAS;EAC7E;EACL,GAAI;CACL,CAAA;AAEL"}

package/dist/button.types-BFKrBCGd.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from "class-variance-authority";
+import { Button } from "@base-ui/react";
+declare const buttonVariants: (props?: ({
+  size?: "extraSmall" | "large" | "medium" | "small" | null | undefined;
+  tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
+  variant?: "elevated" | "fill" | "ghost" | "link" | "outline" | "secondary" | "soft" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonProps = React.ComponentProps<typeof Button> & VariantProps<typeof buttonVariants>;
+export { ButtonProps as t };
+//# sourceMappingURL=button.types-BFKrBCGd.d.ts.map

package/dist/calendar/index.d.ts

@@ -0,0 +1,63 @@
+import { VariantProps } from "class-variance-authority";
+import React from "react";
+import "@daypicker/react/style.css";
+import { DateRange, DayButton, Mode, PropsBase } from "@daypicker/react";
+declare const calendarPanelVariants: (props?: ({
+  variant?: "elevated" | "ghost" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CalendarSelected = Date | Date[] | DateRange;
+interface CalendarState {
+  selectedDates: CalendarSelected | undefined;
+}
+interface CalendarAction {
+  type: 'SET_SELECTED_DATES';
+  payload: CalendarSelected | undefined;
+}
+type CalendarProps = React.ComponentProps<'div'> & {
+  defaultState?: CalendarState;
+};
+interface CalendarContextValue {
+  state: CalendarState;
+  dispatch: React.Dispatch<CalendarAction>;
+}
+type CalendarPickerProps = PropsBase & {
+  selected?: CalendarSelected;
+  onSelect?: (date: CalendarSelected | undefined) => void;
+  mode?: Mode;
+};
+type CalendarPanelProps = React.ComponentProps<'div'> & VariantProps<typeof calendarPanelVariants>;
+type CalendarHeaderProps = React.ComponentProps<'div'>;
+type CalendarSummaryProps = React.ComponentProps<'div'>;
+type CalendarFooterProps = React.ComponentProps<'div'>;
+type CalendarComponents = NonNullable<PropsBase['components']>;
+type CalendarChevronProps = React.ComponentProps<NonNullable<CalendarComponents['Chevron']>>;
+type CalendarNextMonthButtonProps = React.ComponentProps<NonNullable<CalendarComponents['NextMonthButton']>>;
+type CalendarPreviousMonthButtonProps = React.ComponentProps<NonNullable<CalendarComponents['PreviousMonthButton']>>;
+type CalendarDropdownProps = React.ComponentProps<NonNullable<CalendarComponents['Dropdown']>> & {
+  children?: React.ReactNode;
+};
+type CalendarDayButtonProps = React.ComponentProps<typeof DayButton>;
+declare function Calendar$1({ defaultState, children }: CalendarProps): React.JSX.Element;
+export declare function CalendarDayButton({ className, modifiers, ...props }: CalendarDayButtonProps): import("react").JSX.Element;
+export declare function CalendarDropdown({ children, className, disabled, value, options, onChange, 'aria-label': ariaLabel }: CalendarDropdownProps): import("react").JSX.Element;
+export declare function CalendarFooter({ className, children, ref, ...props }: CalendarFooterProps): import("react").JSX.Element;
+export declare function CalendarHeader({ className, children, ref, ...props }: CalendarHeaderProps): import("react").JSX.Element;
+export declare function CalendarNextMonthButton({ className, children, ...props }: CalendarNextMonthButtonProps): import("react").JSX.Element;
+export declare function CalendarPanel({ variant, className, children, ref, ...props }: CalendarPanelProps): import("react").JSX.Element;
+export declare function CalendarPicker({ className, components, mode, selected, onSelect, ...props }: CalendarPickerProps): import("react").JSX.Element;
+export declare function CalendarPreviousMonthButton({ className, children, ...props }: CalendarPreviousMonthButtonProps): import("react").JSX.Element;
+export declare function CalendarSummary({ className, children, ref, ...props }: CalendarSummaryProps): import("react").JSX.Element;
+export declare function CalendarChevron({ orientation }: CalendarChevronProps): import("react").JSX.Element;
+declare const Calendar: typeof Calendar$1 & {
+  DayButton: typeof CalendarDayButton;
+  Dropdown: typeof CalendarDropdown;
+  Footer: typeof CalendarFooter;
+  Header: typeof CalendarHeader;
+  NextMonthButton: typeof CalendarNextMonthButton;
+  Panel: typeof CalendarPanel;
+  Picker: typeof CalendarPicker;
+  PreviousMonthButton: typeof CalendarPreviousMonthButton;
+  Summary: typeof CalendarSummary;
+};
+export { Calendar, type CalendarAction, type CalendarChevronProps, type CalendarComponents, type CalendarContextValue, type CalendarDayButtonProps, type CalendarDropdownProps, type CalendarFooterProps, type CalendarHeaderProps, type CalendarNextMonthButtonProps, type CalendarPanelProps, type CalendarPickerProps, type CalendarPreviousMonthButtonProps, type CalendarProps, type CalendarSummaryProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/calendar/index.js

@@ -0,0 +1,292 @@
+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 { 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";
+import React, { useState } from "react";
+import "@daypicker/react/style.css";
+import { DayButton, DayPicker, getDefaultClassNames, isDateRange, labelDayButton } from "@daypicker/react";
+// src/components/calendar/calendar.reducer.ts
+const calendarReducer = (state, action) => {
+	switch (action.type) {
+		case "SET_SELECTED_DATES": return {
+			...state,
+			selectedDates: action.payload
+		};
+		default: return state;
+	}
+};
+// src/components/calendar/calendar.tsx
+const CalendarContext = React.createContext(void 0);
+const useCalendar = () => {
+	const context = React.useContext(CalendarContext);
+	if (!context) throw new Error("useCalendar must be used within a Calendar");
+	return context;
+};
+function Calendar$1({ defaultState, children }) {
+	const [state, dispatch] = React.useReducer(calendarReducer, defaultState ?? { selectedDates: void 0 });
+	return /* @__PURE__ */ jsx(CalendarContext.Provider, {
+		value: {
+			dispatch,
+			state
+		},
+		children
+	});
+}
+// src/components/calendar/calendar-day-button.tsx
+function CalendarDayButton({ className, modifiers, ...props }) {
+	return /* @__PURE__ */ jsx(DayButton, {
+		...props,
+		modifiers,
+		className: cn(buttonVariants({
+			size: "medium",
+			tone: "neutral",
+			variant: "ghost"
+		}), "text-inherit hover:bg-brand-container hover:text-brand-on-container", modifiers.selected && "hover:bg-brand-default hover:text-brand-on-default", className)
+	});
+}
+// src/components/calendar/calendar-dropdown.tsx
+function createSelectTarget(value) {
+	const element = document.createElement("select"), option = Object.assign(document.createElement("option"), { value });
+	element.append(option);
+	element.value = value;
+	return element;
+}
+function CalendarDropdown({ children, className, disabled, value, options, onChange, "aria-label": ariaLabel }) {
+	const handleValueChange = (newValue) => {
+		if (onChange) {
+			const element = createSelectTarget(newValue ?? "");
+			onChange({
+				bubbles: false,
+				cancelable: false,
+				currentTarget: element,
+				defaultPrevented: false,
+				eventPhase: Event.NONE,
+				isDefaultPrevented: () => false,
+				isPropagationStopped: () => false,
+				isTrusted: false,
+				nativeEvent: new Event("change"),
+				persist: () => void 0,
+				preventDefault: () => void 0,
+				stopPropagation: () => void 0,
+				target: element,
+				timeStamp: performance.now(),
+				type: "change"
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs(Select, {
+		disabled,
+		value: value?.toString(),
+		onValueChange: handleValueChange,
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+			variant: "ghost",
+			"aria-label": ariaLabel,
+			className: cn("", className),
+			children: [/* @__PURE__ */ jsx(SelectValue, { children: options?.find((option) => option.value === value)?.label }), children ?? /* @__PURE__ */ jsx(SelectIcon, { children: /* @__PURE__ */ jsx(Icon, { name: "chevronsUpDown" }) })]
+		}), /* @__PURE__ */ jsx(SelectPopup, { children: /* @__PURE__ */ jsx(SelectList, { children: options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			value: option.value.toString(),
+			disabled: option.disabled,
+			children: /* @__PURE__ */ jsx(SelectTitle, { children: option.label })
+		}, option.value)) }) })]
+	});
+}
+// src/components/calendar/calendar-footer.tsx
+function CalendarFooter({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "calendar-footer",
+		className: cn("mt-xs flex flex-col gap-3xs border-t border-border pt-xs", className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/calendar/calendar-header.tsx
+function CalendarHeader({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("", className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/calendar/calendar-next-month-button.tsx
+function CalendarNextMonthButton({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		tone: "neutral",
+		size: "small",
+		className: cn("", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { name: "chevronRight" })
+	});
+}
+// src/components/calendar/calendar.types.ts
+const calendarPanelVariants = cva("w-fit", {
+	compoundVariants: [{
+		className: "rounded-2xl p-sm",
+		variant: ["elevated", "outline"]
+	}],
+	defaultVariants: { variant: "elevated" },
+	variants: { variant: {
+		elevated: "bg-surface shadow-2xs",
+		ghost: "bg-transparent",
+		outline: "border border-border"
+	} }
+});
+// src/components/calendar/calendar-panel.tsx
+function CalendarPanel({ variant, className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(calendarPanelVariants({ variant }), className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/calendar/calendar-chevron.tsx
+const chevronIcons = {
+	down: "chevronDown",
+	left: "chevronLeft",
+	right: "chevronRight",
+	up: "chevronUp"
+};
+function CalendarChevron({ orientation = "left" }) {
+	return /* @__PURE__ */ jsx(Icon, { name: chevronIcons[orientation] });
+}
+// src/components/calendar/calendar-previous-month-button.tsx
+function CalendarPreviousMonthButton({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		variant: "ghost",
+		tone: "neutral",
+		size: "small",
+		className: cn("", className),
+		children: children ?? /* @__PURE__ */ jsx(Icon, { name: "chevronLeft" })
+	});
+}
+// src/components/calendar/calendar-picker.tsx
+function getMultipleSelected(selectedDates) {
+	if (Array.isArray(selectedDates)) return selectedDates;
+}
+function getRangeSelected(selectedDates) {
+	if (isDateRange(selectedDates)) return selectedDates;
+}
+function getSingleSelected(selectedDates) {
+	if (selectedDates instanceof Date) return selectedDates;
+}
+function labelDayButtonWithVisibleText(...args) {
+	const [date, modifiers, options, dateLib] = args;
+	return `${dateLib?.format(date, "d") ?? String(date.getDate())}, ${labelDayButton(date, modifiers, options, dateLib)}`;
+}
+const defaultClassNames = getDefaultClassNames();
+const defaultComponents = {
+	Chevron: CalendarChevron,
+	DayButton: CalendarDayButton,
+	Dropdown: CalendarDropdown,
+	NextMonthButton: CalendarNextMonthButton,
+	PreviousMonthButton: CalendarPreviousMonthButton
+};
+const calendarClassNames = {
+	caption_label: "style-text-strong-0",
+	day: cn("size-xl! rounded-full style-text-default-0 transition-colors hover:bg-brand-container hover:text-brand-on-container data-selected:text-brand-on-default data-selected:hover:bg-brand-default", defaultClassNames.day),
+	day_button: cn("size-xl! rounded-full", defaultClassNames.day_button),
+	disabled: cn("pointer-events-none text-on-surface", defaultClassNames.disabled),
+	month_caption: "flex items-center justify-center h-lg",
+	month_grid: cn("mt-xs border-separate! border-spacing-3xs", defaultClassNames.month_grid),
+	nav: cn("h-lg! w-full justify-between!", defaultClassNames.nav),
+	outside: cn("border-none text-on-surface-muted", defaultClassNames.outside),
+	range_end: cn("rounded-l-none bg-brand-default text-brand-on-default"),
+	range_middle: cn("rounded-none! border-y border-brand-border bg-brand-container! text-brand-on-container! transition-none"),
+	range_start: cn("rounded-r-none bg-brand-default text-brand-on-default", "[&.rounded-l-none]:rounded-xl"),
+	selected: cn("bg-brand-default text-brand-on-default"),
+	today: cn("text-brand-default! data-selected:text-brand-on-default!", defaultClassNames.today),
+	week: cn("", defaultClassNames.week),
+	weekdays: cn("style-text-default-0 text-on-surface-muted", defaultClassNames.weekdays)
+};
+function CalendarPicker({ className, components, mode = "single", selected, onSelect, ...props }) {
+	const { state, dispatch } = useCalendar(), selectedValue = selected ?? state.selectedDates, handleSelect = (next) => {
+		dispatch({
+			payload: next,
+			type: "SET_SELECTED_DATES"
+		});
+		onSelect?.(next);
+	}, baseProps = {
+		className,
+		classNames: calendarClassNames,
+		components: {
+			...defaultComponents,
+			...components
+		},
+		labels: { labelDayButton: labelDayButtonWithVisibleText },
+		...props
+	};
+	switch (mode) {
+		case "multiple": return /* @__PURE__ */ jsx(DayPicker, {
+			...baseProps,
+			mode: "multiple",
+			selected: getMultipleSelected(selectedValue),
+			onSelect: handleSelect
+		});
+		case "range": return /* @__PURE__ */ jsx(DayPicker, {
+			...baseProps,
+			mode: "range",
+			selected: getRangeSelected(selectedValue),
+			onSelect: handleSelect
+		});
+		default: return /* @__PURE__ */ jsx(DayPicker, {
+			...baseProps,
+			mode: "single",
+			selected: getSingleSelected(selectedValue),
+			onSelect: handleSelect
+		});
+	}
+}
+// src/components/calendar/calendar-summary.tsx
+const dateFormatOptions = {
+	day: "numeric",
+	month: "long",
+	year: "numeric"
+};
+const formatCalendarDate = (date) => formatDate(date, "en-US", dateFormatOptions);
+function CalendarSummary({ className, children, ref, ...props }) {
+	const { state } = useCalendar(), [today, setToday] = useState(() => /* @__PURE__ */ new Date());
+	let formattedDate = void 0;
+	if (state.selectedDates instanceof Date) formattedDate = formatCalendarDate(state.selectedDates);
+	if (isDateRange(state.selectedDates)) {
+		const { from: startDate, to: endDate } = state.selectedDates;
+		if (startDate && endDate) formattedDate = `${formatCalendarDate(startDate)} - ${formatCalendarDate(endDate)}`;
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", className),
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "style-text-strong-1",
+				children: formatCalendarDate(today)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "style-text-strong-0",
+				children: formattedDate
+			}),
+			children
+		]
+	});
+}
+// src/components/calendar/index.ts
+const Calendar = Object.assign(Calendar$1, {
+	DayButton: CalendarDayButton,
+	Dropdown: CalendarDropdown,
+	Footer: CalendarFooter,
+	Header: CalendarHeader,
+	NextMonthButton: CalendarNextMonthButton,
+	Panel: CalendarPanel,
+	Picker: CalendarPicker,
+	PreviousMonthButton: CalendarPreviousMonthButton,
+	Summary: CalendarSummary
+});
+export { Calendar, CalendarChevron, CalendarDayButton, CalendarDropdown, CalendarFooter, CalendarHeader, CalendarNextMonthButton, CalendarPanel, CalendarPicker, CalendarPreviousMonthButton, CalendarSummary };
+
+//# sourceMappingURL=index.js.map