@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/DropdownMenu/style.mjs

@@ -0,0 +1,195 @@
+//#region src/DropdownMenu/style.ts
+const menuClassNames = {
+	icon: "lobe-menu-icon",
+	label: "lobe-menu-label",
+	popup: "lobe-menu-popup",
+	positioner: "lobe-menu-positioner",
+	submenuArrow: "lobe-menu-submenu-arrow"
+};
+const menuStyles = {
+	danger: {
+		"--lobe-menu-icon-color": "lb107ansx",
+		kWkggS: "lb86rvtz lb85pxvj lb16xa4ls",
+		kMwMTN: "lb12ap7uz",
+		$$css: true
+	},
+	empty: {
+		kMwMTN: "lb53gy9q lb2poks1",
+		kkrTdU: "lbt0e3qv lb5ezrf1",
+		kKX8nH: "lb1k4tb9n",
+		$$css: true
+	},
+	extra: {
+		kMwMTN: "lb53gy9q",
+		kMv6JI: "lb2xbw48",
+		kGuDYH: "lbfifm61",
+		keTefX: "lbvc5jky",
+		kZCmMZ: "lbf7dkkf",
+		$$css: true
+	},
+	footer: {
+		k8WAf4: "lb1vvogim lbdzg2pt",
+		kg3NbH: "lbaope02 lb8x5n49",
+		kLZC3w: "lb592eyn",
+		kPef9Z: "lb13fuv20",
+		kEafiO: "lb178xt8z",
+		kmuXW: "lb2lah0s",
+		$$css: true
+	},
+	groupLabel: {
+		kg3NbH: "lbaope02",
+		kMwMTN: "lb53gy9q",
+		kGuDYH: "lb1k6wstc",
+		k63SB2: "lb1s688f",
+		kb6lSQ: "lbkv8mnm",
+		kLWn49: "lb1xxsxie",
+		kGO01o: "lbjkvuk6",
+		kLKAdn: "lb1y1aw1k lb1t8wt99",
+		kP9fke: "lbtvhhri",
+		kfSwDN: "lb87ps6o",
+		$$css: true
+	},
+	header: {
+		k8WAf4: "lb1vvogim lbdzg2pt",
+		kg3NbH: "lbaope02 lb8x5n49",
+		kL6WhQ: "lbsyjar",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		kmuXW: "lb2lah0s",
+		$$css: true
+	},
+	icon: {
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb18nsyn",
+		k1xSpc: "lb78zum5",
+		kmuXW: "lb2lah0s",
+		kjj79g: "lbl56j7k",
+		k71WvV: "lbbmvrgn",
+		kZKoxP: "lb1v9usgg",
+		kzqmXN: "lb6jxa94",
+		$$css: true
+	},
+	iconAlignStart: {
+		kSGwAc: "lbqcrz7y",
+		keoZOQ: "lbr9ek0c",
+		$$css: true
+	},
+	item: {
+		kaIpWk: "lb1vihcfj",
+		kI3sdo: "lb1a2a7pz",
+		kVQacm: "lbb3r6kr",
+		k8WAf4: "lb1t0vds8",
+		kg3NbH: "lbaope02",
+		kmkexE: "lb18nfrvi",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lb1kvtry4 lbwew3ed lbn4ptgj",
+		kMwMTN: "lb66ogz0 lb2poks1",
+		kkrTdU: "lb5ezrf1",
+		k1xSpc: "lb78zum5",
+		kGuDYH: "lbif65rj",
+		kLWn49: "lb1fc57z9",
+		kSiTet: "lbxh3kiz",
+		kVAEAm: "lb1n2onr6",
+		kfSwDN: "lb87ps6o",
+		kAzted: "lb21xpn4",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	itemContent: {
+		kUk6DE: "lb98rzlu",
+		kOIVth: "lbxhr3t",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	itemContentAlignStart: {
+		kGNEyG: "lb1cy8zhl",
+		$$css: true
+	},
+	label: {
+		kUk6DE: "lb98rzlu",
+		kVQacm: "lbb3r6kr",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	labelGroup: {
+		kUk6DE: "lb98rzlu",
+		kVQacm: "lbb3r6kr",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	desc: {
+		kVQacm: "lbb3r6kr",
+		kMwMTN: "lb53gy9q",
+		kGuDYH: "lbfifm61",
+		kLWn49: "lb1d3mw78",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	popup: {
+		"--lobe-menu-popup-padding": "lbx5256q",
+		"--lobe-virtual-scroll-inset": "lb19d6fe",
+		kaIpWk: "lb1sbi92r",
+		kI3sdo: "lb1a2a7pz",
+		kg3NbH: "lb1ctfek0",
+		kWkggS: "lb1w937bt",
+		kGVxlE: "lbj07k4p",
+		k1xSpc: "lb1cuf08c",
+		kXwgrk: "lbrk0jpx",
+		kGO01o: "lb5fj2l4 lb1f9yvpy",
+		kLKAdn: "lblztzta lb7ao2f8",
+		kskxy: "lb1374xjt",
+		k7Eaqz: "lb12rczxh",
+		kXHlph: "lbj8hqjc",
+		kORKVm: "lb1odjw0f lb1j8km66",
+		$$css: true
+	},
+	popupWithSlots: {
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kskxy: "lb1374xjt",
+		kXHlph: "lb6ikm8r",
+		kORKVm: "lb10wlt62",
+		$$css: true
+	},
+	slotViewport: {
+		kUk6DE: "lb98rzlu",
+		kAzted: "lb2lwn1j",
+		kORKVm: "lb1odjw0f",
+		$$css: true
+	},
+	positioner: {
+		"--lobe-dropdown-animation-duration": "lbx26zto lb13mkx0c",
+		"--lobe-dropdown-animation-ease-in": "lb1l96weh",
+		"--lobe-dropdown-animation-ease-out": "lbmyf473",
+		"--lobe-dropdown-animation-scale-y": "lbkiw9s4 lbdiwzxj",
+		kY2c9j: "lbp6lfbs lbkskvg3",
+		$$css: true
+	},
+	separator: {
+		kqGvvJ: "lbg9jes1",
+		kUOVxO: "lbrxpjvj",
+		kWkggS: "lb1yqcoyj",
+		kZKoxP: "lbjm9jq1",
+		$$css: true
+	},
+	submenuArrow: {
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb18nsyn",
+		k1xSpc: "lb78zum5",
+		kmuXW: "lb2lah0s",
+		kjj79g: "lbl56j7k",
+		keTefX: "lb13fj5qh",
+		kZKoxP: "lblup9mm",
+		kzqmXN: "lb1kky2od",
+		$$css: true
+	}
+};
+//#endregion
+export { menuClassNames, menuStyles };
+
+//# sourceMappingURL=style.mjs.map

package/es/DropdownMenu/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DropdownMenu/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst disabled = ':is([data-disabled])';\nconst openOrHighlighted =\n  \":is([data-highlighted], [data-state='open'], [data-open], [aria-expanded='true'])\";\nconst dangerHighlight = `${openOrHighlighted}:not(${disabled}, :hover)`;\nconst dangerActive = `:active:not(${disabled}, ${openOrHighlighted}, :hover)`;\nconst itemHover = `:hover:not(:active, ${disabled})`;\nconst itemActive = `:active:not(${disabled}, ${openOrHighlighted})`;\nconst itemHighlight = `${openOrHighlighted}:not(${disabled})`;\nconst slotItem = \":has(> [role^='menuitem'])\";\nconst withHeader = \":is([data-has-header], :has(> [data-slot='header']))\";\nconst withFooter = \":is([data-has-footer], :has(> [data-slot='footer']))\";\nconst withVirtual = ':has(> [data-virtual])';\nconst instantPositioner =\n  \":is([data-submenu], [data-nested], [data-side='left'], [data-side='right'])\";\n\nexport const menuClassNames = {\n  icon: 'lobe-menu-icon',\n  label: 'lobe-menu-label',\n  popup: 'lobe-menu-popup',\n  positioner: 'lobe-menu-positioner',\n  submenuArrow: 'lobe-menu-submenu-arrow',\n} as const;\n\nexport const menuStyles = stylex.create({\n  danger: {\n    '--lobe-menu-icon-color': cssVar.colorError,\n    'backgroundColor': {\n      [dangerActive]: cssVar.colorFillSecondary,\n      [dangerHighlight]: cssVar.colorFillTertiary,\n      'default': null,\n      ':hover': cssVar.colorErrorBg,\n    },\n    'color': cssVar.colorError,\n  },\n\n  empty: {\n    color: { default: cssVar.colorTextTertiary, [disabled]: cssVar.colorTextDisabled },\n    cursor: { default: 'default', [disabled]: 'not-allowed' },\n    fontStyle: 'italic',\n  },\n\n  extra: {\n    color: cssVar.colorTextTertiary,\n    fontFamily: cssVar.fontFamilyCode,\n    fontSize: 12,\n    marginInlineStart: 'auto',\n    paddingInlineStart: 16,\n  },\n\n  footer: {\n    paddingBlock: { default: 8, [slotItem]: 4 },\n    paddingInline: { default: 12, [slotItem]: 0 },\n    borderBlockStartColor: cssVar.colorBorder,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n    flexShrink: 0,\n  },\n\n  groupLabel: {\n    paddingInline: 12,\n    color: cssVar.colorTextTertiary,\n    fontSize: 10,\n    fontWeight: 600,\n    letterSpacing: '0.6px',\n    lineHeight: '14px',\n    paddingBlockEnd: 4,\n    paddingBlockStart: { 'default': 8, \":is([role='group']:first-child > *)\": 4 },\n    textTransform: 'uppercase',\n    userSelect: 'none',\n  },\n\n  header: {\n    paddingBlock: { default: 8, [slotItem]: 4 },\n    paddingInline: { default: 12, [slotItem]: 0 },\n    borderBlockEndColor: cssVar.colorBorder,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    flexShrink: 0,\n  },\n\n  icon: {\n    alignItems: 'center',\n    color: `var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary})`,\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n    marginInlineEnd: 12,\n    height: 14,\n    width: 14,\n  },\n\n  iconAlignStart: {\n    alignSelf: 'flex-start',\n    marginBlockStart: 2,\n  },\n\n  item: {\n    borderRadius: cssVar.borderRadiusSM,\n    outline: 'none',\n    overflow: 'hidden',\n    paddingBlock: 6,\n    paddingInline: 12,\n    transition: `all 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: {\n      default: null,\n      [itemActive]: cssVar.colorFillSecondary,\n      [itemHighlight]: cssVar.colorFillTertiary,\n      [itemHover]: cssVar.colorFillTertiary,\n    },\n    color: { default: cssVar.colorText, [disabled]: cssVar.colorTextDisabled },\n    cursor: { default: null, [disabled]: 'not-allowed' },\n    display: 'flex',\n    fontSize: 14,\n    lineHeight: '20px',\n    opacity: { default: null, [disabled]: 0.5 },\n    position: 'relative',\n    userSelect: 'none',\n    minHeight: 32,\n    width: '100%',\n  },\n\n  itemContent: {\n    flex: '1',\n    gap: 0,\n    alignItems: 'center',\n    display: 'flex',\n  },\n\n  itemContentAlignStart: {\n    alignItems: 'flex-start',\n  },\n\n  label: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n\n  labelGroup: {\n    flex: '1',\n    overflow: 'hidden',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n  },\n\n  desc: {\n    overflow: 'hidden',\n    color: cssVar.colorTextTertiary,\n    fontSize: 12,\n    lineHeight: '16px',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n\n  popup: {\n    '--lobe-menu-popup-padding': '4px',\n    '--lobe-virtual-scroll-inset': {\n      default: null,\n      [withVirtual]: 'var(--lobe-menu-popup-padding)',\n    },\n    'borderRadius': cssVar.borderRadius,\n    'outline': 'none',\n    'paddingInline': 'var(--lobe-menu-popup-padding)',\n    'backgroundColor': cssVar.colorBgElevated,\n    'boxShadow': `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    'display': { default: null, [withVirtual]: 'flex' },\n    'flexDirection': { default: null, [withVirtual]: 'column' },\n    'paddingBlockEnd': { default: 'var(--lobe-menu-popup-padding)', [withFooter]: 0 },\n    'paddingBlockStart': { default: 'var(--lobe-menu-popup-padding)', [withHeader]: 0 },\n    'maxHeight': 'var(--available-height)',\n    'minWidth': 220,\n    'overflowX': { default: null, [withVirtual]: 'hidden' },\n    'overflowY': { default: 'auto', [withVirtual]: 'hidden' },\n  },\n\n  popupWithSlots: {\n    display: 'flex',\n    flexDirection: 'column',\n    maxHeight: 'var(--available-height)',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n  },\n\n  slotViewport: {\n    flex: '1',\n    minHeight: 0,\n    overflowY: 'auto',\n  },\n\n  positioner: {\n    '--lobe-dropdown-animation-duration': { default: '140ms', [instantPositioner]: '0ms' },\n    '--lobe-dropdown-animation-ease-in': 'ease-in',\n    '--lobe-dropdown-animation-ease-out': cssVar.motionEaseOut,\n    '--lobe-dropdown-animation-scale-y': { default: '0.92', [instantPositioner]: '1' },\n    'zIndex': { 'default': 1100, ':is([data-submenu], [data-nested])': 1199 },\n  },\n\n  separator: {\n    marginBlock: 4,\n    marginInline: 0,\n    backgroundColor: cssVar.colorBorder,\n    height: 1,\n  },\n\n  submenuArrow: {\n    alignItems: 'center',\n    color: `var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary})`,\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n    marginInlineStart: 8,\n    height: 16,\n    width: 16,\n  },\n});\n"],"mappings":";AAgBA,MAAa,iBAAiB;CAC5B,MAAM;CACN,OAAO;CACP,OAAO;CACP,YAAY;CACZ,cAAc;AAChB;AACA,MAAa,aAAa;CACxB,QAAQ;EACN,0BAA0B;EAC1B,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,uBAAuB;EACrB,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,6BAA6B;EAC7B,+BAA+B;EAC/B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,sCAAsC;EACtC,qCAAqC;EACrC,sCAAsC;EACtC,qCAAqC;EACrC,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/DropdownMenu/type.d.mts

@@ -0,0 +1,57 @@
+import { Trigger } from "../types/trigger.mjs";
+import "../types/index.mjs";
+import { Placement } from "../utils/placement.mjs";
+import { VirtualListProps } from "../internal/virtual/type.mjs";
+import "../internal/virtual/index.mjs";
+import { MenuCheckboxItemType } from "../internal/menu/checkboxItem.mjs";
+import { MenuSwitchItemType } from "../internal/menu/switchItem.mjs";
+import { BaseMenuItemType } from "../internal/menu/baseItem.mjs";
+import { IconAlign, IconSpaceMode } from "../internal/menu/renderUtils.mjs";
+import "../internal/menu/index.mjs";
+import "./renderItems.mjs";
+import { ReactNode } from "react";
+import { MenuPopupProps, MenuPortalProps, MenuPositionerProps, MenuRootProps, MenuTriggerProps } from "@base-ui/react/menu";
+//#region src/DropdownMenu/type.d.ts
+export type DropdownMenuPlacement = Placement;
+export type DropdownMenuCheckboxItem = MenuCheckboxItemType;
+export type DropdownMenuSwitchItem = MenuSwitchItemType;
+export type DropdownItem = BaseMenuItemType;
+export interface DropdownMenuProps<Payload = unknown> extends Omit<MenuRootProps<Payload>, 'children'>, Pick<VirtualListProps, 'virtual' | 'listItemHeight'> {
+  children: ReactNode;
+  /**
+   * 底部固定插槽，渲染于可滚动的 items 区域下方，自带分隔边框
+   */
+  footer?: ReactNode;
+  /**
+   * 顶部固定插槽，渲染于可滚动的 items 区域上方，自带分隔边框
+   */
+  header?: ReactNode;
+  /**
+   * 图标与 label+desc 的垂直对齐方式
+   * - 'center': 图标垂直居中（默认）
+   * - 'start': 图标与第一行文本顶部对齐，仅在 item 有 desc 时生效
+   * @default 'center'
+   */
+  iconAlign?: IconAlign;
+  /**
+   * 图标空间保留模式
+   * - 'global': 当任何一个选项有图标时，所有 item 都保留图标位
+   * - 'group': 只有当一个分组中存在图标时，该分组才保留图标位
+   * @default 'global'
+   */
+  iconSpaceMode?: IconSpaceMode;
+  items: DropdownItem[] | (() => DropdownItem[]);
+  nativeButton?: boolean;
+  placement?: DropdownMenuPlacement;
+  popupProps?: MenuPopupProps;
+  portalProps?: MenuPortalProps;
+  positionerProps?: MenuPositionerProps;
+  /**
+   * 触发方式
+   * @default 'click'
+   */
+  trigger?: Trigger;
+  triggerProps?: Omit<MenuTriggerProps<Payload>, 'children'>;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/EditableText/ControlInput.d.mts

@@ -1,9 +1,9 @@
-import { ActionIconProps } from "../base-ui/ActionIcon/type.mjs";
-import "../base-ui/ActionIcon/index.mjs";
-import { InputProps } from "../base-ui/Input/type.mjs";
-import "../base-ui/Input/index.mjs";
+import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
+import { InputProps } from "../Input/type.mjs";
+import "../Input/index.mjs";
 //#region src/EditableText/ControlInput.d.ts
-interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
+export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
   onChange?: (value: string) => void;
   onChangeEnd?: (value: string) => void;
   onValueChanging?: (value: string) => void;
@@ -15,5 +15,4 @@ interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onA
   value?: string;
 }
 //#endregion
-export { ControlInputProps };
 //# sourceMappingURL=ControlInput.d.mts.map

package/es/EditableText/ControlInput.mjs

@@ -1,7 +1,7 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
-import Input_default from "../base-ui/Input/Input.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import Input_default from "../Input/Input.mjs";
 import { memo, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RotateCcw, Save } from "lucide-react";

package/es/EditableText/ControlInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ControlInput.mjs","names":["Input","Flexbox"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/base-ui/ActionIcon';\nimport { Input, type InputProps } from '@/base-ui/Input';\nimport { Flexbox } from '@/Flex';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLInputElement>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              horizontal\n              gap={2}\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n              />\n            </Flexbox>\n          )\n        }\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;AAqBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,qBAAqB;EACzB,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB;CAEA,OACE,oBAACA,eAAD;EACE,WAAA;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACA,QACE,UAAU,QACR,oBAAC,QAAD,CAAO,CAAA,IAEP,qBAACC,mBAAD;GACE,YAAA;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;GACV;GANF,UAAA,CAQE,oBAAC,YAAD;IACE,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,SAAS,SAAS,EAAE;IACtB;GACD,CAAA,GACD,oBAAC,YAAD;IACE,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,aAAa;IACf;GACD,CAAA,CACM;;EAGJ;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"ControlInput.mjs","names":["Input","Flexbox"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { Input, type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLInputElement>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              horizontal\n              gap={2}\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n              />\n            </Flexbox>\n          )\n        }\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;AAqBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,qBAAqB;EACzB,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB;CAEA,OACE,oBAACA,eAAD;EACE,WAAA;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACA,QACE,UAAU,QACR,oBAAC,QAAD,CAAO,CAAA,IAEP,qBAACC,mBAAD;GACE,YAAA;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;GACV;GANF,UAAA,CAQE,oBAAC,YAAD;IACE,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,SAAS,SAAS,EAAE;IACtB;GACD,CAAA,GACD,oBAAC,YAAD;IACE,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,aAAa;IACf;GACD,CAAA,CACM;;EAGJ;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}

package/es/EditableText/EditableText.mjs

@@ -1,16 +1,16 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { cx } from "../styles/css.mjs";
 import ControlInput from "./ControlInput.mjs";
 import { memo, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
-import useMergeState from "use-merge-value";
 import { Edit3 } from "lucide-react";
+import useControlledState from "use-merge-value";
 import { useHotkeys } from "react-hotkeys-hook";
 //#region src/EditableText/EditableText.tsx
 const EditableText = memo(({ value, showEditIcon = true, onChange, editing, onEditingChange, onChangeEnd, onFocus, onBlur, className, inputProps, onValueChanging, gap = 8, style, size = "small", styles, classNames, variant = "borderless", ...rest }) => {
-	const [edited, setEdited] = useMergeState(false, {
+	const [edited, setEdited] = useControlledState(false, {
 		onChange: onEditingChange,
 		value: editing
 	});

package/es/EditableText/EditableText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...(size === 'small' && { fontSize: 14 }),\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,WACE,aACM;EACJ,UAAU,KAAK;CACjB,GACA;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;CAClB,CACF;CAEA,MAAM,SAAS,cAAc;EAC3B,IAAI,CAAC,MAAM,OAAO;EAClB,QAAQ,MAAR;GACE,KAAK,SACH,OAAO;GAET,KAAK,UACH,OAAO;GAET,KAAK,SACH,OAAO;EAEX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,KAAK;EACpC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAI,SAAS,WAAW,EAAE,UAAU,GAAG;GACvC,GAAG;GACH,GAAG,QAAQ;EACb;EACQ;EACE;EACD;EACQ;EACjB,cAAc,MAAM;GAClB,cAAc,CAAC;GACf,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;CAGH,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;GACb,UAAU,CAAC,MAAM;EACnB;CACD,CAAA,CAEH,EAAA,CAAA;CAGJ,OACE,oBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,SAAS;EACzC;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;EACb;EACA,GAAI;EAEH,UAAA,SAAS,QAAQ;CACX,CAAA;AAEb,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"EditableText.mjs","names":["Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { cx } from '@/styles';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...(size === 'small' && { fontSize: 14 }),\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,WACE,aACM;EACJ,UAAU,KAAK;CACjB,GACA;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;CAClB,CACF;CAEA,MAAM,SAAS,cAAc;EAC3B,IAAI,CAAC,MAAM,OAAO;EAClB,QAAQ,MAAR;GACE,KAAK,SACH,OAAO;GAET,KAAK,UACH,OAAO;GAET,KAAK,SACH,OAAO;EAEX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,KAAK;EACpC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAI,SAAS,WAAW,EAAE,UAAU,GAAG;GACvC,GAAG;GACH,GAAG,QAAQ;EACb;EACQ;EACE;EACD;EACQ;EACjB,cAAc,MAAM;GAClB,cAAc,CAAC;GACf,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;CAGH,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;GACb,UAAU,CAAC,MAAM;EACnB;CACD,CAAA,CAEH,EAAA,CAAA;CAGJ,OACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,SAAS;EACzC;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;EACb;EACA,GAAI;EAEH,UAAA,SAAS,QAAQ;CACX,CAAA;AAEb,CACF;AAEA,aAAa,cAAc"}

package/es/EditableText/type.d.mts

@@ -3,7 +3,7 @@ import "../Flex/index.mjs";
 import { ControlInputProps } from "./ControlInput.mjs";
 import { CSSProperties } from "react";
 //#region src/EditableText/type.d.ts
-interface EditableTextProps extends Omit<FlexboxProps, 'onChange' | 'onBlur' | 'onFocus'>, Pick<ControlInputProps, 'onChange' | 'value' | 'onChangeEnd' | 'onValueChanging' | 'texts' | 'variant' | 'onBlur' | 'onFocus'> {
+export interface EditableTextProps extends Omit<FlexboxProps, 'onChange' | 'onBlur' | 'onFocus'>, Pick<ControlInputProps, 'onChange' | 'value' | 'onChangeEnd' | 'onValueChanging' | 'texts' | 'variant' | 'onBlur' | 'onFocus'> {
   className?: string;
   classNames?: {
     container?: string;
@@ -32,5 +32,4 @@ interface EditableTextProps extends Omit<FlexboxProps, 'onChange' | 'onBlur' | '
   variant?: ControlInputProps['variant'];
 }
 //#endregion
-export { EditableTextProps };
 //# sourceMappingURL=type.d.mts.map

package/es/EditorSlashMenu/atoms.d.mts

@@ -1,76 +1,75 @@
 import React from "react";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 //#region src/EditorSlashMenu/atoms.d.ts
-declare const EditorSlashMenuRoot: typeof Autocomplete.Root;
-declare const EditorSlashMenuList: {
+export declare const EditorSlashMenuRoot: typeof Autocomplete.Root;
+export declare const EditorSlashMenuList: {
   ({ ref, className, ...rest }: React.ComponentProps<typeof Autocomplete.List> & {
     ref?: React.RefObject<HTMLDivElement | null>;
   }): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuPortalProps = React.ComponentProps<typeof Autocomplete.Portal> & {
+export type EditorSlashMenuPortalProps = React.ComponentProps<typeof Autocomplete.Portal> & {
   /**
    * When `container` is not provided, it uses a shared container created by `usePortalContainer`.
    */
   container?: HTMLElement | null;
 };
-declare const EditorSlashMenuPortal: {
+export declare const EditorSlashMenuPortal: {
   ({ container, ...rest }: EditorSlashMenuPortalProps): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuPositionerProps = React.ComponentProps<typeof Autocomplete.Positioner>;
-declare const EditorSlashMenuPositioner: {
+export type EditorSlashMenuPositionerProps = React.ComponentProps<typeof Autocomplete.Positioner>;
+export declare const EditorSlashMenuPositioner: {
   ({ className, align, positionMethod, side, sideOffset, ...rest }: EditorSlashMenuPositionerProps): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuPopupProps = React.ComponentProps<typeof Autocomplete.Popup>;
-declare const EditorSlashMenuPopup: {
+export type EditorSlashMenuPopupProps = React.ComponentProps<typeof Autocomplete.Popup>;
+export declare const EditorSlashMenuPopup: {
   ({ className, initialFocus, ...rest }: EditorSlashMenuPopupProps): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuItemProps = React.ComponentProps<typeof Autocomplete.Item> & {
+export type EditorSlashMenuItemProps = React.ComponentProps<typeof Autocomplete.Item> & {
   danger?: boolean;
 };
-declare const EditorSlashMenuItem: {
+export declare const EditorSlashMenuItem: {
   ({ className, danger, ...rest }: EditorSlashMenuItemProps): React.JSX.Element;
   displayName: string;
 };
-declare const EditorSlashMenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type EditorSlashMenuGroupLabelProps = React.ComponentProps<typeof Autocomplete.GroupLabel>;
-declare const EditorSlashMenuGroupLabel: {
+export declare const EditorSlashMenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type EditorSlashMenuGroupLabelProps = React.ComponentProps<typeof Autocomplete.GroupLabel>;
+export declare const EditorSlashMenuGroupLabel: {
   ({ className, ...rest }: EditorSlashMenuGroupLabelProps): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuEmptyProps = React.ComponentProps<typeof Autocomplete.Empty>;
-declare const EditorSlashMenuEmpty: {
+export type EditorSlashMenuEmptyProps = React.ComponentProps<typeof Autocomplete.Empty>;
+export declare const EditorSlashMenuEmpty: {
   ({ className, ...rest }: EditorSlashMenuEmptyProps): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;
-declare const EditorSlashMenuItemContent: {
+export type EditorSlashMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const EditorSlashMenuItemContent: {
   ({ className, ...rest }: EditorSlashMenuItemContentProps): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;
-declare const EditorSlashMenuItemIcon: {
+export type EditorSlashMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const EditorSlashMenuItemIcon: {
   ({ className, ...rest }: EditorSlashMenuItemIconProps): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;
-declare const EditorSlashMenuItemLabel: {
+export type EditorSlashMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const EditorSlashMenuItemLabel: {
   ({ className, ...rest }: EditorSlashMenuItemLabelProps): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;
-declare const EditorSlashMenuItemExtra: {
+export type EditorSlashMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const EditorSlashMenuItemExtra: {
   ({ className, ...rest }: EditorSlashMenuItemExtraProps): React.JSX.Element;
   displayName: string;
 };
-type EditorSlashMenuHiddenInputProps = React.ComponentProps<typeof Autocomplete.Input>;
-declare const EditorSlashMenuHiddenInput: {
+export type EditorSlashMenuHiddenInputProps = React.ComponentProps<typeof Autocomplete.Input>;
+export declare const EditorSlashMenuHiddenInput: {
   ({ className, ...rest }: EditorSlashMenuHiddenInputProps): React.JSX.Element;
   displayName: string;
 };
 //#endregion
-export { EditorSlashMenuEmpty, EditorSlashMenuEmptyProps, EditorSlashMenuGroup, EditorSlashMenuGroupLabel, EditorSlashMenuGroupLabelProps, EditorSlashMenuHiddenInput, EditorSlashMenuHiddenInputProps, EditorSlashMenuItem, EditorSlashMenuItemContent, EditorSlashMenuItemContentProps, EditorSlashMenuItemExtra, EditorSlashMenuItemExtraProps, EditorSlashMenuItemIcon, EditorSlashMenuItemIconProps, EditorSlashMenuItemLabel, EditorSlashMenuItemLabelProps, EditorSlashMenuItemProps, EditorSlashMenuList, EditorSlashMenuPopup, EditorSlashMenuPopupProps, EditorSlashMenuPortal, EditorSlashMenuPortalProps, EditorSlashMenuPositioner, EditorSlashMenuPositionerProps, EditorSlashMenuRoot };
 //# sourceMappingURL=atoms.d.mts.map

package/es/EditorSlashMenu/atoms.mjs

@@ -1,20 +1,22 @@
 "use client";
-import { useAppElement } from "../ThemeProvider/AppElementContext.mjs";
-import { styles } from "../base-ui/DropdownMenu/sharedStyle.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
+import { menuClassNames, menuStyles } from "../DropdownMenu/style.mjs";
+import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 //#region src/EditorSlashMenu/atoms.tsx
 const mergeStateClassName = (base, className) => {
-	if (typeof className === "function") return (state) => cx(base, className(state));
-	return cx(base, className);
+	if (typeof className === "function") return (state) => clsx(base, className(state));
+	return clsx(base, className);
 };
+const sx = (styles) => stylex.props(styles).className ?? "";
 const EditorSlashMenuRoot = Autocomplete.Root;
 const EditorSlashMenuList = ({ ref, className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.List, {
 		...rest,
-		className: mergeStateClassName(cx(styles$1.list), className),
+		className: mergeStateClassName(sx(styles.list), className),
 		ref
 	});
 };
@@ -31,25 +33,25 @@ const EditorSlashMenuPositioner = ({ className, align, positionMethod, side, sid
 	return /* @__PURE__ */ jsx(Autocomplete.Positioner, {
 		...rest,
 		align: align ?? "start",
-		className: mergeStateClassName(styles.positioner, className),
 		positionMethod: positionMethod ?? "fixed",
 		side: side ?? "bottom",
-		sideOffset: sideOffset ?? 6
+		sideOffset: sideOffset ?? 6,
+		className: mergeStateClassName(clsx(sx(menuStyles.positioner), menuClassNames.positioner), className)
 	});
 };
 EditorSlashMenuPositioner.displayName = "EditorSlashMenuPositioner";
 const EditorSlashMenuPopup = ({ className, initialFocus = false, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.Popup, {
 		...rest,
-		className: mergeStateClassName(styles.popup, className),
-		initialFocus
+		initialFocus,
+		className: mergeStateClassName(clsx(sx(menuStyles.popup), menuClassNames.popup), className)
 	});
 };
 EditorSlashMenuPopup.displayName = "EditorSlashMenuPopup";
 const EditorSlashMenuItem = ({ className, danger, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.Item, {
 		...rest,
-		className: (state) => cx(styles.item, danger && styles.danger, typeof className === "function" ? className(state) : className)
+		className: (state) => clsx(sx([menuStyles.item, danger && menuStyles.danger]), typeof className === "function" ? className(state) : className)
 	});
 };
 EditorSlashMenuItem.displayName = "EditorSlashMenuItem";
@@ -57,49 +59,49 @@ const EditorSlashMenuGroup = Autocomplete.Group;
 const EditorSlashMenuGroupLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
 		...rest,
-		className: (state) => cx(styles.groupLabel, typeof className === "function" ? className(state) : className)
+		className: (state) => clsx(sx(menuStyles.groupLabel), typeof className === "function" ? className(state) : className)
 	});
 };
 EditorSlashMenuGroupLabel.displayName = "EditorSlashMenuGroupLabel";
 const EditorSlashMenuEmpty = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.Empty, {
 		...rest,
-		className: (state) => cx(styles.item, styles.empty, typeof className === "function" ? className(state) : className)
+		className: (state) => clsx(sx([menuStyles.item, menuStyles.empty]), typeof className === "function" ? className(state) : className)
 	});
 };
 EditorSlashMenuEmpty.displayName = "EditorSlashMenuEmpty";
 const EditorSlashMenuItemContent = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
-		className: cx(styles.itemContent, className)
+		className: clsx(sx(menuStyles.itemContent), className)
 	});
 };
 EditorSlashMenuItemContent.displayName = "EditorSlashMenuItemContent";
 const EditorSlashMenuItemIcon = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: cx(styles.icon, className)
+		className: clsx(sx(menuStyles.icon), menuClassNames.icon, className)
 	});
 };
 EditorSlashMenuItemIcon.displayName = "EditorSlashMenuItemIcon";
 const EditorSlashMenuItemLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: cx(styles.label, className)
+		className: clsx(sx(menuStyles.label), menuClassNames.label, className)
 	});
 };
 EditorSlashMenuItemLabel.displayName = "EditorSlashMenuItemLabel";
 const EditorSlashMenuItemExtra = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: cx(styles.extra, className)
+		className: clsx(sx(menuStyles.extra), className)
 	});
 };
 EditorSlashMenuItemExtra.displayName = "EditorSlashMenuItemExtra";
 const EditorSlashMenuHiddenInput = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.Input, {
 		...rest,
-		className: mergeStateClassName(cx(styles$1.hiddenInput), className)
+		className: mergeStateClassName(sx(styles.hiddenInput), className)
 	});
 };
 EditorSlashMenuHiddenInput.displayName = "EditorSlashMenuHiddenInput";