@jbpark/ui-kit 10.1.0 → 10.3.0

package/dist/Alert.d.mts

@@ -0,0 +1,24 @@
+//#region src/components/molecules/alert.d.ts
+type Status = 'info' | 'success' | 'warning' | 'error';
+export 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 { 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;iBAEY,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 { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
+//#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/Anchor.d.mts

@@ -0,0 +1,29 @@
+import { ComponentProps } from "react";
+//#region src/components/molecules/anchor.d.ts
+export interface Item {
+  key: string;
+  href: `#${string}`;
+  title: string;
+  children?: readonly Item[];
+}
+export interface Props extends Omit<ComponentProps<'nav'>, 'children' | 'onChange' | 'onSelect'> {
+  items: readonly Item[];
+  current?: string;
+  defaultCurrent?: string;
+  onChange?: (href: string) => void;
+  onSelect?: (item: Item) => void;
+  container?: HTMLElement | null;
+  offset?: number;
+  smooth?: boolean;
+  updateHash?: boolean;
+  sticky?: boolean;
+  classNames?: {
+    list?: string;
+    link?: string;
+    activeLink?: string;
+  };
+}
+declare const Anchor: ({ items, current, defaultCurrent, onChange, onSelect, container, offset, smooth, updateHash, sticky, className, classNames, dir, ref, "aria-label": ariaLabel, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Anchor as default };
+//# sourceMappingURL=Anchor.d.mts.map

package/dist/Anchor.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.d.mts","names":[],"sources":["../src/components/molecules/anchor.tsx"],"mappings":";;iBAqBiB;EACf;EACA;EACA;EACA,oBAAoB;;iBAGL,cAAc,KAC7B;EAGA,gBAAgB;EAChB;EACA;EACA,YAAY;EACZ,YAAY,MAAM;EAClB,YAAY;EACZ;EACA;EACA;EACA;EACA;IAAe;IAAe;IAAe;;;cAiBzC,WAAU,OAAA,SAAA,gBAAA,UAAA,UAAA,WAAA,QAAA,QAAA,YAAA,QAAA,WAAA,YAAA,KAAA,mBAAA,cAAA,SAiBb,0BAAK,IAAA"}

package/dist/Anchor.mjs

@@ -0,0 +1,120 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import Typography from "./Typography.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useControllableState, useEventListener, useMergedRef } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/anchor.tsx
+function flatten(items) {
+	return items.flatMap((item) => [item, ...flatten(item.children ?? [])]);
+}
+function targetFor(document, href) {
+	try {
+		return href.startsWith("#") ? document.getElementById(decodeURIComponent(href.slice(1))) : null;
+	} catch {
+		return null;
+	}
+}
+const Anchor = ({ items, current, defaultCurrent = "", onChange, onSelect, container, offset = 0, smooth = false, updateHash = true, sticky = false, className, classNames, dir, ref, "aria-label": ariaLabel = "On this page", ...props }) => {
+	const { direction } = useConfig();
+	const [node, setNode] = useState(null);
+	const mergedRef = useMergedRef(ref, setNode);
+	const ownerWindow = node?.ownerDocument.defaultView ?? null;
+	const containerRef = useMemo(() => ({ current: container ?? null }), [container]);
+	const flatItems = useMemo(() => flatten(items), [items]);
+	const resolvedOffset = Number.isFinite(offset) ? offset : 0;
+	const [active, setActive] = useControllableState({
+		value: current,
+		defaultValue: defaultCurrent,
+		onChange
+	});
+	const update = useCallback(() => {
+		if (!node) return;
+		const boundary = container ? container.getBoundingClientRect().top + container.clientTop + resolvedOffset : resolvedOffset;
+		let next = "";
+		let closest = -Infinity;
+		for (const item of flatItems) {
+			const target = targetFor(node.ownerDocument, item.href);
+			if (!target || container && !container.contains(target)) continue;
+			const top = target.getBoundingClientRect().top;
+			if (top <= boundary + 1 && top > closest) {
+				closest = top;
+				next = item.href;
+			}
+		}
+		if (next !== active) setActive(next);
+	}, [
+		node,
+		container,
+		resolvedOffset,
+		flatItems,
+		active,
+		setActive
+	]);
+	useEventListener("scroll", update, {
+		target: containerRef,
+		passive: true,
+		enabled: !!container
+	});
+	useEventListener("scroll", update, {
+		target: ownerWindow,
+		passive: true,
+		enabled: !container && !!ownerWindow
+	});
+	useEventListener("resize", update, {
+		target: ownerWindow,
+		enabled: !!ownerWindow
+	});
+	useEffect(update, [update]);
+	const renderItems = (links) => /* @__PURE__ */ jsx("ul", {
+		className: cn("m-0 list-none space-y-1 p-0", classNames?.list),
+		children: links.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "m-0",
+			children: [/* @__PURE__ */ jsx(Typography.Link, {
+				href: item.href,
+				"aria-current": active === item.href ? "location" : void 0,
+				className: cn("block border-s-2 border-transparent px-3 py-1 text-sm", active === item.href && "border-primary text-primary font-medium", classNames?.link, active === item.href && classNames?.activeLink),
+				onClick: (event) => {
+					if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+					const target = node && targetFor(node.ownerDocument, item.href);
+					if (!target || !ownerWindow || container && !container.contains(target)) return;
+					event.preventDefault();
+					const behavior = smooth && !ownerWindow.matchMedia("(prefers-reduced-motion: reduce)").matches ? "smooth" : "auto";
+					if (container) container.scrollTo({
+						top: container.scrollTop + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop - resolvedOffset,
+						behavior
+					});
+					else ownerWindow.scrollTo({
+						top: ownerWindow.scrollY + target.getBoundingClientRect().top - resolvedOffset,
+						behavior
+					});
+					if (updateHash && ownerWindow.location.hash !== item.href) ownerWindow.history.pushState(null, "", item.href);
+					if (active !== item.href) setActive(item.href);
+					onSelect?.(item);
+				},
+				children: item.title
+			}), item.children && item.children.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "ps-3",
+				children: renderItems(item.children)
+			})]
+		}, item.key))
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		ref: mergedRef,
+		"data-slot": "anchor",
+		dir: dir ?? direction,
+		"aria-label": ariaLabel,
+		className: cn("min-w-0", sticky && "sticky self-start", className),
+		style: {
+			...sticky ? { top: resolvedOffset } : {},
+			...props.style
+		},
+		children: renderItems(items)
+	});
+};
+//#endregion
+export { Anchor as default };
+
+//# sourceMappingURL=Anchor.mjs.map

package/dist/Anchor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.mjs","names":[],"sources":["../src/components/molecules/anchor.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport {\n  useControllableState,\n  useEventListener,\n  useMergedRef,\n} from '@jbpark/use-hooks';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Typography from '../atoms/typography';\n\nexport interface Item {\n  key: string;\n  href: `#${string}`;\n  title: string;\n  children?: readonly Item[];\n}\n\nexport interface Props extends Omit<\n  ComponentProps<'nav'>,\n  'children' | 'onChange' | 'onSelect'\n> {\n  items: readonly Item[];\n  current?: string;\n  defaultCurrent?: string;\n  onChange?: (href: string) => void;\n  onSelect?: (item: Item) => void;\n  container?: HTMLElement | null;\n  offset?: number;\n  smooth?: boolean;\n  updateHash?: boolean;\n  sticky?: boolean;\n  classNames?: { list?: string; link?: string; activeLink?: string };\n}\n\nfunction flatten(items: readonly Item[]): Item[] {\n  return items.flatMap(item => [item, ...flatten(item.children ?? [])]);\n}\n\nfunction targetFor(document: Document, href: string) {\n  try {\n    return href.startsWith('#')\n      ? document.getElementById(decodeURIComponent(href.slice(1)))\n      : null;\n  } catch {\n    return null;\n  }\n}\n\nconst Anchor = ({\n  items,\n  current,\n  defaultCurrent = '',\n  onChange,\n  onSelect,\n  container,\n  offset = 0,\n  smooth = false,\n  updateHash = true,\n  sticky = false,\n  className,\n  classNames,\n  dir,\n  ref,\n  'aria-label': ariaLabel = 'On this page',\n  ...props\n}: Props) => {\n  const { direction } = useConfig();\n  const [node, setNode] = useState<HTMLElement | null>(null);\n  const mergedRef = useMergedRef(ref, setNode);\n  const ownerWindow = node?.ownerDocument.defaultView ?? null;\n  const containerRef = useMemo(\n    () => ({ current: container ?? null }),\n    [container],\n  );\n  const flatItems = useMemo(() => flatten(items), [items]);\n  const resolvedOffset = Number.isFinite(offset) ? offset : 0;\n  const [active, setActive] = useControllableState<string>({\n    value: current,\n    defaultValue: defaultCurrent,\n    onChange,\n  });\n\n  const update = useCallback(() => {\n    if (!node) {\n      return;\n    }\n\n    const boundary = container\n      ? container.getBoundingClientRect().top +\n        container.clientTop +\n        resolvedOffset\n      : resolvedOffset;\n    let next = '';\n    let closest = -Infinity;\n\n    for (const item of flatItems) {\n      const target = targetFor(node.ownerDocument, item.href);\n\n      if (!target || (container && !container.contains(target))) {\n        continue;\n      }\n\n      const top = target.getBoundingClientRect().top;\n\n      if (top <= boundary + 1 && top > closest) {\n        closest = top;\n        next = item.href;\n      }\n    }\n\n    if (next !== active) {\n      setActive(next);\n    }\n  }, [node, container, resolvedOffset, flatItems, active, setActive]);\n\n  useEventListener('scroll', update, {\n    target: containerRef,\n    passive: true,\n    enabled: !!container,\n  });\n  useEventListener('scroll', update, {\n    target: ownerWindow,\n    passive: true,\n    enabled: !container && !!ownerWindow,\n  });\n  useEventListener('resize', update, {\n    target: ownerWindow,\n    enabled: !!ownerWindow,\n  });\n  useEffect(update, [update]);\n\n  const renderItems = (links: readonly Item[]) => (\n    <ul\n      className={cn(\n        'm-0 list-none space-y-1 p-0',\n        classNames?.list,\n        //\n      )}\n    >\n      {links.map(item => (\n        <li key={item.key} className=\"m-0\">\n          <Typography.Link\n            href={item.href}\n            aria-current={active === item.href ? 'location' : undefined}\n            className={cn(\n              'block border-s-2 border-transparent px-3 py-1 text-sm',\n              active === item.href && 'border-primary text-primary font-medium',\n              classNames?.link,\n              active === item.href && classNames?.activeLink,\n              //\n            )}\n            onClick={event => {\n              if (\n                event.defaultPrevented ||\n                event.button !== 0 ||\n                event.ctrlKey ||\n                event.metaKey ||\n                event.shiftKey ||\n                event.altKey\n              ) {\n                return;\n              }\n\n              const target = node && targetFor(node.ownerDocument, item.href);\n\n              if (\n                !target ||\n                !ownerWindow ||\n                (container && !container.contains(target))\n              ) {\n                return;\n              }\n\n              event.preventDefault();\n\n              const behavior =\n                smooth &&\n                !ownerWindow.matchMedia('(prefers-reduced-motion: reduce)')\n                  .matches\n                  ? 'smooth'\n                  : 'auto';\n\n              if (container) {\n                container.scrollTo({\n                  top:\n                    container.scrollTop +\n                    target.getBoundingClientRect().top -\n                    container.getBoundingClientRect().top -\n                    container.clientTop -\n                    resolvedOffset,\n                  behavior,\n                });\n              } else {\n                ownerWindow.scrollTo({\n                  top:\n                    ownerWindow.scrollY +\n                    target.getBoundingClientRect().top -\n                    resolvedOffset,\n                  behavior,\n                });\n              }\n\n              if (updateHash && ownerWindow.location.hash !== item.href) {\n                ownerWindow.history.pushState(null, '', item.href);\n              }\n\n              if (active !== item.href) {\n                setActive(item.href);\n              }\n\n              onSelect?.(item);\n            }}\n          >\n            {item.title}\n          </Typography.Link>\n          {item.children && item.children.length > 0 && (\n            <div className=\"ps-3\">{renderItems(item.children)}</div>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n\n  return (\n    <nav\n      {...props}\n      ref={mergedRef}\n      data-slot=\"anchor\"\n      dir={dir ?? direction}\n      aria-label={ariaLabel}\n      className={cn(\n        'min-w-0',\n        sticky && 'sticky self-start',\n        className,\n        //\n      )}\n      style={{ ...(sticky ? { top: resolvedOffset } : {}), ...props.style }}\n    >\n      {renderItems(items)}\n    </nav>\n  );\n};\n\nexport default Anchor;\n"],"mappings":"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"}

package/dist/AutoComplete.d.mts

@@ -0,0 +1,34 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/atoms/auto-complete.d.ts
+export interface Option {
+  value: string;
+  label?: string;
+  disabled?: boolean;
+}
+export interface Props extends Omit<ComponentPropsWithRef<'input'>, 'children' | 'onChange' | 'onSelect' | 'value' | 'defaultValue' | 'size' | 'type'> {
+  options: readonly Option[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onSelect?: (value: string, option: Option) => void;
+  filterOption?: false | ((query: string, option: Option) => boolean);
+  allowClear?: boolean;
+  clearLabel?: string;
+  emptyText?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  container?: HTMLElement;
+  classNames?: {
+    input?: string;
+    clear?: string;
+    content?: string;
+    list?: string;
+    option?: string;
+    empty?: string;
+  };
+}
+declare const AutoComplete: ({ options, value, defaultValue, onChange, onSelect, filterOption, allowClear, clearLabel, emptyText, open, defaultOpen, onOpenChange, container, disabled, readOnly, name, form, className, classNames, dir, ref, onKeyDown, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { AutoComplete as default };
+//# sourceMappingURL=AutoComplete.d.mts.map

package/dist/AutoComplete.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.d.mts","names":[],"sources":["../src/components/atoms/auto-complete.tsx"],"mappings":";;iBAaiB;EACf;EACA;EACA;;iBAGe,cAAc,KAC7B;EASA,kBAAkB;EAClB;EACA;EACA,YAAY;EACZ,YAAY,eAAe,QAAQ;EACnC,yBAAyB,eAAe,QAAQ;EAChD;EACA;EACA,YAAY;EACZ;EACA;EACA,gBAAgB;EAChB,YAAY;EACZ;IACE;IACA;IACA;IACA;IACA;IACA;;;cAIE,iBAAgB,SAAA,OAAA,cAAA,UAAA,UAAA,cAAA,YAAA,YAAA,WAAA,MAAA,aAAA,cAAA,WAAA,UAAA,UAAA,MAAA,MAAA,WAAA,YAAA,KAAA,KAAA,cAAA,SAwBnB,0BAAK,IAAA"}

package/dist/AutoComplete.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import { autocomplete_exports } from "./core/autocomplete.mjs";
+import Input from "./components/atoms/input/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+//#region src/components/atoms/auto-complete.tsx
+const AutoComplete = ({ options, value, defaultValue, onChange, onSelect, filterOption, allowClear = true, clearLabel, emptyText = "No suggestions", open, defaultOpen, onOpenChange, container, disabled, readOnly, name, form, className, classNames, dir, ref, onKeyDown, ...props }) => {
+	const { direction, locale } = useConfig();
+	const { Autocomplete: Root, AutocompleteInput, AutocompleteClear, AutocompleteContent, AutocompleteList, AutocompleteItem, AutocompleteEmpty } = autocomplete_exports;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auto-complete",
+		dir: dir ?? direction,
+		className: cn("relative w-full min-w-0", className),
+		children: /* @__PURE__ */ jsxs(Root, {
+			items: options,
+			value,
+			defaultValue,
+			onValueChange: onChange,
+			itemToStringValue: (option) => option.value,
+			filter: filterOption === false ? null : filterOption ? (option, query) => filterOption(query, option) : void 0,
+			disabled,
+			readOnly,
+			name,
+			form,
+			open,
+			defaultOpen,
+			onOpenChange,
+			openOnInputClick: true,
+			children: [
+				/* @__PURE__ */ jsx(AutocompleteInput, {
+					...props,
+					ref,
+					dir: dir ?? direction,
+					onKeyDown: (event) => {
+						onKeyDown?.(event);
+						if (event.key === "Escape" && event.currentTarget.getAttribute("aria-expanded") === "false") event.preventBaseUIHandler();
+					},
+					render: /* @__PURE__ */ jsx(Input, { className: cn(allowClear && !readOnly && "pe-10", classNames?.input) })
+				}),
+				allowClear && !readOnly && /* @__PURE__ */ jsx(AutocompleteClear, {
+					"aria-label": clearLabel ?? locale.clear ?? DEFAULT_LOCALE.clear,
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						size: "small"
+					}),
+					className: cn("absolute end-1 top-1/2 size-7 -translate-y-1/2 p-0", classNames?.clear),
+					children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+				}),
+				/* @__PURE__ */ jsxs(AutocompleteContent, {
+					container,
+					dir: dir ?? direction,
+					className: classNames?.content,
+					children: [/* @__PURE__ */ jsx(AutocompleteEmpty, {
+						className: cn("text-muted-foreground px-3 py-2 text-sm", classNames?.empty),
+						children: emptyText
+					}), /* @__PURE__ */ jsx(AutocompleteList, {
+						className: cn("max-h-60 overflow-y-auto p-1", classNames?.list),
+						children: (option) => /* @__PURE__ */ jsx(AutocompleteItem, {
+							value: option,
+							disabled: option.disabled,
+							onClick: () => {
+								if (!disabled && !readOnly) onSelect?.(option.value, option);
+							},
+							className: cn(`data-highlighted:bg-accent
+                  data-highlighted:text-accent-foreground cursor-default
+                  rounded-sm px-2 py-1.5 text-sm [overflow-wrap:anywhere]
+                  outline-none data-disabled:opacity-50`, classNames?.option),
+							children: option.label ?? option.value
+						}, option.value)
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { AutoComplete as default };
+
+//# sourceMappingURL=AutoComplete.mjs.map

package/dist/AutoComplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.mjs","names":["autocomplete"],"sources":["../src/components/atoms/auto-complete.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { XIcon } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { autocomplete } from '../../core';\nimport Button from './button';\nimport Input from './input';\n\nexport interface Option {\n  value: string;\n  label?: string;\n  disabled?: boolean;\n}\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'input'>,\n  | 'children'\n  | 'onChange'\n  | 'onSelect'\n  | 'value'\n  | 'defaultValue'\n  | 'size'\n  | 'type'\n> {\n  options: readonly Option[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  onSelect?: (value: string, option: Option) => void;\n  filterOption?: false | ((query: string, option: Option) => boolean);\n  allowClear?: boolean;\n  clearLabel?: string;\n  emptyText?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  container?: HTMLElement;\n  classNames?: {\n    input?: string;\n    clear?: string;\n    content?: string;\n    list?: string;\n    option?: string;\n    empty?: string;\n  };\n}\n\nconst AutoComplete = ({\n  options,\n  value,\n  defaultValue,\n  onChange,\n  onSelect,\n  filterOption,\n  allowClear = true,\n  clearLabel,\n  emptyText = 'No suggestions',\n  open,\n  defaultOpen,\n  onOpenChange,\n  container,\n  disabled,\n  readOnly,\n  name,\n  form,\n  className,\n  classNames,\n  dir,\n  ref,\n  onKeyDown,\n  ...props\n}: Props) => {\n  const { direction, locale } = useConfig();\n  const {\n    Autocomplete: Root,\n    AutocompleteInput,\n    AutocompleteClear,\n    AutocompleteContent,\n    AutocompleteList,\n    AutocompleteItem,\n    AutocompleteEmpty,\n  } = autocomplete;\n\n  return (\n    <div\n      data-slot=\"auto-complete\"\n      dir={dir ?? direction}\n      className={cn(\n        'relative w-full min-w-0',\n        className, //\n      )}\n    >\n      <Root\n        items={options}\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={onChange}\n        itemToStringValue={option => option.value}\n        filter={\n          filterOption === false\n            ? null\n            : filterOption\n              ? (option, query) => filterOption(query, option)\n              : undefined\n        }\n        disabled={disabled}\n        readOnly={readOnly}\n        name={name}\n        form={form}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        openOnInputClick\n      >\n        <AutocompleteInput\n          {...props}\n          ref={ref}\n          dir={dir ?? direction}\n          onKeyDown={event => {\n            onKeyDown?.(event);\n\n            // Keep free-form text when Escape reaches a closed popup.\n            if (\n              event.key === 'Escape' &&\n              event.currentTarget.getAttribute('aria-expanded') === 'false'\n            ) {\n              event.preventBaseUIHandler();\n            }\n          }}\n          render={\n            <Input\n              className={cn(\n                allowClear && !readOnly && 'pe-10',\n                classNames?.input, //\n              )}\n            />\n          }\n        />\n        {allowClear && !readOnly && (\n          <AutocompleteClear\n            aria-label={clearLabel ?? locale.clear ?? DEFAULT_LOCALE.clear}\n            render={<Button variant=\"text\" size=\"small\" />}\n            className={cn(\n              'absolute end-1 top-1/2 size-7 -translate-y-1/2 p-0',\n              classNames?.clear, //\n            )}\n          >\n            <XIcon className=\"size-4\" />\n          </AutocompleteClear>\n        )}\n        <AutocompleteContent\n          container={container}\n          dir={dir ?? direction}\n          className={classNames?.content}\n        >\n          <AutocompleteEmpty\n            className={cn(\n              'text-muted-foreground px-3 py-2 text-sm',\n              classNames?.empty, //\n            )}\n          >\n            {emptyText}\n          </AutocompleteEmpty>\n          <AutocompleteList\n            className={cn(\n              'max-h-60 overflow-y-auto p-1',\n              classNames?.list, //\n            )}\n          >\n            {(option: Option) => (\n              <AutocompleteItem\n                key={option.value}\n                value={option}\n                disabled={option.disabled}\n                onClick={() => {\n                  if (!disabled && !readOnly) onSelect?.(option.value, option);\n                }}\n                className={cn(\n                  `data-highlighted:bg-accent\n                  data-highlighted:text-accent-foreground cursor-default\n                  rounded-sm px-2 py-1.5 text-sm [overflow-wrap:anywhere]\n                  outline-none data-disabled:opacity-50`,\n                  classNames?.option, //\n                )}\n              >\n                {option.label ?? option.value}\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompleteContent>\n      </Root>\n    </div>\n  );\n};\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;AAoDA,MAAM,gBAAgB,EACpB,SACA,OACA,cACA,UACA,UACA,cACA,aAAa,MACb,YACA,YAAY,kBACZ,MACA,aACA,cACA,WACA,UACA,UACA,MACA,MACA,WACA,YACA,KACA,KACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,WAAW,UAAU;CACxC,MAAM,EACJ,cAAc,MACd,mBACA,mBACA,qBACA,kBACA,kBACA,sBACEA;CAEJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,KAAK,OAAO;EACZ,WAAW,GACT,2BACA,SACF;EAEA,UAAA,qBAAC,MAAD;GACE,OAAO;GACA;GACO;GACd,eAAe;GACf,oBAAmB,WAAU,OAAO;GACpC,QACE,iBAAiB,QACb,OACA,gBACG,QAAQ,UAAU,aAAa,OAAO,MAAM,IAC7C,KAAA;GAEE;GACA;GACJ;GACA;GACA;GACO;GACC;GACd,kBAAA;GApBF,UAAA;IAsBE,oBAAC,mBAAD;KACE,GAAI;KACC;KACL,KAAK,OAAO;KACZ,YAAW,UAAS;MAClB,YAAY,KAAK;MAGjB,IACE,MAAM,QAAQ,YACd,MAAM,cAAc,aAAa,eAAe,MAAM,SAEtD,MAAM,qBAAqB;KAE/B;KACA,QACE,oBAAC,OAAD,EACE,WAAW,GACT,cAAc,CAAC,YAAY,SAC3B,YAAY,KACd,EACD,CAAA;IAEJ,CAAA;IACA,cAAc,CAAC,YACd,oBAAC,mBAAD;KACE,cAAY,cAAc,OAAO,SAAS,eAAe;KACzD,QAAQ,oBAAC,QAAD;MAAQ,SAAQ;MAAO,MAAK;KAAS,CAAA;KAC7C,WAAW,GACT,sDACA,YAAY,KACd;KAEA,UAAA,oBAAC,OAAD,EAAO,WAAU,SAAU,CAAA;IACV,CAAA;IAErB,qBAAC,qBAAD;KACa;KACX,KAAK,OAAO;KACZ,WAAW,YAAY;KAHzB,UAAA,CAKE,oBAAC,mBAAD;MACE,WAAW,GACT,2CACA,YAAY,KACd;MAEC,UAAA;KACgB,CAAA,GACnB,oBAAC,kBAAD;MACE,WAAW,GACT,gCACA,YAAY,IACd;MAEE,WAAA,WACA,oBAAC,kBAAD;OAEE,OAAO;OACP,UAAU,OAAO;OACjB,eAAe;QACb,IAAI,CAAC,YAAY,CAAC,UAAU,WAAW,OAAO,OAAO,MAAM;OAC7D;OACA,WAAW,GACT;;;0DAIA,YAAY,MACd;OAEC,UAAA,OAAO,SAAS,OAAO;MACR,GAfX,OAAO,KAeI;KAEJ,CAAA,CACC;;GACjB;;CACH,CAAA;AAET"}

package/dist/Avatar.d.mts

@@ -0,0 +1,19 @@
+import { ComponentSize } from "./providers/config/types.mjs";
+//#region src/components/atoms/avatar.d.ts
+export 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 { 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":";;iBAciB,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 { jsx, jsxs } from "react/jsx-runtime";
+import { UserRound } from "lucide-react";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#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';
+export 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 { 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;iBASY,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

@@ -1,5 +1,5 @@
 //#region src/components/molecules/breadcrumb.d.ts
-interface Item {
+export interface Item {
   key?: React.Key;
   title: React.ReactNode;
   href?: string;
@@ -13,7 +13,7 @@ interface Item {
   /** Overrides the separator after this item. */
   separator?: React.ReactNode;
 }
-interface Props extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> {
+export 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. */
@@ -35,5 +35,5 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'>
 }
 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 };
+export { Breadcrumb as default };
 //# sourceMappingURL=Breadcrumb.d.mts.map

package/dist/Breadcrumb.d.mts.map

@@ -1 +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"}
+{"version":3,"file":"Breadcrumb.d.mts","names":[],"sources":["../src/components/molecules/breadcrumb.tsx"],"mappings":";iBAUiB;EACf,MAAM,MAAM;EACZ,OAAO,MAAM;EACb;EACA,SAAS,MAAM;EACf;EACA,UAAU,MAAM,kBAAkB;EAClC;EACA;;EAEA,OAAO,MAAM;;EAEb,YAAY,MAAM;;iBAGH,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

@@ -66,7 +66,7 @@ const Breadcrumb = ({ items, separator = "/", maxItems = 8, itemsBeforeCollapse
 		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),
+			className: cn("m-0 flex min-w-0 list-none 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", {