@economic/taco 1.0.5 → 1.0.6

package/dist/esm/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,106 @@
+import { useMemo, Children, isValidElement, forwardRef, createElement, createContext, useContext } from 'react';
+import cn from 'classnames';
+import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
+
+const getRadioGroupItemValueAsString = value => value === null ? '' : String(value);
+const findByValue = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
+const RadioGroupContext = /*#__PURE__*/createContext({
+  disabled: false,
+  invalid: false
+});
+const RadioGroupItem = /*#__PURE__*/forwardRef(function RadioGroupItem(props, ref) {
+  const context = useContext(RadioGroupContext);
+  const {
+    children,
+    value,
+    ...otherProps
+  } = props;
+  const isDisabled = context.disabled || props.disabled;
+  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2 hover:border-4', {
+    'border-grey-dark focus:yt-focus aria-checked:bg-blue aria-checked:border-blue hover:aria-checked:border-blue-light': !isDisabled && !context.invalid,
+    'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,
+    'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !isDisabled
+  });
+  const labelClassName = cn('flex items-center cursor-pointer gap-2', {
+    'cursor-not-allowed text-grey-dark': isDisabled
+  }, props.className);
+  return createElement("label", {
+    className: labelClassName
+  }, createElement(Item, Object.assign({}, otherProps, {
+    className: className,
+    disabled: isDisabled,
+    ref: ref,
+    value: getRadioGroupItemValueAsString(value)
+  }), createElement(Indicator, {
+    className: "h-2 w-2 rounded-full bg-white"
+  })), children);
+});
+const useRadioGroup = props => {
+  const {
+    children,
+    defaultValue,
+    disabled,
+    invalid,
+    onChange,
+    orientation = 'vertical',
+    value,
+    ...otherProps
+  } = props;
+  const values = useMemo(() => {
+    const radioGroupItemValues = [];
+    Children.forEach(children, child => {
+      if (isValidElement(child)) {
+        radioGroupItemValues.push(child.props.value);
+      }
+    });
+    return radioGroupItemValues;
+  }, [children]);
+  const context = useMemo(() => ({
+    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+    invalid: invalid !== null && invalid !== void 0 ? invalid : false
+  }), [disabled, invalid]);
+  let valueProps;
+
+  if (onChange !== undefined) {
+    const handleChange = value => onChange(findByValue(values, value));
+
+    valueProps = {
+      onValueChange: handleChange,
+      value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined
+    };
+  } else {
+    valueProps = {
+      defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined
+    };
+  }
+
+  return {
+    context,
+    props: { ...otherProps,
+      ...valueProps,
+      children,
+      orientation
+    }
+  };
+};
+const RadioGroup = /*#__PURE__*/forwardRef(function RadioGroup(props, ref) {
+  const {
+    context,
+    props: otherProps
+  } = useRadioGroup(props);
+  const className = cn('flex items-start gap-y-2', {
+    'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
+    'flex-col': otherProps.orientation === 'vertical'
+  }, otherProps.className);
+  return createElement(RadioGroupContext.Provider, {
+    value: context
+  }, createElement(Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "radio-group",
+    ref: ref
+  })));
+});
+RadioGroup.Item = RadioGroupItem;
+
+export { RadioGroup, findByValue, getRadioGroupItemValueAsString, useRadioGroup };
+//# sourceMappingURL=RadioGroup.js.map

package/dist/esm/components/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\r\nimport { Orientation } from '../../types';\r\n\r\nexport type RadioGroupItemValue = string | number | boolean | null;\r\n\r\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string => (value === null ? '' : String(value));\r\n\r\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue =>\r\n    values.find(value => getRadioGroupItemValueAsString(value) === valueAsString) as RadioGroupItemValue;\r\n\r\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\r\n\r\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\r\n    React.ButtonHTMLAttributes<T>,\r\n    'children' | 'onSelect' | 'value'\r\n> & {\r\n    /** Label for the radio group item */\r\n    children: React.ReactNode;\r\n    /* Whether the radio group item is disabled */\r\n    disabled?: boolean;\r\n    /** Value of the radio button */\r\n    value: RadioGroupItemValue;\r\n};\r\n\r\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const context = React.useContext(RadioGroupContext);\r\n    const { children, value, ...otherProps } = props;\r\n\r\n    const isDisabled = context.disabled || props.disabled;\r\n\r\n    const className = cn(\r\n        'flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2 hover:border-4',\r\n        {\r\n            'border-grey-dark focus:yt-focus aria-checked:bg-blue aria-checked:border-blue hover:aria-checked:border-blue-light':\r\n                !isDisabled && !context.invalid,\r\n            'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,\r\n            'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\r\n                context.invalid && !isDisabled,\r\n        }\r\n    );\r\n    const labelClassName = cn(\r\n        'flex items-center cursor-pointer gap-2',\r\n        {\r\n            'cursor-not-allowed text-grey-dark': isDisabled,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <label className={labelClassName}>\r\n            <RadioGroupPrimitive.Item\r\n                {...otherProps}\r\n                className={className}\r\n                disabled={isDisabled}\r\n                ref={ref}\r\n                value={getRadioGroupItemValueAsString(value)}\r\n            >\r\n                <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\r\n            </RadioGroupPrimitive.Item>\r\n            {children}\r\n        </label>\r\n    );\r\n});\r\n\r\ntype ReactGroupBaseChild = React.ReactElement<RadioGroupItemProps> | boolean | null;\r\n\r\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\r\n    children: ReactGroupBaseChild[];\r\n    /* Whether the radio group is disabled */\r\n    disabled?: boolean;\r\n    /* Whether the radio group is in an invalid state */\r\n    invalid?: boolean;\r\n    /** The name of the radio group, used when submitting an HTML form */\r\n    name?: string;\r\n    /**\r\n     * Orientation of the radio group\r\n     * @defaultValue vertical\r\n     */\r\n    orientation?: Orientation;\r\n    /* Whether the radio group requires user input */\r\n    required?: boolean;\r\n};\r\n\r\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\r\n    /* The default value (uncontrolled) */\r\n    defaultValue?: RadioGroupItemValue;\r\n    onChange?: never;\r\n    value?: never;\r\n}\r\n\r\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\r\n    defaultValue?: never;\r\n    /** Handler called when the value changes */\r\n    onChange: (value: RadioGroupItemValue) => void;\r\n    /** The current value (controlled) */\r\n    value?: RadioGroupItemValue;\r\n}\r\n\r\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\r\n\r\nexport type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<\r\n    RadioGroupProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n    /** Item component rendered in a `RadioGroup` component */\r\n    Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;\r\n};\r\n\r\nexport const useRadioGroup = (props: RadioGroupProps) => {\r\n    const { children, defaultValue, disabled, invalid, onChange, orientation = 'vertical', value, ...otherProps } = props;\r\n\r\n    const values = React.useMemo<RadioGroupItemValue[]>(() => {\r\n        const radioGroupItemValues: RadioGroupItemValue[] = [];\r\n\r\n        React.Children.forEach(children, child => {\r\n            if (React.isValidElement(child)) {\r\n                radioGroupItemValues.push(child.props.value);\r\n            }\r\n        });\r\n\r\n        return radioGroupItemValues;\r\n    }, [children]);\r\n\r\n    const context = React.useMemo(() => ({ disabled: disabled ?? false, invalid: invalid ?? false }), [disabled, invalid]);\r\n\r\n    let valueProps;\r\n\r\n    if (onChange !== undefined) {\r\n        const handleChange = (value: string): void => onChange(findByValue(values, value));\r\n\r\n        valueProps = {\r\n            onValueChange: handleChange,\r\n            value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined,\r\n        };\r\n    } else {\r\n        valueProps = {\r\n            defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined,\r\n        };\r\n    }\r\n\r\n    return {\r\n        context,\r\n        props: {\r\n            ...otherProps,\r\n            ...valueProps,\r\n            children,\r\n            orientation,\r\n        },\r\n    };\r\n};\r\n\r\nexport const RadioGroup = React.forwardRef(function RadioGroup(props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { context, props: otherProps } = useRadioGroup(props);\r\n    const className = cn(\r\n        'flex items-start gap-y-2',\r\n        {\r\n            'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',\r\n            'flex-col': otherProps.orientation === 'vertical',\r\n        },\r\n        otherProps.className\r\n    );\r\n\r\n    return (\r\n        <RadioGroupContext.Provider value={context}>\r\n            <RadioGroupPrimitive.Root {...otherProps} className={className} data-taco=\"radio-group\" ref={ref} />\r\n        </RadioGroupContext.Provider>\r\n    );\r\n}) as ForwardedRadioGroupWithStatics;\r\nRadioGroup.Item = RadioGroupItem;\r\n"],"names":["getRadioGroupItemValueAsString","value","String","findByValue","values","valueAsString","find","RadioGroupContext","React","disabled","invalid","RadioGroupItem","props","ref","context","children","otherProps","isDisabled","className","cn","labelClassName","RadioGroupPrimitive","useRadioGroup","defaultValue","onChange","orientation","radioGroupItemValues","forEach","child","push","valueProps","undefined","handleChange","onValueChange","RadioGroup","Provider","Item"],"mappings":"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"}

package/dist/esm/components/SearchInput/SearchInput.js

@@ -0,0 +1,95 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import '../Icon/components/index.js';
+import '../Icon/Icon.js';
+import '../Accordion/Accordion.js';
+import '../Backdrop/Backdrop.js';
+import '../VisuallyHidden/VisuallyHidden.js';
+import '../Badge/Badge.js';
+import '../Tooltip/Tooltip.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import '../Banner/Banner.js';
+import '../Button/Button.js';
+import '../Spinner/Spinner.js';
+import '../Toast/Toaster.js';
+import { useLocalization } from '../Provider/Provider.js';
+import '../Calendar/Calendar.js';
+import '../Checkbox/Checkbox.js';
+import { Input } from '../Input/Input.js';
+import keycode from 'keycode';
+import '../../utils/hooks/useListKeyboardNavigation.js';
+import '../../utils/hooks/useListScrollTo.js';
+import '../../utils/hooks/useBoundingClientRectListener.js';
+import '../Combobox/Combobox.js';
+import '../../utils/date.js';
+import '../Popover/Popover.js';
+import '../Datepicker/Datepicker.js';
+import '../Dialog/Dialog.js';
+import '../Field/Field.js';
+import '../Form/Form.js';
+import '../Group/Group.js';
+import '../Hanger/Hanger.js';
+import '../HoverCard/HoverCard.js';
+import '../Listbox/Listbox.js';
+import '../RadioGroup/RadioGroup.js';
+import '../Menu/Menu.js';
+import '../Treeview/Treeview.js';
+import '../Navigation/Navigation.js';
+import '../Select/Select.js';
+import '../Pagination/usePagination.js';
+import '../Pagination/Pagination.js';
+import '../Progress/Progress.js';
+import '../Table/components/Table.js';
+import '../Table/components/PaginatedTable.js';
+import '../Table/components/WindowedTable.js';
+import '../Table/util/rowIndexPath.js';
+import '../Table/hooks/useRowCreation.js';
+import '../Tabs/Tabs.js';
+import '../Textarea/Textarea.js';
+import '../Switch/Switch.js';
+import '../Tour/Tour.js';
+import '../../utils/hooks/useOnClickOutside.js';
+
+var _excluded = ["onSearch"];
+var SearchInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
+  var onSearch = _ref.onSearch,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var handleClick = function handleClick() {
+    if (!props.disabled) {
+      onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var _props$onKeyDown;
+
+    var isEnterKeyPressed = event.keyCode === keycode('enter');
+
+    if (isEnterKeyPressed) {
+      handleClick();
+    }
+
+    (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, event);
+  };
+
+  return createElement(Input, Object.assign({
+    "aria-label": texts.searchInput.inputLabel
+  }, props, {
+    button: createElement(IconButton, {
+      icon: "search",
+      className: "!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent",
+      disabled: props.disabled,
+      onClick: handleClick
+    }),
+    onKeyDown: handleKeyDown,
+    ref: ref,
+    type: "search"
+  }));
+});
+
+export { SearchInput };
+//# sourceMappingURL=SearchInput.js.map

package/dist/esm/components/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\r\n\r\nexport type SearchInputTexts = {\r\n    /**\r\n     * aria-label text for input\r\n     */\r\n    inputLabel: string;\r\n};\r\n\r\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\r\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\r\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\r\n};\r\n\r\nexport const SearchInput = React.forwardRef(function SearchInput(\r\n    { onSearch, ...props }: SearchInputProps,\r\n    ref: React.Ref<HTMLInputElement>\r\n) {\r\n    const { texts } = useLocalization();\r\n\r\n    const handleClick = (): void => {\r\n        if (!props.disabled) {\r\n            onSearch?.(props.value);\r\n        }\r\n    };\r\n\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n        const isEnterKeyPressed = event.keyCode === keycode('enter');\r\n\r\n        if (isEnterKeyPressed) {\r\n            handleClick();\r\n        }\r\n\r\n        props.onKeyDown?.(event);\r\n    };\r\n\r\n    return (\r\n        <Input\r\n            aria-label={texts.searchInput.inputLabel}\r\n            {...props}\r\n            button={\r\n                <IconButton\r\n                    icon=\"search\"\r\n                    className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\r\n                    disabled={props.disabled}\r\n                    onClick={handleClick}\r\n                />\r\n            }\r\n            onKeyDown={handleKeyDown}\r\n            ref={ref}\r\n            type=\"search\"\r\n        />\r\n    );\r\n});\r\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;AAGf,yBAAkBC,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc;AAChB,QAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;AACjBL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;AACH;AACJ,GAJD;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;;;AAClB,QAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;AAEA,QAAIF,iBAAJ,EAAuB;AACnBL,MAAAA,WAAW;AACd;;AAED,wBAAAH,KAAK,CAACW,SAAN,2EAAAX,KAAK,EAAaO,KAAb,CAAL;AACH,GARD;;AAUA,SACIV,aAAA,CAACe,KAAD;kBACgBV,KAAK,CAACW,WAAN,CAAkBC;KAC1Bd;AACJe,IAAAA,MAAM,EACFlB,aAAA,CAACmB,UAAD;AACIC,MAAAA,IAAI,EAAC;AACLC,MAAAA,SAAS,EAAC;AACVd,MAAAA,QAAQ,EAAEJ,KAAK,CAACI;AAChBe,MAAAA,OAAO,EAAEhB;KAJb;AAOJQ,IAAAA,SAAS,EAAEL;AACXR,IAAAA,GAAG,EAAEA;AACLsB,IAAAA,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}

package/dist/esm/components/Select/Select.js

@@ -0,0 +1,100 @@
+import { forwardRef, createElement, useRef, useEffect, Fragment } from 'react';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import { Badge } from '../Badge/Badge.js';
+import { Root, Trigger, Content } from '@radix-ui/react-popover';
+import { getInputClasses } from '../Input/util.js';
+import { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener.js';
+import { Combobox } from '../Combobox/Combobox.js';
+import { MultiListbox, Listbox } from '../Listbox/Listbox.js';
+import { useSelect } from './useSelect.js';
+
+const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
+  const {
+    autoFocus,
+    className: externalClassName,
+    highlighted,
+    style,
+    ...otherProps
+  } = props;
+  const {
+    button,
+    listbox,
+    popover,
+    input,
+    text,
+    more = 0
+  } = useSelect(otherProps, ref);
+  const internalRef = useRef(null);
+  const selectDimensions = useBoundingClientRectListener(internalRef);
+  const className = cn('inline-flex relative w-full', {
+    'yt-select--readonly': props.readOnly
+  }, externalClassName);
+  const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
+    'border-blue': popover.open
+  });
+  useEffect(() => {
+    if (autoFocus && internalRef.current) {
+      internalRef.current.focus();
+    }
+  }, []);
+
+  const renderMultiSelection = () => {
+    return createElement(Fragment, null, createElement("span", {
+      className: "flex-grow truncate text-left"
+    }, text), more > 0 && createElement(Badge, {
+      className: "ml-2"
+    }, `+${more}`));
+  };
+
+  const commonListboxProps = { ...listbox,
+    className: 'w-auto',
+    invalid: undefined,
+    style: {
+      minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
+    },
+    tabIndex: popover.open ? 0 : -1
+  };
+  return createElement("span", {
+    className: className,
+    "data-taco": "select",
+    style: style
+  }, createElement(Root, Object.assign({}, popover), createElement(Trigger, Object.assign({}, button, {
+    className: inputClassname,
+    ref: internalRef
+  }), props.multiselect ? renderMultiSelection() : createElement("span", {
+    className: "flex-grow truncate text-left"
+  }, text), createElement("span", {
+    className: "flex h-8 w-8 items-center justify-center"
+  }, createElement(Icon, {
+    className: "pointer-events-none",
+    name: popover.open ? 'chevron-up' : 'chevron-down'
+  }))), createElement(Content, {
+    align: "start",
+    sideOffset: 4
+  }, props.multiselect ? createElement(MultiListbox, Object.assign({}, commonListboxProps)) : createElement(Listbox, Object.assign({}, commonListboxProps))), createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
+  }))));
+});
+const Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
+  const {
+    editable,
+    ...otherProps
+  } = props;
+
+  if (editable) {
+    return createElement(Combobox, Object.assign({}, otherProps, {
+      dialog: undefined,
+      inline: true,
+      ref: ref
+    }));
+  }
+
+  return createElement(BaseSelect, Object.assign({}, otherProps, {
+    ref: ref
+  }));
+});
+
+export { Select };
+//# sourceMappingURL=Select.js.map

package/dist/esm/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { useSelect } from './useSelect';\r\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\r\nimport { Badge } from '../Badge/Badge';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type SelectTexts = {\r\n    /**\r\n     * The text displayed when all options are selected when multiselect mode in on.\r\n     */\r\n    allOptionsSelected: string;\r\n};\r\n\r\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\r\n    Omit<ComboboxProps, 'inline'> & {\r\n        /**\r\n         * Allows to select multiple values.\r\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\r\n         */\r\n        multiselect?: boolean;\r\n    };\r\n\r\nexport type SelectProps = BaseSelectProps & {\r\n    /**\r\n     * Creates an editable select.\r\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\r\n     * even if there is no value in the input.\r\n     * After user starts typing, matching data will be displayed.\r\n     */\r\n    editable?: boolean;\r\n};\r\n\r\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\r\n    const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\r\n    const internalRef = React.useRef<HTMLButtonElement>(null);\r\n    const selectDimensions = useBoundingClientRectListener(internalRef);\r\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\r\n    const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\r\n        'border-blue': popover.open,\r\n    });\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && internalRef.current) {\r\n            internalRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    const renderMultiSelection = (): React.ReactNode => {\r\n        return (\r\n            <>\r\n                <span className=\"flex-grow truncate text-left\">{text}</span>\r\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\r\n            </>\r\n        );\r\n    };\r\n\r\n    const commonListboxProps: ListboxProps = {\r\n        ...listbox,\r\n        className: 'w-auto',\r\n        invalid: undefined,\r\n        style: { minWidth: selectDimensions?.width },\r\n        tabIndex: popover.open ? 0 : -1,\r\n    };\r\n\r\n    return (\r\n        <span className={className} data-taco=\"select\" style={style}>\r\n            <PopoverPrimitive.Root {...popover}>\r\n                <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\r\n                    {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\r\n                    <span className=\"flex h-8 w-8 items-center justify-center\">\r\n                        <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\r\n                    </span>\r\n                </PopoverPrimitive.Trigger>\r\n                <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\r\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\r\n                </PopoverPrimitive.Content>\r\n                <input {...input} className=\"hidden\" type=\"text\" />\r\n            </PopoverPrimitive.Root>\r\n        </span>\r\n    );\r\n});\r\n\r\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { editable, ...otherProps } = props;\r\n\r\n    if (editable) {\r\n        return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\r\n    }\r\n\r\n    return <BaseSelect {...otherProps} ref={ref} />;\r\n});\r\n"],"names":["BaseSelect","React","props","ref","autoFocus","className","externalClassName","highlighted","style","otherProps","button","listbox","popover","input","text","more","useSelect","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}

package/dist/esm/components/Select/useSelect.js

@@ -0,0 +1,212 @@
+import { useState, useMemo, useRef, useEffect, createElement, Fragment, cloneElement } from 'react';
+import cn from 'classnames';
+import { v4 } from 'uuid';
+import { useLocalization } from '../Provider/Provider.js';
+import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import keycode from 'keycode';
+import { createCustomEvent } from '../../utils/input.js';
+import { useFlattenedData, findByValue, setInputValueByRef, sanitizeItem } from '../Listbox/util.js';
+
+const useSelect = ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  data = [],
+  defaultValue,
+  disabled,
+  emptyValue,
+  id: nativeId,
+  multiselect,
+  onBlur,
+  onClick,
+  onChange,
+  readOnly,
+  value,
+  ...otherProps
+}, ref) => {
+  const {
+    texts
+  } = useLocalization();
+  const flattenedData = useFlattenedData(data);
+  const listboxInputRef = useProxiedRef(ref);
+  const [open, setOpen] = useState(false);
+  const id = useMemo(() => nativeId || `select_${v4()}`, [nativeId]);
+  const inputRef = useRef(null);
+  const buttonId = `${id}-button`; // support 'escape' resetting to the value that was set when the listbox opened
+
+  const [lastValue, setLastValue] = useState(value);
+  useEffect(() => {
+    setLastValue(value);
+  }, [open]);
+  useEffect(() => {
+    if (value === undefined) {
+      if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {
+        setInputValueByRef(inputRef.current, defaultValue);
+      } else {
+        if (emptyValue !== undefined) {
+          setInputValueByRef(inputRef.current, emptyValue);
+        } else if (data.length > 0) {
+          setInputValueByRef(inputRef.current, data[0].value);
+        }
+      }
+    } else {
+      if (!multiselect && !findByValue(flattenedData, value)) {
+        if (emptyValue !== undefined) {
+          setInputValueByRef(inputRef.current, emptyValue);
+        } else if (data.length > 0) {
+          setInputValueByRef(inputRef.current, data[0].value);
+        }
+      }
+    }
+  }, []); // event handlers
+
+  const handleButtonKeyDown = event => {
+    if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
+      event.preventDefault();
+      setOpen(true);
+    }
+  };
+
+  const handleListboxKeyDown = event => {
+    switch (event.keyCode) {
+      case keycode('escape'):
+        {
+          event.preventDefault();
+
+          if (lastValue !== undefined) {
+            setInputValueByRef(listboxInputRef.current, lastValue);
+          }
+
+          setOpen(false);
+          break;
+        }
+
+      case keycode('tab'):
+      case keycode('enter'):
+        {
+          if (event.keyCode !== keycode('tab')) {
+            event.preventDefault();
+          }
+
+          setOpen(false);
+          break;
+        }
+    }
+
+    if (otherProps.onKeyDown) {
+      otherProps.onKeyDown(event);
+    }
+  };
+
+  const handleListboxClick = event => {
+    event.preventDefault();
+
+    if (!multiselect) {
+      setOpen(false);
+
+      if (onBlur) {
+        onBlur(createCustomEvent('blur'));
+      }
+    }
+  };
+
+  let text = '';
+  let more = 0;
+
+  if (value !== undefined) {
+    if (multiselect) {
+      const selectedValues = (value === null || value === void 0 ? void 0 : value.toString().split(',')) || [];
+
+      if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {
+        text = texts.select.allOptionsSelected;
+      } else {
+        var _findByValue$text, _findByValue;
+
+        text = (_findByValue$text = (_findByValue = findByValue(flattenedData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
+        more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
+      }
+    } else {
+      const item = findByValue(flattenedData, value);
+
+      if (item) {
+        text = item.icon ? createElement(Fragment, null, cloneElement(item.icon, {
+          className: cn(item.icon.props.className, 'mr-1 -mt-px')
+        }), item.text) : item.text;
+      }
+    }
+  }
+
+  const handleInputChange = event => {
+    event.persist();
+
+    if (onChange) {
+      var _item$path$split, _item$path;
+
+      const item = findByValue(flattenedData, event.target.value);
+      event.detail = sanitizeItem(item);
+      const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
+
+      if (indexes.length > 1) {
+        // we don't want to map the current item
+        indexes.pop(); // we need to rebuild the path as we map
+
+        let lastPath;
+        event.detail.parents = indexes.map(i => {
+          lastPath = lastPath ? [lastPath, i].join('.') : i;
+          return sanitizeItem(flattenedData.find(i => i.path === lastPath));
+        });
+      }
+
+      onChange(event);
+    }
+  };
+
+  const button = {
+    'aria-haspopup': 'listbox',
+    'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,
+    'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,
+    disabled: disabled || readOnly,
+    id: buttonId,
+    onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
+    type: 'button'
+  };
+  const listbox = { ...otherProps,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    data,
+    disabled,
+    emptyValue,
+    onBlur,
+    onClick: handleListboxClick,
+    onChange: event => {
+      setInputValueByRef(inputRef.current, event.target.value);
+    },
+    onKeyDown: handleListboxKeyDown,
+    ref: listboxInputRef,
+    value
+  };
+  const input = {
+    onChange: handleInputChange,
+    ref: inputRef,
+    value: String(value !== null && value !== void 0 ? value : '')
+  };
+  return {
+    button,
+    listbox,
+    input,
+    popover: {
+      open,
+      onOpenChange: open => {
+        if (!open && onBlur) {
+          onBlur(createCustomEvent('blur'));
+        }
+
+        setOpen(open);
+      }
+    },
+    text,
+    more
+  };
+};
+
+export { useSelect };
+//# sourceMappingURL=useSelect.js.map

package/dist/esm/components/Select/useSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport cn from 'classnames';\r\nimport { v4 as uuid } from 'uuid';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { SelectProps } from './Select';\r\nimport { ListboxProps } from '../Listbox/Listbox';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\r\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\r\nimport { createCustomEvent } from '../../utils/input';\r\n\r\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\r\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\r\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\r\n\r\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\r\n    button: InternalButtonProps;\r\n    listbox: InternalListboxProps;\r\n    input: InternalInputProps;\r\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\r\n    text: string | JSX.Element;\r\n    more?: number;\r\n};\r\n\r\nexport const useSelect = (\r\n    {\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        data = [],\r\n        defaultValue,\r\n        disabled,\r\n        emptyValue,\r\n        id: nativeId,\r\n        multiselect,\r\n        onBlur,\r\n        onClick,\r\n        onChange,\r\n        readOnly,\r\n        value,\r\n        ...otherProps\r\n    }: SelectProps,\r\n    ref: React.Ref<HTMLInputElement>\r\n): useSelect => {\r\n    const { texts } = useLocalization();\r\n    const flattenedData = useFlattenedData(data);\r\n    const listboxInputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const [open, setOpen] = React.useState(false);\r\n    const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\r\n    const inputRef = React.useRef<HTMLInputElement>(null);\r\n    const buttonId = `${id}-button`;\r\n    // support 'escape' resetting to the value that was set when the listbox opened\r\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\r\n\r\n    React.useEffect(() => {\r\n        setLastValue(value);\r\n    }, [open]);\r\n\r\n    React.useEffect(() => {\r\n        if (value === undefined) {\r\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\r\n                setInputValueByRef(inputRef.current, defaultValue);\r\n            } else {\r\n                if (emptyValue !== undefined) {\r\n                    setInputValueByRef(inputRef.current, emptyValue);\r\n                } else if (data.length > 0) {\r\n                    setInputValueByRef(inputRef.current, data[0].value);\r\n                }\r\n            }\r\n        } else {\r\n            if (!multiselect && !findByValue(flattenedData, value)) {\r\n                if (emptyValue !== undefined) {\r\n                    setInputValueByRef(inputRef.current, emptyValue);\r\n                } else if (data.length > 0) {\r\n                    setInputValueByRef(inputRef.current, data[0].value);\r\n                }\r\n            }\r\n        }\r\n    }, []);\r\n\r\n    // event handlers\r\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\r\n        if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\r\n            event.preventDefault();\r\n            setOpen(true);\r\n        }\r\n    };\r\n\r\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\r\n        switch (event.keyCode) {\r\n            case keycode('escape'): {\r\n                event.preventDefault();\r\n                if (lastValue !== undefined) {\r\n                    setInputValueByRef(listboxInputRef.current, lastValue);\r\n                }\r\n\r\n                setOpen(false);\r\n                break;\r\n            }\r\n\r\n            case keycode('tab'):\r\n            case keycode('enter'): {\r\n                if (event.keyCode !== keycode('tab')) {\r\n                    event.preventDefault();\r\n                }\r\n                setOpen(false);\r\n                break;\r\n            }\r\n\r\n            default:\r\n        }\r\n\r\n        if (otherProps.onKeyDown) {\r\n            otherProps.onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\r\n        event.preventDefault();\r\n        if (!multiselect) {\r\n            setOpen(false);\r\n            if (onBlur) {\r\n                onBlur(createCustomEvent('blur'));\r\n            }\r\n        }\r\n    };\r\n\r\n    let text: string | JSX.Element = '';\r\n    let more = 0;\r\n\r\n    if (value !== undefined) {\r\n        if (multiselect) {\r\n            const selectedValues = value?.toString().split(',') || [];\r\n\r\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\r\n                text = texts.select.allOptionsSelected;\r\n            } else {\r\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\r\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\r\n            }\r\n        } else {\r\n            const item = findByValue(flattenedData, value);\r\n\r\n            if (item) {\r\n                text = item.icon ? (\r\n                    <>\r\n                        {React.cloneElement(item.icon, {\r\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\r\n                        })}\r\n                        {item.text}\r\n                    </>\r\n                ) : (\r\n                    item.text\r\n                );\r\n            }\r\n        }\r\n    }\r\n\r\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\r\n        event.persist();\r\n\r\n        if (onChange) {\r\n            const item = findByValue(flattenedData, event.target.value);\r\n            (event as any).detail = sanitizeItem(item);\r\n\r\n            const indexes = item?.path?.split('.') ?? [];\r\n\r\n            if (indexes.length > 1) {\r\n                // we don't want to map the current item\r\n                indexes.pop();\r\n                // we need to rebuild the path as we map\r\n                let lastPath: string;\r\n\r\n                (event as any).detail.parents = indexes.map(i => {\r\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\r\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\r\n                });\r\n            }\r\n\r\n            onChange(event);\r\n        }\r\n    };\r\n\r\n    const button: InternalButtonProps = {\r\n        'aria-haspopup': 'listbox' as const,\r\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\r\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\r\n        disabled: disabled || readOnly,\r\n        id: buttonId,\r\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\r\n        type: 'button',\r\n    };\r\n\r\n    const listbox: InternalListboxProps = {\r\n        ...otherProps,\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        data,\r\n        disabled,\r\n        emptyValue,\r\n        onBlur,\r\n        onClick: handleListboxClick,\r\n        onChange: event => {\r\n            setInputValueByRef(inputRef.current, event.target.value);\r\n        },\r\n        onKeyDown: handleListboxKeyDown,\r\n        ref: listboxInputRef,\r\n        value,\r\n    };\r\n\r\n    const input: InternalInputProps = {\r\n        onChange: handleInputChange,\r\n        ref: inputRef,\r\n        value: String(value ?? ''),\r\n    };\r\n\r\n    return {\r\n        button,\r\n        listbox,\r\n        input,\r\n        popover: {\r\n            open,\r\n            onOpenChange: open => {\r\n                if (!open && onBlur) {\r\n                    onBlur(createCustomEvent('blur'));\r\n                }\r\n                setOpen(open);\r\n            },\r\n        },\r\n        text,\r\n        more,\r\n    };\r\n};\r\n"],"names":["useSelect","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","id","nativeId","multiselect","onBlur","onClick","onChange","readOnly","value","otherProps","ref","texts","useLocalization","flattenedData","useFlattenedData","listboxInputRef","useProxiedRef","open","setOpen","React","uuid","inputRef","buttonId","lastValue","setLastValue","undefined","findByValue","setInputValueByRef","current","length","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","createCustomEvent","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","input","String","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/components/Spinner/Spinner.js

@@ -0,0 +1,48 @@
+import React__default from 'react';
+import cn from 'classnames';
+
+const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
+  const {
+    delay = 500,
+    label,
+    ...otherProps
+  } = props;
+  const [visible, setVisibility] = React__default.useState(!delay);
+  React__default.useEffect(() => {
+    let timeout;
+
+    if (delay) {
+      timeout = window.setTimeout(() => setVisibility(true), delay);
+    }
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [delay]);
+
+  if (!visible) {
+    return null;
+  }
+
+  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
+  return React__default.createElement("div", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "spinner",
+    ref: ref
+  }), React__default.createElement("svg", {
+    className: "h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]",
+    viewBox: "0 0 100 100",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    r: "45"
+  })), label && React__default.createElement("span", {
+    className: "mt-4"
+  }, label));
+});
+
+export { Spinner };
+//# sourceMappingURL=Spinner.js.map

package/dist/esm/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport './Spinner.css';\r\n\r\nexport type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /**\r\n     * Define a delay in milliseconds after which the spinner is shown.\r\n     * Default value is `500`ms\r\n     */\r\n    delay?: number;\r\n    /** Define a text that will be displayed below spinner */\r\n    label?: string;\r\n};\r\n\r\nexport const Spinner = React.forwardRef(function Spinner(props: SpinnerProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { delay = 500, label, ...otherProps } = props;\r\n    const [visible, setVisibility] = React.useState(!delay);\r\n\r\n    React.useEffect(() => {\r\n        let timeout: number;\r\n\r\n        if (delay) {\r\n            timeout = window.setTimeout(() => setVisibility(true), delay);\r\n        }\r\n\r\n        return () => {\r\n            if (timeout) {\r\n                clearTimeout(timeout);\r\n            }\r\n        };\r\n    }, [delay]);\r\n\r\n    if (!visible) {\r\n        return null;\r\n    }\r\n\r\n    const className = cn('inline-flex flex-col relative items-center', otherProps.className);\r\n\r\n    return (\r\n        <div {...otherProps} className={className} data-taco=\"spinner\" ref={ref}>\r\n            <svg\r\n                className=\"h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]\"\r\n                viewBox=\"0 0 100 100\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n                <circle cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n            </svg>\r\n            {label && <span className=\"mt-4\">{label}</span>}\r\n        </div>\r\n    );\r\n});\r\n"],"names":["Spinner","React","forwardRef","props","ref","delay","label","otherProps","visible","setVisibility","useState","useEffect","timeout","window","setTimeout","clearTimeout","className","cn","viewBox","xmlns","cx","cy","r"],"mappings":";;;MAcaA,OAAO,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,OAAT,CAAiBG,KAAjB,EAAsCC,GAAtC;AACpC,QAAM;AAAEC,IAAAA,KAAK,GAAG,GAAV;AAAeC,IAAAA,KAAf;AAAsB,OAAGC;AAAzB,MAAwCJ,KAA9C;AACA,QAAM,CAACK,OAAD,EAAUC,aAAV,IAA2BR,cAAK,CAACS,QAAN,CAAe,CAACL,KAAhB,CAAjC;AAEAJ,EAAAA,cAAK,CAACU,SAAN,CAAgB;AACZ,QAAIC,OAAJ;;AAEA,QAAIP,KAAJ,EAAW;AACPO,MAAAA,OAAO,GAAGC,MAAM,CAACC,UAAP,CAAkB,MAAML,aAAa,CAAC,IAAD,CAArC,EAA6CJ,KAA7C,CAAV;AACH;;AAED,WAAO;AACH,UAAIO,OAAJ,EAAa;AACTG,QAAAA,YAAY,CAACH,OAAD,CAAZ;AACH;AACJ,KAJD;AAKH,GAZD,EAYG,CAACP,KAAD,CAZH;;AAcA,MAAI,CAACG,OAAL,EAAc;AACV,WAAO,IAAP;AACH;;AAED,QAAMQ,SAAS,GAAGC,EAAE,CAAC,4CAAD,EAA+CV,UAAU,CAACS,SAA1D,CAApB;AAEA,SACIf,4BAAA,MAAA,oBAASM;AAAYS,IAAAA,SAAS,EAAEA;iBAAqB;AAAUZ,IAAAA,GAAG,EAAEA;IAApE,EACIH,4BAAA,MAAA;AACIe,IAAAA,SAAS,EAAC;AACVE,IAAAA,OAAO,EAAC;AACRC,IAAAA,KAAK,EAAC;GAHV,EAKIlB,4BAAA,SAAA;AAAQmB,IAAAA,EAAE,EAAC;AAAKC,IAAAA,EAAE,EAAC;AAAKC,IAAAA,CAAC,EAAC;GAA1B,CALJ,CADJ,EAQKhB,KAAK,IAAIL,4BAAA,OAAA;AAAMe,IAAAA,SAAS,EAAC;GAAhB,EAAwBV,KAAxB,CARd,CADJ;AAYH,CApCsB;;;;"}