@yamada-ui/react/dist/types/components/radio-card/radio-card.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 { UseRadioProps } from "../radio/use-radio.js";
import { RadioCardStyle } from "./radio-card.style.js";
import "../../index.js";
import * as react93 from "react";
import { ReactElement, ReactNode } from "react";
import * as _yamada_ui_utils5 from "@yamada-ui/utils";

//#region src/components/radio-card/radio-card.d.ts
interface RadioCardRootProps<Y extends string = string> extends Merge<HTMLStyledProps<"label">, UseRadioProps<Y>>, ThemeProps<RadioCardStyle>, UseInputBorderProps {
  /**
   * The addon of the radio card.
   */
  addon?: ReactNode;
  /**
   * The description of the radio card.
   */
  description?: ReactNode;
  /**
   * The label of the radio card.
   */
  label?: ReactNode;
  /**
   * If `true`, the indicator will be displayed.
   *
   * @default true
   */
  withIndicator?: boolean;
  /**
   * Props for the addon component.
   */
  addonProps?: RadioCardAddonProps;
  /**
   * Props for the description component.
   */
  descriptionProps?: RadioCardDescriptionProps;
  /**
   * Props for the indicator component.
   */
  indicatorProps?: RadioCardIndicatorProps;
  /**
   * Props for the input element.
   */
  inputProps?: HTMLStyledProps<"input">;
  /**
   * Props for the label component.
   */
  labelProps?: RadioCardLabelProps;
  /**
   * Props for the label element.
   */
  rootProps?: HTMLStyledProps<"label">;
}
declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils5.Dict = _yamada_ui_utils5.Dict<any>>(el: H | react93.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
    justify: {
      end: {
        addon: {
          me: "calc({bleed-size} * -1)";
          ms: "calc({space-x} * -1)";
        };
        indicator: {
          right: "{space-x}";
        };
        root: {
          "&:has([data-indicator])": {
            "--bleed-size": "calc({indicator-size} + ({space-x} * 2))";
          };
          "--bleed-size": "{space-x}";
          pe: "{bleed-size}";
        };
      };
      start: {
        addon: {
          me: "calc({space-x} * -1)";
          ms: "calc({bleed-size} * -1)";
        };
        indicator: {
          left: "{space-x}";
        };
        root: {
          "&:has([data-indicator])": {
            "--bleed-size": "calc({indicator-size} + ({space-x} * 2))";
          };
          "--bleed-size": "{space-x}";
          ps: "{bleed-size}";
        };
      };
    };
    shape: {
      circle?: {
        indicator: {
          rounded: "full";
          _before: {
            rounded: "full";
          };
        };
      } | undefined;
      rounded?: {
        indicator: {
          rounded: "l1";
          _before: {
            rounded: "calc({radii.l1} / 2)";
          };
        };
      } | undefined;
      square?: {
        indicator: {
          rounded: "0";
          _before: {
            rounded: "0";
          };
        };
      } | undefined;
    };
  }, {
    sm: {
      indicator: {
        _before: {
          boxSize: "1.5";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.xs";
        "--space-x": "spaces.3";
        "--space-y": "spaces.2";
        "--indicator-size"?: "sizes.3.5" | undefined;
        "--label-size"?: "fontSizes.sm" | undefined;
      };
    };
    md: {
      indicator: {
        _before: {
          boxSize: "2";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.sm";
        "--space-x": "spaces.4";
        "--space-y": "spaces.3";
        "--indicator-size"?: "sizes.4" | undefined;
        "--label-size"?: "fontSizes.md" | undefined;
      };
    };
    lg: {
      indicator: {
        _before: {
          boxSize: "3";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.md";
        "--space-x": "spaces.5";
        "--space-y": "spaces.4";
        "--indicator-size"?: "sizes.5" | undefined;
        "--label-size"?: "fontSizes.lg" | undefined;
      };
    };
    xl: {
      indicator: {
        _before: {
          boxSize: "3";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.md";
        "--space-x": "spaces.6";
        "--space-y": "spaces.5";
        "--indicator-size"?: "sizes.5" | undefined;
        "--label-size"?: "fontSizes.lg" | undefined;
      };
    };
  }, {
    base: {
      indicator: {
        _checked: {
          _before: {
            bg: "colorScheme.solid";
          };
        };
      } | undefined;
    };
    outline: {
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.outline";
          "--root-border-color": "colorScheme.outline";
        };
      };
    };
    subtle: {
      indicator: {
        _checked: {
          bg: "bg";
        };
      };
      root: {
        _checked: {
          "--addon-border-color": "colorScheme.muted";
          "--indicator-border-color": "colorScheme.emphasized";
          "--root-border-color": "transparent";
          bg: "colorScheme.subtle";
        };
      };
    };
    surface: {
      indicator: {
        _checked: {
          bg: "bg";
        };
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.emphasized";
          "--root-border-color": "colorScheme.muted";
          bg: "colorScheme.subtle";
        };
      };
    };
  }>>> | undefined, {
    name,
    className,
    ...options
  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react93.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: react93.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils5.Dict = _yamada_ui_utils5.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
    justify: {
      end: {
        addon: {
          me: "calc({bleed-size} * -1)";
          ms: "calc({space-x} * -1)";
        };
        indicator: {
          right: "{space-x}";
        };
        root: {
          "&:has([data-indicator])": {
            "--bleed-size": "calc({indicator-size} + ({space-x} * 2))";
          };
          "--bleed-size": "{space-x}";
          pe: "{bleed-size}";
        };
      };
      start: {
        addon: {
          me: "calc({space-x} * -1)";
          ms: "calc({bleed-size} * -1)";
        };
        indicator: {
          left: "{space-x}";
        };
        root: {
          "&:has([data-indicator])": {
            "--bleed-size": "calc({indicator-size} + ({space-x} * 2))";
          };
          "--bleed-size": "{space-x}";
          ps: "{bleed-size}";
        };
      };
    };
    shape: {
      circle?: {
        indicator: {
          rounded: "full";
          _before: {
            rounded: "full";
          };
        };
      } | undefined;
      rounded?: {
        indicator: {
          rounded: "l1";
          _before: {
            rounded: "calc({radii.l1} / 2)";
          };
        };
      } | undefined;
      square?: {
        indicator: {
          rounded: "0";
          _before: {
            rounded: "0";
          };
        };
      } | undefined;
    };
  }, {
    sm: {
      indicator: {
        _before: {
          boxSize: "1.5";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.xs";
        "--space-x": "spaces.3";
        "--space-y": "spaces.2";
        "--indicator-size"?: "sizes.3.5" | undefined;
        "--label-size"?: "fontSizes.sm" | undefined;
      };
    };
    md: {
      indicator: {
        _before: {
          boxSize: "2";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.sm";
        "--space-x": "spaces.4";
        "--space-y": "spaces.3";
        "--indicator-size"?: "sizes.4" | undefined;
        "--label-size"?: "fontSizes.md" | undefined;
      };
    };
    lg: {
      indicator: {
        _before: {
          boxSize: "3";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.md";
        "--space-x": "spaces.5";
        "--space-y": "spaces.4";
        "--indicator-size"?: "sizes.5" | undefined;
        "--label-size"?: "fontSizes.lg" | undefined;
      };
    };
    xl: {
      indicator: {
        _before: {
          boxSize: "3";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.md";
        "--space-x": "spaces.6";
        "--space-y": "spaces.5";
        "--indicator-size"?: "sizes.5" | undefined;
        "--label-size"?: "fontSizes.lg" | undefined;
      };
    };
  }, {
    base: {
      indicator: {
        _checked: {
          _before: {
            bg: "colorScheme.solid";
          };
        };
      } | undefined;
    };
    outline: {
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.outline";
          "--root-border-color": "colorScheme.outline";
        };
      };
    };
    subtle: {
      indicator: {
        _checked: {
          bg: "bg";
        };
      };
      root: {
        _checked: {
          "--addon-border-color": "colorScheme.muted";
          "--indicator-border-color": "colorScheme.emphasized";
          "--root-border-color": "transparent";
          bg: "colorScheme.subtle";
        };
      };
    };
    surface: {
      indicator: {
        _checked: {
          bg: "bg";
        };
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.emphasized";
          "--root-border-color": "colorScheme.muted";
          bg: "colorScheme.subtle";
        };
      };
    };
  }>>> | undefined, {
    className,
    withContext,
    transferProps
  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
    justify: {
      end: {
        addon: {
          me: "calc({bleed-size} * -1)";
          ms: "calc({space-x} * -1)";
        };
        indicator: {
          right: "{space-x}";
        };
        root: {
          "&:has([data-indicator])": {
            "--bleed-size": "calc({indicator-size} + ({space-x} * 2))";
          };
          "--bleed-size": "{space-x}";
          pe: "{bleed-size}";
        };
      };
      start: {
        addon: {
          me: "calc({space-x} * -1)";
          ms: "calc({bleed-size} * -1)";
        };
        indicator: {
          left: "{space-x}";
        };
        root: {
          "&:has([data-indicator])": {
            "--bleed-size": "calc({indicator-size} + ({space-x} * 2))";
          };
          "--bleed-size": "{space-x}";
          ps: "{bleed-size}";
        };
      };
    };
    shape: {
      circle?: {
        indicator: {
          rounded: "full";
          _before: {
            rounded: "full";
          };
        };
      } | undefined;
      rounded?: {
        indicator: {
          rounded: "l1";
          _before: {
            rounded: "calc({radii.l1} / 2)";
          };
        };
      } | undefined;
      square?: {
        indicator: {
          rounded: "0";
          _before: {
            rounded: "0";
          };
        };
      } | undefined;
    };
  }, {
    sm: {
      indicator: {
        _before: {
          boxSize: "1.5";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.xs";
        "--space-x": "spaces.3";
        "--space-y": "spaces.2";
        "--indicator-size"?: "sizes.3.5" | undefined;
        "--label-size"?: "fontSizes.sm" | undefined;
      };
    };
    md: {
      indicator: {
        _before: {
          boxSize: "2";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.sm";
        "--space-x": "spaces.4";
        "--space-y": "spaces.3";
        "--indicator-size"?: "sizes.4" | undefined;
        "--label-size"?: "fontSizes.md" | undefined;
      };
    };
    lg: {
      indicator: {
        _before: {
          boxSize: "3";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.md";
        "--space-x": "spaces.5";
        "--space-y": "spaces.4";
        "--indicator-size"?: "sizes.5" | undefined;
        "--label-size"?: "fontSizes.lg" | undefined;
      };
    };
    xl: {
      indicator: {
        _before: {
          boxSize: "3";
        };
      } | undefined;
      root: {
        "--description-size": "fontSizes.md";
        "--space-x": "spaces.6";
        "--space-y": "spaces.5";
        "--indicator-size"?: "sizes.5" | undefined;
        "--label-size"?: "fontSizes.lg" | undefined;
      };
    };
  }, {
    base: {
      indicator: {
        _checked: {
          _before: {
            bg: "colorScheme.solid";
          };
        };
      } | undefined;
    };
    outline: {
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.outline";
          "--root-border-color": "colorScheme.outline";
        };
      };
    };
    subtle: {
      indicator: {
        _checked: {
          bg: "bg";
        };
      };
      root: {
        _checked: {
          "--addon-border-color": "colorScheme.muted";
          "--indicator-border-color": "colorScheme.emphasized";
          "--root-border-color": "transparent";
          bg: "colorScheme.subtle";
        };
      };
    };
    surface: {
      indicator: {
        _checked: {
          bg: "bg";
        };
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.emphasized";
          "--root-border-color": "colorScheme.muted";
          bg: "colorScheme.subtle";
        };
      };
    };
  }>, R>, {
    css?: CSSObject | CSSObject[];
  }>];
/**
 * `RadioCard` is a component used for allowing users to select one option from multiple choices.
 *
 * @see https://yamada-ui.com/docs/components/radio-card
 */
declare const RadioCardRoot: GenericsComponent<{
  <Y extends string = string>(props: RadioCardRootProps<Y>): ReactElement;
}>;
interface RadioCardIndicatorProps extends HTMLStyledProps {}
interface RadioCardLabelProps extends HTMLStyledProps {}
declare const RadioCardLabel: Component<"span", RadioCardLabelProps>;
interface RadioCardDescriptionProps extends HTMLStyledProps {}
declare const RadioCardDescription: Component<"span", RadioCardDescriptionProps>;
interface RadioCardAddonProps extends HTMLStyledProps {}
declare const RadioCardAddon: Component<"span", RadioCardAddonProps>;
//#endregion
export { RadioCardAddon, RadioCardAddonProps, RadioCardDescription, RadioCardDescriptionProps, RadioCardLabel, RadioCardLabelProps, RadioCardPropsContext, RadioCardRoot, RadioCardRootProps, useRadioCardPropsContext };
//# sourceMappingURL=radio-card.d.ts.map