@yamada-ui/react/dist/types/components/checkbox/checkbox.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 { CheckboxStyle } from "./checkbox.style.js";
import { UseCheckboxProps } from "./use-checkbox.js";
import "../../index.js";
import * as react921 from "react";
import { ReactElement, ReactNode } from "react";
import * as _yamada_ui_utils16 from "@yamada-ui/utils";

//#region src/components/checkbox/checkbox.d.ts
interface CheckboxProps<Y extends string = string> extends Merge<HTMLStyledProps<"label">, UseCheckboxProps<Y>>, ThemeProps<CheckboxStyle>, UseInputBorderProps {
  /**
   * The icon to display in the checkbox when it is checked.
   */
  checkedIcon?: ReactNode;
  /**
   * The icon to display in the checkbox when it is indeterminate.
   */
  indeterminateIcon?: ReactNode;
  /**
   * Props for the indicator component.
   */
  indicatorProps?: CheckboxIndicatorProps;
  /**
   * Props for the input element.
   */
  inputProps?: HTMLStyledProps<"input">;
  /**
   * Props for the label component.
   */
  labelProps?: CheckboxLabelProps;
  /**
   * Props for the label element.
   */
  rootProps?: HTMLStyledProps<"label">;
}
declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils16.Dict = _yamada_ui_utils16.Dict<any>>(el: H | react921.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
    shape: {
      rounded: {
        indicator: {
          rounded: "l1";
        };
      };
      square: {
        indicator: {
          rounded: "0";
        };
      };
    };
  }, {
    sm: {
      indicator: {
        fontSize: "xs";
      };
      root: {
        "--indicator-size": "sizes.3.5";
        "--label-size": "fontSizes.sm";
      };
    };
    md: {
      indicator: {
        fontSize: "sm";
      };
      root: {
        "--indicator-size": "sizes.4";
        "--label-size": "fontSizes.md";
      };
    };
    lg: {
      indicator: {
        fontSize: "md";
      };
      root: {
        "--indicator-size": "sizes.5";
        "--label-size": "fontSizes.lg";
      };
    };
  }, {
    outline: {
      indicator: {
        color: "colorScheme.outline";
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.outline";
        };
        _indeterminate: {
          "--indicator-border-color": "colorScheme.outline";
        };
      };
    };
    solid: {
      indicator: {
        color: "colorScheme.contrast";
        _checked: {
          bg: "colorScheme.solid";
        };
        _indeterminate: {
          bg: "colorScheme.solid";
        };
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.solid";
        };
        _indeterminate: {
          "--indicator-border-color": "colorScheme.solid";
        };
      };
    };
    subtle: {
      indicator: {
        bg: "colorScheme.subtle";
        color: "colorScheme.fg";
      };
      root: {
        "--indicator-border-color": "transparent";
      };
    };
    surface: {
      indicator: {
        bg: "colorScheme.subtle";
        color: "colorScheme.fg";
      };
      root: {
        "--indicator-border-color": "colorScheme.muted";
      };
    };
  }>>> | undefined, {
    name,
    className,
    ...options
  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react921.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxPropsContext: react921.Context<Partial<CheckboxProps<string>> | undefined>, useCheckboxPropsContext: () => Partial<CheckboxProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils16.Dict = _yamada_ui_utils16.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
    shape: {
      rounded: {
        indicator: {
          rounded: "l1";
        };
      };
      square: {
        indicator: {
          rounded: "0";
        };
      };
    };
  }, {
    sm: {
      indicator: {
        fontSize: "xs";
      };
      root: {
        "--indicator-size": "sizes.3.5";
        "--label-size": "fontSizes.sm";
      };
    };
    md: {
      indicator: {
        fontSize: "sm";
      };
      root: {
        "--indicator-size": "sizes.4";
        "--label-size": "fontSizes.md";
      };
    };
    lg: {
      indicator: {
        fontSize: "md";
      };
      root: {
        "--indicator-size": "sizes.5";
        "--label-size": "fontSizes.lg";
      };
    };
  }, {
    outline: {
      indicator: {
        color: "colorScheme.outline";
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.outline";
        };
        _indeterminate: {
          "--indicator-border-color": "colorScheme.outline";
        };
      };
    };
    solid: {
      indicator: {
        color: "colorScheme.contrast";
        _checked: {
          bg: "colorScheme.solid";
        };
        _indeterminate: {
          bg: "colorScheme.solid";
        };
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.solid";
        };
        _indeterminate: {
          "--indicator-border-color": "colorScheme.solid";
        };
      };
    };
    subtle: {
      indicator: {
        bg: "colorScheme.subtle";
        color: "colorScheme.fg";
      };
      root: {
        "--indicator-border-color": "transparent";
      };
    };
    surface: {
      indicator: {
        bg: "colorScheme.subtle";
        color: "colorScheme.fg";
      };
      root: {
        "--indicator-border-color": "colorScheme.muted";
      };
    };
  }>>> | undefined, {
    className,
    withContext,
    transferProps
  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
    shape: {
      rounded: {
        indicator: {
          rounded: "l1";
        };
      };
      square: {
        indicator: {
          rounded: "0";
        };
      };
    };
  }, {
    sm: {
      indicator: {
        fontSize: "xs";
      };
      root: {
        "--indicator-size": "sizes.3.5";
        "--label-size": "fontSizes.sm";
      };
    };
    md: {
      indicator: {
        fontSize: "sm";
      };
      root: {
        "--indicator-size": "sizes.4";
        "--label-size": "fontSizes.md";
      };
    };
    lg: {
      indicator: {
        fontSize: "md";
      };
      root: {
        "--indicator-size": "sizes.5";
        "--label-size": "fontSizes.lg";
      };
    };
  }, {
    outline: {
      indicator: {
        color: "colorScheme.outline";
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.outline";
        };
        _indeterminate: {
          "--indicator-border-color": "colorScheme.outline";
        };
      };
    };
    solid: {
      indicator: {
        color: "colorScheme.contrast";
        _checked: {
          bg: "colorScheme.solid";
        };
        _indeterminate: {
          bg: "colorScheme.solid";
        };
      };
      root: {
        _checked: {
          "--indicator-border-color": "colorScheme.solid";
        };
        _indeterminate: {
          "--indicator-border-color": "colorScheme.solid";
        };
      };
    };
    subtle: {
      indicator: {
        bg: "colorScheme.subtle";
        color: "colorScheme.fg";
      };
      root: {
        "--indicator-border-color": "transparent";
      };
    };
    surface: {
      indicator: {
        bg: "colorScheme.subtle";
        color: "colorScheme.fg";
      };
      root: {
        "--indicator-border-color": "colorScheme.muted";
      };
    };
  }>, R>, {
    css?: CSSObject | CSSObject[];
  }>];
/**
 * `Checkbox` is a component used for allowing users to select multiple values from multiple options.
 *
 * @see https://yamada-ui.com/docs/components/checkbox
 */
declare const Checkbox: GenericsComponent<{
  <Y extends string = string>(props: CheckboxProps<Y>): ReactElement;
}>;
interface CheckboxIndicatorProps extends HTMLStyledProps {}
interface CheckboxLabelProps extends HTMLStyledProps<"span"> {}
//#endregion
export { Checkbox, CheckboxProps, CheckboxPropsContext, useCheckboxPropsContext };
//# sourceMappingURL=checkbox.d.ts.map