@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-data-table.js

@@ -0,0 +1,310 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-data-table/dist/index.js
+import * as React from "react";
+
+// ../data-table/dist/index.js
+function createDataTable(props) {
+  const {
+    columns,
+    data,
+    sortBy: initialSortBy,
+    sortDir: initialSortDir = "asc",
+    onSort,
+    filters: initialFilters
+  } = props;
+  let sortBy = initialSortBy ?? null;
+  let sortDir = initialSortDir;
+  let filters = { ...initialFilters ?? {} };
+  function getFilteredData() {
+    let result = [...data];
+    for (const [columnId, filterValue] of Object.entries(filters)) {
+      if (!filterValue) continue;
+      const col = columns.find((c) => c.id === columnId);
+      if (!col) continue;
+      const lowerFilter = filterValue.toLowerCase();
+      result = result.filter((row) => {
+        const cellValue = col.accessor(row);
+        return String(cellValue ?? "").toLowerCase().includes(lowerFilter);
+      });
+    }
+    return result;
+  }
+  function getSortedData() {
+    const filtered = getFilteredData();
+    if (!sortBy) return filtered;
+    const col = columns.find((c) => c.id === sortBy);
+    if (!col) return filtered;
+    return [...filtered].sort((a, b) => {
+      const aVal = col.accessor(a);
+      const bVal = col.accessor(b);
+      const aStr = String(aVal ?? "");
+      const bStr = String(bVal ?? "");
+      const cmp = aStr.localeCompare(bStr, void 0, { numeric: true });
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+  }
+  function sort(columnId) {
+    const col = columns.find((c) => c.id === columnId);
+    if (!col?.sortable) return;
+    if (sortBy === columnId) {
+      sortDir = sortDir === "asc" ? "desc" : "asc";
+    } else {
+      sortBy = columnId;
+      sortDir = "asc";
+    }
+    onSort?.(sortBy, sortDir);
+  }
+  function setFilter(columnId, value) {
+    filters = { ...filters, [columnId]: value };
+  }
+  function getHeaderProps(col) {
+    const props2 = {
+      role: "columnheader"
+    };
+    if (col.sortable) {
+      if (sortBy === col.id) {
+        props2["aria-sort"] = sortDir === "asc" ? "ascending" : "descending";
+      } else {
+        props2["aria-sort"] = "none";
+      }
+    }
+    return props2;
+  }
+  function getCellProps(col, _row) {
+    return {
+      role: "cell",
+      "data-column": col.id
+    };
+  }
+  function getRowProps(_row, index) {
+    return {
+      role: "row",
+      "data-row-index": index
+    };
+  }
+  return {
+    get state() {
+      return {
+        get sortedData() {
+          return getSortedData();
+        },
+        get sortBy() {
+          return sortBy;
+        },
+        get sortDir() {
+          return sortDir;
+        },
+        get filters() {
+          return { ...filters };
+        }
+      };
+    },
+    sort,
+    setFilter,
+    getHeaderProps,
+    getCellProps,
+    getRowProps
+  };
+}
+var tableVariants = cva({
+  base: "w-full caption-bottom text-sm border-collapse",
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var headerVariants = cva({
+  base: "h-10 px-2 text-left align-middle font-medium text-muted-foreground border-b",
+  variants: {
+    sortable: {
+      true: "cursor-pointer select-none hover:text-foreground",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    sortable: "false"
+  }
+});
+var cellVariants = cva({
+  base: "p-2 align-middle border-b",
+  variants: {
+    size: {
+      sm: "p-1",
+      md: "p-2",
+      lg: "p-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var rowVariants = cva({
+  base: "border-b transition-colors hover:bg-muted/50",
+  variants: {
+    selected: {
+      true: "bg-muted",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    selected: "false"
+  }
+});
+
+// ../react-data-table/dist/index.js
+function DataTable({
+  columns,
+  data,
+  sortBy: controlledSortBy,
+  sortDir: controlledSortDir = "asc",
+  onSort,
+  filters: controlledFilters,
+  className,
+  emptyMessage = "No data available"
+}) {
+  const [sortBy, setSortBy] = React.useState(controlledSortBy ?? null);
+  const [sortDir, setSortDir] = React.useState(controlledSortDir);
+  const [filters, setFilters] = React.useState(controlledFilters ?? {});
+  const api = React.useMemo(
+    () => createDataTable({
+      columns,
+      data,
+      sortBy: sortBy ?? void 0,
+      sortDir,
+      onSort,
+      filters
+    }),
+    [columns, data, sortBy, sortDir, onSort, filters]
+  );
+  const handleSort = React.useCallback(
+    (columnId) => {
+      const col = columns.find((c) => c.id === columnId);
+      if (!col?.sortable) return;
+      let newDir = "asc";
+      if (sortBy === columnId) {
+        newDir = sortDir === "asc" ? "desc" : "asc";
+      }
+      setSortBy(columnId);
+      setSortDir(newDir);
+      onSort?.(columnId, newDir);
+    },
+    [columns, sortBy, sortDir, onSort]
+  );
+  const handleFilter = React.useCallback(
+    (columnId, value) => {
+      setFilters((prev) => ({ ...prev, [columnId]: value }));
+    },
+    []
+  );
+  const sortedData = api.state.sortedData;
+  const hasFilterable = columns.some((c) => c.filterable);
+  return React.createElement(
+    "div",
+    { className: "relative w-full overflow-auto" },
+    React.createElement(
+      "table",
+      {
+        className: cn(tableVariants(), className),
+        role: "table"
+      },
+      // thead
+      React.createElement(
+        "thead",
+        null,
+        // Header row
+        React.createElement(
+          "tr",
+          { role: "row" },
+          ...columns.map((col) => {
+            const headerProps = api.getHeaderProps(col);
+            return React.createElement(
+              "th",
+              {
+                key: col.id,
+                ...headerProps,
+                className: headerVariants({ sortable: col.sortable ? "true" : "false" }),
+                onClick: col.sortable ? () => handleSort(col.id) : void 0
+              },
+              col.header,
+              col.sortable && sortBy === col.id ? React.createElement("span", { "aria-hidden": true }, sortDir === "asc" ? " \u2191" : " \u2193") : null
+            );
+          })
+        ),
+        // Filter row
+        hasFilterable ? React.createElement(
+          "tr",
+          { role: "row", "data-filter-row": "true" },
+          ...columns.map(
+            (col) => React.createElement(
+              "th",
+              { key: `filter-${col.id}` },
+              col.filterable ? React.createElement("input", {
+                type: "text",
+                "aria-label": `Filter ${col.header}`,
+                value: filters[col.id] ?? "",
+                onChange: (e) => handleFilter(col.id, e.target.value),
+                placeholder: `Filter...`
+              }) : null
+            )
+          )
+        ) : null
+      ),
+      // tbody
+      React.createElement(
+        "tbody",
+        null,
+        sortedData.length === 0 ? React.createElement(
+          "tr",
+          { role: "row" },
+          React.createElement(
+            "td",
+            {
+              colSpan: columns.length,
+              className: "text-center p-4 text-muted-foreground",
+              role: "cell"
+            },
+            emptyMessage
+          )
+        ) : sortedData.map(
+          (row, rowIndex) => React.createElement(
+            "tr",
+            {
+              key: rowIndex,
+              ...api.getRowProps(row, rowIndex),
+              className: rowVariants()
+            },
+            ...columns.map(
+              (col) => React.createElement(
+                "td",
+                {
+                  key: col.id,
+                  ...api.getCellProps(col, row),
+                  className: cellVariants()
+                },
+                String(col.accessor(row) ?? "")
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+}
+export {
+  DataTable,
+  cellVariants,
+  headerVariants,
+  rowVariants,
+  tableVariants
+};
+//# sourceMappingURL=react-data-table.js.map

package/dist/react-data-table.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../data-table/src/data-table.ts", "../../data-table/src/data-table.styles.ts", "../../react-data-table/src/DataTable.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface ColumnDef<T = Record<string, unknown>> {\n  /** Unique column identifier */\n  id: string\n  /** Column header text */\n  header: string\n  /** Accessor function to get cell value from row */\n  accessor: (row: T) => unknown\n  /** Whether this column is sortable */\n  sortable?: boolean\n  /** Whether this column is filterable */\n  filterable?: boolean\n}\n\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataTableProps<T = Record<string, unknown>> {\n  /** Column definitions */\n  columns: ColumnDef<T>[]\n  /** Data rows */\n  data: T[]\n  /** Current sort column */\n  sortBy?: string\n  /** Current sort direction */\n  sortDir?: SortDirection\n  /** Callback when sort changes */\n  onSort?: (columnId: string, direction: SortDirection) => void\n  /** Active filters: columnId -> filter value */\n  filters?: Record<string, string>\n}\n\nexport interface DataTableState<T = Record<string, unknown>> {\n  sortedData: T[]\n  sortBy: string | null\n  sortDir: SortDirection\n  filters: Record<string, string>\n}\n\nexport interface DataTableAPI<T = Record<string, unknown>> {\n  /** Current table state */\n  state: DataTableState<T>\n  /** Toggle sort for a column */\n  sort(columnId: string): void\n  /** Set a filter value for a column */\n  setFilter(columnId: string, value: string): void\n  /** Get ARIA and role props for a header cell */\n  getHeaderProps(col: ColumnDef<T>): Partial<AccessibilityProps> & Record<string, unknown>\n  /** Get props for a data cell */\n  getCellProps(col: ColumnDef<T>, row: T): Record<string, unknown>\n  /** Get props for a data row */\n  getRowProps(row: T, index: number): Record<string, unknown>\n}\n\nexport function createDataTable<T = Record<string, unknown>>(\n  props: DataTableProps<T>,\n): DataTableAPI<T> {\n  const {\n    columns,\n    data,\n    sortBy: initialSortBy,\n    sortDir: initialSortDir = 'asc',\n    onSort,\n    filters: initialFilters,\n  } = props\n\n  let sortBy: string | null = initialSortBy ?? null\n  let sortDir: SortDirection = initialSortDir\n  let filters: Record<string, string> = { ...(initialFilters ?? {}) }\n\n  function getFilteredData(): T[] {\n    let result = [...data]\n\n    for (const [columnId, filterValue] of Object.entries(filters)) {\n      if (!filterValue) continue\n      const col = columns.find((c) => c.id === columnId)\n      if (!col) continue\n      const lowerFilter = filterValue.toLowerCase()\n      result = result.filter((row) => {\n        const cellValue = col.accessor(row)\n        return String(cellValue ?? '').toLowerCase().includes(lowerFilter)\n      })\n    }\n\n    return result\n  }\n\n  function getSortedData(): T[] {\n    const filtered = getFilteredData()\n\n    if (!sortBy) return filtered\n\n    const col = columns.find((c) => c.id === sortBy)\n    if (!col) return filtered\n\n    return [...filtered].sort((a, b) => {\n      const aVal = col.accessor(a)\n      const bVal = col.accessor(b)\n      const aStr = String(aVal ?? '')\n      const bStr = String(bVal ?? '')\n\n      const cmp = aStr.localeCompare(bStr, undefined, { numeric: true })\n      return sortDir === 'asc' ? cmp : -cmp\n    })\n  }\n\n  function sort(columnId: string): void {\n    const col = columns.find((c) => c.id === columnId)\n    if (!col?.sortable) return\n\n    if (sortBy === columnId) {\n      sortDir = sortDir === 'asc' ? 'desc' : 'asc'\n    } else {\n      sortBy = columnId\n      sortDir = 'asc'\n    }\n\n    onSort?.(sortBy, sortDir)\n  }\n\n  function setFilter(columnId: string, value: string): void {\n    filters = { ...filters, [columnId]: value }\n  }\n\n  function getHeaderProps(\n    col: ColumnDef<T>,\n  ): Partial<AccessibilityProps> & Record<string, unknown> {\n    const props: Partial<AccessibilityProps> & Record<string, unknown> = {\n      role: 'columnheader',\n    }\n\n    if (col.sortable) {\n      if (sortBy === col.id) {\n        props['aria-sort'] = sortDir === 'asc' ? 'ascending' : 'descending'\n      } else {\n        props['aria-sort'] = 'none'\n      }\n    }\n\n    return props\n  }\n\n  function getCellProps(\n    col: ColumnDef<T>,\n    _row: T,\n  ): Record<string, unknown> {\n    return {\n      role: 'cell',\n      'data-column': col.id,\n    }\n  }\n\n  function getRowProps(_row: T, index: number): Record<string, unknown> {\n    return {\n      role: 'row',\n      'data-row-index': index,\n    }\n  }\n\n  return {\n    get state(): DataTableState<T> {\n      return {\n        get sortedData() {\n          return getSortedData()\n        },\n        get sortBy() {\n          return sortBy\n        },\n        get sortDir() {\n          return sortDir\n        },\n        get filters() {\n          return { ...filters }\n        },\n      }\n    },\n    sort,\n    setFilter,\n    getHeaderProps,\n    getCellProps,\n    getRowProps,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const tableVariants = cva({\n  base: 'w-full caption-bottom text-sm border-collapse',\n  variants: {\n    size: {\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const headerVariants = cva({\n  base: 'h-10 px-2 text-left align-middle font-medium text-muted-foreground border-b',\n  variants: {\n    sortable: {\n      true: 'cursor-pointer select-none hover:text-foreground',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    sortable: 'false',\n  },\n})\n\nexport const cellVariants = cva({\n  base: 'p-2 align-middle border-b',\n  variants: {\n    size: {\n      sm: 'p-1',\n      md: 'p-2',\n      lg: 'p-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const rowVariants = cva({\n  base: 'border-b transition-colors hover:bg-muted/50',\n  variants: {\n    selected: {\n      true: 'bg-muted',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    selected: 'false',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createDataTable,\n  tableVariants,\n  headerVariants,\n  cellVariants,\n  rowVariants,\n  type ColumnDef,\n  type SortDirection,\n  type DataTableProps as CoreProps,\n} from '@refraction-ui/data-table'\nimport { cn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// DataTable\n// ---------------------------------------------------------------------------\n\nexport interface DataTableProps<T = Record<string, unknown>> {\n  columns: ColumnDef<T>[]\n  data: T[]\n  sortBy?: string\n  sortDir?: SortDirection\n  onSort?: (columnId: string, direction: SortDirection) => void\n  filters?: Record<string, string>\n  className?: string\n  emptyMessage?: string\n}\n\nexport function DataTable<T = Record<string, unknown>>({\n  columns,\n  data,\n  sortBy: controlledSortBy,\n  sortDir: controlledSortDir = 'asc',\n  onSort,\n  filters: controlledFilters,\n  className,\n  emptyMessage = 'No data available',\n}: DataTableProps<T>) {\n  const [sortBy, setSortBy] = React.useState<string | null>(controlledSortBy ?? null)\n  const [sortDir, setSortDir] = React.useState<SortDirection>(controlledSortDir)\n  const [filters, setFilters] = React.useState<Record<string, string>>(controlledFilters ?? {})\n\n  const api = React.useMemo(\n    () =>\n      createDataTable<T>({\n        columns,\n        data,\n        sortBy: sortBy ?? undefined,\n        sortDir,\n        onSort,\n        filters,\n      }),\n    [columns, data, sortBy, sortDir, onSort, filters],\n  )\n\n  const handleSort = React.useCallback(\n    (columnId: string) => {\n      const col = columns.find((c) => c.id === columnId)\n      if (!col?.sortable) return\n\n      let newDir: SortDirection = 'asc'\n      if (sortBy === columnId) {\n        newDir = sortDir === 'asc' ? 'desc' : 'asc'\n      }\n\n      setSortBy(columnId)\n      setSortDir(newDir)\n      onSort?.(columnId, newDir)\n    },\n    [columns, sortBy, sortDir, onSort],\n  )\n\n  const handleFilter = React.useCallback(\n    (columnId: string, value: string) => {\n      setFilters((prev) => ({ ...prev, [columnId]: value }))\n    },\n    [],\n  )\n\n  const sortedData = api.state.sortedData\n  const hasFilterable = columns.some((c) => c.filterable)\n\n  return React.createElement(\n    'div',\n    { className: 'relative w-full overflow-auto' },\n    React.createElement(\n      'table',\n      {\n        className: cn(tableVariants(), className),\n        role: 'table',\n      },\n      // thead\n      React.createElement(\n        'thead',\n        null,\n        // Header row\n        React.createElement(\n          'tr',\n          { role: 'row' },\n          ...columns.map((col) => {\n            const headerProps = api.getHeaderProps(col)\n            return React.createElement(\n              'th',\n              {\n                key: col.id,\n                ...headerProps,\n                className: headerVariants({ sortable: col.sortable ? 'true' : 'false' }),\n                onClick: col.sortable ? () => handleSort(col.id) : undefined,\n              },\n              col.header,\n              col.sortable && sortBy === col.id\n                ? React.createElement('span', { 'aria-hidden': true }, sortDir === 'asc' ? ' \\u2191' : ' \\u2193')\n                : null,\n            )\n          }),\n        ),\n        // Filter row\n        hasFilterable\n          ? React.createElement(\n              'tr',\n              { role: 'row', 'data-filter-row': 'true' },\n              ...columns.map((col) =>\n                React.createElement(\n                  'th',\n                  { key: `filter-${col.id}` },\n                  col.filterable\n                    ? React.createElement('input', {\n                        type: 'text',\n                        'aria-label': `Filter ${col.header}`,\n                        value: filters[col.id] ?? '',\n                        onChange: (e: React.ChangeEvent<HTMLInputElement>) =>\n                          handleFilter(col.id, e.target.value),\n                        placeholder: `Filter...`,\n                      })\n                    : null,\n                ),\n              ),\n            )\n          : null,\n      ),\n      // tbody\n      React.createElement(\n        'tbody',\n        null,\n        sortedData.length === 0\n          ? React.createElement(\n              'tr',\n              { role: 'row' },\n              React.createElement(\n                'td',\n                {\n                  colSpan: columns.length,\n                  className: 'text-center p-4 text-muted-foreground',\n                  role: 'cell',\n                },\n                emptyMessage,\n              ),\n            )\n          : sortedData.map((row, rowIndex) =>\n              React.createElement(\n                'tr',\n                {\n                  key: rowIndex,\n                  ...api.getRowProps(row, rowIndex),\n                  className: rowVariants(),\n                },\n                ...columns.map((col) =>\n                  React.createElement(\n                    'td',\n                    {\n                      key: col.id,\n                      ...api.getCellProps(col, row),\n                      className: cellVariants(),\n                    },\n                    String(col.accessor(row) ?? ''),\n                  ),\n                ),\n              ),\n            ),\n      ),\n    )\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["props"]
+}

package/dist/react-date-picker.js

@@ -0,0 +1,95 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-date-picker/dist/index.js
+import * as React from "react";
+
+// ../date-picker/dist/index.js
+function padZero(n) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+function formatDate(date, format, showTime) {
+  if (!date) return "";
+  const year = date.getFullYear();
+  const month = padZero(date.getMonth() + 1);
+  const day = padZero(date.getDate());
+  const hours = padZero(date.getHours());
+  const minutes = padZero(date.getMinutes());
+  let result = format.replace("YYYY", String(year)).replace("MM", month).replace("DD", day);
+  if (showTime) {
+    result = result.replace("HH", hours).replace("mm", minutes);
+  }
+  return result;
+}
+var datePickerTriggerStyles = "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer";
+var datePickerDropdownStyles = "absolute z-50 mt-1 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md";
+var datePickerDayVariants = cva({
+  base: "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground",
+  variants: {
+    state: {
+      default: "",
+      selected: "bg-primary text-primary-foreground hover:bg-primary/90",
+      today: "border border-accent-foreground",
+      disabled: "text-muted-foreground opacity-50 pointer-events-none",
+      outside: "text-muted-foreground opacity-30"
+    }
+  },
+  defaultVariants: {
+    state: "default"
+  }
+});
+var datePickerTimeStyles = "flex items-center gap-2 mt-3 pt-3 border-t";
+var datePickerTimeInputStyles = "w-14 rounded-md border border-input bg-background px-2 py-1 text-sm text-center";
+
+// ../react-date-picker/dist/index.js
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var DatePicker = React.forwardRef(
+  function DatePicker2({ value, onChange, minDate, maxDate, showTime = false, format, placeholder, className, disabled = false, ...props }, ref) {
+    const dateToString = (date) => {
+      if (!date) return "";
+      const offset = date.getTimezoneOffset() * 6e4;
+      const localDate = new Date(date.getTime() - offset);
+      const iso = localDate.toISOString();
+      return showTime ? iso.slice(0, 16) : iso.slice(0, 10);
+    };
+    const handleChange = (e) => {
+      if (!onChange) return;
+      if (e.target.value) {
+        onChange(new Date(e.target.value));
+      }
+    };
+    const input = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: showTime ? "datetime-local" : "date",
+        className: cn(datePickerTriggerStyles, "justify-start text-left font-normal w-[280px]", className),
+        value: dateToString(value),
+        min: dateToString(minDate),
+        max: dateToString(maxDate),
+        onChange: handleChange,
+        disabled,
+        placeholder,
+        ...props
+      }
+    );
+    if (!format || !value) {
+      return input;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      input,
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: formatDate(value, format, showTime) })
+    ] });
+  }
+);
+export {
+  DatePicker,
+  datePickerDayVariants,
+  datePickerDropdownStyles,
+  datePickerTimeInputStyles,
+  datePickerTimeStyles,
+  datePickerTriggerStyles
+};
+//# sourceMappingURL=react-date-picker.js.map

package/dist/react-date-picker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../date-picker/src/date-picker.ts", "../../date-picker/src/date-picker.styles.ts", "../../react-date-picker/src/date-picker.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { generateId, Keys } from '@refraction-ui/shared'\n\nexport type DatePickerView = 'calendar' | 'time'\n\nexport interface DatePickerProps {\n  /** Selected date (controlled) */\n  value?: Date\n  /** Callback when value changes */\n  onChange?: (date: Date) => void\n  /** Minimum selectable date */\n  minDate?: Date\n  /** Maximum selectable date */\n  maxDate?: Date\n  /** Show time selection */\n  showTime?: boolean\n  /** Display format string */\n  format?: string\n  /** Placeholder text */\n  placeholder?: string\n  /** Whether the picker is open (controlled) */\n  open?: boolean\n  /** Default open state */\n  defaultOpen?: boolean\n  /** Callback when open changes */\n  onOpenChange?: (open: boolean) => void\n  /** The currently displayed month (controlled) */\n  currentMonth?: Date\n  /** Reference \"today\" for isToday/aria-current and time defaults. Default: ambient `new Date()` — inject to avoid SSR/CSR hydration mismatch. */\n  today?: Date\n}\n\nexport interface DatePickerState {\n  open: boolean\n  selectedDate: Date | undefined\n  view: DatePickerView\n  hours: number\n  minutes: number\n  currentMonth: Date\n}\n\nexport interface CalendarDay {\n  date: Date\n  isToday: boolean\n  isSelected: boolean\n  isCurrentMonth: boolean\n  isDisabled: boolean\n}\n\nexport interface DatePickerAPI {\n  /** Current state */\n  state: DatePickerState\n  /** Calendar days grid (42 cells) */\n  days: CalendarDay[]\n  /** Open the picker */\n  openPicker(): void\n  /** Close the picker */\n  closePicker(): void\n  /** Toggle the picker */\n  togglePicker(): void\n  /** Select a date from calendar */\n  selectDate(date: Date): void\n  /** Set hours */\n  setHours(hours: number): void\n  /** Set minutes */\n  setMinutes(minutes: number): void\n  /** Navigate to previous month */\n  prevMonth(): void\n  /** Navigate to next month */\n  nextMonth(): void\n  /** Switch between calendar and time views */\n  setView(view: DatePickerView): void\n  /** Format the selected date for display */\n  formatDisplay(): string\n  /** ARIA attributes for the trigger input */\n  triggerProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** ARIA attributes for the dropdown */\n  dropdownProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** ARIA props for the calendar grid */\n  gridProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** Get ARIA props for a day cell */\n  getDayAriaProps(day: CalendarDay): Partial<AccessibilityProps> & Record<string, unknown>\n  /** Keyboard handlers */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Generated IDs */\n  ids: {\n    trigger: string\n    dropdown: string\n    grid: string\n    label: string\n  }\n}\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  )\n}\n\nfunction startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1)\n}\n\nfunction startOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate())\n}\n\nfunction endOfDay(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999)\n}\n\nconst DAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']\n\nfunction padZero(n: number): string {\n  return n < 10 ? `0${n}` : `${n}`\n}\n\nexport function formatDate(date: Date | undefined, format: string, showTime: boolean): string {\n  if (!date) return ''\n  const year = date.getFullYear()\n  const month = padZero(date.getMonth() + 1)\n  const day = padZero(date.getDate())\n  const hours = padZero(date.getHours())\n  const minutes = padZero(date.getMinutes())\n\n  let result = format\n    .replace('YYYY', String(year))\n    .replace('MM', month)\n    .replace('DD', day)\n\n  if (showTime) {\n    result = result.replace('HH', hours).replace('mm', minutes)\n  }\n\n  return result\n}\n\nexport function createDatePicker(props: DatePickerProps = {}): DatePickerAPI {\n  const {\n    value,\n    onChange,\n    minDate,\n    maxDate,\n    showTime = false,\n    format = showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD',\n    placeholder = 'Select date...',\n    open: controlledOpen,\n    defaultOpen = false,\n    onOpenChange,\n  } = props\n\n  // Injection boundary: ambient \"today\" is the default; inject `today` so SSR and client agree.\n  const today = props.today ?? new Date()\n  let internalOpen = controlledOpen ?? defaultOpen\n  let currentMonth = props.currentMonth ?? (value ? startOfMonth(value) : startOfMonth(today))\n  let view: DatePickerView = 'calendar'\n  const hours = value ? value.getHours() : 0\n  const minutes = value ? value.getMinutes() : 0\n\n  const triggerId = generateId('rfr-datepicker-trigger')\n  const dropdownId = generateId('rfr-datepicker-dropdown')\n  const gridId = generateId('rfr-datepicker-grid')\n  const labelId = generateId('rfr-datepicker-label')\n\n  function isOpen(): boolean {\n    if (controlledOpen !== undefined) return controlledOpen\n    return internalOpen\n  }\n\n  function isDateDisabled(date: Date): boolean {\n    if (minDate && date < startOfDay(minDate)) return true\n    if (maxDate && date > endOfDay(maxDate)) return true\n    return false\n  }\n\n  function buildDays(): CalendarDay[] {\n    const year = currentMonth.getFullYear()\n    const month = currentMonth.getMonth()\n    const first = new Date(year, month, 1)\n    const startDow = first.getDay()\n    const gridStart = new Date(year, month, 1 - startDow)\n\n    const days: CalendarDay[] = []\n    for (let i = 0; i < 42; i++) {\n      const date = new Date(\n        gridStart.getFullYear(),\n        gridStart.getMonth(),\n        gridStart.getDate() + i,\n      )\n      days.push({\n        date,\n        isToday: isSameDay(date, today),\n        isSelected: value ? isSameDay(date, value) : false,\n        isCurrentMonth: date.getMonth() === month,\n        isDisabled: isDateDisabled(date),\n      })\n    }\n    return days\n  }\n\n  function openPicker(): void {\n    internalOpen = true\n    onOpenChange?.(true)\n  }\n\n  function closePicker(): void {\n    internalOpen = false\n    onOpenChange?.(false)\n  }\n\n  function togglePicker(): void {\n    if (isOpen()) {\n      closePicker()\n    } else {\n      openPicker()\n    }\n  }\n\n  function selectDate(date: Date): void {\n    if (isDateDisabled(date)) return\n    const newDate = new Date(date)\n    if (value) {\n      newDate.setHours(value.getHours())\n      newDate.setMinutes(value.getMinutes())\n    }\n    onChange?.(newDate)\n    if (!showTime) {\n      closePicker()\n    }\n  }\n\n  function setHours(h: number): void {\n    if (h < 0 || h > 23) return\n    const newDate = value ? new Date(value) : new Date(today.getTime())\n    newDate.setHours(h)\n    onChange?.(newDate)\n  }\n\n  function setMinutes(m: number): void {\n    if (m < 0 || m > 59) return\n    const newDate = value ? new Date(value) : new Date(today.getTime())\n    newDate.setMinutes(m)\n    onChange?.(newDate)\n  }\n\n  function prevMonth(): void {\n    currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)\n  }\n\n  function nextMonth(): void {\n    currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)\n  }\n\n  function setView(v: DatePickerView): void {\n    view = v\n  }\n\n  function formatDisplay(): string {\n    return value ? formatDate(value, format, showTime) : placeholder\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.Escape]: (e) => {\n      e.preventDefault()\n      closePicker()\n    },\n  }\n\n  const triggerProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    'aria-expanded': isOpen(),\n    'aria-controls': dropdownId,\n    'aria-haspopup': 'dialog',\n    id: triggerId,\n    role: 'combobox',\n  }\n\n  const dropdownProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'dialog',\n    'aria-modal': true,\n    'aria-labelledby': labelId,\n    id: dropdownId,\n  }\n\n  const gridProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'grid',\n    'aria-labelledby': labelId,\n    id: gridId,\n  }\n\n  function getDayAriaProps(day: CalendarDay): Partial<AccessibilityProps> & Record<string, unknown> {\n    return {\n      role: 'gridcell',\n      'aria-selected': day.isSelected,\n      'aria-disabled': day.isDisabled,\n      'aria-current': day.isToday ? ('date' as const) : undefined,\n      'aria-label': `${DAY_NAMES[day.date.getDay()]}, ${day.date.toLocaleDateString('en-US', {\n        month: 'long',\n        day: 'numeric',\n        year: 'numeric',\n      })}`,\n    }\n  }\n\n  return {\n    state: {\n      open: isOpen(),\n      selectedDate: value,\n      view,\n      hours,\n      minutes,\n      currentMonth,\n    },\n    days: buildDays(),\n    openPicker,\n    closePicker,\n    togglePicker,\n    selectDate,\n    setHours,\n    setMinutes,\n    prevMonth,\n    nextMonth,\n    setView,\n    formatDisplay,\n    triggerProps,\n    dropdownProps,\n    gridProps,\n    getDayAriaProps,\n    keyboardHandlers,\n    ids: {\n      trigger: triggerId,\n      dropdown: dropdownId,\n      grid: gridId,\n      label: labelId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const datePickerTriggerStyles =\n  'inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer'\n\nexport const datePickerDropdownStyles =\n  'absolute z-50 mt-1 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md'\n\nexport const datePickerGridStyles = 'w-full border-collapse'\n\nexport const datePickerDayVariants = cva({\n  base: 'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground',\n  variants: {\n    state: {\n      default: '',\n      selected: 'bg-primary text-primary-foreground hover:bg-primary/90',\n      today: 'border border-accent-foreground',\n      disabled: 'text-muted-foreground opacity-50 pointer-events-none',\n      outside: 'text-muted-foreground opacity-30',\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n})\n\nexport const datePickerTimeStyles =\n  'flex items-center gap-2 mt-3 pt-3 border-t'\n\nexport const datePickerTimeInputStyles =\n  'w-14 rounded-md border border-input bg-background px-2 py-1 text-sm text-center'\n", "import * as React from 'react'\nimport { datePickerTriggerStyles, formatDate } from '@refraction-ui/date-picker'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface DatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {\n  value?: Date\n  onChange?: (date: Date) => void\n  minDate?: Date\n  maxDate?: Date\n  showTime?: boolean\n  /** Display format for the selected-date text shown next to the input (e.g. 'DD/MM/YYYY'). The native input value itself stays ISO (`YYYY-MM-DD`). */\n  format?: string\n  placeholder?: string\n}\n\nexport const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>(\n  function DatePicker({ value, onChange, minDate, maxDate, showTime = false, format, placeholder, className, disabled = false, ...props }, ref) {\n\n    // Native date inputs expect YYYY-MM-DD or YYYY-MM-DDTHH:mm\n    const dateToString = (date?: Date) => {\n      if (!date) return ''\n      // Need to adjust for local timezone so toISOString doesn't shift the day\n      const offset = date.getTimezoneOffset() * 60000\n      const localDate = new Date(date.getTime() - offset)\n      const iso = localDate.toISOString()\n      return showTime ? iso.slice(0, 16) : iso.slice(0, 10)\n    }\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!onChange) return\n      if (e.target.value) {\n        onChange(new Date(e.target.value))\n      }\n    }\n\n    const input = (\n      <input\n        ref={ref}\n        type={showTime ? 'datetime-local' : 'date'}\n        className={cn(datePickerTriggerStyles, 'justify-start text-left font-normal w-[280px]', className)}\n        value={dateToString(value)}\n        min={dateToString(minDate)}\n        max={dateToString(maxDate)}\n        onChange={handleChange}\n        disabled={disabled}\n        placeholder={placeholder}\n        {...props}\n      />\n    )\n\n    // A custom display format cannot be honored by the native input itself\n    // (the browser locale controls its presentation), so the formatted date\n    // renders as adjacent text via the core's formatter.\n    if (!format || !value) {\n      return input\n    }\n\n    return (\n      <>\n        {input}\n        <span className=\"text-sm text-muted-foreground\">{formatDate(value, format, showTime)}</span>\n      </>\n    )\n  }\n)\n"],
+  "mappings": ";;;;;;;;;AAmHA,SAAS,QAAQ,GAAmB;AAClC,SAAO,IAAI,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC;AAChC;AAEO,SAAS,WAAW,MAAwB,QAAgB,UAA2B;AAC5F,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,OAAO,KAAK,YAAA;AAClB,QAAM,QAAQ,QAAQ,KAAK,SAAA,IAAa,CAAC;AACzC,QAAM,MAAM,QAAQ,KAAK,QAAA,CAAS;AAClC,QAAM,QAAQ,QAAQ,KAAK,SAAA,CAAU;AACrC,QAAM,UAAU,QAAQ,KAAK,WAAA,CAAY;AAEzC,MAAI,SAAS,OACV,QAAQ,QAAQ,OAAO,IAAI,CAAC,EAC5B,QAAQ,MAAM,KAAK,EACnB,QAAQ,MAAM,GAAG;AAEpB,MAAI,UAAU;AACZ,aAAS,OAAO,QAAQ,MAAM,KAAK,EAAE,QAAQ,MAAM,OAAO;EAC5D;AAEA,SAAO;AACT;ACvIO,IAAM,0BACX;AAEK,IAAM,2BACX;AAIK,IAAM,wBAAwB,IAAI;EACvC,MAAM;EACN,UAAU;IACR,OAAO;MACL,SAAS;MACT,UAAU;MACV,OAAO;MACP,UAAU;MACV,SAAS;IAAA;EACX;EAEF,iBAAiB;IACf,OAAO;EAAA;AAEX,CAAC;AAEM,IAAM,uBACX;AAEK,IAAM,4BACX;;;;ACfK,IAAM,aAAmB;EAC9B,SAASA,YAAW,EAAE,OAAO,UAAU,SAAS,SAAS,WAAW,OAAO,QAAQ,aAAa,WAAW,WAAW,OAAO,GAAG,MAAA,GAAS,KAAK;AAG5I,UAAM,eAAe,CAAC,SAAgB;AACpC,UAAI,CAAC,KAAM,QAAO;AAElB,YAAM,SAAS,KAAK,kBAAA,IAAsB;AAC1C,YAAM,YAAY,IAAI,KAAK,KAAK,QAAA,IAAY,MAAM;AAClD,YAAM,MAAM,UAAU,YAAA;AACtB,aAAO,WAAW,IAAI,MAAM,GAAG,EAAE,IAAI,IAAI,MAAM,GAAG,EAAE;IACtD;AAEA,UAAM,eAAe,CAAC,MAA2C;AAC/D,UAAI,CAAC,SAAU;AACf,UAAI,EAAE,OAAO,OAAO;AAClB,iBAAS,IAAI,KAAK,EAAE,OAAO,KAAK,CAAC;MACnC;IACF;AAEA,UAAM,QACJ;MAAC;MAAA;QACC;QACA,MAAM,WAAW,mBAAmB;QACpC,WAAW,GAAG,yBAAyB,iDAAiD,SAAS;QACjG,OAAO,aAAa,KAAK;QACzB,KAAK,aAAa,OAAO;QACzB,KAAK,aAAa,OAAO;QACzB,UAAU;QACV;QACA;QACC,GAAG;MAAA;IAAA;AAOR,QAAI,CAAC,UAAU,CAAC,OAAO;AACrB,aAAO;IACT;AAEA,WACE,qBAAA,UAAA,EACG,UAAA;MAAA;MACD,oBAAC,QAAA,EAAK,WAAU,iCAAiC,UAAA,WAAW,OAAO,QAAQ,QAAQ,EAAA,CAAE;IAAA,EAAA,CACvF;EAEJ;AACF;",
+  "names": ["DatePicker"]
+}

package/dist/react-device-frame.js

@@ -0,0 +1,137 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-device-frame/dist/index.js
+import * as React from "react";
+
+// ../device-frame/dist/index.js
+var DEVICE_SPECS = {
+  iphone: {
+    width: 375,
+    height: 812,
+    radius: 44,
+    notch: true,
+    homeIndicator: true
+  },
+  ipad: {
+    width: 810,
+    height: 1080,
+    radius: 18,
+    notch: false,
+    homeIndicator: true
+  },
+  "android-phone": {
+    width: 360,
+    height: 800,
+    radius: 24,
+    notch: false,
+    homeIndicator: false
+  },
+  "android-tablet": {
+    width: 800,
+    height: 1280,
+    radius: 16,
+    notch: false,
+    homeIndicator: false
+  }
+};
+var DEVICE_LABELS = {
+  iphone: "iPhone",
+  ipad: "iPad",
+  "android-phone": "Android Phone",
+  "android-tablet": "Android Tablet"
+};
+function createDeviceFrame(props) {
+  const { device, orientation = "portrait" } = props;
+  const spec = DEVICE_SPECS[device];
+  const isLandscape = orientation === "landscape";
+  const dimensions = {
+    width: isLandscape ? spec.height : spec.width,
+    height: isLandscape ? spec.width : spec.height,
+    radius: spec.radius,
+    notch: spec.notch,
+    homeIndicator: spec.homeIndicator
+  };
+  const ariaProps = {
+    role: "img",
+    "aria-label": `${DEVICE_LABELS[device]} device frame in ${orientation} orientation`
+  };
+  const dataAttributes = {
+    "data-device": device,
+    "data-orientation": orientation,
+    ...spec.notch ? { "data-notch": "true" } : {},
+    ...spec.homeIndicator ? { "data-home-indicator": "true" } : {}
+  };
+  return {
+    dimensions,
+    ariaProps,
+    dataAttributes
+  };
+}
+var deviceFrameVariants = cva({
+  base: "relative overflow-hidden bg-black border-4 border-gray-800 shadow-xl",
+  variants: {
+    device: {
+      iphone: "rounded-[44px] border-[6px]",
+      ipad: "rounded-[18px] border-[6px]",
+      "android-phone": "rounded-[24px] border-4",
+      "android-tablet": "rounded-[16px] border-4"
+    },
+    orientation: {
+      portrait: "",
+      landscape: ""
+    }
+  },
+  defaultVariants: {
+    device: "iphone",
+    orientation: "portrait"
+  }
+});
+
+// ../react-device-frame/dist/index.js
+var DeviceFrame = React.forwardRef(
+  function DeviceFrame2({ device, orientation = "portrait", className, children }, ref) {
+    const api = createDeviceFrame({ device, orientation });
+    return React.createElement(
+      "div",
+      {
+        ref,
+        className: cn(deviceFrameVariants({ device, orientation }), className),
+        style: {
+          width: `${api.dimensions.width}px`,
+          height: `${api.dimensions.height}px`
+        },
+        ...api.ariaProps,
+        ...api.dataAttributes
+      },
+      // Notch decoration
+      api.dimensions.notch ? React.createElement("div", {
+        className: "absolute top-0 left-1/2 -translate-x-1/2 w-[40%] h-[30px] bg-black rounded-b-2xl z-10",
+        "aria-hidden": "true",
+        "data-part": "notch"
+      }) : null,
+      // Screen area
+      React.createElement(
+        "div",
+        {
+          className: "relative w-full h-full overflow-hidden bg-white",
+          "data-part": "screen"
+        },
+        children
+      ),
+      // Home indicator decoration
+      api.dimensions.homeIndicator ? React.createElement("div", {
+        className: "absolute bottom-2 left-1/2 -translate-x-1/2 w-[35%] h-[5px] bg-gray-300 rounded-full z-10",
+        "aria-hidden": "true",
+        "data-part": "home-indicator"
+      }) : null
+    );
+  }
+);
+export {
+  DeviceFrame,
+  deviceFrameVariants
+};
+//# sourceMappingURL=react-device-frame.js.map

package/dist/react-device-frame.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../device-frame/src/device-frame.ts", "../../device-frame/src/device-frame.styles.ts", "../../react-device-frame/src/device-frame.tsx"],
+  "sourcesContent": ["export type DeviceType = 'iphone' | 'ipad' | 'android-phone' | 'android-tablet'\nexport type DeviceOrientation = 'portrait' | 'landscape'\n\nexport interface DeviceFrameProps {\n  /** The type of device to display */\n  device: DeviceType\n  /** The orientation of the device */\n  orientation?: DeviceOrientation\n}\n\nexport interface DeviceDimensions {\n  /** Width in pixels */\n  width: number\n  /** Height in pixels */\n  height: number\n  /** Border radius in pixels */\n  radius: number\n  /** Whether the device has a notch */\n  notch: boolean\n  /** Whether the device has a home indicator bar */\n  homeIndicator: boolean\n}\n\nexport interface DeviceFrameAPI {\n  /** Computed dimensions for the device */\n  dimensions: DeviceDimensions\n  /** ARIA attributes for the device frame */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks */\n  dataAttributes: Record<string, string>\n}\n\ninterface DeviceSpec {\n  width: number\n  height: number\n  radius: number\n  notch: boolean\n  homeIndicator: boolean\n}\n\nconst DEVICE_SPECS: Record<DeviceType, DeviceSpec> = {\n  iphone: {\n    width: 375,\n    height: 812,\n    radius: 44,\n    notch: true,\n    homeIndicator: true,\n  },\n  ipad: {\n    width: 810,\n    height: 1080,\n    radius: 18,\n    notch: false,\n    homeIndicator: true,\n  },\n  'android-phone': {\n    width: 360,\n    height: 800,\n    radius: 24,\n    notch: false,\n    homeIndicator: false,\n  },\n  'android-tablet': {\n    width: 800,\n    height: 1280,\n    radius: 16,\n    notch: false,\n    homeIndicator: false,\n  },\n}\n\nconst DEVICE_LABELS: Record<DeviceType, string> = {\n  iphone: 'iPhone',\n  ipad: 'iPad',\n  'android-phone': 'Android Phone',\n  'android-tablet': 'Android Tablet',\n}\n\nexport function createDeviceFrame(props: DeviceFrameProps): DeviceFrameAPI {\n  const { device, orientation = 'portrait' } = props\n  const spec = DEVICE_SPECS[device]\n\n  const isLandscape = orientation === 'landscape'\n\n  const dimensions: DeviceDimensions = {\n    width: isLandscape ? spec.height : spec.width,\n    height: isLandscape ? spec.width : spec.height,\n    radius: spec.radius,\n    notch: spec.notch,\n    homeIndicator: spec.homeIndicator,\n  }\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'img',\n    'aria-label': `${DEVICE_LABELS[device]} device frame in ${orientation} orientation`,\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-device': device,\n    'data-orientation': orientation,\n    ...(spec.notch ? { 'data-notch': 'true' } : {}),\n    ...(spec.homeIndicator ? { 'data-home-indicator': 'true' } : {}),\n  }\n\n  return {\n    dimensions,\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const deviceFrameVariants = cva({\n  base: 'relative overflow-hidden bg-black border-4 border-gray-800 shadow-xl',\n  variants: {\n    device: {\n      iphone: 'rounded-[44px] border-[6px]',\n      ipad: 'rounded-[18px] border-[6px]',\n      'android-phone': 'rounded-[24px] border-4',\n      'android-tablet': 'rounded-[16px] border-4',\n    },\n    orientation: {\n      portrait: '',\n      landscape: '',\n    },\n  },\n  defaultVariants: {\n    device: 'iphone',\n    orientation: 'portrait',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createDeviceFrame,\n  deviceFrameVariants,\n  type DeviceFrameProps as CoreDeviceFrameProps,\n  type DeviceType,\n  type DeviceOrientation,\n} from '@refraction-ui/device-frame'\nimport { cn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// DeviceFrame\n// ---------------------------------------------------------------------------\n\nexport interface DeviceFrameProps {\n  device: DeviceType\n  orientation?: DeviceOrientation\n  className?: string\n  children?: React.ReactNode\n}\n\nexport const DeviceFrame = React.forwardRef<HTMLDivElement, DeviceFrameProps>(\n  function DeviceFrame({ device, orientation = 'portrait', className, children }, ref) {\n  const api = createDeviceFrame({ device, orientation })\n\n  return React.createElement(\n    'div',\n    {\n      ref,\n      className: cn(deviceFrameVariants({ device, orientation }), className),\n      style: {\n        width: `${api.dimensions.width}px`,\n        height: `${api.dimensions.height}px`,\n      },\n      ...api.ariaProps,\n      ...api.dataAttributes,\n    },\n    // Notch decoration\n    api.dimensions.notch\n      ? React.createElement('div', {\n          className: 'absolute top-0 left-1/2 -translate-x-1/2 w-[40%] h-[30px] bg-black rounded-b-2xl z-10',\n          'aria-hidden': 'true',\n          'data-part': 'notch',\n        })\n      : null,\n    // Screen area\n    React.createElement(\n      'div',\n      {\n        className: 'relative w-full h-full overflow-hidden bg-white',\n        'data-part': 'screen',\n      },\n      children,\n    ),\n    // Home indicator decoration\n    api.dimensions.homeIndicator\n      ? React.createElement('div', {\n          className: 'absolute bottom-2 left-1/2 -translate-x-1/2 w-[35%] h-[5px] bg-gray-300 rounded-full z-10',\n          'aria-hidden': 'true',\n          'data-part': 'home-indicator',\n        })\n      : null,\n  )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAwCA,IAAM,eAA+C;EACnD,QAAQ;IACN,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,eAAe;EAAA;EAEjB,MAAM;IACJ,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,eAAe;EAAA;EAEjB,iBAAiB;IACf,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,eAAe;EAAA;EAEjB,kBAAkB;IAChB,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,eAAe;EAAA;AAEnB;AAEA,IAAM,gBAA4C;EAChD,QAAQ;EACR,MAAM;EACN,iBAAiB;EACjB,kBAAkB;AACpB;AAEO,SAAS,kBAAkB,OAAyC;AACzE,QAAM,EAAE,QAAQ,cAAc,WAAA,IAAe;AAC7C,QAAM,OAAO,aAAa,MAAM;AAEhC,QAAM,cAAc,gBAAgB;AAEpC,QAAM,aAA+B;IACnC,OAAO,cAAc,KAAK,SAAS,KAAK;IACxC,QAAQ,cAAc,KAAK,QAAQ,KAAK;IACxC,QAAQ,KAAK;IACb,OAAO,KAAK;IACZ,eAAe,KAAK;EAAA;AAGtB,QAAM,YAAuD;IAC3D,MAAM;IACN,cAAc,GAAG,cAAc,MAAM,CAAC,oBAAoB,WAAW;EAAA;AAGvE,QAAM,iBAAyC;IAC7C,eAAe;IACf,oBAAoB;IACpB,GAAI,KAAK,QAAQ,EAAE,cAAc,OAAA,IAAW,CAAA;IAC5C,GAAI,KAAK,gBAAgB,EAAE,uBAAuB,OAAA,IAAW,CAAA;EAAC;AAGhE,SAAO;IACL;IACA;IACA;EAAA;AAEJ;AC3GO,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,QAAQ;MACR,MAAM;MACN,iBAAiB;MACjB,kBAAkB;IAAA;IAEpB,aAAa;MACX,UAAU;MACV,WAAW;IAAA;EACb;EAEF,iBAAiB;IACf,QAAQ;IACR,aAAa;EAAA;AAEjB,CAAC;;;ACCM,IAAM,cAAoB;EAC/B,SAASA,aAAY,EAAE,QAAQ,cAAc,YAAY,WAAW,SAAA,GAAY,KAAK;AACrF,UAAM,MAAM,kBAAkB,EAAE,QAAQ,YAAA,CAAa;AAErD,WAAa;MACX;MACA;QACE;QACA,WAAW,GAAG,oBAAoB,EAAE,QAAQ,YAAA,CAAa,GAAG,SAAS;QACrE,OAAO;UACL,OAAO,GAAG,IAAI,WAAW,KAAK;UAC9B,QAAQ,GAAG,IAAI,WAAW,MAAM;QAAA;QAElC,GAAG,IAAI;QACP,GAAG,IAAI;MAAA;;MAGT,IAAI,WAAW,QACL,oBAAc,OAAO;QACzB,WAAW;QACX,eAAe;QACf,aAAa;MAAA,CACd,IACD;;MAEE;QACJ;QACA;UACE,WAAW;UACX,aAAa;QAAA;QAEf;MAAA;;MAGF,IAAI,WAAW,gBACL,oBAAc,OAAO;QACzB,WAAW;QACX,eAAe;QACf,aAAa;MAAA,CACd,IACD;IAAA;EAEN;AACF;",
+  "names": ["DeviceFrame"]
+}