@nexub/react 1.5.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -36,68 +36,70 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-toolbar": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@radix-ui/react-accordion": "^1.3.1",
+    "@radix-ui/react-alert-dialog": "^1.2.1",
+    "@radix-ui/react-checkbox": "^1.4.1",
+    "@radix-ui/react-collapsible": "^1.2.1",
+    "@radix-ui/react-context-menu": "^2.4.1",
+    "@radix-ui/react-dialog": "^1.3.1",
+    "@radix-ui/react-direction": "^1.2.0",
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
+    "@radix-ui/react-hover-card": "^1.2.1",
+    "@radix-ui/react-menubar": "^1.2.1",
+    "@radix-ui/react-navigation-menu": "^1.4.1",
+    "@radix-ui/react-popover": "^1.3.1",
+    "@radix-ui/react-radio-group": "^1.5.1",
+    "@radix-ui/react-scroll-area": "^1.4.0",
+    "@radix-ui/react-select": "^2.4.1",
+    "@radix-ui/react-slider": "^1.6.1",
+    "@radix-ui/react-slot": "^1.5.0",
+    "@radix-ui/react-switch": "^1.4.1",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "@radix-ui/react-toast": "^1.3.1",
+    "@radix-ui/react-toggle": "^1.2.1",
+    "@radix-ui/react-toggle-group": "^1.2.1",
+    "@radix-ui/react-toolbar": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.4.1",
+    "@radix-ui/react-visually-hidden": "^1.2.13",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^4.4.0",
     "react-day-picker": "^9.14.0",
-    "tailwind-merge": "^2.5.4",
-    "@nexub/icons": "1.5.1"
+    "tailwind-merge": "^2.6.1",
+    "@nexub/icons": "1.7.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/tokens": "^1.5.1"
+    "@nexub/tokens": "^1.7.0"
   },
   "devDependencies": {
     "@playwright/test": "1.64.0",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-vite": "8.6.14",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "autoprefixer": "^10.4.20",
-    "axe-core": "^4.11.3",
-    "jsdom": "^25.0.1",
-    "postcss": "^8.4.49",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "storybook": "8.6.14",
-    "tailwindcss": "^3.4.0",
-    "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
+    "@storybook/react": "10.6.3",
+    "@storybook/react-vite": "10.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "autoprefixer": "^10.6.1",
+    "axe-core": "^4.14.0",
+    "jsdom": "^30.1.3",
+    "postcss": "^8.5.31",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "storybook": "10.6.3",
+    "tailwindcss": "^3.4.19",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
     "vaul": "1.1.2",
-    "vitest": "^2.1.8",
-    "@nexub/themes": "1.5.1",
-    "@nexub/tokens": "1.5.1"
+    "vite": "^7.3.7",
+    "vitest": "^5.0.5",
+    "@nexub/themes": "1.7.0",
+    "@nexub/tokens": "1.7.0"
   },
   "scripts": {
     "build": "tsup && node scripts/check-dts.mjs",

package/dist/chunk-63DPMUMR.js

@@ -1,67 +0,0 @@
-'use client';
-import {
-  cn
-} from "./chunk-Q7G5WGYV.js";
-
-// src/components/Skeleton/Skeleton.tsx
-import * as React from "react";
-import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
-var skeletonVariants = cva(
-  "bg-[var(--color-bg-muted)]",
-  {
-    variants: {
-      shape: {
-        line: "rounded",
-        rect: "rounded-md",
-        circle: "rounded-full"
-      },
-      animated: {
-        true: "animate-pulse"
-      }
-    },
-    defaultVariants: {
-      shape: "line",
-      animated: true
-    }
-  }
-);
-var Skeleton = React.forwardRef(
-  ({
-    className,
-    shape = "line",
-    width,
-    height,
-    animated = true,
-    style,
-    ...props
-  }, ref) => {
-    const defaultHeight = shape === "line" ? "1em" : shape === "circle" ? void 0 : void 0;
-    const resolvedWidth = width !== void 0 ? typeof width === "number" ? `${width}px` : width : shape === "circle" ? height !== void 0 ? typeof height === "number" ? `${height}px` : height : "2.5rem" : "100%";
-    const resolvedHeight = height !== void 0 ? typeof height === "number" ? `${height}px` : height : shape === "circle" ? resolvedWidth : defaultHeight;
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ref,
-        "aria-hidden": "true",
-        className: cn(
-          skeletonVariants({ shape, animated }),
-          "block",
-          className
-        ),
-        style: {
-          width: resolvedWidth,
-          height: resolvedHeight,
-          ...style
-        },
-        ...props
-      }
-    );
-  }
-);
-Skeleton.displayName = "Skeleton";
-
-export {
-  skeletonVariants,
-  Skeleton
-};

package/dist/chunk-CHGPGRML.js

@@ -1,115 +0,0 @@
-'use client';
-import {
-  cn
-} from "./chunk-Q7G5WGYV.js";
-
-// src/components/DateRangePicker/DateRangePicker.tsx
-import * as React from "react";
-import * as RadixPopover from "@radix-ui/react-popover";
-import { DayPicker } from "react-day-picker";
-import { format } from "date-fns";
-import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-function formatRange(range, placeholder) {
-  if (!range) return placeholder;
-  if (range.from && range.to) {
-    return `${format(range.from, "PP")} \u2013 ${format(range.to, "PP")}`;
-  }
-  if (range.from) return `${format(range.from, "PP")} \u2013 \u2026`;
-  return placeholder;
-}
-var calendarClassNames = {
-  months: "flex flex-col sm:flex-row gap-4",
-  month: "flex flex-col gap-4",
-  month_caption: "flex justify-center pt-1 relative items-center",
-  caption_label: "text-sm font-medium",
-  nav: "flex items-center gap-1",
-  button_previous: "absolute left-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-  button_next: "absolute right-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-  month_grid: "w-full border-collapse",
-  weekdays: "flex",
-  weekday: "text-[var(--color-text-muted)] rounded-md w-8 font-normal text-[0.8rem] flex-1 text-center",
-  week: "flex w-full mt-2",
-  day: "relative p-0 text-center text-sm flex-1 focus-within:relative focus-within:z-20",
-  day_button: "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-  selected: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)]",
-  range_start: "rounded-l-md",
-  range_end: "rounded-r-md",
-  range_middle: "aria-selected:bg-[var(--color-bg-subtle)] aria-selected:text-[var(--color-text-primary)] rounded-none",
-  today: "bg-[var(--color-bg-subtle)]",
-  outside: "opacity-50",
-  disabled: "opacity-50",
-  hidden: "invisible"
-};
-var DateRangePicker = React.forwardRef(function DateRangePicker2({
-  value,
-  onChange,
-  placeholder = "Pick a date range",
-  disabled = false,
-  minDate,
-  maxDate,
-  className,
-  id,
-  "aria-label": ariaLabel
-}, ref) {
-  const [open, setOpen] = React.useState(false);
-  const display = formatRange(value, placeholder);
-  const label = ariaLabel ? `${ariaLabel}: ${display}` : display;
-  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref,
-        id,
-        disabled,
-        "aria-label": label,
-        className: cn(
-          "inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
-          "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          !value && "text-[var(--color-text-muted)]",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
-          display
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
-      RadixPopover.Content,
-      {
-        align: "start",
-        className: cn(
-          "z-[var(--z-popover)] rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
-        ),
-        children: /* @__PURE__ */ jsx(
-          DayPicker,
-          {
-            mode: "range",
-            selected: value,
-            onSelect: onChange,
-            numberOfMonths: 2,
-            startMonth: minDate,
-            endMonth: maxDate,
-            initialFocus: true,
-            showOutsideDays: true,
-            className: "p-3",
-            classNames: calendarClassNames,
-            components: {
-              Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: "xs", "aria-hidden": "true" }) : orientation === "right" ? /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest })
-            }
-          }
-        )
-      }
-    ) })
-  ] });
-});
-DateRangePicker.displayName = "DateRangePicker";
-
-export {
-  DateRangePicker
-};

package/dist/chunk-H2W7IYVY.js

@@ -1,155 +0,0 @@
-'use client';
-import {
-  cn
-} from "./chunk-Q7G5WGYV.js";
-
-// src/components/FileUpload/FileUpload.tsx
-import * as React from "react";
-import { Upload, X } from "@nexub/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-var FileUploadContext = React.createContext(null);
-function useFileUpload() {
-  const ctx = React.useContext(FileUploadContext);
-  if (!ctx) throw new Error("FileUpload parts must be used inside FileUpload.Root");
-  return ctx;
-}
-var Root = React.forwardRef(
-  ({ className, accept, maxFiles, onFilesChange, children, ...props }, ref) => {
-    const [files, setFiles] = React.useState([]);
-    const [isDragging, setIsDragging] = React.useState(false);
-    const addFiles = React.useCallback(
-      (newFiles) => {
-        setFiles((prev) => {
-          const next = [...prev, ...newFiles].slice(0, maxFiles);
-          onFilesChange?.(next);
-          return next;
-        });
-      },
-      [maxFiles, onFilesChange]
-    );
-    const removeFile = React.useCallback(
-      (index) => {
-        setFiles((prev) => {
-          const next = prev.filter((_, i) => i !== index);
-          onFilesChange?.(next);
-          return next;
-        });
-      },
-      [onFilesChange]
-    );
-    const contextValue = React.useMemo(
-      () => ({ accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging }),
-      [accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging]
-    );
-    return /* @__PURE__ */ jsx(FileUploadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...props, children }) });
-  }
-);
-Root.displayName = "FileUpload.Root";
-var Dropzone = React.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const { accept, addFiles, isDragging, setIsDragging } = useFileUpload();
-    const inputRef = React.useRef(null);
-    function handleDrop(e) {
-      e.preventDefault();
-      setIsDragging(false);
-      const dropped = Array.from(e.dataTransfer.files);
-      addFiles(dropped);
-    }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        role: "button",
-        tabIndex: 0,
-        "aria-label": "Upload files",
-        onClick: () => inputRef.current?.click(),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
-        },
-        onDragOver: (e) => {
-          e.preventDefault();
-          setIsDragging(true);
-        },
-        onDragLeave: () => setIsDragging(false),
-        onDrop: handleDrop,
-        className: cn(
-          "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-8 text-center transition-colors",
-          isDragging ? "border-[var(--color-brand-primary-500)] bg-[var(--color-brand-primary-500)]/5" : "border-[var(--color-border-input)] hover:border-[var(--color-brand-primary-500)] hover:bg-[var(--color-bg-subtle)]",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-text-muted)]", "aria-hidden": "true" }),
-          children ?? /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--color-text-muted)]", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-brand-primary-500)]", children: "Click to upload" }),
-            " ",
-            "or drag and drop"
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "file",
-              className: "sr-only",
-              multiple: true,
-              accept: accept?.join(","),
-              onChange: (e) => {
-                if (e.target.files) addFiles(Array.from(e.target.files));
-                e.target.value = "";
-              }
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Dropzone.displayName = "FileUpload.Dropzone";
-var List = React.forwardRef(
-  ({ className, ...props }, ref) => {
-    const { files } = useFileUpload();
-    if (files.length === 0) return null;
-    return /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-col gap-2", className), ...props });
-  }
-);
-List.displayName = "FileUpload.List";
-var Item = React.forwardRef(({ className, index, ...props }, ref) => {
-  const { files, removeFile } = useFileUpload();
-  const file = files[index];
-  if (!file) return null;
-  return /* @__PURE__ */ jsxs(
-    "li",
-    {
-      ref,
-      className: cn(
-        "flex items-center justify-between gap-3 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-3",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--color-text-primary)]", children: file.name }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--color-text-muted)]", children: [
-            (file.size / 1024).toFixed(1),
-            " KB"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => removeFile(index),
-            "aria-label": `Remove ${file.name}`,
-            className: "shrink-0 rounded p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
-            children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" })
-          }
-        )
-      ]
-    }
-  );
-});
-Item.displayName = "FileUpload.Item";
-var FileUpload = { Root, Dropzone, List, Item };
-
-export {
-  FileUpload
-};

package/dist/chunk-J2T4GFFS.js

@@ -1,85 +0,0 @@
-'use client';
-import {
-  cn
-} from "./chunk-Q7G5WGYV.js";
-
-// src/components/StatusPill/StatusPill.tsx
-import * as React from "react";
-import { cva } from "class-variance-authority";
-import { jsx, jsxs } from "react/jsx-runtime";
-var statusPillVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium select-none",
-  {
-    variants: {
-      tone: {
-        neutral: "bg-[var(--color-neutral-100)] text-[var(--color-neutral-700)] border border-[var(--color-neutral-200)]",
-        info: "bg-[var(--color-semantic-info-default)]/10 text-[var(--color-semantic-info-default)] border border-[var(--color-semantic-info-default)]/20",
-        success: "bg-[var(--color-semantic-success-default)]/10 text-[var(--color-semantic-success-default)] border border-[var(--color-semantic-success-default)]/20",
-        warning: "bg-[var(--color-semantic-warning-default)]/10 text-[var(--color-semantic-warning-default)] border border-[var(--color-semantic-warning-default)]/20",
-        danger: "bg-[var(--color-semantic-error-default)]/10 text-[var(--color-semantic-error-default)] border border-[var(--color-semantic-error-default)]/20",
-        leap: "bg-[var(--color-leap-500)]/10 text-[var(--color-leap-700)] border border-[var(--color-leap-500)]/20",
-        bookub: "bg-[var(--color-bookub-500)]/10 text-[var(--color-bookub-700)] border border-[var(--color-bookub-500)]/20",
-        payub: "bg-[var(--color-payub-500)]/10 text-[var(--color-payub-700)] border border-[var(--color-payub-500)]/20",
-        founderub: "bg-[var(--color-founderub-500)]/10 text-[var(--color-founderub-700)] border border-[var(--color-founderub-500)]/20"
-      }
-    },
-    defaultVariants: {
-      tone: "neutral"
-    }
-  }
-);
-var dotColorMap = {
-  neutral: "bg-[var(--color-neutral-500)]",
-  info: "bg-[var(--color-semantic-info-default)]",
-  success: "bg-[var(--color-semantic-success-default)]",
-  warning: "bg-[var(--color-semantic-warning-default)]",
-  danger: "bg-[var(--color-semantic-error-default)]",
-  leap: "bg-[var(--color-leap-500)]",
-  bookub: "bg-[var(--color-bookub-500)]",
-  payub: "bg-[var(--color-payub-500)]",
-  founderub: "bg-[var(--color-founderub-500)]"
-};
-var pulseTones = ["success", "info"];
-var StatusPill = React.forwardRef(
-  ({ className, tone = "neutral", label, dot = false, ...props }, ref) => {
-    const shouldPulse = dot && pulseTones.includes(tone);
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        ref,
-        className: cn(statusPillVariants({ tone }), className),
-        ...props,
-        children: [
-          dot && /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-2 w-2 shrink-0", children: [
-            shouldPulse && /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
-                  dotColorMap[tone]
-                ),
-                "aria-hidden": "true"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "relative inline-flex rounded-full h-2 w-2",
-                  dotColorMap[tone]
-                )
-              }
-            )
-          ] }),
-          label
-        ]
-      }
-    );
-  }
-);
-StatusPill.displayName = "StatusPill";
-
-export {
-  statusPillVariants,
-  StatusPill
-};

package/dist/chunk-LH3BSAIS.js

@@ -1,119 +0,0 @@
-'use client';
-import {
-  cn
-} from "./chunk-Q7G5WGYV.js";
-
-// src/components/DatePicker/DatePicker.tsx
-import * as React from "react";
-import * as RadixPopover from "@radix-ui/react-popover";
-import { DayPicker } from "react-day-picker";
-import { format } from "date-fns";
-import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-var calendarClassNames = {
-  months: "flex flex-col sm:flex-row gap-4",
-  month: "flex flex-col gap-4",
-  month_caption: "flex justify-center pt-1 relative items-center",
-  caption_label: "text-sm font-medium",
-  nav: "flex items-center gap-1",
-  button_previous: "absolute left-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-  button_next: "absolute right-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-  month_grid: "w-full border-collapse",
-  weekdays: "flex",
-  weekday: "text-[var(--color-text-muted)] rounded-md w-8 font-normal text-[0.8rem] flex-1 text-center",
-  week: "flex w-full mt-2",
-  day: cn(
-    "relative p-0 text-center text-sm flex-1",
-    "[&:has([aria-selected].day-range-end)]:rounded-r-md",
-    "[&:has([aria-selected].day-outside)]:bg-[var(--color-bg-subtle)]/50",
-    "[&:has([aria-selected])]:bg-[var(--color-bg-subtle)]",
-    "first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
-    "focus-within:relative focus-within:z-20"
-  ),
-  day_button: cn(
-    "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
-    "hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)]",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-    "aria-selected:opacity-100"
-  ),
-  selected: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)] hover:text-white focus:bg-[var(--color-fill-primary)] focus:text-white",
-  today: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)]",
-  outside: "text-[var(--color-text-muted)] opacity-50",
-  disabled: "text-[var(--color-text-muted)] opacity-50",
-  hidden: "invisible"
-};
-var DatePicker = React.forwardRef(
-  function DatePicker2({
-    value,
-    onChange,
-    placeholder = "Pick a date",
-    disabled = false,
-    minDate,
-    maxDate,
-    className,
-    id,
-    "aria-label": ariaLabel
-  }, ref) {
-    const [open, setOpen] = React.useState(false);
-    const display = value ? format(value, "PP") : placeholder;
-    return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          ref,
-          id,
-          disabled,
-          "aria-label": ariaLabel ? `${ariaLabel}: ${display}` : display,
-          className: cn(
-            "inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
-            "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            !value && "text-[var(--color-text-muted)]",
-            className
-          ),
-          children: [
-            /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
-            value ? format(value, "PP") : placeholder
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
-        RadixPopover.Content,
-        {
-          align: "start",
-          className: cn(
-            "z-[var(--z-popover)] rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
-          ),
-          children: /* @__PURE__ */ jsx(
-            DayPicker,
-            {
-              mode: "single",
-              selected: value,
-              onSelect: (date) => {
-                onChange?.(date);
-                setOpen(false);
-              },
-              startMonth: minDate,
-              endMonth: maxDate,
-              initialFocus: true,
-              showOutsideDays: true,
-              className: "p-3",
-              classNames: calendarClassNames,
-              components: {
-                Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: "xs", "aria-hidden": "true" }) : orientation === "right" ? /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest })
-              }
-            }
-          )
-        }
-      ) })
-    ] });
-  }
-);
-DatePicker.displayName = "DatePicker";
-
-export {
-  DatePicker
-};