@jbpark/ui-kit 10.0.2 → 10.2.0

package/dist/Pagination.mjs

@@ -0,0 +1,208 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import Input from "./components/atoms/input/index.mjs";
+import Select from "./components/atoms/select.mjs";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/pagination.tsx
+const clampPage = (page, pageCount) => Math.min(Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1), Math.max(1, pageCount));
+const normalizePageSize = (value) => Number.isFinite(value) && value >= 1 ? Math.floor(value) : 10;
+const getPageItems = (page, pageCount, siblingCount, boundaryCount) => {
+	if (pageCount === 0) return [];
+	const pages = /* @__PURE__ */ new Set();
+	for (let index = 1; index <= boundaryCount && index <= pageCount; index++) {
+		pages.add(index);
+		pages.add(pageCount - index + 1);
+	}
+	for (let index = Math.max(1, page - siblingCount); index <= Math.min(pageCount, page + siblingCount); index++) pages.add(index);
+	const sorted = [...pages].sort((a, b) => a - b);
+	const items = [];
+	let previous = 0;
+	for (const current of sorted) {
+		const gap = current - previous;
+		if (gap === 2) items.push(previous + 1);
+		else if (gap > 2) items.push("start-ellipsis");
+		items.push(current);
+		previous = current;
+	}
+	const finalGap = pageCount - previous;
+	if (finalGap === 1) items.push(pageCount);
+	else if (finalGap > 1) items.push("end-ellipsis");
+	return items;
+};
+const Pagination = ({ total, pageSize, defaultPageSize = 10, onPageSizeChange, pageSizeOptions = [
+	10,
+	20,
+	50,
+	100
+], showSizeChanger = false, showTotal, showQuickJumper = false, page, defaultPage = 1, onChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, hideOnSinglePage = false, getPageHref, disabled = false, size, labels, className, classNames, "aria-label": ariaLabel, ...props }) => {
+	const { componentSize, direction } = useConfig();
+	const safeTotal = Number.isFinite(total) ? Math.max(0, Math.floor(total)) : 0;
+	const [internalPageSize, setInternalPageSize] = useState(() => normalizePageSize(defaultPageSize));
+	const safePageSize = normalizePageSize(pageSize ?? internalPageSize);
+	const pageCount = Math.ceil(safeTotal / safePageSize);
+	const [jumpValue, setJumpValue] = useState("");
+	const [internal, setInternal] = useState({
+		page: clampPage(defaultPage, pageCount),
+		pageCount
+	});
+	if (page === void 0 && internal.pageCount !== pageCount) setInternal({
+		page: clampPage(internal.page, pageCount),
+		pageCount
+	});
+	const currentPage = clampPage(page ?? internal.page, pageCount);
+	const resolvedSize = size ?? componentSize ?? "middle";
+	const items = getPageItems(currentPage, pageCount, Number.isFinite(siblingCount) ? Math.max(0, Math.floor(siblingCount)) : 1, Number.isFinite(boundaryCount) ? Math.max(0, Math.floor(boundaryCount)) : 1);
+	const sizeOptions = Array.from(new Set([...pageSizeOptions, safePageSize].filter((value) => Number.isInteger(value) && value > 0))).sort((a, b) => a - b);
+	const range = safeTotal === 0 ? [0, 0] : [(currentPage - 1) * safePageSize + 1, Math.min(currentPage * safePageSize, safeTotal)];
+	const goToPage = (next) => {
+		if (disabled || pageCount === 0 || next < 1 || next > pageCount || next === currentPage) return;
+		if (page === void 0) setInternal({
+			page: next,
+			pageCount
+		});
+		onChange?.(next);
+	};
+	const changePageSize = (next) => {
+		if (disabled || next === safePageSize) return;
+		if (pageSize === void 0) setInternalPageSize(next);
+		if (page === void 0) setInternal({
+			page: 1,
+			pageCount: Math.ceil(safeTotal / next)
+		});
+		onPageSizeChange?.(next);
+		if (currentPage !== 1) onChange?.(1);
+	};
+	const jumpToPage = (event) => {
+		event.preventDefault();
+		if (!/^\d+$/.test(jumpValue.trim())) return;
+		const next = Number(jumpValue.trim());
+		if (!Number.isSafeInteger(next) || next < 1 || next > pageCount) return;
+		goToPage(next);
+		setJumpValue("");
+	};
+	const handlePageClick = (next, event) => {
+		if (getPageHref && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)) return;
+		if (getPageHref && next === currentPage) event.preventDefault();
+		goToPage(next);
+	};
+	const linkProps = (target, isDisabled) => getPageHref && !isDisabled ? {
+		render: /* @__PURE__ */ jsx("a", { href: getPageHref(target) }),
+		nativeButton: false,
+		role: "link"
+	} : {};
+	if (hideOnSinglePage && pageCount <= 1) return null;
+	return /* @__PURE__ */ jsxs("nav", {
+		...props,
+		"data-slot": "pagination",
+		"aria-label": ariaLabel ?? labels?.navigation ?? "Pagination",
+		className: cn("flex flex-wrap items-center gap-1", className),
+		children: [
+			showTotal && /* @__PURE__ */ jsx("span", {
+				"data-slot": "pagination-total",
+				className: cn("text-muted-foreground me-2 text-sm", classNames?.total),
+				children: showTotal(safeTotal, range)
+			}),
+			showFirstLast && /* @__PURE__ */ jsx(Button, {
+				...linkProps(1, disabled || pageCount === 0 || currentPage === 1),
+				icon: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronsRight, {}) : /* @__PURE__ */ jsx(ChevronsLeft, {}),
+				size: resolvedSize,
+				variant: "outlined",
+				"aria-label": labels?.first ?? "First page",
+				disabled: disabled || pageCount === 0 || currentPage === 1,
+				className: cn(classNames?.item, classNames?.first),
+				onClick: (event) => handlePageClick(1, event)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				...linkProps(currentPage - 1, disabled || pageCount === 0 || currentPage === 1),
+				icon: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronRight, {}) : /* @__PURE__ */ jsx(ChevronLeft, {}),
+				size: resolvedSize,
+				variant: "outlined",
+				"aria-label": labels?.previous ?? "Previous page",
+				disabled: disabled || pageCount === 0 || currentPage === 1,
+				className: cn(classNames?.item, classNames?.previous),
+				onClick: (event) => handlePageClick(currentPage - 1, event)
+			}),
+			items.map((item, index) => typeof item === "number" ? /* @__PURE__ */ jsx(Button, {
+				...linkProps(item, disabled),
+				size: resolvedSize,
+				variant: item === currentPage ? "solid" : "outlined",
+				color: item === currentPage ? "primary" : "default",
+				"aria-current": item === currentPage ? "page" : void 0,
+				"aria-label": labels?.page?.(item) ?? `Page ${item}`,
+				disabled,
+				className: cn("min-w-8", classNames?.item, item === currentPage && classNames?.active),
+				onClick: (event) => handlePageClick(item, event),
+				children: item
+			}, item) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(`text-muted-foreground inline-flex min-w-6 items-center
+                justify-center`, classNames?.ellipsis),
+				children: "…"
+			}, `${item}-${index}`)),
+			/* @__PURE__ */ jsx(Button, {
+				...linkProps(currentPage + 1, disabled || pageCount === 0 || currentPage === pageCount),
+				icon: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronLeft, {}) : /* @__PURE__ */ jsx(ChevronRight, {}),
+				size: resolvedSize,
+				variant: "outlined",
+				"aria-label": labels?.next ?? "Next page",
+				disabled: disabled || pageCount === 0 || currentPage === pageCount,
+				className: cn(classNames?.item, classNames?.next),
+				onClick: (event) => handlePageClick(currentPage + 1, event)
+			}),
+			showFirstLast && /* @__PURE__ */ jsx(Button, {
+				...linkProps(pageCount, disabled || pageCount === 0 || currentPage === pageCount),
+				icon: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronsLeft, {}) : /* @__PURE__ */ jsx(ChevronsRight, {}),
+				size: resolvedSize,
+				variant: "outlined",
+				"aria-label": labels?.last ?? "Last page",
+				disabled: disabled || pageCount === 0 || currentPage === pageCount,
+				className: cn(classNames?.item, classNames?.last),
+				onClick: (event) => handlePageClick(pageCount, event)
+			}),
+			showSizeChanger && /* @__PURE__ */ jsx("div", {
+				"data-slot": "pagination-size-changer",
+				className: cn("ms-2 min-w-24", classNames?.sizeChanger),
+				children: /* @__PURE__ */ jsx(Select, {
+					value: String(safePageSize),
+					options: sizeOptions.map((value) => ({
+						value: String(value),
+						label: `${value} / page`
+					})),
+					onChange: (value) => changePageSize(Number(value)),
+					disabled,
+					"aria-label": labels?.pageSize ?? "Items per page"
+				})
+			}),
+			showQuickJumper && /* @__PURE__ */ jsxs("form", {
+				"data-slot": "pagination-jumper",
+				className: cn("ms-2 flex items-center gap-1", classNames?.jumper),
+				onSubmit: jumpToPage,
+				noValidate: true,
+				children: [/* @__PURE__ */ jsx(Input, {
+					type: "text",
+					inputMode: "numeric",
+					autoComplete: "off",
+					"aria-label": labels?.jump ?? "Jump to page",
+					value: jumpValue,
+					onChange: (event) => setJumpValue(event.target.value),
+					disabled: disabled || pageCount === 0,
+					className: "w-16"
+				}), /* @__PURE__ */ jsx(Button, {
+					htmlType: "submit",
+					size: resolvedSize,
+					variant: "outlined",
+					disabled: disabled || pageCount === 0,
+					children: labels?.go ?? "Go"
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { Pagination as default };
+
+//# sourceMappingURL=Pagination.mjs.map

package/dist/Pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.mjs","names":[],"sources":["../src/components/molecules/pagination.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport {\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n} from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport Input from '../atoms/input';\nimport Select from '../atoms/select';\n\ntype PageItem = number | 'start-ellipsis' | 'end-ellipsis';\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'nav'>,\n  'children' | 'onChange'\n> {\n  /** Total number of items, not pages. */\n  total: number;\n  /** Controlled number of items per page. */\n  pageSize?: number;\n  defaultPageSize?: number;\n  onPageSizeChange?: (pageSize: number) => void;\n  pageSizeOptions?: number[];\n  showSizeChanger?: boolean;\n  /** Render the total and the 1-based inclusive range of visible items. */\n  showTotal?: (total: number, range: [number, number]) => React.ReactNode;\n  showQuickJumper?: boolean;\n  /** 1-based controlled page. */\n  page?: number;\n  defaultPage?: number;\n  onChange?: (page: number) => void;\n  siblingCount?: number;\n  boundaryCount?: number;\n  showFirstLast?: boolean;\n  hideOnSinglePage?: boolean;\n  /** Render available page controls as links to these URLs. */\n  getPageHref?: (page: number) => string;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  labels?: {\n    navigation?: string;\n    page?: (page: number) => string;\n    previous?: string;\n    next?: string;\n    first?: string;\n    last?: string;\n    pageSize?: string;\n    jump?: string;\n    go?: string;\n  };\n  classNames?: {\n    item?: string;\n    active?: string;\n    previous?: string;\n    next?: string;\n    first?: string;\n    last?: string;\n    ellipsis?: string;\n    total?: string;\n    sizeChanger?: string;\n    jumper?: string;\n  };\n}\n\nconst clampPage = (page: number, pageCount: number) =>\n  Math.min(\n    Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1),\n    Math.max(1, pageCount),\n  );\n\nconst normalizePageSize = (value: number) =>\n  Number.isFinite(value) && value >= 1 ? Math.floor(value) : 10;\n\nconst getPageItems = (\n  page: number,\n  pageCount: number,\n  siblingCount: number,\n  boundaryCount: number,\n): PageItem[] => {\n  if (pageCount === 0) {\n    return [];\n  }\n\n  const pages = new Set<number>();\n\n  for (let index = 1; index <= boundaryCount && index <= pageCount; index++) {\n    pages.add(index);\n    pages.add(pageCount - index + 1);\n  }\n\n  for (\n    let index = Math.max(1, page - siblingCount);\n    index <= Math.min(pageCount, page + siblingCount);\n    index++\n  ) {\n    pages.add(index);\n  }\n\n  const sorted = [...pages].sort((a, b) => a - b);\n  const items: PageItem[] = [];\n  let previous = 0;\n\n  for (const current of sorted) {\n    const gap = current - previous;\n\n    if (gap === 2) {\n      items.push(previous + 1);\n    } else if (gap > 2) {\n      items.push('start-ellipsis');\n    }\n\n    items.push(current);\n    previous = current;\n  }\n\n  const finalGap = pageCount - previous;\n\n  if (finalGap === 1) {\n    items.push(pageCount);\n  } else if (finalGap > 1) {\n    items.push('end-ellipsis');\n  }\n\n  return items;\n};\n\nconst Pagination = ({\n  total,\n  pageSize,\n  defaultPageSize = 10,\n  onPageSizeChange,\n  pageSizeOptions = [10, 20, 50, 100],\n  showSizeChanger = false,\n  showTotal,\n  showQuickJumper = false,\n  page,\n  defaultPage = 1,\n  onChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showFirstLast = false,\n  hideOnSinglePage = false,\n  getPageHref,\n  disabled = false,\n  size,\n  labels,\n  className,\n  classNames,\n  'aria-label': ariaLabel,\n  ...props\n}: Props) => {\n  const { componentSize, direction } = useConfig();\n  const safeTotal = Number.isFinite(total) ? Math.max(0, Math.floor(total)) : 0;\n  const [internalPageSize, setInternalPageSize] = useState(() =>\n    normalizePageSize(defaultPageSize),\n  );\n  const safePageSize = normalizePageSize(pageSize ?? internalPageSize);\n  const pageCount = Math.ceil(safeTotal / safePageSize);\n  const [jumpValue, setJumpValue] = useState('');\n  const [internal, setInternal] = useState({\n    page: clampPage(defaultPage, pageCount),\n    pageCount,\n  });\n\n  // React retries this render with the adjusted state when the available\n  // range changes. Controlled callers still own their page prop.\n  if (page === undefined && internal.pageCount !== pageCount) {\n    setInternal({ page: clampPage(internal.page, pageCount), pageCount });\n  }\n\n  const currentPage = clampPage(page ?? internal.page, pageCount);\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const safeSiblingCount = Number.isFinite(siblingCount)\n    ? Math.max(0, Math.floor(siblingCount))\n    : 1;\n  const safeBoundaryCount = Number.isFinite(boundaryCount)\n    ? Math.max(0, Math.floor(boundaryCount))\n    : 1;\n  const items = getPageItems(\n    currentPage,\n    pageCount,\n    safeSiblingCount,\n    safeBoundaryCount,\n  );\n  const sizeOptions = Array.from(\n    new Set(\n      [...pageSizeOptions, safePageSize].filter(\n        value => Number.isInteger(value) && value > 0,\n      ),\n    ),\n  ).sort((a, b) => a - b);\n  const range: [number, number] =\n    safeTotal === 0\n      ? [0, 0]\n      : [\n          (currentPage - 1) * safePageSize + 1,\n          Math.min(currentPage * safePageSize, safeTotal),\n        ];\n\n  const goToPage = (next: number) => {\n    if (\n      disabled ||\n      pageCount === 0 ||\n      next < 1 ||\n      next > pageCount ||\n      next === currentPage\n    ) {\n      return;\n    }\n\n    if (page === undefined) {\n      setInternal({ page: next, pageCount });\n    }\n\n    onChange?.(next);\n  };\n\n  const changePageSize = (next: number) => {\n    if (disabled || next === safePageSize) {\n      return;\n    }\n\n    if (pageSize === undefined) {\n      setInternalPageSize(next);\n    }\n\n    if (page === undefined) {\n      setInternal({ page: 1, pageCount: Math.ceil(safeTotal / next) });\n    }\n\n    onPageSizeChange?.(next);\n\n    if (currentPage !== 1) {\n      onChange?.(1);\n    }\n  };\n\n  const jumpToPage = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    if (!/^\\d+$/.test(jumpValue.trim())) {\n      return;\n    }\n\n    const next = Number(jumpValue.trim());\n\n    if (!Number.isSafeInteger(next) || next < 1 || next > pageCount) {\n      return;\n    }\n\n    goToPage(next);\n    setJumpValue('');\n  };\n\n  const handlePageClick = (next: number, event: React.MouseEvent) => {\n    if (\n      getPageHref &&\n      (event.metaKey ||\n        event.ctrlKey ||\n        event.shiftKey ||\n        event.altKey ||\n        event.button !== 0)\n    ) {\n      return;\n    }\n\n    if (getPageHref && next === currentPage) {\n      event.preventDefault();\n    }\n\n    goToPage(next);\n  };\n\n  const linkProps = (target: number, isDisabled: boolean) =>\n    getPageHref && !isDisabled\n      ? {\n          render: <a href={getPageHref(target)} />,\n          nativeButton: false,\n          role: 'link',\n        }\n      : {};\n\n  if (hideOnSinglePage && pageCount <= 1) {\n    return null;\n  }\n\n  return (\n    <nav\n      {...props}\n      data-slot=\"pagination\"\n      aria-label={ariaLabel ?? labels?.navigation ?? 'Pagination'}\n      className={cn(\n        'flex flex-wrap items-center gap-1',\n        className,\n        //\n      )}\n    >\n      {showTotal && (\n        <span\n          data-slot=\"pagination-total\"\n          className={cn(\n            'text-muted-foreground me-2 text-sm',\n            classNames?.total,\n            //\n          )}\n        >\n          {showTotal(safeTotal, range)}\n        </span>\n      )}\n      {showFirstLast && (\n        <Button\n          {...linkProps(1, disabled || pageCount === 0 || currentPage === 1)}\n          icon={direction === 'rtl' ? <ChevronsRight /> : <ChevronsLeft />}\n          size={resolvedSize}\n          variant=\"outlined\"\n          aria-label={labels?.first ?? 'First page'}\n          disabled={disabled || pageCount === 0 || currentPage === 1}\n          className={cn(\n            classNames?.item,\n            classNames?.first,\n            //\n          )}\n          onClick={event => handlePageClick(1, event)}\n        />\n      )}\n      <Button\n        {...linkProps(\n          currentPage - 1,\n          disabled || pageCount === 0 || currentPage === 1,\n        )}\n        icon={direction === 'rtl' ? <ChevronRight /> : <ChevronLeft />}\n        size={resolvedSize}\n        variant=\"outlined\"\n        aria-label={labels?.previous ?? 'Previous page'}\n        disabled={disabled || pageCount === 0 || currentPage === 1}\n        className={cn(\n          classNames?.item,\n          classNames?.previous,\n          //\n        )}\n        onClick={event => handlePageClick(currentPage - 1, event)}\n      />\n      {items.map((item, index) =>\n        typeof item === 'number' ? (\n          <Button\n            key={item}\n            {...linkProps(item, disabled)}\n            size={resolvedSize}\n            variant={item === currentPage ? 'solid' : 'outlined'}\n            color={item === currentPage ? 'primary' : 'default'}\n            aria-current={item === currentPage ? 'page' : undefined}\n            aria-label={labels?.page?.(item) ?? `Page ${item}`}\n            disabled={disabled}\n            className={cn(\n              'min-w-8',\n              classNames?.item,\n              item === currentPage && classNames?.active,\n              //\n            )}\n            onClick={event => handlePageClick(item, event)}\n          >\n            {item}\n          </Button>\n        ) : (\n          <span\n            key={`${item}-${index}`}\n            aria-hidden=\"true\"\n            className={cn(\n              `text-muted-foreground inline-flex min-w-6 items-center\n                justify-center`,\n              classNames?.ellipsis,\n              //\n            )}\n          >\n            …\n          </span>\n        ),\n      )}\n      <Button\n        {...linkProps(\n          currentPage + 1,\n          disabled || pageCount === 0 || currentPage === pageCount,\n        )}\n        icon={direction === 'rtl' ? <ChevronLeft /> : <ChevronRight />}\n        size={resolvedSize}\n        variant=\"outlined\"\n        aria-label={labels?.next ?? 'Next page'}\n        disabled={disabled || pageCount === 0 || currentPage === pageCount}\n        className={cn(\n          classNames?.item,\n          classNames?.next,\n          //\n        )}\n        onClick={event => handlePageClick(currentPage + 1, event)}\n      />\n      {showFirstLast && (\n        <Button\n          {...linkProps(\n            pageCount,\n            disabled || pageCount === 0 || currentPage === pageCount,\n          )}\n          icon={direction === 'rtl' ? <ChevronsLeft /> : <ChevronsRight />}\n          size={resolvedSize}\n          variant=\"outlined\"\n          aria-label={labels?.last ?? 'Last page'}\n          disabled={disabled || pageCount === 0 || currentPage === pageCount}\n          className={cn(\n            classNames?.item,\n            classNames?.last,\n            //\n          )}\n          onClick={event => handlePageClick(pageCount, event)}\n        />\n      )}\n      {showSizeChanger && (\n        <div\n          data-slot=\"pagination-size-changer\"\n          className={cn(\n            'ms-2 min-w-24',\n            classNames?.sizeChanger,\n            //\n          )}\n        >\n          <Select\n            value={String(safePageSize)}\n            options={sizeOptions.map(value => ({\n              value: String(value),\n              label: `${value} / page`,\n            }))}\n            onChange={value => changePageSize(Number(value))}\n            disabled={disabled}\n            aria-label={labels?.pageSize ?? 'Items per page'}\n          />\n        </div>\n      )}\n      {showQuickJumper && (\n        <form\n          data-slot=\"pagination-jumper\"\n          className={cn(\n            'ms-2 flex items-center gap-1',\n            classNames?.jumper,\n            //\n          )}\n          onSubmit={jumpToPage}\n          noValidate\n        >\n          <Input\n            type=\"text\"\n            inputMode=\"numeric\"\n            autoComplete=\"off\"\n            aria-label={labels?.jump ?? 'Jump to page'}\n            value={jumpValue}\n            onChange={event => setJumpValue(event.target.value)}\n            disabled={disabled || pageCount === 0}\n            className=\"w-16\"\n          />\n          <Button\n            htmlType=\"submit\"\n            size={resolvedSize}\n            variant=\"outlined\"\n            disabled={disabled || pageCount === 0}\n          >\n            {labels?.go ?? 'Go'}\n          </Button>\n        </form>\n      )}\n    </nav>\n  );\n};\n\nexport default Pagination;\n"],"mappings":"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"}

package/dist/Segmented.d.mts

@@ -0,0 +1,26 @@
+import { ComponentSize } from "./providers/config/types.mjs";
+import * as React$1 from "react";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/atoms/segmented.d.ts
+interface Option {
+  label: string;
+  value: string;
+  icon?: React$1.ReactNode;
+  disabled?: boolean;
+}
+interface Props extends Omit<ToggleGroup.Props, 'children' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'multiple'> {
+  options: readonly (string | Option)[];
+  value?: string;
+  defaultValue?: string;
+  /** Clicking the selected item keeps it selected. */
+  onChange?: (value: string) => void;
+  size?: ComponentSize;
+  classNames?: {
+    item?: string;
+    activeItem?: string;
+  };
+}
+declare const Segmented: ({ options, value, defaultValue, onChange, size, className, classNames, disabled, orientation, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { Option, Props, Segmented as default };
+//# sourceMappingURL=Segmented.d.mts.map

package/dist/Segmented.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.d.mts","names":[],"sources":["../src/components/atoms/segmented.tsx"],"mappings":";;;;UAUiB;EACf;EACA;EACA,OAAO,QAAM;EACb;;UASe,cAAc,KAC7B,YAAY;EAGZ,4BAA4B;EAC5B;EACA;;EAEA,YAAY;EACZ,OAAO;EACP;IACE;IACA;;;cAIE,cAAa,SAAA,OAAA,cAAA,UAAA,MAAA,WAAA,YAAA,UAAA,gBAAA,SAWhB,UAAK,QAAA,IAAA"}

package/dist/Segmented.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/atoms/segmented.tsx
+const sizeClasses = {
+	small: "min-h-7 px-2 text-xs",
+	middle: "min-h-8 px-3 text-sm",
+	large: "min-h-10 px-4 text-base"
+};
+const Segmented = ({ options, value, defaultValue, onChange, size, className, classNames, disabled, orientation = "horizontal", ...props }) => {
+	const normalizedOptions = options.map((option) => typeof option === "string" ? {
+		label: option,
+		value: option,
+		disabled: false,
+		icon: null
+	} : option);
+	const firstEnabled = normalizedOptions.find((option) => !option.disabled)?.value;
+	const [internalValue, setInternalValue] = React$1.useState(defaultValue ?? firstEnabled);
+	const selectedValue = value !== void 0 ? value : internalValue;
+	const { componentSize } = useConfig();
+	const resolvedSize = size ?? componentSize ?? "middle";
+	const handleValueChange = (values) => {
+		const nextValue = values[0];
+		if (nextValue === void 0 || nextValue === selectedValue) return;
+		if (value === void 0) setInternalValue(nextValue);
+		onChange?.(nextValue);
+	};
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		...props,
+		"data-slot": "segmented",
+		disabled,
+		orientation,
+		value: selectedValue === void 0 ? [] : [selectedValue],
+		onValueChange: handleValueChange,
+		className: cn(`bg-muted inline-flex w-fit gap-0.5 rounded-lg p-1
+        data-[orientation=vertical]:flex-col`, className),
+		children: normalizedOptions.map((option) => /* @__PURE__ */ jsxs(Toggle, {
+			value: option.value,
+			disabled: option.disabled,
+			className: cn(`text-muted-foreground hover:text-foreground
+            focus-visible:ring-ring/50 data-pressed:bg-background
+            data-pressed:text-foreground inline-flex items-center justify-center
+            gap-1.5 rounded-md font-medium whitespace-nowrap outline-none
+            focus-visible:ring-[3px] disabled:cursor-not-allowed
+            disabled:opacity-50 data-pressed:shadow-xs`, sizeClasses[resolvedSize], classNames?.item, selectedValue === option.value && classNames?.activeItem),
+			children: [option.icon, option.label]
+		}, option.value))
+	});
+};
+//#endregion
+export { Segmented as default };
+
+//# sourceMappingURL=Segmented.mjs.map

package/dist/Segmented.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.mjs","names":["React"],"sources":["../src/components/atoms/segmented.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Toggle } from '@base-ui/react/toggle';\nimport { ToggleGroup } from '@base-ui/react/toggle-group';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nexport interface Option {\n  label: string;\n  value: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nconst sizeClasses: Record<ComponentSize, string> = {\n  small: 'min-h-7 px-2 text-xs',\n  middle: 'min-h-8 px-3 text-sm',\n  large: 'min-h-10 px-4 text-base',\n};\n\nexport interface Props extends Omit<\n  ToggleGroup.Props,\n  'children' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'multiple'\n> {\n  options: readonly (string | Option)[];\n  value?: string;\n  defaultValue?: string;\n  /** Clicking the selected item keeps it selected. */\n  onChange?: (value: string) => void;\n  size?: ComponentSize;\n  classNames?: {\n    item?: string;\n    activeItem?: string;\n  };\n}\n\nconst Segmented = ({\n  options,\n  value,\n  defaultValue,\n  onChange,\n  size,\n  className,\n  classNames,\n  disabled,\n  orientation = 'horizontal',\n  ...props\n}: Props) => {\n  const normalizedOptions = options.map(option =>\n    typeof option === 'string'\n      ? { label: option, value: option, disabled: false, icon: null }\n      : option,\n  );\n  const firstEnabled = normalizedOptions.find(\n    option => !option.disabled,\n  )?.value;\n  const [internalValue, setInternalValue] = React.useState(\n    defaultValue ?? firstEnabled,\n  );\n  const selectedValue = value !== undefined ? value : internalValue;\n  const { componentSize } = useConfig();\n  const resolvedSize = size ?? componentSize ?? 'middle';\n\n  const handleValueChange = (values: string[]) => {\n    const nextValue = values[0];\n\n    if (nextValue === undefined || nextValue === selectedValue) {\n      return;\n    }\n\n    if (value === undefined) {\n      setInternalValue(nextValue);\n    }\n\n    onChange?.(nextValue);\n  };\n\n  return (\n    <ToggleGroup\n      {...props}\n      data-slot=\"segmented\"\n      disabled={disabled}\n      orientation={orientation}\n      value={selectedValue === undefined ? [] : [selectedValue]}\n      onValueChange={handleValueChange}\n      className={cn(\n        `bg-muted inline-flex w-fit gap-0.5 rounded-lg p-1\n        data-[orientation=vertical]:flex-col`,\n        className,\n        //\n      )}\n    >\n      {normalizedOptions.map(option => (\n        <Toggle\n          key={option.value}\n          value={option.value}\n          disabled={option.disabled}\n          className={cn(\n            `text-muted-foreground hover:text-foreground\n            focus-visible:ring-ring/50 data-pressed:bg-background\n            data-pressed:text-foreground inline-flex items-center justify-center\n            gap-1.5 rounded-md font-medium whitespace-nowrap outline-none\n            focus-visible:ring-[3px] disabled:cursor-not-allowed\n            disabled:opacity-50 data-pressed:shadow-xs`,\n            sizeClasses[resolvedSize],\n            classNames?.item,\n            selectedValue === option.value && classNames?.activeItem,\n            //\n          )}\n        >\n          {option.icon}\n          {option.label}\n        </Toggle>\n      ))}\n    </ToggleGroup>\n  );\n};\n\nexport default Segmented;\n"],"mappings":";;;;;;;;AAiBA,MAAM,cAA6C;CACjD,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAkBA,MAAM,aAAa,EACjB,SACA,OACA,cACA,UACA,MACA,WACA,YACA,UACA,cAAc,cACd,GAAG,YACQ;CACX,MAAM,oBAAoB,QAAQ,KAAI,WACpC,OAAO,WAAW,WACd;EAAE,OAAO;EAAQ,OAAO;EAAQ,UAAU;EAAO,MAAM;CAAK,IAC5D,MACN;CACA,MAAM,eAAe,kBAAkB,MACrC,WAAU,CAAC,OAAO,QACpB,CAAC,EAAE;CACH,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAC9C,gBAAgB,YAClB;CACA,MAAM,gBAAgB,UAAU,KAAA,IAAY,QAAQ;CACpD,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,eAAe,QAAQ,iBAAiB;CAE9C,MAAM,qBAAqB,WAAqB;EAC9C,MAAM,YAAY,OAAO;EAEzB,IAAI,cAAc,KAAA,KAAa,cAAc,eAC3C;EAGF,IAAI,UAAU,KAAA,GACZ,iBAAiB,SAAS;EAG5B,WAAW,SAAS;CACtB;CAEA,OACE,oBAAC,aAAD;EACE,GAAI;EACJ,aAAU;EACA;EACG;EACb,OAAO,kBAAkB,KAAA,IAAY,CAAC,IAAI,CAAC,aAAa;EACxD,eAAe;EACf,WAAW,GACT;+CAEA,SAEF;EAEC,UAAA,kBAAkB,KAAI,WACrB,qBAAC,QAAD;GAEE,OAAO,OAAO;GACd,UAAU,OAAO;GACjB,WAAW,GACT;;;;;yDAMA,YAAY,eACZ,YAAY,MACZ,kBAAkB,OAAO,SAAS,YAAY,UAEhD;GAfF,UAAA,CAiBG,OAAO,MACP,OAAO,KACF;EAlBD,GAAA,OAAO,KAkBN,CACT;CACU,CAAA;AAEjB"}

package/dist/Steps.d.mts

@@ -0,0 +1,28 @@
+import * as React$1 from "react";
+//#region src/components/molecules/steps.d.ts
+interface Item {
+  key?: React$1.Key;
+  title: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  icon?: React$1.ReactNode;
+  /** Mark a failed step regardless of its position. */
+  status?: 'error';
+}
+interface Props extends Omit<React$1.ComponentPropsWithoutRef<'nav'>, 'children'> {
+  items: readonly Item[];
+  /** Zero-based index of the current step. */
+  current?: number;
+  orientation?: 'horizontal' | 'vertical';
+  classNames?: {
+    list?: string;
+    item?: string;
+    indicator?: string;
+    title?: string;
+    description?: string;
+    connector?: string;
+  };
+}
+declare const Steps: ({ items, current, orientation, className, classNames, dir, "aria-label": ariaLabel, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { Item, Props, Steps as default };
+//# sourceMappingURL=Steps.d.mts.map

package/dist/Steps.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.d.mts","names":[],"sources":["../src/components/molecules/steps.tsx"],"mappings":";;UASiB;EACf,MAAM,QAAM;EACZ,OAAO,QAAM;EACb,cAAc,QAAM;EACpB,OAAO,QAAM;;EAEb;;UAGe,cAAc,KAC7B,QAAM;EAGN,gBAAgB;;EAEhB;EACA;EACA;IACE;IACA;IACA;IACA;IACA;IACA;;;cAIE,UAAS,OAAA,SAAA,aAAA,WAAA,YAAA,mBAAA,cAAA,SASZ,UAAK,QAAA,IAAA"}

package/dist/Steps.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import { Check, TriangleAlert } from "lucide-react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/steps.tsx
+const Steps = ({ items, current = 0, orientation = "horizontal", className, classNames, dir, "aria-label": ariaLabel, ...props }) => {
+	const { direction } = useConfig();
+	const currentIndex = items.length ? Math.min(Math.max(Number.isFinite(current) ? Math.floor(current) : 0, 0), items.length - 1) : -1;
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		"data-slot": "steps",
+		"data-orientation": orientation,
+		dir: dir ?? direction,
+		"aria-label": ariaLabel ?? "Progress",
+		className: cn("w-full", className),
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-slot": "steps-list",
+			className: cn("m-0 flex list-none p-0", orientation === "vertical" && "flex-col", classNames?.list),
+			children: items.map((item, index) => {
+				const status = item.status === "error" ? "error" : index < currentIndex ? "complete" : index === currentIndex ? "current" : "upcoming";
+				return /* @__PURE__ */ jsxs("li", {
+					"data-slot": "steps-item",
+					"data-status": status,
+					"aria-current": index === currentIndex ? "step" : void 0,
+					className: cn("m-0 flex min-w-0", orientation === "horizontal" ? "flex-1 items-start" : "flex-col", classNames?.item),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-start gap-2.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							"data-slot": "steps-indicator",
+							"aria-hidden": "true",
+							className: cn(`border-border text-muted-foreground flex size-7 shrink-0
+                    items-center justify-center rounded-full border text-sm
+                    font-medium`, status === "complete" && "border-primary bg-primary text-primary-foreground", status === "current" && "border-primary text-primary", status === "error" && `border-destructive bg-destructive
+                      text-destructive-foreground`, classNames?.indicator),
+							children: item.icon ?? (status === "complete" ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : status === "error" ? /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }) : index + 1)
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "min-w-0",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									"data-slot": "steps-title",
+									className: cn("block text-sm font-medium", status === "upcoming" ? "text-muted-foreground" : status === "error" ? "text-destructive" : "text-foreground", classNames?.title),
+									children: item.title
+								}),
+								item.description != null && /* @__PURE__ */ jsx("span", {
+									"data-slot": "steps-description",
+									className: cn("text-muted-foreground block text-xs", classNames?.description),
+									children: item.description
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: status === "complete" ? "Completed" : status === "current" ? "Current step" : status === "error" ? "Error" : "Upcoming"
+								})
+							]
+						})]
+					}), index < items.length - 1 && /* @__PURE__ */ jsx("span", {
+						"data-slot": "steps-connector",
+						"aria-hidden": "true",
+						className: cn("bg-border shrink-0", orientation === "horizontal" ? "mx-3 mt-3.5 h-px min-w-3 flex-1" : "my-2 ms-3.5 h-7 w-px", index < currentIndex && "bg-primary", classNames?.connector)
+					})]
+				}, item.key ?? index);
+			})
+		})
+	});
+};
+//#endregion
+export { Steps as default };
+
+//# sourceMappingURL=Steps.mjs.map

package/dist/Steps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.mjs","names":[],"sources":["../src/components/molecules/steps.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Check, TriangleAlert } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nexport interface Item {\n  key?: React.Key;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  /** Mark a failed step regardless of its position. */\n  status?: 'error';\n}\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'nav'>,\n  'children'\n> {\n  items: readonly Item[];\n  /** Zero-based index of the current step. */\n  current?: number;\n  orientation?: 'horizontal' | 'vertical';\n  classNames?: {\n    list?: string;\n    item?: string;\n    indicator?: string;\n    title?: string;\n    description?: string;\n    connector?: string;\n  };\n}\n\nconst Steps = ({\n  items,\n  current = 0,\n  orientation = 'horizontal',\n  className,\n  classNames,\n  dir,\n  'aria-label': ariaLabel,\n  ...props\n}: Props) => {\n  const { direction } = useConfig();\n  const currentIndex = items.length\n    ? Math.min(\n        Math.max(Number.isFinite(current) ? Math.floor(current) : 0, 0),\n        items.length - 1,\n      )\n    : -1;\n\n  return (\n    <nav\n      {...props}\n      data-slot=\"steps\"\n      data-orientation={orientation}\n      dir={dir ?? direction}\n      aria-label={ariaLabel ?? 'Progress'}\n      className={cn('w-full', className)}\n    >\n      <ol\n        data-slot=\"steps-list\"\n        className={cn(\n          'm-0 flex list-none p-0',\n          orientation === 'vertical' && 'flex-col',\n          classNames?.list,\n          //\n        )}\n      >\n        {items.map((item, index) => {\n          const status =\n            item.status === 'error'\n              ? 'error'\n              : index < currentIndex\n                ? 'complete'\n                : index === currentIndex\n                  ? 'current'\n                  : 'upcoming';\n          const isCurrent = index === currentIndex;\n\n          return (\n            <li\n              key={item.key ?? index}\n              data-slot=\"steps-item\"\n              data-status={status}\n              aria-current={isCurrent ? 'step' : undefined}\n              className={cn(\n                'm-0 flex min-w-0',\n                orientation === 'horizontal'\n                  ? 'flex-1 items-start'\n                  : 'flex-col',\n                classNames?.item,\n                //\n              )}\n            >\n              <div className=\"flex min-w-0 items-start gap-2.5\">\n                <span\n                  data-slot=\"steps-indicator\"\n                  aria-hidden=\"true\"\n                  className={cn(\n                    `border-border text-muted-foreground flex size-7 shrink-0\n                    items-center justify-center rounded-full border text-sm\n                    font-medium`,\n                    status === 'complete' &&\n                      'border-primary bg-primary text-primary-foreground',\n                    status === 'current' && 'border-primary text-primary',\n                    status === 'error' &&\n                      `border-destructive bg-destructive\n                      text-destructive-foreground`,\n                    classNames?.indicator,\n                    //\n                  )}\n                >\n                  {item.icon ??\n                    (status === 'complete' ? (\n                      <Check className=\"size-4\" />\n                    ) : status === 'error' ? (\n                      <TriangleAlert className=\"size-4\" />\n                    ) : (\n                      index + 1\n                    ))}\n                </span>\n                <span className=\"min-w-0\">\n                  <span\n                    data-slot=\"steps-title\"\n                    className={cn(\n                      'block text-sm font-medium',\n                      status === 'upcoming'\n                        ? 'text-muted-foreground'\n                        : status === 'error'\n                          ? 'text-destructive'\n                          : 'text-foreground',\n                      classNames?.title,\n                      //\n                    )}\n                  >\n                    {item.title}\n                  </span>\n                  {item.description != null && (\n                    <span\n                      data-slot=\"steps-description\"\n                      className={cn(\n                        'text-muted-foreground block text-xs',\n                        classNames?.description,\n                      )}\n                    >\n                      {item.description}\n                    </span>\n                  )}\n                  <span className=\"sr-only\">\n                    {status === 'complete'\n                      ? 'Completed'\n                      : status === 'current'\n                        ? 'Current step'\n                        : status === 'error'\n                          ? 'Error'\n                          : 'Upcoming'}\n                  </span>\n                </span>\n              </div>\n              {index < items.length - 1 && (\n                <span\n                  data-slot=\"steps-connector\"\n                  aria-hidden=\"true\"\n                  className={cn(\n                    'bg-border shrink-0',\n                    orientation === 'horizontal'\n                      ? 'mx-3 mt-3.5 h-px min-w-3 flex-1'\n                      : 'my-2 ms-3.5 h-7 w-px',\n                    index < currentIndex && 'bg-primary',\n                    classNames?.connector,\n                    //\n                  )}\n                />\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default Steps;\n"],"mappings":";;;;;;;AAoCA,MAAM,SAAS,EACb,OACA,UAAU,GACV,cAAc,cACd,WACA,YACA,KACA,cAAc,WACd,GAAG,YACQ;CACX,MAAM,EAAE,cAAc,UAAU;CAChC,MAAM,eAAe,MAAM,SACvB,KAAK,IACH,KAAK,IAAI,OAAO,SAAS,OAAO,IAAI,KAAK,MAAM,OAAO,IAAI,GAAG,CAAC,GAC9D,MAAM,SAAS,CACjB,IACA;CAEJ,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,oBAAkB;EAClB,KAAK,OAAO;EACZ,cAAY,aAAa;EACzB,WAAW,GAAG,UAAU,SAAS;EAEjC,UAAA,oBAAC,MAAD;GACE,aAAU;GACV,WAAW,GACT,0BACA,gBAAgB,cAAc,YAC9B,YAAY,IAEd;GAEC,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,SACJ,KAAK,WAAW,UACZ,UACA,QAAQ,eACN,aACA,UAAU,eACR,YACA;IAGV,OACE,qBAAC,MAAD;KAEE,aAAU;KACV,eAAa;KACb,gBAPc,UAAU,eAOE,SAAS,KAAA;KACnC,WAAW,GACT,oBACA,gBAAgB,eACZ,uBACA,YACJ,YAAY,IAEd;KAZF,UAAA,CAcE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,QAAD;OACE,aAAU;OACV,eAAY;OACZ,WAAW,GACT;;kCAGA,WAAW,cACT,qDACF,WAAW,aAAa,+BACxB,WAAW,WACT;oDAEF,YAAY,SAEd;OAEC,UAAA,KAAK,SACH,WAAW,aACV,oBAAC,OAAD,EAAO,WAAU,SAAU,CAAA,IACzB,WAAW,UACb,oBAAC,eAAD,EAAe,WAAU,SAAU,CAAA,IAEnC,QAAQ;MAER,CAAA,GACN,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA;QACE,oBAAC,QAAD;SACE,aAAU;SACV,WAAW,GACT,6BACA,WAAW,aACP,0BACA,WAAW,UACT,qBACA,mBACN,YAAY,KAEd;SAEC,UAAA,KAAK;QACF,CAAA;QACL,KAAK,eAAe,QACnB,oBAAC,QAAD;SACE,aAAU;SACV,WAAW,GACT,uCACA,YAAY,WACd;SAEC,UAAA,KAAK;QACF,CAAA;QAER,oBAAC,QAAD;SAAM,WAAU;SACb,UAAA,WAAW,aACR,cACA,WAAW,YACT,iBACA,WAAW,UACT,UACA;QACJ,CAAA;OACF;MACH,CAAA,CAAA;KACJ,CAAA,GAAA,QAAQ,MAAM,SAAS,KACtB,oBAAC,QAAD;MACE,aAAU;MACV,eAAY;MACZ,WAAW,GACT,sBACA,gBAAgB,eACZ,oCACA,wBACJ,QAAQ,gBAAgB,cACxB,YAAY,SAEd;KACD,CAAA,CAED;IA7FG,GAAA,KAAK,OAAO,KA6Ff;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

package/dist/Table.d.mts

@@ -0,0 +1,48 @@
+import { Props as Props$1 } from "./Pagination.mjs";
+//#region src/components/organisms/table.d.ts
+type PaginationOptions = Omit<Props$1, 'total'> & ({
+  mode?: 'client';
+  total?: never;
+} | {
+  mode: 'server';
+  total: number;
+});
+interface Column<T> {
+  key: React.Key;
+  title: React.ReactNode;
+  /** Field displayed when render is omitted. */
+  dataIndex?: keyof T;
+  render?: (record: T, index: number) => React.ReactNode;
+  align?: 'left' | 'center' | 'right';
+  width?: string | number;
+  className?: string;
+  headerClassName?: string;
+}
+interface Props<T> extends Omit<React.ComponentPropsWithoutRef<'table'>, 'children'> {
+  columns: Column<T>[];
+  data?: T[];
+  /** Use a stable key when rows may be reordered or paged. */
+  rowKey?: (record: T, index: number) => React.Key;
+  caption?: React.ReactNode;
+  loading?: boolean;
+  empty?: React.ReactNode;
+  size?: 'small' | 'middle' | 'large';
+  bordered?: boolean;
+  striped?: boolean;
+  hoverable?: boolean;
+  /** true paginates data locally; server mode expects current-page data. */
+  pagination?: boolean | PaginationOptions;
+  classNames?: {
+    container?: string;
+    header?: string;
+    body?: string;
+    row?: string;
+    cell?: string;
+    empty?: string;
+    pagination?: string;
+  };
+}
+declare const Table: <T>({ columns, data, rowKey, loading, empty, size, bordered, striped, hoverable, pagination, caption, className, classNames, ...props }: Props<T>) => import("react").JSX.Element;
+//#endregion
+export { Column, PaginationOptions, Props, Table as default };
+//# sourceMappingURL=Table.d.mts.map

package/dist/Table.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.mts","names":[],"sources":["../src/components/organisms/table.tsx"],"mappings":";;KAaY,oBAAoB,KAAK;EAChC;EAAiB;;EAAoB;EAAgB;;UAEzC,OAAO;EACtB,KAAK,MAAM;EACX,OAAO,MAAM;;EAEb,kBAAkB;EAClB,UAAU,QAAQ,GAAG,kBAAkB,MAAM;EAC7C;EACA;EACA;EACA;;UAGe,MAAM,WAAW,KAChC,MAAM;EAGN,SAAS,OAAO;EAChB,OAAO;;EAEP,UAAU,QAAQ,GAAG,kBAAkB,MAAM;EAC7C,UAAU,MAAM;EAChB;EACA,QAAQ,MAAM;EACd;EACA;EACA;EACA;;EAEA,uBAAuB;EACvB;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;cAaE,QAAS,KAAI,SAAA,MAAA,QAAA,SAAA,OAAA,MAAA,UAAA,SAAA,WAAA,YAAA,SAAA,WAAA,eAAA,SAehB,MAAM,uBAAE,IAAA"}

package/dist/Table.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import Skeleton from "./components/atoms/skeleton/index.mjs";
+import Pagination from "./Pagination.mjs";
+import Empty from "./components/templates/empty.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/table.tsx
+const clampPage = (page, pageCount) => Math.min(Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1), Math.max(1, pageCount));
+const normalizePageSize = (value) => Number.isFinite(value) && value >= 1 ? Math.floor(value) : 10;
+const Table = ({ columns, data = [], rowKey, loading = false, empty, size, bordered = false, striped = false, hoverable = true, pagination = false, caption, className, classNames, ...props }) => {
+	const { componentSize } = useConfig();
+	const { mode = "client", total: serverTotal, page: controlledPage, defaultPage = 1, pageSize: controlledPageSize, defaultPageSize = 10, onChange, onPageSizeChange, ...paginationProps } = typeof pagination === "object" ? pagination : {};
+	const [internal, setInternal] = useState(() => ({
+		page: defaultPage,
+		pageSize: normalizePageSize(defaultPageSize),
+		pageCount: 0
+	}));
+	const pageSize = normalizePageSize(controlledPageSize ?? internal.pageSize);
+	const total = mode === "server" ? serverTotal ?? 0 : data.length;
+	const pageCount = Math.ceil(total / pageSize);
+	if (pagination && controlledPage === void 0 && internal.pageCount !== pageCount) setInternal((current) => ({
+		...current,
+		page: clampPage(current.page, pageCount),
+		pageCount
+	}));
+	const page = clampPage(controlledPage ?? internal.page, pageCount);
+	const visibleData = pagination && mode === "client" ? data.slice((page - 1) * pageSize, page * pageSize) : data;
+	const cellPadding = {
+		small: "px-3 py-2",
+		middle: "px-4 py-3",
+		large: "px-5 py-4"
+	}[size ?? componentSize ?? "middle"];
+	const handlePageChange = (next) => {
+		if (controlledPage === void 0) setInternal((current) => ({
+			...current,
+			page: next
+		}));
+		onChange?.(next);
+	};
+	const handlePageSizeChange = (next) => {
+		if (controlledPageSize === void 0 || controlledPage === void 0) setInternal((current) => ({
+			...current,
+			page: controlledPage === void 0 ? 1 : current.page,
+			pageSize: controlledPageSize === void 0 ? next : current.pageSize,
+			pageCount: Math.ceil(total / next)
+		}));
+		onPageSizeChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		className: cn("w-full overflow-x-auto", bordered && "rounded-md border", classNames?.container),
+		children: /* @__PURE__ */ jsxs("table", {
+			...props,
+			"data-slot": "table",
+			"aria-busy": loading || void 0,
+			className: cn("w-full min-w-max border-collapse text-sm", className),
+			children: [
+				caption && /* @__PURE__ */ jsx("caption", {
+					className: "mb-2 text-start",
+					children: caption
+				}),
+				/* @__PURE__ */ jsx("thead", {
+					"data-slot": "table-header",
+					className: cn("bg-muted/50 border-b", classNames?.header),
+					children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						style: { width: column.width },
+						className: cn("text-foreground font-medium", cellPadding, column.align === "center" && "text-center", column.align === "right" && "text-right", column.align === void 0 && "text-start", bordered && "border-e last:border-e-0", classNames?.cell, column.headerClassName),
+						children: column.title
+					}, column.key)) })
+				}),
+				/* @__PURE__ */ jsx("tbody", {
+					"data-slot": "table-body",
+					className: classNames?.body,
+					children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+						colSpan: Math.max(columns.length, 1),
+						className: cellPadding,
+						children: /* @__PURE__ */ jsx(Skeleton, {
+							count: 3,
+							className: "py-2"
+						})
+					}) }) : visibleData.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+						colSpan: Math.max(columns.length, 1),
+						className: cn(cellPadding, classNames?.empty),
+						children: empty ?? /* @__PURE__ */ jsx(Empty, {})
+					}) }) : visibleData.map((record, index) => /* @__PURE__ */ jsx("tr", {
+						"data-slot": "table-row",
+						className: cn("border-b last:border-b-0", striped && "even:bg-muted/30", hoverable && "hover:bg-muted/50", classNames?.row),
+						children: columns.map((column) => {
+							const value = column.dataIndex === void 0 ? void 0 : record[column.dataIndex];
+							return /* @__PURE__ */ jsx("td", {
+								"data-slot": "table-cell",
+								className: cn(cellPadding, column.align === "center" && "text-center", column.align === "right" && "text-right", bordered && "border-e last:border-e-0", classNames?.cell, column.className),
+								children: column.render ? column.render(record, index) : value == null ? null : String(value)
+							}, column.key);
+						})
+					}, rowKey?.(record, index) ?? index))
+				})
+			]
+		})
+	}), pagination && /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-pagination",
+		className: cn("mt-4 flex justify-end", classNames?.pagination),
+		children: /* @__PURE__ */ jsx(Pagination, {
+			...paginationProps,
+			total,
+			page,
+			pageSize,
+			onChange: handlePageChange,
+			onPageSizeChange: handlePageSizeChange
+		})
+	})] });
+};
+//#endregion
+export { Table as default };
+
+//# sourceMappingURL=Table.mjs.map