@arthurzakharov/ui-kit 1.3.8 → 1.4.0

package/dist/controls/control-input/index.d.ts

@@ -0,0 +1,2 @@
+export { ControlInput } from './control-input.component';
+export type { ControlInputProps } from './control-input.component';

package/dist/controls/control-input/index.js

@@ -0,0 +1,4 @@
+import { ControlInput as t } from "./control-input.component.js";
+export {
+  t as ControlInput
+};

package/dist/controls/control-label/control-label.component.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { State } from '../utils/types';
+import { Base } from '../../utils/types';
+interface ControlLabelProps extends Base {
+    state?: State;
+    position?: 'idle' | 'active';
+}
+/**
+ * `ControlLabel` renders field label text with active/idle positioning and validation color states.
+ * Use it to keep label behavior and appearance consistent across inputs.
+ */
+export declare const ControlLabel: ({ children, position, state, ...base }: PropsWithChildren<ControlLabelProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/controls/control-label/control-label.component.js

@@ -0,0 +1,30 @@
+import { jsx as t } from "react/jsx-runtime";
+import a from "clsx";
+import { baseProps as r } from "../../utils/functions/functions.util.js";
+import '../../assets/control-label-C8pjaWEU.css';const _ = "_ControlLabel_l2cwl_1", n = "_Idle_l2cwl_7", d = "_Active_l2cwl_12", i = "_Success_l2cwl_21", l = {
+  ControlLabel: _,
+  Idle: n,
+  Active: d,
+  Error: "_Error_l2cwl_17",
+  Success: i
+}, u = ({
+  children: s,
+  position: c = "idle",
+  state: e = "idle",
+  ...o
+}) => /* @__PURE__ */ t(
+  "span",
+  {
+    "data-testid": r(o, "data-testid", "control-label"),
+    className: a(l.ControlLabel, r(o, "className"), {
+      [l.Idle]: c === "idle",
+      [l.Active]: c === "active",
+      [l.Error]: e === "error",
+      [l.Success]: e === "success"
+    }),
+    children: s
+  }
+);
+export {
+  u as ControlLabel
+};

package/dist/controls/control-label/index.d.ts

@@ -0,0 +1 @@
+export { ControlLabel } from './control-label.component';

package/dist/controls/control-label/index.js

@@ -0,0 +1,4 @@
+import { ControlLabel as e } from "./control-label.component.js";
+export {
+  e as ControlLabel
+};

package/dist/controls/control-radio/control-radio.component.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { Interactive, RadioChoice, State } from '../utils/types';
+import { ControlChoiceProps } from '../control-choice';
+import { ControlRadioTextProps } from '../control-radio-text';
+import { Base } from '../../utils/types';
+export interface ControlRadioProps extends Base, Interactive<string> {
+    orientation?: 'horizontal' | 'vertical';
+    choices: RadioChoice[];
+    state?: State;
+    size?: ControlChoiceProps['size'];
+    textSize?: ControlRadioTextProps['size'];
+    message?: ReactNode;
+}
+export declare const ControlRadio: ({ id, value, choices, onChange, orientation, state, size, textSize, message, disabled, onBlur, onFocus, className, }: ControlRadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/control-radio/control-radio.component.js

@@ -0,0 +1,79 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import _ from "clsx";
+import { ControlChoice as H } from "../control-choice/control-choice.component.js";
+import { ControlHiddenInput as L } from "../control-hidden-input/control-hidden-input.component.js";
+import { ControlRadioLabel as M } from "../control-radio-label/control-radio-label.component.js";
+import { ControlRadioText as V } from "../control-radio-text/control-radio-text.component.js";
+import { getChoiceId as y } from "../utils/functions/functions.util.js";
+import { AnimationFadeSlide as I } from "../../animations/animation-fade-slide/animation-fade-slide.component.js";
+import { ControlErrorMessage as N } from "../control-error-message/control-error-message.component.js";
+import '../../assets/control-radio-Bo1rvcg2.css';const j = "_ControlRadio_14a61_1", F = "_Content_14a61_6", A = "_Horizontal_14a61_10", B = "_Vertical_14a61_15", S = "_Label_14a61_20", T = "_ErrorMessage_14a61_33", r = {
+  ControlRadio: j,
+  Content: F,
+  Horizontal: A,
+  Vertical: B,
+  Label: S,
+  ErrorMessage: T
+}, Q = ({
+  id: t,
+  value: C,
+  choices: p,
+  onChange: f,
+  orientation: l = "horizontal",
+  state: i = "idle",
+  size: h = "md",
+  textSize: u = "body",
+  message: s = "",
+  disabled: m = !1,
+  onBlur: v = () => {
+  },
+  onFocus: g = () => {
+  },
+  className: d = ""
+}) => /* @__PURE__ */ c("div", { className: _(r.ControlRadio, d), children: [
+  /* @__PURE__ */ o(
+    "div",
+    {
+      className: _(r.Content, d, {
+        [r.Horizontal]: l === "horizontal",
+        [r.Vertical]: l === "vertical"
+      }),
+      children: p.map((a, z, R) => {
+        const n = y(t, a.value, z);
+        return /* @__PURE__ */ o(M, { id: n, value: C, state: i, choice: a, choices: R, children: ({ focused: b, hovered: x, checked: e, state: E }) => /* @__PURE__ */ c("div", { className: r.Label, children: [
+          /* @__PURE__ */ o(
+            H,
+            {
+              type: "radio",
+              size: h,
+              state: E,
+              checked: e,
+              focused: b,
+              hovered: x,
+              disabled: m
+            }
+          ),
+          /* @__PURE__ */ o(
+            L,
+            {
+              type: "radio",
+              id: n,
+              value: a.value,
+              name: t,
+              checked: e,
+              disabled: m,
+              onChange: () => f(a.value, t),
+              onFocus: () => g(t),
+              onBlur: () => v(t)
+            }
+          ),
+          /* @__PURE__ */ o(V, { size: u, checked: e, children: a.label })
+        ] }) }, n);
+      })
+    }
+  ),
+  /* @__PURE__ */ o(I, { name: "message", condition: i === "error" && !!s, children: /* @__PURE__ */ o(N, { className: r.ErrorMessage, children: s }) })
+] });
+export {
+  Q as ControlRadio
+};

package/dist/controls/control-radio/index.d.ts

@@ -0,0 +1,2 @@
+export { ControlRadio } from './control-radio.component';
+export type { ControlRadioProps } from './control-radio.component';

package/dist/controls/control-radio/index.js

@@ -0,0 +1,4 @@
+import { ControlRadio as t } from "./control-radio.component.js";
+export {
+  t as ControlRadio
+};

package/dist/controls/control-radio-label/control-radio-label.component.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { ChoiceValue, RadioChoice, State } from '../utils/types';
+import { Base } from '../../utils/types';
+interface ControlRadioLabelProps<T extends ChoiceValue> extends Base {
+    id: string;
+    value: T;
+    choice: RadioChoice;
+    choices?: RadioChoice[];
+    state?: State;
+    children: (props: {
+        focused: boolean;
+        hovered: boolean;
+        checked: boolean;
+        state?: State;
+    }) => ReactNode;
+}
+/**
+ * `ControlRadioLabel` provides a stateful wrapper for individual radio choices using the render props pattern.
+ * It manages hover, focus, and checked states, passing them to child components. Use it to build custom radio UI implementations with consistent interaction behavior.
+ */
+export declare const ControlRadioLabel: <T extends ChoiceValue>(props: ControlRadioLabelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/controls/control-radio-label/control-radio-label.component.js

@@ -0,0 +1,39 @@
+import { jsx as h } from "react/jsx-runtime";
+import { useToggle as s } from "usehooks-ts";
+import v from "clsx";
+import { baseProps as a } from "../../utils/functions/functions.util.js";
+import '../../assets/control-radio-label-CgZ-FNj0.css';const g = "_ControlRadioLabel_14ean_1", p = {
+  ControlRadioLabel: g
+}, F = (c) => {
+  const { children: n, id: i, value: e, choice: o, choices: d = [], state: u = "idle", ...r } = c, [m, t] = s(!1), [b, l] = s(!1);
+  return /* @__PURE__ */ h(
+    "label",
+    {
+      "data-testid": a(r, "data-testid", "control-radio-label"),
+      htmlFor: i,
+      className: v(p.ControlRadioLabel, a(r, "className")),
+      onFocus: () => t(),
+      onBlur: () => t(),
+      onMouseEnter: () => l(),
+      onMouseLeave: () => l(),
+      children: n({
+        focused: m,
+        hovered: b,
+        checked: typeof e == "string" ? e === o.value : e.includes(o.value),
+        state: (() => {
+          switch (u) {
+            case "success":
+              return "idle";
+            case "error":
+              return d.some((f) => f.value === e) ? e === o.value ? "error" : "idle" : "error";
+            case "idle":
+              return "idle";
+          }
+        })()
+      })
+    }
+  );
+};
+export {
+  F as ControlRadioLabel
+};

package/dist/controls/control-radio-label/index.d.ts

@@ -0,0 +1 @@
+export { ControlRadioLabel } from './control-radio-label.component';

package/dist/controls/control-radio-label/index.js

@@ -0,0 +1,4 @@
+import { ControlRadioLabel as a } from "./control-radio-label.component.js";
+export {
+  a as ControlRadioLabel
+};

package/dist/controls/control-radio-text/control-radio-text.component.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { Base } from '../../utils/types';
+import { ControlRadioTextColor, ControlRadioTextSize } from '../utils';
+export interface ControlRadioTextProps extends Base {
+    size?: ControlRadioTextSize;
+    color?: ControlRadioTextColor;
+    checked?: boolean;
+    oneLine?: boolean;
+}
+export declare const ControlRadioText: ({ children, size, color, checked, oneLine, className, }: PropsWithChildren<ControlRadioTextProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/control-radio-text/control-radio-text.component.js

@@ -0,0 +1,45 @@
+import { jsx as n } from "react/jsx-runtime";
+import y from "clsx";
+import { Content as _ } from "../../utils/content/content.component.js";
+import '../../assets/control-radio-text-S7MEO4a2.css';const l = "_ControlRadioText_wkqvo_1", m = "_TextPrimary_wkqvo_8", s = "_Content_wkqvo_8", x = "_TextSecondary_wkqvo_12", i = "_AccentPrimary_wkqvo_16", k = "_AccentSecondary_wkqvo_20", B = "_BodyExtraSmall_wkqvo_24", S = "_BodySmall_wkqvo_29", C = "_Body_wkqvo_24", v = "_BodyLarge_wkqvo_39", T = "_OneLine_wkqvo_44", q = "_Checked_wkqvo_49", o = {
+  ControlRadioText: l,
+  TextPrimary: m,
+  Content: s,
+  TextSecondary: x,
+  AccentPrimary: i,
+  AccentSecondary: k,
+  BodyExtraSmall: B,
+  BodySmall: S,
+  Body: C,
+  BodyLarge: v,
+  OneLine: T,
+  Checked: q
+}, L = ({
+  children: a,
+  size: t = "body",
+  color: e = "text-primary",
+  checked: r = !1,
+  oneLine: c = !1,
+  className: d = ""
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    "data-testid": "control-radio-text",
+    className: y(o.ControlRadioText, d, {
+      [o.TextPrimary]: e === "text-primary",
+      [o.TextSecondary]: e === "text-secondary",
+      [o.AccentPrimary]: e === "accent-primary",
+      [o.AccentSecondary]: e === "accent-secondary",
+      [o.BodyExtraSmall]: t === "body-extra-small",
+      [o.BodySmall]: t === "body-small",
+      [o.Body]: t === "body",
+      [o.BodyLarge]: t === "body-large",
+      [o.OneLine]: c,
+      [o.Checked]: r
+    }),
+    children: /* @__PURE__ */ n(_, { tag: "span", className: o.Content, children: a })
+  }
+);
+export {
+  L as ControlRadioText
+};

package/dist/controls/control-radio-text/index.d.ts

@@ -0,0 +1,2 @@
+export { ControlRadioText } from './control-radio-text.component';
+export type { ControlRadioTextProps } from './control-radio-text.component';

package/dist/controls/control-radio-text/index.js

@@ -0,0 +1,4 @@
+import { ControlRadioText as t } from "./control-radio-text.component.js";
+export {
+  t as ControlRadioText
+};

package/dist/controls/control-status/control-status.component.d.ts

@@ -0,0 +1,11 @@
+import { State } from '../utils/types';
+import { Base } from '../../utils/types';
+interface ControlStatusProps extends Base {
+    state: State;
+}
+/**
+ * `ControlStatus` renders a compact visual marker that communicates validation result near a field.
+ * Use it to show neutral (`idle`), success (`success`), or error (`error`) state consistently across form controls.
+ */
+export declare const ControlStatus: ({ state, ...base }: ControlStatusProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/controls/control-status/control-status.component.js

@@ -0,0 +1,42 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { Circle as a, X as m, Check as l } from "lucide-react";
+import t from "clsx";
+import { AnimationFadeScale as r } from "../../animations/animation-fade-scale/animation-fade-scale.component.js";
+import { baseProps as i } from "../../utils/functions/functions.util.js";
+import '../../assets/control-status-DPNvkGlM.css';const _ = "_ControlStatus_hj1em_1", C = "_Circle_hj1em_6", h = "_Idle_hj1em_14", d = "_Success_hj1em_20", I = "_IconContent_hj1em_32", u = "_IconAnimate_hj1em_40", j = "_Check_hj1em_48", S = "_X_hj1em_49", c = {
+  ControlStatus: _,
+  Circle: C,
+  Idle: h,
+  Success: d,
+  Error: "_Error_hj1em_26",
+  IconContent: I,
+  IconAnimate: u,
+  Check: j,
+  X: S
+}, f = ({ state: e = "idle", ...s }) => /* @__PURE__ */ n(
+  "div",
+  {
+    "data-testid": i(s, "data-testid", "control-status"),
+    className: t(c.ControlStatus, i(s, "className")),
+    children: [
+      /* @__PURE__ */ o(
+        a,
+        {
+          size: 24,
+          className: t(c.Circle, {
+            [c.Idle]: e === "idle",
+            [c.Success]: e === "success",
+            [c.Error]: e === "error"
+          })
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: c.IconContent, children: [
+        /* @__PURE__ */ o(r, { name: "icon-x", condition: e === "error", className: c.IconAnimate, children: /* @__PURE__ */ o(m, { size: 14, className: c.X }) }),
+        /* @__PURE__ */ o(r, { name: "icon-check", condition: e === "success", className: c.IconAnimate, children: /* @__PURE__ */ o(l, { size: 14, className: c.Check }) })
+      ] })
+    ]
+  }
+);
+export {
+  f as ControlStatus
+};

package/dist/controls/control-status/index.d.ts

@@ -0,0 +1 @@
+export { ControlStatus } from './control-status.component';

package/dist/controls/control-status/index.js

@@ -0,0 +1,4 @@
+import { ControlStatus as r } from "./control-status.component.js";
+export {
+  r as ControlStatus
+};

package/dist/controls/control-text/control-text.component.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { State } from '../utils/types';
+import { ControlInputProps } from '../control-input';
+import { Base } from '../../utils/types';
+export interface ControlTextProps extends Base, ControlInputProps {
+    label: string;
+    message?: ReactNode;
+    placeholder?: string;
+    state?: State;
+}
+export declare const ControlText: (props: ControlTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/control-text/control-text.component.js

@@ -0,0 +1,70 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import x from "clsx";
+import { useBoolean as h, useToggle as y } from "usehooks-ts";
+import { AnimationFadeScale as $ } from "../../animations/animation-fade-scale/animation-fade-scale.component.js";
+import { ControlBox as q } from "../control-box/control-box.component.js";
+import { ControlInput as z } from "../control-input/control-input.component.js";
+import { ControlLabel as D } from "../control-label/control-label.component.js";
+import { ControlErrorMessage as G } from "../control-error-message/control-error-message.component.js";
+import { AnimationFadeSlide as H } from "../../animations/animation-fade-slide/animation-fade-slide.component.js";
+import '../../assets/control-text-n-qi7e2Y.css';const J = "_ControlText_11mtx_1", K = "_Content_11mtx_14", O = "_Label_11mtx_26", Q = "_LabelIdle_11mtx_32", R = "_LabelActive_11mtx_37", U = "_Placeholder_11mtx_42", V = "_PlaceholderText_11mtx_49", W = "_ErrorMessage_11mtx_57", t = {
+  ControlText: J,
+  Content: K,
+  Label: O,
+  LabelIdle: Q,
+  LabelActive: R,
+  Placeholder: U,
+  PlaceholderText: V,
+  ErrorMessage: W
+}, ne = (_) => {
+  const {
+    label: f,
+    message: n = "",
+    placeholder: s = "",
+    dateMask: p = !1,
+    maxLength: b,
+    state: a = "idle",
+    type: C = "text",
+    id: c,
+    value: o,
+    disabled: L = !1,
+    onChange: g,
+    onFocus: A,
+    onBlur: v,
+    className: T
+  } = _, { value: l, setTrue: i, setFalse: m } = h(!0), { value: I, setTrue: F, setFalse: P } = h(!0), [M, d] = y(), N = !l || !!o, E = !!s && !l && !o && !I, k = !!n && a === "error", B = () => {
+    F(), m();
+  }, S = () => {
+    o || (P(), i());
+  }, j = (r) => {
+    o || m(), d(), A?.call(null, r);
+  }, w = (r) => {
+    o || i(), d(), v?.call(null, r);
+  };
+  return /* @__PURE__ */ u("div", { className: x(t.ControlText, T), children: [
+    /* @__PURE__ */ e(q, { state: a, focused: M, children: /* @__PURE__ */ u("label", { htmlFor: c, className: t.Content, children: [
+      /* @__PURE__ */ e("div", { className: x(t.Label, N ? t.LabelActive : t.LabelIdle), children: /* @__PURE__ */ e(D, { position: l ? "idle" : "active", state: l ? "idle" : a, children: f }) }),
+      /* @__PURE__ */ e($, { name: "text-placeholder", condition: E, className: t.Placeholder, children: /* @__PURE__ */ e("span", { className: t.PlaceholderText, children: s }) }),
+      /* @__PURE__ */ e(
+        z,
+        {
+          dateMask: p,
+          maxLength: b,
+          disabled: L,
+          type: C,
+          id: c,
+          value: o,
+          onChange: g,
+          onAutofill: B,
+          onAutofillCancel: S,
+          onFocus: j,
+          onBlur: w
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e(H, { name: "text-message", condition: k, children: /* @__PURE__ */ e(G, { className: t.ErrorMessage, children: n }) })
+  ] });
+};
+export {
+  ne as ControlText
+};

package/dist/controls/control-text/index.d.ts

@@ -0,0 +1,2 @@
+export { ControlText } from './control-text.component';
+export type { ControlTextProps } from './control-text.component';

package/dist/controls/control-text/index.js

@@ -0,0 +1,4 @@
+import { ControlText as t } from "./control-text.component.js";
+export {
+  t as ControlText
+};

package/dist/controls/control-textarea/control-textarea.component.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { Interactive, State } from '../utils/types';
+import { Base } from '../../utils/types';
+interface ControlTextareaProps extends Interactive<string>, Base {
+    state?: State;
+    placeholder?: string;
+    rows?: number;
+    message?: ReactNode;
+}
+/**
+ * `ControlTextarea` renders a multi-line text input field with validation visual feedback. It handles focus states,
+ * value changes, and displays error messages. Use it for longer text inputs like comments or descriptions.
+ */
+export declare const ControlTextarea: ({ id, value, onChange, state, placeholder, rows, message, disabled, onFocus, onBlur, ...base }: ControlTextareaProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/controls/control-textarea/control-textarea.component.js

@@ -0,0 +1,63 @@
+import { jsxs as F, jsx as r } from "react/jsx-runtime";
+import M from "clsx";
+import { useBoolean as T, useToggle as B } from "usehooks-ts";
+import { AnimationFadeSlide as k } from "../../animations/animation-fade-slide/animation-fade-slide.component.js";
+import { ControlBox as A } from "../control-box/control-box.component.js";
+import { ControlErrorMessage as j } from "../control-error-message/control-error-message.component.js";
+import { baseProps as n } from "../../utils/functions/functions.util.js";
+import '../../assets/control-textarea-B6gWlJs3.css';const S = "_Input_rcp54_6", v = "_ErrorMessage_rcp54_52", o = {
+  Input: S,
+  "autofill-start": "_autofill-start_rcp54_1",
+  "autofill-cancel": "_autofill-cancel_rcp54_1",
+  ErrorMessage: v
+}, G = ({
+  id: e,
+  value: a,
+  onChange: u,
+  state: l = "idle",
+  placeholder: f = "",
+  rows: p = 5,
+  message: i = "",
+  disabled: x = !1,
+  onFocus: _,
+  onBlur: g,
+  ...s
+}) => {
+  const { value: N, setTrue: c, setFalse: m } = T(!0), [I, d] = B(!1), h = (t) => {
+    t.animationName === o["autofill-start"] && m(), t.animationName === o["autofill-cancel"] && !a && c();
+  }, C = (t) => {
+    a || m(), d(), _?.(t);
+  }, E = (t) => {
+    a || c(), d(), g?.(t);
+  };
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      "data-testid": n(s, "data-testid", "control-textarea"),
+      className: M(o.Container, n(s, "className")),
+      children: [
+        /* @__PURE__ */ r(A, { state: l, focused: I, className: n(s, "className"), children: /* @__PURE__ */ r(
+          "textarea",
+          {
+            "data-testid": "control-textarea-input",
+            "data-is-idle": N,
+            disabled: x,
+            id: e,
+            rows: p,
+            placeholder: f,
+            value: a,
+            className: o.Input,
+            onChange: (t) => u(t.target.value, e, "keyboard"),
+            onAnimationStart: h,
+            onFocus: () => C(e),
+            onBlur: () => E(e)
+          }
+        ) }),
+        /* @__PURE__ */ r(k, { name: "text-message", condition: l === "error" && !!i, children: /* @__PURE__ */ r(j, { "data-testid": "control-textarea-error", className: o.ErrorMessage, children: i }) })
+      ]
+    }
+  );
+};
+export {
+  G as ControlTextarea
+};

package/dist/controls/control-textarea/index.d.ts

@@ -0,0 +1 @@
+export { ControlTextarea } from './control-textarea.component';

package/dist/controls/control-textarea/index.js

@@ -0,0 +1,4 @@
+import { ControlTextarea as e } from "./control-textarea.component.js";
+export {
+  e as ControlTextarea
+};

package/dist/controls/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-choice';

package/dist/controls/hooks/index.js

@@ -0,0 +1,4 @@
+import { useChoice as r } from "./use-choice/use-choice.hook.js";
+export {
+  r as useChoice
+};

package/dist/controls/hooks/use-choice/index.d.ts

@@ -0,0 +1 @@
+export * from './use-choice.hook';

package/dist/controls/hooks/use-choice/index.js

@@ -0,0 +1,4 @@
+import { useChoice as r } from "./use-choice.hook.js";
+export {
+  r as useChoice
+};

package/dist/{components/control/hooks/useChoice/useChoice.hook.d.ts → controls/hooks/use-choice/use-choice.hook.d.ts}

@@ -1,5 +1,5 @@
-import { ChoiceType, ChoiceValue, InputChangeSource, Interactive } from '../../control.types';
+import { ControlChoiceType, ChoiceValue, InputChangeSource, Interactive } from '../../utils/types';
 export declare const useChoice: (value: ChoiceValue, id: string, cb: Interactive<ChoiceValue>["onChange"]) => {
-    type: ChoiceType;
+    type: ControlChoiceType;
     onChoiceChange: (newValue: string, source?: InputChangeSource) => void;
 };

package/dist/controls/utils/functions/index.d.ts

@@ -0,0 +1 @@
+export * from './functions.util';

package/dist/controls/utils/functions/index.js

@@ -0,0 +1,7 @@
+import { clickHasNode as n, containsHtml as o, findEndIndex as c, getChoiceId as i } from "./functions.util.js";
+export {
+  n as clickHasNode,
+  o as containsHtml,
+  c as findEndIndex,
+  i as getChoiceId
+};

package/dist/controls/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './functions';
+export * from './types';

package/dist/controls/utils/index.js

@@ -0,0 +1,7 @@
+import { clickHasNode as n, containsHtml as o, findEndIndex as c, getChoiceId as i } from "./functions/functions.util.js";
+export {
+  n as clickHasNode,
+  o as containsHtml,
+  c as findEndIndex,
+  i as getChoiceId
+};

package/dist/{components/control/control.types.d.ts → controls/utils/types.d.ts}

@@ -1,20 +1,28 @@
+import { FontSize, FontColor } from '../../utils/types';
 export type InputChangeSource = 'mouse' | 'keyboard';
-export interface Interactive<V> {
+export type Interactive<V> = {
     id: string;
     value: V;
     disabled?: boolean;
     onChange: (value: V, id: string, source?: InputChangeSource) => void;
     onFocus?: (id: string) => void;
     onBlur?: (id: string) => void;
-}
+};
 export type RadioChoice = {
     label: string;
     value: string;
     icon?: string;
 };
-export type ChoiceType = 'radio' | 'checkbox';
+export type ControlChoiceType = 'radio' | 'checkbox';
 export type ChoiceValue = string | string[];
 export type State = 'idle' | 'error' | 'success';
+export type ControlLabelPosition = 'idle' | 'active';
+export type ControlRadioTextSize = Extract<FontSize, 'body-extra-small' | 'body-small' | 'body' | 'body-large'>;
+export type ControlRadioTextColor = Extract<FontColor, 'text-primary' | 'text-secondary' | 'accent-primary' | 'accent-secondary'>;
+export type ControlButtonColor = 'primary' | 'secondary' | 'tertiary';
+export type ControlButtonTypeColor = Extract<FontColor, 'text-primary' | 'text-secondary' | 'accent-primary' | 'accent-secondary' | 'theme-primary' | 'theme-secondary'>;
+export type ControlButtonSize = 'sm' | 'md' | 'lg';
+export type ControlButtonType = 'submit' | 'reset' | 'button';
 export type QuestionPath = string[];
 export type QuestionChoice = {
     value: string;