@lobehub/ui 5.18.0 → 5.19.0

package/es/SliderWithInput/SliderWithInput.mjs

@@ -11,6 +11,7 @@ const SliderWithInput = memo(({ step, value, onChange, max, min, defaultValue, s
 		if (Number.isNaN(value) || isNull(value)) return;
 		onChange?.(value);
 	};
+	const inputDisabled = Array.isArray(disabled) ? disabled.some(Boolean) : disabled;
 	const { slider: sliderClassName, input: inputClassName, ...restClassNames } = classNames || {};
 	const { slider: sliderStyle, input: inputStyle, ...restStyles } = styles || {};
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
@@ -42,7 +43,7 @@ const SliderWithInput = memo(({ step, value, onChange, max, min, defaultValue, s
 			className: inputClassName,
 			controls: size !== "small" || controls,
 			defaultValue,
-			disabled,
+			disabled: inputDisabled,
 			max: unlimitedInput ? void 0 : max,
 			min,
 			size,

package/es/SliderWithInput/SliderWithInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderWithInput.mjs","names":["Flexbox","InputNumber"],"sources":["../../src/SliderWithInput/SliderWithInput.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from 'antd';\nimport { isNull } from 'es-toolkit/compat';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport InputNumber from '@/Input/InputNumber';\n\nimport type { SliderWithInputProps } from './type';\n\nconst SliderWithInput = memo<SliderWithInputProps>(\n  ({\n    step,\n    value,\n    onChange,\n    max,\n    min,\n    defaultValue,\n    size,\n    controls,\n    gap = 16,\n    style,\n    className,\n    classNames,\n    styles,\n    disabled,\n    unlimitedInput = false,\n    changeOnWheel,\n    ...rest\n  }) => {\n    const handleOnchange = (value: number | null) => {\n      if (Number.isNaN(value) || isNull(value)) return;\n      onChange?.(value);\n    };\n\n    const { slider: sliderClassName, input: inputClassName, ...restClassNames } = classNames || {};\n    const { slider: sliderStyle, input: inputStyle, ...restStyles } = styles || {};\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={className}\n        direction={'horizontal'}\n        gap={gap}\n        style={style}\n      >\n        <Slider\n          className={sliderClassName}\n          classNames={restClassNames}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          max={max}\n          min={min}\n          step={step}\n          style={{ flex: 1, margin: size === 'small' ? 0 : undefined, ...sliderStyle }}\n          styles={restStyles}\n          tooltip={{ open: false }}\n          value={typeof value === 'number' ? value : 0}\n          onChange={handleOnchange}\n          {...rest}\n        />\n        <InputNumber\n          changeOnWheel={changeOnWheel}\n          className={inputClassName}\n          controls={size !== 'small' || controls}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          max={unlimitedInput ? undefined : max}\n          min={min}\n          size={size}\n          step={Number.isNaN(step) || isNull(step) ? undefined : step}\n          style={{ flex: 1, maxWidth: size === 'small' ? 40 : 64, ...inputStyle }}\n          value={typeof value === 'number' ? value : 0}\n          onChange={(v) => handleOnchange(Number(v))}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nSliderWithInput.displayName = 'SliderWithInput';\n\nexport default SliderWithInput;\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,MACrB,EACC,MACA,OACA,UACA,KACA,KACA,cACA,MACA,UACA,MAAM,IACN,OACA,WACA,YACA,QACA,UACA,iBAAiB,OACjB,eACA,GAAG,WACC;CACJ,MAAM,kBAAkB,UAAyB;AAC/C,MAAI,OAAO,MAAM,MAAM,IAAI,OAAO,MAAM,CAAE;AAC1C,aAAW,MAAM;;CAGnB,MAAM,EAAE,QAAQ,iBAAiB,OAAO,gBAAgB,GAAG,mBAAmB,cAAc,EAAE;CAC9F,MAAM,EAAE,QAAQ,aAAa,OAAO,YAAY,GAAG,eAAe,UAAU,EAAE;AAE9E,QACE,qBAACA,mBAAD;EACE,OAAO;EACI;EACX,WAAW;EACN;EACE;YALT,CAOE,oBAAC,QAAD;GACE,WAAW;GACX,YAAY;GACE;GACJ;GACL;GACA;GACC;GACN,OAAO;IAAE,MAAM;IAAG,QAAQ,SAAS,UAAU,IAAI,KAAA;IAAW,GAAG;IAAa;GAC5E,QAAQ;GACR,SAAS,EAAE,MAAM,OAAO;GACxB,OAAO,OAAO,UAAU,WAAW,QAAQ;GAC3C,UAAU;GACV,GAAI;GACJ,CAAA,EACF,oBAACC,eAAD;GACiB;GACf,WAAW;GACX,UAAU,SAAS,WAAW;GAChB;GACJ;GACV,KAAK,iBAAiB,KAAA,IAAY;GAC7B;GACC;GACN,MAAM,OAAO,MAAM,KAAK,IAAI,OAAO,KAAK,GAAG,KAAA,IAAY;GACvD,OAAO;IAAE,MAAM;IAAG,UAAU,SAAS,UAAU,KAAK;IAAI,GAAG;IAAY;GACvE,OAAO,OAAO,UAAU,WAAW,QAAQ;GAC3C,WAAW,MAAM,eAAe,OAAO,EAAE,CAAC;GAC1C,CAAA,CACM;;EAGf;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"SliderWithInput.mjs","names":["Flexbox","InputNumber"],"sources":["../../src/SliderWithInput/SliderWithInput.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from 'antd';\nimport { isNull } from 'es-toolkit/compat';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport InputNumber from '@/Input/InputNumber';\n\nimport type { SliderWithInputProps } from './type';\n\nconst SliderWithInput = memo<SliderWithInputProps>(\n  ({\n    step,\n    value,\n    onChange,\n    max,\n    min,\n    defaultValue,\n    size,\n    controls,\n    gap = 16,\n    style,\n    className,\n    classNames,\n    styles,\n    disabled,\n    unlimitedInput = false,\n    changeOnWheel,\n    ...rest\n  }) => {\n    const handleOnchange = (value: number | null) => {\n      if (Number.isNaN(value) || isNull(value)) return;\n      onChange?.(value);\n    };\n    const inputDisabled = Array.isArray(disabled) ? disabled.some(Boolean) : disabled;\n\n    const { slider: sliderClassName, input: inputClassName, ...restClassNames } = classNames || {};\n    const { slider: sliderStyle, input: inputStyle, ...restStyles } = styles || {};\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={className}\n        direction={'horizontal'}\n        gap={gap}\n        style={style}\n      >\n        <Slider\n          className={sliderClassName}\n          classNames={restClassNames}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          max={max}\n          min={min}\n          step={step}\n          style={{ flex: 1, margin: size === 'small' ? 0 : undefined, ...sliderStyle }}\n          styles={restStyles}\n          tooltip={{ open: false }}\n          value={typeof value === 'number' ? value : 0}\n          onChange={handleOnchange}\n          {...rest}\n        />\n        <InputNumber\n          changeOnWheel={changeOnWheel}\n          className={inputClassName}\n          controls={size !== 'small' || controls}\n          defaultValue={defaultValue}\n          disabled={inputDisabled}\n          max={unlimitedInput ? undefined : max}\n          min={min}\n          size={size}\n          step={Number.isNaN(step) || isNull(step) ? undefined : step}\n          style={{ flex: 1, maxWidth: size === 'small' ? 40 : 64, ...inputStyle }}\n          value={typeof value === 'number' ? value : 0}\n          onChange={(v) => handleOnchange(Number(v))}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nSliderWithInput.displayName = 'SliderWithInput';\n\nexport default SliderWithInput;\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,MACrB,EACC,MACA,OACA,UACA,KACA,KACA,cACA,MACA,UACA,MAAM,IACN,OACA,WACA,YACA,QACA,UACA,iBAAiB,OACjB,eACA,GAAG,WACC;CACJ,MAAM,kBAAkB,UAAyB;AAC/C,MAAI,OAAO,MAAM,MAAM,IAAI,OAAO,MAAM,CAAE;AAC1C,aAAW,MAAM;;CAEnB,MAAM,gBAAgB,MAAM,QAAQ,SAAS,GAAG,SAAS,KAAK,QAAQ,GAAG;CAEzE,MAAM,EAAE,QAAQ,iBAAiB,OAAO,gBAAgB,GAAG,mBAAmB,cAAc,EAAE;CAC9F,MAAM,EAAE,QAAQ,aAAa,OAAO,YAAY,GAAG,eAAe,UAAU,EAAE;AAE9E,QACE,qBAACA,mBAAD;EACE,OAAO;EACI;EACX,WAAW;EACN;EACE;YALT,CAOE,oBAAC,QAAD;GACE,WAAW;GACX,YAAY;GACE;GACJ;GACL;GACA;GACC;GACN,OAAO;IAAE,MAAM;IAAG,QAAQ,SAAS,UAAU,IAAI,KAAA;IAAW,GAAG;IAAa;GAC5E,QAAQ;GACR,SAAS,EAAE,MAAM,OAAO;GACxB,OAAO,OAAO,UAAU,WAAW,QAAQ;GAC3C,UAAU;GACV,GAAI;GACJ,CAAA,EACF,oBAACC,eAAD;GACiB;GACf,WAAW;GACX,UAAU,SAAS,WAAW;GAChB;GACd,UAAU;GACV,KAAK,iBAAiB,KAAA,IAAY;GAC7B;GACC;GACN,MAAM,OAAO,MAAM,KAAK,IAAI,OAAO,KAAK,GAAG,KAAA,IAAY;GACvD,OAAO;IAAE,MAAM;IAAG,UAAU,SAAS,UAAU,KAAK;IAAI,GAAG;IAAY;GACvE,OAAO,OAAO,UAAU,WAAW,QAAQ;GAC3C,WAAW,MAAM,eAAe,OAAO,EAAE,CAAC;GAC1C,CAAA,CACM;;EAGf;AAED,gBAAgB,cAAc"}

package/es/base-ui/Button/Button.mjs

@@ -18,11 +18,13 @@ const resolveVariantCls = ({ danger, ghost, type }) => {
 	if (ghost) {
 		if (danger) return styles.ghostDanger;
 		if (type === "primary") return styles.ghostPrimary;
+		if (type === "dashed") return cx(styles.ghostDefault, styles.ghostDashed);
 		return styles.ghostDefault;
 	}
 	switch (type) {
 		case "primary": return danger ? styles.dangerSolid : styles.variantPrimary;
 		case "dashed": return danger ? cx(styles.variantDashed, styles.dangerOutlined) : styles.variantDashed;
+		case "fill": return danger ? styles.dangerFill : styles.variantFill;
 		case "text": return danger ? cx(styles.variantText, styles.dangerInline) : styles.variantText;
 		case "link": return danger ? cx(styles.variantLink, styles.dangerInline) : styles.variantLink;
 		default: return danger ? cx(styles.variantDefault, styles.dangerOutlined) : styles.variantDefault;

package/es/base-ui/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../../../src/base-ui/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { MouseEvent, Ref } from 'react';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { ButtonProps } from './type';\n\nconst resolveSizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.sizeSmall;\n  if (size === 'large') return styles.sizeLarge;\n  return styles.sizeMiddle;\n};\n\nconst resolveIconOnlySizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.iconOnlySmall;\n  if (size === 'large') return styles.iconOnlyLarge;\n  return styles.iconOnlyMiddle;\n};\n\nconst resolveVariantCls = ({\n  danger,\n  ghost,\n  type,\n}: {\n  danger: boolean;\n  ghost: boolean;\n  type: NonNullable<ButtonProps['type']>;\n}): string => {\n  if (ghost) {\n    if (danger) return styles.ghostDanger;\n    if (type === 'primary') return styles.ghostPrimary;\n    return styles.ghostDefault;\n  }\n\n  switch (type) {\n    case 'primary': {\n      return danger ? styles.dangerSolid : styles.variantPrimary;\n    }\n    case 'dashed': {\n      return danger ? cx(styles.variantDashed, styles.dangerOutlined) : styles.variantDashed;\n    }\n    case 'text': {\n      return danger ? cx(styles.variantText, styles.dangerInline) : styles.variantText;\n    }\n    case 'link': {\n      return danger ? cx(styles.variantLink, styles.dangerInline) : styles.variantLink;\n    }\n    default: {\n      return danger ? cx(styles.variantDefault, styles.dangerOutlined) : styles.variantDefault;\n    }\n  }\n};\n\nconst tapAnim = { scale: 0.98 };\nconst motionTransition = {\n  damping: 26,\n  mass: 0.6,\n  stiffness: 600,\n  type: 'spring' as const,\n};\n\nconst Button = ({\n  block,\n  children,\n  className,\n  classNames,\n  danger = false,\n  disabled,\n  ghost = false,\n  href,\n  htmlType = 'button',\n  icon,\n  iconPosition = 'start',\n  loading,\n  onClick,\n  ref,\n  shape = 'default',\n  size = 'middle',\n  styles: userStyles,\n  target,\n  type = 'default',\n  ...rest\n}: ButtonProps) => {\n  const Motion = useMotionComponent();\n  const isDisabled = disabled || loading;\n  const sizeCls = resolveSizeCls(size);\n  const variantCls = resolveVariantCls({ danger, ghost, type });\n  const shapeCls =\n    shape === 'circle' ? styles.shapeCircle : shape === 'round' ? styles.shapeRound : undefined;\n\n  const hasChildren =\n    children !== undefined && children !== null && children !== false && children !== '';\n  const renderIcon = loading || icon;\n  const iconOnly = !hasChildren && !!renderIcon;\n  const iconOnlySizeCls = iconOnly ? resolveIconOnlySizeCls(size) : undefined;\n\n  const composedClassName = cx(\n    styles.base,\n    sizeCls,\n    variantCls,\n    shapeCls,\n    block && styles.block,\n    iconPosition === 'end' && styles.iconEnd,\n    iconOnlySizeCls,\n    className,\n  );\n\n  const spinnerNode = (\n    <span\n      aria-hidden={!loading}\n      style={userStyles?.icon}\n      className={cx(\n        styles.iconBox,\n        styles.spinnerSlot,\n        loading && styles.spinnerSlotShow,\n        iconPosition === 'end' && styles.spinnerSlotEnd,\n        classNames?.icon,\n      )}\n    >\n      <span className={styles.spinner} />\n    </span>\n  );\n\n  const iconNode =\n    icon && !loading ? (\n      <span className={cx(styles.iconBox, classNames?.icon)} style={userStyles?.icon}>\n        {icon}\n      </span>\n    ) : null;\n\n  const inner = (\n    <>\n      {spinnerNode}\n      {iconNode}\n      {children}\n    </>\n  );\n\n  const motionGestures = isDisabled ? {} : { transition: motionTransition, whileTap: tapAnim };\n\n  if (href !== undefined) {\n    const handleAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {\n      if (isDisabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n      <Motion.a\n        aria-disabled={isDisabled || undefined}\n        href={isDisabled ? undefined : href}\n        target={target}\n        {...(rest as any)}\n        className={composedClassName}\n        ref={ref as Ref<HTMLAnchorElement>}\n        onClick={handleAnchorClick}\n        {...motionGestures}\n      >\n        {inner}\n      </Motion.a>\n    );\n  }\n\n  return (\n    <Motion.button\n      type={htmlType}\n      {...(rest as any)}\n      className={composedClassName}\n      disabled={isDisabled}\n      ref={ref as Ref<HTMLButtonElement>}\n      onClick={onClick}\n      {...motionGestures}\n    >\n      {inner}\n    </Motion.button>\n  );\n};\n\nButton.displayName = 'BaseButton';\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../../src/base-ui/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { MouseEvent, Ref } from 'react';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { ButtonProps } from './type';\n\nconst resolveSizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.sizeSmall;\n  if (size === 'large') return styles.sizeLarge;\n  return styles.sizeMiddle;\n};\n\nconst resolveIconOnlySizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.iconOnlySmall;\n  if (size === 'large') return styles.iconOnlyLarge;\n  return styles.iconOnlyMiddle;\n};\n\nconst resolveVariantCls = ({\n  danger,\n  ghost,\n  type,\n}: {\n  danger: boolean;\n  ghost: boolean;\n  type: NonNullable<ButtonProps['type']>;\n}): string => {\n  if (ghost) {\n    if (danger) return styles.ghostDanger;\n    if (type === 'primary') return styles.ghostPrimary;\n    if (type === 'dashed') return cx(styles.ghostDefault, styles.ghostDashed);\n    return styles.ghostDefault;\n  }\n\n  switch (type) {\n    case 'primary': {\n      return danger ? styles.dangerSolid : styles.variantPrimary;\n    }\n    case 'dashed': {\n      return danger ? cx(styles.variantDashed, styles.dangerOutlined) : styles.variantDashed;\n    }\n    case 'fill': {\n      return danger ? styles.dangerFill : styles.variantFill;\n    }\n    case 'text': {\n      return danger ? cx(styles.variantText, styles.dangerInline) : styles.variantText;\n    }\n    case 'link': {\n      return danger ? cx(styles.variantLink, styles.dangerInline) : styles.variantLink;\n    }\n    default: {\n      return danger ? cx(styles.variantDefault, styles.dangerOutlined) : styles.variantDefault;\n    }\n  }\n};\n\nconst tapAnim = { scale: 0.98 };\nconst motionTransition = {\n  damping: 26,\n  mass: 0.6,\n  stiffness: 600,\n  type: 'spring' as const,\n};\n\nconst Button = ({\n  block,\n  children,\n  className,\n  classNames,\n  danger = false,\n  disabled,\n  ghost = false,\n  href,\n  htmlType = 'button',\n  icon,\n  iconPosition = 'start',\n  loading,\n  onClick,\n  ref,\n  shape = 'default',\n  size = 'middle',\n  styles: userStyles,\n  target,\n  type = 'default',\n  ...rest\n}: ButtonProps) => {\n  const Motion = useMotionComponent();\n  const isDisabled = disabled || loading;\n  const sizeCls = resolveSizeCls(size);\n  const variantCls = resolveVariantCls({ danger, ghost, type });\n  const shapeCls =\n    shape === 'circle' ? styles.shapeCircle : shape === 'round' ? styles.shapeRound : undefined;\n\n  const hasChildren =\n    children !== undefined && children !== null && children !== false && children !== '';\n  const renderIcon = loading || icon;\n  const iconOnly = !hasChildren && !!renderIcon;\n  const iconOnlySizeCls = iconOnly ? resolveIconOnlySizeCls(size) : undefined;\n\n  const composedClassName = cx(\n    styles.base,\n    sizeCls,\n    variantCls,\n    shapeCls,\n    block && styles.block,\n    iconPosition === 'end' && styles.iconEnd,\n    iconOnlySizeCls,\n    className,\n  );\n\n  const spinnerNode = (\n    <span\n      aria-hidden={!loading}\n      style={userStyles?.icon}\n      className={cx(\n        styles.iconBox,\n        styles.spinnerSlot,\n        loading && styles.spinnerSlotShow,\n        iconPosition === 'end' && styles.spinnerSlotEnd,\n        classNames?.icon,\n      )}\n    >\n      <span className={styles.spinner} />\n    </span>\n  );\n\n  const iconNode =\n    icon && !loading ? (\n      <span className={cx(styles.iconBox, classNames?.icon)} style={userStyles?.icon}>\n        {icon}\n      </span>\n    ) : null;\n\n  const inner = (\n    <>\n      {spinnerNode}\n      {iconNode}\n      {children}\n    </>\n  );\n\n  const motionGestures = isDisabled ? {} : { transition: motionTransition, whileTap: tapAnim };\n\n  if (href !== undefined) {\n    const handleAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {\n      if (isDisabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n      <Motion.a\n        aria-disabled={isDisabled || undefined}\n        href={isDisabled ? undefined : href}\n        target={target}\n        {...(rest as any)}\n        className={composedClassName}\n        ref={ref as Ref<HTMLAnchorElement>}\n        onClick={handleAnchorClick}\n        {...motionGestures}\n      >\n        {inner}\n      </Motion.a>\n    );\n  }\n\n  return (\n    <Motion.button\n      type={htmlType}\n      {...(rest as any)}\n      className={composedClassName}\n      disabled={isDisabled}\n      ref={ref as Ref<HTMLButtonElement>}\n      onClick={onClick}\n      {...motionGestures}\n    >\n      {inner}\n    </Motion.button>\n  );\n};\n\nButton.displayName = 'BaseButton';\n\nexport default Button;\n"],"mappings":"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"}

package/es/base-ui/Button/style.d.mts

@@ -18,12 +18,15 @@ declare const styles: {
   variantDefault: string;
   variantPrimary: string;
   variantDashed: string;
+  variantFill: string;
   variantText: string;
   variantLink: string;
   dangerOutlined: string;
   dangerSolid: string;
+  dangerFill: string;
   dangerInline: string;
   ghostDefault: string;
+  ghostDashed: string;
   ghostPrimary: string;
   ghostDanger: string;
   spinner: string;

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

@@ -137,6 +137,19 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       border-color: ${cssVar.colorPrimaryBorder};
       color: ${cssVar.colorPrimaryText};
     }
+  `,
+	variantFill: css`
+    border-color: transparent;
+    color: ${cssVar.colorText};
+    background: ${cssVar.colorFillTertiary};
+
+    &:hover:not(:disabled, [aria-disabled='true']) {
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    &:active:not(:disabled, [aria-disabled='true']) {
+      background: ${cssVar.colorFill};
+    }
   `,
 	variantText: css`
     border-color: transparent;
@@ -183,6 +196,21 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       border-color: ${cssVar.colorErrorActive};
       background: ${cssVar.colorErrorActive};
     }
+  `,
+	dangerFill: css`
+    border-color: transparent;
+    color: ${cssVar.colorError};
+    background: ${cssVar.colorErrorBg};
+
+    &:hover:not(:disabled, [aria-disabled='true']) {
+      color: ${cssVar.colorErrorHover};
+      background: ${cssVar.colorErrorBgHover};
+    }
+
+    &:active:not(:disabled, [aria-disabled='true']) {
+      color: ${cssVar.colorErrorActive};
+      background: ${cssVar.colorErrorBgHover};
+    }
   `,
 	dangerInline: css`
     color: ${cssVar.colorError};
@@ -192,15 +220,21 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	ghostDefault: css`
-    border-color: ${cssVar.colorBorder};
-    color: ${cssVar.colorText};
+    border-color: rgb(255 255 255 / 65%);
+    color: #fff;
     background: transparent;
 
     &:hover:not(:disabled, [aria-disabled='true']) {
-      border-color: ${cssVar.colorPrimaryBorder};
-      color: ${cssVar.colorPrimaryText};
-      background: transparent;
+      border-color: #fff;
+      background: color-mix(in srgb, currentcolor 8%, transparent);
     }
+
+    &:active:not(:disabled, [aria-disabled='true']) {
+      background: color-mix(in srgb, currentcolor 14%, transparent);
+    }
+  `,
+	ghostDashed: css`
+    border-style: dashed;
   `,
 	ghostPrimary: css`
     border-color: ${cssVar.colorPrimary};
@@ -210,7 +244,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     &:hover:not(:disabled, [aria-disabled='true']) {
       border-color: ${cssVar.colorPrimaryHover};
       color: ${cssVar.colorPrimaryHover};
-      background: transparent;
+      background: color-mix(in srgb, currentcolor 8%, transparent);
+    }
+
+    &:active:not(:disabled, [aria-disabled='true']) {
+      background: color-mix(in srgb, currentcolor 14%, transparent);
     }
   `,
 	ghostDanger: css`
@@ -221,7 +259,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     &:hover:not(:disabled, [aria-disabled='true']) {
       border-color: ${cssVar.colorErrorHover};
       color: ${cssVar.colorErrorHover};
-      background: transparent;
+      background: color-mix(in srgb, currentcolor 8%, transparent);
+    }
+
+    &:active:not(:disabled, [aria-disabled='true']) {
+      background: color-mix(in srgb, currentcolor 14%, transparent);
     }
   `,
 	spinner: css`

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  base: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 1px solid ${cssVar.colorBorder};\n\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n\n    transition:\n      color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      pointer-events: none;\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  sizeSmall: css`\n    height: 24px;\n    padding-inline: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n\n  sizeMiddle: css`\n    height: 32px;\n    padding-inline: 14px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 13px;\n  `,\n\n  sizeLarge: css`\n    height: 40px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n\n  shapeCircle: css`\n    padding-inline: 0;\n    border-radius: 50%;\n  `,\n\n  shapeRound: css`\n    border-radius: 999px;\n  `,\n\n  block: css`\n    width: 100%;\n  `,\n\n  iconEnd: css`\n    flex-direction: row-reverse;\n  `,\n\n  iconOnlySmall: css`\n    width: 24px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyMiddle: css`\n    width: 32px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyLarge: css`\n    width: 40px;\n    padding-inline: 0;\n  `,\n\n  iconBox: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  spinnerSlot: css`\n    overflow: hidden;\n\n    width: 0;\n    margin-inline-end: -6px;\n\n    opacity: 0;\n\n    transition:\n      width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n  `,\n\n  spinnerSlotEnd: css`\n    margin-inline: -6px 0;\n  `,\n\n  spinnerSlotShow: css`\n    width: 12px;\n    margin-inline: 0;\n    opacity: 1;\n  `,\n\n  variantDefault: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantPrimary: css`\n    border-color: ${cssVar.colorPrimary};\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorPrimary};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  variantDashed: css`\n    border-style: dashed;\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantText: css`\n    border-color: transparent;\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  variantLink: css`\n    padding-inline: 0;\n    border-color: transparent;\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: transparent;\n    }\n  `,\n\n  dangerOutlined: css`\n    border-color: ${cssVar.colorError};\n    color: ${cssVar.colorError};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n\n  dangerSolid: css`\n    border-color: ${cssVar.colorError};\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorError};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\n  `,\n\n  dangerInline: css`\n    color: ${cssVar.colorError};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n    }\n  `,\n\n  ghostDefault: css`\n    border-color: ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n      background: transparent;\n    }\n  `,\n\n  ghostPrimary: css`\n    border-color: ${cssVar.colorPrimary};\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryHover};\n      color: ${cssVar.colorPrimaryHover};\n      background: transparent;\n    }\n  `,\n\n  ghostDanger: css`\n    border-color: ${cssVar.colorError};\n    color: ${cssVar.colorError};\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      color: ${cssVar.colorErrorHover};\n      background: transparent;\n    }\n  `,\n\n  spinner: css`\n    @keyframes base-button-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: base-button-spin 0.6s linear infinite;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;wBASa,OAAO,YAAY;;;;;;;;;;;;;;;8BAeb,OAAO,mBAAmB;;;;;;;;;;CAWtD,WAAW,GAAG;;;qBAGK,OAAO,eAAe;;;CAIzC,YAAY,GAAG;;;qBAGI,OAAO,eAAe;;;CAIzC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAIvC,aAAa,GAAG;;;;CAKhB,YAAY,GAAG;;;CAIf,OAAO,GAAG;;;CAIV,SAAS,GAAG;;;CAIZ,eAAe,GAAG;;;;CAKlB,gBAAgB,GAAG;;;;CAKnB,eAAe,GAAG;;;;CAKlB,SAAS,GAAG;;;;;CAMZ,aAAa,GAAG;;;;;;;;;;;;;CAchB,gBAAgB,GAAG;;;CAInB,iBAAiB,GAAG;;;;;CAMpB,gBAAgB,GAAG;aACR,OAAO,UAAU;kBACZ,OAAO,iBAAiB;;;sBAGpB,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,gBAAgB,GAAG;oBACD,OAAO,aAAa;aAC3B,OAAO,cAAc;kBAChB,OAAO,aAAa;;;sBAGhB,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAI5C,eAAe,GAAG;;aAEP,OAAO,UAAU;kBACZ,OAAO,iBAAiB;;;sBAGpB,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,aAAa,GAAG;;aAEL,OAAO,UAAU;;;;oBAIV,OAAO,mBAAmB;;;CAI5C,aAAa,GAAG;;;aAGL,OAAO,aAAa;;;;eAIlB,OAAO,kBAAkB;;;;CAKtC,gBAAgB,GAAG;oBACD,OAAO,WAAW;aACzB,OAAO,WAAW;kBACb,OAAO,iBAAiB;;;sBAGpB,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;oBAClB,OAAO,iBAAiB;;;CAI1C,aAAa,GAAG;oBACE,OAAO,WAAW;aACzB,OAAO,cAAc;kBAChB,OAAO,WAAW;;;sBAGd,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAI1C,cAAc,GAAG;aACN,OAAO,WAAW;;;eAGhB,OAAO,gBAAgB;;;CAIpC,cAAc,GAAG;oBACC,OAAO,YAAY;aAC1B,OAAO,UAAU;;;;sBAIR,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;;CAKrC,cAAc,GAAG;oBACC,OAAO,aAAa;aAC3B,OAAO,aAAa;;;;sBAIX,OAAO,kBAAkB;eAChC,OAAO,kBAAkB;;;;CAKtC,aAAa,GAAG;oBACE,OAAO,WAAW;aACzB,OAAO,WAAW;;;;sBAIT,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;;;;CAKpC,SAAS,GAAG;;;;;;;;;;;;;;;;;CAiBb,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  base: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 1px solid ${cssVar.colorBorder};\n\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n\n    transition:\n      color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      pointer-events: none;\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  sizeSmall: css`\n    height: 24px;\n    padding-inline: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n\n  sizeMiddle: css`\n    height: 32px;\n    padding-inline: 14px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 13px;\n  `,\n\n  sizeLarge: css`\n    height: 40px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n\n  shapeCircle: css`\n    padding-inline: 0;\n    border-radius: 50%;\n  `,\n\n  shapeRound: css`\n    border-radius: 999px;\n  `,\n\n  block: css`\n    width: 100%;\n  `,\n\n  iconEnd: css`\n    flex-direction: row-reverse;\n  `,\n\n  iconOnlySmall: css`\n    width: 24px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyMiddle: css`\n    width: 32px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyLarge: css`\n    width: 40px;\n    padding-inline: 0;\n  `,\n\n  iconBox: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  spinnerSlot: css`\n    overflow: hidden;\n\n    width: 0;\n    margin-inline-end: -6px;\n\n    opacity: 0;\n\n    transition:\n      width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n  `,\n\n  spinnerSlotEnd: css`\n    margin-inline: -6px 0;\n  `,\n\n  spinnerSlotShow: css`\n    width: 12px;\n    margin-inline: 0;\n    opacity: 1;\n  `,\n\n  variantDefault: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantPrimary: css`\n    border-color: ${cssVar.colorPrimary};\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorPrimary};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  variantDashed: css`\n    border-style: dashed;\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantFill: css`\n    border-color: transparent;\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  variantText: css`\n    border-color: transparent;\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  variantLink: css`\n    padding-inline: 0;\n    border-color: transparent;\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: transparent;\n    }\n  `,\n\n  dangerOutlined: css`\n    border-color: ${cssVar.colorError};\n    color: ${cssVar.colorError};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n\n  dangerSolid: css`\n    border-color: ${cssVar.colorError};\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorError};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\n  `,\n\n  dangerFill: css`\n    border-color: transparent;\n    color: ${cssVar.colorError};\n    background: ${cssVar.colorErrorBg};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorBgHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorBgHover};\n    }\n  `,\n\n  dangerInline: css`\n    color: ${cssVar.colorError};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n    }\n  `,\n\n  ghostDefault: css`\n    border-color: rgb(255 255 255 / 65%);\n    color: #fff;\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: #fff;\n      background: color-mix(in srgb, currentcolor 8%, transparent);\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: color-mix(in srgb, currentcolor 14%, transparent);\n    }\n  `,\n\n  ghostDashed: css`\n    border-style: dashed;\n  `,\n\n  ghostPrimary: css`\n    border-color: ${cssVar.colorPrimary};\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryHover};\n      color: ${cssVar.colorPrimaryHover};\n      background: color-mix(in srgb, currentcolor 8%, transparent);\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: color-mix(in srgb, currentcolor 14%, transparent);\n    }\n  `,\n\n  ghostDanger: css`\n    border-color: ${cssVar.colorError};\n    color: ${cssVar.colorError};\n    background: transparent;\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      color: ${cssVar.colorErrorHover};\n      background: color-mix(in srgb, currentcolor 8%, transparent);\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: color-mix(in srgb, currentcolor 14%, transparent);\n    }\n  `,\n\n  spinner: css`\n    @keyframes base-button-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: base-button-spin 0.6s linear infinite;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;wBASa,OAAO,YAAY;;;;;;;;;;;;;;;8BAeb,OAAO,mBAAmB;;;;;;;;;;CAWtD,WAAW,GAAG;;;qBAGK,OAAO,eAAe;;;CAIzC,YAAY,GAAG;;;qBAGI,OAAO,eAAe;;;CAIzC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAIvC,aAAa,GAAG;;;;CAKhB,YAAY,GAAG;;;CAIf,OAAO,GAAG;;;CAIV,SAAS,GAAG;;;CAIZ,eAAe,GAAG;;;;CAKlB,gBAAgB,GAAG;;;;CAKnB,eAAe,GAAG;;;;CAKlB,SAAS,GAAG;;;;;CAMZ,aAAa,GAAG;;;;;;;;;;;;;CAchB,gBAAgB,GAAG;;;CAInB,iBAAiB,GAAG;;;;;CAMpB,gBAAgB,GAAG;aACR,OAAO,UAAU;kBACZ,OAAO,iBAAiB;;;sBAGpB,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,gBAAgB,GAAG;oBACD,OAAO,aAAa;aAC3B,OAAO,cAAc;kBAChB,OAAO,aAAa;;;sBAGhB,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAI5C,eAAe,GAAG;;aAEP,OAAO,UAAU;kBACZ,OAAO,iBAAiB;;;sBAGpB,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,aAAa,GAAG;;aAEL,OAAO,UAAU;kBACZ,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;CAInC,aAAa,GAAG;;aAEL,OAAO,UAAU;;;;oBAIV,OAAO,mBAAmB;;;CAI5C,aAAa,GAAG;;;aAGL,OAAO,aAAa;;;;eAIlB,OAAO,kBAAkB;;;;CAKtC,gBAAgB,GAAG;oBACD,OAAO,WAAW;aACzB,OAAO,WAAW;kBACb,OAAO,iBAAiB;;;sBAGpB,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;oBAClB,OAAO,iBAAiB;;;CAI1C,aAAa,GAAG;oBACE,OAAO,WAAW;aACzB,OAAO,cAAc;kBAChB,OAAO,WAAW;;;sBAGd,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAI1C,YAAY,GAAG;;aAEJ,OAAO,WAAW;kBACb,OAAO,aAAa;;;eAGvB,OAAO,gBAAgB;oBAClB,OAAO,kBAAkB;;;;eAI9B,OAAO,iBAAiB;oBACnB,OAAO,kBAAkB;;;CAI3C,cAAc,GAAG;aACN,OAAO,WAAW;;;eAGhB,OAAO,gBAAgB;;;CAIpC,cAAc,GAAG;;;;;;;;;;;;;;CAejB,aAAa,GAAG;;;CAIhB,cAAc,GAAG;oBACC,OAAO,aAAa;aAC3B,OAAO,aAAa;;;;sBAIX,OAAO,kBAAkB;eAChC,OAAO,kBAAkB;;;;;;;;CAStC,aAAa,GAAG;oBACE,OAAO,WAAW;aACzB,OAAO,WAAW;;;;sBAIT,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;;;;;;;;CASpC,SAAS,GAAG;;;;;;;;;;;;;;;;;CAiBb,EAAE"}

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

@@ -1,7 +1,7 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, ReactNode, Ref } from "react";
 
 //#region src/base-ui/Button/type.d.ts
-type ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text';
+type ButtonType = 'default' | 'primary' | 'dashed' | 'fill' | 'link' | 'text';
 type ButtonShape = 'default' | 'circle' | 'round';
 type ButtonSize = 'small' | 'middle' | 'large';
 type ButtonIconPosition = 'start' | 'end';

package/es/base-ui/FloatingPanel/FloatingPanel.d.mts

@@ -0,0 +1,8 @@
+import { FloatingPanelProps } from "./type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/FloatingPanel/FloatingPanel.d.ts
+declare const FloatingPanel: _$react.NamedExoticComponent<FloatingPanelProps>;
+//#endregion
+export { FloatingPanel };
+//# sourceMappingURL=FloatingPanel.d.mts.map

package/es/base-ui/FloatingPanel/FloatingPanel.mjs

@@ -0,0 +1,325 @@
+"use client";
+import { ModalBackdrop, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "../Modal/atoms.mjs";
+import { styles } from "./style.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { X } from "lucide-react";
+//#region src/base-ui/FloatingPanel/FloatingPanel.tsx
+const DEFAULT_MIN_HEIGHT = 180;
+const DEFAULT_MIN_WIDTH = 320;
+const defaultMotionProps = {
+	animate: {
+		opacity: 1,
+		scale: 1,
+		x: 0,
+		y: 0
+	},
+	exit: {
+		opacity: 0,
+		scale: .98,
+		transition: {
+			duration: .14,
+			ease: [
+				.4,
+				0,
+				1,
+				1
+			]
+		},
+		y: 12
+	},
+	initial: {
+		opacity: 0,
+		scale: .98,
+		y: 12
+	},
+	transition: {
+		duration: .2,
+		ease: [
+			.32,
+			.72,
+			0,
+			1
+		]
+	}
+};
+const topMotionProps = {
+	animate: {
+		opacity: 1,
+		scale: 1,
+		x: 0,
+		y: 0
+	},
+	exit: {
+		opacity: 0,
+		scale: .98,
+		transition: {
+			duration: .14,
+			ease: [
+				.4,
+				0,
+				1,
+				1
+			]
+		},
+		y: -12
+	},
+	initial: {
+		opacity: 0,
+		scale: .98,
+		y: -12
+	},
+	transition: {
+		duration: .2,
+		ease: [
+			.32,
+			.72,
+			0,
+			1
+		]
+	}
+};
+const resolveOffset = (offset) => {
+	if (typeof offset === "object") return {
+		x: offset.x ?? 8,
+		y: offset.y ?? 8
+	};
+	return {
+		x: offset,
+		y: offset
+	};
+};
+const getPlacementStyle = (placement, offset) => {
+	const { x, y } = resolveOffset(offset);
+	const isTop = placement.startsWith("top");
+	const isLeft = placement.endsWith("Left");
+	return {
+		alignItems: isTop ? "flex-start" : "flex-end",
+		justifyContent: isLeft ? "flex-start" : "flex-end",
+		paddingBlockEnd: isTop ? void 0 : y,
+		paddingBlockStart: isTop ? y : void 0,
+		paddingInlineEnd: isLeft ? void 0 : x,
+		paddingInlineStart: isLeft ? x : void 0
+	};
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const getViewportMaxSize = () => ({
+	height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),
+	width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16)
+});
+const getResizeHandles = (placement) => {
+	switch (placement) {
+		case "bottomLeft": return [
+			"top",
+			"right",
+			"topRight"
+		];
+		case "topLeft": return [
+			"bottom",
+			"right",
+			"bottomRight"
+		];
+		case "topRight": return [
+			"bottom",
+			"left",
+			"bottomLeft"
+		];
+		default: return [
+			"top",
+			"left",
+			"topLeft"
+		];
+	}
+};
+const getResizeHandleClassName = (s, handle) => {
+	return {
+		bottom: s.resizeHandleBottom,
+		bottomLeft: s.resizeHandleBottomLeft,
+		bottomRight: s.resizeHandleBottomRight,
+		left: s.resizeHandleLeft,
+		right: s.resizeHandleRight,
+		top: s.resizeHandleTop,
+		topLeft: s.resizeHandleTopLeft,
+		topRight: s.resizeHandleTopRight
+	}[handle];
+};
+const resolveResizeSize = ({ handle, maxHeight, maxWidth, minHeight, minWidth, startHeight, startWidth, startX, startY, x, y }) => {
+	const deltaX = x - startX;
+	const deltaY = y - startY;
+	const growsLeft = handle.includes("Left") || handle === "left";
+	const growsRight = handle.includes("Right") || handle === "right";
+	const growsTop = handle.includes("top") || handle === "top";
+	const growsBottom = handle.includes("bottom") || handle === "bottom";
+	const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;
+	return {
+		height: clamp(growsTop ? startHeight - deltaY : growsBottom ? startHeight + deltaY : startHeight, minHeight, maxHeight),
+		width: clamp(nextWidth, minWidth, maxWidth)
+	};
+};
+const FloatingPanel = memo(({ afterClose, ariaLabel, children, className, classNames, closable = true, closeIcon, closeLabel = "Close", defaultOpen, actions, footer, getContainer, height, keyboard = true, mask = false, maskClosable = true, maxHeight, maxWidth, minHeight = DEFAULT_MIN_HEIGHT, minWidth = DEFAULT_MIN_WIDTH, modal = false, motionProps, offset = 8, onClose, onOpenChange, onResize, onResizeEnd, open, placement = "bottomRight", resizable = true, styles: semanticStyles, title, width = 640, zIndex }) => {
+	const s = styles;
+	const isTop = placement.startsWith("top");
+	const container = getContainer === false ? void 0 : getContainer;
+	const [resizeSize, setResizeSize] = useState();
+	const latestResizeSizeRef = useRef(void 0);
+	const resizeCleanupRef = useRef(void 0);
+	const activeResizeSize = resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height ? resizeSize : void 0;
+	useEffect(() => () => {
+		resizeCleanupRef.current?.();
+	}, []);
+	const popupStyle = useMemo(() => ({
+		...getPlacementStyle(placement, offset),
+		...semanticStyles?.wrapper
+	}), [
+		offset,
+		placement,
+		semanticStyles?.wrapper
+	]);
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (!nextOpen) {
+			if (keyboard === false && eventDetails.reason === "escape-key") return;
+			if (maskClosable === false && eventDetails.reason === "outside-press") return;
+			onClose?.();
+		}
+		onOpenChange?.(nextOpen, eventDetails);
+	}, [
+		keyboard,
+		maskClosable,
+		onClose,
+		onOpenChange
+	]);
+	const showHeader = title !== void 0 || actions !== void 0 || closable;
+	const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);
+	const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);
+	const handleResizeStart = useCallback((handle) => (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const panel = event.currentTarget.parentElement;
+		if (!panel) return;
+		const rect = panel.getBoundingClientRect();
+		const viewportMaxSize = getViewportMaxSize();
+		const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);
+		const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const handleResizeMove = (moveEvent) => {
+			const nextSize = resolveResizeSize({
+				handle,
+				maxHeight: resolvedMaxHeight,
+				maxWidth: resolvedMaxWidth,
+				minHeight,
+				minWidth,
+				startHeight: rect.height,
+				startWidth: rect.width,
+				startX,
+				startY,
+				x: moveEvent.clientX,
+				y: moveEvent.clientY
+			});
+			const nextState = {
+				...nextSize,
+				sourceHeight: height,
+				sourceWidth: width
+			};
+			latestResizeSizeRef.current = nextSize;
+			setResizeSize(nextState);
+			onResize?.(nextSize);
+		};
+		const handleResizeEnd = () => {
+			resizeCleanupRef.current?.();
+			resizeCleanupRef.current = void 0;
+			if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);
+		};
+		resizeCleanupRef.current?.();
+		window.addEventListener("pointermove", handleResizeMove);
+		window.addEventListener("pointerup", handleResizeEnd);
+		resizeCleanupRef.current = () => {
+			window.removeEventListener("pointermove", handleResizeMove);
+			window.removeEventListener("pointerup", handleResizeEnd);
+		};
+	}, [
+		height,
+		maxHeight,
+		maxWidth,
+		minHeight,
+		minWidth,
+		onResize,
+		onResizeEnd,
+		width
+	]);
+	return /* @__PURE__ */ jsx(ModalRoot, {
+		defaultOpen,
+		modal,
+		open,
+		zIndex,
+		onExitComplete: afterClose,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(ModalPortal, {
+			container,
+			children: [mask && /* @__PURE__ */ jsx(ModalBackdrop, {
+				className: classNames?.backdrop,
+				style: semanticStyles?.backdrop
+			}), /* @__PURE__ */ jsxs(ModalPopup, {
+				"aria-label": ariaLabel,
+				className: cx(s.wrapper, classNames?.wrapper),
+				motionProps: resolvedMotionProps,
+				panelClassName: cx(s.panel, isTop && s.panelTop, className, classNames?.panel),
+				popupStyle,
+				width: activeResizeSize?.width ?? width,
+				style: {
+					height: activeResizeSize?.height ?? height,
+					minHeight,
+					minWidth,
+					width: activeResizeSize?.width,
+					...semanticStyles?.panel
+				},
+				children: [
+					resizable && resizeHandles.map((handle) => /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						"data-floating-panel-resize-handle": handle,
+						style: semanticStyles?.resizeHandle,
+						className: cx(s.resizeHandle, getResizeHandleClassName(s, handle), classNames?.resizeHandle),
+						onPointerDown: handleResizeStart(handle)
+					}, handle)),
+					showHeader && /* @__PURE__ */ jsxs(ModalHeader, {
+						className: cx(s.header, classNames?.header),
+						style: semanticStyles?.header,
+						children: [title !== void 0 ? /* @__PURE__ */ jsx(ModalTitle, {
+							className: cx(s.title, classNames?.title),
+							style: semanticStyles?.title,
+							children: title
+						}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+							className: s.headerActions,
+							children: [actions && /* @__PURE__ */ jsx("div", {
+								className: cx(s.actions, classNames?.actions),
+								style: semanticStyles?.actions,
+								children: actions
+							}), closable && /* @__PURE__ */ jsx(ModalClose, {
+								"aria-label": closeLabel,
+								className: cx(s.close, classNames?.close),
+								style: semanticStyles?.close,
+								children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 16 })
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx(ModalContent, {
+						className: cx(s.body, classNames?.body),
+						style: semanticStyles?.body,
+						children
+					}),
+					footer && /* @__PURE__ */ jsx(ModalFooter, {
+						className: cx(s.footer, classNames?.footer),
+						style: semanticStyles?.footer,
+						children: footer
+					})
+				]
+			})]
+		})
+	});
+});
+FloatingPanel.displayName = "FloatingPanel";
+//#endregion
+export { FloatingPanel };
+
+//# sourceMappingURL=FloatingPanel.mjs.map

package/es/base-ui/FloatingPanel/FloatingPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport type { MotionProps } from 'motion/react';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport type { ModalRootProps } from '../Modal';\nimport {\n  ModalBackdrop,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from '../Modal';\nimport { styles } from './style';\nimport type {\n  FloatingPanelOffset,\n  FloatingPanelPlacement,\n  FloatingPanelProps,\n  FloatingPanelResizeHandle,\n  FloatingPanelSize,\n} from './type';\n\nconst DEFAULT_MIN_HEIGHT = 180;\nconst DEFAULT_MIN_WIDTH = 320;\n\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\n  sourceHeight?: number | string;\n  sourceWidth?: number | string;\n}\n\nconst defaultMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: 12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: 12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst topMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: -12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: -12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst resolveOffset = (offset: FloatingPanelOffset) => {\n  if (typeof offset === 'object') {\n    return {\n      x: offset.x ?? 8,\n      y: offset.y ?? 8,\n    };\n  }\n\n  return { x: offset, y: offset };\n};\n\nconst getPlacementStyle = (\n  placement: FloatingPanelPlacement,\n  offset: FloatingPanelOffset,\n): CSSProperties => {\n  const { x, y } = resolveOffset(offset);\n  const isTop = placement.startsWith('top');\n  const isLeft = placement.endsWith('Left');\n\n  return {\n    alignItems: isTop ? 'flex-start' : 'flex-end',\n    justifyContent: isLeft ? 'flex-start' : 'flex-end',\n    paddingBlockEnd: isTop ? undefined : y,\n    paddingBlockStart: isTop ? y : undefined,\n    paddingInlineEnd: isLeft ? undefined : x,\n    paddingInlineStart: isLeft ? x : undefined,\n  };\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst getViewportMaxSize = () => ({\n  height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\n  width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\n});\n\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\n  switch (placement) {\n    case 'bottomLeft': {\n      return ['top', 'right', 'topRight'];\n    }\n    case 'topLeft': {\n      return ['bottom', 'right', 'bottomRight'];\n    }\n    case 'topRight': {\n      return ['bottom', 'left', 'bottomLeft'];\n    }\n    default: {\n      return ['top', 'left', 'topLeft'];\n    }\n  }\n};\n\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\n  const handleClassMap: Record<FloatingPanelResizeHandle, string> = {\n    bottom: s.resizeHandleBottom,\n    bottomLeft: s.resizeHandleBottomLeft,\n    bottomRight: s.resizeHandleBottomRight,\n    left: s.resizeHandleLeft,\n    right: s.resizeHandleRight,\n    top: s.resizeHandleTop,\n    topLeft: s.resizeHandleTopLeft,\n    topRight: s.resizeHandleTopRight,\n  };\n\n  return handleClassMap[handle];\n};\n\nconst resolveResizeSize = ({\n  handle,\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  startHeight,\n  startWidth,\n  startX,\n  startY,\n  x,\n  y,\n}: {\n  handle: FloatingPanelResizeHandle;\n  maxHeight: number;\n  maxWidth: number;\n  minHeight: number;\n  minWidth: number;\n  startHeight: number;\n  startWidth: number;\n  startX: number;\n  startY: number;\n  x: number;\n  y: number;\n}): FloatingPanelSize => {\n  const deltaX = x - startX;\n  const deltaY = y - startY;\n  const growsLeft = handle.includes('Left') || handle === 'left';\n  const growsRight = handle.includes('Right') || handle === 'right';\n  const growsTop = handle.includes('top') || handle === 'top';\n  const growsBottom = handle.includes('bottom') || handle === 'bottom';\n\n  const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\n  const nextHeight = growsTop\n    ? startHeight - deltaY\n    : growsBottom\n      ? startHeight + deltaY\n      : startHeight;\n\n  return {\n    height: clamp(nextHeight, minHeight, maxHeight),\n    width: clamp(nextWidth, minWidth, maxWidth),\n  };\n};\n\nconst FloatingPanel = memo<FloatingPanelProps>(\n  ({\n    afterClose,\n    ariaLabel,\n    children,\n    className,\n    classNames,\n    closable = true,\n    closeIcon,\n    closeLabel = 'Close',\n    defaultOpen,\n    actions,\n    footer,\n    getContainer,\n    height,\n    keyboard = true,\n    mask = false,\n    maskClosable = true,\n    maxHeight,\n    maxWidth,\n    minHeight = DEFAULT_MIN_HEIGHT,\n    minWidth = DEFAULT_MIN_WIDTH,\n    modal = false,\n    motionProps,\n    offset = 8,\n    onClose,\n    onOpenChange,\n    onResize,\n    onResizeEnd,\n    open,\n    placement = 'bottomRight',\n    resizable = true,\n    styles: semanticStyles,\n    title,\n    width = 640,\n    zIndex,\n  }) => {\n    const s = styles;\n    const isTop = placement.startsWith('top');\n    const container = getContainer === false ? undefined : getContainer;\n    const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\n    const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\n    const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\n    const activeResizeSize =\n      resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\n        ? resizeSize\n        : undefined;\n\n    useEffect(\n      () => () => {\n        resizeCleanupRef.current?.();\n      },\n      [],\n    );\n\n    const popupStyle = useMemo(\n      () => ({\n        ...getPlacementStyle(placement, offset),\n        ...semanticStyles?.wrapper,\n      }),\n      [offset, placement, semanticStyles?.wrapper],\n    );\n\n    const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (!nextOpen) {\n          if (keyboard === false && eventDetails.reason === 'escape-key') return;\n          if (maskClosable === false && eventDetails.reason === 'outside-press') return;\n          onClose?.();\n        }\n\n        onOpenChange?.(nextOpen, eventDetails);\n      },\n      [keyboard, maskClosable, onClose, onOpenChange],\n    );\n\n    const showHeader = title !== undefined || actions !== undefined || closable;\n    const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\n    const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\n\n    const handleResizeStart = useCallback(\n      (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const panel = event.currentTarget.parentElement;\n        if (!panel) return;\n\n        const rect = panel.getBoundingClientRect();\n        const viewportMaxSize = getViewportMaxSize();\n        const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\n        const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\n        const startX = event.clientX;\n        const startY = event.clientY;\n\n        const handleResizeMove = (moveEvent: PointerEvent) => {\n          const nextSize = resolveResizeSize({\n            handle,\n            maxHeight: resolvedMaxHeight,\n            maxWidth: resolvedMaxWidth,\n            minHeight,\n            minWidth,\n            startHeight: rect.height,\n            startWidth: rect.width,\n            startX,\n            startY,\n            x: moveEvent.clientX,\n            y: moveEvent.clientY,\n          });\n\n          const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\n          latestResizeSizeRef.current = nextSize;\n          setResizeSize(nextState);\n          onResize?.(nextSize);\n        };\n\n        const handleResizeEnd = () => {\n          resizeCleanupRef.current?.();\n          resizeCleanupRef.current = undefined;\n\n          if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\n        };\n\n        resizeCleanupRef.current?.();\n        window.addEventListener('pointermove', handleResizeMove);\n        window.addEventListener('pointerup', handleResizeEnd);\n        resizeCleanupRef.current = () => {\n          window.removeEventListener('pointermove', handleResizeMove);\n          window.removeEventListener('pointerup', handleResizeEnd);\n        };\n      },\n      [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\n    );\n\n    return (\n      <ModalRoot\n        defaultOpen={defaultOpen}\n        modal={modal}\n        open={open}\n        zIndex={zIndex}\n        onExitComplete={afterClose}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <ModalPopup\n            aria-label={ariaLabel}\n            className={cx(s.wrapper, classNames?.wrapper)}\n            motionProps={resolvedMotionProps}\n            panelClassName={cx(s.panel, isTop && s.panelTop, className, classNames?.panel)}\n            popupStyle={popupStyle}\n            width={activeResizeSize?.width ?? width}\n            style={{\n              height: activeResizeSize?.height ?? height,\n              minHeight,\n              minWidth,\n              width: activeResizeSize?.width,\n              ...semanticStyles?.panel,\n            }}\n          >\n            {resizable &&\n              resizeHandles.map((handle) => (\n                <div\n                  aria-hidden\n                  data-floating-panel-resize-handle={handle}\n                  key={handle}\n                  style={semanticStyles?.resizeHandle}\n                  className={cx(\n                    s.resizeHandle,\n                    getResizeHandleClassName(s, handle),\n                    classNames?.resizeHandle,\n                  )}\n                  onPointerDown={handleResizeStart(handle)}\n                />\n              ))}\n            {showHeader && (\n              <ModalHeader\n                className={cx(s.header, classNames?.header)}\n                style={semanticStyles?.header}\n              >\n                {title !== undefined ? (\n                  <ModalTitle\n                    className={cx(s.title, classNames?.title)}\n                    style={semanticStyles?.title}\n                  >\n                    {title}\n                  </ModalTitle>\n                ) : (\n                  <span />\n                )}\n                <div className={s.headerActions}>\n                  {actions && (\n                    <div\n                      className={cx(s.actions, classNames?.actions)}\n                      style={semanticStyles?.actions}\n                    >\n                      {actions}\n                    </div>\n                  )}\n                  {closable && (\n                    <ModalClose\n                      aria-label={closeLabel}\n                      className={cx(s.close, classNames?.close)}\n                      style={semanticStyles?.close}\n                    >\n                      {closeIcon ?? <X size={16} />}\n                    </ModalClose>\n                  )}\n                </div>\n              </ModalHeader>\n            )}\n            <ModalContent className={cx(s.body, classNames?.body)} style={semanticStyles?.body}>\n              {children}\n            </ModalContent>\n            {footer && (\n              <ModalFooter\n                className={cx(s.footer, classNames?.footer)}\n                style={semanticStyles?.footer}\n              >\n                {footer}\n              </ModalFooter>\n            )}\n          </ModalPopup>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nFloatingPanel.displayName = 'FloatingPanel';\n\nexport { FloatingPanel };\n"],"mappings":"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"}

package/es/base-ui/FloatingPanel/index.d.mts

@@ -0,0 +1,2 @@
+import { FloatingPanelOffset, FloatingPanelPlacement, FloatingPanelProps } from "./type.mjs";
+import { FloatingPanel } from "./FloatingPanel.mjs";

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

@@ -0,0 +1,177 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/FloatingPanel/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	body: css`
+    overflow: hidden auto;
+    flex: 1;
+    min-height: 0;
+    padding: 0;
+  `,
+	close: css`
+    position: static;
+
+    width: 32px;
+    height: 32px;
+    margin-inline-end: -4px;
+    border-radius: 8px;
+  `,
+	actions: css`
+    display: flex;
+    flex: none;
+    gap: 4px;
+    align-items: center;
+  `,
+	footer: css`
+    flex: none;
+    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	header: css`
+    flex: none;
+    min-height: 48px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	headerActions: css`
+    display: flex;
+    flex: none;
+    gap: 4px;
+    align-items: center;
+  `,
+	panel: css`
+    transform-origin: 100% 100%;
+
+    width: calc(100dvw - 32px);
+    max-height: calc(100dvh - 32px);
+    border-radius: 12px;
+
+    box-shadow:
+      0 6px 24px 0 rgb(0 0 0 / 8%),
+      0 2px 6px 0 rgb(0 0 0 / 4%);
+  `,
+	panelTop: css`
+    transform-origin: 100% 0;
+  `,
+	resizeHandle: css`
+    touch-action: none;
+    position: absolute;
+    z-index: 1;
+    background: transparent;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+
+      border-radius: 999px;
+
+      opacity: 0;
+      background: ${cssVar.colorPrimary};
+
+      transition: opacity 120ms ease;
+    }
+
+    &:hover::after,
+    &:focus-visible::after {
+      opacity: 0.55;
+    }
+  `,
+	resizeHandleBottom: css`
+    cursor: ns-resize;
+    inset-block-end: -4px;
+    inset-inline: 16px;
+    height: 8px;
+
+    &::after {
+      inset-block-end: 3px;
+      inset-inline: 0;
+      height: 2px;
+    }
+  `,
+	resizeHandleBottomLeft: css`
+    cursor: nesw-resize;
+
+    inset-block-end: -5px;
+    inset-inline-start: -5px;
+
+    width: 16px;
+    height: 16px;
+  `,
+	resizeHandleBottomRight: css`
+    cursor: nwse-resize;
+
+    inset-block-end: -5px;
+    inset-inline-end: -5px;
+
+    width: 16px;
+    height: 16px;
+  `,
+	resizeHandleLeft: css`
+    cursor: ew-resize;
+    inset-block: 16px;
+    inset-inline-start: -4px;
+    width: 8px;
+
+    &::after {
+      inset-block: 0;
+      inset-inline-start: 3px;
+      width: 2px;
+    }
+  `,
+	resizeHandleRight: css`
+    cursor: ew-resize;
+    inset-block: 16px;
+    inset-inline-end: -4px;
+    width: 8px;
+
+    &::after {
+      inset-block: 0;
+      inset-inline-end: 3px;
+      width: 2px;
+    }
+  `,
+	resizeHandleTop: css`
+    cursor: ns-resize;
+    inset-block-start: -4px;
+    inset-inline: 16px;
+    height: 8px;
+
+    &::after {
+      inset-block-start: 3px;
+      inset-inline: 0;
+      height: 2px;
+    }
+  `,
+	resizeHandleTopLeft: css`
+    cursor: nwse-resize;
+
+    inset-block-start: -5px;
+    inset-inline-start: -5px;
+
+    width: 16px;
+    height: 16px;
+  `,
+	resizeHandleTopRight: css`
+    cursor: nesw-resize;
+
+    inset-block-start: -5px;
+    inset-inline-end: -5px;
+
+    width: 16px;
+    height: 16px;
+  `,
+	title: css`
+    overflow: hidden;
+    flex: 1;
+
+    min-width: 0;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	wrapper: css`
+    overflow: hidden;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    overflow: hidden auto;\n    flex: 1;\n    min-height: 0;\n    padding: 0;\n  `,\n  close: css`\n    position: static;\n\n    width: 32px;\n    height: 32px;\n    margin-inline-end: -4px;\n    border-radius: 8px;\n  `,\n  actions: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n  `,\n  footer: css`\n    flex: none;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  header: css`\n    flex: none;\n    min-height: 48px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerActions: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n  `,\n  panel: css`\n    transform-origin: 100% 100%;\n\n    width: calc(100dvw - 32px);\n    max-height: calc(100dvh - 32px);\n    border-radius: 12px;\n\n    box-shadow:\n      0 6px 24px 0 rgb(0 0 0 / 8%),\n      0 2px 6px 0 rgb(0 0 0 / 4%);\n  `,\n  panelTop: css`\n    transform-origin: 100% 0;\n  `,\n  resizeHandle: css`\n    touch-action: none;\n    position: absolute;\n    z-index: 1;\n    background: transparent;\n\n    &::after {\n      content: '';\n\n      position: absolute;\n\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorPrimary};\n\n      transition: opacity 120ms ease;\n    }\n\n    &:hover::after,\n    &:focus-visible::after {\n      opacity: 0.55;\n    }\n  `,\n  resizeHandleBottom: css`\n    cursor: ns-resize;\n    inset-block-end: -4px;\n    inset-inline: 16px;\n    height: 8px;\n\n    &::after {\n      inset-block-end: 3px;\n      inset-inline: 0;\n      height: 2px;\n    }\n  `,\n  resizeHandleBottomLeft: css`\n    cursor: nesw-resize;\n\n    inset-block-end: -5px;\n    inset-inline-start: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleBottomRight: css`\n    cursor: nwse-resize;\n\n    inset-block-end: -5px;\n    inset-inline-end: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleLeft: css`\n    cursor: ew-resize;\n    inset-block: 16px;\n    inset-inline-start: -4px;\n    width: 8px;\n\n    &::after {\n      inset-block: 0;\n      inset-inline-start: 3px;\n      width: 2px;\n    }\n  `,\n  resizeHandleRight: css`\n    cursor: ew-resize;\n    inset-block: 16px;\n    inset-inline-end: -4px;\n    width: 8px;\n\n    &::after {\n      inset-block: 0;\n      inset-inline-end: 3px;\n      width: 2px;\n    }\n  `,\n  resizeHandleTop: css`\n    cursor: ns-resize;\n    inset-block-start: -4px;\n    inset-inline: 16px;\n    height: 8px;\n\n    &::after {\n      inset-block-start: 3px;\n      inset-inline: 0;\n      height: 2px;\n    }\n  `,\n  resizeHandleTopLeft: css`\n    cursor: nwse-resize;\n\n    inset-block-start: -5px;\n    inset-inline-start: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleTopRight: css`\n    cursor: nesw-resize;\n\n    inset-block-start: -5px;\n    inset-inline-end: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  title: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-width: 0;\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  wrapper: css`\n    overflow: hidden;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;;;;;CAQV,SAAS,GAAG;;;;;;CAMZ,QAAQ,GAAG;;oCAEuB,OAAO,qBAAqB;;CAE9D,QAAQ,GAAG;;;kCAGqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;CAMlB,OAAO,GAAG;;;;;;;;;;;CAWV,UAAU,GAAG;;;CAGb,cAAc,GAAG;;;;;;;;;;;;;;oBAcC,OAAO,aAAa;;;;;;;;;;CAUtC,oBAAoB,GAAG;;;;;;;;;;;;CAYvB,wBAAwB,GAAG;;;;;;;;;CAS3B,yBAAyB,GAAG;;;;;;;;;CAS5B,kBAAkB,GAAG;;;;;;;;;;;;CAYrB,mBAAmB,GAAG;;;;;;;;;;;;CAYtB,iBAAiB,GAAG;;;;;;;;;;;;CAYpB,qBAAqB,GAAG;;;;;;;;;CASxB,sBAAsB,GAAG;;;;;;;;;CASzB,OAAO,GAAG;;;;;;;;;CASV,SAAS,GAAG;;;CAGb,EAAE"}

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

@@ -0,0 +1,75 @@
+import { ModalRootProps } from "../Modal/atoms.mjs";
+import { CSSProperties, ReactNode } from "react";
+import { MotionProps } from "motion/react";
+
+//#region src/base-ui/FloatingPanel/type.d.ts
+type FloatingPanelPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+type FloatingPanelOffset = number | string | {
+  x?: number | string;
+  y?: number | string;
+};
+interface FloatingPanelSize {
+  height: number;
+  width: number;
+}
+interface FloatingPanelProps {
+  actions?: ReactNode;
+  afterClose?: () => void;
+  ariaLabel?: string;
+  children?: ReactNode;
+  className?: string;
+  classNames?: {
+    backdrop?: string;
+    actions?: string;
+    body?: string;
+    close?: string;
+    footer?: string;
+    header?: string;
+    panel?: string;
+    resizeHandle?: string;
+    title?: string;
+    wrapper?: string;
+  };
+  closable?: boolean;
+  closeIcon?: ReactNode;
+  closeLabel?: string;
+  defaultOpen?: boolean;
+  footer?: ReactNode;
+  getContainer?: false | HTMLElement | null;
+  height?: number | string;
+  keyboard?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  maxHeight?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  minWidth?: number;
+  modal?: boolean;
+  motionProps?: MotionProps;
+  offset?: FloatingPanelOffset;
+  onClose?: () => void;
+  onOpenChange?: ModalRootProps['onOpenChange'];
+  onResize?: (size: FloatingPanelSize) => void;
+  onResizeEnd?: (size: FloatingPanelSize) => void;
+  open?: boolean;
+  placement?: FloatingPanelPlacement;
+  resizable?: boolean;
+  styles?: {
+    actions?: CSSProperties;
+    backdrop?: CSSProperties;
+    body?: CSSProperties;
+    close?: CSSProperties;
+    footer?: CSSProperties;
+    header?: CSSProperties;
+    panel?: CSSProperties;
+    resizeHandle?: CSSProperties;
+    title?: CSSProperties;
+    wrapper?: CSSProperties;
+  };
+  title?: ReactNode;
+  width?: number | string;
+  zIndex?: number;
+}
+//#endregion
+export { FloatingPanelOffset, FloatingPanelPlacement, FloatingPanelProps };
+//# sourceMappingURL=type.d.mts.map

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

@@ -136,7 +136,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	listFilled: css`
     border: 1px solid ${cssVar.colorFillQuaternary};
-    background: ${cssVar.colorFillTertiary};
+    background: ${cssVar.colorBgLayout};
   `,
 	listGlass: staticStylish.blur,
 	listOutlined: css`

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset-block-start: var(--active-item-top);\n    inset-inline-start: var(--active-item-left);\n\n    width: var(--active-item-width);\n    height: var(--active-item-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-pressed]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-pressed] {\n      color: ${cssVar.colorText};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  itemBlock: css`\n    flex: 1 1 0;\n  `,\n  itemIcon: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  itemLabel: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  itemLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  itemMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  itemSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 4px;\n    align-items: center;\n    align-self: flex-start;\n\n    box-sizing: border-box;\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n      align-self: stretch;\n    }\n  `,\n  listBlock: css`\n    display: flex;\n    align-self: stretch;\n    width: 100%;\n  `,\n  listFilled: css`\n    border: 1px solid ${cssVar.colorFillQuaternary};\n    background: ${cssVar.colorFillTertiary};\n  `,\n  listGlass: lobeStaticStylish.blur,\n  listOutlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: transparent;\n  `,\n  listShadow: lobeStaticStylish.shadow,\n  root: css`\n    display: inline-flex;\n\n    &[data-block='true'] {\n      display: flex;\n      width: 100%;\n    }\n  `,\n}));\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    block: false,\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.listBlock,\n    },\n    glass: {\n      false: null,\n      true: styles.listGlass,\n    },\n    shadow: {\n      false: null,\n      true: styles.listShadow,\n    },\n    variant: {\n      filled: styles.listFilled,\n      outlined: styles.listOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: {\n    block: false,\n    size: 'middle',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.itemBlock,\n    },\n    size: {\n      large: styles.itemLarge,\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;;;;;qBAUK,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;kCAET,OAAO,cAAc;;;;;;;;CAQrD,MAAM,GAAG;;;;;;;;;;;;;;;;;aAiBE,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;uBAQT,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;;eAKtC,OAAO,UAAU;;;;;eAKjB,OAAO,kBAAkB;;;;;;;CAOtC,WAAW,GAAG;;;CAGd,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,YAAY,GAAG;;;qBAGI,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,eAAe;;;;;;;;CAQzC,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;wBACO,OAAO,oBAAoB;kBACjC,OAAO,kBAAkB;;CAEzC,WAAWA,cAAkB;CAC7B,cAAc,GAAG;wBACK,OAAO,qBAAqB;;;CAGlD,YAAYA,cAAkB;CAC9B,MAAM,GAAG;;;;;;;;CAQV,EAAE;AAEH,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CACD,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;EACP;CACD,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset-block-start: var(--active-item-top);\n    inset-inline-start: var(--active-item-left);\n\n    width: var(--active-item-width);\n    height: var(--active-item-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-pressed]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-pressed] {\n      color: ${cssVar.colorText};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  itemBlock: css`\n    flex: 1 1 0;\n  `,\n  itemIcon: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  itemLabel: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  itemLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  itemMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  itemSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 4px;\n    align-items: center;\n    align-self: flex-start;\n\n    box-sizing: border-box;\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n      align-self: stretch;\n    }\n  `,\n  listBlock: css`\n    display: flex;\n    align-self: stretch;\n    width: 100%;\n  `,\n  listFilled: css`\n    border: 1px solid ${cssVar.colorFillQuaternary};\n    background: ${cssVar.colorBgLayout};\n  `,\n  listGlass: lobeStaticStylish.blur,\n  listOutlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: transparent;\n  `,\n  listShadow: lobeStaticStylish.shadow,\n  root: css`\n    display: inline-flex;\n\n    &[data-block='true'] {\n      display: flex;\n      width: 100%;\n    }\n  `,\n}));\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    block: false,\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.listBlock,\n    },\n    glass: {\n      false: null,\n      true: styles.listGlass,\n    },\n    shadow: {\n      false: null,\n      true: styles.listShadow,\n    },\n    variant: {\n      filled: styles.listFilled,\n      outlined: styles.listOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: {\n    block: false,\n    size: 'middle',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.itemBlock,\n    },\n    size: {\n      large: styles.itemLarge,\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;;;;;qBAUK,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;kCAET,OAAO,cAAc;;;;;;;;CAQrD,MAAM,GAAG;;;;;;;;;;;;;;;;;aAiBE,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;uBAQT,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;;eAKtC,OAAO,UAAU;;;;;eAKjB,OAAO,kBAAkB;;;;;;;CAOtC,WAAW,GAAG;;;CAGd,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,YAAY,GAAG;;;qBAGI,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,eAAe;;;;;;;;CAQzC,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;wBACO,OAAO,oBAAoB;kBACjC,OAAO,cAAc;;CAErC,WAAWA,cAAkB;CAC7B,cAAc,GAAG;wBACK,OAAO,qBAAqB;;;CAGlD,YAAYA,cAAkB;CAC9B,MAAM,GAAG;;;;;;;;CAQV,EAAE;AAEH,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CACD,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;EACP;CACD,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACF;CACF,CAAC"}

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

@@ -66,7 +66,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     padding: 3px;
     border-radius: ${cssVar.borderRadiusLG};
 
-    background: ${cssVar.colorFillTertiary};
+    background: ${cssVar.colorBgLayout};
 
     &[data-orientation='vertical'] {
       align-self: stretch;

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorPoint: css`\n    inset-block-end: 6px;\n    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n\n    background: ${cssVar.colorPrimary};\n  `,\n  indicatorRounded: css`\n    inset-block-start: var(--active-tab-top);\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: var(--active-tab-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n  `,\n  indicatorSquare: css`\n    inset-block-end: 0;\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: 2px;\n\n    background: ${cssVar.colorPrimary};\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 2px;\n    align-items: center;\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  listRounded: css`\n    gap: 4px;\n    align-self: flex-start;\n\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: ${cssVar.colorFillTertiary};\n\n    &[data-orientation='vertical'] {\n      align-self: stretch;\n    }\n  `,\n  listSquare: css`\n    gap: 16px;\n    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\n\n    &[data-orientation='vertical'] {\n      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    padding-block-start: 12px;\n    outline: none;\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 2px;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    &[data-orientation='vertical'] {\n      flex-direction: row;\n    }\n  `,\n  tab: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-active] {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  tabLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  tabMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  tabPoint: css`\n    height: auto;\n    padding-block: 8px 14px;\n  `,\n  tabSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  tabSquare: css`\n    height: auto;\n    padding-block: 8px;\n    border-radius: 0;\n  `,\n}));\n\nexport const tabVariants = cva(styles.tab, {\n  defaultVariants: {\n    size: 'middle',\n    variant: 'rounded',\n  },\n  variants: {\n    size: {\n      large: styles.tabLarge,\n      middle: styles.tabMiddle,\n      small: styles.tabSmall,\n    },\n    variant: {\n      point: styles.tabPoint,\n      rounded: null,\n      square: styles.tabSquare,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: styles.indicatorPoint,\n      rounded: styles.indicatorRounded,\n      square: styles.indicatorSquare,\n    },\n  },\n});\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: null,\n      rounded: styles.listRounded,\n      square: styles.listSquare,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;CAEpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;CAEzC,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;CAEpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,aAAa,GAAG;;;;;qBAKG,OAAO,eAAe;;kBAEzB,OAAO,kBAAkB;;;;;;CAMzC,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;;;uBAKW,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;CAInD,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;2BAQL,OAAO,mBAAmB;;;;;eAKtC,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;;CAIb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;;;CAKf,EAAE;AAEH,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;GAChB;EACF;CACF,CAAC;AAEF,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;EAChB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS,OAAO;EAChB,QAAQ,OAAO;EAChB,EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorPoint: css`\n    inset-block-end: 6px;\n    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n\n    background: ${cssVar.colorPrimary};\n  `,\n  indicatorRounded: css`\n    inset-block-start: var(--active-tab-top);\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: var(--active-tab-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n  `,\n  indicatorSquare: css`\n    inset-block-end: 0;\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: 2px;\n\n    background: ${cssVar.colorPrimary};\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 2px;\n    align-items: center;\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  listRounded: css`\n    gap: 4px;\n    align-self: flex-start;\n\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: ${cssVar.colorBgLayout};\n\n    &[data-orientation='vertical'] {\n      align-self: stretch;\n    }\n  `,\n  listSquare: css`\n    gap: 16px;\n    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\n\n    &[data-orientation='vertical'] {\n      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    padding-block-start: 12px;\n    outline: none;\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 2px;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    &[data-orientation='vertical'] {\n      flex-direction: row;\n    }\n  `,\n  tab: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-active] {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  tabLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  tabMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  tabPoint: css`\n    height: auto;\n    padding-block: 8px 14px;\n  `,\n  tabSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  tabSquare: css`\n    height: auto;\n    padding-block: 8px;\n    border-radius: 0;\n  `,\n}));\n\nexport const tabVariants = cva(styles.tab, {\n  defaultVariants: {\n    size: 'middle',\n    variant: 'rounded',\n  },\n  variants: {\n    size: {\n      large: styles.tabLarge,\n      middle: styles.tabMiddle,\n      small: styles.tabSmall,\n    },\n    variant: {\n      point: styles.tabPoint,\n      rounded: null,\n      square: styles.tabSquare,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: styles.indicatorPoint,\n      rounded: styles.indicatorRounded,\n      square: styles.indicatorSquare,\n    },\n  },\n});\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: null,\n      rounded: styles.listRounded,\n      square: styles.listSquare,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;CAEpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;CAEzC,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;CAEpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,aAAa,GAAG;;;;;qBAKG,OAAO,eAAe;;kBAEzB,OAAO,cAAc;;;;;;CAMrC,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;;;uBAKW,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;CAInD,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;2BAQL,OAAO,mBAAmB;;;;;eAKtC,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;;CAIb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;;;CAKf,EAAE;AAEH,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;GAChB;EACF;CACF,CAAC;AAEF,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;EAChB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS,OAAO;EAChB,QAAQ,OAAO;EAChB,EACF;CACF,CAAC"}

package/es/base-ui/index.d.mts

@@ -26,14 +26,16 @@ import { ButtonIconPosition, ButtonProps, ButtonShape, ButtonSize, ButtonType }
 import { Button } from "./Button/Button.mjs";
 import { SplitButtonMenuProps, SplitButtonProps, _default } from "./Button/SplitButton.mjs";
 import { styles } from "./Button/style.mjs";
-import { FloatingSheetProps } from "./FloatingSheet/type.mjs";
-import { FloatingSheet } from "./FloatingSheet/FloatingSheet.mjs";
 import { ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalContent, ModalContentProps, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, useModalActions, useModalOpen } from "./Modal/atoms.mjs";
 import { backdropTransition, modalMotionConfig } from "./Modal/constants.mjs";
 import { BaseModalProps, ImperativeModalProps, ModalComponentProps, ModalConfirmConfig, ModalContextValue, ModalInstance } from "./Modal/type.mjs";
 import { ModalContext, useModalContext } from "./Modal/context.mjs";
 import { ModalHost, ModalHostProps, ModalSystem, confirmModal, createModal, createModalSystem } from "./Modal/imperative.mjs";
 import { Modal } from "./Modal/Modal.mjs";
+import { FloatingPanelOffset, FloatingPanelPlacement, FloatingPanelProps } from "./FloatingPanel/type.mjs";
+import { FloatingPanel } from "./FloatingPanel/FloatingPanel.mjs";
+import { FloatingSheetProps } from "./FloatingSheet/type.mjs";
+import { FloatingSheet } from "./FloatingSheet/FloatingSheet.mjs";
 import { SegmentedClassNames, SegmentedOption, SegmentedOptions, SegmentedOrientation, SegmentedProps, SegmentedSize, SegmentedStyles, SegmentedVariant } from "./Segmented/type.mjs";
 import { SegmentedIndicator, SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedItemProps, SegmentedRoot, SegmentedRootProps } from "./Segmented/atoms.mjs";
 import { Segmented } from "./Segmented/Segmented.mjs";
@@ -48,4 +50,4 @@ import { TabsClassNames, TabsIndicatorProps, TabsItem, TabsListProps, TabsOrient
 import { styles as styles$2 } from "./Tabs/style.mjs";
 import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, useTabsContext } from "./Tabs/atoms.mjs";
 import { Tabs } from "./Tabs/Tabs.mjs";
-export { BaseModalProps, Button, ButtonIconPosition, ButtonProps, ButtonShape, ButtonSize, ButtonType, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuItem, ContextMenuTrigger, DropdownItem, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuFooter, DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuHeader, DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuScrollViewportProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, DropdownMenuTriggerProps, FloatingSheet, FloatingSheetProps, IconSpaceMode, ImperativeModalProps, Modal, ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalComponentProps, ModalConfirmConfig, ModalContent, ModalContentProps, ModalContext, ModalContextValue, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalHost, ModalHostProps, ModalInstance, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalSystem, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, PopoverArrow, PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, PopoverBackdropProps, PopoverContextValue, PopoverGroup, PopoverPlacement, PopoverPopup, PopoverPopupAtomProps, PopoverPopupProps, PopoverPortal, PopoverPortalAtomProps, PopoverPortalProps, PopoverPositioner, PopoverPositionerAtomProps, PopoverPositionerProps, PopoverProps, PopoverProvider, PopoverRoot, PopoverTrigger, PopoverTriggerComponentProps, PopoverTriggerElement, PopoverTriggerElementProps, PopoverViewport, PopoverViewportAtomProps, ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, Segmented, SegmentedClassNames, SegmentedIndicator, SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedItemProps, SegmentedOption, SegmentedOptions, SegmentedOrientation, SegmentedProps, SegmentedRoot, SegmentedRootProps, SegmentedSize, SegmentedStyles, SegmentedVariant, Select, SelectArrow, SelectArrowProps, SelectBackdrop, SelectBehaviorVariant, SelectClassNames, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectIndicatorVariant, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectList, SelectListProps, SelectOption, SelectOptionGroup, SelectOptions, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectProps, SelectRoot, SelectRootChangeEventDetails, SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollUpArrow, SelectScrollUpArrowProps, SelectSeparator, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps, SelectVariant, _default as SplitButton, SplitButtonMenuProps, SplitButtonProps, Switch, SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, SwitchContextType, SwitchIcon, SwitchIconPosition, SwitchIconProps, SwitchProps, SwitchRoot, SwitchRootProps, SwitchSize, SwitchStyles, SwitchThumb, SwitchThumbProps, Tabs, TabsClassNames, TabsIndicator, TabsIndicatorProps, TabsItem, TabsList, TabsListProps, TabsOrientation, TabsPanel, TabsPanelProps, TabsProps, TabsRoot, TabsRootProps, TabsSize, TabsStyles, TabsTab, TabsTabProps, TabsVariant, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, Tooltip, TooltipGroup, TooltipGroupProps, TooltipPlacement, TooltipPopupComponentProps, TooltipPortalProps, TooltipPositionerProps, TooltipProps, TooltipTriggerComponentProps, backdropTransition, styles as buttonStyles, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles$1 as switchStyles, styles$2 as tabsStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };
+export { BaseModalProps, Button, ButtonIconPosition, ButtonProps, ButtonShape, ButtonSize, ButtonType, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuItem, ContextMenuTrigger, DropdownItem, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuFooter, DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuHeader, DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuScrollViewportProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, DropdownMenuTriggerProps, FloatingPanel, FloatingPanelOffset, FloatingPanelPlacement, FloatingPanelProps, FloatingSheet, FloatingSheetProps, IconSpaceMode, ImperativeModalProps, Modal, ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalComponentProps, ModalConfirmConfig, ModalContent, ModalContentProps, ModalContext, ModalContextValue, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalHost, ModalHostProps, ModalInstance, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalSystem, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, PopoverArrow, PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, PopoverBackdropProps, PopoverContextValue, PopoverGroup, PopoverPlacement, PopoverPopup, PopoverPopupAtomProps, PopoverPopupProps, PopoverPortal, PopoverPortalAtomProps, PopoverPortalProps, PopoverPositioner, PopoverPositionerAtomProps, PopoverPositionerProps, PopoverProps, PopoverProvider, PopoverRoot, PopoverTrigger, PopoverTriggerComponentProps, PopoverTriggerElement, PopoverTriggerElementProps, PopoverViewport, PopoverViewportAtomProps, ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, Segmented, SegmentedClassNames, SegmentedIndicator, SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedItemProps, SegmentedOption, SegmentedOptions, SegmentedOrientation, SegmentedProps, SegmentedRoot, SegmentedRootProps, SegmentedSize, SegmentedStyles, SegmentedVariant, Select, SelectArrow, SelectArrowProps, SelectBackdrop, SelectBehaviorVariant, SelectClassNames, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectIndicatorVariant, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectList, SelectListProps, SelectOption, SelectOptionGroup, SelectOptions, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectProps, SelectRoot, SelectRootChangeEventDetails, SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollUpArrow, SelectScrollUpArrowProps, SelectSeparator, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps, SelectVariant, _default as SplitButton, SplitButtonMenuProps, SplitButtonProps, Switch, SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, SwitchContextType, SwitchIcon, SwitchIconPosition, SwitchIconProps, SwitchProps, SwitchRoot, SwitchRootProps, SwitchSize, SwitchStyles, SwitchThumb, SwitchThumbProps, Tabs, TabsClassNames, TabsIndicator, TabsIndicatorProps, TabsItem, TabsList, TabsListProps, TabsOrientation, TabsPanel, TabsPanelProps, TabsProps, TabsRoot, TabsRootProps, TabsSize, TabsStyles, TabsTab, TabsTabProps, TabsVariant, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, Tooltip, TooltipGroup, TooltipGroupProps, TooltipPlacement, TooltipPopupComponentProps, TooltipPortalProps, TooltipPositionerProps, TooltipProps, TooltipTriggerComponentProps, backdropTransition, styles as buttonStyles, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles$1 as switchStyles, styles$2 as tabsStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };

package/es/base-ui/index.mjs

@@ -21,12 +21,13 @@ import { ToastHost, toast, useToast } from "./Toast/imperative.mjs";
 import { styles } from "./Button/style.mjs";
 import Button from "./Button/Button.mjs";
 import SplitButton from "./Button/SplitButton.mjs";
-import { FloatingSheet } from "./FloatingSheet/FloatingSheet.mjs";
 import { backdropTransition, modalMotionConfig } from "./Modal/constants.mjs";
 import { ModalBackdrop, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, useModalActions, useModalOpen } from "./Modal/atoms.mjs";
 import { ModalContext, useModalContext } from "./Modal/context.mjs";
 import { ModalHost, confirmModal, createModal, createModalSystem } from "./Modal/imperative.mjs";
 import Modal from "./Modal/Modal.mjs";
+import { FloatingPanel } from "./FloatingPanel/FloatingPanel.mjs";
+import { FloatingSheet } from "./FloatingSheet/FloatingSheet.mjs";
 import { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot } from "./Segmented/atoms.mjs";
 import Segmented from "./Segmented/Segmented.mjs";
 import { SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue } from "./Select/atoms.mjs";
@@ -34,4 +35,4 @@ import Select from "./Select/Select.mjs";
 import { styles as styles$2 } from "./Tabs/style.mjs";
 import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, useTabsContext } from "./Tabs/atoms.mjs";
 import Tabs from "./Tabs/Tabs.mjs";
-export { Button, ContextMenuHost, ContextMenuTrigger, 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, FloatingSheet, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, 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, SplitButton, Switch, SwitchIcon, SwitchRoot, SwitchThumb, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, ToastHost, Tooltip, TooltipGroup, backdropTransition, styles as buttonStyles, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles$1 as switchStyles, styles$2 as tabsStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };
+export { Button, ContextMenuHost, ContextMenuTrigger, 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, FloatingPanel, FloatingSheet, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, 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, SplitButton, Switch, SwitchIcon, SwitchRoot, SwitchThumb, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, ToastHost, Tooltip, TooltipGroup, backdropTransition, styles as buttonStyles, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles$1 as switchStyles, styles$2 as tabsStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };

package/package.json

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