@luxfi/ui 6.1.2 → 7.0.0

package/dist/drawer.js

@@ -0,0 +1,175 @@
+"use client";
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/drawer.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
+var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
+  const { variant: _variant, size: _size, className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Close",
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center",
+        "size-5 min-w-0 shrink-0 p-0",
+        "rounded-sm border-0 overflow-hidden",
+        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
+        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
+        "disabled:opacity-40",
+        "cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "size-5",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: CLOSE_ICON_PATH,
+              fill: "currentColor"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+var DrawerPlacementContext = React2.createContext("right");
+var DrawerSizeContext = React2.createContext("md");
+var DrawerRoot = (props) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    placement = "right",
+    modal = true,
+    size = "md"
+  } = props;
+  const handleOpenChange = React2.useCallback((nextOpen) => {
+    onOpenChange?.({ open: nextOpen });
+  }, [onOpenChange]);
+  return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+    RadixDialog.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      children
+    }
+  ) }) });
+};
+var PLACEMENT_CLASSES = {
+  right: [
+    "inset-y-0 right-0",
+    "data-[state=open]:animate-in data-[state=open]:slide-in-from-right",
+    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right"
+  ].join(" "),
+  left: [
+    "inset-y-0 left-0",
+    "data-[state=open]:animate-in data-[state=open]:slide-in-from-left",
+    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left"
+  ].join(" "),
+  top: [
+    "inset-x-0 top-0",
+    "data-[state=open]:animate-in data-[state=open]:slide-in-from-top",
+    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top"
+  ].join(" "),
+  bottom: [
+    "inset-x-0 bottom-0",
+    "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom",
+    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom"
+  ].join(" ")
+};
+var SIZE_CLASSES = {
+  right: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
+  left: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
+  top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
+  bottom: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" }
+};
+var DrawerContent = React2.forwardRef(
+  function DrawerContent2(props, ref) {
+    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
+    const placement = React2.useContext(DrawerPlacementContext);
+    const size = React2.useContext(DrawerSizeContext);
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      backdrop && /* @__PURE__ */ jsx(
+        RadixDialog.Overlay,
+        {
+          className: cn(
+            "fixed inset-0 z-50 bg-black/50",
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RadixDialog.Content,
+        {
+          ref,
+          className: cn(
+            "fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300",
+            PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
+            SIZE_CLASSES[placement]?.[size] ?? SIZE_CLASSES.right?.md,
+            className
+          ),
+          ...rest,
+          children
+        }
+      )
+    ] });
+    if (portalled) {
+      return /* @__PURE__ */ jsx(RadixDialog.Portal, { container: portalRef?.current ?? void 0, children: content });
+    }
+    return content;
+  }
+);
+var DrawerCloseTrigger = React2.forwardRef(function DrawerCloseTrigger2(props, ref) {
+  return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+    CloseButton,
+    {
+      ref,
+      className: cn("absolute top-7 right-5", props.className),
+      ...props
+    }
+  ) });
+});
+var DrawerTrigger = (props) => {
+  const { asChild = true, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild, ...rest });
+};
+var DrawerHeader = React2.forwardRef(
+  function DrawerHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
+  }
+);
+var DrawerBody = React2.forwardRef(
+  function DrawerBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
+  }
+);
+var DrawerFooter = React2.forwardRef(
+  function DrawerFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
+  }
+);
+var DrawerTitle = RadixDialog.Title;
+var DrawerDescription = RadixDialog.Description;
+var DrawerActionTrigger = RadixDialog.Close;
+
+export { DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger };

package/dist/empty-state.cjs

@@ -0,0 +1,93 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/empty-state.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var apos = "\u2019";
+function upperFirst(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+var ICONS = {};
+var EmptyState = React__namespace.forwardRef(
+  function EmptyState2(props, ref) {
+    const { title, description, term, type = "query", icon, children, className, ...rest } = props;
+    const titleContent = (() => {
+      if (title) {
+        return title;
+      }
+      if (type === "stats") {
+        return "Collecting data";
+      }
+      if (type === "coming_soon") {
+        return "Coming soon";
+      }
+      return "No results";
+    })();
+    const descriptionContent = (() => {
+      if (description) {
+        return description;
+      }
+      if (term && type === "query") {
+        return `Couldn${apos}t find any ${term} that matches your query.`;
+      }
+      if (type === "stats") {
+        return term ? `${upperFirst(term)} stats will be added soon` : "Charts and statistics will be available soon";
+      }
+      if (type === "coming_soon") {
+        return "The information will be available soon. Stay tuned!";
+      }
+    })();
+    const iconContent = (() => {
+      const Icon = ICONS[type];
+      if (Icon) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Icon, {});
+      }
+      return icon;
+    })();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center justify-center py-10", className),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-5", children: [
+          iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: iconContent }),
+          descriptionContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary", children: descriptionContent })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
+          children
+        ] })
+      }
+    );
+  }
+);
+
+exports.EmptyState = EmptyState;

package/dist/empty-state.d.cts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+type EmptyStateType = 'query' | 'stats' | 'coming_soon';
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    description?: React.ReactNode;
+    term?: string;
+    type?: EmptyStateType;
+    icon?: React.ReactNode;
+}
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+
+export { EmptyState, type EmptyStateProps, type EmptyStateType };

package/dist/empty-state.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+type EmptyStateType = 'query' | 'stats' | 'coming_soon';
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    description?: React.ReactNode;
+    term?: string;
+    type?: EmptyStateType;
+    icon?: React.ReactNode;
+}
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+
+export { EmptyState, type EmptyStateProps, type EmptyStateType };

package/dist/empty-state.js

@@ -0,0 +1,71 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/empty-state.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var apos = "\u2019";
+function upperFirst(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+var ICONS = {};
+var EmptyState = React.forwardRef(
+  function EmptyState2(props, ref) {
+    const { title, description, term, type = "query", icon, children, className, ...rest } = props;
+    const titleContent = (() => {
+      if (title) {
+        return title;
+      }
+      if (type === "stats") {
+        return "Collecting data";
+      }
+      if (type === "coming_soon") {
+        return "Coming soon";
+      }
+      return "No results";
+    })();
+    const descriptionContent = (() => {
+      if (description) {
+        return description;
+      }
+      if (term && type === "query") {
+        return `Couldn${apos}t find any ${term} that matches your query.`;
+      }
+      if (type === "stats") {
+        return term ? `${upperFirst(term)} stats will be added soon` : "Charts and statistics will be available soon";
+      }
+      if (type === "coming_soon") {
+        return "The information will be available soon. Stay tuned!";
+      }
+    })();
+    const iconContent = (() => {
+      const Icon = ICONS[type];
+      if (Icon) {
+        return /* @__PURE__ */ jsx(Icon, {});
+      }
+      return icon;
+    })();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center justify-center py-10", className),
+        ...rest,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-5", children: [
+          iconContent && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: iconContent }),
+          descriptionContent ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: descriptionContent })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
+          children
+        ] })
+      }
+    );
+  }
+);
+
+export { EmptyState };

package/dist/expiration-selector.cjs

@@ -0,0 +1,138 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function formatExpDate(date) {
+  const d = new Date(date);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+var GROUP_ORDER = ["weekly", "monthly", "quarterly"];
+var GROUP_LABELS = {
+  weekly: "Weekly",
+  monthly: "Monthly",
+  quarterly: "Quarterly"
+};
+function ExpirationPill({ exp, isSelected, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0",
+        "border text-xs",
+        isSelected ? "border-blue-500/60 bg-blue-900/30 text-blue-300" : "border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+          "font-mono tabular-nums text-[10px]",
+          isSelected ? "text-blue-400/70" : "text-zinc-600",
+          exp.dte <= 7 && !isSelected && "text-amber-600"
+        ), children: [
+          exp.dte,
+          "d"
+        ] })
+      ]
+    }
+  );
+}
+var ExpirationSelector = React__namespace.forwardRef(
+  function ExpirationSelector2(props, ref) {
+    const {
+      expirations,
+      selected,
+      onSelect,
+      showGroups = false,
+      className,
+      ...rest
+    } = props;
+    const scrollRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const selectedEl = container.querySelector('[data-selected="true"]');
+      if (selectedEl) {
+        selectedEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+      }
+    }, [selected]);
+    if (showGroups) {
+      const grouped = GROUP_ORDER.map((type) => ({
+        type,
+        label: GROUP_LABELS[type],
+        items: expirations.filter((e) => e.type === type)
+      })).filter((g) => g.items.length > 0);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          className: cn("flex flex-col gap-2", className),
+          ...rest,
+          children: grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1", children: group.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 overflow-x-auto no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ExpirationPill,
+              {
+                exp,
+                isSelected: exp.date === selected,
+                onClick: () => onSelect(exp.date)
+              }
+            ) }, exp.date)) })
+          ] }, group.type))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center gap-1", className),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: scrollRef,
+            className: "flex gap-1.5 overflow-x-auto no-scrollbar",
+            children: expirations.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ExpirationPill,
+              {
+                exp,
+                isSelected: exp.date === selected,
+                onClick: () => onSelect(exp.date)
+              }
+            ) }, exp.date))
+          }
+        )
+      }
+    );
+  }
+);
+
+exports.ExpirationSelector = ExpirationSelector;

package/dist/expiration-selector.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface ExpirationOption {
+    date: string;
+    dte: number;
+    type: 'weekly' | 'monthly' | 'quarterly';
+}
+interface ExpirationSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    readonly expirations: ExpirationOption[];
+    readonly selected: string;
+    readonly onSelect: (date: string) => void;
+    readonly showGroups?: boolean;
+}
+declare const ExpirationSelector: React.ForwardRefExoticComponent<ExpirationSelectorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type ExpirationOption, ExpirationSelector, type ExpirationSelectorProps };

package/dist/expiration-selector.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface ExpirationOption {
+    date: string;
+    dte: number;
+    type: 'weekly' | 'monthly' | 'quarterly';
+}
+interface ExpirationSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    readonly expirations: ExpirationOption[];
+    readonly selected: string;
+    readonly onSelect: (date: string) => void;
+    readonly showGroups?: boolean;
+}
+declare const ExpirationSelector: React.ForwardRefExoticComponent<ExpirationSelectorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type ExpirationOption, ExpirationSelector, type ExpirationSelectorProps };

package/dist/expiration-selector.js

@@ -0,0 +1,116 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function formatExpDate(date) {
+  const d = new Date(date);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+var GROUP_ORDER = ["weekly", "monthly", "quarterly"];
+var GROUP_LABELS = {
+  weekly: "Weekly",
+  monthly: "Monthly",
+  quarterly: "Quarterly"
+};
+function ExpirationPill({ exp, isSelected, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0",
+        "border text-xs",
+        isSelected ? "border-blue-500/60 bg-blue-900/30 text-blue-300" : "border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
+        /* @__PURE__ */ jsxs("span", { className: cn(
+          "font-mono tabular-nums text-[10px]",
+          isSelected ? "text-blue-400/70" : "text-zinc-600",
+          exp.dte <= 7 && !isSelected && "text-amber-600"
+        ), children: [
+          exp.dte,
+          "d"
+        ] })
+      ]
+    }
+  );
+}
+var ExpirationSelector = React.forwardRef(
+  function ExpirationSelector2(props, ref) {
+    const {
+      expirations,
+      selected,
+      onSelect,
+      showGroups = false,
+      className,
+      ...rest
+    } = props;
+    const scrollRef = React.useRef(null);
+    React.useEffect(() => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const selectedEl = container.querySelector('[data-selected="true"]');
+      if (selectedEl) {
+        selectedEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+      }
+    }, [selected]);
+    if (showGroups) {
+      const grouped = GROUP_ORDER.map((type) => ({
+        type,
+        label: GROUP_LABELS[type],
+        items: expirations.filter((e) => e.type === type)
+      })).filter((g) => g.items.length > 0);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn("flex flex-col gap-2", className),
+          ...rest,
+          children: grouped.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1", children: group.label }),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 overflow-x-auto no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(
+              ExpirationPill,
+              {
+                exp,
+                isSelected: exp.date === selected,
+                onClick: () => onSelect(exp.date)
+              }
+            ) }, exp.date)) })
+          ] }, group.type))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center gap-1", className),
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            className: "flex gap-1.5 overflow-x-auto no-scrollbar",
+            children: expirations.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(
+              ExpirationPill,
+              {
+                exp,
+                isSelected: exp.date === selected,
+                onClick: () => onSelect(exp.date)
+              }
+            ) }, exp.date))
+          }
+        )
+      }
+    );
+  }
+);
+
+export { ExpirationSelector };