@jbpark/ui-kit 10.0.2 → 10.2.0

package/README.ko.md

@@ -145,6 +145,13 @@ function App() {
 해당 요소에 `isolation: isolate`를 적용해 Base UI 포털이 앱 내부의 z-index와
 경쟁하지 않고 페이지 콘텐츠 위에 표시되도록 합니다.
 
+반대 방향으로도 효과가 있습니다. 오버레이(Modal, Drawer, Select, Popover)와
+페이지 흐름 안에 고정되는 요소(sticky/fixed `Layout.Header`, `FloatButton`,
+Dropdown 메뉴)는 모두 `z-index: 1000`을 씁니다. 루트를 격리하지 않으면 이
+요소들이 z-index가 더 낮은 앱 자체의 다이얼로그(예: shadcn의 `z-50`)를 덮습니다.
+`data-ui-root`를 지정하면 `body`로 포털되는 앱의 오버레이가 이 요소들을 포함한
+앱 전체를 덮습니다.
+
 ### 개별 컴포넌트 import
 
 ```tsx

package/README.md

@@ -145,6 +145,13 @@ Put `data-ui-root` on your application layout root. The included stylesheet
 applies `isolation: isolate` there so Base UI portals render above page content
 without competing with z-index values inside the app.
 
+It also works in the other direction. Overlays (Modal, Drawer, Select,
+Popover) and in-flow chrome (sticky/fixed `Layout.Header`, `FloatButton`,
+Dropdown menus) share `z-index: 1000`. Without an isolated root, that
+chrome paints over your own dialogs if they use a lower z-index (for example
+shadcn's `z-50`). With `data-ui-root`, any overlay you portal to `body`
+covers the whole app, including this chrome.
+
 ### Import Individual Components
 
 ```tsx

package/dist/Alert.d.mts

@@ -0,0 +1,24 @@
+//#region src/components/molecules/alert.d.ts
+type Status = 'info' | 'success' | 'warning' | 'error';
+interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {
+  status?: Status;
+  variant?: 'outlined' | 'filled';
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Pass `null` to hide the status icon. */
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+  closable?: boolean;
+  onClose?: () => void;
+  classNames?: {
+    icon?: string;
+    title?: string;
+    description?: string;
+    action?: string;
+    close?: string;
+  };
+}
+declare const Alert: ({ status, variant, title, description, icon, action, closable, onClose, className, classNames, role, ...props }: Props) => import("react").JSX.Element | null;
+//#endregion
+export { Props, Alert as default };
+//# sourceMappingURL=Alert.d.mts.map

package/dist/Alert.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.mts","names":[],"sources":["../src/components/molecules/alert.tsx"],"mappings":";KAWK;UAEY,cAAc,KAC7B,MAAM;EAGN,SAAS;EACT;EACA,OAAO,MAAM;EACb,cAAc,MAAM;;EAEpB,OAAO,MAAM;EACb,SAAS,MAAM;EACf;EACA;EACA;IACE;IACA;IACA;IACA;IACA;;;cAWE,UAAS,QAAA,SAAA,OAAA,aAAA,MAAA,QAAA,UAAA,SAAA,WAAA,YAAA,SAAA,SAaZ,0BAAK,IAAA"}

package/dist/Alert.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/alert.tsx
+const STATUS_ICONS = {
+	info: /* @__PURE__ */ jsx(Info, {}),
+	success: /* @__PURE__ */ jsx(Check, {}),
+	warning: /* @__PURE__ */ jsx(OctagonAlert, {}),
+	error: /* @__PURE__ */ jsx(OctagonX, {})
+};
+const Alert = ({ status = "info", variant = "outlined", title, description, icon, action, closable = false, onClose, className, classNames, role = "status", ...props }) => {
+	const { locale } = useConfig();
+	const [visible, setVisible] = useState(true);
+	const renderedIcon = icon === void 0 ? STATUS_ICONS[status] : icon;
+	if (!visible) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "alert",
+		"data-status": status,
+		"data-variant": variant,
+		role,
+		className: cn("flex w-full items-start gap-3 rounded-lg border p-4", className),
+		children: [
+			renderedIcon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("mt-0.5 shrink-0 [&_svg]:size-5", classNames?.icon),
+				children: renderedIcon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: cn("text-sm font-semibold", classNames?.title),
+						children: title
+					}),
+					description && /* @__PURE__ */ jsx("div", {
+						className: cn("text-muted-foreground mt-1 text-sm", classNames?.description),
+						children: description
+					}),
+					action && /* @__PURE__ */ jsx("div", {
+						className: cn("mt-3", classNames?.action),
+						children: action
+					})
+				]
+			}),
+			closable && /* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				shape: "circle",
+				size: "small",
+				"aria-label": locale.close ?? DEFAULT_LOCALE.close,
+				icon: /* @__PURE__ */ jsx(X, {}),
+				className: classNames?.close,
+				onClick: () => {
+					onClose?.();
+					setVisible(false);
+				}
+			})
+		]
+	});
+};
+//#endregion
+export { Alert as default };
+
+//# sourceMappingURL=Alert.mjs.map

package/dist/Alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.mjs","names":[],"sources":["../src/components/molecules/alert.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\ntype Status = 'info' | 'success' | 'warning' | 'error';\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithRef<'div'>,\n  'title'\n> {\n  status?: Status;\n  variant?: 'outlined' | 'filled';\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Pass `null` to hide the status icon. */\n  icon?: React.ReactNode;\n  action?: React.ReactNode;\n  closable?: boolean;\n  onClose?: () => void;\n  classNames?: {\n    icon?: string;\n    title?: string;\n    description?: string;\n    action?: string;\n    close?: string;\n  };\n}\n\nconst STATUS_ICONS: Record<Status, React.ReactNode> = {\n  info: <Info />,\n  success: <Check />,\n  warning: <OctagonAlert />,\n  error: <OctagonX />,\n};\n\nconst Alert = ({\n  status = 'info',\n  variant = 'outlined',\n  title,\n  description,\n  icon,\n  action,\n  closable = false,\n  onClose,\n  className,\n  classNames,\n  role = 'status',\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const [visible, setVisible] = useState(true);\n  const renderedIcon = icon === undefined ? STATUS_ICONS[status] : icon;\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <div\n      {...props}\n      data-slot=\"alert\"\n      data-status={status}\n      data-variant={variant}\n      role={role}\n      className={cn(\n        'flex w-full items-start gap-3 rounded-lg border p-4',\n        className,\n        //\n      )}\n    >\n      {renderedIcon && (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'mt-0.5 shrink-0 [&_svg]:size-5',\n            classNames?.icon,\n            //\n          )}\n        >\n          {renderedIcon}\n        </span>\n      )}\n      <div className=\"min-w-0 flex-1\">\n        <div\n          className={cn(\n            'text-sm font-semibold',\n            classNames?.title,\n            //\n          )}\n        >\n          {title}\n        </div>\n        {description && (\n          <div\n            className={cn(\n              'text-muted-foreground mt-1 text-sm',\n              classNames?.description,\n              //\n            )}\n          >\n            {description}\n          </div>\n        )}\n        {action && (\n          <div\n            className={cn(\n              'mt-3',\n              classNames?.action,\n              //\n            )}\n          >\n            {action}\n          </div>\n        )}\n      </div>\n      {closable && (\n        <Button\n          variant=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label={locale.close ?? DEFAULT_LOCALE.close}\n          icon={<X />}\n          className={classNames?.close}\n          onClick={() => {\n            onClose?.();\n            setVisible(false);\n          }}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAmCA,MAAM,eAAgD;CACpD,MAAM,oBAAC,MAAD,CAAO,CAAA;CACb,SAAS,oBAAC,OAAD,CAAQ,CAAA;CACjB,SAAS,oBAAC,cAAD,CAAe,CAAA;CACxB,OAAO,oBAAC,UAAD,CAAW,CAAA;AACpB;AAEA,MAAM,SAAS,EACb,SAAS,QACT,UAAU,YACV,OACA,aACA,MACA,QACA,WAAW,OACX,SACA,WACA,YACA,OAAO,UACP,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,MAAM,eAAe,SAAS,KAAA,IAAY,aAAa,UAAU;CAEjE,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,eAAa;EACb,gBAAc;EACR;EACN,WAAW,GACT,uDACA,SAEF;EAVF,UAAA;GAYG,gBACC,oBAAC,QAAD;IACE,eAAY;IACZ,WAAW,GACT,kCACA,YAAY,IAEd;IAEC,UAAA;GACG,CAAA;GAER,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,OAAD;MACE,WAAW,GACT,yBACA,YAAY,KAEd;MAEC,UAAA;KACE,CAAA;KACJ,eACC,oBAAC,OAAD;MACE,WAAW,GACT,sCACA,YAAY,WAEd;MAEC,UAAA;KACE,CAAA;KAEN,UACC,oBAAC,OAAD;MACE,WAAW,GACT,QACA,YAAY,MAEd;MAEC,UAAA;KACE,CAAA;IAEJ;;GACJ,YACC,oBAAC,QAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAY,OAAO,SAAS,eAAe;IAC3C,MAAM,oBAAC,GAAD,CAAI,CAAA;IACV,WAAW,YAAY;IACvB,eAAe;KACb,UAAU;KACV,WAAW,KAAK;IAClB;GACD,CAAA;EAEA;;AAET"}

package/dist/Avatar.d.mts

@@ -0,0 +1,19 @@
+import { ComponentSize } from "./providers/config/types.mjs";
+//#region src/components/atoms/avatar.d.ts
+interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+  src?: string;
+  /** A person's name or image description. Use an empty string for a decorative avatar. */
+  alt: string;
+  /** Initials, an icon, or other content shown until the image loads or if it fails. */
+  fallback?: React.ReactNode;
+  size?: ComponentSize;
+  loading?: 'eager' | 'lazy';
+  classNames?: {
+    image?: string;
+    fallback?: string;
+  };
+}
+declare const Avatar: ({ src, alt, fallback, size, loading, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Props, Avatar as default };
+//# sourceMappingURL=Avatar.d.mts.map

package/dist/Avatar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.mts","names":[],"sources":["../src/components/atoms/avatar.tsx"],"mappings":";;UAciB,cAAc,KAC7B,MAAM;EAGN;;EAEA;;EAEA,WAAW,MAAM;EACjB,OAAO;EACP;EACA;IACE;IACA;;;cAIE,WAAU,KAAA,KAAA,UAAA,MAAA,SAAA,WAAA,eAAA,SASb,0BAAK,IAAA"}

package/dist/Avatar.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+import { UserRound } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/atoms/avatar.tsx
+const sizes = {
+	small: "size-8 text-xs",
+	middle: "size-10 text-sm",
+	large: "size-12 text-base"
+};
+const Avatar = ({ src, alt, fallback, size, loading, className, classNames, ...props }) => {
+	const { componentSize } = useConfig();
+	const resolvedSize = size ?? componentSize ?? "middle";
+	return /* @__PURE__ */ jsxs(Avatar$1.Root, {
+		"data-slot": "avatar",
+		role: alt ? "img" : void 0,
+		"aria-label": alt || void 0,
+		"aria-hidden": alt ? void 0 : true,
+		className: cn(`bg-muted text-muted-foreground relative inline-flex shrink-0
+        overflow-hidden rounded-full`, sizes[resolvedSize], className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Avatar$1.Fallback, {
+			className: cn("absolute inset-0 flex items-center justify-center font-medium", classNames?.fallback),
+			children: fallback ?? /* @__PURE__ */ jsx(UserRound, {
+				"aria-hidden": "true",
+				className: "size-1/2"
+			})
+		}), src && /* @__PURE__ */ jsx(Avatar$1.Image, {
+			src,
+			alt: "",
+			loading,
+			keepMounted: true,
+			className: cn(`absolute inset-0 size-full object-cover data-error:invisible
+            data-loading:invisible`, classNames?.image)
+		})]
+	});
+};
+//#endregion
+export { Avatar as default };
+
+//# sourceMappingURL=Avatar.mjs.map

package/dist/Avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","names":["BaseAvatar"],"sources":["../src/components/atoms/avatar.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { UserRound } from 'lucide-react';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nconst sizes: Record<ComponentSize, string> = {\n  small: 'size-8 text-xs',\n  middle: 'size-10 text-sm',\n  large: 'size-12 text-base',\n};\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'span'>,\n  'children'\n> {\n  src?: string;\n  /** A person's name or image description. Use an empty string for a decorative avatar. */\n  alt: string;\n  /** Initials, an icon, or other content shown until the image loads or if it fails. */\n  fallback?: React.ReactNode;\n  size?: ComponentSize;\n  loading?: 'eager' | 'lazy';\n  classNames?: {\n    image?: string;\n    fallback?: string;\n  };\n}\n\nconst Avatar = ({\n  src,\n  alt,\n  fallback,\n  size,\n  loading,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const { componentSize } = useConfig();\n  const resolvedSize = size ?? componentSize ?? 'middle';\n\n  return (\n    <BaseAvatar.Root\n      data-slot=\"avatar\"\n      role={alt ? 'img' : undefined}\n      aria-label={alt || undefined}\n      aria-hidden={alt ? undefined : true}\n      className={cn(\n        `bg-muted text-muted-foreground relative inline-flex shrink-0\n        overflow-hidden rounded-full`,\n        sizes[resolvedSize],\n        className,\n        //\n      )}\n      {...props}\n    >\n      <BaseAvatar.Fallback\n        className={cn(\n          'absolute inset-0 flex items-center justify-center font-medium',\n          classNames?.fallback,\n          //\n        )}\n      >\n        {fallback ?? <UserRound aria-hidden=\"true\" className=\"size-1/2\" />}\n      </BaseAvatar.Fallback>\n      {src && (\n        <BaseAvatar.Image\n          src={src}\n          alt=\"\"\n          loading={loading}\n          keepMounted\n          className={cn(\n            `absolute inset-0 size-full object-cover data-error:invisible\n            data-loading:invisible`,\n            classNames?.image,\n            //\n          )}\n        />\n      )}\n    </BaseAvatar.Root>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;AAQA,MAAM,QAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAmBA,MAAM,UAAU,EACd,KACA,KACA,UACA,MACA,SACA,WACA,YACA,GAAG,YACQ;CACX,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,eAAe,QAAQ,iBAAiB;CAE9C,OACE,qBAACA,SAAW,MAAZ;EACE,aAAU;EACV,MAAM,MAAM,QAAQ,KAAA;EACpB,cAAY,OAAO,KAAA;EACnB,eAAa,MAAM,KAAA,IAAY;EAC/B,WAAW,GACT;uCAEA,MAAM,eACN,SAEF;EACA,GAAI;EAZN,UAAA,CAcE,oBAACA,SAAW,UAAZ;GACE,WAAW,GACT,iEACA,YAAY,QAEd;GAEC,UAAA,YAAY,oBAAC,WAAD;IAAW,eAAY;IAAO,WAAU;GAAY,CAAA;EAC9C,CAAA,GACpB,OACC,oBAACA,SAAW,OAAZ;GACO;GACL,KAAI;GACK;GACT,aAAA;GACA,WAAW,GACT;qCAEA,YAAY,KAEd;EACD,CAAA,CAEY;;AAErB"}

package/dist/Badge.d.mts

@@ -0,0 +1,23 @@
+//#region src/components/atoms/badge.d.ts
+type BadgeColor = 'primary' | 'success' | 'warning' | 'danger';
+interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+  /** Number shown in the indicator. Zero is hidden unless `showZero` is true. */
+  count?: number;
+  /** Show a small status dot instead of the count. */
+  dot?: boolean;
+  /** Highest number shown before displaying `maxCount+`. */
+  maxCount?: number;
+  showZero?: boolean;
+  color?: BadgeColor;
+  /** Pixel inset from the wrapped element's top and inline end edges. */
+  offset?: readonly [number, number];
+  /** Accessible name for the indicator, especially useful for a status dot. */
+  indicatorLabel?: string;
+  classNames?: {
+    indicator?: string;
+  };
+}
+declare const Badge: ({ count, dot, maxCount, showZero, color, offset, indicatorLabel, className, classNames, children, ...props }: Props) => import("react").JSX.Element | null;
+//#endregion
+export { Props, Badge as default };
+//# sourceMappingURL=Badge.d.mts.map

package/dist/Badge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.mts","names":[],"sources":["../src/components/atoms/badge.tsx"],"mappings":";KAEK;UASY,cAAc,KAC7B,MAAM;;EAIN;;EAEA;;EAEA;EACA;EACA,QAAQ;;EAER;;EAEA;EACA;IACE;;;cAIE,UAAS,OAAA,KAAA,UAAA,UAAA,OAAA,QAAA,gBAAA,WAAA,YAAA,aAAA,SAYZ,0BAAK,IAAA"}

package/dist/Badge.mjs

@@ -0,0 +1,41 @@
+import { cn } from "./utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/atoms/badge.tsx
+const colors = {
+	primary: "bg-primary text-primary-foreground",
+	success: "bg-green-600 text-white dark:bg-green-500",
+	warning: "bg-yellow-500 text-black",
+	danger: "bg-destructive text-white"
+};
+const Badge = ({ count, dot = false, maxCount = 99, showZero = false, color = "danger", offset, indicatorLabel, className, classNames, children, ...props }) => {
+	const hasChildren = children != null;
+	const visible = dot || count != null && (count !== 0 || showZero);
+	const displayCount = count != null && count > maxCount ? `${maxCount}+` : count;
+	if (!visible && !hasChildren) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		"data-slot": "badge",
+		className: cn("relative inline-flex w-fit align-middle", className),
+		children: [children, visible && /* @__PURE__ */ jsx("span", {
+			"data-slot": "badge-indicator",
+			"data-color": color,
+			"data-dot": dot || void 0,
+			role: indicatorLabel ? "img" : void 0,
+			"aria-label": indicatorLabel,
+			"aria-hidden": dot && !indicatorLabel ? true : void 0,
+			className: cn(`pointer-events-none z-10 inline-flex shrink-0 items-center
+            justify-center rounded-full font-medium whitespace-nowrap
+            tabular-nums`, dot ? "size-2" : "min-h-5 min-w-5 px-1 text-xs", hasChildren && `absolute end-0 top-0 translate-x-1/2 -translate-y-1/2
+              rtl:-translate-x-1/2`, colors[color], classNames?.indicator),
+			style: hasChildren ? {
+				top: offset?.[1] ?? 0,
+				insetInlineEnd: offset?.[0] ?? 0
+			} : void 0,
+			children: !dot && displayCount
+		})]
+	});
+};
+//#endregion
+export { Badge as default };
+
+//# sourceMappingURL=Badge.mjs.map

package/dist/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","names":[],"sources":["../src/components/atoms/badge.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\ntype BadgeColor = 'primary' | 'success' | 'warning' | 'danger';\n\nconst colors: Record<BadgeColor, string> = {\n  primary: 'bg-primary text-primary-foreground',\n  success: 'bg-green-600 text-white dark:bg-green-500',\n  warning: 'bg-yellow-500 text-black',\n  danger: 'bg-destructive text-white',\n};\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'span'>,\n  'color'\n> {\n  /** Number shown in the indicator. Zero is hidden unless `showZero` is true. */\n  count?: number;\n  /** Show a small status dot instead of the count. */\n  dot?: boolean;\n  /** Highest number shown before displaying `maxCount+`. */\n  maxCount?: number;\n  showZero?: boolean;\n  color?: BadgeColor;\n  /** Pixel inset from the wrapped element's top and inline end edges. */\n  offset?: readonly [number, number];\n  /** Accessible name for the indicator, especially useful for a status dot. */\n  indicatorLabel?: string;\n  classNames?: {\n    indicator?: string;\n  };\n}\n\nconst Badge = ({\n  count,\n  dot = false,\n  maxCount = 99,\n  showZero = false,\n  color = 'danger',\n  offset,\n  indicatorLabel,\n  className,\n  classNames,\n  children,\n  ...props\n}: Props) => {\n  const hasChildren = children != null;\n  const visible = dot || (count != null && (count !== 0 || showZero));\n  const displayCount =\n    count != null && count > maxCount ? `${maxCount}+` : count;\n\n  if (!visible && !hasChildren) {\n    return null;\n  }\n\n  return (\n    <span\n      {...props}\n      data-slot=\"badge\"\n      className={cn('relative inline-flex w-fit align-middle', className)}\n    >\n      {children}\n      {visible && (\n        <span\n          data-slot=\"badge-indicator\"\n          data-color={color}\n          data-dot={dot || undefined}\n          role={indicatorLabel ? 'img' : undefined}\n          aria-label={indicatorLabel}\n          aria-hidden={dot && !indicatorLabel ? true : undefined}\n          className={cn(\n            `pointer-events-none z-10 inline-flex shrink-0 items-center\n            justify-center rounded-full font-medium whitespace-nowrap\n            tabular-nums`,\n            dot ? 'size-2' : 'min-h-5 min-w-5 px-1 text-xs',\n            hasChildren &&\n              `absolute end-0 top-0 translate-x-1/2 -translate-y-1/2\n              rtl:-translate-x-1/2`,\n            colors[color],\n            classNames?.indicator,\n            //\n          )}\n          style={\n            hasChildren\n              ? { top: offset?.[1] ?? 0, insetInlineEnd: offset?.[0] ?? 0 }\n              : undefined\n          }\n        >\n          {!dot && displayCount}\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;AAIA,MAAM,SAAqC;CACzC,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV;AAuBA,MAAM,SAAS,EACb,OACA,MAAM,OACN,WAAW,IACX,WAAW,OACX,QAAQ,UACR,QACA,gBACA,WACA,YACA,UACA,GAAG,YACQ;CACX,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,OAAQ,SAAS,SAAS,UAAU,KAAK;CACzD,MAAM,eACJ,SAAS,QAAQ,QAAQ,WAAW,GAAG,SAAS,KAAK;CAEvD,IAAI,CAAC,WAAW,CAAC,aACf,OAAO;CAGT,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAHpE,UAAA,CAKG,UACA,WACC,oBAAC,QAAD;GACE,aAAU;GACV,cAAY;GACZ,YAAU,OAAO,KAAA;GACjB,MAAM,iBAAiB,QAAQ,KAAA;GAC/B,cAAY;GACZ,eAAa,OAAO,CAAC,iBAAiB,OAAO,KAAA;GAC7C,WAAW,GACT;;2BAGA,MAAM,WAAW,gCACjB,eACE;qCAEF,OAAO,QACP,YAAY,SAEd;GACA,OACE,cACI;IAAE,KAAK,SAAS,MAAM;IAAG,gBAAgB,SAAS,MAAM;GAAE,IAC1D,KAAA;GAGL,UAAA,CAAC,OAAO;EACL,CAAA,CAEJ;;AAEV"}

package/dist/Breadcrumb.d.mts

@@ -0,0 +1,39 @@
+//#region src/components/molecules/breadcrumb.d.ts
+interface Item {
+  key?: React.Key;
+  title: React.ReactNode;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  rel?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  className?: string;
+  'aria-label'?: string;
+  /** Decorative icon placed before the title. */
+  icon?: React.ReactNode;
+  /** Overrides the separator after this item. */
+  separator?: React.ReactNode;
+}
+interface Props extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> {
+  items: Item[];
+  separator?: React.ReactNode;
+  /** Collapse middle items when the trail has more than this many entries. */
+  maxItems?: number;
+  itemsBeforeCollapse?: number;
+  itemsAfterCollapse?: number;
+  expandText?: string;
+  /** Render custom router links. The renderer owns aria-current for the last item. */
+  itemRender?: (item: Item, index: number, isCurrent: boolean) => React.ReactNode;
+  classNames?: {
+    list?: string;
+    item?: string;
+    link?: string;
+    current?: string;
+    separator?: string;
+    collapsed?: string;
+    popup?: string;
+  };
+}
+declare const Breadcrumb: ({ items, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse, expandText, itemRender, className, classNames, dir, "aria-label": ariaLabel, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Item, Props, Breadcrumb as default };
+//# sourceMappingURL=Breadcrumb.d.mts.map

package/dist/Breadcrumb.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.mts","names":[],"sources":["../src/components/molecules/breadcrumb.tsx"],"mappings":";UAUiB;EACf,MAAM,MAAM;EACZ,OAAO,MAAM;EACb;EACA,SAAS,MAAM;EACf;EACA,UAAU,MAAM,kBAAkB;EAClC;EACA;;EAEA,OAAO,MAAM;;EAEb,YAAY,MAAM;;UAGH,cAAc,KAC7B,MAAM;EAGN,OAAO;EACP,YAAY,MAAM;;EAElB;EACA;EACA;EACA;;EAEA,cACE,MAAM,MACN,eACA,uBACG,MAAM;EACX;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;cAOE,eAAc,OAAA,WAAA,UAAA,qBAAA,oBAAA,YAAA,YAAA,WAAA,YAAA,mBAAA,cAAA,SAajB,0BAAK,IAAA"}

package/dist/Breadcrumb.mjs

@@ -0,0 +1,103 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import Popover from "./components/atoms/popover.mjs";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/breadcrumb.tsx
+const safeCount = (value, minimum) => Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : minimum;
+const Breadcrumb = ({ items, separator = "/", maxItems = 8, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, expandText = "Show path", itemRender, className, classNames, dir, "aria-label": ariaLabel, ...props }) => {
+	const { direction } = useConfig();
+	const limit = safeCount(maxItems, 3);
+	const before = Math.min(safeCount(itemsBeforeCollapse, 1), limit - 2);
+	const after = Math.min(safeCount(itemsAfterCollapse, 1), limit - before - 1);
+	const collapsed = items.length > limit && items.length - before - after > 0;
+	const visibleIndices = collapsed ? [...Array.from({ length: before }, (_, index) => index), ...Array.from({ length: after }, (_, index) => items.length - after + index)] : items.map((_, index) => index);
+	const hiddenIndices = collapsed ? Array.from({ length: items.length - before - after }, (_, index) => before + index) : [];
+	const renderItem = (index) => {
+		const item = items[index];
+		const isCurrent = index === items.length - 1;
+		if (itemRender) return itemRender(item, index, isCurrent);
+		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon != null && /* @__PURE__ */ jsx("span", {
+			"data-slot": "breadcrumb-icon",
+			"aria-hidden": "true",
+			className: "inline-flex shrink-0",
+			children: item.icon
+		}), item.title] });
+		const itemClassName = cn("inline-flex items-center gap-1.5 rounded-sm", (item.href !== void 0 || item.onClick) && "hover:text-foreground focus-visible:outline-ring focus-visible:outline-2", isCurrent ? "text-foreground font-medium" : "text-muted-foreground", (item.href !== void 0 || item.onClick) && classNames?.link, isCurrent && classNames?.current, item.className);
+		if (item.href !== void 0) return /* @__PURE__ */ jsx("a", {
+			href: item.href,
+			target: item.target,
+			rel: item.rel,
+			onClick: item.onClick,
+			"aria-label": item["aria-label"],
+			"aria-current": isCurrent ? "page" : void 0,
+			className: itemClassName,
+			children: content
+		});
+		if (item.onClick) return /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			size: "small",
+			onClick: item.onClick,
+			"aria-label": item["aria-label"],
+			"aria-current": isCurrent ? "page" : void 0,
+			className: cn("h-auto px-0 py-0 font-normal", itemClassName),
+			children: content
+		});
+		return /* @__PURE__ */ jsx("span", {
+			"aria-label": item["aria-label"],
+			"aria-current": isCurrent ? "page" : void 0,
+			className: itemClassName,
+			children: content
+		});
+	};
+	const renderSeparator = (index) => /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		"aria-hidden": "true",
+		className: cn("text-muted-foreground mx-2 shrink-0", classNames?.separator),
+		children: items[index]?.separator ?? separator
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		"data-slot": "breadcrumb",
+		dir: dir ?? direction,
+		"aria-label": ariaLabel ?? "Breadcrumb",
+		className: cn("text-sm", className),
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-slot": "breadcrumb-list",
+			className: cn("m-0 flex min-w-0 flex-wrap items-center p-0", classNames?.list),
+			children: visibleIndices.map((index, position) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				position > 0 && renderSeparator(collapsed && position === before ? index - 1 : visibleIndices[position - 1]),
+				/* @__PURE__ */ jsx("li", {
+					"data-slot": "breadcrumb-item",
+					className: cn("inline-flex min-w-0 items-center", classNames?.item),
+					children: renderItem(index)
+				}),
+				collapsed && position === before - 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [renderSeparator(index), /* @__PURE__ */ jsx("li", {
+					"data-slot": "breadcrumb-collapsed",
+					className: classNames?.collapsed,
+					children: /* @__PURE__ */ jsx(Popover, {
+						placement: "bottom",
+						className: classNames?.popup,
+						content: /* @__PURE__ */ jsx("ol", {
+							className: "m-0 grid list-none gap-1 p-0",
+							children: hiddenIndices.map((hiddenIndex) => /* @__PURE__ */ jsx("li", { children: renderItem(hiddenIndex) }, items[hiddenIndex]?.key ?? hiddenIndex))
+						}),
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "text",
+							size: "small",
+							"aria-label": expandText,
+							className: "h-auto px-1",
+							children: "…"
+						})
+					})
+				})] })
+			] }, items[index]?.key ?? index))
+		})
+	});
+};
+//#endregion
+export { Breadcrumb as default };
+
+//# sourceMappingURL=Breadcrumb.mjs.map

package/dist/Breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../src/components/molecules/breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport { Fragment } from 'react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport Popover from '../atoms/popover';\n\nexport interface Item {\n  key?: React.Key;\n  title: React.ReactNode;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  rel?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  className?: string;\n  'aria-label'?: string;\n  /** Decorative icon placed before the title. */\n  icon?: React.ReactNode;\n  /** Overrides the separator after this item. */\n  separator?: React.ReactNode;\n}\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'nav'>,\n  'children'\n> {\n  items: Item[];\n  separator?: React.ReactNode;\n  /** Collapse middle items when the trail has more than this many entries. */\n  maxItems?: number;\n  itemsBeforeCollapse?: number;\n  itemsAfterCollapse?: number;\n  expandText?: string;\n  /** Render custom router links. The renderer owns aria-current for the last item. */\n  itemRender?: (\n    item: Item,\n    index: number,\n    isCurrent: boolean,\n  ) => React.ReactNode;\n  classNames?: {\n    list?: string;\n    item?: string;\n    link?: string;\n    current?: string;\n    separator?: string;\n    collapsed?: string;\n    popup?: string;\n  };\n}\n\nconst safeCount = (value: number, minimum: number) =>\n  Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : minimum;\n\nconst Breadcrumb = ({\n  items,\n  separator = '/',\n  maxItems = 8,\n  itemsBeforeCollapse = 1,\n  itemsAfterCollapse = 1,\n  expandText = 'Show path',\n  itemRender,\n  className,\n  classNames,\n  dir,\n  'aria-label': ariaLabel,\n  ...props\n}: Props) => {\n  const { direction } = useConfig();\n  const limit = safeCount(maxItems, 3);\n  const before = Math.min(safeCount(itemsBeforeCollapse, 1), limit - 2);\n  const after = Math.min(safeCount(itemsAfterCollapse, 1), limit - before - 1);\n  const collapsed = items.length > limit && items.length - before - after > 0;\n  const visibleIndices = collapsed\n    ? [\n        ...Array.from({ length: before }, (_, index) => index),\n        ...Array.from(\n          { length: after },\n          (_, index) => items.length - after + index,\n        ),\n      ]\n    : items.map((_, index) => index);\n  const hiddenIndices = collapsed\n    ? Array.from(\n        { length: items.length - before - after },\n        (_, index) => before + index,\n      )\n    : [];\n\n  const renderItem = (index: number) => {\n    const item = items[index]!;\n    const isCurrent = index === items.length - 1;\n\n    if (itemRender) {\n      return itemRender(item, index, isCurrent);\n    }\n\n    const content = (\n      <>\n        {item.icon != null && (\n          <span\n            data-slot=\"breadcrumb-icon\"\n            aria-hidden=\"true\"\n            className=\"inline-flex shrink-0\"\n          >\n            {item.icon}\n          </span>\n        )}\n        {item.title}\n      </>\n    );\n    const itemClassName = cn(\n      'inline-flex items-center gap-1.5 rounded-sm',\n      (item.href !== undefined || item.onClick) &&\n        'hover:text-foreground focus-visible:outline-ring focus-visible:outline-2',\n      isCurrent ? 'text-foreground font-medium' : 'text-muted-foreground',\n      (item.href !== undefined || item.onClick) && classNames?.link,\n      isCurrent && classNames?.current,\n      item.className,\n      //\n    );\n\n    if (item.href !== undefined) {\n      return (\n        <a\n          href={item.href}\n          target={item.target}\n          rel={item.rel}\n          onClick={item.onClick}\n          aria-label={item['aria-label']}\n          aria-current={isCurrent ? 'page' : undefined}\n          className={itemClassName}\n        >\n          {content}\n        </a>\n      );\n    }\n\n    if (item.onClick) {\n      return (\n        <Button\n          variant=\"text\"\n          size=\"small\"\n          onClick={item.onClick}\n          aria-label={item['aria-label']}\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn('h-auto px-0 py-0 font-normal', itemClassName)}\n        >\n          {content}\n        </Button>\n      );\n    }\n\n    return (\n      <span\n        aria-label={item['aria-label']}\n        aria-current={isCurrent ? 'page' : undefined}\n        className={itemClassName}\n      >\n        {content}\n      </span>\n    );\n  };\n\n  const renderSeparator = (index: number) => (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      aria-hidden=\"true\"\n      className={cn(\n        'text-muted-foreground mx-2 shrink-0',\n        classNames?.separator,\n        //\n      )}\n    >\n      {items[index]?.separator ?? separator}\n    </li>\n  );\n\n  return (\n    <nav\n      {...props}\n      data-slot=\"breadcrumb\"\n      dir={dir ?? direction}\n      aria-label={ariaLabel ?? 'Breadcrumb'}\n      className={cn(\n        'text-sm',\n        className, //\n      )}\n    >\n      <ol\n        data-slot=\"breadcrumb-list\"\n        className={cn(\n          'm-0 flex min-w-0 flex-wrap items-center p-0',\n          classNames?.list,\n          //\n        )}\n      >\n        {visibleIndices.map((index, position) => (\n          <Fragment key={items[index]?.key ?? index}>\n            {position > 0 &&\n              renderSeparator(\n                collapsed && position === before\n                  ? index - 1\n                  : visibleIndices[position - 1]!,\n              )}\n            <li\n              data-slot=\"breadcrumb-item\"\n              className={cn(\n                'inline-flex min-w-0 items-center',\n                classNames?.item, //\n              )}\n            >\n              {renderItem(index)}\n            </li>\n            {collapsed && position === before - 1 && (\n              <>\n                {renderSeparator(index)}\n                <li\n                  data-slot=\"breadcrumb-collapsed\"\n                  className={classNames?.collapsed}\n                >\n                  <Popover\n                    placement=\"bottom\"\n                    className={classNames?.popup}\n                    content={\n                      <ol className=\"m-0 grid list-none gap-1 p-0\">\n                        {hiddenIndices.map(hiddenIndex => (\n                          <li key={items[hiddenIndex]?.key ?? hiddenIndex}>\n                            {renderItem(hiddenIndex)}\n                          </li>\n                        ))}\n                      </ol>\n                    }\n                  >\n                    <Button\n                      variant=\"text\"\n                      size=\"small\"\n                      aria-label={expandText}\n                      className=\"h-auto px-1\"\n                    >\n                      …\n                    </Button>\n                  </Popover>\n                </li>\n              </>\n            )}\n          </Fragment>\n        ))}\n      </ol>\n    </nav>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}

package/dist/Button.mjs

@@ -2,8 +2,8 @@
 import { cn } from "./utils.mjs";
 import { useConfig } from "./providers/config/context.mjs";
 import { Button as Button$1 } from "./core/button.mjs";
-import "react";
 import { LoaderCircle } from "lucide-react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/button.tsx
 const Core = Button$1;

package/dist/Pagination.d.mts

@@ -0,0 +1,53 @@
+//#region src/components/molecules/pagination.d.ts
+interface Props extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'children' | 'onChange'> {
+  /** Total number of items, not pages. */
+  total: number;
+  /** Controlled number of items per page. */
+  pageSize?: number;
+  defaultPageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
+  pageSizeOptions?: number[];
+  showSizeChanger?: boolean;
+  /** Render the total and the 1-based inclusive range of visible items. */
+  showTotal?: (total: number, range: [number, number]) => React.ReactNode;
+  showQuickJumper?: boolean;
+  /** 1-based controlled page. */
+  page?: number;
+  defaultPage?: number;
+  onChange?: (page: number) => void;
+  siblingCount?: number;
+  boundaryCount?: number;
+  showFirstLast?: boolean;
+  hideOnSinglePage?: boolean;
+  /** Render available page controls as links to these URLs. */
+  getPageHref?: (page: number) => string;
+  disabled?: boolean;
+  size?: 'small' | 'middle' | 'large';
+  labels?: {
+    navigation?: string;
+    page?: (page: number) => string;
+    previous?: string;
+    next?: string;
+    first?: string;
+    last?: string;
+    pageSize?: string;
+    jump?: string;
+    go?: string;
+  };
+  classNames?: {
+    item?: string;
+    active?: string;
+    previous?: string;
+    next?: string;
+    first?: string;
+    last?: string;
+    ellipsis?: string;
+    total?: string;
+    sizeChanger?: string;
+    jumper?: string;
+  };
+}
+declare const Pagination: ({ total, pageSize, defaultPageSize, onPageSizeChange, pageSizeOptions, showSizeChanger, showTotal, showQuickJumper, page, defaultPage, onChange, siblingCount, boundaryCount, showFirstLast, hideOnSinglePage, getPageHref, disabled, size, labels, className, classNames, "aria-label": ariaLabel, ...props }: Props) => import("react").JSX.Element | null;
+//#endregion
+export { Props, Pagination as default };
+//# sourceMappingURL=Pagination.d.mts.map

package/dist/Pagination.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.mts","names":[],"sources":["../src/components/molecules/pagination.tsx"],"mappings":";UAoBiB,cAAc,KAC7B,MAAM;;EAIN;;EAEA;EACA;EACA,oBAAoB;EACpB;EACA;;EAEA,aAAa,eAAe,4BAA4B,MAAM;EAC9D;;EAEA;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;;EAEA,eAAe;EACf;EACA;EACA;IACE;IACA,QAAQ;IACR;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;cAkEE,eAAc,OAAA,UAAA,iBAAA,kBAAA,iBAAA,iBAAA,WAAA,iBAAA,MAAA,aAAA,UAAA,cAAA,eAAA,eAAA,kBAAA,aAAA,UAAA,MAAA,QAAA,WAAA,0BAAA,cAAA,SAwBjB,0BAAK,IAAA"}