@yamada-ui/react 2.3.1-dev-20261030022105 → 2.4.0-next-20261101160828
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/toggle/toggle-group.cjs +11 -2
- package/dist/cjs/components/toggle/toggle-group.cjs.map +1 -1
- package/dist/cjs/components/toggle/toggle.cjs.map +1 -1
- package/dist/cjs/components/toggle/toggle.style.cjs +0 -2
- package/dist/cjs/components/toggle/toggle.style.cjs.map +1 -1
- package/dist/esm/components/toggle/toggle-group.js +12 -3
- package/dist/esm/components/toggle/toggle-group.js.map +1 -1
- package/dist/esm/components/toggle/toggle.js.map +1 -1
- package/dist/esm/components/toggle/toggle.style.js +0 -2
- package/dist/esm/components/toggle/toggle.style.js.map +1 -1
- package/dist/types/components/avatar/avatar.d.ts +3 -3
- package/dist/types/components/avatar/avatar.style.d.ts +1 -1
- package/dist/types/components/carousel/carousel.style.d.ts +2 -2
- package/dist/types/components/chart/cartesian-chart.style.d.ts +1 -1
- package/dist/types/components/chart/polar-chart.style.d.ts +1 -1
- package/dist/types/components/field/use-field-props.d.ts +1 -1
- package/dist/types/components/menu/menu.style.d.ts +2 -2
- package/dist/types/components/segmented-control/segmented-control.style.d.ts +2 -2
- package/dist/types/components/steps/steps.style.d.ts +1 -1
- package/dist/types/components/timeline/timeline.d.ts +1 -1
- package/dist/types/components/timeline/timeline.style.d.ts +1 -1
- package/dist/types/components/toggle/toggle-group.d.ts +9 -1
- package/dist/types/components/toggle/toggle.d.ts +6 -6
- package/dist/types/components/toggle/toggle.style.d.ts +0 -2
- package/dist/types/components/tree/tree.style.d.ts +1 -1
- package/package.json +1 -1
|
@@ -6,12 +6,20 @@ let react = require("react");
|
|
|
6
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
7
|
//#region src/components/toggle/toggle-group.tsx
|
|
8
8
|
const ToggleGroupRoot = require_toggle.component((props) => {
|
|
9
|
-
const [, { colorScheme, size, variant, attached, ...rest }] = require_toggle.useRootComponentProps(props, "group", { transferProps: [
|
|
9
|
+
const [, { colorScheme, size, variant, attached, children, items = [], ...rest }] = require_toggle.useRootComponentProps(props, "group", { transferProps: [
|
|
10
10
|
"size",
|
|
11
11
|
"variant",
|
|
12
12
|
"colorScheme"
|
|
13
13
|
] });
|
|
14
14
|
const { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef } = require_use_toggle_group.useToggleGroup(rest);
|
|
15
|
+
const computedChildren = (0, react.useMemo)(() => {
|
|
16
|
+
if (children) return children;
|
|
17
|
+
return items.map(({ "aria-label": ariaLabel, label, value, ...rest }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toggle.Toggle, {
|
|
18
|
+
"aria-label": ariaLabel ?? label,
|
|
19
|
+
value,
|
|
20
|
+
...rest
|
|
21
|
+
}, value ?? index));
|
|
22
|
+
}, [items, children]);
|
|
15
23
|
const context = (0, react.useMemo)(() => ({
|
|
16
24
|
colorScheme,
|
|
17
25
|
size,
|
|
@@ -42,7 +50,8 @@ const ToggleGroupRoot = require_toggle.component((props) => {
|
|
|
42
50
|
value: groupContext,
|
|
43
51
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
|
|
44
52
|
attached,
|
|
45
|
-
...getGroupProps()
|
|
53
|
+
...getGroupProps(),
|
|
54
|
+
children: computedChildren
|
|
46
55
|
})
|
|
47
56
|
})
|
|
48
57
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-group.cjs","names":["component","useRootComponentProps","useToggleGroup","useMemo","TogglePropsContext","ToggleGroupContext","Group"],"sources":["../../../../src/components/toggle/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { ToggleProps } from \"./toggle\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleGroupProps } from \"./use-toggle-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {
|
|
1
|
+
{"version":3,"file":"toggle-group.cjs","names":["component","useRootComponentProps","useToggleGroup","useMemo","Toggle","TogglePropsContext","ToggleGroupContext","Group"],"sources":["../../../../src/components/toggle/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { ToggleProps } from \"./toggle\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleGroupProps } from \"./use-toggle-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n component,\n Toggle,\n TogglePropsContext,\n useRootComponentProps,\n} from \"./toggle\"\nimport { ToggleGroupContext, useToggleGroup } from \"./use-toggle-group\"\n\n/**\n * `ToggleGroup` is a set of two-state buttons that can be toggled on or off.\n *\n * @see https://yamada-ui.com/docs/components/toggle\n */\nexport interface ToggleGroupRootProps<Y extends string | string[] = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, ToggleStyle>,\n \"defaultValue\" | \"onChange\" | \"value\"\n >,\n UseToggleGroupProps<Y>,\n ThemeProps<ToggleStyle> {\n /**\n * If provided, generate options based on items.\n *\n * @default []\n */\n items?: Toggle<Y extends any[] ? Y[number] : Y>[]\n}\n\nexport const ToggleGroupRoot = component<\"div\", ToggleGroupRootProps>(\n (props: ToggleGroupRootProps) => {\n const [\n ,\n { colorScheme, size, variant, attached, children, items = [], ...rest },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\"size\", \"variant\", \"colorScheme\"],\n })\n const {\n disabled,\n readOnly,\n value,\n getGroupProps,\n onChange,\n onChangeMapRef,\n } = useToggleGroup(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return items.map(\n ({ \"aria-label\": ariaLabel, label, value, ...rest }, index) => (\n <Toggle\n key={value ?? index}\n aria-label={ariaLabel ?? label}\n value={value}\n {...rest}\n />\n ),\n )\n }, [items, children])\n const context = useMemo<ToggleProps>(\n () => ({\n colorScheme,\n size,\n variant,\n focusVisibleRing: attached ? \"inside\" : undefined,\n }),\n [variant, size, colorScheme, attached],\n )\n const groupContext = useMemo(\n () => ({\n disabled,\n readOnly,\n value,\n onChange,\n onChangeMapRef,\n }),\n [value, disabled, readOnly, onChange, onChangeMapRef],\n )\n\n return (\n <TogglePropsContext value={context}>\n <ToggleGroupContext value={groupContext}>\n <Group attached={attached} {...getGroupProps()}>\n {computedChildren}\n </Group>\n </ToggleGroupContext>\n </TogglePropsContext>\n )\n },\n \"group\",\n)() as GenericsComponent<{\n <Y extends string | string[] = string>(\n props: ToggleGroupRootProps<Y>,\n ): ReactElement\n}>\n"],"mappings":";;;;;;;AA2CA,MAAa,kBAAkBA,eAAAA,WAC5B,UAAgC;CAC/B,MAAM,GAEJ,EAAE,aAAa,MAAM,SAAS,UAAU,UAAU,QAAQ,CAAC,GAAG,GAAG,UAC/DC,eAAAA,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAQ;EAAW;CAAa,EAClD,CAAC;CACD,MAAM,EACJ,UACA,UACA,OACA,eACA,UACA,mBACEC,yBAAAA,eAAe,IAAI;CACvB,MAAM,oBAAA,GAAmBC,MAAAA,QAAAA,OAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KACV,EAAE,cAAc,WAAW,OAAO,OAAO,GAAG,QAAQ,UACnD,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;GAEE,cAAY,aAAa;GAClB;GACP,GAAI;EACL,GAJM,SAAS,KAIf,CAEL;CACF,GAAG,CAAC,OAAO,QAAQ,CAAC;CACpB,MAAM,WAAA,GAAUD,MAAAA,QAAAA,QACP;EACL;EACA;EACA;EACA,kBAAkB,WAAW,WAAW,KAAA;CAC1C,IACA;EAAC;EAAS;EAAM;EAAa;CAAQ,CACvC;CACA,MAAM,gBAAA,GAAeA,MAAAA,QAAAA,QACZ;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAU;EAAU;CAAc,CACtD;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,eAAAA,oBAAD;EAAoB,OAAO;EACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,oBAAD;GAAoB,OAAO;GACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAiB;IAAU,GAAI,cAAc;IAC1C,UAAA;GACI,CAAA;EACW,CAAA;CACF,CAAA;AAExB,GACA,OACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.cjs","names":["createSlotComponent","toggleStyle","useToggle","useInputBorder","Portal","styled","IconButton"],"sources":["../../../../src/components/toggle/toggle.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleProps } from \"./use-toggle\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { IconButton } from \"../button\"\nimport { useInputBorder } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { toggleStyle } from \"./toggle.style\"\nimport { useToggle } from \"./use-toggle\"\n\nexport interface ToggleProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<IconButtonProps, ToggleStyle>,\n \"aria-label\" | \"onChange\" | \"ref\" | \"value\"\n >,\n UseToggleProps<Y>,\n Pick<UseInputBorderProps, \"errorBorderColor\">,\n ThemeProps<ToggleStyle> {}\n\nconst {\n component,\n PropsContext: TogglePropsContext,\n usePropsContext: useTogglePropsContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<ToggleProps, ToggleStyle>(\"toggle\", toggleStyle)\n\nexport {\n component,\n TogglePropsContext,\n useRootComponentProps,\n useTogglePropsContext,\n}\n\n/**\n * `Toggle` is a two-state button that can be either on or off.\n *\n * @see https://yamada-ui.com/docs/components/toggle\n */\nexport const Toggle = withProvider<\"button\", ToggleProps>(\n ({ errorBorderColor, icon, ...rest }: ToggleProps) => {\n const { getButtonProps, getInputProps } = useToggle(rest)\n const varProps = useInputBorder({ errorBorderColor })\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <IconButton icon={icon} {...varProps} {...getButtonProps()} />\n </>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: ToggleProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"toggle.cjs","names":["createSlotComponent","toggleStyle","useToggle","useInputBorder","Portal","styled","IconButton"],"sources":["../../../../src/components/toggle/toggle.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleProps } from \"./use-toggle\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { IconButton } from \"../button\"\nimport { useInputBorder } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { toggleStyle } from \"./toggle.style\"\nimport { useToggle } from \"./use-toggle\"\n\nexport interface Toggle<Y extends string = string> extends ToggleProps<Y> {\n /**\n * The accessible name of the toggle button, unless `aria-label` is provided.\n */\n label?: string\n}\n\nexport interface ToggleProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<IconButtonProps, ToggleStyle>,\n \"aria-label\" | \"onChange\" | \"ref\" | \"value\"\n >,\n UseToggleProps<Y>,\n Pick<UseInputBorderProps, \"errorBorderColor\">,\n ThemeProps<ToggleStyle> {}\n\nconst {\n component,\n PropsContext: TogglePropsContext,\n usePropsContext: useTogglePropsContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<ToggleProps, ToggleStyle>(\"toggle\", toggleStyle)\n\nexport {\n component,\n TogglePropsContext,\n useRootComponentProps,\n useTogglePropsContext,\n}\n\n/**\n * `Toggle` is a two-state button that can be either on or off.\n *\n * @see https://yamada-ui.com/docs/components/toggle\n */\nexport const Toggle = withProvider<\"button\", ToggleProps>(\n ({ errorBorderColor, icon, ...rest }: ToggleProps) => {\n const { getButtonProps, getInputProps } = useToggle(rest)\n const varProps = useInputBorder({ errorBorderColor })\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <IconButton icon={icon} {...varProps} {...getButtonProps()} />\n </>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: ToggleProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;AAoCA,MAAM,EACJ,WACA,cAAc,oBACd,iBAAiB,uBACjB,cACA,0BACEA,yBAAAA,oBAA8C,UAAUC,qBAAAA,WAAW;;;;;;AAcvE,MAAa,SAAS,cACnB,EAAE,kBAAkB,MAAM,GAAG,WAAwB;CACpD,MAAM,EAAE,gBAAgB,kBAAkBC,mBAAAA,UAAU,IAAI;CACxD,MAAM,WAAWC,yBAAAA,eAAe,EAAE,iBAAiB,CAAC;CAEpD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;EAAkB;EAAM,GAAI;EAAU,GAAI,eAAe;CAAI,CAAA,CAC7D,EAAA,CAAA;AAEN,GACA,MACF,CAAC,CAAC"}
|
|
@@ -20,7 +20,6 @@ fullRounded: { true: { root: { rounded: "full" } } } },
|
|
|
20
20
|
ghost: { root: {
|
|
21
21
|
_checked: {
|
|
22
22
|
layerStyle: "solid",
|
|
23
|
-
borderWidth: "1px",
|
|
24
23
|
_invalid: {
|
|
25
24
|
borderColor: "{error-border-color}",
|
|
26
25
|
borderWidth: "1px"
|
|
@@ -85,7 +84,6 @@ fullRounded: { true: { root: { rounded: "full" } } } },
|
|
|
85
84
|
surface: { root: {
|
|
86
85
|
_checked: {
|
|
87
86
|
layerStyle: "solid",
|
|
88
|
-
borderWidth: "1px",
|
|
89
87
|
_invalid: { borderColor: "{error-border-color}" }
|
|
90
88
|
},
|
|
91
89
|
_notChecked: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.style.cjs","names":["defineComponentSlotStyle","iconButtonStyle"],"sources":["../../../../src/components/toggle/toggle.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { iconButtonStyle } from \"../button\"\n\nexport const toggleStyle = defineComponentSlotStyle({\n base: {\n group: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n gap: \"2\",\n },\n },\n\n props: {\n /**\n * If true, the toggle button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded: {\n true: {\n root: {\n rounded: \"full\",\n },\n },\n },\n },\n\n variants: {\n ghost: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n
|
|
1
|
+
{"version":3,"file":"toggle.style.cjs","names":["defineComponentSlotStyle","iconButtonStyle"],"sources":["../../../../src/components/toggle/toggle.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { iconButtonStyle } from \"../button\"\n\nexport const toggleStyle = defineComponentSlotStyle({\n base: {\n group: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n gap: \"2\",\n },\n },\n\n props: {\n /**\n * If true, the toggle button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded: {\n true: {\n root: {\n rounded: \"full\",\n },\n },\n },\n },\n\n variants: {\n ghost: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"ghost\",\n _hover: {\n layerStyle: \"ghost.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n outline: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n borderColor: \"colorScheme.solid\",\n borderWidth: \"1px\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"outline\",\n _hover: {\n layerStyle: \"outline.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n solid: {\n root: {\n _checked: {\n layerStyle: \"subtle\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"solid\",\n _hover: {\n layerStyle: \"solid.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n subtle: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"subtle\",\n _hover: {\n layerStyle: \"subtle.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n surface: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"surface\",\n _hover: {\n layerStyle: \"surface.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n },\n\n sizes: {\n xs: {\n root: {\n ...iconButtonStyle.sizes?.xs,\n gap: \"1\",\n },\n },\n sm: {\n root: {\n ...iconButtonStyle.sizes?.sm,\n gap: \"2\",\n },\n },\n md: {\n root: {\n ...iconButtonStyle.sizes?.md,\n gap: \"2\",\n },\n },\n lg: {\n root: {\n ...iconButtonStyle.sizes?.lg,\n gap: \"2.5\",\n },\n },\n xl: {\n root: {\n ...iconButtonStyle.sizes?.xl,\n gap: \"3\",\n },\n },\n \"2xl\": {\n root: {\n ...iconButtonStyle.sizes?.[\"2xl\"],\n gap: \"3\",\n },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"ghost\",\n },\n})\n\nexport type ToggleStyle = typeof toggleStyle\n"],"mappings":";;;AAGA,MAAa,cAAcA,eAAAA,yBAAyB;CAClD,MAAM;EACJ,OAAO,CAAC;EACR,MAAM;GACJ,wBAAwB;GACxB,KAAK;EACP;CACF;CAEA,OAAO;;;;;;AAML,aAAa,EACX,MAAM,EACJ,MAAM,EACJ,SAAS,OACX,EACF,EACF,EACF;CAEA,UAAU;EACR,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,aAAa;IACb,aAAa;IACb,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;EACA,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,QAAQ,EACN,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,eACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM;GACJ,GAAGC,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,OAAO,EACL,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,QAAQ;GAC3B,KAAK;EACP,EACF;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}
|
|
@@ -1,17 +1,25 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Group } from "../group/group.js";
|
|
3
3
|
import { ToggleGroupContext, useToggleGroup } from "./use-toggle-group.js";
|
|
4
|
-
import { TogglePropsContext, component, useRootComponentProps } from "./toggle.js";
|
|
4
|
+
import { Toggle, TogglePropsContext, component, useRootComponentProps } from "./toggle.js";
|
|
5
5
|
import { useMemo } from "react";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/toggle/toggle-group.tsx
|
|
8
8
|
const ToggleGroupRoot = component((props) => {
|
|
9
|
-
const [, { colorScheme, size, variant, attached, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
|
|
9
|
+
const [, { colorScheme, size, variant, attached, children, items = [], ...rest }] = useRootComponentProps(props, "group", { transferProps: [
|
|
10
10
|
"size",
|
|
11
11
|
"variant",
|
|
12
12
|
"colorScheme"
|
|
13
13
|
] });
|
|
14
14
|
const { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef } = useToggleGroup(rest);
|
|
15
|
+
const computedChildren = useMemo(() => {
|
|
16
|
+
if (children) return children;
|
|
17
|
+
return items.map(({ "aria-label": ariaLabel, label, value, ...rest }, index) => /* @__PURE__ */ jsx(Toggle, {
|
|
18
|
+
"aria-label": ariaLabel ?? label,
|
|
19
|
+
value,
|
|
20
|
+
...rest
|
|
21
|
+
}, value ?? index));
|
|
22
|
+
}, [items, children]);
|
|
15
23
|
const context = useMemo(() => ({
|
|
16
24
|
colorScheme,
|
|
17
25
|
size,
|
|
@@ -42,7 +50,8 @@ const ToggleGroupRoot = component((props) => {
|
|
|
42
50
|
value: groupContext,
|
|
43
51
|
children: /* @__PURE__ */ jsx(Group, {
|
|
44
52
|
attached,
|
|
45
|
-
...getGroupProps()
|
|
53
|
+
...getGroupProps(),
|
|
54
|
+
children: computedChildren
|
|
46
55
|
})
|
|
47
56
|
})
|
|
48
57
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-group.js","names":[],"sources":["../../../../src/components/toggle/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { ToggleProps } from \"./toggle\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleGroupProps } from \"./use-toggle-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {
|
|
1
|
+
{"version":3,"file":"toggle-group.js","names":[],"sources":["../../../../src/components/toggle/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { ToggleProps } from \"./toggle\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleGroupProps } from \"./use-toggle-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n component,\n Toggle,\n TogglePropsContext,\n useRootComponentProps,\n} from \"./toggle\"\nimport { ToggleGroupContext, useToggleGroup } from \"./use-toggle-group\"\n\n/**\n * `ToggleGroup` is a set of two-state buttons that can be toggled on or off.\n *\n * @see https://yamada-ui.com/docs/components/toggle\n */\nexport interface ToggleGroupRootProps<Y extends string | string[] = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, ToggleStyle>,\n \"defaultValue\" | \"onChange\" | \"value\"\n >,\n UseToggleGroupProps<Y>,\n ThemeProps<ToggleStyle> {\n /**\n * If provided, generate options based on items.\n *\n * @default []\n */\n items?: Toggle<Y extends any[] ? Y[number] : Y>[]\n}\n\nexport const ToggleGroupRoot = component<\"div\", ToggleGroupRootProps>(\n (props: ToggleGroupRootProps) => {\n const [\n ,\n { colorScheme, size, variant, attached, children, items = [], ...rest },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\"size\", \"variant\", \"colorScheme\"],\n })\n const {\n disabled,\n readOnly,\n value,\n getGroupProps,\n onChange,\n onChangeMapRef,\n } = useToggleGroup(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return items.map(\n ({ \"aria-label\": ariaLabel, label, value, ...rest }, index) => (\n <Toggle\n key={value ?? index}\n aria-label={ariaLabel ?? label}\n value={value}\n {...rest}\n />\n ),\n )\n }, [items, children])\n const context = useMemo<ToggleProps>(\n () => ({\n colorScheme,\n size,\n variant,\n focusVisibleRing: attached ? \"inside\" : undefined,\n }),\n [variant, size, colorScheme, attached],\n )\n const groupContext = useMemo(\n () => ({\n disabled,\n readOnly,\n value,\n onChange,\n onChangeMapRef,\n }),\n [value, disabled, readOnly, onChange, onChangeMapRef],\n )\n\n return (\n <TogglePropsContext value={context}>\n <ToggleGroupContext value={groupContext}>\n <Group attached={attached} {...getGroupProps()}>\n {computedChildren}\n </Group>\n </ToggleGroupContext>\n </TogglePropsContext>\n )\n },\n \"group\",\n)() as GenericsComponent<{\n <Y extends string | string[] = string>(\n props: ToggleGroupRootProps<Y>,\n ): ReactElement\n}>\n"],"mappings":";;;;;;;AA2CA,MAAa,kBAAkB,WAC5B,UAAgC;CAC/B,MAAM,GAEJ,EAAE,aAAa,MAAM,SAAS,UAAU,UAAU,QAAQ,CAAC,GAAG,GAAG,UAC/D,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAQ;EAAW;CAAa,EAClD,CAAC;CACD,MAAM,EACJ,UACA,UACA,OACA,eACA,UACA,mBACE,eAAe,IAAI;CACvB,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KACV,EAAE,cAAc,WAAW,OAAO,OAAO,GAAG,QAAQ,UACnD,oBAAC,QAAD;GAEE,cAAY,aAAa;GAClB;GACP,GAAI;EACL,GAJM,SAAS,KAIf,CAEL;CACF,GAAG,CAAC,OAAO,QAAQ,CAAC;CACpB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA,kBAAkB,WAAW,WAAW,KAAA;CAC1C,IACA;EAAC;EAAS;EAAM;EAAa;CAAQ,CACvC;CACA,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAU;EAAU;CAAc,CACtD;CAEA,OACE,oBAAC,oBAAD;EAAoB,OAAO;EACzB,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GACzB,UAAA,oBAAC,OAAD;IAAiB;IAAU,GAAI,cAAc;IAC1C,UAAA;GACI,CAAA;EACW,CAAA;CACF,CAAA;AAExB,GACA,OACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.js","names":[],"sources":["../../../../src/components/toggle/toggle.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleProps } from \"./use-toggle\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { IconButton } from \"../button\"\nimport { useInputBorder } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { toggleStyle } from \"./toggle.style\"\nimport { useToggle } from \"./use-toggle\"\n\nexport interface ToggleProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<IconButtonProps, ToggleStyle>,\n \"aria-label\" | \"onChange\" | \"ref\" | \"value\"\n >,\n UseToggleProps<Y>,\n Pick<UseInputBorderProps, \"errorBorderColor\">,\n ThemeProps<ToggleStyle> {}\n\nconst {\n component,\n PropsContext: TogglePropsContext,\n usePropsContext: useTogglePropsContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<ToggleProps, ToggleStyle>(\"toggle\", toggleStyle)\n\nexport {\n component,\n TogglePropsContext,\n useRootComponentProps,\n useTogglePropsContext,\n}\n\n/**\n * `Toggle` is a two-state button that can be either on or off.\n *\n * @see https://yamada-ui.com/docs/components/toggle\n */\nexport const Toggle = withProvider<\"button\", ToggleProps>(\n ({ errorBorderColor, icon, ...rest }: ToggleProps) => {\n const { getButtonProps, getInputProps } = useToggle(rest)\n const varProps = useInputBorder({ errorBorderColor })\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <IconButton icon={icon} {...varProps} {...getButtonProps()} />\n </>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: ToggleProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"toggle.js","names":[],"sources":["../../../../src/components/toggle/toggle.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleProps } from \"./use-toggle\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { IconButton } from \"../button\"\nimport { useInputBorder } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { toggleStyle } from \"./toggle.style\"\nimport { useToggle } from \"./use-toggle\"\n\nexport interface Toggle<Y extends string = string> extends ToggleProps<Y> {\n /**\n * The accessible name of the toggle button, unless `aria-label` is provided.\n */\n label?: string\n}\n\nexport interface ToggleProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<IconButtonProps, ToggleStyle>,\n \"aria-label\" | \"onChange\" | \"ref\" | \"value\"\n >,\n UseToggleProps<Y>,\n Pick<UseInputBorderProps, \"errorBorderColor\">,\n ThemeProps<ToggleStyle> {}\n\nconst {\n component,\n PropsContext: TogglePropsContext,\n usePropsContext: useTogglePropsContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<ToggleProps, ToggleStyle>(\"toggle\", toggleStyle)\n\nexport {\n component,\n TogglePropsContext,\n useRootComponentProps,\n useTogglePropsContext,\n}\n\n/**\n * `Toggle` is a two-state button that can be either on or off.\n *\n * @see https://yamada-ui.com/docs/components/toggle\n */\nexport const Toggle = withProvider<\"button\", ToggleProps>(\n ({ errorBorderColor, icon, ...rest }: ToggleProps) => {\n const { getButtonProps, getInputProps } = useToggle(rest)\n const varProps = useInputBorder({ errorBorderColor })\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <IconButton icon={icon} {...varProps} {...getButtonProps()} />\n </>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: ToggleProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;AAoCA,MAAM,EACJ,WACA,cAAc,oBACd,iBAAiB,uBACjB,cACA,0BACE,oBAA8C,UAAU,WAAW;;;;;;AAcvE,MAAa,SAAS,cACnB,EAAE,kBAAkB,MAAM,GAAG,WAAwB;CACpD,MAAM,EAAE,gBAAgB,kBAAkB,UAAU,IAAI;CACxD,MAAM,WAAW,eAAe,EAAE,iBAAiB,CAAC;CAEpD,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,oBAAC,YAAD;EAAkB;EAAM,GAAI;EAAU,GAAI,eAAe;CAAI,CAAA,CAC7D,EAAA,CAAA;AAEN,GACA,MACF,CAAC,CAAC"}
|
|
@@ -20,7 +20,6 @@ fullRounded: { true: { root: { rounded: "full" } } } },
|
|
|
20
20
|
ghost: { root: {
|
|
21
21
|
_checked: {
|
|
22
22
|
layerStyle: "solid",
|
|
23
|
-
borderWidth: "1px",
|
|
24
23
|
_invalid: {
|
|
25
24
|
borderColor: "{error-border-color}",
|
|
26
25
|
borderWidth: "1px"
|
|
@@ -85,7 +84,6 @@ fullRounded: { true: { root: { rounded: "full" } } } },
|
|
|
85
84
|
surface: { root: {
|
|
86
85
|
_checked: {
|
|
87
86
|
layerStyle: "solid",
|
|
88
|
-
borderWidth: "1px",
|
|
89
87
|
_invalid: { borderColor: "{error-border-color}" }
|
|
90
88
|
},
|
|
91
89
|
_notChecked: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.style.js","names":[],"sources":["../../../../src/components/toggle/toggle.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { iconButtonStyle } from \"../button\"\n\nexport const toggleStyle = defineComponentSlotStyle({\n base: {\n group: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n gap: \"2\",\n },\n },\n\n props: {\n /**\n * If true, the toggle button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded: {\n true: {\n root: {\n rounded: \"full\",\n },\n },\n },\n },\n\n variants: {\n ghost: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n
|
|
1
|
+
{"version":3,"file":"toggle.style.js","names":[],"sources":["../../../../src/components/toggle/toggle.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { iconButtonStyle } from \"../button\"\n\nexport const toggleStyle = defineComponentSlotStyle({\n base: {\n group: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n gap: \"2\",\n },\n },\n\n props: {\n /**\n * If true, the toggle button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded: {\n true: {\n root: {\n rounded: \"full\",\n },\n },\n },\n },\n\n variants: {\n ghost: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"ghost\",\n _hover: {\n layerStyle: \"ghost.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n outline: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n borderColor: \"colorScheme.solid\",\n borderWidth: \"1px\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"outline\",\n _hover: {\n layerStyle: \"outline.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n solid: {\n root: {\n _checked: {\n layerStyle: \"subtle\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"solid\",\n _hover: {\n layerStyle: \"solid.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n subtle: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"subtle\",\n _hover: {\n layerStyle: \"subtle.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n surface: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"surface\",\n _hover: {\n layerStyle: \"surface.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n },\n\n sizes: {\n xs: {\n root: {\n ...iconButtonStyle.sizes?.xs,\n gap: \"1\",\n },\n },\n sm: {\n root: {\n ...iconButtonStyle.sizes?.sm,\n gap: \"2\",\n },\n },\n md: {\n root: {\n ...iconButtonStyle.sizes?.md,\n gap: \"2\",\n },\n },\n lg: {\n root: {\n ...iconButtonStyle.sizes?.lg,\n gap: \"2.5\",\n },\n },\n xl: {\n root: {\n ...iconButtonStyle.sizes?.xl,\n gap: \"3\",\n },\n },\n \"2xl\": {\n root: {\n ...iconButtonStyle.sizes?.[\"2xl\"],\n gap: \"3\",\n },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"ghost\",\n },\n})\n\nexport type ToggleStyle = typeof toggleStyle\n"],"mappings":";;;AAGA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,OAAO,CAAC;EACR,MAAM;GACJ,wBAAwB;GACxB,KAAK;EACP;CACF;CAEA,OAAO;;;;;;AAML,aAAa,EACX,MAAM,EACJ,MAAM,EACJ,SAAS,OACX,EACF,EACF,EACF;CAEA,UAAU;EACR,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,aAAa;IACb,aAAa;IACb,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;EACA,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,QAAQ,EACN,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,eACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,OAAO,EACL,MAAM;GACJ,GAAG,gBAAgB,QAAQ;GAC3B,KAAK;EACP,EACF;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}
|
|
@@ -22,7 +22,7 @@ export interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, U
|
|
|
22
22
|
*/
|
|
23
23
|
imageProps?: AvatarImageProps;
|
|
24
24
|
}
|
|
25
|
-
declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "
|
|
25
|
+
declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
26
26
|
shape: {
|
|
27
27
|
circle: {
|
|
28
28
|
root: {
|
|
@@ -141,7 +141,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
141
141
|
};
|
|
142
142
|
};
|
|
143
143
|
};
|
|
144
|
-
}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: import("react").Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "
|
|
144
|
+
}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: import("react").Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
145
145
|
shape: {
|
|
146
146
|
circle: {
|
|
147
147
|
root: {
|
|
@@ -260,7 +260,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
260
260
|
};
|
|
261
261
|
};
|
|
262
262
|
};
|
|
263
|
-
}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, import("@yamada-ui/utils").Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "
|
|
263
|
+
}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, import("@yamada-ui/utils").Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
264
264
|
shape: {
|
|
265
265
|
circle: {
|
|
266
266
|
root: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import "../../index.js";
|
|
3
3
|
//#region src/components/avatar/avatar.style.d.ts
|
|
4
|
-
export declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "
|
|
4
|
+
export declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
5
5
|
/**
|
|
6
6
|
* The shape of the component
|
|
7
7
|
*
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
|
2
2
|
import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
//#region src/components/carousel/carousel.style.d.ts
|
|
5
|
-
export declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "
|
|
5
|
+
export declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators">>, {
|
|
6
6
|
sm: {
|
|
7
7
|
root: {
|
|
8
8
|
h: "sm";
|
|
@@ -18,7 +18,7 @@ export declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root"
|
|
|
18
18
|
h: "lg";
|
|
19
19
|
};
|
|
20
20
|
};
|
|
21
|
-
}, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "
|
|
21
|
+
}, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators">>>;
|
|
22
22
|
export type CarouselStyle = typeof carouselStyle;
|
|
23
23
|
//#endregion
|
|
24
24
|
//# sourceMappingURL=carousel.style.d.ts.map
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
|
2
2
|
import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
//#region src/components/chart/cartesian-chart.style.d.ts
|
|
5
|
-
export declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "
|
|
5
|
+
export declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
|
|
6
6
|
export type CartesianChartStyle = typeof cartesianChartStyle;
|
|
7
7
|
//#endregion
|
|
8
8
|
//# sourceMappingURL=cartesian-chart.style.d.ts.map
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
|
2
2
|
import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
//#region src/components/chart/polar-chart.style.d.ts
|
|
5
|
-
export declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "
|
|
5
|
+
export declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
|
|
6
6
|
export type PolarChartStyle = typeof polarChartStyle;
|
|
7
7
|
//#endregion
|
|
8
8
|
//# sourceMappingURL=polar-chart.style.d.ts.map
|
|
@@ -17,7 +17,7 @@ export declare const useFieldProps: <Y extends HTMLElement, M extends Dict>({ id
|
|
|
17
17
|
disabled: boolean | undefined;
|
|
18
18
|
readOnly: boolean | undefined;
|
|
19
19
|
required: boolean | undefined;
|
|
20
|
-
} & Omit<M & UseFieldProps<Y>, "disabled" | "readOnly" | "
|
|
20
|
+
} & Omit<M & UseFieldProps<Y>, "disabled" | "readOnly" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "invalid" | "name" | "required" | "notSupportReadOnly">;
|
|
21
21
|
ariaProps: {
|
|
22
22
|
"aria-describedby": any;
|
|
23
23
|
"aria-disabled": (boolean | "true" | "false") | undefined;
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
|
2
2
|
import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
//#region src/components/menu/menu.style.d.ts
|
|
5
|
-
export declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "
|
|
5
|
+
export declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>, {
|
|
6
6
|
sm: {
|
|
7
7
|
command: {
|
|
8
8
|
fontSize: "2xs";
|
|
@@ -87,7 +87,7 @@ export declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label"
|
|
|
87
87
|
px: "2";
|
|
88
88
|
};
|
|
89
89
|
};
|
|
90
|
-
}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "
|
|
90
|
+
}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>>;
|
|
91
91
|
export type MenuStyle = typeof menuStyle;
|
|
92
92
|
//#endregion
|
|
93
93
|
//# sourceMappingURL=menu.style.d.ts.map
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
|
2
2
|
import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
//#region src/components/segmented-control/segmented-control.style.d.ts
|
|
5
|
-
export declare const segmentedControlStyle: ComponentSlotStyle<"root" | "
|
|
5
|
+
export declare const segmentedControlStyle: ComponentSlotStyle<"root" | "item" | "indicator", {
|
|
6
6
|
/**
|
|
7
7
|
* If `true`, the segmented control will be full rounded.
|
|
8
8
|
*
|
|
@@ -114,7 +114,7 @@ export declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicat
|
|
|
114
114
|
};
|
|
115
115
|
};
|
|
116
116
|
};
|
|
117
|
-
}, CSSModifierObject<CSSSlotObject<"root" | "
|
|
117
|
+
}, CSSModifierObject<CSSSlotObject<"root" | "item" | "indicator">>>;
|
|
118
118
|
export type SegmentedControlStyle = typeof segmentedControlStyle;
|
|
119
119
|
//#endregion
|
|
120
120
|
//# sourceMappingURL=segmented-control.style.d.ts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import "../../index.js";
|
|
3
3
|
//#region src/components/steps/steps.style.d.ts
|
|
4
|
-
export declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "
|
|
4
|
+
export declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "item" | "indicator" | "description", {
|
|
5
5
|
/**
|
|
6
6
|
* The orientation of the steps.
|
|
7
7
|
*
|
|
@@ -62,7 +62,7 @@ declare const TimelinePropsContext: import("react").Context<Partial<TimelineRoot
|
|
|
62
62
|
*
|
|
63
63
|
* @see https://yamada-ui.com/docs/components/timeline
|
|
64
64
|
*/
|
|
65
|
-
export declare const TimelineRoot: Component<({ variant: variantProp, children, index, items, ...rest }: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "
|
|
65
|
+
export declare const TimelineRoot: Component<({ variant: variantProp, children, index, items, ...rest }: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "item" | "indicator" | "description" | "connector", {
|
|
66
66
|
align: {
|
|
67
67
|
center: {
|
|
68
68
|
content: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import "../../index.js";
|
|
3
3
|
//#region src/components/timeline/timeline.style.d.ts
|
|
4
|
-
export declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "
|
|
4
|
+
export declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "item" | "indicator" | "description" | "connector", {
|
|
5
5
|
/**
|
|
6
6
|
* The alignment of the timeline.
|
|
7
7
|
*
|
|
@@ -4,6 +4,7 @@ import "../../core/index.js";
|
|
|
4
4
|
import { GroupProps } from "../group/group.js";
|
|
5
5
|
import "../group/index.js";
|
|
6
6
|
import { ToggleStyle } from "./toggle.style.js";
|
|
7
|
+
import { Toggle } from "./toggle.js";
|
|
7
8
|
import { UseToggleGroupProps } from "./use-toggle-group.js";
|
|
8
9
|
import { ReactElement } from "react";
|
|
9
10
|
//#region src/components/toggle/toggle-group.d.ts
|
|
@@ -12,7 +13,14 @@ import { ReactElement } from "react";
|
|
|
12
13
|
*
|
|
13
14
|
* @see https://yamada-ui.com/docs/components/toggle
|
|
14
15
|
*/
|
|
15
|
-
export interface ToggleGroupRootProps<Y extends string | string[] = string> extends Omit<WithoutThemeProps<GroupProps, ToggleStyle>, "defaultValue" | "onChange" | "value">, UseToggleGroupProps<Y>, ThemeProps<ToggleStyle> {
|
|
16
|
+
export interface ToggleGroupRootProps<Y extends string | string[] = string> extends Omit<WithoutThemeProps<GroupProps, ToggleStyle>, "defaultValue" | "onChange" | "value">, UseToggleGroupProps<Y>, ThemeProps<ToggleStyle> {
|
|
17
|
+
/**
|
|
18
|
+
* If provided, generate options based on items.
|
|
19
|
+
*
|
|
20
|
+
* @default []
|
|
21
|
+
*/
|
|
22
|
+
items?: Toggle<Y extends any[] ? Y[number] : Y>[];
|
|
23
|
+
}
|
|
16
24
|
export declare const ToggleGroupRoot: GenericsComponent<{
|
|
17
25
|
<Y extends string | string[] = string>(props: ToggleGroupRootProps<Y>): ReactElement;
|
|
18
26
|
}>;
|
|
@@ -12,6 +12,12 @@ import { UseToggleProps } from "./use-toggle.js";
|
|
|
12
12
|
import "../../index.js";
|
|
13
13
|
import { ReactElement } from "react";
|
|
14
14
|
//#region src/components/toggle/toggle.d.ts
|
|
15
|
+
export interface Toggle<Y extends string = string> extends ToggleProps<Y> {
|
|
16
|
+
/**
|
|
17
|
+
* The accessible name of the toggle button, unless `aria-label` is provided.
|
|
18
|
+
*/
|
|
19
|
+
label?: string;
|
|
20
|
+
}
|
|
15
21
|
export interface ToggleProps<Y extends string = string> extends Omit<WithoutThemeProps<IconButtonProps, ToggleStyle>, "aria-label" | "onChange" | "ref" | "value">, UseToggleProps<Y>, Pick<UseInputBorderProps, "errorBorderColor">, ThemeProps<ToggleStyle> {}
|
|
16
22
|
declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
|
|
17
23
|
fullRounded: {
|
|
@@ -69,7 +75,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
69
75
|
root: {
|
|
70
76
|
_checked: {
|
|
71
77
|
layerStyle: "solid";
|
|
72
|
-
borderWidth: "1px";
|
|
73
78
|
_invalid: {
|
|
74
79
|
borderColor: "{error-border-color}";
|
|
75
80
|
borderWidth: "1px";
|
|
@@ -154,7 +159,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
154
159
|
root: {
|
|
155
160
|
_checked: {
|
|
156
161
|
layerStyle: "solid";
|
|
157
|
-
borderWidth: "1px";
|
|
158
162
|
_invalid: {
|
|
159
163
|
borderColor: "{error-border-color}";
|
|
160
164
|
};
|
|
@@ -226,7 +230,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
226
230
|
root: {
|
|
227
231
|
_checked: {
|
|
228
232
|
layerStyle: "solid";
|
|
229
|
-
borderWidth: "1px";
|
|
230
233
|
_invalid: {
|
|
231
234
|
borderColor: "{error-border-color}";
|
|
232
235
|
borderWidth: "1px";
|
|
@@ -311,7 +314,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
311
314
|
root: {
|
|
312
315
|
_checked: {
|
|
313
316
|
layerStyle: "solid";
|
|
314
|
-
borderWidth: "1px";
|
|
315
317
|
_invalid: {
|
|
316
318
|
borderColor: "{error-border-color}";
|
|
317
319
|
};
|
|
@@ -383,7 +385,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
383
385
|
root: {
|
|
384
386
|
_checked: {
|
|
385
387
|
layerStyle: "solid";
|
|
386
|
-
borderWidth: "1px";
|
|
387
388
|
_invalid: {
|
|
388
389
|
borderColor: "{error-border-color}";
|
|
389
390
|
borderWidth: "1px";
|
|
@@ -468,7 +469,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
468
469
|
root: {
|
|
469
470
|
_checked: {
|
|
470
471
|
layerStyle: "solid";
|
|
471
|
-
borderWidth: "1px";
|
|
472
472
|
_invalid: {
|
|
473
473
|
borderColor: "{error-border-color}";
|
|
474
474
|
};
|
|
@@ -62,7 +62,6 @@ export declare const toggleStyle: ComponentSlotStyle<"group" | "root", {
|
|
|
62
62
|
root: {
|
|
63
63
|
_checked: {
|
|
64
64
|
layerStyle: "solid";
|
|
65
|
-
borderWidth: "1px";
|
|
66
65
|
_invalid: {
|
|
67
66
|
borderColor: "{error-border-color}";
|
|
68
67
|
borderWidth: "1px";
|
|
@@ -147,7 +146,6 @@ export declare const toggleStyle: ComponentSlotStyle<"group" | "root", {
|
|
|
147
146
|
root: {
|
|
148
147
|
_checked: {
|
|
149
148
|
layerStyle: "solid";
|
|
150
|
-
borderWidth: "1px";
|
|
151
149
|
_invalid: {
|
|
152
150
|
borderColor: "{error-border-color}";
|
|
153
151
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import "../../index.js";
|
|
3
3
|
//#region src/components/tree/tree.style.d.ts
|
|
4
|
-
export declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "
|
|
4
|
+
export declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "item" | "indicator", {
|
|
5
5
|
/**
|
|
6
6
|
* The shape of the component
|
|
7
7
|
*
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.4.0-next-20261101160828",
|
|
5
5
|
"description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"yamada",
|