@datatechsolutions/ui 3.6.1 → 3.7.0

package/dist/chunk-BHOT22QL.js

@@ -0,0 +1,998 @@
+"use client";
+'use strict';
+
+var chunkUZ3CMNUJ_js = require('./chunk-UZ3CMNUJ.js');
+var chunkS7KHTUHA_js = require('./chunk-S7KHTUHA.js');
+var Headless = require('@headlessui/react');
+var clsx = require('clsx');
+var react = require('react');
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
+var solid = require('@heroicons/react/20/solid');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+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 Headless__namespace = /*#__PURE__*/_interopNamespace(Headless);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/lib/motion-tokens.ts
+var duration = {
+  /** 90ms — micro feedback: toggle thumb, hover tint, focus ring */
+  xs: 90,
+  /** 150ms — button press, popover open, chip toggle */
+  sm: 150,
+  /** 240ms — card hover, drawer slide, tab switch */
+  md: 240,
+  /** 360ms — page transitions, modal enter/exit */
+  lg: 360
+};
+var durationSeconds = {
+  xs: duration.xs / 1e3,
+  sm: duration.sm / 1e3,
+  md: duration.md / 1e3,
+  lg: duration.lg / 1e3
+};
+var ease = {
+  /** Default product curve — symmetric, balanced */
+  standard: [0.4, 0, 0.2, 1],
+  /** Entering elements — slow start, fast finish */
+  emphasized: [0.2, 0, 0, 1],
+  /** Arrivals — fast in, slow settle */
+  decelerate: [0, 0, 0.2, 1],
+  /** Departures — fast out, sharp end */
+  accelerate: [0.4, 0, 1, 1],
+  /** iOS HIG-canonical curve — slightly slower decay than `standard` */
+  ios: [0.25, 0.46, 0.45, 0.94]
+};
+var easeCss = {
+  standard: `cubic-bezier(${ease.standard.join(", ")})`,
+  emphasized: `cubic-bezier(${ease.emphasized.join(", ")})`,
+  decelerate: `cubic-bezier(${ease.decelerate.join(", ")})`,
+  accelerate: `cubic-bezier(${ease.accelerate.join(", ")})`,
+  ios: `cubic-bezier(${ease.ios.join(", ")})`
+};
+var spring = {
+  /** Snap — fast, no overshoot. Buttons, micro-interactions. */
+  snap: { type: "spring", stiffness: 500, damping: 38 },
+  /** Smooth — balanced, no overshoot. Default for cards/transitions. */
+  smooth: { type: "spring", stiffness: 300, damping: 30 },
+  /** Bounce — playful overshoot. Icons, success confirmations. */
+  bounce: { type: "spring", stiffness: 400, damping: 22 },
+  /** Gentle — soft and slow. Modals, large surface entry. */
+  gentle: { type: "spring", stiffness: 200, damping: 22 },
+  /** Sheet — iOS sheet presentation (with mass). Drawers. */
+  sheet: { type: "spring", stiffness: 350, damping: 30, mass: 0.8 }
+};
+var motionTokens = {
+  duration,
+  durationSeconds,
+  ease,
+  easeCss,
+  spring
+};
+
+// src/lib/animations.ts
+function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function getTransition(transition) {
+  if (prefersReducedMotion()) {
+    return { duration: 0 };
+  }
+  return transition;
+}
+function getVariants(variants) {
+  if (prefersReducedMotion()) {
+    const reducedVariants = {};
+    for (const key in variants) {
+      reducedVariants[key] = {
+        ...variants[key],
+        transition: { duration: 0 }
+      };
+    }
+    return reducedVariants;
+  }
+  return variants;
+}
+var springPresets = {
+  default: spring.smooth,
+  bouncy: spring.bounce,
+  stiff: spring.snap,
+  gentle: spring.gentle,
+  sheet: spring.sheet,
+  /** Quick spring - very fast, good for micro-interactions */
+  quick: { type: "spring", stiffness: 600, damping: 40 }
+};
+var springPresetsReduced = {
+  default: prefersReducedMotion() ? { duration: 0 } : springPresets.default,
+  bouncy: prefersReducedMotion() ? { duration: 0 } : springPresets.bouncy,
+  stiff: prefersReducedMotion() ? { duration: 0 } : springPresets.stiff,
+  gentle: prefersReducedMotion() ? { duration: 0 } : springPresets.gentle,
+  sheet: prefersReducedMotion() ? { duration: 0 } : springPresets.sheet,
+  quick: prefersReducedMotion() ? { duration: 0 } : springPresets.quick
+};
+var buttonPress = {
+  idle: { scale: 1 },
+  pressed: { scale: 0.97 },
+  hover: { scale: 1.02 }
+};
+var buttonTap = {
+  scale: 0.97,
+  transition: springPresets.stiff
+};
+var buttonPressReduced = {
+  idle: { opacity: 1 },
+  pressed: { opacity: 0.7 },
+  hover: { opacity: 0.9 }
+};
+var cardHover = {
+  idle: {
+    y: 0,
+    boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+  },
+  hover: {
+    y: -4,
+    boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1)"
+  }
+};
+var cardPress = {
+  idle: { scale: 1 },
+  pressed: { scale: 0.98 }
+};
+var cardHoverReduced = {
+  idle: { opacity: 1 },
+  hover: { opacity: 0.95 }
+};
+var slideUp = {
+  hidden: { y: "100%", opacity: 0 },
+  visible: { y: 0, opacity: 1 },
+  exit: { y: "100%", opacity: 0 }
+};
+var slideRight = {
+  hidden: { x: "100%", opacity: 0 },
+  visible: { x: 0, opacity: 1 },
+  exit: { x: "100%", opacity: 0 }
+};
+var slideDown = {
+  hidden: { y: "-100%", opacity: 0 },
+  visible: { y: 0, opacity: 1 },
+  exit: { y: "-100%", opacity: 0 }
+};
+var fadeScale = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.95 }
+};
+var fadeOnly = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+  exit: { opacity: 0 }
+};
+var notificationBanner = {
+  hidden: { y: -100, opacity: 0, scale: 0.9 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    scale: 1,
+    transition: springPresets.bouncy
+  },
+  exit: {
+    y: -100,
+    opacity: 0,
+    scale: 0.9,
+    transition: { duration: 0.2 }
+  }
+};
+var notificationBannerReduced = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.15 } },
+  exit: { opacity: 0, transition: { duration: 0.1 } }
+};
+var listItem = {
+  hidden: { opacity: 0, x: -20 },
+  visible: (i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.05,
+      ...springPresets.default
+    }
+  })
+};
+var staggerContainer = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05
+    }
+  }
+};
+var listItemReduced = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.15 } }
+};
+var swipeActionThreshold = 80;
+var swipeConstraints = {
+  left: -120,
+  right: 0
+};
+var pageControlDot = {
+  inactive: { width: 8, backgroundColor: "rgb(156 163 175)" },
+  active: { width: 24, backgroundColor: "rgb(59 130 246)" }
+};
+var iosColors = {
+  // Primary colors
+  blue: "#007AFF",
+  green: "#34C759",
+  red: "#FF3B30",
+  orange: "#FF9500",
+  yellow: "#FFCC00",
+  purple: "#AF52DE",
+  pink: "#FF2D55",
+  teal: "#5AC8FA",
+  indigo: "#5856D6",
+  mint: "#00C7BE",
+  cyan: "#32ADE6",
+  brown: "#A2845E",
+  // Grays
+  gray: "#8E8E93",
+  gray2: "#AEAEB2",
+  gray3: "#C7C7CC",
+  gray4: "#D1D1D6",
+  gray5: "#E5E5EA",
+  gray6: "#F2F2F7",
+  // Dark mode variants
+  dark: {
+    blue: "#0A84FF",
+    green: "#30D158",
+    red: "#FF453A",
+    orange: "#FF9F0A",
+    yellow: "#FFD60A",
+    purple: "#BF5AF2",
+    pink: "#FF375F",
+    teal: "#64D2FF",
+    indigo: "#5E5CE6",
+    mint: "#66D4CF",
+    cyan: "#5AC8FA",
+    brown: "#AC8E68"
+  }
+};
+var durations = {
+  instant: 0,
+  fast: duration.sm / 1e3,
+  normal: duration.md / 1e3,
+  slow: duration.lg / 1e3,
+  verySlow: 0.5
+};
+var durationsReduced = {
+  instant: 0,
+  fast: prefersReducedMotion() ? 0 : 0.15,
+  normal: prefersReducedMotion() ? 0 : 0.25,
+  slow: prefersReducedMotion() ? 0 : 0.35,
+  verySlow: prefersReducedMotion() ? 0 : 0.5
+};
+var easings = {
+  default: [0.25, 0.1, 0.25, 1],
+  out: ease.decelerate,
+  in: ease.accelerate,
+  inOut: ease.standard,
+  ios: ease.ios
+};
+function createMotionProps(animatedProps, reducedProps = {}) {
+  if (prefersReducedMotion()) {
+    return { ...animatedProps, ...reducedProps, transition: { duration: 0 } };
+  }
+  return animatedProps;
+}
+var Link = react.forwardRef(function Link2(props, ref) {
+  const RouterLink = chunkS7KHTUHA_js.useLink();
+  return /* @__PURE__ */ jsxRuntime.jsx(Headless__namespace.DataInteractive, { children: /* @__PURE__ */ jsxRuntime.jsx(RouterLink, { ...props, ref }) });
+});
+
+// src/components/button-styles.ts
+var iosColors2 = {
+  // Glassy iOS blue — neutral glass at rest, fills blue on hover
+  "ios-glass-blue": [
+    "liquid-button-primary text-slate-900 [--btn-bg:transparent] [--btn-border:transparent] [--btn-hover-overlay:transparent]",
+    "dark:text-white dark:[--btn-bg:transparent] dark:[--btn-border:transparent]",
+    "[--btn-icon:var(--color-slate-600)] dark:[--btn-icon:var(--color-white)]/70"
+  ],
+  // Glassy iOS red — neutral glass at rest, fills red on hover
+  "ios-glass-red": [
+    "liquid-button liquid-button-red text-slate-900 [--btn-bg:transparent] [--btn-border:transparent] [--btn-hover-overlay:transparent]",
+    "dark:text-white dark:[--btn-bg:transparent] dark:[--btn-border:transparent]",
+    "[--btn-icon:var(--color-slate-600)] dark:[--btn-icon:var(--color-white)]/70"
+  ],
+  // Glassy iOS green — neutral glass at rest, fills green on hover
+  "ios-glass-green": [
+    "liquid-button liquid-button-green text-slate-900 [--btn-bg:transparent] [--btn-border:transparent] [--btn-hover-overlay:transparent]",
+    "dark:text-white dark:[--btn-bg:transparent] dark:[--btn-border:transparent]",
+    "[--btn-icon:var(--color-slate-600)] dark:[--btn-icon:var(--color-white)]/70"
+  ],
+  // Primary iOS blue
+  "ios-blue": [
+    "text-white [--btn-bg:#007AFF] [--btn-border:#0066DD] [--btn-hover-overlay:var(--color-white)]/10",
+    "dark:[--btn-bg:#0A84FF] dark:[--btn-border:#007AFF]",
+    "[--btn-icon:var(--color-white)]/80"
+  ],
+  // Destructive iOS red
+  "ios-red": [
+    "text-white [--btn-bg:#FF3B30] [--btn-border:#E6352B] [--btn-hover-overlay:var(--color-white)]/10",
+    "dark:[--btn-bg:#FF453A] dark:[--btn-border:#FF3B30]",
+    "[--btn-icon:var(--color-white)]/80"
+  ],
+  // iOS green (success/confirm)
+  "ios-green": [
+    "text-white [--btn-bg:#34C759] [--btn-border:#2DB350] [--btn-hover-overlay:var(--color-white)]/10",
+    "dark:[--btn-bg:#30D158] dark:[--btn-border:#34C759]",
+    "[--btn-icon:var(--color-white)]/80"
+  ],
+  // iOS orange (warning)
+  "ios-orange": [
+    "text-white [--btn-bg:#FF9500] [--btn-border:#E68600] [--btn-hover-overlay:var(--color-white)]/10",
+    "dark:[--btn-bg:#FF9F0A] dark:[--btn-border:#FF9500]",
+    "[--btn-icon:var(--color-white)]/80"
+  ],
+  // iOS purple
+  "ios-purple": [
+    "text-white [--btn-bg:#AF52DE] [--btn-border:#9B48C7] [--btn-hover-overlay:var(--color-white)]/10",
+    "dark:[--btn-bg:#BF5AF2] dark:[--btn-border:#AF52DE]",
+    "[--btn-icon:var(--color-white)]/80"
+  ],
+  // iOS teal
+  "ios-teal": [
+    "text-white [--btn-bg:#5AC8FA] [--btn-border:#4AB8E8] [--btn-hover-overlay:var(--color-white)]/10",
+    "dark:[--btn-bg:#64D2FF] dark:[--btn-border:#5AC8FA]",
+    "[--btn-icon:var(--color-white)]/80"
+  ]
+};
+var sizeStyles = {
+  xs: "px-2 py-1 text-xs rounded-md",
+  sm: "px-3 py-1.5 text-sm rounded-lg",
+  md: "",
+  // Default size from base styles
+  lg: "px-5 py-3 text-base rounded-xl",
+  xl: "px-6 py-4 text-lg rounded-xl"
+};
+var pillStyles = "rounded-full";
+var styles = {
+  base: [
+    // Base
+    "relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold",
+    // Sizing
+    "px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] sm:text-sm/6",
+    // Focus
+    "focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500",
+    // Disabled
+    "data-disabled:opacity-50",
+    // Icon
+    "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) sm:*:data-[slot=icon]:my-1 sm:*:data-[slot=icon]:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-hover:[--btn-icon:ButtonText]"
+  ],
+  solid: [
+    // Optical border, implemented as the button background to avoid corner artifacts
+    "border-transparent bg-(--btn-border)",
+    // Dark mode: border is rendered on `after` so background is set to button background
+    "dark:bg-(--btn-bg)",
+    // Button background, implemented as foreground layer to stack on top of pseudo-border layer
+    "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(var(--radius-lg)-1px)] before:bg-(--btn-bg)",
+    // Drop shadow, applied to the inset `before` layer so it blends with the border
+    "before:shadow-xs",
+    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+    "dark:before:hidden",
+    // Dark mode: Subtle white outline is applied using a border
+    "dark:border-white/5",
+    // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
+    "after:absolute after:inset-0 after:-z-10 after:rounded-[calc(var(--radius-lg)-1px)]",
+    // Inner highlight shadow
+    "after:shadow-[inset_0_1px_--theme(--color-white/15%)]",
+    // White overlay on hover
+    "data-active:after:bg-(--btn-hover-overlay) data-hover:after:bg-(--btn-hover-overlay)",
+    // Dark mode: `after` layer expands to cover entire button
+    "dark:after:-inset-px dark:after:rounded-lg",
+    // Disabled
+    "data-disabled:before:shadow-none data-disabled:after:shadow-none"
+  ],
+  outline: [
+    // Liquid glass secondary button
+    "liquid-button text-slate-900 !border-white/55",
+    // Dark mode
+    "dark:text-white dark:!border-white/18",
+    // Icon
+    "[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+  ],
+  plain: [
+    // Base
+    "border-transparent text-zinc-950 data-active:bg-zinc-950/5 data-hover:bg-zinc-950/5",
+    // Dark mode
+    "dark:text-white dark:data-active:bg-white/10 dark:data-hover:bg-white/10",
+    // Icon
+    "[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+  ],
+  gradient: [
+    // Same crystal-illuminated mechanic as ios-glass-blue/red/green:
+    // neutral glass at rest, fills with translucent indigo→purple
+    // gradient on hover. The actual rest/hover styling — including
+    // the text-color flip from slate-900 → white — lives in the
+    // `.liquid-button-gradient` CSS class in liquid-glass.css so the
+    // whole transition is keyed off `:hover` (works without JS).
+    "liquid-button-gradient border-transparent",
+    // Disabled
+    "data-disabled:opacity-50 data-disabled:saturate-50",
+    // Icon tint flips with text via inherit (currentColor)
+    "[--btn-icon:currentColor]"
+  ],
+  colors: {
+    "dark/zinc": [
+      "text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10",
+      "dark:text-white dark:[--btn-bg:var(--color-zinc-600)] dark:[--btn-hover-overlay:var(--color-white)]/5",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]"
+    ],
+    light: [
+      "text-zinc-950 [--btn-bg:white] [--btn-border:var(--color-zinc-950)]/10 [--btn-hover-overlay:var(--color-zinc-950)]/2.5 data-active:[--btn-border:var(--color-zinc-950)]/15 data-hover:[--btn-border:var(--color-zinc-950)]/15",
+      "dark:text-white dark:[--btn-hover-overlay:var(--color-white)]/5 dark:[--btn-bg:var(--color-zinc-800)]",
+      "[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+    ],
+    "dark/white": [
+      "text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10",
+      "dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:var(--color-zinc-950)]/5",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+    ],
+    dark: [
+      "text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10",
+      "dark:[--btn-hover-overlay:var(--color-white)]/5 dark:[--btn-bg:var(--color-zinc-800)]",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]"
+    ],
+    white: [
+      "text-zinc-950 [--btn-bg:white] [--btn-border:var(--color-zinc-950)]/10 [--btn-hover-overlay:var(--color-zinc-950)]/2.5 data-active:[--btn-border:var(--color-zinc-950)]/15 data-hover:[--btn-border:var(--color-zinc-950)]/15",
+      "dark:[--btn-hover-overlay:var(--color-zinc-950)]/5",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-500)] data-hover:[--btn-icon:var(--color-zinc-500)]"
+    ],
+    zinc: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-zinc-600)] [--btn-border:var(--color-zinc-700)]/90",
+      "dark:[--btn-hover-overlay:var(--color-white)]/5",
+      "[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]"
+    ],
+    indigo: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-indigo-500)] [--btn-border:var(--color-indigo-600)]/90",
+      "[--btn-icon:var(--color-indigo-300)] data-active:[--btn-icon:var(--color-indigo-200)] data-hover:[--btn-icon:var(--color-indigo-200)]"
+    ],
+    cyan: [
+      "text-cyan-950 [--btn-bg:var(--color-cyan-300)] [--btn-border:var(--color-cyan-400)]/80 [--btn-hover-overlay:var(--color-white)]/25",
+      "[--btn-icon:var(--color-cyan-500)]"
+    ],
+    red: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-red-600)] [--btn-border:var(--color-red-700)]/90",
+      "[--btn-icon:var(--color-red-300)] data-active:[--btn-icon:var(--color-red-200)] data-hover:[--btn-icon:var(--color-red-200)]"
+    ],
+    orange: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-orange-500)] [--btn-border:var(--color-orange-600)]/90",
+      "[--btn-icon:var(--color-orange-300)] data-active:[--btn-icon:var(--color-orange-200)] data-hover:[--btn-icon:var(--color-orange-200)]"
+    ],
+    amber: [
+      "text-amber-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-amber-400)] [--btn-border:var(--color-amber-500)]/80",
+      "[--btn-icon:var(--color-amber-600)]"
+    ],
+    yellow: [
+      "text-yellow-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-yellow-300)] [--btn-border:var(--color-yellow-400)]/80",
+      "[--btn-icon:var(--color-yellow-600)] data-active:[--btn-icon:var(--color-yellow-700)] data-hover:[--btn-icon:var(--color-yellow-700)]"
+    ],
+    lime: [
+      "text-lime-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-lime-300)] [--btn-border:var(--color-lime-400)]/80",
+      "[--btn-icon:var(--color-lime-600)] data-active:[--btn-icon:var(--color-lime-700)] data-hover:[--btn-icon:var(--color-lime-700)]"
+    ],
+    green: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-green-600)] [--btn-border:var(--color-green-700)]/90",
+      "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"
+    ],
+    emerald: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-emerald-600)] [--btn-border:var(--color-emerald-700)]/90",
+      "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"
+    ],
+    teal: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-teal-600)] [--btn-border:var(--color-teal-700)]/90",
+      "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"
+    ],
+    sky: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-sky-500)] [--btn-border:var(--color-sky-600)]/80",
+      "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"
+    ],
+    blue: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-blue-600)] [--btn-border:var(--color-blue-700)]/90",
+      "[--btn-icon:var(--color-blue-400)] data-active:[--btn-icon:var(--color-blue-300)] data-hover:[--btn-icon:var(--color-blue-300)]"
+    ],
+    violet: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-violet-500)] [--btn-border:var(--color-violet-600)]/90",
+      "[--btn-icon:var(--color-violet-300)] data-active:[--btn-icon:var(--color-violet-200)] data-hover:[--btn-icon:var(--color-violet-200)]"
+    ],
+    purple: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-purple-500)] [--btn-border:var(--color-purple-600)]/90",
+      "[--btn-icon:var(--color-purple-300)] data-active:[--btn-icon:var(--color-purple-200)] data-hover:[--btn-icon:var(--color-purple-200)]"
+    ],
+    fuchsia: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-fuchsia-500)] [--btn-border:var(--color-fuchsia-600)]/90",
+      "[--btn-icon:var(--color-fuchsia-300)] data-active:[--btn-icon:var(--color-fuchsia-200)] data-hover:[--btn-icon:var(--color-fuchsia-200)]"
+    ],
+    pink: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-pink-500)] [--btn-border:var(--color-pink-600)]/90",
+      "[--btn-icon:var(--color-pink-300)] data-active:[--btn-icon:var(--color-pink-200)] data-hover:[--btn-icon:var(--color-pink-200)]"
+    ],
+    rose: [
+      "text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-rose-500)] [--btn-border:var(--color-rose-600)]/90",
+      "[--btn-icon:var(--color-rose-300)] data-active:[--btn-icon:var(--color-rose-200)] data-hover:[--btn-icon:var(--color-rose-200)]"
+    ]
+  }
+};
+var fabSizes = {
+  sm: "h-12 w-12",
+  md: "h-14 w-14",
+  lg: "h-16 w-16"
+};
+var fabIconSizes = {
+  sm: "h-5 w-5",
+  md: "h-6 w-6",
+  lg: "h-7 w-7"
+};
+var fabPositions = {
+  "bottom-right": "fixed bottom-6 right-6",
+  "bottom-left": "fixed bottom-6 left-6",
+  "bottom-center": "fixed bottom-6 left-1/2 -translate-x-1/2"
+};
+var fabColors = {
+  "ios-blue": "text-white bg-[#007AFF]/85 dark:bg-[#0A84FF]/80 backdrop-blur-xl border border-white/30 dark:border-white/15 shadow-[inset_0_1px_2px_rgba(255,255,255,0.5),0_12px_32px_-8px_rgba(0,122,255,0.5)] hover:bg-[#007AFF] dark:hover:bg-[#0A84FF] hover:shadow-[inset_0_1px_2px_rgba(255,255,255,0.55),0_16px_40px_-8px_rgba(0,122,255,0.65),0_0_24px_-4px_rgba(0,122,255,0.4)]",
+  "ios-green": "text-white bg-[#34C759]/85 dark:bg-[#30D158]/80 backdrop-blur-xl border border-white/30 dark:border-white/15 shadow-[inset_0_1px_2px_rgba(255,255,255,0.5),0_12px_32px_-8px_rgba(52,199,89,0.5)] hover:bg-[#34C759] dark:hover:bg-[#30D158] hover:shadow-[inset_0_1px_2px_rgba(255,255,255,0.55),0_16px_40px_-8px_rgba(52,199,89,0.65),0_0_24px_-4px_rgba(52,199,89,0.4)]",
+  "ios-red": "text-white bg-[#FF3B30]/85 dark:bg-[#FF453A]/80 backdrop-blur-xl border border-white/30 dark:border-white/15 shadow-[inset_0_1px_2px_rgba(255,255,255,0.5),0_12px_32px_-8px_rgba(255,59,48,0.5)] hover:bg-[#FF3B30] dark:hover:bg-[#FF453A] hover:shadow-[inset_0_1px_2px_rgba(255,255,255,0.55),0_16px_40px_-8px_rgba(255,59,48,0.65),0_0_24px_-4px_rgba(255,59,48,0.4)]",
+  "ios-purple": "text-white bg-[#AF52DE]/85 dark:bg-[#BF5AF2]/80 backdrop-blur-xl border border-white/30 dark:border-white/15 shadow-[inset_0_1px_2px_rgba(255,255,255,0.5),0_12px_32px_-8px_rgba(175,82,222,0.5)] hover:bg-[#AF52DE] dark:hover:bg-[#BF5AF2] hover:shadow-[inset_0_1px_2px_rgba(255,255,255,0.55),0_16px_40px_-8px_rgba(175,82,222,0.65),0_0_24px_-4px_rgba(175,82,222,0.4)]",
+  "ios-orange": "text-white bg-[#FF9500]/85 dark:bg-[#FF9F0A]/80 backdrop-blur-xl border border-white/30 dark:border-white/15 shadow-[inset_0_1px_2px_rgba(255,255,255,0.5),0_12px_32px_-8px_rgba(255,149,0,0.5)] hover:bg-[#FF9500] dark:hover:bg-[#FF9F0A] hover:shadow-[inset_0_1px_2px_rgba(255,255,255,0.55),0_16px_40px_-8px_rgba(255,149,0,0.65),0_0_24px_-4px_rgba(255,149,0,0.4)]"
+};
+var iconButtonSizes = {
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12"
+};
+var iconSizes = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+var Button = react.forwardRef(function Button2({
+  color,
+  outline,
+  plain,
+  gradient,
+  className,
+  children,
+  pill,
+  size = "md",
+  loading,
+  loadingText,
+  fullWidth,
+  destructive,
+  disabled,
+  ...props
+}, ref) {
+  const finalColor = destructive ? "ios-red" : color;
+  const isIosColor = finalColor && finalColor in iosColors2;
+  const colorStyles = isIosColor ? iosColors2[finalColor] : styles.colors[finalColor] ?? styles.colors["dark/zinc"];
+  let classes = clsx__default.default(
+    className,
+    styles.base,
+    gradient ? styles.gradient : outline ? styles.outline : plain ? styles.plain : clsx__default.default(styles.solid, colorStyles),
+    pill && pillStyles,
+    size !== "md" && sizeStyles[size],
+    fullWidth && "w-full",
+    loading && "pointer-events-none"
+  );
+  const handleTapStart = () => {
+    if (!loading && !disabled) {
+      chunkUZ3CMNUJ_js.triggerHaptic(destructive ? "medium" : "light");
+    }
+  };
+  const isDisabled = disabled || loading;
+  const buttonContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: loading && /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.span,
+      {
+        initial: { opacity: 0, width: 0 },
+        animate: { opacity: 1, width: "auto" },
+        exit: { opacity: 0, width: 0 },
+        transition: getTransition(springPresets.stiff),
+        className: "inline-flex items-center",
+        children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { className: "mr-2" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx__default.default("inline-flex items-center gap-x-2", loading && "opacity-70"), children: loading && loadingText ? loadingText : children })
+  ] });
+  const linkProps = props;
+  const buttonProps = props;
+  const isLink = typeof props.href === "string";
+  return isLink ? /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      whileTap: !isDisabled ? { scale: 0.97 } : void 0,
+      transition: getTransition(springPresets.stiff),
+      onTapStart: handleTapStart,
+      className: clsx__default.default("inline-flex", fullWidth && "w-full"),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
+        {
+          ...linkProps,
+          className: classes,
+          ref,
+          children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children: buttonContent })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      whileTap: !isDisabled ? { scale: 0.97 } : void 0,
+      transition: getTransition(springPresets.stiff),
+      onTapStart: handleTapStart,
+      className: clsx__default.default("inline-flex", fullWidth && "w-full"),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Headless.Button,
+        {
+          ...buttonProps,
+          disabled: isDisabled,
+          className: clsx__default.default(classes, "cursor-default"),
+          ref,
+          children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children: buttonContent })
+        }
+      )
+    }
+  );
+});
+function TouchTarget({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "absolute top-1/2 left-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 pointer-fine:hidden",
+        "aria-hidden": "true"
+      }
+    ),
+    children
+  ] });
+}
+function LoadingSpinner({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: clsx__default.default("h-4 w-4 animate-spin motion-reduce:animate-none", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+}
+function FloatingActionButton({
+  icon,
+  label,
+  color = "ios-blue",
+  size = "md",
+  position = "bottom-right",
+  onClick,
+  loading,
+  className,
+  extended
+}) {
+  const handleClick = () => {
+    if (!loading) {
+      chunkUZ3CMNUJ_js.triggerHaptic("medium");
+      onClick?.();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.button,
+    {
+      onClick: handleClick,
+      disabled: loading,
+      initial: { scale: 0, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      exit: { scale: 0, opacity: 0 },
+      whileHover: { scale: 1.05 },
+      whileTap: { scale: 0.95 },
+      transition: getTransition(springPresets.bouncy),
+      className: clsx__default.default(
+        fabPositions[position],
+        extended ? "px-5 h-14 rounded-full" : clsx__default.default(fabSizes[size], "rounded-full"),
+        fabColors[color],
+        "flex items-center justify-center gap-2",
+        "shadow-lg hover:shadow-xl",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500/70",
+        "z-50",
+        loading && "opacity-70 cursor-not-allowed",
+        className
+      ),
+      "aria-label": label,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { className: fabIconSizes[size] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: fabIconSizes[size], children: icon }),
+        extended && label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-base", children: label })
+      ]
+    }
+  );
+}
+function IconButton({
+  icon,
+  label,
+  color = "ios-blue",
+  size = "md",
+  variant = "ghost",
+  onClick,
+  disabled,
+  loading,
+  className,
+  destructive
+}) {
+  const finalColor = destructive ? "ios-red" : color;
+  const isIosColor = finalColor in iosColors2;
+  const handleClick = () => {
+    if (!disabled && !loading) {
+      chunkUZ3CMNUJ_js.triggerHaptic(destructive ? "medium" : "light");
+      onClick?.();
+    }
+  };
+  const variantStyles = {
+    solid: clsx__default.default(
+      "text-white",
+      isIosColor && finalColor === "ios-blue" && "bg-[#007AFF] dark:bg-[#0A84FF]",
+      isIosColor && finalColor === "ios-red" && "bg-[#FF3B30] dark:bg-[#FF453A]",
+      isIosColor && finalColor === "ios-green" && "bg-[#34C759] dark:bg-[#30D158]",
+      isIosColor && finalColor === "ios-orange" && "bg-[#FF9500] dark:bg-[#FF9F0A]",
+      isIosColor && finalColor === "ios-purple" && "bg-[#AF52DE] dark:bg-[#BF5AF2]"
+    ),
+    ghost: clsx__default.default(
+      "bg-transparent hover:bg-white/40 dark:hover:bg-white/[0.08]",
+      isIosColor && finalColor === "ios-blue" && "text-[#007AFF] dark:text-[#0A84FF]",
+      isIosColor && finalColor === "ios-red" && "text-[#FF3B30] dark:text-[#FF453A]",
+      isIosColor && finalColor === "ios-green" && "text-[#34C759] dark:text-[#30D158]",
+      isIosColor && finalColor === "ios-orange" && "text-[#FF9500] dark:text-[#FF9F0A]",
+      isIosColor && finalColor === "ios-purple" && "text-[#AF52DE] dark:text-[#BF5AF2]",
+      !isIosColor && "text-slate-700 dark:text-slate-300"
+    ),
+    outline: clsx__default.default(
+      "bg-transparent border",
+      isIosColor && finalColor === "ios-blue" && "border-[#007AFF] text-[#007AFF] dark:border-[#0A84FF] dark:text-[#0A84FF]",
+      isIosColor && finalColor === "ios-red" && "border-[#FF3B30] text-[#FF3B30] dark:border-[#FF453A] dark:text-[#FF453A]",
+      isIosColor && finalColor === "ios-green" && "border-[#34C759] text-[#34C759] dark:border-[#30D158] dark:text-[#30D158]",
+      isIosColor && finalColor === "ios-orange" && "border-[#FF9500] text-[#FF9500] dark:border-[#FF9F0A] dark:text-[#FF9F0A]",
+      isIosColor && finalColor === "ios-purple" && "border-[#AF52DE] text-[#AF52DE] dark:border-[#BF5AF2] dark:text-[#BF5AF2]"
+    )
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.button,
+    {
+      onClick: handleClick,
+      disabled: disabled || loading,
+      whileTap: { scale: 0.9 },
+      transition: getTransition(springPresets.stiff),
+      className: clsx__default.default(
+        iconButtonSizes[size],
+        "rounded-full flex items-center justify-center",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500/70",
+        "transition-colors",
+        variantStyles[variant],
+        (disabled || loading) && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      "aria-label": label,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { className: iconSizes[size] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconSizes[size], children: icon })
+    }
+  );
+}
+var colors = {
+  red: "bg-red-500/15 text-red-700 group-data-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-300 dark:group-data-hover:bg-red-500/20",
+  orange: "bg-orange-500/15 text-orange-700 group-data-hover:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-300 dark:group-data-hover:bg-orange-500/20",
+  amber: "bg-amber-400/20 text-amber-800 group-data-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-300 dark:group-data-hover:bg-amber-400/15",
+  yellow: "bg-yellow-400/20 text-yellow-800 group-data-hover:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-200 dark:group-data-hover:bg-yellow-400/15",
+  lime: "bg-lime-400/20 text-lime-800 group-data-hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-200 dark:group-data-hover:bg-lime-400/15",
+  green: "bg-green-500/15 text-green-700 group-data-hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-300 dark:group-data-hover:bg-green-500/20",
+  emerald: "bg-emerald-500/15 text-emerald-700 group-data-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-300 dark:group-data-hover:bg-emerald-500/20",
+  teal: "bg-teal-500/15 text-teal-700 group-data-hover:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-hover:bg-teal-500/20",
+  cyan: "bg-cyan-400/20 text-cyan-800 group-data-hover:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-200 dark:group-data-hover:bg-cyan-400/15",
+  sky: "bg-sky-500/15 text-sky-700 group-data-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-hover:bg-sky-500/20",
+  blue: "bg-blue-500/15 text-blue-700 group-data-hover:bg-blue-500/25 dark:text-blue-300 dark:group-data-hover:bg-blue-500/25",
+  indigo: "bg-indigo-500/15 text-indigo-700 group-data-hover:bg-indigo-500/25 dark:text-indigo-300 dark:group-data-hover:bg-indigo-500/20",
+  violet: "bg-violet-500/15 text-violet-700 group-data-hover:bg-violet-500/25 dark:text-violet-300 dark:group-data-hover:bg-violet-500/20",
+  purple: "bg-purple-500/15 text-purple-700 group-data-hover:bg-purple-500/25 dark:text-purple-300 dark:group-data-hover:bg-purple-500/20",
+  fuchsia: "bg-fuchsia-400/20 text-fuchsia-700 group-data-hover:bg-fuchsia-400/30 dark:bg-fuchsia-400/10 dark:text-fuchsia-300 dark:group-data-hover:bg-fuchsia-400/20",
+  pink: "bg-pink-400/20 text-pink-700 group-data-hover:bg-pink-400/30 dark:bg-pink-400/10 dark:text-pink-300 dark:group-data-hover:bg-pink-400/20",
+  rose: "bg-rose-400/20 text-rose-700 group-data-hover:bg-rose-400/30 dark:bg-rose-400/10 dark:text-rose-300 dark:group-data-hover:bg-rose-400/20",
+  zinc: "bg-slate-500/15 text-slate-700 group-data-hover:bg-slate-500/25 dark:bg-white/5 dark:text-slate-200 dark:group-data-hover:bg-white/10"
+};
+var sizes = {
+  xs: { container: "px-2 py-0.5 text-[11px] gap-1", icon: "h-3 w-3", remove: "h-3 w-3 -mr-0.5" },
+  sm: { container: "px-2.5 py-0.5 text-xs gap-1.5", icon: "h-3.5 w-3.5", remove: "h-3.5 w-3.5 -mr-1" },
+  md: { container: "px-3 py-1 text-sm gap-1.5", icon: "h-4 w-4", remove: "h-4 w-4 -mr-1" },
+  lg: { container: "px-3.5 py-1.5 text-sm gap-2", icon: "h-4 w-4", remove: "h-4 w-4 -mr-1" }
+};
+var CRYSTAL_STYLE = {
+  backdropFilter: "blur(12px) saturate(1.5)",
+  WebkitBackdropFilter: "blur(12px) saturate(1.5)",
+  boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.45), 0 1px 3px -1px rgba(15,23,42,0.12)"
+};
+function Badge({
+  color = "zinc",
+  size = "sm",
+  icon,
+  removable = false,
+  onRemove,
+  removeLabel = "Remove",
+  onClick,
+  live = false,
+  className,
+  children,
+  ...props
+}) {
+  const sz = sizes[size];
+  const base = clsx__default.default(
+    "inline-flex items-center rounded-full border font-semibold forced-colors:outline",
+    "border-current/20",
+    // hair-line border in the badge's own hue
+    sz.container,
+    colors[color],
+    className
+  );
+  const liveProps = live ? { role: "status", "aria-live": "polite" } : {};
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-testid": "badge",
+        onClick,
+        style: CRYSTAL_STYLE,
+        ...liveProps,
+        className: clsx__default.default(
+          base,
+          "cursor-pointer transition-colors",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1"
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx__default.default("shrink-0", sz.icon), "aria-hidden": true, children: icon }),
+          children
+        ]
+      }
+    );
+  }
+  if (removable) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-testid": "badge",
+        ...props,
+        ...liveProps,
+        style: CRYSTAL_STYLE,
+        className: clsx__default.default(base, "pr-1"),
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx__default.default("shrink-0", sz.icon), "aria-hidden": true, children: icon }),
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": removeLabel,
+              onClick: (event) => {
+                event.stopPropagation();
+                onRemove?.();
+              },
+              className: clsx__default.default(
+                "ml-0.5 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full",
+                "opacity-70 hover:opacity-100 transition-opacity",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(solid.XMarkIcon, { className: sz.remove })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "badge", ...props, ...liveProps, style: CRYSTAL_STYLE, className: base, children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx__default.default("shrink-0", sz.icon), "aria-hidden": true, children: icon }),
+    children
+  ] });
+}
+react.forwardRef(function BadgeButton2({
+  color = "zinc",
+  size = "sm",
+  icon,
+  className,
+  children,
+  ...props
+}, ref) {
+  let classes = clsx__default.default(
+    className,
+    "group relative inline-flex rounded-full",
+    "focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-indigo-500/70"
+  );
+  if (typeof props.href === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Link, { ...props, className: classes, ref, children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { color, size, icon, children }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Headless__namespace.Button, { ...props, className: classes, ref, children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { color, size, icon, children }) }) });
+});
+
+exports.Badge = Badge;
+exports.Button = Button;
+exports.FloatingActionButton = FloatingActionButton;
+exports.IconButton = IconButton;
+exports.Link = Link;
+exports.TouchTarget = TouchTarget;
+exports.buttonPress = buttonPress;
+exports.buttonPressReduced = buttonPressReduced;
+exports.buttonTap = buttonTap;
+exports.cardHover = cardHover;
+exports.cardHoverReduced = cardHoverReduced;
+exports.cardPress = cardPress;
+exports.createMotionProps = createMotionProps;
+exports.duration = duration;
+exports.durationSeconds = durationSeconds;
+exports.durations = durations;
+exports.durationsReduced = durationsReduced;
+exports.ease = ease;
+exports.easeCss = easeCss;
+exports.easings = easings;
+exports.fadeOnly = fadeOnly;
+exports.fadeScale = fadeScale;
+exports.getTransition = getTransition;
+exports.getVariants = getVariants;
+exports.iosColors = iosColors;
+exports.listItem = listItem;
+exports.listItemReduced = listItemReduced;
+exports.motionTokens = motionTokens;
+exports.notificationBanner = notificationBanner;
+exports.notificationBannerReduced = notificationBannerReduced;
+exports.pageControlDot = pageControlDot;
+exports.prefersReducedMotion = prefersReducedMotion;
+exports.slideDown = slideDown;
+exports.slideRight = slideRight;
+exports.slideUp = slideUp;
+exports.spring = spring;
+exports.springPresets = springPresets;
+exports.springPresetsReduced = springPresetsReduced;
+exports.staggerContainer = staggerContainer;
+exports.swipeActionThreshold = swipeActionThreshold;
+exports.swipeConstraints = swipeConstraints;
+//# sourceMappingURL=chunk-BHOT22QL.js.map
+//# sourceMappingURL=chunk-BHOT22QL.js.map