@jbpark/ui-kit 10.0.1 → 10.1.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 { useState } from "react";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-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/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

package/dist/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.mjs","names":[],"sources":["../src/components/organisms/table.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../atoms/skeleton';\nimport Pagination, {\n  type Props as PaginationProps,\n} from '../molecules/pagination';\nimport Empty from '../templates/empty';\n\nexport type PaginationOptions = Omit<PaginationProps, 'total'> &\n  ({ mode?: 'client'; total?: never } | { mode: 'server'; total: number });\n\nexport interface Column<T> {\n  key: React.Key;\n  title: React.ReactNode;\n  /** Field displayed when render is omitted. */\n  dataIndex?: keyof T;\n  render?: (record: T, index: number) => React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n  width?: string | number;\n  className?: string;\n  headerClassName?: string;\n}\n\nexport interface Props<T> extends Omit<\n  React.ComponentPropsWithoutRef<'table'>,\n  'children'\n> {\n  columns: Column<T>[];\n  data?: T[];\n  /** Use a stable key when rows may be reordered or paged. */\n  rowKey?: (record: T, index: number) => React.Key;\n  caption?: React.ReactNode;\n  loading?: boolean;\n  empty?: React.ReactNode;\n  size?: 'small' | 'middle' | 'large';\n  bordered?: boolean;\n  striped?: boolean;\n  hoverable?: boolean;\n  /** true paginates data locally; server mode expects current-page data. */\n  pagination?: boolean | PaginationOptions;\n  classNames?: {\n    container?: string;\n    header?: string;\n    body?: string;\n    row?: string;\n    cell?: string;\n    empty?: string;\n    pagination?: 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 Table = <T,>({\n  columns,\n  data = [],\n  rowKey,\n  loading = false,\n  empty,\n  size,\n  bordered = false,\n  striped = false,\n  hoverable = true,\n  pagination = false,\n  caption,\n  className,\n  classNames,\n  ...props\n}: Props<T>) => {\n  const { componentSize } = useConfig();\n  const paginationOptions: PaginationOptions =\n    typeof pagination === 'object' ? pagination : {};\n  const {\n    mode = 'client',\n    total: serverTotal,\n    page: controlledPage,\n    defaultPage = 1,\n    pageSize: controlledPageSize,\n    defaultPageSize = 10,\n    onChange,\n    onPageSizeChange,\n    ...paginationProps\n  } = paginationOptions;\n  const [internal, setInternal] = useState(() => ({\n    page: defaultPage,\n    pageSize: normalizePageSize(defaultPageSize),\n    pageCount: 0,\n  }));\n  const pageSize = normalizePageSize(controlledPageSize ?? internal.pageSize);\n  const total = mode === 'server' ? (serverTotal ?? 0) : data.length;\n  const pageCount = Math.ceil(total / pageSize);\n\n  if (\n    pagination &&\n    controlledPage === undefined &&\n    internal.pageCount !== pageCount\n  ) {\n    setInternal(current => ({\n      ...current,\n      page: clampPage(current.page, pageCount),\n      pageCount,\n    }));\n  }\n\n  const page = clampPage(controlledPage ?? internal.page, pageCount);\n  const visibleData =\n    pagination && mode === 'client'\n      ? data.slice((page - 1) * pageSize, page * pageSize)\n      : data;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const cellPadding = {\n    small: 'px-3 py-2',\n    middle: 'px-4 py-3',\n    large: 'px-5 py-4',\n  }[resolvedSize];\n\n  const handlePageChange = (next: number) => {\n    if (controlledPage === undefined) {\n      setInternal(current => ({ ...current, page: next }));\n    }\n\n    onChange?.(next);\n  };\n\n  const handlePageSizeChange = (next: number) => {\n    if (controlledPageSize === undefined || controlledPage === undefined) {\n      setInternal(current => ({\n        ...current,\n        page: controlledPage === undefined ? 1 : current.page,\n        pageSize: controlledPageSize === undefined ? next : current.pageSize,\n        pageCount: Math.ceil(total / next),\n      }));\n    }\n\n    onPageSizeChange?.(next);\n  };\n\n  return (\n    <>\n      <div\n        data-slot=\"table-container\"\n        className={cn(\n          'w-full overflow-x-auto',\n          bordered && 'rounded-md border',\n          classNames?.container,\n          //\n        )}\n      >\n        <table\n          {...props}\n          data-slot=\"table\"\n          aria-busy={loading || undefined}\n          className={cn(\n            'w-full min-w-max border-collapse text-sm',\n            className,\n            //\n          )}\n        >\n          {caption && <caption className=\"mb-2 text-start\">{caption}</caption>}\n          <thead\n            data-slot=\"table-header\"\n            className={cn(\n              'bg-muted/50 border-b',\n              classNames?.header,\n              //\n            )}\n          >\n            <tr>\n              {columns.map(column => (\n                <th\n                  key={column.key}\n                  scope=\"col\"\n                  style={{ width: column.width }}\n                  className={cn(\n                    'text-foreground font-medium',\n                    cellPadding,\n                    column.align === 'center' && 'text-center',\n                    column.align === 'right' && 'text-right',\n                    column.align === undefined && 'text-start',\n                    bordered && 'border-e last:border-e-0',\n                    classNames?.cell,\n                    column.headerClassName,\n                    //\n                  )}\n                >\n                  {column.title}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody data-slot=\"table-body\" className={classNames?.body}>\n            {loading ? (\n              <tr>\n                <td\n                  colSpan={Math.max(columns.length, 1)}\n                  className={cellPadding}\n                >\n                  <Skeleton count={3} className=\"py-2\" />\n                </td>\n              </tr>\n            ) : visibleData.length === 0 ? (\n              <tr>\n                <td\n                  colSpan={Math.max(columns.length, 1)}\n                  className={cn(cellPadding, classNames?.empty)}\n                >\n                  {empty ?? <Empty />}\n                </td>\n              </tr>\n            ) : (\n              visibleData.map((record, index) => (\n                <tr\n                  key={rowKey?.(record, index) ?? index}\n                  data-slot=\"table-row\"\n                  className={cn(\n                    'border-b last:border-b-0',\n                    striped && 'even:bg-muted/30',\n                    hoverable && 'hover:bg-muted/50',\n                    classNames?.row,\n                    //\n                  )}\n                >\n                  {columns.map(column => {\n                    const value =\n                      column.dataIndex === undefined\n                        ? undefined\n                        : record[column.dataIndex];\n\n                    return (\n                      <td\n                        key={column.key}\n                        data-slot=\"table-cell\"\n                        className={cn(\n                          cellPadding,\n                          column.align === 'center' && 'text-center',\n                          column.align === 'right' && 'text-right',\n                          bordered && 'border-e last:border-e-0',\n                          classNames?.cell,\n                          column.className,\n                          //\n                        )}\n                      >\n                        {column.render\n                          ? column.render(record, index)\n                          : value == null\n                            ? null\n                            : String(value)}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))\n            )}\n          </tbody>\n        </table>\n      </div>\n      {pagination && (\n        <div\n          data-slot=\"table-pagination\"\n          className={cn(\n            'mt-4 flex justify-end',\n            classNames?.pagination,\n            //\n          )}\n        >\n          <Pagination\n            {...paginationProps}\n            total={total}\n            page={page}\n            pageSize={pageSize}\n            onChange={handlePageChange}\n            onPageSizeChange={handlePageSizeChange}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default Table;\n"],"mappings":"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"}

package/dist/components/atoms/checkbox/checkbox.mjs

@@ -4,8 +4,8 @@ import { checkbox_exports } from "../../../core/checkbox.mjs";
 import { label_exports } from "../../../core/label.mjs";
 import { useId, useRef } from "react";
 import { Square, SquareCheck } from "lucide-react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/checkbox/checkbox.tsx
 const { Checkbox: CoreCheckbox } = checkbox_exports;
 const { Label: CoreLabel } = label_exports;
@@ -74,6 +74,7 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 		children
 	})] });
 	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "checkbox-field",
 		className: cn("flex items-center gap-x-2", placement === "right" && "flex-row-reverse", cursorClassName, className),
 		...props,
 		children: renderContent

package/dist/components/atoms/checkbox/checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { checkbox, label } from '../../../core';\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const id = useId();\n  const itemValue = String(_value);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const iconTriggerRef = useRef<HTMLSpanElement>(null);\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onChange(!checked);\n    },\n    { target: iconTriggerRef, enabled: !!icons && !disabled },\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        ref={iconTriggerRef}\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(!checked);\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        // Keep the atom's established 4px radius after the Base UI migration;\n        // tailwind-merge lets this override the core primitive's radius (#361).\n        className={cn('rounded-sm', cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAkB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,MACA,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;CACZ,CAAC;CAED,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,OAAO,MAAM;CAE/B,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;EAClC,IAAI,UACF;EAGF,WAAW,IAAI;CACjB;CAEA,MAAM,iBAAiB,OAAwB,IAAI;CAEnD,YACE,CAAC,SAAS,OAAO,IACjB,UAAS;EACP,MAAM,eAAe;EACrB,SAAS,CAAC,OAAO;CACnB,GACA;EAAE,QAAQ;EAAgB,SAAS,CAAC,CAAC,SAAS,CAAC;CAAS,CAC1D;CAEA,MAAM,gBAAgB,QACpB,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GACM;GACJ,QAAA;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;IACb,SAAS,EAAE,OAAO,OAAO;GAC3B;EACD,CAAA;EACD,oBAAC,QAAD;GACE,KAAK;GACL,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,eAAe;IACb,SAAS,CAAC,OAAO;GACnB;GAEC,UAAA,UACI,MAAM,WAAW,oBAAC,aAAD,CAAc,CAAA,IAC/B,MAAM,aAAa,oBAAC,QAAD,CAAS,CAAA;EAC7B,CAAA;EACL,YACC,oBAAC,SAAD;GACE,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,SAAS;GAER;EACI,CAAA;CAET,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACM;EACE;EACN,OAAO;EACE;EACC;EAGV,WAAW,GAAG,cAAc,eAAe;EAC3C,iBAAiB;CAClB,CAAA,GACA,YACC,oBAAC,WAAD;EAAW,SAAS;EAAI,WAAW,GAAG,iBAAiB,WAAW;EAC/D;CACQ,CAAA,CAEb,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EACE,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,SAEF;EACA,GAAI;EAEH,UAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { checkbox, label } from '../../../core';\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const id = useId();\n  const itemValue = String(_value);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const iconTriggerRef = useRef<HTMLSpanElement>(null);\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onChange(!checked);\n    },\n    { target: iconTriggerRef, enabled: !!icons && !disabled },\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        ref={iconTriggerRef}\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(!checked);\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        // Keep the atom's established 4px radius after the Base UI migration;\n        // tailwind-merge lets this override the core primitive's radius (#361).\n        className={cn('rounded-sm', cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      data-slot=\"checkbox-field\"\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAkB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,MACA,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;CACZ,CAAC;CAED,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,OAAO,MAAM;CAE/B,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;EAClC,IAAI,UACF;EAGF,WAAW,IAAI;CACjB;CAEA,MAAM,iBAAiB,OAAwB,IAAI;CAEnD,YACE,CAAC,SAAS,OAAO,IACjB,UAAS;EACP,MAAM,eAAe;EACrB,SAAS,CAAC,OAAO;CACnB,GACA;EAAE,QAAQ;EAAgB,SAAS,CAAC,CAAC,SAAS,CAAC;CAAS,CAC1D;CAEA,MAAM,gBAAgB,QACpB,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GACM;GACJ,QAAA;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;IACb,SAAS,EAAE,OAAO,OAAO;GAC3B;EACD,CAAA;EACD,oBAAC,QAAD;GACE,KAAK;GACL,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,eAAe;IACb,SAAS,CAAC,OAAO;GACnB;GAEC,UAAA,UACI,MAAM,WAAW,oBAAC,aAAD,CAAc,CAAA,IAC/B,MAAM,aAAa,oBAAC,QAAD,CAAS,CAAA;EAC7B,CAAA;EACL,YACC,oBAAC,SAAD;GACE,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,SAAS;GAER;EACI,CAAA;CAET,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACM;EACE;EACN,OAAO;EACE;EACC;EAGV,WAAW,GAAG,cAAc,eAAe;EAC3C,iBAAiB;CAClB,CAAA,GACA,YACC,oBAAC,WAAD;EAAW,SAAS;EAAI,WAAW,GAAG,iBAAiB,WAAW;EAC/D;CACQ,CAAA,CAEb,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,SAEF;EACA,GAAI;EAEH,UAAA;CACE,CAAA;AAET"}

package/dist/components/atoms/checkbox/group.mjs

@@ -2,8 +2,8 @@
 import { cn } from "../../../utils.mjs";
 import Checkbox from "./checkbox.mjs";
 import { normalizeOptions, warnOnDuplicateOptionValues } from "../option-group.mjs";
-import { jsx } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/checkbox/group.tsx
 const Group = ({ orientation = "vertical", placement = "left", className, classNames = {}, options: _options = [], name, disabled, defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {
 	const [value, setValue] = useControllableState({
@@ -18,6 +18,7 @@ const Group = ({ orientation = "vertical", placement = "left", className, classN
 		setValue(nextValue);
 	};
 	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "checkbox-group",
 		...props,
 		className: cn("m-0 flex list-none gap-2 p-0", orientation === "vertical" && "flex-col", className),
 		children: options.map((item, index) => {

package/dist/components/atoms/checkbox/group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport {\n  type Option,\n  type OptionGroupClassNames,\n  type OptionValue,\n  type Options,\n  normalizeOptions,\n  warnOnDuplicateOptionValues,\n} from '../option-group';\nimport Checkbox from './checkbox';\n\nexport type { OptionValue };\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'ul'>,\n  'onChange' | 'defaultValue' | 'value'\n> {\n  options?: Options;\n  orientation?: 'vertical' | 'horizontal';\n  placement?: 'left' | 'right';\n  classNames?: OptionGroupClassNames;\n  defaultValue?: OptionValue[];\n  value?: OptionValue[];\n  /** Native form field name, shared across every option's checkbox. */\n  name?: string;\n  disabled?: boolean;\n  onChange?: (values: OptionValue[]) => void;\n}\n\nconst Group = ({\n  orientation = 'vertical',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  name,\n  disabled,\n  defaultValue,\n  value: _value,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [value, setValue] = useControllableState<OptionValue[]>({\n    value: _value,\n    defaultValue: defaultValue ?? [],\n    onChange: _onChange,\n  });\n\n  const options: Option[] = normalizeOptions(_options);\n  warnOnDuplicateOptionValues(options, 'Checkbox.Group');\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    const nextValue = checked\n      ? [...value, optionValue]\n      : value.filter(v => v !== optionValue);\n\n    setValue(nextValue);\n  };\n\n  return (\n    <ul\n      {...props}\n      className={cn(\n        // Spacing comes from `gap`, not `space-y`'s child margins, so the\n        // per-item `m-0` reset below can neutralise host list styles without\n        // also wiping out the group's own spacing.\n        'm-0 flex list-none gap-2 p-0',\n        orientation === 'vertical' && 'flex-col',\n        className,\n      )}\n    >\n      {options.map((item: Option, index) => {\n        const checked = value.includes(item.value);\n\n        return (\n          <li\n            key={`${index}-${String(item.value)}`}\n            // `m-0` completes the list reset the `ul` above starts (#253) —\n            // see Radio.Group for the host rule this guards against.\n            className={cn('m-0 flex', classNames?.wrapper)}\n          >\n            <Checkbox\n              placement={placement}\n              className={cn(classNames?.item)}\n              name={name}\n              value={item.value}\n              checked={checked}\n              disabled={disabled || item.disabled}\n              onChange={checked => onChange(checked, item.value)}\n            >\n              {item.label}\n            </Checkbox>\n          </li>\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default Group;\n"],"mappings":";;;;;;;AAkCA,MAAM,SAAS,EACb,cAAc,YACd,YAAY,QACZ,WACA,aAAa,CAAC,GACd,SAAS,WAAW,CAAC,GACrB,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D,OAAO;EACP,cAAc,gBAAgB,CAAC;EAC/B,UAAU;CACZ,CAAC;CAED,MAAM,UAAoB,iBAAiB,QAAQ;CACnD,4BAA4B,SAAS,gBAAgB;CAErD,MAAM,YAAY,SAAkB,gBAA6B;EAC/D,MAAM,YAAY,UACd,CAAC,GAAG,OAAO,WAAW,IACtB,MAAM,QAAO,MAAK,MAAM,WAAW;EAEvC,SAAS,SAAS;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,WAAW,GAIT,gCACA,gBAAgB,cAAc,YAC9B,SACF;EAEC,UAAA,QAAQ,KAAK,MAAc,UAAU;GACpC,MAAM,UAAU,MAAM,SAAS,KAAK,KAAK;GAEzC,OACE,oBAAC,MAAD;IAIE,WAAW,GAAG,YAAY,YAAY,OAAO;IAE7C,UAAA,oBAAC,UAAD;KACa;KACX,WAAW,GAAG,YAAY,IAAI;KACxB;KACN,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,KAAK;KAEhD,UAAA,KAAK;IACE,CAAA;GACR,GAhBG,GAAG,MAAM,GAAG,OAAO,KAAK,KAAK,GAgBhC;EAER,CAAC;CACC,CAAA;AAER"}
+{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport {\n  type Option,\n  type OptionGroupClassNames,\n  type OptionValue,\n  type Options,\n  normalizeOptions,\n  warnOnDuplicateOptionValues,\n} from '../option-group';\nimport Checkbox from './checkbox';\n\nexport type { OptionValue };\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'ul'>,\n  'onChange' | 'defaultValue' | 'value'\n> {\n  options?: Options;\n  orientation?: 'vertical' | 'horizontal';\n  placement?: 'left' | 'right';\n  classNames?: OptionGroupClassNames;\n  defaultValue?: OptionValue[];\n  value?: OptionValue[];\n  /** Native form field name, shared across every option's checkbox. */\n  name?: string;\n  disabled?: boolean;\n  onChange?: (values: OptionValue[]) => void;\n}\n\nconst Group = ({\n  orientation = 'vertical',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  name,\n  disabled,\n  defaultValue,\n  value: _value,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [value, setValue] = useControllableState<OptionValue[]>({\n    value: _value,\n    defaultValue: defaultValue ?? [],\n    onChange: _onChange,\n  });\n\n  const options: Option[] = normalizeOptions(_options);\n  warnOnDuplicateOptionValues(options, 'Checkbox.Group');\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    const nextValue = checked\n      ? [...value, optionValue]\n      : value.filter(v => v !== optionValue);\n\n    setValue(nextValue);\n  };\n\n  return (\n    <ul\n      data-slot=\"checkbox-group\"\n      {...props}\n      className={cn(\n        // Spacing comes from `gap`, not `space-y`'s child margins, so the\n        // per-item `m-0` reset below can neutralise host list styles without\n        // also wiping out the group's own spacing.\n        'm-0 flex list-none gap-2 p-0',\n        orientation === 'vertical' && 'flex-col',\n        className,\n      )}\n    >\n      {options.map((item: Option, index) => {\n        const checked = value.includes(item.value);\n\n        return (\n          <li\n            key={`${index}-${String(item.value)}`}\n            // `m-0` completes the list reset the `ul` above starts (#253) —\n            // see Radio.Group for the host rule this guards against.\n            className={cn('m-0 flex', classNames?.wrapper)}\n          >\n            <Checkbox\n              placement={placement}\n              className={cn(classNames?.item)}\n              name={name}\n              value={item.value}\n              checked={checked}\n              disabled={disabled || item.disabled}\n              onChange={checked => onChange(checked, item.value)}\n            >\n              {item.label}\n            </Checkbox>\n          </li>\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default Group;\n"],"mappings":";;;;;;;AAkCA,MAAM,SAAS,EACb,cAAc,YACd,YAAY,QACZ,WACA,aAAa,CAAC,GACd,SAAS,WAAW,CAAC,GACrB,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D,OAAO;EACP,cAAc,gBAAgB,CAAC;EAC/B,UAAU;CACZ,CAAC;CAED,MAAM,UAAoB,iBAAiB,QAAQ;CACnD,4BAA4B,SAAS,gBAAgB;CAErD,MAAM,YAAY,SAAkB,gBAA6B;EAC/D,MAAM,YAAY,UACd,CAAC,GAAG,OAAO,WAAW,IACtB,MAAM,QAAO,MAAK,MAAM,WAAW;EAEvC,SAAS,SAAS;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,GAIT,gCACA,gBAAgB,cAAc,YAC9B,SACF;EAEC,UAAA,QAAQ,KAAK,MAAc,UAAU;GACpC,MAAM,UAAU,MAAM,SAAS,KAAK,KAAK;GAEzC,OACE,oBAAC,MAAD;IAIE,WAAW,GAAG,YAAY,YAAY,OAAO;IAE7C,UAAA,oBAAC,UAAD;KACa;KACX,WAAW,GAAG,YAAY,IAAI;KACxB;KACN,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,KAAK;KAEhD,UAAA,KAAK;IACE,CAAA;GACR,GAhBG,GAAG,MAAM,GAAG,OAAO,KAAK,KAAK,GAgBhC;EAER,CAAC;CACC,CAAA;AAER"}

package/dist/components/atoms/color-picker.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../utils.mjs";
 import Popover from "./popover.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { HexColorPicker } from "react-colorful";
 //#region src/components/atoms/color-picker.tsx
 const ColorPicker = ({ defaultValue, value: _value, showText, disabled, className, onChange: _onChange = () => {}, open: _open, defaultOpen, onOpenChange, ...props }) => {

package/dist/components/atoms/date-picker.mjs

@@ -5,8 +5,8 @@ import Button from "../../Button.mjs";
 import Popover from "./popover.mjs";
 import { useState } from "react";
 import { CalendarIcon } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 import { format } from "date-fns";
 //#region src/components/atoms/date-picker.tsx
 const { Calendar } = calendar_exports;

package/dist/components/atoms/float-button/back-top.mjs

@@ -4,8 +4,8 @@ import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs
 import FloatButton from "./float-button.mjs";
 import { useRef } from "react";
 import { ArrowUp } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
 import { useMergedRef, useWindowScroll } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/float-button/back-top.tsx
 const BackTop = ({ ref, visibilityHeight = 450, className, onClick, ...props }) => {
 	const { locale } = useConfig();

package/dist/components/atoms/index.d.mts

@@ -16,4 +16,5 @@ import Skeleton from "./skeleton/index.mjs";
 import Slider from "./slider/slider.mjs";
 import Spin from "./spin.mjs";
 import Switch from "./switch.mjs";
-export { Button, Checkbox, ColorPicker, DatePicker, FloatButton, Input, Popover, Progress, Radio, RichTextEditor, Select, Skeleton, Slider, Spin, Switch, Tag, Typography };
+import Tooltip from "./tooltip.mjs";
+export { Button, Checkbox, ColorPicker, DatePicker, FloatButton, Input, Popover, Progress, Radio, RichTextEditor, Select, Skeleton, Slider, Spin, Switch, Tag, Tooltip, Typography };

package/dist/components/atoms/input/search.mjs

@@ -5,8 +5,8 @@ import { input_exports } from "../../../core/input.mjs";
 import Button from "../../../Button.mjs";
 import { useRef, useState } from "react";
 import { CircleX, Search } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useMergedRef } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/input/search.tsx
 const { Input: Core } = input_exports;
 const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear = true, onChange, onKeyDown: _onKeyDown, onSearch: _onSearch, ...props }) => {
@@ -28,6 +28,7 @@ const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear =
 		if (inputRef.current) _onSearch?.(inputRef.current.value);
 	};
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-search",
 		className: cn("flex items-center", "rounded-md", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("relative grow", "inline-flex items-center"),
@@ -51,6 +52,7 @@ const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear =
 				}
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
+				"data-slot": "input-search-clear",
 				"aria-label": locale.clear ?? DEFAULT_LOCALE.clear,
 				disabled,
 				className: cn("absolute right-2", "shrink-0 cursor-pointer", "disabled:cursor-not-allowed disabled:opacity-50", (!allowClear || !hasValue) && "hidden"),