@yamada-ui/react/dist/types/components/radio/radio.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { Merge } from "../../utils/index.js";
import { ComponentSlotStyle, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
import { CSSObject, CSSSlotObject } from "../../core/css/index.types.js";
import { As, Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
import { ComponentOptions, ComponentSlot, ComponentSlotName, SuperProps, UseComponentPropsOptions } from "../../core/components/create-component.js";
import "../../core/index.js";
import { UseInputBorderProps } from "../input/use-input-border.js";
import { RadioStyle } from "./radio.style.js";
import { UseRadioProps } from "./use-radio.js";
import "../../index.js";
import * as react2690 from "react";
import { ReactElement } from "react";
import * as _yamada_ui_utils25 from "@yamada-ui/utils";

//#region src/components/radio/radio.d.ts
interface RadioProps<Y extends string = string> extends Merge<HTMLStyledProps<"label">, UseRadioProps<Y>>, ThemeProps<RadioStyle>, UseInputBorderProps {
  /**
   * Props for the indicator component.
   */
  indicatorProps?: RadioIndicatorProps;
  /**
   * Props for the input element.
   */
  inputProps?: HTMLStyledProps<"input">;
  /**
   * Props for the label component.
   */
  labelProps?: RadioLabelProps;
  /**
   * Props for the label element.
   */
  rootProps?: HTMLStyledProps<"label">;
}
declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils25.Dict = _yamada_ui_utils25.Dict<any>>(el: H | react2690.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
    shape: {
      circle: {
        indicator: {
          rounded: "full";
          _before: {
            rounded: "full";
          };
        };
      };
      rounded: {
        indicator: {
          rounded: "l1";
          _before: {
            rounded: "calc({radii.l1} / 2)";
          };
        };
      };
      square: {
        indicator: {
          rounded: "0";
          _before: {
            rounded: "0";
          };
        };
      };
    };
  }, {
    sm: {
      indicator: {
        _before: {
          boxSize: "1.5";
        };
      };
      root: {
        "--indicator-size": "sizes.3.5";
        "--label-size": "fontSizes.sm";
      };
    };
    md: {
      indicator: {
        _before: {
          boxSize: "2";
        };
      };
      root: {
        "--indicator-size": "sizes.4";
        "--label-size": "fontSizes.md";
      };
    };
    lg: {
      indicator: {
        _before: {
          boxSize: "3";
        };
      };
      root: {
        "--indicator-size": "sizes.5";
        "--label-size": "fontSizes.lg";
      };
    };
  }, {
    base: {
      indicator: {
        _checked: {
          _before: {
            bg: "colorScheme.solid";
          };
        };
      };
    };
    outline: {
      indicator: {
        _checked: {
          _before: {
            bg: "colorScheme.outline";
          };
        };
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.outline";
        };
      };
    };
    solid: {};
    subtle: {
      indicator: {
        bg: "colorScheme.subtle";
      };
      root: {
        "--indicator-border-color": "transparent";
      };
    };
    surface: {
      indicator: {
        bg: "colorScheme.subtle";
      };
      root: {
        "--indicator-border-color": "colorScheme.muted";
      };
    };
  }>>> | undefined, {
    name,
    className,
    ...options
  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react2690.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: react2690.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils25.Dict = _yamada_ui_utils25.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
    shape: {
      circle: {
        indicator: {
          rounded: "full";
          _before: {
            rounded: "full";
          };
        };
      };
      rounded: {
        indicator: {
          rounded: "l1";
          _before: {
            rounded: "calc({radii.l1} / 2)";
          };
        };
      };
      square: {
        indicator: {
          rounded: "0";
          _before: {
            rounded: "0";
          };
        };
      };
    };
  }, {
    sm: {
      indicator: {
        _before: {
          boxSize: "1.5";
        };
      };
      root: {
        "--indicator-size": "sizes.3.5";
        "--label-size": "fontSizes.sm";
      };
    };
    md: {
      indicator: {
        _before: {
          boxSize: "2";
        };
      };
      root: {
        "--indicator-size": "sizes.4";
        "--label-size": "fontSizes.md";
      };
    };
    lg: {
      indicator: {
        _before: {
          boxSize: "3";
        };
      };
      root: {
        "--indicator-size": "sizes.5";
        "--label-size": "fontSizes.lg";
      };
    };
  }, {
    base: {
      indicator: {
        _checked: {
          _before: {
            bg: "colorScheme.solid";
          };
        };
      };
    };
    outline: {
      indicator: {
        _checked: {
          _before: {
            bg: "colorScheme.outline";
          };
        };
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.outline";
        };
      };
    };
    solid: {};
    subtle: {
      indicator: {
        bg: "colorScheme.subtle";
      };
      root: {
        "--indicator-border-color": "transparent";
      };
    };
    surface: {
      indicator: {
        bg: "colorScheme.subtle";
      };
      root: {
        "--indicator-border-color": "colorScheme.muted";
      };
    };
  }>>> | undefined, {
    className,
    withContext,
    transferProps
  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
    shape: {
      circle: {
        indicator: {
          rounded: "full";
          _before: {
            rounded: "full";
          };
        };
      };
      rounded: {
        indicator: {
          rounded: "l1";
          _before: {
            rounded: "calc({radii.l1} / 2)";
          };
        };
      };
      square: {
        indicator: {
          rounded: "0";
          _before: {
            rounded: "0";
          };
        };
      };
    };
  }, {
    sm: {
      indicator: {
        _before: {
          boxSize: "1.5";
        };
      };
      root: {
        "--indicator-size": "sizes.3.5";
        "--label-size": "fontSizes.sm";
      };
    };
    md: {
      indicator: {
        _before: {
          boxSize: "2";
        };
      };
      root: {
        "--indicator-size": "sizes.4";
        "--label-size": "fontSizes.md";
      };
    };
    lg: {
      indicator: {
        _before: {
          boxSize: "3";
        };
      };
      root: {
        "--indicator-size": "sizes.5";
        "--label-size": "fontSizes.lg";
      };
    };
  }, {
    base: {
      indicator: {
        _checked: {
          _before: {
            bg: "colorScheme.solid";
          };
        };
      };
    };
    outline: {
      indicator: {
        _checked: {
          _before: {
            bg: "colorScheme.outline";
          };
        };
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.outline";
        };
      };
    };
    solid: {};
    subtle: {
      indicator: {
        bg: "colorScheme.subtle";
      };
      root: {
        "--indicator-border-color": "transparent";
      };
    };
    surface: {
      indicator: {
        bg: "colorScheme.subtle";
      };
      root: {
        "--indicator-border-color": "colorScheme.muted";
      };
    };
  }>, R>, {
    css?: CSSObject | CSSObject[];
  }>];
/**
 * `Radio` is a component used for allowing users to select one option from multiple choices.
 *
 * @see https://yamada-ui.com/docs/components/radio
 */
declare const Radio: GenericsComponent<{
  <Y extends string = string>(props: RadioProps<Y>): ReactElement;
}>;
interface RadioIndicatorProps extends HTMLStyledProps {}
interface RadioLabelProps extends HTMLStyledProps<"span"> {}
//#endregion
export { Radio, RadioProps, RadioPropsContext, useRadioPropsContext };
//# sourceMappingURL=radio.d.ts.map