@inf-monkeys-tech/monkeys-design 0.4.35 → 0.4.37

package/README.md

@@ -68,6 +68,109 @@ export function Example() {
 | `@inf-monkeys-tech/monkeys-design/palette` | palette 工具 |
 | `@inf-monkeys-tech/monkeys-design/theme-system` | 主题解析与应用工具 |
 
+## LoginPage
+
+`LoginPage` 是通用登录页 UI 组件。组件库只负责页面结构和样式契约，不包含登录请求、OAuth、路由、租户判断、i18n 初始化或租户定制样式。
+
+```tsx
+import {
+  LoginPage,
+  type LoginPageMethodConfig,
+} from '@inf-monkeys-tech/monkeys-design/components/login';
+import '@inf-monkeys-tech/monkeys-design/styles/login-page.scss';
+
+const methods: LoginPageMethodConfig[] = [
+  {
+    id: 'email',
+    label: 'Email',
+    fields: [],
+    submitLabel: 'Login',
+    onSubmit: (event) => event.preventDefault(),
+  },
+];
+
+export function Example() {
+  return (
+    <LoginPage
+      background={{ imageUrl: '', gradient: '' }}
+      logo={{ url: '', position: 'bottom', scale: 1 }}
+      primaryColor="#4D8F9D"
+      radius="12px"
+      toolbar={<div />}
+      title="Welcome"
+      methods={methods}
+    />
+  );
+}
+```
+
+默认背景规则：
+
+- 配置了 `background.imageUrl` 或 `background.gradient` 时，使用配置背景。
+- 未配置背景时，浅色模式使用白色和主题色渐变。
+- 未配置背景时，`.dark` 深色模式使用黑色和主题色渐变。
+
+宿主应用负责把全局主题传入 `primaryColor` 和 `radius`，组件会把它们作为 `--login-page-theme-primary-color` 和 `--login-page-theme-radius` 默认来源；页面级 `customCss` 仍可通过公开的 `--login-page-*` 变量做租户级覆盖。深浅色切换、语言切换等应用级控件通过 `toolbar` 传入。
+
+### LoginPage CSS 契约
+
+页面级自定义样式只能依赖 `data-login-page`、`data-login-part` 和公开 CSS 变量。不要依赖租户 id，不要新增登录页代码分支。
+
+推荐优先覆盖变量：
+
+```css
+[data-login-page] {
+  --login-page-panel-bg: rgb(255 255 255 / 0.92);
+  --login-page-panel-border: rgb(17 17 17 / 0.08);
+  --login-page-panel-shadow: 0 24px 60px rgb(0 0 0 / 0.08);
+  --login-page-control-bg: #ffffff;
+  --login-page-control-border: rgb(17 17 17 / 0.12);
+  --login-page-control-text: #111111;
+  --login-page-control-placeholder: #9f9fa9;
+  --login-page-form-width: 500px;
+}
+
+.dark [data-login-page] {
+  --login-page-panel-bg: rgb(12 12 12 / 0.9);
+  --login-page-control-bg: #111111;
+}
+```
+
+公开部件：
+
+```css
+[data-login-part='root'] {}
+[data-login-part='background'] {}
+[data-login-part='toolbar'] {}
+[data-login-part='logo'] {}
+[data-login-part='logo-image'] {}
+[data-login-part='panel'] {}
+[data-login-part='back'] {}
+[data-login-part='back-icon'] {}
+[data-login-part='title'] {}
+[data-login-part='tabs'] {}
+[data-login-part='tab'] {}
+[data-login-part='tab-icon'] {}
+[data-login-part='form'] {}
+[data-login-part='field'] {}
+[data-login-part='input'] {}
+[data-login-part='checkbox-label'] {}
+[data-login-part='checkbox'] {}
+[data-login-part='method-footer'] {}
+[data-login-part='method-footer-action'] {}
+[data-login-part='submit-button'] {}
+[data-login-part='callout'] {}
+[data-login-part='callout-title'] {}
+[data-login-part='callout-description'] {}
+[data-login-part='callout-detail'] {}
+[data-login-part='callout-action'] {}
+[data-login-part='external-methods'] {}
+[data-login-part='external-label'] {}
+[data-login-part='external-list'] {}
+[data-login-part='external-button'] {}
+[data-login-part='external-icon'] {}
+```
+
 ## 基础组件
 
 基础组件从 `components/base` 子路径导入：

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

@@ -1,5 +1,5 @@
-export { B as BaseAccordion, a as BaseAvatar, b as BaseBadge, c as BaseBreadcrumb, d as BaseButton, e as BaseCheckbox, f as BaseContextMenu, g as BaseContextMenuCheckboxItem, h as BaseContextMenuContent, i as BaseContextMenuItem, j as BaseContextMenuLabel, k as BaseContextMenuRadioGroup, l as BaseContextMenuRadioItem, m as BaseContextMenuSeparator, n as BaseContextMenuSub, o as BaseContextMenuSubContent, p as BaseContextMenuSubTrigger, q as BaseContextMenuTrigger, r as BaseDescriptionList, s as BaseDialog, t as BaseDivider, u as BaseDropdownMenu, v as BaseEmptyState, w as BaseField, x as BaseInput, y as BaseLayout, z as BaseLayoutPane, A as BaseLayoutResizeHandle, C as BaseLayoutSplit, D as BaseLoadingState, E as BaseNotice, G as BasePagination, F as BasePanel, H as BaseProgress, I as BaseRadioGroup, K as BaseSectionHeader, L as BaseSegmentedControl, J as BaseSelect, M as BaseSkeleton, N as BaseSwitch, O as BaseTable, P as BaseTableBody, Q as BaseTableCaption, R as BaseTableCell, S as BaseTableContainer, T as BaseTableEmpty, U as BaseTableFooter, V as BaseTableFooterBar, W as BaseTableHead, X as BaseTableHeader, Y as BaseTableLoading, Z as BaseTableRow, _ as BaseTabs, $ as BaseTextarea, a1 as BaseToolbar, a0 as BaseTooltip, a2 as getBaseBadgeToneClassName, a3 as getBaseButtonToneClassName, a4 as getBaseMenuItemToneClassName, a5 as getBaseNoticeToneClassName, a6 as resolveBaseAppearance } from '../../theme-CoG9vCPT.mjs';
-export { B as BaseAccordionClassNames, a as BaseAccordionItem, b as BaseAccordionProps, c as BaseAppearance, d as BaseAvatarClassNames, e as BaseAvatarProps, f as BaseBackground, g as BaseBadgeClassNames, h as BaseBadgeProps, i as BaseBorder, j as BaseBreadcrumbClassNames, k as BaseBreadcrumbItem, l as BaseBreadcrumbProps, m as BaseButtonClassNames, n as BaseButtonProps, o as BaseCheckboxClassNames, p as BaseCheckboxProps, s as BaseContextMenuCheckboxItemProps, t as BaseContextMenuClassNames, u as BaseContextMenuContentClassNames, v as BaseContextMenuContentProps, w as BaseContextMenuItemClassNames, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, z as BaseContextMenuProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, E as BaseContextMenuSubContentProps, F as BaseContextMenuSubProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, q as BaseControlClassNames, r as BaseControlTone, I as BaseDensity, J as BaseDescriptionListClassNames, K as BaseDescriptionListItem, L as BaseDescriptionListProps, M as BaseDialogClassNames, N as BaseDialogProps, O as BaseDividerClassNames, P as BaseDividerProps, Q as BaseDropdownMenuClassNames, R as BaseDropdownMenuItem, S as BaseDropdownMenuPlacement, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, V as BaseFieldClassNames, W as BaseFieldProps, X as BaseInputProps, Y as BaseLayoutClassNames, Z as BaseLayoutGap, _ as BaseLayoutOrientation, $ as BaseLayoutPaneClassNames, a0 as BaseLayoutPaneProps, a1 as BaseLayoutPaneSurface, a2 as BaseLayoutProps, a3 as BaseLayoutResizeHandleClassNames, a4 as BaseLayoutResizeHandleProps, a5 as BaseLayoutSize, a6 as BaseLayoutSplitClassNames, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps, a9 as BaseNoticeClassNames, aa as BaseNoticeProps, ad as BasePaginationClassNames, ae as BasePaginationProps, ab as BasePanelClassNames, ac as BasePanelProps, af as BaseProgressClassNames, ag as BaseProgressProps, ai as BaseRadioGroupClassNames, aj as BaseRadioGroupProps, ak as BaseRadioOption, ah as BaseRadius, al as BaseResolvedTheme, am as BaseSectionHeaderClassNames, an as BaseSectionHeaderProps, aq as BaseSegmentedControlClassNames, ar as BaseSegmentedControlOption, as as BaseSegmentedControlProps, ao as BaseSelectOption, ap as BaseSelectProps, at as BaseSkeletonClassNames, au as BaseSkeletonProps, av as BaseStateClassNames, aw as BaseSwitchClassNames, ax as BaseSwitchProps, ay as BaseTableAlign, az as BaseTableBodyProps, aA as BaseTableCaptionClassNames, aB as BaseTableCaptionProps, aC as BaseTableCellClassNames, aD as BaseTableCellProps, aE as BaseTableClassNames, aF as BaseTableColumnInteractionOptions, aG as BaseTableColumnOrderChangeDetail, aH as BaseTableColumnSizeChangeDetail, aI as BaseTableColumnSizes, aJ as BaseTableContainerClassNames, aK as BaseTableContainerProps, aL as BaseTableEmptyClassNames, aM as BaseTableEmptyProps, aN as BaseTableFooterBarClassNames, aO as BaseTableFooterBarProps, aP as BaseTableFooterProps, aR as BaseTableHeadClassNames, aS as BaseTableHeadProps, aQ as BaseTableHeaderProps, aT as BaseTableLoadingClassNames, aU as BaseTableLoadingProps, aV as BaseTableProps, aW as BaseTableRowClassNames, aX as BaseTableRowProps, aY as BaseTableSectionClassNames, aZ as BaseTableSortDirection, a_ as BaseTabsClassNames, a$ as BaseTabsItem, b0 as BaseTabsProps, b1 as BaseTextareaProps, b7 as BaseThemePresetId, b8 as BaseThemeSlots, b9 as BaseThemeStyles, b5 as BaseToolbarClassNames, b6 as BaseToolbarProps, b2 as BaseTooltipClassNames, b3 as BaseTooltipPlacement, b4 as BaseTooltipProps } from '../../types-CZALgtez.mjs';
+export { B as BaseAccordion, a as BaseAvatar, b as BaseBadge, c as BaseBreadcrumb, d as BaseButton, e as BaseCheckbox, f as BaseContextMenu, g as BaseContextMenuCheckboxItem, h as BaseContextMenuContent, i as BaseContextMenuItem, j as BaseContextMenuLabel, k as BaseContextMenuRadioGroup, l as BaseContextMenuRadioItem, m as BaseContextMenuSeparator, n as BaseContextMenuSub, o as BaseContextMenuSubContent, p as BaseContextMenuSubTrigger, q as BaseContextMenuTrigger, r as BaseDescriptionList, s as BaseDialog, t as BaseDivider, u as BaseDropdownMenu, v as BaseEmptyState, w as BaseField, x as BaseInput, y as BaseLayout, z as BaseLayoutPane, A as BaseLayoutResizeHandle, C as BaseLayoutSplit, D as BaseLoadingState, E as BaseMultiSelect, F as BaseNotice, H as BasePagination, G as BasePanel, I as BaseProgress, J as BaseRadioGroup, L as BaseSectionHeader, M as BaseSegmentedControl, K as BaseSelect, N as BaseSkeleton, O as BaseSwitch, P as BaseTable, Q as BaseTableBody, R as BaseTableCaption, S as BaseTableCell, T as BaseTableContainer, U as BaseTableEmpty, V as BaseTableFooter, W as BaseTableFooterBar, X as BaseTableHead, Y as BaseTableHeader, Z as BaseTableLoading, _ as BaseTableRow, $ as BaseTabs, a0 as BaseTextarea, a2 as BaseToolbar, a1 as BaseTooltip, a3 as getBaseBadgeToneClassName, a4 as getBaseButtonToneClassName, a5 as getBaseMenuItemToneClassName, a6 as getBaseNoticeToneClassName, a7 as resolveBaseAppearance } from '../../theme-Clm5dVb0.mjs';
+export { B as BaseAccordionClassNames, a as BaseAccordionItem, b as BaseAccordionProps, c as BaseAppearance, d as BaseAvatarClassNames, e as BaseAvatarProps, f as BaseBackground, g as BaseBadgeClassNames, h as BaseBadgeProps, i as BaseBorder, j as BaseBreadcrumbClassNames, k as BaseBreadcrumbItem, l as BaseBreadcrumbProps, m as BaseButtonClassNames, n as BaseButtonProps, o as BaseCheckboxClassNames, p as BaseCheckboxProps, s as BaseContextMenuCheckboxItemProps, t as BaseContextMenuClassNames, u as BaseContextMenuContentClassNames, v as BaseContextMenuContentProps, w as BaseContextMenuItemClassNames, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, z as BaseContextMenuProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, E as BaseContextMenuSubContentProps, F as BaseContextMenuSubProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, q as BaseControlClassNames, r as BaseControlTone, I as BaseDensity, J as BaseDescriptionListClassNames, K as BaseDescriptionListItem, L as BaseDescriptionListProps, M as BaseDialogClassNames, N as BaseDialogProps, O as BaseDividerClassNames, P as BaseDividerProps, Q as BaseDropdownMenuClassNames, R as BaseDropdownMenuItem, S as BaseDropdownMenuPlacement, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, V as BaseFieldClassNames, W as BaseFieldProps, X as BaseInputProps, Y as BaseLayoutClassNames, Z as BaseLayoutGap, _ as BaseLayoutOrientation, $ as BaseLayoutPaneClassNames, a0 as BaseLayoutPaneProps, a1 as BaseLayoutPaneSurface, a2 as BaseLayoutProps, a3 as BaseLayoutResizeHandleClassNames, a4 as BaseLayoutResizeHandleProps, a5 as BaseLayoutSize, a6 as BaseLayoutSplitClassNames, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps, a9 as BaseMultiSelectClassNames, aa as BaseMultiSelectOption, ab as BaseMultiSelectProps, ac as BaseNoticeClassNames, ad as BaseNoticeProps, ag as BasePaginationClassNames, ah as BasePaginationProps, ae as BasePanelClassNames, af as BasePanelProps, ai as BaseProgressClassNames, aj as BaseProgressProps, al as BaseRadioGroupClassNames, am as BaseRadioGroupProps, an as BaseRadioOption, ak as BaseRadius, ao as BaseResolvedTheme, ap as BaseSectionHeaderClassNames, aq as BaseSectionHeaderProps, at as BaseSegmentedControlClassNames, au as BaseSegmentedControlOption, av as BaseSegmentedControlProps, ar as BaseSelectOption, as as BaseSelectProps, aw as BaseSkeletonClassNames, ax as BaseSkeletonProps, ay as BaseStateClassNames, az as BaseSwitchClassNames, aA as BaseSwitchProps, aB as BaseTableAlign, aC as BaseTableBodyProps, aD as BaseTableCaptionClassNames, aE as BaseTableCaptionProps, aF as BaseTableCellClassNames, aG as BaseTableCellProps, aH as BaseTableClassNames, aI as BaseTableColumnInteractionOptions, aJ as BaseTableColumnOrderChangeDetail, aK as BaseTableColumnSizeChangeDetail, aL as BaseTableColumnSizes, aM as BaseTableContainerClassNames, aN as BaseTableContainerProps, aO as BaseTableEmptyClassNames, aP as BaseTableEmptyProps, aQ as BaseTableFooterBarClassNames, aR as BaseTableFooterBarProps, aS as BaseTableFooterProps, aU as BaseTableHeadClassNames, aV as BaseTableHeadProps, aT as BaseTableHeaderProps, aW as BaseTableLoadingClassNames, aX as BaseTableLoadingProps, aY as BaseTableProps, aZ as BaseTableRowClassNames, a_ as BaseTableRowProps, a$ as BaseTableSectionClassNames, b0 as BaseTableSortDirection, b1 as BaseTabsClassNames, b2 as BaseTabsItem, b3 as BaseTabsProps, b4 as BaseTextareaProps, ba as BaseThemePresetId, bb as BaseThemeSlots, bc as BaseThemeStyles, b8 as BaseToolbarClassNames, b9 as BaseToolbarProps, b5 as BaseTooltipClassNames, b6 as BaseTooltipPlacement, b7 as BaseTooltipProps } from '../../types-Bn6PEDsX.mjs';
 import 'react/jsx-runtime';
 import 'react';
 import '@radix-ui/react-context-menu';

package/dist/components/base/index.d.ts

@@ -1,5 +1,5 @@
-export { B as BaseAccordion, a as BaseAvatar, b as BaseBadge, c as BaseBreadcrumb, d as BaseButton, e as BaseCheckbox, f as BaseContextMenu, g as BaseContextMenuCheckboxItem, h as BaseContextMenuContent, i as BaseContextMenuItem, j as BaseContextMenuLabel, k as BaseContextMenuRadioGroup, l as BaseContextMenuRadioItem, m as BaseContextMenuSeparator, n as BaseContextMenuSub, o as BaseContextMenuSubContent, p as BaseContextMenuSubTrigger, q as BaseContextMenuTrigger, r as BaseDescriptionList, s as BaseDialog, t as BaseDivider, u as BaseDropdownMenu, v as BaseEmptyState, w as BaseField, x as BaseInput, y as BaseLayout, z as BaseLayoutPane, A as BaseLayoutResizeHandle, C as BaseLayoutSplit, D as BaseLoadingState, E as BaseNotice, G as BasePagination, F as BasePanel, H as BaseProgress, I as BaseRadioGroup, K as BaseSectionHeader, L as BaseSegmentedControl, J as BaseSelect, M as BaseSkeleton, N as BaseSwitch, O as BaseTable, P as BaseTableBody, Q as BaseTableCaption, R as BaseTableCell, S as BaseTableContainer, T as BaseTableEmpty, U as BaseTableFooter, V as BaseTableFooterBar, W as BaseTableHead, X as BaseTableHeader, Y as BaseTableLoading, Z as BaseTableRow, _ as BaseTabs, $ as BaseTextarea, a1 as BaseToolbar, a0 as BaseTooltip, a2 as getBaseBadgeToneClassName, a3 as getBaseButtonToneClassName, a4 as getBaseMenuItemToneClassName, a5 as getBaseNoticeToneClassName, a6 as resolveBaseAppearance } from '../../theme-Cuy60thu.js';
-export { B as BaseAccordionClassNames, a as BaseAccordionItem, b as BaseAccordionProps, c as BaseAppearance, d as BaseAvatarClassNames, e as BaseAvatarProps, f as BaseBackground, g as BaseBadgeClassNames, h as BaseBadgeProps, i as BaseBorder, j as BaseBreadcrumbClassNames, k as BaseBreadcrumbItem, l as BaseBreadcrumbProps, m as BaseButtonClassNames, n as BaseButtonProps, o as BaseCheckboxClassNames, p as BaseCheckboxProps, s as BaseContextMenuCheckboxItemProps, t as BaseContextMenuClassNames, u as BaseContextMenuContentClassNames, v as BaseContextMenuContentProps, w as BaseContextMenuItemClassNames, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, z as BaseContextMenuProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, E as BaseContextMenuSubContentProps, F as BaseContextMenuSubProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, q as BaseControlClassNames, r as BaseControlTone, I as BaseDensity, J as BaseDescriptionListClassNames, K as BaseDescriptionListItem, L as BaseDescriptionListProps, M as BaseDialogClassNames, N as BaseDialogProps, O as BaseDividerClassNames, P as BaseDividerProps, Q as BaseDropdownMenuClassNames, R as BaseDropdownMenuItem, S as BaseDropdownMenuPlacement, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, V as BaseFieldClassNames, W as BaseFieldProps, X as BaseInputProps, Y as BaseLayoutClassNames, Z as BaseLayoutGap, _ as BaseLayoutOrientation, $ as BaseLayoutPaneClassNames, a0 as BaseLayoutPaneProps, a1 as BaseLayoutPaneSurface, a2 as BaseLayoutProps, a3 as BaseLayoutResizeHandleClassNames, a4 as BaseLayoutResizeHandleProps, a5 as BaseLayoutSize, a6 as BaseLayoutSplitClassNames, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps, a9 as BaseNoticeClassNames, aa as BaseNoticeProps, ad as BasePaginationClassNames, ae as BasePaginationProps, ab as BasePanelClassNames, ac as BasePanelProps, af as BaseProgressClassNames, ag as BaseProgressProps, ai as BaseRadioGroupClassNames, aj as BaseRadioGroupProps, ak as BaseRadioOption, ah as BaseRadius, al as BaseResolvedTheme, am as BaseSectionHeaderClassNames, an as BaseSectionHeaderProps, aq as BaseSegmentedControlClassNames, ar as BaseSegmentedControlOption, as as BaseSegmentedControlProps, ao as BaseSelectOption, ap as BaseSelectProps, at as BaseSkeletonClassNames, au as BaseSkeletonProps, av as BaseStateClassNames, aw as BaseSwitchClassNames, ax as BaseSwitchProps, ay as BaseTableAlign, az as BaseTableBodyProps, aA as BaseTableCaptionClassNames, aB as BaseTableCaptionProps, aC as BaseTableCellClassNames, aD as BaseTableCellProps, aE as BaseTableClassNames, aF as BaseTableColumnInteractionOptions, aG as BaseTableColumnOrderChangeDetail, aH as BaseTableColumnSizeChangeDetail, aI as BaseTableColumnSizes, aJ as BaseTableContainerClassNames, aK as BaseTableContainerProps, aL as BaseTableEmptyClassNames, aM as BaseTableEmptyProps, aN as BaseTableFooterBarClassNames, aO as BaseTableFooterBarProps, aP as BaseTableFooterProps, aR as BaseTableHeadClassNames, aS as BaseTableHeadProps, aQ as BaseTableHeaderProps, aT as BaseTableLoadingClassNames, aU as BaseTableLoadingProps, aV as BaseTableProps, aW as BaseTableRowClassNames, aX as BaseTableRowProps, aY as BaseTableSectionClassNames, aZ as BaseTableSortDirection, a_ as BaseTabsClassNames, a$ as BaseTabsItem, b0 as BaseTabsProps, b1 as BaseTextareaProps, b7 as BaseThemePresetId, b8 as BaseThemeSlots, b9 as BaseThemeStyles, b5 as BaseToolbarClassNames, b6 as BaseToolbarProps, b2 as BaseTooltipClassNames, b3 as BaseTooltipPlacement, b4 as BaseTooltipProps } from '../../types-CZALgtez.js';
+export { B as BaseAccordion, a as BaseAvatar, b as BaseBadge, c as BaseBreadcrumb, d as BaseButton, e as BaseCheckbox, f as BaseContextMenu, g as BaseContextMenuCheckboxItem, h as BaseContextMenuContent, i as BaseContextMenuItem, j as BaseContextMenuLabel, k as BaseContextMenuRadioGroup, l as BaseContextMenuRadioItem, m as BaseContextMenuSeparator, n as BaseContextMenuSub, o as BaseContextMenuSubContent, p as BaseContextMenuSubTrigger, q as BaseContextMenuTrigger, r as BaseDescriptionList, s as BaseDialog, t as BaseDivider, u as BaseDropdownMenu, v as BaseEmptyState, w as BaseField, x as BaseInput, y as BaseLayout, z as BaseLayoutPane, A as BaseLayoutResizeHandle, C as BaseLayoutSplit, D as BaseLoadingState, E as BaseMultiSelect, F as BaseNotice, H as BasePagination, G as BasePanel, I as BaseProgress, J as BaseRadioGroup, L as BaseSectionHeader, M as BaseSegmentedControl, K as BaseSelect, N as BaseSkeleton, O as BaseSwitch, P as BaseTable, Q as BaseTableBody, R as BaseTableCaption, S as BaseTableCell, T as BaseTableContainer, U as BaseTableEmpty, V as BaseTableFooter, W as BaseTableFooterBar, X as BaseTableHead, Y as BaseTableHeader, Z as BaseTableLoading, _ as BaseTableRow, $ as BaseTabs, a0 as BaseTextarea, a2 as BaseToolbar, a1 as BaseTooltip, a3 as getBaseBadgeToneClassName, a4 as getBaseButtonToneClassName, a5 as getBaseMenuItemToneClassName, a6 as getBaseNoticeToneClassName, a7 as resolveBaseAppearance } from '../../theme-sIoU5-YC.js';
+export { B as BaseAccordionClassNames, a as BaseAccordionItem, b as BaseAccordionProps, c as BaseAppearance, d as BaseAvatarClassNames, e as BaseAvatarProps, f as BaseBackground, g as BaseBadgeClassNames, h as BaseBadgeProps, i as BaseBorder, j as BaseBreadcrumbClassNames, k as BaseBreadcrumbItem, l as BaseBreadcrumbProps, m as BaseButtonClassNames, n as BaseButtonProps, o as BaseCheckboxClassNames, p as BaseCheckboxProps, s as BaseContextMenuCheckboxItemProps, t as BaseContextMenuClassNames, u as BaseContextMenuContentClassNames, v as BaseContextMenuContentProps, w as BaseContextMenuItemClassNames, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, z as BaseContextMenuProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, E as BaseContextMenuSubContentProps, F as BaseContextMenuSubProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, q as BaseControlClassNames, r as BaseControlTone, I as BaseDensity, J as BaseDescriptionListClassNames, K as BaseDescriptionListItem, L as BaseDescriptionListProps, M as BaseDialogClassNames, N as BaseDialogProps, O as BaseDividerClassNames, P as BaseDividerProps, Q as BaseDropdownMenuClassNames, R as BaseDropdownMenuItem, S as BaseDropdownMenuPlacement, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, V as BaseFieldClassNames, W as BaseFieldProps, X as BaseInputProps, Y as BaseLayoutClassNames, Z as BaseLayoutGap, _ as BaseLayoutOrientation, $ as BaseLayoutPaneClassNames, a0 as BaseLayoutPaneProps, a1 as BaseLayoutPaneSurface, a2 as BaseLayoutProps, a3 as BaseLayoutResizeHandleClassNames, a4 as BaseLayoutResizeHandleProps, a5 as BaseLayoutSize, a6 as BaseLayoutSplitClassNames, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps, a9 as BaseMultiSelectClassNames, aa as BaseMultiSelectOption, ab as BaseMultiSelectProps, ac as BaseNoticeClassNames, ad as BaseNoticeProps, ag as BasePaginationClassNames, ah as BasePaginationProps, ae as BasePanelClassNames, af as BasePanelProps, ai as BaseProgressClassNames, aj as BaseProgressProps, al as BaseRadioGroupClassNames, am as BaseRadioGroupProps, an as BaseRadioOption, ak as BaseRadius, ao as BaseResolvedTheme, ap as BaseSectionHeaderClassNames, aq as BaseSectionHeaderProps, at as BaseSegmentedControlClassNames, au as BaseSegmentedControlOption, av as BaseSegmentedControlProps, ar as BaseSelectOption, as as BaseSelectProps, aw as BaseSkeletonClassNames, ax as BaseSkeletonProps, ay as BaseStateClassNames, az as BaseSwitchClassNames, aA as BaseSwitchProps, aB as BaseTableAlign, aC as BaseTableBodyProps, aD as BaseTableCaptionClassNames, aE as BaseTableCaptionProps, aF as BaseTableCellClassNames, aG as BaseTableCellProps, aH as BaseTableClassNames, aI as BaseTableColumnInteractionOptions, aJ as BaseTableColumnOrderChangeDetail, aK as BaseTableColumnSizeChangeDetail, aL as BaseTableColumnSizes, aM as BaseTableContainerClassNames, aN as BaseTableContainerProps, aO as BaseTableEmptyClassNames, aP as BaseTableEmptyProps, aQ as BaseTableFooterBarClassNames, aR as BaseTableFooterBarProps, aS as BaseTableFooterProps, aU as BaseTableHeadClassNames, aV as BaseTableHeadProps, aT as BaseTableHeaderProps, aW as BaseTableLoadingClassNames, aX as BaseTableLoadingProps, aY as BaseTableProps, aZ as BaseTableRowClassNames, a_ as BaseTableRowProps, a$ as BaseTableSectionClassNames, b0 as BaseTableSortDirection, b1 as BaseTabsClassNames, b2 as BaseTabsItem, b3 as BaseTabsProps, b4 as BaseTextareaProps, ba as BaseThemePresetId, bb as BaseThemeSlots, bc as BaseThemeStyles, b8 as BaseToolbarClassNames, b9 as BaseToolbarProps, b5 as BaseTooltipClassNames, b6 as BaseTooltipPlacement, b7 as BaseTooltipProps } from '../../types-Bn6PEDsX.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@radix-ui/react-context-menu';

package/dist/components/base/index.js

@@ -3546,6 +3546,448 @@ function BaseLoadingState({
     }
   );
 }
+function normalizeValues(values) {
+  const nextValues = [];
+  const seen = /* @__PURE__ */ new Set();
+  values?.forEach((value) => {
+    if (seen.has(value)) return;
+    seen.add(value);
+    nextValues.push(value);
+  });
+  return nextValues;
+}
+function getNextEnabledIndex(options, currentIndex, direction) {
+  if (!options.length) return -1;
+  const startIndex = currentIndex >= 0 ? currentIndex : 0;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const nextIndex = (startIndex + offset * direction + options.length) % options.length;
+    if (!options[nextIndex]?.disabled) {
+      return nextIndex;
+    }
+  }
+  return -1;
+}
+function getFirstEnabledIndex(options) {
+  return options.findIndex((option) => !option.disabled);
+}
+function getSafeTagCount(maxTagCount, total) {
+  if (maxTagCount === void 0) return total;
+  if (!Number.isFinite(maxTagCount)) return total;
+  return Math.max(0, Math.min(total, Math.floor(maxTagCount)));
+}
+function getDefaultRemoveLabel(option) {
+  return `Remove ${option.value}`;
+}
+var BaseMultiSelect = react.forwardRef(
+  function BaseMultiSelect2({
+    options,
+    value,
+    defaultValue,
+    name,
+    placeholder = "Select options",
+    icon,
+    invalid = false,
+    disabled = false,
+    required = false,
+    openForPreview = false,
+    maxTagCount,
+    removeLabel = getDefaultRemoveLabel,
+    emptyLabel = "No options",
+    appearance,
+    className,
+    classNames,
+    style,
+    id,
+    "aria-invalid": nativeAriaInvalid,
+    "aria-label": nativeAriaLabel,
+    "aria-labelledby": nativeAriaLabelledBy,
+    onValueChange,
+    ...rootProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    const generatedId = react.useId();
+    const multiSelectId = id ?? generatedId;
+    const controlId = `${multiSelectId}-control`;
+    const listboxId = `${multiSelectId}-listbox`;
+    const rootRef = react.useRef(null);
+    const optionList = options ?? [];
+    const forceOpen = openForPreview;
+    const [uncontrolledOpen, setUncontrolledOpen] = react.useState(false);
+    const open = forceOpen || uncontrolledOpen;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(
+      () => normalizeValues(defaultValue)
+    );
+    const [activeIndex, setActiveIndex] = react.useState(
+      () => getFirstEnabledIndex(optionList)
+    );
+    const isControlled = value !== void 0;
+    const selectedValues = react.useMemo(
+      () => normalizeValues(isControlled ? value : uncontrolledValue),
+      [isControlled, uncontrolledValue, value]
+    );
+    const selectedValueSet = react.useMemo(
+      () => new Set(selectedValues),
+      [selectedValues]
+    );
+    const optionByValue = react.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      optionList.forEach((option) => {
+        if (!map.has(option.value)) {
+          map.set(option.value, option);
+        }
+      });
+      return map;
+    }, [optionList]);
+    const selectedOptions = react.useMemo(
+      () => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)).filter(
+        (option) => option !== void 0
+      ),
+      [optionByValue, selectedValues]
+    );
+    const firstEnabledIndex = react.useMemo(
+      () => getFirstEnabledIndex(optionList),
+      [optionList]
+    );
+    const resolvedActiveIndex = activeIndex >= 0 && !optionList[activeIndex]?.disabled ? activeIndex : firstEnabledIndex;
+    const visibleTagCount = getSafeTagCount(
+      maxTagCount,
+      selectedOptions.length
+    );
+    const visibleOptions = selectedOptions.slice(0, visibleTagCount);
+    const overflowCount = selectedOptions.length - visibleOptions.length;
+    const isPlaceholder = selectedOptions.length === 0;
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    const setOpen = (nextOpen) => {
+      if (disabled || forceOpen) return;
+      setUncontrolledOpen(nextOpen);
+      if (nextOpen) {
+        setActiveIndex(resolvedActiveIndex);
+      }
+    };
+    react.useEffect(() => {
+      if (!open || forceOpen) return void 0;
+      const handlePointerDown = (event) => {
+        if (!rootRef.current?.contains(event.target)) {
+          setUncontrolledOpen(false);
+        }
+      };
+      document.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        document.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }, [forceOpen, open]);
+    react.useEffect(() => {
+      if (resolvedActiveIndex >= 0 && resolvedActiveIndex !== activeIndex) {
+        setActiveIndex(resolvedActiveIndex);
+      }
+    }, [activeIndex, resolvedActiveIndex]);
+    const commitValues = (nextValues) => {
+      const normalizedValues = normalizeValues(nextValues);
+      if (!isControlled) {
+        setUncontrolledValue(normalizedValues);
+      }
+      onValueChange?.(normalizedValues);
+    };
+    const toggleOption = (option) => {
+      if (!option || option.disabled || disabled) return;
+      const nextValues = selectedValueSet.has(option.value) ? selectedValues.filter((selectedValue) => selectedValue !== option.value) : [...selectedValues, option.value];
+      commitValues(nextValues);
+    };
+    const removeOption = (option) => {
+      if (disabled) return;
+      commitValues(
+        selectedValues.filter((selectedValue) => selectedValue !== option.value)
+      );
+    };
+    const focusOption = (direction) => {
+      const nextIndex = getNextEnabledIndex(
+        optionList,
+        resolvedActiveIndex,
+        direction
+      );
+      if (nextIndex >= 0) {
+        setActiveIndex(nextIndex);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActiveIndex(firstEnabledIndex);
+          return;
+        }
+        focusOption(event.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex(firstEnabledIndex);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        setOpen(true);
+        for (let index = optionList.length - 1; index >= 0; index -= 1) {
+          if (!optionList[index]?.disabled) {
+            setActiveIndex(index);
+            break;
+          }
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        toggleOption(optionList[resolvedActiveIndex]);
+        return;
+      }
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...rootProps,
+        id,
+        ref: setRootRef,
+        className: cn(
+          theme.slots.controlWrapper,
+          "overflow-visible",
+          open && "z-50",
+          invalid && theme.slots.controlInvalid,
+          disabled && theme.slots.controlDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.control,
+          ...invalid ? theme.styles.controlInvalid : void 0,
+          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...style
+        },
+        children: [
+          hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: controlId,
+              role: "combobox",
+              tabIndex: disabled ? -1 : 0,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": listboxId,
+              "aria-disabled": disabled || void 0,
+              "aria-required": required || void 0,
+              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+              "aria-label": nativeAriaLabel,
+              "aria-labelledby": nativeAriaLabelledBy,
+              className: cn(
+                theme.slots.controlBase,
+                "flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 py-1.5 pr-9 text-left",
+                disabled && "!cursor-not-allowed",
+                classNames?.control
+              ),
+              onClick: () => setOpen(!open),
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
+                    classNames?.tagList
+                  ),
+                  children: [
+                    visibleOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center gap-1 rounded-full border border-border/70 bg-muted/65 px-2 py-0.5 text-xs font-medium text-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "max-w-40 truncate",
+                                classNames?.tagLabel
+                              ),
+                              children: option.label
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": removeLabel(option),
+                              disabled,
+                              className: cn(
+                                "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed",
+                                classNames?.tagRemove
+                              ),
+                              onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                removeOption(option);
+                              },
+                              onMouseDown: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                              },
+                              onKeyDown: (event) => event.stopPropagation(),
+                              children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "x" })
+                            }
+                          )
+                        ]
+                      },
+                      option.value
+                    )),
+                    overflowCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center rounded-full border border-border/70 bg-muted/45 px-2 py-0.5 text-xs font-medium text-muted-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          "+",
+                          overflowCount
+                        ]
+                      }
+                    ) : null,
+                    isPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "min-w-0 truncate",
+                          theme.slots.selectPlaceholder,
+                          classNames?.placeholder
+                        ),
+                        children: placeholder
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                theme.slots.selectChevron,
+                open && "rotate-[225deg]",
+                classNames?.chevron
+              )
+            }
+          ),
+          name ? selectedValues.map((selectedValue) => /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "hidden",
+              name,
+              value: selectedValue,
+              className: classNames?.hiddenInput
+            },
+            selectedValue
+          )) : null,
+          open ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-multiselectable": "true",
+              "aria-labelledby": controlId,
+              className: cn(theme.slots.selectMenu, classNames?.menu),
+              style: theme.styles.selectMenu,
+              children: optionList.length > 0 ? optionList.map((option, index) => {
+                const selected = selectedValueSet.has(option.value);
+                const active = index === resolvedActiveIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    disabled: option.disabled,
+                    className: cn(
+                      theme.slots.selectOption,
+                      "gap-2",
+                      active && theme.slots.selectOptionActive,
+                      selected && theme.slots.selectOptionSelected,
+                      option.disabled && theme.slots.selectOptionDisabled,
+                      classNames?.option
+                    ),
+                    style: {
+                      ...theme.styles.selectOption,
+                      ...active ? theme.styles.selectOptionActive : void 0,
+                      ...selected ? theme.styles.selectOptionSelected : void 0
+                    },
+                    onMouseEnter: () => {
+                      if (!option.disabled) {
+                        setActiveIndex(index);
+                      }
+                    },
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => toggleOption(option),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: cn(
+                            "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border/70 text-[10px]",
+                            selected && "border-primary/40 bg-primary text-primary-foreground",
+                            classNames?.optionIndicator
+                          ),
+                          children: selected ? "\u2713" : null
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "min-w-0 flex-1 truncate",
+                            classNames?.optionLabel
+                          ),
+                          children: option.label
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                );
+              }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "px-2.5 py-2 text-sm text-muted-foreground",
+                    classNames?.empty
+                  ),
+                  children: emptyLabel
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
 function BaseNotice({
   tone,
   icon,
@@ -3947,7 +4389,7 @@ function getInitialValue2(options, defaultValue) {
   }
   return "";
 }
-function getNextEnabledIndex(options, currentIndex, direction) {
+function getNextEnabledIndex2(options, currentIndex, direction) {
   if (!options.length) return -1;
   for (let offset = 1; offset <= options.length; offset += 1) {
     const nextIndex = (currentIndex + offset * direction + options.length) % options.length;
@@ -4049,7 +4491,7 @@ var BaseSelect = react.forwardRef(
     };
     const focusOption = (direction) => {
       const currentIndex = activeIndex >= 0 ? activeIndex : 0;
-      const nextIndex = getNextEnabledIndex(optionList, currentIndex, direction);
+      const nextIndex = getNextEnabledIndex2(optionList, currentIndex, direction);
       if (nextIndex >= 0) {
         commitValue(optionList[nextIndex].value, optionList[nextIndex].disabled);
       }
@@ -5448,6 +5890,7 @@ exports.BaseLayoutPane = BaseLayoutPane;
 exports.BaseLayoutResizeHandle = BaseLayoutResizeHandle;
 exports.BaseLayoutSplit = BaseLayoutSplit;
 exports.BaseLoadingState = BaseLoadingState;
+exports.BaseMultiSelect = BaseMultiSelect;
 exports.BaseNotice = BaseNotice;
 exports.BasePagination = BasePagination;
 exports.BasePanel = BasePanel;