@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
503 lines (502 loc) • 12.3 kB
TypeScript
import { ComponentSlotStyle, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
import { CSSObject, CSSSlotObject } from "../../core/css/index.types.js";
import { As, Component, GenericsComponent } 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 { IconButtonProps } from "../button/icon-button.js";
import { ToggleStyle } from "./toggle.style.js";
import { UseToggleProps } from "./use-toggle.js";
import "../../index.js";
import * as react2608 from "react";
import { ReactElement } from "react";
import * as _yamada_ui_utils20 from "@yamada-ui/utils";
//#region src/components/toggle/toggle.d.ts
interface ToggleProps<Y extends string = string> extends Omit<WithoutThemeProps<IconButtonProps, ToggleStyle>, "aria-label" | "onChange" | "ref" | "value">, UseToggleProps<Y>, Pick<UseInputBorderProps, "errorBorderColor">, ThemeProps<ToggleStyle> {}
declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils20.Dict = _yamada_ui_utils20.Dict<any>>(el: H | react2608.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
fullRounded: {
true: {
root: {
rounded: "full";
};
};
};
}, {
xs: {
root: {
gap: "1";
fontSize?: "lg" | undefined;
minBoxSize?: "8" | undefined;
};
};
sm: {
root: {
gap: "2";
fontSize?: "xl" | undefined;
minBoxSize?: "9" | undefined;
};
};
md: {
root: {
gap: "2";
fontSize?: "2xl" | undefined;
minBoxSize?: "10" | undefined;
};
};
lg: {
root: {
gap: "2.5";
fontSize?: "3xl" | undefined;
minBoxSize?: "11" | undefined;
};
};
xl: {
root: {
gap: "3";
fontSize?: "4xl" | undefined;
minBoxSize?: "12" | undefined;
};
};
"2xl": {
root: {
gap: "3";
fontSize?: "4xl" | undefined;
minBoxSize?: "14" | undefined;
};
};
}, {
ghost: {
root: {
_checked: {
layerStyle: "solid";
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
_notChecked: {
layerStyle: "ghost";
_hover: {
layerStyle: "ghost.hover";
};
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
};
};
outline: {
root: {
_checked: {
layerStyle: "solid";
borderColor: "colorScheme.solid";
borderWidth: "1px";
_invalid: {
borderColor: "{error-border-color}";
};
};
_notChecked: {
layerStyle: "outline";
_hover: {
layerStyle: "outline.hover";
};
_invalid: {
borderColor: "{error-border-color}";
};
};
};
};
solid: {
root: {
_checked: {
layerStyle: "subtle";
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
_notChecked: {
layerStyle: "solid";
_hover: {
layerStyle: "solid.hover";
};
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
};
};
subtle: {
root: {
_checked: {
layerStyle: "solid";
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
_notChecked: {
layerStyle: "subtle";
_hover: {
layerStyle: "subtle.hover";
};
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
};
};
surface: {
root: {
_checked: {
layerStyle: "solid";
_invalid: {
borderColor: "{error-border-color}";
};
};
_notChecked: {
layerStyle: "surface";
_hover: {
layerStyle: "surface.hover";
};
_invalid: {
borderColor: "{error-border-color}";
};
};
};
};
}>>> | undefined, {
name,
className,
...options
}?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react2608.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, TogglePropsContext: react2608.Context<Partial<ToggleProps<string>> | undefined>, useTogglePropsContext: () => Partial<ToggleProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils20.Dict = _yamada_ui_utils20.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
fullRounded: {
true: {
root: {
rounded: "full";
};
};
};
}, {
xs: {
root: {
gap: "1";
fontSize?: "lg" | undefined;
minBoxSize?: "8" | undefined;
};
};
sm: {
root: {
gap: "2";
fontSize?: "xl" | undefined;
minBoxSize?: "9" | undefined;
};
};
md: {
root: {
gap: "2";
fontSize?: "2xl" | undefined;
minBoxSize?: "10" | undefined;
};
};
lg: {
root: {
gap: "2.5";
fontSize?: "3xl" | undefined;
minBoxSize?: "11" | undefined;
};
};
xl: {
root: {
gap: "3";
fontSize?: "4xl" | undefined;
minBoxSize?: "12" | undefined;
};
};
"2xl": {
root: {
gap: "3";
fontSize?: "4xl" | undefined;
minBoxSize?: "14" | undefined;
};
};
}, {
ghost: {
root: {
_checked: {
layerStyle: "solid";
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
_notChecked: {
layerStyle: "ghost";
_hover: {
layerStyle: "ghost.hover";
};
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
};
};
outline: {
root: {
_checked: {
layerStyle: "solid";
borderColor: "colorScheme.solid";
borderWidth: "1px";
_invalid: {
borderColor: "{error-border-color}";
};
};
_notChecked: {
layerStyle: "outline";
_hover: {
layerStyle: "outline.hover";
};
_invalid: {
borderColor: "{error-border-color}";
};
};
};
};
solid: {
root: {
_checked: {
layerStyle: "subtle";
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
_notChecked: {
layerStyle: "solid";
_hover: {
layerStyle: "solid.hover";
};
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
};
};
subtle: {
root: {
_checked: {
layerStyle: "solid";
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
_notChecked: {
layerStyle: "subtle";
_hover: {
layerStyle: "subtle.hover";
};
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
};
};
surface: {
root: {
_checked: {
layerStyle: "solid";
_invalid: {
borderColor: "{error-border-color}";
};
};
_notChecked: {
layerStyle: "surface";
_hover: {
layerStyle: "surface.hover";
};
_invalid: {
borderColor: "{error-border-color}";
};
};
};
};
}>>> | undefined, {
className,
withContext,
transferProps
}?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils20.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root", {
fullRounded: {
true: {
root: {
rounded: "full";
};
};
};
}, {
xs: {
root: {
gap: "1";
fontSize?: "lg" | undefined;
minBoxSize?: "8" | undefined;
};
};
sm: {
root: {
gap: "2";
fontSize?: "xl" | undefined;
minBoxSize?: "9" | undefined;
};
};
md: {
root: {
gap: "2";
fontSize?: "2xl" | undefined;
minBoxSize?: "10" | undefined;
};
};
lg: {
root: {
gap: "2.5";
fontSize?: "3xl" | undefined;
minBoxSize?: "11" | undefined;
};
};
xl: {
root: {
gap: "3";
fontSize?: "4xl" | undefined;
minBoxSize?: "12" | undefined;
};
};
"2xl": {
root: {
gap: "3";
fontSize?: "4xl" | undefined;
minBoxSize?: "14" | undefined;
};
};
}, {
ghost: {
root: {
_checked: {
layerStyle: "solid";
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
_notChecked: {
layerStyle: "ghost";
_hover: {
layerStyle: "ghost.hover";
};
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
};
};
outline: {
root: {
_checked: {
layerStyle: "solid";
borderColor: "colorScheme.solid";
borderWidth: "1px";
_invalid: {
borderColor: "{error-border-color}";
};
};
_notChecked: {
layerStyle: "outline";
_hover: {
layerStyle: "outline.hover";
};
_invalid: {
borderColor: "{error-border-color}";
};
};
};
};
solid: {
root: {
_checked: {
layerStyle: "subtle";
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
_notChecked: {
layerStyle: "solid";
_hover: {
layerStyle: "solid.hover";
};
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
};
};
subtle: {
root: {
_checked: {
layerStyle: "solid";
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
_notChecked: {
layerStyle: "subtle";
_hover: {
layerStyle: "subtle.hover";
};
_invalid: {
borderColor: "{error-border-color}";
borderWidth: "1px";
};
};
};
};
surface: {
root: {
_checked: {
layerStyle: "solid";
_invalid: {
borderColor: "{error-border-color}";
};
};
_notChecked: {
layerStyle: "surface";
_hover: {
layerStyle: "surface.hover";
};
_invalid: {
borderColor: "{error-border-color}";
};
};
};
};
}>, R>, {
css?: CSSObject | CSSObject[];
}>];
/**
* `Toggle` is a two-state button that can be either on or off.
*
* @see https://yamada-ui.com/docs/components/toggle
*/
declare const Toggle: GenericsComponent<{
<Y extends string = string>(props: ToggleProps<Y>): ReactElement;
}>;
//#endregion
export { Toggle, ToggleProps, TogglePropsContext, useTogglePropsContext };
//# sourceMappingURL=toggle.d.ts.map