@jbpark/ui-kit 10.2.0 → 10.3.0

package/dist/Calendar.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import { Calendar as Calendar$1, CalendarDayButton } from "./core/calendar.mjs";
+import { createContext, useContext } from "react";
+import { useControllableState } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/calendar.tsx
+const CellContext = createContext(void 0);
+function DayButton(props) {
+	const renderDate = useContext(CellContext);
+	return /* @__PURE__ */ jsxs(CalendarDayButton, {
+		...props,
+		children: [props.children, renderDate && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "max-w-full text-xs",
+			children: renderDate(props.day.date)
+		})]
+	});
+}
+const Calendar = ({ value, defaultValue, onChange, month, defaultMonth, onMonthChange, disabledDate, minDate, maxDate, locale, weekStartsOn, expanded = false, renderDate, className, classNames, dir, ...props }) => {
+	const { direction } = useConfig();
+	const [selected, setSelected] = useControllableState({
+		value,
+		defaultValue,
+		onChange: (date) => onChange?.(date ?? void 0)
+	});
+	const [visibleMonth, setVisibleMonth] = useControllableState({
+		value: month,
+		defaultValue: defaultMonth ?? value ?? defaultValue ?? /* @__PURE__ */ new Date(),
+		onChange: onMonthChange
+	});
+	const disabled = [
+		...disabledDate ? [disabledDate] : [],
+		...minDate ? [{ before: minDate }] : [],
+		...maxDate ? [{ after: maxDate }] : []
+	];
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "calendar",
+		dir: dir ?? direction,
+		className: cn("min-w-0", className),
+		children: /* @__PURE__ */ jsx(CellContext, {
+			value: renderDate,
+			children: /* @__PURE__ */ jsx(Calendar$1, {
+				mode: "single",
+				selected: selected ?? void 0,
+				onSelect: (date) => setSelected(date ?? null),
+				month: visibleMonth,
+				onMonthChange: setVisibleMonth,
+				disabled,
+				locale,
+				weekStartsOn,
+				dir: dir ?? direction,
+				components: { DayButton },
+				className: cn(expanded && "w-full [--cell-size:3.5rem] [&_.rdp-month]:w-full", classNames?.calendar)
+			})
+		})
+	});
+};
+//#endregion
+export { Calendar as default };
+
+//# sourceMappingURL=Calendar.mjs.map

package/dist/Calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.mjs","names":["calendar.CalendarDayButton","calendar.Calendar"],"sources":["../src/components/organisms/calendar.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  type ReactNode,\n  createContext,\n  useContext,\n} from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { calendar } from '../../core';\n\ntype CellRenderer = (date: Date) => ReactNode;\nconst CellContext = createContext<CellRenderer | undefined>(undefined);\n\nfunction DayButton(props: ComponentProps<typeof calendar.CalendarDayButton>) {\n  const renderDate = useContext(CellContext);\n\n  return (\n    <calendar.CalendarDayButton {...props}>\n      {props.children}\n      {renderDate && (\n        <span aria-hidden=\"true\" className=\"max-w-full text-xs\">\n          {renderDate(props.day.date)}\n        </span>\n      )}\n    </calendar.CalendarDayButton>\n  );\n}\n\nexport interface Props extends Omit<\n  ComponentProps<'div'>,\n  'onChange' | 'children' | 'defaultValue'\n> {\n  /** Pass null for an explicitly empty controlled selection. */\n  value?: Date | null;\n  defaultValue?: Date;\n  onChange?: (date: Date | undefined) => void;\n  month?: Date;\n  defaultMonth?: Date;\n  onMonthChange?: (month: Date) => void;\n  disabledDate?: (date: Date) => boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  locale?: ComponentProps<typeof calendar.Calendar>['locale'];\n  weekStartsOn?: ComponentProps<typeof calendar.Calendar>['weekStartsOn'];\n  expanded?: boolean;\n  renderDate?: CellRenderer;\n  classNames?: { calendar?: string };\n}\n\nconst Calendar = ({\n  value,\n  defaultValue,\n  onChange,\n  month,\n  defaultMonth,\n  onMonthChange,\n  disabledDate,\n  minDate,\n  maxDate,\n  locale,\n  weekStartsOn,\n  expanded = false,\n  renderDate,\n  className,\n  classNames,\n  dir,\n  ...props\n}: Props) => {\n  const { direction } = useConfig();\n  const [selected, setSelected] = useControllableState<Date | null | undefined>(\n    {\n      value,\n      defaultValue,\n      onChange: date => onChange?.(date ?? undefined),\n    },\n  );\n  const [visibleMonth, setVisibleMonth] = useControllableState<Date>({\n    value: month,\n    defaultValue: defaultMonth ?? value ?? defaultValue ?? new Date(),\n    onChange: onMonthChange,\n  });\n  const disabled = [\n    ...(disabledDate ? [disabledDate] : []),\n    ...(minDate ? [{ before: minDate }] : []),\n    ...(maxDate ? [{ after: maxDate }] : []),\n  ];\n\n  return (\n    <div\n      {...props}\n      data-slot=\"calendar\"\n      dir={dir ?? direction}\n      className={cn(\n        'min-w-0',\n        className,\n        //\n      )}\n    >\n      <CellContext value={renderDate}>\n        <calendar.Calendar\n          mode=\"single\"\n          selected={selected ?? undefined}\n          onSelect={date => setSelected(date ?? null)}\n          month={visibleMonth}\n          onMonthChange={setVisibleMonth}\n          disabled={disabled}\n          locale={locale}\n          weekStartsOn={weekStartsOn}\n          dir={dir ?? direction}\n          components={{ DayButton }}\n          className={cn(\n            expanded && 'w-full [--cell-size:3.5rem] [&_.rdp-month]:w-full',\n            classNames?.calendar,\n            //\n          )}\n        />\n      </CellContext>\n    </div>\n  );\n};\n\nexport default Calendar;\n"],"mappings":";;;;;;;;AAiBA,MAAM,cAAc,cAAwC,KAAA,CAAS;AAErE,SAAS,UAAU,OAA0D;CAC3E,MAAM,aAAa,WAAW,WAAW;CAEzC,OACE,qBAACA,mBAAD;EAA4B,GAAI;EAAhC,UAAA,CACG,MAAM,UACN,cACC,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChC,UAAA,WAAW,MAAM,IAAI,IAAI;EACtB,CAAA,CAEkB;;AAEhC;AAuBA,MAAM,YAAY,EAChB,OACA,cACA,UACA,OACA,cACA,eACA,cACA,SACA,SACA,QACA,cACA,WAAW,OACX,YACA,WACA,YACA,KACA,GAAG,YACQ;CACX,MAAM,EAAE,cAAc,UAAU;CAChC,MAAM,CAAC,UAAU,eAAe,qBAC9B;EACE;EACA;EACA,WAAU,SAAQ,WAAW,QAAQ,KAAA,CAAS;CAChD,CACF;CACA,MAAM,CAAC,cAAc,mBAAmB,qBAA2B;EACjE,OAAO;EACP,cAAc,gBAAgB,SAAS,gCAAgB,IAAI,KAAK;EAChE,UAAU;CACZ,CAAC;CACD,MAAM,WAAW;EACf,GAAI,eAAe,CAAC,YAAY,IAAI,CAAC;EACrC,GAAI,UAAU,CAAC,EAAE,QAAQ,QAAQ,CAAC,IAAI,CAAC;EACvC,GAAI,UAAU,CAAC,EAAE,OAAO,QAAQ,CAAC,IAAI,CAAC;CACxC;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,KAAK,OAAO;EACZ,WAAW,GACT,WACA,SAEF;EAEA,UAAA,oBAAC,aAAD;GAAa,OAAO;GAClB,UAAA,oBAACC,YAAD;IACE,MAAK;IACL,UAAU,YAAY,KAAA;IACtB,WAAU,SAAQ,YAAY,QAAQ,IAAI;IAC1C,OAAO;IACP,eAAe;IACL;IACF;IACM;IACd,KAAK,OAAO;IACZ,YAAY,EAAE,UAAU;IACxB,WAAW,GACT,YAAY,qDACZ,YAAY,QAEd;GACD,CAAA;EACU,CAAA;CACV,CAAA;AAET"}

package/dist/Card.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/molecules/card.d.ts
-interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {
+export interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {
   title?: React.ReactNode;
   variant?: 'outlined' | 'borderless';
   classNames?: {
@@ -9,5 +9,5 @@ interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {
 }
 declare const Card: ({ title, children, className, classNames, variant, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Card as default };
+export { Card as default };
 //# sourceMappingURL=Card.d.mts.map

package/dist/Card.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.mts","names":[],"sources":["../src/components/molecules/card.tsx"],"mappings":";UAEiB,cAAc,KAC7B,MAAM;EAGN,QAAQ,MAAM;EACd;EACA;IACE;IACA;;;cAIE,SAAQ,OAAA,UAAA,WAAA,YAAA,YAAA,SAOX,0BAAK,IAAA"}
+{"version":3,"file":"Card.d.mts","names":[],"sources":["../src/components/molecules/card.tsx"],"mappings":";iBAEiB,cAAc,KAC7B,MAAM;EAGN,QAAQ,MAAM;EACd;EACA;IACE;IACA;;;cAIE,SAAQ,OAAA,UAAA,WAAA,YAAA,YAAA,SAOX,0BAAK,IAAA"}

package/dist/Cascader.d.mts

@@ -0,0 +1,34 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/atoms/cascader.d.ts
+export interface Option {
+  /** Unique among siblings. Values can repeat under different parents. */
+  value: string;
+  label: string;
+  disabled?: boolean;
+  /** Missing or empty children make this option a selectable leaf. */
+  children?: readonly Option[];
+}
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'value' | 'defaultValue' | 'onChange'> {
+  options: readonly Option[];
+  value?: readonly string[];
+  defaultValue?: readonly string[];
+  onChange?: (path: string[]) => void;
+  disabled?: boolean;
+  allowClear?: boolean;
+  placeholder?: string;
+  backLabel?: string;
+  clearLabel?: string;
+  emptyText?: string;
+  getLevelLabel?: (level: number) => string;
+  classNames?: {
+    trigger?: string;
+    popup?: string;
+    breadcrumb?: string;
+    select?: string;
+    clear?: string;
+  };
+}
+declare const Cascader: ({ options, value, defaultValue, onChange, disabled, allowClear, placeholder, backLabel, clearLabel, emptyText, getLevelLabel, className, classNames, dir, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Cascader as default };
+//# sourceMappingURL=Cascader.d.mts.map

package/dist/Cascader.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cascader.d.mts","names":[],"sources":["../src/components/atoms/cascader.tsx"],"mappings":";;iBAciB;;EAEf;EACA;EACA;;EAEA,oBAAoB;;iBAGL,cAAc,KAC7B;EAGA,kBAAkB;EAClB;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA,iBAAiB;EACjB;IACE;IACA;IACA;IACA;IACA;;;cAwBE,aAAY,SAAA,OAAA,cAAA,UAAA,UAAA,YAAA,aAAA,WAAA,YAAA,WAAA,eAAA,WAAA,YAAA,mBAAA,8BAAA,oCAAA,oBAAA,SAmBf,0BAAK,IAAA"}

package/dist/Cascader.mjs

@@ -0,0 +1,144 @@
+"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 Select from "./components/atoms/select.mjs";
+import { useId, useState } from "react";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, X } from "lucide-react";
+//#region src/components/atoms/cascader.tsx
+const resolvePath = (options, path) => {
+	const result = [];
+	let siblings = options;
+	for (const value of path) {
+		const option = siblings.find((item) => item.value === value && !item.disabled);
+		if (!option) break;
+		result.push(option);
+		siblings = option.children ?? [];
+	}
+	return result;
+};
+const Cascader = ({ options, value, defaultValue = [], onChange, disabled = false, allowClear = true, placeholder = "Choose a path", backLabel = "Back", clearLabel = "Clear selection", emptyText = "No options", getLevelLabel = (level) => `Level ${level}`, className, classNames, dir, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }) => {
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [isOpen, setIsOpen] = useState(false);
+	const [browsePath, setBrowsePath] = useState([]);
+	const selectedPath = value ?? internalValue;
+	const selectedNodes = resolvePath(options, selectedPath);
+	const lastSelected = selectedNodes.at(-1);
+	const hasSelection = selectedPath.length > 0 && selectedNodes.length === selectedPath.length && !lastSelected?.children?.length;
+	const selectedText = hasSelection ? selectedNodes.map((node) => node.label).join(" / ") : placeholder;
+	const resolvedBrowse = resolvePath(options, browsePath);
+	const activeNodes = resolvedBrowse.length === browsePath.length && (browsePath.length === 0 || resolvedBrowse.at(-1)?.children?.length) ? resolvedBrowse : [];
+	const activePath = activeNodes.map((node) => node.value);
+	const currentOptions = activeNodes.at(-1)?.children ?? options;
+	const level = activePath.length + 1;
+	const { direction } = useConfig();
+	const resolvedDirection = dir === "ltr" || dir === "rtl" ? dir : direction;
+	const statusId = useId();
+	const commit = (path) => {
+		if (disabled) return;
+		if (value === void 0) setInternalValue(path);
+		if (path.length !== selectedPath.length || path.some((part, index) => part !== selectedPath[index])) onChange?.(path);
+		setIsOpen(false);
+	};
+	const changeOpen = (open) => {
+		if (open && disabled) return;
+		if (open) setBrowsePath(hasSelection ? [...selectedPath.slice(0, -1)] : []);
+		setIsOpen(open);
+	};
+	return /* @__PURE__ */ jsx(DirectionProvider, {
+		direction: resolvedDirection,
+		children: /* @__PURE__ */ jsxs("div", {
+			...props,
+			"data-slot": "cascader",
+			dir: dir ?? resolvedDirection,
+			className: cn("flex w-full min-w-0 items-center gap-1", className),
+			children: [
+				/* @__PURE__ */ jsx(Popover, {
+					open: isOpen && !disabled,
+					onOpenChange: changeOpen,
+					placement: "bottomLeft",
+					title: ariaLabel ?? placeholder,
+					dir: resolvedDirection,
+					className: cn("w-72 max-w-[calc(100vw-2rem)] p-3", classNames?.popup),
+					content: /* @__PURE__ */ jsxs("div", {
+						"data-slot": "cascader-panel",
+						className: "min-w-0 space-y-3",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								"data-slot": "cascader-breadcrumb",
+								"aria-live": "polite",
+								className: cn("text-muted-foreground text-sm [overflow-wrap:anywhere]", classNames?.breadcrumb),
+								children: activeNodes.length ? activeNodes.map((node) => node.label).join(" / ") : getLevelLabel(1)
+							}),
+							activePath.length > 0 && /* @__PURE__ */ jsx(Button, {
+								variant: "text",
+								size: "small",
+								onClick: () => setBrowsePath(activePath.slice(0, -1)),
+								children: backLabel
+							}),
+							currentOptions.length ? /* @__PURE__ */ jsx(Select, {
+								value: null,
+								dir: resolvedDirection,
+								"aria-label": getLevelLabel(level),
+								placeholder: getLevelLabel(level),
+								className: cn("w-full max-w-full", classNames?.select),
+								options: currentOptions.map((option) => ({
+									label: option.label,
+									value: option.value,
+									disabled: option.disabled
+								})),
+								onChange: (next) => {
+									const option = currentOptions.find((item) => item.value === next && !item.disabled);
+									if (!option) return;
+									const path = [...activePath, option.value];
+									if (option.children?.length) setBrowsePath(path);
+									else commit(path);
+								}
+							}) : /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground m-0 text-sm",
+								children: emptyText
+							})
+						]
+					}),
+					children: /* @__PURE__ */ jsxs(Button, {
+						disabled,
+						"aria-label": ariaLabel,
+						"aria-labelledby": ariaLabelledBy,
+						"aria-describedby": [ariaDescribedBy, statusId].filter(Boolean).join(" "),
+						className: cn("min-w-0 flex-1 justify-between", classNames?.trigger),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: selectedText
+						}), /* @__PURE__ */ jsx(ChevronDown, {
+							"aria-hidden": "true",
+							className: "size-4 shrink-0"
+						})]
+					})
+				}),
+				allowClear && selectedPath.length > 0 && /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					size: "small",
+					disabled,
+					"aria-label": clearLabel,
+					icon: /* @__PURE__ */ jsx(X, {}),
+					onClick: () => commit([]),
+					className: cn("shrink-0", classNames?.clear)
+				}),
+				/* @__PURE__ */ jsx("span", {
+					id: statusId,
+					"data-slot": "cascader-status",
+					className: "sr-only",
+					"aria-live": "polite",
+					children: selectedText
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { Cascader as default };
+
+//# sourceMappingURL=Cascader.mjs.map

package/dist/Cascader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cascader.mjs","names":[],"sources":["../src/components/atoms/cascader.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentPropsWithRef, useId, useState } from 'react';\n\nimport { DirectionProvider } from '@base-ui/react/direction-provider';\nimport { ChevronDown, X } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from './button';\nimport Popover from './popover';\nimport Select from './select';\n\nexport interface Option {\n  /** Unique among siblings. Values can repeat under different parents. */\n  value: string;\n  label: string;\n  disabled?: boolean;\n  /** Missing or empty children make this option a selectable leaf. */\n  children?: readonly Option[];\n}\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children' | 'value' | 'defaultValue' | 'onChange'\n> {\n  options: readonly Option[];\n  value?: readonly string[];\n  defaultValue?: readonly string[];\n  onChange?: (path: string[]) => void;\n  disabled?: boolean;\n  allowClear?: boolean;\n  placeholder?: string;\n  backLabel?: string;\n  clearLabel?: string;\n  emptyText?: string;\n  getLevelLabel?: (level: number) => string;\n  classNames?: {\n    trigger?: string;\n    popup?: string;\n    breadcrumb?: string;\n    select?: string;\n    clear?: string;\n  };\n}\n\nconst resolvePath = (options: readonly Option[], path: readonly string[]) => {\n  const result: Option[] = [];\n  let siblings = options;\n\n  for (const value of path) {\n    const option = siblings.find(\n      item => item.value === value && !item.disabled,\n    );\n\n    if (!option) {\n      break;\n    }\n\n    result.push(option);\n    siblings = option.children ?? [];\n  }\n\n  return result;\n};\n\nconst Cascader = ({\n  options,\n  value,\n  defaultValue = [],\n  onChange,\n  disabled = false,\n  allowClear = true,\n  placeholder = 'Choose a path',\n  backLabel = 'Back',\n  clearLabel = 'Clear selection',\n  emptyText = 'No options',\n  getLevelLabel = level => `Level ${level}`,\n  className,\n  classNames,\n  dir,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: Props) => {\n  const [internalValue, setInternalValue] =\n    useState<readonly string[]>(defaultValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [browsePath, setBrowsePath] = useState<string[]>([]);\n  const selectedPath = value ?? internalValue;\n  const selectedNodes = resolvePath(options, selectedPath);\n  const lastSelected = selectedNodes.at(-1);\n  const hasSelection =\n    selectedPath.length > 0 &&\n    selectedNodes.length === selectedPath.length &&\n    !lastSelected?.children?.length;\n  const selectedText = hasSelection\n    ? selectedNodes.map(node => node.label).join(' / ')\n    : placeholder;\n  const resolvedBrowse = resolvePath(options, browsePath);\n  const activeNodes =\n    resolvedBrowse.length === browsePath.length &&\n    (browsePath.length === 0 || resolvedBrowse.at(-1)?.children?.length)\n      ? resolvedBrowse\n      : [];\n  const activePath = activeNodes.map(node => node.value);\n  const currentOptions = activeNodes.at(-1)?.children ?? options;\n  const level = activePath.length + 1;\n  const { direction } = useConfig();\n  const resolvedDirection = dir === 'ltr' || dir === 'rtl' ? dir : direction;\n  const statusId = useId();\n\n  const commit = (path: string[]) => {\n    if (disabled) {\n      return;\n    }\n\n    if (value === undefined) {\n      setInternalValue(path);\n    }\n\n    if (\n      path.length !== selectedPath.length ||\n      path.some((part, index) => part !== selectedPath[index])\n    ) {\n      onChange?.(path);\n    }\n\n    setIsOpen(false);\n  };\n\n  const changeOpen = (open: boolean) => {\n    if (open && disabled) {\n      return;\n    }\n\n    if (open) {\n      setBrowsePath(hasSelection ? [...selectedPath.slice(0, -1)] : []);\n    }\n\n    setIsOpen(open);\n  };\n\n  return (\n    <DirectionProvider direction={resolvedDirection}>\n      <div\n        {...props}\n        data-slot=\"cascader\"\n        dir={dir ?? resolvedDirection}\n        className={cn(\n          'flex w-full min-w-0 items-center gap-1',\n          className, //\n        )}\n      >\n        <Popover\n          open={isOpen && !disabled}\n          onOpenChange={changeOpen}\n          placement=\"bottomLeft\"\n          title={ariaLabel ?? placeholder}\n          dir={resolvedDirection}\n          className={cn(\n            'w-72 max-w-[calc(100vw-2rem)] p-3',\n            classNames?.popup, //\n          )}\n          content={\n            <div data-slot=\"cascader-panel\" className=\"min-w-0 space-y-3\">\n              <div\n                data-slot=\"cascader-breadcrumb\"\n                aria-live=\"polite\"\n                className={cn(\n                  'text-muted-foreground text-sm [overflow-wrap:anywhere]',\n                  classNames?.breadcrumb, //\n                )}\n              >\n                {activeNodes.length\n                  ? activeNodes.map(node => node.label).join(' / ')\n                  : getLevelLabel(1)}\n              </div>\n              {activePath.length > 0 && (\n                <Button\n                  variant=\"text\"\n                  size=\"small\"\n                  onClick={() => setBrowsePath(activePath.slice(0, -1))}\n                >\n                  {backLabel}\n                </Button>\n              )}\n              {currentOptions.length ? (\n                <Select\n                  value={null}\n                  dir={resolvedDirection}\n                  aria-label={getLevelLabel(level)}\n                  placeholder={getLevelLabel(level)}\n                  className={cn(\n                    'w-full max-w-full',\n                    classNames?.select, //\n                  )}\n                  options={currentOptions.map(option => ({\n                    label: option.label,\n                    value: option.value,\n                    disabled: option.disabled,\n                  }))}\n                  onChange={next => {\n                    const option = currentOptions.find(\n                      item => item.value === next && !item.disabled,\n                    );\n\n                    if (!option) {\n                      return;\n                    }\n\n                    const path = [...activePath, option.value];\n\n                    if (option.children?.length) {\n                      setBrowsePath(path);\n                    } else {\n                      commit(path);\n                    }\n                  }}\n                />\n              ) : (\n                <p className=\"text-muted-foreground m-0 text-sm\">{emptyText}</p>\n              )}\n            </div>\n          }\n        >\n          <Button\n            disabled={disabled}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={[ariaDescribedBy, statusId]\n              .filter(Boolean)\n              .join(' ')}\n            className={cn(\n              'min-w-0 flex-1 justify-between',\n              classNames?.trigger, //\n            )}\n          >\n            <span className=\"truncate\">{selectedText}</span>\n            <ChevronDown aria-hidden=\"true\" className=\"size-4 shrink-0\" />\n          </Button>\n        </Popover>\n        {allowClear && selectedPath.length > 0 && (\n          <Button\n            variant=\"text\"\n            size=\"small\"\n            disabled={disabled}\n            aria-label={clearLabel}\n            icon={<X />}\n            onClick={() => commit([])}\n            className={cn(\n              'shrink-0',\n              classNames?.clear, //\n            )}\n          />\n        )}\n        <span\n          id={statusId}\n          data-slot=\"cascader-status\"\n          className=\"sr-only\"\n          aria-live=\"polite\"\n        >\n          {selectedText}\n        </span>\n      </div>\n    </DirectionProvider>\n  );\n};\n\nexport default Cascader;\n"],"mappings":"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"}

package/dist/CodeEditor.d.mts

@@ -1,6 +1,6 @@
 import CodeMirror, { Extension } from "@uiw/react-codemirror";
 //#region src/components/atoms/code-editor.d.ts
-interface Props extends Omit<React.ComponentProps<typeof CodeMirror>, 'value' | 'extensions' | 'onChange' | 'ref' | 'theme'> {
+export interface Props extends Omit<React.ComponentProps<typeof CodeMirror>, 'value' | 'extensions' | 'onChange' | 'ref' | 'theme'> {
   value: string;
   /** Passed through to CodeMirror; `'100%'` fills the wrapper. */
   height?: string;
@@ -47,5 +47,5 @@ interface Props extends Omit<React.ComponentProps<typeof CodeMirror>, 'value' |
 }
 declare const CodeEditor: ({ value, theme, height, className, extensions: extraExtensions, diff, formatCode, onChange, onSave, onFormatError, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, CodeEditor as default };
+export { CodeEditor as default };
 //# sourceMappingURL=CodeEditor.d.mts.map

package/dist/CodeEditor.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.mts","names":[],"sources":["../src/components/atoms/code-editor.tsx"],"mappings":";;UA2BiB,cAAc,KAC7B,MAAM,sBAAsB;EAG5B;;EAEA;;;;;;;;;;;EAWA,6CAA6C;;EAE7C,aAAa;;;;;;EAMb;IACE;IACA;;;;;;;;EAQF,cAAc,iBAAiB;EAC/B;EACA,YAAY;;EAEZ,UAAU;;;;;;;EAOV,iBAAiB;;cAGb,eAAc,OAAA,OAAA,QAAA,WAAA,YAAA,iBAAA,MAAA,YAAA,UAAA,QAAA,kBAAA,SAYjB,0BAAK,IAAA"}
+{"version":3,"file":"CodeEditor.d.mts","names":[],"sources":["../src/components/atoms/code-editor.tsx"],"mappings":";;iBA2BiB,cAAc,KAC7B,MAAM,sBAAsB;EAG5B;;EAEA;;;;;;;;;;;EAWA,6CAA6C;;EAE7C,aAAa;;;;;;EAMb;IACE;IACA;;;;;;;;EAQF,cAAc,iBAAiB;EAC/B;EACA,YAAY;;EAEZ,UAAU;;;;;;;EAOV,iBAAiB;;cAGb,eAAc,OAAA,OAAA,QAAA,WAAA,YAAA,iBAAA,MAAA,YAAA,UAAA,QAAA,kBAAA,SAYjB,0BAAK,IAAA"}

package/dist/ContextMenu.d.mts

@@ -0,0 +1,33 @@
+import * as React$1 from "react";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+//#region src/components/molecules/context-menu.d.ts
+export type Item = {
+  key: React$1.Key;
+  label: React$1.ReactNode;
+  disabled?: boolean;
+  type?: 'action';
+  onSelect?: () => void;
+} | {
+  key: React$1.Key;
+  type: 'separator';
+};
+export interface Props extends Omit<React$1.ComponentProps<typeof ContextMenu$1.Root>, 'children'> {
+  children: React$1.ReactNode;
+  items: Item[];
+  onSelect?: (key: React$1.Key, item: Extract<Item, {
+    label: React$1.ReactNode;
+  }>) => void;
+  /** Visible action button for touch and discoverability; omit to hide it. */
+  actionLabel?: string;
+  triggerProps?: Omit<React$1.ComponentProps<typeof ContextMenu$1.Trigger>, 'children' | 'render' | 'ref'>;
+  classNames?: {
+    trigger?: string;
+    popup?: string;
+    item?: string;
+    separator?: string;
+  };
+}
+declare const ContextMenu: ({ children, items, onSelect, actionLabel, triggerProps, classNames, disabled, open, defaultOpen, onOpenChange, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { ContextMenu as default };
+//# sourceMappingURL=ContextMenu.d.mts.map

package/dist/ContextMenu.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.mts","names":["React","BaseContextMenu"],"sources":["../src/components/molecules/context-menu.tsx"],"mappings":";;;YAcY;EAEN,KAAKA,QAAM;EACX,OAAOA,QAAM;EACb;EACA;EACA;;EAEA,KAAKA,QAAM;EAAK;;iBAEL,cAAc,KAC7BA,QAAM,sBAAsBC,cAAgB;EAG5C,UAAUD,QAAM;EAChB,OAAO;EACP,YACE,KAAKA,QAAM,KACX,MAAM,QAAQ;IAAQ,OAAOA,QAAM;;;EAGrC;EACA,eAAe,KACbA,QAAM,sBAAsBC,cAAgB;EAG9C;IACE;IACA;IACA;IACA;;;cAIE,gBAAe,UAAA,OAAA,UAAA,aAAA,cAAA,YAAA,UAAA,MAAA,aAAA,iBAAA,SAYlB,UAAKD,QAAA,IAAA"}

package/dist/ContextMenu.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import { OVERLAY_LAYER } from "./lib/z-layers.mjs";
+import Button from "./Button.mjs";
+import * as React$1 from "react";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/molecules/context-menu.tsx
+const ContextMenu = ({ children, items, onSelect, actionLabel, triggerProps, classNames, disabled = false, open, defaultOpen = false, onOpenChange, ...props }) => {
+	const { getContainer, direction } = useConfig();
+	const triggerRef = React$1.useRef(null);
+	const actionRef = React$1.useRef(null);
+	const [isOpen, setIsOpen] = React$1.useState(defaultOpen);
+	const [source, setSource] = React$1.useState("context");
+	const hasActions = items.some((item) => item.type !== "separator");
+	const isInactive = disabled || !hasActions;
+	const resolvedOpen = open ?? isOpen;
+	const resolvedDirection = triggerProps?.dir === "rtl" || triggerProps?.dir === "ltr" ? triggerProps.dir : direction;
+	const handleOpenChange = (nextOpen, details, nextSource) => {
+		onOpenChange?.(nextOpen, details);
+		if (details.isCanceled) return;
+		if (nextOpen) setSource(nextSource);
+		setIsOpen(nextOpen);
+	};
+	const popup = /* @__PURE__ */ jsx(Menu.Portal, {
+		container: getContainer(),
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			sideOffset: 4,
+			className: OVERLAY_LAYER,
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				"data-slot": "context-menu",
+				dir: resolvedDirection,
+				finalFocus: source === "context" ? triggerRef : actionRef,
+				className: cn(`bg-popover text-popover-foreground border-border
+            max-h-[var(--available-height)] max-w-[var(--available-width)]
+            min-w-40 overflow-auto rounded-md border p-1 shadow-md outline-none`, classNames?.popup),
+				children: items.map((item) => item.type === "separator" ? /* @__PURE__ */ jsx(Menu.Separator, { className: cn("bg-border my-1 h-px", classNames?.separator) }, item.key) : /* @__PURE__ */ jsx(Menu.Item, {
+					disabled: item.disabled,
+					className: cn(`data-highlighted:bg-accent
+                    data-highlighted:text-accent-foreground cursor-default
+                    rounded-sm px-3 py-2 text-sm break-words outline-none
+                    data-disabled:opacity-50`, classNames?.item),
+					onClick: () => {
+						item.onSelect?.();
+						onSelect?.(item.key, item);
+					},
+					children: item.label
+				}, item.key))
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs(DirectionProvider, {
+		direction: resolvedDirection,
+		children: [/* @__PURE__ */ jsxs(ContextMenu$1.Root, {
+			...props,
+			actionsRef: source === "context" ? props.actionsRef : void 0,
+			disabled: isInactive,
+			open: resolvedOpen && source === "context",
+			onOpenChange: (nextOpen, details) => handleOpenChange(nextOpen, details, "context"),
+			children: [/* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+				...triggerProps,
+				ref: triggerRef,
+				"data-slot": "context-menu-trigger",
+				dir: triggerProps?.dir ?? resolvedDirection,
+				tabIndex: actionLabel ? -1 : triggerProps?.tabIndex ?? 0,
+				className: cn("focus-visible:ring-ring outline-none focus-visible:ring-2", classNames?.trigger, triggerProps?.className),
+				children
+			}), popup]
+		}), actionLabel && /* @__PURE__ */ jsxs(Menu.Root, {
+			...props,
+			actionsRef: source === "action" ? props.actionsRef : void 0,
+			disabled: isInactive,
+			open: resolvedOpen && source === "action",
+			onOpenChange: (nextOpen, details) => handleOpenChange(nextOpen, details, "action"),
+			children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+				ref: actionRef,
+				render: /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					variant: "text"
+				}),
+				children: actionLabel
+			}), popup]
+		})]
+	});
+};
+//#endregion
+export { ContextMenu as default };
+
+//# sourceMappingURL=ContextMenu.mjs.map

package/dist/ContextMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.mjs","names":["React","BaseMenu","BaseContextMenu"],"sources":["../src/components/molecules/context-menu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';\nimport { DirectionProvider } from '@base-ui/react/direction-provider';\nimport { Menu as BaseMenu } from '@base-ui/react/menu';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../../lib/z-layers';\nimport Button from '../atoms/button';\n\nexport type Item =\n  | {\n      key: React.Key;\n      label: React.ReactNode;\n      disabled?: boolean;\n      type?: 'action';\n      onSelect?: () => void;\n    }\n  | { key: React.Key; type: 'separator' };\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof BaseContextMenu.Root>,\n  'children'\n> {\n  children: React.ReactNode;\n  items: Item[];\n  onSelect?: (\n    key: React.Key,\n    item: Extract<Item, { label: React.ReactNode }>,\n  ) => void;\n  /** Visible action button for touch and discoverability; omit to hide it. */\n  actionLabel?: string;\n  triggerProps?: Omit<\n    React.ComponentProps<typeof BaseContextMenu.Trigger>,\n    'children' | 'render' | 'ref'\n  >;\n  classNames?: {\n    trigger?: string;\n    popup?: string;\n    item?: string;\n    separator?: string;\n  };\n}\n\nconst ContextMenu = ({\n  children,\n  items,\n  onSelect,\n  actionLabel,\n  triggerProps,\n  classNames,\n  disabled = false,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}: Props) => {\n  const { getContainer, direction } = useConfig();\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n  const actionRef = React.useRef<HTMLButtonElement>(null);\n  const [isOpen, setIsOpen] = React.useState(defaultOpen);\n  const [source, setSource] = React.useState<'context' | 'action'>('context');\n  const hasActions = items.some(item => item.type !== 'separator');\n  const isInactive = disabled || !hasActions;\n  const resolvedOpen = open ?? isOpen;\n  const resolvedDirection =\n    triggerProps?.dir === 'rtl' || triggerProps?.dir === 'ltr'\n      ? triggerProps.dir\n      : direction;\n  const handleOpenChange = (\n    nextOpen: boolean,\n    details: Parameters<NonNullable<Props['onOpenChange']>>[1],\n    nextSource: typeof source,\n  ) => {\n    onOpenChange?.(nextOpen, details);\n\n    if (details.isCanceled) {\n      return;\n    }\n\n    if (nextOpen) {\n      setSource(nextSource);\n    }\n\n    setIsOpen(nextOpen);\n  };\n\n  const popup = (\n    <BaseMenu.Portal container={getContainer()}>\n      <BaseMenu.Positioner sideOffset={4} className={OVERLAY_LAYER}>\n        <BaseMenu.Popup\n          data-slot=\"context-menu\"\n          dir={resolvedDirection}\n          finalFocus={source === 'context' ? triggerRef : actionRef}\n          className={cn(\n            `bg-popover text-popover-foreground border-border\n            max-h-[var(--available-height)] max-w-[var(--available-width)]\n            min-w-40 overflow-auto rounded-md border p-1 shadow-md outline-none`,\n            classNames?.popup,\n            //\n          )}\n        >\n          {items.map(item =>\n            item.type === 'separator' ? (\n              <BaseMenu.Separator\n                key={item.key}\n                className={cn(\n                  'bg-border my-1 h-px',\n                  classNames?.separator,\n                  //\n                )}\n              />\n            ) : (\n              <BaseMenu.Item\n                key={item.key}\n                disabled={item.disabled}\n                className={cn(\n                  `data-highlighted:bg-accent\n                    data-highlighted:text-accent-foreground cursor-default\n                    rounded-sm px-3 py-2 text-sm break-words outline-none\n                    data-disabled:opacity-50`,\n                  classNames?.item,\n                  //\n                )}\n                onClick={() => {\n                  item.onSelect?.();\n                  onSelect?.(item.key, item);\n                }}\n              >\n                {item.label}\n              </BaseMenu.Item>\n            ),\n          )}\n        </BaseMenu.Popup>\n      </BaseMenu.Positioner>\n    </BaseMenu.Portal>\n  );\n\n  return (\n    <DirectionProvider direction={resolvedDirection}>\n      <BaseContextMenu.Root\n        {...props}\n        actionsRef={source === 'context' ? props.actionsRef : undefined}\n        disabled={isInactive}\n        open={resolvedOpen && source === 'context'}\n        onOpenChange={(nextOpen, details) =>\n          handleOpenChange(nextOpen, details, 'context')\n        }\n      >\n        <BaseContextMenu.Trigger\n          {...triggerProps}\n          ref={triggerRef}\n          data-slot=\"context-menu-trigger\"\n          dir={triggerProps?.dir ?? resolvedDirection}\n          tabIndex={actionLabel ? -1 : (triggerProps?.tabIndex ?? 0)}\n          className={cn(\n            'focus-visible:ring-ring outline-none focus-visible:ring-2',\n            classNames?.trigger,\n            triggerProps?.className,\n            //\n          )}\n        >\n          {children}\n        </BaseContextMenu.Trigger>\n        {popup}\n      </BaseContextMenu.Root>\n      {actionLabel && (\n        <BaseMenu.Root\n          {...props}\n          actionsRef={source === 'action' ? props.actionsRef : undefined}\n          disabled={isInactive}\n          open={resolvedOpen && source === 'action'}\n          onOpenChange={(nextOpen, details) =>\n            handleOpenChange(nextOpen, details, 'action')\n          }\n        >\n          <BaseMenu.Trigger\n            ref={actionRef}\n            render={<Button size=\"small\" variant=\"text\" />}\n          >\n            {actionLabel}\n          </BaseMenu.Trigger>\n          {popup}\n        </BaseMenu.Root>\n      )}\n    </DirectionProvider>\n  );\n};\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;AAgDA,MAAM,eAAe,EACnB,UACA,OACA,UACA,aACA,cACA,YACA,WAAW,OACX,MACA,cAAc,OACd,cACA,GAAG,YACQ;CACX,MAAM,EAAE,cAAc,cAAc,UAAU;CAC9C,MAAM,aAAaA,QAAM,OAAuB,IAAI;CACpD,MAAM,YAAYA,QAAM,OAA0B,IAAI;CACtD,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAAS,WAAW;CACtD,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA+B,SAAS;CAC1E,MAAM,aAAa,MAAM,MAAK,SAAQ,KAAK,SAAS,WAAW;CAC/D,MAAM,aAAa,YAAY,CAAC;CAChC,MAAM,eAAe,QAAQ;CAC7B,MAAM,oBACJ,cAAc,QAAQ,SAAS,cAAc,QAAQ,QACjD,aAAa,MACb;CACN,MAAM,oBACJ,UACA,SACA,eACG;EACH,eAAe,UAAU,OAAO;EAEhC,IAAI,QAAQ,YACV;EAGF,IAAI,UACF,UAAU,UAAU;EAGtB,UAAU,QAAQ;CACpB;CAEA,MAAM,QACJ,oBAACC,KAAS,QAAV;EAAiB,WAAW,aAAa;EACvC,UAAA,oBAACA,KAAS,YAAV;GAAqB,YAAY;GAAG,WAAW;GAC7C,UAAA,oBAACA,KAAS,OAAV;IACE,aAAU;IACV,KAAK;IACL,YAAY,WAAW,YAAY,aAAa;IAChD,WAAW,GACT;;kFAGA,YAAY,KAEd;IAEC,UAAA,MAAM,KAAI,SACT,KAAK,SAAS,cACZ,oBAACA,KAAS,WAAV,EAEE,WAAW,GACT,uBACA,YAAY,SAEd,EACD,GANM,KAAK,GAMX,IAED,oBAACA,KAAS,MAAV;KAEE,UAAU,KAAK;KACf,WAAW,GACT;;;+CAIA,YAAY,IAEd;KACA,eAAe;MACb,KAAK,WAAW;MAChB,WAAW,KAAK,KAAK,IAAI;KAC3B;KAEC,UAAA,KAAK;IACO,GAhBR,KAAK,GAgBG,CAEnB;GACc,CAAA;EACG,CAAA;CACN,CAAA;CAGnB,OACE,qBAAC,mBAAD;EAAmB,WAAW;EAA9B,UAAA,CACE,qBAACC,cAAgB,MAAjB;GACE,GAAI;GACJ,YAAY,WAAW,YAAY,MAAM,aAAa,KAAA;GACtD,UAAU;GACV,MAAM,gBAAgB,WAAW;GACjC,eAAe,UAAU,YACvB,iBAAiB,UAAU,SAAS,SAAS;GANjD,UAAA,CASE,oBAACA,cAAgB,SAAjB;IACE,GAAI;IACJ,KAAK;IACL,aAAU;IACV,KAAK,cAAc,OAAO;IAC1B,UAAU,cAAc,KAAM,cAAc,YAAY;IACxD,WAAW,GACT,6DACA,YAAY,SACZ,cAAc,SAEhB;IAEC;GACsB,CAAA,GACxB,KACmB;EACrB,CAAA,GAAA,eACC,qBAACD,KAAS,MAAV;GACE,GAAI;GACJ,YAAY,WAAW,WAAW,MAAM,aAAa,KAAA;GACrD,UAAU;GACV,MAAM,gBAAgB,WAAW;GACjC,eAAe,UAAU,YACvB,iBAAiB,UAAU,SAAS,QAAQ;GANhD,UAAA,CASE,oBAACA,KAAS,SAAV;IACE,KAAK;IACL,QAAQ,oBAAC,QAAD;KAAQ,MAAK;KAAQ,SAAQ;IAAQ,CAAA;IAE5C,UAAA;GACe,CAAA,GACjB,KACY;EAEA,CAAA,CAAA;;AAEvB"}

package/dist/Descriptions.d.mts

@@ -0,0 +1,31 @@
+import { ComponentPropsWithRef, Key, ReactNode } from "react";
+//#region src/components/molecules/descriptions.d.ts
+type ColumnCount = 1 | 2 | 3 | 4;
+type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type Columns = ColumnCount | Partial<Record<Breakpoint, ColumnCount>>;
+export interface Item {
+  /** Stable key for the label/value pair. */
+  key: Key;
+  label: ReactNode;
+  /** Missing or null values render empty; zero is preserved. */
+  value?: ReactNode;
+}
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'title'> {
+  items: readonly Item[];
+  title?: ReactNode;
+  /** Defaults to one column, two at md, and three at lg. Omitted breakpoints inherit the previous count. */
+  columns?: Columns;
+  /** Label placement relative to the value. Defaults to horizontal. */
+  orientation?: 'horizontal' | 'vertical';
+  classNames?: {
+    title?: string;
+    list?: string;
+    item?: string;
+    label?: string;
+    value?: string;
+  };
+}
+declare const Descriptions: ({ items, title, columns, orientation, className, classNames, style, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Descriptions as default };
+//# sourceMappingURL=Descriptions.d.mts.map

package/dist/Descriptions.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Descriptions.d.mts","names":[],"sources":["../src/components/molecules/descriptions.tsx"],"mappings":";;KASK;KACA;YAEO,UAAU,cAAc,QAAQ,OAAO,YAAY;iBAE9C;;EAEf,KAAK;EACL,OAAO;;EAEP,QAAQ;;iBAGO,cAAc,KAC7B;EAGA,gBAAgB;EAChB,QAAQ;;EAER,UAAU;;EAEV;EACA;IACE;IACA;IACA;IACA;IACA;;;cAME,iBAAgB,OAAA,OAAA,SAAA,aAAA,WAAA,YAAA,UAAA,SASnB,0BAAK,IAAA"}

package/dist/Descriptions.mjs

@@ -0,0 +1,67 @@
+import { cn } from "./utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/descriptions.tsx
+const BREAKPOINTS = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+const Descriptions = ({ items, title, columns = {
+	base: 1,
+	md: 2,
+	lg: 3
+}, orientation = "horizontal", className, classNames, style, ...props }) => {
+	const columnStyles = {};
+	let count = 1;
+	for (const breakpoint of BREAKPOINTS) {
+		const requested = typeof columns === "number" ? columns : columns[breakpoint];
+		if (requested !== void 0 && Number.isFinite(requested)) count = Math.min(4, Math.max(1, Math.floor(requested)));
+		columnStyles[`--descriptions-columns-${breakpoint}`] = count;
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "descriptions",
+		"data-orientation": orientation,
+		className: cn("text-foreground w-full min-w-0", className),
+		style: {
+			...columnStyles,
+			...style
+		},
+		children: [title != null && /* @__PURE__ */ jsx("div", {
+			"data-slot": "descriptions-title",
+			className: cn("mb-4 text-base font-semibold", classNames?.title),
+			children: title
+		}), /* @__PURE__ */ jsx("dl", {
+			"data-slot": "descriptions-list",
+			className: cn(`m-0 grid
+          grid-cols-[repeat(var(--descriptions-columns-base),minmax(0,1fr))]
+          gap-x-6 gap-y-4
+          sm:grid-cols-[repeat(var(--descriptions-columns-sm),minmax(0,1fr))]
+          md:grid-cols-[repeat(var(--descriptions-columns-md),minmax(0,1fr))]
+          lg:grid-cols-[repeat(var(--descriptions-columns-lg),minmax(0,1fr))]
+          xl:grid-cols-[repeat(var(--descriptions-columns-xl),minmax(0,1fr))]
+          2xl:grid-cols-[repeat(var(--descriptions-columns-2xl),minmax(0,1fr))]`, classNames?.list),
+			children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+				"data-slot": "descriptions-item",
+				className: cn("grid min-w-0 gap-2 text-sm", orientation === "horizontal" ? "grid-cols-[minmax(0,1fr)_minmax(0,2fr)] items-start" : "grid-cols-1 content-start", classNames?.item),
+				children: [/* @__PURE__ */ jsx("dt", {
+					"data-slot": "descriptions-label",
+					className: cn(`text-muted-foreground min-w-0 font-medium
+                [overflow-wrap:anywhere]`, classNames?.label),
+					children: item.label
+				}), /* @__PURE__ */ jsx("dd", {
+					"data-slot": "descriptions-value",
+					className: cn("m-0 min-w-0 [overflow-wrap:anywhere]", classNames?.value),
+					children: item.value
+				})]
+			}, item.key))
+		})]
+	});
+};
+//#endregion
+export { Descriptions as default };
+
+//# sourceMappingURL=Descriptions.mjs.map

package/dist/Descriptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Descriptions.mjs","names":[],"sources":["../src/components/molecules/descriptions.tsx"],"sourcesContent":["import type {\n  CSSProperties,\n  ComponentPropsWithRef,\n  Key,\n  ReactNode,\n} from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\ntype ColumnCount = 1 | 2 | 3 | 4;\ntype Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport type Columns = ColumnCount | Partial<Record<Breakpoint, ColumnCount>>;\n\nexport interface Item {\n  /** Stable key for the label/value pair. */\n  key: Key;\n  label: ReactNode;\n  /** Missing or null values render empty; zero is preserved. */\n  value?: ReactNode;\n}\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children' | 'title'\n> {\n  items: readonly Item[];\n  title?: ReactNode;\n  /** Defaults to one column, two at md, and three at lg. Omitted breakpoints inherit the previous count. */\n  columns?: Columns;\n  /** Label placement relative to the value. Defaults to horizontal. */\n  orientation?: 'horizontal' | 'vertical';\n  classNames?: {\n    title?: string;\n    list?: string;\n    item?: string;\n    label?: string;\n    value?: string;\n  };\n}\n\nconst BREAKPOINTS: Breakpoint[] = ['base', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nconst Descriptions = ({\n  items,\n  title,\n  columns = { base: 1, md: 2, lg: 3 },\n  orientation = 'horizontal',\n  className,\n  classNames,\n  style,\n  ...props\n}: Props) => {\n  const columnStyles: Record<string, number> = {};\n  let count = 1;\n\n  for (const breakpoint of BREAKPOINTS) {\n    const requested =\n      typeof columns === 'number' ? columns : columns[breakpoint];\n\n    if (requested !== undefined && Number.isFinite(requested)) {\n      count = Math.min(4, Math.max(1, Math.floor(requested)));\n    }\n\n    columnStyles[`--descriptions-columns-${breakpoint}`] = count;\n  }\n\n  return (\n    <div\n      {...props}\n      data-slot=\"descriptions\"\n      data-orientation={orientation}\n      className={cn(\n        'text-foreground w-full min-w-0',\n        className, //\n      )}\n      style={{ ...columnStyles, ...style } as CSSProperties}\n    >\n      {title != null && (\n        <div\n          data-slot=\"descriptions-title\"\n          className={cn(\n            'mb-4 text-base font-semibold',\n            classNames?.title, //\n          )}\n        >\n          {title}\n        </div>\n      )}\n      <dl\n        data-slot=\"descriptions-list\"\n        className={cn(\n          `m-0 grid\n          grid-cols-[repeat(var(--descriptions-columns-base),minmax(0,1fr))]\n          gap-x-6 gap-y-4\n          sm:grid-cols-[repeat(var(--descriptions-columns-sm),minmax(0,1fr))]\n          md:grid-cols-[repeat(var(--descriptions-columns-md),minmax(0,1fr))]\n          lg:grid-cols-[repeat(var(--descriptions-columns-lg),minmax(0,1fr))]\n          xl:grid-cols-[repeat(var(--descriptions-columns-xl),minmax(0,1fr))]\n          2xl:grid-cols-[repeat(var(--descriptions-columns-2xl),minmax(0,1fr))]`,\n          classNames?.list,\n          //\n        )}\n      >\n        {items.map(item => (\n          <div\n            key={item.key}\n            data-slot=\"descriptions-item\"\n            className={cn(\n              'grid min-w-0 gap-2 text-sm',\n              orientation === 'horizontal'\n                ? 'grid-cols-[minmax(0,1fr)_minmax(0,2fr)] items-start'\n                : 'grid-cols-1 content-start',\n              classNames?.item,\n              //\n            )}\n          >\n            <dt\n              data-slot=\"descriptions-label\"\n              className={cn(\n                `text-muted-foreground min-w-0 font-medium\n                [overflow-wrap:anywhere]`,\n                classNames?.label, //\n              )}\n            >\n              {item.label}\n            </dt>\n            <dd\n              data-slot=\"descriptions-value\"\n              className={cn(\n                'm-0 min-w-0 [overflow-wrap:anywhere]',\n                classNames?.value, //\n              )}\n            >\n              {item.value}\n            </dd>\n          </div>\n        ))}\n      </dl>\n    </div>\n  );\n};\n\nexport default Descriptions;\n"],"mappings":";;;AAyCA,MAAM,cAA4B;CAAC;CAAQ;CAAM;CAAM;CAAM;CAAM;AAAK;AAExE,MAAM,gBAAgB,EACpB,OACA,OACA,UAAU;CAAE,MAAM;CAAG,IAAI;CAAG,IAAI;AAAE,GAClC,cAAc,cACd,WACA,YACA,OACA,GAAG,YACQ;CACX,MAAM,eAAuC,CAAC;CAC9C,IAAI,QAAQ;CAEZ,KAAK,MAAM,cAAc,aAAa;EACpC,MAAM,YACJ,OAAO,YAAY,WAAW,UAAU,QAAQ;EAElD,IAAI,cAAc,KAAA,KAAa,OAAO,SAAS,SAAS,GACtD,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,SAAS,CAAC,CAAC;EAGxD,aAAa,0BAA0B,gBAAgB;CACzD;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,oBAAkB;EAClB,WAAW,GACT,kCACA,SACF;EACA,OAAO;GAAE,GAAG;GAAc,GAAG;EAAM;EARrC,UAAA,CAUG,SAAS,QACR,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,gCACA,YAAY,KACd;GAEC,UAAA;EACE,CAAA,GAEP,oBAAC,MAAD;GACE,aAAU;GACV,WAAW,GACT;;;;;;;kFAQA,YAAY,IAEd;GAEC,UAAA,MAAM,KAAI,SACT,qBAAC,OAAD;IAEE,aAAU;IACV,WAAW,GACT,8BACA,gBAAgB,eACZ,wDACA,6BACJ,YAAY,IAEd;IAVF,UAAA,CAYE,oBAAC,MAAD;KACE,aAAU;KACV,WAAW,GACT;2CAEA,YAAY,KACd;KAEC,UAAA,KAAK;IACJ,CAAA,GACJ,oBAAC,MAAD;KACE,aAAU;KACV,WAAW,GACT,wCACA,YAAY,KACd;KAEC,UAAA,KAAK;IACJ,CAAA,CACD;GA9BE,GAAA,KAAK,GA8BP,CACN;EACC,CAAA,CACD;;AAET"}

package/dist/Divider.d.mts

@@ -0,0 +1,18 @@
+import { Separator, separator_d_exports } from "./core/separator.mjs";
+import "./core/index.mjs";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/atoms/divider.d.ts
+export interface Props extends Omit<ComponentProps<typeof Separator>, 'children' | 'className'> {
+  children?: ReactNode;
+  variant?: 'solid' | 'dashed' | 'dotted';
+  titlePlacement?: 'start' | 'center' | 'end';
+  className?: string;
+  classNames?: {
+    line?: string;
+    label?: string;
+  };
+}
+declare const Divider: ({ children, orientation, decorative, variant, titlePlacement, className, classNames, dir, "aria-label": ariaLabel, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Divider as default };
+//# sourceMappingURL=Divider.d.mts.map

package/dist/Divider.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.mts","names":["separator","separator.Separator"],"sources":["../src/components/atoms/divider.tsx"],"mappings":";;;;iBASiB,cAAc,KAC7B,sBAAsBC;EAGtB,WAAW;EACX;EACA;EACA;EACA;IACE;IACA;;;cAUE,YAAW,UAAA,aAAA,YAAA,SAAA,gBAAA,WAAA,YAAA,mBAAA,cAAA,SAWd,0BAAK,IAAA"}