npm - @yamada-ui/react - Versions diffs - 2.2.3-dev-20260622141401 → 2.2.3 - Mend

@yamada-ui/react 2.2.3-dev-20260622141401 → 2.2.3

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.

Files changed (198) hide show

package/dist/cjs/components/picture/picture.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"picture.cjs","names":["useSystem","tokenToValue","styled","Image"],"sources":["../../../../src/components/picture/picture.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { HTMLStyledProps, ThemeTokens } from \"../../core\"\nimport type { AnyString } from \"../../utils\"\nimport type { ImageProps } from \"../image\"\nimport { useCallback, useMemo } from \"react\"\nimport { styled, tokenToValue, useSystem } from \"../../core\"\nimport { getPx, isUndefined } from \"../../utils\"\nimport { Image } from \"../image\"\n\nconst createQuery = (\n minW: number \| string \| undefined,\n maxW: number \| string \| undefined,\n) => {\n let media = \"\"\n\n if (minW) {\n media = `(min-width: ${minW}px)`\n\n if (maxW) media += ` and (max-width: ${maxW}px)`\n } else {\n media = `(max-width: ${maxW}px)`\n }\n\n return media\n}\n\nexport interface PictureSource extends SourceProps {\n /*\n The maximum width for the source.\n \n If media is set, media takes precedence.\n /\n maxW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The minimum width for the source.\n \n If media is set, media takes precedence.\n /\n minW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The source set for the source element.\n /\n srcSet?: string\n}\n\nexport interface PictureProps extends ImageProps {\n /\n If `true`, the sources will be sorted by the `minW` and `maxW` properties.\n \n @default true\n /\n enableSorting?: boolean\n /\n The sources for the picture element.\n /\n sources?: PictureSource[]\n /\n The props for the picture element.\n /\n pictureProps?: HTMLStyledProps<\"picture\">\n}\n\n/\n `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.\n \n @see https://yamada-ui.com/docs/components/picture\n /\nexport const Picture: FC<PictureProps> = ({\n children,\n enableSorting = true,\n sources: sourcesProp = [],\n pictureProps,\n ...rest\n}) => {\n const system = useSystem()\n const { queriesObj } = system.breakpoints\n const { direction = \"down\", identifier = \"@media screen\" } =\n system.config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const compareSources = useCallback(\n (a: PictureSource, b: PictureSource) => {\n const k = direction === \"down\" ? \"maxW\" : \"minW\"\n\n if (isUndefined(a[k]) && !isUndefined(b[k])) return -1\n\n if (!isUndefined(a[k]) && isUndefined(b[k])) return 1\n\n return direction === \"down\"\n ? Number(a.maxW) - Number(b.maxW)\n : Number(b.minW) - Number(a.minW)\n },\n [direction],\n )\n\n const sources = useMemo(() => {\n const computedSources = sourcesProp.map(\n ({ maxW, media, minW, ...rest }) => {\n if (!media) {\n if (minW) minW = getPx(tokenToValue(system)(\"sizes\", minW))\n if (maxW) maxW = getPx(tokenToValue(system)(\"sizes\", maxW))\n\n media = createQuery(minW, maxW)\n\n return { ...rest, maxW, media, minW }\n } else {\n const { maxW, minW, query } = queriesObj[media] ?? {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return { ...rest, maxW, media, minW }\n }\n },\n )\n\n if (enableSorting) ~~{\n~~ return computedSources.sort(compareSources)\n } else ~~{\n~~ return computedSources\n ~~}\n~~ }, [\n sourcesProp,\n enableSorting,\n system,\n queriesObj,\n searchValue,\n compareSources,\n ])\n\n const sourceElements = useMemo(\n () =>\n sources.map(({ maxW: _maxW, minW: _minW, ...rest }, index) => (\n <styled.source key={index} {...rest} />\n )),\n [sources],\n )\n\n return (\n <styled.picture {...pictureProps}>\n {children ?? (\n <>\n {sourceElements}\n\n <Image {...rest} />\n </>\n )}\n </styled.picture>\n )\n}\n\nexport interface SourceProps extends HTMLStyledProps<\"source\"> {\n /\n The media query for the source.\n */\n media?: AnyString \| ThemeTokens[\"breakpoints\"]\n}\n\nexport const Source: FC<SourceProps> = ({ media, ...rest }) => {\n const { breakpoints, config } = useSystem()\n const { queriesObj } = breakpoints\n const { identifier = \"@media screen\" } = config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const { query } = media ? (queriesObj[media] ?? {}) : {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return <styled.source media={media} {...rest} />\n}\n"],"mappings":";;;;;;;;AASA,MAAM,eACJ,MACA,SACG;CACH,IAAI,QAAQ;CAEZ,IAAI,MAAM;EACR,QAAQ,eAAe,KAAK;EAE5B,IAAI,MAAM,SAAS,oBAAoB,KAAK;CAC9C,OACE,QAAQ,eAAe,KAAK;CAG9B,OAAO;AACT;;;;;;AA2CA,MAAa,WAA6B,EACxC,UACA,gBAAgB,MAChB,SAAS,cAAc,CAAC,GACxB,cACA,GAAG,WACC;CACJ,MAAM,SAASA,wBAAAA,UAAU;CACzB,MAAM,EAAE,eAAe,OAAO;CAC9B,MAAM,EAAE,YAAY,QAAQ,aAAa,oBACvC,OAAO,OAAO,cAAc,CAAC;CAC/B,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,kBAAA,GAAA,MAAA,YAAA,EACH,GAAkB,MAAqB;EACtC,MAAM,IAAI,cAAc,SAAS,SAAS;EAE1C,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,EAAE,EAAE,KAAK,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,EAAE,EAAE,GAAG,OAAO;EAEpD,IAAI,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,EAAE,EAAE,MAAA,GAAA,oBAAA,cAAA,YAAA,CAAiB,EAAE,EAAE,GAAG,OAAO;EAEpD,OAAO,cAAc,SACjB,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,IAAI,IAC9B,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,IAAI;CACpC,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,WAAA,GAAA,MAAA,QAAA,OAAwB;EAC5B,MAAM,kBAAkB,YAAY,KACjC,EAAE,MAAM,OAAO,MAAM,GAAG,WAAW;GAClC,IAAI,CAAC,OAAO;IACV,IAAI,MAAM,QAAA,GAAA,oBAAA,cAAA,MAAA,CAAaC,cAAAA,aAAa,MAAM,CAAC,CAAC,SAAS,IAAI,CAAC;IAC1D,IAAI,MAAM,QAAA,GAAA,oBAAA,cAAA,MAAA,CAAaA,cAAAA,aAAa,MAAM,CAAC,CAAC,SAAS,IAAI,CAAC;IAE1D,QAAQ,YAAY,MAAM,IAAI;IAE9B,OAAO;KAAE,GAAG;KAAM;KAAM;KAAO;IAAK;GACtC,OAAO;IACL,MAAM,EAAE,MAAM,MAAM,UAAU,WAAW,UAAU,CAAC;IAEpD,IAAI,OAAO,QAAQ,MAAM,QAAQ,aAAa,EAAE;IAEhD,OAAO;KAAE,GAAG;KAAM;KAAM;KAAO;IAAK;GACtC;EACF,CACF;EAEA,IAAI,~~eACF~~,OAAO,gBAAgB,KAAK,cAAc;~~OAE1C~~,OAAO;~~CAEX~~,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAA,GAAA,MAAA,QAAA,OAEF,QAAQ,KAAK,EAAE,MAAM,OAAO,MAAM,OAAO,GAAG,QAAQ,UAClD,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,QAAR,EAA2B,GAAI,KAAO,GAAlB,KAAkB,CACvC,GACH,CAAC,OAAO,CACV;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,SAAR;EAAgB,GAAI;YACjB,YACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACG,gBAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD,EAAO,GAAI,KAAO,CAAA,CAClB,EAAA,CAAA;CAEU,CAAA;AAEpB;AASA,MAAa,UAA2B,EAAE,OAAO,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,WAAWH,wBAAAA,UAAU;CAC1C,MAAM,EAAE,eAAe;CACvB,MAAM,EAAE,aAAa,oBAAoB,OAAO,cAAc,CAAC;CAC/D,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,EAAE,UAAU,QAAS,WAAW,UAAU,CAAC,IAAK,CAAC;CAEvD,IAAI,OAAO,QAAQ,MAAM,QAAQ,aAAa,EAAE;CAEhD,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACE,gBAAAA,OAAO,QAAR;EAAsB;EAAO,GAAI;CAAO,CAAA;AACjD"}
1	+ {"version":3,"file":"picture.cjs","names":["useSystem","tokenToValue","styled","Image"],"sources":["../../../../src/components/picture/picture.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { HTMLStyledProps, ThemeTokens } from \"../../core\"\nimport type { AnyString } from \"../../utils\"\nimport type { ImageProps } from \"../image\"\nimport { useCallback, useMemo } from \"react\"\nimport { styled, tokenToValue, useSystem } from \"../../core\"\nimport { getPx, isUndefined } from \"../../utils\"\nimport { Image } from \"../image\"\n\nconst createQuery = (\n minW: number \| string \| undefined,\n maxW: number \| string \| undefined,\n) => {\n let media = \"\"\n\n if (minW) {\n media = `(min-width: ${minW}px)`\n\n if (maxW) media += ` and (max-width: ${maxW}px)`\n } else {\n media = `(max-width: ${maxW}px)`\n }\n\n return media\n}\n\nexport interface PictureSource extends SourceProps {\n /*\n The maximum width for the source.\n \n If media is set, media takes precedence.\n /\n maxW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The minimum width for the source.\n \n If media is set, media takes precedence.\n /\n minW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The source set for the source element.\n /\n srcSet?: string\n}\n\nexport interface PictureProps extends ImageProps {\n /\n If `true`, the sources will be sorted by the `minW` and `maxW` properties.\n \n @default true\n /\n enableSorting?: boolean\n /\n The sources for the picture element.\n /\n sources?: PictureSource[]\n /\n The props for the picture element.\n /\n pictureProps?: HTMLStyledProps<\"picture\">\n}\n\n/\n `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.\n \n @see https://yamada-ui.com/docs/components/picture\n /\nexport const Picture: FC<PictureProps> = ({\n children,\n enableSorting = true,\n sources: sourcesProp = [],\n pictureProps,\n ...rest\n}) => {\n const system = useSystem()\n const { queriesObj } = system.breakpoints\n const { direction = \"down\", identifier = \"@media screen\" } =\n system.config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const compareSources = useCallback(\n (a: PictureSource, b: PictureSource) => {\n const k = direction === \"down\" ? \"maxW\" : \"minW\"\n\n if (isUndefined(a[k]) && !isUndefined(b[k])) return -1\n\n if (!isUndefined(a[k]) && isUndefined(b[k])) return 1\n\n return direction === \"down\"\n ? Number(a.maxW) - Number(b.maxW)\n : Number(b.minW) - Number(a.minW)\n },\n [direction],\n )\n\n const sources = useMemo(() => {\n const computedSources = sourcesProp.map(\n ({ maxW, media, minW, ...rest }) => {\n if (!media) {\n if (minW) minW = getPx(tokenToValue(system)(\"sizes\", minW))\n if (maxW) maxW = getPx(tokenToValue(system)(\"sizes\", maxW))\n\n media = createQuery(minW, maxW)\n\n return { ...rest, maxW, media, minW }\n } else {\n const { maxW, minW, query } = queriesObj[media] ?? {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return { ...rest, maxW, media, minW }\n }\n },\n )\n\n if (enableSorting) return computedSources.sort(compareSources)\n else return computedSources\n }, [\n sourcesProp,\n enableSorting,\n system,\n queriesObj,\n searchValue,\n compareSources,\n ])\n\n const sourceElements = useMemo(\n () =>\n sources.map(({ maxW: _maxW, minW: _minW, ...rest }, index) => (\n <styled.source key={index} {...rest} />\n )),\n [sources],\n )\n\n return (\n <styled.picture {...pictureProps}>\n {children ?? (\n <>\n {sourceElements}\n\n <Image {...rest} />\n </>\n )}\n </styled.picture>\n )\n}\n\nexport interface SourceProps extends HTMLStyledProps<\"source\"> {\n /\n The media query for the source.\n */\n media?: AnyString \| ThemeTokens[\"breakpoints\"]\n}\n\nexport const Source: FC<SourceProps> = ({ media, ...rest }) => {\n const { breakpoints, config } = useSystem()\n const { queriesObj } = breakpoints\n const { identifier = \"@media screen\" } = config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const { query } = media ? (queriesObj[media] ?? {}) : {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return <styled.source media={media} {...rest} />\n}\n"],"mappings":"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"}

package/dist/cjs/components/pin-input/pin-input.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pin-input.cjs","names":["createSlotComponent","pinInputStyle","usePinInput","getValidChildren","PinInputDescendantsContext","Group","Input","usePinInputDescendant","useFieldProps","mergeRefs"],"sources":["../../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n RequiredPropGetter,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { InputProps, UseInputBorderProps } from \"../input\"\nimport type { PinInputStyle } from \"./pin-input.style\"\nimport type { UsePinInputProps } from \"./use-pin-input\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { Group } from \"../group\"\nimport { Input } from \"../input\"\nimport { pinInputStyle } from \"./pin-input.style\"\nimport {\n PinInputDescendantsContext,\n usePinInput,\n usePinInputDescendant,\n} from \"./use-pin-input\"\n\ninterface ComponentContext extends UseInputBorderProps {\n getInputProps: RequiredPropGetter<\"input\", { index: number }>\n}\n\nexport interface PinInputRootProps\n extends\n Omit<\n WithoutThemeProps<GroupProps, PinInputStyle>,\n \"defaultValue\" \| \"mask\" \| \"onChange\"\n >,\n ThemeProps<PinInputStyle>,\n UseInputBorderProps,\n UsePinInputProps {}\n\nconst {\n ComponentContext,\n PropsContext: PinInputPropsContext,\n useComponentContext,\n usePropsContext: usePinInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PinInputRootProps, PinInputStyle, ComponentContext>(\n \"pin-input\",\n pinInputStyle,\n)\n\nexport { PinInputPropsContext, usePinInputPropsContext }\n\n/*\n `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n \n @see https://yamada-ui.com/docs/components/pin-input\n /\nexport const PinInputRoot = withProvider<\"div\", PinInputRootProps>(\n ({ children, errorBorderColor, focusBorderColor, ...rest }) => {\n const { descendants, items, getInputProps, getRootProps } =\n usePinInput(rest)\n const cloneChildren = useMemo(() => {\n const validChildren = getValidChildren(children)\n\n if (validChildren.length) ~~{\n~~ return validChildren\n } else {\n return Array.from({ length: items }, (_, index) => (\n <PinInputField key={index} index={index} />\n ))\n ~~}\n~~ }, [children, items])\n const context = useMemo(\n () => ({ errorBorderColor, focusBorderColor, getInputProps }),\n [getInputProps, errorBorderColor, focusBorderColor],\n )\n\n return (\n <PinInputDescendantsContext value={descendants}>\n <ComponentContext value={context}>\n <Group {...getRootProps()}>{cloneChildren}</Group>\n </ComponentContext>\n </PinInputDescendantsContext>\n )\n },\n \"root\",\n)()\n\nexport interface PinInputFieldProps extends InputProps {\n /\n The index of the pin input field.\n */\n index: number\n}\n\nexport const PinInputField = withContext<\"input\", PinInputFieldProps>(\n Input,\n \"field\",\n)(undefined, ({ ref, index, ...rest }) => {\n const { errorBorderColor, focusBorderColor, getInputProps } =\n useComponentContext()\n const { register } = usePinInputDescendant()\n const { props, ariaProps, dataProps, eventProps } = useFieldProps(rest)\n\n return {\n ...getInputProps({\n errorBorderColor,\n focusBorderColor,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...props,\n ref: mergeRefs(register, ref),\n index,\n }),\n }\n})\n"],"mappings":";;;;;;;;;;;;AAsCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,yBAAAA,oBACF,aACAC,wBAAAA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,OAAO,eAAe,iBACzCC,sBAAAA,YAAY,IAAI;CAClB,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8B;EAClC,MAAM,gBAAgBC,iBAAAA,iBAAiB,QAAQ;EAE/C,IAAI,cAAc,~~QAChB~~,OAAO;~~OAEP~~,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACvC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,EAAkC,MAAQ,GAAtB,KAAsB,CAC3C;~~CAEL~~,GAAG,CAAC,UAAU,KAAK,CAAC;CAMpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,4BAAD;EAA4B,OAAO;YACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,QAAA,GAAA,MAAA,QAAA,QANb;IAAE;IAAkB;IAAkB;GAAc,IAC3D;IAAC;IAAe;IAAkB;GAAgB,CAKjB;aAC7B,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAO,GAAI,aAAa;cAAI;GAAqB,CAAA;EACjC,CAAA;CACQ,CAAA;AAEhC,GACA,MACF,CAAC,CAAC;AASF,MAAa,gBAAgB,YAC3BC,cAAAA,OACA,OACF,CAAC,CAAC,KAAA,IAAY,EAAE,KAAK,OAAO,GAAG,WAAW;CACxC,MAAM,EAAE,kBAAkB,kBAAkB,kBAC1C,oBAAoB;CACtB,MAAM,EAAE,aAAaC,sBAAAA,sBAAsB;CAC3C,MAAM,EAAE,OAAO,WAAW,WAAW,eAAeC,wBAAAA,cAAc,IAAI;CAEtE,OAAO,EACL,GAAG,cAAc;EACf;EACA;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAKC,YAAAA,UAAU,UAAU,GAAG;EAC5B;CACF,CAAC,EACH;AACF,CAAC"}
1	+ {"version":3,"file":"pin-input.cjs","names":["createSlotComponent","pinInputStyle","usePinInput","getValidChildren","PinInputDescendantsContext","Group","Input","usePinInputDescendant","useFieldProps","mergeRefs"],"sources":["../../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n RequiredPropGetter,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { InputProps, UseInputBorderProps } from \"../input\"\nimport type { PinInputStyle } from \"./pin-input.style\"\nimport type { UsePinInputProps } from \"./use-pin-input\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { Group } from \"../group\"\nimport { Input } from \"../input\"\nimport { pinInputStyle } from \"./pin-input.style\"\nimport {\n PinInputDescendantsContext,\n usePinInput,\n usePinInputDescendant,\n} from \"./use-pin-input\"\n\ninterface ComponentContext extends UseInputBorderProps {\n getInputProps: RequiredPropGetter<\"input\", { index: number }>\n}\n\nexport interface PinInputRootProps\n extends\n Omit<\n WithoutThemeProps<GroupProps, PinInputStyle>,\n \"defaultValue\" \| \"mask\" \| \"onChange\"\n >,\n ThemeProps<PinInputStyle>,\n UseInputBorderProps,\n UsePinInputProps {}\n\nconst {\n ComponentContext,\n PropsContext: PinInputPropsContext,\n useComponentContext,\n usePropsContext: usePinInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PinInputRootProps, PinInputStyle, ComponentContext>(\n \"pin-input\",\n pinInputStyle,\n)\n\nexport { PinInputPropsContext, usePinInputPropsContext }\n\n/*\n `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n \n @see https://yamada-ui.com/docs/components/pin-input\n /\nexport const PinInputRoot = withProvider<\"div\", PinInputRootProps>(\n ({ children, errorBorderColor, focusBorderColor, ...rest }) => {\n const { descendants, items, getInputProps, getRootProps } =\n usePinInput(rest)\n const cloneChildren = useMemo(() => {\n const validChildren = getValidChildren(children)\n\n if (validChildren.length) return validChildren\n else\n return Array.from({ length: items }, (_, index) => (\n <PinInputField key={index} index={index} />\n ))\n }, [children, items])\n const context = useMemo(\n () => ({ errorBorderColor, focusBorderColor, getInputProps }),\n [getInputProps, errorBorderColor, focusBorderColor],\n )\n\n return (\n <PinInputDescendantsContext value={descendants}>\n <ComponentContext value={context}>\n <Group {...getRootProps()}>{cloneChildren}</Group>\n </ComponentContext>\n </PinInputDescendantsContext>\n )\n },\n \"root\",\n)()\n\nexport interface PinInputFieldProps extends InputProps {\n /\n The index of the pin input field.\n */\n index: number\n}\n\nexport const PinInputField = withContext<\"input\", PinInputFieldProps>(\n Input,\n \"field\",\n)(undefined, ({ ref, index, ...rest }) => {\n const { errorBorderColor, focusBorderColor, getInputProps } =\n useComponentContext()\n const { register } = usePinInputDescendant()\n const { props, ariaProps, dataProps, eventProps } = useFieldProps(rest)\n\n return {\n ...getInputProps({\n errorBorderColor,\n focusBorderColor,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...props,\n ref: mergeRefs(register, ref),\n index,\n }),\n }\n})\n"],"mappings":";;;;;;;;;;;;AAsCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,yBAAAA,oBACF,aACAC,wBAAAA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,OAAO,eAAe,iBACzCC,sBAAAA,YAAY,IAAI;CAClB,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8B;EAClC,MAAM,gBAAgBC,iBAAAA,iBAAiB,QAAQ;EAE/C,IAAI,cAAc,QAAQ,OAAO;OAE/B,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACvC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,EAAkC,MAAQ,GAAtB,KAAsB,CAC3C;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CAMpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,4BAAD;EAA4B,OAAO;YACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,QAAA,GAAA,MAAA,QAAA,QANb;IAAE;IAAkB;IAAkB;GAAc,IAC3D;IAAC;IAAe;IAAkB;GAAgB,CAKjB;aAC7B,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAO,GAAI,aAAa;cAAI;GAAqB,CAAA;EACjC,CAAA;CACQ,CAAA;AAEhC,GACA,MACF,CAAC,CAAC;AASF,MAAa,gBAAgB,YAC3BC,cAAAA,OACA,OACF,CAAC,CAAC,KAAA,IAAY,EAAE,KAAK,OAAO,GAAG,WAAW;CACxC,MAAM,EAAE,kBAAkB,kBAAkB,kBAC1C,oBAAoB;CACtB,MAAM,EAAE,aAAaC,sBAAAA,sBAAsB;CAC3C,MAAM,EAAE,OAAO,WAAW,WAAW,eAAeC,wBAAAA,cAAc,IAAI;CAEtE,OAAO,EACL,GAAG,cAAc;EACf;EACA;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAKC,YAAAA,UAAU,UAAU,GAAG;EAC5B;CACF,CAAC,EACH;AACF,CAAC"}

package/dist/cjs/components/pin-input/use-pin-input.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-pin-input.cjs","names":["createDescendants","useFieldProps","useControllableState","mergeProps"],"sources":["../../../../src/components/pin-input/use-pin-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { cx, filterUndefined, handlerAll, runKeyAction } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst {\n DescendantsContext: PinInputDescendantsContext,\n useDescendant: usePinInputDescendant,\n useDescendants: usePinInputDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n PinInputDescendantsContext,\n usePinInputDescendant,\n usePinInputDescendants,\n}\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: UsePinInputProps[\"type\"]) => {\n const NUMERIC_REGEX = /^[0-9]+$/\n const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n return regex.test(value)\n}\n\nexport interface UsePinInputProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"mask\" \| \"onChange\" \| \"value\">,\n FieldProps {\n /*\n If `true`, the pin input receives focus on mount.\n \n @default false\n /\n autoFocus?: boolean\n /\n The initial value of the pin input.\n /\n defaultValue?: string\n /\n The top-level id string that will be applied to the input fields.\n * The index of the input will be appended to this top-level id.\n /\n id?: string\n /\n The number of inputs to display.\n \n @default 4\n /\n items?: number\n /\n If `true`, focus will move automatically to the next input once filled.\n \n @default true\n /\n manageFocus?: boolean\n /\n If `true`, the input's value will be masked just like `type=password`.\n /\n mask?: boolean\n /\n If `true`, the pin input component signals to its fields that they should.\n /\n otp?: boolean\n /\n The placeholder for the pin input.\n \n @default '◯'\n /\n placeholder?: string\n /\n The type of values the pin-input should allow.\n \n @default 'number'\n /\n type?: \"alphanumeric\" \| \"number\"\n /\n The value of the pin input.\n /\n value?: string\n /\n Function called on input change.\n /\n onChange?: (value: string) => void\n /\n Function called when all inputs have valid values.\n */\n onComplete?: (value: string) => void\n}\n\nexport const usePinInput = (props: UsePinInputProps = {}) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n type = \"number\",\n autoFocus,\n defaultValue,\n disabled,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"◯\",\n readOnly,\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const descendants = usePinInputDescendants()\n const [moveFocus, setMoveFocus] = useState<boolean>(true)\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [values, setValues] = useControllableState<string[]>({\n defaultValue: toArray(defaultValue) \|\| [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(values.join(\"\")),\n })\n\n const focusNext = useCallback(\n (index: number) => {\n if (!moveFocus \|\| !manageFocus) return\n\n const next = descendants.nextValue(index, false)\n\n if (!next) return\n\n requestAnimationFrame(() => next.node.focus())\n },\n [descendants, moveFocus, manageFocus],\n )\n\n const focusInputField = useCallback(\n (direction: \"next\" \| \"prev\", index: number) => {\n const input =\n direction === \"next\"\n ? descendants.nextValue(index, false)\n : descendants.prevValue(index, false)\n\n if (!input) return\n\n const valueLength = input.node.value.length\n\n requestAnimationFrame(() => {\n input.node.focus()\n input.node.setSelectionRange(0, valueLength)\n })\n },\n [descendants],\n )\n\n const setValue = useCallback(\n (value: string, index: number, focus = true) => {\n let nextValues = [...values]\n\n nextValues[index] = value\n\n setValues(nextValues)\n\n nextValues = nextValues.filter(Boolean)\n\n const complete = value !== \"\" && nextValues.length === descendants.count()\n\n if (complete) {\n onComplete?.(nextValues.join(\"\"))\n descendants.value(index)?.node.blur()\n } else if (focus) {\n focusNext(index)\n }\n },\n [values, setValues, descendants, onComplete, focusNext],\n )\n\n const getNextValue = useCallback(\n (value: string \| undefined, eventValue: string) => {\n let nextValue = eventValue\n\n if (!value?.length) return nextValue\n\n if (value.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ target }: ChangeEvent<HTMLInputElement>) => {\n const eventValue = target.value\n const currentValue = values[index]\n const nextValue = getNextValue(currentValue, eventValue)\n\n if (nextValue === \"\") {\n setValue(\"\", index)\n\n return\n }\n\n if (eventValue.length > 2) {\n if (!validate(eventValue, type)) return\n\n const nextValue = eventValue\n .split(\"\")\n .filter((_, index) => index < descendants.count())\n\n setValues(nextValue)\n\n if (nextValue.length === descendants.count()) {\n onComplete?.(nextValue.join(\"\"))\n descendants.value(index)?.node.blur()\n }\n } else {\n if (validate(nextValue, type)) setValue(nextValue, index)\n\n setMoveFocus(true)\n }\n },\n [descendants, getNextValue, onComplete, setValue, setValues, type, values],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLInputElement>) => {\n if (!manageFocus) return\n\n runKeyAction(\n ev,\n {\n ArrowLeft: (ev) => {\n ev.preventDefault()\n focusInputField(\"prev\", index)\n },\n ArrowRight: (ev) => {\n ev.preventDefault()\n focusInputField(\"next\", index)\n },\n Backspace: (ev) => {\n if ((ev.target as HTMLInputElement).value === \"\") {\n const prevInput = descendants.prevValue(index, false)\n\n if (!prevInput) return\n\n setValue(\"\", index - 1, false)\n prevInput.node.focus()\n setMoveFocus(true)\n } else {\n setMoveFocus(false)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [descendants, focusInputField, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n useEffect(() => {\n if (!autoFocus) return\n\n const firstValue = descendants.firstValue()\n\n if (!firstValue) return\n\n requestAnimationFrame(() => firstValue.node.focus())\n }, [autoFocus, descendants])\n\n const getRootProps: PropGetter = useCallback(\n (props) => mergeProps({ role: \"group\" }, rest, props)(),\n [rest],\n )\n\n const getInputProps: RequiredPropGetter<\"input\", { index: number }> =\n useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, index, ...props }) => ({\n ...ariaProps,\n ...dataProps,\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n disabled,\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n readOnly,\n value: values[index] \|\| \"\",\n ...filterUndefined(props),\n id: `${id}${index ? `-${index}` : \"\"}`,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n mask,\n type,\n labelId,\n otp,\n disabled,\n focusedIndex,\n readOnly,\n placeholder,\n values,\n id,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n ],\n )\n\n return {\n descendants,\n items,\n getInputProps,\n getRootProps,\n }\n}\n\nexport type UsePinInputReturn = ReturnType<typeof usePinInput>\n"],"mappings":";;;;;;;;;AAYA,MAAM,EACJ,oBAAoB,4BACpB,eAAe,uBACf,gBAAgB,2BACdA,oCAAAA,kBAAoC;AAQxC,MAAM,WAAW,UAAmB,OAAO,MAAM,EAAE;AAEnD,MAAM,YAAY,OAAe,SAAmC;CAMlE,QAFc,SAAS,iBAAiB,oBAAsB,WAAA,CAEjD,KAAK,KAAK;AACzB;AAmEA,MAAa,eAAe,QAA0B,CAAC,MAAM;CAC3D,MAAM,QAAA,GAAA,MAAA,MAAA,CAAa;CACnB,MAAM,EACJ,SAAS,EAAE,YAAY,CAAC,GACxB,OAAO,EACL,KAAK,MACL,OAAO,UACP,WACA,cACA,UACA,QAAQ,GACR,cAAc,MACd,MACA,MAAM,OACN,cAAc,KACd,UACA,OACA,UAAU,cACV,YACA,GAAG,QAEL,WACA,WACA,eACEC,wBAAAA,cAAc,KAAK;CACvB,MAAM,cAAc,uBAAuB;CAC3C,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,SAAA,CAAkC,IAAI;CACxD,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,SAAA,CAAoC,EAAE;CAC3D,MAAM,CAAC,QAAQ,aAAaC,2CAAAA,qBAA+B;EACzD,cAAc,QAAQ,YAAY,KAAK,CAAC;EACxC,OAAO,QAAQ,KAAK;EACpB,WAAW,WAAW,eAAe,OAAO,KAAK,EAAE,CAAC;CACtD,CAAC;CAED,MAAM,aAAA,GAAA,MAAA,YAAA,EACH,UAAkB;EACjB,IAAI,CAAC,aAAa,CAAC,aAAa;EAEhC,MAAM,OAAO,YAAY,UAAU,OAAO,KAAK;EAE/C,IAAI,CAAC,MAAM;EAEX,4BAA4B,KAAK,KAAK,MAAM,CAAC;CAC/C,GACA;EAAC;EAAa;EAAW;CAAW,CACtC;CAEA,MAAM,mBAAA,GAAA,MAAA,YAAA,EACH,WAA4B,UAAkB;EAC7C,MAAM,QACJ,cAAc,SACV,YAAY,UAAU,OAAO,KAAK,IAClC,YAAY,UAAU,OAAO,KAAK;EAExC,IAAI,CAAC,OAAO;EAEZ,MAAM,cAAc,MAAM,KAAK,MAAM;EAErC,4BAA4B;GAC1B,MAAM,KAAK,MAAM;GACjB,MAAM,KAAK,kBAAkB,GAAG,WAAW;EAC7C,CAAC;CACH,GACA,CAAC,WAAW,CACd;CAEA,MAAM,YAAA,GAAA,MAAA,YAAA,EACH,OAAe,OAAe,QAAQ,SAAS;EAC9C,IAAI,aAAa,CAAC,GAAG,MAAM;EAE3B,WAAW,SAAS;EAEpB,UAAU,UAAU;EAEpB,aAAa,WAAW,OAAO,OAAO;EAItC,IAFiB,UAAU,MAAM,WAAW,WAAW,YAAY,MAAM,GAE3D;GACZ,aAAa,WAAW,KAAK,EAAE,CAAC;GAChC,YAAY,MAAM,KAAK,CAAC,EAAE,KAAK,KAAK;EACtC,OAAO,IAAI,OACT,UAAU,KAAK;CAEnB,GACA;EAAC;EAAQ;EAAW;EAAa;EAAY;CAAS,CACxD;CAEA,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,OAA2B,eAAuB;EACjD,IAAI,YAAY;EAEhB,IAAI,CAAC,OAAO,QAAQ,OAAO;EAE3B,IAAI,MAAM,WAAW,WAAW,OAAO,CAAC,CAAC,GACvC,YAAY,WAAW,OAAO,CAAC;OAC1B,IAAI,MAAM,WAAW,WAAW,OAAO,CAAC,CAAC,GAC9C,YAAY,WAAW,OAAO,CAAC;EAGjC,OAAO;CACT,GACA,CAAC,CACH;CAEA,MAAM,YAAA,GAAA,MAAA,YAAA,EACH,WACE,EAAE,aAA4C;EAC7C,MAAM,aAAa,OAAO;EAC1B,MAAM,eAAe,OAAO;EAC5B,MAAM,YAAY,aAAa,cAAc,UAAU;EAEvD,IAAI,cAAc,IAAI;GACpB,SAAS,IAAI,KAAK;GAElB;EACF;EAEA,IAAI,WAAW,SAAS,GAAG;GACzB,IAAI,CAAC,SAAS,YAAY,IAAI,GAAG;GAEjC,MAAM,YAAY,WACf,MAAM,EAAE,CAAC,CACT,QAAQ,GAAG,UAAU,QAAQ,YAAY,MAAM,CAAC;GAEnD,UAAU,SAAS;GAEnB,IAAI,UAAU,WAAW,YAAY,MAAM,GAAG;IAC5C,aAAa,UAAU,KAAK,EAAE,CAAC;IAC/B,YAAY,MAAM,KAAK,CAAC,EAAE,KAAK,KAAK;GACtC;EACF,OAAO;GACL,IAAI,SAAS,WAAW,IAAI,GAAG,SAAS,WAAW,KAAK;GAExD,aAAa,IAAI;EACnB;CACF,GACF;EAAC;EAAa;EAAc;EAAY;EAAU;EAAW;EAAM;CAAM,CAC3E;CAEA,MAAM,aAAA,GAAA,MAAA,YAAA,EACH,WAAmB,OAAwC;EAC1D,IAAI,CAAC,aAAa;EAElB,YAAA,aACE,IACA;GACE,YAAY,OAAO;IACjB,GAAG,eAAe;IAClB,gBAAgB,QAAQ,KAAK;GAC/B;GACA,aAAa,OAAO;IAClB,GAAG,eAAe;IAClB,gBAAgB,QAAQ,KAAK;GAC/B;GACA,YAAY,OAAO;IACjB,IAAK,GAAG,OAA4B,UAAU,IAAI;KAChD,MAAM,YAAY,YAAY,UAAU,OAAO,KAAK;KAEpD,IAAI,CAAC,WAAW;KAEhB,SAAS,IAAI,QAAQ,GAAG,KAAK;KAC7B,UAAU,KAAK,MAAM;KACrB,aAAa,IAAI;IACnB,OACE,aAAa,KAAK;GAEtB;EACF,GACA,EAAE,gBAAgB,MAAM,CAC1B;CACF,GACA;EAAC;EAAa;EAAiB;EAAa;CAAQ,CACtD;CAEA,MAAM,WAAA,GAAA,MAAA,YAAA,EACH,gBAAwB,gBAAgB,KAAK,GAC9C,CAAC,CACH;CAEA,MAAM,UAAA,GAAA,MAAA,YAAA,OAA2B,gBAAgB,EAAE,GAAG,CAAC,CAAC;CAExD,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,MAAM,aAAa,YAAY,WAAW;EAE1C,IAAI,CAAC,YAAY;EAEjB,4BAA4B,WAAW,KAAK,MAAM,CAAC;CACrD,GAAG,CAAC,WAAW,WAAW,CAAC;CAE3B,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,UAAUC,cAAAA,WAAW,EAAE,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,CAAC,GACtD,CAAC,IAAI,CACP;CA8CA,OAAO;EACL;EACA;EACA,gBAAA,GAAA,MAAA,YAAA,EA7CG,EAAE,mBAAmB,gBAAgB,OAAO,GAAG,aAAa;GAC3D,GAAG;GACH,GAAG;GACH,MAAM,OAAO,aAAa,SAAS,WAAW,QAAQ;GACtD,oBAAA,GAAA,oBAAA,cAAA,GAAA,CAAsB,gBAAgB,OAAO;GAC7C,cAAc,MAAM,kBAAkB;GACtC;GACA,WAAW,SAAS,WAAW,YAAY;GAC3C,aACE,iBAAiB,SAAS,CAAC,YAAY,CAAC,MAAM,WAC1C,KACA;GACN;GACA,OAAO,OAAO,UAAU;GACxB,IAAA,GAAA,oBAAA,cAAA,gBAAA,CAAmB,KAAK;GACxB,IAAI,GAAG,KAAK,QAAQ,IAAI,UAAU;GAClC,SAAA,GAAA,oBAAA,cAAA,WAAA,CAAmB,WAAW,QAAQ,MAAM,QAAQ,MAAM;GAC1D,WAAA,GAAA,oBAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,SAAS,KAAK,CAAC;GACpD,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,WAAW,SAAS,MAAM,SAAS,QAAQ,KAAK,CAAC;GACrE,YAAA,GAAA,oBAAA,cAAA,WAAA,CAAsB,MAAM,WAAW,UAAU,KAAK,CAAC;EACzD,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAMU;EACZ;CACF;AACF"}
1	+ {"version":3,"file":"use-pin-input.cjs","names":["createDescendants","useFieldProps","useControllableState","mergeProps"],"sources":["../../../../src/components/pin-input/use-pin-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { cx, filterUndefined, handlerAll, runKeyAction } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst {\n DescendantsContext: PinInputDescendantsContext,\n useDescendant: usePinInputDescendant,\n useDescendants: usePinInputDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n PinInputDescendantsContext,\n usePinInputDescendant,\n usePinInputDescendants,\n}\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: UsePinInputProps[\"type\"]) => {\n const NUMERIC_REGEX = /^[0-9]+$/\n const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n return regex.test(value)\n}\n\nexport interface UsePinInputProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"mask\" \| \"onChange\" \| \"value\">,\n FieldProps {\n /*\n If `true`, the pin input receives focus on mount.\n \n @default false\n /\n autoFocus?: boolean\n /\n The initial value of the pin input.\n /\n defaultValue?: string\n /\n The top-level id string that will be applied to the input fields.\n * The index of the input will be appended to this top-level id.\n /\n id?: string\n /\n The number of inputs to display.\n \n @default 4\n /\n items?: number\n /\n If `true`, focus will move automatically to the next input once filled.\n \n @default true\n /\n manageFocus?: boolean\n /\n If `true`, the input's value will be masked just like `type=password`.\n /\n mask?: boolean\n /\n If `true`, the pin input component signals to its fields that they should.\n /\n otp?: boolean\n /\n The placeholder for the pin input.\n \n @default '◯'\n /\n placeholder?: string\n /\n The type of values the pin-input should allow.\n \n @default 'number'\n /\n type?: \"alphanumeric\" \| \"number\"\n /\n The value of the pin input.\n /\n value?: string\n /\n Function called on input change.\n /\n onChange?: (value: string) => void\n /\n Function called when all inputs have valid values.\n */\n onComplete?: (value: string) => void\n}\n\nexport const usePinInput = (props: UsePinInputProps = {}) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n type = \"number\",\n autoFocus,\n defaultValue,\n disabled,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"◯\",\n readOnly,\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const descendants = usePinInputDescendants()\n const [moveFocus, setMoveFocus] = useState<boolean>(true)\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [values, setValues] = useControllableState<string[]>({\n defaultValue: toArray(defaultValue) \|\| [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(values.join(\"\")),\n })\n\n const focusNext = useCallback(\n (index: number) => {\n if (!moveFocus \|\| !manageFocus) return\n\n const next = descendants.nextValue(index, false)\n\n if (!next) return\n\n requestAnimationFrame(() => next.node.focus())\n },\n [descendants, moveFocus, manageFocus],\n )\n\n const focusInputField = useCallback(\n (direction: \"next\" \| \"prev\", index: number) => {\n const input =\n direction === \"next\"\n ? descendants.nextValue(index, false)\n : descendants.prevValue(index, false)\n\n if (!input) return\n\n const valueLength = input.node.value.length\n\n requestAnimationFrame(() => {\n input.node.focus()\n input.node.setSelectionRange(0, valueLength)\n })\n },\n [descendants],\n )\n\n const setValue = useCallback(\n (value: string, index: number, focus = true) => {\n let nextValues = [...values]\n\n nextValues[index] = value\n\n setValues(nextValues)\n\n nextValues = nextValues.filter(Boolean)\n\n const complete = value !== \"\" && nextValues.length === descendants.count()\n\n if (complete) {\n onComplete?.(nextValues.join(\"\"))\n descendants.value(index)?.node.blur()\n } else if (focus) {\n focusNext(index)\n }\n },\n [values, setValues, descendants, onComplete, focusNext],\n )\n\n const getNextValue = useCallback(\n (value: string \| undefined, eventValue: string) => {\n let nextValue = eventValue\n\n if (!value?.length) return nextValue\n\n if (value.startsWith(eventValue.charAt(0)))\n nextValue = eventValue.charAt(1)\n else if (value.startsWith(eventValue.charAt(1)))\n nextValue = eventValue.charAt(0)\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ target }: ChangeEvent<HTMLInputElement>) => {\n const eventValue = target.value\n const currentValue = values[index]\n const nextValue = getNextValue(currentValue, eventValue)\n\n if (nextValue === \"\") {\n setValue(\"\", index)\n\n return\n }\n\n if (eventValue.length > 2) {\n if (!validate(eventValue, type)) return\n\n const nextValue = eventValue\n .split(\"\")\n .filter((_, index) => index < descendants.count())\n\n setValues(nextValue)\n\n if (nextValue.length === descendants.count()) {\n onComplete?.(nextValue.join(\"\"))\n descendants.value(index)?.node.blur()\n }\n } else {\n if (validate(nextValue, type)) setValue(nextValue, index)\n\n setMoveFocus(true)\n }\n },\n [descendants, getNextValue, onComplete, setValue, setValues, type, values],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLInputElement>) => {\n if (!manageFocus) return\n\n runKeyAction(\n ev,\n {\n ArrowLeft: (ev) => {\n ev.preventDefault()\n focusInputField(\"prev\", index)\n },\n ArrowRight: (ev) => {\n ev.preventDefault()\n focusInputField(\"next\", index)\n },\n Backspace: (ev) => {\n if ((ev.target as HTMLInputElement).value === \"\") {\n const prevInput = descendants.prevValue(index, false)\n\n if (!prevInput) return\n\n setValue(\"\", index - 1, false)\n prevInput.node.focus()\n setMoveFocus(true)\n } else {\n setMoveFocus(false)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [descendants, focusInputField, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n useEffect(() => {\n if (!autoFocus) return\n\n const firstValue = descendants.firstValue()\n\n if (!firstValue) return\n\n requestAnimationFrame(() => firstValue.node.focus())\n }, [autoFocus, descendants])\n\n const getRootProps: PropGetter = useCallback(\n (props) => mergeProps({ role: \"group\" }, rest, props)(),\n [rest],\n )\n\n const getInputProps: RequiredPropGetter<\"input\", { index: number }> =\n useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, index, ...props }) => ({\n ...ariaProps,\n ...dataProps,\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n disabled,\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n readOnly,\n value: values[index] \|\| \"\",\n ...filterUndefined(props),\n id: `${id}${index ? `-${index}` : \"\"}`,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n mask,\n type,\n labelId,\n otp,\n disabled,\n focusedIndex,\n readOnly,\n placeholder,\n values,\n id,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n ],\n )\n\n return {\n descendants,\n items,\n getInputProps,\n getRootProps,\n }\n}\n\nexport type UsePinInputReturn = ReturnType<typeof usePinInput>\n"],"mappings":"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"}

package/dist/cjs/components/qr-code/use-qr-code.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-qr-code.cjs","names":["mergeProps"],"sources":["../../../../src/components/qr-code/use-qr-code.tsx"],"sourcesContent":["import type { QrCodeGenerateResult } from \"uqr\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { encode } from \"uqr\"\nimport { mergeProps } from \"../../core\"\n\nexport interface UseQrCodeProps extends HTMLProps {\n /*\n The value to encode as a QR code.\n /\n value: string\n /\n The error correction level to boost the error correction level to the maximum allowed by the version and size.\n \n @default false\n /\n boostEcc?: boolean\n /\n The border width around the QR code.\n \n @default 1\n /\n border?: number\n /\n The error correction level.\n \n - `L` allows for up to 7% error correction,\n * - `M` allows for up to 15% error correction,\n * - `Q` allows for up to 25% error correction,\n * - `H` allows for up to 30% error correction.\n \n @default 'L'\n /\n ecc?: \"H\" \| \"L\" \| \"M\" \| \"Q\"\n /\n Inverts the black and white of the QR code.\n \n @default false\n /\n invert?: boolean\n /\n The mask pattern to use.\n \n @default -1\n /\n maskPattern?: number\n /\n The maximum version of the QR code (1-40).\n \n @default 40\n /\n maxVersion?: number\n /\n The minimum version of the QR code (1-40).\n \n @default 1\n /\n minVersion?: number\n /\n The pixel size of the QR code.\n \n @default 10\n /\n pixelSize?: number\n /\n Callback function to receive the generated QR Code.\n /\n onEncoded?: (qr: QrCodeGenerateResult) => void\n}\n\nexport const useQrCode = ({\n boostEcc,\n border,\n ecc,\n invert,\n maskPattern,\n maxVersion,\n minVersion,\n pixelSize = 10,\n value,\n onEncoded,\n ...rest\n}: UseQrCodeProps) => {\n const encoded = useMemo(\n () =>\n encode(value, {\n boostEcc,\n border,\n ecc,\n invert,\n maskPattern,\n maxVersion,\n minVersion,\n onEncoded,\n }),\n [\n value,\n border,\n ecc,\n boostEcc,\n maskPattern,\n maxVersion,\n minVersion,\n invert,\n onEncoded,\n ],\n )\n const height = encoded.size pixelSize\n const width = encoded.size * pixelSize\n const viewBox = `0 0 ${width} ${height}`\n const paths: string[] = useMemo(() => {\n const result: string[] = []\n\n for (let row = 0; row < encoded.size; row++) {\n for (let col = 0; col < encoded.size; col++) {\n const x = col * pixelSize\n const y = row * pixelSize\n if (encoded.data[row]?.[col]) {\n result.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`)\n ~~}\n~~ }\n }\n return result\n }, [encoded.data, encoded.size, pixelSize])\n\n const getRootProps: PropGetter = useCallback(\n (props) => mergeProps(rest, props)(),\n [rest],\n )\n\n const getFrameProps: PropGetter<\"svg\"> = useCallback(\n (props = {}) => ({ viewBox: `0 0 ${width} ${height}`, ...props }),\n [height, width],\n )\n\n const getOverlayProps: PropGetter = useCallback(\n (props = {}) => ({ ...props }),\n [],\n )\n\n const getPatternProps: PropGetter<\"path\"> = useCallback(\n (props) => ({ ...props, d: paths.join(\" \") }),\n [paths],\n )\n\n return {\n height,\n paths,\n viewBox,\n width,\n getFrameProps,\n getOverlayProps,\n getPatternProps,\n getRootProps,\n }\n}\n\nexport type UseQrCodeReturn = ReturnType<typeof useQrCode>\n"],"mappings":";;;;AAsEA,MAAa,aAAa,EACxB,UACA,QACA,KACA,QACA,aACA,YACA,YACA,YAAY,IACZ,OACA,WACA,GAAG,WACiB;CACpB,MAAM,WAAA,GAAA,MAAA,QAAA,QAAA,GAAA,IAAA,OAAA,CAEK,OAAO;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GACH;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CACA,MAAM,SAAS,QAAQ,OAAO;CAC9B,MAAM,QAAQ,QAAQ,OAAO;CAC7B,MAAM,UAAU,OAAO,MAAM,GAAG;CAChC,MAAM,SAAA,GAAA,MAAA,QAAA,OAAgC;EACpC,MAAM,SAAmB,CAAC;EAE1B,KAAK,IAAI,MAAM,GAAG,MAAM,QAAQ,MAAM,OACpC,KAAK,IAAI,MAAM,GAAG,MAAM,QAAQ,MAAM,OAAO;GAC3C,MAAM,IAAI,MAAM;GAChB,MAAM,IAAI,MAAM;GAChB,IAAI,QAAQ,KAAK,IAAI,GAAG,MACtB,OAAO,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,UAAU,GAAG,UAAU,IAAI,UAAU,EAAE;~~EAErE~~;EAEF,OAAO;CACT,GAAG;EAAC,QAAQ;EAAM,QAAQ;EAAM;CAAS,CAAC;CAE1C,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,UAAUA,cAAAA,WAAW,MAAM,KAAK,CAAC,CAAC,GACnC,CAAC,IAAI,CACP;CAiBA,OAAO;EACL;EACA;EACA;EACA;EACA,gBAAA,GAAA,MAAA,YAAA,EAnBC,QAAQ,CAAC,OAAO;GAAE,SAAS,OAAO,MAAM,GAAG;GAAU,GAAG;EAAM,IAC/D,CAAC,QAAQ,KAAK,CAkBF;EACZ,kBAAA,GAAA,MAAA,YAAA,EAfC,QAAQ,CAAC,OAAO,EAAE,GAAG,MAAM,IAC5B,CAAC,CAca;EACd,kBAAA,GAAA,MAAA,YAAA,EAXC,WAAW;GAAE,GAAG;GAAO,GAAG,MAAM,KAAK,GAAG;EAAE,IAC3C,CAAC,KAAK,CAUQ;EACd;CACF;AACF"}
1	+ {"version":3,"file":"use-qr-code.cjs","names":["mergeProps"],"sources":["../../../../src/components/qr-code/use-qr-code.tsx"],"sourcesContent":["import type { QrCodeGenerateResult } from \"uqr\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { encode } from \"uqr\"\nimport { mergeProps } from \"../../core\"\n\nexport interface UseQrCodeProps extends HTMLProps {\n /*\n The value to encode as a QR code.\n /\n value: string\n /\n The error correction level to boost the error correction level to the maximum allowed by the version and size.\n \n @default false\n /\n boostEcc?: boolean\n /\n The border width around the QR code.\n \n @default 1\n /\n border?: number\n /\n The error correction level.\n \n - `L` allows for up to 7% error correction,\n * - `M` allows for up to 15% error correction,\n * - `Q` allows for up to 25% error correction,\n * - `H` allows for up to 30% error correction.\n \n @default 'L'\n /\n ecc?: \"H\" \| \"L\" \| \"M\" \| \"Q\"\n /\n Inverts the black and white of the QR code.\n \n @default false\n /\n invert?: boolean\n /\n The mask pattern to use.\n \n @default -1\n /\n maskPattern?: number\n /\n The maximum version of the QR code (1-40).\n \n @default 40\n /\n maxVersion?: number\n /\n The minimum version of the QR code (1-40).\n \n @default 1\n /\n minVersion?: number\n /\n The pixel size of the QR code.\n \n @default 10\n /\n pixelSize?: number\n /\n Callback function to receive the generated QR Code.\n /\n onEncoded?: (qr: QrCodeGenerateResult) => void\n}\n\nexport const useQrCode = ({\n boostEcc,\n border,\n ecc,\n invert,\n maskPattern,\n maxVersion,\n minVersion,\n pixelSize = 10,\n value,\n onEncoded,\n ...rest\n}: UseQrCodeProps) => {\n const encoded = useMemo(\n () =>\n encode(value, {\n boostEcc,\n border,\n ecc,\n invert,\n maskPattern,\n maxVersion,\n minVersion,\n onEncoded,\n }),\n [\n value,\n border,\n ecc,\n boostEcc,\n maskPattern,\n maxVersion,\n minVersion,\n invert,\n onEncoded,\n ],\n )\n const height = encoded.size pixelSize\n const width = encoded.size * pixelSize\n const viewBox = `0 0 ${width} ${height}`\n const paths: string[] = useMemo(() => {\n const result: string[] = []\n\n for (let row = 0; row < encoded.size; row++)\n for (let col = 0; col < encoded.size; col++) {\n const x = col * pixelSize\n const y = row * pixelSize\n if (encoded.data[row]?.[col])\n result.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`)\n }\n\n return result\n }, [encoded.data, encoded.size, pixelSize])\n\n const getRootProps: PropGetter = useCallback(\n (props) => mergeProps(rest, props)(),\n [rest],\n )\n\n const getFrameProps: PropGetter<\"svg\"> = useCallback(\n (props = {}) => ({ viewBox: `0 0 ${width} ${height}`, ...props }),\n [height, width],\n )\n\n const getOverlayProps: PropGetter = useCallback(\n (props = {}) => ({ ...props }),\n [],\n )\n\n const getPatternProps: PropGetter<\"path\"> = useCallback(\n (props) => ({ ...props, d: paths.join(\" \") }),\n [paths],\n )\n\n return {\n height,\n paths,\n viewBox,\n width,\n getFrameProps,\n getOverlayProps,\n getPatternProps,\n getRootProps,\n }\n}\n\nexport type UseQrCodeReturn = ReturnType<typeof useQrCode>\n"],"mappings":";;;;AAsEA,MAAa,aAAa,EACxB,UACA,QACA,KACA,QACA,aACA,YACA,YACA,YAAY,IACZ,OACA,WACA,GAAG,WACiB;CACpB,MAAM,WAAA,GAAA,MAAA,QAAA,QAAA,GAAA,IAAA,OAAA,CAEK,OAAO;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GACH;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CACA,MAAM,SAAS,QAAQ,OAAO;CAC9B,MAAM,QAAQ,QAAQ,OAAO;CAC7B,MAAM,UAAU,OAAO,MAAM,GAAG;CAChC,MAAM,SAAA,GAAA,MAAA,QAAA,OAAgC;EACpC,MAAM,SAAmB,CAAC;EAE1B,KAAK,IAAI,MAAM,GAAG,MAAM,QAAQ,MAAM,OACpC,KAAK,IAAI,MAAM,GAAG,MAAM,QAAQ,MAAM,OAAO;GAC3C,MAAM,IAAI,MAAM;GAChB,MAAM,IAAI,MAAM;GAChB,IAAI,QAAQ,KAAK,IAAI,GAAG,MACtB,OAAO,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,UAAU,GAAG,UAAU,IAAI,UAAU,EAAE;EACrE;EAEF,OAAO;CACT,GAAG;EAAC,QAAQ;EAAM,QAAQ;EAAM;CAAS,CAAC;CAE1C,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,UAAUA,cAAAA,WAAW,MAAM,KAAK,CAAC,CAAC,GACnC,CAAC,IAAI,CACP;CAiBA,OAAO;EACL;EACA;EACA;EACA;EACA,gBAAA,GAAA,MAAA,YAAA,EAnBC,QAAQ,CAAC,OAAO;GAAE,SAAS,OAAO,MAAM,GAAG;GAAU,GAAG;EAAM,IAC/D,CAAC,QAAQ,KAAK,CAkBF;EACZ,kBAAA,GAAA,MAAA,YAAA,EAfC,QAAQ,CAAC,OAAO,EAAE,GAAG,MAAM,IAC5B,CAAC,CAca;EACd,kBAAA,GAAA,MAAA,YAAA,EAXC,WAAW;GAAE,GAAG;GAAO,GAAG,MAAM,KAAK,GAAG;EAAE,IAC3C,CAAC,KAAK,CAUQ;EACd;CACF;AACF"}

package/dist/cjs/components/radio/use-radio-group.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-radio-group.cjs","names":["createContext","useFieldProps","useControllableState","mergeProps","visuallyHiddenAttributes"],"sources":["../../../../src/components/radio/use-radio-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n createContext,\n cx,\n dataAttr,\n handlerAll,\n isObject,\n isUndefined,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface RadioGroupContext extends Omit<UseRadioGroupReturn, \"getRootProps\"> {}\n\nconst [RadioGroupContext, useRadioGroupContext] =\n createContext<RadioGroupContext>({\n name: \"RadioGroupContext\",\n strict: false,\n })\n\nexport { RadioGroupContext, useRadioGroupContext }\n\nexport interface UseRadioGroupProps<Y extends string = string>\n extends Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"value\">, FieldProps {\n /*\n The initial value of the radio group.\n /\n defaultValue?: Y\n /\n The value of the radio group.\n /\n value?: Y\n /\n The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport const useRadioGroup = <Y extends string = string>(\n props: UseRadioGroupProps<Y> = {},\n) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n defaultValue,\n disabled,\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedbyProp, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (valueOrEv: ChangeEvent<HTMLInputElement> \| Y) => {\n if (!interactive) return\n\n if (isObject(valueOrEv)) ~~{\n~~ setValue(valueOrEv.target.value as Y)\n } else ~~{\n~~ setValue(valueOrEv)\n ~~}\n~~ },\n [interactive, setValue],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({\n ref,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) =>\n mergeProps(\n dataProps,\n {\n id,\n \"aria-describedby\": cx(ariaDescribedbyProp, ariaDescribedby),\n \"aria-labelledby\": cx(labelId, ariaLabelledby),\n role: \"radiogroup\",\n },\n { ref },\n rest,\n props,\n )(),\n [ariaDescribedbyProp, dataProps, id, labelId, rest],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => {\n const checked = !isUndefined(value) && value === props.value\n\n return {\n ...dataProps,\n ...ariaProps,\n type: \"radio\",\n name: id,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": checked,\n \"data-checked\": dataAttr(checked),\n checked,\n disabled,\n readOnly,\n required,\n ...props,\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n },\n [\n ariaProps,\n dataProps,\n disabled,\n eventProps,\n id,\n onChange,\n readOnly,\n required,\n value,\n ],\n )\n\n const getLabelProps: PropGetter<\"label\"> = useCallback(\n (props) => ({\n ...dataProps,\n ...props,\n }),\n [dataProps],\n )\n\n return {\n name: id,\n value,\n getInputProps,\n getLabelProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseRadioGroupReturn = ReturnType<typeof useRadioGroup>\n"],"mappings":";;;;;;;;;AAqBA,MAAM,CAAC,mBAAmB,wBACxBA,gBAAAA,cAAiC;CAC/B,MAAM;CACN,QAAQ;AACV,CAAC;AAoBH,MAAa,iBACX,QAA+B,CAAC,MAC7B;CACH,MAAM,QAAA,GAAA,MAAA,MAAA,CAAa;CACnB,MAAM,EACJ,SAAS,EAAE,YAAY,CAAC,GACxB,OAAO,EACL,KAAK,MACL,cACA,UACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,qBAAqB,GAAG,aACzD,WACA,eACEC,wBAAAA,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CAED,MAAM,YAAA,GAAA,MAAA,YAAA,EACH,cAAiD;EAChD,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,SAAS,~~GACpB~~,SAAS,UAAU,OAAO,KAAU;~~OAEpC~~,SAAS,SAAS;~~CAEtB~~,GACA,CAAC,aAAa,QAAQ,CACxB;CAEA,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,CAAC,MACHC,cAAAA,WACE,WACA;EACE;EACA,qBAAA,GAAA,oBAAA,cAAA,GAAA,CAAuB,qBAAqB,eAAe;EAC3D,oBAAA,GAAA,oBAAA,cAAA,GAAA,CAAsB,SAAS,cAAc;EAC7C,MAAM;CACR,GACA,EAAE,IAAI,GACN,MACA,KACF,CAAC,CAAC,GACJ;EAAC;EAAqB;EAAW;EAAI;EAAS;CAAI,CACpD;CA6CA,OAAO;EACL,MAAM;EACN;EACA,gBAAA,GAAA,MAAA,YAAA,EA7CC,QAAQ,CAAC,MAAM;GACd,MAAM,UAAU,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,KAAK,KAAK,UAAU,MAAM;GAEvD,OAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;IACN,MAAM;IACN,OAAOC,YAAAA,yBAAyB;IAChC,gBAAgB;IAChB,iBAAA,GAAA,oBAAA,cAAA,SAAA,CAAyB,OAAO;IAChC;IACA;IACA;IACA;IACA,GAAG;IACH,SAAA,GAAA,oBAAA,cAAA,WAAA,CAAmB,MAAM,QAAQ,WAAW,MAAM;IAClD,WAAA,GAAA,oBAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,QAAQ;IAC7C,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,WAAW,OAAO;GACvD;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAcY;EACZ,gBAAA,GAAA,MAAA,YAAA,EAXC,WAAW;GACV,GAAG;GACH,GAAG;EACL,IACA,CAAC,SAAS,CAOE;EACZ;EACA;CACF;AACF"}
1	+ {"version":3,"file":"use-radio-group.cjs","names":["createContext","useFieldProps","useControllableState","mergeProps","visuallyHiddenAttributes"],"sources":["../../../../src/components/radio/use-radio-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n createContext,\n cx,\n dataAttr,\n handlerAll,\n isObject,\n isUndefined,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface RadioGroupContext extends Omit<UseRadioGroupReturn, \"getRootProps\"> {}\n\nconst [RadioGroupContext, useRadioGroupContext] =\n createContext<RadioGroupContext>({\n name: \"RadioGroupContext\",\n strict: false,\n })\n\nexport { RadioGroupContext, useRadioGroupContext }\n\nexport interface UseRadioGroupProps<Y extends string = string>\n extends Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"value\">, FieldProps {\n /*\n The initial value of the radio group.\n /\n defaultValue?: Y\n /\n The value of the radio group.\n /\n value?: Y\n /\n The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport const useRadioGroup = <Y extends string = string>(\n props: UseRadioGroupProps<Y> = {},\n) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n defaultValue,\n disabled,\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedbyProp, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (valueOrEv: ChangeEvent<HTMLInputElement> \| Y) => {\n if (!interactive) return\n\n if (isObject(valueOrEv)) setValue(valueOrEv.target.value as Y)\n else setValue(valueOrEv)\n },\n [interactive, setValue],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({\n ref,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) =>\n mergeProps(\n dataProps,\n {\n id,\n \"aria-describedby\": cx(ariaDescribedbyProp, ariaDescribedby),\n \"aria-labelledby\": cx(labelId, ariaLabelledby),\n role: \"radiogroup\",\n },\n { ref },\n rest,\n props,\n )(),\n [ariaDescribedbyProp, dataProps, id, labelId, rest],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => {\n const checked = !isUndefined(value) && value === props.value\n\n return {\n ...dataProps,\n ...ariaProps,\n type: \"radio\",\n name: id,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": checked,\n \"data-checked\": dataAttr(checked),\n checked,\n disabled,\n readOnly,\n required,\n ...props,\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n },\n [\n ariaProps,\n dataProps,\n disabled,\n eventProps,\n id,\n onChange,\n readOnly,\n required,\n value,\n ],\n )\n\n const getLabelProps: PropGetter<\"label\"> = useCallback(\n (props) => ({\n ...dataProps,\n ...props,\n }),\n [dataProps],\n )\n\n return {\n name: id,\n value,\n getInputProps,\n getLabelProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseRadioGroupReturn = ReturnType<typeof useRadioGroup>\n"],"mappings":";;;;;;;;;AAqBA,MAAM,CAAC,mBAAmB,wBACxBA,gBAAAA,cAAiC;CAC/B,MAAM;CACN,QAAQ;AACV,CAAC;AAoBH,MAAa,iBACX,QAA+B,CAAC,MAC7B;CACH,MAAM,QAAA,GAAA,MAAA,MAAA,CAAa;CACnB,MAAM,EACJ,SAAS,EAAE,YAAY,CAAC,GACxB,OAAO,EACL,KAAK,MACL,cACA,UACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,qBAAqB,GAAG,aACzD,WACA,eACEC,wBAAAA,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CAED,MAAM,YAAA,GAAA,MAAA,YAAA,EACH,cAAiD;EAChD,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,SAAS,GAAG,SAAS,UAAU,OAAO,KAAU;OACxD,SAAS,SAAS;CACzB,GACA,CAAC,aAAa,QAAQ,CACxB;CAEA,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,CAAC,MACHC,cAAAA,WACE,WACA;EACE;EACA,qBAAA,GAAA,oBAAA,cAAA,GAAA,CAAuB,qBAAqB,eAAe;EAC3D,oBAAA,GAAA,oBAAA,cAAA,GAAA,CAAsB,SAAS,cAAc;EAC7C,MAAM;CACR,GACA,EAAE,IAAI,GACN,MACA,KACF,CAAC,CAAC,GACJ;EAAC;EAAqB;EAAW;EAAI;EAAS;CAAI,CACpD;CA6CA,OAAO;EACL,MAAM;EACN;EACA,gBAAA,GAAA,MAAA,YAAA,EA7CC,QAAQ,CAAC,MAAM;GACd,MAAM,UAAU,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,KAAK,KAAK,UAAU,MAAM;GAEvD,OAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;IACN,MAAM;IACN,OAAOC,YAAAA,yBAAyB;IAChC,gBAAgB;IAChB,iBAAA,GAAA,oBAAA,cAAA,SAAA,CAAyB,OAAO;IAChC;IACA;IACA;IACA;IACA,GAAG;IACH,SAAA,GAAA,oBAAA,cAAA,WAAA,CAAmB,MAAM,QAAQ,WAAW,MAAM;IAClD,WAAA,GAAA,oBAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,QAAQ;IAC7C,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,WAAW,OAAO;GACvD;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAcY;EACZ,gBAAA,GAAA,MAAA,YAAA,EAXC,WAAW;GACV,GAAG;GACH,GAAG;EACL,IACA,CAAC,SAAS,CAOE;EACZ;EACA;CACF;AACF"}

package/dist/cjs/components/segmented-control/segmented-control.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-control.cjs","names":["createSlotComponent","segmentedControlStyle","useSegmentedControl","useValue","SegmentedControlContext","SegmentedControlDescendantsContext","LayoutGroup","styled","useSegmentedControlItem","motion"],"sources":["../../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SegmentedControlStyle } from \"./segmented-control.style\"\nimport type {\n UseSegmentedControlItemProps,\n UseSegmentedControlProps,\n} from \"./use-segmented-control\"\nimport { LayoutGroup } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { motion } from \"../motion\"\nimport { segmentedControlStyle } from \"./segmented-control.style\"\nimport {\n SegmentedControlContext,\n SegmentedControlDescendantsContext,\n useSegmentedControl,\n useSegmentedControlItem,\n} from \"./use-segmented-control\"\n\nexport interface SegmentedControlItem extends SegmentedControlItemProps {\n label?: ReactNode\n}\n\ninterface ComponentContext extends Pick<\n SegmentedControlRootProps,\n \"indicatorProps\" \| \"itemProps\"\n> {}\n\nexport interface SegmentedControlRootProps<Y extends string = string>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"onChange\">,\n ThemeProps<SegmentedControlStyle>,\n Omit<UseSegmentedControlProps<Y>, \"orientation\"> {\n /*\n If provided, generate segmented control buttons but based on items.\n \n @default []\n /\n items?: SegmentedControlItem[]\n /\n Props for the indicator component.\n /\n indicatorProps?: SegmentedControlIndicatorProps\n /\n Props for the item component.\n /\n itemProps?: SegmentedControlItemProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SegmentedControlPropsContext,\n useComponentContext,\n usePropsContext: useSegmentedControlPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n SegmentedControlRootProps,\n SegmentedControlStyle,\n ComponentContext\n>(\"segmented-control\", segmentedControlStyle)\n\nexport { SegmentedControlPropsContext, useSegmentedControlPropsContext }\n\n/\n `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n \n @see https://yamada-ui.com/docs/components/segmented-control\n /\nexport const SegmentedControlRoot = withProvider(\n ({\n children,\n items = [],\n orientation: orientationProp,\n indicatorProps,\n itemProps,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const {\n id,\n name,\n descendants,\n disabled,\n orientation,\n readOnly,\n setValue,\n value,\n getRootProps,\n } = useSegmentedControl({ orientation: computedOrientation, ...rest })\n const cloneChildren = useMemo(() => {\n if (children) ~~{\n~~ return children\n } else {\n return items.map(({ label, ...rest }, index) => (\n <SegmentedControlItem key={index} {...rest}>\n {label}\n </SegmentedControlItem>\n ))\n ~~}\n~~ }, [children, items])\n const context = useMemo(\n () => ({ id, name, disabled, orientation, readOnly, setValue, value }),\n [id, name, disabled, readOnly, orientation, setValue, value],\n )\n const componentContext = useMemo(\n () => ({ indicatorProps, itemProps }),\n [itemProps, indicatorProps],\n )\n\n return (\n <SegmentedControlContext value={context}>\n <ComponentContext value={componentContext}>\n <SegmentedControlDescendantsContext value={descendants}>\n <LayoutGroup id={id}>\n <styled.div {...getRootProps()}>{cloneChildren}</styled.div>\n </LayoutGroup>\n </SegmentedControlDescendantsContext>\n </ComponentContext>\n </SegmentedControlContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n <Y extends string = string>(props: SegmentedControlRootProps<Y>): ReactElement\n}>\n\nexport interface SegmentedControlItemProps<Y extends string = string>\n extends HTMLStyledProps<\"label\">, UseSegmentedControlItemProps<Y> {\n /\n Props for the indicator component.\n */\n indicatorProps?: SegmentedControlIndicatorProps\n}\n\nexport const SegmentedControlItem = withContext<\n \"label\",\n SegmentedControlItemProps\n>(({ children, indicatorProps, ...rest }) => {\n const { checked, getInputProps, getLabelProps } =\n useSegmentedControlItem(rest)\n\n return (\n <styled.label {...getLabelProps()}>\n <styled.input {...getInputProps()} />\n\n <styled.span>{children}</styled.span>\n\n {checked ? <SegmentedControlIndicator {...indicatorProps} /> : null}\n </styled.label>\n )\n}, \"item\")((props) => {\n const { indicatorProps, itemProps } = useComponentContext()\n\n return {\n ...itemProps,\n ...props,\n indicatorProps: {\n ...indicatorProps,\n ...itemProps?.indicatorProps,\n ...props.indicatorProps,\n },\n }\n}) as GenericsComponent<{\n <Y extends string = string>(props: SegmentedControlItemProps<Y>): ReactElement\n}>\n\ninterface SegmentedControlIndicatorProps extends HTMLMotionProps {}\n\nconst SegmentedControlIndicator = withContext<\n \"div\",\n SegmentedControlIndicatorProps\n>(({ transition, ...props }) => {\n return (\n <motion.div\n layoutDependency={false}\n layoutId=\"indicator\"\n transition={{ duration: 0.2, ...transition }}\n {...props}\n />\n )\n}, \"indicator\")()\n"],"mappings":";;;;;;;;;;;AAqDA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACEA,yBAAAA,oBAIF,qBAAqBC,gCAAAA,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cACjC,EACC,UACA,QAAQ,CAAC,GACT,aAAa,iBACb,gBACA,WACA,GAAG,WACC;CAEJ,MAAM,EACJ,IACA,MACA,aACA,UACA,aACA,UACA,UACA,OACA,iBACEC,8BAAAA,oBAAoB;EAAE,aAXEC,8BAAAA,SAAS,eAWoB;EAAG,GAAG;CAAK,CAAC;CACrE,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8B;EAClC,IAAI,~~UACF~~,OAAO;~~OAEP~~,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;GAAkC,GAAI;aACnC;EACmB,GAFK,KAEL,CACvB;~~CAEL~~,GAAG,CAAC,UAAU,KAAK,CAAC;CAUpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,yBAAD;EAAyB,QAAA,GAAA,MAAA,QAAA,QATlB;GAAE;GAAI;GAAM;GAAU;GAAa;GAAU;GAAU;EAAM,IACpE;GAAC;GAAI;GAAM;GAAU;GAAU;GAAa;GAAU;EAAK,CAQrB;YACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,QAAA,GAAA,MAAA,QAAA,QANb;IAAE;IAAgB;GAAU,IACnC,CAAC,WAAW,cAAc,CAKgB;aACtC,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,oCAAD;IAAoC,OAAO;cACzC,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,aAAD;KAAiB;eACf,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;MAAY,GAAI,aAAa;gBAAI;KAA0B,CAAA;IAChD,CAAA;GACqB,CAAA;EACpB,CAAA;CACK,CAAA;AAE7B,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AAYF,MAAa,uBAAuB,aAGjC,EAAE,UAAU,gBAAgB,GAAG,WAAW;CAC3C,MAAM,EAAE,SAAS,eAAe,kBAC9BC,8BAAAA,wBAAwB,IAAI;CAE9B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,gBAAAA,OAAO,OAAR;EAAc,GAAI,cAAc;YAAhC;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA;GAEpC,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,MAAR,EAAc,SAAsB,CAAA;GAEnC,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,2BAAD,EAA2B,GAAI,eAAiB,CAAA,IAAI;EACnD;;AAElB,GAAG,MAAM,CAAC,EAAE,UAAU;CACpB,MAAM,EAAE,gBAAgB,cAAc,oBAAoB;CAE1D,OAAO;EACL,GAAG;EACH,GAAG;EACH,gBAAgB;GACd,GAAG;GACH,GAAG,WAAW;GACd,GAAG,MAAM;EACX;CACF;AACF,CAAC;AAMD,MAAM,4BAA4B,aAG/B,EAAE,YAAY,GAAG,YAAY;CAC9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,kBAAAA,OAAO,KAAR;EACE,kBAAkB;EAClB,UAAS;EACT,YAAY;GAAE,UAAU;GAAK,GAAG;EAAW;EAC3C,GAAI;CACL,CAAA;AAEL,GAAG,WAAW,CAAC,CAAC"}
1	+ {"version":3,"file":"segmented-control.cjs","names":["createSlotComponent","segmentedControlStyle","useSegmentedControl","useValue","SegmentedControlContext","SegmentedControlDescendantsContext","LayoutGroup","styled","useSegmentedControlItem","motion"],"sources":["../../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SegmentedControlStyle } from \"./segmented-control.style\"\nimport type {\n UseSegmentedControlItemProps,\n UseSegmentedControlProps,\n} from \"./use-segmented-control\"\nimport { LayoutGroup } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { motion } from \"../motion\"\nimport { segmentedControlStyle } from \"./segmented-control.style\"\nimport {\n SegmentedControlContext,\n SegmentedControlDescendantsContext,\n useSegmentedControl,\n useSegmentedControlItem,\n} from \"./use-segmented-control\"\n\nexport interface SegmentedControlItem extends SegmentedControlItemProps {\n label?: ReactNode\n}\n\ninterface ComponentContext extends Pick<\n SegmentedControlRootProps,\n \"indicatorProps\" \| \"itemProps\"\n> {}\n\nexport interface SegmentedControlRootProps<Y extends string = string>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"onChange\">,\n ThemeProps<SegmentedControlStyle>,\n Omit<UseSegmentedControlProps<Y>, \"orientation\"> {\n /*\n If provided, generate segmented control buttons but based on items.\n \n @default []\n /\n items?: SegmentedControlItem[]\n /\n Props for the indicator component.\n /\n indicatorProps?: SegmentedControlIndicatorProps\n /\n Props for the item component.\n /\n itemProps?: SegmentedControlItemProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SegmentedControlPropsContext,\n useComponentContext,\n usePropsContext: useSegmentedControlPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n SegmentedControlRootProps,\n SegmentedControlStyle,\n ComponentContext\n>(\"segmented-control\", segmentedControlStyle)\n\nexport { SegmentedControlPropsContext, useSegmentedControlPropsContext }\n\n/\n `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n \n @see https://yamada-ui.com/docs/components/segmented-control\n /\nexport const SegmentedControlRoot = withProvider(\n ({\n children,\n items = [],\n orientation: orientationProp,\n indicatorProps,\n itemProps,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const {\n id,\n name,\n descendants,\n disabled,\n orientation,\n readOnly,\n setValue,\n value,\n getRootProps,\n } = useSegmentedControl({ orientation: computedOrientation, ...rest })\n const cloneChildren = useMemo(() => {\n if (children) return children\n else\n return items.map(({ label, ...rest }, index) => (\n <SegmentedControlItem key={index} {...rest}>\n {label}\n </SegmentedControlItem>\n ))\n }, [children, items])\n const context = useMemo(\n () => ({ id, name, disabled, orientation, readOnly, setValue, value }),\n [id, name, disabled, readOnly, orientation, setValue, value],\n )\n const componentContext = useMemo(\n () => ({ indicatorProps, itemProps }),\n [itemProps, indicatorProps],\n )\n\n return (\n <SegmentedControlContext value={context}>\n <ComponentContext value={componentContext}>\n <SegmentedControlDescendantsContext value={descendants}>\n <LayoutGroup id={id}>\n <styled.div {...getRootProps()}>{cloneChildren}</styled.div>\n </LayoutGroup>\n </SegmentedControlDescendantsContext>\n </ComponentContext>\n </SegmentedControlContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n <Y extends string = string>(props: SegmentedControlRootProps<Y>): ReactElement\n}>\n\nexport interface SegmentedControlItemProps<Y extends string = string>\n extends HTMLStyledProps<\"label\">, UseSegmentedControlItemProps<Y> {\n /\n Props for the indicator component.\n */\n indicatorProps?: SegmentedControlIndicatorProps\n}\n\nexport const SegmentedControlItem = withContext<\n \"label\",\n SegmentedControlItemProps\n>(({ children, indicatorProps, ...rest }) => {\n const { checked, getInputProps, getLabelProps } =\n useSegmentedControlItem(rest)\n\n return (\n <styled.label {...getLabelProps()}>\n <styled.input {...getInputProps()} />\n\n <styled.span>{children}</styled.span>\n\n {checked ? <SegmentedControlIndicator {...indicatorProps} /> : null}\n </styled.label>\n )\n}, \"item\")((props) => {\n const { indicatorProps, itemProps } = useComponentContext()\n\n return {\n ...itemProps,\n ...props,\n indicatorProps: {\n ...indicatorProps,\n ...itemProps?.indicatorProps,\n ...props.indicatorProps,\n },\n }\n}) as GenericsComponent<{\n <Y extends string = string>(props: SegmentedControlItemProps<Y>): ReactElement\n}>\n\ninterface SegmentedControlIndicatorProps extends HTMLMotionProps {}\n\nconst SegmentedControlIndicator = withContext<\n \"div\",\n SegmentedControlIndicatorProps\n>(({ transition, ...props }) => {\n return (\n <motion.div\n layoutDependency={false}\n layoutId=\"indicator\"\n transition={{ duration: 0.2, ...transition }}\n {...props}\n />\n )\n}, \"indicator\")()\n"],"mappings":";;;;;;;;;;;AAqDA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACEA,yBAAAA,oBAIF,qBAAqBC,gCAAAA,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cACjC,EACC,UACA,QAAQ,CAAC,GACT,aAAa,iBACb,gBACA,WACA,GAAG,WACC;CAEJ,MAAM,EACJ,IACA,MACA,aACA,UACA,aACA,UACA,UACA,OACA,iBACEC,8BAAAA,oBAAoB;EAAE,aAXEC,8BAAAA,SAAS,eAWoB;EAAG,GAAG;CAAK,CAAC;CACrE,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8B;EAClC,IAAI,UAAU,OAAO;OAEnB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;GAAkC,GAAI;aACnC;EACmB,GAFK,KAEL,CACvB;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CAUpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,yBAAD;EAAyB,QAAA,GAAA,MAAA,QAAA,QATlB;GAAE;GAAI;GAAM;GAAU;GAAa;GAAU;GAAU;EAAM,IACpE;GAAC;GAAI;GAAM;GAAU;GAAU;GAAa;GAAU;EAAK,CAQrB;YACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,QAAA,GAAA,MAAA,QAAA,QANb;IAAE;IAAgB;GAAU,IACnC,CAAC,WAAW,cAAc,CAKgB;aACtC,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,oCAAD;IAAoC,OAAO;cACzC,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,aAAD;KAAiB;eACf,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;MAAY,GAAI,aAAa;gBAAI;KAA0B,CAAA;IAChD,CAAA;GACqB,CAAA;EACpB,CAAA;CACK,CAAA;AAE7B,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AAYF,MAAa,uBAAuB,aAGjC,EAAE,UAAU,gBAAgB,GAAG,WAAW;CAC3C,MAAM,EAAE,SAAS,eAAe,kBAC9BC,8BAAAA,wBAAwB,IAAI;CAE9B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,gBAAAA,OAAO,OAAR;EAAc,GAAI,cAAc;YAAhC;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA;GAEpC,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,MAAR,EAAc,SAAsB,CAAA;GAEnC,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,2BAAD,EAA2B,GAAI,eAAiB,CAAA,IAAI;EACnD;;AAElB,GAAG,MAAM,CAAC,EAAE,UAAU;CACpB,MAAM,EAAE,gBAAgB,cAAc,oBAAoB;CAE1D,OAAO;EACL,GAAG;EACH,GAAG;EACH,gBAAgB;GACd,GAAG;GACH,GAAG,WAAW;GACd,GAAG,MAAM;EACX;CACF;AACF,CAAC;AAMD,MAAM,4BAA4B,aAG/B,EAAE,YAAY,GAAG,YAAY;CAC9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,kBAAAA,OAAO,KAAR;EACE,kBAAkB;EAClB,UAAS;EACT,YAAY;GAAE,UAAU;GAAK,GAAG;EAAW;EAC3C,GAAI;CACL,CAAA;AAEL,GAAG,WAAW,CAAC,CAAC"}

package/dist/cjs/components/select/use-select.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-select.cjs","names":["createContext","useI18n","useFieldProps","useControllableState","useCombobox","mergeRefs","visuallyHiddenAttributes","runKeyAction","useComboboxItem"],"sources":["../../../../src/components/select/use-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type {\n ComboboxItem,\n ComboboxItemWithValue,\n UseComboboxItemProps,\n UseComboboxProps,\n} from \"../../hooks/use-combobox\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport {\n cloneElement,\n isValidElement,\n useCallback,\n useMemo,\n useRef,\n} from \"react\"\nimport { useCombobox, useComboboxItem } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isNumber,\n isString,\n isUndefined,\n mergeRefs,\n runKeyAction,\n toArray,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface SelectRenderProps extends ComboboxItemWithValue {\n count: number\n index: number\n separator: string\n onClear: () => void\n}\n\nexport interface SelectItemRender {\n (props: SelectRenderProps): ReactNode\n}\n\nconst defaultRender: SelectItemRender = ({\n count,\n index,\n label,\n separator,\n value,\n}) => {\n const last = count - 1 === index\n\n return (\n <span\n style={{ marginInlineEnd: \"var(--gap)\" }}\n data-placeholder={dataAttr(value === \"\")}\n >\n {label}\n {!last ? separator : null}\n </span>\n )\n}\n\ninterface SelectContext extends Pick<UseSelectReturn, \"max\" \| \"value\"> {}\n\nconst [SelectContext, useSelectContext] = createContext<SelectContext>({\n name: \"SelectContext\",\n})\n\nexport { SelectContext, useSelectContext }\n\nexport interface UseSelectProps<Multiple extends boolean = false>\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"value\">,\n Omit<\n UseComboboxProps,\n \"defaultValue\" \| \"initialFocusValue\" \| \"onChange\" \| \"value\"\n >,\n FieldProps {\n /*\n The initial value of the select.\n /\n defaultValue?: Multiple extends true ? string[] : string\n /\n If `true`, the field will be focused when the clear icon is clicked.\n \n @default true\n /\n focusOnClear?: boolean\n /\n The `id` attribute of the input element.\n /\n id?: string\n /\n If `true`, include placeholder in options.\n \n @default true\n /\n includePlaceholder?: boolean\n /\n If provided, generate options based on items.\n \n @default []\n /\n items?: ComboboxItem[]\n /\n The maximum selectable value.\n /\n max?: number\n /\n If `true`, the select will be multiple.\n \n @default false\n /\n multiple?: Multiple\n /\n The `name` attribute of the input element.\n /\n name?: string\n /\n The placeholder for select.\n /\n placeholder?: string\n /\n The visual separator between each value.\n \n @default ','\n /\n separator?: string\n /\n The value of the select.\n /\n value?: Multiple extends true ? string[] : string\n /\n The callback invoked when value state changes.\n /\n onChange?: (value: Multiple extends true ? string[] : string) => void\n /\n The function to render the selected items.\n */\n render?: (props: SelectRenderProps) => ReactNode\n}\n\nexport const useSelect = <Multiple extends boolean = false>(\n props: UseSelectProps<Multiple> = {},\n) => {\n type MaybeValue = Multiple extends true ? string[] : string\n\n const { t } = useI18n(\"select\")\n const {\n context: { labelId } = {},\n props: {\n id,\n name,\n multiple = false,\n closeOnSelect = !multiple,\n defaultValue = (multiple ? [] : \"\") as MaybeValue,\n disabled,\n focusOnClear = true,\n includePlaceholder = !multiple,\n items: itemProp = [],\n max,\n placeholder,\n readOnly,\n render = defaultRender,\n required,\n separator = \",\",\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const fieldRef = useRef<HTMLDivElement>(null)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const onChange = useCallback(\n (value: string) => {\n setValue((prev) => {\n if (isArray(prev)) {\n if (prev.includes(value)) {\n return prev.filter((prevValue) => prevValue !== value) as MaybeValue\n } else if (!isNumber(max) \|\| prev.length < max) {\n return [...prev, value] as MaybeValue\n } else {\n return prev\n }\n } else {\n return value as MaybeValue\n }\n })\n },\n [max, setValue],\n )\n const items = useMemo<ComboboxItem[]>(() => {\n const items = [...itemProp]\n\n if (placeholder)\n items.unshift({\n hidden: !includePlaceholder,\n label: placeholder,\n value: \"\",\n })\n\n return items\n }, [itemProp, placeholder, includePlaceholder])\n const empty = useMemo(\n () => !items.filter(({ hidden }) => !hidden).length,\n [items],\n )\n const {\n descendants,\n interactive,\n open,\n getContentProps: getComboboxContentProps,\n getSeparatorProps,\n getTriggerProps,\n popoverProps,\n onActiveDescendant,\n onClose,\n onOpen,\n onSelect,\n } = useCombobox({\n closeOnSelect,\n disabled,\n initialFocusValue: isArray(value) ? value[0] : value,\n readOnly,\n onChange,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n })\n const valueMap = useMemo<{ [key: string]: ComboboxItemWithValue }>(() => {\n const valueMap: { [key: string]: ComboboxItemWithValue } = {}\n\n items.forEach((item) => {\n if (\"items\" in item) {\n item.items.forEach((item) => {\n item.value ??= isString(item.label) ? item.label : undefined\n\n if (!isUndefined(item.value)) valueMap[item.value] = item\n })\n } else {\n item.value ??= isString(item.label) ? item.label : undefined\n\n if (!isUndefined(item.value)) valueMap[item.value] = item\n }\n })\n\n return valueMap\n }, [items])\n const selectedItems = useMemo<ComboboxItemWithValue[]>(() => {\n if (isArray(value)) {\n if (value.length) {\n return toArray(value.map((value) => valueMap[value]))\n } else {\n return placeholder ? [{ label: placeholder, value: \"\" }] : []\n }\n } else {\n return isString(value) ? toArray(valueMap[value]) : []\n }\n }, [placeholder, value, valueMap])\n const children = useMemo<ReactNode>(() => {\n const count = selectedItems.length\n\n return selectedItems.map((item, index) => {\n const onClear = (ev?: MouseEvent<HTMLElement>) => {\n ev?.preventDefault()\n ev?.stopPropagation()\n\n if (item.value) onChange(item.value)\n }\n\n const component = render({\n count,\n index,\n separator,\n onClear,\n ...item,\n })\n\n if (isValidElement<Dict>(component)) {\n return cloneElement(component, { ...component.props, key: index })\n } else {\n return component\n }\n })\n }, [onChange, render, selectedItems, separator])\n\n const onFocus = useCallback(() => {\n if (!interactive \|\| !fieldRef.current) return\n\n fieldRef.current.focus()\n }, [interactive])\n\n const onClear = useCallback(() => {\n if (!interactive) return\n\n setValue((prev) => (isArray(prev) ? [] : \"\") as MaybeValue)\n\n if (!fieldRef.current) return\n\n if (focusOnClear) fieldRef.current.focus()\n }, [focusOnClear, interactive, setValue])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n const getFieldProps: PropGetter = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n getTriggerProps({\n ref: mergeRefs(ref, fieldRef),\n \"aria-label\": placeholder,\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n ...props,\n children,\n }),\n [children, getTriggerProps, labelId, placeholder],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...visuallyHiddenAttributes,\n id,\n name,\n defaultValue: isString(value) ? value : value.join(\", \"),\n disabled,\n readOnly,\n required,\n ...props,\n onFocus: handlerAll(props.onFocus, onFocus),\n }),\n [dataProps, disabled, id, name, onFocus, readOnly, required, value],\n )\n\n const getContentProps: PropGetter = useCallback(\n (props) => getComboboxContentProps({ hidden: empty, ...props }),\n [empty, getComboboxContentProps],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n const getClearIconProps: PropGetter = useCallback(\n (props = {}) =>\n getIconProps({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Clear value\"),\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClear),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, { Enter: onClear, Space: onClear }),\n ),\n }),\n [getIconProps, interactive, onClear, t],\n )\n\n return {\n descendants,\n includePlaceholder,\n interactive,\n items,\n max,\n open,\n placeholder,\n setValue,\n value,\n valueMap,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onChange,\n onClose,\n onOpen,\n onSelect,\n }\n}\n\nexport type UseSelectReturn = ReturnType<typeof useSelect>\n\nexport interface UseSelectOptionProps extends UseComboboxItemProps {}\n\nexport const useSelectOption = ({\n children,\n closeOnSelect,\n disabled,\n hidden,\n value,\n ...rest\n}: UseSelectOptionProps = {}) => {\n const { max, value: selectedValue } = useSelectContext()\n\n value ??= isString(children) ? children : undefined\n\n const selected = isArray(selectedValue)\n ? !isUndefined(value) && selectedValue.includes(value)\n : selectedValue === value\n const completed =\n isNumber(max) && isArray(selectedValue) && selectedValue.length >= max\n const { getIndicatorProps, getItemProps } = useComboboxItem({\n children,\n closeOnSelect,\n disabled: disabled \|\| hidden \|\| (completed && !selected),\n hidden,\n selected,\n value,\n ...rest,\n })\n\n const getOptionProps: PropGetter = useCallback(\n (props = {}) => getItemProps(props),\n [getItemProps],\n )\n\n return { getIndicatorProps, getOptionProps }\n}\n\nexport type UseSelectOptionReturn = ReturnType<typeof useSelectOption>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-select.cjs","names":["createContext","useI18n","useFieldProps","useControllableState","useCombobox","mergeRefs","visuallyHiddenAttributes","runKeyAction","useComboboxItem"],"sources":["../../../../src/components/select/use-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type {\n ComboboxItem,\n ComboboxItemWithValue,\n UseComboboxItemProps,\n UseComboboxProps,\n} from \"../../hooks/use-combobox\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport {\n cloneElement,\n isValidElement,\n useCallback,\n useMemo,\n useRef,\n} from \"react\"\nimport { useCombobox, useComboboxItem } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isNumber,\n isString,\n isUndefined,\n mergeRefs,\n runKeyAction,\n toArray,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface SelectRenderProps extends ComboboxItemWithValue {\n count: number\n index: number\n separator: string\n onClear: () => void\n}\n\nexport interface SelectItemRender {\n (props: SelectRenderProps): ReactNode\n}\n\nconst defaultRender: SelectItemRender = ({\n count,\n index,\n label,\n separator,\n value,\n}) => {\n const last = count - 1 === index\n\n return (\n <span\n style={{ marginInlineEnd: \"var(--gap)\" }}\n data-placeholder={dataAttr(value === \"\")}\n >\n {label}\n {!last ? separator : null}\n </span>\n )\n}\n\ninterface SelectContext extends Pick<UseSelectReturn, \"max\" \| \"value\"> {}\n\nconst [SelectContext, useSelectContext] = createContext<SelectContext>({\n name: \"SelectContext\",\n})\n\nexport { SelectContext, useSelectContext }\n\nexport interface UseSelectProps<Multiple extends boolean = false>\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"value\">,\n Omit<\n UseComboboxProps,\n \"defaultValue\" \| \"initialFocusValue\" \| \"onChange\" \| \"value\"\n >,\n FieldProps {\n /*\n The initial value of the select.\n /\n defaultValue?: Multiple extends true ? string[] : string\n /\n If `true`, the field will be focused when the clear icon is clicked.\n \n @default true\n /\n focusOnClear?: boolean\n /\n The `id` attribute of the input element.\n /\n id?: string\n /\n If `true`, include placeholder in options.\n \n @default true\n /\n includePlaceholder?: boolean\n /\n If provided, generate options based on items.\n \n @default []\n /\n items?: ComboboxItem[]\n /\n The maximum selectable value.\n /\n max?: number\n /\n If `true`, the select will be multiple.\n \n @default false\n /\n multiple?: Multiple\n /\n The `name` attribute of the input element.\n /\n name?: string\n /\n The placeholder for select.\n /\n placeholder?: string\n /\n The visual separator between each value.\n \n @default ','\n /\n separator?: string\n /\n The value of the select.\n /\n value?: Multiple extends true ? string[] : string\n /\n The callback invoked when value state changes.\n /\n onChange?: (value: Multiple extends true ? string[] : string) => void\n /\n The function to render the selected items.\n */\n render?: (props: SelectRenderProps) => ReactNode\n}\n\nexport const useSelect = <Multiple extends boolean = false>(\n props: UseSelectProps<Multiple> = {},\n) => {\n type MaybeValue = Multiple extends true ? string[] : string\n\n const { t } = useI18n(\"select\")\n const {\n context: { labelId } = {},\n props: {\n id,\n name,\n multiple = false,\n closeOnSelect = !multiple,\n defaultValue = (multiple ? [] : \"\") as MaybeValue,\n disabled,\n focusOnClear = true,\n includePlaceholder = !multiple,\n items: itemProp = [],\n max,\n placeholder,\n readOnly,\n render = defaultRender,\n required,\n separator = \",\",\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const fieldRef = useRef<HTMLDivElement>(null)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const onChange = useCallback(\n (value: string) => {\n setValue((prev) => {\n if (isArray(prev))\n if (prev.includes(value))\n return prev.filter((prevValue) => prevValue !== value) as MaybeValue\n else if (!isNumber(max) \|\| prev.length < max)\n return [...prev, value] as MaybeValue\n else return prev\n else return value as MaybeValue\n })\n },\n [max, setValue],\n )\n const items = useMemo<ComboboxItem[]>(() => {\n const items = [...itemProp]\n\n if (placeholder)\n items.unshift({\n hidden: !includePlaceholder,\n label: placeholder,\n value: \"\",\n })\n\n return items\n }, [itemProp, placeholder, includePlaceholder])\n const empty = useMemo(\n () => !items.filter(({ hidden }) => !hidden).length,\n [items],\n )\n const {\n descendants,\n interactive,\n open,\n getContentProps: getComboboxContentProps,\n getSeparatorProps,\n getTriggerProps,\n popoverProps,\n onActiveDescendant,\n onClose,\n onOpen,\n onSelect,\n } = useCombobox({\n closeOnSelect,\n disabled,\n initialFocusValue: isArray(value) ? value[0] : value,\n readOnly,\n onChange,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n })\n const valueMap = useMemo<{ [key: string]: ComboboxItemWithValue }>(() => {\n const valueMap: { [key: string]: ComboboxItemWithValue } = {}\n\n items.forEach((item) => {\n if (\"items\" in item) {\n item.items.forEach((item) => {\n item.value ??= isString(item.label) ? item.label : undefined\n\n if (!isUndefined(item.value)) valueMap[item.value] = item\n })\n } else {\n item.value ??= isString(item.label) ? item.label : undefined\n\n if (!isUndefined(item.value)) valueMap[item.value] = item\n }\n })\n\n return valueMap\n }, [items])\n const selectedItems = useMemo<ComboboxItemWithValue[]>(() => {\n if (isArray(value))\n if (value.length) return toArray(value.map((value) => valueMap[value]))\n else return placeholder ? [{ label: placeholder, value: \"\" }] : []\n else return isString(value) ? toArray(valueMap[value]) : []\n }, [placeholder, value, valueMap])\n const children = useMemo<ReactNode>(() => {\n const count = selectedItems.length\n\n return selectedItems.map((item, index) => {\n const onClear = (ev?: MouseEvent<HTMLElement>) => {\n ev?.preventDefault()\n ev?.stopPropagation()\n\n if (item.value) onChange(item.value)\n }\n\n const component = render({\n count,\n index,\n separator,\n onClear,\n ...item,\n })\n\n if (isValidElement<Dict>(component))\n return cloneElement(component, { ...component.props, key: index })\n else return component\n })\n }, [onChange, render, selectedItems, separator])\n\n const onFocus = useCallback(() => {\n if (!interactive \|\| !fieldRef.current) return\n\n fieldRef.current.focus()\n }, [interactive])\n\n const onClear = useCallback(() => {\n if (!interactive) return\n\n setValue((prev) => (isArray(prev) ? [] : \"\") as MaybeValue)\n\n if (!fieldRef.current) return\n\n if (focusOnClear) fieldRef.current.focus()\n }, [focusOnClear, interactive, setValue])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n const getFieldProps: PropGetter = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n getTriggerProps({\n ref: mergeRefs(ref, fieldRef),\n \"aria-label\": placeholder,\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n ...props,\n children,\n }),\n [children, getTriggerProps, labelId, placeholder],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...visuallyHiddenAttributes,\n id,\n name,\n defaultValue: isString(value) ? value : value.join(\", \"),\n disabled,\n readOnly,\n required,\n ...props,\n onFocus: handlerAll(props.onFocus, onFocus),\n }),\n [dataProps, disabled, id, name, onFocus, readOnly, required, value],\n )\n\n const getContentProps: PropGetter = useCallback(\n (props) => getComboboxContentProps({ hidden: empty, ...props }),\n [empty, getComboboxContentProps],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n const getClearIconProps: PropGetter = useCallback(\n (props = {}) =>\n getIconProps({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Clear value\"),\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClear),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, { Enter: onClear, Space: onClear }),\n ),\n }),\n [getIconProps, interactive, onClear, t],\n )\n\n return {\n descendants,\n includePlaceholder,\n interactive,\n items,\n max,\n open,\n placeholder,\n setValue,\n value,\n valueMap,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n getSeparatorProps,\n popoverProps,\n onActiveDescendant,\n onChange,\n onClose,\n onOpen,\n onSelect,\n }\n}\n\nexport type UseSelectReturn = ReturnType<typeof useSelect>\n\nexport interface UseSelectOptionProps extends UseComboboxItemProps {}\n\nexport const useSelectOption = ({\n children,\n closeOnSelect,\n disabled,\n hidden,\n value,\n ...rest\n}: UseSelectOptionProps = {}) => {\n const { max, value: selectedValue } = useSelectContext()\n\n value ??= isString(children) ? children : undefined\n\n const selected = isArray(selectedValue)\n ? !isUndefined(value) && selectedValue.includes(value)\n : selectedValue === value\n const completed =\n isNumber(max) && isArray(selectedValue) && selectedValue.length >= max\n const { getIndicatorProps, getItemProps } = useComboboxItem({\n children,\n closeOnSelect,\n disabled: disabled \|\| hidden \|\| (completed && !selected),\n hidden,\n selected,\n value,\n ...rest,\n })\n\n const getOptionProps: PropGetter = useCallback(\n (props = {}) => getItemProps(props),\n [getItemProps],\n )\n\n return { getIndicatorProps, getOptionProps }\n}\n\nexport type UseSelectOptionReturn = ReturnType<typeof useSelectOption>\n"],"mappings":"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"}

package/dist/cjs/components/show/show.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"show.cjs","names":[],"sources":["../../../../src/components/show/show.tsx"],"sourcesContent":["import type { ReactNode } from \"react\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { isValidElement } from \"react\"\nimport { runIfFn } from \"../../utils\"\n\nexport interface ShowProps<Y> {\n /*\n The children to render if `when` is `true`\n /\n children: ReactNodeOrFunction<Y>\n /\n The fallback content to render if `when` is `false`\n /\n fallback?: ReactNode\n /\n If `true`, it'll render the `children` prop\n /\n when?: null \| Y\n}\n\n/\n `Show` is a component that shows or hides its children based on a condition.\n \n @see https://yamada-ui.com/docs/components/show\n */\nexport const Show = <Y,>({\n children,\n fallback,\n when,\n}: ShowProps<Y>): ReactNode => {\n let result: ReactNode\n\n if (!when) ~~{\n~~ result = fallback\n } else ~~{\n~~ result = runIfFn(children, when)\n }\n\n // eslint-disable-next-line react/jsx-no-useless-fragment\n return isValidElement(result) ? result : <>{result}</>\n}\n"],"mappings":";;;;;;;;;AAyBA,MAAa,QAAY,EACvB,UACA,UACA,WAC6B;CAC7B,IAAI;CAEJ,IAAI,CAAC,~~MACH~~,SAAS;~~MAET~~,UAAA,GAAA,oBAAA,cAAA,QAAA,CAAiB,UAAU,IAAI;~~CAIjC~~,QAAA,GAAA,MAAA,eAAA,CAAsB,MAAM,IAAI,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UAAG,OAAS,CAAA;AACvD"}
1	+ {"version":3,"file":"show.cjs","names":[],"sources":["../../../../src/components/show/show.tsx"],"sourcesContent":["import type { ReactNode } from \"react\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { isValidElement } from \"react\"\nimport { runIfFn } from \"../../utils\"\n\nexport interface ShowProps<Y> {\n /*\n The children to render if `when` is `true`\n /\n children: ReactNodeOrFunction<Y>\n /\n The fallback content to render if `when` is `false`\n /\n fallback?: ReactNode\n /\n If `true`, it'll render the `children` prop\n /\n when?: null \| Y\n}\n\n/\n `Show` is a component that shows or hides its children based on a condition.\n \n @see https://yamada-ui.com/docs/components/show\n */\nexport const Show = <Y,>({\n children,\n fallback,\n when,\n}: ShowProps<Y>): ReactNode => {\n let result: ReactNode\n\n if (!when) result = fallback\n else result = runIfFn(children, when)\n\n // eslint-disable-next-line react/jsx-no-useless-fragment\n return isValidElement(result) ? result : <>{result}</>\n}\n"],"mappings":";;;;;;;;;AAyBA,MAAa,QAAY,EACvB,UACA,UACA,WAC6B;CAC7B,IAAI;CAEJ,IAAI,CAAC,MAAM,SAAS;MACf,UAAA,GAAA,oBAAA,cAAA,QAAA,CAAiB,UAAU,IAAI;CAGpC,QAAA,GAAA,MAAA,eAAA,CAAsB,MAAM,IAAI,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UAAG,OAAS,CAAA;AACvD"}