@lobehub/ui 5.19.3 → 5.20.0

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

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

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

@@ -0,0 +1,91 @@
+"use client";
+import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import { rootVariants, styles } from "../Input/style.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import { memo, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { XIcon } from "lucide-react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/base-ui/AutoComplete/AutoComplete.tsx
+const AutoComplete = memo(({ className, classNames, styles: customStyles, style, variant, shadow, size = "middle", options = [], onChange, onSearch, allowClear, disabled, placeholder, prefix, suffix, emptyText, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const appElement = useAppElement();
+	const anchorRef = useRef(null);
+	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	const items = useMemo(() => options.map((option) => typeof option === "string" ? { value: option } : option), [options]);
+	return /* @__PURE__ */ jsxs(Autocomplete.Root, {
+		openOnInputClick: true,
+		disabled,
+		itemToStringValue: (item) => item.value,
+		items,
+		onValueChange: (value) => {
+			onChange?.(value);
+			onSearch?.(value);
+		},
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(rootVariants({
+				shadow,
+				size,
+				variant: mergedVariant
+			}), className),
+			"data-disabled": disabled ? "" : void 0,
+			ref: anchorRef,
+			style,
+			children: [
+				prefix && /* @__PURE__ */ jsx("span", {
+					className: styles.slot,
+					children: prefix
+				}),
+				/* @__PURE__ */ jsx(Autocomplete.Input, {
+					className: cx(styles.input, classNames?.input),
+					placeholder,
+					style: customStyles?.input
+				}),
+				allowClear && /* @__PURE__ */ jsx(Autocomplete.Clear, {
+					"aria-label": "Clear",
+					className: styles$1.clear,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: XIcon,
+						size: 14
+					})
+				}),
+				suffix && /* @__PURE__ */ jsx("span", {
+					className: styles.slot,
+					children: suffix
+				})
+			]
+		}), /* @__PURE__ */ jsx(Autocomplete.Portal, {
+			container: appElement ?? void 0,
+			children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
+				anchor: anchorRef,
+				className: styles$1.positioner,
+				sideOffset: 4,
+				children: /* @__PURE__ */ jsxs(Autocomplete.Popup, {
+					className: cx(styles$1.popup, classNames?.popup),
+					style: customStyles?.popup,
+					children: [emptyText && /* @__PURE__ */ jsx(Autocomplete.Empty, {
+						className: styles$1.empty,
+						children: emptyText
+					}), /* @__PURE__ */ jsx(Autocomplete.List, {
+						className: styles$1.list,
+						children: (item) => /* @__PURE__ */ jsx(Autocomplete.Item, {
+							className: cx(styles$1.item, classNames?.item),
+							disabled: item.disabled,
+							style: customStyles?.item,
+							value: item,
+							children: item.label ?? item.value
+						}, item.value)
+					})]
+				})
+			})
+		})]
+	});
+});
+AutoComplete.displayName = "AutoComplete";
+//#endregion
+export { AutoComplete as default };
+
+//# sourceMappingURL=AutoComplete.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.mjs","names":["inputVariants","inputStyles","styles"],"sources":["../../../src/base-ui/AutoComplete/AutoComplete.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx, useThemeMode } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { memo, useMemo, useRef } from 'react';\n\nimport { inputStyles, inputVariants } from '@/base-ui/Input';\nimport Icon from '@/Icon';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from './style';\nimport type { AutoCompleteOption, AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(\n  ({\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    options = [],\n    onChange,\n    onSearch,\n    allowClear,\n    disabled,\n    placeholder,\n    prefix,\n    suffix,\n    emptyText,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const appElement = useAppElement();\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    const items = useMemo<AutoCompleteOption[]>(\n      () => options.map((option) => (typeof option === 'string' ? { value: option } : option)),\n      [options],\n    );\n\n    return (\n      <Autocomplete.Root\n        openOnInputClick\n        disabled={disabled}\n        itemToStringValue={(item) => (item as AutoCompleteOption).value}\n        items={items}\n        onValueChange={(value) => {\n          onChange?.(value);\n          onSearch?.(value);\n        }}\n        {...rest}\n      >\n        <div\n          className={cx(inputVariants({ shadow, size, variant: mergedVariant }), className)}\n          data-disabled={disabled ? '' : undefined}\n          ref={anchorRef}\n          style={style}\n        >\n          {prefix && <span className={inputStyles.slot}>{prefix}</span>}\n          <Autocomplete.Input\n            className={cx(inputStyles.input, classNames?.input)}\n            placeholder={placeholder}\n            style={customStyles?.input}\n          />\n          {allowClear && (\n            <Autocomplete.Clear aria-label={'Clear'} className={styles.clear}>\n              <Icon icon={XIcon} size={14} />\n            </Autocomplete.Clear>\n          )}\n          {suffix && <span className={inputStyles.slot}>{suffix}</span>}\n        </div>\n        <Autocomplete.Portal container={appElement ?? undefined}>\n          <Autocomplete.Positioner anchor={anchorRef} className={styles.positioner} sideOffset={4}>\n            <Autocomplete.Popup\n              className={cx(styles.popup, classNames?.popup)}\n              style={customStyles?.popup}\n            >\n              {emptyText && (\n                <Autocomplete.Empty className={styles.empty}>{emptyText}</Autocomplete.Empty>\n              )}\n              <Autocomplete.List className={styles.list}>\n                {(item: AutoCompleteOption) => (\n                  <Autocomplete.Item\n                    className={cx(styles.item, classNames?.item)}\n                    disabled={item.disabled}\n                    key={item.value}\n                    style={customStyles?.item}\n                    value={item}\n                  >\n                    {item.label ?? item.value}\n                  </Autocomplete.Item>\n                )}\n              </Autocomplete.List>\n            </Autocomplete.Popup>\n          </Autocomplete.Positioner>\n        </Autocomplete.Portal>\n      </Autocomplete.Root>\n    );\n  },\n);\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,UAAU,EAAE,EACZ,UACA,UACA,YACA,UACA,aACA,QACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,aAAa,eAAe;CAClC,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,QAAQ,cACN,QAAQ,KAAK,WAAY,OAAO,WAAW,WAAW,EAAE,OAAO,QAAQ,GAAG,OAAQ,EACxF,CAAC,QAAQ,CACV;AAED,QACE,qBAAC,aAAa,MAAd;EACE,kBAAA;EACU;EACV,oBAAoB,SAAU,KAA4B;EACnD;EACP,gBAAgB,UAAU;AACxB,cAAW,MAAM;AACjB,cAAW,MAAM;;EAEnB,GAAI;YATN,CAWE,qBAAC,OAAD;GACE,WAAW,GAAGA,aAAc;IAAE;IAAQ;IAAM,SAAS;IAAe,CAAC,EAAE,UAAU;GACjF,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK;GACE;aAJT;IAMG,UAAU,oBAAC,QAAD;KAAM,WAAWC,OAAY;eAAO;KAAc,CAAA;IAC7D,oBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,OAAY,OAAO,YAAY,MAAM;KACtC;KACb,OAAO,cAAc;KACrB,CAAA;IACD,cACC,oBAAC,aAAa,OAAd;KAAoB,cAAY;KAAS,WAAWC,SAAO;eACzD,oBAAC,MAAD;MAAM,MAAM;MAAO,MAAM;MAAM,CAAA;KACZ,CAAA;IAEtB,UAAU,oBAAC,QAAD;KAAM,WAAWD,OAAY;eAAO;KAAc,CAAA;IACzD;MACN,oBAAC,aAAa,QAAd;GAAqB,WAAW,cAAc,KAAA;aAC5C,oBAAC,aAAa,YAAd;IAAyB,QAAQ;IAAW,WAAWC,SAAO;IAAY,YAAY;cACpF,qBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,SAAO,OAAO,YAAY,MAAM;KAC9C,OAAO,cAAc;eAFvB,CAIG,aACC,oBAAC,aAAa,OAAd;MAAoB,WAAWA,SAAO;gBAAQ;MAA+B,CAAA,EAE/E,oBAAC,aAAa,MAAd;MAAmB,WAAWA,SAAO;iBACjC,SACA,oBAAC,aAAa,MAAd;OACE,WAAW,GAAGA,SAAO,MAAM,YAAY,KAAK;OAC5C,UAAU,KAAK;OAEf,OAAO,cAAc;OACrB,OAAO;iBAEN,KAAK,SAAS,KAAK;OACF,EALb,KAAK,MAKQ;MAEJ,CAAA,CACD;;IACG,CAAA;GACN,CAAA,CACJ;;EAGzB;AAED,aAAa,cAAc"}

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

@@ -0,0 +1,3 @@
+import { AutoCompleteOption, AutoCompleteProps } from "./type.mjs";
+import { AutoComplete } from "./AutoComplete.mjs";
+import { styles } from "./style.mjs";

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

@@ -0,0 +1,12 @@
+//#region src/base-ui/AutoComplete/style.d.ts
+declare const styles: {
+  clear: string;
+  empty: string;
+  item: string;
+  list: string;
+  popup: string;
+  positioner: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

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

@@ -0,0 +1,76 @@
+import { styles as styles$1 } from "../DropdownMenu/sharedStyle.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/AutoComplete/style.ts
+const ownStyles = createStaticStyles(({ css, cssVar }) => ({
+	clear: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: none;
+    outline: none;
+
+    transition: color 150ms ${cssVar.motionEaseOut};
+
+    &:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	empty: css`
+    cursor: default;
+
+    &:empty {
+      display: none;
+    }
+
+    &:hover {
+      background: transparent;
+    }
+  `,
+	list: css`
+    overflow-y: auto;
+    max-height: min(320px, var(--available-height));
+
+    &:empty {
+      display: none;
+    }
+  `,
+	popup: css`
+    transform-origin: var(--transform-origin);
+    width: var(--anchor-width);
+    min-width: 0;
+    transition:
+      opacity 140ms ${cssVar.motionEaseOut},
+      transform 140ms ${cssVar.motionEaseOut};
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: scaleY(0.92);
+      opacity: 0;
+    }
+  `
+}));
+const styles = {
+	clear: ownStyles.clear,
+	empty: [
+		styles$1.item,
+		styles$1.empty,
+		ownStyles.empty
+	].join(" "),
+	item: styles$1.item,
+	list: ownStyles.list,
+	popup: [styles$1.popup, ownStyles.popup].join(" "),
+	positioner: styles$1.positioner
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["menuStyles"],"sources":["../../../src/base-ui/AutoComplete/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\n\nconst ownStyles = createStaticStyles(({ css, cssVar }) => ({\n  clear: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition: color 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  empty: css`\n    cursor: default;\n\n    &:empty {\n      display: none;\n    }\n\n    &:hover {\n      background: transparent;\n    }\n  `,\n  list: css`\n    overflow-y: auto;\n    max-height: min(320px, var(--available-height));\n\n    &:empty {\n      display: none;\n    }\n  `,\n  popup: css`\n    transform-origin: var(--transform-origin);\n    width: var(--anchor-width);\n    min-width: 0;\n    transition:\n      opacity 140ms ${cssVar.motionEaseOut},\n      transform 140ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scaleY(0.92);\n      opacity: 0;\n    }\n  `,\n}));\n\nexport const styles = {\n  clear: ownStyles.clear,\n  empty: [menuStyles.item, menuStyles.empty, ownStyles.empty].join(' '),\n  item: menuStyles.item,\n  list: ownStyles.list,\n  popup: [menuStyles.popup, ownStyles.popup].join(' '),\n  positioner: menuStyles.positioner,\n};\n"],"mappings":";;;AAIA,MAAM,YAAY,oBAAoB,EAAE,KAAK,cAAc;CACzD,OAAO,GAAG;;;;;;;;;;;aAWC,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;CAG9B,OAAO,GAAG;;;;;;;;;;;CAWV,MAAM,GAAG;;;;;;;;CAQT,OAAO,GAAG;;;;;sBAKU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;CAQ5C,EAAE;AAEH,MAAa,SAAS;CACpB,OAAO,UAAU;CACjB,OAAO;EAACA,SAAW;EAAMA,SAAW;EAAO,UAAU;EAAM,CAAC,KAAK,IAAI;CACrE,MAAMA,SAAW;CACjB,MAAM,UAAU;CAChB,OAAO,CAACA,SAAW,OAAO,UAAU,MAAM,CAAC,KAAK,IAAI;CACpD,YAAYA,SAAW;CACxB"}

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

@@ -0,0 +1,40 @@
+import { InputProps } from "../Input/type.mjs";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+
+//#region src/base-ui/AutoComplete/type.d.ts
+interface AutoCompleteOption {
+  disabled?: boolean;
+  label?: ReactNode;
+  value: string;
+}
+type BaseAutocompleteProps = Omit<ComponentProps<typeof Autocomplete.Root>, 'className' | 'style' | 'render' | 'children' | 'items' | 'onValueChange' | 'mode'>;
+interface AutoCompleteProps extends BaseAutocompleteProps {
+  allowClear?: boolean;
+  className?: string;
+  classNames?: {
+    input?: string;
+    item?: string;
+    popup?: string;
+  };
+  disabled?: boolean;
+  emptyText?: ReactNode;
+  onChange?: (value: string) => void;
+  onSearch?: (value: string) => void;
+  options?: (string | AutoCompleteOption)[];
+  placeholder?: string;
+  prefix?: InputProps['prefix'];
+  shadow?: boolean;
+  size?: InputProps['size'];
+  style?: CSSProperties;
+  styles?: {
+    input?: CSSProperties;
+    item?: CSSProperties;
+    popup?: CSSProperties;
+  };
+  suffix?: InputProps['suffix'];
+  variant?: InputProps['variant'];
+}
+//#endregion
+export { AutoCompleteOption, AutoCompleteProps };
+//# sourceMappingURL=type.d.mts.map

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

@@ -1,3 +1,4 @@
+import { controlHeight } from "../controlSize.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/Button/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -36,19 +37,19 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	sizeSmall: css`
-    height: 24px;
+    height: ${controlHeight.small}px;
     padding-inline: 8px;
     border-radius: ${cssVar.borderRadiusSM};
     font-size: 12px;
   `,
 	sizeMiddle: css`
-    height: 32px;
+    height: ${controlHeight.middle}px;
     padding-inline: 14px;
     border-radius: ${cssVar.borderRadiusSM};
     font-size: 13px;
   `,
 	sizeLarge: css`
-    height: 40px;
+    height: ${controlHeight.large}px;
     padding-inline: 16px;
     border-radius: ${cssVar.borderRadius};
     font-size: 14px;

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

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

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

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

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

@@ -0,0 +1,61 @@
+"use client";
+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 { CheckIcon, Minus } from "lucide-react";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/base-ui/Checkbox/Checkbox.tsx
+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%",
+		height: size,
+		width: size,
+		...backgroundColor ? { "--lobe-checkbox-bg": backgroundColor } : {},
+		...children ? {} : style,
+		...customStyles?.checkbox
+	};
+	const box = /* @__PURE__ */ jsx(Checkbox.Root, {
+		disabled,
+		indeterminate,
+		style: boxStyle,
+		className: cx(styles.root, children ? classNames?.checkbox : className, classNames?.checkbox),
+		onCheckedChange: onChange,
+		...rest,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: 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 box;
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx(styles.label, className, classNames?.wrapper),
+		style: {
+			gap: Math.floor(size / 2),
+			...style,
+			...customStyles?.wrapper
+		},
+		children: [box, /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: classNames?.text,
+			style: customStyles?.text,
+			...textProps,
+			type: disabled ? "secondary" : textProps?.type,
+			children
+		})]
+	});
+});
+Checkbox$1.displayName = "Checkbox";
+//#endregion
+export { Checkbox$1 as default };
+
+//# sourceMappingURL=Checkbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.mjs","names":["Checkbox","BaseCheckbox"],"sources":["../../../src/base-ui/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { cx } from 'antd-style';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport { type CSSProperties, memo } from 'react';\n\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        style={boxStyle}\n        className={cx(\n          styles.root,\n          children ? classNames?.checkbox : className,\n          classNames?.checkbox,\n        )}\n        onCheckedChange={onChange}\n        {...rest}\n      >\n        <BaseCheckbox.Indicator className={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        className={cx(styles.label, className, classNames?.wrapper)}\n        style={{ gap: Math.floor(size / 2), ...style, ...customStyles?.wrapper }}\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 Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAMA,aAAW,MACd,EACC,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,EAAE,CAAC,OAAO;EAC3E,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EAAE,sBAAsB,iBAAiB,GAAG,EAAE;EACpE,GAAI,WAAW,EAAE,GAAG;EACpB,GAAG,cAAc;EAClB;CAED,MAAM,MACJ,oBAACC,SAAa,MAAd;EACY;EACK;EACf,OAAO;EACP,WAAW,GACT,OAAO,MACP,WAAW,YAAY,WAAW,WAClC,YAAY,SACb;EACD,iBAAiB;EACjB,GAAI;YAEJ,oBAACA,SAAa,WAAd;GAAwB,WAAW,OAAO;aACvC,gBACC,oBAAC,OAAD;IACQ;IACN,aAAa;IACb,OAAO,EAAE,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IAAI;IAClE,CAAA,GAEF,oBAAC,WAAD;IACQ;IACN,aAAa;IACb,OAAO,EAAE,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IAAI;IAClE,CAAA;GAEmB,CAAA;EACP,CAAA;AAGtB,KAAI,CAAC,SAAU,QAAO;AAEtB,QACE,qBAAC,SAAD;EACE,WAAW,GAAG,OAAO,OAAO,WAAW,YAAY,QAAQ;EAC3D,OAAO;GAAE,KAAK,KAAK,MAAM,OAAO,EAAE;GAAE,GAAG;GAAO,GAAG,cAAc;GAAS;YAF1E,CAIG,KACD,oBAAC,MAAD;GACE,IAAI;GACJ,WAAW,YAAY;GACvB,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;GACI,CAAA,CACD;;EAGb;AAED,WAAS,cAAc"}

package/es/base-ui/Checkbox/CheckboxGroup.d.mts

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

package/es/base-ui/Checkbox/CheckboxGroup.mjs

@@ -0,0 +1,37 @@
+"use client";
+import Checkbox from "./Checkbox.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/base-ui/Checkbox/CheckboxGroup.tsx
+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: items.map((item) => /* @__PURE__ */ jsx(Checkbox, {
+			disabled: item.disabled,
+			name: item.value,
+			shape,
+			size,
+			textProps,
+			value: item.value,
+			children: item.label
+		}, item.value))
+	});
+});
+CheckboxGroup$1.displayName = "CheckboxGroup";
+//#endregion
+export { CheckboxGroup$1 as default };
+
+//# sourceMappingURL=CheckboxGroup.mjs.map

package/es/base-ui/Checkbox/CheckboxGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.mjs","names":["CheckboxGroup","BaseCheckboxGroup"],"sources":["../../../src/base-ui/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;EAAQ,GAAG,OACjE,EACH,CAAC,QAAQ,CACV;AAED,QACE,oBAACC,eAAD;EACE,OAAO;GACL,SAAS;GACT,eAAe,aAAa,QAAQ;GACpC,UAAU;GACV;GACA,GAAG;GACJ;EACD,eAAe;EACf,GAAI;YAEH,MAAM,KAAK,SACV,oBAAC,UAAD;GACE,UAAU,KAAK;GAEf,MAAM,KAAK;GACJ;GACD;GACK;GACX,OAAO,KAAK;aAEX,KAAK;GACG,EARJ,KAAK,MAQD,CACX;EACgB,CAAA;EAGzB;AAED,gBAAc,cAAc"}

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

@@ -0,0 +1,4 @@
+import { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxShape } from "./type.mjs";
+import { Checkbox } from "./Checkbox.mjs";
+import { CheckboxGroup } from "./CheckboxGroup.mjs";
+import { styles } from "./style.mjs";

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

@@ -0,0 +1,9 @@
+//#region src/base-ui/Checkbox/style.d.ts
+declare const styles: {
+  indicator: string;
+  label: string;
+  root: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

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

@@ -0,0 +1,70 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Checkbox/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	indicator: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+	label: css`
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+
+    &:has([data-disabled]) {
+      cursor: not-allowed;
+    }
+  `,
+	root: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+
+    color: ${cssVar.colorBgLayout};
+
+    background: ${cssVar.colorBgContainer};
+    outline: none;
+
+    transition:
+      background 150ms ${cssVar.motionEaseOut},
+      border-color 150ms ${cssVar.motionEaseOut};
+
+    &:hover:not([data-disabled], [data-checked], [data-indeterminate]) {
+      border-color: ${cssVar.colorBorder};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+
+    &[data-checked],
+    &[data-indeterminate] {
+      border-color: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});
+      background: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+
+      border-color: ${cssVar.colorFill};
+
+      color: ${cssVar.colorText};
+
+      opacity: 0.25;
+      background: ${cssVar.colorFill};
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Checkbox/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  label: css`\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n\n    &:has([data-disabled]) {\n      cursor: not-allowed;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n\n    color: ${cssVar.colorBgLayout};\n\n    background: ${cssVar.colorBgContainer};\n    outline: none;\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-checked], [data-indeterminate]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &[data-checked],\n    &[data-indeterminate] {\n      border-color: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});\n      background: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background: ${cssVar.colorFill};\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;;;;wBAUa,OAAO,qBAAqB;;aAEvC,OAAO,cAAc;;kBAEhB,OAAO,iBAAiB;;;;yBAIjB,OAAO,cAAc;2BACnB,OAAO,cAAc;;;sBAG1B,OAAO,YAAY;;;;2BAId,OAAO,mBAAmB;;;;;;8CAMP,OAAO,aAAa;4CACtB,OAAO,aAAa;;;;;;sBAM1C,OAAO,UAAU;;eAExB,OAAO,UAAU;;;oBAGZ,OAAO,UAAU;;;CAGpC,EAAE"}

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

@@ -0,0 +1,51 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import { TextProps } from "../../Text/type.mjs";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+
+//#region src/base-ui/Checkbox/type.d.ts
+type CheckboxShape = 'square' | 'circle';
+type BaseCheckboxProps = Omit<ComponentProps<typeof Checkbox.Root>, 'className' | 'style' | 'render' | 'children' | 'onCheckedChange'>;
+interface CheckboxProps extends BaseCheckboxProps {
+  backgroundColor?: string;
+  children?: ReactNode;
+  className?: string;
+  classNames?: {
+    checkbox?: string;
+    text?: string;
+    wrapper?: string;
+  };
+  onChange?: (checked: boolean) => void;
+  shape?: CheckboxShape;
+  /**
+   * Box size in pixels
+   * @default 16
+   */
+  size?: number;
+  style?: CSSProperties;
+  styles?: {
+    checkbox?: CSSProperties;
+    text?: CSSProperties;
+    wrapper?: CSSProperties;
+  };
+  textProps?: Omit<TextProps, 'children' | 'className' | 'style'>;
+}
+interface CheckboxGroupOption {
+  disabled?: boolean;
+  label: ReactNode;
+  value: string;
+}
+type BaseCheckboxGroupProps = Omit<ComponentProps<typeof CheckboxGroup>, 'className' | 'style' | 'render' | 'children' | 'onValueChange' | 'onChange'>;
+interface CheckboxGroupProps extends BaseCheckboxGroupProps, Pick<FlexboxProps, 'gap' | 'horizontal'> {
+  className?: string;
+  onChange?: (value: string[]) => void;
+  options: (string | CheckboxGroupOption)[];
+  shape?: CheckboxShape;
+  size?: number;
+  style?: CSSProperties;
+  textProps?: CheckboxProps['textProps'];
+}
+//#endregion
+export { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxShape };
+//# sourceMappingURL=type.d.mts.map