@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","names":["Table"],"sources":["../../../src/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  flexRender,\n  type RowData,\n  type Table as TanstackTable,\n  type TableFeatures,\n} from \"@tanstack/react-table\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/dropdown-menu\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/table\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Presentation for a TanStack Table instance.\n *\n * Deliberately not a component that takes `data` and `columns` and does\n * everything. Sorting, filtering, selection and pagination are the table\n * library's job and it does them well; wrapping them in props would re-expose\n * an API that already exists, badly, and block anything the wrapper did not\n * anticipate. The consumer owns the instance:\n *\n *   const table = useTable({ features, columns, data });\n *   <DataTable table={table} />\n *\n * ## How these are typed\n *\n * The table library's features are opt-in, and its types follow: a method like\n * `getCanSort` exists only when the sorting feature is enabled.\n *\n * The controls below therefore declare **the shape they need** rather than\n * being generic over feature flags. A column from a table without sorting does\n * not satisfy `SortableColumn`, so passing one is a compile error at the call\n * site — the guarantee we wanted, and it survives the library reshuffling its\n * internal feature types.\n *\n * `DataTable` itself has to render any table, so it uses the core API and\n * detects the optional extras with real type guards.\n */\n\n/* -------------------------------------------------------------------------- */\n/* Capability detection                                                        */\n/* -------------------------------------------------------------------------- */\n\ninterface WithSortState {\n  getIsSorted: () => \"asc\" | \"desc\" | false;\n  getCanSort: () => boolean;\n}\n\ninterface WithSize {\n  getSize: () => number;\n}\n\ninterface WithSelection {\n  getIsSelected: () => boolean;\n}\n\ninterface WithVisibility {\n  getIsVisible: () => boolean;\n}\n\nfunction hasSortState(column: object): column is WithSortState {\n  return \"getIsSorted\" in column && \"getCanSort\" in column;\n}\n\nfunction hasSize(header: object): header is WithSize {\n  return \"getSize\" in header;\n}\n\nfunction hasSelection(row: object): row is WithSelection {\n  return \"getIsSelected\" in row;\n}\n\nfunction hasVisibility(column: object): column is WithVisibility {\n  return \"getIsVisible\" in column;\n}\n\n/**\n * Whether a column's cells should render.\n *\n * A table without the visibility feature has no notion of hidden columns, so\n * everything renders. With the feature on, this has to be honoured for cells as\n * well as headers — dropping a header while still rendering its cells shifts\n * every row out of alignment with the columns above it.\n */\nfunction isColumnVisible(column: object): boolean {\n  return !hasVisibility(column) || column.getIsVisible();\n}\n\nfunction ariaSort(column: object): \"ascending\" | \"descending\" | \"none\" | undefined {\n  if (!hasSortState(column)) return undefined;\n\n  const sorted = column.getIsSorted();\n  if (sorted === \"asc\") return \"ascending\";\n  if (sorted === \"desc\") return \"descending\";\n  return column.getCanSort() ? \"none\" : undefined;\n}\n\nfunction columnWidth(header: object): { width: number } | undefined {\n  if (!hasSize(header)) return undefined;\n\n  const size = header.getSize();\n  return size ? { width: size } : undefined;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Table                                                                       */\n/* -------------------------------------------------------------------------- */\n\nexport interface DataTableProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> extends Omit<ComponentPropsWithRef<\"table\">, \"children\"> {\n  table: TanstackTable<TFeatures, TData>;\n  /** Shown in place of rows when there are none. */\n  empty?: ReactNode;\n}\n\nexport function DataTable<TFeatures extends TableFeatures, TData extends RowData>({\n  table,\n  empty,\n  className,\n  ...props\n}: DataTableProps<TFeatures, TData>) {\n  const rows = table.getRowModel().rows;\n  const columnCount = table.getAllLeafColumns().length;\n\n  return (\n    <div className=\"rounded-lg border border-border\">\n      <Table className={cn(className)} {...props}>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => (\n                <TableHead\n                  key={header.id}\n                  colSpan={header.colSpan}\n                  style={columnWidth(header)}\n                  // Announces the current sort. Without it the arrow icon is the\n                  // only signal, which is no signal at all for a screen reader.\n                  aria-sort={ariaSort(header.column)}\n                >\n                  {header.isPlaceholder\n                    ? null\n                    : flexRender(header.column.columnDef.header, header.getContext())}\n                </TableHead>\n              ))}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {rows.length === 0 ? (\n            <TableRow className=\"hover:bg-transparent\">\n              <TableCell colSpan={columnCount} className=\"h-32 p-0 text-center\">\n                {empty ?? <span className=\"text-sm text-muted-foreground\">No results.</span>}\n              </TableCell>\n            </TableRow>\n          ) : (\n            rows.map((row) => (\n              <TableRow\n                key={row.id}\n                data-state={hasSelection(row) && row.getIsSelected() ? \"selected\" : undefined}\n              >\n                {row\n                  .getAllCells()\n                  .filter((cell) => isColumnVisible(cell.column))\n                  .map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Sortable column header                                                      */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The slice of a column a sortable header needs.\n *\n * A column from a table without the sorting feature does not have these\n * methods, so passing one is a compile error rather than a runtime crash.\n */\nexport interface SortableColumn {\n  getCanSort: () => boolean;\n  getIsSorted: () => \"asc\" | \"desc\" | false;\n  toggleSorting: (desc?: boolean) => void;\n}\n\nexport interface DataTableColumnHeaderProps extends ComponentPropsWithRef<\"div\"> {\n  column: SortableColumn;\n  title: string;\n}\n\n/**\n * A sortable column header.\n *\n * Falls back to plain text when the column cannot be sorted, rather than\n * rendering a button that does nothing — a control that looks interactive and\n * is not is worse than no control.\n */\nexport function DataTableColumnHeader({\n  column,\n  title,\n  className,\n  ...props\n}: DataTableColumnHeaderProps) {\n  if (!column.getCanSort()) {\n    return (\n      <div className={cn(\"text-xs font-medium\", className)} {...props}>\n        {title}\n      </div>\n    );\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <div className={cn(\"flex items-center\", className)} {...props}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"-ml-2 h-7 gap-1 px-2 font-medium text-muted-foreground data-[state=open]:bg-accent\"\n          >\n            {title}\n            <SortIcon direction={sorted === false ? undefined : sorted} />\n            <span className=\"sr-only\">\n              {sorted === \"asc\"\n                ? `${title}, sorted ascending`\n                : sorted === \"desc\"\n                  ? `${title}, sorted descending`\n                  : `${title}, not sorted`}\n            </span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          <DropdownMenuItem\n            onSelect={() => {\n              column.toggleSorting(false);\n            }}\n          >\n            Sort ascending\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              column.toggleSorting(true);\n            }}\n          >\n            Sort descending\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n\nfunction SortIcon({ direction }: { direction?: \"asc\" | \"desc\" }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5 opacity-70\">\n      <path\n        d={\n          direction === \"asc\"\n            ? \"m7 14 5-5 5 5\"\n            : direction === \"desc\"\n              ? \"m7 10 5 5 5-5\"\n              : \"m8 10 4-4 4 4M8 14l4 4 4-4\"\n        }\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Column visibility                                                           */\n/* -------------------------------------------------------------------------- */\n\n/** The slice of a table the column toggle needs. */\nexport interface HideableTable {\n  getAllColumns: () => {\n    id: string;\n    getCanHide: () => boolean;\n    getIsVisible: () => boolean;\n    toggleVisibility: (visible?: boolean) => void;\n  }[];\n}\n\nexport interface DataTableViewOptionsProps {\n  table: HideableTable;\n  label?: string;\n}\n\n/** Toggles column visibility. */\nexport function DataTableViewOptions({ table, label = \"Columns\" }: DataTableViewOptionsProps) {\n  const columns = table.getAllColumns().filter((column) => column.getCanHide());\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\">\n          {label}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-44\">\n        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {columns.map((column) => (\n          <DropdownMenuCheckboxItem\n            key={column.id}\n            checked={column.getIsVisible()}\n            onCheckedChange={(checked) => {\n              column.toggleVisibility(checked === true);\n            }}\n          >\n            {column.id}\n          </DropdownMenuCheckboxItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Pagination                                                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The slice of a table the page controls need.\n *\n * `state` is a property, not a `getState()` call — the table library moved to a\n * reactive state object, and reading it the old way fails at runtime rather\n * than at compile time.\n */\nexport interface PaginatedTable {\n  state: { pagination: { pageIndex: number; pageSize: number } };\n  getPageCount: () => number;\n  setPageSize: (size: number) => void;\n  previousPage: () => void;\n  nextPage: () => void;\n  getCanPreviousPage: () => boolean;\n  getCanNextPage: () => boolean;\n}\n\nexport interface DataTablePaginationProps {\n  table: PaginatedTable;\n  pageSizes?: number[];\n  /**\n   * Replaces the page position on the left.\n   *\n   * A slot rather than a `showSelectionCount` flag: a selection count needs the\n   * selection and filtering features, and demanding those here would break\n   * every table that only paginates.\n   */\n  status?: ReactNode;\n}\n\n/**\n * Page controls for a table.\n *\n * The page position is a polite live region: paging replaces the rows in place,\n * and without an announcement a screen reader user gets no confirmation that\n * anything happened.\n */\nexport function DataTablePagination({\n  table,\n  pageSizes = [10, 20, 50, 100],\n  status,\n}: DataTablePaginationProps) {\n  const { pageIndex, pageSize } = table.state.pagination;\n  const pageCount = table.getPageCount();\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-4 px-1 py-3\">\n      <div className=\"text-sm text-muted-foreground\" aria-live=\"polite\">\n        {status ?? (\n          <>\n            Page {pageIndex + 1} of {Math.max(1, pageCount)}\n          </>\n        )}\n      </div>\n\n      <div className=\"flex items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm text-muted-foreground\" id=\"rows-per-page\">\n            Rows per page\n          </span>\n          <Select\n            value={String(pageSize)}\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n          >\n            <SelectTrigger triggerSize=\"sm\" className=\"w-18\" aria-labelledby=\"rows-per-page\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizes.map((size) => (\n                <SelectItem key={size} value={String(size)}>\n                  {size}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div className=\"flex items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"icon-sm\"\n            aria-label=\"Go to previous page\"\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => {\n              table.previousPage();\n            }}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m15 18-6-6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"icon-sm\"\n            aria-label=\"Go to next page\"\n            disabled={!table.getCanNextPage()}\n            onClick={() => {\n              table.nextPage();\n            }}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m9 18 6-6-6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-table.js","names":["Table"],"sources":["../../../src/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  flexRender,\n  type RowData,\n  type Table as TanstackTable,\n  type TableFeatures,\n} from \"@tanstack/react-table\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/dropdown-menu\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/table\";\nimport { mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Presentation for a TanStack Table instance.\n *\n * Deliberately not a component that takes `data` and `columns` and does\n * everything. Sorting, filtering, selection and pagination are the table\n * library's job and it does them well; wrapping them in props would re-expose\n * an API that already exists, badly, and block anything the wrapper did not\n * anticipate. The consumer owns the instance:\n *\n *   const table = useTable({ features, columns, data });\n *   <DataTable table={table} />\n *\n * ## How these are typed\n *\n * The table library's features are opt-in, and its types follow: a method like\n * `getCanSort` exists only when the sorting feature is enabled.\n *\n * The controls below therefore declare **the shape they need** rather than\n * being generic over feature flags. A column from a table without sorting does\n * not satisfy `SortableColumn`, so passing one is a compile error at the call\n * site — the guarantee we wanted, and it survives the library reshuffling its\n * internal feature types.\n *\n * `DataTable` itself has to render any table, so it uses the core API and\n * detects the optional extras with real type guards.\n */\n\n/* -------------------------------------------------------------------------- */\n/* Capability detection                                                        */\n/* -------------------------------------------------------------------------- */\n\ninterface WithSortState {\n  getIsSorted: () => \"asc\" | \"desc\" | false;\n  getCanSort: () => boolean;\n}\n\ninterface WithSize {\n  getSize: () => number;\n}\n\ninterface WithSelection {\n  getIsSelected: () => boolean;\n}\n\ninterface WithVisibility {\n  getIsVisible: () => boolean;\n}\n\nfunction hasSortState(column: object): column is WithSortState {\n  return \"getIsSorted\" in column && \"getCanSort\" in column;\n}\n\nfunction hasSize(header: object): header is WithSize {\n  return \"getSize\" in header;\n}\n\nfunction hasSelection(row: object): row is WithSelection {\n  return \"getIsSelected\" in row;\n}\n\nfunction hasVisibility(column: object): column is WithVisibility {\n  return \"getIsVisible\" in column;\n}\n\n/**\n * Whether a column's cells should render.\n *\n * A table without the visibility feature has no notion of hidden columns, so\n * everything renders. With the feature on, this has to be honoured for cells as\n * well as headers — dropping a header while still rendering its cells shifts\n * every row out of alignment with the columns above it.\n */\nfunction isColumnVisible(column: object): boolean {\n  return !hasVisibility(column) || column.getIsVisible();\n}\n\nfunction ariaSort(column: object): \"ascending\" | \"descending\" | \"none\" | undefined {\n  if (!hasSortState(column)) return undefined;\n\n  const sorted = column.getIsSorted();\n  if (sorted === \"asc\") return \"ascending\";\n  if (sorted === \"desc\") return \"descending\";\n  return column.getCanSort() ? \"none\" : undefined;\n}\n\nfunction columnWidth(header: object): { width: number } | undefined {\n  if (!hasSize(header)) return undefined;\n\n  const size = header.getSize();\n  return size ? { width: size } : undefined;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Table                                                                       */\n/* -------------------------------------------------------------------------- */\n\nexport interface DataTableProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> extends Omit<ComponentPropsWithRef<\"table\">, \"children\"> {\n  table: TanstackTable<TFeatures, TData>;\n  /** Shown in place of rows when there are none. */\n  empty?: ReactNode;\n}\n\nexport function DataTable<TFeatures extends TableFeatures, TData extends RowData>({\n  table,\n  empty,\n  className,\n  ...props\n}: DataTableProps<TFeatures, TData>) {\n  const rows = table.getRowModel().rows;\n  const columnCount = table.getAllLeafColumns().length;\n\n  return (\n    <div className=\"rounded-lg border border-border\">\n      <Table className={cn(className)} {...props}>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => (\n                <TableHead\n                  key={header.id}\n                  colSpan={header.colSpan}\n                  style={columnWidth(header)}\n                  // Announces the current sort. Without it the arrow icon is the\n                  // only signal, which is no signal at all for a screen reader.\n                  aria-sort={ariaSort(header.column)}\n                >\n                  {header.isPlaceholder\n                    ? null\n                    : flexRender(header.column.columnDef.header, header.getContext())}\n                </TableHead>\n              ))}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {rows.length === 0 ? (\n            <TableRow className=\"hover:bg-transparent\">\n              <TableCell colSpan={columnCount} className=\"h-32 p-0 text-center\">\n                {empty ?? <span className=\"text-sm text-muted-foreground\">No results.</span>}\n              </TableCell>\n            </TableRow>\n          ) : (\n            rows.map((row) => (\n              <TableRow\n                key={row.id}\n                data-state={hasSelection(row) && row.getIsSelected() ? \"selected\" : undefined}\n              >\n                {row\n                  .getAllCells()\n                  .filter((cell) => isColumnVisible(cell.column))\n                  .map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Sortable column header                                                      */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The slice of a column a sortable header needs.\n *\n * A column from a table without the sorting feature does not have these\n * methods, so passing one is a compile error rather than a runtime crash.\n */\nexport interface SortableColumn {\n  getCanSort: () => boolean;\n  getIsSorted: () => \"asc\" | \"desc\" | false;\n  toggleSorting: (desc?: boolean) => void;\n}\n\nexport interface DataTableColumnHeaderProps extends ComponentPropsWithRef<\"div\"> {\n  column: SortableColumn;\n  title: string;\n}\n\n/**\n * A sortable column header.\n *\n * Falls back to plain text when the column cannot be sorted, rather than\n * rendering a button that does nothing — a control that looks interactive and\n * is not is worse than no control.\n */\nexport function DataTableColumnHeader({\n  column,\n  title,\n  className,\n  ...props\n}: DataTableColumnHeaderProps) {\n  if (!column.getCanSort()) {\n    return (\n      <div className={cn(\"text-xs font-medium\", className)} {...props}>\n        {title}\n      </div>\n    );\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <div className={cn(\"flex items-center\", className)} {...props}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"-ms-2 h-7 gap-1 px-2 font-medium text-muted-foreground data-[state=open]:bg-accent\"\n          >\n            {title}\n            <SortIcon direction={sorted === false ? undefined : sorted} />\n            <span className=\"sr-only\">\n              {sorted === \"asc\"\n                ? `${title}, sorted ascending`\n                : sorted === \"desc\"\n                  ? `${title}, sorted descending`\n                  : `${title}, not sorted`}\n            </span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          <DropdownMenuItem\n            onSelect={() => {\n              column.toggleSorting(false);\n            }}\n          >\n            Sort ascending\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              column.toggleSorting(true);\n            }}\n          >\n            Sort descending\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n\nfunction SortIcon({ direction }: { direction?: \"asc\" | \"desc\" }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5 opacity-70\">\n      <path\n        d={\n          direction === \"asc\"\n            ? \"m7 14 5-5 5 5\"\n            : direction === \"desc\"\n              ? \"m7 10 5 5 5-5\"\n              : \"m8 10 4-4 4 4M8 14l4 4 4-4\"\n        }\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Column visibility                                                           */\n/* -------------------------------------------------------------------------- */\n\n/** The slice of a table the column toggle needs. */\nexport interface HideableTable {\n  getAllColumns: () => {\n    id: string;\n    getCanHide: () => boolean;\n    getIsVisible: () => boolean;\n    toggleVisibility: (visible?: boolean) => void;\n  }[];\n}\n\nexport interface DataTableViewOptionsProps {\n  table: HideableTable;\n  label?: string;\n}\n\n/** Toggles column visibility. */\nexport function DataTableViewOptions({ table, label = \"Columns\" }: DataTableViewOptionsProps) {\n  const columns = table.getAllColumns().filter((column) => column.getCanHide());\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\">\n          {label}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-44\">\n        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {columns.map((column) => (\n          <DropdownMenuCheckboxItem\n            key={column.id}\n            checked={column.getIsVisible()}\n            onCheckedChange={(checked) => {\n              column.toggleVisibility(checked === true);\n            }}\n          >\n            {column.id}\n          </DropdownMenuCheckboxItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Pagination                                                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The slice of a table the page controls need.\n *\n * `state` is a property, not a `getState()` call — the table library moved to a\n * reactive state object, and reading it the old way fails at runtime rather\n * than at compile time.\n */\nexport interface PaginatedTable {\n  state: { pagination: { pageIndex: number; pageSize: number } };\n  getPageCount: () => number;\n  setPageSize: (size: number) => void;\n  previousPage: () => void;\n  nextPage: () => void;\n  getCanPreviousPage: () => boolean;\n  getCanNextPage: () => boolean;\n}\n\nexport interface DataTablePaginationProps {\n  table: PaginatedTable;\n  pageSizes?: number[];\n  /**\n   * Replaces the page position on the left.\n   *\n   * A slot rather than a `showSelectionCount` flag: a selection count needs the\n   * selection and filtering features, and demanding those here would break\n   * every table that only paginates.\n   */\n  status?: ReactNode;\n}\n\n/**\n * Page controls for a table.\n *\n * The page position is a polite live region: paging replaces the rows in place,\n * and without an announcement a screen reader user gets no confirmation that\n * anything happened.\n */\nexport function DataTablePagination({\n  table,\n  pageSizes = [10, 20, 50, 100],\n  status,\n}: DataTablePaginationProps) {\n  const { pageIndex, pageSize } = table.state.pagination;\n  const pageCount = table.getPageCount();\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-4 px-1 py-3\">\n      <div className=\"text-sm text-muted-foreground\" aria-live=\"polite\">\n        {status ?? (\n          <>\n            Page {pageIndex + 1} of {Math.max(1, pageCount)}\n          </>\n        )}\n      </div>\n\n      <div className=\"flex items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm text-muted-foreground\" id=\"rows-per-page\">\n            Rows per page\n          </span>\n          <Select\n            value={String(pageSize)}\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n          >\n            <SelectTrigger triggerSize=\"sm\" className=\"w-18\" aria-labelledby=\"rows-per-page\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizes.map((size) => (\n                <SelectItem key={size} value={String(size)}>\n                  {size}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div className=\"flex items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"icon-sm\"\n            aria-label=\"Go to previous page\"\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => {\n              table.previousPage();\n            }}\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              aria-hidden=\"true\"\n              className={mirrorForDirection}\n            >\n              <path\n                d=\"m15 18-6-6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"icon-sm\"\n            aria-label=\"Go to next page\"\n            disabled={!table.getCanNextPage()}\n            onClick={() => {\n              table.nextPage();\n            }}\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              aria-hidden=\"true\"\n              className={mirrorForDirection}\n            >\n              <path\n                d=\"m9 18 6-6-6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dial/dial.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/dial/dial.d.ts
+declare const dialVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DialProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof dialVariants> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** PageUp/PageDown distance. Defaults to a tenth of the range. */
+  pageStep?: number;
+  /** Tick marks around the dial, ends included. */
+  detents?: number;
+  /** Snap every input to the detents rather than to `step`. */
+  snapToDetents?: boolean;
+  /** Degrees of travel from min to max. */
+  sweep?: number;
+  /** The readout in the middle, and the default value text. */
+  format?: (value: number) => string;
+  /** Extra content under the readout, e.g. a unit or caption. */
+  caption?: ReactNode;
+  disabled?: boolean;
+}
+/** A rotary dial input with detents: drag, wheel or keys. */
+declare function Dial({ className, size, value: valueProp, defaultValue, onValueChange, min, max, step, pageStep, detents, snapToDetents, sweep, format, caption, disabled, onKeyDown, onPointerDown, onPointerMove, onPointerUp, ref, ...props }: DialProps): import("react").JSX.Element;
+//#endregion
+export { Dial, DialProps, dialVariants };
+//# sourceMappingURL=dial.d.ts.map

package/dist/components/dial/dial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dial.d.ts","names":[],"sources":["../../../src/components/dial/dial.tsx"],"mappings":";;;cAmCM,eAAY;;6CAgBjB;UAegB,kBAEb,KAAK,yEACL,oBAAoB;EACtB;EACA;EACA,iBAAiB;EACjB;EACA;EACA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,UAAU;;EAEV,UAAU;EACV;;;iBAIc,OACd,WACA,MACA,OAAO,WACP,cACA,eACA,KACA,KACA,MACA,UACA,SACA,eACA,OACA,QACA,SACA,UACA,WACA,eACA,eACA,aACA,QACG,SACF,4BAAS,IAAA"}

package/dist/components/dial/dial.js

@@ -0,0 +1,195 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/dial/dial.tsx
+const dialVariants = cva(cn("group/dial relative inline-grid shrink-0 touch-none place-items-center rounded-full select-none", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", focusRing), {
+	variants: { size: {
+		sm: "size-28 text-lg",
+		md: "size-40 text-2xl",
+		lg: "size-52 text-3xl"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Wheel distance, in pixels, per step. */
+const WHEEL_STEP = 40;
+function point(angle, radius) {
+	const radians = (angle - 90) * Math.PI / 180;
+	return `${(50 + radius * Math.cos(radians)).toFixed(2)} ${(50 + radius * Math.sin(radians)).toFixed(2)}`;
+}
+function arc(sweep, radius) {
+	const half = sweep / 2;
+	return `M ${point(-half, radius)} A ${String(radius)} ${String(radius)} 0 ${sweep > 180 ? 1 : 0} 1 ${point(half, radius)}`;
+}
+/** A rotary dial input with detents: drag, wheel or keys. */
+function Dial({ className, size, value: valueProp, defaultValue, onValueChange, min = 0, max = 100, step = 1, pageStep, detents = 11, snapToDetents = false, sweep = 270, format = (value) => String(value), caption, disabled = false, onKeyDown, onPointerDown, onPointerMove, onPointerUp, ref, ...props }) {
+	const [inner, setInner] = useState(defaultValue ?? min);
+	const range = Math.max(Number.EPSILON, max - min);
+	const value = Math.min(max, Math.max(min, valueProp ?? inner));
+	const fraction = (value - min) / range;
+	const [dragging, setDragging] = useState(false);
+	const rootRef = useRef(null);
+	const wheel = useRef(0);
+	const ticks = Math.max(2, Math.round(detents));
+	const quantum = snapToDetents ? range / (ticks - 1) : step;
+	function snap(raw) {
+		const snapped = min + Math.round((raw - min) / quantum) * quantum;
+		const decimals = (String(quantum).split(".")[1] ?? "").length;
+		return Number(Math.min(max, Math.max(min, snapped)).toFixed(Math.min(10, decimals + 2)));
+	}
+	function commit(raw) {
+		const next = snap(raw);
+		if (next === value) return;
+		if (valueProp === void 0) setInner(next);
+		onValueChange?.(next);
+	}
+	useEffect(() => {
+		const element = rootRef.current;
+		if (!element || disabled) return;
+		function handleWheel(event) {
+			if (document.activeElement !== element) return;
+			event.preventDefault();
+			const delta = event.deltaMode === 0 ? event.deltaY : event.deltaY * WHEEL_STEP;
+			wheel.current -= delta;
+			const steps = Math.trunc(wheel.current / WHEEL_STEP);
+			if (steps === 0) return;
+			wheel.current -= steps * WHEEL_STEP;
+			commit(value + steps * quantum);
+		}
+		element.addEventListener("wheel", handleWheel, { passive: false });
+		return () => {
+			element.removeEventListener("wheel", handleWheel);
+		};
+	});
+	function fromPointer(event) {
+		const rect = event.currentTarget.getBoundingClientRect();
+		if (rect.width <= 0) return;
+		const dx = event.clientX - (rect.left + rect.width / 2);
+		const dy = event.clientY - (rect.top + rect.height / 2);
+		if (dx === 0 && dy === 0) return;
+		const angle = Math.atan2(dx, -dy) * 180 / Math.PI;
+		commit(min + Math.min(1, Math.max(0, (angle + sweep / 2) / sweep)) * range);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (disabled || event.defaultPrevented) return;
+		const page = pageStep ?? Math.max(quantum, range / 10);
+		const move = {
+			ArrowUp: quantum,
+			ArrowRight: quantum,
+			ArrowDown: -quantum,
+			ArrowLeft: -quantum,
+			PageUp: page,
+			PageDown: -page,
+			Home: min - value,
+			End: max - value
+		}[event.key];
+		if (move === void 0) return;
+		event.preventDefault();
+		commit(value + move);
+	}
+	const rotation = -sweep / 2 + fraction * sweep;
+	const valueText = format(value);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (node) => {
+			rootRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		role: "slider",
+		tabIndex: disabled ? -1 : 0,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": value,
+		"aria-valuetext": valueText,
+		"aria-disabled": disabled || void 0,
+		"data-slot": "dial",
+		"data-disabled": disabled || void 0,
+		"data-dragging": dragging || void 0,
+		className: cn(dialVariants({ size }), className),
+		onKeyDown: handleKeyDown,
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (disabled || event.button !== 0) return;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			setDragging(true);
+			fromPointer(event);
+		},
+		onPointerMove: (event) => {
+			onPointerMove?.(event);
+			if (dragging) fromPointer(event);
+		},
+		onPointerUp: (event) => {
+			onPointerUp?.(event);
+			setDragging(false);
+		},
+		onPointerCancel: () => {
+			setDragging(false);
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 100 100",
+				"aria-hidden": "true",
+				"data-slot": "dial-scale",
+				className: "absolute inset-0 size-full overflow-visible",
+				children: [
+					Array.from({ length: ticks }, (_, index) => {
+						const at = index / (ticks - 1);
+						const angle = -sweep / 2 + at * sweep;
+						return /* @__PURE__ */ jsx("line", {
+							"data-slot": "dial-detent",
+							"data-on": at <= fraction + 1e-9 || void 0,
+							x1: point(angle, 47).split(" ")[0],
+							y1: point(angle, 47).split(" ")[1],
+							x2: point(angle, 50).split(" ")[0],
+							y2: point(angle, 50).split(" ")[1],
+							strokeWidth: "1.2",
+							strokeLinecap: "round",
+							className: "stroke-muted-foreground/45 transition-[stroke] duration-[var(--duration-fast)] data-[on]:stroke-foreground"
+						}, index);
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: arc(sweep, 42),
+						fill: "none",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						className: "stroke-foreground/12"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: arc(sweep, 42),
+						fill: "none",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						pathLength: 100,
+						strokeDasharray: `${(fraction * 100).toFixed(3)} 100`,
+						"data-slot": "dial-arc",
+						className: cn("stroke-primary transition-[stroke-dasharray] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "group-data-[dragging]/dial:transition-none")
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				"data-slot": "dial-knob",
+				className: cn("absolute inset-[18%] rounded-full bg-card shadow-[inset_0_0_0_1px_var(--color-border),0_1px_3px_color-mix(in_oklab,var(--color-foreground)_14%,transparent)]", "transition-[rotate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]", "group-data-[dragging]/dial:transition-none"),
+				style: { rotate: `${rotation.toFixed(3)}deg` },
+				children: /* @__PURE__ */ jsx("span", { className: "absolute top-[7%] left-1/2 h-[16%] w-[5%] -translate-x-1/2 rounded-full bg-foreground" })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				"data-slot": "dial-readout",
+				className: "pointer-events-none relative flex flex-col items-center leading-none font-medium tabular-nums",
+				children: [valueText, caption ? /* @__PURE__ */ jsx("span", {
+					className: "mt-1 text-[0.45em] font-normal text-muted-foreground",
+					children: caption
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
+export { Dial, dialVariants };
+
+//# sourceMappingURL=dial.js.map

package/dist/components/dial/dial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dial.js","names":[],"sources":["../../../src/components/dial/dial.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Wheel; no code referenced).\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A rotary dial: a knob with a pointer notch inside an arc that fills to the\n * value, ringed by detent ticks.\n *\n * The dial itself is the role=\"slider\" element, so aria-label and the value\n * attributes land where the role is. It turns with the keyboard (arrows by a\n * step, PageUp/PageDown by a page, Home/End), by dragging (the notch points\n * at the pointer — absolute, so there is nothing to \"wind\"), and by the wheel\n * while it has focus (never on mere hover, so it cannot steal page scroll).\n * Every input snaps to `step`, or to the detents with `snapToDetents`.\n *\n * Clockwise is \"more\" in every language, so the dial does not mirror in\n * right-to-left layouts, and the arrow keys are not swapped either.\n *\n * Motion is a CSS transition on the knob's rotation, dropped while dragging\n * so it tracks the pointer 1:1; reduced motion collapses it.\n */\n\nconst dialVariants = cva(\n  cn(\n    \"group/dial relative inline-grid shrink-0 touch-none place-items-center rounded-full select-none\",\n    \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n    focusRing,\n  ),\n  {\n    variants: {\n      size: {\n        sm: \"size-28 text-lg\",\n        md: \"size-40 text-2xl\",\n        lg: \"size-52 text-3xl\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/** Wheel distance, in pixels, per step. */\nconst WHEEL_STEP = 40;\n\nfunction point(angle: number, radius: number): string {\n  const radians = ((angle - 90) * Math.PI) / 180;\n  return `${(50 + radius * Math.cos(radians)).toFixed(2)} ${(50 + radius * Math.sin(radians)).toFixed(2)}`;\n}\n\nfunction arc(sweep: number, radius: number): string {\n  const half = sweep / 2;\n  return `M ${point(-half, radius)} A ${String(radius)} ${String(radius)} 0 ${sweep > 180 ? 1 : 0} 1 ${point(half, radius)}`;\n}\n\nexport interface DialProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    VariantProps<typeof dialVariants> {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** PageUp/PageDown distance. Defaults to a tenth of the range. */\n  pageStep?: number;\n  /** Tick marks around the dial, ends included. */\n  detents?: number;\n  /** Snap every input to the detents rather than to `step`. */\n  snapToDetents?: boolean;\n  /** Degrees of travel from min to max. */\n  sweep?: number;\n  /** The readout in the middle, and the default value text. */\n  format?: (value: number) => string;\n  /** Extra content under the readout, e.g. a unit or caption. */\n  caption?: ReactNode;\n  disabled?: boolean;\n}\n\n/** A rotary dial input with detents: drag, wheel or keys. */\nexport function Dial({\n  className,\n  size,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  pageStep,\n  detents = 11,\n  snapToDetents = false,\n  sweep = 270,\n  format = (value) => String(value),\n  caption,\n  disabled = false,\n  onKeyDown,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  ref,\n  ...props\n}: DialProps) {\n  const [inner, setInner] = useState(defaultValue ?? min);\n  const range = Math.max(Number.EPSILON, max - min);\n  const value = Math.min(max, Math.max(min, valueProp ?? inner));\n  const fraction = (value - min) / range;\n  const [dragging, setDragging] = useState(false);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const wheel = useRef(0);\n  const ticks = Math.max(2, Math.round(detents));\n  const quantum = snapToDetents ? range / (ticks - 1) : step;\n\n  function snap(raw: number): number {\n    const snapped = min + Math.round((raw - min) / quantum) * quantum;\n    const decimals = (String(quantum).split(\".\")[1] ?? \"\").length;\n    return Number(Math.min(max, Math.max(min, snapped)).toFixed(Math.min(10, decimals + 2)));\n  }\n\n  function commit(raw: number) {\n    const next = snap(raw);\n    if (next === value) return;\n    if (valueProp === undefined) setInner(next);\n    onValueChange?.(next);\n  }\n\n  // The wheel needs a non-passive listener to keep the page still, and only\n  // acts while the dial has focus. Re-attached each render so it always sees\n  // the current value; attaching a listener is cheap.\n  useEffect(() => {\n    const element = rootRef.current;\n    if (!element || disabled) return;\n    function handleWheel(event: WheelEvent) {\n      if (document.activeElement !== element) return;\n      event.preventDefault();\n      const delta = event.deltaMode === 0 ? event.deltaY : event.deltaY * WHEEL_STEP;\n      wheel.current -= delta;\n      const steps = Math.trunc(wheel.current / WHEEL_STEP);\n      if (steps === 0) return;\n      wheel.current -= steps * WHEEL_STEP;\n      commit(value + steps * quantum);\n    }\n    element.addEventListener(\"wheel\", handleWheel, { passive: false });\n    return () => {\n      element.removeEventListener(\"wheel\", handleWheel);\n    };\n  });\n\n  function fromPointer(event: PointerEvent<HTMLDivElement>) {\n    const rect = event.currentTarget.getBoundingClientRect();\n    if (rect.width <= 0) return;\n    const dx = event.clientX - (rect.left + rect.width / 2);\n    const dy = event.clientY - (rect.top + rect.height / 2);\n    if (dx === 0 && dy === 0) return;\n    // Degrees clockwise from twelve o'clock, in (−180, 180].\n    const angle = (Math.atan2(dx, -dy) * 180) / Math.PI;\n    const turned = Math.min(1, Math.max(0, (angle + sweep / 2) / sweep));\n    commit(min + turned * range);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    onKeyDown?.(event);\n    if (disabled || event.defaultPrevented) return;\n    const page = pageStep ?? Math.max(quantum, range / 10);\n    const moves: Record<string, number> = {\n      ArrowUp: quantum,\n      ArrowRight: quantum,\n      ArrowDown: -quantum,\n      ArrowLeft: -quantum,\n      PageUp: page,\n      PageDown: -page,\n      Home: min - value,\n      End: max - value,\n    };\n    const move = moves[event.key];\n    if (move === undefined) return;\n    event.preventDefault();\n    commit(value + move);\n  }\n\n  const rotation = -sweep / 2 + fraction * sweep;\n  const valueText = format(value);\n\n  return (\n    <div\n      ref={(node) => {\n        rootRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      role=\"slider\"\n      tabIndex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      aria-valuetext={valueText}\n      aria-disabled={disabled || undefined}\n      data-slot=\"dial\"\n      data-disabled={disabled || undefined}\n      data-dragging={dragging || undefined}\n      className={cn(dialVariants({ size }), className)}\n      onKeyDown={handleKeyDown}\n      onPointerDown={(event) => {\n        onPointerDown?.(event);\n        if (disabled || event.button !== 0) return;\n        event.currentTarget.setPointerCapture(event.pointerId);\n        setDragging(true);\n        fromPointer(event);\n      }}\n      onPointerMove={(event) => {\n        onPointerMove?.(event);\n        if (dragging) fromPointer(event);\n      }}\n      onPointerUp={(event) => {\n        onPointerUp?.(event);\n        setDragging(false);\n      }}\n      onPointerCancel={() => {\n        setDragging(false);\n      }}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        aria-hidden=\"true\"\n        data-slot=\"dial-scale\"\n        className=\"absolute inset-0 size-full overflow-visible\"\n      >\n        {Array.from({ length: ticks }, (_, index) => {\n          const at = index / (ticks - 1);\n          const angle = -sweep / 2 + at * sweep;\n          return (\n            <line\n              key={index}\n              data-slot=\"dial-detent\"\n              data-on={at <= fraction + 1e-9 || undefined}\n              x1={point(angle, 47).split(\" \")[0]}\n              y1={point(angle, 47).split(\" \")[1]}\n              x2={point(angle, 50).split(\" \")[0]}\n              y2={point(angle, 50).split(\" \")[1]}\n              strokeWidth=\"1.2\"\n              strokeLinecap=\"round\"\n              className=\"stroke-muted-foreground/45 transition-[stroke] duration-[var(--duration-fast)] data-[on]:stroke-foreground\"\n            />\n          );\n        })}\n        <path\n          d={arc(sweep, 42)}\n          fill=\"none\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n          className=\"stroke-foreground/12\"\n        />\n        <path\n          d={arc(sweep, 42)}\n          fill=\"none\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n          pathLength={100}\n          strokeDasharray={`${(fraction * 100).toFixed(3)} 100`}\n          data-slot=\"dial-arc\"\n          className={cn(\n            \"stroke-primary transition-[stroke-dasharray] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            \"group-data-[dragging]/dial:transition-none\",\n          )}\n        />\n      </svg>\n      <div\n        aria-hidden=\"true\"\n        data-slot=\"dial-knob\"\n        className={cn(\n          \"absolute inset-[18%] rounded-full bg-card shadow-[inset_0_0_0_1px_var(--color-border),0_1px_3px_color-mix(in_oklab,var(--color-foreground)_14%,transparent)]\",\n          \"transition-[rotate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n          \"group-data-[dragging]/dial:transition-none\",\n        )}\n        style={{ rotate: `${rotation.toFixed(3)}deg` }}\n      >\n        <span className=\"absolute top-[7%] left-1/2 h-[16%] w-[5%] -translate-x-1/2 rounded-full bg-foreground\" />\n      </div>\n      <div\n        aria-hidden=\"true\"\n        data-slot=\"dial-readout\"\n        className=\"pointer-events-none relative flex flex-col items-center leading-none font-medium tabular-nums\"\n      >\n        {valueText}\n        {caption ? (\n          <span className=\"mt-1 text-[0.45em] font-normal text-muted-foreground\">\n            {caption}\n          </span>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport { dialVariants };\n"],"mappings":";;;;;;;AAmCA,MAAM,eAAe,IACnB,GACE,mGACA,kEACA,SACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;AAGA,MAAM,aAAa;AAEnB,SAAS,MAAM,OAAe,QAAwB;CACpD,MAAM,WAAY,QAAQ,MAAM,KAAK,KAAM;CAC3C,OAAO,IAAI,KAAK,SAAS,KAAK,IAAI,OAAO,EAAA,CAAG,QAAQ,CAAC,EAAE,IAAI,KAAK,SAAS,KAAK,IAAI,OAAO,EAAA,CAAG,QAAQ,CAAC;AACvG;AAEA,SAAS,IAAI,OAAe,QAAwB;CAClD,MAAM,OAAO,QAAQ;CACrB,OAAO,KAAK,MAAM,CAAC,MAAM,MAAM,EAAE,KAAK,OAAO,MAAM,EAAE,GAAG,OAAO,MAAM,EAAE,KAAK,QAAQ,MAAM,IAAI,EAAE,KAAK,MAAM,MAAM,MAAM;AACzH;;AA4BA,SAAgB,KAAK,EACnB,WACA,MACA,OAAO,WACP,cACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,UACA,UAAU,IACV,gBAAgB,OAChB,QAAQ,KACR,UAAU,UAAU,OAAO,KAAK,GAChC,SACA,WAAW,OACX,WACA,eACA,eACA,aACA,KACA,GAAG,SACS;CACZ,MAAM,CAAC,OAAO,YAAY,SAAS,gBAAgB,GAAG;CACtD,MAAM,QAAQ,KAAK,IAAI,OAAO,SAAS,MAAM,GAAG;CAChD,MAAM,QAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,aAAa,KAAK,CAAC;CAC7D,MAAM,YAAY,QAAQ,OAAO;CACjC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,QAAQ,OAAO,CAAC;CACtB,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,CAAC;CAC7C,MAAM,UAAU,gBAAgB,SAAS,QAAQ,KAAK;CAEtD,SAAS,KAAK,KAAqB;EACjC,MAAM,UAAU,MAAM,KAAK,OAAO,MAAM,OAAO,OAAO,IAAI;EAC1D,MAAM,YAAY,OAAO,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,GAAA,CAAI;EACvD,OAAO,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC;CACzF;CAEA,SAAS,OAAO,KAAa;EAC3B,MAAM,OAAO,KAAK,GAAG;EACrB,IAAI,SAAS,OAAO;EACpB,IAAI,cAAc,KAAA,GAAW,SAAS,IAAI;EAC1C,gBAAgB,IAAI;CACtB;CAKA,gBAAgB;EACd,MAAM,UAAU,QAAQ;EACxB,IAAI,CAAC,WAAW,UAAU;EAC1B,SAAS,YAAY,OAAmB;GACtC,IAAI,SAAS,kBAAkB,SAAS;GACxC,MAAM,eAAe;GACrB,MAAM,QAAQ,MAAM,cAAc,IAAI,MAAM,SAAS,MAAM,SAAS;GACpE,MAAM,WAAW;GACjB,MAAM,QAAQ,KAAK,MAAM,MAAM,UAAU,UAAU;GACnD,IAAI,UAAU,GAAG;GACjB,MAAM,WAAW,QAAQ;GACzB,OAAO,QAAQ,QAAQ,OAAO;EAChC;EACA,QAAQ,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EACjE,aAAa;GACX,QAAQ,oBAAoB,SAAS,WAAW;EAClD;CACF,CAAC;CAED,SAAS,YAAY,OAAqC;EACxD,MAAM,OAAO,MAAM,cAAc,sBAAsB;EACvD,IAAI,KAAK,SAAS,GAAG;EACrB,MAAM,KAAK,MAAM,WAAW,KAAK,OAAO,KAAK,QAAQ;EACrD,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM,KAAK,SAAS;EACrD,IAAI,OAAO,KAAK,OAAO,GAAG;EAE1B,MAAM,QAAS,KAAK,MAAM,IAAI,CAAC,EAAE,IAAI,MAAO,KAAK;EAEjD,OAAO,MADQ,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,QAAQ,QAAQ,KAAK,KAAK,CAChD,IAAI,KAAK;CAC7B;CAEA,SAAS,cAAc,OAAsC;EAC3D,YAAY,KAAK;EACjB,IAAI,YAAY,MAAM,kBAAkB;EACxC,MAAM,OAAO,YAAY,KAAK,IAAI,SAAS,QAAQ,EAAE;EAWrD,MAAM,OAAO;GATX,SAAS;GACT,YAAY;GACZ,WAAW,CAAC;GACZ,WAAW,CAAC;GACZ,QAAQ;GACR,UAAU,CAAC;GACX,MAAM,MAAM;GACZ,KAAK,MAAM;EAEI,EAAE,MAAM;EACzB,IAAI,SAAS,KAAA,GAAW;EACxB,MAAM,eAAe;EACrB,OAAO,QAAQ,IAAI;CACrB;CAEA,MAAM,WAAW,CAAC,QAAQ,IAAI,WAAW;CACzC,MAAM,YAAY,OAAO,KAAK;CAE9B,OACE,qBAAC,OAAD;EACE,MAAM,SAAS;GACb,QAAQ,UAAU;GAClB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;QAClC,IAAI,KAAK,IAAI,UAAU;EAC9B;EACA,MAAK;EACL,UAAU,WAAW,KAAK;EAC1B,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,iBAAe,YAAY,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAC3B,WAAW,GAAG,aAAa,EAAE,KAAK,CAAC,GAAG,SAAS;EAC/C,WAAW;EACX,gBAAgB,UAAU;GACxB,gBAAgB,KAAK;GACrB,IAAI,YAAY,MAAM,WAAW,GAAG;GACpC,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACrD,YAAY,IAAI;GAChB,YAAY,KAAK;EACnB;EACA,gBAAgB,UAAU;GACxB,gBAAgB,KAAK;GACrB,IAAI,UAAU,YAAY,KAAK;EACjC;EACA,cAAc,UAAU;GACtB,cAAc,KAAK;GACnB,YAAY,KAAK;EACnB;EACA,uBAAuB;GACrB,YAAY,KAAK;EACnB;EACA,GAAI;EApCN,UAAA;GAsCE,qBAAC,OAAD;IACE,SAAQ;IACR,eAAY;IACZ,aAAU;IACV,WAAU;IAJZ,UAAA;KAMG,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UAAU;MAC3C,MAAM,KAAK,SAAS,QAAQ;MAC5B,MAAM,QAAQ,CAAC,QAAQ,IAAI,KAAK;MAChC,OACE,oBAAC,QAAD;OAEE,aAAU;OACV,WAAS,MAAM,WAAW,QAAQ,KAAA;OAClC,IAAI,MAAM,OAAO,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;OAChC,IAAI,MAAM,OAAO,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;OAChC,IAAI,MAAM,OAAO,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;OAChC,IAAI,MAAM,OAAO,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;OAChC,aAAY;OACZ,eAAc;OACd,WAAU;MACX,GAVM,KAUN;KAEL,CAAC;KACD,oBAAC,QAAD;MACE,GAAG,IAAI,OAAO,EAAE;MAChB,MAAK;MACL,aAAY;MACZ,eAAc;MACd,WAAU;KACX,CAAA;KACD,oBAAC,QAAD;MACE,GAAG,IAAI,OAAO,EAAE;MAChB,MAAK;MACL,aAAY;MACZ,eAAc;MACd,YAAY;MACZ,iBAAiB,IAAI,WAAW,IAAA,CAAK,QAAQ,CAAC,EAAE;MAChD,aAAU;MACV,WAAW,GACT,+GACA,4CACF;KACD,CAAA;IACE;;GACL,oBAAC,OAAD;IACE,eAAY;IACZ,aAAU;IACV,WAAW,GACT,gKACA,sFACA,4CACF;IACA,OAAO,EAAE,QAAQ,GAAG,SAAS,QAAQ,CAAC,EAAE,KAAK;IAE7C,UAAA,oBAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;GACtG,CAAA;GACL,qBAAC,OAAD;IACE,eAAY;IACZ,aAAU;IACV,WAAU;IAHZ,UAAA,CAKG,WACA,UACC,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,IACJ,IACD;;EACF;;AAET"}

package/dist/components/dial/index.d.ts

@@ -0,0 +1,2 @@
+import { Dial, DialProps, dialVariants } from "./dial.js";
+export { Dial, type DialProps, dialVariants };

package/dist/components/dial/index.js

@@ -0,0 +1,2 @@
+import { Dial, dialVariants } from "./dial.js";
+export { Dial, dialVariants };

package/dist/components/dial/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dial/meta.ts
+const meta = defineMeta({
+	name: "dial",
+	title: "Dial",
+	description: "A rotary dial input — a knob inside a filling arc with detent ticks — turned by drag, wheel or keys.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["dial.tsx"],
+	a11y: "The dial is the role=\"slider\" element (name it with aria-label or aria-labelledby), with aria-valuetext from `format`. Arrow keys step, PageUp/PageDown move a page, Home/End go to the ends. Dragging points the notch at the pointer; the wheel turns it only while it has focus, so it never steals page scroll. Clockwise means more in every language, so neither the dial nor its arrow keys mirror in right-to-left layouts. The knob's rotation settles instantly under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dial/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dial/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dial\",\n  title: \"Dial\",\n  description:\n    \"A rotary dial input — a knob inside a filling arc with detent ticks — turned by drag, wheel or keys.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"dial.tsx\"],\n  a11y:\n    'The dial is the role=\"slider\" element (name it with aria-label or aria-labelledby), with aria-valuetext ' +\n    \"from `format`. Arrow keys step, PageUp/PageDown move a page, Home/End go to the ends. Dragging points the \" +\n    \"notch at the pointer; the wheel turns it only while it has focus, so it never steals page scroll. \" +\n    \"Clockwise means more in every language, so neither the dial nor its arrow keys mirror in right-to-left \" +\n    \"layouts. The knob's rotation settles instantly under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,UAAU;CAClB,MACE;AAKJ,CAAC"}

package/dist/components/dialog/dialog.d.ts

@@ -17,8 +17,15 @@ declare function DialogOverlay({ className, ...props }: DialogOverlayProps): imp
 interface DialogContentProps extends ComponentPropsWithRef<typeof Dialog.Content> {
   /** Renders the built-in close button. Turn off to supply your own. */
   showCloseButton?: boolean;
+  /**
+   * How the dialog enters. `default` fades and rises into place. `spring` pops
+   * in with a slight overshoot and then brings its sections — header, body,
+   * footer — in one after another. Both stop under reduced motion, and both
+   * leave the same way.
+   */
+  animation?: "default" | "spring";
 }
-declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): import("react").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, animation, ...props }: DialogContentProps): import("react").JSX.Element;
 declare function DialogHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 declare function DialogFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 type DialogTitleProps = ComponentPropsWithRef<typeof Dialog.Title>;

package/dist/components/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../../src/components/dialog/dialog.tsx"],"mappings":";;;;;;;;;;cAea,0BAAM,GAAA,OAAA;cACN,+BAAa,0BAAA,OAAA,qCAAA,cAAA;cACb,8BAAY,GAAA,OAAA;cACZ,6BAAW,0BAAA,OAAA,mCAAA,cAAA;KAEZ,qBAAqB,6BAA6B,OAAgB;iBAE9D,gBAAgB,cAAc,SAAS,qCAAkB,IAAA;UAcxD,2BAA2B,6BACnC,OAAgB;;EAGvB;;iBAGc,gBACd,WACA,UACA,oBACG,SACF,qCAAkB,IAAA;iBAyCL,eAAe,cAAc,SAAS,+CAA4B,IAAA;iBAUlE,eAAe,cAAc,SAAS,+CAA4B,IAAA;KAUtE,mBAAmB,6BAA6B,OAAgB;iBAE5D,cAAc,cAAc,SAAS,mCAAgB,IAAA;KAUzD,yBAAyB,6BAA6B,OAAgB;iBAElE,oBAAoB,cAAc,SAAS,yCAAsB,IAAA"}
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../../src/components/dialog/dialog.tsx"],"mappings":";;;;;;;;;;cAgBa,0BAAM,GAAA,OAAA;cACN,+BAAa,0BAAA,OAAA,qCAAA,cAAA;cACb,8BAAY,GAAA,OAAA;cACZ,6BAAW,0BAAA,OAAA,mCAAA,cAAA;KAEZ,qBAAqB,6BAA6B,OAAgB;iBAE9D,gBAAgB,cAAc,SAAS,qCAAkB,IAAA;UAkCxD,2BAA2B,6BACnC,OAAgB;;EAGvB;;;;;;;EAOA;;iBAGc,gBACd,WACA,UACA,iBACA,cACG,SACF,qCAAkB,IAAA;iBAuDL,eAAe,cAAc,SAAS,+CAA4B,IAAA;iBAUlE,eAAe,cAAc,SAAS,+CAA4B,IAAA;KAUtE,mBAAmB,6BAA6B,OAAgB;iBAE5D,cAAc,cAAc,SAAS,mCAAgB,IAAA;KAUzD,yBAAyB,6BAA6B,OAAgB;iBAElE,oBAAoB,cAAc,SAAS,yCAAsB,IAAA"}

package/dist/components/dialog/dialog.js

@@ -2,7 +2,7 @@
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { Dialog } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/dialog/dialog.tsx
 /**
 * A modal window that interrupts the user to gather a response.
@@ -22,15 +22,32 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
+const PREFIX = "dowel-dialog";
+/** Each section of a spring dialog arrives 60ms after the one above it. */
+const STAGGER_STEP_MS = 60;
+const SPRING_CHILD = `[data-slot=dialog-content][data-animation=spring][data-state=open]>:not([data-slot=dialog-close])`;
+const STYLES = `
+@keyframes ${PREFIX}-spring-in{from{opacity:0;transform:translateY(.5rem) scale(.95)}}
+@keyframes ${PREFIX}-section-in{from{opacity:0;transform:translateY(8px)}}
+${SPRING_CHILD}{animation:${PREFIX}-section-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both}
+${Array.from({ length: 5 }, (_, i) => `${SPRING_CHILD}:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * STAGGER_STEP_MS)}ms * var(--motion-scale))}`).join("\n")}
+${SPRING_CHILD}:nth-child(n+${String(7)}){animation-delay:calc(${String(360)}ms * var(--motion-scale))}
+`;
+function DialogContent({ className, children, showCloseButton = true, animation = "default", ...props }) {
+	const spring = animation === "spring";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [spring ? /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}) : null, /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
 		"data-slot": "dialog-content",
-		className: cn("fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2", "grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl", "data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in", className),
+		"data-animation": spring ? "spring" : void 0,
+		className: cn("fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2", "grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl", "data-[state=closed]:animate-dialog-out", spring ? "data-[state=open]:animate-[dowel-dialog-spring-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]" : "data-[state=open]:animate-dialog-in", className),
 		...props,
 		children: [children, showCloseButton ? /* @__PURE__ */ jsx(Dialog.Close, {
 			"data-slot": "dialog-close",
 			"aria-label": "Close",
-			className: cn("absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", "[&_svg]:size-4", focusRing),
+			className: cn("absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", "[&_svg]:size-4", focusRing),
 			children: /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 24 24",
 				fill: "none",
@@ -43,12 +60,12 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 				})
 			})
 		}) : null]
-	})] });
+	})] })] });
 }
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-header",
-		className: cn("flex flex-col gap-1.5 pr-8 text-left", className),
+		className: cn("flex flex-col gap-1.5 pe-8 text-start", className),
 		...props
 	});
 }

package/dist/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A modal window that interrupts the user to gather a response.\n *\n * Focus is trapped while open, restored to the trigger on close, and the rest\n * of the page is hidden from assistive technology — all handled by the\n * underlying primitive rather than reimplemented here.\n */\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogOverlayProps = ComponentPropsWithRef<typeof DialogPrimitive.Overlay>;\n\nexport function DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-[2px]\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogContentProps extends ComponentPropsWithRef<\n  typeof DialogPrimitive.Content\n> {\n  /** Renders the built-in close button. Turn off to supply your own. */\n  showCloseButton?: boolean;\n}\n\nexport function DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2\",\n          \"grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl\",\n          \"data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            aria-label=\"Close\"\n            className={cn(\n              \"absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground\",\n              \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n              \"[&_svg]:size-4\",\n              focusRing,\n            )}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m6 6 12 12M18 6 6 18\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 pr-8 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogTitleProps = ComponentPropsWithRef<typeof DialogPrimitive.Title>;\n\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogDescriptionProps = ComponentPropsWithRef<typeof DialogPrimitive.Description>;\n\nexport function DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAaA,WAASC,OAAgB;AACtC,MAAa,gBAAgBA,OAAgB;AAC7C,MAAa,eAAeA,OAAgB;AAC5C,MAAa,cAAcA,OAAgB;AAI3C,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,qEACA,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAgB,cAAc,EAC5B,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;CACrB,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4GACA,yFACA,8EACA,SACF;EACA,GAAI;EARN,UAAA,CAUG,UACA,kBACC,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,cAAW;GACX,WAAW,GACT,0FACA,2FACA,kBACA,SACF;GAEA,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAC/C,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA;EACgB,CAAA,IACrB,IACmB;CACb,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CACjF,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Dialog and BasicModal (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A modal window that interrupts the user to gather a response.\n *\n * Focus is trapped while open, restored to the trigger on close, and the rest\n * of the page is hidden from assistive technology — all handled by the\n * underlying primitive rather than reimplemented here.\n */\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogOverlayProps = ComponentPropsWithRef<typeof DialogPrimitive.Overlay>;\n\nexport function DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-[2px]\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst PREFIX = \"dowel-dialog\";\n\n/** Each section of a spring dialog arrives 60ms after the one above it. */\nconst STAGGER_STEP_MS = 60;\nconst STAGGERED = 6;\n\nconst SPRING_CHILD = `[data-slot=dialog-content][data-animation=spring][data-state=open]>:not([data-slot=dialog-close])`;\n\nconst STYLES = `\n@keyframes ${PREFIX}-spring-in{from{opacity:0;transform:translateY(.5rem) scale(.95)}}\n@keyframes ${PREFIX}-section-in{from{opacity:0;transform:translateY(8px)}}\n${SPRING_CHILD}{animation:${PREFIX}-section-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both}\n${Array.from(\n  { length: STAGGERED - 1 },\n  (_, i) =>\n    `${SPRING_CHILD}:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * STAGGER_STEP_MS)}ms * var(--motion-scale))}`,\n).join(\"\\n\")}\n${SPRING_CHILD}:nth-child(n+${String(STAGGERED + 1)}){animation-delay:calc(${String(STAGGERED * STAGGER_STEP_MS)}ms * var(--motion-scale))}\n`;\n\nexport interface DialogContentProps extends ComponentPropsWithRef<\n  typeof DialogPrimitive.Content\n> {\n  /** Renders the built-in close button. Turn off to supply your own. */\n  showCloseButton?: boolean;\n  /**\n   * How the dialog enters. `default` fades and rises into place. `spring` pops\n   * in with a slight overshoot and then brings its sections — header, body,\n   * footer — in one after another. Both stop under reduced motion, and both\n   * leave the same way.\n   */\n  animation?: \"default\" | \"spring\";\n}\n\nexport function DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  animation = \"default\",\n  ...props\n}: DialogContentProps) {\n  const spring = animation === \"spring\";\n\n  return (\n    <>\n      {spring ? (\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n      ) : null}\n      <DialogPortal>\n        <DialogOverlay />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          data-animation={spring ? \"spring\" : undefined}\n          className={cn(\n            \"fixed top-1/2 left-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2\",\n            \"grid gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-xl\",\n            \"data-[state=closed]:animate-dialog-out\",\n            // Spelled out because Tailwind reads class names from the source.\n            spring\n              ? \"data-[state=open]:animate-[dowel-dialog-spring-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]\"\n              : \"data-[state=open]:animate-dialog-in\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {showCloseButton ? (\n            <DialogPrimitive.Close\n              data-slot=\"dialog-close\"\n              aria-label=\"Close\"\n              className={cn(\n                \"absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground\",\n                \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n                \"[&_svg]:size-4\",\n                focusRing,\n              )}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"m6 6 12 12M18 6 6 18\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                />\n              </svg>\n            </DialogPrimitive.Close>\n          ) : null}\n        </DialogPrimitive.Content>\n      </DialogPortal>\n    </>\n  );\n}\n\nexport function DialogHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 pe-8 text-start\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogTitleProps = ComponentPropsWithRef<typeof DialogPrimitive.Title>;\n\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogDescriptionProps = ComponentPropsWithRef<typeof DialogPrimitive.Description>;\n\nexport function DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAaA,WAASC,OAAgB;AACtC,MAAa,gBAAgBA,OAAgB;AAC7C,MAAa,eAAeA,OAAgB;AAC5C,MAAa,cAAcA,OAAgB;AAI3C,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,qEACA,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,SAAS;;AAGf,MAAM,kBAAkB;AAGxB,MAAM,eAAe;AAErB,MAAM,SAAS;aACF,OAAO;aACP,OAAO;EAClB,aAAa,aAAa,OAAO;EACjC,MAAM,KACN,EAAE,QAAQ,EAAc,IACvB,GAAG,MACF,GAAG,aAAa,aAAa,OAAO,IAAI,CAAC,EAAE,yBAAyB,QAAQ,IAAI,KAAK,eAAe,EAAE,2BAC1G,CAAC,CAAC,KAAK,IAAI,EAAE;EACX,aAAa,eAAe,OAAO,CAAa,EAAE,yBAAyB,OAAO,GAA2B,EAAE;;AAiBjH,SAAgB,cAAc,EAC5B,WACA,UACA,kBAAkB,MAClB,YAAY,WACZ,GAAG,SACkB;CACrB,MAAM,SAAS,cAAc;CAE7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,IACL,MACJ,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,kBAAgB,SAAS,WAAW,KAAA;EACpC,WAAW,GACT,4GACA,yFACA,0CAEA,SACI,6GACA,uCACJ,SACF;EACA,GAAI;EAbN,UAAA,CAeG,UACA,kBACC,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,cAAW;GACX,WAAW,GACT,wFACA,2FACA,kBACA,SACF;GAEA,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAC/C,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA;EACgB,CAAA,IACrB,IACmB;CACb,CAAA,CAAA,EAAA,CAAA,CACd,EAAA,CAAA;AAEN;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CACjF,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/dialog/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["dialog.tsx"],
-	a11y: "Focus is trapped while open and restored to the trigger on close; Escape and an overlay click dismiss. Always render a DialogTitle — it names the dialog for screen readers. Use DialogDescription, or aria-describedby, to explain consequential actions."
+	a11y: "Focus is trapped while open and restored to the trigger on close; Escape and an overlay click dismiss. Always render a DialogTitle — it names the dialog for screen readers. Use DialogDescription, or aria-describedby, to explain consequential actions. The optional spring entrance and section stagger stop under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/dialog/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dialog/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dialog\",\n  title: \"Dialog\",\n  description: \"A modal window that interrupts the user to gather a response.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"dialog.tsx\"],\n  a11y:\n    \"Focus is trapped while open and restored to the trigger on close; Escape and an overlay \" +\n    \"click dismiss. Always render a DialogTitle — it names the dialog for screen readers. \" +\n    \"Use DialogDescription, or aria-describedby, to explain consequential actions.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAGJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dialog/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dialog\",\n  title: \"Dialog\",\n  description: \"A modal window that interrupts the user to gather a response.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"dialog.tsx\"],\n  a11y:\n    \"Focus is trapped while open and restored to the trigger on close; Escape and an overlay \" +\n    \"click dismiss. Always render a DialogTitle — it names the dialog for screen readers. \" +\n    \"Use DialogDescription, or aria-describedby, to explain consequential actions. The \" +\n    \"optional spring entrance and section stagger stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAIJ,CAAC"}

package/dist/components/diff-viewer/diff-viewer.d.ts

@@ -30,8 +30,19 @@ interface DiffViewerProps extends Omit<ComponentPropsWithRef<"div">, "children">
   decisions?: Record<string, HunkDecision>;
   onDecision?: (hunkId: string, decision: HunkDecision) => void;
   children?: ReactNode;
+  /**
+   * Entrance for added lines. `wipe` draws each one in along the reading
+   * direction, a line after the other; context and removed lines were already
+   * there and do not move.
+   */
+  entrance?: "none" | "wipe";
+  /**
+   * Collapse a rejected hunk's lines. Its header and controls stay, so the
+   * decision can still be reversed, and the header says the lines are hidden.
+   */
+  collapseRejected?: boolean;
 }
-declare function DiffViewer({ className, hunks, label, view, decisions, onDecision, children, ...props }: DiffViewerProps): import("react").JSX.Element;
+declare function DiffViewer({ className, hunks, label, view, decisions, onDecision, children, entrance, collapseRejected, ...props }: DiffViewerProps): import("react").JSX.Element;
 /** Switches between unified and side-by-side. */
 declare function DiffViewerToolbar({ className, view, onViewChange, ...props }: Omit<ComponentPropsWithRef<"div">, "onChange"> & {
   view: "unified" | "split";

package/dist/components/diff-viewer/diff-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diff-viewer.d.ts","names":[],"sources":["../../../src/components/diff-viewer/diff-viewer.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;KA6BY;UAQK,wBAAwB,KAAK;EAC5C,OAAO;;EAEP;EACA;;EAEA,YAAY,eAAe;EAC3B,cAAc,gBAAgB,UAAU;EACxC,WAAW;;iBAGG,aACd,WACA,OACA,OACA,MACA,WACA,YACA,aACG,SACF,kCAAe,IAAA;;iBAmPF,oBACd,WACA,MACA,iBACG,SACF,KAAK;EACN;EACA,eAAe;oBAChB,IAAA"}
+{"version":3,"file":"diff-viewer.d.ts","names":[],"sources":["../../../src/components/diff-viewer/diff-viewer.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;KAsCY;UAQK,wBAAwB,KAAK;EAC5C,OAAO;;EAEP;EACA;;EAEA,YAAY,eAAe;EAC3B,cAAc,gBAAgB,UAAU;EACxC,WAAW;;;;;;EAMX;;;;;EAKA;;iBA8Bc,aACd,WACA,OACA,OACA,MACA,WACA,YACA,UACA,UACA,qBACG,SACF,kCAAe,IAAA;;iBA6UF,oBACd,WACA,MACA,iBACG,SACF,KAAK;EACN;EACA,eAAe;oBAChB,IAAA"}