@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/Switch/atoms.mjs

@@ -0,0 +1,203 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import { switchMarker } from "./marker.stylex.mjs";
+import { styles } from "./style.mjs";
+import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
+import { Switch } from "@base-ui/react/switch";
+import { animate, motionValue } from "motion";
+import useControlledState from "use-merge-value";
+//#region src/Switch/atoms.tsx
+const THUMB_METRICS = {
+	default: {
+		checkedX: 14,
+		pressedCheckedX: 10,
+		pressedWidth: 22,
+		width: 18
+	},
+	small: {
+		checkedX: 12,
+		pressedCheckedX: 8,
+		pressedWidth: 16,
+		width: 12
+	}
+};
+const rootSizeStyles = {
+	default: styles.rootDefault,
+	small: styles.rootSmall
+};
+const thumbSizeStyles = {
+	default: styles.thumbDefault,
+	small: styles.thumbSmall
+};
+const THUMB_SPRING = {
+	damping: 24,
+	stiffness: 360,
+	type: "spring"
+};
+const SwitchContext = createContext(null);
+const useSwitchContext = () => {
+	const context = use(SwitchContext);
+	if (!context) throw new Error("useSwitchContext must be used within a SwitchRoot");
+	return context;
+};
+const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onClick, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "default", children, disabled, readOnly, required, inputRef, id, name, style, ...rest }) => {
+	const [isPressed, setIsPressed] = useState(false);
+	const lastEventRef = useRef(null);
+	const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {
+		defaultValue: defaultChecked,
+		onChange: (value) => {
+			if (lastEventRef.current) onCheckedChange?.(value, lastEventRef.current);
+		},
+		value: checked
+	});
+	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 isInteractive = !disabled && !readOnly;
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") lastEventRef.current = event;
+		if (event.key === " " && isInteractive) setIsPressed(true);
+		onKeyDown?.(event);
+	};
+	const handleKeyUp = (event) => {
+		if (event.key === " ") setIsPressed(false);
+		onKeyUp?.(event);
+	};
+	const handlePointerDown = (event) => {
+		if (isInteractive) setIsPressed(true);
+		onPointerDown?.(event);
+	};
+	const handlePointerUp = (event) => {
+		setIsPressed(false);
+		onPointerUp?.(event);
+	};
+	const handlePointerCancel = (event) => {
+		setIsPressed(false);
+		onPointerCancel?.(event);
+	};
+	const handlePointerLeave = (event) => {
+		setIsPressed(false);
+		onPointerLeave?.(event);
+	};
+	return /* @__PURE__ */ jsx(SwitchContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Switch.Root, {
+			nativeButton: true,
+			checked: isChecked,
+			defaultChecked,
+			disabled,
+			id,
+			inputRef,
+			name,
+			readOnly,
+			required,
+			render: /* @__PURE__ */ jsx("button", {
+				...rest,
+				...styleProps([
+					switchMarker,
+					focusRing.info,
+					styles.root,
+					rootSizeStyles[size]
+				], clsx("lobe-switch", className), style),
+				onClick: handleClick,
+				onKeyDown: handleKeyDown,
+				onKeyUp: handleKeyUp,
+				onPointerCancel: handlePointerCancel,
+				onPointerDown: handlePointerDown,
+				onPointerLeave: handlePointerLeave,
+				onPointerUp: handlePointerUp
+			}),
+			onCheckedChange: setIsChecked,
+			children
+		})
+	});
+};
+SwitchRoot.displayName = "SwitchRoot";
+const SwitchThumb = ({ className, size = "default", style, children, ...rest }) => {
+	const { isChecked, isPressed } = useSwitchContext();
+	const ref = useRef(null);
+	const metrics = THUMB_METRICS[size];
+	const targetX = isChecked ? isPressed ? metrics.pressedCheckedX : metrics.checkedX : 0;
+	const targetWidth = isPressed ? metrics.pressedWidth : metrics.width;
+	const [values] = useState(() => ({
+		width: motionValue(targetWidth),
+		x: motionValue(targetX)
+	}));
+	const [initialStyle] = useState(() => ({
+		"--switch-x": `${targetX}px`,
+		"width": targetWidth
+	}));
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const unsubscribeX = values.x.on("change", (x) => {
+			el.style.setProperty("--switch-x", `${x}px`);
+		});
+		const unsubscribeWidth = values.width.on("change", (width) => {
+			el.style.setProperty("width", `${width}px`);
+		});
+		return () => {
+			unsubscribeX();
+			unsubscribeWidth();
+		};
+	}, [values]);
+	useEffect(() => {
+		const transition = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false ? { duration: 0 } : THUMB_SPRING;
+		const animations = [animate(values.x, targetX, transition), animate(values.width, targetWidth, transition)];
+		return () => {
+			for (const animation of animations) animation.stop();
+		};
+	}, [
+		values,
+		targetX,
+		targetWidth
+	]);
+	return /* @__PURE__ */ jsx(Switch.Thumb, { render: /* @__PURE__ */ jsx("span", {
+		...rest,
+		ref,
+		...styleProps([styles.thumb, thumbSizeStyles[size]], className, {
+			...initialStyle,
+			...style
+		}),
+		children
+	}) });
+};
+SwitchThumb.displayName = "SwitchThumb";
+const iconPositionStyles = {
+	left: styles.iconLeft,
+	right: styles.iconRight,
+	thumb: styles.iconThumb
+};
+const SwitchIcon = ({ children, className, position, size: _size, style, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		...styleProps([styles.icon, iconPositionStyles[position]], className, style),
+		...rest,
+		children
+	});
+};
+SwitchIcon.displayName = "SwitchIcon";
+const switchClassNames = Object.fromEntries(Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? ""]));
+const switchStyles = {
+	...switchClassNames,
+	iconLeftSmall: switchClassNames.iconLeft,
+	iconRightSmall: switchClassNames.iconRight
+};
+//#endregion
+export { SwitchIcon, SwitchRoot, SwitchThumb, switchStyles, useSwitchContext };
+
+//# sourceMappingURL=atoms.mjs.map

package/es/Switch/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Switch } from '@base-ui/react/switch';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { animate, motionValue } from 'motion';\nimport type { CSSProperties, KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport { createContext, use, useEffect, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { switchMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type {\n  SwitchChangeEventHandler,\n  SwitchContextType,\n  SwitchIconPosition,\n  SwitchIconProps,\n  SwitchRootProps,\n  SwitchSize,\n  SwitchThumbProps,\n} from './type';\n\nconst THUMB_METRICS: Record<\n  SwitchSize,\n  { checkedX: number; pressedCheckedX: number; pressedWidth: number; width: number }\n> = {\n  default: { checkedX: 14, pressedCheckedX: 10, pressedWidth: 22, width: 18 },\n  small: { checkedX: 12, pressedCheckedX: 8, pressedWidth: 16, width: 12 },\n};\n\nconst rootSizeStyles = { default: styles.rootDefault, small: styles.rootSmall };\nconst thumbSizeStyles = { default: styles.thumbDefault, small: styles.thumbSmall };\n\nconst THUMB_SPRING = { damping: 24, stiffness: 360, type: 'spring' as const };\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n  const context = use(SwitchContext);\n  if (!context) {\n    throw new Error('useSwitchContext must be used within a SwitchRoot');\n  }\n  return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n  onCheckedChange?: SwitchChangeEventHandler;\n  onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n  checked,\n  className,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  size = 'default',\n  children,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  name,\n  style,\n  ...rest\n}: SwitchRootInternalProps) => {\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 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 isInteractive = !disabled && !readOnly;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      lastEventRef.current = event;\n    }\n    if (event.key === ' ' && isInteractive) {\n      setIsPressed(true);\n    }\n    onKeyDown?.(event);\n  };\n\n  const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === ' ') {\n      setIsPressed(false);\n    }\n    onKeyUp?.(event);\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {\n    if (isInteractive) {\n      setIsPressed(true);\n    }\n    onPointerDown?.(event);\n  };\n\n  const handlePointerUp = (event: PointerEvent<HTMLButtonElement>) => {\n    setIsPressed(false);\n    onPointerUp?.(event);\n  };\n\n  const handlePointerCancel = (event: PointerEvent<HTMLButtonElement>) => {\n    setIsPressed(false);\n    onPointerCancel?.(event);\n  };\n\n  const handlePointerLeave = (event: PointerEvent<HTMLButtonElement>) => {\n    setIsPressed(false);\n    onPointerLeave?.(event);\n  };\n\n  return (\n    <SwitchContext value={contextValue}>\n      <Switch.Root\n        nativeButton\n        checked={isChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={id}\n        inputRef={inputRef}\n        name={name}\n        readOnly={readOnly}\n        required={required}\n        render={\n          <button\n            {...rest}\n            {...styleProps(\n              [switchMarker, focusRing.info, styles.root, rootSizeStyles[size]],\n              clsx('lobe-switch', className),\n              style,\n            )}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onKeyUp={handleKeyUp}\n            onPointerCancel={handlePointerCancel}\n            onPointerDown={handlePointerDown}\n            onPointerLeave={handlePointerLeave}\n            onPointerUp={handlePointerUp}\n          />\n        }\n        onCheckedChange={setIsChecked}\n      >\n        {children}\n      </Switch.Root>\n    </SwitchContext>\n  );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n  className,\n  size = 'default',\n  style,\n  children,\n  ...rest\n}: SwitchThumbProps) => {\n  const { isChecked, isPressed } = useSwitchContext();\n  const ref = useRef<HTMLSpanElement>(null);\n\n  const metrics = THUMB_METRICS[size];\n  const targetX = isChecked ? (isPressed ? metrics.pressedCheckedX : metrics.checkedX) : 0;\n  const targetWidth = isPressed ? metrics.pressedWidth : metrics.width;\n\n  const [values] = useState(() => ({\n    width: motionValue(targetWidth),\n    x: motionValue(targetX),\n  }));\n\n  // animated keys stay referentially stable so React never rewrites mid-flight inline values\n  const [initialStyle] = useState<CSSProperties>(\n    () => ({ '--switch-x': `${targetX}px`, 'width': targetWidth }) as CSSProperties,\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const unsubscribeX = values.x.on('change', (x) => {\n      el.style.setProperty('--switch-x', `${x}px`);\n    });\n    const unsubscribeWidth = values.width.on('change', (width) => {\n      el.style.setProperty('width', `${width}px`);\n    });\n    return () => {\n      unsubscribeX();\n      unsubscribeWidth();\n    };\n  }, [values]);\n\n  useEffect(() => {\n    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n    const transition = reduceMotion ? { duration: 0 } : THUMB_SPRING;\n    const animations = [\n      animate(values.x, targetX, transition),\n      animate(values.width, targetWidth, transition),\n    ];\n    return () => {\n      for (const animation of animations) animation.stop();\n    };\n  }, [values, targetX, targetWidth]);\n\n  return (\n    <Switch.Thumb\n      render={\n        <span\n          {...rest}\n          ref={ref}\n          {...styleProps([styles.thumb, thumbSizeStyles[size]], className, {\n            ...initialStyle,\n            ...style,\n          })}\n        >\n          {children}\n        </span>\n      }\n    />\n  );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst iconPositionStyles: Record<SwitchIconPosition, stylex.StyleXStyles> = {\n  left: styles.iconLeft,\n  right: styles.iconRight,\n  thumb: styles.iconThumb,\n};\n\nexport const SwitchIcon = ({\n  children,\n  className,\n  position,\n  size: _size,\n  style,\n  ...rest\n}: SwitchIconProps) => {\n  return (\n    <span {...styleProps([styles.icon, iconPositionStyles[position]], className, style)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nconst switchClassNames = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n\nexport const switchStyles = {\n  ...switchClassNames,\n  iconLeftSmall: switchClassNames.iconLeft,\n  iconRightSmall: switchClassNames.iconRight,\n};\n"],"mappings":"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"}

package/es/Switch/index.d.mts

@@ -0,0 +1,4 @@
+import { SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, SwitchContextType, SwitchIconPosition, SwitchIconProps, SwitchProps, SwitchRootProps, SwitchSize, SwitchStyles, SwitchThumbProps } from "./type.mjs";
+import { SwitchIcon, SwitchRoot, SwitchThumb, switchStyles, useSwitchContext } from "./atoms.mjs";
+import Switch from "./Switch.mjs";
+export { type SwitchChangeEventHandler, type SwitchClassNames, type SwitchClickEventHandler, type SwitchContextType, SwitchIcon, type SwitchIconPosition, type SwitchIconProps, type SwitchProps, SwitchRoot, type SwitchRootProps, type SwitchSize, type SwitchStyles, SwitchThumb, type SwitchThumbProps, Switch as default, switchStyles, useSwitchContext };

package/es/Switch/index.d.ts

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

package/es/Switch/index.js

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

package/es/Switch/index.mjs

@@ -0,0 +1,3 @@
+import { SwitchIcon, SwitchRoot, SwitchThumb, switchStyles, useSwitchContext } from "./atoms.mjs";
+import Switch from "./Switch.mjs";
+export { SwitchIcon, SwitchRoot, SwitchThumb, Switch as default, switchStyles, useSwitchContext };

package/es/Switch/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/Switch/marker.stylex.ts
+const switchMarker = {
+	lbruu1v2: "lbruu1v2",
+	$$css: true
+};
+//#endregion
+export { switchMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/Switch/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/Switch/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const switchMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,eAAe;CAC1B,UAAU;CACV,OAAO;AACT"}

package/es/Switch/style.mjs

@@ -0,0 +1,103 @@
+//#region src/Switch/style.ts
+const styles = {
+	icon: {
+		kYYq5F: "lb10no89f",
+		kmkexE: "lbaqpy6h",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb15g0kca",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lbl56j7k",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kIyJzY: "lb12w9bfk",
+		$$css: true
+	},
+	iconLeft: {
+		kLqNvP: "lb1v1hl4c",
+		kSiTet: "lbg01cxk lbqtmd8e",
+		km0Bbg: "lb1t448cz lb1gshqrl",
+		$$css: true
+	},
+	iconRight: {
+		kt4wiu: "lbxx7yvo",
+		kSiTet: "lb12foe86",
+		km0Bbg: "lb1t60ft6",
+		$$css: true
+	},
+	iconThumb: {
+		kpwlN0: "lbh3736h",
+		kYYq5F: "lb1saa4dr",
+		kMwMTN: "lb16owwnm",
+		kVAEAm: "lb1n2onr6",
+		k3aq6I: "lb1c071of",
+		$$css: true
+	},
+	loading: {
+		k44tkh: "lb1q3qbx4 lb1u6grsq",
+		ko0y90: "lba4qsjk",
+		kKVMdj: "lbb6ayas",
+		kyAemX: "lb1esw782",
+		$$css: true
+	},
+	root: {
+		kmVPX3: "lb1i3ajwb",
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb1xwekrv",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kI3sdo: "lb1a2a7pz",
+		kVQacm: "lbb3r6kr",
+		kmkexE: "lbr3aam3",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjjy28o lb1ljx72h lb1j7gpvn lbx0eq3e",
+		kGVxlE: "lb11a9emz lb19y05k0",
+		kB7OPa: "lb9f619",
+		kkrTdU: "lb1ypdohk lb5ezrf1",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lb1nhvcw1",
+		kSiTet: "lb1k4xm7o",
+		kVAEAm: "lb1n2onr6",
+		kIyJzY: "lb12w9bfk",
+		kfSwDN: "lb87ps6o",
+		$$css: true
+	},
+	rootDefault: {
+		kZKoxP: "lb17rw0jw",
+		k7Eaqz: "lb15hfatp",
+		kzqmXN: "lb14qfxbe",
+		$$css: true
+	},
+	rootSmall: {
+		kZKoxP: "lblup9mm",
+		k7Eaqz: "lb1264ykn",
+		kzqmXN: "lbgd8bvy",
+		$$css: true
+	},
+	thumb: {
+		kaIpWk: "lb16rqkct",
+		kmkexE: "lbxj5fsl",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lb6yijhg",
+		kGVxlE: "lb1oicym lbiy1ocm lb4g9y83",
+		k1xSpc: "lb78zum5",
+		kmuXW: "lb2lah0s",
+		kjj79g: "lbl56j7k",
+		k3aq6I: "lb1u2ey76",
+		kIyJzY: "lb12w9bfk",
+		$$css: true
+	},
+	thumbDefault: {
+		kZKoxP: "lbmix8c7",
+		kzqmXN: "lb1xp8n7a",
+		$$css: true
+	},
+	thumbSmall: {
+		kZKoxP: "lb1kpxq89",
+		kzqmXN: "lbsmyaan",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Switch/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Switch/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { switchMarker } from './marker.stylex';\n\nconst loadingSpin = stylex.keyframes({\n  '0%': { transform: 'rotate(0deg)' },\n  '100%': { transform: 'rotate(360deg)' },\n});\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst enabledHover = ':hover:not([data-disabled])';\n\nexport const styles = stylex.create({\n  icon: {\n    insetBlock: 0,\n    transition: `opacity 200ms ${cssVar.motionEaseOut}, scale 200ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    color: cssVar.colorBgLayout,\n    display: 'flex',\n    justifyContent: 'center',\n    pointerEvents: 'none',\n    position: 'absolute',\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n  },\n  iconLeft: {\n    insetInlineStart: 4,\n    opacity: { default: 0, [stylex.when.ancestor('[data-checked]', switchMarker)]: 1 },\n    scale: { default: 0, [stylex.when.ancestor('[data-checked]', switchMarker)]: 1 },\n  },\n  iconRight: {\n    insetInlineEnd: 4,\n    opacity: { default: null, [stylex.when.ancestor('[data-checked]', switchMarker)]: 0 },\n    scale: { default: null, [stylex.when.ancestor('[data-checked]', switchMarker)]: 0 },\n  },\n  iconThumb: {\n    inset: 'unset',\n    insetBlock: 'unset',\n    color: cssVar.colorPrimary,\n    position: 'relative',\n    transform: 'none',\n  },\n  loading: {\n    animationDuration: { default: '1s', [reducedMotion]: '0s' },\n    animationIterationCount: 'infinite',\n    animationName: loadingSpin,\n    animationTimingFunction: 'linear',\n  },\n  root: {\n    padding: 2,\n    borderColor: 'currentcolor',\n    borderRadius: 100,\n    borderStyle: 'none',\n    borderWidth: 0,\n    outline: 'none',\n    overflow: 'hidden',\n    transition: `background 200ms ${cssVar.motionEaseOut}, box-shadow 200ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillSecondary,\n      [enabledHover]: cssVar.colorFill,\n      ':is([data-checked])': cssVar.colorPrimary,\n      ':is([data-checked]):hover:not([data-disabled])': cssVar.colorPrimaryHover,\n    },\n    boxShadow: {\n      'default': 'inset 0 1.5px 2px rgb(0 0 0 / 8%)',\n      ':is([data-checked])': 'inset 0 1.5px 3px rgb(0 0 0 / 18%)',\n    },\n    boxSizing: 'border-box',\n    cursor: { 'default': 'pointer', ':is([data-disabled])': 'not-allowed' },\n    display: 'inline-flex',\n    justifyContent: 'flex-start',\n    opacity: { 'default': null, ':is([data-disabled])': 0.45 },\n    position: 'relative',\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    userSelect: 'none',\n  },\n  rootDefault: {\n    height: 22,\n    minWidth: 36,\n    width: 36,\n  },\n  rootSmall: {\n    height: 16,\n    minWidth: 28,\n    width: 28,\n  },\n  thumb: {\n    borderRadius: '50%',\n    transition: `box-shadow 200ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: {\n      'default':\n        '0 0 0 0.5px rgb(0 0 0 / 4%), 0 1px 1px rgb(0 0 0 / 6%), 0 3px 8px rgb(0 30 80 / 16%)',\n      ':is([data-disabled])': 'none',\n      [stylex.when.ancestor(enabledHover, switchMarker)]:\n        '0 0 0 0.5px rgb(0 0 0 / 4%), 0 1px 1px rgb(0 0 0 / 8%), 0 6px 14px rgb(0 30 80 / 24%)',\n    },\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n    transform: 'translateX(calc(var(--switch-x, 0px) * var(--switch-dir, 1)))',\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n  },\n  thumbDefault: {\n    height: 18,\n    width: 18,\n  },\n  thumbSmall: {\n    height: 12,\n    width: 12,\n  },\n});\n"],"mappings":";AAQA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Switch/type.d.mts

@@ -0,0 +1,126 @@
+import { CSSProperties, ComponentProps, KeyboardEvent, MouseEvent, ReactNode, Ref } from "react";
+import { Switch } from "@base-ui/react/switch";
+//#region src/Switch/type.d.ts
+export type SwitchSize = 'default' | 'small';
+export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+export type SwitchClickEventHandler = SwitchChangeEventHandler;
+export interface SwitchClassNames {
+  content?: string;
+  root?: string;
+  thumb?: string;
+}
+export interface SwitchStyles {
+  content?: CSSProperties;
+  root?: CSSProperties;
+  thumb?: CSSProperties;
+}
+export interface SwitchContextType {
+  isChecked: boolean;
+  isPressed: boolean;
+  setIsChecked: (checked: boolean) => void;
+  setIsPressed: (pressed: boolean) => void;
+}
+export type SwitchRootProps = Omit<ComponentProps<typeof Switch.Root>, 'render'> & ComponentProps<'button'> & {
+  size?: SwitchSize;
+};
+export type SwitchThumbProps = Omit<ComponentProps<typeof Switch.Thumb>, 'render'> & ComponentProps<'span'> & {
+  size?: SwitchSize;
+};
+export type SwitchIconPosition = 'left' | 'right' | 'thumb';
+export type SwitchIconProps = ComponentProps<'span'> & {
+  position: SwitchIconPosition;
+  size?: SwitchSize;
+};
+export interface SwitchProps {
+  /**
+   * 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?: SwitchClassNames;
+  /**
+   * 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?: SwitchChangeEventHandler;
+  /**
+   * Callback when clicking the switch
+   */
+  onClick?: SwitchClickEventHandler;
+  /**
+   * Reference to the root element
+   */
+  ref?: Ref<HTMLButtonElement>;
+  /**
+   * Additional class name for root element
+   */
+  rootClassName?: string;
+  /**
+   * Size of the switch
+   * @default 'default'
+   */
+  size?: SwitchSize;
+  /**
+   * Custom inline style
+   */
+  style?: CSSProperties;
+  /**
+   * Custom styles for each part
+   */
+  styles?: SwitchStyles;
+  /**
+   * 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
+//# sourceMappingURL=type.d.mts.map

package/es/Table/FilterMenu.mjs

@@ -0,0 +1,45 @@
+"use client";
+import Icon from "../Icon/Icon.mjs";
+import DropdownMenu from "../DropdownMenu/DropdownMenu.mjs";
+import { filterButtonStyles, styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { ListFilter } from "lucide-react";
+//#region src/Table/FilterMenu.tsx
+const FilterMenu = memo(({ filters, label, onChange, value }) => {
+	const items = [
+		...filters.map((filter) => ({
+			checked: value.includes(filter.value),
+			closeOnClick: false,
+			key: String(filter.value),
+			label: filter.text,
+			onCheckedChange: (checked) => onChange(checked ? [...value, filter.value] : value.filter((item) => item !== filter.value)),
+			type: "checkbox"
+		})),
+		{ type: "divider" },
+		{
+			disabled: value.length === 0,
+			key: "__reset",
+			label: "Reset",
+			onClick: () => onChange([])
+		}
+	];
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		items,
+		children: /* @__PURE__ */ jsx("button", {
+			"aria-label": `Filter ${label}`,
+			type: "button",
+			...stylex.props(filterButtonStyles, value.length > 0 && styles.filterActive),
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: ListFilter,
+				size: 12
+			})
+		})
+	});
+});
+FilterMenu.displayName = "TableFilterMenu";
+//#endregion
+export { FilterMenu as default };
+
+//# sourceMappingURL=FilterMenu.mjs.map

package/es/Table/FilterMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterMenu.mjs","names":[],"sources":["../../src/Table/FilterMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ListFilter } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport DropdownMenu from '@/DropdownMenu';\nimport type { DropdownItem } from '@/DropdownMenu/type';\nimport Icon from '@/Icon';\n\nimport { filterButtonStyles, styles } from './style';\nimport type { FilterValue } from './type';\n\ninterface FilterMenuProps {\n  filters: { text: ReactNode; value: FilterValue }[];\n  label: string;\n  onChange: (next: FilterValue[]) => void;\n  value: FilterValue[];\n}\n\nconst FilterMenu = memo<FilterMenuProps>(({ filters, label, onChange, value }) => {\n  const items: DropdownItem[] = [\n    ...filters.map((filter) => ({\n      checked: value.includes(filter.value),\n      closeOnClick: false,\n      key: String(filter.value),\n      label: filter.text,\n      onCheckedChange: (checked: boolean) =>\n        onChange(\n          checked ? [...value, filter.value] : value.filter((item) => item !== filter.value),\n        ),\n      type: 'checkbox' as const,\n    })),\n    { type: 'divider' as const },\n    { disabled: value.length === 0, key: '__reset', label: 'Reset', onClick: () => onChange([]) },\n  ];\n\n  return (\n    <DropdownMenu items={items}>\n      <button\n        aria-label={`Filter ${label}`}\n        type=\"button\"\n        {...stylex.props(filterButtonStyles, value.length > 0 && styles.filterActive)}\n      >\n        <Icon icon={ListFilter} size={12} />\n      </button>\n    </DropdownMenu>\n  );\n});\n\nFilterMenu.displayName = 'TableFilterMenu';\n\nexport default FilterMenu;\n"],"mappings":";;;;;;;;;AAmBA,MAAM,aAAa,MAAuB,EACxC,SACA,OACA,UACA,YACI;CACJ,MAAM,QAAwB;EAAC,GAAG,QAAQ,KAAI,YAAW;GACvD,SAAS,MAAM,SAAS,OAAO,KAAK;GACpC,cAAc;GACd,KAAK,OAAO,OAAO,KAAK;GACxB,OAAO,OAAO;GACd,kBAAkB,YAAqB,SAAS,UAAU,CAAC,GAAG,OAAO,OAAO,KAAK,IAAI,MAAM,QAAO,SAAQ,SAAS,OAAO,KAAK,CAAC;GAChI,MAAM;EACR,EAAE;EAAG,EACH,MAAM,UACR;EAAG;GACD,UAAU,MAAM,WAAW;GAC3B,KAAK;GACL,OAAO;GACP,eAAe,SAAS,CAAC,CAAC;EAC5B;CAAC;CACD,OAAO,oBAAC,cAAD;EAAqB;EACxB,UAAA,oBAAC,UAAD;GAAQ,cAAY,UAAU;GAAS,MAAK;GAAS,GAAI,OAAO,MAAM,oBAAoB,MAAM,SAAS,KAAK,OAAO,YAAY;GAC/H,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAY,MAAM;GAAK,CAAA;EAC7B,CAAA;CACI,CAAA;AAClB,CAAC;AACD,WAAW,cAAc"}

package/es/Table/Table.d.mts

@@ -0,0 +1,10 @@
+import { TableProps } from "./type.mjs";
+import { ReactNode } from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/Table/Table.d.ts
+declare const Table: (<T extends RowData>(props: TableProps<T>) => ReactNode) & {
+  displayName?: string;
+};
+//#endregion
+export { Table as default };
+//# sourceMappingURL=Table.d.mts.map