@smwb/ui-react 2.0.0

package/dist/components/inputs/dateTimePicker/dateTimePicker.js

@@ -0,0 +1,194 @@
+import { jsx as o, jsxs as C, Fragment as de } from "react/jsx-runtime";
+import ue, { useMemo as k, useState as v, useRef as E, useCallback as r } from "react";
+import { useFloating as fe, autoUpdate as pe } from "@floating-ui/react";
+import he from "react-transition-group/Transition";
+import { resolvePlacement as ge, buildFloatingMiddleware as ke } from "../../../utils/floating.js";
+import { useSafeLayoutEffect as we } from "../../../hooks/useSafeLayoutEffect.js";
+import { useForkRef as Y } from "../../../hooks/useForkRef.js";
+import { DataPickerHeader as ye } from "../datePicker/dataPickerHeader.js";
+import { DataPickerDays as be } from "../datePicker/dataPickerDays.js";
+import { DatePickerList as x } from "../datePicker/datePickerList.js";
+import { isValidDate as F, setMonth as De, setYear as Ce, getMonths as ve, getYears as Fe } from "../datePicker/utils.js";
+import { OpenView as n } from "../datePicker/datePicker.js";
+import { DateTimePickerInput as Te } from "./dateTimePickerInput.js";
+import { TimePickerColumns as _e } from "../timePicker/timePickerColumns.js";
+import { isValidTimeDate as T, mergeDate as Me, mergeTime as Pe, DEFAULT_TIME_FORMAT as Re } from "../timePicker/timeUtils.js";
+import { createPortal as Ve } from "react-dom";
+import { ClickAwayListener as Oe } from "../../clickAwayListener/clickAwayListener.js";
+const Se = (_) => ({
+  transition: `opacity ${_}ms ease-in-out`,
+  opacity: 0
+}), Le = {
+  entering: { opacity: 1 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 }
+}, We = ue.forwardRef(function(w, A) {
+  const {
+    value: y,
+    onChange: m,
+    showDaysOutsideMonth: H,
+    disablePast: I,
+    disableFuture: N,
+    weekStartsOn: B = 1,
+    placement: j = "bottom-start",
+    disabled: s,
+    disableCalendar: M,
+    calendarAriaLabel: U = "Choose date and time",
+    minDate: $,
+    maxDate: q,
+    isDateDisabled: z,
+    locale: u,
+    format: l,
+    timeFormat: b,
+    calendarIcon: G,
+    onBlur: J,
+    ...K
+  } = w, t = k(() => y === void 0 ? void 0 : new Date(y), [y]), [a, d] = v(
+    () => F(t) || T(t) ? t : /* @__PURE__ */ new Date()
+  ), [c, f] = v(n.days), [P, R] = v(!1), V = E(null), D = E(null), O = ge(j), { refs: S, floatingStyles: Q } = fe({
+    open: P,
+    placement: O.placement,
+    whileElementsMounted: pe,
+    middleware: ke(O)
+  }), W = Y(V, S.setReference, A), X = Y(D, S.setFloating);
+  we(() => {
+    s || d(F(t) || T(t) ? t : /* @__PURE__ */ new Date());
+  }, [t, s]);
+  const Z = r((e) => {
+    d(e);
+  }, []), ee = r(() => {
+    f(c === n.months ? n.days : n.months);
+  }, [c]), te = r(() => {
+    f(c === n.years ? n.days : n.years);
+  }, [c]), ae = r(
+    (e) => {
+      d(De(a, e)), f(n.days);
+    },
+    [a]
+  ), ne = r(
+    (e) => {
+      d(Ce(a, e)), f(n.days);
+    },
+    [a]
+  ), p = r(
+    (e) => {
+      d(e), m == null || m(void 0, e, w);
+    },
+    [m, w]
+  ), oe = r(
+    (e, i) => {
+      if (!i)
+        return;
+      const g = T(t) ? t : a;
+      p(Me(i, g));
+    },
+    [p, t, a]
+  ), re = r(
+    (e) => {
+      const i = F(t) ? t : a;
+      p(Pe(i, e));
+    },
+    [p, t, a]
+  ), ie = r(() => {
+    s || R((e) => !e);
+  }, [s]), se = r((e) => {
+    var g, L;
+    const i = e.target;
+    (g = D.current) != null && g.contains(i) || (L = V.current) != null && L.contains(i) || R(!1);
+  }, []), ce = k(() => b || (l != null && l.includes("HH:mm:ss") ? "HH:mm:ss" : Re), [l, b]), me = k(() => ve(u), [u]), le = k(() => Fe((/* @__PURE__ */ new Date()).getFullYear(), 100), []);
+  let h = null;
+  switch (c) {
+    case n.days:
+      h = /* @__PURE__ */ o(
+        be,
+        {
+          viewValue: a,
+          value: t,
+          showDaysOutsideMonth: H,
+          onChange: oe,
+          disablePast: I,
+          disableFuture: N,
+          weekStartsOn: B,
+          minDate: $,
+          maxDate: q,
+          isDateDisabled: z,
+          locale: u
+        }
+      );
+      break;
+    case n.months:
+      h = /* @__PURE__ */ o(x, { value: a.getMonth(), items: me, onChange: ae });
+      break;
+    case n.years:
+      h = /* @__PURE__ */ o(x, { value: a.getFullYear(), items: le, onChange: ne });
+      break;
+  }
+  return /* @__PURE__ */ C(de, { children: [
+    /* @__PURE__ */ o(
+      Te,
+      {
+        ref: W,
+        value: t,
+        onChange: m,
+        onBlur: J,
+        onToggle: ie,
+        disabled: s,
+        disableCalendar: M,
+        format: l,
+        calendarIcon: G,
+        ...K
+      }
+    ),
+    Ve(
+      /* @__PURE__ */ o(
+        he,
+        {
+          nodeRef: D,
+          in: P && !s && !M,
+          timeout: 150,
+          mountOnEnter: !0,
+          unmountOnExit: !0,
+          children: (e) => /* @__PURE__ */ o(Oe, { onClickAway: se, children: /* @__PURE__ */ o(
+            "div",
+            {
+              ref: X,
+              className: "smwb-date-picker smwb-date-time-picker",
+              style: {
+                ...Q,
+                ...Se(150),
+                ...Le[e]
+              },
+              "data-testid": "date-time-picker",
+              role: "dialog",
+              "aria-modal": "false",
+              "aria-label": U,
+              children: /* @__PURE__ */ C("div", { className: "smwb-date-picker__inner smwb-date-time-picker__inner", children: [
+                /* @__PURE__ */ o(
+                  ye,
+                  {
+                    viewValue: a,
+                    locale: u,
+                    openView: c,
+                    onChange: Z,
+                    onMonthLabelClick: ee,
+                    onYearLabelClick: te
+                  }
+                ),
+                /* @__PURE__ */ C("div", { className: "smwb-date-time-picker__content", children: [
+                  /* @__PURE__ */ o("div", { className: "smwb-date-picker__body smwb-date-time-picker__body", children: h }),
+                  /* @__PURE__ */ o(_e, { value: a, format: ce, onChange: re })
+                ] })
+              ] })
+            }
+          ) })
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+export {
+  We as DateTimePicker,
+  We as default
+};
+//# sourceMappingURL=dateTimePicker.js.map

package/dist/components/inputs/dateTimePicker/dateTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimePicker.js","sources":["../../../../src/components/inputs/dateTimePicker/dateTimePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { DataPickerHeader } from \"../datePicker/dataPickerHeader\";\nimport { DataPickerDays } from \"../datePicker/dataPickerDays\";\nimport { DatePickerList } from \"../datePicker/datePickerList\";\nimport { getMonths, setMonth, getYears, setYear, isValidDate } from \"../datePicker/utils\";\nimport { OpenView } from \"../datePicker/datePicker\";\nimport { DateTimePickerInput } from \"./dateTimePickerInput\";\nimport { TimePickerColumns } from \"../timePicker/timePickerColumns\";\nimport { DEFAULT_TIME_FORMAT, isValidTimeDate, mergeDate, mergeTime } from \"../timePicker/timeUtils\";\nimport { createPortal } from \"react-dom\";\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface DateTimePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  showDaysOutsideMonth?: boolean;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  isDateDisabled?: (day: Date) => boolean;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  locale?: string;\n  /** Input format with tokens dd, MM, yyyy, HH, mm, ss, e.g. \"dd/MM/yyyy HH:mm\". */\n  format?: string;\n  /** Time portion format when using the clock columns. Defaults to \"HH:mm\". */\n  timeFormat?: string;\n  placement?: Placement;\n  disableCalendar?: boolean;\n  label?: string;\n  calendarAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  calendarIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: DateTimePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: DateTimePickerProps) => void;\n}\n\nexport const DateTimePicker = React.forwardRef(function DateTimePicker(props: DateTimePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    showDaysOutsideMonth,\n    disablePast,\n    disableFuture,\n    weekStartsOn = 1,\n    placement = \"bottom-start\",\n    disabled,\n    disableCalendar,\n    calendarAriaLabel = \"Choose date and time\",\n    minDate,\n    maxDate,\n    isDateDisabled,\n    locale,\n    format,\n    timeFormat,\n    calendarIcon,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const [viewValue, setViewValue] = useState<Date>(() =>\n    isValidDate(value) || isValidTimeDate(value) ? value : new Date()\n  );\n  const [openView, setOpenView] = useState<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const popupForkRef = useForkRef(popupRef, refs.setFloating);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidDate(value) || isValidTimeDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onViewValueChange = useCallback((next: Date) => {\n    setViewValue(next);\n  }, []);\n\n  const onMonthLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.months ? OpenView.days : OpenView.months);\n  }, [openView]);\n\n  const onYearLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.years ? OpenView.days : OpenView.years);\n  }, [openView]);\n\n  const onMonthChange = useCallback(\n    (month: number) => {\n      setViewValue(setMonth(viewValue, month));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const onYearChange = useCallback(\n    (year: number) => {\n      setViewValue(setYear(viewValue, year));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const emitChange = useCallback(\n    (next: Date) => {\n      setViewValue(next);\n      onChangeProp?.(undefined, next, props);\n    },\n    [onChangeProp, props]\n  );\n\n  const onDateChange = useCallback(\n    (_event?: React.ChangeEvent<HTMLInputElement>, date?: Date) => {\n      if (!date) {\n        return;\n      }\n\n      const timeSource = isValidTimeDate(value) ? value : viewValue;\n      emitChange(mergeDate(date, timeSource));\n    },\n    [emitChange, value, viewValue]\n  );\n\n  const onTimeChange = useCallback(\n    (timeDate: Date) => {\n      const dateSource = isValidDate(value) ? value : viewValue;\n      emitChange(mergeTime(dateSource, timeDate));\n    },\n    [emitChange, value, viewValue]\n  );\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (popupRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const resolvedTimeFormat = useMemo(() => {\n    if (timeFormat) {\n      return timeFormat;\n    }\n\n    if (format?.includes(\"HH:mm:ss\")) {\n      return \"HH:mm:ss\";\n    }\n\n    return DEFAULT_TIME_FORMAT;\n  }, [format, timeFormat]);\n\n  const months = useMemo(() => getMonths(locale), [locale]);\n  const years = useMemo(() => getYears(new Date().getFullYear(), 100), []);\n\n  let view: React.ReactNode = null;\n\n  switch (openView) {\n    case OpenView.days:\n      view = (\n        <DataPickerDays\n          viewValue={viewValue}\n          value={value}\n          showDaysOutsideMonth={showDaysOutsideMonth}\n          onChange={onDateChange}\n          disablePast={disablePast}\n          disableFuture={disableFuture}\n          weekStartsOn={weekStartsOn}\n          minDate={minDate}\n          maxDate={maxDate}\n          isDateDisabled={isDateDisabled}\n          locale={locale}\n        />\n      );\n      break;\n    case OpenView.months:\n      view = <DatePickerList value={viewValue.getMonth()} items={months} onChange={onMonthChange} />;\n      break;\n    case OpenView.years:\n      view = <DatePickerList value={viewValue.getFullYear()} items={years} onChange={onYearChange} />;\n      break;\n  }\n\n  return (\n    <>\n      <DateTimePickerInput\n        ref={anchorForkRef}\n        value={value}\n        onChange={onChangeProp}\n        onBlur={onBlurProp}\n        onToggle={onToggle}\n        disabled={disabled}\n        disableCalendar={disableCalendar}\n        format={format}\n        calendarIcon={calendarIcon}\n        {...rest}\n      />\n      {createPortal(\n        <Transition\n          nodeRef={popupRef}\n          in={isOpen && !disabled && !disableCalendar}\n          timeout={150}\n          mountOnEnter\n          unmountOnExit\n        >\n          {(state) => (\n            <ClickAwayListener onClickAway={onClickAway}>\n              <div\n                ref={popupForkRef}\n                className=\"smwb-date-picker smwb-date-time-picker\"\n                style={{\n                  ...floatingStyles,\n                  ...defaultStyle(150),\n                  ...transitionStyles[state],\n                }}\n                data-testid=\"date-time-picker\"\n                role=\"dialog\"\n                aria-modal=\"false\"\n                aria-label={calendarAriaLabel}\n              >\n                <div className=\"smwb-date-picker__inner smwb-date-time-picker__inner\">\n                  <DataPickerHeader\n                    viewValue={viewValue}\n                    locale={locale}\n                    openView={openView}\n                    onChange={onViewValueChange}\n                    onMonthLabelClick={onMonthLabelClick}\n                    onYearLabelClick={onYearLabelClick}\n                  />\n                  <div className=\"smwb-date-time-picker__content\">\n                    <div className=\"smwb-date-picker__body smwb-date-time-picker__body\">{view}</div>\n                    <TimePickerColumns value={viewValue} format={resolvedTimeFormat} onChange={onTimeChange} />\n                  </div>\n                </div>\n              </div>\n            </ClickAwayListener>\n          )}\n        </Transition>,\n        document.body\n      )}\n    </>\n  );\n});\n\nexport default DateTimePicker;\n"],"names":["defaultStyle","duration","transitionStyles","DateTimePicker","React","props","ref","valueProp","onChangeProp","showDaysOutsideMonth","disablePast","disableFuture","weekStartsOn","placement","disabled","disableCalendar","calendarAriaLabel","minDate","maxDate","isDateDisabled","locale","format","timeFormat","calendarIcon","onBlurProp","rest","value","useMemo","viewValue","setViewValue","useState","isValidDate","isValidTimeDate","openView","setOpenView","OpenView","isOpen","setIsOpen","anchorRef","useRef","popupRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","popupForkRef","useSafeLayoutEffect","onViewValueChange","useCallback","next","onMonthLabelClick","onYearLabelClick","onMonthChange","month","setMonth","onYearChange","year","setYear","emitChange","onDateChange","_event","date","timeSource","mergeDate","onTimeChange","timeDate","dateSource","mergeTime","onToggle","prevState","onClickAway","event","target","_a","_b","resolvedTimeFormat","DEFAULT_TIME_FORMAT","months","getMonths","years","getYears","view","jsx","DataPickerDays","DatePickerList","jsxs","Fragment","DateTimePickerInput","createPortal","Transition","state","ClickAwayListener","DataPickerHeader","TimePickerColumns"],"mappings":"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"}

package/dist/components/inputs/dateTimePicker/dateTimePickerInput.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DateTimePickerProps } from "./dateTimePicker";
+export interface DateTimePickerInputProps extends Omit<DateTimePickerProps, "locale" | "showDaysOutsideMonth" | "disablePast" | "disableFuture" | "weekStartsOn" | "placement" | "minDate" | "maxDate" | "isDateDisabled"> {
+    onToggle: () => void;
+}
+export declare const DateTimePickerInput: React.ForwardRefExoticComponent<DateTimePickerInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/dateTimePicker/dateTimePickerInput.js

@@ -0,0 +1,37 @@
+import { jsx as e } from "react/jsx-runtime";
+import u from "react";
+import { DatePickerIconButton as g } from "../datePicker/datePickerIconButton.js";
+import { useDateTimeInput as k } from "./useDateTimeInput.js";
+import { Icon as I } from "../../base/icon/icon.js";
+import { TextField as P } from "../textField/textField.js";
+function b(o) {
+  o.stopPropagation();
+}
+const C = u.forwardRef(function(n, r) {
+  const { value: i, onChange: a, onBlur: d, onToggle: m, disabled: t, disableCalendar: c, calendarIcon: l, format: p, ...s } = n, f = k({ value: i, onChange: a, onBlur: d, format: p });
+  return /* @__PURE__ */ e(
+    P,
+    {
+      ref: r,
+      ...f,
+      type: "tel",
+      endAdornment: !c && /* @__PURE__ */ e(
+        g,
+        {
+          edge: "end",
+          onClick: m,
+          onMouseDown: b,
+          disabled: !!t,
+          "data-testid": "date-time-picker-icon-button",
+          children: l || /* @__PURE__ */ e(I, { name: "event", fill: 1, weight: 500, size: 24 })
+        }
+      ),
+      disabled: !!t,
+      ...s
+    }
+  );
+});
+export {
+  C as DateTimePickerInput
+};
+//# sourceMappingURL=dateTimePickerInput.js.map

package/dist/components/inputs/dateTimePicker/dateTimePickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimePickerInput.js","sources":["../../../../src/components/inputs/dateTimePicker/dateTimePickerInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { TextField } from \"../textField\";\nimport { DatePickerIconButton } from \"../datePicker/datePickerIconButton\";\nimport { useDateTimeInput } from \"./useDateTimeInput\";\nimport { DateTimePickerProps } from \"./dateTimePicker\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface DateTimePickerInputProps extends Omit<\n  DateTimePickerProps,\n  | \"locale\"\n  | \"showDaysOutsideMonth\"\n  | \"disablePast\"\n  | \"disableFuture\"\n  | \"weekStartsOn\"\n  | \"placement\"\n  | \"minDate\"\n  | \"maxDate\"\n  | \"isDateDisabled\"\n> {\n  onToggle: () => void;\n}\n\nfunction stopPropagation(event: React.SyntheticEvent) {\n  event.stopPropagation();\n}\n\nexport const DateTimePickerInput = React.forwardRef(function DateTimePickerInput(\n  props: DateTimePickerInputProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const { value, onChange, onBlur, onToggle, disabled, disableCalendar, calendarIcon, format, ...rest } = props;\n  const maskedProps = useDateTimeInput({ value, onChange, onBlur, format });\n\n  return (\n    <TextField\n      ref={ref}\n      {...maskedProps}\n      type=\"tel\"\n      endAdornment={\n        !disableCalendar && (\n          <DatePickerIconButton\n            edge=\"end\"\n            onClick={onToggle}\n            onMouseDown={stopPropagation}\n            disabled={Boolean(disabled)}\n            data-testid=\"date-time-picker-icon-button\"\n          >\n            {calendarIcon || <Icon name=\"event\" fill={1} weight={500} size={24} />}\n          </DatePickerIconButton>\n        )\n      }\n      disabled={Boolean(disabled)}\n      {...rest}\n    />\n  );\n});\n"],"names":["stopPropagation","event","DateTimePickerInput","React","props","ref","value","onChange","onBlur","onToggle","disabled","disableCalendar","calendarIcon","format","rest","maskedProps","useDateTimeInput","jsx","TextField","DatePickerIconButton","Icon"],"mappings":";;;;;;AAsBA,SAASA,EAAgBC,GAA6B;AACpD,EAAAA,EAAM,gBAAA;AACR;AAEO,MAAMC,IAAsBC,EAAM,WAAW,SAClDC,GACAC,GACA;AACA,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,GAAU,UAAAC,GAAU,iBAAAC,GAAiB,cAAAC,GAAc,QAAAC,GAAQ,GAAGC,EAAA,IAASV,GAClGW,IAAcC,EAAiB,EAAE,OAAAV,GAAO,UAAAC,GAAU,QAAAC,GAAQ,QAAAK,GAAQ;AAExE,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACC,GAAGU;AAAA,MACJ,MAAK;AAAA,MACL,cACE,CAACJ,KACC,gBAAAM;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASV;AAAA,UACT,aAAaT;AAAA,UACb,UAAU,EAAQU;AAAA,UAClB,eAAY;AAAA,UAEX,UAAAE,KAAgB,gBAAAK,EAACG,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAG,QAAQ,KAAK,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAI1E,UAAU,EAAQV;AAAA,MACjB,GAAGI;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/inputs/dateTimePicker/index.d.ts

@@ -0,0 +1,6 @@
+export { default as DateTimePicker } from "./dateTimePicker";
+export type { DateTimePickerProps } from "./dateTimePicker";
+export { DateTimePickerInput } from "./dateTimePickerInput";
+export type { DateTimePickerInputProps } from "./dateTimePickerInput";
+export type { UseDateTimeInputProps } from "./useDateTimeInput";
+export { useDateTimeInput, getCurrentDateTimeFormat, getDisplayDateTime } from "./useDateTimeInput";

package/dist/components/inputs/dateTimePicker/useDateTimeInput.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { DateTimePickerProps } from "./dateTimePicker";
+export type UseDateTimeInputProps = Pick<DateTimePickerProps, "value" | "onChange" | "onBlur"> & {
+    format?: string;
+};
+interface UseDateTimeInputReturn {
+    value: string;
+    onChange: React.ChangeEventHandler;
+    onBlur: React.ChangeEventHandler;
+    placeholder: string;
+}
+declare function getDisplayDateTime(date: unknown, format?: string): string;
+declare function getCurrentDateTimeFormat(format?: string): string;
+export declare function useDateTimeInput({ value: valueProp, onChange: onChangeProp, onBlur: onBlurProp, format, }: UseDateTimeInputProps): UseDateTimeInputReturn;
+export { getDisplayDateTime, getCurrentDateTimeFormat };

package/dist/components/inputs/dateTimePicker/useDateTimeInput.js

@@ -0,0 +1,60 @@
+import p, { useMemo as u, useState as F, useRef as h, useCallback as N } from "react";
+import { useRifm as C } from "rifm";
+import { getCurrentFormatDate as b, maskedDateFormatter as k } from "../datePicker/utils.js";
+import { formatDateTimeByPattern as E, isDateTimePatternMatch as m, parseDateTimeByPattern as M } from "./dateTimeFormat.js";
+const R = /[a-zA-Z]/g;
+function a(e, r) {
+  return !e || Object.prototype.toString.call(e) !== "[object Date]" || isNaN(e) ? "" : r ? E(e, r) : new Intl.DateTimeFormat(void 0, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: !1
+  }).format(e);
+}
+function f(e) {
+  return e || `${b()} HH:mm`;
+}
+function V(e) {
+  return f(e).replace(R, "_");
+}
+function D(e, r) {
+  const n = M(e, r);
+  return n || new Date(Number.NaN);
+}
+function A({
+  value: e,
+  onChange: r,
+  onBlur: n,
+  format: i
+}) {
+  const s = u(() => f(i), [i]), [g, o] = F(a(e, i)), d = u(() => V(i), [i]), l = u(() => k(d), [d]), c = h(void 0);
+  p.useEffect(() => {
+    const t = e !== c.current;
+    c.current = e, t && o(a(e, i));
+  }, [e, i]);
+  const y = (t) => {
+    o(t), r && (m(t, s) ? r(void 0, D(t, s)) : t === "" && r(void 0));
+  }, T = N(() => {
+    if (!n)
+      return;
+    const t = c.current;
+    t instanceof Date && m(a(t, i), s) ? n(void 0, t) : typeof t == "string" && m(t, s) ? n(void 0, D(t, s)) : (t === void 0 || t === "") && n(void 0), o(a(e, i));
+  }, [n, e, i, s]);
+  return {
+    ...C({
+      value: g,
+      onChange: y,
+      format: l
+    }),
+    onBlur: T,
+    placeholder: f(i).toLowerCase()
+  };
+}
+export {
+  f as getCurrentDateTimeFormat,
+  a as getDisplayDateTime,
+  A as useDateTimeInput
+};
+//# sourceMappingURL=useDateTimeInput.js.map

package/dist/components/inputs/dateTimePicker/useDateTimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDateTimeInput.js","sources":["../../../../src/components/inputs/dateTimePicker/useDateTimeInput.ts"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { useRifm } from \"rifm\";\nimport { getCurrentFormatDate, maskedDateFormatter } from \"../datePicker/utils\";\nimport { formatDateTimeByPattern, isDateTimePatternMatch, parseDateTimeByPattern } from \"./dateTimeFormat\";\nimport { DateTimePickerProps } from \"./dateTimePicker\";\n\nexport type UseDateTimeInputProps = Pick<DateTimePickerProps, \"value\" | \"onChange\" | \"onBlur\"> & {\n  format?: string;\n};\n\ninterface UseDateTimeInputReturn {\n  value: string;\n  onChange: React.ChangeEventHandler;\n  onBlur: React.ChangeEventHandler;\n  placeholder: string;\n}\n\nconst MASK_TOKEN_REGEXP = /[a-zA-Z]/g;\n\nfunction getDisplayDateTime(date: unknown, format?: string) {\n  if (!date || Object.prototype.toString.call(date) !== \"[object Date]\" || isNaN(date as number)) {\n    return \"\";\n  }\n\n  if (format) {\n    return formatDateTimeByPattern(date as Date, format);\n  }\n\n  return new Intl.DateTimeFormat(undefined, {\n    day: \"2-digit\",\n    month: \"2-digit\",\n    year: \"numeric\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n    hour12: false,\n  }).format(date as Date);\n}\n\nfunction getCurrentDateTimeFormat(format?: string): string {\n  if (format) {\n    return format;\n  }\n\n  return `${getCurrentFormatDate()} HH:mm`;\n}\n\nfunction getDateTimeMaskFormat(format?: string) {\n  return getCurrentDateTimeFormat(format).replace(MASK_TOKEN_REGEXP, \"_\");\n}\n\nfunction getDateTimeByFormat(value: string, format: string) {\n  const parsed = parseDateTimeByPattern(value, format);\n\n  if (!parsed) {\n    return new Date(Number.NaN);\n  }\n\n  return parsed;\n}\n\nexport function useDateTimeInput({\n  value: valueProp,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  format,\n}: UseDateTimeInputProps): UseDateTimeInputReturn {\n  const currentFormat = useMemo(() => getCurrentDateTimeFormat(format), [format]);\n  const [displayedValue, setDisplayedValue] = useState(getDisplayDateTime(valueProp, format));\n  const maskFormat = useMemo(() => getDateTimeMaskFormat(format), [format]);\n  const formatter = useMemo(() => maskedDateFormatter(maskFormat), [maskFormat]);\n  const prevValue = useRef<UseDateTimeInputProps[\"value\"]>(undefined);\n\n  React.useEffect(() => {\n    const isValueChanged = valueProp !== prevValue.current;\n    prevValue.current = valueProp;\n\n    if (!isValueChanged) {\n      return;\n    }\n\n    setDisplayedValue(getDisplayDateTime(valueProp, format));\n  }, [valueProp, format]);\n\n  const onChange = (value: string) => {\n    setDisplayedValue(value);\n\n    if (!onChangeProp) {\n      return;\n    }\n\n    if (isDateTimePatternMatch(value, currentFormat)) {\n      onChangeProp(undefined, getDateTimeByFormat(value, currentFormat));\n    } else if (value === \"\") {\n      onChangeProp(undefined);\n    }\n  };\n\n  const onBlur = useCallback(() => {\n    if (!onBlurProp) {\n      return;\n    }\n\n    const prev = prevValue.current;\n\n    if (prev instanceof Date && isDateTimePatternMatch(getDisplayDateTime(prev, format), currentFormat)) {\n      onBlurProp(undefined, prev);\n    } else if (typeof prev === \"string\" && isDateTimePatternMatch(prev, currentFormat)) {\n      onBlurProp(undefined, getDateTimeByFormat(prev, currentFormat));\n    } else if (prev === undefined || prev === \"\") {\n      onBlurProp(undefined);\n    }\n\n    setDisplayedValue(getDisplayDateTime(valueProp, format));\n  }, [onBlurProp, valueProp, format, currentFormat]);\n\n  const rifmProps = useRifm({\n    value: displayedValue,\n    onChange,\n    format: formatter,\n  });\n\n  return {\n    ...rifmProps,\n    onBlur,\n    placeholder: getCurrentDateTimeFormat(format).toLowerCase(),\n  };\n}\n\nexport { getDisplayDateTime, getCurrentDateTimeFormat };\n"],"names":["MASK_TOKEN_REGEXP","getDisplayDateTime","date","format","formatDateTimeByPattern","getCurrentDateTimeFormat","getCurrentFormatDate","getDateTimeMaskFormat","getDateTimeByFormat","value","parsed","parseDateTimeByPattern","useDateTimeInput","valueProp","onChangeProp","onBlurProp","currentFormat","useMemo","displayedValue","setDisplayedValue","useState","maskFormat","formatter","maskedDateFormatter","prevValue","useRef","React","isValueChanged","onChange","isDateTimePatternMatch","onBlur","useCallback","prev","useRifm"],"mappings":";;;;AAiBA,MAAMA,IAAoB;AAE1B,SAASC,EAAmBC,GAAeC,GAAiB;AAC1D,SAAI,CAACD,KAAQ,OAAO,UAAU,SAAS,KAAKA,CAAI,MAAM,mBAAmB,MAAMA,CAAc,IACpF,KAGLC,IACKC,EAAwBF,GAAcC,CAAM,IAG9C,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACT,EAAE,OAAOD,CAAY;AACxB;AAEA,SAASG,EAAyBF,GAAyB;AACzD,SAAIA,KAIG,GAAGG,GAAsB;AAClC;AAEA,SAASC,EAAsBJ,GAAiB;AAC9C,SAAOE,EAAyBF,CAAM,EAAE,QAAQH,GAAmB,GAAG;AACxE;AAEA,SAASQ,EAAoBC,GAAeN,GAAgB;AAC1D,QAAMO,IAASC,EAAuBF,GAAON,CAAM;AAEnD,SAAKO,KACI,IAAI,KAAK,OAAO,GAAG;AAI9B;AAEO,SAASE,EAAiB;AAAA,EAC/B,OAAOC;AAAA,EACP,UAAUC;AAAA,EACV,QAAQC;AAAA,EACR,QAAAZ;AACF,GAAkD;AAChD,QAAMa,IAAgBC,EAAQ,MAAMZ,EAAyBF,CAAM,GAAG,CAACA,CAAM,CAAC,GACxE,CAACe,GAAgBC,CAAiB,IAAIC,EAASnB,EAAmBY,GAAWV,CAAM,CAAC,GACpFkB,IAAaJ,EAAQ,MAAMV,EAAsBJ,CAAM,GAAG,CAACA,CAAM,CAAC,GAClEmB,IAAYL,EAAQ,MAAMM,EAAoBF,CAAU,GAAG,CAACA,CAAU,CAAC,GACvEG,IAAYC,EAAuC,MAAS;AAElE,EAAAC,EAAM,UAAU,MAAM;AACpB,UAAMC,IAAiBd,MAAcW,EAAU;AAG/C,IAFAA,EAAU,UAAUX,GAEfc,KAILR,EAAkBlB,EAAmBY,GAAWV,CAAM,CAAC;AAAA,EACzD,GAAG,CAACU,GAAWV,CAAM,CAAC;AAEtB,QAAMyB,IAAW,CAACnB,MAAkB;AAGlC,IAFAU,EAAkBV,CAAK,GAElBK,MAIDe,EAAuBpB,GAAOO,CAAa,IAC7CF,EAAa,QAAWN,EAAoBC,GAAOO,CAAa,CAAC,IACxDP,MAAU,MACnBK,EAAa,MAAS;AAAA,EAE1B,GAEMgB,IAASC,EAAY,MAAM;AAC/B,QAAI,CAAChB;AACH;AAGF,UAAMiB,IAAOR,EAAU;AAEvB,IAAIQ,aAAgB,QAAQH,EAAuB5B,EAAmB+B,GAAM7B,CAAM,GAAGa,CAAa,IAChGD,EAAW,QAAWiB,CAAI,IACjB,OAAOA,KAAS,YAAYH,EAAuBG,GAAMhB,CAAa,IAC/ED,EAAW,QAAWP,EAAoBwB,GAAMhB,CAAa,CAAC,KACrDgB,MAAS,UAAaA,MAAS,OACxCjB,EAAW,MAAS,GAGtBI,EAAkBlB,EAAmBY,GAAWV,CAAM,CAAC;AAAA,EACzD,GAAG,CAACY,GAAYF,GAAWV,GAAQa,CAAa,CAAC;AAQjD,SAAO;AAAA,IACL,GAPgBiB,EAAQ;AAAA,MACxB,OAAOf;AAAA,MACP,UAAAU;AAAA,MACA,QAAQN;AAAA,IAAA,CACT;AAAA,IAIC,QAAAQ;AAAA,IACA,aAAazB,EAAyBF,CAAM,EAAE,YAAA;AAAA,EAAY;AAE9D;"}

package/dist/components/inputs/fileDrop/countPreview.d.ts

@@ -0,0 +1,7 @@
+export interface CountPreviewProps {
+    previewClassName?: string;
+    text?: string;
+    filesLength: number;
+    handleRemoveAll: () => void;
+}
+export declare function CountPreview({ handleRemoveAll, filesLength, previewClassName, text }: CountPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/fileDrop/fileDrop.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { DropzoneOptions } from "react-dropzone";
+export interface FileUploadProps extends DropzoneOptions {
+    preview?: boolean;
+    previewCols?: number;
+    galleryItemSize?: number;
+    onDrop: (files: File[]) => void;
+    label?: string;
+    className?: string;
+    previewClassName?: string;
+    disabled?: boolean;
+    /** Validation message rendered below the drop zone. */
+    error?: string;
+}
+export declare const FileDrop: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLDivElement>>;
+export default FileDrop;

package/dist/components/inputs/fileDrop/preview.d.ts

@@ -0,0 +1,8 @@
+export interface PreviewProps {
+    previewCols?: number;
+    galleryItemSize?: number;
+    previewClassName?: string;
+    files: File[];
+    handleRemoveAll: () => void;
+}
+export declare function Preview(props: PreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/fileDrop/previewWrapper.d.ts

@@ -0,0 +1,9 @@
+export interface PreviewWrapperProps {
+    preview?: boolean;
+    files: File[];
+    handleRemoveAll: () => void;
+    previewCols?: number;
+    galleryItemSize?: number;
+    previewClassName?: string;
+}
+export declare function PreviewWrapper(props: PreviewWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/fileDrop/utils.d.ts

@@ -0,0 +1 @@
+export declare function isImageFile(file: File): boolean;

package/dist/components/inputs/fileInput/fileInput.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { DropzoneOptions } from "react-dropzone";
+export interface FileInputProps extends DropzoneOptions {
+    label?: string;
+    className?: string;
+    buttonClassName?: string;
+    disabled?: boolean;
+    /** Validation message shown below the control. */
+    error?: string;
+    /** Fired with the accepted files when the user picks them. */
+    onFilesSelected?: (files: File[]) => void;
+    /** @deprecated optional click passthrough on the trigger button. */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLDivElement>>;
+export default FileInput;

package/dist/components/inputs/floatingButton/floatingButton.d.ts

@@ -0,0 +1,11 @@
+import React, { ButtonHTMLAttributes } from "react";
+export type FloatingButtonColor = "primary" | "secondary" | "error" | "success" | "warning" | "info";
+export interface FloatingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    variant?: "extended" | "default";
+    size?: "small" | "medium" | "large";
+    /** Semantic color. Resolves through the shared `--smui-*Color*` tokens. */
+    color?: FloatingButtonColor;
+}
+export declare const FloatingButton: React.ForwardRefExoticComponent<FloatingButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default FloatingButton;

package/dist/components/inputs/floatingButton/floatingButton.js

@@ -0,0 +1,42 @@
+import { jsxs as R, jsx as d } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/floatingButton/floatingButton.entry.css';/* empty css                                                                       */
+import m from "react";
+import w from "clsx";
+import { Ripple as x } from "../../base/ripple/ripple.js";
+const y = m.forwardRef(function({
+  children: e,
+  className: i,
+  onMouseDown: t,
+  variant: f = "default",
+  size: a = "medium",
+  color: s = "primary",
+  type: c = "button",
+  ...l
+}, u) {
+  const n = m.useRef(null), p = (o) => {
+    t == null || t(o);
+  }, b = (o) => {
+    var r;
+    (r = n.current) == null || r.onRipple(o);
+  };
+  return /* @__PURE__ */ R(
+    "button",
+    {
+      ref: u,
+      type: c,
+      className: w("smwb-fab", `smwb-${f}`, `smwb-${a}`, `smwb-fab_color-${s}`, i),
+      onMouseDown: p,
+      onPointerDown: b,
+      ...l,
+      children: [
+        e,
+        /* @__PURE__ */ d(x, { actionRef: n })
+      ]
+    }
+  );
+});
+export {
+  y as FloatingButton,
+  y as default
+};
+//# sourceMappingURL=floatingButton.js.map

package/dist/components/inputs/floatingButton/floatingButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingButton.js","sources":["../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport type FloatingButtonColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface FloatingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  variant?: \"extended\" | \"default\";\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Semantic color. Resolves through the shared `--smui-*Color*` tokens. */\n  color?: FloatingButtonColor;\n}\n\nexport const FloatingButton = React.forwardRef<HTMLButtonElement, FloatingButtonProps>(function FloatingButton(\n  {\n    children,\n    className,\n    onMouseDown: onMouseDownProp,\n    variant = \"default\",\n    size = \"medium\",\n    color = \"primary\",\n    type = \"button\",\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cn(\"smwb-fab\", `smwb-${variant}`, `smwb-${size}`, `smwb-fab_color-${color}`, className)}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      <Ripple actionRef={rippleRef} />\n    </button>\n  );\n});\n\nexport default FloatingButton;\n"],"names":["FloatingButton","React","children","className","onMouseDownProp","variant","size","color","type","rest","ref","rippleRef","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;;AAeO,MAAMA,IAAiBC,EAAM,WAAmD,SACrF;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAaC;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYV,EAAM,OAAyB,IAAI,GAE/CW,IAAc,CAACC,MAA+C;AAClE,IAAAT,KAAA,QAAAA,EAAkBS;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAiD;;AACtE,KAAAE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,MAAAF;AAAA,MACA,WAAWS,EAAG,YAAY,QAAQZ,CAAO,IAAI,QAAQC,CAAI,IAAI,kBAAkBC,CAAK,IAAIJ,CAAS;AAAA,MACjG,aAAAS;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAP;AAAA,QACD,gBAAAgB,EAACC,GAAA,EAAO,WAAWR,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC,CAAC;"}

package/dist/components/inputs/floatingButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FloatingButton } from "./floatingButton";
+export type { FloatingButtonProps, FloatingButtonColor } from "./floatingButton";

package/dist/components/inputs/radioButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioButton } from "./radioButton";
+export type { RadioButtonProps } from "./radioButton";

package/dist/components/inputs/radioButton/radioButton.d.ts

@@ -0,0 +1,19 @@
+import React, { InputHTMLAttributes } from "react";
+import type { SelectionControlColor, SelectionControlSize } from "../checkbox/checkbox";
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
+    label?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    checked?: boolean;
+    size?: SelectionControlSize;
+    color?: SelectionControlColor;
+    helperText?: React.ReactNode;
+    error?: boolean;
+    /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number | readonly string[] | boolean | undefined, data: RadioButtonProps) => void;
+}
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+export default RadioButton;

package/dist/components/inputs/radioButton/radioButton.js

@@ -0,0 +1,69 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/radioButton/radioButton.entry.css';/* empty css                                                                 */
+import x from "react";
+import i from "clsx";
+import { useId as g } from "../../../hooks/useId.js";
+import { TextFieldWrapper as y } from "../textField/textFieldWrapper.js";
+const T = x.forwardRef(function(r, b) {
+  const {
+    label: m,
+    disabled: a,
+    readOnly: s,
+    required: l,
+    name: p,
+    id: u,
+    size: w = "medium",
+    color: f = "primary",
+    helperText: _,
+    error: t,
+    onChange: d,
+    className: h,
+    ...N
+  } = r, n = g(u), v = (o) => {
+    if (s) {
+      o.preventDefault();
+      return;
+    }
+    d == null || d(o, r.value !== void 0 ? r.value : o.target.checked, r);
+  };
+  return /* @__PURE__ */ e(y, { helperText: _, disabled: a, error: t, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ c(
+    "label",
+    {
+      htmlFor: n,
+      className: i("smwb-radio", `smwb-radio_size-${w}`, `smwb-radio_color-${f}`, {
+        "smwb-disabled": a,
+        "smwb-readonly": s
+      }),
+      children: [
+        /* @__PURE__ */ c("span", { className: "smwb-radio__wrapper", children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              id: n,
+              name: p,
+              disabled: a,
+              readOnly: s,
+              required: l,
+              "aria-invalid": t || void 0,
+              "aria-required": l || void 0,
+              className: i("smwb-radio__input", h),
+              type: "radio",
+              "data-testid": "radio",
+              ref: b,
+              ...N,
+              onChange: v
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: i("smwb-radio__btn", { "smwb-disabled": a }) }),
+          /* @__PURE__ */ e("span", { className: i("smwb-radio__bg", { "smwb-disabled": a }) })
+        ] }),
+        m && /* @__PURE__ */ e("span", { className: "smwb-radio__label", children: m })
+      ]
+    }
+  ) });
+});
+export {
+  T as RadioButton,
+  T as default
+};
+//# sourceMappingURL=radioButton.js.map

package/dist/components/inputs/radioButton/radioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioButton.js","sources":["../../../../src/components/inputs/radioButton/radioButton.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useId } from \"../../../hooks/useId\";\nimport type { SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  checked?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  helperText?: React.ReactNode;\n  error?: boolean;\n  /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string | number | readonly string[] | boolean | undefined,\n    data: RadioButtonProps\n  ) => void;\n}\n\nexport const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(function RadioButton(props, ref) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    size = \"medium\",\n    color = \"primary\",\n    helperText,\n    error,\n    onChange,\n    className,\n    ...args\n  } = props;\n  const id = useId(idProp);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      e.preventDefault();\n      return;\n    }\n    onChange?.(e, props.value !== undefined ? props.value : e.target.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper helperText={helperText} disabled={disabled} error={error} className=\"smwb-text-field-checkbox\">\n      <label\n        htmlFor={id}\n        className={cn(\"smwb-radio\", `smwb-radio_size-${size}`, `smwb-radio_color-${color}`, {\n          \"smwb-disabled\": disabled,\n          \"smwb-readonly\": readOnly,\n        })}\n      >\n        <span className=\"smwb-radio__wrapper\">\n          <input\n            id={id}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            aria-invalid={error || undefined}\n            aria-required={required || undefined}\n            className={cn(\"smwb-radio__input\", className)}\n            type=\"radio\"\n            data-testid=\"radio\"\n            ref={ref}\n            {...args}\n            onChange={handleChange}\n          />\n          <span className={cn(\"smwb-radio__btn\", { \"smwb-disabled\": disabled })} />\n          <span className={cn(\"smwb-radio__bg\", { \"smwb-disabled\": disabled })} />\n        </span>\n        {label && <span className=\"smwb-radio__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","label","disabled","readOnly","required","name","idProp","size","color","helperText","error","onChange","className","args","id","useId","handleChange","e","TextFieldWrapper","jsxs","cn","jsx"],"mappings":";;;;;;AA2BO,MAAMA,IAAcC,EAAM,WAA+C,SAAqBC,GAAOC,GAAK;AAC/G,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GACEe,IAAKC,EAAMT,CAAM,GAEjBU,IAAe,CAACC,MAA2C;AAC/D,QAAId,GAAU;AACZ,MAAAc,EAAE,eAAA;AACF;AAAA,IACF;AACA,IAAAN,KAAA,QAAAA,EAAWM,GAAGlB,EAAM,UAAU,SAAYA,EAAM,QAAQkB,EAAE,OAAO,SAASlB;AAAA,EAC5E;AAEA,2BACGmB,GAAA,EAAiB,YAAAT,GAAwB,UAAAP,GAAoB,OAAAQ,GAAc,WAAU,4BACpF,UAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,WAAWM,EAAG,cAAc,mBAAmBb,CAAI,IAAI,oBAAoBC,CAAK,IAAI;AAAA,QAClF,iBAAiBN;AAAA,QACjB,iBAAiBC;AAAA,MAAA,CAClB;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAgB,EAAC,QAAA,EAAK,WAAU,uBACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAAP;AAAA,cACA,MAAAT;AAAA,cACA,UAAAH;AAAA,cACA,UAAAC;AAAA,cACA,UAAAC;AAAA,cACA,gBAAcM,KAAS;AAAA,cACvB,iBAAeN,KAAY;AAAA,cAC3B,WAAWgB,EAAG,qBAAqBR,CAAS;AAAA,cAC5C,MAAK;AAAA,cACL,eAAY;AAAA,cACZ,KAAAZ;AAAA,cACC,GAAGa;AAAA,cACJ,UAAUG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAK,EAAC,UAAK,WAAWD,EAAG,mBAAmB,EAAE,iBAAiBlB,EAAA,CAAU,GAAG;AAAA,UACvE,gBAAAmB,EAAC,UAAK,WAAWD,EAAG,kBAAkB,EAAE,iBAAiBlB,EAAA,CAAU,EAAA,CAAG;AAAA,QAAA,GACxE;AAAA,QACCD,KAAS,gBAAAoB,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAApB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEzD;AAEJ,CAAC;"}

package/dist/components/inputs/rating/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Rating } from "./rating";
+export type { RatingProps, RatingColor } from "./rating";