@hex-core/components 1.3.1 → 1.4.0

package/dist/data-table.js

@@ -0,0 +1,103 @@
+"use client";
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+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));
+}
+var Table = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      className: cn("w-full caption-bottom text-sm", className),
+      ...props
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-b-foreground/[0.08]", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t border-t-foreground/[0.08] bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b border-b-foreground/[0.08] transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-[var(--control-height-md,2.5rem)] px-[var(--space-4,1rem)] text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn("p-[var(--space-4,1rem)] align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn(
+      "caption-bottom mt-[var(--space-4,1rem)] text-sm text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+function DataTable({
+  columns,
+  data,
+  caption,
+  "aria-label": ariaLabel
+}) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+  return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-foreground/[0.08]", children: /* @__PURE__ */ jsxs(Table, { "aria-label": ariaLabel, children: [
+    caption ? /* @__PURE__ */ jsx(TableCaption, { children: caption }) : null,
+    /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
+  ] }) });
+}
+
+export { DataTable };
+//# sourceMappingURL=data-table.js.map
+//# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/table/table.tsx","../src/components/data-table/data-table.tsx"],"names":["jsx"],"mappings":"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","file":"data-table.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** A responsive container + styled HTML table. */\nconst Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<div className=\"relative w-full overflow-auto\">\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"w-full caption-bottom text-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t),\n);\nTable.displayName = \"Table\";\n\n/** `<thead>` wrapper with bottom border. */\nconst TableHeader = React.forwardRef<\n\tHTMLTableSectionElement,\n\tReact.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n\t<thead ref={ref} className={cn(\"[&_tr]:border-b [&_tr]:border-b-foreground/[0.08]\", className)} {...props} />\n));\nTableHeader.displayName = \"TableHeader\";\n\n/** `<tbody>` wrapper removing bottom border on last row. */\nconst TableBody = React.forwardRef<\n\tHTMLTableSectionElement,\n\tReact.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n\t<tbody ref={ref} className={cn(\"[&_tr:last-child]:border-0\", className)} {...props} />\n));\nTableBody.displayName = \"TableBody\";\n\n/** `<tfoot>` wrapper with muted background. */\nconst TableFooter = React.forwardRef<\n\tHTMLTableSectionElement,\n\tReact.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n\t<tfoot\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"border-t border-t-foreground/[0.08] bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableFooter.displayName = \"TableFooter\";\n\n/** `<tr>` with hover + selected states. */\nconst TableRow = React.forwardRef<\n\tHTMLTableRowElement,\n\tReact.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n\t<tr\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"border-b border-b-foreground/[0.08] transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-muted/50 data-[state=selected]:bg-muted\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableRow.displayName = \"TableRow\";\n\n/** `<th>` with left-aligned muted text. */\nconst TableHead = React.forwardRef<\n\tHTMLTableCellElement,\n\tReact.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n\t<th\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"h-[var(--control-height-md,2.5rem)] px-[var(--space-4,1rem)] text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableHead.displayName = \"TableHead\";\n\n/** `<td>` with consistent padding. */\nconst TableCell = React.forwardRef<\n\tHTMLTableCellElement,\n\tReact.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n\t<td\n\t\tref={ref}\n\t\tclassName={cn(\"p-[var(--space-4,1rem)] align-middle [&:has([role=checkbox])]:pr-0\", className)}\n\t\t{...props}\n\t/>\n));\nTableCell.displayName = \"TableCell\";\n\n/**\n * Visible `<caption>` rendered below the table. The parent `<Table>` sets\n * `caption-bottom`, so the caption is announced first by screen readers when\n * entering the table, then visually placed below the rows.\n */\nconst TableCaption = React.forwardRef<\n\tHTMLTableCaptionElement,\n\tReact.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n\t<caption\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"caption-bottom mt-[var(--space-4,1rem)] text-sm text-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCaption,\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport {\n\ttype ColumnDef,\n\tflexRender,\n\tgetCoreRowModel,\n\tuseReactTable,\n} from \"@tanstack/react-table\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"../table/table.js\";\n\n/**\n * Generic DataTable wrapper that renders a TanStack Table model using Hex UI's\n * Table primitives. Pass columns + data; use TanStack hooks for sorting,\n * filtering, pagination, row-selection as needed.\n * @template TData - Row data type. Cell value types are inferred per column by TanStack.\n */\nexport interface DataTableProps<TData> {\n\tcolumns: ColumnDef<TData, unknown>[];\n\tdata: TData[];\n\t/**\n\t * Visible caption rendered below the table. Announced by screen readers\n\t * when the user enters the table. Provide either `caption` or `aria-label`.\n\t */\n\tcaption?: React.ReactNode;\n\t/**\n\t * Accessible label for the table when no visible caption is shown.\n\t * Forwarded as `aria-label` on the underlying `<table>` element. Kebab-case\n\t * to match the canonical ARIA prop convention used elsewhere in Hex UI.\n\t */\n\t\"aria-label\"?: string;\n}\n\n/**\n * Render a data-driven table from TanStack column definitions.\n * @param props - Columns, data, and optional accessible labelling (`caption` or `aria-label`)\n * @returns A styled Table rendered from the TanStack row model\n */\nexport function DataTable<TData>({\n\tcolumns,\n\tdata,\n\tcaption,\n\t\"aria-label\": ariaLabel,\n}: DataTableProps<TData>) {\n\tconst table = useReactTable({\n\t\tdata,\n\t\tcolumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t});\n\n\treturn (\n\t\t<div className=\"rounded-md border border-foreground/[0.08]\">\n\t\t\t<Table aria-label={ariaLabel}>\n\t\t\t\t{caption ? <TableCaption>{caption}</TableCaption> : null}\n\t\t\t\t<TableHeader>\n\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t\t<TableHead key={header.id}>\n\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t: flexRender(header.column.columnDef.header, header.getContext())}\n\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t\t</TableHeader>\n\t\t\t\t<TableBody>\n\t\t\t\t\t{table.getRowModel().rows?.length ? (\n\t\t\t\t\t\ttable.getRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t<TableRow key={row.id} data-state={row.getIsSelected() && \"selected\"}>\n\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t<TableCell key={cell.id}>\n\t\t\t\t\t\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t<TableCell colSpan={columns.length} className=\"h-24 text-center\">\n\t\t\t\t\t\t\t\tNo results.\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t)}\n\t\t\t\t</TableBody>\n\t\t\t</Table>\n\t\t</div>\n\t);\n}\n"]}

package/dist/date-picker.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface DatePickerProps {
+    /** Controlled selected date. */
+    value?: Date;
+    /** Fired when the user picks a date in the calendar. */
+    onChange?: (date: Date | undefined) => void;
+    /** Placeholder shown when no date is selected. */
+    placeholder?: string;
+    /** date-fns format string for the trigger label. */
+    dateFormat?: string;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Extra class names on the trigger button. */
+    className?: string;
+    /** Accessible label for the trigger (required when no visible label is adjacent). */
+    "aria-label"?: string;
+    /**
+     * Caption layout forwarded to react-day-picker. Use `"dropdown"` (or
+     * `"dropdown-years"` / `"dropdown-months"`) to render native `<select>`
+     * navigation — useful for birth-date pickers and far-out years.
+     *
+     * Always pair `dropdown` layouts with explicit `startMonth` and `endMonth`;
+     * the RDP default span is ±100 years.
+     */
+    captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+    /** Earliest month/year navigable in the calendar. Forwarded to react-day-picker. */
+    startMonth?: Date;
+    /** Latest month/year navigable in the calendar. Forwarded to react-day-picker. */
+    endMonth?: Date;
+}
+/**
+ * Date picker composed from Popover + Calendar + a styled trigger button.
+ *
+ * This is a minimal single-date picker. For multi/range, compose Calendar + Popover yourself.
+ * @returns A button that opens a single-date calendar popover.
+ */
+declare function DatePicker({ value, onChange, placeholder, dateFormat, disabled, className, "aria-label": ariaLabel, captionLayout, startMonth, endMonth, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace DatePicker {
+    var displayName: string;
+}
+
+export { DatePicker, type DatePickerProps };

package/dist/date-picker.js

@@ -0,0 +1,221 @@
+"use client";
+import { format } from 'date-fns';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var RDP_DROPDOWN_OVERLAY_CSS = `
+.rdp-dropdowns {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--gap-sm, 0.5rem);
+	font-size: 0.875rem;
+	font-weight: 500;
+}
+.rdp-dropdown_root {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1, 0.25rem);
+	border-radius: 0.375rem;
+	padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+	transition: background-color var(--duration-normal, 200ms) ease-out;
+}
+.rdp-dropdown_root:hover {
+	background-color: hsl(var(--accent));
+}
+.rdp-dropdown_root:has(:focus-visible) {
+	outline: 2px solid hsl(var(--ring));
+	outline-offset: 2px;
+}
+.rdp-dropdown {
+	position: absolute;
+	inset: 0;
+	z-index: 10;
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+	appearance: none;
+	background: transparent;
+	border: 0;
+	opacity: 0;
+}
+.rdp-dropdown:disabled {
+	cursor: not-allowed;
+}
+`;
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        dangerouslySetInnerHTML: { __html: RDP_DROPDOWN_OVERLAY_CSS }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DayPicker,
+      {
+        showOutsideDays,
+        className: cn("relative p-[var(--space-3,0.75rem)]", className),
+        classNames: {
+          months: "flex flex-col sm:flex-row gap-[var(--gap-md,1rem)]",
+          month: "flex flex-col gap-[var(--gap-md,1rem)]",
+          month_caption: "flex h-7 items-center justify-center",
+          caption_label: "text-sm font-medium",
+          nav: "absolute inset-x-3 top-3 z-10 flex items-center justify-between pointer-events-none [&>button]:pointer-events-auto",
+          button_previous: cn(
+            "inline-flex h-7 w-7 items-center justify-center rounded-md border border-foreground/[0.08] bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
+          ),
+          button_next: cn(
+            "inline-flex h-7 w-7 items-center justify-center rounded-md border border-foreground/[0.08] bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
+          ),
+          month_grid: "w-full border-collapse space-y-1",
+          weekdays: "flex",
+          weekday: "text-muted-foreground rounded-md w-[var(--control-height-sm,2.25rem)] font-normal text-[0.8rem]",
+          week: "flex w-full mt-[var(--space-2,0.5rem)]",
+          day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].range-end)]:rounded-r-md [&:has([aria-selected].range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
+          day_button: "inline-flex h-[var(--control-height-sm,2.25rem)] w-[var(--control-height-sm,2.25rem)] items-center justify-center rounded-md p-0 text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-selected:opacity-100",
+          selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+          today: "bg-accent text-accent-foreground",
+          outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+          disabled: "text-muted-foreground opacity-50",
+          range_start: "day-range-start range-start",
+          range_end: "day-range-end range-end",
+          range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground rounded-none",
+          hidden: "invisible",
+          ...classNames
+        },
+        components: {
+          Chevron: ({ orientation, className: chevronClassName }) => {
+            const rotation = orientation === "left" ? "rotate-90" : orientation === "right" ? "-rotate-90" : orientation === "up" ? "rotate-180" : "";
+            return /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: cn("h-4 w-4", rotation, chevronClassName),
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+              }
+            );
+          }
+        },
+        ...props
+      }
+    )
+  ] });
+}
+Calendar.displayName = "Calendar";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date",
+  dateFormat = "PPP",
+  disabled,
+  className,
+  "aria-label": ariaLabel,
+  captionLayout,
+  startMonth,
+  endMonth
+}) {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": ariaLabel ?? placeholder,
+        className: cn(
+          "inline-flex h-[var(--control-height-md,2.5rem)] w-[240px] items-center justify-start gap-[var(--gap-sm,0.5rem)] rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-left text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:pointer-events-none disabled:opacity-50",
+          !value && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "h-4 w-4",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+                /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+                /* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: value ? format(value, dateFormat) : placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "single",
+        selected: value,
+        onSelect: (date) => {
+          onChange?.(date);
+          setOpen(false);
+        },
+        captionLayout,
+        startMonth,
+        endMonth,
+        autoFocus: true
+      }
+    ) })
+  ] });
+}
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };
+//# sourceMappingURL=date-picker.js.map
+//# sourceMappingURL=date-picker.js.map

package/dist/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/calendar/calendar.tsx","../src/components/popover/popover.tsx","../src/components/date-picker/date-picker.tsx"],"names":["jsx","React2","jsxs"],"mappings":"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","file":"date-picker.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cn } from \"../../lib/utils.js\";\n\n/*\n * react-day-picker v9 renders each caption-layout dropdown as:\n *   <span class=\"rdp-dropdown_root\">\n *     <select class=\"rdp-dropdown\">…</select>\n *     <span aria-hidden=\"true\">{label}<chevron/></span>\n *   </span>\n * The library expects the consumer's theme to layer the native <select>\n * transparently over the visible label span. Without that overlay both\n * elements paint side-by-side and the month/year labels duplicate. We use a\n * plain <style> block (rather than Tailwind arbitrary variants) because the\n * `_` in the rdp class names trips up Tailwind's underscore-as-space rule and\n * RDP v9's ClassNames merger doesn't run user classes for these keys.\n */\nconst RDP_DROPDOWN_OVERLAY_CSS = `\n.rdp-dropdowns {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: var(--gap-sm, 0.5rem);\n\tfont-size: 0.875rem;\n\tfont-weight: 500;\n}\n.rdp-dropdown_root {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--space-1, 0.25rem);\n\tborder-radius: 0.375rem;\n\tpadding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);\n\ttransition: background-color var(--duration-normal, 200ms) ease-out;\n}\n.rdp-dropdown_root:hover {\n\tbackground-color: hsl(var(--accent));\n}\n.rdp-dropdown_root:has(:focus-visible) {\n\toutline: 2px solid hsl(var(--ring));\n\toutline-offset: 2px;\n}\n.rdp-dropdown {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 10;\n\twidth: 100%;\n\theight: 100%;\n\tcursor: pointer;\n\tappearance: none;\n\tbackground: transparent;\n\tborder: 0;\n\topacity: 0;\n}\n.rdp-dropdown:disabled {\n\tcursor: not-allowed;\n}\n`;\n\n/**\n * Calendar date grid built on react-day-picker v9. Forwards all DayPicker\n * props. Pair `mode` + `selected` + `onSelect` for selection control;\n * pass `captionLayout=\"dropdown\"` with `startMonth`/`endMonth` for\n * native year-dropdown navigation.\n * @returns A themed react-day-picker instance with our dropdown overlay CSS.\n */\nfunction Calendar({\n\tclassName,\n\tclassNames,\n\tshowOutsideDays = true,\n\t...props\n}: React.ComponentProps<typeof DayPicker>) {\n\treturn (\n\t\t<>\n\t\t\t<style\n\t\t\t\t// Single static stylesheet; React inlines once per page\n\t\t\t\t// regardless of Calendar instance count.\n\t\t\t\tdangerouslySetInnerHTML={{ __html: RDP_DROPDOWN_OVERLAY_CSS }}\n\t\t\t/>\n\t\t<DayPicker\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\tclassName={cn(\"relative p-[var(--space-3,0.75rem)]\", className)}\n\t\t\tclassNames={{\n\t\t\t\tmonths: \"flex flex-col sm:flex-row gap-[var(--gap-md,1rem)]\",\n\t\t\t\tmonth: \"flex flex-col gap-[var(--gap-md,1rem)]\",\n\t\t\t\tmonth_caption: \"flex h-7 items-center justify-center\",\n\t\t\t\tcaption_label: \"text-sm font-medium\",\n\t\t\t\tnav: \"absolute inset-x-3 top-3 z-10 flex items-center justify-between pointer-events-none [&>button]:pointer-events-auto\",\n\t\t\t\tbutton_previous: cn(\n\t\t\t\t\t\"inline-flex h-7 w-7 items-center justify-center rounded-md border border-foreground/[0.08] bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30\",\n\t\t\t\t),\n\t\t\t\tbutton_next: cn(\n\t\t\t\t\t\"inline-flex h-7 w-7 items-center justify-center rounded-md border border-foreground/[0.08] bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30\",\n\t\t\t\t),\n\t\t\t\tmonth_grid: \"w-full border-collapse space-y-1\",\n\t\t\t\tweekdays: \"flex\",\n\t\t\t\tweekday: \"text-muted-foreground rounded-md w-[var(--control-height-sm,2.25rem)] font-normal text-[0.8rem]\",\n\t\t\t\tweek: \"flex w-full mt-[var(--space-2,0.5rem)]\",\n\t\t\t\tday: \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].range-end)]:rounded-r-md [&:has([aria-selected].range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\",\n\t\t\t\tday_button:\n\t\t\t\t\t\"inline-flex h-[var(--control-height-sm,2.25rem)] w-[var(--control-height-sm,2.25rem)] items-center justify-center rounded-md p-0 text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-selected:opacity-100\",\n\t\t\t\tselected:\n\t\t\t\t\t\"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n\t\t\t\ttoday: \"bg-accent text-accent-foreground\",\n\t\t\t\toutside:\n\t\t\t\t\t\"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n\t\t\t\tdisabled: \"text-muted-foreground opacity-50\",\n\t\t\t\trange_start: \"day-range-start range-start\",\n\t\t\t\trange_end: \"day-range-end range-end\",\n\t\t\t\trange_middle:\n\t\t\t\t\t\"aria-selected:bg-accent aria-selected:text-accent-foreground rounded-none\",\n\t\t\t\thidden: \"invisible\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tcomponents={{\n\t\t\t\tChevron: ({ orientation, className: chevronClassName }) => {\n\t\t\t\t\tconst rotation =\n\t\t\t\t\t\torientation === \"left\"\n\t\t\t\t\t\t\t? \"rotate-90\"\n\t\t\t\t\t\t\t: orientation === \"right\"\n\t\t\t\t\t\t\t\t? \"-rotate-90\"\n\t\t\t\t\t\t\t\t: orientation === \"up\"\n\t\t\t\t\t\t\t\t\t? \"rotate-180\"\n\t\t\t\t\t\t\t\t\t: \"\";\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\tclassName={cn(\"h-4 w-4\", rotation, chevronClassName)}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<polyline points=\"6 9 12 15 18 9\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t\t</>\n\t);\n}\nCalendar.displayName = \"Calendar\";\n\nexport { Calendar };\n","\"use client\";\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container for a popover. */\nconst Popover = PopoverPrimitive.Root;\n\n/** The element that anchors and opens the popover. */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/** Helper to explicitly anchor the popover to a different element. */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\n/** The floating popover content panel. */\nconst PopoverContent = React.forwardRef<\n\tReact.ComponentRef<typeof PopoverPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<PopoverPrimitive.Portal>\n\t\t<PopoverPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 w-72 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none\",\n\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\t\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = \"PopoverContent\";\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n","\"use client\";\n\nimport { format } from \"date-fns\";\nimport * as React from \"react\";\nimport { Calendar } from \"../calendar/calendar.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/popover.js\";\nimport { cn } from \"../../lib/utils.js\";\n\ninterface DatePickerProps {\n\t/** Controlled selected date. */\n\tvalue?: Date;\n\t/** Fired when the user picks a date in the calendar. */\n\tonChange?: (date: Date | undefined) => void;\n\t/** Placeholder shown when no date is selected. */\n\tplaceholder?: string;\n\t/** date-fns format string for the trigger label. */\n\tdateFormat?: string;\n\t/** Disable the trigger. */\n\tdisabled?: boolean;\n\t/** Extra class names on the trigger button. */\n\tclassName?: string;\n\t/** Accessible label for the trigger (required when no visible label is adjacent). */\n\t\"aria-label\"?: string;\n\t/**\n\t * Caption layout forwarded to react-day-picker. Use `\"dropdown\"` (or\n\t * `\"dropdown-years\"` / `\"dropdown-months\"`) to render native `<select>`\n\t * navigation — useful for birth-date pickers and far-out years.\n\t *\n\t * Always pair `dropdown` layouts with explicit `startMonth` and `endMonth`;\n\t * the RDP default span is ±100 years.\n\t */\n\tcaptionLayout?: \"label\" | \"dropdown\" | \"dropdown-months\" | \"dropdown-years\";\n\t/** Earliest month/year navigable in the calendar. Forwarded to react-day-picker. */\n\tstartMonth?: Date;\n\t/** Latest month/year navigable in the calendar. Forwarded to react-day-picker. */\n\tendMonth?: Date;\n}\n\n/**\n * Date picker composed from Popover + Calendar + a styled trigger button.\n *\n * This is a minimal single-date picker. For multi/range, compose Calendar + Popover yourself.\n * @returns A button that opens a single-date calendar popover.\n */\nfunction DatePicker({\n\tvalue,\n\tonChange,\n\tplaceholder = \"Pick a date\",\n\tdateFormat = \"PPP\",\n\tdisabled,\n\tclassName,\n\t\"aria-label\": ariaLabel,\n\tcaptionLayout,\n\tstartMonth,\n\tendMonth,\n}: DatePickerProps) {\n\tconst [open, setOpen] = React.useState(false);\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={ariaLabel ?? placeholder}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"inline-flex h-[var(--control-height-md,2.5rem)] w-[240px] items-center justify-start gap-[var(--gap-sm,0.5rem)] rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-left text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t\t\"shadow-sm inset-ring-1 inset-ring-foreground/[0.06]\",\n\t\t\t\t\t\t\"hover:bg-accent hover:text-accent-foreground\",\n\t\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\t!value && \"text-muted-foreground\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\tclassName=\"h-4 w-4\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n\t\t\t\t\t\t<line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\" />\n\t\t\t\t\t\t<line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\" />\n\t\t\t\t\t\t<line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<span>{value ? format(value, dateFormat) : placeholder}</span>\n\t\t\t\t</button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent className=\"w-auto p-0\" align=\"start\">\n\t\t\t\t{/* Hardcoded mode='single' — for range/multi, compose Calendar + Popover directly. */}\n\t\t\t\t<Calendar\n\t\t\t\t\tmode=\"single\"\n\t\t\t\t\tselected={value}\n\t\t\t\t\tonSelect={(date) => {\n\t\t\t\t\t\tonChange?.(date);\n\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t}}\n\t\t\t\t\tcaptionLayout={captionLayout}\n\t\t\t\t\tstartMonth={startMonth}\n\t\t\t\t\tendMonth={endMonth}\n\t\t\t\t\tautoFocus\n\t\t\t\t/>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\nDatePicker.displayName = \"DatePicker\";\n\nexport { DatePicker };\nexport type { DatePickerProps };\n"]}

package/dist/dialog.d.ts

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+
+/** Root container controlling open state of a modal dialog. */
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+/** The element (usually a button) that opens the dialog when clicked. */
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Portals the dialog overlay and content into the body. */
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+/** Closes the dialog when rendered inside DialogContent. */
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/** Dimmed backdrop rendered behind the dialog content. */
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * When `true` (the default), DialogContent caps its height at viewport-2rem
+     * and renders children inside a padded inner scroll container. The Close
+     * button stays anchored to the (non-scrolling) outer panel so it remains
+     * visible even when the user scrolls long content.
+     *
+     * Pass `scrollable={false}` to opt out — useful when the consumer manages
+     * its own scroll surface (e.g. CommandDialog defers scroll to cmdk's
+     * internal CommandList).
+     */
+    scrollable?: boolean;
+}
+/** The dialog content panel, centered on the overlay. Includes a close button by default. */
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Header container inside DialogContent; stacks title and description.
+ * @returns A div wrapping title/description with vertical rhythm
+ */
+declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+/**
+ * Footer container inside DialogContent; aligns action buttons.
+ * @returns A div that stacks buttons on mobile and right-aligns on desktop
+ */
+declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+/** Accessible dialog title; Radix wires it to aria-labelledby automatically. */
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+/** Accessible dialog description; Radix wires it to aria-describedby automatically. */
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/dialog.js

@@ -0,0 +1,125 @@
+"use client";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+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));
+}
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React.forwardRef(({ className, children, scrollable = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
+        scrollable ? "max-h-[calc(100vh-2rem)] border border-foreground/[0.08] bg-background shadow-lg rounded-lg" : "gap-[var(--gap-md,1rem)] border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
+        "duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props,
+      children: [
+        scrollable ? /* @__PURE__ */ jsx("div", { className: "grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]", children }) : children,
+        /* @__PURE__ */ jsxs(
+          DialogPrimitive.Close,
+          {
+            className: cn(
+              "absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background bg-background/80 backdrop-blur-sm",
+              "transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "disabled:pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "h-4 w-4",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+//# sourceMappingURL=dialog.js.map
+//# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","file":"dialog.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container controlling open state of a modal dialog. */\nconst Dialog = DialogPrimitive.Root;\n\n/** The element (usually a button) that opens the dialog when clicked. */\nconst DialogTrigger = DialogPrimitive.Trigger;\n\n/** Portals the dialog overlay and content into the body. */\nconst DialogPortal = DialogPrimitive.Portal;\n\n/** Closes the dialog when rendered inside DialogContent. */\nconst DialogClose = DialogPrimitive.Close;\n\n/** Dimmed backdrop rendered behind the dialog content. */\nconst DialogOverlay = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm\",\n\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\ninterface DialogContentProps\n\textends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n\t/**\n\t * When `true` (the default), DialogContent caps its height at viewport-2rem\n\t * and renders children inside a padded inner scroll container. The Close\n\t * button stays anchored to the (non-scrolling) outer panel so it remains\n\t * visible even when the user scrolls long content.\n\t *\n\t * Pass `scrollable={false}` to opt out — useful when the consumer manages\n\t * its own scroll surface (e.g. CommandDialog defers scroll to cmdk's\n\t * internal CommandList).\n\t */\n\tscrollable?: boolean;\n}\n\n/** The dialog content panel, centered on the overlay. Includes a close button by default. */\nconst DialogContent = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Content>,\n\tDialogContentProps\n>(({ className, children, scrollable = true, ...props }, ref) => (\n\t<DialogPortal>\n\t\t<DialogOverlay />\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]\",\n\t\t\t\tscrollable\n\t\t\t\t\t? \"max-h-[calc(100vh-2rem)] border border-foreground/[0.08] bg-background shadow-lg rounded-lg\"\n\t\t\t\t\t: \"gap-[var(--gap-md,1rem)] border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg\",\n\t\t\t\t\"duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{scrollable ? (\n\t\t\t\t<div className=\"grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]\">\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t\t<DialogPrimitive.Close\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background bg-background/80 backdrop-blur-sm\",\n\t\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100\",\n\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\"disabled:pointer-events-none\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\tclassName=\"h-4 w-4\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M18 6 6 18\" />\n\t\t\t\t\t<path d=\"m6 6 12 12\" />\n\t\t\t\t</svg>\n\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t</DialogPrimitive.Close>\n\t\t</DialogPrimitive.Content>\n\t</DialogPortal>\n));\nDialogContent.displayName = \"DialogContent\";\n\nexport type { DialogContentProps };\n\n/**\n * Header container inside DialogContent; stacks title and description.\n * @returns A div wrapping title/description with vertical rhythm\n */\nfunction DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Footer container inside DialogContent; aligns action buttons.\n * @returns A div that stacks buttons on mobile and right-aligns on desktop\n */\nfunction DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/** Accessible dialog title; Radix wires it to aria-labelledby automatically. */\nconst DialogTitle = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Accessible dialog description; Radix wires it to aria-describedby automatically. */\nconst DialogDescription = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-sm text-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport {\n\tDialog,\n\tDialogPortal,\n\tDialogOverlay,\n\tDialogTrigger,\n\tDialogClose,\n\tDialogContent,\n\tDialogHeader,\n\tDialogFooter,\n\tDialogTitle,\n\tDialogDescription,\n};\n"]}