@yamada-ui/react 2.3.1 → 2.4.0-next-20261102081118
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/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/types/components/avatar/avatar.d.ts +3 -3
- package/dist/types/components/avatar/avatar.style.d.ts +1 -1
- package/dist/types/components/chart/polar-chart.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 -0
- 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
|
// 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"}
|
|
@@ -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
|
// 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"}
|
|
@@ -21,7 +21,7 @@ export interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, U
|
|
|
21
21
|
*/
|
|
22
22
|
imageProps?: AvatarImageProps;
|
|
23
23
|
}
|
|
24
|
-
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" | "
|
|
24
|
+
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", {
|
|
25
25
|
shape: {
|
|
26
26
|
circle: {
|
|
27
27
|
root: {
|
|
@@ -140,7 +140,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
140
140
|
};
|
|
141
141
|
};
|
|
142
142
|
};
|
|
143
|
-
}>>> | 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" | "
|
|
143
|
+
}>>> | 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", {
|
|
144
144
|
shape: {
|
|
145
145
|
circle: {
|
|
146
146
|
root: {
|
|
@@ -259,7 +259,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
259
259
|
};
|
|
260
260
|
};
|
|
261
261
|
};
|
|
262
|
-
}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, import("@yamada-ui/utils").Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "
|
|
262
|
+
}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, import("@yamada-ui/utils").Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
263
263
|
shape: {
|
|
264
264
|
circle: {
|
|
265
265
|
root: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import "../../index.js";
|
|
3
|
-
export declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "
|
|
3
|
+
export declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
4
4
|
/**
|
|
5
5
|
* The shape of the component
|
|
6
6
|
*
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
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
|
-
export declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "
|
|
4
|
+
export declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
|
|
5
5
|
export type PolarChartStyle = typeof polarChartStyle;
|
|
6
6
|
//# sourceMappingURL=polar-chart.style.d.ts.map
|
|
@@ -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
|
/**
|
|
@@ -11,7 +12,14 @@ import { ReactElement } from "react";
|
|
|
11
12
|
*
|
|
12
13
|
* @see https://yamada-ui.com/docs/components/toggle
|
|
13
14
|
*/
|
|
14
|
-
export interface ToggleGroupRootProps<Y extends string | string[] = string> extends Omit<WithoutThemeProps<GroupProps, ToggleStyle>, "defaultValue" | "onChange" | "value">, UseToggleGroupProps<Y>, ThemeProps<ToggleStyle> {
|
|
15
|
+
export interface ToggleGroupRootProps<Y extends string | string[] = string> extends Omit<WithoutThemeProps<GroupProps, ToggleStyle>, "defaultValue" | "onChange" | "value">, UseToggleGroupProps<Y>, ThemeProps<ToggleStyle> {
|
|
16
|
+
/**
|
|
17
|
+
* If provided, generate options based on items.
|
|
18
|
+
*
|
|
19
|
+
* @default []
|
|
20
|
+
*/
|
|
21
|
+
items?: Toggle<Y extends any[] ? Y[number] : Y>[];
|
|
22
|
+
}
|
|
15
23
|
export declare const ToggleGroupRoot: GenericsComponent<{
|
|
16
24
|
<Y extends string | string[] = string>(props: ToggleGroupRootProps<Y>): ReactElement;
|
|
17
25
|
}>;
|
|
@@ -11,6 +11,12 @@ import { ToggleStyle } from "./toggle.style.js";
|
|
|
11
11
|
import { UseToggleProps } from "./use-toggle.js";
|
|
12
12
|
import "../../index.js";
|
|
13
13
|
import { ReactElement } from "react";
|
|
14
|
+
export interface Toggle<Y extends string = string> extends ToggleProps<Y> {
|
|
15
|
+
/**
|
|
16
|
+
* The accessible name of the toggle button, unless `aria-label` is provided.
|
|
17
|
+
*/
|
|
18
|
+
label?: string;
|
|
19
|
+
}
|
|
14
20
|
export interface ToggleProps<Y extends string = string> extends Omit<WithoutThemeProps<IconButtonProps, ToggleStyle>, "aria-label" | "onChange" | "ref" | "value">, UseToggleProps<Y>, Pick<UseInputBorderProps, "errorBorderColor">, ThemeProps<ToggleStyle> {}
|
|
15
21
|
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", {
|
|
16
22
|
fullRounded: {
|
package/package.json
CHANGED