@lobehub/ui 6.0.0-beta.6 → 6.0.0-beta.7

package/es/Accordion/style.d.mts

@@ -6,9 +6,9 @@ export declare const accordionStyles: {
   action: string;
   content: string;
   trigger: string;
-  item: string;
   root: string;
   indicator: string;
+  item: string;
   itemOutlined: string;
   rootOutlined: string;
   actionAlwaysVisible: string;

package/es/ColorSwatches/type.d.mts

@@ -26,8 +26,8 @@ export interface ColorSwatchesProps extends Omit<FlexboxProps, 'onChange'> {
   shape?: 'circle' | 'square';
   size?: number;
   texts?: {
-    custom: string;
-    presets: string;
+    custom?: string;
+    presets?: string;
   };
   value?: string;
 }

package/es/EditableText/EditableText.mjs

@@ -1,8 +1,8 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { cx } from "../styles/css.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import { useControlledState } from "../hooks/useControlledState.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";

package/es/index.d.mts

@@ -360,13 +360,14 @@ import { StepItem, StepStatus, StepsProps } from "./Steps/type.mjs";
 import Steps from "./Steps/Steps.mjs";
 import "./Steps/index.mjs";
 import { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./styles/customTheme.mjs";
+import { CustomPrimaryColor, LobePrimaryColor, isCustomPrimaryColor } from "./styles/theme/customPrimary.mjs";
 import { CreateLobeTokenParams, LobeToken, createLobeToken } from "./styles/theme/createLobeToken.mjs";
 import { LobeAppearance, LobeTheme, LobeThemeScript, LobeThemeScriptProps, LobeThemeState, ResponsiveState, ThemeScope, ThemeScopeProps, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./styles/theme/scope.mjs";
 import { createGlobalStyle } from "./styles/createGlobalStyle.mjs";
 import { LobeCssVar, StaticStyleExtract, StaticStyleUtils, createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./styles/css.mjs";
 import { staticStylish } from "./styles/theme/customStylishStatic.mjs";
 import { generateColorNeutralPalette, generateColorPalette } from "./styles/theme/generateColorPalette.mjs";
-import { getGlobalCss, getThemeCss } from "./styles/theme/themeCss.mjs";
+import { getCustomPrimaryCss, getGlobalCss, getThemeCss } from "./styles/theme/themeCss.mjs";
 import "./styles/index.mjs";
 import { CLASSNAMES } from "./styles/classNames.mjs";
 import { SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, SwitchContextType, SwitchIconPosition, SwitchIconProps, SwitchProps, SwitchRootProps, SwitchSize, SwitchStyles, SwitchThumbProps } from "./Switch/type.mjs";
@@ -406,4 +407,4 @@ import { useFormContext } from "./Form/context.mjs";
 import { Form } from "./Form/index.mjs";
 import { rehypeStreamAnimated } from "@lobehub/streamdown";
 import { ErrorBoundary, ErrorBoundaryProps } from "react-error-boundary";
-export { A, type AProps, Accordion, type AccordionClassNames, AccordionHeader, type AccordionHeaderProps, type AccordionIndicatorPlacement, AccordionItem, type AccordionItemProps, type AccordionItemType, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionRoot, type AccordionRootProps, type AccordionStyles, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, ActionIcon, type ActionIconClassNames, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconOutdent, type ActionIconProps, type ActionIconSize, type ActionIconStyles, type ActionIconVariant, Alert, type AlertClassNames, type AlertCloseConfig, type AlertProps, type AlertRef, type AlertStyles, type AlertType, type AlertVariant, Anchor, type AnchorItem, type AnchorProps, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, type AvatarClassNames, AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, type AvatarStyles, Badge, type BadgeProps, type BadgeSize, type BadgeStatus, type BaseMenuItemGroupType, type BaseMenuItemType, type BaseModalProps, type BaseSubMenuType, Block, type BlockProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Burger, type BurgerProps, Button, type ButtonIconPosition, type ButtonOutdent, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonType, type CDN, CLASSNAMES, type CalendarMode, Carousel, type CarouselProps, type CarouselRef, Center, type CenterProps, _default as Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, CodeDiff, type CodeDiffProps, CodeEditor, type CodeEditorProps, Collapsible, type CollapsibleProps, type ColorPalettes, type ColorPalettesAlpha, ColorPicker, type ColorPickerProps, ColorSwatches, type ColorSwatchesProps, type ColorToken, type Config, ConfigProvider, type ConfigProviderProps, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, type ControlSize, CopyButton, type CopyButtonProps, type CreateLobeTokenParams, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DateRangeValue, Descriptions, type DescriptionsItem, type DescriptionsProps, type DiffViewMode, type Direction, type DistributiveOmit, type DivProps, Divider, type DividerOrientation, type DividerProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelContent, type DraggablePanelContentProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHandle, type DraggablePanelHandleProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelPlacement, type DraggablePanelProps, DraggablePanelRoot, type DraggablePanelRootProps, type DraggablePanelSize, DraggablePanelToggle, type DraggablePanelToggleProps, DraggableSideNav, type DraggableSideNavProps, Drawer, DrawerBackdrop, type DrawerBackdropProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, DrawerPopup, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, type DrawerPush, DrawerRoot, type DrawerRootProps, type DrawerSemanticNames, type DrawerSemanticStyles, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemDesc, type DropdownMenuItemDescProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, type DropdownMenuItemLabelGroupProps, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, EditableText, type EditableTextProps, EditorSlashMenu, type EditorSlashMenuGroup, type EditorSlashMenuItems, type EditorSlashMenuOption, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, type FilterValue, _default$1 as FlexBasic, type FlexBasicProps, _default$1 as Flexbox, type FlexboxProps, type FloatingCollisionPadding, FloatingPanel, type FloatingPanelOffset, type FloatingPanelPlacement, type FloatingPanelProps, FloatingSheet, type FloatingSheetProps, FluentEmoji, type FluentEmojiProps, FocusScope, type FocusScopeProps, FontLoader, type FontLoaderProps, Form, type FormContextValue, FormDivider, type FormDividerProps, FormField, type FormFieldProps, FormFlatGroup, type FormFlatGroupProps, FormFooter, type FormFooterProps, FormGroup, type FormGroupItemType, type FormGroupProps, type FormLayout, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, type FormValues, type FormVariant, Freeze, type FreezeProps, type GenericItemType, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, HtmlPreview, HtmlPreviewIframe, type HtmlPreviewIframeProps, type HtmlPreviewMode, type HtmlPreviewProps, type HtmlPreviewStreamingMode, I18nProvider, type I18nProviderProps, Icon, type IconAlign, type IconProps, IconProvider, type IconSize, type IconSpaceMode, Image, type ImagePreviewOptions, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, type ImgProps, type ImperativeModalProps, _default$2 as Input, type InputClassNames, _default$3 as InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, _default$4 as InputPassword, type InputPasswordProps, type InputProps, type InputSize, type InputStyles, type InputVariant, type ItemType, type ItemsType, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, type ListClickInfo, type ListDividerType, type ListItem, type ListItemType, type ListProps, type ListSemanticName, type LobeAppearance, type LobeCssVar, type LobeCustomStylish, type LobeCustomToken, type LobeTheme, LobeThemeScript, type LobeThemeScriptProps, type LobeThemeState, type LobeToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, type MenuCheckboxItemType, type MenuDividerType, type MenuInfo, type MenuItemGroupType, type MenuItemType, type MenuSwitchItemType, Mermaid, type MermaidProps, Modal, ModalBackdrop, type ModalBackdropProps, ModalClose, type ModalCloseProps, type ModalComponentProps, type ModalConfirmConfig, ModalContent, type ModalContentProps, ModalContext, type ModalContextValue, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalHost, type ModalHostProps, type ModalInstance, ModalPopup, type ModalPopupProps, ModalPortal, type ModalPortalProps, ModalRoot, type ModalRootProps, type ModalSystem, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, ModalViewport, type ModalViewportProps, MotionComponent, type MotionComponentType, MotionProvider, NeutralColors, NeutralColorsObj, Pagination, type PaginationProps, type PaginationSize, PatchDiff, type PatchDiffProps, type Placement, type PlacementConfig, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverBackdropProps, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, type PopoverPopupProps, PopoverPortal, type PopoverPortalAtomProps, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverPositionerProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, type PopoverTriggerComponentProps, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, type PresetColorKey, type PresetColorType, type PresetSystemColorKey, type PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, Progress, type ProgressProps, type ProgressSize, type ProgressStatus, type ProgressType, type ProgressVariant, QRCode, type QRCodeErrorLevel, type QRCodeProps, type QRCodeStatus, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, Rate, type RateProps, type RenderItemContentOptions, type RenderOptions, type ResponsiveState, Result, type ResultProps, type ResultStatus, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedClassNames, SegmentedIndicator, type SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, type SegmentedItemProps, type SegmentedOption, type SegmentedOptions, type SegmentedOrientation, type SegmentedProps, SegmentedRoot, type SegmentedRootProps, type SegmentedSize, type SegmentedStyles, type SegmentedVariant, Select, SelectArrow, type SelectArrowProps, SelectBackdrop, type SelectBehaviorVariant, type SelectClassNames, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, type SelectIndicatorVariant, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectList, type SelectListProps, type SelectOption, type SelectOptionGroup, type SelectOptions, SelectPopup, type SelectPopupProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectRoot, type SelectRootChangeEventDetails, SelectScrollDownArrow, type SelectScrollDownArrowProps, SelectScrollUpArrow, type SelectScrollUpArrowProps, SelectSeparator, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, _default$5 as ShikiLobeTheme, SideNav, type SideNavProps, Skeleton, type SkeletonAnimation, SkeletonAvatar, type SkeletonAvatarProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, Slider, type SliderProps, SliderWithInput, type SliderWithInputProps, Snippet, type SnippetProps, type SortOrder, SortableList, type SortableListProps, type SpanProps, Spin, type SpinProps, type SpinSize, type SpinVariant, _default$6 as SplitButton, type SplitButtonMenuProps, type SplitButtonProps, type StaticStyleExtract, type StaticStyleUtils, Statistic, type StatisticProps, type StepItem, type StepStatus, Steps, type StepsProps, type SubMenuType, type SvgProps, Switch, type SwitchChangeEventHandler, type SwitchClassNames, type SwitchClickEventHandler, type SwitchContextType, SwitchIcon, type SwitchIconPosition, type SwitchIconProps, type SwitchProps, SwitchRoot, type SwitchRootProps, type SwitchSize, type SwitchStyles, SwitchThumb, type SwitchThumbProps, SyntaxHighlighter, type SyntaxHighlighterProps, SyntaxMermaid, type SyntaxMermaidProps, type SystemColorToken, Table, type TableColumn, type TableFilters, type TablePaginationConfig, type TableProps, type TableSemanticName, type TableSorterResult, Tabs, type TabsClassNames, TabsIndicator, type TabsIndicatorProps, type TabsItem, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, TabsRoot, type TabsRootProps, type TabsSize, type TabsStyles, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagClassNames, type TagProps, type TagShape, type TagSize, type TagStyles, type TagVariant, Text, _default$7 as TextArea, type TextAreaAutoSize, type TextAreaProps, type TextClassNames, type TextProps, type TextStyles, ThemeScope, type ThemeScopeProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, ToggleGroup, type ToggleGroupClassNames, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, type ToggleGroupItemProps, type ToggleGroupOption, type ToggleGroupProps, ToggleGroupRoot, type ToggleGroupRootProps, type ToggleGroupSize, type ToggleGroupStyles, type ToggleGroupVariant, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipPlacement, type TooltipPopupComponentProps, type TooltipPortalProps, type TooltipPositionerProps, type TooltipProps, type TooltipTriggerComponentProps, Tree, type TreeClassNames, type TreeDataNode, type TreeFlatRow, type TreeProps, type TreeStyles, type Trigger, Typography, type TypographyProps, Upload, type UploadChangeInfo, UploadDragger, type UploadProps, type UseImagePreviewResult, type UseScopeArrowNavOptions, type UseScopeSwitcherOptions, Video, type VideoMarker, type VideoPlayer, type VideoProps, type VideoSection, type VideoState, type VirtualListProps, accordionStyles, actionIconStyles, alertStyles, styles as autoCompleteStyles, backdropTransition, buttonPaddingInline, buttonStyles, checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, combineKeys, conductCheck, confirmModal, controlHeight, copyToClipboard, createGlobalStyle, createLobeToken, createModal, createModalSystem, createStaticStyles, css, cssVar, cx, drawerBackdropTransition, extractStaticStyle, findCustomThemeName, flattenVisible, focusScopeItem, styles$1 as focusScopeStyles, formatStatisticValue, genCdnUrl, generateColorNeutralPalette, generateColorPalette, getActiveScopeId, getAllKeys, getDrawerMotionConfig, getFloatingCollisionPadding, getGlobalCss, getItemKey, getItemLabel, getLastFocusedItem, getThemeCss, hasAnyIcon, hasCheckboxAndIcon, highlighterThemes, containsScript as htmlPreviewContainsScript, injectGlobal, inputClassNames as inputStyles, rootVariants as inputVariants, installGlobalFocusRing, isFullHtmlDocument, isHtmlContentClosed, keyframes, staticStylish as lobeStaticStylish, styles$2 as menuSharedStyles, mermaidThemes, modalMotionConfig, neutralColors, neutralColorsSwatches, notifyScopeItemFocus, parseTrigger, placementMap, preprocessMarkdownContent, presetColors, presetSystemColors, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, radioStyles, registerScope, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, renderIcon, responsive, setActiveScope, setContextMenuInterceptor, setFloatingCollisionPadding, setLastFocusedItem, setLobeTheme, showContextMenu, sliderStyles, stopPropagation, switchStyles, tabsStyles, groupStyles as textGroupStyles, textStyles, variants as textVariants, toFloatingUIPlacement, toast, toggleGroupStyles, styles$3 as treeStyles, updateContextMenuItems, useAccordionContext, useActiveScopeId, useAppElement, useCdnFn, useDirection, useDraggablePanelContext, useDrawerActions, useDrawerOpen, useFocusScopeActive, useFocusScopeId, useFormContext, useImagePreview, useModalActions, useModalContext, useModalOpen, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useResponsive, useScopeArrowNav, useScopeSwitcher, useSwitchContext, useTabsContext, useTheme, useThemeMode, useToast, useTranslation, useVideo, useVideoPlayer, useVideoState };
+export { A, type AProps, Accordion, type AccordionClassNames, AccordionHeader, type AccordionHeaderProps, type AccordionIndicatorPlacement, AccordionItem, type AccordionItemProps, type AccordionItemType, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionRoot, type AccordionRootProps, type AccordionStyles, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, ActionIcon, type ActionIconClassNames, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconOutdent, type ActionIconProps, type ActionIconSize, type ActionIconStyles, type ActionIconVariant, Alert, type AlertClassNames, type AlertCloseConfig, type AlertProps, type AlertRef, type AlertStyles, type AlertType, type AlertVariant, Anchor, type AnchorItem, type AnchorProps, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, type AvatarClassNames, AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, type AvatarStyles, Badge, type BadgeProps, type BadgeSize, type BadgeStatus, type BaseMenuItemGroupType, type BaseMenuItemType, type BaseModalProps, type BaseSubMenuType, Block, type BlockProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Burger, type BurgerProps, Button, type ButtonIconPosition, type ButtonOutdent, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonType, type CDN, CLASSNAMES, type CalendarMode, Carousel, type CarouselProps, type CarouselRef, Center, type CenterProps, _default as Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, CodeDiff, type CodeDiffProps, CodeEditor, type CodeEditorProps, Collapsible, type CollapsibleProps, type ColorPalettes, type ColorPalettesAlpha, ColorPicker, type ColorPickerProps, ColorSwatches, type ColorSwatchesProps, type ColorToken, type Config, ConfigProvider, type ConfigProviderProps, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, type ControlSize, CopyButton, type CopyButtonProps, type CreateLobeTokenParams, type CustomPrimaryColor, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DateRangeValue, Descriptions, type DescriptionsItem, type DescriptionsProps, type DiffViewMode, type Direction, type DistributiveOmit, type DivProps, Divider, type DividerOrientation, type DividerProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelContent, type DraggablePanelContentProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHandle, type DraggablePanelHandleProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelPlacement, type DraggablePanelProps, DraggablePanelRoot, type DraggablePanelRootProps, type DraggablePanelSize, DraggablePanelToggle, type DraggablePanelToggleProps, DraggableSideNav, type DraggableSideNavProps, Drawer, DrawerBackdrop, type DrawerBackdropProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, DrawerPopup, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, type DrawerPush, DrawerRoot, type DrawerRootProps, type DrawerSemanticNames, type DrawerSemanticStyles, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemDesc, type DropdownMenuItemDescProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, type DropdownMenuItemLabelGroupProps, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, EditableText, type EditableTextProps, EditorSlashMenu, type EditorSlashMenuGroup, type EditorSlashMenuItems, type EditorSlashMenuOption, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, type FilterValue, _default$1 as FlexBasic, type FlexBasicProps, _default$1 as Flexbox, type FlexboxProps, type FloatingCollisionPadding, FloatingPanel, type FloatingPanelOffset, type FloatingPanelPlacement, type FloatingPanelProps, FloatingSheet, type FloatingSheetProps, FluentEmoji, type FluentEmojiProps, FocusScope, type FocusScopeProps, FontLoader, type FontLoaderProps, Form, type FormContextValue, FormDivider, type FormDividerProps, FormField, type FormFieldProps, FormFlatGroup, type FormFlatGroupProps, FormFooter, type FormFooterProps, FormGroup, type FormGroupItemType, type FormGroupProps, type FormLayout, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, type FormValues, type FormVariant, Freeze, type FreezeProps, type GenericItemType, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, HtmlPreview, HtmlPreviewIframe, type HtmlPreviewIframeProps, type HtmlPreviewMode, type HtmlPreviewProps, type HtmlPreviewStreamingMode, I18nProvider, type I18nProviderProps, Icon, type IconAlign, type IconProps, IconProvider, type IconSize, type IconSpaceMode, Image, type ImagePreviewOptions, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, type ImgProps, type ImperativeModalProps, _default$2 as Input, type InputClassNames, _default$3 as InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, _default$4 as InputPassword, type InputPasswordProps, type InputProps, type InputSize, type InputStyles, type InputVariant, type ItemType, type ItemsType, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, type ListClickInfo, type ListDividerType, type ListItem, type ListItemType, type ListProps, type ListSemanticName, type LobeAppearance, type LobeCssVar, type LobeCustomStylish, type LobeCustomToken, type LobePrimaryColor, type LobeTheme, LobeThemeScript, type LobeThemeScriptProps, type LobeThemeState, type LobeToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, type MenuCheckboxItemType, type MenuDividerType, type MenuInfo, type MenuItemGroupType, type MenuItemType, type MenuSwitchItemType, Mermaid, type MermaidProps, Modal, ModalBackdrop, type ModalBackdropProps, ModalClose, type ModalCloseProps, type ModalComponentProps, type ModalConfirmConfig, ModalContent, type ModalContentProps, ModalContext, type ModalContextValue, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalHost, type ModalHostProps, type ModalInstance, ModalPopup, type ModalPopupProps, ModalPortal, type ModalPortalProps, ModalRoot, type ModalRootProps, type ModalSystem, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, ModalViewport, type ModalViewportProps, MotionComponent, type MotionComponentType, MotionProvider, NeutralColors, NeutralColorsObj, Pagination, type PaginationProps, type PaginationSize, PatchDiff, type PatchDiffProps, type Placement, type PlacementConfig, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverBackdropProps, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, type PopoverPopupProps, PopoverPortal, type PopoverPortalAtomProps, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverPositionerProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, type PopoverTriggerComponentProps, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, type PresetColorKey, type PresetColorType, type PresetSystemColorKey, type PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, Progress, type ProgressProps, type ProgressSize, type ProgressStatus, type ProgressType, type ProgressVariant, QRCode, type QRCodeErrorLevel, type QRCodeProps, type QRCodeStatus, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, Rate, type RateProps, type RenderItemContentOptions, type RenderOptions, type ResponsiveState, Result, type ResultProps, type ResultStatus, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedClassNames, SegmentedIndicator, type SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, type SegmentedItemProps, type SegmentedOption, type SegmentedOptions, type SegmentedOrientation, type SegmentedProps, SegmentedRoot, type SegmentedRootProps, type SegmentedSize, type SegmentedStyles, type SegmentedVariant, Select, SelectArrow, type SelectArrowProps, SelectBackdrop, type SelectBehaviorVariant, type SelectClassNames, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, type SelectIndicatorVariant, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectList, type SelectListProps, type SelectOption, type SelectOptionGroup, type SelectOptions, SelectPopup, type SelectPopupProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectRoot, type SelectRootChangeEventDetails, SelectScrollDownArrow, type SelectScrollDownArrowProps, SelectScrollUpArrow, type SelectScrollUpArrowProps, SelectSeparator, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, _default$5 as ShikiLobeTheme, SideNav, type SideNavProps, Skeleton, type SkeletonAnimation, SkeletonAvatar, type SkeletonAvatarProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, Slider, type SliderProps, SliderWithInput, type SliderWithInputProps, Snippet, type SnippetProps, type SortOrder, SortableList, type SortableListProps, type SpanProps, Spin, type SpinProps, type SpinSize, type SpinVariant, _default$6 as SplitButton, type SplitButtonMenuProps, type SplitButtonProps, type StaticStyleExtract, type StaticStyleUtils, Statistic, type StatisticProps, type StepItem, type StepStatus, Steps, type StepsProps, type SubMenuType, type SvgProps, Switch, type SwitchChangeEventHandler, type SwitchClassNames, type SwitchClickEventHandler, type SwitchContextType, SwitchIcon, type SwitchIconPosition, type SwitchIconProps, type SwitchProps, SwitchRoot, type SwitchRootProps, type SwitchSize, type SwitchStyles, SwitchThumb, type SwitchThumbProps, SyntaxHighlighter, type SyntaxHighlighterProps, SyntaxMermaid, type SyntaxMermaidProps, type SystemColorToken, Table, type TableColumn, type TableFilters, type TablePaginationConfig, type TableProps, type TableSemanticName, type TableSorterResult, Tabs, type TabsClassNames, TabsIndicator, type TabsIndicatorProps, type TabsItem, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, TabsRoot, type TabsRootProps, type TabsSize, type TabsStyles, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagClassNames, type TagProps, type TagShape, type TagSize, type TagStyles, type TagVariant, Text, _default$7 as TextArea, type TextAreaAutoSize, type TextAreaProps, type TextClassNames, type TextProps, type TextStyles, ThemeScope, type ThemeScopeProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, ToggleGroup, type ToggleGroupClassNames, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, type ToggleGroupItemProps, type ToggleGroupOption, type ToggleGroupProps, ToggleGroupRoot, type ToggleGroupRootProps, type ToggleGroupSize, type ToggleGroupStyles, type ToggleGroupVariant, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipPlacement, type TooltipPopupComponentProps, type TooltipPortalProps, type TooltipPositionerProps, type TooltipProps, type TooltipTriggerComponentProps, Tree, type TreeClassNames, type TreeDataNode, type TreeFlatRow, type TreeProps, type TreeStyles, type Trigger, Typography, type TypographyProps, Upload, type UploadChangeInfo, UploadDragger, type UploadProps, type UseImagePreviewResult, type UseScopeArrowNavOptions, type UseScopeSwitcherOptions, Video, type VideoMarker, type VideoPlayer, type VideoProps, type VideoSection, type VideoState, type VirtualListProps, accordionStyles, actionIconStyles, alertStyles, styles as autoCompleteStyles, backdropTransition, buttonPaddingInline, buttonStyles, checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, combineKeys, conductCheck, confirmModal, controlHeight, copyToClipboard, createGlobalStyle, createLobeToken, createModal, createModalSystem, createStaticStyles, css, cssVar, cx, drawerBackdropTransition, extractStaticStyle, findCustomThemeName, flattenVisible, focusScopeItem, styles$1 as focusScopeStyles, formatStatisticValue, genCdnUrl, generateColorNeutralPalette, generateColorPalette, getActiveScopeId, getAllKeys, getCustomPrimaryCss, getDrawerMotionConfig, getFloatingCollisionPadding, getGlobalCss, getItemKey, getItemLabel, getLastFocusedItem, getThemeCss, hasAnyIcon, hasCheckboxAndIcon, highlighterThemes, containsScript as htmlPreviewContainsScript, injectGlobal, inputClassNames as inputStyles, rootVariants as inputVariants, installGlobalFocusRing, isCustomPrimaryColor, isFullHtmlDocument, isHtmlContentClosed, keyframes, staticStylish as lobeStaticStylish, styles$2 as menuSharedStyles, mermaidThemes, modalMotionConfig, neutralColors, neutralColorsSwatches, notifyScopeItemFocus, parseTrigger, placementMap, preprocessMarkdownContent, presetColors, presetSystemColors, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, radioStyles, registerScope, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, renderIcon, responsive, setActiveScope, setContextMenuInterceptor, setFloatingCollisionPadding, setLastFocusedItem, setLobeTheme, showContextMenu, sliderStyles, stopPropagation, switchStyles, tabsStyles, groupStyles as textGroupStyles, textStyles, variants as textVariants, toFloatingUIPlacement, toast, toggleGroupStyles, styles$3 as treeStyles, updateContextMenuItems, useAccordionContext, useActiveScopeId, useAppElement, useCdnFn, useDirection, useDraggablePanelContext, useDrawerActions, useDrawerOpen, useFocusScopeActive, useFocusScopeId, useFormContext, useImagePreview, useModalActions, useModalContext, useModalOpen, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useResponsive, useScopeArrowNav, useScopeSwitcher, useSwitchContext, useTabsContext, useTheme, useThemeMode, useToast, useTranslation, useVideo, useVideoPlayer, useVideoState };

package/es/index.mjs

@@ -18,7 +18,11 @@ import { KeyMapEnum } from "./Hotkey/const.mjs";
 import FlexBasic_default from "./Flex/FlexBasic.mjs";
 import Center from "./Flex/Center.mjs";
 import { generateColorNeutralPalette, generateColorPalette } from "./styles/theme/generateColorPalette.mjs";
+import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./styles/customTheme.mjs";
+import { isCustomPrimaryColor } from "./styles/theme/customPrimary.mjs";
 import { createLobeToken } from "./styles/theme/createLobeToken.mjs";
+import { createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./styles/css.mjs";
+import { getCustomPrimaryCss, getGlobalCss, getThemeCss } from "./styles/theme/themeCss.mjs";
 import { LobeThemeScript, ThemeScope, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./styles/theme/scope.mjs";
 import { combineKeys } from "./Hotkey/utils.mjs";
 import Hotkey from "./Hotkey/Hotkey.mjs";
@@ -79,11 +83,8 @@ import { PatchDiff } from "./CodeDiff/PatchDiff.mjs";
 import { highlighterThemes } from "./Highlighter/const.mjs";
 import SyntaxHighlighter from "./Highlighter/SyntaxHighlighter/index.mjs";
 import CodeEditor from "./CodeEditor/CodeEditor.mjs";
-import { createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./styles/css.mjs";
 import { createGlobalStyle } from "./styles/createGlobalStyle.mjs";
-import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./styles/customTheme.mjs";
 import { staticStylish } from "./styles/theme/customStylishStatic.mjs";
-import { getGlobalCss, getThemeCss } from "./styles/theme/themeCss.mjs";
 import Collapsible from "./Collapsible/Collapsible.mjs";
 import { PopoverArrowIcon } from "./Popover/ArrowIcon.mjs";
 import { usePopoverPortalContainer } from "./Popover/PopoverPortal.mjs";
@@ -215,4 +216,4 @@ import { conductCheck, flattenVisible, getAllKeys } from "./Tree/utils.mjs";
 import Tree from "./Tree/Tree.mjs";
 import { rehypeStreamAnimated } from "@lobehub/streamdown";
 import { ErrorBoundary } from "react-error-boundary";
-export { A, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, ActionIcon, ActionIconGroup, Alert, Anchor, AutoComplete, Avatar, AvatarGroup, Badge, Block, Breadcrumb, Burger, Button, CLASSNAMES, Carousel, Center, Checkbox_default as Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapsible, ColorPicker, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DateRangePicker, Descriptions, Divider, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelContent, DraggablePanelFooter, DraggablePanelHandle, DraggablePanelHeader, DraggablePanelRoot, DraggablePanelToggle, DraggableSideNav, Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FloatingPanel, FloatingSheet, FluentEmoji, FocusScope, FontLoader, Form, FormDivider, FormField, FormFlatGroup, FormFooter, FormGroup, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input_default as Input, InputNumber_default as InputNumber, InputOTP, InputPassword_default as InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, LobeThemeScript, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Mermaid, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, MotionComponent, MotionProvider, Pagination, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, Progress, QRCode, Radio, RadioGroup, Rate, Result, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Slider, SliderWithInput, Snippet, SortableList, Spin, SplitButton, Statistic, Steps, Switch, SwitchIcon, SwitchRoot, SwitchThumb, SyntaxHighlighter, SyntaxMermaid, Table, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, Tag, Text, TextArea_default as TextArea, ThemeScope, ToastHost, ToggleGroup, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, Tooltip, TooltipGroup, Tree, Typography, Upload, UploadDragger, Video, accordionStyles, actionIconStyles, alertStyles, styles as autoCompleteStyles, backdropTransition, buttonPaddingInline, buttonStyles, checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, combineKeys, conductCheck, confirmModal, controlHeight, copyToClipboard, createGlobalStyle, createLobeToken, createModal, createModalSystem, createStaticStyles, css, cssVar, cx, drawerBackdropTransition, extractStaticStyle, findCustomThemeName, flattenVisible, focusScopeItem, styles$1 as focusScopeStyles, formatStatisticValue, genCdnUrl, generateColorNeutralPalette, generateColorPalette, getActiveScopeId, getAllKeys, getDrawerMotionConfig, getFloatingCollisionPadding, getGlobalCss, getItemKey, getItemLabel, getLastFocusedItem, getThemeCss, hasAnyIcon, hasCheckboxAndIcon, highlighterThemes, containsScript as htmlPreviewContainsScript, injectGlobal, inputClassNames as inputStyles, rootVariants as inputVariants, installGlobalFocusRing, isFullHtmlDocument, isHtmlContentClosed, keyframes, staticStylish as lobeStaticStylish, styles$2 as menuSharedStyles, mermaidThemes, modalMotionConfig, neutralColors, neutralColorsSwatches, notifyScopeItemFocus, parseTrigger, placementMap, preprocessMarkdownContent, presetColors, presetSystemColors, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, radioStyles, registerScope, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, renderIcon, responsive, setActiveScope, setContextMenuInterceptor, setFloatingCollisionPadding, setLastFocusedItem, setLobeTheme, showContextMenu, sliderStyles, stopPropagation, switchStyles, tabsStyles, groupStyles as textGroupStyles, textStyles, variants as textVariants, toFloatingUIPlacement, toast, toggleGroupStyles, styles$3 as treeStyles, updateContextMenuItems, useAccordionContext, useActiveScopeId, useAppElement, useCdnFn, useDirection, useDraggablePanelContext, useDrawerActions, useDrawerOpen, useFocusScopeActive, useFocusScopeId, useFormContext, useImagePreview, useModalActions, useModalContext, useModalOpen, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useResponsive, useScopeArrowNav, useScopeSwitcher, useSwitchContext, useTabsContext, useTheme, useThemeMode, useToast, useTranslation, useVideo, useVideoPlayer, useVideoState };
+export { A, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, ActionIcon, ActionIconGroup, Alert, Anchor, AutoComplete, Avatar, AvatarGroup, Badge, Block, Breadcrumb, Burger, Button, CLASSNAMES, Carousel, Center, Checkbox_default as Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapsible, ColorPicker, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DateRangePicker, Descriptions, Divider, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelContent, DraggablePanelFooter, DraggablePanelHandle, DraggablePanelHeader, DraggablePanelRoot, DraggablePanelToggle, DraggableSideNav, Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FloatingPanel, FloatingSheet, FluentEmoji, FocusScope, FontLoader, Form, FormDivider, FormField, FormFlatGroup, FormFooter, FormGroup, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input_default as Input, InputNumber_default as InputNumber, InputOTP, InputPassword_default as InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, LobeThemeScript, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Mermaid, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, MotionComponent, MotionProvider, Pagination, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, Progress, QRCode, Radio, RadioGroup, Rate, Result, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Slider, SliderWithInput, Snippet, SortableList, Spin, SplitButton, Statistic, Steps, Switch, SwitchIcon, SwitchRoot, SwitchThumb, SyntaxHighlighter, SyntaxMermaid, Table, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, Tag, Text, TextArea_default as TextArea, ThemeScope, ToastHost, ToggleGroup, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, Tooltip, TooltipGroup, Tree, Typography, Upload, UploadDragger, Video, accordionStyles, actionIconStyles, alertStyles, styles as autoCompleteStyles, backdropTransition, buttonPaddingInline, buttonStyles, checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, combineKeys, conductCheck, confirmModal, controlHeight, copyToClipboard, createGlobalStyle, createLobeToken, createModal, createModalSystem, createStaticStyles, css, cssVar, cx, drawerBackdropTransition, extractStaticStyle, findCustomThemeName, flattenVisible, focusScopeItem, styles$1 as focusScopeStyles, formatStatisticValue, genCdnUrl, generateColorNeutralPalette, generateColorPalette, getActiveScopeId, getAllKeys, getCustomPrimaryCss, getDrawerMotionConfig, getFloatingCollisionPadding, getGlobalCss, getItemKey, getItemLabel, getLastFocusedItem, getThemeCss, hasAnyIcon, hasCheckboxAndIcon, highlighterThemes, containsScript as htmlPreviewContainsScript, injectGlobal, inputClassNames as inputStyles, rootVariants as inputVariants, installGlobalFocusRing, isCustomPrimaryColor, isFullHtmlDocument, isHtmlContentClosed, keyframes, staticStylish as lobeStaticStylish, styles$2 as menuSharedStyles, mermaidThemes, modalMotionConfig, neutralColors, neutralColorsSwatches, notifyScopeItemFocus, parseTrigger, placementMap, preprocessMarkdownContent, presetColors, presetSystemColors, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, radioStyles, registerScope, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, renderIcon, responsive, setActiveScope, setContextMenuInterceptor, setFloatingCollisionPadding, setLastFocusedItem, setLobeTheme, showContextMenu, sliderStyles, stopPropagation, switchStyles, tabsStyles, groupStyles as textGroupStyles, textStyles, variants as textVariants, toFloatingUIPlacement, toast, toggleGroupStyles, styles$3 as treeStyles, updateContextMenuItems, useAccordionContext, useActiveScopeId, useAppElement, useCdnFn, useDirection, useDraggablePanelContext, useDrawerActions, useDrawerOpen, useFocusScopeActive, useFocusScopeId, useFormContext, useImagePreview, useModalActions, useModalContext, useModalOpen, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useResponsive, useScopeArrowNav, useScopeSwitcher, useSwitchContext, useTabsContext, useTheme, useThemeMode, useToast, useTranslation, useVideo, useVideoPlayer, useVideoState };

package/es/styles/createGlobalStyle.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTheme } from "./theme/scope.mjs";
 import { css, injectGlobal } from "./css.mjs";
+import { useTheme } from "./theme/scope.mjs";
 import { useMemo } from "react";
 //#region src/styles/createGlobalStyle.ts
 const createGlobalStyle = (template, ...args) => {

package/es/styles/index.d.mts

@@ -1,9 +1,10 @@
 import { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
+import { CustomPrimaryColor, LobePrimaryColor, isCustomPrimaryColor } from "./theme/customPrimary.mjs";
 import { CreateLobeTokenParams, LobeToken, createLobeToken } from "./theme/createLobeToken.mjs";
 import { LobeAppearance, LobeTheme, LobeThemeScript, LobeThemeScriptProps, LobeThemeState, ResponsiveState, ThemeScope, ThemeScopeProps, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./theme/scope.mjs";
 import { createGlobalStyle } from "./createGlobalStyle.mjs";
 import { LobeCssVar, StaticStyleExtract, StaticStyleUtils, createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./css.mjs";
 import { staticStylish } from "./theme/customStylishStatic.mjs";
 import { generateColorNeutralPalette, generateColorPalette } from "./theme/generateColorPalette.mjs";
-import { getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
-export { type CreateLobeTokenParams, type LobeAppearance, type LobeCssVar, type LobeTheme, LobeThemeScript, type LobeThemeScriptProps, type LobeThemeState, type LobeToken, NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, type ResponsiveState, type StaticStyleExtract, type StaticStyleUtils, ThemeScope, type ThemeScopeProps, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getGlobalCss, getThemeCss, injectGlobal, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };
+import { getCustomPrimaryCss, getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
+export { type CreateLobeTokenParams, type CustomPrimaryColor, type LobeAppearance, type LobeCssVar, type LobePrimaryColor, type LobeTheme, LobeThemeScript, type LobeThemeScriptProps, type LobeThemeState, type LobeToken, NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, type ResponsiveState, type StaticStyleExtract, type StaticStyleUtils, ThemeScope, type ThemeScopeProps, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getCustomPrimaryCss, getGlobalCss, getThemeCss, injectGlobal, isCustomPrimaryColor, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };

package/es/styles/index.mjs

@@ -1,9 +1,10 @@
 import { generateColorNeutralPalette, generateColorPalette } from "./theme/generateColorPalette.mjs";
+import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
+import { isCustomPrimaryColor } from "./theme/customPrimary.mjs";
 import { createLobeToken } from "./theme/createLobeToken.mjs";
-import { LobeThemeScript, ThemeScope, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./theme/scope.mjs";
 import { createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./css.mjs";
+import { getCustomPrimaryCss, getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
+import { LobeThemeScript, ThemeScope, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./theme/scope.mjs";
 import { createGlobalStyle } from "./createGlobalStyle.mjs";
-import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
 import { staticStylish } from "./theme/customStylishStatic.mjs";
-import { getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
-export { LobeThemeScript, ThemeScope, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getGlobalCss, getThemeCss, injectGlobal, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };
+export { LobeThemeScript, ThemeScope, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getCustomPrimaryCss, getGlobalCss, getThemeCss, injectGlobal, isCustomPrimaryColor, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };

package/es/styles/theme/createLobeToken.d.mts

@@ -1,9 +1,10 @@
-import { NeutralColors, PrimaryColors } from "../customTheme.mjs";
+import { NeutralColors } from "../customTheme.mjs";
+import { LobePrimaryColor } from "./customPrimary.mjs";
 //#region src/styles/theme/createLobeToken.d.ts
 export interface CreateLobeTokenParams {
   appearance: 'light' | 'dark';
   neutralColor?: NeutralColors;
-  primaryColor?: PrimaryColors;
+  primaryColor?: LobePrimaryColor;
 }
 export declare const createLobeTokenGroups: ({ appearance, neutralColor, primaryColor }: CreateLobeTokenParams) => {
   neutral: {

package/es/styles/theme/createLobeToken.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"createLobeToken.mjs","names":[],"sources":["../../../src/styles/theme/createLobeToken.ts"],"sourcesContent":["import type { NeutralColors, PrimaryColors } from '../customTheme';\nimport { createNeutralToken } from './token/neutral';\nimport { createPaletteToken } from './token/palette';\nimport { createPrimaryToken } from './token/primary';\nimport { staticToken } from './token/static';\n\nexport interface CreateLobeTokenParams {\n  appearance: 'light' | 'dark';\n  neutralColor?: NeutralColors;\n  primaryColor?: PrimaryColors;\n}\n\nexport const createLobeTokenGroups = ({\n  appearance,\n  neutralColor,\n  primaryColor,\n}: CreateLobeTokenParams) => {\n  const palette = createPaletteToken(appearance);\n\n  return {\n    neutral: createNeutralToken(appearance, neutralColor, palette),\n    palette,\n    primary: createPrimaryToken(appearance, primaryColor),\n    static: staticToken,\n  };\n};\n\nexport type LobeTokenGroups = ReturnType<typeof createLobeTokenGroups>;\n\nexport type LobeToken = LobeTokenGroups['static'] &\n  LobeTokenGroups['palette'] &\n  LobeTokenGroups['primary'] &\n  LobeTokenGroups['neutral'];\n\nexport const createLobeToken = (params: CreateLobeTokenParams): LobeToken => {\n  const groups = createLobeTokenGroups(params);\n\n  return { ...groups.static, ...groups.palette, ...groups.primary, ...groups.neutral };\n};\n"],"mappings":";;;;;AAYA,MAAa,yBAAyB,EACpC,YACA,cACA,mBAC2B;CAC3B,MAAM,UAAU,mBAAmB,UAAU;CAE7C,OAAO;EACL,SAAS,mBAAmB,YAAY,cAAc,OAAO;EAC7D;EACA,SAAS,mBAAmB,YAAY,YAAY;EACpD,QAAQ;CACV;AACF;AASA,MAAa,mBAAmB,WAA6C;CAC3E,MAAM,SAAS,sBAAsB,MAAM;CAE3C,OAAO;EAAE,GAAG,OAAO;EAAQ,GAAG,OAAO;EAAS,GAAG,OAAO;EAAS,GAAG,OAAO;CAAQ;AACrF"}
+{"version":3,"file":"createLobeToken.mjs","names":[],"sources":["../../../src/styles/theme/createLobeToken.ts"],"sourcesContent":["import type { NeutralColors } from '../customTheme';\nimport type { LobePrimaryColor } from './customPrimary';\nimport { createNeutralToken } from './token/neutral';\nimport { createPaletteToken } from './token/palette';\nimport { createPrimaryToken } from './token/primary';\nimport { staticToken } from './token/static';\n\nexport interface CreateLobeTokenParams {\n  appearance: 'light' | 'dark';\n  neutralColor?: NeutralColors;\n  primaryColor?: LobePrimaryColor;\n}\n\nexport const createLobeTokenGroups = ({\n  appearance,\n  neutralColor,\n  primaryColor,\n}: CreateLobeTokenParams) => {\n  const palette = createPaletteToken(appearance);\n\n  return {\n    neutral: createNeutralToken(appearance, neutralColor, palette),\n    palette,\n    primary: createPrimaryToken(appearance, primaryColor),\n    static: staticToken,\n  };\n};\n\nexport type LobeTokenGroups = ReturnType<typeof createLobeTokenGroups>;\n\nexport type LobeToken = LobeTokenGroups['static'] &\n  LobeTokenGroups['palette'] &\n  LobeTokenGroups['primary'] &\n  LobeTokenGroups['neutral'];\n\nexport const createLobeToken = (params: CreateLobeTokenParams): LobeToken => {\n  const groups = createLobeTokenGroups(params);\n\n  return { ...groups.static, ...groups.palette, ...groups.primary, ...groups.neutral };\n};\n"],"mappings":";;;;;AAaA,MAAa,yBAAyB,EACpC,YACA,cACA,mBAC2B;CAC3B,MAAM,UAAU,mBAAmB,UAAU;CAE7C,OAAO;EACL,SAAS,mBAAmB,YAAY,cAAc,OAAO;EAC7D;EACA,SAAS,mBAAmB,YAAY,YAAY;EACpD,QAAQ;CACV;AACF;AASA,MAAa,mBAAmB,WAA6C;CAC3E,MAAM,SAAS,sBAAsB,MAAM;CAE3C,OAAO;EAAE,GAAG,OAAO;EAAQ,GAAG,OAAO;EAAS,GAAG,OAAO;EAAS,GAAG,OAAO;CAAQ;AACrF"}

package/es/styles/theme/customPrimary.d.mts

@@ -0,0 +1,7 @@
+import { PrimaryColors } from "../customTheme.mjs";
+//#region src/styles/theme/customPrimary.d.ts
+export type CustomPrimaryColor = `#${string}`;
+export type LobePrimaryColor = PrimaryColors | CustomPrimaryColor;
+export declare const isCustomPrimaryColor: (value?: string) => value is CustomPrimaryColor;
+//#endregion
+//# sourceMappingURL=customPrimary.d.mts.map

package/es/styles/theme/customPrimary.mjs

@@ -0,0 +1,66 @@
+import { colorScales } from "../../color/colors/index.mjs";
+import { primaryColors } from "../customTheme.mjs";
+import chroma from "chroma-js";
+//#region src/styles/theme/customPrimary.ts
+const HEX = /^#[\da-f]{6}$/i;
+const isCustomPrimaryColor = (value) => !!value && HEX.test(value);
+const ANCHOR = 9;
+const ANCHORED_STEPS = /* @__PURE__ */ new Set([
+	7,
+	8,
+	10
+]);
+const MAX_CHROMA_RATIO = 2;
+const oklch = (color) => {
+	const [l, c, h] = chroma(color).oklch();
+	return {
+		c,
+		h: Number.isNaN(h) ? 0 : h,
+		l
+	};
+};
+const hueDistance = (a, b) => {
+	const d = Math.abs(a - b) % 360;
+	return d > 180 ? 360 - d : d;
+};
+const nearestPreset = (hue) => Object.keys(primaryColors).reduce((best, name) => hueDistance(oklch(primaryColors[name]).h, hue) < hueDistance(oklch(primaryColors[best]).h, hue) ? name : best);
+const clamp = (value) => Math.min(1, Math.max(0, value));
+const retintSolid = (steps, target, hex) => {
+	const anchor = oklch(steps[ANCHOR]);
+	const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;
+	return steps.map((step, i) => {
+		if (i === ANCHOR) return hex;
+		const { c, l } = oklch(step);
+		const lightness = ANCHORED_STEPS.has(i) ? clamp(target.l + l - anchor.l) : l;
+		return chroma.oklch(lightness, c * ratio, target.h).hex();
+	});
+};
+const retintAlpha = (steps, solid, target) => {
+	const anchor = oklch(solid[ANCHOR]);
+	const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;
+	return steps.map((step) => {
+		const color = chroma(step);
+		const { c, l } = oklch(step);
+		return chroma.oklch(l, c * ratio, target.h).alpha(color.alpha()).css();
+	});
+};
+const cache = /* @__PURE__ */ new Map();
+const generatePrimaryScale = (color) => {
+	const hex = color.toLowerCase();
+	const cached = cache.get(hex);
+	if (cached) return cached;
+	const target = oklch(hex);
+	const preset = colorScales[nearestPreset(target.h)];
+	const scale = {
+		dark: retintSolid(preset.dark, target, hex),
+		darkA: retintAlpha(preset.darkA, preset.dark, target),
+		light: retintSolid(preset.light, target, hex),
+		lightA: retintAlpha(preset.lightA, preset.light, target)
+	};
+	cache.set(hex, scale);
+	return scale;
+};
+//#endregion
+export { generatePrimaryScale, isCustomPrimaryColor };
+
+//# sourceMappingURL=customPrimary.mjs.map

package/es/styles/theme/customPrimary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"customPrimary.mjs","names":[],"sources":["../../../src/styles/theme/customPrimary.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { colorScales } from '@/color/colors';\nimport type { ColorScaleItem } from '@/color/types';\n\nimport { type PrimaryColors, primaryColors } from '../customTheme';\n\nexport type CustomPrimaryColor = `#${string}`;\nexport type LobePrimaryColor = PrimaryColors | CustomPrimaryColor;\n\nconst HEX = /^#[\\da-f]{6}$/i;\n\nexport const isCustomPrimaryColor = (value?: string): value is CustomPrimaryColor =>\n  !!value && HEX.test(value);\n\nconst ANCHOR = 9;\nconst ANCHORED_STEPS = new Set([7, 8, 10]);\nconst MAX_CHROMA_RATIO = 2;\n\nconst oklch = (color: string) => {\n  const [l, c, h] = chroma(color).oklch();\n  return { c, h: Number.isNaN(h) ? 0 : h, l };\n};\n\nconst hueDistance = (a: number, b: number) => {\n  const d = Math.abs(a - b) % 360;\n  return d > 180 ? 360 - d : d;\n};\n\nconst nearestPreset = (hue: number) =>\n  (Object.keys(primaryColors) as PrimaryColors[]).reduce((best, name) =>\n    hueDistance(oklch(primaryColors[name]).h, hue) < hueDistance(oklch(primaryColors[best]).h, hue)\n      ? name\n      : best,\n  );\n\nconst clamp = (value: number) => Math.min(1, Math.max(0, value));\n\ntype Steps = ColorScaleItem['light'];\n\nconst retintSolid = (steps: Steps, target: ReturnType<typeof oklch>, hex: string): Steps => {\n  const anchor = oklch(steps[ANCHOR]);\n  const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;\n\n  return steps.map((step, i) => {\n    if (i === ANCHOR) return hex;\n    const { c, l } = oklch(step);\n    const lightness = ANCHORED_STEPS.has(i) ? clamp(target.l + l - anchor.l) : l;\n    return chroma.oklch(lightness, c * ratio, target.h).hex();\n  }) as Steps;\n};\n\nconst retintAlpha = (steps: Steps, solid: Steps, target: ReturnType<typeof oklch>): Steps => {\n  const anchor = oklch(solid[ANCHOR]);\n  const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;\n\n  return steps.map((step) => {\n    const color = chroma(step);\n    const { c, l } = oklch(step);\n    return chroma\n      .oklch(l, c * ratio, target.h)\n      .alpha(color.alpha())\n      .css();\n  }) as Steps;\n};\n\nconst cache = new Map<string, ColorScaleItem>();\n\nexport const generatePrimaryScale = (color: CustomPrimaryColor): ColorScaleItem => {\n  const hex = color.toLowerCase();\n  const cached = cache.get(hex);\n  if (cached) return cached;\n\n  const target = oklch(hex);\n  const preset = colorScales[nearestPreset(target.h)];\n  const scale: ColorScaleItem = {\n    dark: retintSolid(preset.dark, target, hex),\n    darkA: retintAlpha(preset.darkA, preset.dark, target),\n    light: retintSolid(preset.light, target, hex),\n    lightA: retintAlpha(preset.lightA, preset.light, target),\n  };\n\n  cache.set(hex, scale);\n  return scale;\n};\n"],"mappings":";;;;AAUA,MAAM,MAAM;AAEZ,MAAa,wBAAwB,UACnC,CAAC,CAAC,SAAS,IAAI,KAAK,KAAK;AAE3B,MAAM,SAAS;AACf,MAAM,iCAAiB,IAAI,IAAI;CAAC;CAAG;CAAG;AAAE,CAAC;AACzC,MAAM,mBAAmB;AAEzB,MAAM,SAAS,UAAkB;CAC/B,MAAM,CAAC,GAAG,GAAG,KAAK,OAAO,KAAK,CAAC,CAAC,MAAM;CACtC,OAAO;EAAE;EAAG,GAAG,OAAO,MAAM,CAAC,IAAI,IAAI;EAAG;CAAE;AAC5C;AAEA,MAAM,eAAe,GAAW,MAAc;CAC5C,MAAM,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI;CAC5B,OAAO,IAAI,MAAM,MAAM,IAAI;AAC7B;AAEA,MAAM,iBAAiB,QACpB,OAAO,KAAK,aAAa,CAAC,CAAqB,QAAQ,MAAM,SAC5D,YAAY,MAAM,cAAc,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,YAAY,MAAM,cAAc,KAAK,CAAC,CAAC,GAAG,GAAG,IAC1F,OACA,IACN;AAEF,MAAM,SAAS,UAAkB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;AAI/D,MAAM,eAAe,OAAc,QAAkC,QAAuB;CAC1F,MAAM,SAAS,MAAM,MAAM,OAAO;CAClC,MAAM,QAAQ,OAAO,IAAI,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO,GAAG,gBAAgB,IAAI;CAE/E,OAAO,MAAM,KAAK,MAAM,MAAM;EAC5B,IAAI,MAAM,QAAQ,OAAO;EACzB,MAAM,EAAE,GAAG,MAAM,MAAM,IAAI;EAC3B,MAAM,YAAY,eAAe,IAAI,CAAC,IAAI,MAAM,OAAO,IAAI,IAAI,OAAO,CAAC,IAAI;EAC3E,OAAO,OAAO,MAAM,WAAW,IAAI,OAAO,OAAO,CAAC,CAAC,CAAC,IAAI;CAC1D,CAAC;AACH;AAEA,MAAM,eAAe,OAAc,OAAc,WAA4C;CAC3F,MAAM,SAAS,MAAM,MAAM,OAAO;CAClC,MAAM,QAAQ,OAAO,IAAI,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO,GAAG,gBAAgB,IAAI;CAE/E,OAAO,MAAM,KAAK,SAAS;EACzB,MAAM,QAAQ,OAAO,IAAI;EACzB,MAAM,EAAE,GAAG,MAAM,MAAM,IAAI;EAC3B,OAAO,OACJ,MAAM,GAAG,IAAI,OAAO,OAAO,CAAC,CAAC,CAC7B,MAAM,MAAM,MAAM,CAAC,CAAC,CACpB,IAAI;CACT,CAAC;AACH;AAEA,MAAM,wBAAQ,IAAI,IAA4B;AAE9C,MAAa,wBAAwB,UAA8C;CACjF,MAAM,MAAM,MAAM,YAAY;CAC9B,MAAM,SAAS,MAAM,IAAI,GAAG;CAC5B,IAAI,QAAQ,OAAO;CAEnB,MAAM,SAAS,MAAM,GAAG;CACxB,MAAM,SAAS,YAAY,cAAc,OAAO,CAAC;CACjD,MAAM,QAAwB;EAC5B,MAAM,YAAY,OAAO,MAAM,QAAQ,GAAG;EAC1C,OAAO,YAAY,OAAO,OAAO,OAAO,MAAM,MAAM;EACpD,OAAO,YAAY,OAAO,OAAO,QAAQ,GAAG;EAC5C,QAAQ,YAAY,OAAO,QAAQ,OAAO,OAAO,MAAM;CACzD;CAEA,MAAM,IAAI,KAAK,KAAK;CACpB,OAAO;AACT"}

package/es/styles/theme/scope.d.mts

@@ -1,4 +1,5 @@
-import { NeutralColors, PrimaryColors } from "../customTheme.mjs";
+import { NeutralColors } from "../customTheme.mjs";
+import { LobePrimaryColor } from "./customPrimary.mjs";
 import { LobeToken } from "./createLobeToken.mjs";
 import { CSSProperties, ReactNode } from "react";
 //#region src/styles/theme/scope.d.ts
@@ -6,7 +7,7 @@ export type LobeAppearance = 'light' | 'dark';
 export interface LobeThemeState {
   appearance: LobeAppearance;
   neutralColor?: NeutralColors;
-  primaryColor?: PrimaryColors;
+  primaryColor?: LobePrimaryColor;
 }
 export declare const setLobeTheme: (state: Partial<LobeThemeState>, root?: HTMLElement) => void;
 export interface ThemeScopeProps extends Partial<LobeThemeState> {
@@ -40,7 +41,7 @@ export interface LobeThemeScriptProps {
   appearance?: LobeAppearance | 'system';
   neutralColor?: NeutralColors;
   nonce?: string;
-  primaryColor?: PrimaryColors;
+  primaryColor?: LobePrimaryColor;
 }
 export declare const LobeThemeScript: ({ appearance, neutralColor, nonce, primaryColor }: LobeThemeScriptProps) => import("react").JSX.Element;
 //#endregion

package/es/styles/theme/scope.mjs

@@ -1,8 +1,10 @@
 "use client";
+import { isCustomPrimaryColor } from "./customPrimary.mjs";
 import { staticToken } from "./token/static.mjs";
 import { createLobeToken } from "./createLobeToken.mjs";
+import { getCustomPrimaryCss } from "./themeCss.mjs";
 import { createContext, use, useMemo, useSyncExternalStore } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/styles/theme/scope.tsx
 const ATTRIBUTES = [
 	"data-theme",
@@ -14,11 +16,23 @@ const toAttributes = ({ appearance, neutralColor, primaryColor }) => ({
 	"data-primary-color": primaryColor,
 	"data-theme": appearance
 });
+const normalizePrimary = (color) => isCustomPrimaryColor(color) ? color.toLowerCase() : color;
+const customPrimaryStyleId = (color) => `lobe-primary-${color.slice(1)}`;
+const ensureCustomPrimaryStyle = (color, doc) => {
+	const id = customPrimaryStyleId(color);
+	if (doc.getElementById(id)) return;
+	const style = doc.createElement("style");
+	style.id = id;
+	style.textContent = getCustomPrimaryCss(color);
+	doc.head.append(style);
+};
 const setLobeTheme = (state, root = document.documentElement) => {
 	const next = {
 		...readThemeState(root),
 		...state
 	};
+	next.primaryColor = normalizePrimary(next.primaryColor);
+	if (isCustomPrimaryColor(next.primaryColor)) ensureCustomPrimaryStyle(next.primaryColor, root.ownerDocument);
 	for (const [name, value] of Object.entries(toAttributes(next))) if (value) root.setAttribute(name, value);
 	else root.removeAttribute(name);
 };
@@ -54,21 +68,26 @@ const ThemeScope = ({ appearance, children, className, neutralColor, primaryColo
 	const state = useMemo(() => ({
 		appearance: appearance ?? parent.appearance,
 		neutralColor: neutralColor ?? parent.neutralColor,
-		primaryColor: primaryColor ?? parent.primaryColor
+		primaryColor: normalizePrimary(primaryColor) ?? parent.primaryColor
 	}), [
 		appearance,
 		neutralColor,
 		primaryColor,
 		parent
 	]);
-	return /* @__PURE__ */ jsx(ThemeScopeContext, {
+	const customPrimary = isCustomPrimaryColor(state.primaryColor) ? state.primaryColor : void 0;
+	return /* @__PURE__ */ jsxs(ThemeScopeContext, {
 		value: state,
-		children: /* @__PURE__ */ jsx("div", {
+		children: [customPrimary && /* @__PURE__ */ jsx("style", {
+			href: customPrimaryStyleId(customPrimary),
+			precedence: "lobe-theme",
+			children: getCustomPrimaryCss(customPrimary)
+		}), /* @__PURE__ */ jsx("div", {
 			className,
 			style,
 			...toAttributes(state),
 			children
-		})
+		})]
 	});
 };
 const useThemeMode = () => {
@@ -133,10 +152,13 @@ const subscribeResponsive = (onChange) => {
 };
 const useResponsive = () => useSyncExternalStore(subscribeResponsive, getResponsiveSnapshot, () => SERVER_RESPONSIVE);
 const LobeThemeScript = ({ appearance, neutralColor, nonce, primaryColor }) => {
-	const script = `(function(a,p,n){var d=document.documentElement;if(a==='system')a=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';if(a)d.setAttribute('data-theme',a);else if(!d.hasAttribute('data-theme'))d.setAttribute('data-theme','light');if(p)d.setAttribute('data-primary-color',p);if(n)d.setAttribute('data-neutral-color',n);}).apply(null,${JSON.stringify([
+	const primary = normalizePrimary(primaryColor);
+	const custom = isCustomPrimaryColor(primary) ? [customPrimaryStyleId(primary), getCustomPrimaryCss(primary)] : [null, null];
+	const script = `(function(a,p,n,i,c){var d=document.documentElement;if(a==='system')a=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';if(a)d.setAttribute('data-theme',a);else if(!d.hasAttribute('data-theme'))d.setAttribute('data-theme','light');if(p)d.setAttribute('data-primary-color',p);if(n)d.setAttribute('data-neutral-color',n);if(c&&!document.getElementById(i)){var s=document.createElement('style');s.id=i;s.textContent=c;document.head.appendChild(s);}}).apply(null,${JSON.stringify([
 		appearance ?? null,
-		primaryColor ?? null,
-		neutralColor ?? null
+		primary ?? null,
+		neutralColor ?? null,
+		...custom
 	])})`;
 	return /* @__PURE__ */ jsx("script", {
 		suppressHydrationWarning: true,

package/es/styles/theme/scope.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scope.mjs","names":[],"sources":["../../../src/styles/theme/scope.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type CSSProperties,\n  type ReactNode,\n  use,\n  useMemo,\n  useSyncExternalStore,\n} from 'react';\n\nimport type { NeutralColors, PrimaryColors } from '../customTheme';\nimport { createLobeToken, type LobeToken } from './createLobeToken';\nimport { staticToken } from './token/static';\n\nexport type LobeAppearance = 'light' | 'dark';\n\nexport interface LobeThemeState {\n  appearance: LobeAppearance;\n  neutralColor?: NeutralColors;\n  primaryColor?: PrimaryColors;\n}\n\nconst ATTRIBUTES = ['data-theme', 'data-primary-color', 'data-neutral-color'];\n\nconst toAttributes = ({ appearance, neutralColor, primaryColor }: LobeThemeState) => ({\n  'data-neutral-color': neutralColor,\n  'data-primary-color': primaryColor,\n  'data-theme': appearance,\n});\n\nexport const setLobeTheme = (\n  state: Partial<LobeThemeState>,\n  root: HTMLElement = document.documentElement,\n) => {\n  const next = { ...readThemeState(root), ...state };\n  for (const [name, value] of Object.entries(toAttributes(next))) {\n    if (value) root.setAttribute(name, value);\n    else root.removeAttribute(name);\n  }\n};\n\nconst readThemeState = (el: HTMLElement): LobeThemeState => ({\n  appearance: el.dataset.theme === 'dark' ? 'dark' : 'light',\n  neutralColor: (el.dataset.neutralColor as NeutralColors) || undefined,\n  primaryColor: (el.dataset.primaryColor as PrimaryColors) || undefined,\n});\n\nconst stateKey = (state: LobeThemeState) =>\n  `${state.appearance}|${state.primaryColor ?? ''}|${state.neutralColor ?? ''}`;\n\nconst SERVER_STATE: LobeThemeState = { appearance: 'light' };\nlet rootSnapshot: LobeThemeState = SERVER_STATE;\n\nconst getRootSnapshot = () => {\n  const next = readThemeState(document.documentElement);\n  if (stateKey(next) !== stateKey(rootSnapshot)) rootSnapshot = next;\n  return rootSnapshot;\n};\n\nconst subscribeRoot = (onChange: () => void) => {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, { attributeFilter: ATTRIBUTES, attributes: true });\n  return () => observer.disconnect();\n};\n\nconst ThemeScopeContext = createContext<LobeThemeState | null>(null);\n\nconst useThemeState = () => {\n  const scoped = use(ThemeScopeContext);\n  const root = useSyncExternalStore(subscribeRoot, getRootSnapshot, () => SERVER_STATE);\n  return scoped ?? root;\n};\n\nexport interface ThemeScopeProps extends Partial<LobeThemeState> {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const ThemeScope = ({\n  appearance,\n  children,\n  className,\n  neutralColor,\n  primaryColor,\n  style,\n}: ThemeScopeProps) => {\n  const parent = useThemeState();\n  const state = useMemo<LobeThemeState>(\n    () => ({\n      appearance: appearance ?? parent.appearance,\n      neutralColor: neutralColor ?? parent.neutralColor,\n      primaryColor: primaryColor ?? parent.primaryColor,\n    }),\n    [appearance, neutralColor, primaryColor, parent],\n  );\n\n  return (\n    <ThemeScopeContext value={state}>\n      <div className={className} style={style} {...toAttributes(state)}>\n        {children}\n      </div>\n    </ThemeScopeContext>\n  );\n};\n\nexport const useThemeMode = () => {\n  const { appearance } = useThemeState();\n  return useMemo(() => ({ appearance, isDarkMode: appearance === 'dark' }), [appearance]);\n};\n\nexport type LobeTheme = LobeToken & { appearance: LobeAppearance; isDarkMode: boolean };\n\nconst themeCache = new Map<string, LobeTheme>();\n\nexport const useTheme = (): LobeTheme => {\n  const state = useThemeState();\n  const key = stateKey(state);\n  let theme = themeCache.get(key);\n  if (!theme) {\n    theme = {\n      ...createLobeToken(state),\n      appearance: state.appearance,\n      isDarkMode: state.appearance === 'dark',\n    };\n    themeCache.set(key, theme);\n  }\n  return theme;\n};\n\nconst breakpointQueries = {\n  lg: `(min-width: ${staticToken.screenLG}px)`,\n  md: `(min-width: ${staticToken.screenMD}px)`,\n  sm: `(min-width: ${staticToken.screenSM}px)`,\n  xl: `(min-width: ${staticToken.screenXL}px)`,\n  xs: `(max-width: ${staticToken.screenXSMax}px)`,\n  xxl: `(min-width: ${staticToken.screenXXL}px)`,\n  xxxl: `(min-width: ${staticToken.screenXXXL}px)`,\n};\n\ntype Breakpoint = keyof typeof breakpointQueries;\nexport type ResponsiveState = Record<\n  Breakpoint | 'mobile' | 'tablet' | 'laptop' | 'desktop',\n  boolean\n>;\n\nconst toResponsive = (matches: Record<Breakpoint, boolean>): ResponsiveState => ({\n  ...matches,\n  desktop: matches.xxl,\n  laptop: matches.lg,\n  mobile: matches.xs,\n  tablet: matches.md,\n});\n\nconst SERVER_RESPONSIVE = toResponsive({\n  lg: false,\n  md: false,\n  sm: false,\n  xl: false,\n  xs: false,\n  xxl: false,\n  xxxl: false,\n});\nlet responsiveSnapshot = SERVER_RESPONSIVE;\n\nconst getResponsiveSnapshot = () => {\n  const matches = Object.fromEntries(\n    Object.entries(breakpointQueries).map(([key, query]) => [key, matchMedia(query).matches]),\n  ) as Record<Breakpoint, boolean>;\n  const changed = (Object.keys(matches) as Breakpoint[]).some(\n    (key) => matches[key] !== responsiveSnapshot[key],\n  );\n  if (changed) responsiveSnapshot = toResponsive(matches);\n  return responsiveSnapshot;\n};\n\nconst subscribeResponsive = (onChange: () => void) => {\n  const lists = Object.values(breakpointQueries).map((query) => matchMedia(query));\n  for (const list of lists) list.addEventListener('change', onChange);\n  return () => {\n    for (const list of lists) list.removeEventListener('change', onChange);\n  };\n};\n\nexport const useResponsive = () =>\n  useSyncExternalStore(subscribeResponsive, getResponsiveSnapshot, () => SERVER_RESPONSIVE);\n\nexport interface LobeThemeScriptProps {\n  appearance?: LobeAppearance | 'system';\n  neutralColor?: NeutralColors;\n  nonce?: string;\n  primaryColor?: PrimaryColors;\n}\n\nexport const LobeThemeScript = ({\n  appearance,\n  neutralColor,\n  nonce,\n  primaryColor,\n}: LobeThemeScriptProps) => {\n  const args = JSON.stringify([appearance ?? null, primaryColor ?? null, neutralColor ?? null]);\n  const script = `(function(a,p,n){var d=document.documentElement;if(a==='system')a=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';if(a)d.setAttribute('data-theme',a);else if(!d.hasAttribute('data-theme'))d.setAttribute('data-theme','light');if(p)d.setAttribute('data-primary-color',p);if(n)d.setAttribute('data-neutral-color',n);}).apply(null,${args})`;\n\n  return (\n    <script suppressHydrationWarning dangerouslySetInnerHTML={{ __html: script }} nonce={nonce} />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"scope.mjs","names":[],"sources":["../../../src/styles/theme/scope.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type CSSProperties,\n  type ReactNode,\n  use,\n  useMemo,\n  useSyncExternalStore,\n} from 'react';\n\nimport type { NeutralColors } from '../customTheme';\nimport { createLobeToken, type LobeToken } from './createLobeToken';\nimport {\n  type CustomPrimaryColor,\n  isCustomPrimaryColor,\n  type LobePrimaryColor,\n} from './customPrimary';\nimport { getCustomPrimaryCss } from './themeCss';\nimport { staticToken } from './token/static';\n\nexport type LobeAppearance = 'light' | 'dark';\n\nexport interface LobeThemeState {\n  appearance: LobeAppearance;\n  neutralColor?: NeutralColors;\n  primaryColor?: LobePrimaryColor;\n}\n\nconst ATTRIBUTES = ['data-theme', 'data-primary-color', 'data-neutral-color'];\n\nconst toAttributes = ({ appearance, neutralColor, primaryColor }: LobeThemeState) => ({\n  'data-neutral-color': neutralColor,\n  'data-primary-color': primaryColor,\n  'data-theme': appearance,\n});\n\nconst normalizePrimary = (color?: LobePrimaryColor) =>\n  isCustomPrimaryColor(color) ? (color.toLowerCase() as CustomPrimaryColor) : color;\n\nconst customPrimaryStyleId = (color: CustomPrimaryColor) => `lobe-primary-${color.slice(1)}`;\n\nconst ensureCustomPrimaryStyle = (color: CustomPrimaryColor, doc: Document) => {\n  const id = customPrimaryStyleId(color);\n  if (doc.getElementById(id)) return;\n  const style = doc.createElement('style');\n  style.id = id;\n  style.textContent = getCustomPrimaryCss(color);\n  doc.head.append(style);\n};\n\nexport const setLobeTheme = (\n  state: Partial<LobeThemeState>,\n  root: HTMLElement = document.documentElement,\n) => {\n  const next = { ...readThemeState(root), ...state };\n  next.primaryColor = normalizePrimary(next.primaryColor);\n  if (isCustomPrimaryColor(next.primaryColor))\n    ensureCustomPrimaryStyle(next.primaryColor, root.ownerDocument);\n  for (const [name, value] of Object.entries(toAttributes(next))) {\n    if (value) root.setAttribute(name, value);\n    else root.removeAttribute(name);\n  }\n};\n\nconst readThemeState = (el: HTMLElement): LobeThemeState => ({\n  appearance: el.dataset.theme === 'dark' ? 'dark' : 'light',\n  neutralColor: (el.dataset.neutralColor as NeutralColors) || undefined,\n  primaryColor: (el.dataset.primaryColor as LobePrimaryColor) || undefined,\n});\n\nconst stateKey = (state: LobeThemeState) =>\n  `${state.appearance}|${state.primaryColor ?? ''}|${state.neutralColor ?? ''}`;\n\nconst SERVER_STATE: LobeThemeState = { appearance: 'light' };\nlet rootSnapshot: LobeThemeState = SERVER_STATE;\n\nconst getRootSnapshot = () => {\n  const next = readThemeState(document.documentElement);\n  if (stateKey(next) !== stateKey(rootSnapshot)) rootSnapshot = next;\n  return rootSnapshot;\n};\n\nconst subscribeRoot = (onChange: () => void) => {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, { attributeFilter: ATTRIBUTES, attributes: true });\n  return () => observer.disconnect();\n};\n\nconst ThemeScopeContext = createContext<LobeThemeState | null>(null);\n\nconst useThemeState = () => {\n  const scoped = use(ThemeScopeContext);\n  const root = useSyncExternalStore(subscribeRoot, getRootSnapshot, () => SERVER_STATE);\n  return scoped ?? root;\n};\n\nexport interface ThemeScopeProps extends Partial<LobeThemeState> {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const ThemeScope = ({\n  appearance,\n  children,\n  className,\n  neutralColor,\n  primaryColor,\n  style,\n}: ThemeScopeProps) => {\n  const parent = useThemeState();\n  const state = useMemo<LobeThemeState>(\n    () => ({\n      appearance: appearance ?? parent.appearance,\n      neutralColor: neutralColor ?? parent.neutralColor,\n      primaryColor: normalizePrimary(primaryColor) ?? parent.primaryColor,\n    }),\n    [appearance, neutralColor, primaryColor, parent],\n  );\n  const customPrimary = isCustomPrimaryColor(state.primaryColor) ? state.primaryColor : undefined;\n\n  return (\n    <ThemeScopeContext value={state}>\n      {customPrimary && (\n        <style href={customPrimaryStyleId(customPrimary)} precedence=\"lobe-theme\">\n          {getCustomPrimaryCss(customPrimary)}\n        </style>\n      )}\n      <div className={className} style={style} {...toAttributes(state)}>\n        {children}\n      </div>\n    </ThemeScopeContext>\n  );\n};\n\nexport const useThemeMode = () => {\n  const { appearance } = useThemeState();\n  return useMemo(() => ({ appearance, isDarkMode: appearance === 'dark' }), [appearance]);\n};\n\nexport type LobeTheme = LobeToken & { appearance: LobeAppearance; isDarkMode: boolean };\n\nconst themeCache = new Map<string, LobeTheme>();\n\nexport const useTheme = (): LobeTheme => {\n  const state = useThemeState();\n  const key = stateKey(state);\n  let theme = themeCache.get(key);\n  if (!theme) {\n    theme = {\n      ...createLobeToken(state),\n      appearance: state.appearance,\n      isDarkMode: state.appearance === 'dark',\n    };\n    themeCache.set(key, theme);\n  }\n  return theme;\n};\n\nconst breakpointQueries = {\n  lg: `(min-width: ${staticToken.screenLG}px)`,\n  md: `(min-width: ${staticToken.screenMD}px)`,\n  sm: `(min-width: ${staticToken.screenSM}px)`,\n  xl: `(min-width: ${staticToken.screenXL}px)`,\n  xs: `(max-width: ${staticToken.screenXSMax}px)`,\n  xxl: `(min-width: ${staticToken.screenXXL}px)`,\n  xxxl: `(min-width: ${staticToken.screenXXXL}px)`,\n};\n\ntype Breakpoint = keyof typeof breakpointQueries;\nexport type ResponsiveState = Record<\n  Breakpoint | 'mobile' | 'tablet' | 'laptop' | 'desktop',\n  boolean\n>;\n\nconst toResponsive = (matches: Record<Breakpoint, boolean>): ResponsiveState => ({\n  ...matches,\n  desktop: matches.xxl,\n  laptop: matches.lg,\n  mobile: matches.xs,\n  tablet: matches.md,\n});\n\nconst SERVER_RESPONSIVE = toResponsive({\n  lg: false,\n  md: false,\n  sm: false,\n  xl: false,\n  xs: false,\n  xxl: false,\n  xxxl: false,\n});\nlet responsiveSnapshot = SERVER_RESPONSIVE;\n\nconst getResponsiveSnapshot = () => {\n  const matches = Object.fromEntries(\n    Object.entries(breakpointQueries).map(([key, query]) => [key, matchMedia(query).matches]),\n  ) as Record<Breakpoint, boolean>;\n  const changed = (Object.keys(matches) as Breakpoint[]).some(\n    (key) => matches[key] !== responsiveSnapshot[key],\n  );\n  if (changed) responsiveSnapshot = toResponsive(matches);\n  return responsiveSnapshot;\n};\n\nconst subscribeResponsive = (onChange: () => void) => {\n  const lists = Object.values(breakpointQueries).map((query) => matchMedia(query));\n  for (const list of lists) list.addEventListener('change', onChange);\n  return () => {\n    for (const list of lists) list.removeEventListener('change', onChange);\n  };\n};\n\nexport const useResponsive = () =>\n  useSyncExternalStore(subscribeResponsive, getResponsiveSnapshot, () => SERVER_RESPONSIVE);\n\nexport interface LobeThemeScriptProps {\n  appearance?: LobeAppearance | 'system';\n  neutralColor?: NeutralColors;\n  nonce?: string;\n  primaryColor?: LobePrimaryColor;\n}\n\nexport const LobeThemeScript = ({\n  appearance,\n  neutralColor,\n  nonce,\n  primaryColor,\n}: LobeThemeScriptProps) => {\n  const primary = normalizePrimary(primaryColor);\n  const custom = isCustomPrimaryColor(primary)\n    ? [customPrimaryStyleId(primary), getCustomPrimaryCss(primary)]\n    : [null, null];\n  const args = JSON.stringify([\n    appearance ?? null,\n    primary ?? null,\n    neutralColor ?? null,\n    ...custom,\n  ]);\n  const script = `(function(a,p,n,i,c){var d=document.documentElement;if(a==='system')a=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';if(a)d.setAttribute('data-theme',a);else if(!d.hasAttribute('data-theme'))d.setAttribute('data-theme','light');if(p)d.setAttribute('data-primary-color',p);if(n)d.setAttribute('data-neutral-color',n);if(c&&!document.getElementById(i)){var s=document.createElement('style');s.id=i;s.textContent=c;document.head.appendChild(s);}}).apply(null,${args})`;\n\n  return (\n    <script suppressHydrationWarning dangerouslySetInnerHTML={{ __html: script }} nonce={nonce} />\n  );\n};\n"],"mappings":";;;;;;;;AA6BA,MAAM,aAAa;CAAC;CAAc;CAAsB;AAAoB;AAE5E,MAAM,gBAAgB,EAAE,YAAY,cAAc,oBAAoC;CACpF,sBAAsB;CACtB,sBAAsB;CACtB,cAAc;AAChB;AAEA,MAAM,oBAAoB,UACxB,qBAAqB,KAAK,IAAK,MAAM,YAAY,IAA2B;AAE9E,MAAM,wBAAwB,UAA8B,gBAAgB,MAAM,MAAM,CAAC;AAEzF,MAAM,4BAA4B,OAA2B,QAAkB;CAC7E,MAAM,KAAK,qBAAqB,KAAK;CACrC,IAAI,IAAI,eAAe,EAAE,GAAG;CAC5B,MAAM,QAAQ,IAAI,cAAc,OAAO;CACvC,MAAM,KAAK;CACX,MAAM,cAAc,oBAAoB,KAAK;CAC7C,IAAI,KAAK,OAAO,KAAK;AACvB;AAEA,MAAa,gBACX,OACA,OAAoB,SAAS,oBAC1B;CACH,MAAM,OAAO;EAAE,GAAG,eAAe,IAAI;EAAG,GAAG;CAAM;CACjD,KAAK,eAAe,iBAAiB,KAAK,YAAY;CACtD,IAAI,qBAAqB,KAAK,YAAY,GACxC,yBAAyB,KAAK,cAAc,KAAK,aAAa;CAChE,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,aAAa,IAAI,CAAC,GAC3D,IAAI,OAAO,KAAK,aAAa,MAAM,KAAK;MACnC,KAAK,gBAAgB,IAAI;AAElC;AAEA,MAAM,kBAAkB,QAAqC;CAC3D,YAAY,GAAG,QAAQ,UAAU,SAAS,SAAS;CACnD,cAAe,GAAG,QAAQ,gBAAkC,KAAA;CAC5D,cAAe,GAAG,QAAQ,gBAAqC,KAAA;AACjE;AAEA,MAAM,YAAY,UAChB,GAAG,MAAM,WAAW,GAAG,MAAM,gBAAgB,GAAG,GAAG,MAAM,gBAAgB;AAE3E,MAAM,eAA+B,EAAE,YAAY,QAAQ;AAC3D,IAAI,eAA+B;AAEnC,MAAM,wBAAwB;CAC5B,MAAM,OAAO,eAAe,SAAS,eAAe;CACpD,IAAI,SAAS,IAAI,MAAM,SAAS,YAAY,GAAG,eAAe;CAC9D,OAAO;AACT;AAEA,MAAM,iBAAiB,aAAyB;CAC9C,MAAM,WAAW,IAAI,iBAAiB,QAAQ;CAC9C,SAAS,QAAQ,SAAS,iBAAiB;EAAE,iBAAiB;EAAY,YAAY;CAAK,CAAC;CAC5F,aAAa,SAAS,WAAW;AACnC;AAEA,MAAM,oBAAoB,cAAqC,IAAI;AAEnE,MAAM,sBAAsB;CAC1B,MAAM,SAAS,IAAI,iBAAiB;CACpC,MAAM,OAAO,qBAAqB,eAAe,uBAAuB,YAAY;CACpF,OAAO,UAAU;AACnB;AAQA,MAAa,cAAc,EACzB,YACA,UACA,WACA,cACA,cACA,YACqB;CACrB,MAAM,SAAS,cAAc;CAC7B,MAAM,QAAQ,eACL;EACL,YAAY,cAAc,OAAO;EACjC,cAAc,gBAAgB,OAAO;EACrC,cAAc,iBAAiB,YAAY,KAAK,OAAO;CACzD,IACA;EAAC;EAAY;EAAc;EAAc;CAAM,CACjD;CACA,MAAM,gBAAgB,qBAAqB,MAAM,YAAY,IAAI,MAAM,eAAe,KAAA;CAEtF,OACE,qBAAC,mBAAD;EAAmB,OAAO;EAA1B,UAAA,CACG,iBACC,oBAAC,SAAD;GAAO,MAAM,qBAAqB,aAAa;GAAG,YAAW;GAC1D,UAAA,oBAAoB,aAAa;EAC7B,CAAA,GAET,oBAAC,OAAD;GAAgB;GAAkB;GAAO,GAAI,aAAa,KAAK;GAC5D;EACE,CAAA,CACY;;AAEvB;AAEA,MAAa,qBAAqB;CAChC,MAAM,EAAE,eAAe,cAAc;CACrC,OAAO,eAAe;EAAE;EAAY,YAAY,eAAe;CAAO,IAAI,CAAC,UAAU,CAAC;AACxF;AAIA,MAAM,6BAAa,IAAI,IAAuB;AAE9C,MAAa,iBAA4B;CACvC,MAAM,QAAQ,cAAc;CAC5B,MAAM,MAAM,SAAS,KAAK;CAC1B,IAAI,QAAQ,WAAW,IAAI,GAAG;CAC9B,IAAI,CAAC,OAAO;EACV,QAAQ;GACN,GAAG,gBAAgB,KAAK;GACxB,YAAY,MAAM;GAClB,YAAY,MAAM,eAAe;EACnC;EACA,WAAW,IAAI,KAAK,KAAK;CAC3B;CACA,OAAO;AACT;AAEA,MAAM,oBAAoB;CACxB,IAAI,eAAe,YAAY,SAAS;CACxC,IAAI,eAAe,YAAY,SAAS;CACxC,IAAI,eAAe,YAAY,SAAS;CACxC,IAAI,eAAe,YAAY,SAAS;CACxC,IAAI,eAAe,YAAY,YAAY;CAC3C,KAAK,eAAe,YAAY,UAAU;CAC1C,MAAM,eAAe,YAAY,WAAW;AAC9C;AAQA,MAAM,gBAAgB,aAA2D;CAC/E,GAAG;CACH,SAAS,QAAQ;CACjB,QAAQ,QAAQ;CAChB,QAAQ,QAAQ;CAChB,QAAQ,QAAQ;AAClB;AAEA,MAAM,oBAAoB,aAAa;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,MAAM;AACR,CAAC;AACD,IAAI,qBAAqB;AAEzB,MAAM,8BAA8B;CAClC,MAAM,UAAU,OAAO,YACrB,OAAO,QAAQ,iBAAiB,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,WAAW,KAAK,CAAC,CAAC,OAAO,CAAC,CAC1F;CAIA,IAHiB,OAAO,KAAK,OAAO,CAAC,CAAkB,MACpD,QAAQ,QAAQ,SAAS,mBAAmB,IAErC,GAAG,qBAAqB,aAAa,OAAO;CACtD,OAAO;AACT;AAEA,MAAM,uBAAuB,aAAyB;CACpD,MAAM,QAAQ,OAAO,OAAO,iBAAiB,CAAC,CAAC,KAAK,UAAU,WAAW,KAAK,CAAC;CAC/E,KAAK,MAAM,QAAQ,OAAO,KAAK,iBAAiB,UAAU,QAAQ;CAClE,aAAa;EACX,KAAK,MAAM,QAAQ,OAAO,KAAK,oBAAoB,UAAU,QAAQ;CACvE;AACF;AAEA,MAAa,sBACX,qBAAqB,qBAAqB,6BAA6B,iBAAiB;AAS1F,MAAa,mBAAmB,EAC9B,YACA,cACA,OACA,mBAC0B;CAC1B,MAAM,UAAU,iBAAiB,YAAY;CAC7C,MAAM,SAAS,qBAAqB,OAAO,IACvC,CAAC,qBAAqB,OAAO,GAAG,oBAAoB,OAAO,CAAC,IAC5D,CAAC,MAAM,IAAI;CAOf,MAAM,SAAS,8dANF,KAAK,UAAU;EAC1B,cAAc;EACd,WAAW;EACX,gBAAgB;EAChB,GAAG;CACL,CACgf,EAAE;CAElf,OACE,oBAAC,UAAD;EAAQ,0BAAA;EAAyB,yBAAyB,EAAE,QAAQ,OAAO;EAAU;CAAQ,CAAA;AAEjG"}

package/es/styles/theme/themeCss.d.mts

@@ -1,4 +1,6 @@
+import { CustomPrimaryColor } from "./customPrimary.mjs";
 //#region src/styles/theme/themeCss.d.ts
+export declare const getCustomPrimaryCss: (color: CustomPrimaryColor) => string;
 export declare const getThemeCss: () => string;
 export declare const getGlobalCss: () => string;
 //#endregion

package/es/styles/theme/themeCss.mjs

@@ -1,6 +1,6 @@
+import { neutralColors, primaryColors } from "../customTheme.mjs";
 import { createLobeTokenGroups } from "./createLobeToken.mjs";
 import { toCssVarName, toCssVariables } from "../css.mjs";
-import { neutralColors, primaryColors } from "../customTheme.mjs";
 //#region src/styles/theme/themeCss.ts
 const v = (key) => `var(${toCssVarName(key)})`;
 const ring = {
@@ -34,6 +34,13 @@ const colorRules = (appearance) => [...Object.keys(primaryColors).map((primaryCo
 	appearance,
 	neutralColor
 }).neutral)))];
+const getCustomPrimaryCss = (color) => {
+	const hex = color.toLowerCase();
+	return ["light", "dark"].map((appearance) => rule(`[data-primary-color='${hex}']${appearanceSelector(appearance)}`, toCssVariables(createLobeTokenGroups({
+		appearance,
+		primaryColor: hex
+	}).primary))).join("\n\n");
+};
 const essentialCss = `@layer lobe-ui {
   .lobe-brand-loading path {
     fill: currentcolor;
@@ -313,6 +320,6 @@ const getThemeCss = () => cached ??= [
 ].join("\n\n");
 const getGlobalCss = () => `${layerOrder}\n\n${globalCss}`;
 //#endregion
-export { getGlobalCss, getThemeCss };
+export { getCustomPrimaryCss, getGlobalCss, getThemeCss };
 
 //# sourceMappingURL=themeCss.mjs.map

package/es/styles/theme/themeCss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"themeCss.mjs","names":[],"sources":["../../../src/styles/theme/themeCss.ts"],"sourcesContent":["import { toCssVariables, toCssVarName } from '../css';\nimport { neutralColors, primaryColors } from '../customTheme';\nimport { createLobeTokenGroups } from './createLobeToken';\nimport type { LobeAppearance } from './scope';\n\nconst v = (key: string) => `var(${toCssVarName(key)})`;\n\nconst ring: Record<LobeAppearance, string> = {\n  dark: '0 0 0 1px rgb(255 255 255 / 18%)',\n  light: '0 0 0 1px rgb(0 0 0 / 5%)',\n};\n\nconst rule = (selector: string, declarations: Record<string, number | string>) =>\n  `${selector} {\\n${Object.entries(declarations)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n')}\\n}`;\n\nconst appearanceRule = (selector: string, appearance: LobeAppearance) => {\n  const { neutral, palette, primary, static: base } = createLobeTokenGroups({ appearance });\n  const token =\n    appearance === 'light'\n      ? { ...base, ...palette, ...primary, ...neutral }\n      : { ...palette, ...primary, ...neutral };\n\n  return rule(selector, {\n    ...toCssVariables(token),\n    '--lobe-ring': ring[appearance],\n    'color-scheme': appearance,\n  });\n};\n\nconst appearanceSelector = (appearance: LobeAppearance) =>\n  appearance === 'dark' ? \"[data-theme='dark']\" : \":not([data-theme='dark'])\";\n\nconst colorRules = (appearance: LobeAppearance) => [\n  ...(Object.keys(primaryColors) as (keyof typeof primaryColors)[]).map((primaryColor) =>\n    rule(\n      `[data-primary-color='${primaryColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, primaryColor }).primary),\n    ),\n  ),\n  ...(Object.keys(neutralColors) as (keyof typeof neutralColors)[]).map((neutralColor) =>\n    rule(\n      `[data-neutral-color='${neutralColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, neutralColor }).neutral),\n    ),\n  ),\n];\n\nconst essentialCss = `@layer lobe-ui {\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n}\n\n@layer lobe-popup {\n  .lobe-context-trigger[data-popup-open],\n  .lobe-dropdown-menu-trigger[data-popup-open] {\n    background: ${v('colorFillTertiary')};\n  }\n}\n\n@layer lobe-base {\n  :where(body, body [data-theme]) {\n    color: ${v('colorText')};\n    font-family: ${v('fontFamily')};\n    font-size: ${v('fontSize')};\n    line-height: ${v('lineHeight')};\n  }\n\n  :where(body) :where(a) {\n    cursor: pointer;\n\n    color: ${v('colorLink')};\n    text-decoration: none;\n\n    background-color: transparent;\n    outline: none;\n\n    transition: color ${v('motionDurationSlow')};\n  }\n\n  :where(body) :where(a):hover {\n    color: ${v('colorLinkHover')};\n  }\n\n  :where(body) :where(a):active {\n    color: ${v('colorLinkActive')};\n  }\n\n  :where(body) :where(a):focus-visible {\n    outline: ${v('lineWidthFocus')} solid ${v('colorPrimaryBorder')};\n    outline-offset: 1px;\n  }\n\n  :where(body) :where(a)[disabled] {\n    cursor: not-allowed;\n    color: ${v('colorTextDisabled')};\n  }\n\n  :where(.lobe-flex) {\n    --lobe-flex: 0 1 auto;\n    --lobe-flex-direction: column;\n    --lobe-flex-wrap: nowrap;\n    --lobe-flex-justify: flex-start;\n    --lobe-flex-align: stretch;\n    --lobe-flex-width: auto;\n    --lobe-flex-height: auto;\n    --lobe-flex-padding: 0;\n    --lobe-flex-padding-inline: var(--lobe-flex-padding);\n    --lobe-flex-padding-block: var(--lobe-flex-padding);\n    --lobe-flex-gap: 0;\n\n    display: flex;\n    flex: var(--lobe-flex);\n    flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n    gap: var(--lobe-flex-gap);\n    align-items: var(--lobe-flex-align);\n    justify-content: var(--lobe-flex-justify);\n\n    width: var(--lobe-flex-width);\n    height: var(--lobe-flex-height);\n    padding: var(--lobe-flex-padding);\n    padding-block: var(--lobe-flex-padding-block);\n    padding-inline: var(--lobe-flex-padding-inline);\n  }\n\n  .lobe-flex-hidden {\n    display: none;\n  }\n}\n\n@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 0.05;\n  }\n\n  100% {\n    fill-opacity: 1;\n  }\n}`;\n\nconst globalCss = `@layer lobe-base {\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    font-synthesis: style;\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    font-optical-sizing: auto;\n    font-kerning: normal;\n    font-variant-ligatures: common-ligatures contextual;\n    font-variant-numeric: tabular-nums;\n    font-size-adjust: from-font;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-wrap: pretty;\n    text-size-adjust: 100%;\n    text-rendering: optimizelegibility;\n    overflow-wrap: anywhere;\n    vertical-align: baseline;\n\n    background-color: ${v('colorBgLayout')};\n\n    font-synthesis: style;\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  html,\n  body {\n    width: 100%;\n    height: 100%;\n  }\n\n  [tabindex='-1']:focus {\n    outline: none;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-block: 0 0.5em;\n    font-weight: 500;\n  }\n\n  p,\n  ol,\n  ul,\n  dl,\n  pre {\n    margin-block: 0 1em;\n  }\n\n  ol ol,\n  ul ul,\n  ol ul,\n  ul ol {\n    margin-block-end: 0;\n  }\n\n  dd {\n    margin-block-end: 0.5em;\n    margin-inline-start: 0;\n  }\n\n  blockquote,\n  figure {\n    margin-block: 0 1em;\n    margin-inline: 0;\n  }\n\n  img {\n    border-style: none;\n    vertical-align: middle;\n  }\n\n  table {\n    border-collapse: collapse;\n  }\n\n  input,\n  button,\n  select,\n  optgroup,\n  textarea {\n    margin: 0;\n\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  textarea {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: ${v('fontFamilyCode')} !important;\n    font-feature-settings:\n      'liga' 0,\n      'calt' 0;\n    font-variant-ligatures: none;\n\n    span {\n      font-family: ${v('fontFamilyCode')} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${v('yellow9')};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${v('colorFill')} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n}`;\n\nconst layerOrder = '@layer lobe-base, lobe-popup, lobe-ui;';\n\nlet cached: string | undefined;\n\nexport const getThemeCss = () =>\n  (cached ??= [\n    layerOrder,\n    appearanceRule(\":root, [data-theme='light']\", 'light'),\n    appearanceRule(\"[data-theme='dark']\", 'dark'),\n    ...colorRules('light'),\n    ...colorRules('dark'),\n    essentialCss,\n  ].join('\\n\\n'));\n\nexport const getGlobalCss = () => `${layerOrder}\\n\\n${globalCss}`;\n"],"mappings":";;;;AAKA,MAAM,KAAK,QAAgB,OAAO,aAAa,GAAG,EAAE;AAEpD,MAAM,OAAuC;CAC3C,MAAM;CACN,OAAO;AACT;AAEA,MAAM,QAAQ,UAAkB,iBAC9B,GAAG,SAAS,MAAM,OAAO,QAAQ,YAAY,CAAC,CAC3C,KAAK,CAAC,MAAM,WAAW,KAAK,KAAK,IAAI,MAAM,EAAE,CAAC,CAC9C,KAAK,IAAI,EAAE;AAEhB,MAAM,kBAAkB,UAAkB,eAA+B;CACvE,MAAM,EAAE,SAAS,SAAS,SAAS,QAAQ,SAAS,sBAAsB,EAAE,WAAW,CAAC;CACxF,MAAM,QACJ,eAAe,UACX;EAAE,GAAG;EAAM,GAAG;EAAS,GAAG;EAAS,GAAG;CAAQ,IAC9C;EAAE,GAAG;EAAS,GAAG;EAAS,GAAG;CAAQ;CAE3C,OAAO,KAAK,UAAU;EACpB,GAAG,eAAe,KAAK;EACvB,eAAe,KAAK;EACpB,gBAAgB;CAClB,CAAC;AACH;AAEA,MAAM,sBAAsB,eAC1B,eAAe,SAAS,wBAAwB;AAElD,MAAM,cAAc,eAA+B,CACjD,GAAI,OAAO,KAAK,aAAa,CAAC,CAAoC,KAAK,iBACrE,KACE,wBAAwB,aAAa,IAAI,mBAAmB,UAAU,KACtE,eAAe,sBAAsB;CAAE;CAAY;AAAa,CAAC,CAAC,CAAC,OAAO,CAC5E,CACF,GACA,GAAI,OAAO,KAAK,aAAa,CAAC,CAAoC,KAAK,iBACrE,KACE,wBAAwB,aAAa,IAAI,mBAAmB,UAAU,KACtE,eAAe,sBAAsB;CAAE;CAAY;AAAa,CAAC,CAAC,CAAC,OAAO,CAC5E,CACF,CACF;AAEA,MAAM,eAAe;;;;;;;;;;;;;;;;;;kBAkBH,EAAE,mBAAmB,EAAE;;;;;;aAM5B,EAAE,WAAW,EAAE;mBACT,EAAE,YAAY,EAAE;iBAClB,EAAE,UAAU,EAAE;mBACZ,EAAE,YAAY,EAAE;;;;;;aAMtB,EAAE,WAAW,EAAE;;;;;;wBAMJ,EAAE,oBAAoB,EAAE;;;;aAInC,EAAE,gBAAgB,EAAE;;;;aAIpB,EAAE,iBAAiB,EAAE;;;;eAInB,EAAE,gBAAgB,EAAE,SAAS,EAAE,oBAAoB,EAAE;;;;;;aAMvD,EAAE,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDpC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAmCM,EAAE,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgGxB,EAAE,gBAAgB,EAAE;;;;;;;qBAOlB,EAAE,gBAAgB,EAAE;;;;;;kBAMvB,EAAE,SAAS,EAAE;;;;;;uBAMR,EAAE,WAAW,EAAE;;;;;;AAOtC,MAAM,aAAa;AAEnB,IAAI;AAEJ,MAAa,oBACV,WAAW;CACV;CACA,eAAe,+BAA+B,OAAO;CACrD,eAAe,uBAAuB,MAAM;CAC5C,GAAG,WAAW,OAAO;CACrB,GAAG,WAAW,MAAM;CACpB;AACF,CAAC,CAAC,KAAK,MAAM;AAEf,MAAa,qBAAqB,GAAG,WAAW,MAAM"}
+{"version":3,"file":"themeCss.mjs","names":[],"sources":["../../../src/styles/theme/themeCss.ts"],"sourcesContent":["import { toCssVariables, toCssVarName } from '../css';\nimport { neutralColors, primaryColors } from '../customTheme';\nimport { createLobeTokenGroups } from './createLobeToken';\nimport type { CustomPrimaryColor } from './customPrimary';\nimport type { LobeAppearance } from './scope';\n\nconst v = (key: string) => `var(${toCssVarName(key)})`;\n\nconst ring: Record<LobeAppearance, string> = {\n  dark: '0 0 0 1px rgb(255 255 255 / 18%)',\n  light: '0 0 0 1px rgb(0 0 0 / 5%)',\n};\n\nconst rule = (selector: string, declarations: Record<string, number | string>) =>\n  `${selector} {\\n${Object.entries(declarations)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n')}\\n}`;\n\nconst appearanceRule = (selector: string, appearance: LobeAppearance) => {\n  const { neutral, palette, primary, static: base } = createLobeTokenGroups({ appearance });\n  const token =\n    appearance === 'light'\n      ? { ...base, ...palette, ...primary, ...neutral }\n      : { ...palette, ...primary, ...neutral };\n\n  return rule(selector, {\n    ...toCssVariables(token),\n    '--lobe-ring': ring[appearance],\n    'color-scheme': appearance,\n  });\n};\n\nconst appearanceSelector = (appearance: LobeAppearance) =>\n  appearance === 'dark' ? \"[data-theme='dark']\" : \":not([data-theme='dark'])\";\n\nconst colorRules = (appearance: LobeAppearance) => [\n  ...(Object.keys(primaryColors) as (keyof typeof primaryColors)[]).map((primaryColor) =>\n    rule(\n      `[data-primary-color='${primaryColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, primaryColor }).primary),\n    ),\n  ),\n  ...(Object.keys(neutralColors) as (keyof typeof neutralColors)[]).map((neutralColor) =>\n    rule(\n      `[data-neutral-color='${neutralColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, neutralColor }).neutral),\n    ),\n  ),\n];\n\nexport const getCustomPrimaryCss = (color: CustomPrimaryColor) => {\n  const hex = color.toLowerCase();\n  return (['light', 'dark'] as const)\n    .map((appearance) =>\n      rule(\n        `[data-primary-color='${hex}']${appearanceSelector(appearance)}`,\n        toCssVariables(\n          createLobeTokenGroups({ appearance, primaryColor: hex as CustomPrimaryColor }).primary,\n        ),\n      ),\n    )\n    .join('\\n\\n');\n};\n\nconst essentialCss = `@layer lobe-ui {\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n}\n\n@layer lobe-popup {\n  .lobe-context-trigger[data-popup-open],\n  .lobe-dropdown-menu-trigger[data-popup-open] {\n    background: ${v('colorFillTertiary')};\n  }\n}\n\n@layer lobe-base {\n  :where(body, body [data-theme]) {\n    color: ${v('colorText')};\n    font-family: ${v('fontFamily')};\n    font-size: ${v('fontSize')};\n    line-height: ${v('lineHeight')};\n  }\n\n  :where(body) :where(a) {\n    cursor: pointer;\n\n    color: ${v('colorLink')};\n    text-decoration: none;\n\n    background-color: transparent;\n    outline: none;\n\n    transition: color ${v('motionDurationSlow')};\n  }\n\n  :where(body) :where(a):hover {\n    color: ${v('colorLinkHover')};\n  }\n\n  :where(body) :where(a):active {\n    color: ${v('colorLinkActive')};\n  }\n\n  :where(body) :where(a):focus-visible {\n    outline: ${v('lineWidthFocus')} solid ${v('colorPrimaryBorder')};\n    outline-offset: 1px;\n  }\n\n  :where(body) :where(a)[disabled] {\n    cursor: not-allowed;\n    color: ${v('colorTextDisabled')};\n  }\n\n  :where(.lobe-flex) {\n    --lobe-flex: 0 1 auto;\n    --lobe-flex-direction: column;\n    --lobe-flex-wrap: nowrap;\n    --lobe-flex-justify: flex-start;\n    --lobe-flex-align: stretch;\n    --lobe-flex-width: auto;\n    --lobe-flex-height: auto;\n    --lobe-flex-padding: 0;\n    --lobe-flex-padding-inline: var(--lobe-flex-padding);\n    --lobe-flex-padding-block: var(--lobe-flex-padding);\n    --lobe-flex-gap: 0;\n\n    display: flex;\n    flex: var(--lobe-flex);\n    flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n    gap: var(--lobe-flex-gap);\n    align-items: var(--lobe-flex-align);\n    justify-content: var(--lobe-flex-justify);\n\n    width: var(--lobe-flex-width);\n    height: var(--lobe-flex-height);\n    padding: var(--lobe-flex-padding);\n    padding-block: var(--lobe-flex-padding-block);\n    padding-inline: var(--lobe-flex-padding-inline);\n  }\n\n  .lobe-flex-hidden {\n    display: none;\n  }\n}\n\n@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 0.05;\n  }\n\n  100% {\n    fill-opacity: 1;\n  }\n}`;\n\nconst globalCss = `@layer lobe-base {\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    font-synthesis: style;\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    font-optical-sizing: auto;\n    font-kerning: normal;\n    font-variant-ligatures: common-ligatures contextual;\n    font-variant-numeric: tabular-nums;\n    font-size-adjust: from-font;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-wrap: pretty;\n    text-size-adjust: 100%;\n    text-rendering: optimizelegibility;\n    overflow-wrap: anywhere;\n    vertical-align: baseline;\n\n    background-color: ${v('colorBgLayout')};\n\n    font-synthesis: style;\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  html,\n  body {\n    width: 100%;\n    height: 100%;\n  }\n\n  [tabindex='-1']:focus {\n    outline: none;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-block: 0 0.5em;\n    font-weight: 500;\n  }\n\n  p,\n  ol,\n  ul,\n  dl,\n  pre {\n    margin-block: 0 1em;\n  }\n\n  ol ol,\n  ul ul,\n  ol ul,\n  ul ol {\n    margin-block-end: 0;\n  }\n\n  dd {\n    margin-block-end: 0.5em;\n    margin-inline-start: 0;\n  }\n\n  blockquote,\n  figure {\n    margin-block: 0 1em;\n    margin-inline: 0;\n  }\n\n  img {\n    border-style: none;\n    vertical-align: middle;\n  }\n\n  table {\n    border-collapse: collapse;\n  }\n\n  input,\n  button,\n  select,\n  optgroup,\n  textarea {\n    margin: 0;\n\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  textarea {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: ${v('fontFamilyCode')} !important;\n    font-feature-settings:\n      'liga' 0,\n      'calt' 0;\n    font-variant-ligatures: none;\n\n    span {\n      font-family: ${v('fontFamilyCode')} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${v('yellow9')};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${v('colorFill')} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n}`;\n\nconst layerOrder = '@layer lobe-base, lobe-popup, lobe-ui;';\n\nlet cached: string | undefined;\n\nexport const getThemeCss = () =>\n  (cached ??= [\n    layerOrder,\n    appearanceRule(\":root, [data-theme='light']\", 'light'),\n    appearanceRule(\"[data-theme='dark']\", 'dark'),\n    ...colorRules('light'),\n    ...colorRules('dark'),\n    essentialCss,\n  ].join('\\n\\n'));\n\nexport const getGlobalCss = () => `${layerOrder}\\n\\n${globalCss}`;\n"],"mappings":";;;;AAMA,MAAM,KAAK,QAAgB,OAAO,aAAa,GAAG,EAAE;AAEpD,MAAM,OAAuC;CAC3C,MAAM;CACN,OAAO;AACT;AAEA,MAAM,QAAQ,UAAkB,iBAC9B,GAAG,SAAS,MAAM,OAAO,QAAQ,YAAY,CAAC,CAC3C,KAAK,CAAC,MAAM,WAAW,KAAK,KAAK,IAAI,MAAM,EAAE,CAAC,CAC9C,KAAK,IAAI,EAAE;AAEhB,MAAM,kBAAkB,UAAkB,eAA+B;CACvE,MAAM,EAAE,SAAS,SAAS,SAAS,QAAQ,SAAS,sBAAsB,EAAE,WAAW,CAAC;CACxF,MAAM,QACJ,eAAe,UACX;EAAE,GAAG;EAAM,GAAG;EAAS,GAAG;EAAS,GAAG;CAAQ,IAC9C;EAAE,GAAG;EAAS,GAAG;EAAS,GAAG;CAAQ;CAE3C,OAAO,KAAK,UAAU;EACpB,GAAG,eAAe,KAAK;EACvB,eAAe,KAAK;EACpB,gBAAgB;CAClB,CAAC;AACH;AAEA,MAAM,sBAAsB,eAC1B,eAAe,SAAS,wBAAwB;AAElD,MAAM,cAAc,eAA+B,CACjD,GAAI,OAAO,KAAK,aAAa,CAAC,CAAoC,KAAK,iBACrE,KACE,wBAAwB,aAAa,IAAI,mBAAmB,UAAU,KACtE,eAAe,sBAAsB;CAAE;CAAY;AAAa,CAAC,CAAC,CAAC,OAAO,CAC5E,CACF,GACA,GAAI,OAAO,KAAK,aAAa,CAAC,CAAoC,KAAK,iBACrE,KACE,wBAAwB,aAAa,IAAI,mBAAmB,UAAU,KACtE,eAAe,sBAAsB;CAAE;CAAY;AAAa,CAAC,CAAC,CAAC,OAAO,CAC5E,CACF,CACF;AAEA,MAAa,uBAAuB,UAA8B;CAChE,MAAM,MAAM,MAAM,YAAY;CAC9B,OAAQ,CAAC,SAAS,MAAM,CAAC,CACtB,KAAK,eACJ,KACE,wBAAwB,IAAI,IAAI,mBAAmB,UAAU,KAC7D,eACE,sBAAsB;EAAE;EAAY,cAAc;CAA0B,CAAC,CAAC,CAAC,OACjF,CACF,CACF,CAAC,CACA,KAAK,MAAM;AAChB;AAEA,MAAM,eAAe;;;;;;;;;;;;;;;;;;kBAkBH,EAAE,mBAAmB,EAAE;;;;;;aAM5B,EAAE,WAAW,EAAE;mBACT,EAAE,YAAY,EAAE;iBAClB,EAAE,UAAU,EAAE;mBACZ,EAAE,YAAY,EAAE;;;;;;aAMtB,EAAE,WAAW,EAAE;;;;;;wBAMJ,EAAE,oBAAoB,EAAE;;;;aAInC,EAAE,gBAAgB,EAAE;;;;aAIpB,EAAE,iBAAiB,EAAE;;;;eAInB,EAAE,gBAAgB,EAAE,SAAS,EAAE,oBAAoB,EAAE;;;;;;aAMvD,EAAE,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDpC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAmCM,EAAE,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgGxB,EAAE,gBAAgB,EAAE;;;;;;;qBAOlB,EAAE,gBAAgB,EAAE;;;;;;kBAMvB,EAAE,SAAS,EAAE;;;;;;uBAMR,EAAE,WAAW,EAAE;;;;;;AAOtC,MAAM,aAAa;AAEnB,IAAI;AAEJ,MAAa,oBACV,WAAW;CACV;CACA,eAAe,+BAA+B,OAAO;CACrD,eAAe,uBAAuB,MAAM;CAC5C,GAAG,WAAW,OAAO;CACrB,GAAG,WAAW,MAAM;CACpB;AACF,CAAC,CAAC,KAAK,MAAM;AAEf,MAAa,qBAAqB,GAAG,WAAW,MAAM"}

package/es/styles/theme/token/primary.mjs

@@ -1,12 +1,16 @@
 import primary from "../../../color/colors/primary.mjs";
 import { colorScales } from "../../../color/colors/index.mjs";
 import { generateColorPalette } from "../generateColorPalette.mjs";
+import { generatePrimaryScale, isCustomPrimaryColor } from "../customPrimary.mjs";
 //#region src/styles/theme/token/primary.ts
+const resolveScale = (primaryColor) => {
+	if (isCustomPrimaryColor(primaryColor)) return generatePrimaryScale(primaryColor);
+	return primaryColor && colorScales[primaryColor] || primary;
+};
 const createPrimaryToken = (appearance, primaryColor) => {
-	const scale = primaryColor && colorScales[primaryColor] || primary;
 	const token = generateColorPalette({
 		appearance,
-		scale,
+		scale: resolveScale(primaryColor),
 		type: "Primary"
 	});
 	return {

package/es/styles/theme/token/primary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primary.mjs","names":[],"sources":["../../../../src/styles/theme/token/primary.ts"],"sourcesContent":["import { colorScales, primary } from '@/color/colors';\n\nimport type { PrimaryColors } from '../../customTheme';\nimport { generateColorPalette } from '../generateColorPalette';\n\nexport const createPrimaryToken = (appearance: 'light' | 'dark', primaryColor?: PrimaryColors) => {\n  const scale = (primaryColor && colorScales[primaryColor]) || primary;\n  const token = generateColorPalette({ appearance, scale, type: 'Primary' });\n\n  return {\n    ...token,\n    controlItemBgActive: token.colorPrimaryBg,\n    controlItemBgActiveHover: token.colorPrimaryBgHover,\n  };\n};\n"],"mappings":";;;;AAKA,MAAa,sBAAsB,YAA8B,iBAAiC;CAChG,MAAM,QAAS,gBAAgB,YAAY,iBAAkB;CAC7D,MAAM,QAAQ,qBAAqB;EAAE;EAAY;EAAO,MAAM;CAAU,CAAC;CAEzE,OAAO;EACL,GAAG;EACH,qBAAqB,MAAM;EAC3B,0BAA0B,MAAM;CAClC;AACF"}
+{"version":3,"file":"primary.mjs","names":[],"sources":["../../../../src/styles/theme/token/primary.ts"],"sourcesContent":["import { colorScales, primary } from '@/color/colors';\n\nimport {\n  generatePrimaryScale,\n  isCustomPrimaryColor,\n  type LobePrimaryColor,\n} from '../customPrimary';\nimport { generateColorPalette } from '../generateColorPalette';\n\nconst resolveScale = (primaryColor?: LobePrimaryColor) => {\n  if (isCustomPrimaryColor(primaryColor)) return generatePrimaryScale(primaryColor);\n  return (primaryColor && colorScales[primaryColor]) || primary;\n};\n\nexport const createPrimaryToken = (\n  appearance: 'light' | 'dark',\n  primaryColor?: LobePrimaryColor,\n) => {\n  const token = generateColorPalette({\n    appearance,\n    scale: resolveScale(primaryColor),\n    type: 'Primary',\n  });\n\n  return {\n    ...token,\n    controlItemBgActive: token.colorPrimaryBg,\n    controlItemBgActiveHover: token.colorPrimaryBgHover,\n  };\n};\n"],"mappings":";;;;;AASA,MAAM,gBAAgB,iBAAoC;CACxD,IAAI,qBAAqB,YAAY,GAAG,OAAO,qBAAqB,YAAY;CAChF,OAAQ,gBAAgB,YAAY,iBAAkB;AACxD;AAEA,MAAa,sBACX,YACA,iBACG;CACH,MAAM,QAAQ,qBAAqB;EACjC;EACA,OAAO,aAAa,YAAY;EAChC,MAAM;CACR,CAAC;CAED,OAAO;EACL,GAAG;EACH,qBAAqB,MAAM;EAC3B,0BAA0B,MAAM;CAClC;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "6.0.0-beta.6",
+  "version": "6.0.0-beta.7",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",