@lobehub/ui 4.23.0 → 4.25.0

package/es/LobeSwitch/atoms.d.mts

@@ -0,0 +1,56 @@
+import { LobeSwitchChangeEventHandler, LobeSwitchContextType, LobeSwitchIconProps, LobeSwitchRootProps, LobeSwitchThumbProps } from "./type.mjs";
+import { styles } from "./style.mjs";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
+
+//#region src/LobeSwitch/atoms.d.ts
+declare const useLobeSwitchContext: () => LobeSwitchContextType;
+type LobeSwitchRootInternalProps = Omit<LobeSwitchRootProps, 'onCheckedChange' | 'onClick'> & {
+  onCheckedChange?: LobeSwitchChangeEventHandler;
+  onClick?: LobeSwitchChangeEventHandler;
+};
+declare const LobeSwitchRoot: {
+  ({
+    checked,
+    className,
+    defaultChecked,
+    onCheckedChange,
+    onClick,
+    size,
+    children,
+    disabled,
+    readOnly,
+    required,
+    inputRef,
+    id,
+    name,
+    ...rest
+  }: LobeSwitchRootInternalProps): react_jsx_runtime26.JSX.Element;
+  displayName: string;
+};
+declare const LobeSwitchThumb: {
+  ({
+    className,
+    pressedAnimation,
+    size,
+    transition,
+    children,
+    ...rest
+  }: LobeSwitchThumbProps): react_jsx_runtime26.JSX.Element;
+  displayName: string;
+};
+declare const LobeSwitchIcon: {
+  ({
+    children,
+    className,
+    position,
+    transition,
+    ...rest
+  }: LobeSwitchIconProps & {
+    children?: React.ReactNode;
+    size?: "default" | "small";
+  }): react_jsx_runtime26.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { LobeSwitchIcon, LobeSwitchRoot, LobeSwitchThumb, useLobeSwitchContext };
+//# sourceMappingURL=atoms.d.mts.map

package/es/LobeSwitch/atoms.mjs

@@ -0,0 +1,132 @@
+'use client';
+
+import { useMotionComponent } from "../MotionProvider/index.mjs";
+import { rootVariants, styles, thumbVariants } from "./style.mjs";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+import { Switch } from "@base-ui/react/switch";
+
+//#region src/LobeSwitch/atoms.tsx
+const LobeSwitchContext = createContext(null);
+const useLobeSwitchContext = () => {
+	const context = useContext(LobeSwitchContext);
+	if (!context) throw new Error("useLobeSwitchContext must be used within a LobeSwitchRoot");
+	return context;
+};
+const LobeSwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onClick, size = "default", children, disabled, readOnly, required, inputRef, id, name, ...rest }) => {
+	const Motion = useMotionComponent();
+	const [isPressed, setIsPressed] = useState(false);
+	const lastEventRef = useRef(null);
+	const [isChecked, setIsChecked] = useMergeState(defaultChecked ?? false, {
+		defaultValue: defaultChecked,
+		onChange: (value) => {
+			if (lastEventRef.current) onCheckedChange?.(value, lastEventRef.current);
+		},
+		value: checked
+	});
+	const baseClassName = rootVariants({ size });
+	const contextValue = useMemo(() => ({
+		isChecked: Boolean(isChecked),
+		isPressed,
+		setIsChecked: (value) => setIsChecked(value),
+		setIsPressed
+	}), [
+		isChecked,
+		isPressed,
+		setIsChecked
+	]);
+	const handleClick = (event) => {
+		lastEventRef.current = event;
+		onClick?.(!isChecked, event);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") lastEventRef.current = event;
+		rest.onKeyDown?.(event);
+	};
+	return /* @__PURE__ */ jsx(LobeSwitchContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Switch.Root, {
+			checked: isChecked,
+			defaultChecked,
+			disabled,
+			id,
+			inputRef,
+			name,
+			onCheckedChange: setIsChecked,
+			readOnly,
+			render: /* @__PURE__ */ jsx(Motion.button, {
+				...rest,
+				className: cx(baseClassName, className),
+				initial: false,
+				onClick: handleClick,
+				onKeyDown: handleKeyDown,
+				onTap: () => setIsPressed(false),
+				onTapCancel: () => setIsPressed(false),
+				onTapStart: () => setIsPressed(true),
+				whileTap: "tap"
+			}),
+			required,
+			children
+		})
+	});
+};
+LobeSwitchRoot.displayName = "LobeSwitchRoot";
+const LobeSwitchThumb = ({ className, pressedAnimation, size = "default", transition = {
+	damping: 25,
+	stiffness: 300,
+	type: "spring"
+}, children, ...rest }) => {
+	const Motion = useMotionComponent();
+	const { isPressed } = useLobeSwitchContext();
+	const baseClassName = thumbVariants({ size });
+	const defaultPressedAnimation = { width: size === "small" ? 16 : 22 };
+	return /* @__PURE__ */ jsx(Switch.Thumb, { render: /* @__PURE__ */ jsx(Motion.span, {
+		animate: isPressed ? pressedAnimation || defaultPressedAnimation : void 0,
+		className: cx(baseClassName, className),
+		layout: true,
+		transition,
+		...rest,
+		children
+	}) });
+};
+LobeSwitchThumb.displayName = "LobeSwitchThumb";
+const getIconPositionClass = (position, size) => {
+	if (position === "thumb") return styles.iconThumb;
+	if (position === "left") return size === "small" ? styles.iconLeftSmall : styles.iconLeft;
+	return size === "small" ? styles.iconRightSmall : styles.iconRight;
+};
+const LobeSwitchIcon = ({ children, className, position, transition = {
+	bounce: 0,
+	type: "spring"
+}, ...rest }) => {
+	const Motion = useMotionComponent();
+	const { isChecked } = useLobeSwitchContext();
+	const size = rest.size || "default";
+	const isAnimated = useMemo(() => {
+		if (position === "right") return !isChecked;
+		if (position === "left") return isChecked;
+		if (position === "thumb") return true;
+		return false;
+	}, [position, isChecked]);
+	const positionClass = getIconPositionClass(position, size);
+	return /* @__PURE__ */ jsx(Motion.span, {
+		animate: isAnimated ? {
+			opacity: 1,
+			scale: 1
+		} : {
+			opacity: 0,
+			scale: 0
+		},
+		className: cx(styles.icon, positionClass, className),
+		transition,
+		...rest,
+		children
+	});
+};
+LobeSwitchIcon.displayName = "LobeSwitchIcon";
+
+//#endregion
+export { LobeSwitchIcon, LobeSwitchRoot, LobeSwitchThumb, useLobeSwitchContext };
+//# sourceMappingURL=atoms.mjs.map

package/es/LobeSwitch/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":["useControlledState"],"sources":["../../src/LobeSwitch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n  LobeSwitchChangeEventHandler,\n  LobeSwitchContextType,\n  LobeSwitchIconPosition,\n  LobeSwitchIconProps,\n  LobeSwitchRootProps,\n  LobeSwitchThumbProps,\n} from './type';\n\nconst LobeSwitchContext = createContext<LobeSwitchContextType | null>(null);\n\nexport const useLobeSwitchContext = () => {\n  const context = useContext(LobeSwitchContext);\n  if (!context) {\n    throw new Error('useLobeSwitchContext must be used within a LobeSwitchRoot');\n  }\n  return context;\n};\n\ntype LobeSwitchRootInternalProps = Omit<LobeSwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n  onCheckedChange?: LobeSwitchChangeEventHandler;\n  onClick?: LobeSwitchChangeEventHandler;\n};\n\nexport const LobeSwitchRoot = ({\n  checked,\n  className,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  size = 'default',\n  children,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  name,\n  ...rest\n}: LobeSwitchRootInternalProps) => {\n  const Motion = useMotionComponent();\n  const [isPressed, setIsPressed] = useState(false);\n  const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n    null,\n  );\n\n  const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n    defaultValue: defaultChecked,\n    onChange: (value: boolean) => {\n      if (lastEventRef.current) {\n        onCheckedChange?.(value, lastEventRef.current);\n      }\n    },\n    value: checked,\n  });\n\n  const baseClassName = rootVariants({ size });\n\n  const contextValue = useMemo(\n    () => ({\n      isChecked: Boolean(isChecked),\n      isPressed,\n      setIsChecked: (value: boolean) => setIsChecked(value),\n      setIsPressed,\n    }),\n    [isChecked, isPressed, setIsChecked],\n  );\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    lastEventRef.current = event;\n    onClick?.(!isChecked, event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      lastEventRef.current = event;\n    }\n    (rest as any).onKeyDown?.(event);\n  };\n\n  return (\n    <LobeSwitchContext.Provider value={contextValue}>\n      <Switch.Root\n        checked={isChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={id}\n        inputRef={inputRef}\n        name={name}\n        onCheckedChange={setIsChecked}\n        readOnly={readOnly}\n        render={\n          <Motion.button\n            {...rest}\n            className={cx(baseClassName, className)}\n            initial={false}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onTap={() => setIsPressed(false)}\n            onTapCancel={() => setIsPressed(false)}\n            onTapStart={() => setIsPressed(true)}\n            whileTap=\"tap\"\n          />\n        }\n        required={required}\n      >\n        {children}\n      </Switch.Root>\n    </LobeSwitchContext.Provider>\n  );\n};\n\nLobeSwitchRoot.displayName = 'LobeSwitchRoot';\n\nexport const LobeSwitchThumb = ({\n  className,\n  pressedAnimation,\n  size = 'default',\n  transition = { damping: 25, stiffness: 300, type: 'spring' },\n  children,\n  ...rest\n}: LobeSwitchThumbProps) => {\n  const Motion = useMotionComponent();\n  const { isPressed } = useLobeSwitchContext();\n  const baseClassName = thumbVariants({ size });\n\n  const defaultPressedAnimation = {\n    width: size === 'small' ? 16 : 22,\n  };\n\n  return (\n    <Switch.Thumb\n      render={\n        <Motion.span\n          animate={isPressed ? pressedAnimation || defaultPressedAnimation : undefined}\n          className={cx(baseClassName, className)}\n          layout\n          transition={transition}\n          {...rest}\n        >\n          {children}\n        </Motion.span>\n      }\n    />\n  );\n};\n\nLobeSwitchThumb.displayName = 'LobeSwitchThumb';\n\nconst getIconPositionClass = (position: LobeSwitchIconPosition, size: 'default' | 'small') => {\n  if (position === 'thumb') return styles.iconThumb;\n  if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n  return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const LobeSwitchIcon = ({\n  children,\n  className,\n  position,\n  transition = { bounce: 0, type: 'spring' },\n  ...rest\n}: LobeSwitchIconProps & { children?: React.ReactNode; size?: 'default' | 'small' }) => {\n  const Motion = useMotionComponent();\n  const { isChecked } = useLobeSwitchContext();\n  const size = (rest as any).size || 'default';\n\n  const isAnimated = useMemo(() => {\n    if (position === 'right') return !isChecked;\n    if (position === 'left') return isChecked;\n    if (position === 'thumb') return true;\n    return false;\n  }, [position, isChecked]);\n\n  const positionClass = getIconPositionClass(position, size);\n\n  return (\n    <Motion.span\n      animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n      className={cx(styles.icon, positionClass, className)}\n      transition={transition}\n      {...rest}\n    >\n      {children}\n    </Motion.span>\n  );\n};\n\nLobeSwitchIcon.displayName = 'LobeSwitchIcon';\n\nexport { styles as lobeSwitchStyles } from './style';\n"],"mappings":"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"}

package/es/LobeSwitch/index.d.mts

@@ -0,0 +1,5 @@
+import { LobeSwitchChangeEventHandler, LobeSwitchClassNames, LobeSwitchClickEventHandler, LobeSwitchContextType, LobeSwitchIconPosition, LobeSwitchIconProps, LobeSwitchProps, LobeSwitchRootProps, LobeSwitchSize, LobeSwitchStyles, LobeSwitchThumbProps } from "./type.mjs";
+import { styles } from "./style.mjs";
+import { LobeSwitchIcon, LobeSwitchRoot, LobeSwitchThumb, useLobeSwitchContext } from "./atoms.mjs";
+import { LobeSwitch } from "./LobeSwitch.mjs";
+export { type LobeSwitchChangeEventHandler, type LobeSwitchClassNames, type LobeSwitchClickEventHandler, type LobeSwitchContextType, LobeSwitchIcon, type LobeSwitchIconPosition, type LobeSwitchIconProps, type LobeSwitchProps, LobeSwitchRoot, type LobeSwitchRootProps, type LobeSwitchSize, type LobeSwitchStyles, LobeSwitchThumb, type LobeSwitchThumbProps, LobeSwitch as default, styles as lobeSwitchStyles, useLobeSwitchContext };

package/es/LobeSwitch/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/LobeSwitch/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/LobeSwitch/index.mjs

@@ -0,0 +1,5 @@
+import { styles } from "./style.mjs";
+import { LobeSwitchIcon, LobeSwitchRoot, LobeSwitchThumb, useLobeSwitchContext } from "./atoms.mjs";
+import LobeSwitch_default from "./LobeSwitch.mjs";
+
+export { LobeSwitchIcon, LobeSwitchRoot, LobeSwitchThumb, LobeSwitch_default as default, styles as lobeSwitchStyles, useLobeSwitchContext };

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 react20 from "react";
+import * as react59 from "react";
 
 //#region src/Markdown/Markdown.d.ts
-declare const Markdown: react20.NamedExoticComponent<MarkdownProps>;
+declare const Markdown: react59.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 react19 from "react";
+import * as react54 from "react";
 
 //#region src/Markdown/Typography.d.ts
-declare const Typography: react19.NamedExoticComponent<TypographyProps>;
+declare const Typography: react54.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 react69 from "react";
+import * as react43 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: react69.NamedExoticComponent<SearchResultCardsProps>;
+declare const SearchResultCards: react43.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 react18 from "react";
+import * as react22 from "react";
 
 //#region src/MaskShadow/MaskShadow.d.ts
-declare const MaskShadow: react18.NamedExoticComponent<MaskShadowProps>;
+declare const MaskShadow: react22.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 react16 from "react";
+import * as react21 from "react";
 
 //#region src/Menu/Menu.d.ts
-declare const Menu: react16.NamedExoticComponent<MenuProps<unknown>>;
+declare const Menu: react21.NamedExoticComponent<MenuProps<unknown>>;
 //#endregion
 export { Menu };
 //# sourceMappingURL=Menu.d.mts.map

package/es/Menu/sharedStyle.d.mts

@@ -0,0 +1,18 @@
+//#region src/Menu/sharedStyle.d.ts
+declare const styles: {
+  danger: string;
+  empty: string;
+  extra: string;
+  groupLabel: string;
+  icon: string;
+  item: string;
+  itemContent: string;
+  label: string;
+  popup: string;
+  positioner: string;
+  separator: string;
+  submenuArrow: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=sharedStyle.d.mts.map