@refine-studio/ui 0.0.0 → 0.2.0

package/dist/components/data-table/data-table.d.ts

@@ -0,0 +1,49 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { SortDirection, SortValue } from './sort-rows';
+import { TableHead } from '../table/table';
+export type { SortDirection } from './sort-rows';
+export interface DataTableSort {
+    columnId: string;
+    direction: SortDirection;
+}
+export interface DataTableColumn<T> {
+    id: string;
+    header: ReactNode;
+    cell: (row: T) => ReactNode;
+    cellClassName?: string;
+    defaultSortDirection?: SortDirection;
+    headClassName?: string;
+    numeric?: boolean;
+    sortValue?: (row: T) => SortValue;
+}
+interface TableHeadSortableProps extends ComponentProps<typeof TableHead> {
+    direction: SortDirection | null;
+    onSort: () => void;
+}
+/**
+ * A header cell whose label is a sort button; `direction` is null while another column holds the sort.
+ */
+export declare const TableHeadSortable: ({ children, className, direction, numeric, onSort, ...props }: TableHeadSortableProps) => import("react").JSX.Element;
+interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    getRowId: (row: T) => string;
+    'aria-label'?: string;
+    className?: string;
+    containerClassName?: string;
+    defaultExpanded?: string[];
+    defaultSort?: DataTableSort | null;
+    empty?: ReactNode;
+    expanded?: string[];
+    expandMultiple?: boolean;
+    footer?: ReactNode;
+    onExpandedChange?: (expanded: string[]) => void;
+    onSortChange?: (sort: DataTableSort) => void;
+    renderDetail?: (row: T) => ReactNode;
+    sort?: DataTableSort | null;
+    stickyHeader?: boolean;
+}
+/**
+ * Renders rows under sortable column headers; with `renderDetail`, each row gets a chevron that opens a full-width detail row beneath it.
+ */
+export declare const DataTable: <T>({ "aria-label": ariaLabel, className, columns, containerClassName, defaultExpanded, defaultSort, empty, expanded: controlledExpanded, expandMultiple, footer, getRowId, onExpandedChange, onSortChange, renderDetail, rows, sort: controlledSort, stickyHeader, }: DataTableProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,171 @@
+import { cn } from "../../lib/cn.js";
+import { RefineIconArrowDownSM, RefineIconArrowDownUp, RefineIconArrowUpSM, RefineIconChevronDown } from "../../icons/refine-icons.js";
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "../table/table.js";
+import { sortRows } from "./sort-rows.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useState } from "react";
+// src/components/data-table/data-table.tsx
+var SORT_ICON_BY_DIRECTION = {
+	ascending: RefineIconArrowUpSM,
+	descending: RefineIconArrowDownSM
+};
+/**
+* A header cell whose label is a sort button; `direction` is null while another column holds the sort.
+*/
+var TableHeadSortable = ({ children, className, direction, numeric, onSort, ...props }) => {
+	const Icon = direction ? SORT_ICON_BY_DIRECTION[direction] : RefineIconArrowDownUp;
+	return /* @__PURE__ */ jsx(TableHead, {
+		"aria-sort": direction ?? "none",
+		className,
+		"data-slot": "table-head-sortable",
+		numeric,
+		...props,
+		children: /* @__PURE__ */ jsxs("button", {
+			className: cn("group/sort gap-1 inline-flex items-center rounded-inner uppercase focus-ring transition-colors hover:text-foreground", direction && "text-foreground", numeric && "flex-row-reverse"),
+			onClick: onSort,
+			type: "button",
+			children: [children, /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": true,
+				className: cn("size-3.5 shrink-0 transition-opacity", !direction && "opacity-0 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60")
+			})]
+		})
+	});
+};
+/**
+* Returns the direction a first click on the column sorts in: text A→Z, numbers largest first, unless the column says otherwise.
+*/
+var firstDirection = (column) => {
+	return column.defaultSortDirection ?? (column.numeric ? "descending" : "ascending");
+};
+/**
+* Renders rows under sortable column headers; with `renderDetail`, each row gets a chevron that opens a full-width detail row beneath it.
+*/
+var DataTable = ({ "aria-label": ariaLabel, className, columns, containerClassName, defaultExpanded = [], defaultSort = null, empty = "Nothing to show.", expanded: controlledExpanded, expandMultiple = false, footer, getRowId, onExpandedChange, onSortChange, renderDetail, rows, sort: controlledSort, stickyHeader = false }) => {
+	const [uncontrolledSort, setUncontrolledSort] = useState(defaultSort);
+	const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+	const sort = controlledSort === void 0 ? uncontrolledSort : controlledSort;
+	const expanded = controlledExpanded ?? uncontrolledExpanded;
+	const isExpandable = !!renderDetail;
+	const columnCount = columns.length + (isExpandable ? 1 : 0);
+	const sortColumn = columns.find((column) => {
+		return column.id === sort?.columnId;
+	});
+	const sorted = sort && sortColumn?.sortValue ? sortRows(rows, sortColumn.sortValue, sort.direction) : rows;
+	/**
+	* Sorts by the column, flipping the direction when it already holds the sort.
+	*/
+	const handleSort = (column) => {
+		const isSameColumn = sort?.columnId === column.id;
+		let direction = firstDirection(column);
+		if (isSameColumn) direction = sort.direction === "ascending" ? "descending" : "ascending";
+		const next = {
+			columnId: column.id,
+			direction
+		};
+		if (controlledSort === void 0) setUncontrolledSort(next);
+		onSortChange?.(next);
+	};
+	/**
+	* Opens or closes one row; without `expandMultiple`, opening a row closes the one open before it.
+	*/
+	const handleToggle = (id) => {
+		const isOpen = expanded.includes(id);
+		let next = expandMultiple ? [...expanded, id] : [id];
+		if (isOpen) next = expanded.filter((openId) => {
+			return openId !== id;
+		});
+		if (controlledExpanded === void 0) setUncontrolledExpanded(next);
+		onExpandedChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs(Table, {
+		"aria-label": ariaLabel,
+		className,
+		containerClassName,
+		"data-slot": "data-table",
+		stickyHeader,
+		children: [
+			/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, {
+				hoverable: false,
+				children: [isExpandable ? /* @__PURE__ */ jsx(TableHead, {
+					className: "w-0 pr-0",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Details"
+					})
+				}) : null, columns.map((column) => {
+					if (!column.sortValue) return /* @__PURE__ */ jsx(TableHead, {
+						className: column.headClassName,
+						numeric: column.numeric,
+						children: column.header
+					}, column.id);
+					return /* @__PURE__ */ jsx(TableHeadSortable, {
+						className: column.headClassName,
+						direction: sort?.columnId === column.id ? sort.direction : null,
+						numeric: column.numeric,
+						onSort: () => {
+							handleSort(column);
+						},
+						children: column.header
+					}, column.id);
+				})]
+			}) }),
+			/* @__PURE__ */ jsxs(TableBody, { children: [sorted.length === 0 ? /* @__PURE__ */ jsx(TableRow, {
+				hoverable: false,
+				children: /* @__PURE__ */ jsx(TableCell, {
+					className: "h-24 text-center whitespace-normal text-muted-foreground",
+					colSpan: columnCount,
+					children: empty
+				})
+			}) : null, sorted.map((row) => {
+				const id = getRowId(row);
+				const isOpen = isExpandable && expanded.includes(id);
+				const detailId = `data-table-detail-${id}`;
+				const toggleLabel = isOpen ? "Hide details" : "Show details";
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(TableRow, {
+					"data-state": isOpen ? "selected" : void 0,
+					children: [isExpandable ? /* @__PURE__ */ jsx(TableCell, {
+						className: "w-0 pr-0",
+						children: /* @__PURE__ */ jsxs("button", {
+							"aria-controls": isOpen ? detailId : void 0,
+							"aria-expanded": isOpen,
+							className: "size-6 grid place-items-center rounded-inner text-muted-foreground focus-ring hover:bg-hover hover:text-foreground",
+							"data-slot": "data-table-toggle",
+							onClick: () => {
+								handleToggle(id);
+							},
+							title: toggleLabel,
+							type: "button",
+							children: [/* @__PURE__ */ jsx(RefineIconChevronDown, {
+								"aria-hidden": true,
+								className: cn("size-4 transition-transform", !isOpen && "-rotate-90")
+							}), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: toggleLabel
+							})]
+						})
+					}) : null, columns.map((column) => {
+						return /* @__PURE__ */ jsx(TableCell, {
+							className: column.cellClassName,
+							numeric: column.numeric,
+							children: column.cell(row)
+						}, column.id);
+					})]
+				}), isOpen ? /* @__PURE__ */ jsx(TableRow, {
+					className: "[&>td]:bg-gem/5",
+					"data-slot": "data-table-detail",
+					hoverable: false,
+					id: detailId,
+					children: /* @__PURE__ */ jsx(TableCell, {
+						className: "px-3 py-4 h-auto whitespace-normal",
+						colSpan: columnCount,
+						children: renderDetail(row)
+					})
+				}) : null] }, id);
+			})] }),
+			footer ? /* @__PURE__ */ jsx(TableFooter, { children: footer }) : null
+		]
+	});
+};
+export { DataTable, TableHeadSortable };
+
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","names":["Fragment"],"sources":["../../../src/components/data-table/data-table.tsx"],"sourcesContent":["import { type ComponentProps, Fragment, type ReactNode, useState } from 'react';\n\nimport {\n  RefineIconArrowDownSM,\n  RefineIconArrowDownUp,\n  RefineIconArrowUpSM,\n  RefineIconChevronDown,\n} from '../../icons/refine-icons';\nimport { cn } from '../../lib/cn';\nimport type { SortDirection, SortValue } from './sort-rows';\n\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '../table/table';\nimport { sortRows } from './sort-rows';\n\nexport type { SortDirection } from './sort-rows';\n\nexport interface DataTableSort {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport interface DataTableColumn<T> {\n  id: string;\n  header: ReactNode;\n  cell: (row: T) => ReactNode;\n  cellClassName?: string;\n  defaultSortDirection?: SortDirection;\n  headClassName?: string;\n  numeric?: boolean;\n  sortValue?: (row: T) => SortValue;\n}\n\nconst SORT_ICON_BY_DIRECTION = {\n  ascending: RefineIconArrowUpSM,\n  descending: RefineIconArrowDownSM,\n} satisfies Record<SortDirection, unknown>;\n\ninterface TableHeadSortableProps extends ComponentProps<typeof TableHead> {\n  direction: SortDirection | null;\n  onSort: () => void;\n}\n\n/**\n * A header cell whose label is a sort button; `direction` is null while another column holds the sort.\n */\nexport const TableHeadSortable = ({\n  children,\n  className,\n  direction,\n  numeric,\n  onSort,\n  ...props\n}: TableHeadSortableProps) => {\n  const Icon = direction ? SORT_ICON_BY_DIRECTION[direction] : RefineIconArrowDownUp;\n  return (\n    <TableHead\n      aria-sort={direction ?? 'none'}\n      className={className}\n      data-slot=\"table-head-sortable\"\n      numeric={numeric}\n      {...props}\n    >\n      <button\n        className={cn(\n          'group/sort gap-1 inline-flex items-center rounded-inner uppercase focus-ring transition-colors hover:text-foreground',\n          direction && 'text-foreground',\n          numeric && 'flex-row-reverse',\n        )}\n        onClick={onSort}\n        type=\"button\"\n      >\n        {children}\n        <Icon\n          aria-hidden\n          className={cn(\n            'size-3.5 shrink-0 transition-opacity',\n            !direction && 'opacity-0 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60',\n          )}\n        />\n      </button>\n    </TableHead>\n  );\n};\n\n/**\n * Returns the direction a first click on the column sorts in: text A→Z, numbers largest first, unless the column says otherwise.\n */\nconst firstDirection = <T,>(column: DataTableColumn<T>) => {\n  return column.defaultSortDirection ?? (column.numeric ? 'descending' : 'ascending');\n};\n\ninterface DataTableProps<T> {\n  columns: DataTableColumn<T>[];\n  rows: T[];\n  getRowId: (row: T) => string;\n  'aria-label'?: string;\n  className?: string;\n  containerClassName?: string;\n  defaultExpanded?: string[];\n  defaultSort?: DataTableSort | null;\n  empty?: ReactNode;\n  expanded?: string[];\n  expandMultiple?: boolean;\n  footer?: ReactNode;\n  onExpandedChange?: (expanded: string[]) => void;\n  onSortChange?: (sort: DataTableSort) => void;\n  renderDetail?: (row: T) => ReactNode;\n  sort?: DataTableSort | null;\n  stickyHeader?: boolean;\n}\n\n/**\n * Renders rows under sortable column headers; with `renderDetail`, each row gets a chevron that opens a full-width detail row beneath it.\n */\nexport const DataTable = <T,>({\n  'aria-label': ariaLabel,\n  className,\n  columns,\n  containerClassName,\n  defaultExpanded = [],\n  defaultSort = null,\n  empty = 'Nothing to show.',\n  expanded: controlledExpanded,\n  expandMultiple = false,\n  footer,\n  getRowId,\n  onExpandedChange,\n  onSortChange,\n  renderDetail,\n  rows,\n  sort: controlledSort,\n  stickyHeader = false,\n}: DataTableProps<T>) => {\n  const [uncontrolledSort, setUncontrolledSort] = useState(defaultSort);\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const sort = controlledSort === undefined ? uncontrolledSort : controlledSort;\n  const expanded = controlledExpanded ?? uncontrolledExpanded;\n  const isExpandable = !!renderDetail;\n  const columnCount = columns.length + (isExpandable ? 1 : 0);\n  const sortColumn = columns.find((column) => {\n    return column.id === sort?.columnId;\n  });\n  const sorted = sort && sortColumn?.sortValue ? sortRows(rows, sortColumn.sortValue, sort.direction) : rows;\n\n  /**\n   * Sorts by the column, flipping the direction when it already holds the sort.\n   */\n  const handleSort = (column: DataTableColumn<T>) => {\n    const isSameColumn = sort?.columnId === column.id;\n    let direction = firstDirection(column);\n    if (isSameColumn) direction = sort.direction === 'ascending' ? 'descending' : 'ascending';\n    const next = {\n      columnId: column.id,\n      direction,\n    };\n    if (controlledSort === undefined) setUncontrolledSort(next);\n    onSortChange?.(next);\n  };\n\n  /**\n   * Opens or closes one row; without `expandMultiple`, opening a row closes the one open before it.\n   */\n  const handleToggle = (id: string) => {\n    const isOpen = expanded.includes(id);\n    let next = expandMultiple ? [...expanded, id] : [id];\n    if (isOpen) {\n      next = expanded.filter((openId) => {\n        return openId !== id;\n      });\n    }\n    if (controlledExpanded === undefined) setUncontrolledExpanded(next);\n    onExpandedChange?.(next);\n  };\n\n  return (\n    <Table\n      aria-label={ariaLabel}\n      className={className}\n      containerClassName={containerClassName}\n      data-slot=\"data-table\"\n      stickyHeader={stickyHeader}\n    >\n      <TableHeader>\n        <TableRow hoverable={false}>\n          {isExpandable ? (\n            <TableHead className=\"w-0 pr-0\">\n              <span className=\"sr-only\">Details</span>\n            </TableHead>\n          ) : null}\n          {columns.map((column) => {\n            if (!column.sortValue) {\n              return (\n                <TableHead className={column.headClassName} key={column.id} numeric={column.numeric}>\n                  {column.header}\n                </TableHead>\n              );\n            }\n            return (\n              <TableHeadSortable\n                className={column.headClassName}\n                direction={sort?.columnId === column.id ? sort.direction : null}\n                key={column.id}\n                numeric={column.numeric}\n                onSort={() => {\n                  handleSort(column);\n                }}\n              >\n                {column.header}\n              </TableHeadSortable>\n            );\n          })}\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {sorted.length === 0 ? (\n          <TableRow hoverable={false}>\n            <TableCell className=\"h-24 text-center whitespace-normal text-muted-foreground\" colSpan={columnCount}>\n              {empty}\n            </TableCell>\n          </TableRow>\n        ) : null}\n        {sorted.map((row) => {\n          const id = getRowId(row);\n          const isOpen = isExpandable && expanded.includes(id);\n          const detailId = `data-table-detail-${id}`;\n          const toggleLabel = isOpen ? 'Hide details' : 'Show details';\n          return (\n            <Fragment key={id}>\n              <TableRow data-state={isOpen ? 'selected' : undefined}>\n                {isExpandable ? (\n                  <TableCell className=\"w-0 pr-0\">\n                    <button\n                      aria-controls={isOpen ? detailId : undefined}\n                      aria-expanded={isOpen}\n                      className=\"size-6 grid place-items-center rounded-inner text-muted-foreground focus-ring hover:bg-hover hover:text-foreground\"\n                      data-slot=\"data-table-toggle\"\n                      onClick={() => {\n                        handleToggle(id);\n                      }}\n                      title={toggleLabel}\n                      type=\"button\"\n                    >\n                      <RefineIconChevronDown\n                        aria-hidden\n                        className={cn('size-4 transition-transform', !isOpen && '-rotate-90')}\n                      />\n                      <span className=\"sr-only\">{toggleLabel}</span>\n                    </button>\n                  </TableCell>\n                ) : null}\n                {columns.map((column) => {\n                  return (\n                    <TableCell className={column.cellClassName} key={column.id} numeric={column.numeric}>\n                      {column.cell(row)}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n              {isOpen ? (\n                <TableRow className=\"[&>td]:bg-gem/5\" data-slot=\"data-table-detail\" hoverable={false} id={detailId}>\n                  <TableCell className=\"px-3 py-4 h-auto whitespace-normal\" colSpan={columnCount}>\n                    {renderDetail(row)}\n                  </TableCell>\n                </TableRow>\n              ) : null}\n            </Fragment>\n          );\n        })}\n      </TableBody>\n      {footer ? <TableFooter>{footer}</TableFooter> : null}\n    </Table>\n  );\n};\n"],"mappings":"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"}

package/dist/components/data-table/sort-rows.d.ts

@@ -0,0 +1,6 @@
+export type SortDirection = 'ascending' | 'descending';
+export type SortValue = Date | number | string | null | undefined;
+/**
+ * Returns a sorted copy of the rows; empty values go last in both directions, and ties keep their input order.
+ */
+export declare const sortRows: <T>(rows: T[], sortValue: (row: T) => SortValue, direction: SortDirection) => T[];

package/dist/components/data-table/sort-rows.js

@@ -0,0 +1,33 @@
+// src/components/data-table/sort-rows.ts
+/**
+* Compares two sort values ascending: numbers and dates by size, text by locale with digits read as numbers.
+*/
+var compareValues = (a, b) => {
+	if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	return String(a).localeCompare(String(b), void 0, {
+		numeric: true,
+		sensitivity: "base"
+	});
+};
+/**
+* Returns true for a value the table treats as empty, which always sorts last.
+*/
+var isEmptyValue = (value) => {
+	return value === null || value === void 0 || value === "";
+};
+/**
+* Returns a sorted copy of the rows; empty values go last in both directions, and ties keep their input order.
+*/
+var sortRows = (rows, sortValue, direction) => {
+	const sign = direction === "ascending" ? 1 : -1;
+	return [...rows].sort((rowA, rowB) => {
+		const a = sortValue(rowA);
+		const b = sortValue(rowB);
+		if (isEmptyValue(a) || isEmptyValue(b)) return Number(isEmptyValue(a)) - Number(isEmptyValue(b));
+		return compareValues(a, b) * sign;
+	});
+};
+export { sortRows };
+
+//# sourceMappingURL=sort-rows.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sort-rows.js","names":[],"sources":["../../../src/components/data-table/sort-rows.ts"],"sourcesContent":["export type SortDirection = 'ascending' | 'descending';\n\nexport type SortValue = Date | number | string | null | undefined;\n\n/**\n * Compares two sort values ascending: numbers and dates by size, text by locale with digits read as numbers.\n */\nconst compareValues = (a: SortValue, b: SortValue) => {\n  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();\n  if (typeof a === 'number' && typeof b === 'number') return a - b;\n  return String(a).localeCompare(String(b), undefined, {\n    numeric: true,\n    sensitivity: 'base',\n  });\n};\n\n/**\n * Returns true for a value the table treats as empty, which always sorts last.\n */\nconst isEmptyValue = (value: SortValue) => {\n  return value === null || value === undefined || value === '';\n};\n\n/**\n * Returns a sorted copy of the rows; empty values go last in both directions, and ties keep their input order.\n */\nexport const sortRows = <T>(rows: T[], sortValue: (row: T) => SortValue, direction: SortDirection) => {\n  const sign = direction === 'ascending' ? 1 : -1;\n  return [...rows].sort((rowA, rowB) => {\n    const a = sortValue(rowA);\n    const b = sortValue(rowB);\n    if (isEmptyValue(a) || isEmptyValue(b)) return Number(isEmptyValue(a)) - Number(isEmptyValue(b));\n    return compareValues(a, b) * sign;\n  });\n};\n"],"mappings":";;;;AAOA,IAAM,iBAAiB,GAAc,MAAiB;CACpD,IAAI,aAAa,QAAQ,aAAa,MAAM,OAAO,EAAE,QAAQ,IAAI,EAAE,QAAQ;CAC3E,IAAI,OAAO,MAAM,YAAY,OAAO,MAAM,UAAU,OAAO,IAAI;CAC/D,OAAO,OAAO,CAAC,CAAC,CAAC,cAAc,OAAO,CAAC,GAAG,KAAA,GAAW;EACnD,SAAS;EACT,aAAa;CACf,CAAC;AACH;;;;AAKA,IAAM,gBAAgB,UAAqB;CACzC,OAAO,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU;AAC5D;;;;AAKA,IAAa,YAAe,MAAW,WAAkC,cAA6B;CACpG,MAAM,OAAO,cAAc,cAAc,IAAI;CAC7C,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,MAAM,SAAS;EACpC,MAAM,IAAI,UAAU,IAAI;EACxB,MAAM,IAAI,UAAU,IAAI;EACxB,IAAI,aAAa,CAAC,KAAK,aAAa,CAAC,GAAG,OAAO,OAAO,aAAa,CAAC,CAAC,IAAI,OAAO,aAAa,CAAC,CAAC;EAC/F,OAAO,cAAc,GAAG,CAAC,IAAI;CAC/B,CAAC;AACH"}

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

@@ -0,0 +1,42 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const DIALOG_OVERLAY_CLASS_NAME: string;
+export declare const DIALOG_CLOSE_CLASS_NAME: string;
+declare const dialogContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Holds the open state of a modal dialog.
+ */
+export declare const Dialog: (props: ComponentProps<typeof DialogPrimitive.Root>) => import("react").JSX.Element;
+/**
+ * Opens the dialog; pass `asChild` to turn any button into the trigger.
+ */
+export declare const DialogTrigger: (props: ComponentProps<typeof DialogPrimitive.Trigger>) => import("react").JSX.Element;
+/**
+ * Closes the dialog; pass `asChild` to turn any button into the close action.
+ */
+export declare const DialogClose: (props: ComponentProps<typeof DialogPrimitive.Close>) => import("react").JSX.Element;
+interface DialogContentProps extends ComponentProps<typeof DialogPrimitive.Content>, VariantProps<typeof dialogContentVariants> {
+    showClose?: boolean;
+}
+/**
+ * Portals the dialog panel above a blurred scrim, with an optional corner close button.
+ */
+export declare const DialogContent: ({ children, className, showClose, size, ...props }: DialogContentProps) => import("react").JSX.Element;
+/**
+ * Stacks the title and description at the top of the panel.
+ */
+export declare const DialogHeader: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * Scrolls the dialog's main content when it outgrows the viewport.
+ */
+export declare const DialogBody: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * Right-aligns the dialog's actions, stacking them on narrow screens.
+ */
+export declare const DialogFooter: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export declare const DialogTitle: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => import("react").JSX.Element;
+export declare const DialogDescription: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => import("react").JSX.Element;
+export {};

package/dist/components/dialog/dialog.js

@@ -0,0 +1,118 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { RefineIconCloseMD } from "../../icons/refine-icons.js";
+import { Dialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/dialog/dialog.tsx
+var DIALOG_OVERLAY_CLASS_NAME = cn("fixed inset-0 z-50 bg-scrim backdrop-blur-sm", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0");
+var DIALOG_CLOSE_CLASS_NAME = cn("absolute top-4 right-4 inline-flex size-control-sm items-center justify-center rounded-control text-muted-foreground transition-colors focus-ring", "hover:bg-hover hover:text-foreground", "active:bg-pressed", "disabled:pointer-events-none disabled:opacity-45");
+var dialogContentVariants = cva([
+	"fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden",
+	"rounded-panel border bg-popover text-popover-foreground shadow-float outline-none",
+	"duration-200 ease-out-expo data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+], {
+	variants: { size: {
+		sm: "max-w-sm",
+		md: "max-w-lg",
+		lg: "max-w-2xl",
+		xl: "max-w-4xl",
+		full: "h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* Holds the open state of a modal dialog.
+*/
+var Dialog$1 = (props) => {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+};
+/**
+* Opens the dialog; pass `asChild` to turn any button into the trigger.
+*/
+var DialogTrigger = (props) => {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+};
+/**
+* Closes the dialog; pass `asChild` to turn any button into the close action.
+*/
+var DialogClose = (props) => {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+};
+/**
+* Portals the dialog panel above a blurred scrim, with an optional corner close button.
+*/
+var DialogContent = ({ children, className, showClose = true, size, ...props }) => {
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+		className: DIALOG_OVERLAY_CLASS_NAME,
+		"data-slot": "dialog-overlay"
+	}), /* @__PURE__ */ jsxs(Dialog.Content, {
+		className: cn(dialogContentVariants({ size }), className),
+		"data-slot": "dialog-content",
+		...props,
+		children: [children, showClose && /* @__PURE__ */ jsxs(Dialog.Close, {
+			className: DIALOG_CLOSE_CLASS_NAME,
+			title: "Close",
+			children: [/* @__PURE__ */ jsx(RefineIconCloseMD, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+};
+/**
+* Stacks the title and description at the top of the panel.
+*/
+var DialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-1.5 px-6 pt-6 pr-14", className),
+		"data-slot": "dialog-header",
+		...props
+	});
+};
+/**
+* Scrolls the dialog's main content when it outgrows the viewport.
+*/
+var DialogBody = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("min-h-0 flex-1 overflow-y-auto px-6 py-4 text-body-sm text-muted-foreground", className),
+		"data-slot": "dialog-body",
+		...props
+	});
+};
+/**
+* Right-aligns the dialog's actions, stacking them on narrow screens.
+*/
+var DialogFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col-reverse gap-2 border-t bg-muted/50 px-6 py-4 sm:flex-row sm:justify-end", className),
+		"data-slot": "dialog-footer",
+		...props
+	});
+};
+var DialogTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: cn("text-headline-sm text-foreground", className),
+		"data-slot": "dialog-title",
+		...props
+	});
+};
+var DialogDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: cn("text-body-sm text-muted-foreground", className),
+		"data-slot": "dialog-description",
+		...props
+	});
+};
+export { DIALOG_CLOSE_CLASS_NAME, DIALOG_OVERLAY_CLASS_NAME, Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
+
+//# sourceMappingURL=dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { RefineIconCloseMD } from '../../icons/refine-icons';\n\nexport const DIALOG_OVERLAY_CLASS_NAME = cn(\n  // base\n  'fixed inset-0 z-50 bg-scrim backdrop-blur-sm',\n  // animation\n  'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',\n);\n\nexport const DIALOG_CLOSE_CLASS_NAME = cn(\n  // base\n  'absolute top-4 right-4 inline-flex size-control-sm items-center justify-center rounded-control text-muted-foreground transition-colors focus-ring',\n  // hover\n  'hover:bg-hover hover:text-foreground',\n  // active\n  'active:bg-pressed',\n  // disabled\n  'disabled:pointer-events-none disabled:opacity-45',\n);\n\nconst dialogContentVariants = cva(\n  [\n    // base\n    'fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden',\n    'rounded-panel border bg-popover text-popover-foreground shadow-float outline-none',\n    // animation\n    'duration-200 ease-out-expo data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'max-w-sm',\n        md: 'max-w-lg',\n        lg: 'max-w-2xl',\n        xl: 'max-w-4xl',\n        full: 'h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\n/**\n * Holds the open state of a modal dialog.\n */\nexport const Dialog = (props: ComponentProps<typeof DialogPrimitive.Root>) => {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n};\n\n/**\n * Opens the dialog; pass `asChild` to turn any button into the trigger.\n */\nexport const DialogTrigger = (props: ComponentProps<typeof DialogPrimitive.Trigger>) => {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n};\n\n/**\n * Closes the dialog; pass `asChild` to turn any button into the close action.\n */\nexport const DialogClose = (props: ComponentProps<typeof DialogPrimitive.Close>) => {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n};\n\ninterface DialogContentProps\n  extends ComponentProps<typeof DialogPrimitive.Content>,\n    VariantProps<typeof dialogContentVariants> {\n  showClose?: boolean;\n}\n\n/**\n * Portals the dialog panel above a blurred scrim, with an optional corner close button.\n */\nexport const DialogContent = ({ children, className, showClose = true, size, ...props }: DialogContentProps) => {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay className={DIALOG_OVERLAY_CLASS_NAME} data-slot=\"dialog-overlay\" />\n      <DialogPrimitive.Content\n        className={cn(dialogContentVariants({ size }), className)}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close className={DIALOG_CLOSE_CLASS_NAME} title=\"Close\">\n            <RefineIconCloseMD className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n};\n\n/**\n * Stacks the title and description at the top of the panel.\n */\nexport const DialogHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-1.5 px-6 pt-6 pr-14', className)} data-slot=\"dialog-header\" {...props} />;\n};\n\n/**\n * Scrolls the dialog's main content when it outgrows the viewport.\n */\nexport const DialogBody = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4 text-body-sm text-muted-foreground', className)}\n      data-slot=\"dialog-body\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns the dialog's actions, stacking them on narrow screens.\n */\nexport const DialogFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col-reverse gap-2 border-t bg-muted/50 px-6 py-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      data-slot=\"dialog-footer\"\n      {...props}\n    />\n  );\n};\n\nexport const DialogTitle = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => {\n  return (\n    <DialogPrimitive.Title\n      className={cn('text-headline-sm text-foreground', className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n};\n\nexport const DialogDescription = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => {\n  return (\n    <DialogPrimitive.Description\n      className={cn('text-body-sm text-muted-foreground', className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,4BAA4B,GAEvC,gDAEA,yHACF;AAEA,IAAa,0BAA0B,GAErC,qJAEA,wCAEA,qBAEA,kDACF;AAEA,IAAM,wBAAwB,IAC5B;CAEE;CACA;CAEA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;CACR,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;AAKA,IAAaA,YAAU,UAAuD;CAC5E,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;;;;AAKA,IAAa,iBAAiB,UAA0D;CACtF,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;;;AAKA,IAAa,eAAe,UAAwD;CAClF,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;;;AAWA,IAAa,iBAAiB,EAAE,UAAU,WAAW,YAAY,MAAM,MAAM,GAAG,YAAgC;CAC9G,OACE,qBAACA,OAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,OAAgB,SAAjB;EAAyB,WAAW;EAA2B,aAAU;CAAkB,CAAA,GAC3F,qBAACA,OAAgB,SAAjB;EACE,WAAW,GAAG,sBAAsB,EAAE,KAAK,CAAC,GAAG,SAAS;EACxD,aAAU;EACV,GAAI;EAHN,UAAA,CAKG,UACA,aACC,qBAACA,OAAgB,OAAjB;GAAuB,WAAW;GAAyB,OAAM;GAAjE,UAAA,CACE,oBAAC,mBAAD,EAAmB,WAAU,SAAU,CAAA,GACvC,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CAChB;EAEF,CAAA,CAAA;CACH,CAAA,CAAA,EAAA,CAAA;AAE5B;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAmC;CAC9E,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,yCAAyC,SAAS;EAAG,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvH;;;;AAKA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAmC;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,+EAA+E,SAAS;EACtG,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAmC;CAC9E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,yFACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,OAAgB,OAAjB;EACE,WAAW,GAAG,oCAAoC,SAAS;EAC3D,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAgE;CAChH,OACE,oBAACA,OAAgB,aAAjB;EACE,WAAW,GAAG,sCAAsC,SAAS;EAC7D,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,45 @@
+import type { VariantProps } from 'class-variance-authority';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+import { menuItemVariants } from './menu-styles';
+/**
+ * Holds the open state of a menu of actions opened from a trigger.
+ */
+export declare const DropdownMenu: (props: ComponentProps<typeof DropdownMenuPrimitive.Root>) => import("react").JSX.Element;
+export declare const DropdownMenuTrigger: (props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) => import("react").JSX.Element;
+export declare const DropdownMenuGroup: (props: ComponentProps<typeof DropdownMenuPrimitive.Group>) => import("react").JSX.Element;
+export declare const DropdownMenuRadioGroup: (props: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) => import("react").JSX.Element;
+export declare const DropdownMenuSub: (props: ComponentProps<typeof DropdownMenuPrimitive.Sub>) => import("react").JSX.Element;
+/**
+ * Portals the menu panel next to its trigger.
+ */
+export declare const DropdownMenuContent: ({ className, sideOffset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content>) => import("react").JSX.Element;
+type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuPrimitive.Item> & VariantProps<typeof menuItemVariants>;
+/**
+ * Runs an action; the `danger` variant marks destructive ones.
+ */
+export declare const DropdownMenuItem: ({ className, inset, variant, ...props }: DropdownMenuItemProps) => import("react").JSX.Element;
+/**
+ * Toggles a setting and shows a check while it is on.
+ */
+export declare const DropdownMenuCheckboxItem: ({ children, className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => import("react").JSX.Element;
+/**
+ * Picks one option of its radio group and marks it with a dot.
+ */
+export declare const DropdownMenuRadioItem: ({ children, className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) => import("react").JSX.Element;
+export declare const DropdownMenuLabel: ({ className, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}) => import("react").JSX.Element;
+export declare const DropdownMenuSeparator: ({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Separator>) => import("react").JSX.Element;
+/**
+ * Right-aligns a keyboard shortcut hint inside an item.
+ */
+export declare const DropdownMenuShortcut: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
+/**
+ * Opens a nested menu and points at it with a chevron.
+ */
+export declare const DropdownMenuSubTrigger: ({ children, className, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}) => import("react").JSX.Element;
+export declare const DropdownMenuSubContent: ({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => import("react").JSX.Element;
+export {};