"use client";
import { triggerHaptic } from './chunk-D2JF6C3E.mjs';
import { useLink } from './chunk-QWG2FMUN.mjs';
import * as Headless from '@headlessui/react';
import { Button as Button$1 } from '@headlessui/react';
import clsx from 'clsx';
import { forwardRef } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { XMarkIcon } from '@heroicons/react/20/solid';

// 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 = forwardRef(function Link2(props, ref) {
  const RouterLink = useLink();
  return /* @__PURE__ */ jsx(Headless.DataInteractive, { children: /* @__PURE__ */ 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 = 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(
    className,
    styles.base,
    gradient ? styles.gradient : outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, colorStyles),
    pill && pillStyles,
    size !== "md" && sizeStyles[size],
    fullWidth && "w-full",
    loading && "pointer-events-none"
  );
  const handleTapStart = () => {
    if (!loading && !disabled) {
      triggerHaptic(destructive ? "medium" : "light");
    }
  };
  const isDisabled = disabled || loading;
  const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: loading && /* @__PURE__ */ jsx(
      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__ */ jsx(LoadingSpinner, { className: "mr-2" })
      }
    ) }),
    /* @__PURE__ */ jsx("span", { className: clsx("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__ */ jsx(
    motion.div,
    {
      whileTap: !isDisabled ? { scale: 0.97 } : void 0,
      transition: getTransition(springPresets.stiff),
      onTapStart: handleTapStart,
      className: clsx("inline-flex", fullWidth && "w-full"),
      children: /* @__PURE__ */ jsx(
        Link,
        {
          ...linkProps,
          className: classes,
          ref,
          children: /* @__PURE__ */ jsx(TouchTarget, { children: buttonContent })
        }
      )
    }
  ) : /* @__PURE__ */ jsx(
    motion.div,
    {
      whileTap: !isDisabled ? { scale: 0.97 } : void 0,
      transition: getTransition(springPresets.stiff),
      onTapStart: handleTapStart,
      className: clsx("inline-flex", fullWidth && "w-full"),
      children: /* @__PURE__ */ jsx(
        Button$1,
        {
          ...buttonProps,
          disabled: isDisabled,
          className: clsx(classes, "cursor-default"),
          ref,
          children: /* @__PURE__ */ jsx(TouchTarget, { children: buttonContent })
        }
      )
    }
  );
});
function TouchTarget({ children }) {
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ 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__ */ jsxs(
    "svg",
    {
      className: clsx("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__ */ jsx(
          "circle",
          {
            className: "opacity-25",
            cx: "12",
            cy: "12",
            r: "10",
            stroke: "currentColor",
            strokeWidth: "4"
          }
        ),
        /* @__PURE__ */ 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) {
      triggerHaptic("medium");
      onClick?.();
    }
  };
  return /* @__PURE__ */ jsxs(
    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(
        fabPositions[position],
        extended ? "px-5 h-14 rounded-full" : clsx(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__ */ jsx(LoadingSpinner, { className: fabIconSizes[size] }) : /* @__PURE__ */ jsx("span", { className: fabIconSizes[size], children: icon }),
        extended && label && /* @__PURE__ */ 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) {
      triggerHaptic(destructive ? "medium" : "light");
      onClick?.();
    }
  };
  const variantStyles = {
    solid: clsx(
      "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(
      "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(
      "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__ */ jsx(
    motion.button,
    {
      onClick: handleClick,
      disabled: disabled || loading,
      whileTap: { scale: 0.9 },
      transition: getTransition(springPresets.stiff),
      className: clsx(
        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__ */ jsx(LoadingSpinner, { className: iconSizes[size] }) : /* @__PURE__ */ 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(
    "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__ */ jsxs(
      "button",
      {
        type: "button",
        "data-testid": "badge",
        onClick,
        style: CRYSTAL_STYLE,
        ...liveProps,
        className: clsx(
          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__ */ jsx("span", { className: clsx("shrink-0", sz.icon), "aria-hidden": true, children: icon }),
          children
        ]
      }
    );
  }
  if (removable) {
    return /* @__PURE__ */ jsxs(
      "span",
      {
        "data-testid": "badge",
        ...props,
        ...liveProps,
        style: CRYSTAL_STYLE,
        className: clsx(base, "pr-1"),
        children: [
          icon && /* @__PURE__ */ jsx("span", { className: clsx("shrink-0", sz.icon), "aria-hidden": true, children: icon }),
          children,
          /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              "aria-label": removeLabel,
              onClick: (event) => {
                event.stopPropagation();
                onRemove?.();
              },
              className: clsx(
                "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__ */ jsx(XMarkIcon, { className: sz.remove })
            }
          )
        ]
      }
    );
  }
  return /* @__PURE__ */ jsxs("span", { "data-testid": "badge", ...props, ...liveProps, style: CRYSTAL_STYLE, className: base, children: [
    icon && /* @__PURE__ */ jsx("span", { className: clsx("shrink-0", sz.icon), "aria-hidden": true, children: icon }),
    children
  ] });
}
forwardRef(function BadgeButton2({
  color = "zinc",
  size = "sm",
  icon,
  className,
  children,
  ...props
}, ref) {
  let classes = clsx(
    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__ */ jsx(Link, { ...props, className: classes, ref, children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, { color, size, icon, children }) }) });
  }
  return /* @__PURE__ */ jsx(Headless.Button, { ...props, className: classes, ref, children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, { color, size, icon, children }) }) });
});

export { Badge, Button, FloatingActionButton, IconButton, Link, TouchTarget, buttonPress, buttonPressReduced, buttonTap, cardHover, cardHoverReduced, cardPress, createMotionProps, duration, durationSeconds, durations, durationsReduced, ease, easeCss, easings, fadeOnly, fadeScale, getTransition, getVariants, iosColors, listItem, listItemReduced, motionTokens, notificationBanner, notificationBannerReduced, pageControlDot, prefersReducedMotion, slideDown, slideRight, slideUp, spring, springPresets, springPresetsReduced, staggerContainer, swipeActionThreshold, swipeConstraints };
//# sourceMappingURL=chunk-WR55H7DH.mjs.map
//# sourceMappingURL=chunk-WR55H7DH.mjs.map