@lobehub/ui 5.55.0 → 5.57.0

package/es/EditableText/ControlInput.mjs

@@ -1,7 +1,7 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
-import Input from "../base-ui/Input/Input.mjs";
+import Input_default from "../base-ui/Input/Input.mjs";
 import { memo, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RotateCcw, Save } from "lucide-react";
@@ -18,7 +18,7 @@ const ControlInput = memo(({ value, onChange, onValueChanging, onChangeEnd, onCo
 		ref?.current?.blur();
 		onChangeEnd?.(input);
 	};
-	return /* @__PURE__ */ jsx(Input, {
+	return /* @__PURE__ */ jsx(Input_default, {
 		autoFocus: true,
 		ref,
 		value: input,

package/es/EditableText/ControlInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ControlInput.mjs","names":["Flexbox"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/base-ui/ActionIcon';\nimport { Input, type InputProps } from '@/base-ui/Input';\nimport { Flexbox } from '@/Flex';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLInputElement>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              horizontal\n              gap={2}\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n              />\n            </Flexbox>\n          )\n        }\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;AAqBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,qBAAqB;EACzB,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB;CAEA,OACE,oBAAC,OAAD;EACE,WAAA;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACA,QACE,UAAU,QACR,oBAAC,QAAD,CAAO,CAAA,IAEP,qBAACA,mBAAD;GACE,YAAA;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;GACV;GANF,UAAA,CAQE,oBAAC,YAAD;IACE,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,SAAS,SAAS,EAAE;IACtB;GACD,CAAA,GACD,oBAAC,YAAD;IACE,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,aAAa;IACf;GACD,CAAA,CACM;;EAGJ;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"ControlInput.mjs","names":["Input","Flexbox"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/base-ui/ActionIcon';\nimport { Input, type InputProps } from '@/base-ui/Input';\nimport { Flexbox } from '@/Flex';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLInputElement>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              horizontal\n              gap={2}\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n              />\n            </Flexbox>\n          )\n        }\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;AAqBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,qBAAqB;EACzB,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB;CAEA,OACE,oBAACA,eAAD;EACE,WAAA;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACA,QACE,UAAU,QACR,oBAAC,QAAD,CAAO,CAAA,IAEP,qBAACC,mBAAD;GACE,YAAA;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;GACV;GANF,UAAA,CAQE,oBAAC,YAAD;IACE,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,SAAS,SAAS,EAAE;IACtB;GACD,CAAA,GACD,oBAAC,YAAD;IACE,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,aAAa;IACf;GACD,CAAA,CACM;;EAGJ;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}

package/es/SearchBar/SearchBar.mjs

@@ -1,7 +1,7 @@
 "use client";
 import Icon from "../Icon/Icon.mjs";
 import Hotkey from "../Hotkey/Hotkey.mjs";
-import Input from "../base-ui/Input/Input.mjs";
+import Input_default from "../base-ui/Input/Input.mjs";
 import Spotlight from "../awesome/Spotlight/Spotlight.mjs";
 import { styles } from "./style.mjs";
 import { memo, useMemo, useRef, useState } from "react";
@@ -33,7 +33,7 @@ const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInpu
 		style,
 		children: [
 			spotlight && /* @__PURE__ */ jsx(Spotlight, {}),
-			/* @__PURE__ */ jsx(Input, {
+			/* @__PURE__ */ jsx(Input_default, {
 				allowClear: true,
 				className: inputClassName,
 				placeholder: placeholder ?? "Type keywords...",

package/es/SearchBar/SearchBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.mjs","names":["useControlledState"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport { Input } from '@/base-ui/Input';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          placeholder={placeholder ?? 'Type keywords...'}\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            compact\n            className={cx(styles.tag, shortKeyClassName)}\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,CAAC,GAC1D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,CAAC,GACtE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cACN,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAClD,CAAC,QAAQ,CACX;CAEA,WACE,cACM;EACJ,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GACA;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAU;EAArD,UAAA;GACG,aAAa,oBAAC,WAAD,CAAY,CAAA;GAC1B,oBAAC,OAAD;IACE,YAAA;IACA,WAAW;IACX,aAAa,eAAe;IAC5B,KAAK;IACL,OAAO;IACP,OAAO;IACP,QACE,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,EAAE;IACzB,CAAA;IAEH,SAAS,MAAM;KACb,SAAS,CAAC;KACV,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,IAAI;IACjB;IACA,WAAW,MAAM;KACf,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,CAAC;IACd;IACA,UAAU,MAAM;KACd,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IACA,eAAe,MAAM;KACnB,eAAe,CAAC;KAChB,WAAW,UAAU;IACvB;IACA,GAAI;GACL,CAAA;GACA,kBAAkB,WAAW,CAAC,cAC7B,oBAAC,QAAD;IACE,SAAA;IACA,WAAW,GAAG,OAAO,KAAK,iBAAiB;IAC3C,MAAM;IACN,OAAO;GACR,CAAA;EAEA;;AAET,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"SearchBar.mjs","names":["useControlledState","Input"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport { Input } from '@/base-ui/Input';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          placeholder={placeholder ?? 'Type keywords...'}\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            compact\n            className={cx(styles.tag, shortKeyClassName)}\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,CAAC,GAC1D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,CAAC,GACtE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cACN,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAClD,CAAC,QAAQ,CACX;CAEA,WACE,cACM;EACJ,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GACA;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAU;EAArD,UAAA;GACG,aAAa,oBAAC,WAAD,CAAY,CAAA;GAC1B,oBAACC,eAAD;IACE,YAAA;IACA,WAAW;IACX,aAAa,eAAe;IAC5B,KAAK;IACL,OAAO;IACP,OAAO;IACP,QACE,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,EAAE;IACzB,CAAA;IAEH,SAAS,MAAM;KACb,SAAS,CAAC;KACV,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,IAAI;IACjB;IACA,WAAW,MAAM;KACf,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,CAAC;IACd;IACA,UAAU,MAAM;KACd,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IACA,eAAe,MAAM;KACnB,eAAe,CAAC;KAChB,WAAW,UAAU;IACvB;IACA,GAAI;GACL,CAAA;GACA,kBAAkB,WAAW,CAAC,cAC7B,oBAAC,QAAD;IACE,SAAA;IACA,WAAW,GAAG,OAAO,KAAK,iBAAiB;IAC3C,MAAM;IACN,OAAO;GACR,CAAA;EAEA;;AAET,CACF;AAEA,UAAU,cAAc"}

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

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

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

@@ -55,7 +55,8 @@ const Checkbox$1 = memo(({ size = 16, shape = "square", backgroundColor, childre
 	});
 });
 Checkbox$1.displayName = "Checkbox";
+var Checkbox_default = Object.assign(Checkbox$1, { formBinding: { valueProp: "checked" } });
 //#endregion
-export { Checkbox$1 as default };
+export { Checkbox_default as default };
 
 //# sourceMappingURL=Checkbox.mjs.map

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

@@ -1 +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,CAAC,EAAE,OAAO;EAC3E,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EAAE,sBAAsB,gBAAgB,IAAI,CAAC;EACnE,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CAEA,MAAM,MACJ,oBAACC,SAAa,MAAd;EACY;EACK;EACf,OAAO;EACP,WAAW,GACT,OAAO,MACP,WAAW,YAAY,WAAW,WAClC,YAAY,QACd;EACA,iBAAiB;EACjB,GAAI;EAEJ,UAAA,oBAACA,SAAa,WAAd;GAAwB,WAAW,OAAO;GACvC,UAAA,gBACC,oBAAC,OAAD;IACQ;IACN,aAAa;IACb,OAAO,EAAE,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GAAG;GAClE,CAAA,IAED,oBAAC,WAAD;IACQ;IACN,aAAa;IACb,OAAO,EAAE,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GAAG;GAClE,CAAA;EAEmB,CAAA;CACP,CAAA;CAGrB,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,SAAD;EACE,WAAW,GAAG,OAAO,OAAO,WAAW,YAAY,OAAO;EAC1D,OAAO;GAAE,KAAK,KAAK,MAAM,OAAO,CAAC;GAAG,GAAG;GAAO,GAAG,cAAc;EAAQ;EAFzE,UAAA,CAIG,KACD,oBAAC,MAAD;GACE,IAAI;GACJ,WAAW,YAAY;GACvB,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;EACG,CAAA,CACD;;AAEX,CACF;AAEA,WAAS,cAAc"}
+{"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 Object.assign(Checkbox, { formBinding: { valueProp: 'checked' } as const });\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,CAAC,EAAE,OAAO;EAC3E,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EAAE,sBAAsB,gBAAgB,IAAI,CAAC;EACnE,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CAEA,MAAM,MACJ,oBAACC,SAAa,MAAd;EACY;EACK;EACf,OAAO;EACP,WAAW,GACT,OAAO,MACP,WAAW,YAAY,WAAW,WAClC,YAAY,QACd;EACA,iBAAiB;EACjB,GAAI;EAEJ,UAAA,oBAACA,SAAa,WAAd;GAAwB,WAAW,OAAO;GACvC,UAAA,gBACC,oBAAC,OAAD;IACQ;IACN,aAAa;IACb,OAAO,EAAE,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GAAG;GAClE,CAAA,IAED,oBAAC,WAAD;IACQ;IACN,aAAa;IACb,OAAO,EAAE,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GAAG;GAClE,CAAA;EAEmB,CAAA;CACP,CAAA;CAGrB,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,SAAD;EACE,WAAW,GAAG,OAAO,OAAO,WAAW,YAAY,OAAO;EAC1D,OAAO;GAAE,KAAK,KAAK,MAAM,OAAO,CAAC;GAAG,GAAG;GAAO,GAAG,cAAc;EAAQ;EAFzE,UAAA,CAIG,KACD,oBAAC,MAAD;GACE,IAAI;GACJ,WAAW,YAAY;GACvB,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;EACG,CAAA,CACD;;AAEX,CACF;AAEA,WAAS,cAAc;AAEvB,IAAA,mBAAe,OAAO,OAAOD,YAAU,EAAE,aAAa,EAAE,WAAW,UAAU,EAAW,CAAC"}

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

@@ -1,5 +1,5 @@
 "use client";
-import Checkbox from "./Checkbox.mjs";
+import Checkbox_default from "./Checkbox.mjs";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
@@ -19,7 +19,7 @@ const CheckboxGroup$1 = memo(({ options, onChange, gap = 12, horizontal = true,
 		},
 		onValueChange: onChange,
 		...rest,
-		children: items.map((item) => /* @__PURE__ */ jsx(Checkbox, {
+		children: items.map((item) => /* @__PURE__ */ jsx(Checkbox_default, {
 			disabled: item.disabled,
 			name: item.value,
 			shape,

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

@@ -1 +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;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,oBAAC,UAAD;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"}
+{"version":3,"file":"CheckboxGroup.mjs","names":["CheckboxGroup","BaseCheckboxGroup","Checkbox"],"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;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/base-ui/Checkbox/index.d.mts

@@ -1,5 +1,5 @@
 import { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxShape } from "./type.mjs";
-import Checkbox from "./Checkbox.mjs";
+import _default from "./Checkbox.mjs";
 import CheckboxGroup from "./CheckboxGroup.mjs";
 import { styles } from "./style.mjs";
-export { Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, styles as checkboxStyles };
+export { _default as Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, styles as checkboxStyles };

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

@@ -2,8 +2,8 @@
 import Icon from "../../Icon/Icon.mjs";
 import { useTranslation } from "../../i18n/useTranslation.mjs";
 import { rootVariants } from "../Input/style.mjs";
-import Input from "../Input/Input.mjs";
-import InputNumber from "../Input/InputNumber.mjs";
+import Input_default from "../Input/Input.mjs";
+import InputNumber_default from "../Input/InputNumber.mjs";
 import { panelStyles } from "../panelStyles.mjs";
 import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTriggerElement } from "../Popover/atoms.mjs";
 import Slider from "../Slider/Slider.mjs";
@@ -173,7 +173,7 @@ const ColorPicker = memo(({ alpha = false, children, className, defaultValue = D
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: styles.hexRow,
-						children: [/* @__PURE__ */ jsx(Input, {
+						children: [/* @__PURE__ */ jsx(Input_default, {
 							"aria-label": "HEX",
 							prefix: /* @__PURE__ */ jsx("span", {
 								className: panelStyles.label,
@@ -184,7 +184,7 @@ const ColorPicker = memo(({ alpha = false, children, className, defaultValue = D
 							onBlur: commitDraft,
 							onChange: (event) => setDraft(event.target.value),
 							onPressEnter: commitDraft
-						}), alpha && /* @__PURE__ */ jsx(InputNumber, {
+						}), alpha && /* @__PURE__ */ jsx(InputNumber_default, {
 							"aria-label": t("colorPicker.alpha"),
 							className: styles.alphaField,
 							controls: false,

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.mjs","names":["colorPickerMessages","useControlledState"],"sources":["../../../src/base-ui/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { Pipette } from 'lucide-react';\nimport { type CSSProperties, memo, useEffect, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Input, InputNumber } from '@/base-ui/Input';\nimport { rootVariants } from '@/base-ui/Input/style';\nimport { panelStyles } from '@/base-ui/panelStyles';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/base-ui/Popover';\nimport { Slider } from '@/base-ui/Slider';\nimport colorPickerMessages from '@/i18n/resources/en/colorPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\n\nimport { formatColor, type Hsva, normalizeHexInput, parseColor } from './color';\nimport SaturationArea from './SaturationArea';\nimport { styles } from './style';\nimport type { ColorPickerProps } from './type';\n\nconst DEFAULT_COLOR = '#000000';\n\nconst hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;\n\nconst ColorPicker = memo<ColorPickerProps>(\n  ({\n    alpha = false,\n    children,\n    className,\n    defaultValue = DEFAULT_COLOR,\n    disabled,\n    onChange,\n    onChangeComplete,\n    presets,\n    showText,\n    size = 'middle',\n    style,\n    value,\n  }) => {\n    const { t } = useTranslation(colorPickerMessages);\n    const { isDarkMode } = useThemeMode();\n    const [hex, setHex] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [hsva, setHsva] = useState<Hsva>(() => parseColor(hex));\n    const [draft, setDraft] = useState(hex.slice(1).toUpperCase());\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      setHsva((current) =>\n        formatColor(current, alpha) === hex.toLowerCase() ? current : parseColor(hex, current.h),\n      );\n      setDraft(hex.slice(1).toUpperCase());\n    }, [hex, alpha]);\n\n    const update = (next: Hsva) => {\n      setHsva(next);\n      setHex(formatColor(next, alpha));\n    };\n    const commit = (next: Hsva) => onChangeComplete?.(formatColor(next, alpha));\n    const apply = (next: Hsva) => {\n      update(next);\n      commit(next);\n    };\n\n    const commitDraft = () => {\n      const normalized = normalizeHexInput(draft);\n      if (!normalized) return setDraft(hex.slice(1).toUpperCase());\n      apply(parseColor(normalized, hsva.h));\n    };\n\n    const swatch = (dimension: number) => (\n      <span className={styles.swatch} style={{ height: dimension, width: dimension }}>\n        <span style={{ background: hex }} />\n      </span>\n    );\n\n    const trigger =\n      children ??\n      (showText ? (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          disabled={disabled}\n          style={style}\n          type=\"button\"\n          className={cx(\n            rootVariants({ size, variant: isDarkMode ? 'filled' : 'outlined' }),\n            styles.textTrigger,\n            className,\n          )}\n        >\n          {swatch(18)}\n          <span style={{ fontFamily: 'var(--lobe-font-family-code, monospace)' }}>\n            {hex.toUpperCase()}\n          </span>\n        </button>\n      ) : (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          className={cx(styles.swatchButton, className)}\n          disabled={disabled}\n          style={style}\n          type=\"button\"\n        >\n          {swatch(24)}\n        </button>\n      ));\n\n    return (\n      <PopoverRoot>\n        <PopoverTriggerElement>{trigger}</PopoverTriggerElement>\n        <PopoverPortal>\n          <PopoverPositioner placement=\"bottomLeft\">\n            <PopoverPopup\n              className={panelStyles.popup}\n              ref={popupRef}\n              initialFocus={() =>\n                popupRef.current?.querySelector<HTMLElement>('[role=\"slider\"]') ?? true\n              }\n            >\n              <div className={styles.panel}>\n                <div className={styles.summary}>\n                  {swatch(40)}\n                  <div>\n                    <div className={styles.value}>{hex.toUpperCase()}</div>\n                    <div className={panelStyles.label}>\n                      {alpha ? `HEX · ${Math.round(hsva.a * 100)}%` : 'HEX'}\n                    </div>\n                  </div>\n                  {hasEyeDropper() && (\n                    <button\n                      aria-label={t('colorPicker.eyeDropper')}\n                      className={panelStyles.nav}\n                      style={{ marginInlineStart: 'auto' }}\n                      type=\"button\"\n                      onClick={async () => {\n                        const dropper = new (\n                          window as unknown as {\n                            EyeDropper: new () => { open: () => Promise<{ sRGBHex: string }> };\n                          }\n                        ).EyeDropper();\n                        const result = await dropper.open().catch(() => null);\n                        if (result) apply({ ...parseColor(result.sRGBHex, hsva.h), a: hsva.a });\n                      }}\n                    >\n                      <Icon icon={Pipette} size={14} />\n                    </button>\n                  )}\n                </div>\n                <SaturationArea\n                  hue={hsva.h}\n                  label={t('colorPicker.saturation')}\n                  saturation={hsva.s}\n                  value={hsva.v}\n                  onChange={(s, v) => update({ ...hsva, s, v })}\n                  onChangeComplete={(s, v) => commit({ ...hsva, s, v })}\n                />\n                <Slider\n                  aria-label={t('colorPicker.hue')}\n                  max={360}\n                  min={0}\n                  value={hsva.h}\n                  classNames={{\n                    indicator: styles.hidden,\n                    thumb: styles.sliderThumb,\n                    track: styles.hueTrack,\n                  }}\n                  onChange={(h) => update({ ...hsva, h })}\n                  onChangeComplete={(h) => commit({ ...hsva, h })}\n                />\n                {alpha && (\n                  <Slider\n                    aria-label={t('colorPicker.alpha')}\n                    max={100}\n                    min={0}\n                    value={Math.round(hsva.a * 100)}\n                    classNames={{\n                      indicator: styles.hidden,\n                      thumb: styles.sliderThumb,\n                      track: styles.alphaTrack,\n                    }}\n                    styles={{\n                      track: {\n                        '--lobe-color-picker-alpha': formatColor(hsva, false),\n                      } as CSSProperties,\n                    }}\n                    onChange={(a) => update({ ...hsva, a: a / 100 })}\n                    onChangeComplete={(a) => commit({ ...hsva, a: a / 100 })}\n                  />\n                )}\n                <div className={styles.hexRow}>\n                  <Input\n                    aria-label=\"HEX\"\n                    prefix={<span className={panelStyles.label}>HEX</span>}\n                    value={draft}\n                    variant=\"filled\"\n                    onBlur={commitDraft}\n                    onChange={(event) => setDraft(event.target.value)}\n                    onPressEnter={commitDraft}\n                  />\n                  {alpha && (\n                    <InputNumber\n                      aria-label={t('colorPicker.alpha')}\n                      className={styles.alphaField}\n                      controls={false}\n                      max={100}\n                      min={0}\n                      suffix=\"%\"\n                      value={Math.round(hsva.a * 100)}\n                      variant=\"filled\"\n                      onChange={(a) => a !== null && apply({ ...hsva, a: a / 100 })}\n                    />\n                  )}\n                </div>\n                {presets && presets.length > 0 && (\n                  <div\n                    aria-label={t('colorPicker.presets')}\n                    className={styles.presets}\n                    role=\"group\"\n                  >\n                    {presets.map((color) => (\n                      <button\n                        aria-label={color}\n                        aria-pressed={color.toLowerCase() === hex.slice(0, 7).toLowerCase()}\n                        className={styles.preset}\n                        key={color}\n                        style={{ background: color }}\n                        type=\"button\"\n                        onClick={() =>\n                          apply({ ...parseColor(color, hsva.h), a: parseColor(color).a })\n                        }\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            </PopoverPopup>\n          </PopoverPositioner>\n        </PopoverPortal>\n      </PopoverRoot>\n    );\n  },\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.mjs","names":["colorPickerMessages","useControlledState","Input","InputNumber"],"sources":["../../../src/base-ui/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { Pipette } from 'lucide-react';\nimport { type CSSProperties, memo, useEffect, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Input, InputNumber } from '@/base-ui/Input';\nimport { rootVariants } from '@/base-ui/Input/style';\nimport { panelStyles } from '@/base-ui/panelStyles';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/base-ui/Popover';\nimport { Slider } from '@/base-ui/Slider';\nimport colorPickerMessages from '@/i18n/resources/en/colorPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\n\nimport { formatColor, type Hsva, normalizeHexInput, parseColor } from './color';\nimport SaturationArea from './SaturationArea';\nimport { styles } from './style';\nimport type { ColorPickerProps } from './type';\n\nconst DEFAULT_COLOR = '#000000';\n\nconst hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;\n\nconst ColorPicker = memo<ColorPickerProps>(\n  ({\n    alpha = false,\n    children,\n    className,\n    defaultValue = DEFAULT_COLOR,\n    disabled,\n    onChange,\n    onChangeComplete,\n    presets,\n    showText,\n    size = 'middle',\n    style,\n    value,\n  }) => {\n    const { t } = useTranslation(colorPickerMessages);\n    const { isDarkMode } = useThemeMode();\n    const [hex, setHex] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [hsva, setHsva] = useState<Hsva>(() => parseColor(hex));\n    const [draft, setDraft] = useState(hex.slice(1).toUpperCase());\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      setHsva((current) =>\n        formatColor(current, alpha) === hex.toLowerCase() ? current : parseColor(hex, current.h),\n      );\n      setDraft(hex.slice(1).toUpperCase());\n    }, [hex, alpha]);\n\n    const update = (next: Hsva) => {\n      setHsva(next);\n      setHex(formatColor(next, alpha));\n    };\n    const commit = (next: Hsva) => onChangeComplete?.(formatColor(next, alpha));\n    const apply = (next: Hsva) => {\n      update(next);\n      commit(next);\n    };\n\n    const commitDraft = () => {\n      const normalized = normalizeHexInput(draft);\n      if (!normalized) return setDraft(hex.slice(1).toUpperCase());\n      apply(parseColor(normalized, hsva.h));\n    };\n\n    const swatch = (dimension: number) => (\n      <span className={styles.swatch} style={{ height: dimension, width: dimension }}>\n        <span style={{ background: hex }} />\n      </span>\n    );\n\n    const trigger =\n      children ??\n      (showText ? (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          disabled={disabled}\n          style={style}\n          type=\"button\"\n          className={cx(\n            rootVariants({ size, variant: isDarkMode ? 'filled' : 'outlined' }),\n            styles.textTrigger,\n            className,\n          )}\n        >\n          {swatch(18)}\n          <span style={{ fontFamily: 'var(--lobe-font-family-code, monospace)' }}>\n            {hex.toUpperCase()}\n          </span>\n        </button>\n      ) : (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          className={cx(styles.swatchButton, className)}\n          disabled={disabled}\n          style={style}\n          type=\"button\"\n        >\n          {swatch(24)}\n        </button>\n      ));\n\n    return (\n      <PopoverRoot>\n        <PopoverTriggerElement>{trigger}</PopoverTriggerElement>\n        <PopoverPortal>\n          <PopoverPositioner placement=\"bottomLeft\">\n            <PopoverPopup\n              className={panelStyles.popup}\n              ref={popupRef}\n              initialFocus={() =>\n                popupRef.current?.querySelector<HTMLElement>('[role=\"slider\"]') ?? true\n              }\n            >\n              <div className={styles.panel}>\n                <div className={styles.summary}>\n                  {swatch(40)}\n                  <div>\n                    <div className={styles.value}>{hex.toUpperCase()}</div>\n                    <div className={panelStyles.label}>\n                      {alpha ? `HEX · ${Math.round(hsva.a * 100)}%` : 'HEX'}\n                    </div>\n                  </div>\n                  {hasEyeDropper() && (\n                    <button\n                      aria-label={t('colorPicker.eyeDropper')}\n                      className={panelStyles.nav}\n                      style={{ marginInlineStart: 'auto' }}\n                      type=\"button\"\n                      onClick={async () => {\n                        const dropper = new (\n                          window as unknown as {\n                            EyeDropper: new () => { open: () => Promise<{ sRGBHex: string }> };\n                          }\n                        ).EyeDropper();\n                        const result = await dropper.open().catch(() => null);\n                        if (result) apply({ ...parseColor(result.sRGBHex, hsva.h), a: hsva.a });\n                      }}\n                    >\n                      <Icon icon={Pipette} size={14} />\n                    </button>\n                  )}\n                </div>\n                <SaturationArea\n                  hue={hsva.h}\n                  label={t('colorPicker.saturation')}\n                  saturation={hsva.s}\n                  value={hsva.v}\n                  onChange={(s, v) => update({ ...hsva, s, v })}\n                  onChangeComplete={(s, v) => commit({ ...hsva, s, v })}\n                />\n                <Slider\n                  aria-label={t('colorPicker.hue')}\n                  max={360}\n                  min={0}\n                  value={hsva.h}\n                  classNames={{\n                    indicator: styles.hidden,\n                    thumb: styles.sliderThumb,\n                    track: styles.hueTrack,\n                  }}\n                  onChange={(h) => update({ ...hsva, h })}\n                  onChangeComplete={(h) => commit({ ...hsva, h })}\n                />\n                {alpha && (\n                  <Slider\n                    aria-label={t('colorPicker.alpha')}\n                    max={100}\n                    min={0}\n                    value={Math.round(hsva.a * 100)}\n                    classNames={{\n                      indicator: styles.hidden,\n                      thumb: styles.sliderThumb,\n                      track: styles.alphaTrack,\n                    }}\n                    styles={{\n                      track: {\n                        '--lobe-color-picker-alpha': formatColor(hsva, false),\n                      } as CSSProperties,\n                    }}\n                    onChange={(a) => update({ ...hsva, a: a / 100 })}\n                    onChangeComplete={(a) => commit({ ...hsva, a: a / 100 })}\n                  />\n                )}\n                <div className={styles.hexRow}>\n                  <Input\n                    aria-label=\"HEX\"\n                    prefix={<span className={panelStyles.label}>HEX</span>}\n                    value={draft}\n                    variant=\"filled\"\n                    onBlur={commitDraft}\n                    onChange={(event) => setDraft(event.target.value)}\n                    onPressEnter={commitDraft}\n                  />\n                  {alpha && (\n                    <InputNumber\n                      aria-label={t('colorPicker.alpha')}\n                      className={styles.alphaField}\n                      controls={false}\n                      max={100}\n                      min={0}\n                      suffix=\"%\"\n                      value={Math.round(hsva.a * 100)}\n                      variant=\"filled\"\n                      onChange={(a) => a !== null && apply({ ...hsva, a: a / 100 })}\n                    />\n                  )}\n                </div>\n                {presets && presets.length > 0 && (\n                  <div\n                    aria-label={t('colorPicker.presets')}\n                    className={styles.presets}\n                    role=\"group\"\n                  >\n                    {presets.map((color) => (\n                      <button\n                        aria-label={color}\n                        aria-pressed={color.toLowerCase() === hex.slice(0, 7).toLowerCase()}\n                        className={styles.preset}\n                        key={color}\n                        style={{ background: color }}\n                        type=\"button\"\n                        onClick={() =>\n                          apply({ ...parseColor(color, hsva.h), a: parseColor(color).a })\n                        }\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            </PopoverPopup>\n          </PopoverPositioner>\n        </PopoverPortal>\n      </PopoverRoot>\n    );\n  },\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2BA,MAAM,gBAAgB;AAEtB,MAAM,sBAAsB,OAAO,WAAW,eAAe,gBAAgB;AAE7E,MAAM,cAAc,MACjB,EACC,QAAQ,OACR,UACA,WACA,eAAe,eACf,UACA,UACA,kBACA,SACA,UACA,OAAO,UACP,OACA,YACI;CACJ,MAAM,EAAE,MAAM,eAAeA,mBAAmB;CAChD,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,CAAC,KAAK,UAAUC,cAA2B,cAAc;EAC7D;EACA;EACA;CACF,CAAC;CACD,MAAM,CAAC,MAAM,WAAW,eAAqB,WAAW,GAAG,CAAC;CAC5D,MAAM,CAAC,OAAO,YAAY,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC;CAC7D,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB;EACd,SAAS,YACP,YAAY,SAAS,KAAK,MAAM,IAAI,YAAY,IAAI,UAAU,WAAW,KAAK,QAAQ,CAAC,CACzF;EACA,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC;CACrC,GAAG,CAAC,KAAK,KAAK,CAAC;CAEf,MAAM,UAAU,SAAe;EAC7B,QAAQ,IAAI;EACZ,OAAO,YAAY,MAAM,KAAK,CAAC;CACjC;CACA,MAAM,UAAU,SAAe,mBAAmB,YAAY,MAAM,KAAK,CAAC;CAC1E,MAAM,SAAS,SAAe;EAC5B,OAAO,IAAI;EACX,OAAO,IAAI;CACb;CAEA,MAAM,oBAAoB;EACxB,MAAM,aAAa,kBAAkB,KAAK;EAC1C,IAAI,CAAC,YAAY,OAAO,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC;EAC3D,MAAM,WAAW,YAAY,KAAK,CAAC,CAAC;CACtC;CAEA,MAAM,UAAU,cACd,oBAAC,QAAD;EAAM,WAAW,OAAO;EAAQ,OAAO;GAAE,QAAQ;GAAW,OAAO;EAAU;EAC3E,UAAA,oBAAC,QAAD,EAAM,OAAO,EAAE,YAAY,IAAI,EAAI,CAAA;CAC/B,CAAA;CAGR,MAAM,UACJ,aACC,WACC,qBAAC,UAAD;EACE,cAAY,EAAE,qBAAqB;EACzB;EACH;EACP,MAAK;EACL,WAAW,GACT,aAAa;GAAE;GAAM,SAAS,aAAa,WAAW;EAAW,CAAC,GAClE,OAAO,aACP,SACF;EATF,UAAA,CAWG,OAAO,EAAE,GACV,oBAAC,QAAD;GAAM,OAAO,EAAE,YAAY,0CAA0C;GAClE,UAAA,IAAI,YAAY;EACb,CAAA,CACA;CAER,CAAA,IAAA,oBAAC,UAAD;EACE,cAAY,EAAE,qBAAqB;EACnC,WAAW,GAAG,OAAO,cAAc,SAAS;EAClC;EACH;EACP,MAAK;EAEJ,UAAA,OAAO,EAAE;CACJ,CAAA;CAGZ,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,uBAAD,EAAA,UAAwB,QAA+B,CAAA,GACvD,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD;EAAmB,WAAU;EAC3B,UAAA,oBAAC,cAAD;GACE,WAAW,YAAY;GACvB,KAAK;GACL,oBACE,SAAS,SAAS,cAA2B,mBAAiB,KAAK;GAGrE,UAAA,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA;KACE,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA;OACG,OAAO,EAAE;OACV,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,OAAD;QAAK,WAAW,OAAO;QAAQ,UAAA,IAAI,YAAY;OAAO,CAAA,GACtD,oBAAC,OAAD;QAAK,WAAW,YAAY;QACzB,UAAA,QAAQ,SAAS,KAAK,MAAM,KAAK,IAAI,GAAG,EAAE,KAAK;OAC7C,CAAA,CACF,EAAA,CAAA;OACJ,cAAc,KACb,oBAAC,UAAD;QACE,cAAY,EAAE,wBAAwB;QACtC,WAAW,YAAY;QACvB,OAAO,EAAE,mBAAmB,OAAO;QACnC,MAAK;QACL,SAAS,YAAY;SAMnB,MAAM,SAAS,MAAM,IAJnB,OAGA,WACyB,CAAC,CAAC,KAAK,CAAC,CAAC,YAAY,IAAI;SACpD,IAAI,QAAQ,MAAM;UAAE,GAAG,WAAW,OAAO,SAAS,KAAK,CAAC;UAAG,GAAG,KAAK;SAAE,CAAC;QACxE;QAEA,UAAA,oBAAC,MAAD;SAAM,MAAM;SAAS,MAAM;QAAK,CAAA;OAC1B,CAAA;MAEP;;KACL,oBAAC,gBAAD;MACE,KAAK,KAAK;MACV,OAAO,EAAE,wBAAwB;MACjC,YAAY,KAAK;MACjB,OAAO,KAAK;MACZ,WAAW,GAAG,MAAM,OAAO;OAAE,GAAG;OAAM;OAAG;MAAE,CAAC;MAC5C,mBAAmB,GAAG,MAAM,OAAO;OAAE,GAAG;OAAM;OAAG;MAAE,CAAC;KACrD,CAAA;KACD,oBAAC,QAAD;MACE,cAAY,EAAE,iBAAiB;MAC/B,KAAK;MACL,KAAK;MACL,OAAO,KAAK;MACZ,YAAY;OACV,WAAW,OAAO;OAClB,OAAO,OAAO;OACd,OAAO,OAAO;MAChB;MACA,WAAW,MAAM,OAAO;OAAE,GAAG;OAAM;MAAE,CAAC;MACtC,mBAAmB,MAAM,OAAO;OAAE,GAAG;OAAM;MAAE,CAAC;KAC/C,CAAA;KACA,SACC,oBAAC,QAAD;MACE,cAAY,EAAE,mBAAmB;MACjC,KAAK;MACL,KAAK;MACL,OAAO,KAAK,MAAM,KAAK,IAAI,GAAG;MAC9B,YAAY;OACV,WAAW,OAAO;OAClB,OAAO,OAAO;OACd,OAAO,OAAO;MAChB;MACA,QAAQ,EACN,OAAO,EACL,6BAA6B,YAAY,MAAM,KAAK,EACtD,EACF;MACA,WAAW,MAAM,OAAO;OAAE,GAAG;OAAM,GAAG,IAAI;MAAI,CAAC;MAC/C,mBAAmB,MAAM,OAAO;OAAE,GAAG;OAAM,GAAG,IAAI;MAAI,CAAC;KACxD,CAAA;KAEH,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA,CACE,oBAACC,eAAD;OACE,cAAW;OACX,QAAQ,oBAAC,QAAD;QAAM,WAAW,YAAY;QAAO,UAAA;OAAS,CAAA;OACrD,OAAO;OACP,SAAQ;OACR,QAAQ;OACR,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;OAChD,cAAc;MACf,CAAA,GACA,SACC,oBAACC,qBAAD;OACE,cAAY,EAAE,mBAAmB;OACjC,WAAW,OAAO;OAClB,UAAU;OACV,KAAK;OACL,KAAK;OACL,QAAO;OACP,OAAO,KAAK,MAAM,KAAK,IAAI,GAAG;OAC9B,SAAQ;OACR,WAAW,MAAM,MAAM,QAAQ,MAAM;QAAE,GAAG;QAAM,GAAG,IAAI;OAAI,CAAC;MAC7D,CAAA,CAEA;;KACJ,WAAW,QAAQ,SAAS,KAC3B,oBAAC,OAAD;MACE,cAAY,EAAE,qBAAqB;MACnC,WAAW,OAAO;MAClB,MAAK;MAEJ,UAAA,QAAQ,KAAK,UACZ,oBAAC,UAAD;OACE,cAAY;OACZ,gBAAc,MAAM,YAAY,MAAM,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;OAClE,WAAW,OAAO;OAElB,OAAO,EAAE,YAAY,MAAM;OAC3B,MAAK;OACL,eACE,MAAM;QAAE,GAAG,WAAW,OAAO,KAAK,CAAC;QAAG,GAAG,WAAW,KAAK,CAAC,CAAC;OAAE,CAAC;MAEjE,GANM,KAMN,CACF;KACE,CAAA;IAEJ;;EACO,CAAA;CACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA;AAEjB,CACF;AAEA,YAAY,cAAc"}

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

@@ -101,6 +101,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     gap: 28px;
   `,
 	rangeHalf: css`
+    flex: 1;
     min-width: 0;
     padding-block: 2px;
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DatePicker/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  band: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n  bandEnd: css`\n    background: linear-gradient(to left, transparent 50%, ${cssVar.colorFillSecondary} 50%);\n  `,\n  bandStart: css`\n    background: linear-gradient(to right, transparent 50%, ${cssVar.colorFillSecondary} 50%);\n  `,\n  calendar: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: 266px;\n  `,\n  cell: css`\n    display: flex;\n    justify-content: center;\n  `,\n  day: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 34px;\n    height: 34px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n\n    font: inherit;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorText};\n\n    background: none;\n\n    &:hover:not(:disabled, [aria-pressed='true']) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &[data-outside] {\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &[data-today] {\n      box-shadow: inset 0 0 0 1px ${cssVar.colorText};\n    }\n\n    &[aria-pressed='true'] {\n      font-weight: 600;\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorText};\n    }\n  `,\n  footer: css`\n    display: flex;\n    justify-content: center;\n\n    margin-block-start: 12px;\n    padding-block-start: 12px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n    row-gap: 2px;\n  `,\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: 4px;\n  `,\n  icon: css`\n    display: inline-flex;\n    flex: none;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  navGroup: css`\n    display: flex;\n    gap: 2px;\n  `,\n  placeholder: css`\n    color: ${cssVar.colorTextPlaceholder};\n  `,\n  range: css`\n    display: flex;\n    gap: 28px;\n  `,\n  rangeHalf: css`\n    min-width: 0;\n    padding-block: 2px;\n\n    &[data-active] {\n      box-shadow: inset 0 -2px 0 ${cssVar.colorText};\n    }\n  `,\n  rangeTrigger: css`\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n\n    min-width: 0;\n  `,\n  tile: css`\n    ${focusRing};\n    cursor: pointer;\n\n    height: 40px;\n    padding: 0;\n    border: 0;\n    border-radius: 999px;\n\n    font: inherit;\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    background: none;\n\n    &:hover:not(:disabled, [aria-pressed='true']) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &[data-today] {\n      box-shadow: inset 0 0 0 1px ${cssVar.colorText};\n    }\n\n    &[aria-pressed='true'] {\n      font-weight: 600;\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorText};\n    }\n  `,\n  tiles: css`\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 6px 4px;\n    width: 266px;\n  `,\n  trigger: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    min-width: 0;\n    height: 100%;\n    padding: 0;\n    border: 0;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n    white-space: nowrap;\n\n    background: none;\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  `,\n  weekday: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 20px;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;kBACO,OAAO,mBAAmB;;CAE1C,SAAS,GAAG;4DAC8C,OAAO,mBAAmB;;CAEpF,WAAW,GAAG;6DAC6C,OAAO,mBAAmB;;CAErF,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAIT,KAAK,GAAG;MACJ,UAAU;;;;;;;;;;;;;;;;aAgBH,OAAO,UAAU;;;;;oBAKV,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;eAI3B,OAAO,oBAAoB;;;;oCAIN,OAAO,UAAU;;;;;eAKtC,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;CAGnC,QAAQ,GAAG;;;;;;oCAMuB,OAAO,qBAAqB;;CAE9D,MAAM,GAAG;;;;;CAKT,QAAQ,GAAG;;;;;;CAMX,MAAM,GAAG;;;aAGE,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;CAIb,aAAa,GAAG;aACL,OAAO,qBAAqB;;CAEvC,OAAO,GAAG;;;;CAIV,WAAW,GAAG;;;;;mCAKmB,OAAO,UAAU;;;CAGlD,cAAc,GAAG;;;;;;;;CAQjB,MAAM,GAAG;MACL,UAAU;;;;;;;;;;aAUH,OAAO,UAAU;;;;;oBAKV,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;oCAIN,OAAO,UAAU;;;;;eAKtC,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;CAGnC,OAAO,GAAG;;;;;;CAMV,SAAS,GAAG;MACR,UAAU;;;;;;;;;;;;;;;;;;;;;;;CAuBd,SAAS,GAAG;;;;;;AAMd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DatePicker/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  band: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n  bandEnd: css`\n    background: linear-gradient(to left, transparent 50%, ${cssVar.colorFillSecondary} 50%);\n  `,\n  bandStart: css`\n    background: linear-gradient(to right, transparent 50%, ${cssVar.colorFillSecondary} 50%);\n  `,\n  calendar: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: 266px;\n  `,\n  cell: css`\n    display: flex;\n    justify-content: center;\n  `,\n  day: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 34px;\n    height: 34px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n\n    font: inherit;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorText};\n\n    background: none;\n\n    &:hover:not(:disabled, [aria-pressed='true']) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &[data-outside] {\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &[data-today] {\n      box-shadow: inset 0 0 0 1px ${cssVar.colorText};\n    }\n\n    &[aria-pressed='true'] {\n      font-weight: 600;\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorText};\n    }\n  `,\n  footer: css`\n    display: flex;\n    justify-content: center;\n\n    margin-block-start: 12px;\n    padding-block-start: 12px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n    row-gap: 2px;\n  `,\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: 4px;\n  `,\n  icon: css`\n    display: inline-flex;\n    flex: none;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  navGroup: css`\n    display: flex;\n    gap: 2px;\n  `,\n  placeholder: css`\n    color: ${cssVar.colorTextPlaceholder};\n  `,\n  range: css`\n    display: flex;\n    gap: 28px;\n  `,\n  rangeHalf: css`\n    flex: 1;\n    min-width: 0;\n    padding-block: 2px;\n\n    &[data-active] {\n      box-shadow: inset 0 -2px 0 ${cssVar.colorText};\n    }\n  `,\n  rangeTrigger: css`\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n\n    min-width: 0;\n  `,\n  tile: css`\n    ${focusRing};\n    cursor: pointer;\n\n    height: 40px;\n    padding: 0;\n    border: 0;\n    border-radius: 999px;\n\n    font: inherit;\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    background: none;\n\n    &:hover:not(:disabled, [aria-pressed='true']) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n    }\n\n    &[data-today] {\n      box-shadow: inset 0 0 0 1px ${cssVar.colorText};\n    }\n\n    &[aria-pressed='true'] {\n      font-weight: 600;\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorText};\n    }\n  `,\n  tiles: css`\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 6px 4px;\n    width: 266px;\n  `,\n  trigger: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    min-width: 0;\n    height: 100%;\n    padding: 0;\n    border: 0;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n    white-space: nowrap;\n\n    background: none;\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  `,\n  weekday: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 20px;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;kBACO,OAAO,mBAAmB;;CAE1C,SAAS,GAAG;4DAC8C,OAAO,mBAAmB;;CAEpF,WAAW,GAAG;6DAC6C,OAAO,mBAAmB;;CAErF,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAIT,KAAK,GAAG;MACJ,UAAU;;;;;;;;;;;;;;;;aAgBH,OAAO,UAAU;;;;;oBAKV,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;eAI3B,OAAO,oBAAoB;;;;oCAIN,OAAO,UAAU;;;;;eAKtC,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;CAGnC,QAAQ,GAAG;;;;;;oCAMuB,OAAO,qBAAqB;;CAE9D,MAAM,GAAG;;;;;CAKT,QAAQ,GAAG;;;;;;CAMX,MAAM,GAAG;;;aAGE,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;CAIb,aAAa,GAAG;aACL,OAAO,qBAAqB;;CAEvC,OAAO,GAAG;;;;CAIV,WAAW,GAAG;;;;;;mCAMmB,OAAO,UAAU;;;CAGlD,cAAc,GAAG;;;;;;;;CAQjB,MAAM,GAAG;MACL,UAAU;;;;;;;;;;aAUH,OAAO,UAAU;;;;;oBAKV,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;oCAIN,OAAO,UAAU;;;;;eAKtC,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;CAGnC,OAAO,GAAG;;;;;;CAMV,SAAS,GAAG;MACR,UAAU;;;;;;;;;;;;;;;;;;;;;;;CAuBd,SAAS,GAAG;;;;;;AAMd,EAAE"}

package/es/base-ui/Form/components/FormGroup.mjs

@@ -3,7 +3,7 @@ import Icon from "../../../Icon/Icon.mjs";
 import { groupStyles, groupVariants } from "../style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx, useResponsive } from "antd-style";
+import { cx, useResponsive, useThemeMode } from "antd-style";
 import { ChevronDown } from "lucide-react";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/base-ui/Form/components/FormGroup.tsx
@@ -19,6 +19,12 @@ const FormGroup = memo(({ className, icon, title, children, extra, variant = "bo
 	const { mobile } = useResponsive();
 	const isBorderless = variant === "borderless";
 	const isCollapsible = collapsible === void 0 ? !isBorderless : collapsible;
+	const { isDarkMode } = useThemeMode();
+	const rootClassName = cx(groupVariants({
+		isDarkMode,
+		variant
+	}), className);
+	const bodyClassName = cx(groupStyles.body, !isBorderless && groupStyles.bodyBoxed, variant === "filled" && groupStyles.bodyFilled, variant === "filled" && !isDarkMode && groupStyles.bodyFilledLight);
 	if (mobile) return /* @__PURE__ */ jsxs("div", {
 		className,
 		...rest,
@@ -36,7 +42,7 @@ const FormGroup = memo(({ className, icon, title, children, extra, variant = "bo
 		})]
 	});
 	if (!isCollapsible) return /* @__PURE__ */ jsxs("div", {
-		className: cx(groupVariants({ variant }), className),
+		className: rootClassName,
 		...rest,
 		children: [title && /* @__PURE__ */ jsxs("div", {
 			className: cx(groupStyles.header, isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed),
@@ -47,12 +53,13 @@ const FormGroup = memo(({ className, icon, title, children, extra, variant = "bo
 				variant
 			}), extra]
 		}), /* @__PURE__ */ jsx("div", {
-			className: cx(groupStyles.body, !isBorderless && groupStyles.bodyBoxed),
+			"data-form-group-body": true,
+			className: bodyClassName,
 			children
 		})]
 	});
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
-		className: cx(groupVariants({ variant }), className),
+		className: rootClassName,
 		defaultOpen: defaultActive,
 		open: active,
 		onOpenChange: onCollapse,
@@ -74,7 +81,8 @@ const FormGroup = memo(({ className, icon, title, children, extra, variant = "bo
 		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
 			className: groupStyles.panel,
 			children: /* @__PURE__ */ jsx("div", {
-				className: cx(groupStyles.body, !isBorderless && groupStyles.bodyBoxed),
+				"data-form-group-body": true,
+				className: bodyClassName,
 				children
 			})
 		})]

package/es/base-ui/Form/components/FormGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.mjs","names":[],"sources":["../../../../src/base-ui/Form/components/FormGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport { cx, useResponsive } from 'antd-style';\nimport { ChevronDown } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { groupStyles, groupVariants } from '../style';\nimport type { FormGroupProps } from '../type';\n\nconst GroupTitle = memo<{\n  desc?: ReactNode;\n  icon?: FormGroupProps['icon'];\n  mobile?: boolean;\n  title?: ReactNode;\n  variant?: FormGroupProps['variant'];\n}>(({ icon, title, desc, variant, mobile }) => (\n  <div\n    className={cx(\n      groupStyles.title,\n      variant === 'borderless' && !mobile && groupStyles.titleBorderless,\n      mobile && groupStyles.mobileTitle,\n    )}\n  >\n    {icon && <Icon icon={icon} />}\n    <div>\n      {title}\n      {desc && <div className={groupStyles.desc}>{desc}</div>}\n    </div>\n  </div>\n));\n\nGroupTitle.displayName = 'GroupTitle';\n\nconst FormGroup = memo<FormGroupProps>(\n  ({\n    className,\n    icon,\n    title,\n    children,\n    extra,\n    variant = 'borderless',\n    defaultActive = true,\n    collapsible,\n    active,\n    onCollapse,\n    desc,\n    keyValue: _keyValue,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const isBorderless = variant === 'borderless';\n    const isCollapsible = collapsible === undefined ? !isBorderless : collapsible;\n\n    if (mobile)\n      return (\n        <div className={className} {...rest}>\n          <div className={cx(groupStyles.header, groupStyles.mobileHeader)}>\n            <GroupTitle mobile desc={desc} icon={icon} title={title} />\n            {extra}\n          </div>\n          <div className={groupStyles.mobileBody}>{children}</div>\n        </div>\n      );\n\n    if (!isCollapsible)\n      return (\n        <div className={cx(groupVariants({ variant }), className)} {...rest}>\n          {title && (\n            <div\n              className={cx(\n                groupStyles.header,\n                isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed,\n              )}\n            >\n              <GroupTitle desc={desc} icon={icon} title={title} variant={variant} />\n              {extra}\n            </div>\n          )}\n          <div className={cx(groupStyles.body, !isBorderless && groupStyles.bodyBoxed)}>\n            {children}\n          </div>\n        </div>\n      );\n\n    return (\n      <Collapsible.Root\n        className={cx(groupVariants({ variant }), className)}\n        defaultOpen={defaultActive}\n        open={active}\n        onOpenChange={onCollapse}\n        {...rest}\n      >\n        <div\n          className={cx(\n            groupStyles.header,\n            isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed,\n          )}\n        >\n          <Collapsible.Trigger className={groupStyles.trigger}>\n            <GroupTitle desc={desc} icon={icon} title={title} variant={variant} />\n            <Icon className={groupStyles.chevron} icon={ChevronDown} />\n          </Collapsible.Trigger>\n          {extra}\n        </div>\n        <Collapsible.Panel className={groupStyles.panel}>\n          <div className={cx(groupStyles.body, !isBorderless && groupStyles.bodyBoxed)}>\n            {children}\n          </div>\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    );\n  },\n);\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":";;;;;;;;;AAYA,MAAM,aAAa,MAMf,EAAE,MAAM,OAAO,MAAM,SAAS,aAChC,qBAAC,OAAD;CACE,WAAW,GACT,YAAY,OACZ,YAAY,gBAAgB,CAAC,UAAU,YAAY,iBACnD,UAAU,YAAY,WACxB;CALF,UAAA,CAOG,QAAQ,oBAAC,MAAD,EAAY,KAAO,CAAA,GAC5B,qBAAC,OAAD,EAAA,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;EAAK,WAAW,YAAY;EAAO,UAAA;CAAU,CAAA,CACnD,EAAA,CAAA,CACF;AACN,CAAA,CAAA;AAED,WAAW,cAAc;AAEzB,MAAM,YAAY,MACf,EACC,WACA,MACA,OACA,UACA,OACA,UAAU,cACV,gBAAgB,MAChB,aACA,QACA,YACA,MACA,UAAU,WACV,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,eAAe,YAAY;CACjC,MAAM,gBAAgB,gBAAgB,KAAA,IAAY,CAAC,eAAe;CAElE,IAAI,QACF,OACE,qBAAC,OAAD;EAAgB;EAAW,GAAI;EAA/B,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,GAAG,YAAY,QAAQ,YAAY,YAAY;GAA/D,UAAA,CACE,oBAAC,YAAD;IAAY,QAAA;IAAa;IAAY;IAAa;GAAQ,CAAA,GACzD,KACE;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAW,YAAY;GAAa;EAAc,CAAA,CACpD;;CAGT,IAAI,CAAC,eACH,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;EAA/D,UAAA,CACG,SACC,qBAAC,OAAD;GACE,WAAW,GACT,YAAY,QACZ,eAAe,YAAY,mBAAmB,YAAY,WAC5D;GAJF,UAAA,CAME,oBAAC,YAAD;IAAkB;IAAY;IAAa;IAAgB;GAAU,CAAA,GACpE,KACE;EAEP,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,YAAY,MAAM,CAAC,gBAAgB,YAAY,SAAS;GACxE;EACE,CAAA,CACF;;CAGT,OACE,qBAAC,YAAY,MAAb;EACE,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,aAAa;EACb,MAAM;EACN,cAAc;EACd,GAAI;EALN,UAAA,CAOE,qBAAC,OAAD;GACE,WAAW,GACT,YAAY,QACZ,eAAe,YAAY,mBAAmB,YAAY,WAC5D;GAJF,UAAA,CAME,qBAAC,YAAY,SAAb;IAAqB,WAAW,YAAY;IAA5C,UAAA,CACE,oBAAC,YAAD;KAAkB;KAAY;KAAa;KAAgB;IAAU,CAAA,GACrE,oBAAC,MAAD;KAAM,WAAW,YAAY;KAAS,MAAM;IAAc,CAAA,CACvC;GACpB,CAAA,GAAA,KACE;EACL,CAAA,GAAA,oBAAC,YAAY,OAAb;GAAmB,WAAW,YAAY;GACxC,UAAA,oBAAC,OAAD;IAAK,WAAW,GAAG,YAAY,MAAM,CAAC,gBAAgB,YAAY,SAAS;IACxE;GACE,CAAA;EACY,CAAA,CACH;;AAEtB,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"FormGroup.mjs","names":[],"sources":["../../../../src/base-ui/Form/components/FormGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport { cx, useResponsive, useThemeMode } from 'antd-style';\nimport { ChevronDown } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { groupStyles, groupVariants } from '../style';\nimport type { FormGroupProps } from '../type';\n\nconst GroupTitle = memo<{\n  desc?: ReactNode;\n  icon?: FormGroupProps['icon'];\n  mobile?: boolean;\n  title?: ReactNode;\n  variant?: FormGroupProps['variant'];\n}>(({ icon, title, desc, variant, mobile }) => (\n  <div\n    className={cx(\n      groupStyles.title,\n      variant === 'borderless' && !mobile && groupStyles.titleBorderless,\n      mobile && groupStyles.mobileTitle,\n    )}\n  >\n    {icon && <Icon icon={icon} />}\n    <div>\n      {title}\n      {desc && <div className={groupStyles.desc}>{desc}</div>}\n    </div>\n  </div>\n));\n\nGroupTitle.displayName = 'GroupTitle';\n\nconst FormGroup = memo<FormGroupProps>(\n  ({\n    className,\n    icon,\n    title,\n    children,\n    extra,\n    variant = 'borderless',\n    defaultActive = true,\n    collapsible,\n    active,\n    onCollapse,\n    desc,\n    keyValue: _keyValue,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const isBorderless = variant === 'borderless';\n    const isCollapsible = collapsible === undefined ? !isBorderless : collapsible;\n    const { isDarkMode } = useThemeMode();\n    const rootClassName = cx(groupVariants({ isDarkMode, variant }), className);\n    const bodyClassName = cx(\n      groupStyles.body,\n      !isBorderless && groupStyles.bodyBoxed,\n      variant === 'filled' && groupStyles.bodyFilled,\n      variant === 'filled' && !isDarkMode && groupStyles.bodyFilledLight,\n    );\n\n    if (mobile)\n      return (\n        <div className={className} {...rest}>\n          <div className={cx(groupStyles.header, groupStyles.mobileHeader)}>\n            <GroupTitle mobile desc={desc} icon={icon} title={title} />\n            {extra}\n          </div>\n          <div className={groupStyles.mobileBody}>{children}</div>\n        </div>\n      );\n\n    if (!isCollapsible)\n      return (\n        <div className={rootClassName} {...rest}>\n          {title && (\n            <div\n              className={cx(\n                groupStyles.header,\n                isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed,\n              )}\n            >\n              <GroupTitle desc={desc} icon={icon} title={title} variant={variant} />\n              {extra}\n            </div>\n          )}\n          <div data-form-group-body className={bodyClassName}>\n            {children}\n          </div>\n        </div>\n      );\n\n    return (\n      <Collapsible.Root\n        className={rootClassName}\n        defaultOpen={defaultActive}\n        open={active}\n        onOpenChange={onCollapse}\n        {...rest}\n      >\n        <div\n          className={cx(\n            groupStyles.header,\n            isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed,\n          )}\n        >\n          <Collapsible.Trigger className={groupStyles.trigger}>\n            <GroupTitle desc={desc} icon={icon} title={title} variant={variant} />\n            <Icon className={groupStyles.chevron} icon={ChevronDown} />\n          </Collapsible.Trigger>\n          {extra}\n        </div>\n        <Collapsible.Panel className={groupStyles.panel}>\n          <div data-form-group-body className={bodyClassName}>\n            {children}\n          </div>\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    );\n  },\n);\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":";;;;;;;;;AAYA,MAAM,aAAa,MAMf,EAAE,MAAM,OAAO,MAAM,SAAS,aAChC,qBAAC,OAAD;CACE,WAAW,GACT,YAAY,OACZ,YAAY,gBAAgB,CAAC,UAAU,YAAY,iBACnD,UAAU,YAAY,WACxB;CALF,UAAA,CAOG,QAAQ,oBAAC,MAAD,EAAY,KAAO,CAAA,GAC5B,qBAAC,OAAD,EAAA,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;EAAK,WAAW,YAAY;EAAO,UAAA;CAAU,CAAA,CACnD,EAAA,CAAA,CACF;AACN,CAAA,CAAA;AAED,WAAW,cAAc;AAEzB,MAAM,YAAY,MACf,EACC,WACA,MACA,OACA,UACA,OACA,UAAU,cACV,gBAAgB,MAChB,aACA,QACA,YACA,MACA,UAAU,WACV,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,eAAe,YAAY;CACjC,MAAM,gBAAgB,gBAAgB,KAAA,IAAY,CAAC,eAAe;CAClE,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,GAAG,cAAc;EAAE;EAAY;CAAQ,CAAC,GAAG,SAAS;CAC1E,MAAM,gBAAgB,GACpB,YAAY,MACZ,CAAC,gBAAgB,YAAY,WAC7B,YAAY,YAAY,YAAY,YACpC,YAAY,YAAY,CAAC,cAAc,YAAY,eACrD;CAEA,IAAI,QACF,OACE,qBAAC,OAAD;EAAgB;EAAW,GAAI;EAA/B,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,GAAG,YAAY,QAAQ,YAAY,YAAY;GAA/D,UAAA,CACE,oBAAC,YAAD;IAAY,QAAA;IAAa;IAAY;IAAa;GAAQ,CAAA,GACzD,KACE;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAW,YAAY;GAAa;EAAc,CAAA,CACpD;;CAGT,IAAI,CAAC,eACH,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,GAAI;EAAnC,UAAA,CACG,SACC,qBAAC,OAAD;GACE,WAAW,GACT,YAAY,QACZ,eAAe,YAAY,mBAAmB,YAAY,WAC5D;GAJF,UAAA,CAME,oBAAC,YAAD;IAAkB;IAAY;IAAa;IAAgB;GAAU,CAAA,GACpE,KACE;EAEP,CAAA,GAAA,oBAAC,OAAD;GAAK,wBAAA;GAAqB,WAAW;GAClC;EACE,CAAA,CACF;;CAGT,OACE,qBAAC,YAAY,MAAb;EACE,WAAW;EACX,aAAa;EACb,MAAM;EACN,cAAc;EACd,GAAI;EALN,UAAA,CAOE,qBAAC,OAAD;GACE,WAAW,GACT,YAAY,QACZ,eAAe,YAAY,mBAAmB,YAAY,WAC5D;GAJF,UAAA,CAME,qBAAC,YAAY,SAAb;IAAqB,WAAW,YAAY;IAA5C,UAAA,CACE,oBAAC,YAAD;KAAkB;KAAY;KAAa;KAAgB;IAAU,CAAA,GACrE,oBAAC,MAAD;KAAM,WAAW,YAAY;KAAS,MAAM;IAAc,CAAA,CACvC;GACpB,CAAA,GAAA,KACE;EACL,CAAA,GAAA,oBAAC,YAAY,OAAb;GAAmB,WAAW,YAAY;GACxC,UAAA,oBAAC,OAAD;IAAK,wBAAA;IAAqB,WAAW;IAClC;GACE,CAAA;EACY,CAAA,CACH;;AAEtB,CACF;AAEA,UAAU,cAAc"}

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

@@ -10,6 +10,9 @@ import FormSubmitFooter from "./components/FormSubmitFooter.mjs";
 import FormTitle from "./components/FormTitle.mjs";
 import { useFormContext } from "./context.mjs";
 //#region src/base-ui/Form/index.d.ts
+/**
+ * @deprecated Use `Form` from `@lobehub/ui/base-ui/form`. This uncontrolled Form is removed in the next major.
+ */
 declare const Form: import("react").NamedExoticComponent<FormProps> & {
   Divider: import("react").FC<FormDividerProps>;
   Field: import("react").NamedExoticComponent<FormFieldProps>;

package/es/base-ui/Form/index.mjs

@@ -9,6 +9,9 @@ import FormGroup from "./components/FormGroup.mjs";
 import FormSubmitFooter from "./components/FormSubmitFooter.mjs";
 import Form$1 from "./Form.mjs";
 //#region src/base-ui/Form/index.ts
+/**
+* @deprecated Use `Form` from `@lobehub/ui/base-ui/form`. This uncontrolled Form is removed in the next major.
+*/
 const Form = Object.assign(Form$1, {
 	Divider: FormDivider,
 	Field: FormField,

package/es/base-ui/Form/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["FormParent"],"sources":["../../../src/base-ui/Form/index.ts"],"sourcesContent":["'use client';\n\nimport FormDivider from './components/FormDivider';\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormFooter from './components/FormFooter';\nimport FormGroup from './components/FormGroup';\nimport FormSubmitFooter from './components/FormSubmitFooter';\nimport FormTitle from './components/FormTitle';\nimport FormParent from './Form';\n\nexport const Form = Object.assign(FormParent, {\n  Divider: FormDivider,\n  Field: FormField,\n  FlatGroup: FormFlatGroup,\n  Footer: FormFooter,\n  Group: FormGroup,\n  SubmitFooter: FormSubmitFooter,\n  Title: FormTitle,\n});\n\nexport { useFormContext } from './context';\nexport {\n  FormDivider,\n  FormField,\n  FormFlatGroup,\n  FormFooter,\n  FormGroup,\n  FormSubmitFooter,\n  FormTitle,\n};\nexport type {\n  FormContextValue,\n  FormDividerProps,\n  FormFieldProps,\n  FormFlatGroupProps,\n  FormFooterProps,\n  FormGroupItemType,\n  FormGroupProps,\n  FormLayout,\n  FormProps,\n  FormSubmitFooterProps,\n  FormTitleProps,\n  FormValues,\n  FormVariant,\n  ItemsType,\n} from './type';\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,OAAO,OAAO,OAAOA,QAAY;CAC5C,SAAS;CACT,OAAO;CACP,WAAW;CACX,QAAQ;CACR,OAAO;CACP,cAAc;CACd,OAAO;AACT,CAAC"}
+{"version":3,"file":"index.mjs","names":["FormParent"],"sources":["../../../src/base-ui/Form/index.ts"],"sourcesContent":["'use client';\n\nimport FormDivider from './components/FormDivider';\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormFooter from './components/FormFooter';\nimport FormGroup from './components/FormGroup';\nimport FormSubmitFooter from './components/FormSubmitFooter';\nimport FormTitle from './components/FormTitle';\nimport FormParent from './Form';\n\n/**\n * @deprecated Use `Form` from `@lobehub/ui/base-ui/form`. This uncontrolled Form is removed in the next major.\n */\nexport const Form = Object.assign(FormParent, {\n  Divider: FormDivider,\n  Field: FormField,\n  FlatGroup: FormFlatGroup,\n  Footer: FormFooter,\n  Group: FormGroup,\n  SubmitFooter: FormSubmitFooter,\n  Title: FormTitle,\n});\n\nexport { useFormContext } from './context';\nexport {\n  FormDivider,\n  FormField,\n  FormFlatGroup,\n  FormFooter,\n  FormGroup,\n  FormSubmitFooter,\n  FormTitle,\n};\nexport type {\n  FormContextValue,\n  FormDividerProps,\n  FormFieldProps,\n  FormFlatGroupProps,\n  FormFooterProps,\n  FormGroupItemType,\n  FormGroupProps,\n  FormLayout,\n  FormProps,\n  FormSubmitFooterProps,\n  FormTitleProps,\n  FormValues,\n  FormVariant,\n  ItemsType,\n} from './type';\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAa,OAAO,OAAO,OAAOA,QAAY;CAC5C,SAAS;CACT,OAAO;CACP,WAAW;CACX,QAAQ;CACR,OAAO;CACP,cAAc;CACd,OAAO;AACT,CAAC"}

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

@@ -13,6 +13,10 @@ const styles = createStaticStyles(({ css }) => ({
 
     width: 100%;
 
+    [data-form-group-body] {
+      padding-block: 0;
+    }
+
     ${responsive.sm} {
       gap: 0 !important;
     }
@@ -92,6 +96,7 @@ const groupStyles = createStaticStyles(({ css, cssVar }) => ({
     flex-direction: column;
   `,
 	bodyBoxed: css`
+    padding-block: 16px;
     padding-inline: 16px;
   `,
 	chevron: css`
@@ -151,10 +156,19 @@ const groupStyles = createStaticStyles(({ css, cssVar }) => ({
       transition-duration: 0s;
     }
   `,
+	bodyFilled: css`
+    margin-block-end: 3px;
+    margin-inline: 3px;
+    border-radius: ${cssVar.borderRadius};
+    ${staticStylish.variantOutlinedWithoutHover}
+  `,
+	bodyFilledLight: staticStylish.shadow,
 	rootFilled: css`
     border-radius: ${cssVar.borderRadiusLG};
-    ${staticStylish.variantFilledWithoutHover}
     background: ${cssVar.colorFillQuaternary};
+  `,
+	rootFilledDark: css`
+    background: ${cssVar.colorBgLayout};
   `,
 	rootOutlined: css`
     border-radius: ${cssVar.borderRadiusLG};
@@ -162,6 +176,7 @@ const groupStyles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	title: css`
     display: flex;
+    flex-shrink: 0;
     gap: 8px;
     align-items: center;
 
@@ -194,12 +209,23 @@ const groupStyles = createStaticStyles(({ css, cssVar }) => ({
   `
 }));
 const groupVariants = cva(null, {
+	compoundVariants: [{
+		class: groupStyles.rootFilledDark,
+		isDarkMode: true,
+		variant: "filled"
+	}],
 	defaultVariants: { variant: "borderless" },
-	variants: { variant: {
-		borderless: null,
-		filled: groupStyles.rootFilled,
-		outlined: groupStyles.rootOutlined
-	} }
+	variants: {
+		variant: {
+			borderless: null,
+			filled: groupStyles.rootFilled,
+			outlined: groupStyles.rootOutlined
+		},
+		isDarkMode: {
+			false: null,
+			true: null
+		}
+	}
 });
 const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => ({
 	borderless: cx(staticStylish.variantBorderlessWithoutHover, css`

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    ${responsive.sm} {\n      gap: 0 !important;\n    }\n  `,\n  rootBorderless: css`\n    gap: 48px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: styles.rootBorderless,\n      filled: null,\n      outlined: null,\n    },\n  },\n});\n\nexport const fieldStyles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    align-items: flex-end;\n\n    min-width: var(--form-field-min-width, unset);\n  `,\n  controlVertical: css`\n    align-items: stretch;\n    width: 100%;\n  `,\n  error: css`\n    font-size: 12px;\n    color: ${cssVar.colorError};\n  `,\n  horizontal: css`\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  `,\n  label: css`\n    display: block;\n    flex: 1;\n    max-width: 100%;\n    text-align: start;\n  `,\n  root: css`\n    display: flex;\n    gap: 12px;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-block: 16px;\n  `,\n  vertical: css`\n    flex-direction: column;\n    gap: 8px;\n    align-items: stretch;\n  `,\n}));\n\nexport const fieldVariants = cva(fieldStyles.root, {\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n  variants: {\n    layout: {\n      horizontal: fieldStyles.horizontal,\n      vertical: fieldStyles.vertical,\n    },\n  },\n});\n\nexport const dividerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    width: 100%;\n    height: 1px;\n    margin: 0;\n    border: none;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n}));\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  bodyBoxed: css`\n    padding-inline: 16px;\n  `,\n  chevron: css`\n    flex: none;\n    color: ${cssVar.colorTextDescription};\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  desc: css`\n    font-size: 12px;\n    font-weight: 400;\n    color: ${cssVar.colorTextDescription};\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n  `,\n  headerBorderless: css`\n    padding-block-end: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerBoxed: css`\n    padding: 16px;\n  `,\n  mobileBody: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    background: ${cssVar.colorBgContainer};\n  `,\n  mobileHeader: css`\n    padding: 16px;\n    background: ${cssVar.colorBgLayout};\n  `,\n  mobileTitle: css`\n    font-size: 14px;\n    font-weight: 400;\n    opacity: 0.5;\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--collapsible-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  rootFilled: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantFilledWithoutHover}\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  rootOutlined: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  title: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    font-size: 16px;\n    font-weight: bold;\n    color: ${cssVar.colorText};\n  `,\n  titleBorderless: css`\n    font-size: 18px;\n  `,\n  trigger: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    border-radius: ${cssVar.borderRadius};\n    ${focusRing};\n  `,\n}));\n\nexport const groupVariants = cva(null, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: groupStyles.rootFilled,\n      outlined: groupStyles.rootOutlined,\n    },\n  },\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => ({\n  borderless: cx(\n    lobeStaticStylish.variantBorderlessWithoutHover,\n    css`\n      padding-inline: 0;\n    `,\n  ),\n  filled: cx(\n    lobeStaticStylish.variantFilledWithoutHover,\n    css`\n      background: ${cssVar.colorFillQuaternary};\n    `,\n  ),\n  mobile: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    border-radius: 0;\n    background: ${cssVar.colorBgContainer};\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n}));\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: flatGroupStyles.borderless,\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n    },\n  },\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    ${responsive.sm} {\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n  desc: css`\n    display: block;\n\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,MAAM,GAAG;;;;;;;;;MASL,WAAW,GAAG;;;;CAIlB,gBAAgB,GAAG;;;AAGrB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,aACX;CACA,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,QAAQ;EACR,UAAU;CACZ,EACF;AACF,CAAC;AAED,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,SAAS,GAAG;;;;;;;;CAQZ,iBAAiB,GAAG;;;;CAIpB,OAAO,GAAG;;aAEC,OAAO,WAAW;;CAE7B,YAAY,GAAG;;;;;CAKf,OAAO,GAAG;;;;;;CAMV,MAAM,GAAG;;;;;;;;CAQT,UAAU,GAAG;;;;;AAKf,EAAE;AAEF,MAAa,gBAAgB,IAAI,YAAY,MAAM;CACjD,iBAAiB,EACf,QAAQ,aACV;CACA,UAAU,EACR,QAAQ;EACN,YAAY,YAAY;EACxB,UAAU,YAAY;CACxB,EACF;AACF,CAAC;AAED,MAAa,gBAAgB,oBAAoB,EAAE,KAAK,cAAc,EACpE,MAAM,GAAG;;;;;;kBAMO,OAAO,qBAAqB;IAE9C,EAAE;AAEF,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,MAAM,GAAG;;;;CAIT,WAAW,GAAG;;;CAGd,SAAS,GAAG;;aAED,OAAO,qBAAqB;kCACP,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;;;aAGE,OAAO,qBAAqB;;CAEvC,QAAQ,GAAG;;;;;;;;CAQX,kBAAkB,GAAG;;kCAEW,OAAO,qBAAqB;;CAE5D,aAAa,GAAG;;;CAGhB,YAAY,GAAG;;;kBAGC,OAAO,iBAAiB;;CAExC,cAAc,GAAG;;kBAED,OAAO,cAAc;;CAErC,aAAa,GAAG;;;;;CAKhB,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;CAWlD,YAAY,GAAG;qBACI,OAAO,eAAe;MACrCA,cAAkB,0BAA0B;kBAChC,OAAO,oBAAoB;;CAE3C,cAAc,GAAG;qBACE,OAAO,eAAe;MACrCA,cAAkB,4BAA4B;;CAElD,OAAO,GAAG;;;;;;;aAOC,OAAO,UAAU;;CAE5B,iBAAiB,GAAG;;;CAGpB,SAAS,GAAG;;;;;;;;;;;;;;;;;qBAiBO,OAAO,aAAa;MACnC,UAAU;;AAEhB,EAAE;AAEF,MAAa,gBAAgB,IAAI,MAAM;CACrC,iBAAiB,EACf,SAAS,aACX;CACA,UAAU,EACR,SAAS;EACP,YAAY;EACZ,QAAQ,YAAY;EACpB,UAAU,YAAY;CACxB,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,oBAAoB,EAAE,IAAI,KAAK,cAAc;CAC1E,YAAY,GACVA,cAAkB,+BAClB,GAAG;;KAGL;CACA,QAAQ,GACNA,cAAkB,2BAClB,GAAG;oBACa,OAAO,oBAAoB;KAE7C;CACA,QAAQ,GAAG;;;;kBAIK,OAAO,iBAAiB;;CAExC,UAAUA,cAAkB;CAC5B,MAAM,GAAG;;qBAEU,OAAO,eAAe;;AAE3C,EAAE;AAEF,MAAa,oBAAoB,IAAI,gBAAgB,MAAM;CACzD,iBAAiB,EACf,SAAS,aACX;CACA,UAAU,EACR,SAAS;EACP,YAAY,gBAAgB;EAC5B,QAAQ,gBAAgB;EACxB,UAAU,gBAAgB;CAC5B,EACF;AACF,CAAC;AAED,MAAa,eAAe,oBAAoB,EAAE,KAAK,cAAc,EACnE,MAAM,GAAG;MACL,WAAW,GAAG;;sCAEkB,OAAO,qBAAqB;oBAC9C,OAAO,iBAAiB;;IAG5C,EAAE;AAEF,MAAa,qBAAqB,oBAAoB,EAAE,KAAK,cAAc;CACzE,aAAa,GAAG;;;;;;;;;wBASM,OAAO,qBAAqB;;;kBAGlC,OAAO,iBAAiB;kBACxB,OAAO,mBAAmB;;CAE1C,QAAQ,GAAG;MACP,WAAW,GAAG;sCACkB,OAAO,aAAa;;sCAEpB,OAAO,qBAAqB;oBAC9C,OAAO,iBAAiB;;;AAG5C,EAAE;AAEF,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,SAAS,GAAG;;;;CAIZ,MAAM,GAAG;;;;;;aAME,OAAO,qBAAqB;;;;CAIvC,OAAO,GAAG;;;aAGC,OAAO,UAAU;;AAE9B,EAAE"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    [data-form-group-body] {\n      padding-block: 0;\n    }\n\n    ${responsive.sm} {\n      gap: 0 !important;\n    }\n  `,\n  rootBorderless: css`\n    gap: 48px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: styles.rootBorderless,\n      filled: null,\n      outlined: null,\n    },\n  },\n});\n\nexport const fieldStyles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    align-items: flex-end;\n\n    min-width: var(--form-field-min-width, unset);\n  `,\n  controlVertical: css`\n    align-items: stretch;\n    width: 100%;\n  `,\n  error: css`\n    font-size: 12px;\n    color: ${cssVar.colorError};\n  `,\n  horizontal: css`\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  `,\n  label: css`\n    display: block;\n    flex: 1;\n    max-width: 100%;\n    text-align: start;\n  `,\n  root: css`\n    display: flex;\n    gap: 12px;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-block: 16px;\n  `,\n  vertical: css`\n    flex-direction: column;\n    gap: 8px;\n    align-items: stretch;\n  `,\n}));\n\nexport const fieldVariants = cva(fieldStyles.root, {\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n  variants: {\n    layout: {\n      horizontal: fieldStyles.horizontal,\n      vertical: fieldStyles.vertical,\n    },\n  },\n});\n\nexport const dividerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    width: 100%;\n    height: 1px;\n    margin: 0;\n    border: none;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n}));\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  bodyBoxed: css`\n    padding-block: 16px;\n    padding-inline: 16px;\n  `,\n  chevron: css`\n    flex: none;\n    color: ${cssVar.colorTextDescription};\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  desc: css`\n    font-size: 12px;\n    font-weight: 400;\n    color: ${cssVar.colorTextDescription};\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n  `,\n  headerBorderless: css`\n    padding-block-end: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerBoxed: css`\n    padding: 16px;\n  `,\n  mobileBody: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    background: ${cssVar.colorBgContainer};\n  `,\n  mobileHeader: css`\n    padding: 16px;\n    background: ${cssVar.colorBgLayout};\n  `,\n  mobileTitle: css`\n    font-size: 14px;\n    font-weight: 400;\n    opacity: 0.5;\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--collapsible-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  bodyFilled: css`\n    margin-block-end: 3px;\n    margin-inline: 3px;\n    border-radius: ${cssVar.borderRadius};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  bodyFilledLight: lobeStaticStylish.shadow,\n  rootFilled: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  rootFilledDark: css`\n    background: ${cssVar.colorBgLayout};\n  `,\n  rootOutlined: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  title: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n\n    font-size: 16px;\n    font-weight: bold;\n    color: ${cssVar.colorText};\n  `,\n  titleBorderless: css`\n    font-size: 18px;\n  `,\n  trigger: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    border-radius: ${cssVar.borderRadius};\n    ${focusRing};\n  `,\n}));\n\nexport const groupVariants = cva(null, {\n  compoundVariants: [\n    {\n      class: groupStyles.rootFilledDark,\n      isDarkMode: true,\n      variant: 'filled',\n    },\n  ],\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: groupStyles.rootFilled,\n      outlined: groupStyles.rootOutlined,\n    },\n    isDarkMode: {\n      false: null,\n      true: null,\n    },\n  },\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => ({\n  borderless: cx(\n    lobeStaticStylish.variantBorderlessWithoutHover,\n    css`\n      padding-inline: 0;\n    `,\n  ),\n  filled: cx(\n    lobeStaticStylish.variantFilledWithoutHover,\n    css`\n      background: ${cssVar.colorFillQuaternary};\n    `,\n  ),\n  mobile: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    border-radius: 0;\n    background: ${cssVar.colorBgContainer};\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n}));\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: flatGroupStyles.borderless,\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n    },\n  },\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    ${responsive.sm} {\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n  desc: css`\n    display: block;\n\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":"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"}

package/es/base-ui/FormKit/Field.d.mts

@@ -0,0 +1,9 @@
+import { FormFieldProps, FormValues } from "./type.mjs";
+import { ReactNode } from "react";
+//#region src/base-ui/FormKit/Field.d.ts
+declare const _default: (<T extends FormValues = FormValues>(props: FormFieldProps<T>) => ReactNode) & {
+  displayName?: string;
+};
+//#endregion
+export { _default as default };
+//# sourceMappingURL=Field.d.mts.map