@jbpark/ui-kit 10.1.0 → 10.2.0

package/dist/components/molecules/menu/menu.d.mts

@@ -28,7 +28,7 @@ interface Props {
   onClick?: ClickEventHandler;
   onSelect?: ClickEventHandler;
 }
-interface MenuProps extends Props, Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {
+interface MenuProps extends Omit<Props, 'selectionMap'>, Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {
   items?: MenuItem[];
 }
 type ClickEventHandler = (params: {

package/dist/components/molecules/menu/menu.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.mts","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"mappings":";UAUiB;EACf,OAAO,MAAM;EACb,KAAK,MAAM;EACX;EACA;EACA,WAAW;;UAGI;EACf;EACA,eAAe,MAAM;EACrB,sBAAsB,MAAM;EAC5B,eAAe;EACf;EACA;EACA;IACE;IACA;IACA;IACA;;EAEF;IACE,WAAW,MAAM;IACjB,UAAU,MAAM;IAChB,OAAO,MAAM;IACb,QAAQ,MAAM;;EAEhB,UAAU;EACV,WAAW;;UAGI,kBAEb,OACA,KAAK,MAAM;EACb,QAAQ;;KAGE,qBAAqB;EAC/B,UAAU,MAAM;EAChB,KAAK,MAAM;EACX,SAAS,MAAM;EACf,MAAM;;cAGK;KAWD,eAAe,YAAY,MAAM;cAEhC,oBACX,OAAO,YACP,iBAAiB,YAAY,MAAM,SAClC;cAeU,UACX,MAAM,UACN,YAAY,YAAY,MAAM;cAiB1B,SAAQ,OAAA,MAAA,qBAAA,cAAA,eAAA,WAAA,YAAA,QAAA,QAAA,cAAA,SAAA,UAAA,cAAA,SAaX,8BAAS,IAAA"}
+{"version":3,"file":"menu.d.mts","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"mappings":";UAUiB;EACf,OAAO,MAAM;EACb,KAAK,MAAM;EACX;EACA;EACA,WAAW;;UAGI;EACf;EACA,eAAe,MAAM;EACrB,sBAAsB,MAAM;EAC5B,eAAe;EACf;EACA;EACA;IACE;IACA;IACA;IACA;;EAEF;IACE,WAAW,MAAM;IACjB,UAAU,MAAM;IAChB,OAAO,MAAM;IACb,QAAQ,MAAM;;EAEhB,UAAU;EACV,WAAW;;UAGI,kBAEb,KAAK,wBACL,KAAK,MAAM;EACb,QAAQ;;KAGE,qBAAqB;EAC/B,UAAU,MAAM;EAChB,KAAK,MAAM;EACX,SAAS,MAAM;EACf,MAAM;;cAGK;KAWD,eAAe,YAAY,MAAM;cAEhC,oBACX,OAAO,YACP,iBAAiB,YAAY,MAAM,SAClC;cAeU,UACX,MAAM,UACN,YAAY,YAAY,MAAM;cAiB1B,SAAQ,OAAA,MAAA,qBAAA,cAAA,eAAA,WAAA,YAAA,QAAA,QAAA,cAAA,SAAA,UAAA,cAAA,SAaX,8BAAS,IAAA"}

package/dist/components/molecules/menu/menu.mjs

@@ -40,6 +40,8 @@ const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys
 	});
 	const selectedKeysSet = useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
 	const selectionMap = useMemo(() => buildSelectionMap(items ?? [], selectedKeysSet), [items, selectedKeysSet]);
+	const rootProps = { ...props };
+	Reflect.deleteProperty(rootProps, "selectionMap");
 	const onSelect = (params) => {
 		setSelectedKeys([params.key]);
 		_onSelect?.(params);
@@ -48,7 +50,7 @@ const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys
 		"data-slot": "menu",
 		role: "menu",
 		className: cn(MENU_CLASSNAMES, mode === "horizontal" ? "flex" : "inline-block", className),
-		...props,
+		...rootProps,
 		children: items?.map((item, index) => /* @__PURE__ */ createElement(Item, {
 			root: true,
 			...item,

package/dist/components/molecules/menu/menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n  label: React.ReactNode;\n  key: React.Key;\n  type?: string;\n  path?: string;\n  children?: MenuItem[];\n}\n\nexport interface Props {\n  mode?: 'horizontal' | 'vertical' | 'inline';\n  selectedKeys?: React.Key[];\n  defaultSelectedKeys?: React.Key[];\n  selectionMap?: SelectionMap;\n  offset?: [number, number];\n  inlineOffset?: number;\n  classNames?: {\n    rootItem?: string;\n    subMenu?: string;\n    item?: string;\n    label?: string;\n  };\n  styles?: {\n    rootItem?: React.CSSProperties;\n    subMenu?: React.CSSProperties;\n    item?: React.CSSProperties;\n    label?: React.CSSProperties;\n  };\n  onClick?: ClickEventHandler;\n  onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n  extends\n    Props,\n    Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n  items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n  domEvent: React.SyntheticEvent;\n  key: React.Key;\n  keyPath: React.Key[];\n  item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n  'm-0',\n  'list-none',\n  'p-0',\n  'bg-popover',\n  'text-popover-foreground',\n  'shadow-md',\n  'rounded-md',\n  //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n  items: MenuItem[],\n  selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n  const map = new Map<React.Key, boolean>();\n\n  const dfs = (node: MenuItem): boolean => {\n    const self = selectedKeysSet.has(node.key);\n    const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n    const isSelected = self || hasSelectedChild;\n    map.set(node.key, isSelected);\n    return isSelected;\n  };\n\n  items.forEach(dfs);\n  return map;\n};\n\nexport const findKey = (\n  menu: MenuItem,\n  targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n  if (targetKeys.has(menu.key)) {\n    return true;\n  }\n\n  if (menu.children && Array.isArray(menu.children)) {\n    for (const child of menu.children) {\n      if (findKey(child, targetKeys)) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n};\n\nconst Menu = ({\n  items,\n  mode = 'vertical',\n  defaultSelectedKeys = [],\n  selectedKeys: _selectedKeys,\n  className,\n  classNames,\n  styles,\n  offset,\n  inlineOffset,\n  onClick,\n  onSelect: _onSelect,\n  ...props\n}: MenuProps) => {\n  const [selectedKeys, setSelectedKeys] = useControllableState<React.Key[]>({\n    value: _selectedKeys,\n    defaultValue: defaultSelectedKeys ?? [],\n  });\n\n  const selectedKeysSet = useMemo(\n    () => new Set<React.Key>(selectedKeys ?? []),\n    [selectedKeys],\n  );\n\n  const selectionMap = useMemo(\n    () => buildSelectionMap(items ?? [], selectedKeysSet),\n    [items, selectedKeysSet],\n  );\n\n  const onSelect = (params: {\n    domEvent: React.SyntheticEvent;\n    key: React.Key;\n    keyPath: React.Key[];\n    item: MenuItem;\n  }) => {\n    setSelectedKeys([params.key]);\n    _onSelect?.(params);\n  };\n\n  return (\n    <ul\n      data-slot=\"menu\"\n      role=\"menu\"\n      className={cn(\n        MENU_CLASSNAMES,\n        mode === 'horizontal' ? 'flex' : 'inline-block',\n        className,\n      )}\n      {...props}\n    >\n      {items?.map((item, index) => (\n        <Item\n          root\n          {...item}\n          key={item.key}\n          itemKey={item.key}\n          keyPath={[item.key]}\n          index={index}\n          selectionMap={selectionMap}\n          mode={mode}\n          classNames={classNames}\n          styles={styles}\n          offset={offset}\n          inlineOffset={inlineOffset}\n          onClick={onClick}\n          onSelect={onSelect}\n        />\n      ))}\n    </ul>\n  );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;AAEF;AAIA,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,IAAwB;CAExC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,GAAG;EACzC,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,KAAK,CAAC,KAAK;EACrE,MAAM,aAAa,QAAQ;EAC3B,IAAI,IAAI,KAAK,KAAK,UAAU;EAC5B,OAAO;CACT;CAEA,MAAM,QAAQ,GAAG;CACjB,OAAO;AACT;AAEA,MAAa,WACX,MACA,eACY;CACZ,IAAI,WAAW,IAAI,KAAK,GAAG,GACzB,OAAO;CAGT,IAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,QAAQ,GACzC;OAAA,MAAM,SAAS,KAAK,UACvB,IAAI,QAAQ,OAAO,UAAU,GAC3B,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,CAAC,GACvB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,CAAC,cAAc,mBAAmB,qBAAkC;EACxE,OAAO;EACP,cAAc,uBAAuB,CAAC;CACxC,CAAC;CAED,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,CAAC,CAAC,GAC3C,CAAC,YAAY,CACf;CAEA,MAAM,eAAe,cACb,kBAAkB,SAAS,CAAC,GAAG,eAAe,GACpD,CAAC,OAAO,eAAe,CACzB;CAEA,MAAM,YAAY,WAKZ;EACJ,gBAAgB,CAAC,OAAO,GAAG,CAAC;EAC5B,YAAY,MAAM;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,SACF;EACA,GAAI;EAEH,UAAA,OAAO,KAAK,MAAM,UACjB,8BAAC,MAAD;GACE,MAAA;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,GAAG;GACX;GACO;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;EACX,CAAA,CACF;CACC,CAAA;AAER"}
+{"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n  label: React.ReactNode;\n  key: React.Key;\n  type?: string;\n  path?: string;\n  children?: MenuItem[];\n}\n\nexport interface Props {\n  mode?: 'horizontal' | 'vertical' | 'inline';\n  selectedKeys?: React.Key[];\n  defaultSelectedKeys?: React.Key[];\n  selectionMap?: SelectionMap;\n  offset?: [number, number];\n  inlineOffset?: number;\n  classNames?: {\n    rootItem?: string;\n    subMenu?: string;\n    item?: string;\n    label?: string;\n  };\n  styles?: {\n    rootItem?: React.CSSProperties;\n    subMenu?: React.CSSProperties;\n    item?: React.CSSProperties;\n    label?: React.CSSProperties;\n  };\n  onClick?: ClickEventHandler;\n  onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n  extends\n    Omit<Props, 'selectionMap'>,\n    Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n  items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n  domEvent: React.SyntheticEvent;\n  key: React.Key;\n  keyPath: React.Key[];\n  item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n  'm-0',\n  'list-none',\n  'p-0',\n  'bg-popover',\n  'text-popover-foreground',\n  'shadow-md',\n  'rounded-md',\n  //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n  items: MenuItem[],\n  selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n  const map = new Map<React.Key, boolean>();\n\n  const dfs = (node: MenuItem): boolean => {\n    const self = selectedKeysSet.has(node.key);\n    const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n    const isSelected = self || hasSelectedChild;\n    map.set(node.key, isSelected);\n    return isSelected;\n  };\n\n  items.forEach(dfs);\n  return map;\n};\n\nexport const findKey = (\n  menu: MenuItem,\n  targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n  if (targetKeys.has(menu.key)) {\n    return true;\n  }\n\n  if (menu.children && Array.isArray(menu.children)) {\n    for (const child of menu.children) {\n      if (findKey(child, targetKeys)) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n};\n\nconst Menu = ({\n  items,\n  mode = 'vertical',\n  defaultSelectedKeys = [],\n  selectedKeys: _selectedKeys,\n  className,\n  classNames,\n  styles,\n  offset,\n  inlineOffset,\n  onClick,\n  onSelect: _onSelect,\n  ...props\n}: MenuProps) => {\n  const [selectedKeys, setSelectedKeys] = useControllableState<React.Key[]>({\n    value: _selectedKeys,\n    defaultValue: defaultSelectedKeys ?? [],\n  });\n\n  const selectedKeysSet = useMemo(\n    () => new Set<React.Key>(selectedKeys ?? []),\n    [selectedKeys],\n  );\n\n  const selectionMap = useMemo(\n    () => buildSelectionMap(items ?? [], selectedKeysSet),\n    [items, selectedKeysSet],\n  );\n  const rootProps = { ...props };\n\n  // Ignore stale JavaScript callers that still supply this internal prop.\n  Reflect.deleteProperty(rootProps, 'selectionMap');\n\n  const onSelect = (params: {\n    domEvent: React.SyntheticEvent;\n    key: React.Key;\n    keyPath: React.Key[];\n    item: MenuItem;\n  }) => {\n    setSelectedKeys([params.key]);\n    _onSelect?.(params);\n  };\n\n  return (\n    <ul\n      data-slot=\"menu\"\n      role=\"menu\"\n      className={cn(\n        MENU_CLASSNAMES,\n        mode === 'horizontal' ? 'flex' : 'inline-block',\n        className,\n      )}\n      {...rootProps}\n    >\n      {items?.map((item, index) => (\n        <Item\n          root\n          {...item}\n          key={item.key}\n          itemKey={item.key}\n          keyPath={[item.key]}\n          index={index}\n          selectionMap={selectionMap}\n          mode={mode}\n          classNames={classNames}\n          styles={styles}\n          offset={offset}\n          inlineOffset={inlineOffset}\n          onClick={onClick}\n          onSelect={onSelect}\n        />\n      ))}\n    </ul>\n  );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;AAEF;AAIA,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,IAAwB;CAExC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,GAAG;EACzC,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,KAAK,CAAC,KAAK;EACrE,MAAM,aAAa,QAAQ;EAC3B,IAAI,IAAI,KAAK,KAAK,UAAU;EAC5B,OAAO;CACT;CAEA,MAAM,QAAQ,GAAG;CACjB,OAAO;AACT;AAEA,MAAa,WACX,MACA,eACY;CACZ,IAAI,WAAW,IAAI,KAAK,GAAG,GACzB,OAAO;CAGT,IAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,QAAQ,GACzC;OAAA,MAAM,SAAS,KAAK,UACvB,IAAI,QAAQ,OAAO,UAAU,GAC3B,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,CAAC,GACvB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,CAAC,cAAc,mBAAmB,qBAAkC;EACxE,OAAO;EACP,cAAc,uBAAuB,CAAC;CACxC,CAAC;CAED,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,CAAC,CAAC,GAC3C,CAAC,YAAY,CACf;CAEA,MAAM,eAAe,cACb,kBAAkB,SAAS,CAAC,GAAG,eAAe,GACpD,CAAC,OAAO,eAAe,CACzB;CACA,MAAM,YAAY,EAAE,GAAG,MAAM;CAG7B,QAAQ,eAAe,WAAW,cAAc;CAEhD,MAAM,YAAY,WAKZ;EACJ,gBAAgB,CAAC,OAAO,GAAG,CAAC;EAC5B,YAAY,MAAM;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,SACF;EACA,GAAI;EAEH,UAAA,OAAO,KAAK,MAAM,UACjB,8BAAC,MAAD;GACE,MAAA;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,GAAG;GACX;GACO;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;EACX,CAAA,CACF;CACC,CAAA;AAER"}

package/dist/components/molecules/tabs.d.mts

@@ -11,8 +11,12 @@ interface Item {
   /** Decorative icon rendered before the label with consistent spacing. */
   icon?: ReactNode;
 }
-interface Props extends Omit<React.ComponentProps<typeof Core>, 'children'> {
+interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'onChange'> {
   items: Item[];
+  /** Called when the selected tab changes. */
+  onChange?: (value: string | number | null) => void;
+  /** @deprecated Use `onChange` for the selected value. */
+  onValueChange?: React.ComponentProps<typeof Core>['onValueChange'];
   listLabel?: string;
   /** Preserve inactive panel DOM and local state. */
   keepMounted?: boolean;
@@ -31,7 +35,7 @@ interface Props extends Omit<React.ComponentProps<typeof Core>, 'children'> {
     extra?: string;
   };
 }
-declare const Tabs: ({ items, listLabel, keepMounted, activateOnFocus, scrollable, fitted, extra, classNames, defaultValue, orientation, ...props }: Props) => import("react").JSX.Element;
+declare const Tabs: ({ items, listLabel, keepMounted, activateOnFocus, scrollable, fitted, extra, classNames, defaultValue, onChange, onValueChange, orientation, ...props }: Props) => import("react").JSX.Element;
 //#endregion
 export { Item, Props, Tabs as default };
 //# sourceMappingURL=tabs.d.mts.map

package/dist/components/molecules/tabs.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.mts","names":[],"sources":["../../../src/components/molecules/tabs.tsx"],"mappings":";;;;cAQc,aAAI;UAED;EACf;EACA,OAAO;EACP,UAAU;EACV;;EAEA,OAAO;;UAGQ,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,OAAO;EACP;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,QAAQ;EACR;IACE;IACA;IACA;IACA;;;cAIE,SAAQ,OAAA,WAAA,aAAA,iBAAA,YAAA,QAAA,OAAA,YAAA,cAAA,gBAAA,SAYX,0BAAK,IAAA"}
+{"version":3,"file":"tabs.d.mts","names":[],"sources":["../../../src/components/molecules/tabs.tsx"],"mappings":";;;;cAQc,aAAI;UAED;EACf;EACA,OAAO;EACP,UAAU;EACV;;EAEA,OAAO;;UAGQ,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,OAAO;;EAEP,YAAY;;EAEZ,gBAAgB,MAAM,sBAAsB;EAC5C;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,QAAQ;EACR;IACE;IACA;IACA;IACA;;;cAIE,SAAQ,OAAA,WAAA,aAAA,iBAAA,YAAA,QAAA,OAAA,YAAA,cAAA,UAAA,eAAA,gBAAA,SAcX,0BAAK,IAAA"}

package/dist/components/molecules/tabs.mjs

@@ -4,11 +4,15 @@ import { tabs_exports } from "../../core/tabs.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/molecules/tabs.tsx
 const { Tabs: Core, TabsList, TabsTab, TabsPanel } = tabs_exports;
-const Tabs = ({ items, listLabel = "Tabs", keepMounted = false, activateOnFocus = false, scrollable = false, fitted = false, extra, classNames, defaultValue, orientation = "horizontal", ...props }) => {
+const Tabs = ({ items, listLabel = "Tabs", keepMounted = false, activateOnFocus = false, scrollable = false, fitted = false, extra, classNames, defaultValue, onChange, onValueChange, orientation = "horizontal", ...props }) => {
 	const initialValue = defaultValue === void 0 ? items.find((item) => !item.disabled)?.key : defaultValue;
 	return /* @__PURE__ */ jsxs(Core, {
 		defaultValue: props.value === void 0 ? initialValue : void 0,
 		orientation,
+		onValueChange: (value, eventDetails) => {
+			onChange?.(value);
+			onValueChange?.(value, eventDetails);
+		},
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			"data-slot": "tabs-bar",

package/dist/components/molecules/tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.mjs","names":["tabs"],"sources":["../../../src/components/molecules/tabs.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { tabs } from '../../core';\n\nconst { Tabs: Core, TabsList, TabsTab, TabsPanel } = tabs;\n\nexport interface Item {\n  key: string;\n  label: ReactNode;\n  children: ReactNode;\n  disabled?: boolean;\n  /** Decorative icon rendered before the label with consistent spacing. */\n  icon?: ReactNode;\n}\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'children'\n> {\n  items: Item[];\n  listLabel?: string;\n  /** Preserve inactive panel DOM and local state. */\n  keepMounted?: boolean;\n  /** Select a tab when arrow-key focus moves to it. */\n  activateOnFocus?: boolean;\n  /** Scroll the tab list when its items exceed the available space. */\n  scrollable?: boolean;\n  /** Give tabs equal width in horizontal mode; ignored when scrollable. */\n  fitted?: boolean;\n  /** Content shown after the tab list, outside the tablist role. */\n  extra?: ReactNode;\n  classNames?: {\n    list?: string;\n    tab?: string;\n    panel?: string;\n    extra?: string;\n  };\n}\n\nconst Tabs = ({\n  items,\n  listLabel = 'Tabs',\n  keepMounted = false,\n  activateOnFocus = false,\n  scrollable = false,\n  fitted = false,\n  extra,\n  classNames,\n  defaultValue,\n  orientation = 'horizontal',\n  ...props\n}: Props) => {\n  const initialValue =\n    defaultValue === undefined\n      ? items.find(item => !item.disabled)?.key\n      : defaultValue;\n\n  return (\n    <Core\n      defaultValue={props.value === undefined ? initialValue : undefined}\n      orientation={orientation}\n      {...props}\n    >\n      <div\n        data-slot=\"tabs-bar\"\n        className={cn(\n          'flex min-w-0 items-stretch',\n          orientation === 'vertical' && 'min-h-0 shrink-0 flex-col',\n          //\n        )}\n      >\n        <TabsList\n          aria-label={listLabel}\n          activateOnFocus={activateOnFocus}\n          className={cn(\n            'min-w-0 flex-1',\n            scrollable &&\n              (orientation === 'vertical'\n                ? 'min-h-0 overflow-y-auto'\n                : `[scrollbar-width:none] overflow-x-auto overflow-y-hidden\n                  [&::-webkit-scrollbar]:hidden`),\n            classNames?.list,\n            //\n          )}\n        >\n          {items.map(item => (\n            <TabsTab\n              key={item.key}\n              value={item.key}\n              disabled={item.disabled}\n              className={cn(\n                fitted &&\n                  !scrollable &&\n                  orientation === 'horizontal' &&\n                  'flex-1',\n                scrollable && 'shrink-0',\n                classNames?.tab,\n                //\n              )}\n            >\n              {item.icon != null && (\n                <span\n                  data-slot=\"tabs-icon\"\n                  aria-hidden=\"true\"\n                  className=\"inline-flex shrink-0 items-center\"\n                >\n                  {item.icon}\n                </span>\n              )}\n              {item.label}\n            </TabsTab>\n          ))}\n        </TabsList>\n        {extra != null && (\n          <div\n            data-slot=\"tabs-extra\"\n            className={cn(\n              `border-border flex shrink-0 items-center border-b px-3\n              data-[orientation=vertical]:border-r\n              data-[orientation=vertical]:border-b-0`,\n              classNames?.extra,\n              //\n            )}\n            data-orientation={orientation}\n          >\n            {extra}\n          </div>\n        )}\n      </div>\n      {items.map(item => (\n        <TabsPanel\n          key={item.key}\n          value={item.key}\n          keepMounted={keepMounted}\n          className={classNames?.panel}\n        >\n          {item.children}\n        </TabsPanel>\n      ))}\n    </Core>\n  );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;AAQA,MAAM,EAAE,MAAM,MAAM,UAAU,SAAS,cAAcA;AAmCrD,MAAM,QAAQ,EACZ,OACA,YAAY,QACZ,cAAc,OACd,kBAAkB,OAClB,aAAa,OACb,SAAS,OACT,OACA,YACA,cACA,cAAc,cACd,GAAG,YACQ;CACX,MAAM,eACJ,iBAAiB,KAAA,IACb,MAAM,MAAK,SAAQ,CAAC,KAAK,QAAQ,CAAC,EAAE,MACpC;CAEN,OACE,qBAAC,MAAD;EACE,cAAc,MAAM,UAAU,KAAA,IAAY,eAAe,KAAA;EAC5C;EACb,GAAI;EAHN,UAAA,CAKE,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,8BACA,gBAAgB,cAAc,2BAEhC;GANF,UAAA,CAQE,oBAAC,UAAD;IACE,cAAY;IACK;IACjB,WAAW,GACT,kBACA,eACG,gBAAgB,aACb,4BACA;mDAEN,YAAY,IAEd;IAEC,UAAA,MAAM,KAAI,SACT,qBAAC,SAAD;KAEE,OAAO,KAAK;KACZ,UAAU,KAAK;KACf,WAAW,GACT,UACE,CAAC,cACD,gBAAgB,gBAChB,UACF,cAAc,YACd,YAAY,GAEd;KAZF,UAAA,CAcG,KAAK,QAAQ,QACZ,oBAAC,QAAD;MACE,aAAU;MACV,eAAY;MACZ,WAAU;MAET,UAAA,KAAK;KACF,CAAA,GAEP,KAAK,KACC;IAvBF,GAAA,KAAK,GAuBH,CACV;GACO,CAAA,GACT,SAAS,QACR,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,GACT;;uDAGA,YAAY,KAEd;IACA,oBAAkB;IAEjB,UAAA;GACE,CAAA,CAEJ;EACJ,CAAA,GAAA,MAAM,KAAI,SACT,oBAAC,WAAD;GAEE,OAAO,KAAK;GACC;GACb,WAAW,YAAY;GAEtB,UAAA,KAAK;EACG,GANJ,KAAK,GAMD,CACZ,CACG;;AAEV"}
+{"version":3,"file":"tabs.mjs","names":["tabs"],"sources":["../../../src/components/molecules/tabs.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { tabs } from '../../core';\n\nconst { Tabs: Core, TabsList, TabsTab, TabsPanel } = tabs;\n\nexport interface Item {\n  key: string;\n  label: ReactNode;\n  children: ReactNode;\n  disabled?: boolean;\n  /** Decorative icon rendered before the label with consistent spacing. */\n  icon?: ReactNode;\n}\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'children' | 'onChange'\n> {\n  items: Item[];\n  /** Called when the selected tab changes. */\n  onChange?: (value: string | number | null) => void;\n  /** @deprecated Use `onChange` for the selected value. */\n  onValueChange?: React.ComponentProps<typeof Core>['onValueChange'];\n  listLabel?: string;\n  /** Preserve inactive panel DOM and local state. */\n  keepMounted?: boolean;\n  /** Select a tab when arrow-key focus moves to it. */\n  activateOnFocus?: boolean;\n  /** Scroll the tab list when its items exceed the available space. */\n  scrollable?: boolean;\n  /** Give tabs equal width in horizontal mode; ignored when scrollable. */\n  fitted?: boolean;\n  /** Content shown after the tab list, outside the tablist role. */\n  extra?: ReactNode;\n  classNames?: {\n    list?: string;\n    tab?: string;\n    panel?: string;\n    extra?: string;\n  };\n}\n\nconst Tabs = ({\n  items,\n  listLabel = 'Tabs',\n  keepMounted = false,\n  activateOnFocus = false,\n  scrollable = false,\n  fitted = false,\n  extra,\n  classNames,\n  defaultValue,\n  onChange,\n  onValueChange,\n  orientation = 'horizontal',\n  ...props\n}: Props) => {\n  const initialValue =\n    defaultValue === undefined\n      ? items.find(item => !item.disabled)?.key\n      : defaultValue;\n\n  return (\n    <Core\n      defaultValue={props.value === undefined ? initialValue : undefined}\n      orientation={orientation}\n      onValueChange={(value, eventDetails) => {\n        onChange?.(value);\n        onValueChange?.(value, eventDetails);\n      }}\n      {...props}\n    >\n      <div\n        data-slot=\"tabs-bar\"\n        className={cn(\n          'flex min-w-0 items-stretch',\n          orientation === 'vertical' && 'min-h-0 shrink-0 flex-col',\n          //\n        )}\n      >\n        <TabsList\n          aria-label={listLabel}\n          activateOnFocus={activateOnFocus}\n          className={cn(\n            'min-w-0 flex-1',\n            scrollable &&\n              (orientation === 'vertical'\n                ? 'min-h-0 overflow-y-auto'\n                : `[scrollbar-width:none] overflow-x-auto overflow-y-hidden\n                  [&::-webkit-scrollbar]:hidden`),\n            classNames?.list,\n            //\n          )}\n        >\n          {items.map(item => (\n            <TabsTab\n              key={item.key}\n              value={item.key}\n              disabled={item.disabled}\n              className={cn(\n                fitted &&\n                  !scrollable &&\n                  orientation === 'horizontal' &&\n                  'flex-1',\n                scrollable && 'shrink-0',\n                classNames?.tab,\n                //\n              )}\n            >\n              {item.icon != null && (\n                <span\n                  data-slot=\"tabs-icon\"\n                  aria-hidden=\"true\"\n                  className=\"inline-flex shrink-0 items-center\"\n                >\n                  {item.icon}\n                </span>\n              )}\n              {item.label}\n            </TabsTab>\n          ))}\n        </TabsList>\n        {extra != null && (\n          <div\n            data-slot=\"tabs-extra\"\n            className={cn(\n              `border-border flex shrink-0 items-center border-b px-3\n              data-[orientation=vertical]:border-r\n              data-[orientation=vertical]:border-b-0`,\n              classNames?.extra,\n              //\n            )}\n            data-orientation={orientation}\n          >\n            {extra}\n          </div>\n        )}\n      </div>\n      {items.map(item => (\n        <TabsPanel\n          key={item.key}\n          value={item.key}\n          keepMounted={keepMounted}\n          className={classNames?.panel}\n        >\n          {item.children}\n        </TabsPanel>\n      ))}\n    </Core>\n  );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;AAQA,MAAM,EAAE,MAAM,MAAM,UAAU,SAAS,cAAcA;AAuCrD,MAAM,QAAQ,EACZ,OACA,YAAY,QACZ,cAAc,OACd,kBAAkB,OAClB,aAAa,OACb,SAAS,OACT,OACA,YACA,cACA,UACA,eACA,cAAc,cACd,GAAG,YACQ;CACX,MAAM,eACJ,iBAAiB,KAAA,IACb,MAAM,MAAK,SAAQ,CAAC,KAAK,QAAQ,CAAC,EAAE,MACpC;CAEN,OACE,qBAAC,MAAD;EACE,cAAc,MAAM,UAAU,KAAA,IAAY,eAAe,KAAA;EAC5C;EACb,gBAAgB,OAAO,iBAAiB;GACtC,WAAW,KAAK;GAChB,gBAAgB,OAAO,YAAY;EACrC;EACA,GAAI;EAPN,UAAA,CASE,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,8BACA,gBAAgB,cAAc,2BAEhC;GANF,UAAA,CAQE,oBAAC,UAAD;IACE,cAAY;IACK;IACjB,WAAW,GACT,kBACA,eACG,gBAAgB,aACb,4BACA;mDAEN,YAAY,IAEd;IAEC,UAAA,MAAM,KAAI,SACT,qBAAC,SAAD;KAEE,OAAO,KAAK;KACZ,UAAU,KAAK;KACf,WAAW,GACT,UACE,CAAC,cACD,gBAAgB,gBAChB,UACF,cAAc,YACd,YAAY,GAEd;KAZF,UAAA,CAcG,KAAK,QAAQ,QACZ,oBAAC,QAAD;MACE,aAAU;MACV,eAAY;MACZ,WAAU;MAET,UAAA,KAAK;KACF,CAAA,GAEP,KAAK,KACC;IAvBF,GAAA,KAAK,GAuBH,CACV;GACO,CAAA,GACT,SAAS,QACR,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,GACT;;uDAGA,YAAY,KAEd;IACA,oBAAkB;IAEjB,UAAA;GACE,CAAA,CAEJ;EACJ,CAAA,GAAA,MAAM,KAAI,SACT,oBAAC,WAAD;GAEE,OAAO,KAAK;GACC;GACb,WAAW,YAAY;GAEtB,UAAA,KAAK;EACG,GANJ,KAAK,GAMD,CACZ,CACG;;AAEV"}

package/dist/components/molecules/upload.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../utils.mjs";
 import Button from "../../Button.mjs";
-import { useId } from "react";
 import { Upload, X } from "lucide-react";
+import { useId } from "react";
 import { useControllableState, useFileDrop, useFileToDataUrl } from "@jbpark/use-hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/molecules/upload.tsx

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

@@ -8,7 +8,7 @@ interface Props {
   closable?: boolean;
   closeIcon?: React.ReactNode;
   direction?: 'top' | 'bottom' | 'left' | 'right';
-  size?: 'small' | 'medium' | 'large' | 'full' | string;
+  size?: 'small' | 'middle' | 'medium' | 'large' | 'full' | string;
   maskClosable?: boolean;
   handlebar?: boolean;
   rounded?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.mts","names":[],"sources":["../../../src/components/organisms/drawer.tsx"],"mappings":";UA2CiB;EACf;EACA,WAAW,MAAM;EACjB,QAAQ,MAAM;EACd,QAAQ,MAAM;EACd,SAAS,MAAM;EACf;EACA,YAAY,MAAM;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,MAAM;EACd;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF,YAAY;EACZ;;cA8CI,WAAU,MAAA,OAAA,OAAA,QAAA,UAAA,WAAA,WAAA,MAAA,cAAA,WAAA,SAAA,MAAA,WAAA,YAAA,OAAA,UAAA,WAAA,YAAA,SAoBb,0BAAK,IAAA"}
+{"version":3,"file":"drawer.d.mts","names":[],"sources":["../../../src/components/organisms/drawer.tsx"],"mappings":";UA2CiB;EACf;EACA,WAAW,MAAM;EACjB,QAAQ,MAAM;EACd,QAAQ,MAAM;EACd,SAAS,MAAM;EACf;EACA,YAAY,MAAM;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,MAAM;EACd;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF,YAAY;EACZ;;cA+CI,WAAU,MAAA,OAAA,OAAA,QAAA,UAAA,WAAA,WAAA,MAAA,cAAA,WAAA,SAAA,MAAA,WAAA,YAAA,OAAA,UAAA,WAAA,YAAA,SAoBb,0BAAK,IAAA"}

package/dist/components/organisms/drawer.mjs

@@ -3,8 +3,8 @@ import { cn } from "../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
 import { drawer_exports } from "../../core/drawer.mjs";
 import Button from "../../Button.mjs";
-import { useEffect } from "react";
 import { X } from "lucide-react";
+import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/organisms/drawer.tsx
 const { DrawerContent, Drawer: DrawerCore, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } = drawer_exports;
@@ -22,6 +22,7 @@ const getMaskLessState = (doc) => {
 };
 const SIZES = {
 	small: "30%",
+	middle: "50%",
 	medium: "50%",
 	large: "75%",
 	full: "90%"
@@ -41,7 +42,7 @@ const getSizeStyles = (direction, size) => {
 		maxWidth: "100%"
 	};
 };
-const Drawer = ({ open, title, extra, footer, closable = true, closeIcon, direction = "bottom", size = "medium", maskClosable = true, handlebar = true, rounded = false, mask = true, className, classNames, style, children, container, onClose, ...props }) => {
+const Drawer = ({ open, title, extra, footer, closable = true, closeIcon, direction = "bottom", size = "middle", maskClosable = true, handlebar = true, rounded = false, mask = true, className, classNames, style, children, container, onClose, ...props }) => {
 	const { locale } = useConfig();
 	useEffect(() => {
 		if (!open || mask) return;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.mjs","names":["drawer"],"sources":["../../../src/components/organisms/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { X } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { drawer } from '../../core';\nimport Button from '../atoms/button';\n\nconst {\n  DrawerContent,\n  Drawer: DrawerCore,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n} = drawer;\n\n// `body.style.pointerEvents` is global state (per document), so several\n// mask-less overlays opening at once would otherwise race: each instance\n// would capture whatever the previous one had already written and the\n// last cleanup would restore a stale value. Reference counting makes only\n// the first instance capture the original value and only the last one\n// restore it. Keyed by document (not a single module-level counter) so\n// drawers portaled into different documents — e.g. live-editor's iframe\n// Renderer — don't share state with the host document.\ntype MaskLessState = { count: number; originalPointerEvents: string | null };\nconst maskLessStates = new WeakMap<Document, MaskLessState>();\n\nconst getMaskLessState = (doc: Document): MaskLessState => {\n  let state = maskLessStates.get(doc);\n\n  if (!state) {\n    state = { count: 0, originalPointerEvents: null };\n    maskLessStates.set(doc, state);\n  }\n\n  return state;\n};\n\nexport interface Props {\n  open: boolean;\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  extra?: React.ReactNode;\n  footer?: React.ReactNode;\n  closable?: boolean;\n  closeIcon?: React.ReactNode;\n  direction?: 'top' | 'bottom' | 'left' | 'right';\n  size?: 'small' | 'medium' | 'large' | 'full' | string;\n  maskClosable?: boolean;\n  handlebar?: boolean;\n  rounded?: boolean;\n  mask?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  classNames?: {\n    mask?: string;\n    content?: string;\n    handlebar?: string;\n    header?: string;\n    title?: string;\n    close?: string;\n    extra?: string;\n    body?: string;\n    footer?: string;\n  };\n  container?: HTMLElement;\n  onClose: () => void;\n}\n\nconst SIZES: Record<string, string> = {\n  small: '30%',\n  medium: '50%',\n  large: '75%',\n  full: '90%',\n};\n\n// Rounds the edge facing into the viewport — the opposite edge from\n// whichever side the drawer is anchored to.\nconst ROUNDED_CLASSES: Record<'top' | 'bottom' | 'left' | 'right', string> = {\n  top: 'rounded-b-[30px]!',\n  bottom: 'rounded-t-[30px]!',\n  left: 'rounded-r-[30px]!',\n  right: 'rounded-l-[30px]!',\n};\n\n// A side drawer sized by a preset is sized by a percentage of the viewport,\n// which collapses on a phone: `small` is 30%, so it lands at ~112px on a 375px\n// screen — a sliver too narrow to read. Floor the preset widths so they stay\n// usable on small screens. A custom `size` is passed through untouched; an\n// explicit value is the caller's decision, not something to second-guess.\nconst SIDE_MIN_WIDTH = '20rem';\n\nconst getSizeStyles = (\n  direction: 'top' | 'bottom' | 'left' | 'right',\n  size: string,\n): React.CSSProperties => {\n  if (direction === 'top' || direction === 'bottom') {\n    return { height: SIZES[size] || size };\n  }\n\n  const preset = SIZES[size];\n\n  return {\n    width: preset ? `max(${preset}, ${SIDE_MIN_WIDTH})` : size,\n    // Set inline so it beats `core/drawer`'s `sm:max-w-sm`, which would\n    // otherwise hold every side drawer at 24rem from the `sm` breakpoint up\n    // and leave `size` with no effect on anything wider than a phone. It also\n    // keeps the floor above from overflowing a container narrower than it.\n    maxWidth: '100%',\n  };\n};\n\nconst Drawer = ({\n  open,\n  title,\n  extra,\n  footer,\n  closable = true,\n  closeIcon,\n  direction = 'bottom',\n  size = 'medium',\n  maskClosable = true,\n  handlebar = true,\n  rounded = false,\n  mask = true,\n  className,\n  classNames,\n  style,\n  children,\n  container,\n  onClose,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  useEffect(() => {\n    if (!open || mask) {\n      return;\n    }\n\n    const targetDocument = container?.ownerDocument ?? document;\n    const targetWindow = targetDocument.defaultView ?? window;\n    const body = targetDocument.body;\n    const state = getMaskLessState(targetDocument);\n\n    if (state.count === 0) {\n      state.originalPointerEvents = body.style.pointerEvents;\n    }\n    state.count += 1;\n\n    const raf = targetWindow.requestAnimationFrame(() => {\n      body.style.pointerEvents = 'auto';\n    });\n\n    return () => {\n      targetWindow.cancelAnimationFrame(raf);\n      state.count -= 1;\n\n      if (state.count === 0) {\n        body.style.pointerEvents = state.originalPointerEvents ?? '';\n        state.originalPointerEvents = null;\n      }\n    };\n  }, [open, mask, container]);\n\n  return (\n    <DrawerCore\n      open={open}\n      // antd's mask ⇒ Base UI's modal (focus trap + scroll lock); maskClosable\n      // gates outside-press dismissal at the root, replacing vaul's\n      // Content-level onPointerDownOutside handler.\n      modal={mask}\n      disablePointerDismissal={!maskClosable}\n      onOpenChange={open => {\n        if (!open) {\n          onClose();\n        }\n      }}\n      {...props}\n    >\n      <DrawerContent\n        direction={direction}\n        container={container}\n        className={cn(\n          'border-none outline-none',\n          rounded ? ROUNDED_CLASSES[direction] : 'rounded-none!',\n          classNames?.content,\n          className,\n          //\n        )}\n        handlebar={handlebar}\n        mask={mask}\n        classNames={{\n          mask: classNames?.mask || '',\n          handlebar: classNames?.handlebar || '',\n        }}\n        style={{\n          ...getSizeStyles(direction, size),\n          ...style,\n        }}\n      >\n        <DrawerHeader\n          className={cn(\n            classNames?.header,\n            !title && 'p-0',\n            //\n          )}\n        >\n          <div className=\"flex items-start gap-2\">\n            {closable && (\n              <Button\n                variant=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                aria-label={locale.close ?? DEFAULT_LOCALE.close}\n                icon={closeIcon || <X />}\n                onClick={onClose}\n                className={cn(classNames?.close)}\n              />\n            )}\n            <div className=\"flex flex-1 items-start justify-between gap-2\">\n              <DrawerTitle className={cn(classNames?.title)}>\n                {title}\n              </DrawerTitle>\n              {extra != null && (\n                <div className={cn('shrink-0', classNames?.extra)}>{extra}</div>\n              )}\n            </div>\n          </div>\n          <DrawerDescription className=\"hidden\" />\n        </DrawerHeader>\n        <div\n          className={cn(\n            'overflow-auto p-5',\n            classNames?.body,\n            //\n          )}\n        >\n          {children}\n        </div>\n        {footer != null && (\n          <DrawerFooter className={cn(classNames?.footer)}>\n            {footer}\n          </DrawerFooter>\n        )}\n      </DrawerContent>\n    </DrawerCore>\n  );\n};\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"drawer.mjs","names":["drawer"],"sources":["../../../src/components/organisms/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { X } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { drawer } from '../../core';\nimport Button from '../atoms/button';\n\nconst {\n  DrawerContent,\n  Drawer: DrawerCore,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n} = drawer;\n\n// `body.style.pointerEvents` is global state (per document), so several\n// mask-less overlays opening at once would otherwise race: each instance\n// would capture whatever the previous one had already written and the\n// last cleanup would restore a stale value. Reference counting makes only\n// the first instance capture the original value and only the last one\n// restore it. Keyed by document (not a single module-level counter) so\n// drawers portaled into different documents — e.g. live-editor's iframe\n// Renderer — don't share state with the host document.\ntype MaskLessState = { count: number; originalPointerEvents: string | null };\nconst maskLessStates = new WeakMap<Document, MaskLessState>();\n\nconst getMaskLessState = (doc: Document): MaskLessState => {\n  let state = maskLessStates.get(doc);\n\n  if (!state) {\n    state = { count: 0, originalPointerEvents: null };\n    maskLessStates.set(doc, state);\n  }\n\n  return state;\n};\n\nexport interface Props {\n  open: boolean;\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  extra?: React.ReactNode;\n  footer?: React.ReactNode;\n  closable?: boolean;\n  closeIcon?: React.ReactNode;\n  direction?: 'top' | 'bottom' | 'left' | 'right';\n  size?: 'small' | 'middle' | 'medium' | 'large' | 'full' | string;\n  maskClosable?: boolean;\n  handlebar?: boolean;\n  rounded?: boolean;\n  mask?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  classNames?: {\n    mask?: string;\n    content?: string;\n    handlebar?: string;\n    header?: string;\n    title?: string;\n    close?: string;\n    extra?: string;\n    body?: string;\n    footer?: string;\n  };\n  container?: HTMLElement;\n  onClose: () => void;\n}\n\nconst SIZES: Record<string, string> = {\n  small: '30%',\n  middle: '50%',\n  medium: '50%',\n  large: '75%',\n  full: '90%',\n};\n\n// Rounds the edge facing into the viewport — the opposite edge from\n// whichever side the drawer is anchored to.\nconst ROUNDED_CLASSES: Record<'top' | 'bottom' | 'left' | 'right', string> = {\n  top: 'rounded-b-[30px]!',\n  bottom: 'rounded-t-[30px]!',\n  left: 'rounded-r-[30px]!',\n  right: 'rounded-l-[30px]!',\n};\n\n// A side drawer sized by a preset is sized by a percentage of the viewport,\n// which collapses on a phone: `small` is 30%, so it lands at ~112px on a 375px\n// screen — a sliver too narrow to read. Floor the preset widths so they stay\n// usable on small screens. A custom `size` is passed through untouched; an\n// explicit value is the caller's decision, not something to second-guess.\nconst SIDE_MIN_WIDTH = '20rem';\n\nconst getSizeStyles = (\n  direction: 'top' | 'bottom' | 'left' | 'right',\n  size: string,\n): React.CSSProperties => {\n  if (direction === 'top' || direction === 'bottom') {\n    return { height: SIZES[size] || size };\n  }\n\n  const preset = SIZES[size];\n\n  return {\n    width: preset ? `max(${preset}, ${SIDE_MIN_WIDTH})` : size,\n    // Set inline so it beats `core/drawer`'s `sm:max-w-sm`, which would\n    // otherwise hold every side drawer at 24rem from the `sm` breakpoint up\n    // and leave `size` with no effect on anything wider than a phone. It also\n    // keeps the floor above from overflowing a container narrower than it.\n    maxWidth: '100%',\n  };\n};\n\nconst Drawer = ({\n  open,\n  title,\n  extra,\n  footer,\n  closable = true,\n  closeIcon,\n  direction = 'bottom',\n  size = 'middle',\n  maskClosable = true,\n  handlebar = true,\n  rounded = false,\n  mask = true,\n  className,\n  classNames,\n  style,\n  children,\n  container,\n  onClose,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  useEffect(() => {\n    if (!open || mask) {\n      return;\n    }\n\n    const targetDocument = container?.ownerDocument ?? document;\n    const targetWindow = targetDocument.defaultView ?? window;\n    const body = targetDocument.body;\n    const state = getMaskLessState(targetDocument);\n\n    if (state.count === 0) {\n      state.originalPointerEvents = body.style.pointerEvents;\n    }\n    state.count += 1;\n\n    const raf = targetWindow.requestAnimationFrame(() => {\n      body.style.pointerEvents = 'auto';\n    });\n\n    return () => {\n      targetWindow.cancelAnimationFrame(raf);\n      state.count -= 1;\n\n      if (state.count === 0) {\n        body.style.pointerEvents = state.originalPointerEvents ?? '';\n        state.originalPointerEvents = null;\n      }\n    };\n  }, [open, mask, container]);\n\n  return (\n    <DrawerCore\n      open={open}\n      // antd's mask ⇒ Base UI's modal (focus trap + scroll lock); maskClosable\n      // gates outside-press dismissal at the root, replacing vaul's\n      // Content-level onPointerDownOutside handler.\n      modal={mask}\n      disablePointerDismissal={!maskClosable}\n      onOpenChange={open => {\n        if (!open) {\n          onClose();\n        }\n      }}\n      {...props}\n    >\n      <DrawerContent\n        direction={direction}\n        container={container}\n        className={cn(\n          'border-none outline-none',\n          rounded ? ROUNDED_CLASSES[direction] : 'rounded-none!',\n          classNames?.content,\n          className,\n          //\n        )}\n        handlebar={handlebar}\n        mask={mask}\n        classNames={{\n          mask: classNames?.mask || '',\n          handlebar: classNames?.handlebar || '',\n        }}\n        style={{\n          ...getSizeStyles(direction, size),\n          ...style,\n        }}\n      >\n        <DrawerHeader\n          className={cn(\n            classNames?.header,\n            !title && 'p-0',\n            //\n          )}\n        >\n          <div className=\"flex items-start gap-2\">\n            {closable && (\n              <Button\n                variant=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                aria-label={locale.close ?? DEFAULT_LOCALE.close}\n                icon={closeIcon || <X />}\n                onClick={onClose}\n                className={cn(classNames?.close)}\n              />\n            )}\n            <div className=\"flex flex-1 items-start justify-between gap-2\">\n              <DrawerTitle className={cn(classNames?.title)}>\n                {title}\n              </DrawerTitle>\n              {extra != null && (\n                <div className={cn('shrink-0', classNames?.extra)}>{extra}</div>\n              )}\n            </div>\n          </div>\n          <DrawerDescription className=\"hidden\" />\n        </DrawerHeader>\n        <div\n          className={cn(\n            'overflow-auto p-5',\n            classNames?.body,\n            //\n          )}\n        >\n          {children}\n        </div>\n        {footer != null && (\n          <DrawerFooter className={cn(classNames?.footer)}>\n            {footer}\n          </DrawerFooter>\n        )}\n      </DrawerContent>\n    </DrawerCore>\n  );\n};\n\nexport default Drawer;\n"],"mappings":"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"}

package/dist/components/organisms/modal.mjs

@@ -4,8 +4,8 @@ import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
 import { dialog_exports } from "../../core/dialog.mjs";
 import Button from "../../Button.mjs";
 import { createImperativeStack, isBrowser } from "./imperative-stack.mjs";
-import { useState } from "react";
 import { Check, CircleQuestionMark, Info, OctagonAlert, OctagonX } from "lucide-react";
+import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/components/organisms/modal.tsx

package/dist/components/organisms/toast.mjs

@@ -3,8 +3,8 @@ import { cn } from "../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
 import Button from "../../Button.mjs";
 import { createImperativeStack, isBrowser } from "./imperative-stack.mjs";
-import { useState } from "react";
 import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
+import { useState } from "react";
 import { useTimeout } from "@jbpark/use-hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

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

@@ -2,8 +2,8 @@
 import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import { useRegisterSider } from "./sider-context.mjs";
-import { useEffect, useId, useRef } from "react";
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { useEffect, useId, useRef } from "react";
 import { useControllableState, useResponsiveSize } from "@jbpark/use-hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/templates/layout/sider.tsx

package/dist/core/accordion.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
-import "react";
 import { ChevronDownIcon } from "lucide-react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
 //#region src/core/accordion.tsx

package/dist/core/badge.d.mts

@@ -2,7 +2,7 @@ import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 //#region src/core/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
+  variant?: "link" | "outline" | "default" | "secondary" | "destructive" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = Omit<useRender.ComponentProps<'span'>, 'className'> & VariantProps<typeof badgeVariants> & {
   className?: string;

package/dist/core/button.d.mts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 import { Button } from "@base-ui/react/button";
 //#region src/core/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
+  variant?: "link" | "outline" | "default" | "secondary" | "destructive" | "ghost" | null | undefined;
   size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = Omit<React$1.ComponentProps<typeof Button>, 'className'> & VariantProps<typeof buttonVariants> & {

package/dist/core/calendar.mjs

@@ -2,8 +2,8 @@
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import { Button, buttonVariants } from "./button.mjs";
-import * as React$1 from "react";
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 //#region src/core/calendar.tsx

package/dist/core/checkbox.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
-import "react";
 import { CheckIcon } from "lucide-react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/core/checkbox.tsx

package/dist/core/combobox.mjs

@@ -3,8 +3,8 @@ 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 "react";
 import { CheckIcon } from "lucide-react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
 //#region src/core/combobox.tsx

package/dist/core/dialog.mjs

@@ -4,8 +4,8 @@ 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 "react";
 import { XIcon } from "lucide-react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/core/dialog.tsx

package/dist/core/radio-group.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
-import "react";
 import { CircleIcon } from "lucide-react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";

package/dist/core/select.mjs

@@ -3,8 +3,8 @@ 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 "react";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import "react";
 import { DirectionProvider } from "@base-ui/react/direction-provider";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";

package/dist/index.d.mts

@@ -1,24 +1,34 @@
+import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import Config, { Props as Props$7 } from "./providers/config/config.mjs";
+import { ConfigSnapshotProvider, getRootConfigValue } from "./providers/config/registry.mjs";
+import Avatar, { Props as Props$1 } from "./Avatar.mjs";
+import Badge, { Props as Props$2 } from "./Badge.mjs";
 import Button from "./Button.mjs";
+import Segmented, { Props as Props$26 } from "./Segmented.mjs";
 import Tag from "./Tag.mjs";
 import Typography from "./Typography.mjs";
-import Breadcrumb, { Props } from "./Breadcrumb.mjs";
-import Card, { Props as Props$1 } from "./Card.mjs";
-import Menu, { Props as Props$15 } from "./components/molecules/menu/menu.mjs";
-import Pagination, { Props as Props$18 } from "./Pagination.mjs";
-import { Props as Props$20 } from "./components/molecules/reveals/reveals.mjs";
+import Alert, { Props } from "./Alert.mjs";
+import Breadcrumb, { Props as Props$3 } from "./Breadcrumb.mjs";
+import Card, { Props as Props$4 } from "./Card.mjs";
+import Menu, { Props as Props$19 } from "./components/molecules/menu/menu.mjs";
+import Pagination, { Props as Props$22 } from "./Pagination.mjs";
+import { Props as Props$24 } from "./components/molecules/reveals/reveals.mjs";
 import Reveals from "./Reveals.mjs";
-import Space, { Props as Props$23 } from "./Space.mjs";
-import Table, { Column, PaginationOptions, Props as Props$26 } from "./Table.mjs";
-import { Props as Props$6 } from "./components/templates/layout/content.mjs";
-import { Props as Props$10 } from "./components/templates/layout/footer.mjs";
-import { Props as Props$11 } from "./components/templates/layout/header.mjs";
-import { Props as Props$12 } from "./components/templates/layout/layout.mjs";
-import { Props as Props$22 } from "./components/templates/layout/sider.mjs";
+import Space, { Props as Props$28 } from "./Space.mjs";
+import Steps, { Item, Props as Props$30 } from "./Steps.mjs";
+import Table, { Column, PaginationOptions, Props as Props$32 } from "./Table.mjs";
+import { Props as Props$9 } from "./components/templates/layout/content.mjs";
+import { Props as Props$13 } from "./components/templates/layout/footer.mjs";
+import { Props as Props$14 } from "./components/templates/layout/header.mjs";
+import { Props as Props$16 } from "./components/templates/layout/layout.mjs";
+import { Props as Props$27 } from "./components/templates/layout/sider.mjs";
 import Layout from "./Layout.mjs";
 import Checkbox from "./components/atoms/checkbox/index.mjs";
 import ColorPicker from "./components/atoms/color-picker.mjs";
 import DatePicker from "./components/atoms/date-picker.mjs";
 import FloatButton from "./components/atoms/float-button/index.mjs";
+import { Props as Props$15 } from "./components/atoms/input/number.mjs";
 import Input from "./components/atoms/input/index.mjs";
 import Popover from "./components/atoms/popover.mjs";
 import Progress from "./components/atoms/progress.mjs";
@@ -28,35 +38,31 @@ import Select from "./components/atoms/select.mjs";
 import Skeleton from "./components/atoms/skeleton/index.mjs";
 import Slider from "./components/atoms/slider/slider.mjs";
 import Spin from "./components/atoms/spin.mjs";
-import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
-import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
-import Config, { Props as Props$4 } from "./providers/config/config.mjs";
-import { ConfigSnapshotProvider, getRootConfigValue } from "./providers/config/registry.mjs";
 import Switch from "./components/atoms/switch.mjs";
 import Tooltip from "./components/atoms/tooltip.mjs";
 import "./components/atoms/index.mjs";
-import Collapse, { Props as Props$3 } from "./components/molecules/collapse.mjs";
-import Dropdown, { Props as Props$8 } from "./components/molecules/dropdown.mjs";
-import { Props as Props$14 } from "./components/molecules/marquees/marquees.mjs";
+import Collapse, { Props as Props$6 } from "./components/molecules/collapse.mjs";
+import Dropdown, { Props as Props$11 } from "./components/molecules/dropdown.mjs";
+import { Props as Props$18 } from "./components/molecules/marquees/marquees.mjs";
 import Marquees from "./components/molecules/marquees/index.mjs";
-import { Props as Props$24 } from "./components/molecules/splitter/splitter.mjs";
+import { Props as Props$29 } from "./components/molecules/splitter/splitter.mjs";
 import Splitter from "./components/molecules/splitter/index.mjs";
-import Tabs, { Props as Props$27 } from "./components/molecules/tabs.mjs";
-import Upload, { Props as Props$28, UploadFile } from "./components/molecules/upload.mjs";
+import Tabs, { Props as Props$33 } from "./components/molecules/tabs.mjs";
+import Upload, { Props as Props$34, UploadFile } from "./components/molecules/upload.mjs";
 import "./components/molecules/index.mjs";
-import Drawer, { Props as Props$7 } from "./components/organisms/drawer.mjs";
-import { Props as Props$13 } from "./components/organisms/list/list.mjs";
+import Drawer, { Props as Props$10 } from "./components/organisms/drawer.mjs";
+import { Props as Props$17 } from "./components/organisms/list/list.mjs";
 import List from "./components/organisms/list/index.mjs";
-import Modal, { Props as Props$16 } from "./components/organisms/modal.mjs";
-import { Props as Props$25 } from "./components/organisms/swiper/swiper.mjs";
+import Modal, { Props as Props$20 } from "./components/organisms/modal.mjs";
+import { Props as Props$31 } from "./components/organisms/swiper/swiper.mjs";
 import Swiper from "./components/organisms/swiper/index.mjs";
 import Toast, { ToastOptions as StaticProps } from "./components/organisms/toast.mjs";
 import "./components/organisms/index.mjs";
-import Container, { Props as Props$5 } from "./components/templates/container.mjs";
-import Empty, { Props as Props$9 } from "./components/templates/empty.mjs";
-import Result, { Props as Props$19 } from "./components/templates/result.mjs";
-import PageHeader, { Props as Props$17 } from "./components/templates/page-header.mjs";
-import Row, { Props as Props$21 } from "./components/templates/grid/row.mjs";
-import Col, { Props as Props$2 } from "./components/templates/grid/col.mjs";
+import Container, { Props as Props$8 } from "./components/templates/container.mjs";
+import Empty, { Props as Props$12 } from "./components/templates/empty.mjs";
+import Result, { Props as Props$23 } from "./components/templates/result.mjs";
+import PageHeader, { Props as Props$21 } from "./components/templates/page-header.mjs";
+import Row, { Props as Props$25 } from "./components/templates/grid/row.mjs";
+import Col, { Props as Props$5 } from "./components/templates/grid/col.mjs";
 import "./components/templates/index.mjs";
-export { Breadcrumb, type Props as BreadcrumbProps, Button, Card, type Props$1 as CardProps, Checkbox, Col, type Props$2 as ColProps, Collapse, type Props$3 as CollapseProps, ColorPicker, type ComponentSize, Config, type Props$4 as ConfigProps, ConfigSnapshotProvider, Container, type Props$5 as ContainerProps, type Props$6 as ContentProps, DEFAULT_LOCALE, DatePicker, type DefaultProps, Drawer, type Props$7 as DrawerProps, Dropdown, type Props$8 as DropdownProps, Empty, type Props$9 as EmptyProps, FloatButton, type Props$10 as FooterProps, type Props$11 as HeaderProps, Input, Layout, type Props$12 as LayoutProps, List, type Props$13 as ListProps, type Locale, Marquees, type Props$14 as MarqueesProps, Menu, type Props$15 as MenuProps, Modal, type Props$16 as ModalProps, PageHeader, type Props$17 as PageHeaderProps, Pagination, type Props$18 as PaginationProps, Popover, Progress, Radio, Result, type Props$19 as ResultProps, Reveals, type Props$20 as RevealsProps, RichTextEditor, Row, type Props$21 as RowProps, Select, type Props$22 as SiderProps, Skeleton, Slider, Space, type Props$23 as SpaceProps, Spin, Splitter, type Props$24 as SplitterProps, Swiper, type Props$25 as SwiperProps, Switch, Table, type Column as TableColumn, type PaginationOptions as TablePaginationOptions, type Props$26 as TableProps, Tabs, type Props$27 as TabsProps, Tag, type ThemeConfig, type ThemeToken, Toast, type StaticProps as ToastOptions, Tooltip, Typography, Upload, type UploadFile, type Props$28 as UploadProps, getRootConfigValue, useConfig };
+export { Alert, type Props as AlertProps, Avatar, type Props$1 as AvatarProps, Badge, type Props$2 as BadgeProps, Breadcrumb, type Props$3 as BreadcrumbProps, Button, Card, type Props$4 as CardProps, Checkbox, Col, type Props$5 as ColProps, Collapse, type Props$6 as CollapseProps, ColorPicker, type ComponentSize, Config, type Props$7 as ConfigProps, ConfigSnapshotProvider, Container, type Props$8 as ContainerProps, type Props$9 as ContentProps, DEFAULT_LOCALE, DatePicker, type DefaultProps, Drawer, type Props$10 as DrawerProps, Dropdown, type Props$11 as DropdownProps, Empty, type Props$12 as EmptyProps, FloatButton, type Props$13 as FooterProps, type Props$14 as HeaderProps, Input, type Props$15 as InputNumberProps, Layout, type Props$16 as LayoutProps, List, type Props$17 as ListProps, type Locale, Marquees, type Props$18 as MarqueesProps, Menu, type Props$19 as MenuProps, Modal, type Props$20 as ModalProps, PageHeader, type Props$21 as PageHeaderProps, Pagination, type Props$22 as PaginationProps, Popover, Progress, Radio, Result, type Props$23 as ResultProps, Reveals, type Props$24 as RevealsProps, RichTextEditor, Row, type Props$25 as RowProps, Segmented, type Props$26 as SegmentedProps, Select, type Props$27 as SiderProps, Skeleton, Slider, Space, type Props$28 as SpaceProps, Spin, Splitter, type Props$29 as SplitterProps, type Item as StepItem, Steps, type Props$30 as StepsProps, Swiper, type Props$31 as SwiperProps, Switch, Table, type Column as TableColumn, type PaginationOptions as TablePaginationOptions, type Props$32 as TableProps, Tabs, type Props$33 as TabsProps, Tag, type ThemeConfig, type ThemeToken, Toast, type StaticProps as ToastOptions, Tooltip, Typography, Upload, type UploadFile, type Props$34 as UploadProps, getRootConfigValue, useConfig };

package/dist/index.mjs

@@ -2,6 +2,8 @@
 import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
 import { ConfigSnapshotProvider, getRootConfigValue } from "./providers/config/registry.mjs";
 import Config from "./providers/config/config.mjs";
+import Avatar from "./Avatar.mjs";
+import Badge from "./Badge.mjs";
 import Button from "./Button.mjs";
 import Checkbox from "./components/atoms/checkbox/index.mjs";
 import Typography from "./Typography.mjs";
@@ -14,6 +16,7 @@ import Progress from "./components/atoms/progress.mjs";
 import Radio from "./components/atoms/radio/index.mjs";
 import Select from "./components/atoms/select.mjs";
 import RichTextEditor from "./components/atoms/rich-text-editor/rich-text-editor.mjs";
+import Segmented from "./Segmented.mjs";
 import Skeleton from "./components/atoms/skeleton/index.mjs";
 import slider_default from "./components/atoms/slider/index.mjs";
 import Spin from "./components/atoms/spin.mjs";
@@ -21,6 +24,7 @@ import Switch from "./components/atoms/switch.mjs";
 import Tag from "./Tag.mjs";
 import Tooltip from "./components/atoms/tooltip.mjs";
 import Card from "./Card.mjs";
+import Alert from "./Alert.mjs";
 import Breadcrumb from "./Breadcrumb.mjs";
 import Collapse from "./components/molecules/collapse.mjs";
 import Menu from "./components/molecules/menu/menu.mjs";
@@ -30,6 +34,7 @@ import Pagination from "./Pagination.mjs";
 import Reveals from "./Reveals.mjs";
 import Splitter from "./components/molecules/splitter/index.mjs";
 import Space from "./Space.mjs";
+import Steps from "./Steps.mjs";
 import Tabs from "./components/molecules/tabs.mjs";
 import Upload from "./components/molecules/upload.mjs";
 import Drawer from "./components/organisms/drawer.mjs";
@@ -45,4 +50,4 @@ import Result from "./components/templates/result.mjs";
 import PageHeader from "./components/templates/page-header.mjs";
 import Row from "./components/templates/grid/row.mjs";
 import Col from "./components/templates/grid/col.mjs";
-export { Breadcrumb, Button, Card, Checkbox, Col, Collapse, ColorPicker, Config, ConfigSnapshotProvider, Container, DEFAULT_LOCALE, DatePicker, Drawer, Dropdown, Empty, FloatButton, Input, Layout, List, Marquees, Menu, Modal, PageHeader, Pagination, Popover, Progress, Radio, Result, Reveals, RichTextEditor, Row, Select, Skeleton, slider_default as Slider, Space, Spin, Splitter, Swiper, Switch, Table, Tabs, Tag, Toast, Tooltip, Typography, Upload, getRootConfigValue, useConfig };
+export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Col, Collapse, ColorPicker, Config, ConfigSnapshotProvider, Container, DEFAULT_LOCALE, DatePicker, Drawer, Dropdown, Empty, FloatButton, Input, Layout, List, Marquees, Menu, Modal, PageHeader, Pagination, Popover, Progress, Radio, Result, Reveals, RichTextEditor, Row, Segmented, Select, Skeleton, slider_default as Slider, Space, Spin, Splitter, Steps, Swiper, Switch, Table, Tabs, Tag, Toast, Tooltip, Typography, Upload, getRootConfigValue, useConfig };