@jbpark/ui-kit 10.2.0 → 10.4.0

package/dist/components/organisms/form/field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.mjs","names":[],"sources":["../../../../src/components/organisms/form/field.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentPropsWithRef, type ReactNode, useContext } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { form } from '../../../core';\nimport { type Layout, LayoutContext, RequiredContext } from './context';\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<typeof form.Field.Root>,\n  'className' | 'render' | 'children'\n> {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  children?: ReactNode;\n  required?: boolean;\n  layout?: Layout;\n  className?: string;\n  classNames?: {\n    label?: string;\n    required?: string;\n    content?: string;\n    description?: string;\n    error?: string;\n  };\n}\n\nconst Field = ({\n  label,\n  description,\n  error,\n  children,\n  required = false,\n  layout,\n  invalid,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const inheritedLayout = useContext(LayoutContext);\n  const resolvedLayout = layout ?? inheritedLayout;\n  const hasError =\n    error !== undefined && error !== null && error !== false && error !== '';\n\n  return (\n    <RequiredContext.Provider value={required}>\n      <form.Field.Root\n        {...props}\n        data-slot=\"form-field\"\n        invalid={invalid || hasError}\n        className={cn(\n          'grid min-w-0 gap-2',\n          resolvedLayout === 'horizontal' &&\n            `@md/form:grid-cols-[minmax(0,1fr)_minmax(0,3fr)]\n            @md/form:items-start`,\n          className, //\n        )}\n      >\n        {label != null && (\n          <form.Field.Label\n            data-slot=\"form-label\"\n            className={cn(\n              `flex min-w-0 items-center gap-1 text-sm font-medium\n              data-disabled:opacity-50`,\n              resolvedLayout === 'horizontal' && '@md/form:pt-2',\n              classNames?.label, //\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className={cn(\n                  'text-destructive',\n                  classNames?.required, //\n                )}\n              >\n                *\n              </span>\n            )}\n          </form.Field.Label>\n        )}\n        <div\n          data-slot=\"form-field-content\"\n          className={cn(\n            'flex min-w-0 flex-col gap-1.5',\n            classNames?.content, //\n          )}\n        >\n          {children}\n          {description != null && (\n            <form.Field.Description\n              data-slot=\"form-description\"\n              className={cn(\n                'text-muted-foreground text-sm [overflow-wrap:anywhere]',\n                classNames?.description, //\n              )}\n            >\n              {description}\n            </form.Field.Description>\n          )}\n          <form.Field.Error\n            {...(hasError ? { children: error } : {})}\n            data-slot=\"form-error\"\n            role=\"alert\"\n            match={hasError ? true : undefined}\n            className={cn(\n              'text-destructive text-sm [overflow-wrap:anywhere]',\n              classNames?.error, //\n            )}\n          />\n        </div>\n      </form.Field.Root>\n    </RequiredContext.Provider>\n  );\n};\n\nexport default Field;\n"],"mappings":";;;;;;;AA6BA,MAAM,SAAS,EACb,OACA,aACA,OACA,UACA,WAAW,OACX,QACA,SACA,WACA,YACA,GAAG,YACQ;CACX,MAAM,kBAAkB,WAAW,aAAa;CAChD,MAAM,iBAAiB,UAAU;CACjC,MAAM,WACJ,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;CAExE,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAC/B,UAAA,qBAAA,QAAY,MAAZ;GACE,GAAI;GACJ,aAAU;GACV,SAAS,WAAW;GACpB,WAAW,GACT,sBACA,mBAAmB,gBACjB;mCAEF,SACF;GAVF,UAAA,CAYG,SAAS,QACR,qBAAA,QAAY,OAAZ;IACE,aAAU;IACV,WAAW,GACT;yCAEA,mBAAmB,gBAAgB,iBACnC,YAAY,KACd;IAPF,UAAA,CASG,OACA,YACC,oBAAC,QAAD;KACE,eAAY;KACZ,WAAW,GACT,oBACA,YAAY,QACd;KACD,UAAA;IAEK,CAAA,CAEQ;GAEpB,CAAA,GAAA,qBAAC,OAAD;IACE,aAAU;IACV,WAAW,GACT,iCACA,YAAY,OACd;IALF,UAAA;KAOG;KACA,eAAe,QACd,oBAAA,QAAY,aAAZ;MACE,aAAU;MACV,WAAW,GACT,0DACA,YAAY,WACd;MAEC,UAAA;KACqB,CAAA;KAE1B,oBAAA,QAAY,OAAZ;MACE,GAAK,WAAW,EAAE,UAAU,MAAM,IAAI,CAAC;MACvC,aAAU;MACV,MAAK;MACL,OAAO,WAAW,OAAO,KAAA;MACzB,WAAW,GACT,qDACA,YAAY,KACd;KACD,CAAA;IACE;GACU,CAAA,CAAA;;CACO,CAAA;AAE9B"}

package/dist/components/organisms/form/form.d.mts

@@ -0,0 +1,14 @@
+import { Form as Form$1, form_d_exports } from "../../../core/form.mjs";
+import "../../../core/index.mjs";
+import { Layout } from "./context.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/organisms/form/form.d.ts
+type Values = Record<string, unknown>;
+export interface Props<T extends Values = Values> extends Omit<ComponentPropsWithRef<typeof Form$1<T>>, 'className' | 'render'> {
+  layout?: Layout;
+  className?: string;
+}
+declare const Form: <T extends Values = Values>({ layout, className, dir, ...props }: Props<T>) => import("react").JSX.Element;
+//#endregion
+export { Form as default };
+//# sourceMappingURL=form.d.mts.map

package/dist/components/organisms/form/form.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.mts","names":["form","form.Form"],"sources":["../../../../src/components/organisms/form/form.tsx"],"mappings":";;;;;KAUK,SAAS;iBAEG,MAAM,UAAU,SAAS,gBAAgB,KACxD,6BAA6BC,OAAU;EAGvC,SAAS;EACT;;cAGI,OAAQ,UAAU,SAAS,UAAQ,QAAA,WAAA,QAAA,SAKtC,MAAM,uBAAE,IAAA"}

package/dist/components/organisms/form/form.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { cn } from "../../../utils.mjs";
+import { useConfig } from "../../../providers/config/context.mjs";
+import { Form as Form$1 } from "../../../core/form.mjs";
+import { LayoutContext } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/organisms/form/form.tsx
+const Form = ({ layout = "vertical", className, dir, ...props }) => {
+	const { direction } = useConfig();
+	return /* @__PURE__ */ jsx(LayoutContext.Provider, {
+		value: layout,
+		children: /* @__PURE__ */ jsx(Form$1, {
+			"data-slot": "form",
+			dir: dir ?? direction,
+			className: cn("@container/form flex w-full min-w-0 flex-col gap-5", className),
+			...props
+		})
+	});
+};
+//#endregion
+export { Form as default };
+
+//# sourceMappingURL=form.mjs.map

package/dist/components/organisms/form/form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.mjs","names":["form.Form"],"sources":["../../../../src/components/organisms/form/form.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef } from 'react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { form } from '../../../core';\nimport { type Layout, LayoutContext } from './context';\n\ntype Values = Record<string, unknown>;\n\nexport interface Props<T extends Values = Values> extends Omit<\n  ComponentPropsWithRef<typeof form.Form<T>>,\n  'className' | 'render'\n> {\n  layout?: Layout;\n  className?: string;\n}\n\nconst Form = <T extends Values = Values>({\n  layout = 'vertical',\n  className,\n  dir,\n  ...props\n}: Props<T>) => {\n  const { direction } = useConfig();\n\n  return (\n    <LayoutContext.Provider value={layout}>\n      <form.Form<T>\n        data-slot=\"form\"\n        dir={dir ?? direction}\n        className={cn(\n          '@container/form flex w-full min-w-0 flex-col gap-5',\n          className, //\n        )}\n        {...props}\n      />\n    </LayoutContext.Provider>\n  );\n};\n\nexport default Form;\n"],"mappings":";;;;;;;AAoBA,MAAM,QAAmC,EACvC,SAAS,YACT,WACA,KACA,GAAG,YACW;CACd,MAAM,EAAE,cAAc,UAAU;CAEhC,OACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;EAC7B,UAAA,oBAACA,QAAD;GACE,aAAU;GACV,KAAK,OAAO;GACZ,WAAW,GACT,sDACA,SACF;GACA,GAAI;EACL,CAAA;CACqB,CAAA;AAE5B"}

package/dist/components/organisms/imperative-stack.mjs

@@ -44,8 +44,9 @@ function createImperativeStack({ createRootElement, StackItem }) {
 		}, [container]);
 		const getSnapshot = useCallback(() => getContainerState(container).stack, [container]);
 		const stack = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-		return /* @__PURE__ */ jsx(ConfigSnapshotProvider, { children: stack.map(({ id, ...props }) => /* @__PURE__ */ jsx(StackItem, {
+		return /* @__PURE__ */ jsx(ConfigSnapshotProvider, { children: stack.map(({ id, ...props }, index) => /* @__PURE__ */ jsx(StackItem, {
 			id,
+			index,
 			...props
 		}, id)) });
 	};
@@ -67,6 +68,19 @@ function createImperativeStack({ createRootElement, StackItem }) {
 		state.update?.();
 		return id;
 	};
+	const update = (id, next) => {
+		for (const state of containerStates.values()) {
+			const index = state.stack.findIndex((item) => item.id === id);
+			if (index === -1) continue;
+			state.stack = state.stack.map((item, position) => position === index ? {
+				...next(item),
+				id
+			} : item);
+			state.update?.();
+			return true;
+		}
+		return false;
+	};
 	const destroy = (id) => {
 		if (!id) {
 			containerStates.forEach((state) => {
@@ -97,6 +111,7 @@ function createImperativeStack({ createRootElement, StackItem }) {
 	};
 	return {
 		render,
+		update,
 		destroy,
 		getRootElement
 	};

package/dist/components/organisms/imperative-stack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"imperative-stack.mjs","names":[],"sources":["../../../src/components/organisms/imperative-stack.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport { ConfigSnapshotProvider, getRootConfigValue } from '@repo/ui/providers';\n\n// Monotonic per-session counter for stack item ids. These ids are internal\n// handles (React keys + destroy(id) lookups), not cryptographic, so a plain\n// counter is enough and avoids a runtime `uuid` dependency.\nlet idCounter = 0;\nconst nextId = () => `stack-${(idCounter += 1)}`;\n\n// Shared machinery behind Modal.info/success/error/warning/confirm and\n// Toast.info/success/error/warning — both used to independently\n// reimplement ~120 near-identical lines of this (container-scoped stack,\n// a React root per container, imperative render/destroy). The only parts\n// that actually differ between the two are the DOM node their stack\n// mounts into (position/ARIA) and which component renders each stack\n// entry — everything else here is generic over that.\n\nexport const isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\ntype ContainerState<TProps> = {\n  stack: (TProps & { id: string })[];\n  update: (() => void) | null;\n};\n\nexport interface ImperativeStack<\n  TProps extends { id?: string; container?: HTMLElement },\n> {\n  render: (props: TProps) => string | undefined;\n  destroy: (id?: string) => void;\n  getRootElement: (container?: HTMLElement) => HTMLElement | null;\n}\n\nexport interface ImperativeStackOptions<\n  TProps extends { id?: string; container?: HTMLElement },\n> {\n  /** Creates the DOM node this stack's React root mounts into — not yet\n   * attached to the document; the factory appends it to the target\n   * container itself. Called once per distinct container. */\n  createRootElement: () => HTMLElement;\n  /** Renders one stack entry — typically each caller's \"Static<Thing>\"\n   * component, which owns its own createPortal(..., getRootElement()). */\n  StackItem: React.ComponentType<TProps & { id: string }>;\n}\n\nexport function createImperativeStack<\n  TProps extends { id?: string; container?: HTMLElement },\n>({\n  createRootElement,\n  StackItem,\n}: ImperativeStackOptions<TProps>): ImperativeStack<TProps> {\n  const containerStates = new Map<HTMLElement, ContainerState<TProps>>();\n  const rootElements = new WeakMap<HTMLElement, HTMLElement>();\n  const reactRoots = new Map<HTMLElement, Root>();\n\n  const getContainerState = (\n    container: HTMLElement,\n  ): ContainerState<TProps> => {\n    let state = containerStates.get(container);\n\n    if (!state) {\n      state = { stack: [], update: null };\n      containerStates.set(container, state);\n    }\n\n    return state;\n  };\n\n  // Shared by `render` and `getRootElement` so both agree on the same\n  // target container whenever the caller doesn't pass one explicitly — the\n  // stack's React root (created once, in `render`) and the DOM node a\n  // `StackItem` (e.g. StaticToast) later portals into (calling\n  // `getRootElement` again with the same, possibly-undefined `container`)\n  // would otherwise resolve two different containers here, splitting the\n  // React tree (correctly under the root Config, via ConfigSnapshotProvider\n  // above) from the actual visible DOM (silently back under `document.body`,\n  // outside the Config's themed wrapper — undoing this fix's whole point).\n  const resolveContainer = (container?: HTMLElement): HTMLElement =>\n    container || getRootConfigValue()?.getContainer() || document.body;\n\n  const getRootElement = (container?: HTMLElement): HTMLElement | null => {\n    if (!isBrowser) {\n      return null;\n    }\n\n    const targetContainer = resolveContainer(container);\n    let rootEl = rootElements.get(targetContainer);\n\n    if (!rootEl) {\n      rootEl = createRootElement();\n      targetContainer.appendChild(rootEl);\n      rootElements.set(targetContainer, rootEl);\n    }\n\n    return rootEl;\n  };\n\n  const StackRenderer = ({ container }: { container: HTMLElement }) => {\n    const subscribe = useCallback(\n      (onStoreChange: () => void) => {\n        const state = getContainerState(container);\n        state.update = onStoreChange;\n        return () => {\n          state.update = null;\n        };\n      },\n      [container],\n    );\n\n    const getSnapshot = useCallback(\n      () => getContainerState(container).stack,\n      [container],\n    );\n\n    const stack = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n    return (\n      <ConfigSnapshotProvider>\n        {stack.map(({ id, ...props }) => (\n          <StackItem key={id} id={id} {...(props as TProps)} />\n        ))}\n      </ConfigSnapshotProvider>\n    );\n  };\n\n  const render = (props: TProps): string | undefined => {\n    if (!isBrowser) {\n      return;\n    }\n\n    // An explicit `container` prop always wins (it may be chosen for\n    // layout reasons unrelated to theming); otherwise mount into the root\n    // Config's own themed wrapper element (if one renders — see\n    // `needsWrapper` in config.tsx) so CSS custom properties and the\n    // `.dark` class cascade to this stack via normal DOM inheritance, not\n    // just `document.body` sitting as an unthemed sibling of it.\n    const targetContainer = resolveContainer(props.container);\n    const rootElement = getRootElement(targetContainer)!;\n\n    if (!reactRoots.has(targetContainer)) {\n      const root = createRoot(rootElement);\n      reactRoots.set(targetContainer, root);\n      root.render(<StackRenderer container={targetContainer} />);\n    }\n\n    const state = getContainerState(targetContainer);\n    const id = props.id || nextId();\n    state.stack = [...state.stack, { ...props, id }];\n    state.update?.();\n\n    return id;\n  };\n\n  const destroy = (id?: string) => {\n    if (!id) {\n      containerStates.forEach(state => {\n        state.stack = [];\n        state.update?.();\n      });\n      reactRoots.forEach((root, container) => {\n        root.unmount();\n        rootElements.get(container)?.remove();\n        rootElements.delete(container);\n      });\n      reactRoots.clear();\n      containerStates.clear();\n      return;\n    }\n\n    containerStates.forEach((state, container) => {\n      if (!state.stack.some(item => item.id === id)) {\n        return;\n      }\n\n      state.stack = state.stack.filter(item => item.id !== id);\n      state.update?.();\n\n      if (!state.stack.length) {\n        reactRoots.get(container)?.unmount();\n        reactRoots.delete(container);\n        containerStates.delete(container);\n        rootElements.get(container)?.remove();\n        rootElements.delete(container);\n      }\n    });\n  };\n\n  return { render, destroy, getRootElement };\n}\n"],"mappings":"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"}
+{"version":3,"file":"imperative-stack.mjs","names":[],"sources":["../../../src/components/organisms/imperative-stack.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport { ConfigSnapshotProvider, getRootConfigValue } from '@repo/ui/providers';\n\n// Monotonic per-session counter for stack item ids. These ids are internal\n// handles (React keys + destroy(id) lookups), not cryptographic, so a plain\n// counter is enough and avoids a runtime `uuid` dependency.\nlet idCounter = 0;\nconst nextId = () => `stack-${(idCounter += 1)}`;\n\n// Shared machinery behind Modal.info/success/error/warning/confirm and\n// Toast.info/success/error/warning — both used to independently\n// reimplement ~120 near-identical lines of this (container-scoped stack,\n// a React root per container, imperative render/destroy). The only parts\n// that actually differ between the two are the DOM node their stack\n// mounts into (position/ARIA) and which component renders each stack\n// entry — everything else here is generic over that.\n\nexport const isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\ntype ContainerState<TProps> = {\n  stack: (TProps & { id: string })[];\n  update: (() => void) | null;\n};\n\nexport interface ImperativeStack<\n  TProps extends { id?: string; container?: HTMLElement },\n> {\n  render: (props: TProps) => string | undefined;\n  // Replaces an existing entry's props in place, keeping its position in the\n  // stack; returns false when no container holds `id`.\n  update: (id: string, next: (current: TProps) => TProps) => boolean;\n  destroy: (id?: string) => void;\n  getRootElement: (container?: HTMLElement) => HTMLElement | null;\n}\n\nexport interface ImperativeStackOptions<\n  TProps extends { id?: string; container?: HTMLElement },\n> {\n  /** Creates the DOM node this stack's React root mounts into — not yet\n   * attached to the document; the factory appends it to the target\n   * container itself. Called once per distinct container. */\n  createRootElement: () => HTMLElement;\n  /** Renders one stack entry — typically each caller's \"Static<Thing>\"\n   * component, which owns its own createPortal(..., getRootElement()).\n   * `index` is the entry's position in its container's stack, oldest first. */\n  StackItem: React.ComponentType<TProps & { id: string; index: number }>;\n}\n\nexport function createImperativeStack<\n  TProps extends { id?: string; container?: HTMLElement },\n>({\n  createRootElement,\n  StackItem,\n}: ImperativeStackOptions<TProps>): ImperativeStack<TProps> {\n  const containerStates = new Map<HTMLElement, ContainerState<TProps>>();\n  const rootElements = new WeakMap<HTMLElement, HTMLElement>();\n  const reactRoots = new Map<HTMLElement, Root>();\n\n  const getContainerState = (\n    container: HTMLElement,\n  ): ContainerState<TProps> => {\n    let state = containerStates.get(container);\n\n    if (!state) {\n      state = { stack: [], update: null };\n      containerStates.set(container, state);\n    }\n\n    return state;\n  };\n\n  // Shared by `render` and `getRootElement` so both agree on the same\n  // target container whenever the caller doesn't pass one explicitly — the\n  // stack's React root (created once, in `render`) and the DOM node a\n  // `StackItem` (e.g. StaticToast) later portals into (calling\n  // `getRootElement` again with the same, possibly-undefined `container`)\n  // would otherwise resolve two different containers here, splitting the\n  // React tree (correctly under the root Config, via ConfigSnapshotProvider\n  // above) from the actual visible DOM (silently back under `document.body`,\n  // outside the Config's themed wrapper — undoing this fix's whole point).\n  const resolveContainer = (container?: HTMLElement): HTMLElement =>\n    container || getRootConfigValue()?.getContainer() || document.body;\n\n  const getRootElement = (container?: HTMLElement): HTMLElement | null => {\n    if (!isBrowser) {\n      return null;\n    }\n\n    const targetContainer = resolveContainer(container);\n    let rootEl = rootElements.get(targetContainer);\n\n    if (!rootEl) {\n      rootEl = createRootElement();\n      targetContainer.appendChild(rootEl);\n      rootElements.set(targetContainer, rootEl);\n    }\n\n    return rootEl;\n  };\n\n  const StackRenderer = ({ container }: { container: HTMLElement }) => {\n    const subscribe = useCallback(\n      (onStoreChange: () => void) => {\n        const state = getContainerState(container);\n        state.update = onStoreChange;\n        return () => {\n          state.update = null;\n        };\n      },\n      [container],\n    );\n\n    const getSnapshot = useCallback(\n      () => getContainerState(container).stack,\n      [container],\n    );\n\n    const stack = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n    return (\n      <ConfigSnapshotProvider>\n        {stack.map(({ id, ...props }, index) => (\n          <StackItem key={id} id={id} index={index} {...(props as TProps)} />\n        ))}\n      </ConfigSnapshotProvider>\n    );\n  };\n\n  const render = (props: TProps): string | undefined => {\n    if (!isBrowser) {\n      return;\n    }\n\n    // An explicit `container` prop always wins (it may be chosen for\n    // layout reasons unrelated to theming); otherwise mount into the root\n    // Config's own themed wrapper element (if one renders — see\n    // `needsWrapper` in config.tsx) so CSS custom properties and the\n    // `.dark` class cascade to this stack via normal DOM inheritance, not\n    // just `document.body` sitting as an unthemed sibling of it.\n    const targetContainer = resolveContainer(props.container);\n    const rootElement = getRootElement(targetContainer)!;\n\n    if (!reactRoots.has(targetContainer)) {\n      const root = createRoot(rootElement);\n      reactRoots.set(targetContainer, root);\n      root.render(<StackRenderer container={targetContainer} />);\n    }\n\n    const state = getContainerState(targetContainer);\n    const id = props.id || nextId();\n    state.stack = [...state.stack, { ...props, id }];\n    state.update?.();\n\n    return id;\n  };\n\n  const update = (id: string, next: (current: TProps) => TProps): boolean => {\n    for (const state of containerStates.values()) {\n      const index = state.stack.findIndex(item => item.id === id);\n\n      if (index === -1) {\n        continue;\n      }\n\n      state.stack = state.stack.map((item, position) =>\n        position === index ? { ...next(item), id } : item,\n      );\n      state.update?.();\n\n      return true;\n    }\n\n    return false;\n  };\n\n  const destroy = (id?: string) => {\n    if (!id) {\n      containerStates.forEach(state => {\n        state.stack = [];\n        state.update?.();\n      });\n      reactRoots.forEach((root, container) => {\n        root.unmount();\n        rootElements.get(container)?.remove();\n        rootElements.delete(container);\n      });\n      reactRoots.clear();\n      containerStates.clear();\n      return;\n    }\n\n    containerStates.forEach((state, container) => {\n      if (!state.stack.some(item => item.id === id)) {\n        return;\n      }\n\n      state.stack = state.stack.filter(item => item.id !== id);\n      state.update?.();\n\n      if (!state.stack.length) {\n        reactRoots.get(container)?.unmount();\n        reactRoots.delete(container);\n        containerStates.delete(container);\n        rootElements.get(container)?.remove();\n        rootElements.delete(container);\n      }\n    });\n  };\n\n  return { render, update, destroy, getRootElement };\n}\n"],"mappings":";;;;;;AAUA,IAAI,YAAY;AAChB,MAAM,eAAe,SAAU,aAAa;AAU5C,MAAa,YACX,OAAO,WAAW,eAAe,OAAO,aAAa;AA+BvD,SAAgB,sBAEd,EACA,mBACA,aAC0D;CAC1D,MAAM,kCAAkB,IAAI,IAAyC;CACrE,MAAM,+BAAe,IAAI,QAAkC;CAC3D,MAAM,6BAAa,IAAI,IAAuB;CAE9C,MAAM,qBACJ,cAC2B;EAC3B,IAAI,QAAQ,gBAAgB,IAAI,SAAS;EAEzC,IAAI,CAAC,OAAO;GACV,QAAQ;IAAE,OAAO,CAAC;IAAG,QAAQ;GAAK;GAClC,gBAAgB,IAAI,WAAW,KAAK;EACtC;EAEA,OAAO;CACT;CAWA,MAAM,oBAAoB,cACxB,aAAa,mBAAmB,CAAC,EAAE,aAAa,KAAK,SAAS;CAEhE,MAAM,kBAAkB,cAAgD;EACtE,IAAI,CAAC,WACH,OAAO;EAGT,MAAM,kBAAkB,iBAAiB,SAAS;EAClD,IAAI,SAAS,aAAa,IAAI,eAAe;EAE7C,IAAI,CAAC,QAAQ;GACX,SAAS,kBAAkB;GAC3B,gBAAgB,YAAY,MAAM;GAClC,aAAa,IAAI,iBAAiB,MAAM;EAC1C;EAEA,OAAO;CACT;CAEA,MAAM,iBAAiB,EAAE,gBAA4C;EACnE,MAAM,YAAY,aACf,kBAA8B;GAC7B,MAAM,QAAQ,kBAAkB,SAAS;GACzC,MAAM,SAAS;GACf,aAAa;IACX,MAAM,SAAS;GACjB;EACF,GACA,CAAC,SAAS,CACZ;EAEA,MAAM,cAAc,kBACZ,kBAAkB,SAAS,CAAC,CAAC,OACnC,CAAC,SAAS,CACZ;EAEA,MAAM,QAAQ,qBAAqB,WAAW,aAAa,WAAW;EAEtE,OACE,oBAAC,wBAAD,EAAA,UACG,MAAM,KAAK,EAAE,IAAI,GAAG,SAAS,UAC5B,oBAAC,WAAD;GAAwB;GAAW;GAAO,GAAK;EAAmB,GAAlD,EAAkD,CACnE,EACqB,CAAA;CAE5B;CAEA,MAAM,UAAU,UAAsC;EACpD,IAAI,CAAC,WACH;EASF,MAAM,kBAAkB,iBAAiB,MAAM,SAAS;EACxD,MAAM,cAAc,eAAe,eAAe;EAElD,IAAI,CAAC,WAAW,IAAI,eAAe,GAAG;GACpC,MAAM,OAAO,WAAW,WAAW;GACnC,WAAW,IAAI,iBAAiB,IAAI;GACpC,KAAK,OAAO,oBAAC,eAAD,EAAe,WAAW,gBAAkB,CAAA,CAAC;EAC3D;EAEA,MAAM,QAAQ,kBAAkB,eAAe;EAC/C,MAAM,KAAK,MAAM,MAAM,OAAO;EAC9B,MAAM,QAAQ,CAAC,GAAG,MAAM,OAAO;GAAE,GAAG;GAAO;EAAG,CAAC;EAC/C,MAAM,SAAS;EAEf,OAAO;CACT;CAEA,MAAM,UAAU,IAAY,SAA+C;EACzE,KAAK,MAAM,SAAS,gBAAgB,OAAO,GAAG;GAC5C,MAAM,QAAQ,MAAM,MAAM,WAAU,SAAQ,KAAK,OAAO,EAAE;GAE1D,IAAI,UAAU,IACZ;GAGF,MAAM,QAAQ,MAAM,MAAM,KAAK,MAAM,aACnC,aAAa,QAAQ;IAAE,GAAG,KAAK,IAAI;IAAG;GAAG,IAAI,IAC/C;GACA,MAAM,SAAS;GAEf,OAAO;EACT;EAEA,OAAO;CACT;CAEA,MAAM,WAAW,OAAgB;EAC/B,IAAI,CAAC,IAAI;GACP,gBAAgB,SAAQ,UAAS;IAC/B,MAAM,QAAQ,CAAC;IACf,MAAM,SAAS;GACjB,CAAC;GACD,WAAW,SAAS,MAAM,cAAc;IACtC,KAAK,QAAQ;IACb,aAAa,IAAI,SAAS,CAAC,EAAE,OAAO;IACpC,aAAa,OAAO,SAAS;GAC/B,CAAC;GACD,WAAW,MAAM;GACjB,gBAAgB,MAAM;GACtB;EACF;EAEA,gBAAgB,SAAS,OAAO,cAAc;GAC5C,IAAI,CAAC,MAAM,MAAM,MAAK,SAAQ,KAAK,OAAO,EAAE,GAC1C;GAGF,MAAM,QAAQ,MAAM,MAAM,QAAO,SAAQ,KAAK,OAAO,EAAE;GACvD,MAAM,SAAS;GAEf,IAAI,CAAC,MAAM,MAAM,QAAQ;IACvB,WAAW,IAAI,SAAS,CAAC,EAAE,QAAQ;IACnC,WAAW,OAAO,SAAS;IAC3B,gBAAgB,OAAO,SAAS;IAChC,aAAa,IAAI,SAAS,CAAC,EAAE,OAAO;IACpC,aAAa,OAAO,SAAS;GAC/B;EACF,CAAC;CACH;CAEA,OAAO;EAAE;EAAQ;EAAQ;EAAS;CAAe;AACnD"}

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

@@ -1,9 +1,17 @@
-import Table, { Column, PaginationOptions, Props } from "../../Table.mjs";
-import Drawer, { Props as Props$1 } from "./drawer.mjs";
-import { Props as Props$2 } from "./list/list.mjs";
-import List from "./list/index.mjs";
-import Modal, { Props as Props$3 } from "./modal.mjs";
-import { Props as Props$4 } from "./swiper/swiper.mjs";
-import Swiper from "./swiper/index.mjs";
-import Toast, { ToastOptions as StaticProps } from "./toast.mjs";
-export { Drawer, type Props$1 as DrawerProps, List, type Props$2 as ListProps, Modal, type Props$3 as ModalProps, Swiper, type Props$4 as SwiperProps, Table, type Column as TableColumn, type PaginationOptions as TablePaginationOptions, type Props as TableProps, Toast, type StaticProps as ToastOptions };
+import Calendar, { Props } from "../../Calendar.mjs";
+import Drawer, { Props as Props$1 } from "../../Drawer.mjs";
+import { Props as Props$2 } from "./form/control.mjs";
+import { Props as Props$3 } from "./form/field.mjs";
+import { Props as Props$4 } from "./form/form.mjs";
+import Form from "../../Form.mjs";
+import { Props as Props$5 } from "./list/list.mjs";
+import List from "../../List.mjs";
+import Modal, { Props as Props$6 } from "../../Modal.mjs";
+import { Props as Props$7 } from "./swiper/swiper.mjs";
+import Swiper from "../../Swiper.mjs";
+import Table, { Column, PaginationOptions, Props as Props$8 } from "../../Table.mjs";
+import Toast, { GlobalConfig, Placement, ToastOptions as StaticProps } from "../../Toast.mjs";
+import Tour, { Props as Props$9, Step } from "../../Tour.mjs";
+import Tree, { Actions, ExpandInfo, LoadOptions, Node, Props as Props$10, ScrollOptions } from "../../Tree.mjs";
+import TreeSelect, { Props as Props$11 } from "../../TreeSelect.mjs";
+export { Calendar, type Props as CalendarProps, Drawer, type Props$1 as DrawerProps, Form, type Props$2 as FormControlProps, type Props$3 as FormFieldProps, type Props$4 as FormProps, List, type Props$5 as ListProps, Modal, type Props$6 as ModalProps, Swiper, type Props$7 as SwiperProps, Table, type Column as TableColumn, type PaginationOptions as TablePaginationOptions, type Props$8 as TableProps, Toast, type GlobalConfig as ToastConfig, type StaticProps as ToastOptions, type Placement as ToastPlacement, Tour, type Props$9 as TourProps, type Step as TourStep, Tree, type Actions as TreeActions, type ExpandInfo as TreeExpandInfo, type LoadOptions as TreeLoadOptions, type Node as TreeNode, type Props$10 as TreeProps, type ScrollOptions as TreeScrollOptions, TreeSelect, type Node as TreeSelectNode, type Props$11 as TreeSelectProps };

package/dist/components/organisms/list/list.d.mts

@@ -1,7 +1,7 @@
-import Skeleton from "../../atoms/skeleton/index.mjs";
+import Skeleton from "../../../Skeleton.mjs";
 import React from "react";
 //#region src/components/organisms/list/list.d.ts
-interface Props<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+export interface Props<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
   loading?: boolean;
   loaderProps?: React.ComponentProps<typeof Skeleton>;
   loader?: React.ReactNode;
@@ -34,5 +34,5 @@ interface Props<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'>
 }
 declare const List: <T>({ loading, loaderProps, loader, header, title, titleLevel, empty, scroll, data, className, classNames, renderItem, itemKey, ...props }: Props<T>) => React.JSX.Element;
 //#endregion
-export { Props, List as default };
+export { List as default };
 //# sourceMappingURL=list.d.mts.map

package/dist/components/organisms/list/list.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.mts","names":[],"sources":["../../../../src/components/organisms/list/list.tsx"],"mappings":";;;UAWiB,MAAM,WAAW,KAChC,MAAM;EAGN;EACA,cAAc,MAAM,sBAAsB;EAC1C,SAAS,MAAM;EACf,QAAQ,MAAM;EACd;EACA,SAAS,MAAM;EACf,QAAQ,MAAM;EACd;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA,SAAS,MAAM;IACf,UAAU;;;;;;;;IAQV;;EAEF,OAAO;EACP,cAAc,MAAM,GAAG,kBAAkB,MAAM;EAC/C,WAAW,MAAM,GAAG,kBAAkB,MAAM;;cAGxC,OAAQ,KAAI,SAAA,aAAA,QAAA,QAAA,OAAA,YAAA,OAAA,QAAA,MAAA,WAAA,YAAA,YAAA,YAAA,SAef,MAAM,OAAE,MAAA,IAAA"}
+{"version":3,"file":"list.d.mts","names":[],"sources":["../../../../src/components/organisms/list/list.tsx"],"mappings":";;;iBAWiB,MAAM,WAAW,KAChC,MAAM;EAGN;EACA,cAAc,MAAM,sBAAsB;EAC1C,SAAS,MAAM;EACf,QAAQ,MAAM;EACd;EACA,SAAS,MAAM;EACf,QAAQ,MAAM;EACd;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA,SAAS,MAAM;IACf,UAAU;;;;;;;;IAQV;;EAEF,OAAO;EACP,cAAc,MAAM,GAAG,kBAAkB,MAAM;EAC/C,WAAW,MAAM,GAAG,kBAAkB,MAAM;;cAGxC,OAAQ,KAAI,SAAA,aAAA,QAAA,QAAA,OAAA,YAAA,OAAA,QAAA,MAAA,WAAA,YAAA,YAAA,YAAA,SAef,MAAM,OAAE,MAAA,IAAA"}

package/dist/components/organisms/list/list.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { cn, renderConditional } from "../../../utils.mjs";
 import Title from "../../atoms/typography/title.mjs";
-import Skeleton from "../../atoms/skeleton/index.mjs";
+import Skeleton from "../../../Skeleton.mjs";
 import { useEffect, useRef } from "react";
 import { useIntersectionObserver } from "@jbpark/use-hooks";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/organisms/swiper/swiper.d.mts

@@ -2,7 +2,13 @@ import { SwiperProps } from "swiper/react";
 import "swiper/css";
 import { SwiperModule, SwiperOptions } from "swiper/types";
 //#region src/components/organisms/swiper/swiper.d.ts
-interface Props<T> extends SwiperProps {
+/**
+ * Baseline Swiper options. `navigation` / `autoplay` are inert unless the
+ * matching modules are passed through the `modules` prop — see the README next
+ * to this file.
+ */
+export declare const initialOptions: SwiperOptions;
+export interface Props<T> extends SwiperProps {
   loading?: boolean;
   loader?: React.ReactNode;
   loadingClassName?: string;
@@ -27,5 +33,5 @@ interface Props<T> extends SwiperProps {
 }
 declare const Swiper$1: <T>({ loading, loader, options, modules, data, style, className, renderItem, loadingClassName, ...props }: Props<T>) => import("react").JSX.Element;
 //#endregion
-export { Props, Swiper$1 as default };
+export { Swiper$1 as default };
 //# sourceMappingURL=swiper.d.mts.map

package/dist/components/organisms/swiper/swiper.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"swiper.d.mts","names":[],"sources":["../../../../src/components/organisms/swiper/swiper.tsx"],"mappings":";;;;UA+BiB,MAAM,WAAW;EAChC;EACA,SAAS,MAAM;EACf;EACA,UAAU;;;;;;;;;;;;;;;EAeV,UAAU;EACV,MAAM;EACN,WAAW,MAAM,GAAG,cAAc,MAAM;;cAGpC,WAAU,KAAI,SAAA,QAAA,SAAA,SAAA,MAAA,OAAA,WAAA,YAAA,qBAAA,SAWjB,MAAM,uBAAE,IAAA"}
+{"version":3,"file":"swiper.d.mts","names":["Swiper"],"sources":["../../../../src/components/organisms/swiper/swiper.tsx"],"mappings":";;;;;;;;;qBAkBa,gBAAgB;iBAaZ,MAAM,WAAW;EAChC;EACA,SAAS,MAAM;EACf;EACA,UAAU;;;;;;;;;;;;;;;EAeV,UAAU;EACV,MAAM;EACN,WAAW,MAAM,GAAG,cAAc,MAAM;;cAGpCA,WAAU,KAAI,SAAA,QAAA,SAAA,SAAA,MAAA,OAAA,WAAA,YAAA,qBAAA,SAWjB,MAAM,uBAAE,IAAA"}

package/dist/components/organisms/swiper/swiper.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../../../utils.mjs";
-import Spin from "../../atoms/spin.mjs";
+import Spin from "../../../Spin.mjs";
 import { cloneElement, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Swiper } from "swiper/react";

package/dist/components/templates/grid/col.d.mts

@@ -4,7 +4,7 @@ interface ResponsiveColSpan {
   offset?: number;
 }
 type ColSpanProp = number | ResponsiveColSpan;
-interface Props extends React.ComponentProps<'div'> {
+export interface Props extends React.ComponentProps<'div'> {
   span?: number;
   offset?: number;
   xs?: ColSpanProp;
@@ -16,5 +16,5 @@ interface Props extends React.ComponentProps<'div'> {
 }
 declare const Col: ({ span, offset, xs, sm, md, lg, xl, "2xl": xxl, className, style, children, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Col as default };
+export { Col as default };
 //# sourceMappingURL=col.d.mts.map

package/dist/components/templates/grid/col.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"col.d.mts","names":[],"sources":["../../../../src/components/templates/grid/col.tsx"],"mappings":";UAUU;EACR;EACA;;KAGG,uBAAuB;UAEX,cAAc,MAAM;EACnC;EACA;EACA,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,QAAQ;;cAsDJ,QAAO,MAAA,QAAA,IAAA,IAAA,IAAA,IAAA,WAAA,KAAA,WAAA,OAAA,aAAA,SAaV,0BAAK,IAAA"}
+{"version":3,"file":"col.d.mts","names":[],"sources":["../../../../src/components/templates/grid/col.tsx"],"mappings":";UAUU;EACR;EACA;;KAGG,uBAAuB;iBAEX,cAAc,MAAM;EACnC;EACA;EACA,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,QAAQ;;cAsDJ,QAAO,MAAA,QAAA,IAAA,IAAA,IAAA,IAAA,WAAA,KAAA,WAAA,OAAA,aAAA,SAaV,0BAAK,IAAA"}

package/dist/components/templates/grid/row.d.mts

@@ -13,7 +13,7 @@ declare const JUSTIFY_CLASSES: {
   'space-between': string;
   'space-evenly': string;
 };
-interface Props extends React.ComponentProps<'div'> {
+export interface Props extends React.ComponentProps<'div'> {
   gutter?: number | [number, number];
   align?: keyof typeof ALIGN_CLASSES;
   justify?: keyof typeof JUSTIFY_CLASSES;
@@ -21,5 +21,5 @@ interface Props extends React.ComponentProps<'div'> {
 }
 declare const Row: ({ gutter, align, justify, wrap, className, style, children, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Row as default };
+export { Row as default };
 //# sourceMappingURL=row.d.mts.map

package/dist/components/templates/grid/row.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"row.d.mts","names":[],"sources":["../../../../src/components/templates/grid/row.tsx"],"mappings":";cAQM;;;;;;cAOA;;;;;;;;UASW,cAAc,MAAM;EACnC;EACA,qBAAqB;EACrB,uBAAuB;EACvB;;cAGI,QAAO,QAAA,OAAA,SAAA,MAAA,WAAA,OAAA,aAAA,SASV,0BAAK,IAAA"}
+{"version":3,"file":"row.d.mts","names":[],"sources":["../../../../src/components/templates/grid/row.tsx"],"mappings":";cAQM;;;;;;cAOA;;;;;;;;iBASW,cAAc,MAAM;EACnC;EACA,qBAAqB;EACrB,uBAAuB;EACvB;;cAGI,QAAO,QAAA,OAAA,SAAA,MAAA,WAAA,OAAA,aAAA,SASV,0BAAK,IAAA"}

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

@@ -1,13 +1,12 @@
-import { Props } from "./layout/content.mjs";
-import { Props as Props$1 } from "./layout/footer.mjs";
-import { Props as Props$2 } from "./layout/header.mjs";
-import { Props as Props$3 } from "./layout/layout.mjs";
-import { Props as Props$4 } from "./layout/sider.mjs";
+import Container, { Props } from "../../Container.mjs";
+import { Props as Props$1 } from "./layout/content.mjs";
+import { Props as Props$2 } from "./layout/footer.mjs";
+import { Props as Props$3 } from "./layout/header.mjs";
+import { Props as Props$4 } from "./layout/layout.mjs";
+import { Props as Props$5 } from "./layout/sider.mjs";
 import Layout from "../../Layout.mjs";
-import Container, { Props as Props$5 } from "./container.mjs";
-import Empty, { Props as Props$6 } from "./empty.mjs";
-import Result, { Props as Props$7 } from "./result.mjs";
-import PageHeader, { Props as Props$8 } from "./page-header.mjs";
-import Row, { Props as Props$9 } from "./grid/row.mjs";
-import Col, { Props as Props$10 } from "./grid/col.mjs";
-export { Col, type Props$10 as ColProps, Container, type Props$5 as ContainerProps, type Props as ContentProps, Empty, type Props$6 as EmptyProps, type Props$1 as FooterProps, type Props$2 as HeaderProps, Layout, type Props$3 as LayoutProps, PageHeader, type Props$8 as PageHeaderProps, Result, type Props$7 as ResultProps, Row, type Props$9 as RowProps, type Props$4 as SiderProps };
+import PageHeader, { Props as Props$6 } from "../../PageHeader.mjs";
+import Result, { Props as Props$7 } from "../../Result.mjs";
+import Row, { Props as Props$8 } from "./grid/row.mjs";
+import Col, { Props as Props$9 } from "./grid/col.mjs";
+export { Col, type Props$9 as ColProps, Container, type Props as ContainerProps, type Props$1 as ContentProps, type Props$2 as FooterProps, type Props$3 as HeaderProps, Layout, type Props$4 as LayoutProps, PageHeader, type Props$6 as PageHeaderProps, Result, type Props$7 as ResultProps, Row, type Props$8 as RowProps, type Props$5 as SiderProps };

package/dist/components/templates/layout/content.d.mts

@@ -1,9 +1,9 @@
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/templates/layout/content.d.ts
-interface Props extends Omit<useRender.ComponentProps<'main'>, 'className'> {
+export interface Props extends Omit<useRender.ComponentProps<'main'>, 'className'> {
   className?: string;
 }
 declare const Content: ({ children, className, render, ...props }: Props) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { Props, Content as default };
+export { Content as default };
 //# sourceMappingURL=content.d.mts.map

package/dist/components/templates/layout/content.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.mts","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"mappings":";;UAQiB,cAAc,KAC7B,UAAU;EAGV;;cAGI,YAAW,UAAA,WAAA,WAAA,SAA2C,0BAAK,+CAAA"}
+{"version":3,"file":"content.d.mts","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"mappings":";;iBAQiB,cAAc,KAC7B,UAAU;EAGV;;cAGI,YAAW,UAAA,WAAA,WAAA,SAA2C,0BAAK,+CAAA"}

package/dist/components/templates/layout/footer.d.mts

@@ -1,6 +1,6 @@
 //#region src/components/templates/layout/footer.d.ts
-interface Props extends React.ComponentProps<'footer'> {}
+export interface Props extends React.ComponentProps<'footer'> {}
 declare const Footer: ({ children, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Footer as default };
+export { Footer as default };
 //# sourceMappingURL=footer.d.mts.map

package/dist/components/templates/layout/footer.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.mts","names":[],"sources":["../../../../src/components/templates/layout/footer.tsx"],"mappings":";UAEiB,cAAc,MAAM;cAE/B,WAAU,UAAA,cAAA,SAAmC,0BAAK,IAAA"}
+{"version":3,"file":"footer.d.mts","names":[],"sources":["../../../../src/components/templates/layout/footer.tsx"],"mappings":";iBAEiB,cAAc,MAAM;cAE/B,WAAU,UAAA,cAAA,SAAmC,0BAAK,IAAA"}

package/dist/components/templates/layout/header.d.mts

@@ -1,8 +1,8 @@
 //#region src/components/templates/layout/header.d.ts
-interface Props extends React.ComponentProps<'header'> {
+export interface Props extends React.ComponentProps<'header'> {
   position?: 'sticky' | 'static' | 'fixed';
 }
 declare const Header: ({ children, className, position, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Header as default };
+export { Header as default };
 //# sourceMappingURL=header.d.mts.map

package/dist/components/templates/layout/header.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.mts","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"mappings":";UAIiB,cAAc,MAAM;EACnC;;cAGI,WAAU,UAAA,WAAA,aAAA,SAKb,0BAAK,IAAA"}
+{"version":3,"file":"header.d.mts","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"mappings":";iBAIiB,cAAc,MAAM;EACnC;;cAGI,WAAU,UAAA,WAAA,aAAA,SAKb,0BAAK,IAAA"}

package/dist/components/templates/layout/layout.d.mts

@@ -1,6 +1,6 @@
 //#region src/components/templates/layout/layout.d.ts
-interface Props extends React.ComponentProps<'div'> {}
+export interface Props extends React.ComponentProps<'div'> {}
 declare const Layout: ({ children, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Layout as default };
+export { Layout as default };
 //# sourceMappingURL=layout.d.mts.map

package/dist/components/templates/layout/layout.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.mts","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"mappings":";UAciB,cAAc,MAAM;cAgB/B,WAAU,UAAA,cAAA,SAAmC,0BAAK,IAAA"}
+{"version":3,"file":"layout.d.mts","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"mappings":";iBAciB,cAAc,MAAM;cAgB/B,WAAU,UAAA,cAAA,SAAmC,0BAAK,IAAA"}

package/dist/components/templates/layout/sider.d.mts

@@ -1,6 +1,6 @@
 //#region src/components/templates/layout/sider.d.ts
 type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-interface Props extends Omit<React.ComponentProps<'aside'>, 'onCollapse'> {
+export interface Props extends Omit<React.ComponentProps<'aside'>, 'onCollapse'> {
   width?: number | string;
   collapsedWidth?: number | string;
   collapsible?: boolean;
@@ -18,5 +18,5 @@ interface Props extends Omit<React.ComponentProps<'aside'>, 'onCollapse'> {
 }
 declare const Sider: ({ children, className, classNames, style, width, collapsedWidth, collapsible, defaultCollapsed, collapsed: _collapsed, placement, reverseArrow, trigger, breakpoint, onCollapse, onBreakpoint, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Sider as default };
+export { Sider as default };
 //# sourceMappingURL=sider.d.mts.map

package/dist/components/templates/layout/sider.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"sider.d.mts","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"mappings":";KAYK;UAQY,cAAc,KAC7B,MAAM;EAGN;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU,MAAM;EAChB;IACE;;EAEF,aAAa;EACb,cAAc;EACd,gBAAgB;;cAMZ,UAAS,UAAA,WAAA,YAAA,OAAA,OAAA,gBAAA,aAAA,kBAAA,WAAA,YAAA,WAAA,cAAA,SAAA,YAAA,YAAA,iBAAA,SAiBZ,0BAAK,IAAA"}
+{"version":3,"file":"sider.d.mts","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"mappings":";KAgBK;iBAQY,cAAc,KAC7B,MAAM;EAGN;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU,MAAM;EAChB;IACE;;EAEF,aAAa;EACb,cAAc;EACd,gBAAgB;;cAMZ,UAAS,UAAA,WAAA,YAAA,OAAA,OAAA,gBAAA,aAAA,kBAAA,WAAA,YAAA,WAAA,cAAA,SAAA,YAAA,YAAA,iBAAA,SAiBZ,0BAAK,IAAA"}

package/dist/components/templates/layout/sider.mjs

@@ -2,10 +2,10 @@
 import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import { useRegisterSider } from "./sider-context.mjs";
-import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { useEffect, useId, useRef } from "react";
-import { useControllableState, useResponsiveSize } from "@jbpark/use-hooks";
+import { useControllableState, useLatest, useResponsiveSize } from "@jbpark/use-hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 //#region src/components/templates/layout/sider.tsx
 const BREAKPOINT_ORDER = [
 	"xs",
@@ -30,10 +30,7 @@ const Sider = ({ children, className, classNames, style, width = 200, collapsedW
 	const latestBrokenRef = useRef(broken);
 	const previousBrokenRef = useRef(null);
 	const microtaskScheduledRef = useRef(false);
-	const onBreakpointRef = useRef(onBreakpoint);
-	useEffect(() => {
-		onBreakpointRef.current = onBreakpoint;
-	});
+	const onBreakpointRef = useLatest(onBreakpoint);
 	useEffect(() => {
 		if (!breakpoint) return;
 		latestBrokenRef.current = broken;
@@ -50,7 +47,8 @@ const Sider = ({ children, className, classNames, style, width = 200, collapsedW
 	}, [
 		broken,
 		breakpoint,
-		setCollapsed
+		setCollapsed,
+		onBreakpointRef
 	]);
 	const onTriggerClick = () => {
 		setCollapsed(!collapsed);

package/dist/components/templates/layout/sider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useId, useRef } from 'react';\n\nimport { useControllableState, useResponsiveSize } from '@jbpark/use-hooks';\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { useRegisterSider } from './sider-context';\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n// Order matters here, not the values — used to compare the current\n// viewport tier against the configured `breakpoint` ordinally, since\n// `useResponsiveSize` reports which named tier the viewport is currently\n// in rather than a raw pixel width.\nconst BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nexport interface Props extends Omit<\n  React.ComponentProps<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  placement?: 'left' | 'right';\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  breakpoint?: Breakpoint;\n  onCollapse?: (collapsed: boolean) => void;\n  onBreakpoint?: (broken: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  placement = 'left',\n  reverseArrow = false,\n  trigger,\n  breakpoint,\n  onCollapse,\n  onBreakpoint,\n  ...props\n}: Props) => {\n  useRegisterSider();\n\n  const { locale } = useConfig();\n  const contentId = useId();\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: _collapsed,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapse,\n  });\n\n  const { breakpoint: viewportBreakpoint } = useResponsiveSize({\n    viewport: true,\n  });\n  const broken = breakpoint\n    ? BREAKPOINT_ORDER.indexOf(viewportBreakpoint.current) <\n      BREAKPOINT_ORDER.indexOf(breakpoint)\n    : false;\n\n  const latestBrokenRef = useRef(broken);\n  const previousBrokenRef = useRef<boolean | null>(null);\n  const microtaskScheduledRef = useRef(false);\n  const onBreakpointRef = useRef(onBreakpoint);\n\n  useEffect(() => {\n    onBreakpointRef.current = onBreakpoint;\n  });\n\n  // `useResponsiveSize`'s own initial measurement resolves through its own\n  // layout effect, which (since it's called earlier in this component)\n  // commits and — if the real viewport differs from its SSR-safe 'xs'\n  // placeholder default — triggers a synchronous corrective re-render, all\n  // before the browser paints. Both the placeholder-derived render and the\n  // corrected one get their own effect pass (React doesn't coalesce\n  // same-tick synchronous re-commits into a single effect flush), so\n  // reacting to `broken` directly — in a layout or passive effect either\n  // way — fires once with the wrong placeholder value, then again with the\n  // corrected one.\n  //\n  // Coalescing through a microtask sidesteps that: every effect pass just\n  // records its `broken` into a ref and schedules (at most once) a\n  // microtask that reads whatever ended up latest once the synchronous\n  // cascade has fully settled, and acts on that single, correct value.\n  //\n  // The `previousBrokenRef` guard is the separate fix for #227 point 3:\n  // without it, an inline `onCollapse`/`onBreakpoint` (a fresh identity\n  // every render) would change `setCollapsed`'s own identity and re-run\n  // this effect on every unrelated parent re-render, reapplying `broken`\n  // and undoing a user's manual toggle. Only a genuine change should act.\n  useEffect(() => {\n    if (!breakpoint) {\n      return;\n    }\n\n    latestBrokenRef.current = broken;\n\n    if (microtaskScheduledRef.current) {\n      return;\n    }\n    microtaskScheduledRef.current = true;\n\n    queueMicrotask(() => {\n      microtaskScheduledRef.current = false;\n\n      const settledBroken = latestBrokenRef.current;\n\n      if (previousBrokenRef.current === settledBroken) {\n        return;\n      }\n\n      previousBrokenRef.current = settledBroken;\n      setCollapsed(settledBroken);\n      onBreakpointRef.current?.(settledBroken);\n    });\n  }, [broken, breakpoint, setCollapsed]);\n\n  const onTriggerClick = () => {\n    setCollapsed(!collapsed);\n  };\n\n  // A right-placed Sider's collapse icon should default to pointing the\n  // opposite way from a left-placed one (it's opening/closing a panel on\n  // the other side of the content), so `placement` flips the effective\n  // direction on top of whatever `reverseArrow` already requests —\n  // `reverseArrow` still layers on as a manual override either way.\n  const effectiveReverseArrow = reverseArrow !== (placement === 'right');\n  const TriggerIcon =\n    collapsed !== effectiveReverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      data-slot=\"layout-sider\"\n      className={cn(\n        // Below Header — and below every other floating/overlay primitive\n        // in this library, which all share OVERLAY_LAYER (lib/z-layers.ts).\n        // Sider is a static layout column, not floating chrome, and\n        // previously outranked Header with an arbitrary z-100, covering it\n        // once Header stuck to the viewport top on scroll. Kept as a small\n        // absolute value rather than tracking OVERLAY_LAYER: it only has to\n        // stay under that layer, and raising it in step would defeat this.\n        'z-10 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        // Lets a Sider visually sit on the right without needing to\n        // reorder JSX/children — useful since Sider's presence is\n        // detected via context (sider-context.ts) rather than requiring\n        // it to be a specific direct child in a specific position.\n        placement === 'right' && 'order-last',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div id={contentId} className=\"min-h-0 flex-1 overflow-auto\">\n        {children}\n      </div>\n      {collapsible && trigger !== null && (\n        <button\n          type=\"button\"\n          data-slot=\"layout-sider-trigger\"\n          aria-label={\n            collapsed\n              ? (locale.expand ?? DEFAULT_LOCALE.expand)\n              : (locale.collapse ?? DEFAULT_LOCALE.collapse)\n          }\n          aria-expanded={!collapsed}\n          aria-controls={contentId}\n          onClick={onTriggerClick}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger === undefined ? <TriggerIcon className=\"size-4\" /> : trigger}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;;AAkBA,MAAM,mBAAiC;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAK;AAsB3E,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,YAAY,QACZ,eAAe,OACf,SACA,YACA,YACA,cACA,GAAG,YACQ;CACX,iBAAiB;CAEjB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,WAAW,gBAAgB,qBAA8B;EAC9D,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAED,MAAM,EAAE,YAAY,uBAAuB,kBAAkB,EAC3D,UAAU,KACZ,CAAC;CACD,MAAM,SAAS,aACX,iBAAiB,QAAQ,mBAAmB,OAAO,IACnD,iBAAiB,QAAQ,UAAU,IACnC;CAEJ,MAAM,kBAAkB,OAAO,MAAM;CACrC,MAAM,oBAAoB,OAAuB,IAAI;CACrD,MAAM,wBAAwB,OAAO,KAAK;CAC1C,MAAM,kBAAkB,OAAO,YAAY;CAE3C,gBAAgB;EACd,gBAAgB,UAAU;CAC5B,CAAC;CAuBD,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,gBAAgB,UAAU;EAE1B,IAAI,sBAAsB,SACxB;EAEF,sBAAsB,UAAU;EAEhC,qBAAqB;GACnB,sBAAsB,UAAU;GAEhC,MAAM,gBAAgB,gBAAgB;GAEtC,IAAI,kBAAkB,YAAY,eAChC;GAGF,kBAAkB,UAAU;GAC5B,aAAa,aAAa;GAC1B,gBAAgB,UAAU,aAAa;EACzC,CAAC;CACH,GAAG;EAAC;EAAQ;EAAY;CAAY,CAAC;CAErC,MAAM,uBAAuB;EAC3B,aAAa,CAAC,SAAS;CACzB;CAQA,MAAM,cACJ,eAF4B,kBAAkB,cAAc,YAEtB,gBAAgB;CAExD,OACE,qBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAQT,sDACA,mCAKA,cAAc,WAAW,cACzB,SAEF;EACA,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,KAAK;GACnD,GAAG;EACL;EACA,GAAI;EAxBN,UAAA,CA0BE,oBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAC3B;EACE,CAAA,GACJ,eAAe,YAAY,QAC1B,oBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,cACE,YACK,OAAO,UAAU,eAAe,SAChC,OAAO,YAAY,eAAe;GAEzC,iBAAe,CAAC;GAChB,iBAAe;GACf,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,OAEd;GAEC,UAAA,YAAY,KAAA,IAAY,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA,IAAI;EACxD,CAAA,CAEL;;AAEX"}
+{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useId, useRef } from 'react';\n\nimport {\n  useControllableState,\n  useLatest,\n  useResponsiveSize,\n} from '@jbpark/use-hooks';\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { useRegisterSider } from './sider-context';\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n// Order matters here, not the values — used to compare the current\n// viewport tier against the configured `breakpoint` ordinally, since\n// `useResponsiveSize` reports which named tier the viewport is currently\n// in rather than a raw pixel width.\nconst BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nexport interface Props extends Omit<\n  React.ComponentProps<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  placement?: 'left' | 'right';\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  breakpoint?: Breakpoint;\n  onCollapse?: (collapsed: boolean) => void;\n  onBreakpoint?: (broken: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  placement = 'left',\n  reverseArrow = false,\n  trigger,\n  breakpoint,\n  onCollapse,\n  onBreakpoint,\n  ...props\n}: Props) => {\n  useRegisterSider();\n\n  const { locale } = useConfig();\n  const contentId = useId();\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: _collapsed,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapse,\n  });\n\n  const { breakpoint: viewportBreakpoint } = useResponsiveSize({\n    viewport: true,\n  });\n  const broken = breakpoint\n    ? BREAKPOINT_ORDER.indexOf(viewportBreakpoint.current) <\n      BREAKPOINT_ORDER.indexOf(breakpoint)\n    : false;\n\n  const latestBrokenRef = useRef(broken);\n  const previousBrokenRef = useRef<boolean | null>(null);\n  const microtaskScheduledRef = useRef(false);\n  const onBreakpointRef = useLatest(onBreakpoint);\n\n  // `useResponsiveSize`'s own initial measurement resolves through its own\n  // layout effect, which (since it's called earlier in this component)\n  // commits and — if the real viewport differs from its SSR-safe 'xs'\n  // placeholder default — triggers a synchronous corrective re-render, all\n  // before the browser paints. Both the placeholder-derived render and the\n  // corrected one get their own effect pass (React doesn't coalesce\n  // same-tick synchronous re-commits into a single effect flush), so\n  // reacting to `broken` directly — in a layout or passive effect either\n  // way — fires once with the wrong placeholder value, then again with the\n  // corrected one.\n  //\n  // Coalescing through a microtask sidesteps that: every effect pass just\n  // records its `broken` into a ref and schedules (at most once) a\n  // microtask that reads whatever ended up latest once the synchronous\n  // cascade has fully settled, and acts on that single, correct value.\n  //\n  // The `previousBrokenRef` guard is the separate fix for #227 point 3:\n  // without it, an inline `onCollapse`/`onBreakpoint` (a fresh identity\n  // every render) would change `setCollapsed`'s own identity and re-run\n  // this effect on every unrelated parent re-render, reapplying `broken`\n  // and undoing a user's manual toggle. Only a genuine change should act.\n  useEffect(() => {\n    if (!breakpoint) {\n      return;\n    }\n\n    latestBrokenRef.current = broken;\n\n    if (microtaskScheduledRef.current) {\n      return;\n    }\n    microtaskScheduledRef.current = true;\n\n    queueMicrotask(() => {\n      microtaskScheduledRef.current = false;\n\n      const settledBroken = latestBrokenRef.current;\n\n      if (previousBrokenRef.current === settledBroken) {\n        return;\n      }\n\n      previousBrokenRef.current = settledBroken;\n      setCollapsed(settledBroken);\n      onBreakpointRef.current?.(settledBroken);\n    });\n  }, [broken, breakpoint, setCollapsed, onBreakpointRef]);\n\n  const onTriggerClick = () => {\n    setCollapsed(!collapsed);\n  };\n\n  // A right-placed Sider's collapse icon should default to pointing the\n  // opposite way from a left-placed one (it's opening/closing a panel on\n  // the other side of the content), so `placement` flips the effective\n  // direction on top of whatever `reverseArrow` already requests —\n  // `reverseArrow` still layers on as a manual override either way.\n  const effectiveReverseArrow = reverseArrow !== (placement === 'right');\n  const TriggerIcon =\n    collapsed !== effectiveReverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      data-slot=\"layout-sider\"\n      className={cn(\n        // Below Header — and below every other floating/overlay primitive\n        // in this library, which all share OVERLAY_LAYER (lib/z-layers.ts).\n        // Sider is a static layout column, not floating chrome, and\n        // previously outranked Header with an arbitrary z-100, covering it\n        // once Header stuck to the viewport top on scroll. Kept as a small\n        // absolute value rather than tracking OVERLAY_LAYER: it only has to\n        // stay under that layer, and raising it in step would defeat this.\n        'z-10 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        // Lets a Sider visually sit on the right without needing to\n        // reorder JSX/children — useful since Sider's presence is\n        // detected via context (sider-context.ts) rather than requiring\n        // it to be a specific direct child in a specific position.\n        placement === 'right' && 'order-last',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div id={contentId} className=\"min-h-0 flex-1 overflow-auto\">\n        {children}\n      </div>\n      {collapsible && trigger !== null && (\n        <button\n          type=\"button\"\n          data-slot=\"layout-sider-trigger\"\n          aria-label={\n            collapsed\n              ? (locale.expand ?? DEFAULT_LOCALE.expand)\n              : (locale.collapse ?? DEFAULT_LOCALE.collapse)\n          }\n          aria-expanded={!collapsed}\n          aria-controls={contentId}\n          onClick={onTriggerClick}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger === undefined ? <TriggerIcon className=\"size-4\" /> : trigger}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;;AAsBA,MAAM,mBAAiC;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAK;AAsB3E,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,YAAY,QACZ,eAAe,OACf,SACA,YACA,YACA,cACA,GAAG,YACQ;CACX,iBAAiB;CAEjB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,WAAW,gBAAgB,qBAA8B;EAC9D,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAED,MAAM,EAAE,YAAY,uBAAuB,kBAAkB,EAC3D,UAAU,KACZ,CAAC;CACD,MAAM,SAAS,aACX,iBAAiB,QAAQ,mBAAmB,OAAO,IACnD,iBAAiB,QAAQ,UAAU,IACnC;CAEJ,MAAM,kBAAkB,OAAO,MAAM;CACrC,MAAM,oBAAoB,OAAuB,IAAI;CACrD,MAAM,wBAAwB,OAAO,KAAK;CAC1C,MAAM,kBAAkB,UAAU,YAAY;CAuB9C,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,gBAAgB,UAAU;EAE1B,IAAI,sBAAsB,SACxB;EAEF,sBAAsB,UAAU;EAEhC,qBAAqB;GACnB,sBAAsB,UAAU;GAEhC,MAAM,gBAAgB,gBAAgB;GAEtC,IAAI,kBAAkB,YAAY,eAChC;GAGF,kBAAkB,UAAU;GAC5B,aAAa,aAAa;GAC1B,gBAAgB,UAAU,aAAa;EACzC,CAAC;CACH,GAAG;EAAC;EAAQ;EAAY;EAAc;CAAe,CAAC;CAEtD,MAAM,uBAAuB;EAC3B,aAAa,CAAC,SAAS;CACzB;CAQA,MAAM,cACJ,eAF4B,kBAAkB,cAAc,YAEtB,gBAAgB;CAExD,OACE,qBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAQT,sDACA,mCAKA,cAAc,WAAW,cACzB,SAEF;EACA,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,KAAK;GACnD,GAAG;EACL;EACA,GAAI;EAxBN,UAAA,CA0BE,oBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAC3B;EACE,CAAA,GACJ,eAAe,YAAY,QAC1B,oBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,cACE,YACK,OAAO,UAAU,eAAe,SAChC,OAAO,YAAY,eAAe;GAEzC,iBAAe,CAAC;GAChB,iBAAe;GACf,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,OAEd;GAEC,UAAA,YAAY,KAAA,IAAY,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA,IAAI;EACxD,CAAA,CAEL;;AAEX"}

package/dist/core/accordion.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
-import { ChevronDownIcon } from "lucide-react";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
+import { ChevronDownIcon } from "lucide-react";
 //#region src/core/accordion.tsx
 var accordion_exports = /* @__PURE__ */ __exportAll({
 	Accordion: () => Accordion$1,

package/dist/core/autocomplete.d.mts

@@ -0,0 +1,2 @@
+import { ComponentProps } from "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";

package/dist/core/autocomplete.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
+import { cn } from "../utils.mjs";
+import { useConfig } from "../providers/config/context.mjs";
+import { OVERLAY_LAYER } from "../lib/z-layers.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/core/autocomplete.tsx
+var autocomplete_exports = /* @__PURE__ */ __exportAll({
+	Autocomplete: () => Autocomplete$1,
+	AutocompleteClear: () => AutocompleteClear,
+	AutocompleteContent: () => AutocompleteContent,
+	AutocompleteEmpty: () => AutocompleteEmpty,
+	AutocompleteInput: () => AutocompleteInput,
+	AutocompleteItem: () => AutocompleteItem,
+	AutocompleteList: () => AutocompleteList
+});
+const Autocomplete$1 = Autocomplete.Root;
+const AutocompleteInput = Autocomplete.Input;
+const AutocompleteClear = Autocomplete.Clear;
+const AutocompleteList = Autocomplete.List;
+const AutocompleteItem = Autocomplete.Item;
+const AutocompleteEmpty = Autocomplete.Empty;
+function AutocompleteContent({ container, className, ...props }) {
+	const { getContainer } = useConfig();
+	return /* @__PURE__ */ jsx(Autocomplete.Portal, {
+		container: container ?? getContainer(),
+		children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			className: cn(OVERLAY_LAYER, "w-(--anchor-width) max-w-(--available-width)"),
+			children: /* @__PURE__ */ jsx(Autocomplete.Popup, {
+				"data-slot": "autocomplete-content",
+				className: cn(`bg-popover text-popover-foreground max-h-(--available-height)
+            origin-(--transform-origin) overflow-hidden rounded-md border
+            shadow-md transition-[opacity,transform] duration-150
+            data-ending-style:scale-95 data-ending-style:opacity-0
+            data-starting-style:scale-95 data-starting-style:opacity-0`, className),
+				...props
+			})
+		})
+	});
+}
+//#endregion
+export { Autocomplete$1 as Autocomplete, AutocompleteClear, AutocompleteContent, AutocompleteEmpty, AutocompleteInput, AutocompleteItem, AutocompleteList, autocomplete_exports };
+
+//# sourceMappingURL=autocomplete.mjs.map

package/dist/core/autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.mjs","names":["Autocomplete","Primitive"],"sources":["../../src/core/autocomplete.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { Autocomplete as Primitive } from '@base-ui/react/autocomplete';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\nexport const Autocomplete = Primitive.Root;\nexport const AutocompleteInput = Primitive.Input;\nexport const AutocompleteClear = Primitive.Clear;\nexport const AutocompleteList = Primitive.List;\nexport const AutocompleteItem = Primitive.Item;\nexport const AutocompleteEmpty = Primitive.Empty;\n\nexport function AutocompleteContent({\n  container,\n  className,\n  ...props\n}: ComponentProps<typeof Primitive.Popup> & { container?: HTMLElement }) {\n  const { getContainer } = useConfig();\n\n  return (\n    <Primitive.Portal container={container ?? getContainer()}>\n      <Primitive.Positioner\n        side=\"bottom\"\n        align=\"start\"\n        sideOffset={4}\n        className={cn(\n          OVERLAY_LAYER,\n          'w-(--anchor-width) max-w-(--available-width)', //\n        )}\n      >\n        <Primitive.Popup\n          data-slot=\"autocomplete-content\"\n          className={cn(\n            `bg-popover text-popover-foreground max-h-(--available-height)\n            origin-(--transform-origin) overflow-hidden rounded-md border\n            shadow-md transition-[opacity,transform] duration-150\n            data-ending-style:scale-95 data-ending-style:opacity-0\n            data-starting-style:scale-95 data-starting-style:opacity-0`,\n            className, //\n          )}\n          {...props}\n        />\n      </Primitive.Positioner>\n    </Primitive.Portal>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAaA,iBAAeC,aAAU;AACtC,MAAa,oBAAoBA,aAAU;AAC3C,MAAa,oBAAoBA,aAAU;AAC3C,MAAa,mBAAmBA,aAAU;AAC1C,MAAa,mBAAmBA,aAAU;AAC1C,MAAa,oBAAoBA,aAAU;AAE3C,SAAgB,oBAAoB,EAClC,WACA,WACA,GAAG,SACoE;CACvE,MAAM,EAAE,iBAAiB,UAAU;CAEnC,OACE,oBAACA,aAAU,QAAX;EAAkB,WAAW,aAAa,aAAa;EACrD,UAAA,oBAACA,aAAU,YAAX;GACE,MAAK;GACL,OAAM;GACN,YAAY;GACZ,WAAW,GACT,eACA,8CACF;GAEA,UAAA,oBAACA,aAAU,OAAX;IACE,aAAU;IACV,WAAW,GACT;;;;yEAKA,SACF;IACA,GAAI;GACL,CAAA;EACmB,CAAA;CACN,CAAA;AAEtB"}

package/dist/core/badge.d.mts

@@ -1,13 +1,15 @@
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
-//#region src/core/badge.d.ts
+declare namespace badge_d_exports {
+  export { Badge, Props, badgeVariants };
+}
 declare const badgeVariants: (props?: ({
-  variant?: "link" | "outline" | "default" | "secondary" | "destructive" | "ghost" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = Omit<useRender.ComponentProps<'span'>, 'className'> & VariantProps<typeof badgeVariants> & {
   className?: string;
 };
 declare function Badge({ className, variant, render, ...props }: Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { Badge, type Props, badgeVariants };
+export { Badge, type Props, badgeVariants, badge_d_exports };
 //# sourceMappingURL=badge.d.mts.map

package/dist/core/badge.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.mts","names":[],"sources":["../../src/core/badge.tsx"],"mappings":";;;cAUM,gBAAa;;6CA0BlB;KAEI,QAAQ,KAAK,UAAU,uCAC1B,oBAAoB;EAClB;;iBAGK,QAAQ,WAAW,SAAqB,WAAW,SAAS,wBAAK,+CAAA"}
+{"version":3,"file":"badge.d.mts","names":[],"sources":["../../src/core/badge.tsx"],"mappings":";;;;;cAUM,gBAAa;;6CA0BlB;KAEI,QAAQ,KAAK,UAAU,uCAC1B,oBAAoB;EAClB;;iBAGK,QAAQ,WAAW,SAAqB,WAAW,SAAS,wBAAK,+CAAA"}