m3-design-system 0.1.0

package/dist/index.cjs

@@ -0,0 +1,700 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var React3 = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var lucideReact = require('lucide-react');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var ProgressPrimitive = require('@radix-ui/react-progress');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var SliderPrimitive = require('@radix-ui/react-slider');
+var SwitchPrimitives = require('@radix-ui/react-switch');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
+var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-m3-primary disabled:pointer-events-none disabled:opacity-38 [&_svg]:pointer-events-none [&_svg]:size-[18px] [&_svg]:shrink-0 select-none",
+  {
+    variants: {
+      variant: {
+        filled: "bg-m3-primary text-m3-on-primary hover:shadow-m3-1 active:shadow-none rounded-m3-full",
+        outlined: "border border-m3-outline text-m3-primary hover:bg-m3-primary/8 active:bg-m3-primary/12 rounded-m3-full",
+        text: "text-m3-primary hover:bg-m3-primary/8 active:bg-m3-primary/12 rounded-m3-full",
+        elevated: "bg-m3-surface-container-low text-m3-primary shadow-m3-1 hover:shadow-m3-2 active:shadow-m3-1 rounded-m3-full",
+        tonal: "bg-m3-secondary-container text-m3-on-secondary-container hover:shadow-m3-1 active:shadow-none rounded-m3-full"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-10 px-6 text-sm",
+        lg: "h-12 px-8 text-base",
+        icon: "h-10 w-10 p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "md"
+    }
+  }
+);
+var Button = React3__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center font-medium",
+  {
+    variants: {
+      variant: {
+        small: "size-[6px] rounded-full bg-m3-error",
+        large: "min-w-4 h-4 px-1 rounded-full bg-m3-error text-m3-on-error text-[11px]"
+      }
+    },
+    defaultVariants: {
+      variant: "large"
+    }
+  }
+);
+var Badge = React3__namespace.forwardRef(
+  ({ className, variant, count, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn(badgeVariants({ variant, className })),
+      "aria-label": count !== void 0 ? `${count} notifications` : "notification",
+      ...props,
+      children: variant === "large" && count !== void 0 && (count > 999 ? "999+" : count)
+    }
+  )
+);
+Badge.displayName = "Badge";
+var cardVariants = classVarianceAuthority.cva(
+  "rounded-m3-md overflow-hidden transition-shadow duration-200",
+  {
+    variants: {
+      variant: {
+        elevated: "bg-m3-surface-container-low shadow-m3-1 hover:shadow-m3-2",
+        filled: "bg-m3-surface-container-highest",
+        outlined: "bg-m3-surface border border-m3-outline-variant"
+      }
+    },
+    defaultVariants: {
+      variant: "elevated"
+    }
+  }
+);
+var Card = React3__namespace.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardVariants({ variant, className })),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-4 pb-0", className), ...props }));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "h3",
+  {
+    ref,
+    className: cn("text-lg font-medium text-m3-on-surface", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-m3-on-surface-variant mt-1", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-4", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center gap-2 p-4 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+var Checkbox = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CheckboxPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-[18px] w-[18px] shrink-0 rounded-[2px] border-2 border-m3-on-surface-variant transition-all duration-200",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-m3-primary",
+      "disabled:cursor-not-allowed disabled:opacity-38",
+      "data-[state=checked]:bg-m3-primary data-[state=checked]:border-m3-primary data-[state=checked]:text-m3-on-primary",
+      "data-[state=indeterminate]:bg-m3-primary data-[state=indeterminate]:border-m3-primary data-[state=indeterminate]:text-m3-on-primary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "size-3.5 stroke-[3]" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5 stroke-[3]" }) })
+  }
+));
+Checkbox.displayName = "Checkbox";
+var chipVariants = classVarianceAuthority.cva(
+  "inline-flex items-center gap-2 rounded-m3-sm font-medium transition-all duration-200 select-none [&_svg]:size-[18px] [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        assist: "border border-m3-outline text-m3-on-surface hover:bg-m3-on-surface/8 h-8 px-4 text-sm",
+        filter: "border border-m3-outline text-m3-on-surface-variant hover:bg-m3-on-surface/8 h-8 px-4 text-sm data-[selected=true]:bg-m3-secondary-container data-[selected=true]:text-m3-on-secondary-container data-[selected=true]:border-transparent",
+        input: "border border-m3-outline text-m3-on-surface-variant hover:bg-m3-on-surface/8 h-8 pl-4 pr-2 text-sm",
+        suggestion: "border border-m3-outline text-m3-on-surface-variant hover:bg-m3-on-surface/8 h-8 px-4 text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "assist"
+    }
+  }
+);
+var Chip = React3__namespace.forwardRef(
+  ({ className, variant, selected, onRemove, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: variant === "filter" ? "option" : void 0,
+      "aria-selected": variant === "filter" ? selected : void 0,
+      "data-selected": selected,
+      className: cn(chipVariants({ variant, className })),
+      ...props,
+      children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        (variant === "input" || onRemove) && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onRemove,
+            className: "rounded-full p-0.5 hover:bg-m3-on-surface/12 transition-colors",
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "!size-4" })
+          }
+        )
+      ]
+    }
+  )
+);
+Chip.displayName = "Chip";
+var Dialog = DialogPrimitive__namespace.Root;
+var DialogTrigger = DialogPrimitive__namespace.Trigger;
+var DialogPortal = DialogPrimitive__namespace.Portal;
+var DialogClose = DialogPrimitive__namespace.Close;
+var DialogOverlay = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-m3-scrim/32 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React3__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-[560px] -translate-x-1/2 -translate-y-1/2",
+        "bg-m3-surface-container-high rounded-m3-xl p-6 shadow-m3-3",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-full p-1 text-m3-on-surface-variant hover:bg-m3-on-surface/8 transition-colors", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-1.5 mb-4", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-end gap-2 mt-6", className), ...props });
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn("text-2xl font-normal text-m3-on-surface", className),
+    ...props
+  }
+));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: cn("text-sm text-m3-on-surface-variant", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var fabVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-3 transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-m3-primary shadow-m3-3 hover:shadow-m3-4 active:shadow-m3-3 select-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        surface: "bg-m3-surface-container-high text-m3-primary",
+        primary: "bg-m3-primary-container text-m3-on-primary-container",
+        secondary: "bg-m3-secondary-container text-m3-on-secondary-container",
+        tertiary: "bg-m3-tertiary-container text-m3-on-tertiary-container"
+      },
+      size: {
+        sm: "h-10 w-10 rounded-m3-md [&_svg]:size-5",
+        md: "h-14 w-14 rounded-m3-lg [&_svg]:size-6",
+        lg: "h-24 w-24 rounded-m3-xl [&_svg]:size-9",
+        extended: "h-14 px-4 rounded-m3-lg [&_svg]:size-6 font-medium text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var FAB = React3__namespace.forwardRef(
+  ({ className, variant, size, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      className: cn(fabVariants({ variant, size, className })),
+      ...props,
+      children: [
+        icon,
+        children && /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      ]
+    }
+  )
+);
+FAB.displayName = "FAB";
+var Progress = React3__namespace.forwardRef(({ className, value, variant = "linear", indeterminate = false, ...props }, ref) => {
+  if (variant === "circular") {
+    const size = 48;
+    const strokeWidth = 4;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = radius * 2 * Math.PI;
+    const offset = circumference - (value ?? 0) / 100 * circumference;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": indeterminate ? void 0 : value ?? 0,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        className: cn("inline-flex", indeterminate && "animate-spin", className),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              className: "text-m3-surface-container-highest"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              strokeDasharray: circumference,
+              strokeDashoffset: indeterminate ? circumference * 0.75 : offset,
+              strokeLinecap: "round",
+              className: "text-m3-primary transition-all duration-300",
+              transform: `rotate(-90 ${size / 2} ${size / 2})`
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ProgressPrimitive__namespace.Root,
+    {
+      ref,
+      className: cn("relative h-1 w-full overflow-hidden rounded-full bg-m3-surface-container-highest", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ProgressPrimitive__namespace.Indicator,
+        {
+          className: cn(
+            "h-full bg-m3-primary rounded-full transition-all duration-300",
+            indeterminate && "animate-[indeterminate_1.5s_ease-in-out_infinite] w-1/3"
+          ),
+          style: indeterminate ? void 0 : { width: `${value ?? 0}%` }
+        }
+      )
+    }
+  );
+});
+Progress.displayName = "Progress";
+var RadioGroup = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  RadioGroupPrimitive__namespace.Root,
+  {
+    className: cn("grid gap-3", className),
+    ...props,
+    ref
+  }
+));
+RadioGroup.displayName = "RadioGroup";
+var RadioGroupItem = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  RadioGroupPrimitive__namespace.Item,
+  {
+    ref,
+    className: cn(
+      "aspect-square h-5 w-5 rounded-full border-2 border-m3-on-surface-variant transition-all duration-200",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-m3-primary",
+      "disabled:cursor-not-allowed disabled:opacity-38",
+      "data-[state=checked]:border-m3-primary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-[10px] rounded-full bg-m3-primary" }) })
+  }
+));
+RadioGroupItem.displayName = "RadioGroupItem";
+var Slider = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SliderPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-m3-surface-container-highest", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-m3-primary" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block size-5 rounded-full bg-m3-primary shadow-m3-1 transition-all hover:shadow-m3-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-m3-primary disabled:pointer-events-none disabled:opacity-38 cursor-pointer" })
+    ]
+  }
+));
+Slider.displayName = "Slider";
+var Snackbar = React3__namespace.forwardRef(
+  ({ className, message, action, onAction, onDismiss, open = true, ...props }, ref) => {
+    if (!open) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: cn(
+          "flex items-center gap-2 min-w-[288px] max-w-[560px] bg-m3-inverse-surface text-m3-inverse-on-surface rounded-m3-xs px-4 py-3 shadow-m3-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm", children: message }),
+          action && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onAction,
+              className: "text-m3-inverse-primary text-sm font-medium hover:opacity-80 transition-opacity px-2",
+              children: action
+            }
+          ),
+          onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onDismiss,
+              className: "text-m3-inverse-on-surface hover:opacity-80 transition-opacity p-0.5",
+              "aria-label": "Dismiss",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Snackbar.displayName = "Snackbar";
+var Switch = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SwitchPrimitives__namespace.Root,
+  {
+    className: cn(
+      "peer inline-flex h-8 w-[52px] shrink-0 cursor-pointer items-center rounded-m3-full border-2 border-m3-outline transition-colors duration-200",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-m3-primary",
+      "disabled:cursor-not-allowed disabled:opacity-38",
+      "data-[state=checked]:bg-m3-primary data-[state=checked]:border-m3-primary",
+      "data-[state=unchecked]:bg-m3-surface-container-highest",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      SwitchPrimitives__namespace.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block rounded-full transition-all duration-200",
+          "data-[state=checked]:translate-x-[22px] data-[state=checked]:bg-m3-on-primary data-[state=checked]:size-6",
+          "data-[state=unchecked]:translate-x-[2px] data-[state=unchecked]:bg-m3-outline data-[state=unchecked]:size-4"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = "Switch";
+var Tabs = TabsPrimitive__namespace.Root;
+var TabsList = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.List,
+  {
+    ref,
+    className: cn(
+      "flex items-center border-b border-m3-surface-container-highest bg-m3-surface",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = "TabsList";
+var TabsTrigger = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center gap-2 px-6 py-3.5 text-sm font-medium transition-all duration-200",
+      "text-m3-on-surface-variant hover:bg-m3-on-surface/8",
+      "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-m3-primary",
+      "disabled:pointer-events-none disabled:opacity-38",
+      "data-[state=active]:text-m3-primary data-[state=active]:border-b-[3px] data-[state=active]:border-m3-primary data-[state=active]:-mb-px",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Content,
+  {
+    ref,
+    className: cn("mt-4 focus-visible:outline-none", className),
+    ...props
+  }
+));
+TabsContent.displayName = "TabsContent";
+var textFieldVariants = classVarianceAuthority.cva(
+  "relative w-full",
+  {
+    variants: {
+      variant: {
+        filled: "",
+        outlined: ""
+      }
+    },
+    defaultVariants: {
+      variant: "filled"
+    }
+  }
+);
+var TextField = React3__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    label,
+    supportingText,
+    error,
+    errorText,
+    leadingIcon,
+    trailingIcon,
+    ...props
+  }, ref) => {
+    const inputId = React3__namespace.useId();
+    const supportId = React3__namespace.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(textFieldVariants({ variant }), className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex items-center",
+            variant === "filled" && "bg-m3-surface-container-highest rounded-t-m3-xs border-b-2 border-m3-on-surface-variant focus-within:border-m3-primary",
+            variant === "outlined" && "border border-m3-outline rounded-m3-xs focus-within:border-2 focus-within:border-m3-primary",
+            error && "border-m3-error focus-within:border-m3-error"
+          ),
+          children: [
+            leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-3 text-m3-on-surface-variant [&_svg]:size-5", children: leadingIcon }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref,
+                  id: inputId,
+                  "aria-describedby": supportingText || errorText ? supportId : void 0,
+                  "aria-invalid": error,
+                  className: cn(
+                    "peer w-full bg-transparent outline-none text-m3-on-surface text-base h-14 px-4 pt-4 pb-1 placeholder-transparent",
+                    leadingIcon && "pl-2",
+                    trailingIcon && "pr-2"
+                  ),
+                  placeholder: label,
+                  ...props
+                }
+              ),
+              label && /* @__PURE__ */ jsxRuntime.jsx(
+                "label",
+                {
+                  htmlFor: inputId,
+                  className: cn(
+                    "absolute left-4 top-1/2 -translate-y-1/2 text-m3-on-surface-variant text-base transition-all duration-200 pointer-events-none",
+                    "peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-m3-primary",
+                    "peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-xs",
+                    leadingIcon && "left-2",
+                    error && "peer-focus:text-m3-error"
+                  ),
+                  children: label
+                }
+              )
+            ] }),
+            trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pr-3 text-m3-on-surface-variant [&_svg]:size-5", children: trailingIcon })
+          ]
+        }
+      ),
+      (supportingText || errorText) && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          id: supportId,
+          className: cn(
+            "text-xs mt-1 px-4",
+            error ? "text-m3-error" : "text-m3-on-surface-variant"
+          ),
+          children: error ? errorText : supportingText
+        }
+      )
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+var TooltipProvider = TooltipPrimitive__namespace.Provider;
+var Tooltip = TooltipPrimitive__namespace.Root;
+var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
+var TooltipContent = React3__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TooltipPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-m3-xs bg-m3-inverse-surface px-2 py-1.5 text-xs text-m3-inverse-on-surface",
+      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = "TooltipContent";
+
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.Checkbox = Checkbox;
+exports.Chip = Chip;
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.FAB = FAB;
+exports.Progress = Progress;
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupItem = RadioGroupItem;
+exports.Slider = Slider;
+exports.Snackbar = Snackbar;
+exports.Switch = Switch;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+exports.TextField = TextField;
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;
+exports.badgeVariants = badgeVariants;
+exports.buttonVariants = buttonVariants;
+exports.cardVariants = cardVariants;
+exports.chipVariants = chipVariants;
+exports.cn = cn;
+exports.fabVariants = fabVariants;
+exports.textFieldVariants = textFieldVariants;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map