@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/Carousel/Carousel.mjs

@@ -0,0 +1,159 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { ActionIconImpl } from "../ActionIcon/ActionIcon.mjs";
+import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { styles } from "./style.mjs";
+import { Children, createElement, isValidElement, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import useControlledState from "use-merge-value";
+//#region src/Carousel/Carousel.tsx
+const DEFAULT_INTERVAL = 5e3;
+const SWIPE_THRESHOLD = 40;
+const ARROW_SIZE = {
+	blockSize: 28,
+	borderRadius: "50%",
+	size: 16
+};
+const Carousel = memo(({ adaptiveHeight = false, arrows = false, autoplay = false, children, className, defaultIndex = 0, dots = true, index, loop = true, onIndexChange, onPointerEnter, onPointerLeave, pauseOnHover = true, ref, ...rest }) => {
+	const slides = Children.toArray(children);
+	const count = slides.length;
+	const keys = slides.map((slide, slideIndex) => isValidElement(slide) && slide.key !== null ? slide.key : slideIndex);
+	const [mergedIndex, setMergedIndex] = useControlledState(defaultIndex, {
+		onChange: onIndexChange,
+		value: index
+	});
+	const current = Math.min(Math.max(mergedIndex, 0), Math.max(count - 1, 0));
+	const [hovered, setHovered] = useState(false);
+	const [height, setHeight] = useState();
+	const slidesRef = useRef([]);
+	const swipeStartXRef = useRef(null);
+	const goTo = useEventCallback((target) => {
+		if (count === 0) return;
+		const next = loop ? (target % count + count) % count : Math.min(Math.max(target, 0), count - 1);
+		if (next !== current) setMergedIndex(next);
+	});
+	const next = useEventCallback(() => goTo(current + 1));
+	const prev = useEventCallback(() => goTo(current - 1));
+	useImperativeHandle(ref, () => ({
+		goTo,
+		next,
+		prev
+	}), [
+		goTo,
+		next,
+		prev
+	]);
+	const interval = autoplay === true ? DEFAULT_INTERVAL : autoplay || 0;
+	const paused = pauseOnHover && hovered;
+	const atEnd = !loop && current >= count - 1;
+	useEffect(() => {
+		if (!interval || paused || count < 2 || atEnd) return;
+		const timer = setTimeout(next, interval);
+		return () => clearTimeout(timer);
+	}, [
+		interval,
+		paused,
+		count,
+		atEnd,
+		current,
+		next
+	]);
+	useLayoutEffect(() => {
+		const slide = slidesRef.current[current];
+		if (!adaptiveHeight || !slide) return;
+		setHeight(slide.offsetHeight);
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => setHeight(slide.offsetHeight));
+		observer.observe(slide);
+		return () => observer.disconnect();
+	}, [
+		adaptiveHeight,
+		current,
+		count
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-roledescription": "carousel",
+		className: styleProps(styles.root, className).className,
+		role: "region",
+		onPointerEnter: (event) => {
+			onPointerEnter?.(event);
+			setHovered(true);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setHovered(false);
+		},
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			...stylex.props(styles.viewport),
+			style: adaptiveHeight && height !== void 0 ? { height } : void 0,
+			onPointerCancel: () => {
+				swipeStartXRef.current = null;
+			},
+			onPointerDown: (event) => {
+				if (event.pointerType !== "mouse") swipeStartXRef.current = event.clientX;
+			},
+			onPointerUp: (event) => {
+				if (swipeStartXRef.current === null) return;
+				const delta = event.clientX - swipeStartXRef.current;
+				swipeStartXRef.current = null;
+				if (Math.abs(delta) < SWIPE_THRESHOLD) return;
+				if (delta < 0) next();
+				else prev();
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				"aria-live": interval && !paused ? "off" : "polite",
+				...stylex.props(styles.track, adaptiveHeight && styles.trackAdaptive),
+				style: { transform: `translateX(-${current * 100}%)` },
+				children: slides.map((slide, slideIndex) => {
+					const active = slideIndex === current;
+					return /* @__PURE__ */ createElement("div", {
+						"aria-hidden": !active || void 0,
+						"aria-label": `${slideIndex + 1} of ${count}`,
+						"aria-roledescription": "slide",
+						...stylex.props(styles.slide),
+						inert: !active,
+						key: keys[slideIndex],
+						role: "group",
+						ref: (node) => {
+							slidesRef.current[slideIndex] = node;
+						}
+					}, slide);
+				})
+			}), arrows && count > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionIconImpl, {
+				"aria-label": "Previous slide",
+				disabled: !loop && current === 0,
+				icon: ChevronLeft,
+				size: ARROW_SIZE,
+				style: { insetInlineStart: 8 },
+				xstyle: styles.arrow,
+				onClick: prev
+			}), /* @__PURE__ */ jsx(ActionIconImpl, {
+				"aria-label": "Next slide",
+				disabled: atEnd,
+				icon: ChevronRight,
+				size: ARROW_SIZE,
+				style: { insetInlineEnd: 8 },
+				xstyle: styles.arrow,
+				onClick: next
+			})] })]
+		}), dots && count > 1 && /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.dots),
+			children: slides.map((_, dotIndex) => /* @__PURE__ */ createElement("button", {
+				"aria-current": dotIndex === current || void 0,
+				"aria-label": `Go to slide ${dotIndex + 1}`,
+				...stylex.props(styles.dot),
+				key: keys[dotIndex],
+				type: "button",
+				onClick: () => goTo(dotIndex)
+			}))
+		})]
+	});
+});
+Carousel.displayName = "Carousel";
+//#endregion
+export { Carousel as default };
+
+//# sourceMappingURL=Carousel.mjs.map

package/es/Carousel/Carousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.mjs","names":["ActionIcon"],"sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  isValidElement,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { CarouselProps } from './type';\n\nconst DEFAULT_INTERVAL = 5000;\nconst SWIPE_THRESHOLD = 40;\nconst ARROW_SIZE = { blockSize: 28, borderRadius: '50%', size: 16 };\n\nconst Carousel = memo<CarouselProps>(\n  ({\n    adaptiveHeight = false,\n    arrows = false,\n    autoplay = false,\n    children,\n    className,\n    defaultIndex = 0,\n    dots = true,\n    index,\n    loop = true,\n    onIndexChange,\n    onPointerEnter,\n    onPointerLeave,\n    pauseOnHover = true,\n    ref,\n    ...rest\n  }) => {\n    const slides = Children.toArray(children);\n    const count = slides.length;\n    const keys = slides.map((slide, slideIndex) =>\n      isValidElement(slide) && slide.key !== null ? slide.key : slideIndex,\n    );\n    const [mergedIndex, setMergedIndex] = useControlledState(defaultIndex, {\n      onChange: onIndexChange,\n      value: index,\n    });\n    const current = Math.min(Math.max(mergedIndex, 0), Math.max(count - 1, 0));\n\n    const [hovered, setHovered] = useState(false);\n    const [height, setHeight] = useState<number>();\n    const slidesRef = useRef<(HTMLDivElement | null)[]>([]);\n    const swipeStartXRef = useRef<number | null>(null);\n\n    const goTo = useEventCallback((target: number) => {\n      if (count === 0) return;\n      const next = loop\n        ? ((target % count) + count) % count\n        : Math.min(Math.max(target, 0), count - 1);\n      if (next !== current) setMergedIndex(next);\n    });\n    const next = useEventCallback(() => goTo(current + 1));\n    const prev = useEventCallback(() => goTo(current - 1));\n\n    useImperativeHandle(ref, () => ({ goTo, next, prev }), [goTo, next, prev]);\n\n    const interval = autoplay === true ? DEFAULT_INTERVAL : autoplay || 0;\n    const paused = pauseOnHover && hovered;\n    const atEnd = !loop && current >= count - 1;\n\n    useEffect(() => {\n      if (!interval || paused || count < 2 || atEnd) return;\n      const timer = setTimeout(next, interval);\n      return () => clearTimeout(timer);\n    }, [interval, paused, count, atEnd, current, next]);\n\n    useLayoutEffect(() => {\n      const slide = slidesRef.current[current];\n      if (!adaptiveHeight || !slide) return;\n      setHeight(slide.offsetHeight);\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(() => setHeight(slide.offsetHeight));\n      observer.observe(slide);\n      return () => observer.disconnect();\n    }, [adaptiveHeight, current, count]);\n\n    return (\n      <div\n        aria-roledescription=\"carousel\"\n        className={styleProps(styles.root, className).className}\n        role=\"region\"\n        onPointerEnter={(event) => {\n          onPointerEnter?.(event);\n          setHovered(true);\n        }}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHovered(false);\n        }}\n        {...rest}\n      >\n        <div\n          {...stylex.props(styles.viewport)}\n          style={adaptiveHeight && height !== undefined ? { height } : undefined}\n          onPointerCancel={() => {\n            swipeStartXRef.current = null;\n          }}\n          onPointerDown={(event) => {\n            if (event.pointerType !== 'mouse') swipeStartXRef.current = event.clientX;\n          }}\n          onPointerUp={(event) => {\n            if (swipeStartXRef.current === null) return;\n            const delta = event.clientX - swipeStartXRef.current;\n            swipeStartXRef.current = null;\n            if (Math.abs(delta) < SWIPE_THRESHOLD) return;\n            if (delta < 0) next();\n            else prev();\n          }}\n        >\n          <div\n            aria-live={interval && !paused ? 'off' : 'polite'}\n            {...stylex.props(styles.track, adaptiveHeight && styles.trackAdaptive)}\n            style={{ transform: `translateX(-${current * 100}%)` }}\n          >\n            {slides.map((slide, slideIndex) => {\n              const active = slideIndex === current;\n              return (\n                <div\n                  aria-hidden={!active || undefined}\n                  aria-label={`${slideIndex + 1} of ${count}`}\n                  aria-roledescription=\"slide\"\n                  {...stylex.props(styles.slide)}\n                  inert={!active}\n                  key={keys[slideIndex]}\n                  role=\"group\"\n                  ref={(node) => {\n                    slidesRef.current[slideIndex] = node;\n                  }}\n                >\n                  {slide}\n                </div>\n              );\n            })}\n          </div>\n          {arrows && count > 1 && (\n            <>\n              <ActionIcon\n                aria-label=\"Previous slide\"\n                disabled={!loop && current === 0}\n                icon={ChevronLeft}\n                size={ARROW_SIZE}\n                style={{ insetInlineStart: 8 }}\n                xstyle={styles.arrow}\n                onClick={prev}\n              />\n              <ActionIcon\n                aria-label=\"Next slide\"\n                disabled={atEnd}\n                icon={ChevronRight}\n                size={ARROW_SIZE}\n                style={{ insetInlineEnd: 8 }}\n                xstyle={styles.arrow}\n                onClick={next}\n              />\n            </>\n          )}\n        </div>\n        {dots && count > 1 && (\n          <div {...stylex.props(styles.dots)}>\n            {slides.map((_, dotIndex) => (\n              <button\n                aria-current={dotIndex === current || undefined}\n                aria-label={`Go to slide ${dotIndex + 1}`}\n                {...stylex.props(styles.dot)}\n                key={keys[dotIndex]}\n                type=\"button\"\n                onClick={() => goTo(dotIndex)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCarousel.displayName = 'Carousel';\n\nexport default Carousel;\n"],"mappings":"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"}

package/es/Carousel/index.mjs

@@ -0,0 +1 @@
+export { default } from "./Carousel.mjs";

package/es/Carousel/style.mjs

@@ -0,0 +1,65 @@
+//#region src/Carousel/style.ts
+const styles = {
+	arrow: {
+		kWkggS: "lb6yijhg",
+		kGVxlE: "lb1fjbzlt",
+		k87sOh: "lbwa60dl",
+		kVAEAm: "lb10l6tqk",
+		k3aq6I: "lb1cb1t30",
+		kY2c9j: "lb1vjfegm",
+		$$css: true
+	},
+	dot: {
+		kmVPX3: "lb1717udv",
+		kaIpWk: "lb1e6avla",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kI3sdo: "lb6ticga",
+		kmkexE: "lb1gqa78w lb9kvfbb",
+		kWkggS: "lb8qzbvk lbqgsb3u lbdprcly",
+		kkrTdU: "lb1ypdohk",
+		kInvED: "lb7s97pk",
+		kZKoxP: "lbols6we",
+		kzqmXN: "lb1xdjrj8 lb1v4s8kt",
+		$$css: true
+	},
+	dots: {
+		kOIVth: "lb17d4w8g",
+		k8WAf4: "lbp59q4u",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	root: {
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	slide: {
+		kCS8Yb: "lb1l7klhg",
+		kzQI83: "lb1c4vz4f",
+		kmuXW: "lb2lah0s",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	track: {
+		kmkexE: "lb1mwkqra lb9kvfbb",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	trackAdaptive: {
+		kGNEyG: "lb1cy8zhl",
+		$$css: true
+	},
+	viewport: {
+		kVQacm: "lbb3r6kr",
+		kmkexE: "lb9ukxhc lb9kvfbb",
+		kVAEAm: "lb1n2onr6",
+		kFalU9: "lbx69xxh",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Carousel/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Carousel/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst current = ':is([aria-current=\"true\"])';\n\nexport const styles = stylex.create({\n  arrow: {\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: '0 1px 4px rgb(0 0 0 / 12%)',\n    insetBlockStart: '50%',\n    position: 'absolute',\n    transform: 'translateY(-50%)',\n    zIndex: 1,\n  },\n  dot: {\n    padding: 0,\n    borderRadius: 999,\n    borderStyle: 'none',\n    borderWidth: 0,\n    outline: { 'default': null, ':focus-visible': `2px solid ${cssVar.colorText}` },\n    transition: { default: 'width 0.2s ease, background 0.2s ease', [reducedMotion]: 'none' },\n    backgroundColor: {\n      [current]: cssVar.colorText,\n      'default': cssVar.colorFill,\n      ':hover:not([aria-current=\"true\"])': cssVar.colorTextQuaternary,\n    },\n    cursor: 'pointer',\n    outlineOffset: { 'default': null, ':focus-visible': 2 },\n    height: 6,\n    width: { [current]: 18, default: 6 },\n  },\n  dots: {\n    gap: 6,\n    paddingBlock: 10,\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  root: {\n    position: 'relative',\n  },\n  slide: {\n    flexBasis: '100%',\n    flexGrow: 0,\n    flexShrink: 0,\n    minWidth: 0,\n  },\n  track: {\n    transition: {\n      default: 'transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)',\n      [reducedMotion]: 'none',\n    },\n    display: 'flex',\n  },\n  trackAdaptive: {\n    alignItems: 'flex-start',\n  },\n  viewport: {\n    overflow: 'hidden',\n    transition: { default: 'height 0.3s ease', [reducedMotion]: 'none' },\n    position: 'relative',\n    touchAction: 'pan-y',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,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,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Carousel/type.d.mts

@@ -0,0 +1,22 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+//#region src/Carousel/type.d.ts
+export interface CarouselRef {
+  goTo: (index: number) => void;
+  next: () => void;
+  prev: () => void;
+}
+export interface CarouselProps extends Omit<ComponentProps<'div'>, 'children' | 'ref'> {
+  adaptiveHeight?: boolean;
+  arrows?: boolean;
+  autoplay?: boolean | number;
+  children?: ReactNode;
+  defaultIndex?: number;
+  dots?: boolean;
+  index?: number;
+  loop?: boolean;
+  onIndexChange?: (index: number) => void;
+  pauseOnHover?: boolean;
+  ref?: Ref<CarouselRef>;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/Checkbox/Checkbox.d.mts

@@ -0,0 +1,10 @@
+import { CheckboxProps } from "./type.mjs";
+//#region src/Checkbox/Checkbox.d.ts
+declare const _default: import("react").NamedExoticComponent<CheckboxProps> & {
+  formBinding: {
+    readonly valueProp: "checked";
+  };
+};
+//#endregion
+export { _default as default };
+//# sourceMappingURL=Checkbox.d.mts.map

package/es/Checkbox/Checkbox.mjs

@@ -1,80 +1,63 @@
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import Block from "../Block/Block.mjs";
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
 import Text from "../Text/Text.mjs";
 import { styles } from "./style.mjs";
+import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
-import useMergeState from "use-merge-value";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
 import { CheckIcon, Minus } from "lucide-react";
+import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/Checkbox/Checkbox.tsx
-const Checkbox = ({ checked, defaultChecked, onChange, size = 16, className, style, children, textProps, backgroundColor, classNames, styles: customStyles, shape = "square", disabled, indeterminate, ...rest }) => {
-	const [value, setValue] = useMergeState(defaultChecked || false, {
-		defaultValue: defaultChecked,
-		onChange,
-		value: checked
-	});
-	const checkboxStyles = {
+const Checkbox$1 = memo(({ size = 16, shape = "square", backgroundColor, children, className, classNames, styles: customStyles, style, textProps, onChange, disabled, indeterminate, ...rest }) => {
+	const boxStyle = {
 		borderRadius: shape === "square" ? `max(4px, ${Math.round(size / 4)}px)` : "50%",
-		...style,
-		...customStyles?.checkbox
-	};
-	const handleClick = (e) => {
-		if (!disabled) {
-			e?.preventDefault();
-			setValue(!value);
-		}
-	};
-	const isIndeterminate = indeterminate;
-	const isChecked = !isIndeterminate && value;
-	const checkIcon = /* @__PURE__ */ jsx(Block, {
-		align: "center",
-		flex: "none",
 		height: size,
-		justify: "center",
-		variant: "outlined",
 		width: size,
-		className: cx(styles.root, isChecked && styles.checked, isIndeterminate && styles.indeterminate, disabled && styles.disabled, className, classNames?.checkbox),
-		style: backgroundColor && (isChecked || isIndeterminate) ? {
-			backgroundColor,
-			borderColor: backgroundColor,
-			...checkboxStyles
-		} : { ...checkboxStyles },
-		onClick: handleClick,
+		...backgroundColor ? { "--lobe-checkbox-bg": backgroundColor } : {},
+		...children ? {} : style,
+		...customStyles?.checkbox
+	};
+	const box = /* @__PURE__ */ jsx(Checkbox.Root, {
+		disabled,
+		indeterminate,
+		onCheckedChange: onChange,
 		...rest,
-		children: isIndeterminate ? /* @__PURE__ */ jsx(Minus, {
-			size,
-			strokeWidth: 3,
-			style: { transform: `scale(${shape === "square" ? .75 : .66})` }
-		}) : isChecked ? /* @__PURE__ */ jsx(CheckIcon, {
-			size,
-			strokeWidth: 3,
-			style: { transform: `scale(${shape === "square" ? .75 : .66})` }
-		}) : null
+		...styleProps([styles.root, focusRing.info], clsx(children ? classNames?.checkbox : className, classNames?.checkbox), boxStyle),
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			...stylex.props(styles.indicator),
+			children: indeterminate ? /* @__PURE__ */ jsx(Minus, {
+				size,
+				strokeWidth: 3,
+				style: { transform: `scale(${shape === "square" ? .75 : .66})` }
+			}) : /* @__PURE__ */ jsx(CheckIcon, {
+				size,
+				strokeWidth: 3,
+				style: { transform: `scale(${shape === "square" ? .75 : .66})` }
+			})
+		})
 	});
-	if (!children) return checkIcon;
-	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		horizontal: true,
-		align: "center",
-		className: classNames?.wrapper,
-		gap: Math.floor(size / 2),
-		style: {
-			cursor: disabled ? "not-allowed" : "pointer",
-			userSelect: "none",
+	if (!children) return box;
+	return /* @__PURE__ */ jsxs("label", {
+		...styleProps(styles.label, clsx(className, classNames?.wrapper), {
+			gap: Math.floor(size / 2),
+			...style,
 			...customStyles?.wrapper
-		},
-		onClick: handleClick,
-		children: [checkIcon, /* @__PURE__ */ jsx(Text, {
+		}),
+		children: [box, /* @__PURE__ */ jsx(Text, {
 			as: "span",
-			className: cx(classNames?.text),
+			className: classNames?.text,
 			style: customStyles?.text,
 			...textProps,
 			type: disabled ? "secondary" : textProps?.type,
 			children
 		})]
 	});
-};
-Checkbox.displayName = "Checkbox";
+});
+Checkbox$1.displayName = "Checkbox";
+var Checkbox_default = Object.assign(Checkbox$1, { formBinding: { valueProp: "checked" } });
 //#endregion
-export { Checkbox as default };
+export { Checkbox_default as default };
 
 //# sourceMappingURL=Checkbox.mjs.map

package/es/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["Flexbox"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport type { CSSProperties, FC, MouseEvent } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox: FC<CheckboxProps> = ({\n  checked,\n  defaultChecked,\n  onChange,\n  size = 16,\n  className,\n  style,\n  children,\n  textProps,\n  backgroundColor,\n  classNames,\n  styles: customStyles,\n  shape = 'square',\n  disabled,\n  indeterminate,\n  ...rest\n}) => {\n  const [value, setValue] = useMergeState(defaultChecked || false, {\n    defaultValue: defaultChecked,\n    onChange,\n    value: checked,\n  });\n\n  const checkboxStyles: CSSProperties = {\n    borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n    ...style,\n    ...customStyles?.checkbox,\n  };\n\n  const handleClick = (e?: MouseEvent) => {\n    if (!disabled) {\n      e?.preventDefault();\n      setValue(!value);\n    }\n  };\n\n  const isIndeterminate = indeterminate;\n  const isChecked = !isIndeterminate && value;\n\n  const checkIcon = (\n    <Block\n      align={'center'}\n      flex={'none'}\n      height={size}\n      justify={'center'}\n      variant={'outlined'}\n      width={size}\n      className={cx(\n        styles.root,\n        isChecked && styles.checked,\n        isIndeterminate && styles.indeterminate,\n        disabled && styles.disabled,\n        className,\n        classNames?.checkbox,\n      )}\n      style={\n        backgroundColor && (isChecked || isIndeterminate)\n          ? { backgroundColor, borderColor: backgroundColor, ...checkboxStyles }\n          : { ...checkboxStyles }\n      }\n      onClick={handleClick}\n      {...rest}\n    >\n      {isIndeterminate ? (\n        <Minus\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : isChecked ? (\n        <CheckIcon\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : null}\n    </Block>\n  );\n\n  if (!children) return checkIcon;\n\n  return (\n    <Flexbox\n      horizontal\n      align={'center'}\n      className={classNames?.wrapper}\n      gap={Math.floor(size / 2)}\n      style={{\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        userSelect: 'none',\n        ...customStyles?.wrapper,\n      }}\n      onClick={handleClick}\n    >\n      {checkIcon}\n      <Text\n        as={'span'}\n        className={cx(classNames?.text)}\n        style={customStyles?.text}\n        {...textProps}\n        type={disabled ? 'secondary' : textProps?.type}\n      >\n        {children}\n      </Text>\n    </Flexbox>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAM,YAA+B,EACnC,SACA,gBACA,UACA,OAAO,IACP,WACA,OACA,UACA,WACA,iBACA,YACA,QAAQ,cACR,QAAQ,UACR,UACA,eACA,GAAG,WACC;CACJ,MAAM,CAAC,OAAO,YAAY,cAAc,kBAAkB,OAAO;EAC/D,cAAc;EACd;EACA,OAAO;CACT,CAAC;CAED,MAAM,iBAAgC;EACpC,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,CAAC,EAAE,OAAO;EAC3E,GAAG;EACH,GAAG,cAAc;CACnB;CAEA,MAAM,eAAe,MAAmB;EACtC,IAAI,CAAC,UAAU;GACb,GAAG,eAAe;GAClB,SAAS,CAAC,KAAK;EACjB;CACF;CAEA,MAAM,kBAAkB;CACxB,MAAM,YAAY,CAAC,mBAAmB;CAEtC,MAAM,YACJ,oBAAC,OAAD;EACE,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACT,SAAS;EACT,OAAO;EACP,WAAW,GACT,OAAO,MACP,aAAa,OAAO,SACpB,mBAAmB,OAAO,eAC1B,YAAY,OAAO,UACnB,WACA,YAAY,QACd;EACA,OACE,oBAAoB,aAAa,mBAC7B;GAAE;GAAiB,aAAa;GAAiB,GAAG;EAAe,IACnE,EAAE,GAAG,eAAe;EAE1B,SAAS;EACT,GAAI;EAEH,UAAA,kBACC,oBAAC,OAAD;GACQ;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;EACD,CAAA,IACC,YACF,oBAAC,WAAD;GACQ;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;EACD,CAAA,IACC;CACC,CAAA;CAGT,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,YAAY;EACvB,KAAK,KAAK,MAAM,OAAO,CAAC;EACxB,OAAO;GACL,QAAQ,WAAW,gBAAgB;GACnC,YAAY;GACZ,GAAG,cAAc;EACnB;EACA,SAAS;EAVX,UAAA,CAYG,WACD,oBAAC,MAAD;GACE,IAAI;GACJ,WAAW,GAAG,YAAY,IAAI;GAC9B,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;EACG,CAAA,CACC;;AAEb;AAEA,SAAS,cAAc"}
+{"version":3,"file":"Checkbox.mjs","names":["Checkbox","BaseCheckbox"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport { type CSSProperties, memo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox = memo<CheckboxProps>(\n  ({\n    size = 16,\n    shape = 'square',\n    backgroundColor,\n    children,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    textProps,\n    onChange,\n    disabled,\n    indeterminate,\n    ...rest\n  }) => {\n    const boxStyle: CSSProperties = {\n      borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n      height: size,\n      width: size,\n      ...(backgroundColor ? { '--lobe-checkbox-bg': backgroundColor } : {}),\n      ...(children ? {} : style),\n      ...customStyles?.checkbox,\n    };\n\n    const box = (\n      <BaseCheckbox.Root\n        disabled={disabled}\n        indeterminate={indeterminate}\n        onCheckedChange={onChange}\n        {...rest}\n        {...styleProps(\n          [styles.root, focusRing.info],\n          clsx(children ? classNames?.checkbox : className, classNames?.checkbox),\n          boxStyle,\n        )}\n      >\n        <BaseCheckbox.Indicator {...stylex.props(styles.indicator)}>\n          {indeterminate ? (\n            <Minus\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          ) : (\n            <CheckIcon\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          )}\n        </BaseCheckbox.Indicator>\n      </BaseCheckbox.Root>\n    );\n\n    if (!children) return box;\n\n    return (\n      <label\n        {...styleProps(styles.label, clsx(className, classNames?.wrapper), {\n          gap: Math.floor(size / 2),\n          ...style,\n          ...customStyles?.wrapper,\n        })}\n      >\n        {box}\n        <Text\n          as={'span'}\n          className={classNames?.text}\n          style={customStyles?.text}\n          {...textProps}\n          type={disabled ? 'secondary' : textProps?.type}\n        >\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Object.assign(Checkbox, { formBinding: { valueProp: 'checked' } as const });\n"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,aAAW,MAAqB,EACpC,OAAO,IACP,QAAQ,UACR,iBACA,UACA,WACA,YACA,QAAQ,cACR,OACA,WACA,UACA,UACA,eACA,GAAG,WACC;CACJ,MAAM,WAA0B;EAC9B,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,CAAC,EAAE,OAAO;EAC3E,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EACpB,sBAAsB,gBACxB,IAAI,CAAC;EACL,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CACA,MAAM,MAAM,oBAACC,SAAa,MAAd;EAA6B;EAAyB;EAAe,iBAAiB;EAAU,GAAI;EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,IAAI,GAAG,KAAK,WAAW,YAAY,WAAW,WAAW,YAAY,QAAQ,GAAG,QAAQ;EAC/O,UAAA,oBAACA,SAAa,WAAd;GAAwB,GAAI,OAAO,MAAM,OAAO,SAAS;GACtD,UAAA,gBAAgB,oBAAC,OAAD;IAAa;IAAM,aAAa;IAAG,OAAO,EAC7D,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA,IAAI,oBAAC,WAAD;IAAiB;IAAM,aAAa;IAAG,OAAO,EACpD,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA;EACsB,CAAA;CACP,CAAA;CACvB,IAAI,CAAC,UAAU,OAAO;CACtB,OAAO,qBAAC,SAAD;EAAO,GAAI,WAAW,OAAO,OAAO,KAAK,WAAW,YAAY,OAAO,GAAG;GAC/E,KAAK,KAAK,MAAM,OAAO,CAAC;GACxB,GAAG;GACH,GAAG,cAAc;EACnB,CAAC;EAJM,UAAA,CAKA,KACD,oBAAC,MAAD;GAAM,IAAI;GAAQ,WAAW,YAAY;GAAM,OAAO,cAAc;GAAM,GAAI;GAAW,MAAM,WAAW,cAAc,WAAW;GAChI;EACG,CAAA,CACD;;AACb,CAAC;AACD,WAAS,cAAc;AACvB,IAAA,mBAAe,OAAO,OAAOD,YAAU,EACrC,aAAa,EACX,WAAW,UACb,EACF,CAAC"}

package/es/Checkbox/CheckboxGroup.d.mts

@@ -1,7 +1,6 @@
 import { CheckboxGroupProps } from "./type.mjs";
-import { FC } from "react";
 //#region src/Checkbox/CheckboxGroup.d.ts
-declare const CheckboxGroup: FC<CheckboxGroupProps>;
+declare const CheckboxGroup: import("react").NamedExoticComponent<CheckboxGroupProps>;
 //#endregion
 export { CheckboxGroup as default };
 //# sourceMappingURL=CheckboxGroup.d.mts.map

package/es/Checkbox/CheckboxGroup.mjs

@@ -1,49 +1,37 @@
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import Checkbox from "./Checkbox.mjs";
+"use client";
+import Checkbox_default from "./Checkbox.mjs";
+import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 //#region src/Checkbox/CheckboxGroup.tsx
-const CheckboxGroup = ({ defaultValue, disabled, onChange, options, textProps, value, shape, size, ...rest }) => {
-	const [selectedValues, setSelectedValues] = useMergeState(defaultValue || [], {
-		defaultValue,
-		onChange,
-		value
-	});
-	const handleChange = (optionValue, checked) => {
-		const newValues = checked ? [...selectedValues, optionValue] : selectedValues.filter((v) => v !== optionValue);
-		setSelectedValues(newValues);
-	};
-	const normalizedOptions = options.map((option) => {
-		if (typeof option === "string") return {
-			disabled: false,
-			label: option,
-			value: option
-		};
-		return option;
-	});
-	return /* @__PURE__ */ jsx(FlexBasic_default, {
-		horizontal: true,
-		align: "center",
-		gap: 16,
-		wrap: "wrap",
+const CheckboxGroup$1 = memo(({ options, onChange, gap = 12, horizontal = true, size, shape, textProps, style, ...rest }) => {
+	const items = useMemo(() => options.map((option) => typeof option === "string" ? {
+		label: option,
+		value: option
+	} : option), [options]);
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		style: {
+			display: "flex",
+			flexDirection: horizontal ? "row" : "column",
+			flexWrap: "wrap",
+			gap,
+			...style
+		},
+		onValueChange: onChange,
 		...rest,
-		children: normalizedOptions.map((option) => {
-			const isChecked = selectedValues.includes(option.value);
-			const isDisabled = disabled || option.disabled;
-			return /* @__PURE__ */ jsx(Checkbox, {
-				checked: isChecked,
-				disabled: isDisabled,
-				shape,
-				size,
-				textProps,
-				onChange: (checked) => handleChange(option.value, checked),
-				children: option.label
-			}, String(option.value));
-		})
+		children: items.map((item) => /* @__PURE__ */ jsx(Checkbox_default, {
+			disabled: item.disabled,
+			name: item.value,
+			shape,
+			size,
+			textProps,
+			value: item.value,
+			children: item.label
+		}, item.value))
 	});
-};
-CheckboxGroup.displayName = "CheckboxGroup";
+});
+CheckboxGroup$1.displayName = "CheckboxGroup";
 //#endregion
-export { CheckboxGroup as default };
+export { CheckboxGroup$1 as default };
 
 //# sourceMappingURL=CheckboxGroup.mjs.map

package/es/Checkbox/CheckboxGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","names":["Flexbox"],"sources":["../../src/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxGroupProps } from './type';\n\nconst CheckboxGroup: FC<CheckboxGroupProps> = ({\n  defaultValue,\n  disabled,\n  onChange,\n  options,\n  textProps,\n  value,\n  shape,\n  size,\n  ...rest\n}) => {\n  const [selectedValues, setSelectedValues] = useMergeState<string[]>(defaultValue || [], {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  const handleChange = (optionValue: string, checked: boolean) => {\n    const newValues = checked\n      ? [...selectedValues, optionValue]\n      : selectedValues.filter((v) => v !== optionValue);\n\n    setSelectedValues(newValues);\n  };\n\n  const normalizedOptions = options.map((option) => {\n    if (typeof option === 'string') {\n      return {\n        disabled: false,\n        label: option,\n        value: option,\n      };\n    }\n    return option;\n  });\n\n  return (\n    <Flexbox horizontal align={'center'} gap={16} wrap={'wrap'} {...rest}>\n      {normalizedOptions.map((option) => {\n        const isChecked = selectedValues.includes(option.value);\n        const isDisabled = disabled || option.disabled;\n\n        return (\n          <Checkbox\n            checked={isChecked}\n            disabled={isDisabled}\n            key={String(option.value)}\n            shape={shape}\n            size={size}\n            textProps={textProps}\n            onChange={(checked) => handleChange(option.value, checked)}\n          >\n            {option.label}\n          </Checkbox>\n        );\n      })}\n    </Flexbox>\n  );\n};\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;AAQA,MAAM,iBAAyC,EAC7C,cACA,UACA,UACA,SACA,WACA,OACA,OACA,MACA,GAAG,WACC;CACJ,MAAM,CAAC,gBAAgB,qBAAqB,cAAwB,gBAAgB,CAAC,GAAG;EACtF;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,aAAqB,YAAqB;EAC9D,MAAM,YAAY,UACd,CAAC,GAAG,gBAAgB,WAAW,IAC/B,eAAe,QAAQ,MAAM,MAAM,WAAW;EAElD,kBAAkB,SAAS;CAC7B;CAEA,MAAM,oBAAoB,QAAQ,KAAK,WAAW;EAChD,IAAI,OAAO,WAAW,UACpB,OAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;EACT;EAEF,OAAO;CACT,CAAC;CAED,OACE,oBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAAI,MAAM;EAAQ,GAAI;EAC7D,UAAA,kBAAkB,KAAK,WAAW;GACjC,MAAM,YAAY,eAAe,SAAS,OAAO,KAAK;GACtD,MAAM,aAAa,YAAY,OAAO;GAEtC,OACE,oBAAC,UAAD;IACE,SAAS;IACT,UAAU;IAEH;IACD;IACK;IACX,WAAW,YAAY,aAAa,OAAO,OAAO,OAAO;IAExD,UAAA,OAAO;GACA,GAPH,OAAO,OAAO,KAAK,CAOhB;EAEd,CAAC;CACM,CAAA;AAEb;AAEA,cAAc,cAAc"}
+{"version":3,"file":"CheckboxGroup.mjs","names":["CheckboxGroup","BaseCheckboxGroup","Checkbox"],"sources":["../../src/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["'use client';\n\nimport { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';\nimport { memo, useMemo } from 'react';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxGroupOption, CheckboxGroupProps } from './type';\n\nconst CheckboxGroup = memo<CheckboxGroupProps>(\n  ({ options, onChange, gap = 12, horizontal = true, size, shape, textProps, style, ...rest }) => {\n    const items = useMemo<CheckboxGroupOption[]>(\n      () =>\n        options.map((option) =>\n          typeof option === 'string' ? { label: option, value: option } : option,\n        ),\n      [options],\n    );\n\n    return (\n      <BaseCheckboxGroup\n        style={{\n          display: 'flex',\n          flexDirection: horizontal ? 'row' : 'column',\n          flexWrap: 'wrap',\n          gap,\n          ...style,\n        }}\n        onValueChange={onChange}\n        {...rest}\n      >\n        {items.map((item) => (\n          <Checkbox\n            disabled={item.disabled}\n            key={item.value}\n            name={item.value}\n            shape={shape}\n            size={size}\n            textProps={textProps}\n            value={item.value}\n          >\n            {item.label}\n          </Checkbox>\n        ))}\n      </BaseCheckboxGroup>\n    );\n  },\n);\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;AAQA,MAAMA,kBAAgB,MACnB,EAAE,SAAS,UAAU,MAAM,IAAI,aAAa,MAAM,MAAM,OAAO,WAAW,OAAO,GAAG,WAAW;CAC9F,MAAM,QAAQ,cAEV,QAAQ,KAAK,WACX,OAAO,WAAW,WAAW;EAAE,OAAO;EAAQ,OAAO;CAAO,IAAI,MAClE,GACF,CAAC,OAAO,CACV;CAEA,OACE,oBAACC,eAAD;EACE,OAAO;GACL,SAAS;GACT,eAAe,aAAa,QAAQ;GACpC,UAAU;GACV;GACA,GAAG;EACL;EACA,eAAe;EACf,GAAI;EAEH,UAAA,MAAM,KAAK,SACV,oBAACC,kBAAD;GACE,UAAU,KAAK;GAEf,MAAM,KAAK;GACJ;GACD;GACK;GACX,OAAO,KAAK;GAEX,UAAA,KAAK;EACE,GARH,KAAK,KAQF,CACX;CACgB,CAAA;AAEvB,CACF;AAEA,gBAAc,cAAc"}

package/es/Checkbox/index.d.mts

@@ -1,12 +1,5 @@
-import { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from "./type.mjs";
+import { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxShape } from "./type.mjs";
+import _default from "./Checkbox.mjs";
 import CheckboxGroup from "./CheckboxGroup.mjs";
-import { ReactNode, RefAttributes } from "react";
-//#region src/Checkbox/index.d.ts
-interface ICheckbox {
-  (props: CheckboxProps & RefAttributes<HTMLDivElement>): ReactNode;
-  Group: typeof CheckboxGroup;
-}
-declare const Checkbox: ICheckbox;
-//#endregion
-export { CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, Checkbox as default };
-//# sourceMappingURL=index.d.mts.map
+import { checkboxStyles } from "./style.mjs";
+export { _default as Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, checkboxStyles };

package/es/Checkbox/index.mjs

@@ -1,9 +1,4 @@
-import Checkbox$1 from "./Checkbox.mjs";
+import { checkboxStyles } from "./style.mjs";
+import Checkbox_default from "./Checkbox.mjs";
 import CheckboxGroup from "./CheckboxGroup.mjs";
-//#region src/Checkbox/index.ts
-const Checkbox = Checkbox$1;
-Checkbox.Group = CheckboxGroup;
-//#endregion
-export { CheckboxGroup, Checkbox as default };
-
-//# sourceMappingURL=index.mjs.map
+export { Checkbox_default as Checkbox, CheckboxGroup, checkboxStyles };

package/es/Checkbox/style.d.mts

@@ -0,0 +1,35 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/Checkbox/style.d.ts
+export declare const styles: Readonly<{
+  readonly indicator: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+  }>;
+  readonly label: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+  }>;
+  readonly root: Readonly<{
+    readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+    readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
+    readonly flex: stylex.StyleXClassNameFor<"flex", "none">;
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly transition: stylex.StyleXClassNameFor<"transition", `background 150ms ${string}, border-color 150ms ${string}`>;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.25 | null>;
+  }>;
+}>;
+export declare const checkboxStyles: Record<keyof typeof styles, string>;
+//#endregion
+//# sourceMappingURL=style.d.mts.map