@mieweb/ui 0.7.3 → 0.8.0-dev.1

package/dist/{chunk-GTHNWP4P.js → chunk-XUVEF2RQ.js}

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 // src/hooks/useDirection.ts
 var RTL_LOCALES = ["ar", "he", "fa", "ur"];
@@ -124,90 +124,7 @@ function useIsLargeDesktop() {
 function useIsMobileOrTablet() {
   return useMediaQuery("(max-width: 1023px)");
 }
-function useScrollSpy({
-  selectors,
-  ids,
-  rootMargin = "0px 0px -60% 0px",
-  threshold = 0,
-  root,
-  enabled = true
-} = {}) {
-  const [activeId, setActiveId] = useState(null);
-  const visibleEntries = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const rootEl = root?.current ?? null;
-  useEffect(() => {
-    if (!enabled) return;
-    const container = rootEl ?? document;
-    function resolveElements() {
-      let els = [];
-      if (ids && ids.length > 0) {
-        els = ids.map((id) => document.getElementById(id)).filter((el) => el !== null);
-      } else if (selectors) {
-        els = Array.from(container.querySelectorAll(selectors));
-      }
-      return els.filter((el) => el.id);
-    }
-    let intersectionObserver = null;
-    let mutationObserver = null;
-    function startObserving() {
-      const elements = resolveElements();
-      if (elements.length === 0) return false;
-      intersectionObserver = new IntersectionObserver(
-        (entries2) => {
-          for (const entry of entries2) {
-            if (entry.isIntersecting) {
-              visibleEntries.current.set(entry.target.id, entry);
-            } else {
-              visibleEntries.current.delete(entry.target.id);
-            }
-          }
-          if (visibleEntries.current.size > 0) {
-            let topmost = null;
-            let topmostTop = Infinity;
-            for (const [id, entry] of visibleEntries.current) {
-              const top = entry.boundingClientRect.top;
-              if (top < topmostTop) {
-                topmostTop = top;
-                topmost = id;
-              }
-            }
-            if (topmost) {
-              setActiveId(topmost);
-            }
-          }
-        },
-        {
-          root: rootEl,
-          rootMargin,
-          threshold
-        }
-      );
-      for (const el of elements) {
-        intersectionObserver.observe(el);
-      }
-      mutationObserver?.disconnect();
-      mutationObserver = null;
-      return true;
-    }
-    if (!startObserving()) {
-      const watchRoot = rootEl ?? document.body;
-      mutationObserver = new MutationObserver(() => {
-        startObserving();
-      });
-      mutationObserver.observe(watchRoot, { childList: true, subtree: true });
-    }
-    const entries = visibleEntries.current;
-    return () => {
-      mutationObserver?.disconnect();
-      intersectionObserver?.disconnect();
-      entries.clear();
-    };
-  }, [selectors, ids, rootMargin, threshold, rootEl, enabled]);
-  return { activeId };
-}
 
-export { RTL_LOCALES, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery, useScrollSpy };
-//# sourceMappingURL=chunk-GTHNWP4P.js.map
-//# sourceMappingURL=chunk-GTHNWP4P.js.map
+export { RTL_LOCALES, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery };
+//# sourceMappingURL=chunk-XUVEF2RQ.js.map
+//# sourceMappingURL=chunk-XUVEF2RQ.js.map

package/dist/chunk-XUVEF2RQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useDirection.ts","../src/hooks/useKeyboardShortcut.ts","../src/hooks/useMediaQuery.ts"],"names":["useEffect","useState"],"mappings":";;;AAMO,IAAM,WAAA,GAAc,CAAC,IAAA,EAAM,IAAA,EAAM,MAAM,IAAI;AAM3C,SAAS,YAAY,MAAA,EAAyB;AACnD,EAAA,MAAM,OAAO,MAAA,CAAO,WAAA,GAAc,KAAA,CAAM,MAAM,EAAE,CAAC,CAAA;AACjD,EAAA,OAAQ,WAAA,CAAkC,SAAS,IAAI,CAAA;AACzD;AAEA,SAAS,iBAAiB,OAAA,EAAyC;AACjE,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,KAAA;AAC5C,EAAA,MAAM,MAAA,GAAS,WAAW,QAAA,CAAS,eAAA;AACnC,EAAA,OAAO,gBAAA,CAAiB,MAAM,CAAA,CAAE,SAAA,KAAc,QAAQ,KAAA,GAAQ,KAAA;AAChE;AAoBO,SAAS,aACd,UAAA,EACW;AACX,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA;AAAA,IAAoB,MACpD,gBAAA,CAAiB,UAAA,EAAY,OAAO;AAAA,GACtC;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAS,MAAM,YAAA,CAAa,gBAAA,CAAiB,UAAA,EAAY,OAAO,CAAC,CAAA;AACvE,IAAA,MAAA,EAAO;AAEP,IAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,MAAM,CAAA;AAC5C,IAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,eAAA,EAAiB;AAAA,MACzC,UAAA,EAAY,IAAA;AAAA,MACZ,eAAA,EAAiB,CAAC,KAAK,CAAA;AAAA,MACvB,OAAA,EAAS;AAAA,KACV,CAAA;AACD,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAKf,EAAA,MAAM,cAAA,GAAiB,YAAY,OAAA,IAAW,IAAA;AAC9C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,gBAAA,CAAiB,cAAc,CAAC,CAAA;AAAA,EAC/C,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,OAAO,SAAA;AACT;AC3BO,SAAS,mBAAA,CACd,GAAA,EACA,QAAA,EACA,OAAA,GAAmC,EAAC,EAC9B;AACN,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,IAAA;AAAA,IACV,YAAY,EAAC;AAAA,IACb,cAAA,GAAiB,IAAA;AAAA,IACjB,eAAA,GAAkB,KAAA;AAAA,IAClB,YAAA,GAAe;AAAA,GACjB,GAAI,OAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,KAAA,KAAyB;AAExB,MAAA,IAAI,YAAA,EAAc;AAChB,QAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,QAAA,MAAM,OAAA,GAAU,MAAA,CAAO,OAAA,CAAQ,WAAA,EAAY;AAC3C,QAAA,IACE,YAAY,OAAA,IACZ,OAAA,KAAY,cACZ,OAAA,KAAY,QAAA,IACZ,OAAO,iBAAA,EACP;AACA,UAAA;AAAA,QACF;AAAA,MACF;AAGA,MAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,GAAA,EAAK,MAAK,GAAI,SAAA;AAGnC,MAAA,MAAM,aAAa,IAAA,IAAQ,IAAA;AAC3B,MAAA,IAAI,UAAA,EAAY;AACd,QAAA,IAAI,EAAE,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,OAAA,CAAA,EAAU;AAAA,MACzC,CAAA,MAAO;AAEL,QAAA,IAAI,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,OAAA,EAAS;AAAA,MACtC;AAEA,MAAA,IAAI,KAAA,IAAS,CAAC,KAAA,CAAM,QAAA,EAAU;AAC9B,MAAA,IAAI,GAAA,IAAO,CAAC,KAAA,CAAM,MAAA,EAAQ;AAG1B,MAAA,MAAM,QAAA,GACJ,MAAM,GAAA,CAAI,MAAA,KAAW,IAAI,KAAA,CAAM,GAAA,CAAI,WAAA,EAAY,GAAI,KAAA,CAAM,GAAA;AAC3D,MAAA,MAAM,YAAY,GAAA,CAAI,MAAA,KAAW,CAAA,GAAI,GAAA,CAAI,aAAY,GAAI,GAAA;AACzD,MAAA,IAAI,aAAa,SAAA,EAAW;AAE5B,MAAA,IAAI,cAAA,EAAgB;AAClB,QAAA,KAAA,CAAM,cAAA,EAAe;AAAA,MACvB;AACA,MAAA,IAAI,eAAA,EAAiB;AACnB,QAAA,KAAA,CAAM,eAAA,EAAgB;AAAA,MACxB;AAEA,MAAA,QAAA,CAAS,KAAK,CAAA;AAAA,IAChB,CAAA;AAAA,IACA,CAAC,GAAA,EAAK,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,iBAAiB,YAAY;AAAA,GAC1E;AAEA,EAAAA,UAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAClD,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,aAAa,CAAA;AAAA,EACpE,CAAA,EAAG,CAAC,aAAA,EAAe,OAAO,CAAC,CAAA;AAC7B;AAaO,SAAS,WAAA,CAAY,QAAA,EAAsB,OAAA,GAAU,IAAA,EAAY;AACtE,EAAA,mBAAA,CAAoB,KAAK,QAAA,EAAU;AAAA,IACjC,OAAA;AAAA,IACA,SAAA,EAAW,EAAE,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAK;AAAA,IACpC,YAAA,EAAc;AAAA;AAAA,GACf,CAAA;AACH;ACxGO,SAAS,cAAc,KAAA,EAAwB;AAEpD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,SAAkB,MAAM;AAEpD,IAAA,IAAI,OAAO,MAAA,KAAW,WAAA,EAAa,OAAO,KAAA;AAC1C,IAAA,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA,CAAE,OAAA;AAAA,EAClC,CAAC,CAAA;AAED,EAAAD,UAAU,MAAM;AACd,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AAEnC,IAAA,MAAM,UAAA,GAAa,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAG1C,IAAA,UAAA,CAAW,WAAW,OAAO,CAAA;AAG7B,IAAA,MAAM,OAAA,GAAU,CAAC,KAAA,KAA+B;AAC9C,MAAA,UAAA,CAAW,MAAM,OAAO,CAAA;AAAA,IAC1B,CAAA;AAGA,IAAA,IAAI,WAAW,gBAAA,EAAkB;AAC/B,MAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,OAAO,CAAA;AAC7C,MAAA,OAAO,MAAM,UAAA,CAAW,mBAAA,CAAoB,QAAA,EAAU,OAAO,CAAA;AAAA,IAC/D;AAGA,IAAA,UAAA,CAAW,YAAY,OAAO,CAAA;AAC9B,IAAA,OAAO,MAAM,UAAA,CAAW,cAAA,CAAe,OAAO,CAAA;AAAA,EAChD,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,OAAA;AACT;AAOO,SAAS,WAAA,GAAuB;AACrC,EAAA,OAAO,cAAc,oBAAoB,CAAA;AAC3C;AAGO,SAAS,gBAAA,GAA4B;AAC1C,EAAA,OAAO,cAAc,2CAA2C,CAAA;AAClE;AAGO,SAAS,WAAA,GAAuB;AACrC,EAAA,OAAO,cAAc,4CAA4C,CAAA;AACnE;AAGO,SAAS,YAAA,GAAwB;AACtC,EAAA,OAAO,cAAc,qBAAqB,CAAA;AAC5C;AAGO,SAAS,iBAAA,GAA6B;AAC3C,EAAA,OAAO,cAAc,qBAAqB,CAAA;AAC5C;AAGO,SAAS,mBAAA,GAA+B;AAC7C,EAAA,OAAO,cAAc,qBAAqB,CAAA;AAC5C","file":"chunk-XUVEF2RQ.js","sourcesContent":["import { useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport type Direction = 'ltr' | 'rtl';\n\n/** Locales whose primary script reads right-to-left. */\nexport const RTL_LOCALES = ['ar', 'he', 'fa', 'ur'] as const;\n\n/**\n * Returns true when the given locale (e.g. `ar`, `ar-SA`, `he_IL`) uses a\n * right-to-left script.\n */\nexport function isRtlLocale(locale: string): boolean {\n  const lang = locale.toLowerCase().split(/[-_]/)[0];\n  return (RTL_LOCALES as readonly string[]).includes(lang);\n}\n\nfunction resolveDirection(element?: HTMLElement | null): Direction {\n  if (typeof document === 'undefined') return 'ltr';\n  const target = element ?? document.documentElement;\n  return getComputedStyle(target).direction === 'rtl' ? 'rtl' : 'ltr';\n}\n\n/**\n * Hook returning the effective text direction (`ltr` | `rtl`) inherited from\n * the nearest `dir` attribute — zero setup for consumers who set\n * `<html dir=\"rtl\">`.\n *\n * Use for JS-level direction logic that CSS logical properties can't cover:\n * inverting ArrowLeft/ArrowRight keyboard handling, popover/toast placement,\n * drag math, etc.\n *\n * @param elementRef - Optional ref; when provided, direction is resolved from\n *   that element (respecting any local `dir` override) instead of `<html>`.\n *\n * @example\n * ```tsx\n * const direction = useDirection();\n * const nextKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n * ```\n */\nexport function useDirection(\n  elementRef?: RefObject<HTMLElement | null>\n): Direction {\n  const [direction, setDirection] = useState<Direction>(() =>\n    resolveDirection(elementRef?.current)\n  );\n\n  useEffect(() => {\n    const update = () => setDirection(resolveDirection(elementRef?.current));\n    update();\n    // dir changes are rare; observing the whole tree for just this attribute is cheap.\n    const observer = new MutationObserver(update);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir'],\n      subtree: true,\n    });\n    return () => observer.disconnect();\n  }, [elementRef]);\n\n  // Re-sync when a re-render points elementRef.current at a different node:\n  // the MutationObserver only fires on `dir` attribute mutations, so a swapped\n  // ref target with a different inherited direction would otherwise go stale.\n  const currentElement = elementRef?.current ?? null;\n  useEffect(() => {\n    setDirection(resolveDirection(currentElement));\n  }, [currentElement]);\n\n  return direction;\n}\n","import { useEffect, useCallback } from 'react';\n\n/**\n * Options for keyboard shortcut hook\n */\nexport interface KeyboardShortcutOptions {\n  /** Whether the shortcut is currently enabled (default: true) */\n  enabled?: boolean;\n  /** Modifier keys required (default: none) */\n  modifiers?: {\n    ctrl?: boolean;\n    shift?: boolean;\n    alt?: boolean;\n    meta?: boolean;\n  };\n  /** Whether to prevent default browser behavior (default: true) */\n  preventDefault?: boolean;\n  /** Whether to stop event propagation (default: false) */\n  stopPropagation?: boolean;\n  /** Element types to ignore when the shortcut is pressed (default: ['INPUT', 'TEXTAREA', 'SELECT']) */\n  ignoreInputs?: boolean;\n}\n\n/**\n * Hook that triggers a callback when a specific keyboard shortcut is pressed.\n * Supports modifier keys (Ctrl, Shift, Alt, Meta) and ignores input fields by default.\n *\n * @param key - The key to listen for (e.g., 'k', 'Enter', 'Escape', '/')\n * @param callback - Function to call when the shortcut is pressed\n * @param options - Configuration options\n *\n * @example\n * ```tsx\n * // Cmd/Ctrl+K to open search\n * useKeyboardShortcut('k', openSearch, { modifiers: { meta: true, ctrl: true } });\n *\n * // Forward slash to focus search (ignoring when typing)\n * useKeyboardShortcut('/', focusSearch);\n *\n * // Escape to close modal\n * useKeyboardShortcut('Escape', closeModal);\n * ```\n */\nexport function useKeyboardShortcut(\n  key: string,\n  callback: (event: KeyboardEvent) => void,\n  options: KeyboardShortcutOptions = {}\n): void {\n  const {\n    enabled = true,\n    modifiers = {},\n    preventDefault = true,\n    stopPropagation = false,\n    ignoreInputs = true,\n  } = options;\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      // Check if we should ignore input fields\n      if (ignoreInputs) {\n        const target = event.target as HTMLElement;\n        const tagName = target.tagName.toUpperCase();\n        if (\n          tagName === 'INPUT' ||\n          tagName === 'TEXTAREA' ||\n          tagName === 'SELECT' ||\n          target.isContentEditable\n        ) {\n          return;\n        }\n      }\n\n      // Check modifiers\n      const { ctrl, shift, alt, meta } = modifiers;\n\n      // For Cmd+K style shortcuts, allow either meta (Mac) or ctrl (Windows/Linux)\n      const metaOrCtrl = meta || ctrl;\n      if (metaOrCtrl) {\n        if (!(event.metaKey || event.ctrlKey)) return;\n      } else {\n        // If no meta/ctrl modifier specified, ensure neither is pressed\n        if (event.metaKey || event.ctrlKey) return;\n      }\n\n      if (shift && !event.shiftKey) return;\n      if (alt && !event.altKey) return;\n\n      // Check key match (case-insensitive for letters)\n      const eventKey =\n        event.key.length === 1 ? event.key.toLowerCase() : event.key;\n      const targetKey = key.length === 1 ? key.toLowerCase() : key;\n      if (eventKey !== targetKey) return;\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      callback(event);\n    },\n    [key, callback, modifiers, preventDefault, stopPropagation, ignoreInputs]\n  );\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown, enabled]);\n}\n\n/**\n * Hook for the common Cmd/Ctrl+K shortcut pattern (command palette, search, etc.)\n *\n * @param callback - Function to call when Cmd/Ctrl+K is pressed\n * @param enabled - Whether the shortcut is active (default: true)\n *\n * @example\n * ```tsx\n * useCommandK(() => setIsOpen(true));\n * ```\n */\nexport function useCommandK(callback: () => void, enabled = true): void {\n  useKeyboardShortcut('k', callback, {\n    enabled,\n    modifiers: { meta: true, ctrl: true },\n    ignoreInputs: false, // Cmd+K should work even in inputs\n  });\n}\n","import { useState, useEffect } from 'react';\n\n/**\n * Hook that tracks whether a media query matches.\n * Uses the native `matchMedia` API for efficient media query tracking.\n *\n * @param query - CSS media query string (e.g., '(min-width: 768px)')\n * @returns Boolean indicating whether the media query matches\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const isMobile = useMediaQuery('(max-width: 767px)');\n *   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n *   const isDesktop = useMediaQuery('(min-width: 1024px)');\n *\n *   return (\n *     <div>\n *       {isMobile && <MobileLayout />}\n *       {isTablet && <TabletLayout />}\n *       {isDesktop && <DesktopLayout />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaQuery(query: string): boolean {\n  // Initialize with null to indicate SSR/initial state\n  const [matches, setMatches] = useState<boolean>(() => {\n    // Check if we're in a browser environment\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Handler for media query changes\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Modern browsers use addEventListener\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handler);\n      return () => mediaQuery.removeEventListener('change', handler);\n    }\n\n    // Fallback for older browsers\n    mediaQuery.addListener(handler);\n    return () => mediaQuery.removeListener(handler);\n  }, [query]);\n\n  return matches;\n}\n\n/**\n * Preset breakpoint hooks following common responsive design patterns\n */\n\n/** Returns true when viewport is smaller than 640px (mobile) */\nexport function useIsMobile(): boolean {\n  return useMediaQuery('(max-width: 639px)');\n}\n\n/** Returns true when viewport is 640px-767px (large mobile / small tablet) */\nexport function useIsSmallTablet(): boolean {\n  return useMediaQuery('(min-width: 640px) and (max-width: 767px)');\n}\n\n/** Returns true when viewport is 768px-1023px (tablet) */\nexport function useIsTablet(): boolean {\n  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n}\n\n/** Returns true when viewport is 1024px or larger (desktop) */\nexport function useIsDesktop(): boolean {\n  return useMediaQuery('(min-width: 1024px)');\n}\n\n/** Returns true when viewport is 1280px or larger (large desktop) */\nexport function useIsLargeDesktop(): boolean {\n  return useMediaQuery('(min-width: 1280px)');\n}\n\n/** Returns true when viewport is smaller than 1024px (mobile/tablet) */\nexport function useIsMobileOrTablet(): boolean {\n  return useMediaQuery('(max-width: 1023px)');\n}\n"]}

package/dist/chunk-Y6YSJPVC.js

@@ -0,0 +1,129 @@
+import { cn } from './chunk-TQONQSJO.js';
+import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var accordionVariants = cva("", {
+  variants: {
+    variant: {
+      // Each item is its own card with spacing between
+      separated: "flex flex-col gap-3",
+      // One bordered list with dividers
+      joined: "border-border divide-border divide-y rounded-lg border"
+    }
+  },
+  defaultVariants: {
+    variant: "separated"
+  }
+});
+var itemVariants = cva("overflow-hidden", {
+  variants: {
+    variant: {
+      separated: "border-border bg-card rounded-lg border",
+      joined: "bg-card first:rounded-t-lg last:rounded-b-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "separated"
+  }
+});
+var Accordion = React.forwardRef(
+  function Accordion2({
+    items,
+    type = "single",
+    defaultOpenIds,
+    openIds: controlledOpen,
+    onOpenChange,
+    collapsible = true,
+    headingLevel: Heading = "h3",
+    variant,
+    className,
+    ...props
+  }, ref) {
+    const baseId = React.useId();
+    const [internalOpen, setInternalOpen] = React.useState(
+      () => defaultOpenIds ?? []
+    );
+    const rawOpen = controlledOpen ?? internalOpen;
+    const open = React.useMemo(
+      () => type === "single" ? rawOpen.slice(0, 1) : rawOpen,
+      [type, rawOpen]
+    );
+    const openSet = React.useMemo(() => new Set(open), [open]);
+    const toggle = (id) => {
+      let next;
+      if (openSet.has(id)) {
+        if (type === "single" && !collapsible) return;
+        next = open.filter((o) => o !== id);
+      } else {
+        next = type === "single" ? [id] : [...open, id];
+      }
+      if (controlledOpen === void 0) setInternalOpen(next);
+      onOpenChange?.(next);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(accordionVariants({ variant }), className),
+        ...props,
+        children: items.map((item) => {
+          const isOpen = openSet.has(item.id);
+          const triggerId = `${baseId}-${item.id}-trigger`;
+          const panelId = `${baseId}-${item.id}-panel`;
+          return /* @__PURE__ */ jsxs("div", { className: cn(itemVariants({ variant })), children: [
+            /* @__PURE__ */ jsx(Heading, { className: "m-0", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                id: triggerId,
+                "aria-expanded": isOpen,
+                "aria-controls": panelId,
+                disabled: item.disabled,
+                onClick: () => toggle(item.id),
+                className: cn(
+                  "hover:bg-muted/60 flex w-full items-center justify-between gap-4 px-5 py-4 text-start transition-colors",
+                  "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+                  "disabled:pointer-events-none disabled:opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-foreground min-w-0 text-sm font-semibold", children: item.title }),
+                  /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      "aria-hidden": "true",
+                      className: cn(
+                        "text-muted-foreground h-5 w-5 shrink-0 transition-transform duration-200",
+                        isOpen && "rotate-180"
+                      )
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: panelId,
+                role: "region",
+                "aria-labelledby": triggerId,
+                "aria-hidden": !isOpen,
+                inert: !isOpen || void 0,
+                className: cn(
+                  "grid transition-[grid-template-rows] duration-200 ease-out",
+                  isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                ),
+                children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-5 pb-4 text-sm leading-relaxed", children: item.content }) })
+              }
+            )
+          ] }, item.id);
+        })
+      }
+    );
+  }
+);
+
+export { Accordion };
+//# sourceMappingURL=chunk-Y6YSJPVC.js.map
+//# sourceMappingURL=chunk-Y6YSJPVC.js.map

package/dist/chunk-Y6YSJPVC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Accordion/Accordion.tsx"],"names":["Accordion"],"mappings":";;;;;;AAWA,IAAM,iBAAA,GAAoB,IAAI,EAAA,EAAI;AAAA,EAChC,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA;AAAA,MAEP,SAAA,EAAW,qBAAA;AAAA;AAAA,MAEX,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAED,IAAM,YAAA,GAAe,IAAI,iBAAA,EAAmB;AAAA,EAC1C,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,SAAA,EAAW,yCAAA;AAAA,MACX,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAuDM,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EAC7B,SAASA,UAAAA,CACP;AAAA,IACE,KAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,cAAA;AAAA,IACA,OAAA,EAAS,cAAA;AAAA,IACT,YAAA;AAAA,IACA,WAAA,GAAc,IAAA;AAAA,IACd,cAAc,OAAA,GAAU,IAAA;AAAA,IACxB,OAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,SAAe,KAAA,CAAA,KAAA,EAAM;AAC3B,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAU,KAAA,CAAA,QAAA;AAAA,MAC5C,MAAM,kBAAkB;AAAC,KAC3B;AACA,IAAA,MAAM,UAAU,cAAA,IAAkB,YAAA;AAGlC,IAAA,MAAM,IAAA,GAAa,KAAA,CAAA,OAAA;AAAA,MACjB,MAAO,IAAA,KAAS,QAAA,GAAW,QAAQ,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,GAAI,OAAA;AAAA,MACjD,CAAC,MAAM,OAAO;AAAA,KAChB;AACA,IAAA,MAAM,OAAA,GAAgB,cAAQ,MAAM,IAAI,IAAI,IAAI,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAEzD,IAAA,MAAM,MAAA,GAAS,CAAC,EAAA,KAAe;AAC7B,MAAA,IAAI,IAAA;AACJ,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,EAAE,CAAA,EAAG;AACnB,QAAA,IAAI,IAAA,KAAS,QAAA,IAAY,CAAC,WAAA,EAAa;AACvC,QAAA,IAAA,GAAO,IAAA,CAAK,MAAA,CAAO,CAAC,CAAA,KAAM,MAAM,EAAE,CAAA;AAAA,MACpC,CAAA,MAAO;AACL,QAAA,IAAA,GAAO,IAAA,KAAS,WAAW,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,EAAE,CAAA;AAAA,MAChD;AACA,MAAA,IAAI,cAAA,KAAmB,MAAA,EAAW,eAAA,CAAgB,IAAI,CAAA;AACtD,MAAA,YAAA,GAAe,IAAI,CAAA;AAAA,IACrB,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,EAAA,CAAG,iBAAA,CAAkB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACtD,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,UAAA,MAAM,MAAA,GAAS,OAAA,CAAQ,GAAA,CAAI,IAAA,CAAK,EAAE,CAAA;AAClC,UAAA,MAAM,SAAA,GAAY,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,KAAK,EAAE,CAAA,QAAA,CAAA;AACtC,UAAA,MAAM,OAAA,GAAU,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,KAAK,EAAE,CAAA,MAAA,CAAA;AACpC,UAAA,uBACE,IAAA,CAAC,SAAkB,SAAA,EAAW,EAAA,CAAG,aAAa,EAAE,OAAA,EAAS,CAAC,CAAA,EACxD,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,WAAU,KAAA,EACjB,QAAA,kBAAA,IAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,EAAA,EAAI,SAAA;AAAA,gBACJ,eAAA,EAAe,MAAA;AAAA,gBACf,eAAA,EAAe,OAAA;AAAA,gBACf,UAAU,IAAA,CAAK,QAAA;AAAA,gBACf,OAAA,EAAS,MAAM,MAAA,CAAO,IAAA,CAAK,EAAE,CAAA;AAAA,gBAC7B,SAAA,EAAW,EAAA;AAAA,kBACT,yGAAA;AAAA,kBACA,kGAAA;AAAA,kBACA;AAAA,iBACF;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+CAAA,EACb,QAAA,EAAA,IAAA,CAAK,KAAA,EACR,CAAA;AAAA,kCACA,GAAA;AAAA,oBAAC,WAAA;AAAA,oBAAA;AAAA,sBACC,aAAA,EAAY,MAAA;AAAA,sBACZ,SAAA,EAAW,EAAA;AAAA,wBACT,0EAAA;AAAA,wBACA,MAAA,IAAU;AAAA;AACZ;AAAA;AACF;AAAA;AAAA,aACF,EACF,CAAA;AAAA,4BAGA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,EAAA,EAAI,OAAA;AAAA,gBACJ,IAAA,EAAK,QAAA;AAAA,gBACL,iBAAA,EAAiB,SAAA;AAAA,gBACjB,eAAa,CAAC,MAAA;AAAA,gBACd,KAAA,EAAO,CAAC,MAAA,IAAU,MAAA;AAAA,gBAClB,SAAA,EAAW,EAAA;AAAA,kBACT,4DAAA;AAAA,kBACA,SAAS,iBAAA,GAAoB;AAAA,iBAC/B;AAAA,gBAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBAAA,EACb,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,yDAAA,EACZ,QAAA,EAAA,IAAA,CAAK,OAAA,EACR,CAAA,EACF;AAAA;AAAA;AACF,WAAA,EAAA,EA7CQ,KAAK,EA8Cf,CAAA;AAAA,QAEJ,CAAC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF","file":"chunk-Y6YSJPVC.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst accordionVariants = cva('', {\n  variants: {\n    variant: {\n      // Each item is its own card with spacing between\n      separated: 'flex flex-col gap-3',\n      // One bordered list with dividers\n      joined: 'border-border divide-border divide-y rounded-lg border',\n    },\n  },\n  defaultVariants: {\n    variant: 'separated',\n  },\n});\n\nconst itemVariants = cva('overflow-hidden', {\n  variants: {\n    variant: {\n      separated: 'border-border bg-card rounded-lg border',\n      joined: 'bg-card first:rounded-t-lg last:rounded-b-lg',\n    },\n  },\n  defaultVariants: {\n    variant: 'separated',\n  },\n});\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface AccordionItem {\n  /** Stable id used for open state and aria wiring. */\n  id: string;\n  /** Header label (e.g. an FAQ question). */\n  title: React.ReactNode;\n  /** Panel content (e.g. the answer). */\n  content: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface AccordionProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    VariantProps<typeof accordionVariants> {\n  items: AccordionItem[];\n  /** `single` keeps at most one panel open; `multiple` allows any number. */\n  type?: 'single' | 'multiple';\n  /** Ids open initially (uncontrolled). */\n  defaultOpenIds?: string[];\n  /** Controlled open ids. Changes reported via `onOpenChange`. */\n  openIds?: string[];\n  onOpenChange?: (openIds: string[]) => void;\n  /** In `single` mode, allow closing the open panel (default true). */\n  collapsible?: boolean;\n  /** Heading level wrapping each trigger for document outline (default h3). */\n  headingLevel?: 'h2' | 'h3' | 'h4';\n}\n\n// =============================================================================\n// Accordion\n// =============================================================================\n\n/**\n * A vertically stacked set of expandable panels — FAQ lists, settings\n * groups, progressive disclosure. Panels animate open to their natural\n * height (CSS grid rows, no max-height clipping), and headers are real\n * buttons inside headings with full `aria-expanded`/`aria-controls` wiring.\n *\n * @example\n * ```tsx\n * <Accordion\n *   type=\"single\"\n *   items={[\n *     { id: 'pricing', title: 'How is pricing calculated?', content: <p>…</p> },\n *     { id: 'billing', title: 'When am I billed?', content: <p>…</p> },\n *   ]}\n * />\n * ```\n */\nexport const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(\n    {\n      items,\n      type = 'single',\n      defaultOpenIds,\n      openIds: controlledOpen,\n      onOpenChange,\n      collapsible = true,\n      headingLevel: Heading = 'h3',\n      variant,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const baseId = React.useId();\n    const [internalOpen, setInternalOpen] = React.useState<string[]>(\n      () => defaultOpenIds ?? []\n    );\n    const rawOpen = controlledOpen ?? internalOpen;\n    // Single mode keeps at most one panel open, even if defaultOpenIds or a\n    // controlled openIds array hands us several.\n    const open = React.useMemo(\n      () => (type === 'single' ? rawOpen.slice(0, 1) : rawOpen),\n      [type, rawOpen]\n    );\n    const openSet = React.useMemo(() => new Set(open), [open]);\n\n    const toggle = (id: string) => {\n      let next: string[];\n      if (openSet.has(id)) {\n        if (type === 'single' && !collapsible) return;\n        next = open.filter((o) => o !== id);\n      } else {\n        next = type === 'single' ? [id] : [...open, id];\n      }\n      if (controlledOpen === undefined) setInternalOpen(next);\n      onOpenChange?.(next);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(accordionVariants({ variant }), className)}\n        {...props}\n      >\n        {items.map((item) => {\n          const isOpen = openSet.has(item.id);\n          const triggerId = `${baseId}-${item.id}-trigger`;\n          const panelId = `${baseId}-${item.id}-panel`;\n          return (\n            <div key={item.id} className={cn(itemVariants({ variant }))}>\n              <Heading className=\"m-0\">\n                <button\n                  type=\"button\"\n                  id={triggerId}\n                  aria-expanded={isOpen}\n                  aria-controls={panelId}\n                  disabled={item.disabled}\n                  onClick={() => toggle(item.id)}\n                  className={cn(\n                    'hover:bg-muted/60 flex w-full items-center justify-between gap-4 px-5 py-4 text-start transition-colors',\n                    'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',\n                    'disabled:pointer-events-none disabled:opacity-50'\n                  )}\n                >\n                  <span className=\"text-foreground min-w-0 text-sm font-semibold\">\n                    {item.title}\n                  </span>\n                  <ChevronDown\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'text-muted-foreground h-5 w-5 shrink-0 transition-transform duration-200',\n                      isOpen && 'rotate-180'\n                    )}\n                  />\n                </button>\n              </Heading>\n              {/* grid-rows 0fr→1fr animates to natural height without a max-height clip;\n                  collapsed panels are hidden from AT and unfocusable via aria-hidden + inert */}\n              <div\n                id={panelId}\n                role=\"region\"\n                aria-labelledby={triggerId}\n                aria-hidden={!isOpen}\n                inert={!isOpen || undefined}\n                className={cn(\n                  'grid transition-[grid-template-rows] duration-200 ease-out',\n                  isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'\n                )}\n              >\n                <div className=\"overflow-hidden\">\n                  <div className=\"text-muted-foreground px-5 pb-4 text-sm leading-relaxed\">\n                    {item.content}\n                  </div>\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n"]}

package/dist/{chunk-OAHORW4N.cjs → chunk-YRLCR76L.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk6ECKH4DJ_cjs = require('./chunk-6ECKH4DJ.cjs');
-var chunkMYFZYUPR_cjs = require('./chunk-MYFZYUPR.cjs');
+var chunkZ5S5JEJD_cjs = require('./chunk-Z5S5JEJD.cjs');
+var chunkAOHJILLU_cjs = require('./chunk-AOHJILLU.cjs');
 var chunkCW75IKA6_cjs = require('./chunk-CW75IKA6.cjs');
 var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
 var React = require('react');
@@ -35,11 +35,6 @@ var widthClasses = {
   fixed: "w-44"
   // ~176px - enough for MM/DD/YYYY + calendar icon
 };
-var sizeClasses = {
-  sm: "h-8 text-sm",
-  md: "h-10 text-base",
-  lg: "h-12 text-lg"
-};
 var MONTH_NAMES = [
   "January",
   "February",
@@ -222,7 +217,7 @@ var DateInput = React__namespace.forwardRef(
       anchorRef: buttonRef,
       floatingRef: calendarRef,
       style: calendarStyle
-    } = chunkMYFZYUPR_cjs.useAnchoredPosition({
+    } = chunkAOHJILLU_cjs.useAnchoredPosition({
       open: isCalendarOpen,
       placement: "bottom-end"
     });
@@ -655,7 +650,7 @@ var DateInput = React__namespace.forwardRef(
     };
     if (inputType === "year") {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        chunk6ECKH4DJ_cjs.Input,
+        chunkZ5S5JEJD_cjs.Input,
         {
           ref,
           type: inputType === "year" ? "text" : inputType,
@@ -675,107 +670,142 @@ var DateInput = React__namespace.forwardRef(
       );
     }
     if (showCalendar || inputType !== "date") {
-      const { label, helperText, hideLabel, required, size, ...inputProps } = props;
+      const {
+        label,
+        labelVariant,
+        helperText,
+        hideLabel,
+        required,
+        requiredVariant,
+        size,
+        placeholder: placeholderProp,
+        ...inputProps
+      } = props;
       const resolvedSize = size ?? "md";
       const inputId = inputProps.id || generatedId;
       const errorId = `${inputId}-error`;
       const helperId = `${inputId}-helper`;
       const showError = hasError || !!localError;
       const errorMessage = error || localError;
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkS5RVSXDV_cjs.cn("flex flex-col gap-1.5", widthClasses[width]), children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            htmlFor: inputId,
-            className: chunkS5RVSXDV_cjs.cn(
-              "text-foreground text-sm font-medium",
-              hideLabel && "sr-only"
+      const isFloating = labelVariant === "floating" && !!label && !hideLabel;
+      const requiredMark = required && /* @__PURE__ */ jsxRuntime.jsx(chunkZ5S5JEJD_cjs.RequiredMark, { variant: requiredVariant });
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-slot": "input-wrapper",
+          className: chunkS5RVSXDV_cjs.cn("flex flex-col gap-1.5", widthClasses[width]),
+          children: [
+            label && !isFloating && /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                "data-slot": "input-label",
+                htmlFor: inputId,
+                className: chunkS5RVSXDV_cjs.cn(
+                  "text-foreground text-sm font-medium",
+                  hideLabel && "sr-only"
+                ),
+                children: [
+                  label,
+                  requiredMark
+                ]
+              }
             ),
-            children: [
-              label,
-              required && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
                 {
-                  className: "ml-1",
-                  style: { color: "#ef4444" },
-                  "aria-hidden": "true",
-                  children: "*"
+                  "data-slot": "input",
+                  ref,
+                  id: inputId,
+                  type: "text",
+                  inputMode: inputType === "date" ? "numeric" : void 0,
+                  autoComplete,
+                  placeholder: isFloating ? " " : placeholderProp ?? (inputType === "month" ? "Select month" : inputType === "time" ? "Select time" : inputType === "datetime-local" ? "Select date and time" : placeholder),
+                  value: formatPickerValue(displayValue, inputType, timeFormat),
+                  onChange: handleChange,
+                  onBlur: inputType === "date" ? handleBlur : onBlur,
+                  onClick: (event) => {
+                    onClick?.(event);
+                    setIsCalendarOpen(true);
+                  },
+                  readOnly: !isFormattedDate,
+                  required,
+                  "aria-invalid": showError,
+                  "aria-describedby": [errorMessage ? errorId : null, helperText ? helperId : null].filter(Boolean).join(" ") || void 0,
+                  className: chunkS5RVSXDV_cjs.cn(
+                    chunkZ5S5JEJD_cjs.inputVariants({
+                      size: resolvedSize,
+                      hasError: showError,
+                      labelVariant: isFloating ? "floating" : "stacked"
+                    }),
+                    "pr-10",
+                    className
+                  ),
+                  ...inputProps
                 }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ref,
-              id: inputId,
-              type: "text",
-              inputMode: inputType === "date" ? "numeric" : void 0,
-              autoComplete,
-              placeholder: inputType === "month" ? "Select month" : inputType === "time" ? "Select time" : inputType === "datetime-local" ? "Select date and time" : placeholder,
-              value: formatPickerValue(displayValue, inputType, timeFormat),
-              onChange: handleChange,
-              onBlur: inputType === "date" ? handleBlur : onBlur,
-              onClick: (event) => {
-                onClick?.(event);
-                setIsCalendarOpen(true);
-              },
-              readOnly: !isFormattedDate,
-              "aria-invalid": showError,
-              "aria-describedby": [errorMessage ? errorId : null, helperText ? helperId : null].filter(Boolean).join(" ") || void 0,
-              className: chunkS5RVSXDV_cjs.cn(
-                "w-full px-3 py-2",
-                "rounded-lg border",
-                "bg-background text-foreground",
-                "placeholder:text-muted-foreground",
-                "transition-colors duration-200",
-                "focus:ring-ring focus:border-transparent focus:ring-2 focus:outline-none",
-                "disabled:cursor-not-allowed disabled:opacity-50",
-                sizeClasses[resolvedSize],
-                showError ? "border-destructive focus:ring-destructive" : "border-input",
-                "pr-10",
-                className
               ),
-              ...inputProps
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              ref: buttonRef,
-              type: "button",
-              onClick: () => setIsCalendarOpen(!isCalendarOpen),
-              className: chunkS5RVSXDV_cjs.cn(
-                "absolute top-1/2 right-3 -translate-y-1/2",
-                "text-muted-foreground hover:text-foreground",
-                "focus:text-foreground focus:outline-none",
-                "transition-colors"
+              isFloating && /* @__PURE__ */ jsxRuntime.jsxs(
+                "label",
+                {
+                  "data-slot": "input-label",
+                  htmlFor: inputId,
+                  className: chunkZ5S5JEJD_cjs.floatingLabelVariants({
+                    size: resolvedSize,
+                    hasError: showError
+                  }),
+                  children: [
+                    label,
+                    requiredMark
+                  ]
+                }
               ),
-              "aria-label": inputType === "time" ? "Open time picker" : "Open calendar",
-              "aria-expanded": isCalendarOpen,
-              "aria-haspopup": "dialog",
-              children: inputType === "time" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 18 })
-            }
-          )
-        ] }),
-        isCalendarOpen && reactDom.createPortal(renderCalendar(), document.body),
-        errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            id: errorId,
-            className: "text-sm",
-            style: { color: "#ef4444" },
-            role: "alert",
-            children: errorMessage
-          }
-        ),
-        helperText && !errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-muted-foreground text-sm", children: helperText })
-      ] });
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  "data-slot": "date-input-trigger",
+                  ref: buttonRef,
+                  type: "button",
+                  onClick: () => setIsCalendarOpen(!isCalendarOpen),
+                  className: chunkS5RVSXDV_cjs.cn(
+                    "absolute top-1/2 right-3 -translate-y-1/2",
+                    "text-muted-foreground hover:text-foreground",
+                    "focus:text-foreground focus:outline-none",
+                    "transition-colors"
+                  ),
+                  "aria-label": inputType === "time" ? "Open time picker" : "Open calendar",
+                  "aria-expanded": isCalendarOpen,
+                  "aria-haspopup": "dialog",
+                  children: inputType === "time" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 18 })
+                }
+              )
+            ] }),
+            isCalendarOpen && reactDom.createPortal(renderCalendar(), document.body),
+            errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                id: errorId,
+                "data-slot": "input-error",
+                className: "text-sm",
+                style: { color: "#ef4444" },
+                role: "alert",
+                children: errorMessage
+              }
+            ),
+            helperText && !errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                id: helperId,
+                "data-slot": "input-helper",
+                className: "text-muted-foreground text-sm",
+                children: helperText
+              }
+            )
+          ]
+        }
+      );
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6ECKH4DJ_cjs.Input,
+      chunkZ5S5JEJD_cjs.Input,
       {
         ref,
         type: "text",
@@ -830,5 +860,5 @@ function ChevronRightIcon() {
 }
 
 exports.DateInput = DateInput;
-//# sourceMappingURL=chunk-OAHORW4N.cjs.map
-//# sourceMappingURL=chunk-OAHORW4N.cjs.map
+//# sourceMappingURL=chunk-YRLCR76L.cjs.map
+//# sourceMappingURL=chunk-YRLCR76L.cjs.map