@ttoss/fsl-ui 0.2.4

package/dist/components/ProgressBar/ProgressBar.cjs

@@ -0,0 +1,132 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_keyframes = require('../../tokens/keyframes.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/components/ProgressBar/ProgressBar.tsx
+/** Formal semantic identity — ProgressBar root (Feedback entity). */
+var progressBarMeta = {
+  displayName: "ProgressBar",
+  entity: "Feedback",
+  structure: "root"
+};
+var INDETERMINATE_FILL_WIDTH = "40%";
+var INDETERMINATE_CYCLE_DURATION = "1.2s";
+/** Track (body) style — the empty rail the fill animates across. */
+var buildTrackStyle = c => {
+  return {
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    height: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm,
+    backgroundColor: c?.background?.default,
+    borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+    borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.surface.width,
+    borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.surface.style,
+    borderColor: c?.border?.default
+  };
+};
+/** Fill (content) style — width tracks percentage; indeterminate animates. */
+var buildFillStyle = ({
+  c,
+  percentage,
+  isIndeterminate
+}) => {
+  return {
+    height: "100%",
+    width: isIndeterminate ? INDETERMINATE_FILL_WIDTH : `${percentage ?? 0}%`,
+    backgroundColor: c?.border?.default,
+    borderRadius: "inherit",
+    transitionProperty: "width",
+    transitionDuration: _ttoss_fsl_theme_vars.vars.motion.transition.enter.duration,
+    transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.transition.enter.easing,
+    animation: isIndeterminate ? `${require_keyframes.ANIMATION_NAMES.progressBarIndeterminate} ${INDETERMINATE_CYCLE_DURATION} linear infinite` : void 0
+  };
+};
+/**
+* A semantic progress bar built on React Aria's `ProgressBar`.
+*
+* Reads from `vars.colors.feedback.{primary|positive|caution|negative}` and
+* uses `vars.radii.control` for the track. Supports both determinate
+* (0–100%) and indeterminate modes — pass `isIndeterminate`.
+*
+* @example
+* ```tsx
+* <ProgressBar label="Uploading" value={42} />
+* <ProgressBar label="Saving" isIndeterminate evaluation="positive" />
+* ```
+*/
+var ProgressBar = ({
+  evaluation = "primary",
+  label,
+  showValueLabel = true,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.feedback[evaluation];
+  react.useInsertionEffect(() => {
+    require_keyframes.ensureKeyframes();
+  }, []);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.ProgressBar, {
+    ...props,
+    "data-scope": "progress-bar",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs
+    },
+    children: ({
+      percentage,
+      valueText,
+      isIndeterminate
+    }) => {
+      return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+        children: [(label || showValueLabel) && /* @__PURE__ */(0, react_jsx_runtime.jsxs)("div", {
+          "data-scope": "progress-bar",
+          "data-part": "labelRow",
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "baseline",
+            color: c?.text?.default,
+            ..._ttoss_fsl_theme_vars.vars.text.label.md
+          },
+          children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+            "data-scope": "progress-bar",
+            "data-part": "title",
+            children: label
+          }), showValueLabel && !isIndeterminate && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+            "data-scope": "progress-bar",
+            "data-part": "status",
+            "aria-hidden": true,
+            children: valueText ?? `${Math.round(percentage ?? 0)}%`
+          })]
+        }), /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+          "data-scope": "progress-bar",
+          "data-part": "body",
+          style: buildTrackStyle(c),
+          children: /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+            "data-scope": "progress-bar",
+            "data-part": "content",
+            style: buildFillStyle({
+              c,
+              percentage,
+              isIndeterminate
+            })
+          })
+        })]
+      });
+    }
+  });
+};
+ProgressBar.displayName = progressBarMeta.displayName;
+
+//#endregion
+exports.ProgressBar = ProgressBar;
+exports.progressBarMeta = progressBarMeta;

package/dist/components/ProgressBar/ProgressBar.d.cts

@@ -0,0 +1,56 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import * as React from "react";
+import { ProgressBarProps } from "react-aria-components";
+
+//#region src/components/ProgressBar/ProgressBar.d.ts
+/** Formal semantic identity — ProgressBar root (Feedback entity). */
+declare const progressBarMeta: {
+  readonly displayName: "ProgressBar";
+  readonly entity: "Feedback";
+  readonly structure: "root";
+};
+/**
+ * Props for the ProgressBar component.
+ */
+interface ProgressBarProps$1 extends Omit<ProgressBarProps, 'style' | 'className' | 'children'> {
+  /**
+   * Authorial emphasis. Choose the evaluation that matches the *meaning* of
+   * the progress: `positive` for completing a desirable task, `caution` for
+   * an approaching limit, `negative` for a failing operation. `primary` is
+   * the default neutral chrome.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<'Feedback'>;
+  /** Visible label shown above the bar. */
+  label?: React.ReactNode;
+  /**
+   * Whether to render the `valueText`/percentage alongside the label.
+   * @default true
+   */
+  showValueLabel?: boolean;
+}
+/**
+ * A semantic progress bar built on React Aria's `ProgressBar`.
+ *
+ * Reads from `vars.colors.feedback.{primary|positive|caution|negative}` and
+ * uses `vars.radii.control` for the track. Supports both determinate
+ * (0–100%) and indeterminate modes — pass `isIndeterminate`.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar label="Uploading" value={42} />
+ * <ProgressBar label="Saving" isIndeterminate evaluation="positive" />
+ * ```
+ */
+declare const ProgressBar: {
+  ({
+    evaluation,
+    label,
+    showValueLabel,
+    ...props
+  }: ProgressBarProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ProgressBar";
+};
+//#endregion
+export { ProgressBar, ProgressBarProps$1 as ProgressBarProps, progressBarMeta };

package/dist/components/ProgressBar/ProgressBar.d.mts

@@ -0,0 +1,56 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { ProgressBarProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/ProgressBar/ProgressBar.d.ts
+/** Formal semantic identity — ProgressBar root (Feedback entity). */
+declare const progressBarMeta: {
+  readonly displayName: "ProgressBar";
+  readonly entity: "Feedback";
+  readonly structure: "root";
+};
+/**
+ * Props for the ProgressBar component.
+ */
+interface ProgressBarProps$1 extends Omit<ProgressBarProps, 'style' | 'className' | 'children'> {
+  /**
+   * Authorial emphasis. Choose the evaluation that matches the *meaning* of
+   * the progress: `positive` for completing a desirable task, `caution` for
+   * an approaching limit, `negative` for a failing operation. `primary` is
+   * the default neutral chrome.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<'Feedback'>;
+  /** Visible label shown above the bar. */
+  label?: React.ReactNode;
+  /**
+   * Whether to render the `valueText`/percentage alongside the label.
+   * @default true
+   */
+  showValueLabel?: boolean;
+}
+/**
+ * A semantic progress bar built on React Aria's `ProgressBar`.
+ *
+ * Reads from `vars.colors.feedback.{primary|positive|caution|negative}` and
+ * uses `vars.radii.control` for the track. Supports both determinate
+ * (0–100%) and indeterminate modes — pass `isIndeterminate`.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar label="Uploading" value={42} />
+ * <ProgressBar label="Saving" isIndeterminate evaluation="positive" />
+ * ```
+ */
+declare const ProgressBar$1: {
+  ({
+    evaluation,
+    label,
+    showValueLabel,
+    ...props
+  }: ProgressBarProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ProgressBar";
+};
+//#endregion
+export { ProgressBar$1 as ProgressBar, ProgressBarProps$1 as ProgressBarProps, progressBarMeta };

package/dist/components/ProgressBar/ProgressBar.mjs

@@ -0,0 +1,129 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { ANIMATION_NAMES, ensureKeyframes } from "../../tokens/keyframes.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { ProgressBar } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/components/ProgressBar/ProgressBar.tsx
+/** Formal semantic identity — ProgressBar root (Feedback entity). */
+var progressBarMeta = {
+  displayName: "ProgressBar",
+  entity: "Feedback",
+  structure: "root"
+};
+var INDETERMINATE_FILL_WIDTH = "40%";
+var INDETERMINATE_CYCLE_DURATION = "1.2s";
+/** Track (body) style — the empty rail the fill animates across. */
+var buildTrackStyle = c => {
+  return {
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    height: vars.spacing.gap.stack.sm,
+    backgroundColor: c?.background?.default,
+    borderRadius: vars.radii.control,
+    borderWidth: vars.border.outline.surface.width,
+    borderStyle: vars.border.outline.surface.style,
+    borderColor: c?.border?.default
+  };
+};
+/** Fill (content) style — width tracks percentage; indeterminate animates. */
+var buildFillStyle = ({
+  c,
+  percentage,
+  isIndeterminate
+}) => {
+  return {
+    height: "100%",
+    width: isIndeterminate ? INDETERMINATE_FILL_WIDTH : `${percentage ?? 0}%`,
+    backgroundColor: c?.border?.default,
+    borderRadius: "inherit",
+    transitionProperty: "width",
+    transitionDuration: vars.motion.transition.enter.duration,
+    transitionTimingFunction: vars.motion.transition.enter.easing,
+    animation: isIndeterminate ? `${ANIMATION_NAMES.progressBarIndeterminate} ${INDETERMINATE_CYCLE_DURATION} linear infinite` : void 0
+  };
+};
+/**
+* A semantic progress bar built on React Aria's `ProgressBar`.
+*
+* Reads from `vars.colors.feedback.{primary|positive|caution|negative}` and
+* uses `vars.radii.control` for the track. Supports both determinate
+* (0–100%) and indeterminate modes — pass `isIndeterminate`.
+*
+* @example
+* ```tsx
+* <ProgressBar label="Uploading" value={42} />
+* <ProgressBar label="Saving" isIndeterminate evaluation="positive" />
+* ```
+*/
+var ProgressBar$1 = ({
+  evaluation = "primary",
+  label,
+  showValueLabel = true,
+  ...props
+}) => {
+  const c = vars.colors.feedback[evaluation];
+  React.useInsertionEffect(() => {
+    ensureKeyframes();
+  }, []);
+  return /* @__PURE__ */jsx(ProgressBar, {
+    ...props,
+    "data-scope": "progress-bar",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs
+    },
+    children: ({
+      percentage,
+      valueText,
+      isIndeterminate
+    }) => {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [(label || showValueLabel) && /* @__PURE__ */jsxs("div", {
+          "data-scope": "progress-bar",
+          "data-part": "labelRow",
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "baseline",
+            color: c?.text?.default,
+            ...vars.text.label.md
+          },
+          children: [/* @__PURE__ */jsx("span", {
+            "data-scope": "progress-bar",
+            "data-part": "title",
+            children: label
+          }), showValueLabel && !isIndeterminate && /* @__PURE__ */jsx("span", {
+            "data-scope": "progress-bar",
+            "data-part": "status",
+            "aria-hidden": true,
+            children: valueText ?? `${Math.round(percentage ?? 0)}%`
+          })]
+        }), /* @__PURE__ */jsx("div", {
+          "data-scope": "progress-bar",
+          "data-part": "body",
+          style: buildTrackStyle(c),
+          children: /* @__PURE__ */jsx("div", {
+            "data-scope": "progress-bar",
+            "data-part": "content",
+            style: buildFillStyle({
+              c,
+              percentage,
+              isIndeterminate
+            })
+          })
+        })]
+      });
+    }
+  });
+};
+ProgressBar$1.displayName = progressBarMeta.displayName;
+
+//#endregion
+export { ProgressBar$1 as ProgressBar, progressBarMeta };

package/dist/components/RadioGroup/RadioGroup.cjs

@@ -0,0 +1,218 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.cjs');
+const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/RadioGroup/RadioGroup.tsx
+/** Formal semantic identity — RadioGroup root (Selection entity, single-choice). */
+var radioGroupMeta = {
+  displayName: "RadioGroup",
+  entity: "Selection",
+  structure: "root"
+};
+/** Formal semantic identity — Radio item (Selection entity, selectionControl + label). */
+var radioMeta = {
+  displayName: "Radio",
+  entity: "Selection",
+  structure: "selectionControl",
+  composition: "selection"
+};
+/**
+* A semantic radio group built on React Aria.
+*
+* Orchestrates a set of mutually exclusive `Radio` options. Validation
+* feedback flows from `isInvalid` (or React Aria's `validate` callback) and
+* surfaces on each Radio via the `invalid` State.
+*
+* Entity = Selection, interaction = `select.single`.
+*
+* @example
+* ```tsx
+* <RadioGroup label="Size" defaultValue="md">
+*   <Radio value="sm">Small</Radio>
+*   <Radio value="md">Medium</Radio>
+*   <Radio value="lg">Large</Radio>
+* </RadioGroup>
+* ```
+*/
+var RadioGroup = ({
+  label,
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.RadioGroup, {
+    ...props,
+    "data-scope": "radio-group",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm
+    },
+    children: [label && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Label, {
+      "data-scope": "radio-group",
+      "data-part": "label",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        color: c?.text?.default
+      },
+      children: label
+    }), children]
+  });
+};
+RadioGroup.displayName = radioGroupMeta.displayName;
+var RADIO_BOX_STATIC = {
+  boxSizing: "border-box",
+  flexShrink: 0,
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1.125rem",
+  height: "1.125rem",
+  borderRadius: _ttoss_fsl_theme_vars.vars.radii.round,
+  borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+  transitionProperty: "background-color, border-color, border-width",
+  transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+  transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+  outlineOffset: "2px"
+};
+/** Circular radio-indicator style (state-dependent chrome + focus ring). */
+var buildRadioBoxStyle = ({
+  c,
+  isSelected,
+  isInvalid,
+  isDisabled,
+  isHovered,
+  isPressed,
+  isFocusVisible
+}) => {
+  return {
+    ...RADIO_BOX_STATIC,
+    borderWidth: isSelected ? _ttoss_fsl_theme_vars.vars.border.outline.selected.width : _ttoss_fsl_theme_vars.vars.border.outline.control.width,
+    backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isInvalid,
+      isSelected,
+      isHovered,
+      isPressed
+    }),
+    borderColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isInvalid,
+      isSelected,
+      isFocusVisible
+    }),
+    outline: require_focusRing.focusRingOutline(isFocusVisible)
+  };
+};
+/** Label color — invalid dominates disabled dominates default. */
+var resolveRadioLabelColor = ({
+  c,
+  isInvalid,
+  isDisabled
+}) => {
+  const text = c?.text;
+  if (isInvalid) return text?.invalid;
+  if (isDisabled) return text?.disabled;
+  return text?.default;
+};
+/**
+* A single radio option — must be used inside a `RadioGroup`.
+*
+* Renders a circular indicator (`data-part="selectionControl"`) with an
+* inner dot (`data-part="indicator"`) when selected. Reads the parent
+* group's `isInvalid` from React Aria's render props and surfaces the
+* `invalid` State on the control.
+*
+* @example
+* ```tsx
+* <Radio value="sm">Small</Radio>
+* ```
+*/
+var Radio = ({
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Radio, {
+    ...props,
+    "data-scope": "radio",
+    "data-part": "root",
+    style: ({
+      isDisabled
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        color: isDisabled ? c?.text?.disabled : c?.text?.default
+      };
+    },
+    children: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected,
+      isInvalid
+    }) => {
+      const text = c?.text;
+      return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+          "data-scope": "radio",
+          "data-part": "selectionControl",
+          "aria-hidden": true,
+          style: buildRadioBoxStyle({
+            c,
+            isSelected,
+            isInvalid,
+            isDisabled,
+            isHovered,
+            isPressed,
+            isFocusVisible
+          }),
+          children: isSelected && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+            "data-scope": "radio",
+            "data-part": "indicator",
+            "aria-hidden": true,
+            style: {
+              width: "0.4375rem",
+              height: "0.4375rem",
+              borderRadius: _ttoss_fsl_theme_vars.vars.radii.round,
+              backgroundColor: text?.checked ?? text?.default,
+              flexShrink: 0
+            }
+          })
+        }), children != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+          "data-scope": "radio",
+          "data-part": "label",
+          style: {
+            color: resolveRadioLabelColor({
+              c,
+              isInvalid,
+              isDisabled
+            })
+          },
+          children
+        })]
+      });
+    }
+  });
+};
+Radio.displayName = radioMeta.displayName;
+
+//#endregion
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.radioGroupMeta = radioGroupMeta;
+exports.radioMeta = radioMeta;

package/dist/components/RadioGroup/RadioGroup.d.cts

@@ -0,0 +1,82 @@
+
+import * as React from "react";
+import { RadioGroupProps, RadioProps } from "react-aria-components";
+
+//#region src/components/RadioGroup/RadioGroup.d.ts
+/** Formal semantic identity — RadioGroup root (Selection entity, single-choice). */
+declare const radioGroupMeta: {
+  readonly displayName: "RadioGroup";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+/** Formal semantic identity — Radio item (Selection entity, selectionControl + label). */
+declare const radioMeta: {
+  readonly displayName: "Radio";
+  readonly entity: "Selection";
+  readonly structure: "selectionControl";
+  readonly composition: "selection";
+};
+/**
+ * Props for the RadioGroup component.
+ */
+interface RadioGroupProps$1 extends Omit<RadioGroupProps, 'style' | 'children'> {
+  /** Group label displayed above the radio options. */
+  label?: React.ReactNode;
+  /** Radio option children — must be `Radio` components. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic radio group built on React Aria.
+ *
+ * Orchestrates a set of mutually exclusive `Radio` options. Validation
+ * feedback flows from `isInvalid` (or React Aria's `validate` callback) and
+ * surfaces on each Radio via the `invalid` State.
+ *
+ * Entity = Selection, interaction = `select.single`.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup label="Size" defaultValue="md">
+ *   <Radio value="sm">Small</Radio>
+ *   <Radio value="md">Medium</Radio>
+ *   <Radio value="lg">Large</Radio>
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroup: {
+  ({
+    label,
+    children,
+    ...props
+  }: RadioGroupProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "RadioGroup";
+};
+/**
+ * Props for the Radio component.
+ */
+interface RadioProps$1 extends Omit<RadioProps, 'style' | 'children'> {
+  /** Label content displayed next to the radio indicator. */
+  children?: React.ReactNode;
+}
+/**
+ * A single radio option — must be used inside a `RadioGroup`.
+ *
+ * Renders a circular indicator (`data-part="selectionControl"`) with an
+ * inner dot (`data-part="indicator"`) when selected. Reads the parent
+ * group's `isInvalid` from React Aria's render props and surfaces the
+ * `invalid` State on the control.
+ *
+ * @example
+ * ```tsx
+ * <Radio value="sm">Small</Radio>
+ * ```
+ */
+declare const Radio: {
+  ({
+    children,
+    ...props
+  }: RadioProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Radio";
+};
+//#endregion
+export { Radio, RadioGroup, RadioGroupProps$1 as RadioGroupProps, RadioProps$1 as RadioProps, radioGroupMeta, radioMeta };