@devalok/shilp-sutra 0.34.0 → 0.36.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","names":[],"sources":["../../src/ui/data-table.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type ColumnPinningState,\n  type ExpandedState,\n  type PaginationState,\n  type Row,\n  type RowData,\n  type RowSelectionState,\n  type SortingState,\n  type TableState,\n  type Updater,\n  type VisibilityState,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { IconChevronRight, IconSearch } from '@tabler/icons-react'\n\nimport { Icon } from './icon'\nimport { Table } from './table'\nimport { Checkbox } from './checkbox'\nimport { cn } from './lib/utils'\nimport { DataTableToolbar, type Density } from './data-table-toolbar'\nimport {\n  DataTableProvider,\n  densityPaddingMap,\n  type EditingCell,\n} from './data-table-context'\nimport { DataTableHeader } from './data-table-header'\nimport { DataTableBody } from './data-table-body'\nimport { DataTableCards } from './data-table-card'\nimport { DataTablePagination } from './data-table-pagination'\nimport { DataTableBulkActions, type BulkAction } from './data-table-bulk-actions'\n\n// Re-export public types so consumers' imports don't break\nexport type { BulkAction } from './data-table-bulk-actions'\n\ndeclare module '@tanstack/react-table' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: 'left' | 'center' | 'right'\n    hideBelow?: 'sm' | 'md' | 'lg'\n  }\n}\n\n/**\n * Props for DataTable — a feature-rich TanStack Table wrapper supporting sorting, filtering,\n * pagination, row selection, inline editing, row expansion, column pinning, and virtualization.\n *\n * All features are opt-in via boolean flags. The component manages its own internal state for\n * sorting, filtering, pagination, and selection — just pass `columns` and `data`.\n *\n * **Feature flags:** `sortable` | `filterable` | `globalFilter` | `paginated` | `selectable` |\n * `toolbar` | `editable` | `expandable` | `virtualRows`\n *\n * **Columns:** Use TanStack Table's `ColumnDef<TData, TValue>` type. Set\n * `meta: { enableEditing: false }` on a column to disable cell editing for that column.\n *\n * @example\n * // Minimal read-only table:\n * const columns: ColumnDef<User, string>[] = [\n *   { accessorKey: 'name', header: 'Name' },\n *   { accessorKey: 'email', header: 'Email' },\n * ]\n * <DataTable columns={columns} data={users} />\n *\n * @example\n * // Full-featured admin table with sorting, pagination, and selection:\n * <DataTable\n *   columns={projectColumns}\n *   data={projects}\n *   sortable\n *   paginated\n *   pageSize={20}\n *   selectable\n *   onSelectionChange={(rows) => setSelectedProjects(rows)}\n *   toolbar\n * />\n *\n * @example\n * // Virtualized table for large datasets (10k+ rows):\n * <DataTable\n *   columns={logColumns}\n *   data={allLogs}\n *   virtualRows\n *   virtualRowHeight={40}\n *   maxHeight={500}\n * />\n *\n * @example\n * // Table with expandable rows for nested detail:\n * <DataTable\n *   columns={orderColumns}\n *   data={orders}\n *   expandable\n *   renderExpanded={(order) => <OrderLineItems items={order.lineItems} />}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\n/**\n * A full-featured data table built on TanStack Table with sorting, filtering,\n * pagination, row selection, inline cell editing, expandable rows, column pinning,\n * a toolbar with density/export controls, and optional row virtualization.\n */\nexport interface DataTableProps<TData, TValue> {\n  /** Column definitions passed to TanStack Table. */\n  columns: ColumnDef<TData, TValue>[]\n  /** Row data */\n  data: TData[]\n  /** Additional class name for the wrapper div */\n  className?: string\n  /** Text shown when the table has no rows */\n  noResultsText?: string\n  /** Enable column sorting (click headers to sort) */\n  sortable?: boolean\n  /** Enable per-column filter inputs below headers */\n  filterable?: boolean\n  /** Enable a global search input above the table */\n  globalFilter?: boolean\n  /** Enable pagination controls below the table */\n  paginated?: boolean\n  /** Number of rows per page when paginated (default 10) */\n  pageSize?: number\n  /** Options for the page size selector dropdown (default [10, 20, 50, 100]) */\n  pageSizeOptions?: number[]\n  /** Enable row selection with checkboxes */\n  selectable?: boolean\n  /** Callback when row selection changes */\n  onSelectionChange?: (selectedRows: TData[]) => void\n  /** Show toolbar above the table with column visibility, density, and export controls */\n  toolbar?: boolean\n  /** Row density — controls cell vertical padding */\n  density?: Density\n  /** Initial column pinning configuration */\n  columnPinning?: { left?: string[]; right?: string[] }\n\n  // --- Cell Editing ---\n  /** Enable inline cell editing (double-click to edit) */\n  editable?: boolean\n  /** Callback when a cell value is edited */\n  onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void\n\n  // --- Row Expansion ---\n  /** Enable expandable rows with detail panels */\n  expandable?: boolean\n  /** Render function for expanded row content */\n  renderExpanded?: (row: TData) => React.ReactNode\n\n  // --- Virtualization ---\n  /** Enable row virtualization for large datasets */\n  virtualRows?: boolean\n  /** Height of each virtual row in pixels (default 48) */\n  virtualRowHeight?: number\n  /** Maximum height of the scrollable container in pixels (default 600) */\n  maxHeight?: number\n\n  // --- Server-side sorting ---\n  /** Callback for server-side sorting. When provided, sorting is manual (no client-side sort). */\n  onSort?: (key: string, direction: 'asc' | 'desc' | false) => void\n\n  // --- Empty state ---\n  /** Custom ReactNode to render when data is empty (replaces noResultsText) */\n  emptyState?: React.ReactNode\n\n  // --- Loading ---\n  /** Show shimmer skeleton rows instead of data */\n  loading?: boolean\n\n  // --- Controlled selection ---\n  /** Controlled set of selected row IDs — syncs internal selection state */\n  selectedIds?: Set<string>\n  /** Per-row filter to determine if a row is selectable */\n  selectableFilter?: (row: TData) => boolean\n  /** Custom row ID getter */\n  getRowId?: (row: TData) => string\n\n  // --- Server-side pagination ---\n  /** Server-side pagination config. When provided, pagination is manual. */\n  pagination?: {\n    page: number\n    pageSize: number\n    total: number\n    onPageChange: (page: number) => void\n  }\n\n  // --- Single-expand mode ---\n  /** When true, only one row can be expanded at a time */\n  singleExpand?: boolean\n\n  // --- Sticky header ---\n  /** When true, the table header sticks to the top on scroll */\n  stickyHeader?: boolean\n\n  // --- Row click ---\n  /** Callback when a row is clicked (not fired from interactive elements) */\n  onRowClick?: (row: TData) => void\n\n  // --- Bulk actions ---\n  /** Actions shown in a floating bar when rows are selected */\n  bulkActions?: BulkAction<TData>[]\n\n  // --- Mobile view ---\n  /** Render rows as stacked cards on small screens (below sm breakpoint). Default 'table'. */\n  mobileView?: 'card' | 'table'\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  className,\n  noResultsText,\n  sortable = false,\n  filterable = false,\n  globalFilter = false,\n  paginated = false,\n  pageSize: initialPageSize,\n  pageSizeOptions,\n  selectable = false,\n  onSelectionChange,\n  toolbar = false,\n  density: initialDensity = 'standard',\n  columnPinning: initialColumnPinning,\n  editable = false,\n  onCellEdit,\n  expandable = false,\n  renderExpanded,\n  virtualRows = false,\n  virtualRowHeight = 48,\n  maxHeight = 600,\n  onSort,\n  emptyState,\n  loading = false,\n  selectedIds,\n  selectableFilter,\n  getRowId: getRowIdProp,\n  pagination: serverPagination,\n  singleExpand = false,\n  stickyHeader = false,\n  onRowClick,\n  bulkActions,\n  mobileView = 'table',\n}: DataTableProps<TData, TValue>) {\n  // Detect below-sm viewport (640px) for card mode — separate from useIsMobile (768px)\n  const [isBelowSm, setIsBelowSm] = useState(false)\n  useEffect(() => {\n    const mql = window.matchMedia('(max-width: 639px)')\n    const onChange = () => setIsBelowSm(mql.matches)\n    mql.addEventListener('change', onChange)\n    setIsBelowSm(mql.matches)\n    return () => mql.removeEventListener('change', onChange)\n  }, [])\n\n  const showCards = mobileView === 'card' && isBelowSm\n\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n  const [globalFilterValue, setGlobalFilterValue] = useState('')\n  const [paginationState, setPaginationState] = useState<PaginationState>({\n    pageIndex: serverPagination ? serverPagination.page - 1 : 0,\n    pageSize: serverPagination?.pageSize ?? initialPageSize ?? 10,\n  })\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n  const [columnPinningState, setColumnPinningState] =\n    useState<ColumnPinningState>({\n      left: initialColumnPinning?.left ?? [],\n      right: initialColumnPinning?.right ?? [],\n    })\n  const [density, setDensity] = useState<Density>(initialDensity)\n  const [editingCell, setEditingCell] = useState<EditingCell>(null)\n  const [expanded, setExpanded] = useState<ExpandedState>({})\n\n  // Ref for the virtual scroll container\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  // Guard to prevent onSelectionChange firing when syncing from selectedIds prop\n  const isSyncingFromPropRef = useRef(false)\n\n  // Sync controlled selectedIds to internal rowSelection\n  useEffect(() => {\n    if (selectedIds) {\n      isSyncingFromPropRef.current = true\n      const newSelection: RowSelectionState = {}\n      selectedIds.forEach((id) => {\n        newSelection[id] = true\n      })\n      setRowSelection(newSelection)\n    }\n  }, [selectedIds])\n\n  // Sync server pagination page to internal state\n  useEffect(() => {\n    if (serverPagination) {\n      setPaginationState((prev) => ({\n        ...prev,\n        pageIndex: serverPagination.page - 1,\n        pageSize: serverPagination.pageSize,\n      }))\n    }\n  }, [serverPagination?.page, serverPagination?.pageSize]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Server-side sorting handler\n  const handleSortingChange = useCallback(\n    (updater: Updater<SortingState>) => {\n      setSorting((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (onSort) {\n          if (next.length === 0 && prev.length > 0) {\n            // Sorting cleared\n            onSort(prev[0].id, false)\n          } else if (next.length > 0) {\n            onSort(next[0].id, next[0].desc ? 'desc' : 'asc')\n          }\n        }\n        return next\n      })\n    },\n    [onSort],\n  )\n\n  // Single-expand handler\n  const handleExpandedChange = useCallback(\n    (updater: Updater<ExpandedState>) => {\n      setExpanded((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (!singleExpand) return next\n        // If next is boolean true (expand all), just use it\n        if (next === true) return next\n        if (typeof next !== 'object') return next\n        // Determine which row was just toggled on\n        const prevKeys = typeof prev === 'object' ? Object.keys(prev).filter((k) => (prev as Record<string, boolean>)[k]) : []\n        const nextKeys = Object.keys(next).filter((k) => (next as Record<string, boolean>)[k])\n        // Find newly expanded row\n        const newlyExpanded = nextKeys.filter((k) => !prevKeys.includes(k))\n        if (newlyExpanded.length > 0) {\n          // Keep only the most recently expanded row\n          return { [newlyExpanded[newlyExpanded.length - 1]]: true } as ExpandedState\n        }\n        // If no new rows, means a row was collapsed — return as-is\n        return next\n      })\n    },\n    [singleExpand],\n  )\n\n  // Stable ref for server pagination callback to avoid useCallback invalidation\n  const onPageChangeRef = useRef(serverPagination?.onPageChange)\n  useEffect(() => {\n    onPageChangeRef.current = serverPagination?.onPageChange\n  }, [serverPagination?.onPageChange])\n\n  // Server-side pagination handler\n  const handlePaginationChange = useCallback(\n    (updater: Updater<PaginationState>) => {\n      setPaginationState((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (onPageChangeRef.current) {\n          // Only call onPageChange if the page actually changed\n          if (next.pageIndex !== prev.pageIndex) {\n            onPageChangeRef.current(next.pageIndex + 1)\n          }\n        }\n        return next\n      })\n    },\n    [],\n  )\n\n  // Checkbox column prepended when selectable is enabled\n  const selectColumn: ColumnDef<TData, unknown> = {\n    id: '_select',\n    header: ({ table: t }) => (\n      <Checkbox\n        size=\"sm\"\n        checked={t.getIsAllPageRowsSelected()}\n        indeterminate={t.getIsSomePageRowsSelected()}\n        onCheckedChange={(v) => t.toggleAllPageRowsSelected(!!v)}\n        aria-label=\"Select all rows\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        size=\"sm\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(v) => row.toggleSelected(!!v)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableColumnFilter: false,\n    enableHiding: false,\n  }\n\n  // Expand toggle column\n  const expandColumn: ColumnDef<TData, unknown> = {\n    id: '_expand',\n    header: () => null,\n    cell: ({ row }) => (\n      <button\n        type=\"button\"\n        onClick={() => row.toggleExpanded()}\n        aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}\n        className=\"flex items-center justify-center p-ds-01 rounded-ds-sm hover:bg-surface-raised transition-colors\"\n      >\n        <Icon\n          icon={IconChevronRight}\n          size=\"sm\"\n          className={cn(\n            'transition-transform duration-moderate-02',\n            row.getIsExpanded() && 'rotate-90',\n          )}\n        />\n      </button>\n    ),\n    enableSorting: false,\n    enableColumnFilter: false,\n    enableHiding: false,\n  }\n\n  // Assemble all columns in order: select?, expand?, ...user columns\n  const allColumns = [\n    ...(selectable ? [selectColumn] : []),\n    ...(expandable ? [expandColumn] : []),\n    ...columns,\n  ]\n\n  // Determine if using server-side pagination\n  const useServerPagination = !!serverPagination\n  const showPagination = paginated || useServerPagination\n\n  // Build state object once — sorting and filtering contribute independently\n  const tableState: Partial<TableState> = {\n    columnVisibility,\n    columnPinning: columnPinningState,\n  }\n  if (sortable) tableState.sorting = sorting\n  if (filterable || globalFilter) {\n    tableState.columnFilters = columnFilters\n    tableState.globalFilter = globalFilterValue\n  }\n  if (showPagination) tableState.pagination = paginationState\n  if (selectable) tableState.rowSelection = rowSelection\n  if (expandable) tableState.expanded = expanded\n\n  // Determine server-side sort mode\n  const isServerSort = sortable && !!onSort\n\n  const table = useReactTable({\n    data,\n    columns: allColumns,\n    state: tableState,\n    onColumnVisibilityChange: setColumnVisibility,\n    onColumnPinningChange: setColumnPinningState,\n    getCoreRowModel: getCoreRowModel(),\n    ...(sortable && {\n      onSortingChange: isServerSort ? handleSortingChange : setSorting,\n      ...(isServerSort\n        ? { manualSorting: true }\n        : { getSortedRowModel: getSortedRowModel() }),\n    }),\n    ...((filterable || globalFilter) && {\n      onColumnFiltersChange: setColumnFilters,\n      onGlobalFilterChange: setGlobalFilterValue,\n      getFilteredRowModel: getFilteredRowModel(),\n    }),\n    ...(showPagination && {\n      onPaginationChange: useServerPagination\n        ? handlePaginationChange\n        : setPaginationState,\n      ...(useServerPagination\n        ? {\n            manualPagination: true,\n            pageCount: Math.ceil(\n              serverPagination!.total / serverPagination!.pageSize,\n            ),\n          }\n        : { getPaginationRowModel: getPaginationRowModel() }),\n    }),\n    ...(selectable && {\n      onRowSelectionChange: setRowSelection,\n      enableRowSelection: selectableFilter\n        ? (row: Row<TData>) => selectableFilter(row.original)\n        : true,\n    }),\n    ...(expandable && {\n      onExpandedChange: singleExpand ? handleExpandedChange : setExpanded,\n      getExpandedRowModel: getExpandedRowModel(),\n    }),\n    ...(getRowIdProp && {\n      getRowId: (row: TData) => getRowIdProp(row),\n    }),\n  })\n\n  // Stable refs to avoid effect re-fires from inline callbacks\n  const onSelectionChangeRef = useRef(onSelectionChange)\n  const getRowIdRef = useRef(getRowIdProp)\n  useEffect(() => {\n    onSelectionChangeRef.current = onSelectionChange\n    getRowIdRef.current = getRowIdProp\n  }, [onSelectionChange, getRowIdProp])\n\n  // Fire selection callback when row selection changes (skip when syncing from prop)\n  useEffect(() => {\n    if (isSyncingFromPropRef.current) {\n      isSyncingFromPropRef.current = false\n      return\n    }\n    if (!onSelectionChangeRef.current) return\n    const selectedRowIds = Object.keys(rowSelection).filter((k) => rowSelection[k])\n    const selected = data.filter((_, i) => {\n      const id = getRowIdRef.current ? getRowIdRef.current(data[i]) : String(i)\n      return selectedRowIds.includes(id)\n    })\n    onSelectionChangeRef.current(selected)\n  }, [rowSelection, data])\n\n  const cellPadding = densityPaddingMap[density]\n\n  const rows = table.getRowModel().rows\n\n  // Virtualizer — always called but only active when virtualRows is true\n  const virtualizer = useVirtualizer({\n    count: virtualRows ? rows.length : 0,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => virtualRowHeight,\n    overscan: 10,\n  })\n\n  // Number of skeleton rows for loading state\n  const skeletonRowCount = serverPagination?.pageSize ?? initialPageSize ?? 5\n\n  // Get selected rows for bulk actions (derived from rowSelection + data, not table instance)\n  const selectedRows = useMemo(() => {\n    if (!bulkActions || !selectable) return []\n    const selectedRowIds = Object.keys(rowSelection).filter((k) => rowSelection[k])\n    return data.filter((_, i) => {\n      const id = getRowIdProp ? getRowIdProp(data[i]) : String(i)\n      return selectedRowIds.includes(id)\n    })\n  }, [bulkActions, selectable, rowSelection, data, getRowIdProp])\n\n  const hasSelectedRows = selectedRows.length > 0\n\n  // Total rows for pagination display\n  const totalRowCount = useServerPagination\n    ? serverPagination!.total\n    : table.getFilteredRowModel().rows.length\n\n  // Build context value for sub-components\n  const contextValue = useMemo(\n    () => ({\n      table,\n      allColumns: allColumns.map((col) => ({\n        id: (col as { id?: string }).id,\n        header: (col as { header?: unknown }).header,\n      })),\n      cellPadding,\n      columnPinningState,\n      sortable,\n      filterable,\n      editable,\n      expandable,\n      virtualRows,\n      selectable,\n      mobileView,\n      editingCell,\n      setEditingCell,\n      onCellEdit,\n      renderExpanded,\n      onRowClick,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      table,\n      allColumns.length,\n      cellPadding,\n      columnPinningState,\n      sortable,\n      filterable,\n      editable,\n      expandable,\n      virtualRows,\n      selectable,\n      mobileView,\n      editingCell,\n      onCellEdit,\n      renderExpanded,\n      onRowClick,\n    ],\n  )\n\n  // Virtual items for body\n  const virtualItems = virtualRows ? virtualizer.getVirtualItems() : undefined\n  const totalVirtualSize = virtualRows ? virtualizer.getTotalSize() : undefined\n\n  // Determine if we need a scroll wrapper for virtualization\n  const tableContent = (\n    <Table aria-busy={loading || undefined}>\n      <DataTableHeader stickyHeader={stickyHeader} />\n      <DataTableBody\n        loading={loading}\n        skeletonRowCount={skeletonRowCount}\n        noResultsText={noResultsText}\n        emptyState={emptyState}\n        virtualItems={virtualItems}\n        totalVirtualSize={totalVirtualSize}\n      />\n    </Table>\n  )\n\n  return (\n    <DataTableProvider value={contextValue}>\n      <div className={cn(className)}>\n        {/* Toolbar */}\n        {toolbar && (\n          <DataTableToolbar\n            table={table}\n            globalFilter={globalFilter}\n            globalFilterValue={globalFilterValue}\n            onGlobalFilterChange={setGlobalFilterValue}\n            density={density}\n            onDensityChange={setDensity}\n          />\n        )}\n\n        {/* Global search input — only show standalone when toolbar is disabled */}\n        {globalFilter && !toolbar && (\n          <div className=\"flex items-center gap-ds-03 pb-ds-04 border-b border-surface-border mb-ds-04\">\n            <Icon icon={IconSearch} size=\"sm\" className=\"text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              value={globalFilterValue}\n              onChange={(e) => setGlobalFilterValue(e.target.value)}\n              placeholder=\"Search all columns...\"\n              aria-label=\"Search all columns\"\n              className={cn(\n                'flex-1 bg-transparent text-ds-md',\n                'text-surface-fg placeholder:text-surface-fg-subtle',\n                'outline-hidden',\n              )}\n            />\n          </div>\n        )}\n\n        {/* Card view on small screens, or standard table */}\n        {showCards ? (\n          <DataTableCards\n            loading={loading}\n            skeletonRowCount={skeletonRowCount}\n            noResultsText={noResultsText}\n            emptyState={emptyState}\n          />\n        ) : virtualRows ? (\n          <div\n            ref={scrollContainerRef}\n            style={{ maxHeight: `${maxHeight}px`, overflowY: 'auto' }}\n          >\n            {tableContent}\n          </div>\n        ) : (\n          tableContent\n        )}\n\n        {/* Pagination controls */}\n        {showPagination && (\n          <DataTablePagination\n            table={table}\n            totalRowCount={totalRowCount}\n            useServerPagination={useServerPagination}\n            pageSizeOptions={pageSizeOptions}\n          />\n        )}\n\n        {/* Bulk action bar */}\n        {bulkActions && selectable && hasSelectedRows && (\n          <DataTableBulkActions\n            table={table}\n            selectedRows={selectedRows}\n            bulkActions={bulkActions}\n          />\n        )}\n      </div>\n    </DataTableProvider>\n  )\n}\nDataTable.displayName = 'DataTable'\n"],"mappings":"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"}

package/dist/ui/devalok-grain.js

@@ -1,69 +1,80 @@
 "use client";
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { u as k, m as y } from "../_chunks/framer.js";
-const b = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")`, v = {
-  subtle: { solid: 0.2, soft: 0.15 },
-  medium: { solid: 0.28, soft: 0.22 },
-  heavy: { solid: 0.45, soft: 0.35 }
-}, f = {
-  subtle: { ld: 0.06, ll: 0.08, dk: 0.08 },
-  medium: { ld: 0.1, ll: 0.12, dk: 0.12 },
-  heavy: { ld: 0.16, ll: 0.18, dk: 0.18 }
+import { a as e, n as t } from "../_chunks/framer.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/ui/devalok-grain.tsx
+var i = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")", a = {
+	subtle: {
+		solid: .2,
+		soft: .15
+	},
+	medium: {
+		solid: .28,
+		soft: .22
+	},
+	heavy: {
+		solid: .45,
+		soft: .35
+	}
+}, o = {
+	subtle: {
+		ld: .06,
+		ll: .08,
+		dk: .08
+	},
+	medium: {
+		ld: .1,
+		ll: .12,
+		dk: .12
+	},
+	heavy: {
+		ld: .16,
+		ll: .18,
+		dk: .18
+	}
 };
-function w({
-  intensity: i = "subtle",
-  surface: d = "solid",
-  sheen: c = !1,
-  tint: e,
-  animated: p = !1,
-  hoverIntensify: t = !1
-}) {
-  const u = k(), r = v[i][d], h = Math.min(r * 1.4, 0.6), a = f[i], s = e ? `linear-gradient(135deg, color-mix(in oklch, ${e} ${Math.round(a.ld * 100)}%, transparent), color-mix(in oklch, white ${Math.round(a.ll * 100)}%, transparent))` : `linear-gradient(135deg, oklch(0 0 0 / ${a.ld}), oklch(1 0 0 / ${a.ll}))`, n = e ? `linear-gradient(135deg, transparent, color-mix(in oklch, ${e} ${Math.round(a.dk * 100)}%, transparent))` : `linear-gradient(135deg, transparent, oklch(0 0 0 / ${a.dk}))`, l = p && !u, g = l ? y.span : "span";
-  return /* @__PURE__ */ m(
-    g,
-    {
-      "data-grain": "",
-      "aria-hidden": "true",
-      className: "pointer-events-none absolute inset-0 z-[1] rounded-[inherit] isolate overflow-hidden",
-      ...l ? {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        transition: { duration: 0.6, ease: [0.2, 0, 0.38, 0.9] }
-      } : {},
-      children: [
-        s && /* @__PURE__ */ o(
-          "span",
-          {
-            className: `absolute inset-0 dark:hidden transition-opacity duration-300 ${t ? "group-hover:opacity-100 opacity-80" : ""}`,
-            style: { background: s }
-          }
-        ),
-        n && /* @__PURE__ */ o(
-          "span",
-          {
-            className: `absolute inset-0 hidden dark:block transition-opacity duration-300 ${t ? "group-hover:opacity-100 opacity-80" : ""}`,
-            style: { background: n }
-          }
-        ),
-        /* @__PURE__ */ o(
-          "span",
-          {
-            className: `absolute inset-0 transition-opacity duration-300 ${t ? "group-hover:opacity-[var(--grain-hover-opacity)]" : ""}`,
-            style: {
-              backgroundImage: b,
-              backgroundSize: "100px 100px",
-              filter: "contrast(250%) brightness(105%)",
-              opacity: r,
-              "--grain-hover-opacity": t ? h : void 0
-            }
-          }
-        ),
-        c && /* @__PURE__ */ o("span", { className: "absolute inset-0 shadow-raised-inner" })
-      ]
-    }
-  );
+function s({ intensity: s = "subtle", surface: c = "solid", sheen: l = !1, tint: u, animated: d = !1, hoverIntensify: f = !1 }) {
+	let p = t(), m = a[s][c], h = Math.min(m * 1.4, .6), g = o[s], _ = u ? `linear-gradient(135deg, color-mix(in oklch, ${u} ${Math.round(g.ld * 100)}%, transparent), color-mix(in oklch, white ${Math.round(g.ll * 100)}%, transparent))` : `linear-gradient(135deg, oklch(0 0 0 / ${g.ld}), oklch(1 0 0 / ${g.ll}))`, v = u ? `linear-gradient(135deg, transparent, color-mix(in oklch, ${u} ${Math.round(g.dk * 100)}%, transparent))` : `linear-gradient(135deg, transparent, oklch(0 0 0 / ${g.dk}))`, y = d && !p;
+	return /* @__PURE__ */ r(y ? e.span : "span", {
+		"data-grain": "",
+		"aria-hidden": "true",
+		className: "pointer-events-none absolute inset-0 z-[1] rounded-[inherit] isolate overflow-hidden",
+		...y ? {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: {
+				duration: .6,
+				ease: [
+					.2,
+					0,
+					.38,
+					.9
+				]
+			}
+		} : {},
+		children: [
+			_ && /* @__PURE__ */ n("span", {
+				className: `absolute inset-0 dark:hidden transition-opacity duration-300 ${f ? "group-hover:opacity-100 opacity-80" : ""}`,
+				style: { background: _ }
+			}),
+			v && /* @__PURE__ */ n("span", {
+				className: `absolute inset-0 hidden dark:block transition-opacity duration-300 ${f ? "group-hover:opacity-100 opacity-80" : ""}`,
+				style: { background: v }
+			}),
+			/* @__PURE__ */ n("span", {
+				className: `absolute inset-0 transition-opacity duration-300 ${f ? "group-hover:opacity-[var(--grain-hover-opacity)]" : ""}`,
+				style: {
+					backgroundImage: i,
+					backgroundSize: "100px 100px",
+					filter: "contrast(250%) brightness(105%)",
+					opacity: m,
+					"--grain-hover-opacity": f ? h : void 0
+				}
+			}),
+			l && /* @__PURE__ */ n("span", { className: "absolute inset-0 shadow-raised-inner" })
+		]
+	});
 }
-w.displayName = "DevalokGrain";
-export {
-  w as DevalokGrain
-};
+s.displayName = "DevalokGrain";
+//#endregion
+export { s as DevalokGrain };

package/dist/ui/devalok-grain.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devalok-grain.js","names":[],"sources":["../../src/ui/devalok-grain.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, useReducedMotion } from 'framer-motion'\n\nconst NOISE_SVG = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nexport type GrainIntensity = 'subtle' | 'medium' | 'heavy'\n\nconst NOISE_OPACITY = {\n  subtle: { solid: 0.20, soft: 0.15 },\n  medium: { solid: 0.28, soft: 0.22 },\n  heavy:  { solid: 0.45, soft: 0.35 },\n} as const\n\nconst GRADIENT = {\n  subtle: { ld: 0.06, ll: 0.08, dk: 0.08 },\n  medium: { ld: 0.10, ll: 0.12, dk: 0.12 },\n  heavy:  { ld: 0.16, ll: 0.18, dk: 0.18 },\n} as const\n\nexport interface DevalokGrainProps {\n  /** Grain intensity level. Default: 'subtle' */\n  intensity?: GrainIntensity\n  /**\n   * Surface type hint — affects noise opacity.\n   * 'solid' for filled backgrounds (higher opacity).\n   * 'soft' for tinted/muted backgrounds (lower opacity).\n   * Default: 'solid'\n   */\n  surface?: 'solid' | 'soft'\n  /**\n   * Add an inner highlight (top-lit emboss) for a premium 3D feel.\n   * Adds an inset shadow: light highlight on top edge, dark shadow on bottom edge.\n   * Works best on solid variant buttons. Default: false\n   */\n  sheen?: boolean\n  /**\n   * Animate the grain entrance (fade in on mount). Default: false\n   * When true, the grain fades in over 600ms with a slight scale for a natural reveal.\n   */\n  animated?: boolean\n  /**\n   * Increase grain visibility on parent hover. Default: false\n   * When the parent element is hovered, the noise opacity increases by ~40%\n   * and the gradient deepens slightly, creating a tactile \"pressing into paper\" feel.\n   * Requires the parent to have a `group` class for `group-hover:` to work.\n   */\n  hoverIntensify?: boolean\n  /**\n   * Tint color for the directional gradient. Accepts any CSS color value.\n   * The gradient goes from a darker shade of this color to a lighter shade.\n   * Default: neutral black-to-white wash.\n   *\n   * @example\n   * // Warm pink tint (Devalok brand)\n   * <DevalokGrain tint=\"oklch(0.55 0.19 360)\" />\n   *\n   * // Cool blue tint\n   * <DevalokGrain tint=\"oklch(0.55 0.12 240)\" />\n   *\n   * // Use a CSS variable\n   * <DevalokGrain tint=\"var(--color-accent-9)\" />\n   */\n  tint?: string\n}\n\n/**\n * DevalokGrain — Brand texture that adds a subtle noise grain + directional gradient\n * to any surface. The Devalok signature: warm, tactile, paper-like.\n *\n * Drop as a child of any element that has `relative overflow-hidden isolate`.\n * The grain layers are absolute-positioned at z-[1] and use `rounded-[inherit]`\n * to match the parent's border-radius.\n *\n * @example\n * // Inside a Button (Button already has relative/overflow-hidden/isolate):\n * <Button>\n *   <DevalokGrain />\n *   Save changes\n * </Button>\n *\n * @example\n * // Inside a Card:\n * <Card className=\"relative overflow-hidden isolate\">\n *   <DevalokGrain surface=\"soft\" />\n *   Card content\n * </Card>\n *\n * @example\n * // Heavier grain for a hero section:\n * <div className=\"relative overflow-hidden isolate rounded-ds-lg bg-accent-9 p-8\">\n *   <DevalokGrain intensity=\"heavy\" />\n *   <h1 className=\"relative z-[2]\">Hero</h1>\n * </div>\n */\nexport function DevalokGrain({\n  intensity = 'subtle',\n  surface = 'solid',\n  sheen = false,\n  tint,\n  animated = false,\n  hoverIntensify = false,\n}: DevalokGrainProps) {\n  const prefersReduced = useReducedMotion()\n  const noise = NOISE_OPACITY[intensity][surface]\n  const hoverNoise = Math.min(noise * 1.4, 0.6) // 40% more on hover, capped\n  const g = GRADIENT[intensity]\n\n  // Gradient adds directional dimensionality — a subtle diagonal wash that makes the\n  // surface feel lit from the top-left. When tinted, the gradient carries the tint color.\n  // When untinted, a neutral black→white wash still adds depth without coloring the surface.\n  const lightGradient = tint\n    ? `linear-gradient(135deg, color-mix(in oklch, ${tint} ${Math.round(g.ld * 100)}%, transparent), color-mix(in oklch, white ${Math.round(g.ll * 100)}%, transparent))`\n    : `linear-gradient(135deg, oklch(0 0 0 / ${g.ld}), oklch(1 0 0 / ${g.ll}))`\n  const darkGradient = tint\n    ? `linear-gradient(135deg, transparent, color-mix(in oklch, ${tint} ${Math.round(g.dk * 100)}%, transparent))`\n    : `linear-gradient(135deg, transparent, oklch(0 0 0 / ${g.dk}))`\n\n  const shouldAnimate = animated && !prefersReduced\n\n  const Wrapper = shouldAnimate ? motion.span : 'span'\n  const wrapperProps = shouldAnimate\n    ? {\n        initial: { opacity: 0 },\n        animate: { opacity: 1 },\n        transition: { duration: 0.6, ease: [0.2, 0, 0.38, 0.9] },\n      }\n    : {}\n\n  return (\n    <Wrapper\n      data-grain=\"\"\n      aria-hidden=\"true\"\n      className=\"pointer-events-none absolute inset-0 z-[1] rounded-[inherit] isolate overflow-hidden\"\n      {...(wrapperProps as any)}\n    >\n      {/* Gradient — only when tinted (neutral gradient looks like a dark smudge on light surfaces) */}\n      {lightGradient && (\n        <span\n          className={`absolute inset-0 dark:hidden transition-opacity duration-300 ${\n            hoverIntensify ? 'group-hover:opacity-100 opacity-80' : ''\n          }`}\n          style={{ background: lightGradient }}\n        />\n      )}\n      {darkGradient && (\n        <span\n          className={`absolute inset-0 hidden dark:block transition-opacity duration-300 ${\n            hoverIntensify ? 'group-hover:opacity-100 opacity-80' : ''\n          }`}\n          style={{ background: darkGradient }}\n        />\n      )}\n      {/* Noise texture */}\n      <span\n        className={`absolute inset-0 transition-opacity duration-300 ${\n          hoverIntensify ? 'group-hover:opacity-[var(--grain-hover-opacity)]' : ''\n        }`}\n        style={{\n          backgroundImage: NOISE_SVG,\n          backgroundSize: '100px 100px',\n          filter: 'contrast(250%) brightness(105%)',\n          opacity: noise,\n          '--grain-hover-opacity': hoverIntensify ? hoverNoise : undefined,\n        } as React.CSSProperties}\n      />\n      {/* Sheen — inner highlight */}\n      {sheen && (\n        <span className=\"absolute inset-0 shadow-raised-inner\" />\n      )}\n    </Wrapper>\n  )\n}\n\nDevalokGrain.displayName = 'DevalokGrain'\n"],"mappings":";;;;;AAKA,IAAM,IAAY,+SAIZ,IAAgB;CACpB,QAAQ;EAAE,OAAO;EAAM,MAAM;EAAM;CACnC,QAAQ;EAAE,OAAO;EAAM,MAAM;EAAM;CACnC,OAAQ;EAAE,OAAO;EAAM,MAAM;EAAM;CACpC,EAEK,IAAW;CACf,QAAQ;EAAE,IAAI;EAAM,IAAI;EAAM,IAAI;EAAM;CACxC,QAAQ;EAAE,IAAI;EAAM,IAAI;EAAM,IAAI;EAAM;CACxC,OAAQ;EAAE,IAAI;EAAM,IAAI;EAAM,IAAI;EAAM;CACzC;AA6ED,SAAgB,EAAa,EAC3B,eAAY,UACZ,aAAU,SACV,WAAQ,IACR,SACA,cAAW,IACX,oBAAiB,MACG;CACpB,IAAM,IAAiB,GAAkB,EACnC,IAAQ,EAAc,GAAW,IACjC,IAAa,KAAK,IAAI,IAAQ,KAAK,GAAI,EACvC,IAAI,EAAS,IAKb,IAAgB,IAClB,+CAA+C,EAAK,GAAG,KAAK,MAAM,EAAE,KAAK,IAAI,CAAC,6CAA6C,KAAK,MAAM,EAAE,KAAK,IAAI,CAAC,oBAClJ,yCAAyC,EAAE,GAAG,mBAAmB,EAAE,GAAG,KACpE,IAAe,IACjB,4DAA4D,EAAK,GAAG,KAAK,MAAM,EAAE,KAAK,IAAI,CAAC,oBAC3F,sDAAsD,EAAE,GAAG,KAEzD,IAAgB,KAAY,CAAC;AAWnC,QACE,kBAVc,IAAgB,EAAO,OAAO,QAU5C;EACE,cAAW;EACX,eAAY;EACZ,WAAU;EACV,GAbiB,IACjB;GACE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,YAAY;IAAE,UAAU;IAAK,MAAM;KAAC;KAAK;KAAG;KAAM;KAAI;IAAE;GACzD,GACD,EAAE;YAGJ;GAOG,KACC,kBAAC,QAAD;IACE,WAAW,gEACT,IAAiB,uCAAuC;IAE1D,OAAO,EAAE,YAAY,GAAe;IACpC,CAAA;GAEH,KACC,kBAAC,QAAD;IACE,WAAW,sEACT,IAAiB,uCAAuC;IAE1D,OAAO,EAAE,YAAY,GAAc;IACnC,CAAA;GAGJ,kBAAC,QAAD;IACE,WAAW,oDACT,IAAiB,qDAAqD;IAExE,OAAO;KACL,iBAAiB;KACjB,gBAAgB;KAChB,QAAQ;KACR,SAAS;KACT,yBAAyB,IAAiB,IAAa,KAAA;KACxD;IACD,CAAA;GAED,KACC,kBAAC,QAAD,EAAM,WAAU,wCAAyC,CAAA;GAEnD;;;AAId,EAAa,cAAc"}

package/dist/ui/dialog.js

@@ -1,154 +1,121 @@
 "use client";
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
-import * as t from "react";
-import { a5 as y, a6 as C, a7 as f, a8 as x, a9 as v, aa as b, ab as R, ac as M } from "../_chunks/primitives.js";
-import { IconX as O } from "@tabler/icons-react";
-import { cn as r } from "./lib/utils.js";
-import { tweens as g, springs as j } from "./lib/motion.js";
-import { Icon as I } from "./icon.js";
-import { useIsMobile as T } from "../hooks/use-mobile.js";
-import { A as z, m as u } from "../_chunks/framer.js";
-const h = t.createContext({ open: !1 }), P = () => t.useContext(h), A = ({
-  open: a,
-  defaultOpen: o,
-  onOpenChange: e,
-  ...n
-}) => {
-  const [d, c] = t.useState(o ?? !1), l = a !== void 0, i = l ? a : d, D = t.useCallback(
-    (p) => {
-      l || c(p), e?.(p);
-    },
-    [l, e]
-  ), w = t.useMemo(() => ({ open: i }), [i]);
-  return /* @__PURE__ */ s(h.Provider, { value: w, children: /* @__PURE__ */ s(R, { open: i, onOpenChange: D, ...n }) });
+import { An as e, Dn as t, En as n, Mn as r, Nn as i, On as a, jn as o, kn as s } from "../_chunks/primitives.js";
+import { a as c, c as l } from "../_chunks/framer.js";
+import { springs as u, tweens as d } from "./lib/motion.js";
+import { cn as f } from "./lib/utils.js";
+import { Icon as p } from "./icon.js";
+import { useIsMobile as m } from "../hooks/use-mobile.js";
+import * as h from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { IconX as v } from "@tabler/icons-react";
+//#region src/ui/dialog.tsx
+var y = h.createContext({ open: !1 }), b = () => h.useContext(y), x = ({ open: e, defaultOpen: t, onOpenChange: n, ...r }) => {
+	let [i, a] = h.useState(t ?? !1), s = e !== void 0, c = s ? e : i, l = h.useCallback((e) => {
+		s || a(e), n?.(e);
+	}, [s, n]), u = h.useMemo(() => ({ open: c }), [c]);
+	return /* @__PURE__ */ g(y.Provider, {
+		value: u,
+		children: /* @__PURE__ */ g(o, {
+			open: c,
+			onOpenChange: l,
+			...r
+		})
+	});
 };
-A.displayName = "Dialog";
-const W = M, F = C, Y = x, N = t.forwardRef(({ className: a, ...o }, e) => /* @__PURE__ */ s(
-  y,
-  {
-    ref: e,
-    forceMount: !0,
-    className: r(
-      "fixed inset-0 z-overlay bg-overlay",
-      a
-    ),
-    ...o
-  }
-));
-N.displayName = y.displayName;
-const H = t.forwardRef(({ className: a, children: o, responsive: e, ...n }, d) => {
-  const { open: c } = P(), l = T(), i = e !== !1 && l;
-  return /* @__PURE__ */ s(z, { children: c && /* @__PURE__ */ m(F, { forceMount: !0, children: [
-    /* @__PURE__ */ s(N, { asChild: !0, children: /* @__PURE__ */ s(
-      u.div,
-      {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: g.fade
-      }
-    ) }),
-    /* @__PURE__ */ s(
-      f,
-      {
-        ref: d,
-        forceMount: !0,
-        asChild: !0,
-        ...n,
-        children: /* @__PURE__ */ m(
-          u.div,
-          {
-            initial: i ? { y: "100%" } : { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
-            animate: i ? { y: 0 } : { opacity: 1, scale: 1, x: "-50%", y: "-50%" },
-            exit: i ? { y: "100%" } : { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
-            transition: i ? { type: "spring", damping: 30, stiffness: 300 } : { ...j.smooth, opacity: g.fade },
-            className: r(
-              "fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06",
-              e !== !1 ? "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-ds-xl md:border md:border-surface-border-strong md:shadow-overlay" : "left-[50%] top-[50%] max-w-lg rounded-ds-xl border border-surface-border-strong shadow-overlay",
-              a
-            ),
-            children: [
-              o,
-              /* @__PURE__ */ m(x, { title: "Close", className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none", children: [
-                /* @__PURE__ */ s(I, { icon: O, size: "lg" }),
-                /* @__PURE__ */ s("span", { className: "sr-only", children: "Close" })
-              ] })
-            ]
-          }
-        )
-      }
-    )
-  ] }) });
+x.displayName = "Dialog";
+var S = i, C = e, w = n, T = h.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ g(s, {
+	ref: n,
+	forceMount: !0,
+	className: f("fixed inset-0 z-overlay bg-overlay", e),
+	...t
+}));
+T.displayName = s.displayName;
+var E = h.forwardRef(({ className: e, children: r, responsive: i, ...a }, o) => {
+	let { open: s } = b(), h = m(), y = i !== !1 && h;
+	return /* @__PURE__ */ g(l, { children: s && /* @__PURE__ */ _(C, {
+		forceMount: !0,
+		children: [/* @__PURE__ */ g(T, {
+			asChild: !0,
+			children: /* @__PURE__ */ g(c.div, {
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: d.fade
+			})
+		}), /* @__PURE__ */ g(t, {
+			ref: o,
+			forceMount: !0,
+			asChild: !0,
+			...a,
+			children: /* @__PURE__ */ _(c.div, {
+				initial: y ? { y: "100%" } : {
+					opacity: 0,
+					scale: .95,
+					x: "-50%",
+					y: "-50%"
+				},
+				animate: y ? { y: 0 } : {
+					opacity: 1,
+					scale: 1,
+					x: "-50%",
+					y: "-50%"
+				},
+				exit: y ? { y: "100%" } : {
+					opacity: 0,
+					scale: .95,
+					x: "-50%",
+					y: "-50%"
+				},
+				transition: y ? u.smooth : {
+					...u.smooth,
+					opacity: d.fade
+				},
+				className: f("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", i === !1 ? "left-[50%] top-[50%] max-w-lg rounded-ds-xl border border-surface-border-strong shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-ds-xl md:border md:border-surface-border-strong md:shadow-overlay", e),
+				children: [r, /* @__PURE__ */ _(n, {
+					title: "Close",
+					className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
+					children: [/* @__PURE__ */ g(p, {
+						icon: v,
+						size: "lg"
+					}), /* @__PURE__ */ g("span", {
+						className: "sr-only",
+						children: "Close"
+					})]
+				})]
+			})
+		})]
+	}) });
 });
-H.displayName = f.displayName;
-const k = t.forwardRef(({ className: a, ...o }, e) => /* @__PURE__ */ s(
-  f,
-  {
-    ref: e,
-    className: r(a),
-    ...o
-  }
-));
-k.displayName = "DialogContentRaw";
-const S = t.forwardRef(
-  ({ className: a, ...o }, e) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: e,
-      className: r(
-        "flex flex-col space-y-ds-02b text-center sm:text-left",
-        a
-      ),
-      ...o
-    }
-  )
-);
-S.displayName = "DialogHeader";
-const V = t.forwardRef(
-  ({ className: a, ...o }, e) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: e,
-      className: r(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03",
-        a
-      ),
-      ...o
-    }
-  )
-);
-V.displayName = "DialogFooter";
-const X = t.forwardRef(({ className: a, ...o }, e) => /* @__PURE__ */ s(
-  v,
-  {
-    ref: e,
-    className: r(
-      "text-ds-lg font-semibold",
-      a
-    ),
-    ...o
-  }
-));
-X.displayName = v.displayName;
-const q = t.forwardRef(({ className: a, ...o }, e) => /* @__PURE__ */ s(
-  b,
-  {
-    ref: e,
-    className: r("text-ds-md text-surface-fg-muted", a),
-    ...o
-  }
-));
-q.displayName = b.displayName;
-export {
-  A as Dialog,
-  Y as DialogClose,
-  H as DialogContent,
-  k as DialogContentRaw,
-  q as DialogDescription,
-  V as DialogFooter,
-  S as DialogHeader,
-  N as DialogOverlay,
-  F as DialogPortal,
-  X as DialogTitle,
-  W as DialogTrigger
-};
+E.displayName = t.displayName;
+var D = h.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ g(t, {
+	ref: r,
+	className: f(e),
+	...n
+}));
+D.displayName = "DialogContentRaw";
+var O = h.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ g("div", {
+	ref: n,
+	className: f("flex flex-col space-y-ds-02b text-center sm:text-left", e),
+	...t
+}));
+O.displayName = "DialogHeader";
+var k = h.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ g("div", {
+	ref: n,
+	className: f("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03", e),
+	...t
+}));
+k.displayName = "DialogFooter";
+var A = h.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ g(r, {
+	ref: n,
+	className: f("text-ds-lg font-semibold", e),
+	...t
+}));
+A.displayName = r.displayName;
+var j = h.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ g(a, {
+	ref: n,
+	className: f("text-ds-md text-surface-fg-muted", e),
+	...t
+}));
+j.displayName = a.displayName;
+//#endregion
+export { x as Dialog, w as DialogClose, E as DialogContent, D as DialogContentRaw, j as DialogDescription, k as DialogFooter, O as DialogHeader, T as DialogOverlay, C as DialogPortal, A as DialogTitle, S as DialogTrigger };

package/dist/ui/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":[],"sources":["../../src/ui/dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@primitives/react-dialog'\nimport { IconX as CloseIcon } from '@tabler/icons-react'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nimport { cn } from './lib/utils'\nimport { springs, tweens } from './lib/motion'\nimport { Icon } from './icon'\nimport { useIsMobile } from '../hooks/use-mobile'\n\n// ── Internal context to thread `open` state to animated children ──\n\ntype DialogContextValue = { open: boolean }\nconst DialogContext = React.createContext<DialogContextValue>({ open: false })\nconst useDialogOpen = () => React.useContext(DialogContext)\n\n/**\n * Dialog compound component — accessible modal overlay with focus trap and Escape dismissal.\n *\n * **Parts (in composition order):**\n * - `Dialog` — manages open/closed state (this root)\n * - `DialogTrigger` — element that opens the dialog (use `asChild` to render your own button)\n * - `DialogContent` — the modal panel (auto-includes portal, overlay, and close button)\n * - `DialogHeader` — optional layout wrapper for title + description\n * - `DialogTitle` — required for accessibility (sets the dialog's ARIA label)\n * - `DialogDescription` — optional subtitle text\n * - `DialogFooter` — optional layout wrapper for action buttons\n * - `DialogClose` — manual close trigger (a close button is already built into DialogContent)\n * - `DialogContentRaw` — use instead of DialogContent when you need full portal/overlay control\n * - `DialogPortal` — low-level portal wrapper (exported for custom layout; used internally by DialogContent)\n * - `DialogOverlay` — the backdrop element (exported for custom overlay styling or positioning)\n *\n * @compound\n * @example\n * // Confirmation dialog:\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button variant=\"solid\" color=\"error\">Delete project</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Are you absolutely sure?</DialogTitle>\n *       <DialogDescription>\n *         This action cannot be undone. This will permanently delete your project.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogFooter>\n *       <DialogClose asChild><Button variant=\"outline\">Cancel</Button></DialogClose>\n *       <Button variant=\"solid\" color=\"error\" onClick={handleDelete}>Delete</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n * @example\n * // Controlled open state (no trigger in markup):\n * const [open, setOpen] = useState(false)\n * <Dialog open={open} onOpenChange={setOpen}>\n *   <DialogContent>\n *     <DialogTitle>Edit profile</DialogTitle>\n *     // form fields\n *   </DialogContent>\n * </Dialog>\n */\nconst Dialog: React.FC<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>> = ({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}) => {\n  // Track internal open state for uncontrolled usage\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const isControlled = openProp !== undefined\n  const open = isControlled ? openProp : internalOpen\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) setInternalOpen(nextOpen)\n      onOpenChange?.(nextOpen)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const contextValue = React.useMemo(() => ({ open }), [open])\n\n  return (\n    <DialogContext.Provider value={contextValue}>\n      <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </DialogContext.Provider>\n  )\n}\nDialog.displayName = 'Dialog'\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    forceMount\n    className={cn(\n      'fixed inset-0 z-overlay bg-overlay',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\ninterface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** When true (default), Dialog fills the screen on mobile (<768px). Set false to always use centered modal. */\n  responsive?: boolean\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, children, responsive, ...props }, ref) => {\n  const { open } = useDialogOpen()\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DialogPortal forceMount>\n          <DialogOverlay asChild>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            />\n          </DialogOverlay>\n          <DialogPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              animate={isMobile ? { y: 0 } : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }}\n              exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              transition={isMobile\n                ? springs.smooth\n                : { ...springs.smooth, opacity: tweens.fade }\n              }\n              className={cn(\n                'fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06',\n                responsive !== false\n                  ? 'inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-ds-xl md:border md:border-surface-border-strong md:shadow-overlay'\n                  : 'left-[50%] top-[50%] max-w-lg rounded-ds-xl border border-surface-border-strong shadow-overlay',\n                className,\n              )}\n            >\n              {children}\n              <DialogPrimitive.Close title=\"Close\" className=\"absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none\">\n                <Icon icon={CloseIcon} size=\"lg\" />\n                <span className=\"sr-only\">Close</span>\n              </DialogPrimitive.Close>\n            </motion.div>\n          </DialogPrimitive.Content>\n        </DialogPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\n/**\n * DialogContentRaw -- a minimal forwardRef wrapper around the primitive Content.\n * Unlike DialogContent, it does NOT include Portal, Overlay, or CloseButton.\n * Use this when you need full control over portal/overlay/close behaviour\n * (e.g. CommandPalette in shared/).\n */\nconst DialogContentRaw = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Content\n    ref={ref}\n    className={cn(className)}\n    {...props}\n  />\n))\nDialogContentRaw.displayName = 'DialogContentRaw'\n\nconst DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col space-y-ds-02b text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'text-ds-lg font-semibold',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport type { DialogContentProps }\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogContentRaw,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],"mappings":"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"}