@lobehub/ui 4.24.0 → 4.26.0

package/es/LobeSwitch/style.d.mts

@@ -0,0 +1,19 @@
+//#region src/LobeSwitch/style.d.ts
+declare const styles: {
+  icon: string;
+  iconLeft: string;
+  iconLeftSmall: string;
+  iconRight: string;
+  iconRightSmall: string;
+  iconThumb: string;
+  loading: string;
+  root: string;
+  rootDefault: string;
+  rootSmall: string;
+  thumb: string;
+  thumbDefault: string;
+  thumbSmall: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

package/es/LobeSwitch/style.mjs

@@ -0,0 +1,146 @@
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+
+//#region src/LobeSwitch/style.ts
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	icon: css$1`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: ${cssVar$1.colorTextLightSolid};
+  `,
+	iconLeft: css$1`
+    inset-inline-start: 5px;
+  `,
+	iconLeftSmall: css$1`
+    inset-inline-start: 4px;
+  `,
+	iconRight: css$1`
+    inset-inline-end: 5px;
+  `,
+	iconRightSmall: css$1`
+    inset-inline-end: 4px;
+  `,
+	iconThumb: css$1`
+    position: relative;
+    inset: unset;
+    transform: none;
+    color: ${cssVar$1.colorPrimary};
+  `,
+	loading: css$1`
+    @keyframes lobe-switch-loading {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    animation: lobe-switch-loading 1s linear infinite;
+  `,
+	root: css$1`
+    cursor: pointer;
+    user-select: none;
+
+    position: relative;
+
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    box-sizing: border-box;
+    padding: 2px;
+    border: 0;
+    border-radius: 100px;
+
+    background: ${cssVar$1.colorTextQuaternary};
+    outline: none;
+
+    transition: background 150ms ${cssVar$1.motionEaseOut};
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+
+    &:hover:not([data-disabled]) {
+      background: ${cssVar$1.colorTextTertiary};
+    }
+
+    &[data-checked] {
+      justify-content: flex-end;
+      background: ${cssVar$1.colorPrimary};
+
+      &:hover:not([data-disabled]) {
+        background: ${cssVar$1.colorPrimaryHover};
+      }
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `,
+	rootDefault: css$1`
+    width: 44px;
+    min-width: 44px;
+    height: 22px;
+  `,
+	rootSmall: css$1`
+    width: 28px;
+    min-width: 28px;
+    height: 16px;
+  `,
+	thumb: css$1`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 50%;
+
+    background: ${cssVar$1.colorBgContainer};
+    box-shadow:
+      0 2px 4px 0 rgba(0, 35, 11, 20%),
+      0 1px 2px 0 rgba(0, 0, 0, 8%);
+
+    [data-disabled] > & {
+      box-shadow: none;
+    }
+  `,
+	thumbDefault: css$1`
+    width: 18px;
+    height: 18px;
+  `,
+	thumbSmall: css$1`
+    width: 12px;
+    height: 12px;
+  `
+}));
+const rootVariants = cva(styles.root, {
+	defaultVariants: { size: "default" },
+	variants: { size: {
+		default: styles.rootDefault,
+		small: styles.rootSmall
+	} }
+});
+const thumbVariants = cva(styles.thumb, {
+	defaultVariants: { size: "default" },
+	variants: { size: {
+		default: styles.thumbDefault,
+		small: styles.thumbSmall
+	} }
+});
+
+//#endregion
+export { rootVariants, styles, thumbVariants };
+//# sourceMappingURL=style.mjs.map

package/es/LobeSwitch/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/LobeSwitch/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  icon: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block: 0 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    color: ${cssVar.colorTextLightSolid};\n  `,\n  iconLeft: css`\n    inset-inline-start: 5px;\n  `,\n  iconLeftSmall: css`\n    inset-inline-start: 4px;\n  `,\n  iconRight: css`\n    inset-inline-end: 5px;\n  `,\n  iconRightSmall: css`\n    inset-inline-end: 4px;\n  `,\n  iconThumb: css`\n    position: relative;\n    inset: unset;\n    transform: none;\n    color: ${cssVar.colorPrimary};\n  `,\n  loading: css`\n    @keyframes lobe-switch-loading {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    animation: lobe-switch-loading 1s linear infinite;\n  `,\n  root: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    box-sizing: border-box;\n    padding: 2px;\n    border: 0;\n    border-radius: 100px;\n\n    background: ${cssVar.colorTextQuaternary};\n    outline: none;\n\n    transition: background 150ms ${cssVar.motionEaseOut};\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:hover:not([data-disabled]) {\n      background: ${cssVar.colorTextTertiary};\n    }\n\n    &[data-checked] {\n      justify-content: flex-end;\n      background: ${cssVar.colorPrimary};\n\n      &:hover:not([data-disabled]) {\n        background: ${cssVar.colorPrimaryHover};\n      }\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n  rootDefault: css`\n    width: 44px;\n    min-width: 44px;\n    height: 22px;\n  `,\n  rootSmall: css`\n    width: 28px;\n    min-width: 28px;\n    height: 16px;\n  `,\n  thumb: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow:\n      0 2px 4px 0 rgba(0, 35, 11, 20%),\n      0 1px 2px 0 rgba(0, 0, 0, 8%);\n\n    [data-disabled] > & {\n      box-shadow: none;\n    }\n  `,\n  thumbDefault: css`\n    width: 18px;\n    height: 18px;\n  `,\n  thumbSmall: css`\n    width: 12px;\n    height: 12px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.rootDefault,\n      small: styles.rootSmall,\n    },\n  },\n});\n\nexport const thumbVariants = cva(styles.thumb, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.thumbDefault,\n      small: styles.thumbSmall,\n    },\n  },\n});\n"],"mappings":";;;;AAGA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,MAAM,KAAG;;;;;;;;;;aAUEA,SAAO,oBAAoB;;CAEtC,UAAU,KAAG;;;CAGb,eAAe,KAAG;;;CAGlB,WAAW,KAAG;;;CAGd,gBAAgB,KAAG;;;CAGnB,WAAW,KAAG;;;;aAIHA,SAAO,aAAa;;CAE/B,SAAS,KAAG;;;;;;;;;;;;;CAaZ,MAAM,KAAG;;;;;;;;;;;;;;;;kBAgBOA,SAAO,oBAAoB;;;mCAGVA,SAAO,cAAc;;;2BAG7BA,SAAO,mBAAmB;;;;;oBAKjCA,SAAO,kBAAkB;;;;;oBAKzBA,SAAO,aAAa;;;sBAGlBA,SAAO,kBAAkB;;;;;;;;;CAS7C,aAAa,KAAG;;;;;CAKhB,WAAW,KAAG;;;;;CAKd,OAAO,KAAG;;;;;;;;kBAQMA,SAAO,iBAAiB;;;;;;;;;CASxC,cAAc,KAAG;;;;CAIjB,YAAY,KAAG;;;;CAIhB,EAAE;AAEH,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,MAAM,WACP;CACD,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;EACf,EACF;CACF,CAAC;AAEF,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,MAAM,WACP;CACD,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;EACf,EACF;CACF,CAAC"}

package/es/LobeSwitch/type.d.mts

@@ -0,0 +1,131 @@
+import { CSSProperties, ComponentProps, KeyboardEvent, MouseEvent, ReactNode, Ref } from "react";
+import { HTMLMotionProps, TargetAndTransition, Transition } from "motion/react";
+import { Switch } from "@base-ui/react/switch";
+
+//#region src/LobeSwitch/type.d.ts
+type LobeSwitchSize = 'default' | 'small';
+type LobeSwitchChangeEventHandler = (checked: boolean, event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+type LobeSwitchClickEventHandler = LobeSwitchChangeEventHandler;
+interface LobeSwitchClassNames {
+  content?: string;
+  root?: string;
+  thumb?: string;
+}
+interface LobeSwitchStyles {
+  content?: CSSProperties;
+  root?: CSSProperties;
+  thumb?: CSSProperties;
+}
+interface LobeSwitchContextType {
+  isChecked: boolean;
+  isPressed: boolean;
+  setIsChecked: (checked: boolean) => void;
+  setIsPressed: (pressed: boolean) => void;
+}
+type LobeSwitchRootProps = Omit<ComponentProps<typeof Switch.Root>, 'render'> & HTMLMotionProps<'button'> & {
+  size?: LobeSwitchSize;
+};
+type LobeSwitchThumbProps = Omit<ComponentProps<typeof Switch.Thumb>, 'render'> & HTMLMotionProps<'span'> & {
+  pressedAnimation?: TargetAndTransition | boolean;
+  size?: LobeSwitchSize;
+  transition?: Transition;
+};
+type LobeSwitchIconPosition = 'left' | 'right' | 'thumb';
+type LobeSwitchIconProps = HTMLMotionProps<'span'> & {
+  position: LobeSwitchIconPosition;
+  transition?: Transition;
+};
+interface LobeSwitchProps {
+  /**
+   * Whether to set focus automatically when mounted
+   */
+  autoFocus?: boolean;
+  /**
+   * Whether the switch is checked
+   */
+  checked?: boolean;
+  /**
+   * Icon to show when checked (left position)
+   */
+  checkedChildren?: ReactNode;
+  /**
+   * Custom class name
+   */
+  className?: string;
+  /**
+   * Custom class names for each part
+   */
+  classNames?: LobeSwitchClassNames;
+  /**
+   * Initial checked state (uncontrolled)
+   */
+  defaultChecked?: boolean;
+  /**
+   * Alias for `defaultChecked`
+   */
+  defaultValue?: boolean;
+  /**
+   * Whether the switch is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Element id
+   */
+  id?: string;
+  /**
+   * Show loading indicator
+   */
+  loading?: boolean;
+  /**
+   * Name attribute for form submission
+   */
+  name?: string;
+  /**
+   * Callback when the switch state changes
+   */
+  onChange?: LobeSwitchChangeEventHandler;
+  /**
+   * Callback when clicking the switch
+   */
+  onClick?: LobeSwitchClickEventHandler;
+  /**
+   * Reference to the root element
+   */
+  ref?: Ref<HTMLButtonElement>;
+  /**
+   * Additional class name for root element
+   */
+  rootClassName?: string;
+  /**
+   * Size of the switch
+   * @default 'default'
+   */
+  size?: LobeSwitchSize;
+  /**
+   * Custom inline style
+   */
+  style?: CSSProperties;
+  /**
+   * Custom styles for each part
+   */
+  styles?: LobeSwitchStyles;
+  /**
+   * Tab index for keyboard navigation
+   */
+  tabIndex?: number;
+  /**
+   * Native title attribute
+   */
+  title?: string;
+  /**
+   * Icon to show when unchecked (right position)
+   */
+  unCheckedChildren?: ReactNode;
+  /**
+   * Alias for `checked`
+   */
+  value?: boolean;
+}
+//#endregion
+export { LobeSwitchChangeEventHandler, LobeSwitchClassNames, LobeSwitchClickEventHandler, LobeSwitchContextType, LobeSwitchIconPosition, LobeSwitchIconProps, LobeSwitchProps, LobeSwitchRootProps, LobeSwitchSize, LobeSwitchStyles, LobeSwitchThumbProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Markdown/Markdown.d.mts

@@ -1,8 +1,8 @@
 import { MarkdownProps } from "./type.mjs";
-import * as react86 from "react";
+import * as react70 from "react";
 
 //#region src/Markdown/Markdown.d.ts
-declare const Markdown: react86.NamedExoticComponent<MarkdownProps>;
+declare const Markdown: react70.NamedExoticComponent<MarkdownProps>;
 //#endregion
 export { Markdown };
 //# sourceMappingURL=Markdown.d.mts.map

package/es/Markdown/Typography.d.mts

@@ -1,8 +1,8 @@
 import { TypographyProps } from "./type.mjs";
-import * as react85 from "react";
+import * as react69 from "react";
 
 //#region src/Markdown/Typography.d.ts
-declare const Typography: react85.NamedExoticComponent<TypographyProps>;
+declare const Typography: react69.NamedExoticComponent<TypographyProps>;
 //#endregion
 export { Typography };
 //# sourceMappingURL=Typography.d.mts.map

package/es/Markdown/components/SearchResultCards/index.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../../Flex/type.mjs";
 import "../../../Flex/index.mjs";
-import * as react70 from "react";
+import * as react85 from "react";
 import { Ref } from "react";
 
 //#region src/Markdown/components/SearchResultCards/index.d.ts
@@ -14,7 +14,7 @@ interface SearchResultCardsProps extends FlexboxProps {
   dataSource: string[] | SearchResultItem[];
   ref?: Ref<HTMLDivElement>;
 }
-declare const SearchResultCards: react70.NamedExoticComponent<SearchResultCardsProps>;
+declare const SearchResultCards: react85.NamedExoticComponent<SearchResultCardsProps>;
 //#endregion
 export { SearchResultCards, SearchResultCardsProps };
 //# sourceMappingURL=index.d.mts.map

package/es/MaskShadow/MaskShadow.d.mts

@@ -1,8 +1,8 @@
 import { MaskShadowProps } from "./type.mjs";
-import * as react10 from "react";
+import * as react34 from "react";
 
 //#region src/MaskShadow/MaskShadow.d.ts
-declare const MaskShadow: react10.NamedExoticComponent<MaskShadowProps>;
+declare const MaskShadow: react34.NamedExoticComponent<MaskShadowProps>;
 //#endregion
 export { MaskShadow };
 //# sourceMappingURL=MaskShadow.d.mts.map

package/es/Menu/Menu.d.mts

@@ -1,8 +1,8 @@
 import { MenuProps } from "./type.mjs";
-import * as react11 from "react";
+import * as react42 from "react";
 
 //#region src/Menu/Menu.d.ts
-declare const Menu: react11.NamedExoticComponent<MenuProps<unknown>>;
+declare const Menu: react42.NamedExoticComponent<MenuProps<unknown>>;
 //#endregion
 export { Menu };
 //# sourceMappingURL=Menu.d.mts.map

package/es/Menu/sharedStyle.mjs

@@ -126,66 +126,42 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
       0 0 0 1px ${cssVar$1.colorBorder} inset;
   `,
 	positioner: css$1`
-    z-index: 1100;
+    --lobe-dropdown-animation-duration: 140ms;
+    --lobe-dropdown-animation-scale-y: 0.92;
+    --lobe-dropdown-animation-ease-in: ease-in;
+    --lobe-dropdown-animation-ease-out: ${cssVar$1.motionEaseOut};
 
-    &[data-hover-trigger] {
-      --lobe-dropdown-animation-duration: 140ms;
-      --lobe-dropdown-animation-translate: 6px;
-      --lobe-dropdown-animation-scale: 0.98;
-      --lobe-dropdown-animation-ease-in: ease-in;
-      --lobe-dropdown-animation-ease-out: ${cssVar$1.motionEaseOut};
-      --lobe-dropdown-translate-x: 0;
-      --lobe-dropdown-translate-y: calc(var(--lobe-dropdown-animation-translate) * -1);
-
-      & > * {
-        will-change: opacity, transform;
-        animation: none;
-      }
+    z-index: 1100;
 
-      &[data-open] > * {
-        transform: translate3d(0, 0, 0) scale(1);
-        opacity: 1;
-        transition:
-          opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out),
-          transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out);
-      }
+    & > * {
+      will-change: opacity, transform;
+      transform-origin: var(--transform-origin);
+      animation: none;
+    }
 
-      &[data-open] > *[data-starting-style] {
-        transform: translate3d(
-            var(--lobe-dropdown-translate-x),
-            var(--lobe-dropdown-translate-y),
-            0
-          )
-          scale(var(--lobe-dropdown-animation-scale));
-        opacity: 0;
-      }
+    &[data-open] > * {
+      transform: scaleY(1);
+      opacity: 1;
+      transition:
+        opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out),
+        transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out);
+    }
 
-      &[data-closed] > * {
-        transform: translate3d(
-            var(--lobe-dropdown-translate-x),
-            var(--lobe-dropdown-translate-y),
-            0
-          )
-          scale(var(--lobe-dropdown-animation-scale));
-        opacity: 0;
-        transition:
-          opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in),
-          transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in);
-      }
+    &[data-open] > *[data-starting-style] {
+      transform: scaleY(var(--lobe-dropdown-animation-scale-y));
+      opacity: 0;
+    }
 
-      &[data-placement='top'],
-      &[data-placement='topCenter'],
-      &[data-placement='topLeft'],
-      &[data-placement='topRight'] {
-        --lobe-dropdown-translate-y: var(--lobe-dropdown-animation-translate);
-      }
+    &[data-closed] > * {
+      transform: scaleY(var(--lobe-dropdown-animation-scale-y));
+      opacity: 0;
+      transition:
+        opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in),
+        transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in);
+    }
 
-      &[data-placement='bottom'],
-      &[data-placement='bottomCenter'],
-      &[data-placement='bottomLeft'],
-      &[data-placement='bottomRight'] {
-        --lobe-dropdown-translate-y: calc(var(--lobe-dropdown-animation-translate) * -1);
-      }
+    &[data-hover-trigger] {
+      --lobe-dropdown-animation-duration: 140ms;
     }
   `,
 	separator: css$1`

package/es/Menu/sharedStyle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sharedStyle.mjs","names":["cssVar"],"sources":["../../src/Menu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  danger: css`\n    color: ${cssVar.colorError} !important;\n\n    &:hover {\n      background: ${cssVar.colorErrorBg} !important;\n    }\n  `,\n\n  empty: css`\n    cursor: default;\n    font-style: italic;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  extra: css`\n    margin-inline-start: auto;\n    padding-inline-start: 16px;\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  groupLabel: css`\n    user-select: none;\n\n    padding-block: 8px 4px;\n    padding-inline: 12px;\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    color: ${cssVar.colorTextTertiary};\n    text-transform: uppercase;\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 16px;\n    height: 16px;\n    margin-inline-end: 8px;\n  `,\n\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    min-height: 36px;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      opacity: 0.5;\n\n      &:hover {\n        background: transparent;\n      }\n    }\n\n    &[data-highlighted]:not([data-disabled]) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[data-state='open']:not([data-disabled]),\n    &[data-open]:not([data-disabled]),\n    &[aria-expanded='true']:not([data-disabled]) {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n\n  itemContent: css`\n    display: flex;\n    flex: 1;\n    gap: 0;\n    align-items: center;\n  `,\n\n  label: css`\n    overflow: hidden;\n    flex: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & a,\n    & a:visited,\n    & a:hover,\n    & a:active {\n      color: inherit;\n    }\n  `,\n\n  popup: css`\n    min-width: 120px;\n    padding: 4px;\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 15px 0 #00000008,\n      0 2px 30px 0 #00000014,\n      0 0 0 1px ${cssVar.colorBorder} inset;\n  `,\n  positioner: css`\n    z-index: 1100;\n\n    &[data-hover-trigger] {\n      --lobe-dropdown-animation-duration: 140ms;\n      --lobe-dropdown-animation-translate: 6px;\n      --lobe-dropdown-animation-scale: 0.98;\n      --lobe-dropdown-animation-ease-in: ease-in;\n      --lobe-dropdown-animation-ease-out: ${cssVar.motionEaseOut};\n      --lobe-dropdown-translate-x: 0;\n      --lobe-dropdown-translate-y: calc(var(--lobe-dropdown-animation-translate) * -1);\n\n      & > * {\n        will-change: opacity, transform;\n        animation: none;\n      }\n\n      &[data-open] > * {\n        transform: translate3d(0, 0, 0) scale(1);\n        opacity: 1;\n        transition:\n          opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out),\n          transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out);\n      }\n\n      &[data-open] > *[data-starting-style] {\n        transform: translate3d(\n            var(--lobe-dropdown-translate-x),\n            var(--lobe-dropdown-translate-y),\n            0\n          )\n          scale(var(--lobe-dropdown-animation-scale));\n        opacity: 0;\n      }\n\n      &[data-closed] > * {\n        transform: translate3d(\n            var(--lobe-dropdown-translate-x),\n            var(--lobe-dropdown-translate-y),\n            0\n          )\n          scale(var(--lobe-dropdown-animation-scale));\n        opacity: 0;\n        transition:\n          opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in),\n          transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in);\n      }\n\n      &[data-placement='top'],\n      &[data-placement='topCenter'],\n      &[data-placement='topLeft'],\n      &[data-placement='topRight'] {\n        --lobe-dropdown-translate-y: var(--lobe-dropdown-animation-translate);\n      }\n\n      &[data-placement='bottom'],\n      &[data-placement='bottomCenter'],\n      &[data-placement='bottomLeft'],\n      &[data-placement='bottomRight'] {\n        --lobe-dropdown-translate-y: calc(var(--lobe-dropdown-animation-translate) * -1);\n      }\n    }\n  `,\n\n  separator: css`\n    height: 1px;\n    margin-block: 4px;\n    margin-inline: 0;\n    background: ${cssVar.colorBorder};\n  `,\n\n  submenuArrow: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,QAAQ,KAAG;aACAA,SAAO,WAAW;;;oBAGXA,SAAO,aAAa;;;CAItC,OAAO,KAAG;;;aAGCA,SAAO,kBAAkB;;CAGpC,OAAO,KAAG;;;;aAICA,SAAO,kBAAkB;;CAGpC,YAAY,KAAG;;;;;;;;;aASJA,SAAO,kBAAkB;;;CAIpC,MAAM,KAAG;;;;;;;;;;CAWT,MAAM,KAAG;;;;;;;;;;;;;;qBAcUA,SAAO,eAAe;;;;aAI9BA,SAAO,UAAU;;;;4BAIFA,SAAO,cAAc;;;oBAG7BA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;;;eAK/BA,SAAO,kBAAkB;;;;;;;;;oBASpBA,SAAO,kBAAkB;;;;;;oBAMzBA,SAAO,kBAAkB;;;CAI3C,aAAa,KAAG;;;;;;CAOhB,OAAO,KAAG;;;;;;;;;;;;;CAcV,OAAO,KAAG;;;qBAGSA,SAAO,aAAa;;kBAEvBA,SAAO,gBAAgB;;;;;kBAKvBA,SAAO,YAAY;;CAEnC,YAAY,KAAG;;;;;;;;4CAQ2BA,SAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwD/D,WAAW,KAAG;;;;kBAIEA,SAAO,YAAY;;CAGnC,cAAc,KAAG;;;;;;;;;;;CAWlB,EAAE"}
+{"version":3,"file":"sharedStyle.mjs","names":["cssVar"],"sources":["../../src/Menu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  danger: css`\n    color: ${cssVar.colorError} !important;\n\n    &:hover {\n      background: ${cssVar.colorErrorBg} !important;\n    }\n  `,\n\n  empty: css`\n    cursor: default;\n    font-style: italic;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  extra: css`\n    margin-inline-start: auto;\n    padding-inline-start: 16px;\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n\n  groupLabel: css`\n    user-select: none;\n\n    padding-block: 8px 4px;\n    padding-inline: 12px;\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    color: ${cssVar.colorTextTertiary};\n    text-transform: uppercase;\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 16px;\n    height: 16px;\n    margin-inline-end: 8px;\n  `,\n\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    min-height: 36px;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      opacity: 0.5;\n\n      &:hover {\n        background: transparent;\n      }\n    }\n\n    &[data-highlighted]:not([data-disabled]) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[data-state='open']:not([data-disabled]),\n    &[data-open]:not([data-disabled]),\n    &[aria-expanded='true']:not([data-disabled]) {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n\n  itemContent: css`\n    display: flex;\n    flex: 1;\n    gap: 0;\n    align-items: center;\n  `,\n\n  label: css`\n    overflow: hidden;\n    flex: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & a,\n    & a:visited,\n    & a:hover,\n    & a:active {\n      color: inherit;\n    }\n  `,\n\n  popup: css`\n    min-width: 120px;\n    padding: 4px;\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 15px 0 #00000008,\n      0 2px 30px 0 #00000014,\n      0 0 0 1px ${cssVar.colorBorder} inset;\n  `,\n  positioner: css`\n    --lobe-dropdown-animation-duration: 140ms;\n    --lobe-dropdown-animation-scale-y: 0.92;\n    --lobe-dropdown-animation-ease-in: ease-in;\n    --lobe-dropdown-animation-ease-out: ${cssVar.motionEaseOut};\n\n    z-index: 1100;\n\n    & > * {\n      will-change: opacity, transform;\n      transform-origin: var(--transform-origin);\n      animation: none;\n    }\n\n    &[data-open] > * {\n      transform: scaleY(1);\n      opacity: 1;\n      transition:\n        opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out),\n        transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out);\n    }\n\n    &[data-open] > *[data-starting-style] {\n      transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n      opacity: 0;\n    }\n\n    &[data-closed] > * {\n      transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n      opacity: 0;\n      transition:\n        opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in),\n        transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in);\n    }\n\n    &[data-hover-trigger] {\n      --lobe-dropdown-animation-duration: 140ms;\n    }\n  `,\n\n  separator: css`\n    height: 1px;\n    margin-block: 4px;\n    margin-inline: 0;\n    background: ${cssVar.colorBorder};\n  `,\n\n  submenuArrow: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,QAAQ,KAAG;aACAA,SAAO,WAAW;;;oBAGXA,SAAO,aAAa;;;CAItC,OAAO,KAAG;;;aAGCA,SAAO,kBAAkB;;CAGpC,OAAO,KAAG;;;;aAICA,SAAO,kBAAkB;;CAGpC,YAAY,KAAG;;;;;;;;;aASJA,SAAO,kBAAkB;;;CAIpC,MAAM,KAAG;;;;;;;;;;CAWT,MAAM,KAAG;;;;;;;;;;;;;;qBAcUA,SAAO,eAAe;;;;aAI9BA,SAAO,UAAU;;;;4BAIFA,SAAO,cAAc;;;oBAG7BA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;;;eAK/BA,SAAO,kBAAkB;;;;;;;;;oBASpBA,SAAO,kBAAkB;;;;;;oBAMzBA,SAAO,kBAAkB;;;CAI3C,aAAa,KAAG;;;;;;CAOhB,OAAO,KAAG;;;;;;;;;;;;;CAcV,OAAO,KAAG;;;qBAGSA,SAAO,aAAa;;kBAEvBA,SAAO,gBAAgB;;;;;kBAKvBA,SAAO,YAAY;;CAEnC,YAAY,KAAG;;;;0CAIyBA,SAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC7D,WAAW,KAAG;;;;kBAIEA,SAAO,YAAY;;CAGnC,cAAc,KAAG;;;;;;;;;;;CAWlB,EAAE"}

package/es/Mermaid/Mermaid.d.mts

@@ -1,8 +1,8 @@
 import { MermaidProps } from "./type.mjs";
-import * as react5 from "react";
+import * as react40 from "react";
 
 //#region src/Mermaid/Mermaid.d.ts
-declare const Mermaid: react5.NamedExoticComponent<MermaidProps>;
+declare const Mermaid: react40.NamedExoticComponent<MermaidProps>;
 //#endregion
 export { Mermaid };
 //# sourceMappingURL=Mermaid.d.mts.map

package/es/Mermaid/SyntaxMermaid/index.d.mts

@@ -1,8 +1,8 @@
 import { SyntaxMermaidProps } from "../type.mjs";
-import * as react6 from "react";
+import * as react41 from "react";
 
 //#region src/Mermaid/SyntaxMermaid/index.d.ts
-declare const SyntaxMermaid: react6.NamedExoticComponent<SyntaxMermaidProps>;
+declare const SyntaxMermaid: react41.NamedExoticComponent<SyntaxMermaidProps>;
 //#endregion
 export { SyntaxMermaid };
 //# sourceMappingURL=index.d.mts.map

package/es/Modal/Modal.d.mts

@@ -1,8 +1,8 @@
 import { ModalProps } from "./type.mjs";
-import * as react9 from "react";
+import * as react30 from "react";
 
 //#region src/Modal/Modal.d.ts
-declare const Modal: react9.NamedExoticComponent<ModalProps>;
+declare const Modal: react30.NamedExoticComponent<ModalProps>;
 //#endregion
 export { Modal };
 //# sourceMappingURL=Modal.d.mts.map

package/es/Modal/ModalProvider.d.mts

@@ -1,9 +1,9 @@
 import { ModalContextValue } from "./type.mjs";
-import * as react7 from "react";
+import * as react31 from "react";
 import { ReactNode } from "react";
 
 //#region src/Modal/ModalProvider.d.ts
-declare const ModalProvider: react7.NamedExoticComponent<{
+declare const ModalProvider: react31.NamedExoticComponent<{
   children: ReactNode;
   value: ModalContextValue;
 }>;

package/es/Modal/imperative.d.mts

@@ -1,5 +1,5 @@
 import { ImperativeModalProps, ModalInstance, RawModalComponent, RawModalComponentProps, RawModalInstance, RawModalKeyOptions, RawModalOptions } from "./type.mjs";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/Modal/imperative.d.ts
 type ModalHostProps = {
@@ -7,7 +7,7 @@ type ModalHostProps = {
 };
 declare const ModalHost: ({
   root
-}: ModalHostProps) => react_jsx_runtime14.JSX.Element | null;
+}: ModalHostProps) => react_jsx_runtime10.JSX.Element | null;
 declare const createModal: (props: ImperativeModalProps) => ModalInstance;
 declare function createRawModal<P extends RawModalComponentProps>(component: RawModalComponent<P>, props: Omit<P, 'open' | 'onClose'>, options?: RawModalOptions): RawModalInstance<P>;
 declare function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(component: RawModalComponent<P>, props: Omit<P, OpenKey | CloseKey>, options: RawModalKeyOptions<OpenKey, CloseKey>): RawModalInstance<P, OpenKey, CloseKey>;

package/es/MotionProvider/index.d.mts

@@ -1,4 +1,4 @@
-import * as react71 from "react";
+import * as react86 from "react";
 import { Context, ReactNode } from "react";
 import * as motion_react0 from "motion/react";
 import * as m from "motion/react-m";
@@ -6,7 +6,7 @@ import * as m from "motion/react-m";
 //#region src/MotionProvider/index.d.ts
 type MotionComponentType = typeof motion_react0.motion | typeof m;
 declare const MotionComponent: Context<MotionComponentType>;
-declare const MotionProvider: react71.NamedExoticComponent<{
+declare const MotionProvider: react86.NamedExoticComponent<{
   children: ReactNode;
   motion: MotionComponentType;
 }>;

package/es/Popover/ArrowIcon.d.mts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/Popover/ArrowIcon.d.ts
-declare const PopoverArrowIcon: react_jsx_runtime41.JSX.Element;
+declare const PopoverArrowIcon: react_jsx_runtime17.JSX.Element;
 //#endregion
 export { PopoverArrowIcon };
 //# sourceMappingURL=ArrowIcon.d.mts.map

package/es/Popover/atoms.d.mts

@@ -1,13 +1,13 @@
 import { PopoverPlacement } from "./type.mjs";
-import * as react62 from "react";
+import * as react35 from "react";
 import { ComponentProps, ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime42 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 import * as _base_ui_react_popover0 from "@base-ui/react/popover";
 import { Popover } from "@base-ui/react/popover";
 
 //#region src/Popover/atoms.d.ts
 declare const PopoverRoot: typeof Popover.Root;
-declare const PopoverBackdrop: react62.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react62.RefAttributes<HTMLDivElement>>;
+declare const PopoverBackdrop: react35.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react35.RefAttributes<HTMLDivElement>>;
 type PopoverTriggerElementProps = Omit<ComponentPropsWithRef<typeof Popover.Trigger>, 'children' | 'render'> & {
   children: ComponentProps<typeof Popover.Trigger>['children'];
 };
@@ -18,7 +18,7 @@ declare const PopoverTriggerElement: {
     nativeButton,
     ref: refProp,
     ...rest
-  }: PopoverTriggerElementProps): react_jsx_runtime42.JSX.Element;
+  }: PopoverTriggerElementProps): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 type PopoverPortalAtomProps = Omit<ComponentProps<typeof Popover.Portal>, 'container'> & {
@@ -37,7 +37,7 @@ declare const PopoverPortal: {
     root,
     children,
     ...rest
-  }: PopoverPortalAtomProps): react_jsx_runtime42.JSX.Element | null;
+  }: PopoverPortalAtomProps): react_jsx_runtime11.JSX.Element | null;
   displayName: string;
 };
 type PopoverPositionerAtomProps = ComponentProps<typeof Popover.Positioner> & {
@@ -54,7 +54,7 @@ declare const PopoverPositioner: {
     side,
     sideOffset,
     ...rest
-  }: PopoverPositionerAtomProps): react_jsx_runtime42.JSX.Element;
+  }: PopoverPositionerAtomProps): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 type PopoverPopupAtomProps = ComponentProps<typeof Popover.Popup>;
@@ -62,7 +62,7 @@ declare const PopoverPopup: {
   ({
     className,
     ...rest
-  }: PopoverPopupAtomProps): react_jsx_runtime42.JSX.Element;
+  }: PopoverPopupAtomProps): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 type PopoverArrowAtomProps = ComponentProps<typeof Popover.Arrow>;
@@ -71,7 +71,7 @@ declare const PopoverArrow: {
     className,
     children,
     ...rest
-  }: PopoverArrowAtomProps): react_jsx_runtime42.JSX.Element;
+  }: PopoverArrowAtomProps): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 type PopoverViewportAtomProps = ComponentProps<typeof Popover.Viewport>;
@@ -79,7 +79,7 @@ declare const PopoverViewport: {
   ({
     className,
     ...rest
-  }: PopoverViewportAtomProps): react_jsx_runtime42.JSX.Element;
+  }: PopoverViewportAtomProps): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 //#endregion