@sia.soul/sia-react-ui 0.1.13 → 0.1.14

package/dist/{select-date-range-D-JMfpwD.d.ts → select-date-range-Bdb-hi9c.d.ts}

@@ -62,8 +62,8 @@ interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultV
     onCalendarChange?: (value: readonly [string, string]) => void;
     onChange?: (value: readonly [string, string]) => void;
 }
-declare function DateRangePicker({ value, defaultValue, placeholder, placeholderMode, separator, presets, maxRangeDays, allowEmpty, endpointDisabled, size, status, allowClear, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, disabledDate, disabled, className, onCalendarChange, onChange, onOpenChange, formatValue, renderExtraFooter, ...props }: DateRangePickerProps): react.JSX.Element;
-declare function DatePicker({ value, defaultValue, picker, size, status, allowClear, multiple, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, presets, disabledDate, disabled, className, onChange, onOpenChange, placeholder, placeholderMode, formatValue, renderExtraFooter, ...props }: DatePickerProps): react.JSX.Element;
+declare function DateRangePicker({ value, defaultValue, placeholder, placeholderMode, separator, presets, maxRangeDays, allowEmpty, endpointDisabled, size: sizeProp, status, allowClear, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, disabledDate, disabled, className, onCalendarChange, onChange, onOpenChange, formatValue, renderExtraFooter, ...props }: DateRangePickerProps): react.JSX.Element;
+declare function DatePicker({ value, defaultValue, picker, size: sizeProp, status, allowClear, multiple, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, presets, disabledDate, disabled, className, onChange, onOpenChange, placeholder, placeholderMode, formatValue, renderExtraFooter, ...props }: DatePickerProps): react.JSX.Element;
 declare namespace DatePicker {
     const RangePicker: typeof DateRangePicker;
 }
@@ -89,6 +89,6 @@ interface SelectDateRangeProps extends Omit<HTMLAttributes<HTMLDivElement>, "def
     disabled?: boolean;
     onChange?: (value: SelectDateRangeValue) => void;
 }
-declare function SelectDateRange({ options, value, defaultValue, selectPlaceholder, placeholderMode, selectWidth, rangePlaceholder, selectAriaLabel, rangeAriaLabel, presets, size, status, disabled, onChange, className, style, ...props }: SelectDateRangeProps): react.JSX.Element;
+declare function SelectDateRange({ options, value, defaultValue, selectPlaceholder, placeholderMode, selectWidth, rangePlaceholder, selectAriaLabel, rangeAriaLabel, presets, size: sizeProp, status, disabled, onChange, className, style, ...props }: SelectDateRangeProps): react.JSX.Element;
 
 export { DatePicker as D, SelectDateRange as S, type DatePickerDisabledInfo as a, type DatePickerPreset as b, type DatePickerProps as c, type DatePickerShowTime as d, type DatePickerType as e, type DatePickerValue as f, type DateRangePickerPreset as g, type DateRangePickerProps as h, type SelectDateRangeProps as i, type SelectDateRangeValue as j };

package/dist/{select-date-range-l-xgB959.d.cts → select-date-range-shDQ5uJA.d.cts}

@@ -62,8 +62,8 @@ interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultV
     onCalendarChange?: (value: readonly [string, string]) => void;
     onChange?: (value: readonly [string, string]) => void;
 }
-declare function DateRangePicker({ value, defaultValue, placeholder, placeholderMode, separator, presets, maxRangeDays, allowEmpty, endpointDisabled, size, status, allowClear, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, disabledDate, disabled, className, onCalendarChange, onChange, onOpenChange, formatValue, renderExtraFooter, ...props }: DateRangePickerProps): react.JSX.Element;
-declare function DatePicker({ value, defaultValue, picker, size, status, allowClear, multiple, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, presets, disabledDate, disabled, className, onChange, onOpenChange, placeholder, placeholderMode, formatValue, renderExtraFooter, ...props }: DatePickerProps): react.JSX.Element;
+declare function DateRangePicker({ value, defaultValue, placeholder, placeholderMode, separator, presets, maxRangeDays, allowEmpty, endpointDisabled, size: sizeProp, status, allowClear, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, disabledDate, disabled, className, onCalendarChange, onChange, onOpenChange, formatValue, renderExtraFooter, ...props }: DateRangePickerProps): react.JSX.Element;
+declare function DatePicker({ value, defaultValue, picker, size: sizeProp, status, allowClear, multiple, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, presets, disabledDate, disabled, className, onChange, onOpenChange, placeholder, placeholderMode, formatValue, renderExtraFooter, ...props }: DatePickerProps): react.JSX.Element;
 declare namespace DatePicker {
     const RangePicker: typeof DateRangePicker;
 }
@@ -89,6 +89,6 @@ interface SelectDateRangeProps extends Omit<HTMLAttributes<HTMLDivElement>, "def
     disabled?: boolean;
     onChange?: (value: SelectDateRangeValue) => void;
 }
-declare function SelectDateRange({ options, value, defaultValue, selectPlaceholder, placeholderMode, selectWidth, rangePlaceholder, selectAriaLabel, rangeAriaLabel, presets, size, status, disabled, onChange, className, style, ...props }: SelectDateRangeProps): react.JSX.Element;
+declare function SelectDateRange({ options, value, defaultValue, selectPlaceholder, placeholderMode, selectWidth, rangePlaceholder, selectAriaLabel, rangeAriaLabel, presets, size: sizeProp, status, disabled, onChange, className, style, ...props }: SelectDateRangeProps): react.JSX.Element;
 
 export { DatePicker as D, SelectDateRange as S, type DatePickerDisabledInfo as a, type DatePickerPreset as b, type DatePickerProps as c, type DatePickerShowTime as d, type DatePickerType as e, type DatePickerValue as f, type DateRangePickerPreset as g, type DateRangePickerProps as h, type SelectDateRangeProps as i, type SelectDateRangeValue as j };

package/dist/select-date-range.cjs

@@ -26,6 +26,11 @@ module.exports = __toCommonJS(select_date_range_exports);
 
 // src/components/shared.ts
 var import_react = require("react");
+var ControlSizeContext = (0, import_react.createContext)("medium");
+function useControlSize(size) {
+  const inherited = (0, import_react.useContext)(ControlSizeContext);
+  return size ?? inherited;
+}
 var PlaceholderModeContext = (0, import_react.createContext)("default");
 function usePlaceholderMode(mode) {
   const inherited = (0, import_react.useContext)(PlaceholderModeContext);
@@ -1242,7 +1247,7 @@ function DatePicker({
   value,
   defaultValue,
   picker = "date",
-  size = "medium",
+  size: sizeProp,
   status = "default",
   allowClear = true,
   multiple = false,
@@ -1266,6 +1271,7 @@ function DatePicker({
   renderExtraFooter,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const id = (0, import_react5.useId)();
   const rootRef = (0, import_react5.useRef)(null);
   const popupRef = (0, import_react5.useRef)(null);
@@ -1426,7 +1432,7 @@ function DateRangePicker({
   maxRangeDays,
   allowEmpty = [false, false],
   endpointDisabled = [false, false],
-  size = "medium",
+  size: sizeProp,
   status = "default",
   allowClear = true,
   needConfirm,
@@ -1447,6 +1453,7 @@ function DateRangePicker({
   renderExtraFooter,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const id = (0, import_react5.useId)();
   const rootRef = (0, import_react5.useRef)(null);
   const popupRef = (0, import_react5.useRef)(null);
@@ -1687,8 +1694,9 @@ function DateRangePicker({
       endpointLabel
     );
   }
-  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder.filter(Boolean).join(" / "), filled: currentValue.some(Boolean), active: visible });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { ref: rootRef, className: `sia-picker${floating.className} sia-picker-range-control sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  const startFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[0], filled: Boolean(currentValue[0]), active: visible });
+  const endFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[1], filled: Boolean(currentValue[1]), active: visible });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { ref: rootRef, className: `sia-picker sia-picker-range-control sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
@@ -1705,14 +1713,19 @@ function DateRangePicker({
         disabled,
         onClick: () => changeOpen(!visible),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `sia-picker-range-control__value${currentValue[0] ? "" : " is-placeholder"}`, children: currentValue[0] ? formatValue(currentValue[0]) : placeholder[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: `sia-picker-range-control__field${startFloating.className}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `sia-picker-range-control__value${currentValue[0] ? "" : " is-placeholder"}`, children: currentValue[0] ? formatValue(currentValue[0]) : placeholder[0] }),
+            startFloating.label
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sia-picker-range-control__separator", children: separator }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `sia-picker-range-control__value${currentValue[1] ? "" : " is-placeholder"}`, children: currentValue[1] ? formatValue(currentValue[1]) : placeholder[1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: `sia-picker-range-control__field${endFloating.className}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `sia-picker-range-control__value${currentValue[1] ? "" : " is-placeholder"}`, children: currentValue[1] ? formatValue(currentValue[1]) : placeholder[1] }),
+            endFloating.label
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "calendar", size: 16 }) })
         ]
       }
     ),
-    floating.label,
     allowClear && (currentValue[0] || currentValue[1]) && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F\u8303\u56F4", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel sia-date-panel--range${showTime ? ` sia-date-panel--with-time sia-date-panel--range-time-${compactDateTime ? "compact" : "paired"}` : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u8303\u56F4\u9009\u62E9\u9762\u677F", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sia-date-panel__body", children: showTime ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sia-date-panel__range-date-time", children: compactDateTime ? renderDateTimeGroup(activeIndex) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
@@ -1787,7 +1800,7 @@ var import_react6 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Button = (0, import_react6.forwardRef)(function Button2({
   variant = "default",
-  size = "medium",
+  size: sizeProp,
   loading = false,
   block = false,
   danger = false,
@@ -1800,6 +1813,7 @@ var Button = (0, import_react6.forwardRef)(function Button2({
   style,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const localRef = (0, import_react6.useRef)(null);
   function setRef(node) {
     localRef.current = node;
@@ -2138,7 +2152,7 @@ var Input = (0, import_react9.forwardRef)(function Input2({
   label,
   hint,
   status = "default",
-  size = "medium",
+  size: sizeProp,
   prefix,
   suffix,
   allowClear = false,
@@ -2155,6 +2169,7 @@ var Input = (0, import_react9.forwardRef)(function Input2({
   onChange,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const fallbackId = (0, import_react9.useId)();
   const inputId = id ?? fallbackId;
   const localRef = (0, import_react9.useRef)(null);
@@ -2238,7 +2253,8 @@ var Input = (0, import_react9.forwardRef)(function Input2({
 var import_react10 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CheckboxGroupContext = (0, import_react10.createContext)(null);
-var CheckboxRoot = (0, import_react10.forwardRef)(function Checkbox({ value, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
+var CheckboxRoot = (0, import_react10.forwardRef)(function Checkbox({ value, size: sizeProp, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const group = (0, import_react10.useContext)(CheckboxGroupContext);
   const localRef = (0, import_react10.useRef)(null);
   const fallbackId = (0, import_react10.useId)();
@@ -2252,7 +2268,7 @@ var CheckboxRoot = (0, import_react10.forwardRef)(function Checkbox({ value, ind
     if (typeof forwardedRef === "function") forwardedRef(node);
     else if (forwardedRef) forwardedRef.current = node;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: `sia-checkbox${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: `sia-checkbox sia-checkbox--${size}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "input",
       {
@@ -2277,6 +2293,7 @@ var CheckboxRoot = (0, import_react10.forwardRef)(function Checkbox({ value, ind
   ] });
 });
 function CheckboxGroup({
+  size: sizeProp,
   value,
   defaultValue = [],
   options,
@@ -2286,6 +2303,7 @@ function CheckboxGroup({
   children,
   onChange
 }) {
+  const size = useControlSize(sizeProp);
   const [values, setValues] = useControllableState({ value, defaultValue, onChange });
   const context = (0, import_react10.useMemo)(() => ({
     values,
@@ -2296,13 +2314,13 @@ function CheckboxGroup({
       setValues(next);
     }
   }), [disabled, name, setValues, values]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `sia-checkbox-group ${className}`.trim(), role: "group", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `sia-checkbox-group ${className}`.trim(), role: "group", children: [
     options?.map((option) => {
       const normalized = typeof option === "object" ? option : { label: String(option), value: option };
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxRoot, { value: normalized.value, disabled: normalized.disabled, children: normalized.label }, normalized.value);
     }),
     children
-  ] }) });
+  ] }) }) });
 }
 var Checkbox2 = Object.assign(CheckboxRoot, { Group: CheckboxGroup });
 
@@ -2736,7 +2754,7 @@ var Select = (0, import_react14.forwardRef)(function Select2({
   onChange,
   placeholder = "\u8BF7\u9009\u62E9",
   placeholderMode,
-  size = "medium",
+  size: sizeProp,
   status = "default",
   allowClear = false,
   loading = false,
@@ -2762,6 +2780,7 @@ var Select = (0, import_react14.forwardRef)(function Select2({
   onKeyDown,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const fallbackId = (0, import_react14.useId)();
   const selectId = id ?? fallbackId;
   const listboxId = `${selectId}-listbox`;
@@ -3157,7 +3176,7 @@ function SelectDateRange({
   selectAriaLabel = "\u9009\u62E9\u7C7B\u578B",
   rangeAriaLabel = "\u65E5\u671F\u8303\u56F4",
   presets,
-  size = "medium",
+  size: sizeProp,
   status = "default",
   disabled = false,
   onChange,
@@ -3165,6 +3184,7 @@ function SelectDateRange({
   style,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const initialValue = defaultValue ?? { select: options[0]?.value ?? "", range: ["", ""] };
   const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : value && typeof value === "object" ? value : { select: "", range: ["", ""] }, defaultValue: initialValue, onChange });
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `sia-select-date-range sia-select-date-range--${size} ${className}`.trim(), role: "group", "aria-label": `${selectAriaLabel}\u4E0E${rangeAriaLabel}`, ...props, style: { ...style, "--sia-select-date-range-select-width": typeof selectWidth === "number" ? `${selectWidth}px` : selectWidth }, children: [

package/dist/select-date-range.d.cts

@@ -1,4 +1,4 @@
-export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-l-xgB959.cjs';
+export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-shDQ5uJA.cjs';
 import 'react';
 import './shared-DAYZvZVu.cjs';
 import './Select-CVvF4mcy.cjs';

package/dist/select-date-range.d.ts

@@ -1,4 +1,4 @@
-export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-D-JMfpwD.js';
+export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-Bdb-hi9c.js';
 import 'react';
 import './shared-DAYZvZVu.js';
 import './Select-Ce2Irbpt.js';

package/dist/select-date-range.js

@@ -1,10 +1,10 @@
 import {
   SelectDateRange
-} from "./chunk-RLTG3IK7.js";
-import "./chunk-BUMS62NO.js";
-import "./chunk-JJVD2ITI.js";
-import "./chunk-MBS2HXLZ.js";
-import "./chunk-EJDPRAU2.js";
+} from "./chunk-25BU7YTB.js";
+import "./chunk-R3TYVU53.js";
+import "./chunk-ALWHRV4L.js";
+import "./chunk-TZGUBGA4.js";
+import "./chunk-3VJ4CZDQ.js";
 export {
   SelectDateRange
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",