npm - @yamada-ui/react - Versions diffs - 2.3.0-dev-20260724085908 → 2.3.0-dev-20260730080927 - Mend

@yamada-ui/react 2.3.0-dev-20260724085908 → 2.3.0-dev-20260730080927

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 (350) hide show

package/dist/esm/components/native-select/native-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"native-select.js","names":["InputGroup.Root","InputGroup.Element"],"sources":["../../../../src/components/native-select/native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { NativeSelectStyle } from \"./native-select.style\"\nimport type { UseNativeSelectProps } from \"./use-native-select\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { nativeSelectStyle } from \"./native-select.style\"\nimport { useNativeSelect } from \"./use-native-select\"\n\nexport interface NativeSelectRootProps\n extends\n Omit<HTMLStyledProps<\"select\">, \"size\">,\n UseNativeSelectProps,\n ThemeProps<NativeSelectStyle>,\n FieldProps,\n UseInputBorderProps {\n /*\n The icon to be used in the select.\n /\n icon?: ReactNode\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for icon element.\n /\n iconProps?: NativeSelectIconProps\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n component,\n PropsContext: NativeSelectPropsContext,\n usePropsContext: useNativeSelectPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<NativeSelectRootProps, NativeSelectStyle>(\n \"native-select\",\n nativeSelectStyle,\n)\n\nexport { NativeSelectPropsContext, useNativeSelectPropsContext }\n\n/\n `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n \n @see https://yamada-ui.com/docs/components/native-select\n */\nexport const NativeSelectRoot = withProvider<\"select\", NativeSelectRootProps>(\n (props) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n errorBorderColor,\n focusBorderColor,\n icon,\n elementProps,\n iconProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const { getFieldProps, getIconProps, getRootProps } = useNativeSelect(rest)\n const varProps = useInputBorder({\n errorBorderColor,\n focusBorderColor,\n })\n\n return (\n <InputGroup.Root\n {...mergeProps(\n { className, css, colorScheme },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n <NativeSelectField {...getFieldProps({ ...varProps })} />\n\n <InputGroup.Element {...elementProps}>\n <NativeSelectIcon icon={icon} {...getIconProps(iconProps)} />\n </InputGroup.Element>\n </InputGroup.Root>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface NativeSelectFieldProps extends HTMLStyledProps<\"select\"> {}\n\nconst NativeSelectField = withContext<\"select\", NativeSelectFieldProps>(\n \"select\",\n \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface NativeSelectIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst NativeSelectIcon = withContext<\"div\", NativeSelectIconProps>(\n \"div\",\n \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n}))\n\nexport interface NativeSelectGroupProps extends HTMLProps<\"optgroup\"> {}\n\nexport const NativeSelectGroup = component<\"optgroup\", NativeSelectGroupProps>(\n \"optgroup\",\n \"group\",\n)()\n\nexport interface NativeSelectOptionProps extends HTMLProps<\"option\"> {}\n\nexport const NativeSelectOption = component<\"option\", NativeSelectOptionProps>(\n \"option\",\n \"option\",\n)()\n\nexport interface NativeSelectSeparatorProps extends HTMLProps<\"hr\"> {}\n\nexport const NativeSelectSeparator = component<\n \"hr\",\n NativeSelectSeparatorProps\n>(\"hr\", \"separator\")()\n"],"mappings":";;;;;;;;;;;;;AAwCA,MAAM,EACJ,WACA,cAAc,0BACd,iBAAiB,6BACjB,aACA,iBACE,oBACF,iBACA,iBACF;;;;;;AASA,MAAa,mBAAmB,cAC7B,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,kBACA,kBACA,MACA,cACA,WACA,WACA,GAAG,UAEH,kBAAkB,KAAK;CAC3B,MAAM,EAAE,eAAe,cAAc,iBAAiB,gBAAgB,IAAI;CAC1E,MAAM,WAAW,eAAe;EAC9B;EACA;CACF,CAAC;CAED,OACE,qBAACA,gBAAD;EACE,GAAI,WACF;GAAE;GAAW;GAAK;EAAY,GAC9B,aAAa,cAAc,GAC3B,SACF,CAAC,CAAC;~~YALJ~~,CAOE,oBAAC,mBAAD,EAAmB,GAAI,cAAc,EAAE,GAAG,SAAS,CAAC,EAAI,CAAA,GAExD,oBAACC,cAAD;GAAoB,GAAI;~~aACtB~~,oBAAC,kBAAD;IAAwB;IAAM,GAAI,aAAa,SAAS;GAAI,CAAA;EAC1C,CAAA,CACL;;AAErB,GACA,MACF,CAAC,EAAE,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,oBAAoB,YACxB,UACA,OACF,CAAC,CAAC,EAAE,wBAAwB,GAAG,CAAC;AAMhC,MAAM,mBAAmB,YACvB,OACA,MACF,CAAC,CAAC,KAAA,IAAY,EAAE,UAAU,MAAM,GAAG,YAAY;CAC7C,UAAU,QAAQ,YAAY,oBAAC,iBAAD,CAAkB,CAAA;CAChD,GAAG;AACL,EAAE;AAIF,MAAa,oBAAoB,UAC/B,YACA,OACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,UAChC,UACA,QACF,CAAC,CAAC;AAIF,MAAa,wBAAwB,UAGnC,MAAM,WAAW,CAAC,CAAC"}
1	+ {"version":3,"file":"native-select.js","names":["InputGroup.Root","InputGroup.Element"],"sources":["../../../../src/components/native-select/native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { NativeSelectStyle } from \"./native-select.style\"\nimport type { UseNativeSelectProps } from \"./use-native-select\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { nativeSelectStyle } from \"./native-select.style\"\nimport { useNativeSelect } from \"./use-native-select\"\n\nexport interface NativeSelectRootProps\n extends\n Omit<HTMLStyledProps<\"select\">, \"size\">,\n UseNativeSelectProps,\n ThemeProps<NativeSelectStyle>,\n FieldProps,\n UseInputBorderProps {\n /*\n The icon to be used in the select.\n /\n icon?: ReactNode\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n Props for icon element.\n /\n iconProps?: NativeSelectIconProps\n /\n Props for root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n component,\n PropsContext: NativeSelectPropsContext,\n usePropsContext: useNativeSelectPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<NativeSelectRootProps, NativeSelectStyle>(\n \"native-select\",\n nativeSelectStyle,\n)\n\nexport { NativeSelectPropsContext, useNativeSelectPropsContext }\n\n/\n `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).\n \n @see https://yamada-ui.com/docs/components/native-select\n */\nexport const NativeSelectRoot = withProvider<\"select\", NativeSelectRootProps>(\n (props) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n errorBorderColor,\n focusBorderColor,\n icon,\n elementProps,\n iconProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const { getFieldProps, getIconProps, getRootProps } = useNativeSelect(rest)\n const varProps = useInputBorder({\n errorBorderColor,\n focusBorderColor,\n })\n\n return (\n <InputGroup.Root\n {...mergeProps(\n { className, css, colorScheme },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n <NativeSelectField {...getFieldProps({ ...varProps })} />\n\n <InputGroup.Element {...elementProps}>\n <NativeSelectIcon icon={icon} {...getIconProps(iconProps)} />\n </InputGroup.Element>\n </InputGroup.Root>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface NativeSelectFieldProps extends HTMLStyledProps<\"select\"> {}\n\nconst NativeSelectField = withContext<\"select\", NativeSelectFieldProps>(\n \"select\",\n \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface NativeSelectIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst NativeSelectIcon = withContext<\"div\", NativeSelectIconProps>(\n \"div\",\n \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n children: icon \|\| children \|\| <ChevronDownIcon />,\n ...rest,\n}))\n\nexport interface NativeSelectGroupProps extends HTMLProps<\"optgroup\"> {}\n\nexport const NativeSelectGroup = component<\"optgroup\", NativeSelectGroupProps>(\n \"optgroup\",\n \"group\",\n)()\n\nexport interface NativeSelectOptionProps extends HTMLProps<\"option\"> {}\n\nexport const NativeSelectOption = component<\"option\", NativeSelectOptionProps>(\n \"option\",\n \"option\",\n)()\n\nexport interface NativeSelectSeparatorProps extends HTMLProps<\"hr\"> {}\n\nexport const NativeSelectSeparator = component<\n \"hr\",\n NativeSelectSeparatorProps\n>(\"hr\", \"separator\")()\n"],"mappings":";;;;;;;;;;;;;AAwCA,MAAM,EACJ,WACA,cAAc,0BACd,iBAAiB,6BACjB,aACA,iBACE,oBACF,iBACA,iBACF;;;;;;AASA,MAAa,mBAAmB,cAC7B,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,kBACA,kBACA,MACA,cACA,WACA,WACA,GAAG,UAEH,kBAAkB,KAAK;CAC3B,MAAM,EAAE,eAAe,cAAc,iBAAiB,gBAAgB,IAAI;CAC1E,MAAM,WAAW,eAAe;EAC9B;EACA;CACF,CAAC;CAED,OACE,qBAACA,gBAAD;EACE,GAAI,WACF;GAAE;GAAW;GAAK;EAAY,GAC9B,aAAa,cAAc,GAC3B,SACF,CAAC,CAAC;EALJ,UAAA,CAOE,oBAAC,mBAAD,EAAmB,GAAI,cAAc,EAAE,GAAG,SAAS,CAAC,EAAI,CAAA,GAExD,oBAACC,cAAD;GAAoB,GAAI;GACtB,UAAA,oBAAC,kBAAD;IAAwB;IAAM,GAAI,aAAa,SAAS;GAAI,CAAA;EAC1C,CAAA,CACL;;AAErB,GACA,MACF,CAAC,EAAE,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,oBAAoB,YACxB,UACA,OACF,CAAC,CAAC,EAAE,wBAAwB,GAAG,CAAC;AAMhC,MAAM,mBAAmB,YACvB,OACA,MACF,CAAC,CAAC,KAAA,IAAY,EAAE,UAAU,MAAM,GAAG,YAAY;CAC7C,UAAU,QAAQ,YAAY,oBAAC,iBAAD,CAAkB,CAAA;CAChD,GAAG;AACL,EAAE;AAIF,MAAa,oBAAoB,UAC/B,YACA,OACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,UAChC,UACA,QACF,CAAC,CAAC;AAIF,MAAa,wBAAwB,UAGnC,MAAM,WAAW,CAAC,CAAC"}

package/dist/esm/components/native-select/use-native-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-native-select.js","names":[],"sources":["../../../../src/components/native-select/use-native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { ariaAttr } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface NativeSelectSharedItem extends Omit<\n HTMLProps<\"option\">,\n \"children\" \| \"label\" \| \"value\"\n> {\n label: string\n}\n\ninterface NativeSelectItemWithValue extends NativeSelectSharedItem {\n value?: HTMLProps<\"option\">[\"value\"]\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectSharedItem {\n items: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem =\n \| NativeSelectItemWithItems\n \| NativeSelectItemWithValue\n\nexport interface UseNativeSelectProps extends HTMLProps<\"select\">, FieldProps {\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?: NativeSelectItem[]\n /\n The placeholder for select.\n */\n placeholder?: string\n}\n\nexport const useNativeSelect = (props: UseNativeSelectProps = {}) => {\n const {\n props: {\n children,\n disabled,\n includePlaceholder = true,\n items = [],\n placeholder,\n readOnly,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n\n const computedChildren = useMemo(() => {\n let computedChildren: ReactNode = null\n\n if (children) computedChildren = children\n else if (items.length)\n computedChildren = items.map((item, index) => {\n if (\"items\" in item) {\n const { items, label, ...rest } = item\n\n return cloneElement(<optgroup />, {\n key: index,\n children: items.map(({ label, ...rest }, index) =>\n cloneElement(<option aria-label={label} />, {\n key: index,\n children: label,\n ...rest,\n }),\n ),\n label,\n ...rest,\n })\n } else {\n const { label, ...rest } = item\n\n return cloneElement(<option aria-label={label} />, {\n key: index,\n children: label,\n ...rest,\n })\n }\n })\n\n return (\n <>\n {placeholder ? (\n <option hidden={!includePlaceholder} value=\"\">\n {placeholder}\n </option>\n ) : null}\n\n {computedChildren}\n </>\n )\n }, [children, items, placeholder, includePlaceholder])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n const getFieldProps: PropGetter<\"select\"> = useCallback(\n ({ ref, ...props } = {}) =>\n mergeProps(\n {\n disabled,\n readOnly,\n tabIndex: interactive ? undefined : -1,\n ...ariaProps,\n ...dataProps,\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": placeholder,\n },\n {\n onBlur: eventProps.onBlur,\n onFocus: eventProps.onFocus,\n },\n rest,\n props,\n {\n ref,\n children: props.children ?? computedChildren,\n },\n )(),\n [\n interactive,\n ariaProps,\n computedChildren,\n dataProps,\n eventProps,\n rest,\n placeholder,\n disabled,\n readOnly,\n ],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n return { getFieldProps, getIconProps, getRootProps }\n}\n\nexport type UseNativeSelectReturn = ReturnType<typeof useNativeSelect>\n"],"mappings":";;;;;;;AAgDA,MAAa,mBAAmB,QAA8B,CAAC,MAAM;CACnE,MAAM,EACJ,OAAO,EACL,UACA,UACA,qBAAqB,MACrB,QAAQ,CAAC,GACT,aACA,UACA,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAElC,MAAM,mBAAmB,cAAc;EACrC,IAAI,mBAA8B;EAElC,IAAI,UAAU,mBAAmB;OAC5B,IAAI,MAAM,QACb,mBAAmB,MAAM,KAAK,MAAM,UAAU;GAC5C,IAAI,WAAW,MAAM;IACnB,MAAM,EAAE,OAAO,OAAO,GAAG,SAAS;IAElC,OAAO,aAAa,oBAAC,YAAD,CAAW,CAAA,GAAG;KAChC,KAAK;KACL,UAAU,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACvC,aAAa,oBAAC,UAAD,EAAQ,cAAY,MAAQ,CAAA,GAAG;MAC1C,KAAK;MACL,UAAU;MACV,GAAG;KACL,CAAC,CACH;KACA;KACA,GAAG;IACL,CAAC;GACH,OAAO;IACL,MAAM,EAAE,OAAO,GAAG,SAAS;IAE3B,OAAO,aAAa,oBAAC,UAAD,EAAQ,cAAY,MAAQ,CAAA,GAAG;KACjD,KAAK;KACL,UAAU;KACV,GAAG;IACL,CAAC;GACH;EACF,CAAC;EAEH,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,cACC,oBAAC,UAAD;GAAQ,QAAQ,CAAC;GAAoB,OAAM;~~aACxC~~;EACK,CAAA,IACN,MAEH,gBACD,EAAA,CAAA;CAEN,GAAG;EAAC;EAAU;EAAO;EAAa;CAAkB,CAAC;CAErD,MAAM,eAA2B,aAC9B,WAAW;EAAE,GAAG;EAAW,GAAG;CAAM,IACrC,CAAC,SAAS,CACZ;CA2CA,OAAO;EAAE,eAzCmC,aACzC,EAAE,KAAK,GAAG,UAAU,CAAC,MACpB,WACE;GACE;GACA;GACA,UAAU,cAAc,KAAA,IAAY;GACpC,GAAG;GACH,GAAG;GACH,kBAAA,GAAA,cAAA,SAAA,CAA0B,CAAC,WAAW;GACtC,cAAc;EAChB,GACA;GACE,QAAQ,WAAW;GACnB,SAAS,WAAW;EACtB,GACA,MACA,OACA;GACE;GACA,UAAU,MAAM,YAAY;EAC9B,CACF,CAAC,CAAC,GACJ;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAQmB;EAAG,cALS,aAC9B,WAAW;GAAE,GAAG;GAAW,GAAG;EAAM,IACrC,CAAC,SAAS,CAGuB;EAAG;CAAa;AACrD"}
1	+ {"version":3,"file":"use-native-select.js","names":[],"sources":["../../../../src/components/native-select/use-native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { ariaAttr } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface NativeSelectSharedItem extends Omit<\n HTMLProps<\"option\">,\n \"children\" \| \"label\" \| \"value\"\n> {\n label: string\n}\n\ninterface NativeSelectItemWithValue extends NativeSelectSharedItem {\n value?: HTMLProps<\"option\">[\"value\"]\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectSharedItem {\n items: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem =\n \| NativeSelectItemWithItems\n \| NativeSelectItemWithValue\n\nexport interface UseNativeSelectProps extends HTMLProps<\"select\">, FieldProps {\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?: NativeSelectItem[]\n /\n The placeholder for select.\n */\n placeholder?: string\n}\n\nexport const useNativeSelect = (props: UseNativeSelectProps = {}) => {\n const {\n props: {\n children,\n disabled,\n includePlaceholder = true,\n items = [],\n placeholder,\n readOnly,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n\n const computedChildren = useMemo(() => {\n let computedChildren: ReactNode = null\n\n if (children) computedChildren = children\n else if (items.length)\n computedChildren = items.map((item, index) => {\n if (\"items\" in item) {\n const { items, label, ...rest } = item\n\n return cloneElement(<optgroup />, {\n key: index,\n children: items.map(({ label, ...rest }, index) =>\n cloneElement(<option aria-label={label} />, {\n key: index,\n children: label,\n ...rest,\n }),\n ),\n label,\n ...rest,\n })\n } else {\n const { label, ...rest } = item\n\n return cloneElement(<option aria-label={label} />, {\n key: index,\n children: label,\n ...rest,\n })\n }\n })\n\n return (\n <>\n {placeholder ? (\n <option hidden={!includePlaceholder} value=\"\">\n {placeholder}\n </option>\n ) : null}\n\n {computedChildren}\n </>\n )\n }, [children, items, placeholder, includePlaceholder])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n const getFieldProps: PropGetter<\"select\"> = useCallback(\n ({ ref, ...props } = {}) =>\n mergeProps(\n {\n disabled,\n readOnly,\n tabIndex: interactive ? undefined : -1,\n ...ariaProps,\n ...dataProps,\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": placeholder,\n },\n {\n onBlur: eventProps.onBlur,\n onFocus: eventProps.onFocus,\n },\n rest,\n props,\n {\n ref,\n children: props.children ?? computedChildren,\n },\n )(),\n [\n interactive,\n ariaProps,\n computedChildren,\n dataProps,\n eventProps,\n rest,\n placeholder,\n disabled,\n readOnly,\n ],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n return { getFieldProps, getIconProps, getRootProps }\n}\n\nexport type UseNativeSelectReturn = ReturnType<typeof useNativeSelect>\n"],"mappings":";;;;;;;AAgDA,MAAa,mBAAmB,QAA8B,CAAC,MAAM;CACnE,MAAM,EACJ,OAAO,EACL,UACA,UACA,qBAAqB,MACrB,QAAQ,CAAC,GACT,aACA,UACA,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAElC,MAAM,mBAAmB,cAAc;EACrC,IAAI,mBAA8B;EAElC,IAAI,UAAU,mBAAmB;OAC5B,IAAI,MAAM,QACb,mBAAmB,MAAM,KAAK,MAAM,UAAU;GAC5C,IAAI,WAAW,MAAM;IACnB,MAAM,EAAE,OAAO,OAAO,GAAG,SAAS;IAElC,OAAO,aAAa,oBAAC,YAAD,CAAW,CAAA,GAAG;KAChC,KAAK;KACL,UAAU,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACvC,aAAa,oBAAC,UAAD,EAAQ,cAAY,MAAQ,CAAA,GAAG;MAC1C,KAAK;MACL,UAAU;MACV,GAAG;KACL,CAAC,CACH;KACA;KACA,GAAG;IACL,CAAC;GACH,OAAO;IACL,MAAM,EAAE,OAAO,GAAG,SAAS;IAE3B,OAAO,aAAa,oBAAC,UAAD,EAAQ,cAAY,MAAQ,CAAA,GAAG;KACjD,KAAK;KACL,UAAU;KACV,GAAG;IACL,CAAC;GACH;EACF,CAAC;EAEH,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,cACC,oBAAC,UAAD;GAAQ,QAAQ,CAAC;GAAoB,OAAM;GACxC,UAAA;EACK,CAAA,IACN,MAEH,gBACD,EAAA,CAAA;CAEN,GAAG;EAAC;EAAU;EAAO;EAAa;CAAkB,CAAC;CAErD,MAAM,eAA2B,aAC9B,WAAW;EAAE,GAAG;EAAW,GAAG;CAAM,IACrC,CAAC,SAAS,CACZ;CA2CA,OAAO;EAAE,eAzCmC,aACzC,EAAE,KAAK,GAAG,UAAU,CAAC,MACpB,WACE;GACE;GACA;GACA,UAAU,cAAc,KAAA,IAAY;GACpC,GAAG;GACH,GAAG;GACH,kBAAA,GAAA,cAAA,SAAA,CAA0B,CAAC,WAAW;GACtC,cAAc;EAChB,GACA;GACE,QAAQ,WAAW;GACnB,SAAS,WAAW;EACtB,GACA,MACA,OACA;GACE;GACA,UAAU,MAAM,YAAY;EAC9B,CACF,CAAC,CAAC,GACJ;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAQmB;EAAG,cALS,aAC9B,WAAW;GAAE,GAAG;GAAW,GAAG;EAAM,IACrC,CAAC,SAAS,CAGuB;EAAG;CAAa;AACrD"}

package/dist/esm/components/native-table/native-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"native-table.js","names":[],"sources":["../../../../src/components/native-table/native-table.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n CSSProps,\n HTMLStyledProps,\n SimpleDirection,\n ThemeProps,\n} from \"../../core\"\nimport type { NativeTableStyle } from \"./native-table.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { nativeTableStyle } from \"./native-table.style\"\n\nexport interface NativeTableRootProps\n extends HTMLStyledProps<\"table\">, ThemeProps<NativeTableStyle> {\n /*\n The CSS `table-layout` property.\n /\n layout?: CSSProps[\"tableLayout\"]\n /\n Whether to enable the scroll area.\n \n @default false\n /\n withScrollArea?: boolean\n /\n The props for the scroll area.\n /\n scrollAreaProps?: NativeTableAreaProps\n}\n\nconst {\n PropsContext: NativeTablePropsContext,\n usePropsContext: useNativeTablePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<NativeTableRootProps, NativeTableStyle>(\n \"native-table\",\n nativeTableStyle,\n)\n\nexport { NativeTablePropsContext, useNativeTablePropsContext }\n\n/\n `NativeTable` is a component for efficiently organizing and displaying data.\n \n @see https://yamada-ui.com/docs/components/native-table\n /\nexport const NativeTableRoot = withProvider(\n ({ withScrollArea, scrollAreaProps, ...rest }) => {\n if (withScrollArea)\n return (\n <NativeTableScrollArea {...scrollAreaProps}>\n <styled.table {...rest} />\n </NativeTableScrollArea>\n )\n else return <styled.table {...rest} />\n },\n \"root\",\n)(undefined, ({ layout: tableLayout, ...rest }) => ({\n tableLayout,\n ...rest,\n}))\n\ninterface NativeTableAreaProps\n extends HTMLStyledProps, ThemeProps<NativeTableStyle> {}\n\nconst NativeTableScrollArea = withContext<\"div\", NativeTableAreaProps>(\n \"div\",\n \"scrollArea\",\n)({ tabIndex: 0 })\n\nexport interface CaptionProps extends HTMLStyledProps<\"caption\"> {\n /\n The placement of the table caption.\n \n @default 'end'\n /\n placement?: SimpleDirection\n}\n\nexport const Caption = withContext<\"caption\", CaptionProps>(\n \"caption\",\n \"caption\",\n)(undefined, ({ placement = \"end\", ...rest }) => ({\n \"data-placement\": placement,\n captionSide: placement === \"end\" ? \"bottom\" : \"top\",\n ...rest,\n}))\n\nexport interface TheadProps extends HTMLStyledProps<\"thead\"> {}\n\nexport const Thead = withContext<\"thead\", TheadProps>(\"thead\", \"thead\")()\n\nexport interface TbodyProps extends HTMLStyledProps<\"tbody\"> {}\n\nexport const Tbody = withContext<\"tbody\", TbodyProps>(\"tbody\", \"tbody\")()\n\nexport interface TfootProps extends HTMLStyledProps<\"tfoot\"> {}\n\nexport const Tfoot = withContext<\"tfoot\", TfootProps>(\"tfoot\", \"tfoot\")()\n\nexport interface ColgroupProps extends HTMLStyledProps<\"colgroup\"> {}\n\nexport const Colgroup = withContext<\"colgroup\", ColgroupProps>(\n \"colgroup\",\n \"colgroup\",\n)()\n\nexport interface ColProps extends HTMLStyledProps<\"col\"> {}\n\nexport const Col = withContext<\"col\", ColProps>(\"col\", \"col\")()\n\nexport interface TrProps extends HTMLStyledProps<\"tr\"> {}\n\nexport const Tr = withContext<\"tr\", TrProps>(\"tr\", \"tr\")()\n\nexport interface ThProps extends HTMLStyledProps<\"th\"> {\n /\n Aligns the cell content to the right.\n \n @default false\n /\n numeric?: boolean\n}\n\nexport const Th = withContext<\"th\", ThProps>(\"th\", \"th\")(\n undefined,\n ({ numeric, ...rest }) => ({\n \"data-numeric\": numeric,\n ...rest,\n }),\n)\n\nexport interface TdProps extends HTMLStyledProps<\"td\"> {\n /\n Aligns the cell content to the right.\n \n @default false\n */\n numeric?: boolean\n}\n\nexport const Td = withContext<\"td\", TdProps>(\"td\", \"td\")(\n undefined,\n ({ numeric, ...rest }) => ({\n \"data-numeric\": numeric,\n ...rest,\n }),\n)\n"],"mappings":";;;;;;AA8BA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,kBAAkB,cAC5B,EAAE,gBAAgB,iBAAiB,GAAG,WAAW;CAChD,IAAI,gBACF,OACE,oBAAC,uBAAD;EAAuB,GAAI;~~YACzB~~,oBAAC,OAAO,OAAR,EAAc,GAAI,KAAO,CAAA;CACJ,CAAA;MAEtB,OAAO,oBAAC,OAAO,OAAR,EAAc,GAAI,KAAO,CAAA;AACvC,GACA,MACF,CAAC,CAAC,KAAA,IAAY,EAAE,QAAQ,aAAa,GAAG,YAAY;CAClD;CACA,GAAG;AACL,EAAE;AAKF,MAAM,wBAAwB,YAC5B,OACA,YACF,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC;AAWjB,MAAa,UAAU,YACrB,WACA,SACF,CAAC,CAAC,KAAA,IAAY,EAAE,YAAY,OAAO,GAAG,YAAY;CAChD,kBAAkB;CAClB,aAAa,cAAc,QAAQ,WAAW;CAC9C,GAAG;AACL,EAAE;AAIF,MAAa,QAAQ,YAAiC,SAAS,OAAO,CAAC,CAAC;AAIxE,MAAa,QAAQ,YAAiC,SAAS,OAAO,CAAC,CAAC;AAIxE,MAAa,QAAQ,YAAiC,SAAS,OAAO,CAAC,CAAC;AAIxE,MAAa,WAAW,YACtB,YACA,UACF,CAAC,CAAC;AAIF,MAAa,MAAM,YAA6B,OAAO,KAAK,CAAC,CAAC;AAI9D,MAAa,KAAK,YAA2B,MAAM,IAAI,CAAC,CAAC;AAWzD,MAAa,KAAK,YAA2B,MAAM,IAAI,CAAC,CACtD,KAAA,IACC,EAAE,SAAS,GAAG,YAAY;CACzB,gBAAgB;CAChB,GAAG;AACL,EACF;AAWA,MAAa,KAAK,YAA2B,MAAM,IAAI,CAAC,CACtD,KAAA,IACC,EAAE,SAAS,GAAG,YAAY;CACzB,gBAAgB;CAChB,GAAG;AACL,EACF"}
1	+ {"version":3,"file":"native-table.js","names":[],"sources":["../../../../src/components/native-table/native-table.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n CSSProps,\n HTMLStyledProps,\n SimpleDirection,\n ThemeProps,\n} from \"../../core\"\nimport type { NativeTableStyle } from \"./native-table.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { nativeTableStyle } from \"./native-table.style\"\n\nexport interface NativeTableRootProps\n extends HTMLStyledProps<\"table\">, ThemeProps<NativeTableStyle> {\n /*\n The CSS `table-layout` property.\n /\n layout?: CSSProps[\"tableLayout\"]\n /\n Whether to enable the scroll area.\n \n @default false\n /\n withScrollArea?: boolean\n /\n The props for the scroll area.\n /\n scrollAreaProps?: NativeTableAreaProps\n}\n\nconst {\n PropsContext: NativeTablePropsContext,\n usePropsContext: useNativeTablePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<NativeTableRootProps, NativeTableStyle>(\n \"native-table\",\n nativeTableStyle,\n)\n\nexport { NativeTablePropsContext, useNativeTablePropsContext }\n\n/\n `NativeTable` is a component for efficiently organizing and displaying data.\n \n @see https://yamada-ui.com/docs/components/native-table\n /\nexport const NativeTableRoot = withProvider(\n ({ withScrollArea, scrollAreaProps, ...rest }) => {\n if (withScrollArea)\n return (\n <NativeTableScrollArea {...scrollAreaProps}>\n <styled.table {...rest} />\n </NativeTableScrollArea>\n )\n else return <styled.table {...rest} />\n },\n \"root\",\n)(undefined, ({ layout: tableLayout, ...rest }) => ({\n tableLayout,\n ...rest,\n}))\n\ninterface NativeTableAreaProps\n extends HTMLStyledProps, ThemeProps<NativeTableStyle> {}\n\nconst NativeTableScrollArea = withContext<\"div\", NativeTableAreaProps>(\n \"div\",\n \"scrollArea\",\n)({ tabIndex: 0 })\n\nexport interface CaptionProps extends HTMLStyledProps<\"caption\"> {\n /\n The placement of the table caption.\n \n @default 'end'\n /\n placement?: SimpleDirection\n}\n\nexport const Caption = withContext<\"caption\", CaptionProps>(\n \"caption\",\n \"caption\",\n)(undefined, ({ placement = \"end\", ...rest }) => ({\n \"data-placement\": placement,\n captionSide: placement === \"end\" ? \"bottom\" : \"top\",\n ...rest,\n}))\n\nexport interface TheadProps extends HTMLStyledProps<\"thead\"> {}\n\nexport const Thead = withContext<\"thead\", TheadProps>(\"thead\", \"thead\")()\n\nexport interface TbodyProps extends HTMLStyledProps<\"tbody\"> {}\n\nexport const Tbody = withContext<\"tbody\", TbodyProps>(\"tbody\", \"tbody\")()\n\nexport interface TfootProps extends HTMLStyledProps<\"tfoot\"> {}\n\nexport const Tfoot = withContext<\"tfoot\", TfootProps>(\"tfoot\", \"tfoot\")()\n\nexport interface ColgroupProps extends HTMLStyledProps<\"colgroup\"> {}\n\nexport const Colgroup = withContext<\"colgroup\", ColgroupProps>(\n \"colgroup\",\n \"colgroup\",\n)()\n\nexport interface ColProps extends HTMLStyledProps<\"col\"> {}\n\nexport const Col = withContext<\"col\", ColProps>(\"col\", \"col\")()\n\nexport interface TrProps extends HTMLStyledProps<\"tr\"> {}\n\nexport const Tr = withContext<\"tr\", TrProps>(\"tr\", \"tr\")()\n\nexport interface ThProps extends HTMLStyledProps<\"th\"> {\n /\n Aligns the cell content to the right.\n \n @default false\n /\n numeric?: boolean\n}\n\nexport const Th = withContext<\"th\", ThProps>(\"th\", \"th\")(\n undefined,\n ({ numeric, ...rest }) => ({\n \"data-numeric\": numeric,\n ...rest,\n }),\n)\n\nexport interface TdProps extends HTMLStyledProps<\"td\"> {\n /\n Aligns the cell content to the right.\n \n @default false\n */\n numeric?: boolean\n}\n\nexport const Td = withContext<\"td\", TdProps>(\"td\", \"td\")(\n undefined,\n ({ numeric, ...rest }) => ({\n \"data-numeric\": numeric,\n ...rest,\n }),\n)\n"],"mappings":";;;;;;AA8BA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,kBAAkB,cAC5B,EAAE,gBAAgB,iBAAiB,GAAG,WAAW;CAChD,IAAI,gBACF,OACE,oBAAC,uBAAD;EAAuB,GAAI;EACzB,UAAA,oBAAC,OAAO,OAAR,EAAc,GAAI,KAAO,CAAA;CACJ,CAAA;MAEtB,OAAO,oBAAC,OAAO,OAAR,EAAc,GAAI,KAAO,CAAA;AACvC,GACA,MACF,CAAC,CAAC,KAAA,IAAY,EAAE,QAAQ,aAAa,GAAG,YAAY;CAClD;CACA,GAAG;AACL,EAAE;AAKF,MAAM,wBAAwB,YAC5B,OACA,YACF,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC;AAWjB,MAAa,UAAU,YACrB,WACA,SACF,CAAC,CAAC,KAAA,IAAY,EAAE,YAAY,OAAO,GAAG,YAAY;CAChD,kBAAkB;CAClB,aAAa,cAAc,QAAQ,WAAW;CAC9C,GAAG;AACL,EAAE;AAIF,MAAa,QAAQ,YAAiC,SAAS,OAAO,CAAC,CAAC;AAIxE,MAAa,QAAQ,YAAiC,SAAS,OAAO,CAAC,CAAC;AAIxE,MAAa,QAAQ,YAAiC,SAAS,OAAO,CAAC,CAAC;AAIxE,MAAa,WAAW,YACtB,YACA,UACF,CAAC,CAAC;AAIF,MAAa,MAAM,YAA6B,OAAO,KAAK,CAAC,CAAC;AAI9D,MAAa,KAAK,YAA2B,MAAM,IAAI,CAAC,CAAC;AAWzD,MAAa,KAAK,YAA2B,MAAM,IAAI,CAAC,CACtD,KAAA,IACC,EAAE,SAAS,GAAG,YAAY;CACzB,gBAAgB;CAChB,GAAG;AACL,EACF;AAWA,MAAa,KAAK,YAA2B,MAAM,IAAI,CAAC,CACtD,KAAA,IACC,EAAE,SAAS,GAAG,YAAY;CACzB,gBAAgB;CAChB,GAAG;AACL,EACF"}

package/dist/esm/components/notice/notice-provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"notice-provider.js","names":[],"sources":["../../../../src/components/notice/notice-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, RefObject } from \"react\"\nimport type {\n HTMLStyledProps,\n NoticeConfig,\n NoticePlacement,\n ThemeProps,\n} from \"../../core\"\nimport type { NoticeStyle } from \"./notice.style\"\nimport { createContext, createRef, use, useId, useMemo, useRef } from \"react\"\nimport { Portal } from \"../portal\"\nimport { NoticeRoot, PLACEMENT_MAP } from \"./notice\"\n\nexport interface NoticeProviderProps\n extends HTMLStyledProps, NoticeConfig, ThemeProps<NoticeStyle> {\n /*\n Container ref for the portal.\n */\n containerRef?: RefObject<HTMLElement>\n}\n\ninterface NoticeState {\n limit: number\n placement: NoticePlacement\n}\n\nexport interface NoticeMethods {\n getId: (placement: NoticePlacement) => string\n getLimit: (placement: NoticePlacement) => number\n updateLimit: (state: NoticeState) => void\n}\n\ninterface NoticeContext extends NoticeMethods {}\n\nconst NoticeContext = createContext({} as NoticeContext)\n\nexport type Controller = ReturnType<typeof createController>\n\nconst createController = () => ({\n getLimit: createRef<NoticeMethods[\"getLimit\"]>(),\n updateLimit: createRef<NoticeMethods[\"updateLimit\"]>(),\n})\n\nconst createMethods = (\n id: string,\n refs: {\n [K in NoticePlacement]?: RefObject<Controller>\n },\n defaultLimit: number,\n): NoticeMethods => ({\n getId: (placement) => {\n return `${id}-${placement}`\n },\n getLimit: (placement) => {\n const method = refs[placement]?.current.getLimit.current\n\n return method?.(placement) ?? defaultLimit\n },\n updateLimit: (state) => {\n const { placement } = state\n const method = refs[placement]?.current.updateLimit.current\n\n method?.(state)\n },\n})\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n children,\n containerRef,\n expand = false,\n limit = 3,\n}) => {\n const placementMap = useRef<{\n [K in NoticePlacement]?: RefObject<Controller>\n }>({})\n const id = useId()\n\n const value = useMemo(\n () => ({ ...createMethods(id, placementMap.current, limit) }),\n [id, limit],\n )\n\n const components = useMemo(() => {\n return (Object.keys(PLACEMENT_MAP) as NoticePlacement[]).map(\n (placement) => {\n if (!placementMap.current[placement])\n placementMap.current[placement] = { current: createController() }\n\n return (\n <NoticeRoot\n key={placement}\n ref={placementMap.current[placement]}\n expand={expand}\n limit={limit}\n placement={placement}\n />\n )\n },\n )\n }, [limit, expand])\n\n return (\n <NoticeContext value={value}>\n {children}\n <Portal containerRef={containerRef}>{components}</Portal>\n </NoticeContext>\n )\n}\n\nexport const useNoticeContext = (): NoticeContext => {\n const context = use(NoticeContext)\n\n return context\n}\n"],"mappings":";;;;;;AAmCA,MAAM,gBAAgB,cAAc,CAAC,CAAkB;AAIvD,MAAM,0BAA0B;CAC9B,UAAU,UAAqC;CAC/C,aAAa,UAAwC;AACvD;AAEA,MAAM,iBACJ,IACA,MAGA,kBACmB;CACnB,QAAQ,cAAc;EACpB,OAAO,GAAG,GAAG,GAAG;CAClB;CACA,WAAW,cAAc;EACvB,MAAM,SAAS,KAAK,UAAU,EAAE,QAAQ,SAAS;EAEjD,OAAO,SAAS,SAAS,KAAK;CAChC;CACA,cAAc,UAAU;EACtB,MAAM,EAAE,cAAc;EACtB,MAAM,SAAS,KAAK,UAAU,EAAE,QAAQ,YAAY;EAEpD,SAAS,KAAK;CAChB;AACF;AAEA,MAAa,kBAA2C,EACtD,UACA,cACA,SAAS,OACT,QAAQ,QACJ;CACJ,MAAM,eAAe,OAElB,CAAC,CAAC;CACL,MAAM,KAAK,MAAM;CAEjB,MAAM,QAAQ,eACL,EAAE,GAAG,cAAc,IAAI,aAAa,SAAS,KAAK,EAAE,IAC3D,CAAC,IAAI,KAAK,CACZ;CAEA,MAAM,aAAa,cAAc;EAC/B,OAAQ,OAAO,KAAK,aAAa,CAAC,CAAuB,KACtD,cAAc;GACb,IAAI,CAAC,aAAa,QAAQ,YACxB,aAAa,QAAQ,aAAa,EAAE,SAAS,iBAAiB,EAAE;GAElE,OACE,oBAAC,YAAD;IAEE,KAAK,aAAa,QAAQ;IAClB;IACD;IACI;GACZ,GALM,SAKN;EAEL,CACF;CACF,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,OACE,qBAAC,eAAD;EAAsB;~~YAAtB~~,CACG,UACD,oBAAC,QAAD;GAAsB;~~aAAe~~;EAAmB,CAAA,CAC3C;;AAEnB;AAEA,MAAa,yBAAwC;CAGnD,OAFgB,IAAI,aAEP;AACf"}
1	+ {"version":3,"file":"notice-provider.js","names":[],"sources":["../../../../src/components/notice/notice-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, RefObject } from \"react\"\nimport type {\n HTMLStyledProps,\n NoticeConfig,\n NoticePlacement,\n ThemeProps,\n} from \"../../core\"\nimport type { NoticeStyle } from \"./notice.style\"\nimport { createContext, createRef, use, useId, useMemo, useRef } from \"react\"\nimport { Portal } from \"../portal\"\nimport { NoticeRoot, PLACEMENT_MAP } from \"./notice\"\n\nexport interface NoticeProviderProps\n extends HTMLStyledProps, NoticeConfig, ThemeProps<NoticeStyle> {\n /*\n Container ref for the portal.\n */\n containerRef?: RefObject<HTMLElement>\n}\n\ninterface NoticeState {\n limit: number\n placement: NoticePlacement\n}\n\nexport interface NoticeMethods {\n getId: (placement: NoticePlacement) => string\n getLimit: (placement: NoticePlacement) => number\n updateLimit: (state: NoticeState) => void\n}\n\ninterface NoticeContext extends NoticeMethods {}\n\nconst NoticeContext = createContext({} as NoticeContext)\n\nexport type Controller = ReturnType<typeof createController>\n\nconst createController = () => ({\n getLimit: createRef<NoticeMethods[\"getLimit\"]>(),\n updateLimit: createRef<NoticeMethods[\"updateLimit\"]>(),\n})\n\nconst createMethods = (\n id: string,\n refs: {\n [K in NoticePlacement]?: RefObject<Controller>\n },\n defaultLimit: number,\n): NoticeMethods => ({\n getId: (placement) => {\n return `${id}-${placement}`\n },\n getLimit: (placement) => {\n const method = refs[placement]?.current.getLimit.current\n\n return method?.(placement) ?? defaultLimit\n },\n updateLimit: (state) => {\n const { placement } = state\n const method = refs[placement]?.current.updateLimit.current\n\n method?.(state)\n },\n})\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n children,\n containerRef,\n expand = false,\n limit = 3,\n}) => {\n const placementMap = useRef<{\n [K in NoticePlacement]?: RefObject<Controller>\n }>({})\n const id = useId()\n\n const value = useMemo(\n () => ({ ...createMethods(id, placementMap.current, limit) }),\n [id, limit],\n )\n\n const components = useMemo(() => {\n return (Object.keys(PLACEMENT_MAP) as NoticePlacement[]).map(\n (placement) => {\n if (!placementMap.current[placement])\n placementMap.current[placement] = { current: createController() }\n\n return (\n <NoticeRoot\n key={placement}\n ref={placementMap.current[placement]}\n expand={expand}\n limit={limit}\n placement={placement}\n />\n )\n },\n )\n }, [limit, expand])\n\n return (\n <NoticeContext value={value}>\n {children}\n <Portal containerRef={containerRef}>{components}</Portal>\n </NoticeContext>\n )\n}\n\nexport const useNoticeContext = (): NoticeContext => {\n const context = use(NoticeContext)\n\n return context\n}\n"],"mappings":";;;;;;AAmCA,MAAM,gBAAgB,cAAc,CAAC,CAAkB;AAIvD,MAAM,0BAA0B;CAC9B,UAAU,UAAqC;CAC/C,aAAa,UAAwC;AACvD;AAEA,MAAM,iBACJ,IACA,MAGA,kBACmB;CACnB,QAAQ,cAAc;EACpB,OAAO,GAAG,GAAG,GAAG;CAClB;CACA,WAAW,cAAc;EACvB,MAAM,SAAS,KAAK,UAAU,EAAE,QAAQ,SAAS;EAEjD,OAAO,SAAS,SAAS,KAAK;CAChC;CACA,cAAc,UAAU;EACtB,MAAM,EAAE,cAAc;EACtB,MAAM,SAAS,KAAK,UAAU,EAAE,QAAQ,YAAY;EAEpD,SAAS,KAAK;CAChB;AACF;AAEA,MAAa,kBAA2C,EACtD,UACA,cACA,SAAS,OACT,QAAQ,QACJ;CACJ,MAAM,eAAe,OAElB,CAAC,CAAC;CACL,MAAM,KAAK,MAAM;CAEjB,MAAM,QAAQ,eACL,EAAE,GAAG,cAAc,IAAI,aAAa,SAAS,KAAK,EAAE,IAC3D,CAAC,IAAI,KAAK,CACZ;CAEA,MAAM,aAAa,cAAc;EAC/B,OAAQ,OAAO,KAAK,aAAa,CAAC,CAAuB,KACtD,cAAc;GACb,IAAI,CAAC,aAAa,QAAQ,YACxB,aAAa,QAAQ,aAAa,EAAE,SAAS,iBAAiB,EAAE;GAElE,OACE,oBAAC,YAAD;IAEE,KAAK,aAAa,QAAQ;IAClB;IACD;IACI;GACZ,GALM,SAKN;EAEL,CACF;CACF,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,OACE,qBAAC,eAAD;EAAsB;EAAtB,UAAA,CACG,UACD,oBAAC,QAAD;GAAsB;GAAe,UAAA;EAAmB,CAAA,CAC3C;;AAEnB;AAEA,MAAa,yBAAwC;CAGnD,OAFgB,IAAI,aAEP;AACf"}

package/dist/esm/components/notice/notice.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"notice.js","names":["Alert.Root","noop","Alert.Loading","Alert.Icon","Alert.Title","Alert.Description"],"sources":["../../../../src/components/notice/notice.tsx"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { ToasterProps } from \"sonner\"\nimport type {\n HTMLStyledProps,\n NoticeCloseStrategy,\n NoticeConfig,\n NoticePlacement,\n} from \"../../core\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { Controller, NoticeMethods } from \"./notice-provider\"\nimport type { NoticeStyle } from \"./notice.style\"\nimport type { UseNoticeOptions } from \"./use-notice\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { toast, Toaster } from \"sonner\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { assignRef, dataAttr, handlerAll, noop } from \"../../utils\"\nimport { Alert } from \"../alert\"\nimport { CloseButton } from \"../close-button\"\nimport { useNoticeContext } from \"./notice-provider\"\nimport { noticeStyle } from \"./notice.style\"\n\ntype ToasterPosition = Required<ToasterProps>[\"position\"]\n\nexport const PLACEMENT_MAP: {\n [key in NoticePlacement]: ToasterPosition\n} = {\n end: \"bottom-center\",\n \"end-center\": \"bottom-center\",\n \"end-end\": \"bottom-right\",\n \"end-start\": \"bottom-left\",\n start: \"top-center\",\n \"start-center\": \"top-center\",\n \"start-end\": \"top-right\",\n \"start-start\": \"top-left\",\n}\n\nexport interface NoticeRootProps extends Pick<\n Required<NoticeConfig>,\n \"expand\" \| \"limit\" \| \"placement\"\n> {\n ref: RefObject<Controller>\n}\n\nconst {\n PropsContext: NoticePropsContext,\n usePropsContext: useNoticePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<NoticeRootProps, NoticeStyle>(\"notice\", noticeStyle)\n\nexport { NoticePropsContext, useNoticePropsContext }\n\nexport const NoticeRoot = withProvider<\"fragment\", NoticeRootProps>(\n ({ ref, expand, limit, placement, ...rest }) => {\n const { getId } = useNoticeContext()\n const position = useMemo(() => PLACEMENT_MAP[placement], [placement])\n const [updatedLimit, setUpdatedLimit] = useState(limit)\n\n const getLimit = useCallback<NoticeMethods[\"getLimit\"]>(\n (target) => {\n if (target === placement && updatedLimit !== limit) return updatedLimit\n else return limit\n },\n [placement, limit, updatedLimit],\n )\n\n const updateLimit = useCallback<NoticeMethods[\"updateLimit\"]>(\n ({ limit, placement: target }) => {\n if (target === placement) setUpdatedLimit(limit)\n },\n [placement],\n )\n\n assignRef(ref.current.updateLimit, updateLimit)\n assignRef(ref.current.getLimit, getLimit)\n\n return (\n <styled.div {...rest}>\n <Toaster\n id={getId(placement)}\n containerAriaLabel=\"\"\n expand={expand}\n gap={16}\n hotkey={[\"\"]}\n mobileOffset=\"var(--mobile-offset)\"\n offset=\"var(--offset)\"\n position={position}\n visibleToasts={updatedLimit}\n />\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface NoticeItemProps\n extends UseNoticeOptions, Omit<HTMLStyledProps, \"id\" \| \"title\"> {\n closeStrategies?: NoticeCloseStrategy[]\n}\n\nexport const NoticeItem = withContext<\"div\", NoticeItemProps>(\n ({\n id,\n variant = \"plain\",\n closable,\n closeStrategies = [\"click\", \"drag\"],\n description,\n loadingScheme,\n status,\n title,\n withIcon = true,\n closeButtonProps,\n contentProps,\n descriptionProps,\n iconProps,\n loadingProps,\n titleProps,\n onClick,\n ...rest\n }) => {\n const onClose = useCallback(() => toast.dismiss(id), [id])\n\n return (\n <Alert.Root\n variant={variant}\n status={status}\n {...rest}\n onClick={handlerAll(\n onClick,\n closable && closeStrategies.includes(\"click\") ? onClose : noop,\n )}\n >\n {withIcon ? (\n loadingScheme ? (\n <Alert.Loading loadingScheme={loadingScheme} {...loadingProps} />\n ) : (\n <Alert.Icon {...iconProps} />\n )\n ) : null}\n\n <NoticeContent\n data-close-button={dataAttr(\n closable && closeStrategies.includes(\"button\"),\n )}\n {...contentProps}\n >\n {title ? (\n <Alert.Title me=\"0\" {...titleProps}>\n {title}\n </Alert.Title>\n ) : null}\n {description ? (\n <Alert.Description lineClamp={2} {...descriptionProps}>\n {description}\n </Alert.Description>\n ) : null}\n </NoticeContent>\n\n {closable && closeStrategies.includes(\"button\") ? (\n <NoticeCloseButton\n data-variant={variant}\n {...closeButtonProps}\n onClick={handlerAll(closeButtonProps?.onClick, onClose)}\n />\n ) : null}\n </Alert.Root>\n )\n },\n \"item\",\n)()\n\nexport interface NoticeContentProps extends HTMLStyledProps {}\n\nexport const NoticeContent = withContext<\"div\", NoticeContentProps>(\n \"div\",\n \"content\",\n)()\n\nexport interface NoticeCloseButtonProps extends CloseButtonProps {}\n\nexport const NoticeCloseButton = withContext<\"button\", NoticeCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAyBA,MAAa,gBAET;CACF,KAAK;CACL,cAAc;CACd,WAAW;CACX,aAAa;CACb,OAAO;CACP,gBAAgB;CAChB,aAAa;CACb,eAAe;AACjB;AASA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAAkD,UAAU,WAAW;AAI3E,MAAa,aAAa,cACvB,EAAE,KAAK,QAAQ,OAAO,WAAW,GAAG,WAAW;CAC9C,MAAM,EAAE,UAAU,iBAAiB;CACnC,MAAM,WAAW,cAAc,cAAc,YAAY,CAAC,SAAS,CAAC;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,MAAM,WAAW,aACd,WAAW;EACV,IAAI,WAAW,aAAa,iBAAiB,OAAO,OAAO;OACtD,OAAO;CACd,GACA;EAAC;EAAW;EAAO;CAAY,CACjC;CAEA,MAAM,cAAc,aACjB,EAAE,OAAO,WAAW,aAAa;EAChC,IAAI,WAAW,WAAW,gBAAgB,KAAK;CACjD,GACA,CAAC,SAAS,CACZ;CAEA,UAAU,IAAI,QAAQ,aAAa,WAAW;CAC9C,UAAU,IAAI,QAAQ,UAAU,QAAQ;CAExC,OACE,oBAAC,OAAO,KAAR;EAAY,GAAI;~~YACd~~,oBAAC,SAAD;GACE,IAAI,MAAM,SAAS;GACnB,oBAAmB;GACX;GACR,KAAK;GACL,QAAQ,CAAC,EAAE;GACX,cAAa;GACb,QAAO;GACG;GACV,eAAe;EAChB,CAAA;CACS,CAAA;AAEhB,GACA,MACF,CAAC,CAAC;AAOF,MAAa,aAAa,aACvB,EACC,IACA,UAAU,SACV,UACA,kBAAkB,CAAC,SAAS,MAAM,GAClC,aACA,eACA,QACA,OACA,WAAW,MACX,kBACA,cACA,kBACA,WACA,cACA,YACA,SACA,GAAG,WACC;CACJ,MAAM,UAAU,kBAAkB,MAAM,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC;CAEzD,OACE,qBAACA,WAAD;EACW;EACD;EACR,GAAI;EACJ,UAAA,GAAA,cAAA,WAAA,CACE,SACA,YAAY,gBAAgB,SAAS,OAAO,IAAI,UAAUC,cAAAA,IAC5D;~~YAPF~~;GASG,WACC,gBACE,oBAACC,cAAD;IAA8B;IAAe,GAAI;GAAe,CAAA,IAEhE,oBAACC,WAAD,EAAY,GAAI,UAAY,CAAA,IAE5B;GAEJ,qBAAC,eAAD;IACE,sBAAA,GAAA,cAAA,SAAA,CACE,YAAY,gBAAgB,SAAS,QAAQ,CAC/C;IACA,GAAI;~~cAJN~~,CAMG,QACC,oBAACC,YAAD;KAAa,IAAG;KAAI,GAAI;~~eACrB~~;IACU,CAAA,IACX,MACH,cACC,oBAACC,kBAAD;KAAmB,WAAW;KAAG,GAAI;~~eAClC~~;IACgB,CAAA,IACjB,IACS;;GAEd,YAAY,gBAAgB,SAAS,QAAQ,IAC5C,oBAAC,mBAAD;IACE,gBAAc;IACd,GAAI;IACJ,UAAA,GAAA,cAAA,WAAA,CAAoB,kBAAkB,SAAS,OAAO;GACvD,CAAA,IACC;EACM;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,gBAAgB,YAC3B,OACA,SACF,CAAC,CAAC;AAIF,MAAa,oBAAoB,YAC/B,aACA,aACF,CAAC,CAAC"}
1	+ {"version":3,"file":"notice.js","names":["Alert.Root","noop","Alert.Loading","Alert.Icon","Alert.Title","Alert.Description"],"sources":["../../../../src/components/notice/notice.tsx"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { ToasterProps } from \"sonner\"\nimport type {\n HTMLStyledProps,\n NoticeCloseStrategy,\n NoticeConfig,\n NoticePlacement,\n} from \"../../core\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { Controller, NoticeMethods } from \"./notice-provider\"\nimport type { NoticeStyle } from \"./notice.style\"\nimport type { UseNoticeOptions } from \"./use-notice\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { toast, Toaster } from \"sonner\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { assignRef, dataAttr, handlerAll, noop } from \"../../utils\"\nimport { Alert } from \"../alert\"\nimport { CloseButton } from \"../close-button\"\nimport { useNoticeContext } from \"./notice-provider\"\nimport { noticeStyle } from \"./notice.style\"\n\ntype ToasterPosition = Required<ToasterProps>[\"position\"]\n\nexport const PLACEMENT_MAP: {\n [key in NoticePlacement]: ToasterPosition\n} = {\n end: \"bottom-center\",\n \"end-center\": \"bottom-center\",\n \"end-end\": \"bottom-right\",\n \"end-start\": \"bottom-left\",\n start: \"top-center\",\n \"start-center\": \"top-center\",\n \"start-end\": \"top-right\",\n \"start-start\": \"top-left\",\n}\n\nexport interface NoticeRootProps extends Pick<\n Required<NoticeConfig>,\n \"expand\" \| \"limit\" \| \"placement\"\n> {\n ref: RefObject<Controller>\n}\n\nconst {\n PropsContext: NoticePropsContext,\n usePropsContext: useNoticePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<NoticeRootProps, NoticeStyle>(\"notice\", noticeStyle)\n\nexport { NoticePropsContext, useNoticePropsContext }\n\nexport const NoticeRoot = withProvider<\"fragment\", NoticeRootProps>(\n ({ ref, expand, limit, placement, ...rest }) => {\n const { getId } = useNoticeContext()\n const position = useMemo(() => PLACEMENT_MAP[placement], [placement])\n const [updatedLimit, setUpdatedLimit] = useState(limit)\n\n const getLimit = useCallback<NoticeMethods[\"getLimit\"]>(\n (target) => {\n if (target === placement && updatedLimit !== limit) return updatedLimit\n else return limit\n },\n [placement, limit, updatedLimit],\n )\n\n const updateLimit = useCallback<NoticeMethods[\"updateLimit\"]>(\n ({ limit, placement: target }) => {\n if (target === placement) setUpdatedLimit(limit)\n },\n [placement],\n )\n\n assignRef(ref.current.updateLimit, updateLimit)\n assignRef(ref.current.getLimit, getLimit)\n\n return (\n <styled.div {...rest}>\n <Toaster\n id={getId(placement)}\n containerAriaLabel=\"\"\n expand={expand}\n gap={16}\n hotkey={[\"\"]}\n mobileOffset=\"var(--mobile-offset)\"\n offset=\"var(--offset)\"\n position={position}\n visibleToasts={updatedLimit}\n />\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface NoticeItemProps\n extends UseNoticeOptions, Omit<HTMLStyledProps, \"id\" \| \"title\"> {\n closeStrategies?: NoticeCloseStrategy[]\n}\n\nexport const NoticeItem = withContext<\"div\", NoticeItemProps>(\n ({\n id,\n variant = \"plain\",\n closable,\n closeStrategies = [\"click\", \"drag\"],\n description,\n loadingScheme,\n status,\n title,\n withIcon = true,\n closeButtonProps,\n contentProps,\n descriptionProps,\n iconProps,\n loadingProps,\n titleProps,\n onClick,\n ...rest\n }) => {\n const onClose = useCallback(() => toast.dismiss(id), [id])\n\n return (\n <Alert.Root\n variant={variant}\n status={status}\n {...rest}\n onClick={handlerAll(\n onClick,\n closable && closeStrategies.includes(\"click\") ? onClose : noop,\n )}\n >\n {withIcon ? (\n loadingScheme ? (\n <Alert.Loading loadingScheme={loadingScheme} {...loadingProps} />\n ) : (\n <Alert.Icon {...iconProps} />\n )\n ) : null}\n\n <NoticeContent\n data-close-button={dataAttr(\n closable && closeStrategies.includes(\"button\"),\n )}\n {...contentProps}\n >\n {title ? (\n <Alert.Title me=\"0\" {...titleProps}>\n {title}\n </Alert.Title>\n ) : null}\n {description ? (\n <Alert.Description lineClamp={2} {...descriptionProps}>\n {description}\n </Alert.Description>\n ) : null}\n </NoticeContent>\n\n {closable && closeStrategies.includes(\"button\") ? (\n <NoticeCloseButton\n data-variant={variant}\n {...closeButtonProps}\n onClick={handlerAll(closeButtonProps?.onClick, onClose)}\n />\n ) : null}\n </Alert.Root>\n )\n },\n \"item\",\n)()\n\nexport interface NoticeContentProps extends HTMLStyledProps {}\n\nexport const NoticeContent = withContext<\"div\", NoticeContentProps>(\n \"div\",\n \"content\",\n)()\n\nexport interface NoticeCloseButtonProps extends CloseButtonProps {}\n\nexport const NoticeCloseButton = withContext<\"button\", NoticeCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAyBA,MAAa,gBAET;CACF,KAAK;CACL,cAAc;CACd,WAAW;CACX,aAAa;CACb,OAAO;CACP,gBAAgB;CAChB,aAAa;CACb,eAAe;AACjB;AASA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAAkD,UAAU,WAAW;AAI3E,MAAa,aAAa,cACvB,EAAE,KAAK,QAAQ,OAAO,WAAW,GAAG,WAAW;CAC9C,MAAM,EAAE,UAAU,iBAAiB;CACnC,MAAM,WAAW,cAAc,cAAc,YAAY,CAAC,SAAS,CAAC;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,MAAM,WAAW,aACd,WAAW;EACV,IAAI,WAAW,aAAa,iBAAiB,OAAO,OAAO;OACtD,OAAO;CACd,GACA;EAAC;EAAW;EAAO;CAAY,CACjC;CAEA,MAAM,cAAc,aACjB,EAAE,OAAO,WAAW,aAAa;EAChC,IAAI,WAAW,WAAW,gBAAgB,KAAK;CACjD,GACA,CAAC,SAAS,CACZ;CAEA,UAAU,IAAI,QAAQ,aAAa,WAAW;CAC9C,UAAU,IAAI,QAAQ,UAAU,QAAQ;CAExC,OACE,oBAAC,OAAO,KAAR;EAAY,GAAI;EACd,UAAA,oBAAC,SAAD;GACE,IAAI,MAAM,SAAS;GACnB,oBAAmB;GACX;GACR,KAAK;GACL,QAAQ,CAAC,EAAE;GACX,cAAa;GACb,QAAO;GACG;GACV,eAAe;EAChB,CAAA;CACS,CAAA;AAEhB,GACA,MACF,CAAC,CAAC;AAOF,MAAa,aAAa,aACvB,EACC,IACA,UAAU,SACV,UACA,kBAAkB,CAAC,SAAS,MAAM,GAClC,aACA,eACA,QACA,OACA,WAAW,MACX,kBACA,cACA,kBACA,WACA,cACA,YACA,SACA,GAAG,WACC;CACJ,MAAM,UAAU,kBAAkB,MAAM,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC;CAEzD,OACE,qBAACA,WAAD;EACW;EACD;EACR,GAAI;EACJ,UAAA,GAAA,cAAA,WAAA,CACE,SACA,YAAY,gBAAgB,SAAS,OAAO,IAAI,UAAUC,cAAAA,IAC5D;EAPF,UAAA;GASG,WACC,gBACE,oBAACC,cAAD;IAA8B;IAAe,GAAI;GAAe,CAAA,IAEhE,oBAACC,WAAD,EAAY,GAAI,UAAY,CAAA,IAE5B;GAEJ,qBAAC,eAAD;IACE,sBAAA,GAAA,cAAA,SAAA,CACE,YAAY,gBAAgB,SAAS,QAAQ,CAC/C;IACA,GAAI;IAJN,UAAA,CAMG,QACC,oBAACC,YAAD;KAAa,IAAG;KAAI,GAAI;KACrB,UAAA;IACU,CAAA,IACX,MACH,cACC,oBAACC,kBAAD;KAAmB,WAAW;KAAG,GAAI;KAClC,UAAA;IACgB,CAAA,IACjB,IACS;;GAEd,YAAY,gBAAgB,SAAS,QAAQ,IAC5C,oBAAC,mBAAD;IACE,gBAAc;IACd,GAAI;IACJ,UAAA,GAAA,cAAA,WAAA,CAAoB,kBAAkB,SAAS,OAAO;GACvD,CAAA,IACC;EACM;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,gBAAgB,YAC3B,OACA,SACF,CAAC,CAAC;AAIF,MAAa,oBAAoB,YAC/B,aACA,aACF,CAAC,CAAC"}

package/dist/esm/components/notice/use-notice.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-notice.js","names":[],"sources":["../../../../src/components/notice/use-notice.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, NoticeConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { StatusScheme } from \"../status\"\nimport { useCallback, useMemo } from \"react\"\nimport { toast } from \"sonner\"\nimport { useSystem } from \"../../core\"\nimport { isArray, omitObject } from \"../../utils\"\nimport { NoticeItem } from \"./notice\"\nimport { useNoticeContext } from \"./notice-provider\"\n\nexport interface UseNoticeOptions\n extends\n Omit<NoticeConfig, \"expand\">,\n Omit<Alert.RootProps, \"direction\" \| \"id\" \| \"status\" \| \"title\">,\n Pick<Alert.LoadingProps, \"loadingScheme\"> {\n /*\n The description of the notice.\n /\n description?: ReactNode\n /\n Unique identifier for the notice.\n /\n id?: number \| string\n /\n The status of the notice.\n /\n status?: StatusScheme\n /\n The title of the notice.\n /\n title?: ReactNode\n /\n If `true`, shows an icon.\n /\n withIcon?: boolean\n /\n Props for the close button.\n /\n closeButtonProps?: CloseButtonProps\n /\n Props for the content container.\n /\n contentProps?: HTMLStyledProps\n /\n Props for the description.\n /\n descriptionProps?: Alert.DescriptionProps\n /\n Props for the icon.\n /\n iconProps?: Alert.IconProps\n /\n Props for the loading component.\n /\n loadingProps?: Alert.LoadingProps\n /\n Props for the title.\n /\n titleProps?: Alert.TitleProps\n}\n\nexport interface NoticeComponentProps {\n onClose: () => void\n}\n\n/\n `useNotice` is a custom hook that controls the notifications of the application using Sonner.\n \n @see https://yamada-ui.com/docs/hooks/use-notice\n */\nexport const useNotice = (options: UseNoticeOptions = {}) => {\n const { getId, getLimit, updateLimit } = useNoticeContext()\n const { config } = useSystem()\n\n const systemOptions = useMemo(\n () => omitObject(config.notice ?? {}, [\"expand\"]),\n [config],\n )\n const defaultOptions = useMemo(\n () => ({ ...systemOptions, ...options }),\n [options, systemOptions],\n )\n\n const getOptions = useCallback(\n (options: UseNoticeOptions) => ({ ...defaultOptions, ...options }),\n [defaultOptions],\n )\n\n return useMemo(() => {\n const notice = (options: UseNoticeOptions = {}) => {\n options = getOptions(options)\n\n const {\n closable = true,\n closeStrategy = [\"click\", \"drag\"],\n duration,\n limit = 3,\n placement = \"start\",\n ...props\n } = options\n\n if (limit) {\n const currentLimit = getLimit(placement)\n\n if (currentLimit !== limit) updateLimit({ limit, placement })\n }\n\n const closeStrategies = isArray(closeStrategy)\n ? closeStrategy\n : [closeStrategy]\n\n const resolvedOptions = {\n dismissible: closeStrategies.includes(\"drag\") && closable,\n duration: duration ?? Number.POSITIVE_INFINITY,\n toasterId: getId(placement),\n }\n\n return toast.custom(\n (id) => (\n <NoticeItem\n {...props}\n id={id}\n closable={closable}\n closeStrategies={closeStrategies}\n />\n ),\n resolvedOptions,\n )\n }\n\n notice.close = (id: number \| string) => toast.dismiss(id)\n\n notice.closeAll = () => toast.dismiss()\n\n notice.update = (id: number \| string, options: UseNoticeOptions) => {\n toast.dismiss(id)\n\n return notice(options)\n }\n\n return notice\n }, [getLimit, getOptions, getId, updateLimit])\n}\n\nexport type UseNoticeReturn = ReturnType<typeof useNotice>\n"],"mappings":";;;;;;;;;;;;;;AA0EA,MAAa,aAAa,UAA4B,CAAC,MAAM;CAC3D,MAAM,EAAE,OAAO,UAAU,gBAAgB,iBAAiB;CAC1D,MAAM,EAAE,WAAW,UAAU;CAE7B,MAAM,gBAAgB,eAAA,GAAA,cAAA,WAAA,CACH,OAAO,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,GAChD,CAAC,MAAM,CACT;CACA,MAAM,iBAAiB,eACd;EAAE,GAAG;EAAe,GAAG;CAAQ,IACtC,CAAC,SAAS,aAAa,CACzB;CAEA,MAAM,aAAa,aAChB,aAA+B;EAAE,GAAG;EAAgB,GAAG;CAAQ,IAChE,CAAC,cAAc,CACjB;CAEA,OAAO,cAAc;EACnB,MAAM,UAAU,UAA4B,CAAC,MAAM;GACjD,UAAU,WAAW,OAAO;GAE5B,MAAM,EACJ,WAAW,MACX,gBAAgB,CAAC,SAAS,MAAM,GAChC,UACA,QAAQ,GACR,YAAY,SACZ,GAAG,UACD;GAEJ,IAAI;~~QACmB~~,SAAS,SAEf,MAAM,OAAO,YAAY;KAAE;KAAO;IAAU,CAAC;GAAA;GAG9D,MAAM,mBAAA,GAAA,cAAA,QAAA,CAA0B,aAAa,IACzC,gBACA,CAAC,aAAa;GAElB,MAAM,kBAAkB;IACtB,aAAa,gBAAgB,SAAS,MAAM,KAAK;IACjD,UAAU,YAAY,OAAO;IAC7B,WAAW,MAAM,SAAS;GAC5B;GAEA,OAAO,MAAM,QACV,OACC,oBAAC,YAAD;IACE,GAAI;IACA;IACM;IACO;GAClB,CAAA,GAEH,eACF;EACF;EAEA,OAAO,SAAS,OAAwB,MAAM,QAAQ,EAAE;EAExD,OAAO,iBAAiB,MAAM,QAAQ;EAEtC,OAAO,UAAU,IAAqB,YAA8B;GAClE,MAAM,QAAQ,EAAE;GAEhB,OAAO,OAAO,OAAO;EACvB;EAEA,OAAO;CACT,GAAG;EAAC;EAAU;EAAY;EAAO;CAAW,CAAC;AAC/C"}
1	+ {"version":3,"file":"use-notice.js","names":[],"sources":["../../../../src/components/notice/use-notice.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, NoticeConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { StatusScheme } from \"../status\"\nimport { useCallback, useMemo } from \"react\"\nimport { toast } from \"sonner\"\nimport { useSystem } from \"../../core\"\nimport { isArray, omitObject } from \"../../utils\"\nimport { NoticeItem } from \"./notice\"\nimport { useNoticeContext } from \"./notice-provider\"\n\nexport interface UseNoticeOptions\n extends\n Omit<NoticeConfig, \"expand\">,\n Omit<Alert.RootProps, \"direction\" \| \"id\" \| \"status\" \| \"title\">,\n Pick<Alert.LoadingProps, \"loadingScheme\"> {\n /*\n The description of the notice.\n /\n description?: ReactNode\n /\n Unique identifier for the notice.\n /\n id?: number \| string\n /\n The status of the notice.\n /\n status?: StatusScheme\n /\n The title of the notice.\n /\n title?: ReactNode\n /\n If `true`, shows an icon.\n /\n withIcon?: boolean\n /\n Props for the close button.\n /\n closeButtonProps?: CloseButtonProps\n /\n Props for the content container.\n /\n contentProps?: HTMLStyledProps\n /\n Props for the description.\n /\n descriptionProps?: Alert.DescriptionProps\n /\n Props for the icon.\n /\n iconProps?: Alert.IconProps\n /\n Props for the loading component.\n /\n loadingProps?: Alert.LoadingProps\n /\n Props for the title.\n /\n titleProps?: Alert.TitleProps\n}\n\nexport interface NoticeComponentProps {\n onClose: () => void\n}\n\n/\n `useNotice` is a custom hook that controls the notifications of the application using Sonner.\n \n @see https://yamada-ui.com/docs/hooks/use-notice\n */\nexport const useNotice = (options: UseNoticeOptions = {}) => {\n const { getId, getLimit, updateLimit } = useNoticeContext()\n const { config } = useSystem()\n\n const systemOptions = useMemo(\n () => omitObject(config.notice ?? {}, [\"expand\"]),\n [config],\n )\n const defaultOptions = useMemo(\n () => ({ ...systemOptions, ...options }),\n [options, systemOptions],\n )\n\n const getOptions = useCallback(\n (options: UseNoticeOptions) => ({ ...defaultOptions, ...options }),\n [defaultOptions],\n )\n\n return useMemo(() => {\n const notice = (options: UseNoticeOptions = {}) => {\n options = getOptions(options)\n\n const {\n closable = true,\n closeStrategy = [\"click\", \"drag\"],\n duration,\n limit = 3,\n placement = \"start\",\n ...props\n } = options\n\n if (limit) {\n const currentLimit = getLimit(placement)\n\n if (currentLimit !== limit) updateLimit({ limit, placement })\n }\n\n const closeStrategies = isArray(closeStrategy)\n ? closeStrategy\n : [closeStrategy]\n\n const resolvedOptions = {\n dismissible: closeStrategies.includes(\"drag\") && closable,\n duration: duration ?? Number.POSITIVE_INFINITY,\n toasterId: getId(placement),\n }\n\n return toast.custom(\n (id) => (\n <NoticeItem\n {...props}\n id={id}\n closable={closable}\n closeStrategies={closeStrategies}\n />\n ),\n resolvedOptions,\n )\n }\n\n notice.close = (id: number \| string) => toast.dismiss(id)\n\n notice.closeAll = () => toast.dismiss()\n\n notice.update = (id: number \| string, options: UseNoticeOptions) => {\n toast.dismiss(id)\n\n return notice(options)\n }\n\n return notice\n }, [getLimit, getOptions, getId, updateLimit])\n}\n\nexport type UseNoticeReturn = ReturnType<typeof useNotice>\n"],"mappings":";;;;;;;;;;;;;;AA0EA,MAAa,aAAa,UAA4B,CAAC,MAAM;CAC3D,MAAM,EAAE,OAAO,UAAU,gBAAgB,iBAAiB;CAC1D,MAAM,EAAE,WAAW,UAAU;CAE7B,MAAM,gBAAgB,eAAA,GAAA,cAAA,WAAA,CACH,OAAO,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,GAChD,CAAC,MAAM,CACT;CACA,MAAM,iBAAiB,eACd;EAAE,GAAG;EAAe,GAAG;CAAQ,IACtC,CAAC,SAAS,aAAa,CACzB;CAEA,MAAM,aAAa,aAChB,aAA+B;EAAE,GAAG;EAAgB,GAAG;CAAQ,IAChE,CAAC,cAAc,CACjB;CAEA,OAAO,cAAc;EACnB,MAAM,UAAU,UAA4B,CAAC,MAAM;GACjD,UAAU,WAAW,OAAO;GAE5B,MAAM,EACJ,WAAW,MACX,gBAAgB,CAAC,SAAS,MAAM,GAChC,UACA,QAAQ,GACR,YAAY,SACZ,GAAG,UACD;GAEJ,IAAI,OACmB;QAAA,SAAS,SAEf,MAAM,OAAO,YAAY;KAAE;KAAO;IAAU,CAAC;GAAA;GAG9D,MAAM,mBAAA,GAAA,cAAA,QAAA,CAA0B,aAAa,IACzC,gBACA,CAAC,aAAa;GAElB,MAAM,kBAAkB;IACtB,aAAa,gBAAgB,SAAS,MAAM,KAAK;IACjD,UAAU,YAAY,OAAO;IAC7B,WAAW,MAAM,SAAS;GAC5B;GAEA,OAAO,MAAM,QACV,OACC,oBAAC,YAAD;IACE,GAAI;IACA;IACM;IACO;GAClB,CAAA,GAEH,eACF;EACF;EAEA,OAAO,SAAS,OAAwB,MAAM,QAAQ,EAAE;EAExD,OAAO,iBAAiB,MAAM,QAAQ;EAEtC,OAAO,UAAU,IAAqB,YAA8B;GAClE,MAAM,QAAQ,EAAE;GAEhB,OAAO,OAAO,OAAO;EACvB;EAEA,OAAO;CACT,GAAG;EAAC;EAAU;EAAY;EAAO;CAAW,CAAC;AAC/C"}

package/dist/esm/components/number-input/number-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-input.js","names":["InputGroup.Root","InputGroup.Element"],"sources":["../../../../src/components/number-input/number-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { InputProps } from \"../input\"\nimport type { NumberInputStyle } from \"./number-input.style\"\nimport type { UseNumberInputProps } from \"./use-number-input\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"../icon\"\nimport { Input, InputGroup, useInputPropsContext } from \"../input\"\nimport { numberInputStyle } from \"./number-input.style\"\nimport { useNumberInput } from \"./use-number-input\"\n\nexport interface NumberInputProps\n extends\n Omit<\n WithoutThemeProps<InputProps, NumberInputStyle>,\n keyof UseNumberInputProps\n >,\n ThemeProps<NumberInputStyle>,\n UseNumberInputProps {\n /*\n The props for the control element.\n /\n controlProps?: NumberInputControlProps\n /\n The props for the decrement button element.\n /\n decrementProps?: NumberInputDecrementButtonProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n The props for the increment button element.\n /\n incrementProps?: NumberInputIncrementButtonProps\n /\n The props for the root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n PropsContext: NumberInputPropsContext,\n usePropsContext: useNumberInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<NumberInputProps, NumberInputStyle>(\n \"number-input\",\n numberInputStyle,\n)\n\nexport { NumberInputPropsContext, useNumberInputPropsContext }\n\n/\n `NumberInput` is a component used to obtain numeric input from the user.\n \n @see https://yamada-ui.com/docs/components/number-input\n */\nexport const NumberInput = withProvider<\"input\", NumberInputProps>(\n ({\n className,\n css,\n colorScheme,\n controlProps,\n decrementProps,\n elementProps,\n incrementProps,\n rootProps,\n ...props\n }) => {\n const [groupItemProps, rest] = useGroupItemProps(props)\n const { getDecrementProps, getIncrementProps, getInputProps } =\n useNumberInput(rest)\n\n return (\n <InputGroup.Root\n className={className}\n css={css}\n colorScheme={colorScheme}\n {...mergeProps(groupItemProps, rootProps)()}\n >\n <NumberInputField {...getInputProps()} />\n\n <InputGroup.Element clickable {...elementProps}>\n <NumberInputControl {...controlProps}>\n <NumberInputIncrementButton\n {...getIncrementProps(incrementProps)}\n />\n <NumberInputDecrementButton\n {...getDecrementProps(decrementProps)}\n />\n </NumberInputControl>\n </InputGroup.Element>\n </InputGroup.Root>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface NumberInputFieldProps extends InputProps {}\n\nconst NumberInputField = withContext<\"input\", NumberInputFieldProps>(\n Input,\n \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface NumberInputControlProps extends InputGroup.AddonProps {}\n\nconst NumberInputControl = withContext<\"div\", NumberInputControlProps>(\n \"div\",\n \"control\",\n)()\n\ntype NumberInputIncrementButtonProps = HTMLStyledProps<\"button\">\n\nconst NumberInputIncrementButton = withContext<\n \"button\",\n NumberInputIncrementButtonProps\n>(\"button\", [\"button\", \"increment\"])(({ children, ...rest }) => ({\n children: children ?? <ChevronUpIcon />,\n ...rest,\n}))\n\ntype NumberInputDecrementButtonProps = HTMLStyledProps<\"button\">\n\nconst NumberInputDecrementButton = withContext<\n \"button\",\n NumberInputDecrementButtonProps\n>(\"button\", [\"button\", \"decrement\"])(({ children, ...rest }) => ({\n children: children ?? <ChevronDownIcon />,\n ...rest,\n}))\n"],"mappings":";;;;;;;;;;;;;AA2CA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,WACA,KACA,aACA,cACA,gBACA,cACA,gBACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,gBAAgB,QAAQ,kBAAkB,KAAK;CACtD,MAAM,EAAE,mBAAmB,mBAAmB,kBAC5C,eAAe,IAAI;CAErB,OACE,qBAACA,gBAAD;EACa;EACN;EACQ;EACb,GAAI,WAAW,gBAAgB,SAAS,CAAC,CAAC;~~YAJ5C~~,CAME,oBAAC,kBAAD,EAAkB,GAAI,cAAc,EAAI,CAAA,GAExC,oBAACC,cAAD;GAAoB,WAAA;GAAU,GAAI;~~aAChC~~,qBAAC,oBAAD;IAAoB,GAAI;~~cAAxB~~,CACE,oBAAC,4BAAD,EACE,GAAI,kBAAkB,cAAc,EACrC,CAAA,GACD,oBAAC,4BAAD,EACE,GAAI,kBAAkB,cAAc,EACrC,CAAA,CACiB;;EACF,CAAA,CACL;;AAErB,GACA,MACF,CAAC,EAAE,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,mBAAmB,YACvB,OACA,OACF,CAAC,CAAC,EAAE,wBAAwB,GAAG,CAAC;AAIhC,MAAM,qBAAqB,YACzB,OACA,SACF,CAAC,CAAC;AAIF,MAAM,6BAA6B,YAGjC,UAAU,CAAC,UAAU,WAAW,CAAC,CAAC,EAAE,EAAE,UAAU,GAAG,YAAY;CAC/D,UAAU,YAAY,oBAAC,eAAD,CAAgB,CAAA;CACtC,GAAG;AACL,EAAE;AAIF,MAAM,6BAA6B,YAGjC,UAAU,CAAC,UAAU,WAAW,CAAC,CAAC,EAAE,EAAE,UAAU,GAAG,YAAY;CAC/D,UAAU,YAAY,oBAAC,iBAAD,CAAkB,CAAA;CACxC,GAAG;AACL,EAAE"}
1	+ {"version":3,"file":"number-input.js","names":["InputGroup.Root","InputGroup.Element"],"sources":["../../../../src/components/number-input/number-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { InputProps } from \"../input\"\nimport type { NumberInputStyle } from \"./number-input.style\"\nimport type { UseNumberInputProps } from \"./use-number-input\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"../icon\"\nimport { Input, InputGroup, useInputPropsContext } from \"../input\"\nimport { numberInputStyle } from \"./number-input.style\"\nimport { useNumberInput } from \"./use-number-input\"\n\nexport interface NumberInputProps\n extends\n Omit<\n WithoutThemeProps<InputProps, NumberInputStyle>,\n keyof UseNumberInputProps\n >,\n ThemeProps<NumberInputStyle>,\n UseNumberInputProps {\n /*\n The props for the control element.\n /\n controlProps?: NumberInputControlProps\n /\n The props for the decrement button element.\n /\n decrementProps?: NumberInputDecrementButtonProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n The props for the increment button element.\n /\n incrementProps?: NumberInputIncrementButtonProps\n /\n The props for the root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n PropsContext: NumberInputPropsContext,\n usePropsContext: useNumberInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<NumberInputProps, NumberInputStyle>(\n \"number-input\",\n numberInputStyle,\n)\n\nexport { NumberInputPropsContext, useNumberInputPropsContext }\n\n/\n `NumberInput` is a component used to obtain numeric input from the user.\n \n @see https://yamada-ui.com/docs/components/number-input\n */\nexport const NumberInput = withProvider<\"input\", NumberInputProps>(\n ({\n className,\n css,\n colorScheme,\n controlProps,\n decrementProps,\n elementProps,\n incrementProps,\n rootProps,\n ...props\n }) => {\n const [groupItemProps, rest] = useGroupItemProps(props)\n const { getDecrementProps, getIncrementProps, getInputProps } =\n useNumberInput(rest)\n\n return (\n <InputGroup.Root\n className={className}\n css={css}\n colorScheme={colorScheme}\n {...mergeProps(groupItemProps, rootProps)()}\n >\n <NumberInputField {...getInputProps()} />\n\n <InputGroup.Element clickable {...elementProps}>\n <NumberInputControl {...controlProps}>\n <NumberInputIncrementButton\n {...getIncrementProps(incrementProps)}\n />\n <NumberInputDecrementButton\n {...getDecrementProps(decrementProps)}\n />\n </NumberInputControl>\n </InputGroup.Element>\n </InputGroup.Root>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface NumberInputFieldProps extends InputProps {}\n\nconst NumberInputField = withContext<\"input\", NumberInputFieldProps>(\n Input,\n \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface NumberInputControlProps extends InputGroup.AddonProps {}\n\nconst NumberInputControl = withContext<\"div\", NumberInputControlProps>(\n \"div\",\n \"control\",\n)()\n\ntype NumberInputIncrementButtonProps = HTMLStyledProps<\"button\">\n\nconst NumberInputIncrementButton = withContext<\n \"button\",\n NumberInputIncrementButtonProps\n>(\"button\", [\"button\", \"increment\"])(({ children, ...rest }) => ({\n children: children ?? <ChevronUpIcon />,\n ...rest,\n}))\n\ntype NumberInputDecrementButtonProps = HTMLStyledProps<\"button\">\n\nconst NumberInputDecrementButton = withContext<\n \"button\",\n NumberInputDecrementButtonProps\n>(\"button\", [\"button\", \"decrement\"])(({ children, ...rest }) => ({\n children: children ?? <ChevronDownIcon />,\n ...rest,\n}))\n"],"mappings":";;;;;;;;;;;;;AA2CA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,WACA,KACA,aACA,cACA,gBACA,cACA,gBACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,gBAAgB,QAAQ,kBAAkB,KAAK;CACtD,MAAM,EAAE,mBAAmB,mBAAmB,kBAC5C,eAAe,IAAI;CAErB,OACE,qBAACA,gBAAD;EACa;EACN;EACQ;EACb,GAAI,WAAW,gBAAgB,SAAS,CAAC,CAAC;EAJ5C,UAAA,CAME,oBAAC,kBAAD,EAAkB,GAAI,cAAc,EAAI,CAAA,GAExC,oBAACC,cAAD;GAAoB,WAAA;GAAU,GAAI;GAChC,UAAA,qBAAC,oBAAD;IAAoB,GAAI;IAAxB,UAAA,CACE,oBAAC,4BAAD,EACE,GAAI,kBAAkB,cAAc,EACrC,CAAA,GACD,oBAAC,4BAAD,EACE,GAAI,kBAAkB,cAAc,EACrC,CAAA,CACiB;;EACF,CAAA,CACL;;AAErB,GACA,MACF,CAAC,EAAE,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,mBAAmB,YACvB,OACA,OACF,CAAC,CAAC,EAAE,wBAAwB,GAAG,CAAC;AAIhC,MAAM,qBAAqB,YACzB,OACA,SACF,CAAC,CAAC;AAIF,MAAM,6BAA6B,YAGjC,UAAU,CAAC,UAAU,WAAW,CAAC,CAAC,EAAE,EAAE,UAAU,GAAG,YAAY;CAC/D,UAAU,YAAY,oBAAC,eAAD,CAAgB,CAAA;CACtC,GAAG;AACL,EAAE;AAIF,MAAM,6BAA6B,YAGjC,UAAU,CAAC,UAAU,WAAW,CAAC,CAAC,EAAE,EAAE,UAAU,GAAG,YAAY;CAC/D,UAAU,YAAY,oBAAC,iBAAD,CAAkB,CAAA;CACxC,GAAG;AACL,EAAE"}

package/dist/esm/components/number-input/use-number-input.js CHANGED Viewed

@@ -146,7 +146,8 @@ const useNumberInput = (props = {}) => {
 		setValue(sanitize(parse(inputRef.current.value)));
 	}, [parse, sanitize]);
 	useEventListener(inputRef.current, "wheel", (ev) => {
-		const focused = (inputRef.current?.ownerDocument ?? document).activeElement === inputRef.current;
+		if (!inputRef.current) return;
+		const focused = (0, utils_exports.isActiveElement)(inputRef.current, inputRef.current.getRootNode());
 		if (!allowMouseWheel || !focused) return;
 		ev.preventDefault();
 		const stepValue = getStepRatio(ev) * step;

package/dist/esm/components/number-input/use-number-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-number-input.js","names":[],"sources":["../../../../src/components/number-input/use-number-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps } from \"../../hooks/use-counter\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useCounter } from \"../../hooks/use-counter\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport {\n ariaAttr,\n isComposing,\n mergeRefs,\n runKeyAction,\n useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useNumberCounter } from \"./use-number-counter\"\n\nconst defaultFormat = (value: number \| string) => value.toString()\n\nconst defaultParse = (value: string) => value\n\nconst isDefaultValidCharacter = (char: string) => /^[Ee0-9+\\-.]$/.test(char)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const modifierKey = ctrlKey \|\| altKey \|\| metaKey\n const singleCharacterKey = key.length === 1\n\n if (!singleCharacterKey \|\| modifierKey) return true\n\n return isValid(key)\n}\n\nconst getStepRatio = <Y extends KeyboardEvent \| WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey \|\| ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\nexport interface UseNumberInputProps\n extends\n Omit<HTMLProps<\"input\">, keyof UseCounterProps>,\n UseCounterProps,\n FieldProps {\n /*\n If `true`, the input's value will change based on mouse wheel.\n \n @default false\n /\n allowMouseWheel?: boolean\n /\n This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n \n @default true\n /\n clampValueOnBlur?: boolean\n /\n If `true`, the input will be focused as you increment or decrement the value with the button.\n \n @default true\n /\n focusInputOnChange?: boolean\n /\n If using a custom display format, this converts the default format to the custom format.\n /\n format?: (value: number \| string) => string\n /\n This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n \n It is used to set the `aria-valuetext` property of the input.\n /\n getAriaValueText?: (value: number \| string) => string \| undefined\n /\n Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n /\n isValidCharacter?: (value: string) => boolean\n /\n If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n /\n parse?: (value: string) => string\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n props: {\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n disabled,\n focusInputOnChange = true,\n format = defaultFormat,\n getAriaValueText,\n isValidCharacter = isDefaultValidCharacter,\n keepWithinRange = true,\n max: maxValue = Number.MAX_SAFE_INTEGER,\n min: minValue = Number.MIN_SAFE_INTEGER,\n parse = defaultParse,\n precision,\n readOnly,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const {\n cast,\n max,\n min,\n out,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max: maxValue,\n min: minValue,\n precision,\n step,\n value: valueProp,\n onChange: onChangeProp,\n })\n const selectionRef = useRef<null \| {\n end: null \| number\n start: null \| number\n }>(null)\n const valueText = useMemo(() => {\n let text = getAriaValueText?.(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const increment = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.increment(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const decrement = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.decrement(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n const { selectionEnd, selectionStart, value } = ev.currentTarget\n\n update(sanitize(parse(value)))\n\n selectionRef.current = { end: selectionEnd, start: selectionStart }\n },\n [parse, sanitize, update],\n )\n\n const onFocus = useCallback((ev: FocusEvent<HTMLInputElement>) => {\n if (!selectionRef.current) return\n\n const { end, start } = selectionRef.current\n const { selectionStart, value } = ev.currentTarget\n\n ev.currentTarget.selectionStart = start ?? value.length\n ev.currentTarget.selectionEnd = end ?? selectionStart\n }, [])\n\n const onBlur = useCallback(() => {\n if (!clampValueOnBlur) return\n\n let nextValue = value\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < minValue) nextValue = minValue\n\n if (valueAsNumber > maxValue) nextValue = maxValue\n\n cast(nextValue)\n }\n }, [\n cast,\n clampValueOnBlur,\n maxValue,\n minValue,\n setValue,\n value,\n valueAsNumber,\n ])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) step\n\n runKeyAction(ev, {\n ArrowDown: () => decrement(stepValue),\n ArrowUp: () => increment(stepValue),\n End: () => update(maxValue),\n Home: () => update(minValue),\n })\n },\n [decrement, increment, isValidCharacter, maxValue, minValue, step, update],\n )\n\n const { getDecrementProps, getIncrementProps } = useNumberCounter({\n \"aria-disabled\": ariaAttr(!interactive),\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...dataProps,\n })\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n setValue(sanitize(parse(inputRef.current.value)))\n }, [parse, sanitize])\n\n useEventListener(\n inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const focused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel \|\| !focused) return\n\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) increment(stepValue)\n else if (direction === 1) decrement(stepValue)\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => {\n const { ref: restRef, ...restWithoutRef } = rest\n\n return mergeProps(\n {\n ...ariaProps,\n ...dataProps,\n type: \"text\",\n \"aria-invalid\": ariaAttr(ariaProps[\"aria-invalid\"] ?? out),\n \"aria-valuemax\": maxValue,\n \"aria-valuemin\": minValue,\n \"aria-valuenow\": Number.isNaN(valueAsNumber)\n ? undefined\n : valueAsNumber,\n \"aria-valuetext\": valueText,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n disabled,\n inputMode: \"decimal\",\n max: maxValue,\n min: minValue,\n pattern: \"[0-9]*(.[0-9]+)?\",\n readOnly,\n role: \"spinbutton\",\n step,\n value: format(value),\n },\n restWithoutRef,\n eventProps,\n props,\n {\n ref: mergeRefs(ref, restRef, inputRef),\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n },\n )()\n },\n [\n format,\n out,\n value,\n valueText,\n ariaProps,\n dataProps,\n eventProps,\n maxValue,\n minValue,\n valueAsNumber,\n disabled,\n readOnly,\n step,\n rest,\n onKeyDown,\n onBlur,\n onFocus,\n onChange,\n ],\n )\n\n return { getDecrementProps, getIncrementProps, getInputProps }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-number-input.js","names":[],"sources":["../../../../src/components/number-input/use-number-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps } from \"../../hooks/use-counter\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useCounter } from \"../../hooks/use-counter\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport {\n ariaAttr,\n isActiveElement,\n isComposing,\n mergeRefs,\n runKeyAction,\n useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useNumberCounter } from \"./use-number-counter\"\n\nconst defaultFormat = (value: number \| string) => value.toString()\n\nconst defaultParse = (value: string) => value\n\nconst isDefaultValidCharacter = (char: string) => /^[Ee0-9+\\-.]$/.test(char)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const modifierKey = ctrlKey \|\| altKey \|\| metaKey\n const singleCharacterKey = key.length === 1\n\n if (!singleCharacterKey \|\| modifierKey) return true\n\n return isValid(key)\n}\n\nconst getStepRatio = <Y extends KeyboardEvent \| WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey \|\| ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\nexport interface UseNumberInputProps\n extends\n Omit<HTMLProps<\"input\">, keyof UseCounterProps>,\n UseCounterProps,\n FieldProps {\n /*\n If `true`, the input's value will change based on mouse wheel.\n \n @default false\n /\n allowMouseWheel?: boolean\n /\n This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n \n @default true\n /\n clampValueOnBlur?: boolean\n /\n If `true`, the input will be focused as you increment or decrement the value with the button.\n \n @default true\n /\n focusInputOnChange?: boolean\n /\n If using a custom display format, this converts the default format to the custom format.\n /\n format?: (value: number \| string) => string\n /\n This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n \n It is used to set the `aria-valuetext` property of the input.\n /\n getAriaValueText?: (value: number \| string) => string \| undefined\n /\n Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n /\n isValidCharacter?: (value: string) => boolean\n /\n If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n /\n parse?: (value: string) => string\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n props: {\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n disabled,\n focusInputOnChange = true,\n format = defaultFormat,\n getAriaValueText,\n isValidCharacter = isDefaultValidCharacter,\n keepWithinRange = true,\n max: maxValue = Number.MAX_SAFE_INTEGER,\n min: minValue = Number.MIN_SAFE_INTEGER,\n parse = defaultParse,\n precision,\n readOnly,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const {\n cast,\n max,\n min,\n out,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max: maxValue,\n min: minValue,\n precision,\n step,\n value: valueProp,\n onChange: onChangeProp,\n })\n const selectionRef = useRef<null \| {\n end: null \| number\n start: null \| number\n }>(null)\n const valueText = useMemo(() => {\n let text = getAriaValueText?.(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const increment = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.increment(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const decrement = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.decrement(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n const { selectionEnd, selectionStart, value } = ev.currentTarget\n\n update(sanitize(parse(value)))\n\n selectionRef.current = { end: selectionEnd, start: selectionStart }\n },\n [parse, sanitize, update],\n )\n\n const onFocus = useCallback((ev: FocusEvent<HTMLInputElement>) => {\n if (!selectionRef.current) return\n\n const { end, start } = selectionRef.current\n const { selectionStart, value } = ev.currentTarget\n\n ev.currentTarget.selectionStart = start ?? value.length\n ev.currentTarget.selectionEnd = end ?? selectionStart\n }, [])\n\n const onBlur = useCallback(() => {\n if (!clampValueOnBlur) return\n\n let nextValue = value\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < minValue) nextValue = minValue\n\n if (valueAsNumber > maxValue) nextValue = maxValue\n\n cast(nextValue)\n }\n }, [\n cast,\n clampValueOnBlur,\n maxValue,\n minValue,\n setValue,\n value,\n valueAsNumber,\n ])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) step\n\n runKeyAction(ev, {\n ArrowDown: () => decrement(stepValue),\n ArrowUp: () => increment(stepValue),\n End: () => update(maxValue),\n Home: () => update(minValue),\n })\n },\n [decrement, increment, isValidCharacter, maxValue, minValue, step, update],\n )\n\n const { getDecrementProps, getIncrementProps } = useNumberCounter({\n \"aria-disabled\": ariaAttr(!interactive),\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...dataProps,\n })\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n setValue(sanitize(parse(inputRef.current.value)))\n }, [parse, sanitize])\n\n useEventListener(\n inputRef.current,\n \"wheel\",\n (ev) => {\n if (!inputRef.current) return\n\n const focused = isActiveElement(\n inputRef.current,\n inputRef.current.getRootNode(),\n )\n\n if (!allowMouseWheel \|\| !focused) return\n\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) increment(stepValue)\n else if (direction === 1) decrement(stepValue)\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => {\n const { ref: restRef, ...restWithoutRef } = rest\n\n return mergeProps(\n {\n ...ariaProps,\n ...dataProps,\n type: \"text\",\n \"aria-invalid\": ariaAttr(ariaProps[\"aria-invalid\"] ?? out),\n \"aria-valuemax\": maxValue,\n \"aria-valuemin\": minValue,\n \"aria-valuenow\": Number.isNaN(valueAsNumber)\n ? undefined\n : valueAsNumber,\n \"aria-valuetext\": valueText,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n disabled,\n inputMode: \"decimal\",\n max: maxValue,\n min: minValue,\n pattern: \"[0-9]*(.[0-9]+)?\",\n readOnly,\n role: \"spinbutton\",\n step,\n value: format(value),\n },\n restWithoutRef,\n eventProps,\n props,\n {\n ref: mergeRefs(ref, restRef, inputRef),\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n },\n )()\n },\n [\n format,\n out,\n value,\n valueText,\n ariaProps,\n dataProps,\n eventProps,\n maxValue,\n minValue,\n valueAsNumber,\n disabled,\n readOnly,\n step,\n rest,\n onKeyDown,\n onBlur,\n onFocus,\n onChange,\n ],\n )\n\n return { getDecrementProps, getIncrementProps, getInputProps }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n"],"mappings":"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"}

package/dist/esm/components/pagination/pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.js","names":["ButtonGroup.Root","ButtonGroup.IconItem"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" \| \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" \| \"siblings\"> {\n /*\n Number of elements visible on the left/right edges.\n \n @default 1\n /\n boundaries?: number\n /* Number of siblings displayed on the left/right side of selected page.\n \n @default 1\n /\n siblings?: number\n /\n If `true`, display the control buttons.\n \n @default true\n /\n withControls?: boolean\n /\n If `true`, display the edge buttons.\n \n @default false\n /\n withEdges?: boolean\n /\n Props for next of the control button element.\n /\n controlNextProps?: PaginationItemProps\n /\n Props for previous of the control button element.\n /\n controlPrevProps?: PaginationItemProps\n /\n Props for control button element.\n /\n controlProps?: PaginationItemProps\n /\n Props for end of the edge button element.\n /\n edgeEndProps?: PaginationItemProps\n /\n Props for edge button element.\n /\n edgeProps?: PaginationItemProps\n /\n Props for start of the edge button element.\n /\n edgeStartProps?: PaginationItemProps\n /\n Props for ellipsis of the element.\n /\n ellipsisProps?: PaginationItemProps\n /\n Props for item of the button element.\n /\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/\n `Pagination` is a component for managing the pagination and navigation of content.\n \n @see https://yamada-ui.com/docs/components/pagination\n /\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" \| \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...mergeProps(edgeProps, edgeStartProps)()}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...mergeProps(controlProps, controlPrevProps)()}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...mergeProps(controlProps, controlNextProps)()}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...mergeProps(edgeProps, edgeEndProps)()}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /\n The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n /\n children?: (page: Page) => ReactNode\n /\n The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n /\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component))\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n else return component\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /\n The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n /\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /\n The format of the text.\n \n @default 'compact'\n */\n format?: \"compact\" \| \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) return runIfFn(children, { page: currentPage, total })\n else if (format === \"short\")\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n else\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":"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"}
1	+ {"version":3,"file":"pagination.js","names":["ButtonGroup.Root","ButtonGroup.IconItem"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" \| \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" \| \"siblings\"> {\n /*\n Number of elements visible on the left/right edges.\n \n @default 1\n /\n boundaries?: number\n /* Number of siblings displayed on the left/right side of selected page.\n \n @default 1\n /\n siblings?: number\n /\n If `true`, display the control buttons.\n \n @default true\n /\n withControls?: boolean\n /\n If `true`, display the edge buttons.\n \n @default false\n /\n withEdges?: boolean\n /\n Props for next of the control button element.\n /\n controlNextProps?: PaginationItemProps\n /\n Props for previous of the control button element.\n /\n controlPrevProps?: PaginationItemProps\n /\n Props for control button element.\n /\n controlProps?: PaginationItemProps\n /\n Props for end of the edge button element.\n /\n edgeEndProps?: PaginationItemProps\n /\n Props for edge button element.\n /\n edgeProps?: PaginationItemProps\n /\n Props for start of the edge button element.\n /\n edgeStartProps?: PaginationItemProps\n /\n Props for ellipsis of the element.\n /\n ellipsisProps?: PaginationItemProps\n /\n Props for item of the button element.\n /\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/\n `Pagination` is a component for managing the pagination and navigation of content.\n \n @see https://yamada-ui.com/docs/components/pagination\n /\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" \| \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...mergeProps(edgeProps, edgeStartProps)()}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...mergeProps(controlProps, controlPrevProps)()}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...mergeProps(controlProps, controlNextProps)()}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...mergeProps(edgeProps, edgeEndProps)()}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /\n The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n /\n children?: (page: Page) => ReactNode\n /\n The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n /\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component))\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n else return component\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /\n The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n /\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /\n The format of the text.\n \n @default 'compact'\n */\n format?: \"compact\" \| \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) return runIfFn(children, { page: currentPage, total })\n else if (format === \"short\")\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n else\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":"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"}

package/dist/esm/components/password-input/password-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"password-input.js","names":["InputGroup.Root","InputGroup.Element"],"sources":["../../../../src/components/password-input/password-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { InputProps } from \"../input\"\nimport type { PasswordInputStyle } from \"./password-input.style\"\nimport type { UsePasswordInputProps } from \"./use-password-input\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { EyeIcon, EyeOffIcon } from \"../icon\"\nimport { Input, InputGroup, useInputPropsContext } from \"../input\"\nimport { passwordInputStyle } from \"./password-input.style\"\nimport { usePasswordInput } from \"./use-password-input\"\n\nexport interface PasswordInputProps\n extends\n WithoutThemeProps<InputProps, PasswordInputStyle>,\n ThemeProps<PasswordInputStyle>,\n UsePasswordInputProps {\n /*\n The icons to be used for the visibility toggle.\n /\n visibilityIcon?: { off: ReactNode; on: ReactNode }\n /\n The props for the button element.\n /\n buttonProps?: PasswordInputButtonProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n The props for the root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n PropsContext: PasswordInputPropsContext,\n usePropsContext: usePasswordInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PasswordInputProps, PasswordInputStyle>(\n \"password-input\",\n passwordInputStyle,\n)\n\nexport { PasswordInputPropsContext, usePasswordInputPropsContext }\n\n/\n `PasswordInput` is a component that allows users to input passwords with a visibility toggle.\n \n @see https://yamada-ui.com/docs/components/password-input\n */\nexport const PasswordInput = withProvider<\"input\", PasswordInputProps>(\n ({\n className,\n css,\n colorScheme,\n visibilityIcon = { off: <EyeOffIcon />, on: <EyeIcon /> },\n buttonProps,\n elementProps,\n rootProps,\n ...props\n }) => {\n const [groupItemProps, rest] = useGroupItemProps(props)\n const { visible, getButtonProps, getInputProps } = usePasswordInput(rest)\n\n return (\n <InputGroup.Root\n className={className}\n css={css}\n colorScheme={colorScheme}\n {...mergeProps(groupItemProps, rootProps)()}\n >\n <PasswordInputField {...getInputProps()} />\n\n <InputGroup.Element clickable {...elementProps}>\n <PasswordInputButton {...getButtonProps(buttonProps)}>\n {visible ? visibilityIcon.off : visibilityIcon.on}\n </PasswordInputButton>\n </InputGroup.Element>\n </InputGroup.Root>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface PasswordInputFieldProps extends InputProps {}\n\nconst PasswordInputField = withContext<\"input\", PasswordInputFieldProps>(\n Input,\n \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface PasswordInputButtonProps extends HTMLStyledProps<\"button\"> {}\n\nconst PasswordInputButton = withContext<\"button\", PasswordInputButtonProps>(\n \"button\",\n \"button\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,2BACd,iBAAiB,8BACjB,aACA,iBACE,oBACF,kBACA,kBACF;;;;;;AASA,MAAa,gBAAgB,cAC1B,EACC,WACA,KACA,aACA,iBAAiB;CAAE,KAAK,oBAAC,YAAD,CAAa,CAAA;CAAG,IAAI,oBAAC,SAAD,CAAU,CAAA;AAAE,GACxD,aACA,cACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,gBAAgB,QAAQ,kBAAkB,KAAK;CACtD,MAAM,EAAE,SAAS,gBAAgB,kBAAkB,iBAAiB,IAAI;CAExE,OACE,qBAACA,gBAAD;EACa;EACN;EACQ;EACb,GAAI,WAAW,gBAAgB,SAAS,CAAC,CAAC;~~YAJ5C~~,CAME,oBAAC,oBAAD,EAAoB,GAAI,cAAc,EAAI,CAAA,GAE1C,oBAACC,cAAD;GAAoB,WAAA;GAAU,GAAI;~~aAChC~~,oBAAC,qBAAD;IAAqB,GAAI,eAAe,WAAW;~~cAChD~~,UAAU,eAAe,MAAM,eAAe;GAC5B,CAAA;EACH,CAAA,CACL;;AAErB,GACA,MACF,CAAC,EAAE,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,qBAAqB,YACzB,OACA,OACF,CAAC,CAAC,EAAE,wBAAwB,GAAG,CAAC;AAIhC,MAAM,sBAAsB,YAC1B,UACA,QACF,CAAC,CAAC"}
1	+ {"version":3,"file":"password-input.js","names":["InputGroup.Root","InputGroup.Element"],"sources":["../../../../src/components/password-input/password-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { InputProps } from \"../input\"\nimport type { PasswordInputStyle } from \"./password-input.style\"\nimport type { UsePasswordInputProps } from \"./use-password-input\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { EyeIcon, EyeOffIcon } from \"../icon\"\nimport { Input, InputGroup, useInputPropsContext } from \"../input\"\nimport { passwordInputStyle } from \"./password-input.style\"\nimport { usePasswordInput } from \"./use-password-input\"\n\nexport interface PasswordInputProps\n extends\n WithoutThemeProps<InputProps, PasswordInputStyle>,\n ThemeProps<PasswordInputStyle>,\n UsePasswordInputProps {\n /*\n The icons to be used for the visibility toggle.\n /\n visibilityIcon?: { off: ReactNode; on: ReactNode }\n /\n The props for the button element.\n /\n buttonProps?: PasswordInputButtonProps\n /\n The props for the end element.\n /\n elementProps?: InputGroup.ElementProps\n /\n The props for the root element.\n /\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n PropsContext: PasswordInputPropsContext,\n usePropsContext: usePasswordInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PasswordInputProps, PasswordInputStyle>(\n \"password-input\",\n passwordInputStyle,\n)\n\nexport { PasswordInputPropsContext, usePasswordInputPropsContext }\n\n/\n `PasswordInput` is a component that allows users to input passwords with a visibility toggle.\n \n @see https://yamada-ui.com/docs/components/password-input\n */\nexport const PasswordInput = withProvider<\"input\", PasswordInputProps>(\n ({\n className,\n css,\n colorScheme,\n visibilityIcon = { off: <EyeOffIcon />, on: <EyeIcon /> },\n buttonProps,\n elementProps,\n rootProps,\n ...props\n }) => {\n const [groupItemProps, rest] = useGroupItemProps(props)\n const { visible, getButtonProps, getInputProps } = usePasswordInput(rest)\n\n return (\n <InputGroup.Root\n className={className}\n css={css}\n colorScheme={colorScheme}\n {...mergeProps(groupItemProps, rootProps)()}\n >\n <PasswordInputField {...getInputProps()} />\n\n <InputGroup.Element clickable {...elementProps}>\n <PasswordInputButton {...getButtonProps(buttonProps)}>\n {visible ? visibilityIcon.off : visibilityIcon.on}\n </PasswordInputButton>\n </InputGroup.Element>\n </InputGroup.Root>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface PasswordInputFieldProps extends InputProps {}\n\nconst PasswordInputField = withContext<\"input\", PasswordInputFieldProps>(\n Input,\n \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface PasswordInputButtonProps extends HTMLStyledProps<\"button\"> {}\n\nconst PasswordInputButton = withContext<\"button\", PasswordInputButtonProps>(\n \"button\",\n \"button\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,2BACd,iBAAiB,8BACjB,aACA,iBACE,oBACF,kBACA,kBACF;;;;;;AASA,MAAa,gBAAgB,cAC1B,EACC,WACA,KACA,aACA,iBAAiB;CAAE,KAAK,oBAAC,YAAD,CAAa,CAAA;CAAG,IAAI,oBAAC,SAAD,CAAU,CAAA;AAAE,GACxD,aACA,cACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,gBAAgB,QAAQ,kBAAkB,KAAK;CACtD,MAAM,EAAE,SAAS,gBAAgB,kBAAkB,iBAAiB,IAAI;CAExE,OACE,qBAACA,gBAAD;EACa;EACN;EACQ;EACb,GAAI,WAAW,gBAAgB,SAAS,CAAC,CAAC;EAJ5C,UAAA,CAME,oBAAC,oBAAD,EAAoB,GAAI,cAAc,EAAI,CAAA,GAE1C,oBAACC,cAAD;GAAoB,WAAA;GAAU,GAAI;GAChC,UAAA,oBAAC,qBAAD;IAAqB,GAAI,eAAe,WAAW;IAChD,UAAA,UAAU,eAAe,MAAM,eAAe;GAC5B,CAAA;EACH,CAAA,CACL;;AAErB,GACA,MACF,CAAC,EAAE,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,qBAAqB,YACzB,OACA,OACF,CAAC,CAAC,EAAE,wBAAwB,GAAG,CAAC;AAIhC,MAAM,sBAAsB,YAC1B,UACA,QACF,CAAC,CAAC"}

package/dist/esm/components/password-input/strength-meter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"strength-meter.js","names":[],"sources":["../../../../src/components/password-input/strength-meter.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps } from \"../../core\"\nimport type { StrengthMeterStyle } from \"./strength-meter.style\"\nimport type { UseStrengthMeterProps } from \"./use-strength-meter\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { strengthMeterStyle } from \"./strength-meter.style\"\nimport { useStrengthMeter } from \"./use-strength-meter\"\n\ninterface IndicatorProps extends HTMLStyledProps {\n label?: ReactNode\n}\n\nexport interface StrengthMeterProps\n extends HTMLStyledProps, UseStrengthMeterProps {\n /*\n If `true`, the password strength meter will display the label.\n \n @default true\n /\n withLabel?: boolean\n /\n The props of the password strength meter indicator.\n /\n getIndicatorProps?: (percent: number) => IndicatorProps\n}\n\nconst {\n PropsContext: StrengthMeterPropsContext,\n usePropsContext: useStrengthMeterPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StrengthMeterProps, StrengthMeterStyle>(\n \"strength-meter\",\n strengthMeterStyle,\n)\n\nexport { StrengthMeterPropsContext, useStrengthMeterPropsContext }\n\nexport const StrengthMeter = withProvider<\"div\", StrengthMeterProps>(\n ({\n max = 4,\n value,\n withLabel = true,\n getIndicatorProps: getCustomIndicatorProps,\n ...rest\n }) => {\n const percent = (value / max) 100\n\n const getDefaultIndicatorProps = (percent: number): IndicatorProps => {\n switch (true) {\n case percent < 33:\n return { label: \"Low\", _selected: { bg: \"red.500\" } }\n case percent < 66:\n return { label: \"Medium\", _selected: { bg: \"orange.500\" } }\n default:\n return { label: \"High\", _selected: { bg: \"green.500\" } }\n }\n }\n\n getCustomIndicatorProps ??= getDefaultIndicatorProps\n\n const { label, ...indicatorProps } = getCustomIndicatorProps(percent)\n\n const { getIndicatorProps, getRootProps } = useStrengthMeter({\n max,\n value,\n ...rest,\n })\n\n return (\n <styled.div {...getRootProps()}>\n <StrengthMeterIndicators>\n {Array.from({ length: max }).map((_, index) => (\n <StrengthMeterIndicator\n key={index}\n {...getIndicatorProps({ index, ...indicatorProps })}\n />\n ))}\n </StrengthMeterIndicators>\n\n {withLabel && label ? (\n <StrengthMeterLabel>{label}</StrengthMeterLabel>\n ) : null}\n </styled.div>\n )\n },\n \"root\",\n)()\n\ninterface StrengthMeterIndicatorsProps extends HTMLStyledProps {}\n\nconst StrengthMeterIndicators = withContext<\n \"div\",\n StrengthMeterIndicatorsProps\n>(\"div\", \"indicators\")()\n\ninterface StrengthMeterIndicatorProps extends HTMLStyledProps {}\n\nconst StrengthMeterIndicator = withContext<\"div\", StrengthMeterIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\ninterface StrengthMeterLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst StrengthMeterLabel = withContext<\"span\", StrengthMeterLabelProps>(\n \"span\",\n \"label\",\n)()\n"],"mappings":";;;;;;;AA4BA,MAAM,EACJ,cAAc,2BACd,iBAAiB,8BACjB,aACA,iBACE,oBACF,kBACA,kBACF;AAIA,MAAa,gBAAgB,cAC1B,EACC,MAAM,GACN,OACA,YAAY,MACZ,mBAAmB,yBACnB,GAAG,WACC;CACJ,MAAM,UAAW,QAAQ,MAAO;CAEhC,MAAM,4BAA4B,YAAoC;EACpE,QAAQ,MAAR;GACE,KAAK,UAAU,IACb,OAAO;IAAE,OAAO;IAAO,WAAW,EAAE,IAAI,UAAU;GAAE;GACtD,KAAK,UAAU,IACb,OAAO;IAAE,OAAO;IAAU,WAAW,EAAE,IAAI,aAAa;GAAE;GAC5D,SACE,OAAO;IAAE,OAAO;IAAQ,WAAW,EAAE,IAAI,YAAY;GAAE;EAC3D;CACF;CAEA,4BAA4B;CAE5B,MAAM,EAAE,OAAO,GAAG,mBAAmB,wBAAwB,OAAO;CAEpE,MAAM,EAAE,mBAAmB,iBAAiB,iBAAiB;EAC3D;EACA;EACA,GAAG;CACL,CAAC;CAED,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI,aAAa;~~YAA7B~~,CACE,oBAAC,yBAAD,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,UACnC,oBAAC,wBAAD,EAEE,GAAI,kBAAkB;GAAE;GAAO,GAAG;EAAe,CAAC,EACnD,GAFM,KAEN,CACF,EACsB,CAAA,GAExB,aAAa,QACZ,oBAAC,oBAAD,EAAA,UAAqB,MAA0B,CAAA,IAC7C,IACM;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAM,0BAA0B,YAG9B,OAAO,YAAY,CAAC,CAAC;AAIvB,MAAM,yBAAyB,YAC7B,OACA,WACF,CAAC,CAAC;AAIF,MAAM,qBAAqB,YACzB,QACA,OACF,CAAC,CAAC"}
1	+ {"version":3,"file":"strength-meter.js","names":[],"sources":["../../../../src/components/password-input/strength-meter.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps } from \"../../core\"\nimport type { StrengthMeterStyle } from \"./strength-meter.style\"\nimport type { UseStrengthMeterProps } from \"./use-strength-meter\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { strengthMeterStyle } from \"./strength-meter.style\"\nimport { useStrengthMeter } from \"./use-strength-meter\"\n\ninterface IndicatorProps extends HTMLStyledProps {\n label?: ReactNode\n}\n\nexport interface StrengthMeterProps\n extends HTMLStyledProps, UseStrengthMeterProps {\n /*\n If `true`, the password strength meter will display the label.\n \n @default true\n /\n withLabel?: boolean\n /\n The props of the password strength meter indicator.\n /\n getIndicatorProps?: (percent: number) => IndicatorProps\n}\n\nconst {\n PropsContext: StrengthMeterPropsContext,\n usePropsContext: useStrengthMeterPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StrengthMeterProps, StrengthMeterStyle>(\n \"strength-meter\",\n strengthMeterStyle,\n)\n\nexport { StrengthMeterPropsContext, useStrengthMeterPropsContext }\n\nexport const StrengthMeter = withProvider<\"div\", StrengthMeterProps>(\n ({\n max = 4,\n value,\n withLabel = true,\n getIndicatorProps: getCustomIndicatorProps,\n ...rest\n }) => {\n const percent = (value / max) 100\n\n const getDefaultIndicatorProps = (percent: number): IndicatorProps => {\n switch (true) {\n case percent < 33:\n return { label: \"Low\", _selected: { bg: \"red.500\" } }\n case percent < 66:\n return { label: \"Medium\", _selected: { bg: \"orange.500\" } }\n default:\n return { label: \"High\", _selected: { bg: \"green.500\" } }\n }\n }\n\n getCustomIndicatorProps ??= getDefaultIndicatorProps\n\n const { label, ...indicatorProps } = getCustomIndicatorProps(percent)\n\n const { getIndicatorProps, getRootProps } = useStrengthMeter({\n max,\n value,\n ...rest,\n })\n\n return (\n <styled.div {...getRootProps()}>\n <StrengthMeterIndicators>\n {Array.from({ length: max }).map((_, index) => (\n <StrengthMeterIndicator\n key={index}\n {...getIndicatorProps({ index, ...indicatorProps })}\n />\n ))}\n </StrengthMeterIndicators>\n\n {withLabel && label ? (\n <StrengthMeterLabel>{label}</StrengthMeterLabel>\n ) : null}\n </styled.div>\n )\n },\n \"root\",\n)()\n\ninterface StrengthMeterIndicatorsProps extends HTMLStyledProps {}\n\nconst StrengthMeterIndicators = withContext<\n \"div\",\n StrengthMeterIndicatorsProps\n>(\"div\", \"indicators\")()\n\ninterface StrengthMeterIndicatorProps extends HTMLStyledProps {}\n\nconst StrengthMeterIndicator = withContext<\"div\", StrengthMeterIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\ninterface StrengthMeterLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst StrengthMeterLabel = withContext<\"span\", StrengthMeterLabelProps>(\n \"span\",\n \"label\",\n)()\n"],"mappings":";;;;;;;AA4BA,MAAM,EACJ,cAAc,2BACd,iBAAiB,8BACjB,aACA,iBACE,oBACF,kBACA,kBACF;AAIA,MAAa,gBAAgB,cAC1B,EACC,MAAM,GACN,OACA,YAAY,MACZ,mBAAmB,yBACnB,GAAG,WACC;CACJ,MAAM,UAAW,QAAQ,MAAO;CAEhC,MAAM,4BAA4B,YAAoC;EACpE,QAAQ,MAAR;GACE,KAAK,UAAU,IACb,OAAO;IAAE,OAAO;IAAO,WAAW,EAAE,IAAI,UAAU;GAAE;GACtD,KAAK,UAAU,IACb,OAAO;IAAE,OAAO;IAAU,WAAW,EAAE,IAAI,aAAa;GAAE;GAC5D,SACE,OAAO;IAAE,OAAO;IAAQ,WAAW,EAAE,IAAI,YAAY;GAAE;EAC3D;CACF;CAEA,4BAA4B;CAE5B,MAAM,EAAE,OAAO,GAAG,mBAAmB,wBAAwB,OAAO;CAEpE,MAAM,EAAE,mBAAmB,iBAAiB,iBAAiB;EAC3D;EACA;EACA,GAAG;CACL,CAAC;CAED,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI,aAAa;EAA7B,UAAA,CACE,oBAAC,yBAAD,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,UACnC,oBAAC,wBAAD,EAEE,GAAI,kBAAkB;GAAE;GAAO,GAAG;EAAe,CAAC,EACnD,GAFM,KAEN,CACF,EACsB,CAAA,GAExB,aAAa,QACZ,oBAAC,oBAAD,EAAA,UAAqB,MAA0B,CAAA,IAC7C,IACM;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAM,0BAA0B,YAG9B,OAAO,YAAY,CAAC,CAAC;AAIvB,MAAM,yBAAyB,YAC7B,OACA,WACF,CAAC,CAAC;AAIF,MAAM,qBAAqB,YACzB,QACA,OACF,CAAC,CAAC"}

package/dist/esm/components/picture/picture.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"picture.js","names":[],"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":";;;;;;;;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,SAAS,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,iBAAiB,aACpB,GAAkB,MAAqB;EACtC,MAAM,IAAI,cAAc,SAAS,SAAS;EAE1C,KAAA,GAAA,cAAA,YAAA,CAAgB,EAAE,EAAE,KAAK,EAAA,GAAA,cAAA,YAAA,CAAa,EAAE,EAAE,GAAG,OAAO;EAEpD,IAAI,EAAA,GAAA,cAAA,YAAA,CAAa,EAAE,EAAE,MAAA,GAAA,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,UAAU,cAAc;EAC5B,MAAM,kBAAkB,YAAY,KACjC,EAAE,MAAM,OAAO,MAAM,GAAG,WAAW;GAClC,IAAI,CAAC,OAAO;IACV,IAAI,MAAM,QAAA,GAAA,cAAA,MAAA,CAAa,aAAa,MAAM,CAAC,CAAC,SAAS,IAAI,CAAC;IAC1D,IAAI,MAAM,QAAA,GAAA,cAAA,MAAA,CAAa,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,eAAe,OAAO,gBAAgB,KAAK,cAAc;OACxD,OAAO;CACd,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,cAEnB,QAAQ,KAAK,EAAE,MAAM,OAAO,MAAM,OAAO,GAAG,QAAQ,UAClD,oBAAC,OAAO,QAAR,EAA2B,GAAI,KAAO,GAAlB,KAAkB,CACvC,GACH,CAAC,OAAO,CACV;CAEA,OACE,oBAAC,OAAO,SAAR;EAAgB,GAAI;~~YACjB~~,YACC,qBAAA,YAAA,EAAA,UAAA,CACG,gBAED,oBAAC,OAAD,EAAO,GAAI,KAAO,CAAA,CAClB,EAAA,CAAA;CAEU,CAAA;AAEpB;AASA,MAAa,UAA2B,EAAE,OAAO,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,WAAW,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,oBAAC,OAAO,QAAR;EAAsB;EAAO,GAAI;CAAO,CAAA;AACjD"}
1	+ {"version":3,"file":"picture.js","names":[],"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":";;;;;;;;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,SAAS,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,iBAAiB,aACpB,GAAkB,MAAqB;EACtC,MAAM,IAAI,cAAc,SAAS,SAAS;EAE1C,KAAA,GAAA,cAAA,YAAA,CAAgB,EAAE,EAAE,KAAK,EAAA,GAAA,cAAA,YAAA,CAAa,EAAE,EAAE,GAAG,OAAO;EAEpD,IAAI,EAAA,GAAA,cAAA,YAAA,CAAa,EAAE,EAAE,MAAA,GAAA,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,UAAU,cAAc;EAC5B,MAAM,kBAAkB,YAAY,KACjC,EAAE,MAAM,OAAO,MAAM,GAAG,WAAW;GAClC,IAAI,CAAC,OAAO;IACV,IAAI,MAAM,QAAA,GAAA,cAAA,MAAA,CAAa,aAAa,MAAM,CAAC,CAAC,SAAS,IAAI,CAAC;IAC1D,IAAI,MAAM,QAAA,GAAA,cAAA,MAAA,CAAa,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,eAAe,OAAO,gBAAgB,KAAK,cAAc;OACxD,OAAO;CACd,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,cAEnB,QAAQ,KAAK,EAAE,MAAM,OAAO,MAAM,OAAO,GAAG,QAAQ,UAClD,oBAAC,OAAO,QAAR,EAA2B,GAAI,KAAO,GAAlB,KAAkB,CACvC,GACH,CAAC,OAAO,CACV;CAEA,OACE,oBAAC,OAAO,SAAR;EAAgB,GAAI;EACjB,UAAA,YACC,qBAAA,YAAA,EAAA,UAAA,CACG,gBAED,oBAAC,OAAD,EAAO,GAAI,KAAO,CAAA,CAClB,EAAA,CAAA;CAEU,CAAA;AAEpB;AASA,MAAa,UAA2B,EAAE,OAAO,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,WAAW,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,oBAAC,OAAO,QAAR;EAAsB;EAAO,GAAI;CAAO,CAAA;AACjD"}

package/dist/esm/components/pin-input/pin-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pin-input.js","names":[],"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,iBACE,oBACF,aACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,OAAO,eAAe,iBACzC,YAAY,IAAI;CAClB,MAAM,gBAAgB,cAAc;EAClC,MAAM,gBAAgB,iBAAiB,QAAQ;EAE/C,IAAI,cAAc,QAAQ,OAAO;OAE/B,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACvC,oBAAC,eAAD,EAAkC,MAAQ,GAAtB,KAAsB,CAC3C;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,UAAU,eACP;EAAE;EAAkB;EAAkB;CAAc,IAC3D;EAAC;EAAe;EAAkB;CAAgB,CACpD;CAEA,OACE,oBAAC,4BAAD;EAA4B,OAAO;~~YACjC~~,oBAAC,kBAAD;GAAkB,OAAO;~~aACvB~~,oBAAC,OAAD;IAAO,GAAI,aAAa;~~cAAI~~;GAAqB,CAAA;EACjC,CAAA;CACQ,CAAA;AAEhC,GACA,MACF,CAAC,CAAC;AASF,MAAa,gBAAgB,YAC3B,OACA,OACF,CAAC,CAAC,KAAA,IAAY,EAAE,KAAK,OAAO,GAAG,WAAW;CACxC,MAAM,EAAE,kBAAkB,kBAAkB,kBAC1C,oBAAoB;CACtB,MAAM,EAAE,aAAa,sBAAsB;CAC3C,MAAM,EAAE,OAAO,WAAW,WAAW,eAAe,cAAc,IAAI;CAEtE,OAAO,EACL,GAAG,cAAc;EACf;EACA;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAK,UAAU,UAAU,GAAG;EAC5B;CACF,CAAC,EACH;AACF,CAAC"}
1	+ {"version":3,"file":"pin-input.js","names":[],"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,iBACE,oBACF,aACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,OAAO,eAAe,iBACzC,YAAY,IAAI;CAClB,MAAM,gBAAgB,cAAc;EAClC,MAAM,gBAAgB,iBAAiB,QAAQ;EAE/C,IAAI,cAAc,QAAQ,OAAO;OAE/B,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACvC,oBAAC,eAAD,EAAkC,MAAQ,GAAtB,KAAsB,CAC3C;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,UAAU,eACP;EAAE;EAAkB;EAAkB;CAAc,IAC3D;EAAC;EAAe;EAAkB;CAAgB,CACpD;CAEA,OACE,oBAAC,4BAAD;EAA4B,OAAO;EACjC,UAAA,oBAAC,kBAAD;GAAkB,OAAO;GACvB,UAAA,oBAAC,OAAD;IAAO,GAAI,aAAa;IAAI,UAAA;GAAqB,CAAA;EACjC,CAAA;CACQ,CAAA;AAEhC,GACA,MACF,CAAC,CAAC;AASF,MAAa,gBAAgB,YAC3B,OACA,OACF,CAAC,CAAC,KAAA,IAAY,EAAE,KAAK,OAAO,GAAG,WAAW;CACxC,MAAM,EAAE,kBAAkB,kBAAkB,kBAC1C,oBAAoB;CACtB,MAAM,EAAE,aAAa,sBAAsB;CAC3C,MAAM,EAAE,OAAO,WAAW,WAAW,eAAe,cAAc,IAAI;CAEtE,OAAO,EACL,GAAG,cAAc;EACf;EACA;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAK,UAAU,UAAU,GAAG;EAC5B;CACF,CAAC,EACH;AACF,CAAC"}