@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/data-display/data-table/data-table.d.mts

@@ -0,0 +1,32 @@
+import { CellAlign } from "../table/table.mjs";
+import "../table/index.mjs";
+import { ReactNode } from "react";
+//#region src/components/data-display/data-table/data-table.d.ts
+export type DataTableColumn<Row> = {
+  id: string;
+  header: string;
+  cell: (row: Row) => ReactNode;
+  align?: CellAlign;
+  sortable?: boolean;
+  hideable?: boolean;
+};
+export type DataTableSort = {
+  columnId: string;
+  direction: 'ascending' | 'descending';
+};
+type Props<Row> = {
+  label: string;
+  columns: ReadonlyArray<DataTableColumn<Row>>;
+  rows: readonly Row[];
+  getRowId: (row: Row) => string;
+  sort?: DataTableSort | null;
+  onSortChange?: (sort: DataTableSort | null) => void;
+  selectedIds?: readonly string[];
+  onSelectedIdsChange?: (ids: string[]) => void;
+  hiddenColumnIds?: readonly string[];
+  onHiddenColumnIdsChange?: (ids: string[]) => void;
+  emptyState?: ReactNode;
+};
+export declare const DataTable: <Row>({ label, columns, rows, getRowId, sort, onSortChange, selectedIds, onSelectedIdsChange, hiddenColumnIds, onHiddenColumnIdsChange, emptyState }: Props<Row>) => import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/data-display/data-table/data-table.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import { Button } from "../../buttons/button/button.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { Popover } from "../../overlays/popover/index.mjs";
+import { Checkbox } from "../../form/checkbox/checkbox.mjs";
+import { CheckboxGroup } from "../../form/checkbox-group/index.mjs";
+import { Table } from "../table/table.mjs";
+import data_table_module_default from "./data-table.module.mjs";
+import { clsx } from "clsx";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-display/data-table/data-table.tsx
+const NONE = [];
+const nextSort = (columnId, current) => {
+	if (current?.columnId !== columnId) return {
+		columnId,
+		direction: "ascending"
+	};
+	return current.direction === "ascending" ? {
+		columnId,
+		direction: "descending"
+	} : null;
+};
+const SortButton = ({ column, sort, onSortChange }) => {
+	const direction = sort?.columnId === column.id ? sort.direction : null;
+	return /* @__PURE__ */ jsxs("button", {
+		className: clsx(data_table_module_default.sortButton, column.align === "right" && data_table_module_default.alignRight, focus_ring_module_default.ringNoBorder),
+		onClick: () => {
+			onSortChange(nextSort(column.id, sort));
+		},
+		type: "button",
+		children: [column.header, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: clsx(data_table_module_default.sortIcon, direction === null && data_table_module_default.unsorted),
+			children: /* @__PURE__ */ jsx(ChevronIcon, {
+				direction: direction === "descending" ? "down" : "up",
+				size: "sm"
+			})
+		})]
+	});
+};
+const ColumnMenu = ({ columns, hiddenColumnIds, onHiddenColumnIdsChange }) => {
+	const messages = getMessages();
+	const titleId = useId();
+	const hideable = columns.filter((column) => column.hideable !== false);
+	const visible = hideable.filter((column) => !hiddenColumnIds.includes(column.id)).map((column) => column.id);
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		placement: "bottom-end",
+		role: "dialog",
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx(Button, {
+			...props,
+			color: "base",
+			size: "sm",
+			type: "button",
+			variant: "outline",
+			children: messages.dataTableColumns
+		}) }), /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsxs("div", {
+			...props,
+			"aria-labelledby": titleId,
+			className: data_table_module_default.columnMenu,
+			children: [/* @__PURE__ */ jsx("p", {
+				className: data_table_module_default.columnMenuTitle,
+				id: titleId,
+				children: messages.dataTableColumns
+			}), /* @__PURE__ */ jsx(CheckboxGroup.Root, {
+				"aria-labelledby": titleId,
+				name: `${titleId}-columns`,
+				onChange: (next) => {
+					onHiddenColumnIdsChange(hideable.map((column) => column.id).filter((id) => !next.includes(id)));
+				},
+				value: visible,
+				children: hideable.map((column) => /* @__PURE__ */ jsx(CheckboxGroup.Item, {
+					itemValue: column.id,
+					label: column.header
+				}, column.id))
+			})]
+		}) })]
+	});
+};
+const DataTable = ({ label, columns, rows, getRowId, sort = null, onSortChange, selectedIds = NONE, onSelectedIdsChange, hiddenColumnIds = NONE, onHiddenColumnIdsChange, emptyState }) => {
+	const messages = getMessages();
+	const rowHeaderId = useId();
+	const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
+	const rowIds = rows.map((row) => getRowId(row));
+	const selectedCount = rowIds.filter((id) => selectedIds.includes(id)).length;
+	const isSelectable = onSelectedIdsChange !== void 0;
+	const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: data_table_module_default.root,
+		children: [onHiddenColumnIdsChange === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			className: data_table_module_default.toolbar,
+			children: /* @__PURE__ */ jsx(ColumnMenu, {
+				columns,
+				hiddenColumnIds,
+				onHiddenColumnIdsChange
+			})
+		}), /* @__PURE__ */ jsxs(Table.Root, {
+			"aria-label": label,
+			children: [/* @__PURE__ */ jsx(Table.Head, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [isSelectable ? /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: rows.length > 0 && selectedCount === rows.length,
+				disabled: rows.length === 0,
+				indeterminate: selectedCount > 0 && selectedCount < rows.length,
+				label: messages.dataTableSelectAll,
+				labelHidden: true,
+				onChange: (checked) => {
+					onSelectedIdsChange(checked ? [.../* @__PURE__ */ new Set([...selectedIds, ...rowIds])] : selectedIds.filter((id) => !rowIds.includes(id)));
+				}
+			}) }) : null, visibleColumns.map((column) => {
+				const isSortable = column.sortable === true && onSortChange !== void 0;
+				return /* @__PURE__ */ jsx(Table.HeaderCell, {
+					align: column.align,
+					"aria-sort": isSortable ? sort?.columnId === column.id ? sort.direction : "none" : void 0,
+					children: isSortable ? /* @__PURE__ */ jsx(SortButton, {
+						column,
+						onSortChange,
+						sort
+					}) : column.header
+				}, column.id);
+			})] }) }), /* @__PURE__ */ jsx(Table.Body, { children: rows.length === 0 ? /* @__PURE__ */ jsx(Table.Row, { children: /* @__PURE__ */ jsx(Table.Cell, {
+				colSpan: columnCount,
+				children: emptyState
+			}) }) : rows.map((row, rowIndex) => {
+				const id = rowIds[rowIndex] ?? "";
+				const isSelected = selectedIds.includes(id);
+				const headerId = `${rowHeaderId}-${String(rowIndex)}`;
+				return /* @__PURE__ */ jsxs(Table.Row, {
+					selected: isSelected,
+					children: [isSelectable ? /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Checkbox, {
+						"aria-label": messages.dataTableSelectRow,
+						"aria-labelledby": `${headerId}-select ${headerId}`,
+						checked: isSelected,
+						id: `${headerId}-select`,
+						label: messages.dataTableSelectRow,
+						labelHidden: true,
+						onChange: (checked) => {
+							onSelectedIdsChange(checked ? [...selectedIds, id] : selectedIds.filter((value) => value !== id));
+						}
+					}) }) : null, visibleColumns.map((column, columnIndex) => columnIndex === 0 ? /* @__PURE__ */ jsx(Table.HeaderCell, {
+						align: column.align,
+						id: headerId,
+						scope: "row",
+						children: column.cell(row)
+					}, column.id) : /* @__PURE__ */ jsx(Table.Cell, {
+						align: column.align,
+						children: column.cell(row)
+					}, column.id))]
+				}, id);
+			}) })]
+		})]
+	});
+};
+//#endregion
+export { DataTable };

package/dist/components/data-display/data-table/data-table.module.mjs

@@ -0,0 +1,14 @@
+import './data-table.css';
+//#region src/components/data-display/data-table/data-table.module.css
+var data_table_module_default = {
+	"alignRight": "_1lzWCq_alignRight",
+	"columnMenu": "_1lzWCq_columnMenu",
+	"columnMenuTitle": "_1lzWCq_columnMenuTitle",
+	"root": "_1lzWCq_root",
+	"sortButton": "_1lzWCq_sortButton",
+	"sortIcon": "_1lzWCq_sortIcon",
+	"toolbar": "_1lzWCq_toolbar",
+	"unsorted": "_1lzWCq_unsorted"
+};
+//#endregion
+export { data_table_module_default as default };

package/dist/components/data-display/data-table/index.d.mts

@@ -0,0 +1,2 @@
+import { DataTable, DataTableColumn, DataTableSort } from "./data-table.mjs";
+export { DataTable, type DataTableColumn, type DataTableSort };

package/dist/components/data-display/data-table/index.mjs

@@ -0,0 +1 @@
+export { DataTable } from "./data-table.mjs";

package/dist/components/data-display/heading/heading.css

@@ -0,0 +1,99 @@
+@layer properties, theme, base;
+
+@layer components {
+  .mRyo7a_root {
+    font-weight: var(--font-weight-bold);
+  }
+
+  .mRyo7a_h1 {
+    font-size: var(--font-size-2xl);
+    line-height: var(--line-height-2xl);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-3xl);
+      line-height: var(--line-height-3xl);
+    }
+  }
+
+  .mRyo7a_h2 {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-2xl);
+      line-height: var(--line-height-2xl);
+    }
+  }
+
+  .mRyo7a_h3 {
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-xl);
+      line-height: var(--line-height-xl);
+    }
+  }
+
+  .mRyo7a_h4 {
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-md);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-lg);
+      line-height: var(--line-height-lg);
+    }
+  }
+
+  .mRyo7a_h5 {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-md);
+      line-height: var(--line-height-md);
+    }
+  }
+
+  .mRyo7a_h6 {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-sm);
+    }
+  }
+
+  .mRyo7a_clamp {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .mRyo7a_clamp1 {
+    -webkit-line-clamp: 1;
+  }
+
+  .mRyo7a_clamp2 {
+    -webkit-line-clamp: 2;
+  }
+
+  .mRyo7a_clamp3 {
+    -webkit-line-clamp: 3;
+  }
+
+  .mRyo7a_clamp4 {
+    -webkit-line-clamp: 4;
+  }
+
+  .mRyo7a_clamp5 {
+    -webkit-line-clamp: 5;
+  }
+
+  .mRyo7a_clamp6 {
+    -webkit-line-clamp: 6;
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/heading/heading.d.mts

@@ -4,6 +4,6 @@ type Props = {
   level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   lineClamp?: 1 | 2 | 3 | 4 | 5 | 6;
 } & Omit<HTMLAttributes<HTMLHeadingElement>, 'className' | 'style'>;
-declare const Heading: FC<Props>;
+export declare const Heading: FC<Props>;
 //#endregion
-export { Heading };
+export {};

package/dist/components/data-display/heading/heading.mjs

@@ -1,44 +1,45 @@
-import { cn } from "../../../helpers/cn.mjs";
+import heading_module_default from "./heading.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/heading/heading.tsx
 const LINE_CLAMP_CLASS = {
-	1: "line-clamp-1",
-	2: "line-clamp-2",
-	3: "line-clamp-3",
-	4: "line-clamp-4",
-	5: "line-clamp-5",
-	6: "line-clamp-6"
+	1: heading_module_default.clamp1,
+	2: heading_module_default.clamp2,
+	3: heading_module_default.clamp3,
+	4: heading_module_default.clamp4,
+	5: heading_module_default.clamp5,
+	6: heading_module_default.clamp6
 };
 const Heading = ({ children, level, lineClamp, ...rest }) => {
-	const lineClampClass = lineClamp === void 0 ? void 0 : LINE_CLAMP_CLASS[lineClamp];
+	const lineClampClass = lineClamp === void 0 ? void 0 : [heading_module_default.clamp, LINE_CLAMP_CLASS[lineClamp]];
 	if (level === "h1") return /* @__PURE__ */ jsx("h1", {
 		...rest,
-		className: cn("font-bold text-2xl md:text-3xl", lineClampClass),
+		className: clsx(heading_module_default.root, heading_module_default.h1, lineClampClass),
 		children
 	});
 	if (level === "h2") return /* @__PURE__ */ jsx("h2", {
 		...rest,
-		className: cn("font-bold text-xl md:text-2xl", lineClampClass),
+		className: clsx(heading_module_default.root, heading_module_default.h2, lineClampClass),
 		children
 	});
 	if (level === "h3") return /* @__PURE__ */ jsx("h3", {
 		...rest,
-		className: cn("font-bold text-lg md:text-xl", lineClampClass),
+		className: clsx(heading_module_default.root, heading_module_default.h3, lineClampClass),
 		children
 	});
 	if (level === "h4") return /* @__PURE__ */ jsx("h4", {
 		...rest,
-		className: cn("font-bold text-md md:text-lg", lineClampClass),
+		className: clsx(heading_module_default.root, heading_module_default.h4, lineClampClass),
 		children
 	});
 	if (level === "h5") return /* @__PURE__ */ jsx("h5", {
 		...rest,
-		className: cn("font-bold text-sm md:text-md", lineClampClass),
+		className: clsx(heading_module_default.root, heading_module_default.h5, lineClampClass),
 		children
 	});
 	return /* @__PURE__ */ jsx("h6", {
 		...rest,
-		className: cn("font-bold text-xs md:text-sm", lineClampClass),
+		className: clsx(heading_module_default.root, heading_module_default.h6, lineClampClass),
 		children
 	});
 };

package/dist/components/data-display/heading/heading.module.mjs

@@ -0,0 +1,20 @@
+import './heading.css';
+//#region src/components/data-display/heading/heading.module.css
+var heading_module_default = {
+	"clamp": "mRyo7a_clamp",
+	"clamp1": "mRyo7a_clamp1",
+	"clamp2": "mRyo7a_clamp2",
+	"clamp3": "mRyo7a_clamp3",
+	"clamp4": "mRyo7a_clamp4",
+	"clamp5": "mRyo7a_clamp5",
+	"clamp6": "mRyo7a_clamp6",
+	"h1": "mRyo7a_h1",
+	"h2": "mRyo7a_h2",
+	"h3": "mRyo7a_h3",
+	"h4": "mRyo7a_h4",
+	"h5": "mRyo7a_h5",
+	"h6": "mRyo7a_h6",
+	"root": "mRyo7a_root"
+};
+//#endregion
+export { heading_module_default as default };

package/dist/components/data-display/heading/index.mjs

@@ -1,2 +1 @@
-import { Heading } from "./heading.mjs";
-export { Heading };
+export { Heading } from "./heading.mjs";

package/dist/components/data-display/kbd/index.d.mts

@@ -0,0 +1,2 @@
+import { Kbd } from "./kbd.mjs";
+export { Kbd };

package/dist/components/data-display/kbd/index.mjs

@@ -0,0 +1 @@
+export { Kbd } from "./kbd.mjs";

package/dist/components/data-display/kbd/kbd.css

@@ -0,0 +1,21 @@
+@layer properties, theme, base;
+
+@layer components {
+  .GSXgjq_root {
+    min-width: calc(var(--spacing) * 6);
+    border: 1px solid var(--color-border-mute);
+    border-radius: var(--radius-md);
+    background-color: var(--color-bg-subtle);
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * .5);
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-none);
+    border-bottom-width: 2px;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/kbd/kbd.d.mts

@@ -0,0 +1,9 @@
+import { FC, HTMLAttributes } from "react";
+//#region src/components/data-display/kbd/kbd.d.ts
+type Props = {
+  children: string;
+  label?: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>;
+export declare const Kbd: FC<Props>;
+//#endregion
+export {};

package/dist/components/data-display/kbd/kbd.mjs

@@ -0,0 +1,17 @@
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
+import kbd_module_default from "./kbd.module.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-display/kbd/kbd.tsx
+const Kbd = ({ children, label, ...rest }) => /* @__PURE__ */ jsx("kbd", {
+	...rest,
+	className: kbd_module_default.root,
+	children: label === void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children
+	}), /* @__PURE__ */ jsx("span", {
+		className: sr_only_module_default.srOnly,
+		children: label
+	})] })
+});
+//#endregion
+export { Kbd };

package/dist/components/data-display/kbd/kbd.module.mjs

@@ -0,0 +1,5 @@
+import './kbd.css';
+//#region src/components/data-display/kbd/kbd.module.css
+var kbd_module_default = { "root": "GSXgjq_root" };
+//#endregion
+export { kbd_module_default as default };

package/dist/components/data-display/prose/index.d.mts

@@ -0,0 +1,2 @@
+import { Prose } from "./prose.mjs";
+export { Prose };

package/dist/components/data-display/prose/index.mjs

@@ -0,0 +1 @@
+export { Prose } from "./prose.mjs";