@jbpark/ui-kit 10.1.0 → 10.3.0

package/dist/Breadcrumb.mjs.map

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

package/dist/Button.d.mts

@@ -1,4 +1,4 @@
-import { Button as Button$1 } from "./core/button.mjs";
+import { Button as Button$1, button_d_exports } from "./core/button.mjs";
 import "./core/index.mjs";
 import { PresetColor } from "./lib/colors.mjs";
 import * as React$1 from "react";
@@ -25,7 +25,7 @@ type ShadcnVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghos
  * would render a normal padded button.
  */
 type ShadcnSize = 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg';
-interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'size' | 'variant' | 'type'> {
+export interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'size' | 'variant' | 'type'> {
   icon?: React$1.ReactNode;
   block?: boolean;
   danger?: boolean;
@@ -92,5 +92,5 @@ interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'size' | 'vari
 }
 declare const Button: ({ icon, className, type, variant, htmlType, size, color, shape, block, disabled, loading, danger, nativeButton, children, onMouseDown, ...props }: Props) => React$1.JSX.Element;
 //#endregion
-export { Props, Button as default };
+export { Button as default };
 //# sourceMappingURL=Button.d.mts.map

package/dist/Button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;;;cAYM,aAAI;;;;;;;;;;;;;KAcL;;;;;;;;KAUA;UAGY,cAAc,KAC7B,QAAM,sBAAsB;EAG5B,OAAO,QAAM;EACb;EACA;EACA;;;;;;;;EAQA,sCAAsC;;;;;;;;;;;;;;;;;;EAkBtC;;;;;;;;;;;;;;;;EAgBA,yEAOI;;;;;;EAMJ;EACA;;;;;;;EAOA,QAAQ;EACR;IAAsB,MAAM,QAAM;;;cAmH9B,WAAU,MAAA,WAAA,MAAA,SAAA,UAAA,MAAA,OAAA,OAAA,OAAA,UAAA,SAAA,QAAA,cAAA,UAAA,gBAAA,SAiBb,UAAK,QAAA,IAAA"}
+{"version":3,"file":"Button.d.mts","names":["button","button.Button","React"],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;;;cAYM,aAAIC;;;;;;;;;;;;;KAcL;;;;;;;;KAUA;iBAGY,cAAc,KAC7BC,QAAM,sBAAsB;EAG5B,OAAOA,QAAM;EACb;EACA;EACA;;;;;;;;EAQA,sCAAsC;;;;;;;;;;;;;;;;;;EAkBtC;;;;;;;;;;;;;;;;EAgBA,yEAOI;;;;;;EAMJ;EACA;;;;;;;EAOA,QAAQ;EACR;IAAsB,MAAMA,QAAM;;;cAmH9B,WAAU,MAAA,WAAA,MAAA,SAAA,UAAA,MAAA,OAAA,OAAA,OAAA,UAAA,SAAA,QAAA,cAAA,UAAA,gBAAA,SAiBb,UAAKA,QAAA,IAAA"}

package/dist/Button.mjs

@@ -3,8 +3,8 @@ import { cn } from "./utils.mjs";
 import { useConfig } from "./providers/config/context.mjs";
 import { Button as Button$1 } from "./core/button.mjs";
 import "react";
-import { LoaderCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { LoaderCircle } from "lucide-react";
 //#region src/components/atoms/button.tsx
 const Core = Button$1;
 const BUTTON_BASE = cn("gap-2 whitespace-nowrap font-medium transition-all", "has-[>svg]:px-3");

package/dist/Calendar.d.mts

@@ -0,0 +1,28 @@
+import { Calendar as Calendar$1, calendar_d_exports } from "./core/calendar.mjs";
+import "./core/index.mjs";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/organisms/calendar.d.ts
+type CellRenderer = (date: Date) => ReactNode;
+export interface Props extends Omit<ComponentProps<'div'>, 'onChange' | 'children' | 'defaultValue'> {
+  /** Pass null for an explicitly empty controlled selection. */
+  value?: Date | null;
+  defaultValue?: Date;
+  onChange?: (date: Date | undefined) => void;
+  month?: Date;
+  defaultMonth?: Date;
+  onMonthChange?: (month: Date) => void;
+  disabledDate?: (date: Date) => boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  locale?: ComponentProps<typeof Calendar$1>['locale'];
+  weekStartsOn?: ComponentProps<typeof Calendar$1>['weekStartsOn'];
+  expanded?: boolean;
+  renderDate?: CellRenderer;
+  classNames?: {
+    calendar?: string;
+  };
+}
+declare const Calendar: ({ value, defaultValue, onChange, month, defaultMonth, onMonthChange, disabledDate, minDate, maxDate, locale, weekStartsOn, expanded, renderDate, className, classNames, dir, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Calendar as default };
+//# sourceMappingURL=Calendar.d.mts.map

package/dist/Calendar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.mts","names":["calendar","calendar.Calendar"],"sources":["../src/components/organisms/calendar.tsx"],"mappings":";;;;KAgBK,gBAAgB,MAAM,SAAS;iBAkBnB,cAAc,KAC7B;;EAIA,QAAQ;EACR,eAAe;EACf,YAAY,MAAM;EAClB,QAAQ;EACR,eAAe;EACf,iBAAiB,OAAO;EACxB,gBAAgB,MAAM;EACtB,UAAU;EACV,UAAU;EACV,SAAS,sBAAsBC;EAC/B,eAAe,sBAAsBA;EACrC;EACA,aAAa;EACb;IAAe;;;cAGX,aAAY,OAAA,cAAA,UAAA,OAAA,cAAA,eAAA,cAAA,SAAA,SAAA,QAAA,cAAA,UAAA,YAAA,WAAA,YAAA,QAAA,SAkBf,0BAAK,IAAA"}

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"}