@economic/taco 0.0.1-alpha.1532

package/dist/esm/src/components/Progress/Progress.js

@@ -0,0 +1,36 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import cn from 'classnames';
+
+var _excluded = ["duration"];
+var Progress = function Progress(_ref) {
+  var _cn;
+
+  var _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? undefined : _ref$duration,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var style;
+
+  if (duration) {
+    style = {
+      animationDuration: duration + "ms"
+    };
+  }
+
+  var className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
+  var progressClassName = cn('yt-progress__bar block h-1', (_cn = {
+    "w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration
+  }, _cn["w-0 bg-grey-dark animate-[progress_linear]"] = duration, _cn));
+  return React__default.createElement("span", Object.assign({}, props, {
+    "data-taco": "progress",
+    className: className
+  }), React__default.createElement("span", {
+    className: progressClassName,
+    "data-taco": "progress-bar",
+    style: style
+  }));
+};
+
+export { Progress };
+//# sourceMappingURL=Progress.js.map

package/dist/esm/src/components/Progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport './Progress.css';\n\nexport type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /**\n     * Indicates how long (in milliseconds) a progress bar will take to progress through.\n     * By default, progress bar has no duration\n     */\n    duration?: number;\n};\n\nexport const Progress = ({ duration = undefined, ...props }: ProgressProps): JSX.Element => {\n    let style;\n\n    if (duration) {\n        style = {\n            animationDuration: `${duration}ms`,\n        };\n    }\n\n    const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);\n\n    const progressClassName = cn('yt-progress__bar block h-1', {\n        \"w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']\":\n            !duration,\n        [`w-0 bg-grey-dark animate-[progress_linear]`]: duration,\n    });\n\n    return (\n        <span {...props} data-taco=\"progress\" className={className}>\n            <span className={progressClassName} data-taco=\"progress-bar\" style={style} />\n        </span>\n    );\n};\n"],"names":["Progress","duration","undefined","props","style","animationDuration","className","cn","progressClassName","React"],"mappings":";;;;;IAYaA,QAAQ,GAAG,SAAXA,QAAW;;;2BAAGC;MAAAA,sCAAWC;MAAcC;;AAChD,MAAIC,KAAJ;;AAEA,MAAIH,QAAJ,EAAc;AACVG,IAAAA,KAAK,GAAG;AACJC,MAAAA,iBAAiB,EAAKJ,QAAL;AADb,KAAR;AAGH;;AAED,MAAMK,SAAS,GAAGC,EAAE,CAAC,wDAAD,EAA2DJ,KAAK,CAACG,SAAjE,CAApB;AAEA,MAAME,iBAAiB,GAAGD,EAAE,CAAC,4BAAD;AACxB,6JACI,CAACN;AAFmB,yDAGwBA,QAHxB,OAA5B;AAMA,SACIQ,4BAAA,OAAA,oBAAUN;iBAAiB;AAAWG,IAAAA,SAAS,EAAEA;IAAjD,EACIG,4BAAA,OAAA;AAAMH,IAAAA,SAAS,EAAEE;iBAA6B;AAAeJ,IAAAA,KAAK,EAAEA;GAApE,CADJ,CADJ;AAKH;;;;"}

package/dist/esm/src/components/Provider/Provider.js

@@ -0,0 +1,107 @@
+import { useMemo, createElement, useContext, createContext } from 'react';
+import { ToastProvider } from '../Toast/Toaster.js';
+
+var defaultLocalisationTexts = {
+  calendar: {
+    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    actions: {
+      previousMonth: 'Previous month',
+      nextMonth: 'Next month',
+      previousYear: 'Previous year',
+      nextYear: 'Next year',
+      today: 'Today'
+    }
+  },
+  datepicker: {
+    calendar: 'Calendar',
+    clear: 'Clear',
+    expand: 'Show calendar',
+    shortcuts: 'Shortcuts'
+  },
+  hanger: {
+    close: 'Close'
+  },
+  listbox: {
+    loading: 'Loading results...',
+    empty: 'No results found',
+    allOption: 'All'
+  },
+  dialog: {
+    close: 'Close',
+    drag: 'Drag'
+  },
+  pagination: {
+    label: 'Pagination',
+    pageSize: 'Items per page',
+    showingXofYofTotal: 'Showing [X] - [Y] of [total]',
+    actions: {
+      firstPage: 'Goto first page',
+      firstPageWithShortcut: 'Goto first page (Home)',
+      previousPage: 'Goto previous page',
+      previousPageWithShortcut: 'Goto previous page (Page Up)',
+      nextPage: 'Goto next page',
+      nextPageWithShortcut: 'Goto next page (Page Down)',
+      lastPage: 'Goto last page',
+      lastPageWithShortcut: 'Goto last page (End)',
+      pageX: 'Goto page [X]'
+    }
+  },
+  table: {
+    actions: 'Other actions',
+    edit: 'Edit (e)',
+    copy: 'Copy (c)',
+    del: 'Delete (del)',
+    newSubRow: 'New row (shift + n)',
+    loading: 'Loading...'
+  },
+  select: {
+    allOptionsSelected: 'All'
+  },
+  toasts: {
+    dismiss: 'Dismiss'
+  },
+  tour: {
+    back: 'Back',
+    close: 'Close',
+    skip: 'Close and complete',
+    last: 'Last',
+    next: 'Next',
+    open: 'Open'
+  },
+  searchInput: {
+    inputLabel: 'Search...'
+  }
+};
+var defaultLocalizationContext = {
+  locale: 'en-GB',
+  texts: defaultLocalisationTexts,
+  formatting: {
+    date: 'dd.mm.yy'
+  }
+};
+var Context = /*#__PURE__*/createContext({
+  localization: defaultLocalizationContext
+});
+var Provider = function Provider(props) {
+  var children = props.children,
+      _props$localization = props.localization,
+      localization = _props$localization === void 0 ? defaultLocalizationContext : _props$localization;
+  var value = useMemo(function () {
+    return {
+      localization: localization
+    };
+  }, [localization]);
+  return createElement(Context.Provider, {
+    value: value
+  }, createElement(ToastProvider, null, children));
+};
+var useTaco = function useTaco() {
+  return useContext(Context);
+};
+var useLocalization = function useLocalization() {
+  return useTaco().localization;
+};
+
+export { Provider, defaultLocalisationTexts, useLocalization, useTaco };
+//# sourceMappingURL=Provider.js.map

package/dist/esm/src/components/Provider/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sources":["../../../../../src/components/Provider/Provider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Locale } from '../../types';\nimport { CalendarTexts } from '../Calendar/Calendar';\nimport { DialogTexts } from '../Dialog/Dialog';\nimport { PaginationTexts } from '../Pagination/Pagination';\nimport { ListboxTexts } from '../Listbox/Listbox';\nimport { ToastsTexts } from '../Toast/Toast';\nimport { DatepickerTexts } from '../Datepicker/Datepicker';\nimport { HangerTexts } from '../Hanger/Hanger';\nimport { SelectTexts } from '../Select/Select';\nimport { TourTexts } from '../Tour/Tour';\nimport { TableTexts } from '../Table/Table';\nimport { SearchInputTexts } from '../SearchInput/SearchInput';\nimport { ToastProvider } from '../Toast/Toaster';\n\nexport type LocalizationTexts = {\n    /** Localized texts and aria-labels for [Calendar](component:calendar) component */\n    calendar: CalendarTexts;\n    /** Localized texts and aria-labels for [DatePicker](component:datepicker) component */\n    datepicker: DatepickerTexts;\n    /** Localized texts and aria-labels for [Hanger](component:hanger) component */\n    hanger: HangerTexts;\n    /** Localized texts and aria-labels for [Listbox](component:listbox) component */\n    listbox: ListboxTexts;\n    /** Localized texts and aria-labels for [Dialog](component:dialog) component */\n    dialog: DialogTexts;\n    /** Localized texts and aria-labels for [Pagination](component:pagination) component */\n    pagination: PaginationTexts;\n    /** Localized texts and aria-labels for [Table](component:table) component */\n    table: TableTexts;\n    /** Localized texts and aria-labels for [Select](component:select) component */\n    select: SelectTexts;\n    /** Localized texts and aria-labels for [Toast](component:toast) component */\n    toasts: ToastsTexts;\n    /** Localized texts and aria-labels for [Tour](component:tour) component */\n    tour: TourTexts;\n    /** Localized texts and aria-labels for [SearchInput](component:searchinput) component */\n    searchInput: SearchInputTexts;\n};\n\nexport type Localization = {\n    /**\n     * Provide the language code used in application.\n     * Default value is `en-GB`\n     */\n    locale: Locale;\n    /** Provide the texts and aria-labels for components used within the provider */\n    texts: LocalizationTexts;\n    /** Provide the formatting */\n    formatting: {\n        /** Default value is `dd.mm.yy` */\n        date: string;\n    };\n};\nexport type Taco = {\n    /** Define localized texts and formatted data in your application */\n    localization: Localization;\n};\n\nexport const defaultLocalisationTexts = {\n    calendar: {\n        months: [\n            'January',\n            'February',\n            'March',\n            'April',\n            'May',\n            'June',\n            'July',\n            'August',\n            'September',\n            'October',\n            'November',\n            'December',\n        ],\n        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n        actions: {\n            previousMonth: 'Previous month',\n            nextMonth: 'Next month',\n            previousYear: 'Previous year',\n            nextYear: 'Next year',\n            today: 'Today',\n        },\n    },\n    datepicker: {\n        calendar: 'Calendar',\n        clear: 'Clear',\n        expand: 'Show calendar',\n        shortcuts: 'Shortcuts',\n    },\n    hanger: {\n        close: 'Close',\n    },\n    listbox: {\n        loading: 'Loading results...',\n        empty: 'No results found',\n        allOption: 'All',\n    },\n    dialog: {\n        close: 'Close',\n        drag: 'Drag',\n    },\n    pagination: {\n        label: 'Pagination',\n        pageSize: 'Items per page',\n        showingXofYofTotal: 'Showing [X] - [Y] of [total]',\n        actions: {\n            firstPage: 'Goto first page',\n            firstPageWithShortcut: 'Goto first page (Home)',\n            previousPage: 'Goto previous page',\n            previousPageWithShortcut: 'Goto previous page (Page Up)',\n            nextPage: 'Goto next page',\n            nextPageWithShortcut: 'Goto next page (Page Down)',\n            lastPage: 'Goto last page',\n            lastPageWithShortcut: 'Goto last page (End)',\n            pageX: 'Goto page [X]',\n        },\n    },\n    table: {\n        actions: 'Other actions',\n        edit: 'Edit (e)',\n        copy: 'Copy (c)',\n        del: 'Delete (del)',\n        newSubRow: 'New row (shift + n)',\n        loading: 'Loading...',\n    },\n    select: {\n        allOptionsSelected: 'All',\n    },\n    toasts: {\n        dismiss: 'Dismiss',\n    },\n    tour: {\n        back: 'Back',\n        close: 'Close',\n        skip: 'Close and complete',\n        last: 'Last',\n        next: 'Next',\n        open: 'Open',\n    },\n    searchInput: {\n        inputLabel: 'Search...',\n    },\n};\n\nconst defaultLocalizationContext: Localization = {\n    locale: 'en-GB',\n    texts: defaultLocalisationTexts,\n    formatting: {\n        date: 'dd.mm.yy',\n    },\n};\n\nconst Context = React.createContext<Taco>({\n    localization: defaultLocalizationContext,\n});\n\nexport type ProviderProps = {\n    /** Content would be your application */\n    children?: any;\n    /** Define localized texts and formatted data in your application */\n    localization?: Localization;\n};\n\nexport const Provider = (props: ProviderProps): JSX.Element => {\n    const { children, localization = defaultLocalizationContext } = props;\n    const value = React.useMemo(() => ({ localization }), [localization]);\n\n    return (\n        <Context.Provider value={value}>\n            <ToastProvider>{children}</ToastProvider>\n        </Context.Provider>\n    );\n};\n\nexport const useTaco = (): Taco => React.useContext(Context);\nexport const useLocalization = (): Localization => useTaco().localization;\n"],"names":["defaultLocalisationTexts","calendar","months","weekdaysShort","actions","previousMonth","nextMonth","previousYear","nextYear","today","datepicker","clear","expand","shortcuts","hanger","close","listbox","loading","empty","allOption","dialog","drag","pagination","label","pageSize","showingXofYofTotal","firstPage","firstPageWithShortcut","previousPage","previousPageWithShortcut","nextPage","nextPageWithShortcut","lastPage","lastPageWithShortcut","pageX","table","edit","copy","del","newSubRow","select","allOptionsSelected","toasts","dismiss","tour","back","skip","last","next","open","searchInput","inputLabel","defaultLocalizationContext","locale","texts","formatting","date","Context","React","localization","Provider","props","children","value","ToastProvider","useTaco","useLocalization"],"mappings":"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"}

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

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

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

@@ -0,0 +1,87 @@
+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 '../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 '../Combobox/Combobox.js';
+import '../../utils/date.js';
+import '../Popover/Popover.js';
+import '../Datepicker/Datepicker.js';
+import '../Group/Group.js';
+import '../Dialog/Dialog.js';
+import '../Form/Form.js';
+import '../Hanger/Hanger.js';
+import '../Label/Label.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 isEnterKeyPressed = event.keyCode === keycode('enter');
+
+    if (isEnterKeyPressed) {
+      handleClick();
+    }
+  };
+
+  return createElement(Input, Object.assign({
+    "aria-label": texts.searchInput.inputLabel
+  }, props, {
+    button: createElement(IconButton, {
+      icon: "search",
+      className: "!bg-transparent !border-transparent",
+      disabled: props.disabled,
+      onClick: handleClick
+    }),
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }));
+});
+
+export { SearchInput };
+//# sourceMappingURL=SearchInput.js.map

package/dist/esm/src/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';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\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 */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!bg-transparent !border-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n        />\n    );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","onKeyDown"],"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;AACJ,GAND;;AAQA,SACIN,aAAA,CAACc,KAAD;kBACgBT,KAAK,CAACU,WAAN,CAAkBC;KAC1Bb;AACJc,IAAAA,MAAM,EACFjB,aAAA,CAACkB,UAAD;AACIC,MAAAA,IAAI,EAAC;AACLC,MAAAA,SAAS,EAAC;AACVb,MAAAA,QAAQ,EAAEJ,KAAK,CAACI;AAChBc,MAAAA,OAAO,EAAEf;KAJb;AAOJgB,IAAAA,SAAS,EAAEb;AACXR,IAAAA,GAAG,EAAEA;IAZT,CADJ;AAgBH,CApC0B;;;;"}

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

@@ -0,0 +1,97 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+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 { PopoverDisclosure, Popover } from 'reakit/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';
+
+var _excluded = ["autoFocus", "className", "highlighted", "style"],
+    _excluded2 = ["container"],
+    _excluded3 = ["editable"];
+var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
+  var autoFocus = props.autoFocus,
+      externalClassName = props.className,
+      style = props.style,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useSelect = useSelect(otherProps, ref),
+      button = _useSelect.button,
+      listbox = _useSelect.listbox,
+      popover = _useSelect.popover,
+      text = _useSelect.text,
+      _useSelect$more = _useSelect.more,
+      more = _useSelect$more === void 0 ? 0 : _useSelect$more;
+
+  var container = popover.container,
+      base = _objectWithoutPropertiesLoose(popover, _excluded2);
+
+  var internalRef = useRef(null);
+  var selectDimensions = useBoundingClientRectListener(internalRef);
+  var className = cn('inline-flex relative w-full', {
+    'yt-select--readonly': props.readOnly
+  }, externalClassName);
+  var inputClassname = cn(getInputClasses(props), 'text-left pr-0');
+  useEffect(function () {
+    if (autoFocus && internalRef.current) {
+      internalRef.current.focus();
+    }
+  }, []);
+
+  var renderMultiSelection = function renderMultiSelection() {
+    return createElement(Fragment, null, createElement("span", null, text), more > 0 && createElement(Badge, {
+      className: "ml-2"
+    }, "+" + more));
+  };
+
+  var commonListboxProps = _extends({}, listbox, {
+    className: 'w-auto',
+    style: {
+      minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
+    },
+    tabIndex: popover.visible ? 0 : -1
+  });
+
+  return createElement("span", {
+    className: className,
+    "data-taco": "select",
+    style: style
+  }, createElement(PopoverDisclosure, Object.assign({}, base, {
+    ref: internalRef
+  }), function (_ref) {
+    var disclosureRef = _ref.ref;
+    return createElement("button", Object.assign({
+      ref: disclosureRef
+    }, button, {
+      className: inputClassname
+    }), props.multiselect ? renderMultiSelection() : createElement("span", {
+      className: "flex-grow"
+    }, text), createElement("span", {
+      className: "h-8 w-8 flex items-center justify-center"
+    }, createElement(Icon, {
+      name: popover.visible ? 'chevron-up' : 'chevron-down'
+    })));
+  }), !otherProps.disabled && createElement(Popover, Object.assign({}, base, container), props.multiselect ? createElement(MultiListbox, Object.assign({}, commonListboxProps)) : createElement(Listbox, Object.assign({}, commonListboxProps))));
+});
+var Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
+  var editable = props.editable,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
+
+  if (editable) {
+    return createElement(Combobox, Object.assign({}, otherProps, {
+      inline: true,
+      ref: ref
+    }));
+  }
+
+  return createElement(BaseSelect, Object.assign({}, otherProps, {
+    ref: ref
+  }));
+});
+
+export { Select };
+//# sourceMappingURL=Select.js.map

package/dist/esm/src/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';\nimport cn from 'classnames';\nimport { Popover as BasePopover, PopoverDisclosure } from 'reakit/Popover';\n\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport './Select.css';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n    /**\n     * The text displayed when all options are selected when multiselect mode in on.\n     */\n    allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = ListboxProps &\n    Omit<ComboboxProps, 'inline'> & {\n        /**\n         * Allows to select multiple values.\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\n         */\n        multiselect?: boolean;\n    };\n\nexport type SelectProps = BaseSelectProps & {\n    /**\n     * Creates an editable select.\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\n     * even if there is no value in the input.\n     * After user starts typing, matching data will be displayed.\n     */\n    editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n    const { button, listbox, popover, text, more = 0 } = useSelect(otherProps, ref);\n    const { container, ...base } = popover;\n    const internalRef = React.useRef<HTMLButtonElement>(null);\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'text-left pr-0');\n\n    React.useEffect(() => {\n        if (autoFocus && internalRef.current) {\n            internalRef.current.focus();\n        }\n    }, []);\n\n    const renderMultiSelection = (): React.ReactNode => {\n        return (\n            <>\n                <span>{text}</span>\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n            </>\n        );\n    };\n\n    const commonListboxProps = {\n        ...listbox,\n        className: 'w-auto',\n        style: { minWidth: selectDimensions?.width },\n        tabIndex: popover.visible ? 0 : -1,\n    };\n\n    return (\n        <span className={className} data-taco=\"select\" style={style}>\n            <PopoverDisclosure {...base} ref={internalRef}>\n                {({ ref: disclosureRef }) => (\n                    <button ref={disclosureRef} {...button} className={inputClassname}>\n                        {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow\">{text}</span>}\n                        <span className=\"h-8 w-8 flex items-center justify-center\">\n                            <Icon name={popover.visible ? 'chevron-up' : 'chevron-down'} />\n                        </span>\n                    </button>\n                )}\n            </PopoverDisclosure>\n            {!otherProps.disabled && (\n                <BasePopover {...base} {...container}>\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n                </BasePopover>\n            )}\n        </span>\n    );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { editable, ...otherProps } = props;\n\n    if (editable) {\n        return <Combobox {...otherProps} inline ref={ref} />;\n    }\n\n    return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","text","more","container","base","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","current","focus","renderMultiSelection","Badge","commonListboxProps","minWidth","width","tabIndex","visible","PopoverDisclosure","disclosureRef","multiselect","Icon","name","disabled","BasePopover","MultiListbox","Listbox","Select","editable","Combobox","inline"],"mappings":"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"}