@yamada-ui/segmented-control 0.4.9 → 0.4.10
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/{chunk-WCV4QURB.mjs → chunk-LCPXOL6W.mjs} +1 -0
- package/dist/chunk-LCPXOL6W.mjs.map +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2 -1
- package/dist/index.mjs.map +1 -0
- package/dist/segmented-control.js +1 -0
- package/dist/segmented-control.js.map +1 -0
- package/dist/segmented-control.mjs +2 -1
- package/dist/segmented-control.mjs.map +1 -0
- package/package.json +9 -8
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport { useResizeObserver } from \"@yamada-ui/use-resize-observer\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<HTMLUIProps<\"div\">, \"onChange\"> &\n ThemeProps<\"SegmentedControl\"> &\n SegmentedControlOptions\n\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n ...rest\n } = omitThemeProps(mergedProps)\n const isMountedRef = useIsMounted()\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const [observerRef, containerRect] = useResizeObserver()\n const containerRef = useRef<HTMLDivElement>(null)\n const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [value, setValue] = useControllableState({\n value: rest.value,\n defaultValue: rest.defaultValue,\n onChange: rest.onChange,\n })\n\n const getActivePosition = useCallback(() => {\n const rect = { width: 0, height: 0, x: 0, y: 0 }\n\n const el = labelRefs.current.get(value)\n\n if (!el || !containerRef.current || !observerRef.current) return rect\n\n const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current)\n\n const gutterX = parseFloat(paddingLeft) || 0\n const gutterY = parseFloat(paddingTop) || 0\n\n let { width, height } = el.getBoundingClientRect()\n rect.x = el.offsetLeft - gutterX\n rect.y = el.offsetTop - gutterY\n\n rect.width = width * (el.offsetWidth / width) || 0\n rect.height = height * (el.offsetWidth / width) || 0\n\n return rect\n }, [observerRef, value])\n\n const [activePosition, setActivePosition] = useState(getActivePosition)\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"value\", \"defaultValue\", \"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, observerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, observerRef, onBlur, rest],\n )\n\n const getActiveProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const { width, height, x, y } = activePosition\n\n return {\n ...props,\n ref,\n style: {\n position: \"absolute\",\n zIndex: 1,\n width,\n height,\n transform: `translate(${x}px, ${y}px)`,\n },\n }\n },\n [activePosition],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === value\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === value\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n style: { position: \"relative\", zIndex: 2 },\n }\n },\n [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n useEffect(() => {\n setActivePosition(getActivePosition())\n }, [focusedIndex, containerRect, value, getActivePosition])\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (value == null && rest.defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton) continue\n\n const value = child.props.value\n\n setValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles }}\n >\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {isMountedRef.current ? (\n <ui.span\n className=\"ui-segmented-control__active\"\n {...getActiveProps()}\n __css={styles.active}\n />\n ) : null}\n\n {computedChildren}\n </ui.div>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n ...rest\n },\n ref,\n ) => {\n const { getInputProps, getLabelProps, styles } = useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n <ui.span>{children}</ui.span>\n </ui.label>\n )\n },\n)\n"],"mappings":"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","names":["props","ref","value"]}
|
package/dist/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n SegmentedControlItem,\n SegmentedControlProps,\n SegmentedControlButtonProps,\n} from \"./segmented-control\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport { useResizeObserver } from \"@yamada-ui/use-resize-observer\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<HTMLUIProps<\"div\">, \"onChange\"> &\n ThemeProps<\"SegmentedControl\"> &\n SegmentedControlOptions\n\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n ...rest\n } = omitThemeProps(mergedProps)\n const isMountedRef = useIsMounted()\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const [observerRef, containerRect] = useResizeObserver()\n const containerRef = useRef<HTMLDivElement>(null)\n const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [value, setValue] = useControllableState({\n value: rest.value,\n defaultValue: rest.defaultValue,\n onChange: rest.onChange,\n })\n\n const getActivePosition = useCallback(() => {\n const rect = { width: 0, height: 0, x: 0, y: 0 }\n\n const el = labelRefs.current.get(value)\n\n if (!el || !containerRef.current || !observerRef.current) return rect\n\n const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current)\n\n const gutterX = parseFloat(paddingLeft) || 0\n const gutterY = parseFloat(paddingTop) || 0\n\n let { width, height } = el.getBoundingClientRect()\n rect.x = el.offsetLeft - gutterX\n rect.y = el.offsetTop - gutterY\n\n rect.width = width * (el.offsetWidth / width) || 0\n rect.height = height * (el.offsetWidth / width) || 0\n\n return rect\n }, [observerRef, value])\n\n const [activePosition, setActivePosition] = useState(getActivePosition)\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"value\", \"defaultValue\", \"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, observerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, observerRef, onBlur, rest],\n )\n\n const getActiveProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const { width, height, x, y } = activePosition\n\n return {\n ...props,\n ref,\n style: {\n position: \"absolute\",\n zIndex: 1,\n width,\n height,\n transform: `translate(${x}px, ${y}px)`,\n },\n }\n },\n [activePosition],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === value\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === value\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n style: { position: \"relative\", zIndex: 2 },\n }\n },\n [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n useEffect(() => {\n setActivePosition(getActivePosition())\n }, [focusedIndex, containerRect, value, getActivePosition])\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (value == null && rest.defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton) continue\n\n const value = child.props.value\n\n setValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles }}\n >\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {isMountedRef.current ? (\n <ui.span\n className=\"ui-segmented-control__active\"\n {...getActiveProps()}\n __css={styles.active}\n />\n ) : null}\n\n {computedChildren}\n </ui.div>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n ...rest\n },\n ref,\n ) => {\n const { getInputProps, getLabelProps, styles } = useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n <ui.span>{children}</ui.span>\n </ui.label>\n )\n },\n)\n"],"mappings":"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","names":["props","ref","value"]}
|
package/dist/index.mjs
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport { useResizeObserver } from \"@yamada-ui/use-resize-observer\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<HTMLUIProps<\"div\">, \"onChange\"> &\n ThemeProps<\"SegmentedControl\"> &\n SegmentedControlOptions\n\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n ...rest\n } = omitThemeProps(mergedProps)\n const isMountedRef = useIsMounted()\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const [observerRef, containerRect] = useResizeObserver()\n const containerRef = useRef<HTMLDivElement>(null)\n const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [value, setValue] = useControllableState({\n value: rest.value,\n defaultValue: rest.defaultValue,\n onChange: rest.onChange,\n })\n\n const getActivePosition = useCallback(() => {\n const rect = { width: 0, height: 0, x: 0, y: 0 }\n\n const el = labelRefs.current.get(value)\n\n if (!el || !containerRef.current || !observerRef.current) return rect\n\n const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current)\n\n const gutterX = parseFloat(paddingLeft) || 0\n const gutterY = parseFloat(paddingTop) || 0\n\n let { width, height } = el.getBoundingClientRect()\n rect.x = el.offsetLeft - gutterX\n rect.y = el.offsetTop - gutterY\n\n rect.width = width * (el.offsetWidth / width) || 0\n rect.height = height * (el.offsetWidth / width) || 0\n\n return rect\n }, [observerRef, value])\n\n const [activePosition, setActivePosition] = useState(getActivePosition)\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"value\", \"defaultValue\", \"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, observerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, observerRef, onBlur, rest],\n )\n\n const getActiveProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const { width, height, x, y } = activePosition\n\n return {\n ...props,\n ref,\n style: {\n position: \"absolute\",\n zIndex: 1,\n width,\n height,\n transform: `translate(${x}px, ${y}px)`,\n },\n }\n },\n [activePosition],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === value\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === value\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n style: { position: \"relative\", zIndex: 2 },\n }\n },\n [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n useEffect(() => {\n setActivePosition(getActivePosition())\n }, [focusedIndex, containerRect, value, getActivePosition])\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (value == null && rest.defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton) continue\n\n const value = child.props.value\n\n setValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles }}\n >\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {isMountedRef.current ? (\n <ui.span\n className=\"ui-segmented-control__active\"\n {...getActiveProps()}\n __css={styles.active}\n />\n ) : null}\n\n {computedChildren}\n </ui.div>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n ...rest\n },\n ref,\n ) => {\n const { getInputProps, getLabelProps, styles } = useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n <ui.span>{children}</ui.span>\n </ui.label>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAKO;AACP,oCAAqC;AACrC,4BAAiC;AACjC,+BAAkC;AAClC,iCAAkC;AAElC,mBAWO;AAEP,mBAAgE;AAyRxD;AAnRR,IAAM,EAAE,4BAA4B,gBAAgB,cAAc,QAChE,wCAAoC;AAQtC,IAAM,CAAC,0BAA0B,mBAAmB,QAClD,4BAAuC;AAAA,EACrC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AA2CI,IAAM,uBAAmB;AAAA,EAC9B,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,QAAI;AAAA,MAC5B;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,MACT,GAAG;AAAA,IACL,QAAI,4BAAe,WAAW;AAC9B,UAAM,mBAAe,2BAAa;AAElC,+BAAO,oBAAM;AACb,iCAAS,yBAAqB,oBAAM,CAAC;AAErC,SAAK,eAAW,6BAAe,KAAK,QAAQ;AAE5C,UAAM,cAAc,eAAe;AAEnC,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAiB,EAAE;AAC3D,UAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAkB,KAAK;AACnE,UAAM,CAAC,aAAa,aAAa,QAAI,8CAAkB;AACvD,UAAM,mBAAe,qBAAuB,IAAI;AAChD,UAAM,gBAAY,qBAA+C,oBAAI,IAAI,CAAC;AAE1E,UAAM,CAAC,OAAO,QAAQ,QAAI,oDAAqB;AAAA,MAC7C,OAAO,KAAK;AAAA,MACZ,cAAc,KAAK;AAAA,MACnB,UAAU,KAAK;AAAA,IACjB,CAAC;AAED,UAAM,wBAAoB,0BAAY,MAAM;AAC1C,YAAM,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,GAAG,GAAG,GAAG,EAAE;AAE/C,YAAM,KAAK,UAAU,QAAQ,IAAI,KAAK;AAEtC,UAAI,CAAC,MAAM,CAAC,aAAa,WAAW,CAAC,YAAY;AAAS,eAAO;AAEjE,YAAM,EAAE,aAAa,WAAW,IAAI,iBAAiB,aAAa,OAAO;AAEzE,YAAM,UAAU,WAAW,WAAW,KAAK;AAC3C,YAAM,UAAU,WAAW,UAAU,KAAK;AAE1C,UAAI,EAAE,OAAO,OAAO,IAAI,GAAG,sBAAsB;AACjD,WAAK,IAAI,GAAG,aAAa;AACzB,WAAK,IAAI,GAAG,YAAY;AAExB,WAAK,QAAQ,SAAS,GAAG,cAAc,UAAU;AACjD,WAAK,SAAS,UAAU,GAAG,cAAc,UAAU;AAEnD,aAAO;AAAA,IACT,GAAG,CAAC,aAAa,KAAK,CAAC;AAEvB,UAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,iBAAiB;AAEtE,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AACrC,YAAI,cAAc,YAAY;AAC5B,aAAG,eAAe;AAElB;AAAA,QACF;AAEA,iBAAS,GAAG,OAAO,KAAK;AAAA,MAC1B;AAAA,MACA,CAAC,YAAY,YAAY,QAAQ;AAAA,IACnC;AAEA,UAAM,cAAU;AAAA,MACd,CAAC,OAAe,SAAkB;AAChC,YAAI;AAAY;AAEhB,YAAI,MAAM;AACR,gBAAM,OAAO,YAAY,iBAAiB,KAAK;AAE/C,cAAI;AAAM,4BAAgB,KAAK,KAAK;AAAA,QACtC,OAAO;AACL,0BAAgB,KAAK;AAAA,QACvB;AAAA,MACF;AAAA,MACA,CAAC,aAAa,UAAU;AAAA,IAC1B;AAEA,UAAM,aAAS,0BAAY,MAAM,gBAAgB,EAAE,GAAG,CAAC,CAAC;AAExD,UAAM,wBAAgC;AAAA,MACpC,CAACA,SAAQ,CAAC,GAAGC,OAAM,UAAU;AAAA,QAC3B,OAAG,yBAAW,MAAM,CAAC,SAAS,gBAAgB,UAAU,CAAC;AAAA,QACzD,GAAGD;AAAA,QACH,SAAK,wBAAU,cAAc,aAAaC,IAAG;AAAA,QAC7C;AAAA,QACA,qBAAiB,uBAAS,UAAU;AAAA,QACpC,qBAAiB,uBAAS,UAAU;AAAA,QACpC,YAAQ,yBAAWD,OAAM,QAAQ,MAAM;AAAA,MACzC;AAAA,MACA,CAAC,IAAI,YAAY,YAAY,aAAa,QAAQ,IAAI;AAAA,IACxD;AAEA,UAAM,qBAA6B;AAAA,MACjC,CAACA,SAAQ,CAAC,GAAGC,OAAM,SAAS;AAC1B,cAAM,EAAE,OAAO,QAAQ,GAAG,EAAE,IAAI;AAEhC,eAAO;AAAA,UACL,GAAGD;AAAA,UACH,KAAAC;AAAA,UACA,OAAO;AAAA,YACL,UAAU;AAAA,YACV,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA,WAAW,aAAa,CAAC,OAAO,CAAC;AAAA,UACnC;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,cAAc;AAAA,IACjB;AAEA,UAAM,oBAAuD;AAAA,MAC3D,CAAC,EAAE,OAAO,GAAGD,OAAM,IAAI,CAAC,GAAGC,OAAM,SAAS;AAnNhD;AAoNQ,cAAM,YAAW,WAAAD,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,YAAW,WAAAA,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,UAAUA,OAAM,UAAU;AAEhC,eAAO;AAAA,UACL,OAAG,yBAAWA,QAAO,CAAC,cAAc,YAAY,CAAC;AAAA,UACjD,KAAAC;AAAA,UACA,IAAI,GAAG,EAAE,IAAI,KAAK;AAAA,UAClB,MAAM;AAAA,UACN;AAAA,UACA,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UACA,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,UAAU,YAAY;AAAA,UAC7C,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA,cAAU;AAAA,YAAWD,OAAM;AAAA,YAAU,CAAC,OACpC,CAAC,YAAY,CAAC,WACV,SAAS,EAAmC,IAC5C,CAAC;AAAA,UACP;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,YAAY,YAAY,OAAO,IAAI,MAAM,cAAc,QAAQ;AAAA,IAClE;AAEA,UAAM,oBAAuD;AAAA,MAC3D,CAAC,EAAE,OAAO,GAAGA,OAAM,IAAI,CAAC,GAAGC,OAAM,SAAS;AA3PhD;AA4PQ,cAAM,YAAW,WAAAD,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,YAAW,WAAAA,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,UAAUA,OAAM,UAAU;AAChC,cAAM,UAAU,UAAU;AAE1B,eAAO;AAAA,UACL,OAAAA;AAAA,UACA,SAAK;AAAA,YACH,CAAC,SAAS,UAAU,QAAQ,IAAIA,OAAM,OAAO,IAAI;AAAA,YACjDC;AAAA,UACF;AAAA,UACA,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,OAAO;AAAA,UAC9B,0BAAsB,uBAAS,WAAW,cAAc;AAAA,UACxD,aAAS;AAAA,YAAWD,OAAM;AAAA,YAAS,MACjC,QAAQ,OAAO,YAAY,QAAQ;AAAA,UACrC;AAAA,UACA,GAAI,YAAY,WACZ;AAAA,YACE,QAAQ,CAAC;AAAA,YACT,SAAS,CAAC;AAAA,YACV,QAAQ,CAAC;AAAA,YACT,UAAU,CAAC;AAAA,YACX,eAAe,CAAC;AAAA,UAClB,IACA,CAAC;AAAA,UACL,OAAO,EAAE,UAAU,YAAY,QAAQ,EAAE;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,CAAC,cAAc,YAAY,gBAAgB,YAAY,SAAS,KAAK;AAAA,IACvE;AAEA,gCAAU,MAAM;AACd,iBAAO,4CAAkB,iBAAiB;AAAA,IAC5C,GAAG,CAAC,CAAC;AAEL,gCAAU,MAAM;AACd,wBAAkB,kBAAkB,CAAC;AAAA,IACvC,GAAG,CAAC,cAAc,eAAe,OAAO,iBAAiB,CAAC;AAE1D,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,UAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAI,mBAAmC,CAAC;AAExC,QAAI,CAAC,cAAc,UAAU,MAAM,QAAQ;AACzC,yBAAmB,MAAM,IAAI,CAAC,EAAE,OAAO,OAAAE,QAAO,GAAGF,OAAM,GAAG,MACxD,4CAAC,0BAA+B,OAAOE,QAAQ,GAAGF,QAC/C,mBAD0B,CAE7B,CACD;AAAA,IACH,OAAO;AACL,yBAAmB;AAAA,IACrB;AAEA,QAAI,SAAS,QAAQ,KAAK,gBAAgB,MAAM;AAC9C,iBAAW,SAAS,kBAAkB;AACpC,YAAI,MAAM,SAAS;AAAwB;AAE3C,cAAME,SAAQ,MAAM,MAAM;AAE1B,iBAASA,MAAK;AAEd;AAAA,MACF;AAAA,IACF;AAEA,WACE,4CAAC,8BAA2B,OAAO,aACjC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,eAAe,eAAe,OAAO;AAAA,QAE9C;AAAA,UAAC,eAAG;AAAA,UAAH;AAAA,YACE,GAAG,kBAAkB,CAAC,GAAG,GAAG;AAAA,YAC7B,eAAW,iBAAG,wBAAwB,SAAS;AAAA,YAC/C,OAAO;AAAA,YAEN;AAAA,2BAAa,UACZ;AAAA,gBAAC,eAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACT,GAAG,eAAe;AAAA,kBACnB,OAAO,OAAO;AAAA;AAAA,cAChB,IACE;AAAA,cAEH;AAAA;AAAA;AAAA,QACH;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAoBO,IAAM,6BAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,eAAe,eAAe,OAAO,IAAI,oBAAoB;AAErE,UAAM,EAAE,OAAO,SAAS,IAAI,cAAc;AAAA,MACxC,UAAU,cAAc;AAAA,IAC1B,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,MAAmB;AAAA,MACvB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACE,GAAG,kBAAc,yBAAW,OAAO,CAAC,UAAU,CAAC,CAAC;AAAA,QACjD,eAAW,iBAAG,gCAAgC,SAAS;AAAA,QACvD,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ;AAAA,sDAAC,eAAG,OAAH,EAAU,GAAG,cAAc,WAAO,wBAAU,UAAU,GAAG,CAAC,GAAG;AAAA,UAC9D,4CAAC,eAAG,MAAH,EAAS,UAAS;AAAA;AAAA;AAAA,IACrB;AAAA,EAEJ;AACF;","names":["props","ref","value"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/segmented-control",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.10",
|
|
4
4
|
"description": "Yamada UI segmented control components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@yamada-ui/core": "0.14.
|
|
39
|
-
"@yamada-ui/
|
|
40
|
-
"@yamada-ui/
|
|
41
|
-
"@yamada-ui/use-descendant": "0.2.
|
|
42
|
-
"@yamada-ui/use-resize-observer": "0.2.
|
|
43
|
-
"@yamada-ui/use-controllable-state": "0.4.
|
|
38
|
+
"@yamada-ui/core": "0.14.1",
|
|
39
|
+
"@yamada-ui/use-focus-visible": "0.2.8",
|
|
40
|
+
"@yamada-ui/utils": "0.5.0",
|
|
41
|
+
"@yamada-ui/use-descendant": "0.2.10",
|
|
42
|
+
"@yamada-ui/use-resize-observer": "0.2.8",
|
|
43
|
+
"@yamada-ui/use-controllable-state": "0.4.3"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"react": "^18.0.0",
|
|
@@ -59,7 +59,8 @@
|
|
|
59
59
|
],
|
|
60
60
|
"banner": {
|
|
61
61
|
"js": "\"use client\""
|
|
62
|
-
}
|
|
62
|
+
},
|
|
63
|
+
"sourcemap": true
|
|
63
64
|
},
|
|
64
65
|
"module": "dist/index.mjs",
|
|
65
66
|
"types": "dist/index.d.ts",
|