@economic/taco 11.0.0 → 11.0.1-react-v19.0

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isPressingMetaKey } from '../../utils/keyboard';\nimport type { IconName } from '../Icon/Icon';\nimport { Icon } from '../Icon/Icon';\n\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = new Set(['text', 'search', 'url', 'tel', 'password']);\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    // input[type=number] does not support setSelectionRange by default, this adds support\n    React.useLayoutEffect(() => {\n        if (internalRef.current && type === 'number') {\n            (function (fn) {\n                internalRef.current.setSelectionRange = function (...args) {\n                    if (this.type === 'number') {\n                        this.type = 'text';\n                        fn.apply(this, args);\n                        this.type = 'number';\n                    } else {\n                        fn.apply(this, args);\n                    }\n                };\n            })(internalRef.current.setSelectionRange);\n        }\n    }, []);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.has(type) && !event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n\n            // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows\n            if (internalRef.current) {\n                const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;\n                internalRef.current.scrollLeft = scrollPosition;\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    if (type === 'number') {\n        typeAttributes.onWheelCapture = (event: React.WheelEvent<HTMLInputElement>) => {\n            // blur is the only way to prevent scroll, so restore focus if it had it\n            if (document.activeElement === event.currentTarget) {\n                requestAnimationFrame(() => {\n                    (event.target as HTMLInputElement).focus();\n                });\n            }\n            // blur the field on scroll - only way to prevent scroll\n            event.currentTarget.blur();\n        };\n    }\n\n    return (\n        <div className=\"relative inline-flex h-fit w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                aria-invalid={invalid}\n                className={className}\n                data-highlighted={highlighted}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-gray-300': disabled,\n                        'text-gray-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'flex h-full items-center justify-center rounded-l-none rounded-r focus:z-10 focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["React","InputWithoutDeprecatedFeatures","useMergedRef","isPressingMetaKey","useBoundingClientRectListener","getInputClasses","Affix","getButtonStateClasses","Icon"],"mappings":"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"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isPressingMetaKey } from '../../utils/keyboard';\nimport type { IconName } from '../Icon/Icon';\nimport { Icon } from '../Icon/Icon';\n\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | React.JSX.Element;\n    prefix?: string | React.JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = new Set(['text', 'search', 'url', 'tel', 'password']);\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    // input[type=number] does not support setSelectionRange by default, this adds support\n    React.useLayoutEffect(() => {\n        if (internalRef.current && type === 'number') {\n            (function (fn) {\n                internalRef.current.setSelectionRange = function (...args) {\n                    if (this.type === 'number') {\n                        this.type = 'text';\n                        fn.apply(this, args);\n                        this.type = 'number';\n                    } else {\n                        fn.apply(this, args);\n                    }\n                };\n            })(internalRef.current.setSelectionRange);\n        }\n    }, []);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.has(type) && !event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n\n            // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows\n            if (internalRef.current) {\n                const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;\n                internalRef.current.scrollLeft = scrollPosition;\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    if (type === 'number') {\n        typeAttributes.onWheelCapture = (event: React.WheelEvent<HTMLInputElement>) => {\n            // blur is the only way to prevent scroll, so restore focus if it had it\n            if (document.activeElement === event.currentTarget) {\n                requestAnimationFrame(() => {\n                    (event.target as HTMLInputElement).focus();\n                });\n            }\n            // blur the field on scroll - only way to prevent scroll\n            event.currentTarget.blur();\n        };\n    }\n\n    return (\n        <div className=\"relative inline-flex h-fit w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                aria-invalid={invalid}\n                className={className}\n                data-highlighted={highlighted}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | React.JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-gray-300': disabled,\n                        'text-gray-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement<{ className?: string; disabled?: boolean }>;\n    /** Shows an icon within the input field  */\n    icon?: IconName | React.JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'flex h-full items-center justify-center rounded-l-none rounded-r focus:z-10 focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["React","InputWithoutDeprecatedFeatures","useMergedRef","isPressingMetaKey","useBoundingClientRectListener","getInputClasses","Affix","getButtonStateClasses","Icon"],"mappings":"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"}

package/dist/components/Input/Input.d.ts

@@ -5,25 +5,31 @@ export type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes
     highlighted?: boolean;
     /** Whether the input is in an invalid state */
     invalid?: boolean;
-    postfix?: string | JSX.Element;
-    prefix?: string | JSX.Element;
+    postfix?: string | React.JSX.Element;
+    prefix?: string | React.JSX.Element;
 };
 export type InputProps = InputWithoutDeprecatedFeaturesProps & {
     /** Shows a button within the input field */
-    button?: React.ReactElement;
+    button?: React.ReactElement<{
+        className?: string;
+        disabled?: boolean;
+    }>;
     /** Shows an icon within the input field  */
-    icon?: IconName | JSX.Element;
+    icon?: IconName | React.JSX.Element;
 };
 export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> & {
     /** Draws attention to the input by changing its style and making it visually prominent */
     highlighted?: boolean;
     /** Whether the input is in an invalid state */
     invalid?: boolean;
-    postfix?: string | JSX.Element;
-    prefix?: string | JSX.Element;
+    postfix?: string | React.JSX.Element;
+    prefix?: string | React.JSX.Element;
 } & {
     /** Shows a button within the input field */
-    button?: React.ReactElement;
+    button?: React.ReactElement<{
+        className?: string;
+        disabled?: boolean;
+    }>;
     /** Shows an icon within the input field  */
-    icon?: IconName | JSX.Element;
+    icon?: IconName | React.JSX.Element;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isPressingMetaKey } from '../../utils/keyboard';\nimport type { IconName } from '../Icon/Icon';\nimport { Icon } from '../Icon/Icon';\n\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = new Set(['text', 'search', 'url', 'tel', 'password']);\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    // input[type=number] does not support setSelectionRange by default, this adds support\n    React.useLayoutEffect(() => {\n        if (internalRef.current && type === 'number') {\n            (function (fn) {\n                internalRef.current.setSelectionRange = function (...args) {\n                    if (this.type === 'number') {\n                        this.type = 'text';\n                        fn.apply(this, args);\n                        this.type = 'number';\n                    } else {\n                        fn.apply(this, args);\n                    }\n                };\n            })(internalRef.current.setSelectionRange);\n        }\n    }, []);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.has(type) && !event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n\n            // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows\n            if (internalRef.current) {\n                const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;\n                internalRef.current.scrollLeft = scrollPosition;\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    if (type === 'number') {\n        typeAttributes.onWheelCapture = (event: React.WheelEvent<HTMLInputElement>) => {\n            // blur is the only way to prevent scroll, so restore focus if it had it\n            if (document.activeElement === event.currentTarget) {\n                requestAnimationFrame(() => {\n                    (event.target as HTMLInputElement).focus();\n                });\n            }\n            // blur the field on scroll - only way to prevent scroll\n            event.currentTarget.blur();\n        };\n    }\n\n    return (\n        <div className=\"relative inline-flex h-fit w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                aria-invalid={invalid}\n                className={className}\n                data-highlighted={highlighted}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-gray-300': disabled,\n                        'text-gray-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'flex h-full items-center justify-center rounded-l-none rounded-r focus:z-10 focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["InputWithoutDeprecatedFeatures","Affix"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isPressingMetaKey } from '../../utils/keyboard';\nimport type { IconName } from '../Icon/Icon';\nimport { Icon } from '../Icon/Icon';\n\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | React.JSX.Element;\n    prefix?: string | React.JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = new Set(['text', 'search', 'url', 'tel', 'password']);\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    // input[type=number] does not support setSelectionRange by default, this adds support\n    React.useLayoutEffect(() => {\n        if (internalRef.current && type === 'number') {\n            (function (fn) {\n                internalRef.current.setSelectionRange = function (...args) {\n                    if (this.type === 'number') {\n                        this.type = 'text';\n                        fn.apply(this, args);\n                        this.type = 'number';\n                    } else {\n                        fn.apply(this, args);\n                    }\n                };\n            })(internalRef.current.setSelectionRange);\n        }\n    }, []);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.has(type) && !event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n\n            // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows\n            if (internalRef.current) {\n                const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;\n                internalRef.current.scrollLeft = scrollPosition;\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    if (type === 'number') {\n        typeAttributes.onWheelCapture = (event: React.WheelEvent<HTMLInputElement>) => {\n            // blur is the only way to prevent scroll, so restore focus if it had it\n            if (document.activeElement === event.currentTarget) {\n                requestAnimationFrame(() => {\n                    (event.target as HTMLInputElement).focus();\n                });\n            }\n            // blur the field on scroll - only way to prevent scroll\n            event.currentTarget.blur();\n        };\n    }\n\n    return (\n        <div className=\"relative inline-flex h-fit w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                aria-invalid={invalid}\n                className={className}\n                data-highlighted={highlighted}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | React.JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-gray-300': disabled,\n                        'text-gray-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement<{ className?: string; disabled?: boolean }>;\n    /** Shows an icon within the input field  */\n    icon?: IconName | React.JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'flex h-full items-center justify-center rounded-l-none rounded-r focus:z-10 focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["InputWithoutDeprecatedFeatures","Affix"],"mappings":"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"}

package/dist/components/LegacyComponents/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { DrawerProps } from '../../Drawer/Drawer';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\n\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\n\nimport './Button.css';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyButtonBase","getButtonClasses","APPEARANCE_CLASSNAME","createButtonWithTooltip","LegacyButton","Icon","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAM,mBAAmBA,iBAAM,WAAW,SAASC,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACdC,sBAAA;AAAA,IACAC,KAAAA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAOC,KAAAA;AAAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAeJ,iBAAM,WAAW,SAASK,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAUL,iCAAA,cAACM,KAAAA,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAUN,iCAAA,cAACM,aAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACFN,iCAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { DrawerProps } from '../../Drawer/Drawer';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\n\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\n\nimport './Button.css';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyButtonBase","getButtonClasses","APPEARANCE_CLASSNAME","createButtonWithTooltip","LegacyButton","Icon","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAM,mBAAmBA,iBAAM,WAAW,SAASC,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACdC,sBAAA;AAAA,IACAC,KAAAA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAOC,KAAAA;AAAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAeJ,iBAAM,WAAW,SAASK,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAUL,iCAAA,cAACM,KAAAA,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAUN,iCAAA,cAACM,aAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACFN,iCAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;;"}

package/dist/components/LegacyComponents/Button/Button.d.ts

@@ -17,32 +17,32 @@ export type LegacyButtonProps = ButtonPrimitive.ButtonProps & {
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated dialog when clicked.
      */
-    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /**
      * Drawer component associated with the button, clicking the button will open the drawer.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated drawer when clicked.
      */
-    drawer?: (props: Partial<DrawerProps>) => JSX.Element;
+    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;
     /** If fluid, button expands to the width of it's container */
     fluid?: boolean;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.JSX.Element;
     /**
      * Popover component associated with the button, clicking the button will open the popover.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated popover when clicked.
      */
-    popover?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 };
 /**
  * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.
  */
-export declare const LegacyButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
+export declare const LegacyButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, "popover"> & {
     children: React.ReactNode;
     href?: string;
     shortcut?: string | import('../../..').KeyDownHandlerOptions;
@@ -55,25 +55,25 @@ export declare const LegacyButton: React.ForwardRefExoticComponent<React.ButtonH
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated dialog when clicked.
      */
-    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /**
      * Drawer component associated with the button, clicking the button will open the drawer.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated drawer when clicked.
      */
-    drawer?: (props: Partial<DrawerProps>) => JSX.Element;
+    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;
     /** If fluid, button expands to the width of it's container */
     fluid?: boolean;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.JSX.Element;
     /**
      * Popover component associated with the button, clicking the button will open the popover.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated popover when clicked.
      */
-    popover?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/LegacyComponents/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { DrawerProps } from '../../Drawer/Drawer';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\n\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\n\nimport './Button.css';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["LegacyButtonBase","LegacyButton"],"mappings":";;;;;AAkDA,MAAM,mBAAmB,MAAM,WAAW,SAASA,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACd,iBAAA;AAAA,IACA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAO;AAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAe,MAAM,WAAW,SAASC,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAU,sBAAA,cAAC,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAU,sBAAA,cAAC,QAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACF,sBAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { DrawerProps } from '../../Drawer/Drawer';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\n\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\n\nimport './Button.css';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["LegacyButtonBase","LegacyButton"],"mappings":";;;;;AAkDA,MAAM,mBAAmB,MAAM,WAAW,SAASA,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACd,iBAAA;AAAA,IACA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAO;AAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAe,MAAM,WAAW,SAASC,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAU,sBAAA,cAAC,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAU,sBAAA,cAAC,QAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACF,sBAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;"}

package/dist/components/LegacyComponents/Button/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../../src/components/LegacyComponents/Button/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport { Tooltip } from '../../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'bg-blue-500 text-white visited:bg-blue-500 visited:text-white hover:bg-blue-700 hover:text-white hover:active:bg-blue-500 hover:active:text-white focus-visible:bg-blue-500 focus-visible:text-white aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'bg-red-500 text-white visited:bg-red-500 visited:text-white hover:bg-red-700 hover:text-white hover:active:bg-red-500 hover:active:text-white focus-visible:bg-red-500 focus-visible:text-white aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'bg-gray-100 text-black visited:bg-gray-200 visited:text-black hover:bg-gray-200 hover:text-black focus-visible:bg-gray-200 text-black aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","Tooltip"],"mappings":";;;;;AAMO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACc;AACd,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,6CAAUA,OAAAA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAA4B;AAC7E,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;;;;;;"}
+{"version":3,"file":"util.cjs","sources":["../../../../src/components/LegacyComponents/Button/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport { Tooltip } from '../../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'bg-blue-500 text-white visited:bg-blue-500 visited:text-white hover:bg-blue-700 hover:text-white hover:active:bg-blue-500 hover:active:text-white focus-visible:bg-blue-500 focus-visible:text-white aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'bg-red-500 text-white visited:bg-red-500 visited:text-white hover:bg-red-700 hover:text-white hover:active:bg-red-500 hover:active:text-white focus-visible:bg-red-500 focus-visible:text-white aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'bg-gray-100 text-black visited:bg-gray-200 visited:text-black hover:bg-gray-200 hover:text-black focus-visible:bg-gray-200 text-black aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): React.JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: React.JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","Tooltip"],"mappings":";;;;;AAMO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACoB;AACpB,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,6CAAUA,OAAAA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAAkC;AACnF,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;;;;;;"}

package/dist/components/LegacyComponents/Button/util.d.ts

@@ -3,5 +3,5 @@ import { Appearance } from '../../../types';
 export declare const getButtonClasses: () => string;
 export declare const APPEARANCE_CLASSNAME: Record<Appearance, string>;
 export declare const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string>;
-export declare const createButtonWithTooltip: (props: any, className: string, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => JSX.Element;
-export declare const createButtonWithOverlays: (props: any, buttonBase: JSX.Element) => JSX.Element;
+export declare const createButtonWithTooltip: (props: any, className: string, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => React.JSX.Element;
+export declare const createButtonWithOverlays: (props: any, buttonBase: React.JSX.Element) => React.JSX.Element;

package/dist/components/LegacyComponents/Button/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/LegacyComponents/Button/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport { Tooltip } from '../../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'bg-blue-500 text-white visited:bg-blue-500 visited:text-white hover:bg-blue-700 hover:text-white hover:active:bg-blue-500 hover:active:text-white focus-visible:bg-blue-500 focus-visible:text-white aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'bg-red-500 text-white visited:bg-red-500 visited:text-white hover:bg-red-700 hover:text-white hover:active:bg-red-500 hover:active:text-white focus-visible:bg-red-500 focus-visible:text-white aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'bg-gray-100 text-black visited:bg-gray-200 visited:text-black hover:bg-gray-200 hover:text-black focus-visible:bg-gray-200 text-black aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","React"],"mappings":";;;AAMO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACc;AACd,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,sDAAUA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAOC,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAA4B;AAC7E,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/LegacyComponents/Button/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport { Tooltip } from '../../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'bg-blue-500 text-white visited:bg-blue-500 visited:text-white hover:bg-blue-700 hover:text-white hover:active:bg-blue-500 hover:active:text-white focus-visible:bg-blue-500 focus-visible:text-white aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'bg-red-500 text-white visited:bg-red-500 visited:text-white hover:bg-red-700 hover:text-white hover:active:bg-red-500 hover:active:text-white focus-visible:bg-red-500 focus-visible:text-white aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'bg-gray-100 text-black visited:bg-gray-200 visited:text-black hover:bg-gray-200 hover:text-black focus-visible:bg-gray-200 text-black aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): React.JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: React.JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","React"],"mappings":";;;AAMO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACoB;AACpB,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,sDAAUA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAOC,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAAkC;AACnF,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;"}

package/dist/components/LegacyComponents/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyIconButtonBase","getButtonClasses","ICON_APPEARANCE_CLASSNAME","createButtonWithTooltip","Icon","LegacyIconButton","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDO,MAAM,uBAAuBA,iBAAM,WAAW,SAASC,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACAC,sBAAA;AAAA,IACAC,KAAAA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAOC,KAAAA;AAAAA;AAAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAUJ,iCAAA,cAACK,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmBL,iBAAM,WAAW,SAASM,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAASN,iCAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyIconButtonBase","getButtonClasses","ICON_APPEARANCE_CLASSNAME","createButtonWithTooltip","Icon","LegacyIconButton","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDO,MAAM,uBAAuBA,iBAAM,WAAW,SAASC,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACAC,sBAAA;AAAA,IACAC,KAAAA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAOC,KAAAA;AAAAA;AAAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAUJ,iCAAA,cAACK,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmBL,iBAAM,WAAW,SAASM,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAASN,iCAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;;;"}

package/dist/components/LegacyComponents/IconButton/IconButton.d.ts

@@ -17,26 +17,26 @@ export type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated dialog when clicked.
      */
-    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Set which icon should be rendered within button */
     icon: IconName;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.JSX.Element;
     /**
      * Popover component associated with the button, clicking the button will open the popover.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated popover when clicked.
      */
-    popover?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /**
      * Set whether the button is rounded.
      * Default value is `false`
      */
     rounded?: boolean;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 };
 /**
  * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.
@@ -49,26 +49,26 @@ export declare const LegacyIconButtonBase: React.ForwardRefExoticComponent<Omit<
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated dialog when clicked.
      */
-    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Set which icon should be rendered within button */
     icon: IconName;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.JSX.Element;
     /**
      * Popover component associated with the button, clicking the button will open the popover.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated popover when clicked.
      */
-    popover?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /**
      * Set whether the button is rounded.
      * Default value is `false`
      */
     rounded?: boolean;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 /**
  * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.
@@ -81,24 +81,24 @@ export declare const LegacyIconButton: React.ForwardRefExoticComponent<Omit<Butt
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated dialog when clicked.
      */
-    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Set which icon should be rendered within button */
     icon: IconName;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.JSX.Element;
     /**
      * Popover component associated with the button, clicking the button will open the popover.
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated popover when clicked.
      */
-    popover?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /**
      * Set whether the button is rounded.
      * Default value is `false`
      */
     rounded?: boolean;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/LegacyComponents/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["LegacyIconButtonBase","LegacyIconButton"],"mappings":";;;;AAiDO,MAAM,uBAAuB,MAAM,WAAW,SAASA,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,iBAAA;AAAA,IACA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAO;AAAA;AAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAU,sBAAA,cAAC,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmB,MAAM,WAAW,SAASC,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAAS,sBAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["LegacyIconButtonBase","LegacyIconButton"],"mappings":";;;;AAiDO,MAAM,uBAAuB,MAAM,WAAW,SAASA,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,iBAAA;AAAA,IACA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAO;AAAA;AAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAU,sBAAA,cAAC,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmB,MAAM,WAAW,SAASC,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAAS,sBAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;"}

package/dist/components/List/List.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from './components/Button';\nimport { Collapsible } from './components/Collapsible';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Checkbox, Switch } from './components/Toggle';\n\nimport './List.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** One or more of List.Button, List.Link, List.Collapsible, List.Checkbox, List.Switch or List.Group */\n    children: JSX.Element | (JSX.Element | boolean | null | undefined)[];\n};\n\nexport function List(props: ListProps) {\n    return <div {...props} data-taco=\"list\" />;\n}\n\nList.Button = Button;\nList.Link = Link;\nList.Collapsible = Collapsible;\nList.Switch = Switch;\nList.Checkbox = Checkbox;\nList.Group = Group;\n\nexport type { ListButtonProps } from './components/Button';\nexport type { ListLinkProps } from './components/Link';\nexport type { ListCollapsibleProps } from './components/Collapsible';\nexport type { ListGroupProps } from './components/Group';\nexport type { ListSwitchProps, ListCheckboxProps } from './components/Toggle';\n"],"names":["Button","Link","Collapsible","Switch","Checkbox","Group"],"mappings":";;;;;;;;;AAeO,SAAS,KAAK,OAAkB;AACnC,SAAO,sBAAA,cAAC,OAAA,EAAK,GAAG,OAAO,aAAU,QAAO;AAC5C;AAEA,KAAK,SAASA,OAAAA;AACd,KAAK,OAAOC,KAAAA;AACZ,KAAK,cAAcC,YAAAA;AACnB,KAAK,SAASC,OAAAA;AACd,KAAK,WAAWC,OAAAA;AAChB,KAAK,QAAQC,MAAAA;;"}
+{"version":3,"file":"List.cjs","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from './components/Button';\nimport { Collapsible } from './components/Collapsible';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Checkbox, Switch } from './components/Toggle';\n\nimport './List.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** One or more of List.Button, List.Link, List.Collapsible, List.Checkbox, List.Switch or List.Group */\n    children: React.JSX.Element | (React.JSX.Element | boolean | null | undefined)[];\n};\n\nexport function List(props: ListProps) {\n    return <div {...props} data-taco=\"list\" />;\n}\n\nList.Button = Button;\nList.Link = Link;\nList.Collapsible = Collapsible;\nList.Switch = Switch;\nList.Checkbox = Checkbox;\nList.Group = Group;\n\nexport type { ListButtonProps } from './components/Button';\nexport type { ListLinkProps } from './components/Link';\nexport type { ListCollapsibleProps } from './components/Collapsible';\nexport type { ListGroupProps } from './components/Group';\nexport type { ListSwitchProps, ListCheckboxProps } from './components/Toggle';\n"],"names":["Button","Link","Collapsible","Switch","Checkbox","Group"],"mappings":";;;;;;;;;AAeO,SAAS,KAAK,OAAkB;AACnC,SAAO,sBAAA,cAAC,OAAA,EAAK,GAAG,OAAO,aAAU,QAAO;AAC5C;AAEA,KAAK,SAASA,OAAAA;AACd,KAAK,OAAOC,KAAAA;AACZ,KAAK,cAAcC,YAAAA;AACnB,KAAK,SAASC,OAAAA;AACd,KAAK,WAAWC,OAAAA;AAChB,KAAK,QAAQC,MAAAA;;"}

package/dist/components/List/List.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 export type ListProps = React.HTMLAttributes<HTMLDivElement> & {
     /** One or more of List.Button, List.Link, List.Collapsible, List.Checkbox, List.Switch or List.Group */
-    children: JSX.Element | (JSX.Element | boolean | null | undefined)[];
+    children: React.JSX.Element | (React.JSX.Element | boolean | null | undefined)[];
 };
 export declare function List(props: ListProps): React.JSX.Element;
 export declare namespace List {
@@ -12,7 +12,7 @@ export declare namespace List {
         href: string;
     } & React.RefAttributes<HTMLAnchorElement>>;
     var Collapsible: React.ForwardRefExoticComponent<Omit<import("./components/Item").ComposableListItemProps<React.ForwardRefExoticComponent<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>>, "children"> & {
-        children: JSX.Element | JSX.Element[];
+        children: React.JSX.Element | React.JSX.Element[];
         defaultOpen?: boolean;
     } & React.RefAttributes<HTMLDivElement>>;
     var Switch: React.ForwardRefExoticComponent<import("./components/Item").ComposableListItemProps<"div"> & Omit<import("..").ControlledSwitchProps, "title"> & React.RefAttributes<HTMLDivElement>>;
@@ -27,7 +27,7 @@ export declare namespace List {
         required?: boolean;
     } & React.RefAttributes<HTMLDivElement>>;
     var Group: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-        children: JSX.Element | JSX.Element[];
+        children: React.JSX.Element | React.JSX.Element[];
     } & React.RefAttributes<HTMLDivElement>>;
 }
 export type { ListButtonProps } from './components/Button';

package/dist/components/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from './components/Button';\nimport { Collapsible } from './components/Collapsible';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Checkbox, Switch } from './components/Toggle';\n\nimport './List.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** One or more of List.Button, List.Link, List.Collapsible, List.Checkbox, List.Switch or List.Group */\n    children: JSX.Element | (JSX.Element | boolean | null | undefined)[];\n};\n\nexport function List(props: ListProps) {\n    return <div {...props} data-taco=\"list\" />;\n}\n\nList.Button = Button;\nList.Link = Link;\nList.Collapsible = Collapsible;\nList.Switch = Switch;\nList.Checkbox = Checkbox;\nList.Group = Group;\n\nexport type { ListButtonProps } from './components/Button';\nexport type { ListLinkProps } from './components/Link';\nexport type { ListCollapsibleProps } from './components/Collapsible';\nexport type { ListGroupProps } from './components/Group';\nexport type { ListSwitchProps, ListCheckboxProps } from './components/Toggle';\n"],"names":["React"],"mappings":";;;;;;;AAeO,SAAS,KAAK,OAAkB;AACnC,SAAOA,+BAAA,cAAC,OAAA,EAAK,GAAG,OAAO,aAAU,QAAO;AAC5C;AAEA,KAAK,SAAS;AACd,KAAK,OAAO;AACZ,KAAK,cAAc;AACnB,KAAK,SAAS;AACd,KAAK,WAAW;AAChB,KAAK,QAAQ;"}
+{"version":3,"file":"List.js","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from './components/Button';\nimport { Collapsible } from './components/Collapsible';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Checkbox, Switch } from './components/Toggle';\n\nimport './List.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** One or more of List.Button, List.Link, List.Collapsible, List.Checkbox, List.Switch or List.Group */\n    children: React.JSX.Element | (React.JSX.Element | boolean | null | undefined)[];\n};\n\nexport function List(props: ListProps) {\n    return <div {...props} data-taco=\"list\" />;\n}\n\nList.Button = Button;\nList.Link = Link;\nList.Collapsible = Collapsible;\nList.Switch = Switch;\nList.Checkbox = Checkbox;\nList.Group = Group;\n\nexport type { ListButtonProps } from './components/Button';\nexport type { ListLinkProps } from './components/Link';\nexport type { ListCollapsibleProps } from './components/Collapsible';\nexport type { ListGroupProps } from './components/Group';\nexport type { ListSwitchProps, ListCheckboxProps } from './components/Toggle';\n"],"names":["React"],"mappings":";;;;;;;AAeO,SAAS,KAAK,OAAkB;AACnC,SAAOA,+BAAA,cAAC,OAAA,EAAK,GAAG,OAAO,aAAU,QAAO;AAC5C;AAEA,KAAK,SAAS;AACd,KAAK,OAAO;AACZ,KAAK,cAAc;AACnB,KAAK,SAAS;AACd,KAAK,WAAW;AAChB,KAAK,QAAQ;"}

package/dist/components/List/components/Collapsible.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.cjs","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\n\nimport { Icon } from '../../Icon/Icon';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: JSX.Element | JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["Icon","CollapsiblePrimitive","Item"],"mappings":";;;;;;AAaO,MAAM,cAAc,MAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,WAAW;AAClD,QAAM,UAAU,sBAAA,cAACA,KAAAA,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACI,sBAAA,cAACC,YAAAA,YAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7G,sBAAA;AAAA,IAACA,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACG,4CAASC,WAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjH,sBAAA,cAACD,YAAAA,YAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;;"}
+{"version":3,"file":"Collapsible.cjs","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\n\nimport { Icon } from '../../Icon/Icon';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["Icon","CollapsiblePrimitive","Item"],"mappings":";;;;;;AAaO,MAAM,cAAc,MAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,WAAW;AAClD,QAAM,UAAU,sBAAA,cAACA,KAAAA,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACI,sBAAA,cAACC,YAAAA,YAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7G,sBAAA;AAAA,IAACA,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACG,4CAASC,WAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjH,sBAAA,cAACD,YAAAA,YAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;;"}

package/dist/components/List/components/Collapsible.d.ts

@@ -2,10 +2,10 @@ import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
 import { default as React } from 'react';
 import { ComposableListItemProps } from './Item';
 export type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
     defaultOpen?: boolean;
 };
 export declare const Collapsible: React.ForwardRefExoticComponent<Omit<ComposableListItemProps<React.ForwardRefExoticComponent<Omit<import('@base-ui/react').CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>>, "children"> & {
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
     defaultOpen?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/List/components/Collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\n\nimport { Icon } from '../../Icon/Icon';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: JSX.Element | JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["React","CollapsiblePrimitive"],"mappings":";;;;AAaO,MAAM,cAAcA,eAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,WAAW;AAClD,QAAM,UAAUA,+BAAA,cAAC,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACIA,+BAAA,cAACC,cAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7GD,+BAAA;AAAA,IAACC,cAAqB;AAAA,IAArB;AAAA,MACG,qDAAS,MAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjHD,+BAAA,cAACC,cAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;"}
+{"version":3,"file":"Collapsible.js","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\n\nimport { Icon } from '../../Icon/Icon';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["React","CollapsiblePrimitive"],"mappings":";;;;AAaO,MAAM,cAAcA,eAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,WAAW;AAClD,QAAM,UAAUA,+BAAA,cAAC,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACIA,+BAAA,cAACC,cAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7GD,+BAAA;AAAA,IAACC,cAAqB;AAAA,IAArB;AAAA,MACG,qDAAS,MAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjHD,+BAAA,cAACC,cAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;"}