@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
516 lines (515 loc) • 14.4 kB
TypeScript
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 { UseCheckboxProps } from "../checkbox/use-checkbox.js";
import { CheckboxCardStyle } from "./checkbox-card.style.js";
import "../../index.js";
import * as react916 from "react";
import { ReactElement, ReactNode } from "react";
import * as _yamada_ui_utils12 from "@yamada-ui/utils";
//#region src/components/checkbox-card/checkbox-card.d.ts
interface CheckboxCardRootProps<Y extends string = string> extends Merge<HTMLStyledProps<"label">, UseCheckboxProps<Y>>, ThemeProps<CheckboxCardStyle>, UseInputBorderProps {
/**
* The addon of the checkbox card.
*/
addon?: ReactNode;
/**
* The icon to display in the checkbox when it is checked.
*/
checkedIcon?: ReactNode;
/**
* The description of the checkbox card.
*/
description?: ReactNode;
/**
* The icon to display in the checkbox when it is indeterminate.
*/
indeterminateIcon?: ReactNode;
/**
* The label of the checkbox card.
*/
label?: ReactNode;
/**
* If `true`, the indicator will be displayed.
*
* @default true
*/
withIndicator?: boolean;
/**
* Props for the addon component.
*/
addonProps?: CheckboxCardAddonProps;
/**
* Props for the description component.
*/
descriptionProps?: CheckboxCardDescriptionProps;
/**
* Props for the indicator component.
*/
indicatorProps?: CheckboxCardIndicatorProps;
/**
* Props for the input element.
*/
inputProps?: HTMLStyledProps<"input">;
/**
* Props for the label component.
*/
labelProps?: CheckboxCardLabelProps;
/**
* Props for the label element.
*/
rootProps?: HTMLStyledProps<"label">;
}
declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils12.Dict = _yamada_ui_utils12.Dict<any>>(el: H | react916.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: {
rounded?: {
indicator: {
rounded: "l1";
};
} | undefined;
square?: {
indicator: {
rounded: "0";
};
} | undefined;
};
}, {
sm: {
indicator: {
fontSize: "xs";
} | 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: {
fontSize: "sm";
} | 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: {
fontSize: "md";
} | 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: {
fontSize: "md";
} | 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: {
color: "colorScheme.contrast";
_checked: {
bg: "colorScheme.solid";
};
_indeterminate: {
bg: "colorScheme.solid";
};
};
root: {
_checked: {
"--indicator-border-color": "colorScheme.solid";
};
_indeterminate: {
"--indicator-border-color": "colorScheme.solid";
};
};
};
outline: {
root: {
_checked: {
"--root-border-color": "colorScheme.outline";
};
};
};
subtle: {
root: {
_checked: {
"--addon-border-color": "colorScheme.muted";
"--root-border-color": "transparent";
bg: "colorScheme.subtle";
};
};
};
surface: {
root: {
_checked: {
"--root-border-color": "colorScheme.muted";
bg: "colorScheme.subtle";
};
};
};
}>>> | undefined, {
name,
className,
...options
}?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react916.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: react916.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils12.Dict = _yamada_ui_utils12.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: {
rounded?: {
indicator: {
rounded: "l1";
};
} | undefined;
square?: {
indicator: {
rounded: "0";
};
} | undefined;
};
}, {
sm: {
indicator: {
fontSize: "xs";
} | 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: {
fontSize: "sm";
} | 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: {
fontSize: "md";
} | 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: {
fontSize: "md";
} | 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: {
color: "colorScheme.contrast";
_checked: {
bg: "colorScheme.solid";
};
_indeterminate: {
bg: "colorScheme.solid";
};
};
root: {
_checked: {
"--indicator-border-color": "colorScheme.solid";
};
_indeterminate: {
"--indicator-border-color": "colorScheme.solid";
};
};
};
outline: {
root: {
_checked: {
"--root-border-color": "colorScheme.outline";
};
};
};
subtle: {
root: {
_checked: {
"--addon-border-color": "colorScheme.muted";
"--root-border-color": "transparent";
bg: "colorScheme.subtle";
};
};
};
surface: {
root: {
_checked: {
"--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: {
rounded?: {
indicator: {
rounded: "l1";
};
} | undefined;
square?: {
indicator: {
rounded: "0";
};
} | undefined;
};
}, {
sm: {
indicator: {
fontSize: "xs";
} | 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: {
fontSize: "sm";
} | 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: {
fontSize: "md";
} | 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: {
fontSize: "md";
} | 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: {
color: "colorScheme.contrast";
_checked: {
bg: "colorScheme.solid";
};
_indeterminate: {
bg: "colorScheme.solid";
};
};
root: {
_checked: {
"--indicator-border-color": "colorScheme.solid";
};
_indeterminate: {
"--indicator-border-color": "colorScheme.solid";
};
};
};
outline: {
root: {
_checked: {
"--root-border-color": "colorScheme.outline";
};
};
};
subtle: {
root: {
_checked: {
"--addon-border-color": "colorScheme.muted";
"--root-border-color": "transparent";
bg: "colorScheme.subtle";
};
};
};
surface: {
root: {
_checked: {
"--root-border-color": "colorScheme.muted";
bg: "colorScheme.subtle";
};
};
};
}>, R>, {
css?: CSSObject | CSSObject[];
}>];
/**
* `CheckboxCard` is a component used for allowing users to select multiple values from multiple options.
*
* @see https://yamada-ui.com/docs/components/checkbox-card
*/
declare const CheckboxCardRoot: GenericsComponent<{
<Y extends string = string>(props: CheckboxCardRootProps<Y>): ReactElement;
}>;
interface CheckboxCardIndicatorProps extends HTMLStyledProps {}
interface CheckboxCardLabelProps extends HTMLStyledProps {}
declare const CheckboxCardLabel: Component<"span", CheckboxCardLabelProps>;
interface CheckboxCardDescriptionProps extends HTMLStyledProps {}
declare const CheckboxCardDescription: Component<"span", CheckboxCardDescriptionProps>;
interface CheckboxCardAddonProps extends HTMLStyledProps {}
declare const CheckboxCardAddon: Component<"span", CheckboxCardAddonProps>;
//#endregion
export { CheckboxCardAddon, CheckboxCardAddonProps, CheckboxCardDescription, CheckboxCardDescriptionProps, CheckboxCardLabel, CheckboxCardLabelProps, CheckboxCardPropsContext, CheckboxCardRoot, CheckboxCardRootProps, useCheckboxCardPropsContext };
//# sourceMappingURL=checkbox-card.d.ts.map