@lobehub/ui 5.15.7 → 5.15.9

package/es/base-ui/Switch/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, use, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n  SwitchChangeEventHandler,\n  SwitchContextType,\n  SwitchIconPosition,\n  SwitchIconProps,\n  SwitchRootProps,\n  SwitchThumbProps,\n} from './type';\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n  const context = use(SwitchContext);\n  if (!context) {\n    throw new Error('useSwitchContext must be used within a SwitchRoot');\n  }\n  return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n  onCheckedChange?: SwitchChangeEventHandler;\n  onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n  checked,\n  className,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  size = 'default',\n  children,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  name,\n  ...rest\n}: SwitchRootInternalProps) => {\n  const Motion = useMotionComponent();\n  const [isPressed, setIsPressed] = useState(false);\n  const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n    null,\n  );\n\n  const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n    defaultValue: defaultChecked,\n    onChange: (value: boolean) => {\n      if (lastEventRef.current) {\n        onCheckedChange?.(value, lastEventRef.current);\n      }\n    },\n    value: checked,\n  });\n\n  const baseClassName = rootVariants({ size });\n\n  const contextValue = useMemo(\n    () => ({\n      isChecked: Boolean(isChecked),\n      isPressed,\n      setIsChecked: (value: boolean) => setIsChecked(value),\n      setIsPressed,\n    }),\n    [isChecked, isPressed, setIsChecked],\n  );\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    lastEventRef.current = event;\n    onClick?.(!isChecked, event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      lastEventRef.current = event;\n    }\n    (rest as any).onKeyDown?.(event);\n  };\n\n  return (\n    <SwitchContext value={contextValue}>\n      <Switch.Root\n        checked={isChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={id}\n        inputRef={inputRef}\n        name={name}\n        readOnly={readOnly}\n        required={required}\n        render={\n          <Motion.button\n            {...rest}\n            className={cx(baseClassName, className)}\n            initial={false}\n            whileTap=\"tap\"\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onTap={() => setIsPressed(false)}\n            onTapCancel={() => setIsPressed(false)}\n            onTapStart={() => setIsPressed(true)}\n          />\n        }\n        onCheckedChange={setIsChecked}\n      >\n        {children}\n      </Switch.Root>\n    </SwitchContext>\n  );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n  className,\n  pressedAnimation,\n  size = 'default',\n  transition = { damping: 25, stiffness: 300, type: 'spring' },\n  children,\n  ...rest\n}: SwitchThumbProps) => {\n  const Motion = useMotionComponent();\n  const { isPressed } = useSwitchContext();\n  const baseClassName = thumbVariants({ size });\n\n  const defaultPressedAnimation = {\n    width: size === 'small' ? 16 : 22,\n  };\n\n  return (\n    <Switch.Thumb\n      render={\n        <Motion.span\n          layout\n          animate={isPressed ? pressedAnimation || defaultPressedAnimation : undefined}\n          className={cx(baseClassName, className)}\n          transition={transition}\n          {...rest}\n        >\n          {children}\n        </Motion.span>\n      }\n    />\n  );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst getIconPositionClass = (position: SwitchIconPosition, size: 'default' | 'small') => {\n  if (position === 'thumb') return styles.iconThumb;\n  if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n  return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const SwitchIcon = ({\n  children,\n  className,\n  position,\n  transition = { bounce: 0, type: 'spring' },\n  ...rest\n}: SwitchIconProps & { children?: React.ReactNode; size?: 'default' | 'small' }) => {\n  const Motion = useMotionComponent();\n  const { isChecked } = useSwitchContext();\n  const size = (rest as any).size || 'default';\n\n  const isAnimated = useMemo(() => {\n    if (position === 'right') return !isChecked;\n    if (position === 'left') return isChecked;\n    if (position === 'thumb') return true;\n    return false;\n  }, [position, isChecked]);\n\n  const positionClass = getIconPositionClass(position, size);\n\n  return (\n    <Motion.span\n      animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n      className={cx(styles.icon, positionClass, className)}\n      transition={transition}\n      {...rest}\n    >\n      {children}\n    </Motion.span>\n  );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nexport { styles as switchStyles } from './style';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport { useReducedMotion } from 'motion/react';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, use, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n  SwitchChangeEventHandler,\n  SwitchContextType,\n  SwitchIconPosition,\n  SwitchIconProps,\n  SwitchRootProps,\n  SwitchThumbProps,\n} from './type';\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n  const context = use(SwitchContext);\n  if (!context) {\n    throw new Error('useSwitchContext must be used within a SwitchRoot');\n  }\n  return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n  onCheckedChange?: SwitchChangeEventHandler;\n  onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n  checked,\n  className,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  size = 'default',\n  children,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  name,\n  ...rest\n}: SwitchRootInternalProps) => {\n  const Motion = useMotionComponent();\n  const [isPressed, setIsPressed] = useState(false);\n  const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n    null,\n  );\n\n  const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n    defaultValue: defaultChecked,\n    onChange: (value: boolean) => {\n      if (lastEventRef.current) {\n        onCheckedChange?.(value, lastEventRef.current);\n      }\n    },\n    value: checked,\n  });\n\n  const baseClassName = rootVariants({ size });\n\n  const contextValue = useMemo(\n    () => ({\n      isChecked: Boolean(isChecked),\n      isPressed,\n      setIsChecked: (value: boolean) => setIsChecked(value),\n      setIsPressed,\n    }),\n    [isChecked, isPressed, setIsChecked],\n  );\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    lastEventRef.current = event;\n    onClick?.(!isChecked, event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      lastEventRef.current = event;\n    }\n    (rest as any).onKeyDown?.(event);\n  };\n\n  return (\n    <SwitchContext value={contextValue}>\n      <Switch.Root\n        checked={isChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={id}\n        inputRef={inputRef}\n        name={name}\n        readOnly={readOnly}\n        required={required}\n        render={\n          <Motion.button\n            {...rest}\n            className={cx(baseClassName, className)}\n            initial={false}\n            whileTap=\"tap\"\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onTap={() => setIsPressed(false)}\n            onTapCancel={() => setIsPressed(false)}\n            onTapStart={() => setIsPressed(true)}\n          />\n        }\n        onCheckedChange={setIsChecked}\n      >\n        {children}\n      </Switch.Root>\n    </SwitchContext>\n  );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n  className,\n  pressedAnimation,\n  size = 'default',\n  transition = { damping: 24, stiffness: 360, type: 'spring' },\n  children,\n  ...rest\n}: SwitchThumbProps) => {\n  const Motion = useMotionComponent();\n  const { isPressed } = useSwitchContext();\n  const shouldReduceMotion = useReducedMotion();\n  const baseClassName = thumbVariants({ size });\n\n  const defaultPressedAnimation = {\n    width: size === 'small' ? 16 : 22,\n  };\n\n  const effectiveAnimate =\n    !shouldReduceMotion && isPressed ? pressedAnimation || defaultPressedAnimation : undefined;\n  const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;\n\n  return (\n    <Switch.Thumb\n      render={\n        <Motion.span\n          layout\n          animate={effectiveAnimate}\n          className={cx(baseClassName, className)}\n          transition={effectiveTransition}\n          {...rest}\n        >\n          {children}\n        </Motion.span>\n      }\n    />\n  );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst getIconPositionClass = (position: SwitchIconPosition, size: 'default' | 'small') => {\n  if (position === 'thumb') return styles.iconThumb;\n  if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n  return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const SwitchIcon = ({\n  children,\n  className,\n  position,\n  size = 'default',\n  transition = { bounce: 0, type: 'spring' },\n  ...rest\n}: SwitchIconProps) => {\n  const Motion = useMotionComponent();\n  const { isChecked } = useSwitchContext();\n  const shouldReduceMotion = useReducedMotion();\n\n  const isAnimated = useMemo(() => {\n    if (position === 'right') return !isChecked;\n    if (position === 'left') return isChecked;\n    if (position === 'thumb') return true;\n    return false;\n  }, [position, isChecked]);\n\n  const positionClass = getIconPositionClass(position, size);\n  const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;\n\n  return (\n    <Motion.span\n      animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n      className={cx(styles.icon, positionClass, className)}\n      transition={effectiveTransition}\n      {...rest}\n    >\n      {children}\n    </Motion.span>\n  );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nexport { styles as switchStyles } from './style';\n"],"mappings":"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"}

package/es/base-ui/Switch/style.mjs

@@ -15,13 +15,13 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     color: ${cssVar.colorTextLightSolid};
   `,
 	iconLeft: css`
-    inset-inline-start: 5px;
+    inset-inline-start: 4px;
   `,
 	iconLeftSmall: css`
     inset-inline-start: 4px;
   `,
 	iconRight: css`
-    inset-inline-end: 5px;
+    inset-inline-end: 4px;
   `,
 	iconRightSmall: css`
     inset-inline-end: 4px;
@@ -44,6 +44,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
 
     animation: lobe-switch-loading 1s linear infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation-duration: 0s;
+    }
   `,
 	root: css`
     cursor: pointer;
@@ -61,10 +65,13 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     border: 0;
     border-radius: 100px;
 
-    background: ${cssVar.colorTextQuaternary};
+    background: ${cssVar.colorFillSecondary};
     outline: none;
+    box-shadow: inset 0 1.5px 2px rgb(0 0 0 / 8%);
 
-    transition: background 150ms ${cssVar.motionEaseOut};
+    transition:
+      background 200ms ${cssVar.motionEaseOut},
+      box-shadow 200ms ${cssVar.motionEaseOut};
 
     &:focus-visible {
       outline: 2px solid ${cssVar.colorPrimaryBorder};
@@ -72,12 +79,13 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
 
     &:hover:not([data-disabled]) {
-      background: ${cssVar.colorTextTertiary};
+      background: ${cssVar.colorFill};
     }
 
     &[data-checked] {
       justify-content: flex-end;
       background: ${cssVar.colorPrimary};
+      box-shadow: inset 0 1.5px 3px rgb(0 0 0 / 18%);
 
       &:hover:not([data-disabled]) {
         background: ${cssVar.colorPrimaryHover};
@@ -86,12 +94,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     &[data-disabled] {
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: 0.45;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
     }
   `,
 	rootDefault: css`
-    width: 44px;
-    min-width: 44px;
+    width: 36px;
+    min-width: 36px;
     height: 22px;
   `,
 	rootSmall: css`
@@ -109,12 +121,26 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     background: ${cssVar.colorBgContainer};
     box-shadow:
-      0 2px 4px 0 rgb(0 35 11 / 20%),
-      0 1px 2px 0 rgb(0 0 0 / 8%);
+      0 0 0 0.5px rgb(0 0 0 / 4%),
+      0 1px 1px rgb(0 0 0 / 6%),
+      0 3px 8px rgb(0 30 80 / 16%);
+
+    transition: box-shadow 200ms ${cssVar.motionEaseOut};
+
+    [role='switch']:hover:not([data-disabled]) > & {
+      box-shadow:
+        0 0 0 0.5px rgb(0 0 0 / 4%),
+        0 1px 1px rgb(0 0 0 / 8%),
+        0 6px 14px rgb(0 30 80 / 24%);
+    }
 
     [data-disabled] > & {
       box-shadow: none;
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
   `,
 	thumbDefault: css`
     width: 18px;

package/es/base-ui/Switch/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Switch/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  icon: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    color: ${cssVar.colorTextLightSolid};\n  `,\n  iconLeft: css`\n    inset-inline-start: 5px;\n  `,\n  iconLeftSmall: css`\n    inset-inline-start: 4px;\n  `,\n  iconRight: css`\n    inset-inline-end: 5px;\n  `,\n  iconRightSmall: css`\n    inset-inline-end: 4px;\n  `,\n  iconThumb: css`\n    position: relative;\n    inset: unset;\n    transform: none;\n    color: ${cssVar.colorPrimary};\n  `,\n  loading: css`\n    @keyframes lobe-switch-loading {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    animation: lobe-switch-loading 1s linear infinite;\n  `,\n  root: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    box-sizing: border-box;\n    padding: 2px;\n    border: 0;\n    border-radius: 100px;\n\n    background: ${cssVar.colorTextQuaternary};\n    outline: none;\n\n    transition: background 150ms ${cssVar.motionEaseOut};\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:hover:not([data-disabled]) {\n      background: ${cssVar.colorTextTertiary};\n    }\n\n    &[data-checked] {\n      justify-content: flex-end;\n      background: ${cssVar.colorPrimary};\n\n      &:hover:not([data-disabled]) {\n        background: ${cssVar.colorPrimaryHover};\n      }\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n  rootDefault: css`\n    width: 44px;\n    min-width: 44px;\n    height: 22px;\n  `,\n  rootSmall: css`\n    width: 28px;\n    min-width: 28px;\n    height: 16px;\n  `,\n  thumb: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow:\n      0 2px 4px 0 rgb(0 35 11 / 20%),\n      0 1px 2px 0 rgb(0 0 0 / 8%);\n\n    [data-disabled] > & {\n      box-shadow: none;\n    }\n  `,\n  thumbDefault: css`\n    width: 18px;\n    height: 18px;\n  `,\n  thumbSmall: css`\n    width: 12px;\n    height: 12px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.rootDefault,\n      small: styles.rootSmall,\n    },\n  },\n});\n\nexport const thumbVariants = cva(styles.thumb, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.thumbDefault,\n      small: styles.thumbSmall,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;aAUE,OAAO,oBAAoB;;CAEtC,UAAU,GAAG;;;CAGb,eAAe,GAAG;;;CAGlB,WAAW,GAAG;;;CAGd,gBAAgB,GAAG;;;CAGnB,WAAW,GAAG;;;;aAIH,OAAO,aAAa;;CAE/B,SAAS,GAAG;;;;;;;;;;;;;CAaZ,MAAM,GAAG;;;;;;;;;;;;;;;;kBAgBO,OAAO,oBAAoB;;;mCAGV,OAAO,cAAc;;;2BAG7B,OAAO,mBAAmB;;;;;oBAKjC,OAAO,kBAAkB;;;;;oBAKzB,OAAO,aAAa;;;sBAGlB,OAAO,kBAAkB;;;;;;;;;CAS7C,aAAa,GAAG;;;;;CAKhB,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;kBAQM,OAAO,iBAAiB;;;;;;;;;CASxC,cAAc,GAAG;;;;CAIjB,YAAY,GAAG;;;;CAIhB,EAAE;AAEH,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,MAAM,WACP;CACD,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;EACf,EACF;CACF,CAAC;AAEF,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,MAAM,WACP;CACD,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;EACf,EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Switch/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  icon: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    color: ${cssVar.colorTextLightSolid};\n  `,\n  iconLeft: css`\n    inset-inline-start: 4px;\n  `,\n  iconLeftSmall: css`\n    inset-inline-start: 4px;\n  `,\n  iconRight: css`\n    inset-inline-end: 4px;\n  `,\n  iconRightSmall: css`\n    inset-inline-end: 4px;\n  `,\n  iconThumb: css`\n    position: relative;\n    inset: unset;\n    transform: none;\n    color: ${cssVar.colorPrimary};\n  `,\n  loading: css`\n    @keyframes lobe-switch-loading {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    animation: lobe-switch-loading 1s linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n      animation-duration: 0s;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    box-sizing: border-box;\n    padding: 2px;\n    border: 0;\n    border-radius: 100px;\n\n    background: ${cssVar.colorFillSecondary};\n    outline: none;\n    box-shadow: inset 0 1.5px 2px rgb(0 0 0 / 8%);\n\n    transition:\n      background 200ms ${cssVar.motionEaseOut},\n      box-shadow 200ms ${cssVar.motionEaseOut};\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:hover:not([data-disabled]) {\n      background: ${cssVar.colorFill};\n    }\n\n    &[data-checked] {\n      justify-content: flex-end;\n      background: ${cssVar.colorPrimary};\n      box-shadow: inset 0 1.5px 3px rgb(0 0 0 / 18%);\n\n      &:hover:not([data-disabled]) {\n        background: ${cssVar.colorPrimaryHover};\n      }\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.45;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  rootDefault: css`\n    width: 36px;\n    min-width: 36px;\n    height: 22px;\n  `,\n  rootSmall: css`\n    width: 28px;\n    min-width: 28px;\n    height: 16px;\n  `,\n  thumb: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow:\n      0 0 0 0.5px rgb(0 0 0 / 4%),\n      0 1px 1px rgb(0 0 0 / 6%),\n      0 3px 8px rgb(0 30 80 / 16%);\n\n    transition: box-shadow 200ms ${cssVar.motionEaseOut};\n\n    [role='switch']:hover:not([data-disabled]) > & {\n      box-shadow:\n        0 0 0 0.5px rgb(0 0 0 / 4%),\n        0 1px 1px rgb(0 0 0 / 8%),\n        0 6px 14px rgb(0 30 80 / 24%);\n    }\n\n    [data-disabled] > & {\n      box-shadow: none;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  thumbDefault: css`\n    width: 18px;\n    height: 18px;\n  `,\n  thumbSmall: css`\n    width: 12px;\n    height: 12px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.rootDefault,\n      small: styles.rootSmall,\n    },\n  },\n});\n\nexport const thumbVariants = cva(styles.thumb, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.thumbDefault,\n      small: styles.thumbSmall,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;aAUE,OAAO,oBAAoB;;CAEtC,UAAU,GAAG;;;CAGb,eAAe,GAAG;;;CAGlB,WAAW,GAAG;;;CAGd,gBAAgB,GAAG;;;CAGnB,WAAW,GAAG;;;;aAIH,OAAO,aAAa;;CAE/B,SAAS,GAAG;;;;;;;;;;;;;;;;;CAiBZ,MAAM,GAAG;;;;;;;;;;;;;;;;kBAgBO,OAAO,mBAAmB;;;;;yBAKnB,OAAO,cAAc;yBACrB,OAAO,cAAc;;;2BAGnB,OAAO,mBAAmB;;;;;oBAKjC,OAAO,UAAU;;;;;oBAKjB,OAAO,aAAa;;;;sBAIlB,OAAO,kBAAkB;;;;;;;;;;;;;CAa7C,aAAa,GAAG;;;;;CAKhB,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;kBAQM,OAAO,iBAAiB;;;;;;mCAMP,OAAO,cAAc;;;;;;;;;;;;;;;;;CAiBtD,cAAc,GAAG;;;;CAIjB,YAAY,GAAG;;;;CAIhB,EAAE;AAEH,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,MAAM,WACP;CACD,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;EACf,EACF;CACF,CAAC;AAEF,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,MAAM,WACP;CACD,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;EACf,EACF;CACF,CAAC"}

package/es/base-ui/Switch/type.d.mts

@@ -33,6 +33,7 @@ type SwitchThumbProps = Omit<ComponentProps<typeof Switch.Thumb>, 'render'> & HT
 type SwitchIconPosition = 'left' | 'right' | 'thumb';
 type SwitchIconProps = HTMLMotionProps<'span'> & {
   position: SwitchIconPosition;
+  size?: SwitchSize;
   transition?: Transition;
 };
 interface SwitchProps {

package/es/color/colors/blue.d.mts

@@ -1,7 +1,7 @@
 import { ColorScaleItem } from "../types.mjs";
 
 //#region src/color/colors/blue.d.ts
-declare const blue: ColorScaleItem;
+declare const blueGeekblueMix: ColorScaleItem;
 //#endregion
-export { blue };
+export { blueGeekblueMix };
 //# sourceMappingURL=blue.d.mts.map

package/es/color/colors/blue.mjs

@@ -1,67 +1,67 @@
 //#region src/color/colors/blue.ts
-const blue = {
+const blueGeekblueMix = {
 	dark: [
-		"#000506",
-		"#002126",
-		"#00363f",
-		"#004e59",
-		"#006675",
-		"#008093",
-		"#159ab0",
-		"#47b3ca",
-		"#6acde4",
-		"#8ae8ff",
-		"#b8f0ff",
-		"#def7ff",
+		"#000415",
+		"#001740",
+		"#00285b",
+		"#003b79",
+		"#004f98",
+		"#0064b6",
+		"#0d78ce",
+		"#2d8ae0",
+		"#439aed",
+		"#60b1ff",
+		"#a7d3ff",
+		"#e0f0ff",
 		"#ffffff"
 	],
 	darkA: [
-		"rgba(0, 167, 200, 0.03)",
-		"rgba(0, 220, 253, 0.15)",
-		"rgba(0, 216, 252, 0.25)",
-		"rgba(0, 223, 254, 0.35)",
-		"rgba(0, 222, 254, 0.46)",
-		"rgba(0, 221, 253, 0.58)",
-		"rgba(30, 223, 255, 0.69)",
-		"rgba(89, 224, 252, 0.8)",
-		"rgba(118, 228, 253, 0.9)",
-		"#8ae8ff",
-		"#b8f0ff",
-		"#def7ff",
+		"rgba(0, 44, 233, 0.09)",
+		"rgba(0, 88, 246, 0.26)",
+		"rgba(0, 111, 253, 0.36)",
+		"rgba(0, 123, 252, 0.48)",
+		"rgba(0, 132, 253, 0.6)",
+		"rgba(0, 139, 253, 0.72)",
+		"rgba(16, 148, 254, 0.81)",
+		"rgba(51, 157, 255, 0.88)",
+		"rgba(72, 166, 255, 0.93)",
+		"#60b1ff",
+		"#a7d3ff",
+		"#e0f0ff",
 		"#ffffff"
 	],
 	light: [
 		"#ffffff",
-		"#fbfeff",
-		"#f4fcff",
-		"#eafaff",
-		"#dff7ff",
-		"#d3f5ff",
-		"#c4f2ff",
-		"#b4efff",
-		"#a1ecff",
-		"#8ae8ff",
-		"#159ab0",
-		"#004e59",
-		"#000506"
+		"#fcfcff",
+		"#f2f8ff",
+		"#e5f1ff",
+		"#d5e9ff",
+		"#c2e0ff",
+		"#acd4ff",
+		"#93c8ff",
+		"#76baff",
+		"#57abf9",
+		"#0d78ce",
+		"#003b79",
+		"#000415"
 	],
 	lightA: [
 		"rgba(255, 255, 255, 0.01)",
-		"rgba(55, 205, 255, 0.02)",
-		"rgba(35, 195, 255, 0.05)",
-		"rgba(22, 199, 255, 0.09)",
-		"rgba(9, 193, 255, 0.13)",
-		"rgba(11, 199, 255, 0.18)",
-		"rgba(9, 201, 255, 0.24)",
-		"rgba(5, 202, 255, 0.3)",
-		"rgba(1, 204, 255, 0.37)",
-		"rgba(1, 205, 255, 0.46)",
-		"rgba(1, 145, 169, 0.92)",
-		"#004e59",
-		"#000506"
+		"rgba(105, 105, 255, 0.02)",
+		"rgba(38, 138, 255, 0.06)",
+		"rgba(19, 128, 255, 0.11)",
+		"rgba(8, 126, 255, 0.17)",
+		"rgba(1, 126, 255, 0.24)",
+		"rgba(3, 125, 255, 0.33)",
+		"rgba(4, 127, 255, 0.43)",
+		"rgba(1, 127, 255, 0.54)",
+		"rgba(0, 128, 246, 0.66)",
+		"rgba(0, 113, 203, 0.95)",
+		"#003b79",
+		"#000415"
 	]
 };
 //#endregion
-export { blue as default };
+export { blueGeekblueMix as default };
 
 //# sourceMappingURL=blue.mjs.map

package/es/color/colors/blue.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"blue.mjs","names":[],"sources":["../../../src/color/colors/blue.ts"],"sourcesContent":["import type { ColorScaleItem } from '../types';\n\nconst blue: ColorScaleItem = {\n  dark: [\n    '#000506',\n    '#002126',\n    '#00363f',\n    '#004e59',\n    '#006675',\n    '#008093',\n    '#159ab0',\n    '#47b3ca',\n    '#6acde4',\n    '#8ae8ff',\n    '#b8f0ff',\n    '#def7ff',\n    '#ffffff',\n  ],\n  darkA: [\n    'rgba(0, 167, 200, 0.03)',\n    'rgba(0, 220, 253, 0.15)',\n    'rgba(0, 216, 252, 0.25)',\n    'rgba(0, 223, 254, 0.35)',\n    'rgba(0, 222, 254, 0.46)',\n    'rgba(0, 221, 253, 0.58)',\n    'rgba(30, 223, 255, 0.69)',\n    'rgba(89, 224, 252, 0.8)',\n    'rgba(118, 228, 253, 0.9)',\n    '#8ae8ff',\n    '#b8f0ff',\n    '#def7ff',\n    '#ffffff',\n  ],\n  light: [\n    '#ffffff',\n    '#fbfeff',\n    '#f4fcff',\n    '#eafaff',\n    '#dff7ff',\n    '#d3f5ff',\n    '#c4f2ff',\n    '#b4efff',\n    '#a1ecff',\n    '#8ae8ff',\n    '#159ab0',\n    '#004e59',\n    '#000506',\n  ],\n  lightA: [\n    'rgba(255, 255, 255, 0.01)',\n    'rgba(55, 205, 255, 0.02)',\n    'rgba(35, 195, 255, 0.05)',\n    'rgba(22, 199, 255, 0.09)',\n    'rgba(9, 193, 255, 0.13)',\n    'rgba(11, 199, 255, 0.18)',\n    'rgba(9, 201, 255, 0.24)',\n    'rgba(5, 202, 255, 0.3)',\n    'rgba(1, 204, 255, 0.37)',\n    'rgba(1, 205, 255, 0.46)',\n    'rgba(1, 145, 169, 0.92)',\n    '#004e59',\n    '#000506',\n  ],\n};\n\nexport default blue;\n"],"mappings":";AAEA,MAAM,OAAuB;CAC3B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACF"}
+{"version":3,"file":"blue.mjs","names":[],"sources":["../../../src/color/colors/blue.ts"],"sourcesContent":["import type { ColorScaleItem } from '../types';\n\nconst blueGeekblueMix: ColorScaleItem = {\n  dark: [\n    '#000415',\n    '#001740',\n    '#00285b',\n    '#003b79',\n    '#004f98',\n    '#0064b6',\n    '#0d78ce',\n    '#2d8ae0',\n    '#439aed',\n    '#60b1ff',\n    '#a7d3ff',\n    '#e0f0ff',\n    '#ffffff',\n  ],\n  darkA: [\n    'rgba(0, 44, 233, 0.09)',\n    'rgba(0, 88, 246, 0.26)',\n    'rgba(0, 111, 253, 0.36)',\n    'rgba(0, 123, 252, 0.48)',\n    'rgba(0, 132, 253, 0.6)',\n    'rgba(0, 139, 253, 0.72)',\n    'rgba(16, 148, 254, 0.81)',\n    'rgba(51, 157, 255, 0.88)',\n    'rgba(72, 166, 255, 0.93)',\n    '#60b1ff',\n    '#a7d3ff',\n    '#e0f0ff',\n    '#ffffff',\n  ],\n  light: [\n    '#ffffff',\n    '#fcfcff',\n    '#f2f8ff',\n    '#e5f1ff',\n    '#d5e9ff',\n    '#c2e0ff',\n    '#acd4ff',\n    '#93c8ff',\n    '#76baff',\n    '#57abf9',\n    '#0d78ce',\n    '#003b79',\n    '#000415',\n  ],\n  lightA: [\n    'rgba(255, 255, 255, 0.01)',\n    'rgba(105, 105, 255, 0.02)',\n    'rgba(38, 138, 255, 0.06)',\n    'rgba(19, 128, 255, 0.11)',\n    'rgba(8, 126, 255, 0.17)',\n    'rgba(1, 126, 255, 0.24)',\n    'rgba(3, 125, 255, 0.33)',\n    'rgba(4, 127, 255, 0.43)',\n    'rgba(1, 127, 255, 0.54)',\n    'rgba(0, 128, 246, 0.66)',\n    'rgba(0, 113, 203, 0.95)',\n    '#003b79',\n    '#000415',\n  ],\n};\n\nexport default blueGeekblueMix;\n"],"mappings":";AAEA,MAAM,kBAAkC;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACF"}

package/es/color/colors/index.d.mts

@@ -1,5 +1,5 @@
 import { ColorScaleItem } from "../types.mjs";
-import { blue } from "./blue.mjs";
+import { blueGeekblueMix } from "./blue.mjs";
 import { cyan } from "./cyan.mjs";
 import { geekblue } from "./geekblue.mjs";
 import { gold } from "./gold.mjs";

package/es/color/colors/index.mjs

@@ -1,4 +1,4 @@
-import blue from "./blue.mjs";
+import blueGeekblueMix from "./blue.mjs";
 import cyan from "./cyan.mjs";
 import geekblue from "./geekblue.mjs";
 import gold from "./gold.mjs";
@@ -14,7 +14,7 @@ import volcano from "./volcano.mjs";
 import yellow from "./yellow.mjs";
 //#region src/color/colors/index.ts
 const colorScales = {
-	blue,
+	blue: blueGeekblueMix,
 	cyan,
 	geekblue,
 	gold,

package/es/color/colors/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/color/colors/index.ts"],"sourcesContent":["import type { ColorScaleItem } from '../types';\nimport blue from './blue';\nimport cyan from './cyan';\nimport geekblue from './geekblue';\nimport gold from './gold';\nimport gray from './gray';\nimport green from './green';\nimport lime from './lime';\nimport magenta from './magenta';\nimport orange from './orange';\nimport primary from './primary';\nimport purple from './purple';\nimport red from './red';\nimport volcano from './volcano';\nimport yellow from './yellow';\n\nexport interface ColorScales {\n  blue: ColorScaleItem;\n  cyan: ColorScaleItem;\n  geekblue: ColorScaleItem;\n  gold: ColorScaleItem;\n  gray: ColorScaleItem;\n  green: ColorScaleItem;\n  lime: ColorScaleItem;\n  magenta: ColorScaleItem;\n  orange: ColorScaleItem;\n  primary: ColorScaleItem;\n  purple: ColorScaleItem;\n  red: ColorScaleItem;\n  volcano: ColorScaleItem;\n  yellow: ColorScaleItem;\n}\n\nexport const colorScales: ColorScales = {\n  blue,\n  cyan,\n  geekblue,\n  gold,\n  gray,\n  green,\n  lime,\n  magenta,\n  orange,\n  primary,\n  purple,\n  red,\n  volcano,\n  yellow,\n};\n\nexport { colorScales as colors };\n\nexport { default as blue } from './blue';\nexport { default as cyan } from './cyan';\nexport { default as geekblue } from './geekblue';\nexport { default as gold } from './gold';\nexport { default as gray } from './gray';\nexport { default as green } from './green';\nexport { default as lime } from './lime';\nexport { default as magenta } from './magenta';\nexport { default as orange } from './orange';\nexport { default as primary } from './primary';\nexport { default as purple } from './purple';\nexport { default as red } from './red';\nexport { default as volcano } from './volcano';\nexport { default as yellow } from './yellow';\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,MAAa,cAA2B;CACtC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/color/colors/index.ts"],"sourcesContent":["import type { ColorScaleItem } from '../types';\nimport blue from './blue';\nimport cyan from './cyan';\nimport geekblue from './geekblue';\nimport gold from './gold';\nimport gray from './gray';\nimport green from './green';\nimport lime from './lime';\nimport magenta from './magenta';\nimport orange from './orange';\nimport primary from './primary';\nimport purple from './purple';\nimport red from './red';\nimport volcano from './volcano';\nimport yellow from './yellow';\n\nexport interface ColorScales {\n  blue: ColorScaleItem;\n  cyan: ColorScaleItem;\n  geekblue: ColorScaleItem;\n  gold: ColorScaleItem;\n  gray: ColorScaleItem;\n  green: ColorScaleItem;\n  lime: ColorScaleItem;\n  magenta: ColorScaleItem;\n  orange: ColorScaleItem;\n  primary: ColorScaleItem;\n  purple: ColorScaleItem;\n  red: ColorScaleItem;\n  volcano: ColorScaleItem;\n  yellow: ColorScaleItem;\n}\n\nexport const colorScales: ColorScales = {\n  blue,\n  cyan,\n  geekblue,\n  gold,\n  gray,\n  green,\n  lime,\n  magenta,\n  orange,\n  primary,\n  purple,\n  red,\n  volcano,\n  yellow,\n};\n\nexport { colorScales as colors };\n\nexport { default as blue } from './blue';\nexport { default as cyan } from './cyan';\nexport { default as geekblue } from './geekblue';\nexport { default as gold } from './gold';\nexport { default as gray } from './gray';\nexport { default as green } from './green';\nexport { default as lime } from './lime';\nexport { default as magenta } from './magenta';\nexport { default as orange } from './orange';\nexport { default as primary } from './primary';\nexport { default as purple } from './purple';\nexport { default as red } from './red';\nexport { default as volcano } from './volcano';\nexport { default as yellow } from './yellow';\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,MAAa,cAA2B;CACtC,MAAA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/es/color/index.d.mts

@@ -1,5 +1,5 @@
 import { ColorScaleItem } from "./types.mjs";
-import { blue } from "./colors/blue.mjs";
+import { blueGeekblueMix } from "./colors/blue.mjs";
 import { cyan } from "./colors/cyan.mjs";
 import { geekblue } from "./colors/geekblue.mjs";
 import { gold } from "./colors/gold.mjs";
@@ -22,4 +22,4 @@ import { sage } from "./neutrals/sage.mjs";
 import { sand } from "./neutrals/sand.mjs";
 import { slate } from "./neutrals/slate.mjs";
 import { NeutralColorScales, neutralColorScales } from "./neutrals/index.mjs";
-export { type ColorScaleItem, ColorScales, type ColorScalesProps, ColorScales$1 as CssVar, NeutralColorScales, blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, volcano, yellow };
+export { type ColorScaleItem, ColorScales, type ColorScalesProps, ColorScales$1 as CssVar, NeutralColorScales, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, volcano, yellow };

package/es/color/index.mjs

@@ -1,4 +1,4 @@
-import blue from "./colors/blue.mjs";
+import blueGeekblueMix from "./colors/blue.mjs";
 import cyan from "./colors/cyan.mjs";
 import geekblue from "./colors/geekblue.mjs";
 import gold from "./colors/gold.mjs";
@@ -21,4 +21,4 @@ import slate from "./neutrals/slate.mjs";
 import { neutralColorScales } from "./neutrals/index.mjs";
 import ColorScales from "./ColorScales/index.mjs";
 import ColorScales$1 from "./CssVar/index.mjs";
-export { ColorScales, ColorScales$1 as CssVar, blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, volcano, yellow };
+export { ColorScales, ColorScales$1 as CssVar, blueGeekblueMix as blue, colorScales, colorScales as colors, cyan, geekblue, gold, gray, green, lime, magenta, mauve, neutralColorScales, neutralColorScales as neutrals, olive, orange, primary, purple, red, sage, sand, slate, volcano, yellow };

package/es/hooks/useHighlight.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { getCodeLanguageByInput } from "../Highlighter/const.mjs";
 import lobe_theme_default from "../Highlighter/theme/lobe-theme.mjs";
+import { getCodeLanguageByInput } from "../Highlighter/const.mjs";
 import { useEffect, useMemo, useState } from "react";
 import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight } from "@shikijs/transformers";
 import { Md5 } from "ts-md5";

package/es/hooks/useStreamHighlight.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { getCodeLanguageByInput } from "../Highlighter/const.mjs";
 import lobe_theme_default from "../Highlighter/theme/lobe-theme.mjs";
+import { getCodeLanguageByInput } from "../Highlighter/const.mjs";
 import { shikiModulePromise } from "./useHighlight.mjs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ShikiStreamTokenizer } from "shiki-stream";

package/es/index.mjs

@@ -46,10 +46,11 @@ import CheckboxGroup from "./Checkbox/CheckboxGroup.mjs";
 import Checkbox from "./Checkbox/index.mjs";
 import FileTypeIcon from "./FileTypeIcon/FileTypeIcon.mjs";
 import MaterialFileTypeIcon from "./MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
+import Tag from "./Tag/Tag.mjs";
+import lobe_theme_default from "./Highlighter/theme/lobe-theme.mjs";
 import CodeDiff from "./CodeDiff/CodeDiff.mjs";
 import PatchDiff from "./CodeDiff/PatchDiff.mjs";
 import { highlighterThemes } from "./Highlighter/const.mjs";
-import lobe_theme_default from "./Highlighter/theme/lobe-theme.mjs";
 import SyntaxHighlighter from "./Highlighter/SyntaxHighlighter/index.mjs";
 import CodeEditor from "./CodeEditor/CodeEditor.mjs";
 import Collapse from "./Collapse/Collapse.mjs";
@@ -85,7 +86,6 @@ import { PopoverProvider, usePopoverContext } from "./base-ui/Popover/context.mj
 import Popover from "./base-ui/Popover/Popover.mjs";
 import PopoverGroup from "./base-ui/Popover/PopoverGroup.mjs";
 import Tabs from "./Tabs/Tabs.mjs";
-import Tag from "./Tag/Tag.mjs";
 import EmojiPicker from "./EmojiPicker/EmojiPicker.mjs";
 import Empty from "./Empty/Empty.mjs";
 import Footer from "./Footer/Footer.mjs";

package/es/styles/customTheme.mjs

@@ -1,4 +1,4 @@
-import blue from "../color/colors/blue.mjs";
+import blueGeekblueMix from "../color/colors/blue.mjs";
 import cyan from "../color/colors/cyan.mjs";
 import geekblue from "../color/colors/geekblue.mjs";
 import gold from "../color/colors/gold.mjs";
@@ -17,7 +17,7 @@ import sand from "../color/neutrals/sand.mjs";
 import slate from "../color/neutrals/slate.mjs";
 //#region src/styles/customTheme.ts
 const primaryColors = {
-	blue: blue.dark[9],
+	blue: blueGeekblueMix.dark[9],
 	cyan: cyan.dark[9],
 	geekblue: geekblue.dark[9],
 	gold: gold.dark[9],

package/es/styles/customTheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"customTheme.mjs","names":[],"sources":["../../src/styles/customTheme.ts"],"sourcesContent":["import {\n  blue,\n  cyan,\n  geekblue,\n  gold,\n  green,\n  lime,\n  magenta,\n  orange,\n  purple,\n  red,\n  volcano,\n  yellow,\n} from '@/color/colors';\nimport { mauve, olive, sage, sand, slate } from '@/color/neutrals';\n\nexport const primaryColors = {\n  blue: blue.dark[9],\n  cyan: cyan.dark[9],\n  geekblue: geekblue.dark[9],\n  gold: gold.dark[9],\n  green: green.dark[9],\n  lime: lime.dark[9],\n  magenta: magenta.dark[9],\n  orange: orange.dark[9],\n  purple: purple.dark[9],\n  red: red.dark[9],\n  volcano: volcano.dark[9],\n  yellow: yellow.dark[9],\n};\n\nexport type PrimaryColorsObj = typeof primaryColors;\nexport type PrimaryColors = keyof PrimaryColorsObj;\nexport const primaryColorsSwatches = [\n  primaryColors.red,\n  primaryColors.orange,\n  primaryColors.gold,\n  primaryColors.yellow,\n  primaryColors.lime,\n  primaryColors.green,\n  primaryColors.cyan,\n  primaryColors.blue,\n  primaryColors.geekblue,\n  primaryColors.purple,\n  primaryColors.magenta,\n  primaryColors.volcano,\n];\nexport const neutralColors = {\n  mauve: mauve.dark[9],\n  olive: olive.dark[9],\n  sage: sage.dark[9],\n  sand: sand.dark[9],\n  slate: slate.dark[9],\n};\nexport const neutralColorsSwatches = [\n  neutralColors.mauve,\n  neutralColors.slate,\n  neutralColors.sage,\n  neutralColors.olive,\n  neutralColors.sand,\n];\n\nexport type NeutralColorsObj = typeof neutralColors;\nexport type NeutralColors = keyof NeutralColorsObj;\n\nexport const findCustomThemeName = (type: 'primary' | 'neutral', value: string) => {\n  const res = type === 'primary' ? primaryColors : neutralColors;\n  const result = Object.entries(res).find((item) => item[1] === value);\n  return result?.[0];\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,MAAa,gBAAgB;CAC3B,MAAM,KAAK,KAAK;CAChB,MAAM,KAAK,KAAK;CAChB,UAAU,SAAS,KAAK;CACxB,MAAM,KAAK,KAAK;CAChB,OAAO,MAAM,KAAK;CAClB,MAAM,KAAK,KAAK;CAChB,SAAS,QAAQ,KAAK;CACtB,QAAQ,OAAO,KAAK;CACpB,QAAQ,OAAO,KAAK;CACpB,KAAK,IAAI,KAAK;CACd,SAAS,QAAQ,KAAK;CACtB,QAAQ,OAAO,KAAK;CACrB;AAID,MAAa,wBAAwB;CACnC,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACf;AACD,MAAa,gBAAgB;CAC3B,OAAO,MAAM,KAAK;CAClB,OAAO,MAAM,KAAK;CAClB,MAAM,KAAK,KAAK;CAChB,MAAM,KAAK,KAAK;CAChB,OAAO,MAAM,KAAK;CACnB;AACD,MAAa,wBAAwB;CACnC,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACf;AAKD,MAAa,uBAAuB,MAA6B,UAAkB;AAGjF,QADe,OAAO,QADV,SAAS,YAAY,gBAAgB,cACf,CAAC,MAAM,SAAS,KAAK,OAAO,MACjD,GAAG"}
+{"version":3,"file":"customTheme.mjs","names":["blue"],"sources":["../../src/styles/customTheme.ts"],"sourcesContent":["import {\n  blue,\n  cyan,\n  geekblue,\n  gold,\n  green,\n  lime,\n  magenta,\n  orange,\n  purple,\n  red,\n  volcano,\n  yellow,\n} from '@/color/colors';\nimport { mauve, olive, sage, sand, slate } from '@/color/neutrals';\n\nexport const primaryColors = {\n  blue: blue.dark[9],\n  cyan: cyan.dark[9],\n  geekblue: geekblue.dark[9],\n  gold: gold.dark[9],\n  green: green.dark[9],\n  lime: lime.dark[9],\n  magenta: magenta.dark[9],\n  orange: orange.dark[9],\n  purple: purple.dark[9],\n  red: red.dark[9],\n  volcano: volcano.dark[9],\n  yellow: yellow.dark[9],\n};\n\nexport type PrimaryColorsObj = typeof primaryColors;\nexport type PrimaryColors = keyof PrimaryColorsObj;\nexport const primaryColorsSwatches = [\n  primaryColors.red,\n  primaryColors.orange,\n  primaryColors.gold,\n  primaryColors.yellow,\n  primaryColors.lime,\n  primaryColors.green,\n  primaryColors.cyan,\n  primaryColors.blue,\n  primaryColors.geekblue,\n  primaryColors.purple,\n  primaryColors.magenta,\n  primaryColors.volcano,\n];\nexport const neutralColors = {\n  mauve: mauve.dark[9],\n  olive: olive.dark[9],\n  sage: sage.dark[9],\n  sand: sand.dark[9],\n  slate: slate.dark[9],\n};\nexport const neutralColorsSwatches = [\n  neutralColors.mauve,\n  neutralColors.slate,\n  neutralColors.sage,\n  neutralColors.olive,\n  neutralColors.sand,\n];\n\nexport type NeutralColorsObj = typeof neutralColors;\nexport type NeutralColors = keyof NeutralColorsObj;\n\nexport const findCustomThemeName = (type: 'primary' | 'neutral', value: string) => {\n  const res = type === 'primary' ? primaryColors : neutralColors;\n  const result = Object.entries(res).find((item) => item[1] === value);\n  return result?.[0];\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,MAAa,gBAAgB;CAC3B,MAAMA,gBAAK,KAAK;CAChB,MAAM,KAAK,KAAK;CAChB,UAAU,SAAS,KAAK;CACxB,MAAM,KAAK,KAAK;CAChB,OAAO,MAAM,KAAK;CAClB,MAAM,KAAK,KAAK;CAChB,SAAS,QAAQ,KAAK;CACtB,QAAQ,OAAO,KAAK;CACpB,QAAQ,OAAO,KAAK;CACpB,KAAK,IAAI,KAAK;CACd,SAAS,QAAQ,KAAK;CACtB,QAAQ,OAAO,KAAK;CACrB;AAID,MAAa,wBAAwB;CACnC,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACf;AACD,MAAa,gBAAgB;CAC3B,OAAO,MAAM,KAAK;CAClB,OAAO,MAAM,KAAK;CAClB,MAAM,KAAK,KAAK;CAChB,MAAM,KAAK,KAAK;CAChB,OAAO,MAAM,KAAK;CACnB;AACD,MAAa,wBAAwB;CACnC,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACf;AAKD,MAAa,uBAAuB,MAA6B,UAAkB;AAGjF,QADe,OAAO,QADV,SAAS,YAAY,gBAAgB,cACf,CAAC,MAAM,SAAS,KAAK,OAAO,MACjD,GAAG"}

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

@@ -1,4 +1,4 @@
-import blue from "../../../color/colors/blue.mjs";
+import blueGeekblueMix from "../../../color/colors/blue.mjs";
 import gold from "../../../color/colors/gold.mjs";
 import gray from "../../../color/colors/gray.mjs";
 import lime from "../../../color/colors/lime.mjs";
@@ -32,7 +32,7 @@ const errorToken = generateColorPalette({
 });
 const infoToken = generateColorPalette({
 	appearance: "dark",
-	scale: blue,
+	scale: blueGeekblueMix,
 	type: "Info"
 });
 const darkBaseToken = {

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

@@ -1 +1 @@
-{"version":3,"file":"dark.mjs","names":[],"sources":["../../../../src/styles/theme/token/dark.ts"],"sourcesContent":["import type { AliasToken } from 'antd/es/theme/interface';\n\nimport { blue, gold, gray, lime, primary, red } from '@/color/colors';\n\nimport { generateColorNeutralPalette, generateColorPalette } from '../generateColorPalette';\n\nconst primaryToken = generateColorPalette({\n  appearance: 'dark',\n  scale: primary,\n  type: 'Primary',\n});\n\nconst neutralToken = generateColorNeutralPalette({\n  appearance: 'dark',\n  scale: gray,\n});\n\nconst successToken = generateColorPalette({\n  appearance: 'dark',\n  scale: lime,\n  type: 'Success',\n});\n\nconst warningToken = generateColorPalette({\n  appearance: 'dark',\n  scale: gold,\n  type: 'Warning',\n});\n\nconst errorToken = generateColorPalette({\n  appearance: 'dark',\n  scale: red,\n  type: 'Error',\n});\n\nconst infoToken = generateColorPalette({\n  appearance: 'dark',\n  scale: blue,\n  type: 'Info',\n});\n\nconst darkBaseToken: Partial<AliasToken> = {\n  ...primaryToken,\n  ...neutralToken,\n  ...successToken,\n  ...warningToken,\n  ...errorToken,\n  ...infoToken,\n\n  boxShadow: '0 20px 20px -8px rgba(0, 0, 0, 0.24)',\n  boxShadowSecondary: '0 8px 16px -4px rgba(0, 0, 0, 0.2)',\n  boxShadowTertiary: '0 3px 1px -1px rgba(26, 26, 26, 0.06)',\n  colorLink: infoToken.colorInfoText,\n  colorLinkActive: infoToken.colorInfoTextActive,\n\n  colorLinkHover: infoToken.colorInfoTextHover,\n  colorTextLightSolid: neutralToken.colorBgLayout,\n};\n\nexport default darkBaseToken;\n"],"mappings":";;;;;;;;AAMA,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;CACP,CAAC;AAEF,MAAM,eAAe,4BAA4B;CAC/C,YAAY;CACZ,OAAO;CACR,CAAC;AAEF,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;CACP,CAAC;AAEF,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;CACP,CAAC;AAEF,MAAM,aAAa,qBAAqB;CACtC,YAAY;CACZ,OAAO;CACP,MAAM;CACP,CAAC;AAEF,MAAM,YAAY,qBAAqB;CACrC,YAAY;CACZ,OAAO;CACP,MAAM;CACP,CAAC;AAEF,MAAM,gBAAqC;CACzC,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CAEH,WAAW;CACX,oBAAoB;CACpB,mBAAmB;CACnB,WAAW,UAAU;CACrB,iBAAiB,UAAU;CAE3B,gBAAgB,UAAU;CAC1B,qBAAqB,aAAa;CACnC"}
+{"version":3,"file":"dark.mjs","names":["blue"],"sources":["../../../../src/styles/theme/token/dark.ts"],"sourcesContent":["import type { AliasToken } from 'antd/es/theme/interface';\n\nimport { blue, gold, gray, lime, primary, red } from '@/color/colors';\n\nimport { generateColorNeutralPalette, generateColorPalette } from '../generateColorPalette';\n\nconst primaryToken = generateColorPalette({\n  appearance: 'dark',\n  scale: primary,\n  type: 'Primary',\n});\n\nconst neutralToken = generateColorNeutralPalette({\n  appearance: 'dark',\n  scale: gray,\n});\n\nconst successToken = generateColorPalette({\n  appearance: 'dark',\n  scale: lime,\n  type: 'Success',\n});\n\nconst warningToken = generateColorPalette({\n  appearance: 'dark',\n  scale: gold,\n  type: 'Warning',\n});\n\nconst errorToken = generateColorPalette({\n  appearance: 'dark',\n  scale: red,\n  type: 'Error',\n});\n\nconst infoToken = generateColorPalette({\n  appearance: 'dark',\n  scale: blue,\n  type: 'Info',\n});\n\nconst darkBaseToken: Partial<AliasToken> = {\n  ...primaryToken,\n  ...neutralToken,\n  ...successToken,\n  ...warningToken,\n  ...errorToken,\n  ...infoToken,\n\n  boxShadow: '0 20px 20px -8px rgba(0, 0, 0, 0.24)',\n  boxShadowSecondary: '0 8px 16px -4px rgba(0, 0, 0, 0.2)',\n  boxShadowTertiary: '0 3px 1px -1px rgba(26, 26, 26, 0.06)',\n  colorLink: infoToken.colorInfoText,\n  colorLinkActive: infoToken.colorInfoTextActive,\n\n  colorLinkHover: infoToken.colorInfoTextHover,\n  colorTextLightSolid: neutralToken.colorBgLayout,\n};\n\nexport default darkBaseToken;\n"],"mappings":";;;;;;;;AAMA,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;CACP,CAAC;AAEF,MAAM,eAAe,4BAA4B;CAC/C,YAAY;CACZ,OAAO;CACR,CAAC;AAEF,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;CACP,CAAC;AAEF,MAAM,eAAe,qBAAqB;CACxC,YAAY;CACZ,OAAO;CACP,MAAM;CACP,CAAC;AAEF,MAAM,aAAa,qBAAqB;CACtC,YAAY;CACZ,OAAO;CACP,MAAM;CACP,CAAC;AAEF,MAAM,YAAY,qBAAqB;CACrC,YAAY;CACZ,OAAOA;CACP,MAAM;CACP,CAAC;AAEF,MAAM,gBAAqC;CACzC,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CAEH,WAAW;CACX,oBAAoB;CACpB,mBAAmB;CACnB,WAAW,UAAU;CACrB,iBAAiB,UAAU;CAE3B,gBAAgB,UAAU;CAC1B,qBAAqB,aAAa;CACnC"}

package/es/utils/safeReadableColor.mjs

@@ -5,6 +5,7 @@ const safeReadableColor = (bgColor, fallbackColor) => {
 	try {
 		return readableColor(bgColor);
 	} catch {
+		if (bgColor.startsWith("var(")) return `contrast-color(${bgColor})`;
 		return fallbackColor || cssVar.colorText;
 	}
 };

package/es/utils/safeReadableColor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"safeReadableColor.mjs","names":[],"sources":["../../src/utils/safeReadableColor.ts"],"sourcesContent":["import { cssVar } from 'antd-style';\nimport { readableColor } from 'polished';\n\nexport const safeReadableColor = (bgColor: string, fallbackColor?: string): string => {\n  try {\n    return readableColor(bgColor);\n  } catch {\n    return fallbackColor || cssVar.colorText;\n  }\n};\n"],"mappings":";;;AAGA,MAAa,qBAAqB,SAAiB,kBAAmC;AACpF,KAAI;AACF,SAAO,cAAc,QAAQ;SACvB;AACN,SAAO,iBAAiB,OAAO"}
+{"version":3,"file":"safeReadableColor.mjs","names":[],"sources":["../../src/utils/safeReadableColor.ts"],"sourcesContent":["import { cssVar } from 'antd-style';\nimport { readableColor } from 'polished';\n\nexport const safeReadableColor = (bgColor: string, fallbackColor?: string): string => {\n  try {\n    return readableColor(bgColor);\n  } catch {\n    if (bgColor.startsWith('var(')) return `contrast-color(${bgColor})`;\n    return fallbackColor || cssVar.colorText;\n  }\n};\n"],"mappings":";;;AAGA,MAAa,qBAAqB,SAAiB,kBAAmC;AACpF,KAAI;AACF,SAAO,cAAc,QAAQ;SACvB;AACN,MAAI,QAAQ,WAAW,OAAO,CAAE,QAAO,kBAAkB,QAAQ;AACjE,SAAO,iBAAiB,OAAO"}

package/package.json

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