@stenajs-webui/forms 20.6.11 → 20.7.1

package/dist/components/ui/checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ChangeEvent, ComponentPropsWithoutRef } from "react";
 import { FullOnChangeProps } from "../types";
-export declare type CheckboxSize = "standard" | "small";
+export type CheckboxSize = "standard" | "small";
 export interface CheckboxProps extends FullOnChangeProps<boolean, ChangeEvent<HTMLInputElement>>, Omit<ComponentPropsWithoutRef<"input">, "size" | "value"> {
     indeterminate?: boolean;
     size?: CheckboxSize;

package/dist/components/ui/labelled-select/LabelledSelect.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { PropsWithChildren } from "react";
 import { ValueAndOnValueChangeProps } from "../types";
 import { SelectElementProps } from "@stenajs-webui/core";
-export declare type SelectBorderVariant = "normalBorder" | "onlyTopBorder" | "onlyBottomBorder";
+export type SelectBorderVariant = "normalBorder" | "onlyTopBorder" | "onlyBottomBorder";
 export interface LabelledSelectProps extends ValueAndOnValueChangeProps<string>, PropsWithChildren, Omit<SelectElementProps, "value"> {
     id?: string;
     name: string;
@@ -11,5 +11,5 @@ export interface LabelledSelectProps extends ValueAndOnValueChangeProps<string>,
     borderVariant?: SelectBorderVariant;
     variant?: LabelledSelectVariant;
 }
-export declare type LabelledSelectVariant = "normal" | "error";
+export type LabelledSelectVariant = "normal" | "error";
 export declare const LabelledSelect: React.FC<LabelledSelectProps>;

package/dist/components/ui/labelled-text-input/LabelledTextInput.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { InputElementProps } from "@stenajs-webui/core";
 import { ValueAndOnValueChangeProps } from "../types";
-export declare type LabelledTextInputVariant = "normal" | "error";
-export declare type LabelledTextInputSize = "medium" | "large";
-export declare type LabelledTextInputBorderVariant = "normalBorder" | "onlyTop" | "onlyBottom";
+export type LabelledTextInputVariant = "normal" | "error";
+export type LabelledTextInputSize = "medium" | "large";
+export type LabelledTextInputBorderVariant = "normalBorder" | "onlyTop" | "onlyBottom";
 export interface LabelledTextInputProps extends Omit<InputElementProps, "value" | "size">, ValueAndOnValueChangeProps<string> {
     id?: string;
     label?: string;

package/dist/components/ui/numeric-text-input/hooks/UseNumericInputValue.d.ts

@@ -1,4 +1,4 @@
 import { ValueAndOnValueChangeProps } from "../../types";
 import { NumericTextInputProps } from "../NumericTextInput";
-export declare type NumericInputValueProps = ValueAndOnValueChangeProps<number | undefined>;
-export declare const useNumericInputValue: (value: number | undefined, onValueChange?: ((value: number | undefined) => void) | undefined) => Partial<NumericTextInputProps>;
+export type NumericInputValueProps = ValueAndOnValueChangeProps<number | undefined>;
+export declare const useNumericInputValue: (value: number | undefined, onValueChange?: (value: number | undefined) => void) => Partial<NumericTextInputProps>;

package/dist/components/ui/radio/RadioButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ChangeEvent, ComponentPropsWithoutRef } from "react";
 import { FullOnChangeProps } from "../types";
-export declare type RadioButtonSize = "standard" | "small";
+export type RadioButtonSize = "standard" | "small";
 export interface RadioButtonProps extends FullOnChangeProps<string, ChangeEvent<HTMLInputElement>>, Omit<ComponentPropsWithoutRef<"input">, "size" | "value"> {
     size?: RadioButtonSize;
 }

package/dist/components/ui/radio/RadioButtonBox.d.ts

@@ -1,8 +1,10 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import * as React from "react";
+import { ReactNode } from "react";
 import { RadioButtonProps } from "./RadioButton";
-export declare type RadioButtonBoxVariant = "normal" | "danger";
-export interface RadioButtonBoxProps extends RadioButtonProps {
+export type RadioButtonBoxVariant = "normal" | "danger";
+export type RadioButtonBoxProps = RadioButtonBoxNoRightProps | RadioButtonBoxIconProps | RadioButtonBoxContentRightProps;
+export interface RadioButtonBoxCommonProps extends RadioButtonProps {
     label?: string;
     /**
      * If set, this label is used by screen readers instead of label prop.
@@ -11,7 +13,18 @@ export interface RadioButtonBoxProps extends RadioButtonProps {
      */
     screenReaderLabel?: string;
     variant?: RadioButtonBoxVariant;
-    icon?: IconDefinition;
     radioButtonClassName?: string;
 }
+export interface RadioButtonBoxNoRightProps extends RadioButtonBoxCommonProps {
+    icon?: never;
+    contentRight?: never;
+}
+export interface RadioButtonBoxIconProps extends RadioButtonBoxCommonProps {
+    icon: IconDefinition;
+    contentRight?: never;
+}
+export interface RadioButtonBoxContentRightProps extends RadioButtonBoxCommonProps {
+    icon?: never;
+    contentRight: ReactNode;
+}
 export declare const RadioButtonBox: React.FC<RadioButtonBoxProps>;

package/dist/components/ui/text-area/TextArea.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ChangeEvent, ComponentPropsWithoutRef } from "react";
 import { FullOnChangeProps } from "../types";
-declare type Resize = "none" | "both" | "horizontal" | "vertical" | "inherit" | "initial" | "revert" | "unset";
+type Resize = "none" | "both" | "horizontal" | "vertical" | "inherit" | "initial" | "revert" | "unset";
 export interface TextAreaProps extends Omit<ComponentPropsWithoutRef<"textarea">, "value">, FullOnChangeProps<string, ChangeEvent<HTMLTextAreaElement>> {
     resize?: Resize;
     readOnly?: boolean;

package/dist/components/ui/text-input/TextInput.d.ts

@@ -4,7 +4,7 @@ import * as React from "react";
 import { ChangeEvent, CSSProperties } from "react";
 import { MoveDirection } from "../../../hooks/UseKeyboardNavigation";
 import { FullOnChangeProps } from "../types";
-export declare type TextInputVariant = "standard" | "loading" | "warning" | "error" | "modified" | "success";
+export type TextInputVariant = "standard" | "loading" | "warning" | "error" | "modified" | "success";
 interface ExtraContent {
     /** React node to put to the left. Left icon is ignored if this is set. */
     contentLeft?: React.ReactNode;

package/dist/components/ui/types.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent } from "react";
-export declare type FullOnChangeProps<TValue, TEvent extends ChangeEvent> = ValueProps<TValue> & OnChangeProps<TEvent> & OnValueChangeProps<TValue>;
-export declare type ValueAndOnChangeProps<TValue, TEvent extends ChangeEvent> = ValueProps<TValue> & OnChangeProps<TEvent>;
-export declare type ValueAndOnValueChangeProps<TValue> = ValueProps<TValue> & OnValueChangeProps<TValue>;
+export type FullOnChangeProps<TValue, TEvent extends ChangeEvent> = ValueProps<TValue> & OnChangeProps<TEvent> & OnValueChangeProps<TValue>;
+export type ValueAndOnChangeProps<TValue, TEvent extends ChangeEvent> = ValueProps<TValue> & OnChangeProps<TEvent>;
+export type ValueAndOnValueChangeProps<TValue> = ValueProps<TValue> & OnValueChangeProps<TValue>;
 interface ValueProps<TValue> {
     /** The value of the input. */
     value?: TValue;

package/dist/hooks/UseKeyboardNavigation.d.ts

@@ -1,6 +1,6 @@
 import { FocusEventHandler, KeyboardEventHandler, RefObject } from "react";
-export declare type MoveDirection = "right" | "left" | "down" | "up";
-export declare type TextInputElement = HTMLTextAreaElement | HTMLInputElement;
+export type MoveDirection = "right" | "left" | "down" | "up";
+export type TextInputElement = HTMLTextAreaElement | HTMLInputElement;
 export declare const useKeyboardNavigation: <TElement extends TextInputElement>(ref: RefObject<TElement>, onKeyDown: KeyboardEventHandler<TElement> | undefined, onEnter: (() => void) | undefined, onEsc: (() => void) | undefined, onMove: ((direction: MoveDirection) => void) | undefined, onDone: ((value: string) => void) | undefined, onBlur: FocusEventHandler<TElement> | undefined, onFocus: FocusEventHandler<TElement> | undefined) => {
     onKeyDownHandler: KeyboardEventHandler<TElement>;
     onBlurHandler: FocusEventHandler<TElement>;

package/dist/index.es.js

@@ -56,10 +56,10 @@ const Bt = "_knob_1d6s8_56", Tt = "_filler_1d6s8_61", kt = "_checked_1d6s8_75",
     value: r = !1,
     size: c = "standard",
     className: s,
-    ...l
+    ...i
   }, a) => {
-    const i = P(), f = (u) => {
-      i.current = u, i.current && (i.current.indeterminate = !!t), a && (typeof a == "function" ? a(u) : a.current = u);
+    const l = P(), f = (u) => {
+      l.current = u, l.current && (l.current.indeterminate = !!t), a && (typeof a == "function" ? a(u) : a.current = u);
     }, _ = g(
       (u) => {
         e && e(u), n && n(u.target.checked);
@@ -67,8 +67,8 @@ const Bt = "_knob_1d6s8_56", Tt = "_filler_1d6s8_61", kt = "_checked_1d6s8_75",
       [e, n]
     );
     return z(() => {
-      i.current && (i.current.indeterminate = !!t);
-    }, [t, i]), /* @__PURE__ */ o(
+      l.current && (l.current.indeterminate = !!t);
+    }, [t, l]), /* @__PURE__ */ o(
       "input",
       {
         type: "checkbox",
@@ -76,7 +76,7 @@ const Bt = "_knob_1d6s8_56", Tt = "_filler_1d6s8_61", kt = "_checked_1d6s8_75",
         checked: r,
         onChange: _,
         ref: f,
-        ...l
+        ...i
       }
     );
   }
@@ -104,10 +104,10 @@ const Bt = "_knob_1d6s8_56", Tt = "_filler_1d6s8_61", kt = "_checked_1d6s8_75",
     name: r,
     className: c,
     ...s
-  }, l) => {
+  }, i) => {
     const a = g(
-      (i) => {
-        t && t(i), e && e(i.target.value);
+      (l) => {
+        t && t(l), e && e(l.target.value);
       },
       [t, e]
     );
@@ -118,7 +118,7 @@ const Bt = "_knob_1d6s8_56", Tt = "_filler_1d6s8_61", kt = "_checked_1d6s8_75",
         name: r,
         className: h(L.radiobutton, L[n], c),
         onChange: a,
-        ref: l,
+        ref: i,
         ...s
       }
     );
@@ -131,25 +131,25 @@ const Bt = "_knob_1d6s8_56", Tt = "_filler_1d6s8_61", kt = "_checked_1d6s8_75",
   label: t,
   screenReaderLabel: e,
   variant: n = "normal",
-  icon: r,
-  className: c,
-  style: s,
-  radioButtonClassName: l,
-  ...a
+  className: r,
+  icon: c,
+  contentRight: s,
+  style: i,
+  radioButtonClassName: a,
+  ...l
 }) => /* @__PURE__ */ o(
   "label",
   {
-    className: h(K.radioButtonBox, K[n], c),
-    style: s,
-    children: /* @__PURE__ */ b(T, { justifyContent: "space-between", flexGrow: 1, children: [
-      /* @__PURE__ */ b(T, { alignItems: "center", children: [
-        /* @__PURE__ */ o(J, { ...a, className: l }),
-        /* @__PURE__ */ o(x, {}),
-        e ? /* @__PURE__ */ o(M, { children: e }) : null,
-        /* @__PURE__ */ o(N, { "aria-hidden": !!e, children: t })
-      ] }),
-      /* @__PURE__ */ o(T, { alignItems: "center", width: "48px", justifyContent: "center", children: r && /* @__PURE__ */ o(D, { icon: r, size: 24 }) })
-    ] })
+    className: h(K.radioButtonBox, K[n], r),
+    style: i,
+    children: /* @__PURE__ */ o(T, { justifyContent: "space-between", flexGrow: 1, children: /* @__PURE__ */ b(T, { alignItems: "center", children: [
+      /* @__PURE__ */ o(J, { ...l, className: a }),
+      /* @__PURE__ */ o(x, {}),
+      e ? /* @__PURE__ */ o(M, { children: e }) : null,
+      /* @__PURE__ */ o(N, { "aria-hidden": !!e, children: t }),
+      c && /* @__PURE__ */ o(T, { alignItems: "center", width: "48px", justifyContent: "center", children: /* @__PURE__ */ o(D, { icon: c, size: 24 }) }),
+      s && /* @__PURE__ */ o(T, { alignItems: "center", justifyContent: "center", children: s })
+    ] }) })
   }
 ), Ae = ({
   label: t,
@@ -161,23 +161,23 @@ const Bt = "_knob_1d6s8_56", Tt = "_filler_1d6s8_61", kt = "_checked_1d6s8_75",
   /* @__PURE__ */ o(J, { ref: e, ...c }),
   /* @__PURE__ */ o(x, {}),
   /* @__PURE__ */ o(N, { color: r, userSelect: "none", children: t })
-] }) }) }), Lt = (t, e, n, r, c, s, l, a) => {
-  const i = P(!1), f = (d) => {
-    i.current || s == null || s(d.target.value ?? ""), l == null || l(d);
+] }) }) }), Lt = (t, e, n, r, c, s, i, a) => {
+  const l = P(!1), f = (d) => {
+    l.current || s == null || s(d.target.value ?? ""), i == null || i(d);
   }, _ = (d) => {
-    i.current = !1, a == null || a(d);
+    l.current = !1, a == null || a(d);
   };
   return {
     onKeyDownHandler: g(
       (d) => {
         const { key: p } = d;
         if (p === "Enter")
-          i.current = !0, n == null || n(), s == null || s(d.currentTarget.value ?? "");
+          l.current = !0, n == null || n(), s == null || s(d.currentTarget.value ?? "");
         else if (p === "Escape")
-          i.current = !0, r == null || r(), d.preventDefault(), d.stopPropagation();
+          l.current = !0, r == null || r(), d.preventDefault(), d.stopPropagation();
         else if (c) {
           const m = (w, y) => {
-            i.current = !0, t.current.blur(), c(w), y.preventDefault(), y.stopPropagation();
+            l.current = !0, t.current.blur(), c(w), y.preventDefault(), y.stopPropagation();
           };
           d.shiftKey && p === "Tab" ? m("left", d) : p === "Tab" ? m("right", d) : p === "ArrowUp" ? m("up", d) : p === "ArrowDown" ? m("down", d) : p === "ArrowRight" ? t.current.value.length === t.current.selectionStart && m("right", d) : p === "ArrowLeft" && t.current.selectionStart === 0 && m("left", d);
         }
@@ -205,21 +205,21 @@ const Mt = (t, e, n) => {
   onChange: r,
   onValueChange: c,
   selectAllOnMount: s,
-  moveCursorToEndOnMount: l,
+  moveCursorToEndOnMount: i,
   onDone: a,
-  onMove: i,
+  onMove: l,
   onFocus: f,
   onBlur: _,
   onKeyDown: u,
   autoFocus: d
 }) => {
-  Mt(t, !!l, !!s);
+  Mt(t, !!i, !!s);
   const { onKeyDownHandler: p, onFocusHandler: m, onBlurHandler: w } = Lt(
     t,
     u,
     e,
     n,
-    i,
+    l,
     a,
     _,
     f
@@ -256,17 +256,17 @@ const Mt = (t, e, n) => {
   content: r,
   spaceOnLeft: c,
   spaceOnRight: s,
-  disableContentPadding: l,
+  disableContentPadding: i,
   disableContentPaddingLeft: a,
-  disableContentPaddingRight: i
+  disableContentPaddingRight: l
 }) => !r && !e && !t ? null : t ? /* @__PURE__ */ b(S, { children: [
   c ? /* @__PURE__ */ o(x, { num: 0.25 }) : null,
   t,
   s ? /* @__PURE__ */ o(x, { num: 0.25 }) : null
 ] }) : r ? /* @__PURE__ */ b(S, { children: [
-  c && !(l || a) ? /* @__PURE__ */ o(x, {}) : null,
+  c && !(i || a) ? /* @__PURE__ */ o(x, {}) : null,
   r || null,
-  s && !(l || i) ? /* @__PURE__ */ o(x, {}) : null
+  s && !(i || l) ? /* @__PURE__ */ o(x, {}) : null
 ] }) : /* @__PURE__ */ b(S, { children: [
   c ? /* @__PURE__ */ o(x, {}) : null,
   e && /* @__PURE__ */ o(
@@ -284,9 +284,9 @@ const Mt = (t, e, n) => {
     disabled: r,
     className: c,
     buttonLeft: s,
-    buttonRight: l,
+    buttonRight: i,
     contentLeft: a,
-    contentRight: i,
+    contentRight: l,
     disableContentPadding: f,
     disableContentPaddingLeft: _,
     disableContentPaddingRight: u,
@@ -321,7 +321,7 @@ const Mt = (t, e, n) => {
     onBlur: lt,
     onKeyDown: ot,
     autoFocus: y
-  }), ut = e === "success" ? E : e === "warning" || e === "error" ? G : p, _t = e === "loading" ? /* @__PURE__ */ o(X, {}) : i;
+  }), ut = e === "success" ? E : e === "warning" || e === "error" ? G : p, _t = e === "loading" ? /* @__PURE__ */ o(X, {}) : l;
   return /* @__PURE__ */ b(
     "div",
     {
@@ -371,7 +371,7 @@ const Mt = (t, e, n) => {
             disableContentPaddingRight: u,
             icon: ut,
             spaceOnRight: !0,
-            button: l
+            button: i
           }
         )
       ]
@@ -390,8 +390,8 @@ const Mt = (t, e, n) => {
     if (!e)
       t(String(A(n, r, c)));
     else {
-      const l = (H(e) || 0) + n;
-      t(String(A(l, r, c)));
+      const i = (H(e) || 0) + n;
+      t(String(A(i, r, c)));
     }
 }, ne = ({
   onValueChange: t,
@@ -416,9 +416,9 @@ const Mt = (t, e, n) => {
   min: r,
   step: c = 1,
   contentRight: s,
-  disabled: l,
+  disabled: i,
   className: a,
-  hideButtons: i,
+  hideButtons: l,
   ...f
 }) => {
   const _ = g(
@@ -435,7 +435,7 @@ const Mt = (t, e, n) => {
   return /* @__PURE__ */ o(
     Q,
     {
-      contentRight: i ? s : /* @__PURE__ */ b(S, { children: [
+      contentRight: l ? s : /* @__PURE__ */ b(S, { children: [
         s && /* @__PURE__ */ b(S, { children: [
           s,
           /* @__PURE__ */ o(x, {})
@@ -443,22 +443,22 @@ const Mt = (t, e, n) => {
         /* @__PURE__ */ o(
           xt,
           {
-            onClickUp: l ? void 0 : () => _(c),
-            onClickDown: l ? void 0 : () => _(-c),
+            onClickUp: i ? void 0 : () => _(c),
+            onClickDown: i ? void 0 : () => _(-c),
             iconColor: "var(--swui-textinput-text-color)",
-            disabled: l
+            disabled: i
           }
         )
       ] }),
       value: t,
       onValueChange: u,
-      disableContentPaddingRight: !i,
+      disableContentPaddingRight: !l,
       type: "number",
       min: r,
       max: n,
       step: c,
       className: h(ee.numericTextInputInput, a),
-      disabled: l,
+      disabled: i,
       ...f
     }
   );
@@ -544,9 +544,9 @@ const Mt = (t, e, n) => {
   label: r,
   screenReaderLabel: c,
   borderVariant: s = "normalBorder",
-  variant: l = "normal",
+  variant: i = "normal",
   children: a,
-  ...i
+  ...l
 }) => {
   const f = O(), _ = n ?? f, u = g(
     (d) => {
@@ -559,7 +559,7 @@ const Mt = (t, e, n) => {
     {
       className: h(
         B.labelledSelect,
-        B[l],
+        B[i],
         B[s]
       ),
       children: [
@@ -577,8 +577,8 @@ const Mt = (t, e, n) => {
           {
             id: _,
             onChange: u,
-            className: h(B.select, B[l]),
-            ...i,
+            className: h(B.select, B[i]),
+            ...l,
             children: a
           }
         ),
@@ -609,18 +609,18 @@ const Mt = (t, e, n) => {
     screenReaderLabel: r,
     size: c = "medium",
     value: s,
-    onChange: l,
+    onChange: i,
     disabled: a,
-    onValueChange: i,
+    onValueChange: l,
     borderRadiusVariant: f = "normalBorder",
     variant: _ = "normal",
     ...u
   }, d) => {
     const p = O(), m = n ?? p, w = g(
       (y) => {
-        l == null || l(y), i == null || i(y.target.value);
+        i == null || i(y), l == null || l(y.target.value);
       },
-      [l, i]
+      [i, l]
     );
     return /* @__PURE__ */ b(
       "div",
@@ -665,9 +665,9 @@ const Mt = (t, e, n) => {
   wrapperStyle: r,
   contentLeft: c,
   contentRight: s,
-  disableContentPadding: l,
+  disableContentPadding: i,
   disableContentPaddingLeft: a,
-  disableContentPaddingRight: i,
+  disableContentPaddingRight: l,
   iconRight: f,
   iconLeft: _,
   onClickLeft: u,
@@ -693,9 +693,9 @@ const Mt = (t, e, n) => {
           j,
           {
             content: c,
-            disableContentPadding: l,
+            disableContentPadding: i,
             disableContentPaddingLeft: a,
-            disableContentPaddingRight: i,
+            disableContentPaddingRight: l,
             spaceOnLeft: !0,
             button: _ ? /* @__PURE__ */ o($, { onClick: u, icon: _ }) : void 0
           }
@@ -705,9 +705,9 @@ const Mt = (t, e, n) => {
           j,
           {
             content: w,
-            disableContentPadding: l,
+            disableContentPadding: i,
             disableContentPaddingLeft: a,
-            disableContentPaddingRight: i,
+            disableContentPaddingRight: l,
             spaceOnRight: !0,
             button: m ? /* @__PURE__ */ o($, { onClick: d, icon: m }) : void 0
           }
@@ -725,9 +725,9 @@ const Mt = (t, e, n) => {
     onChange: r,
     resize: c = "none",
     readOnly: s = !1,
-    rows: l,
+    rows: i,
     disabled: a,
-    ...i
+    ...l
   }, f) => {
     const _ = g(
       (u) => {
@@ -739,14 +739,14 @@ const Mt = (t, e, n) => {
       "textarea",
       {
         disabled: a,
-        rows: l,
+        rows: i,
         readOnly: s,
         className: h(ge.textArea, t),
         style: { resize: c },
         onChange: _,
         value: e,
         ref: f,
-        ...i
+        ...l
       }
     );
   }