@economic/taco 1.1.13-alpha.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Group/Group.d.ts +11 -1
- package/dist/components/Toast/Toast.d.ts +2 -2
- package/dist/components/Toast/Toaster.d.ts +2 -2
- package/dist/esm/components/Accordion/Accordion.js +31 -34
- package/dist/esm/components/Accordion/Accordion.js.map +1 -1
- package/dist/esm/components/Backdrop/Backdrop.js +2 -2
- package/dist/esm/components/Backdrop/Backdrop.js.map +1 -1
- package/dist/esm/components/Badge/Badge.js +14 -14
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Banner/Banner.js +7 -5
- package/dist/esm/components/Banner/Banner.js.map +1 -1
- package/dist/esm/components/Banner/util.js +1 -1
- package/dist/esm/components/Banner/util.js.map +1 -1
- package/dist/esm/components/Button/Button.js +12 -13
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Button/util.js +18 -23
- package/dist/esm/components/Button/util.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.js +56 -71
- package/dist/esm/components/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/Card/Card.js +13 -12
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Combobox/useCombobox.js +78 -99
- package/dist/esm/components/Combobox/useCombobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +48 -52
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Datepicker/useDatepicker.js +27 -34
- package/dist/esm/components/Datepicker/useDatepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Context.js +4 -4
- package/dist/esm/components/Dialog/Context.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +39 -58
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/components/Content.js +39 -44
- package/dist/esm/components/Dialog/components/Content.js.map +1 -1
- package/dist/esm/components/Dialog/components/Drawer.js +3 -3
- package/dist/esm/components/Dialog/components/Drawer.js.map +1 -1
- package/dist/esm/components/Dialog/components/Extra.js +2 -2
- package/dist/esm/components/Dialog/components/Extra.js.map +1 -1
- package/dist/esm/components/Dialog/components/Trigger.js +2 -2
- package/dist/esm/components/Dialog/components/Trigger.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +6 -8
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +9 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +27 -35
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +8 -9
- package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +7 -8
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Icon/components/index.js +4 -4
- package/dist/esm/components/Icon/components/index.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +9 -11
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +25 -25
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Input/util.js +2 -2
- package/dist/esm/components/Input/util.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +24 -25
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Listbox/ScrollableList.js +65 -84
- package/dist/esm/components/Listbox/ScrollableList.js.map +1 -1
- package/dist/esm/components/Listbox/useListbox.js +53 -61
- package/dist/esm/components/Listbox/useListbox.js.map +1 -1
- package/dist/esm/components/Listbox/useMultiListbox.js +69 -96
- package/dist/esm/components/Listbox/useMultiListbox.js.map +1 -1
- package/dist/esm/components/Listbox/useTypeahead.js +10 -9
- package/dist/esm/components/Listbox/useTypeahead.js.map +1 -1
- package/dist/esm/components/Listbox/util.js +48 -85
- package/dist/esm/components/Listbox/util.js.map +1 -1
- package/dist/esm/components/Menu/Context.js +2 -2
- package/dist/esm/components/Menu/Context.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +16 -34
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Menu/components/Checkbox.js +9 -10
- package/dist/esm/components/Menu/components/Checkbox.js.map +1 -1
- package/dist/esm/components/Menu/components/Content.js +9 -11
- package/dist/esm/components/Menu/components/Content.js.map +1 -1
- package/dist/esm/components/Menu/components/Header.js +3 -3
- package/dist/esm/components/Menu/components/Header.js.map +1 -1
- package/dist/esm/components/Menu/components/Item.js +30 -31
- package/dist/esm/components/Menu/components/Item.js.map +1 -1
- package/dist/esm/components/Menu/components/Link.js +10 -11
- package/dist/esm/components/Menu/components/Link.js.map +1 -1
- package/dist/esm/components/Menu/components/RadioGroup.js +17 -19
- package/dist/esm/components/Menu/components/RadioGroup.js.map +1 -1
- package/dist/esm/components/Menu/components/Separator.js +1 -1
- package/dist/esm/components/Menu/components/Separator.js.map +1 -1
- package/dist/esm/components/Menu/components/Trigger.js +4 -4
- package/dist/esm/components/Menu/components/Trigger.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/PageNumbers.js +23 -28
- package/dist/esm/components/Pagination/PageNumbers.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Pagination/usePagination.js +7 -21
- package/dist/esm/components/Pagination/usePagination.js.map +1 -1
- package/dist/esm/components/Pagination/usePaginationShortcuts.js +13 -14
- package/dist/esm/components/Pagination/usePaginationShortcuts.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Popover/Primitives.js +7 -8
- package/dist/esm/components/Popover/Primitives.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +10 -12
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +30 -31
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Select/useSelect.js +69 -88
- package/dist/esm/components/Select/useSelect.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +12 -19
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +9 -10
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Table/components/BaseTable.js +23 -30
- package/dist/esm/components/Table/components/BaseTable.js.map +1 -1
- package/dist/esm/components/Table/components/PaginatedTable.js +3 -7
- package/dist/esm/components/Table/components/PaginatedTable.js.map +1 -1
- package/dist/esm/components/Table/components/Table.js +18 -25
- package/dist/esm/components/Table/components/Table.js.map +1 -1
- package/dist/esm/components/Table/components/WindowedTable.js +89 -109
- package/dist/esm/components/Table/components/WindowedTable.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowActions.js +123 -148
- package/dist/esm/components/Table/hooks/plugins/useRowActions.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js +57 -61
- package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowEditing.js +39 -36
- package/dist/esm/components/Table/hooks/plugins/useRowEditing.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js +79 -89
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js.map +1 -1
- package/dist/esm/components/Table/hooks/useRowCreation.js +29 -64
- package/dist/esm/components/Table/hooks/useRowCreation.js.map +1 -1
- package/dist/esm/components/Table/hooks/useTable.js +123 -141
- package/dist/esm/components/Table/hooks/useTable.js.map +1 -1
- package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js +23 -27
- package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js.map +1 -1
- package/dist/esm/components/Table/util/renderColumn.js +10 -10
- package/dist/esm/components/Table/util/renderColumn.js.map +1 -1
- package/dist/esm/components/Table/util/renderRow.js +37 -46
- package/dist/esm/components/Table/util/renderRow.js.map +1 -1
- package/dist/esm/components/Table/util/rowIndexPath.js +14 -16
- package/dist/esm/components/Table/util/rowIndexPath.js.map +1 -1
- package/dist/esm/components/Table/util/sortTypes.js +23 -31
- package/dist/esm/components/Table/util/sortTypes.js.map +1 -1
- package/dist/esm/components/Table/util.js +29 -41
- package/dist/esm/components/Table/util.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +25 -27
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +11 -9
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toast.js +27 -23
- package/dist/esm/components/Toast/Toast.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +88 -118
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Toast/util.js +2 -2
- package/dist/esm/components/Toast/util.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +7 -8
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +46 -53
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +26 -36
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.css +1 -9
- package/dist/esm/index.js +1 -1
- package/dist/esm/primitives/Button.js +9 -13
- package/dist/esm/primitives/Button.js.map +1 -1
- package/dist/esm/utils/date.js +20 -40
- package/dist/esm/utils/date.js.map +1 -1
- package/dist/esm/utils/hooks/useBoundingClientRectListener.js +12 -20
- package/dist/esm/utils/hooks/useBoundingClientRectListener.js.map +1 -1
- package/dist/esm/utils/hooks/useDraggable.js +16 -17
- package/dist/esm/utils/hooks/useDraggable.js.map +1 -1
- package/dist/esm/utils/hooks/useDropTarget.js +7 -10
- package/dist/esm/utils/hooks/useDropTarget.js.map +1 -1
- package/dist/esm/utils/hooks/useListKeyboardNavigation.js +15 -30
- package/dist/esm/utils/hooks/useListKeyboardNavigation.js.map +1 -1
- package/dist/esm/utils/hooks/useListScrollTo.js +9 -9
- package/dist/esm/utils/hooks/useListScrollTo.js.map +1 -1
- package/dist/esm/utils/hooks/useOnClickOutside.js +6 -8
- package/dist/esm/utils/hooks/useOnClickOutside.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/esm/utils/hooks/useTimer.js +9 -17
- package/dist/esm/utils/hooks/useTimer.js.map +1 -1
- package/dist/esm/utils/input.js +8 -12
- package/dist/esm/utils/input.js.map +1 -1
- package/dist/esm/utils/mergeRefs.js +2 -2
- package/dist/esm/utils/mergeRefs.js.map +1 -1
- package/dist/esm/utils/taillwind.js +2 -2
- package/dist/esm/utils/taillwind.js.map +1 -1
- package/dist/index.css +1 -9
- package/dist/taco.cjs.development.js +2334 -2883
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/hooks/useListKeyboardNavigation.d.ts +1 -1
- package/package.json +4 -5
- package/types.json +10 -3
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js +0 -34
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import '
|
2
|
+
import { Orientation } from '../../types';
|
3
3
|
export declare type GroupProps = React.HTMLAttributes<HTMLElement> & {
|
4
4
|
/**
|
5
5
|
* Change what html tag element will render.
|
@@ -8,6 +8,11 @@ export declare type GroupProps = React.HTMLAttributes<HTMLElement> & {
|
|
8
8
|
as?: 'div' | 'span' | 'nav';
|
9
9
|
/** Content should be composed of other Taco elements */
|
10
10
|
children: React.ReactNode;
|
11
|
+
/**
|
12
|
+
* Define orientation of grouping.
|
13
|
+
* @defaultValue horizontal
|
14
|
+
*/
|
15
|
+
orientation?: Orientation;
|
11
16
|
};
|
12
17
|
export declare const Group: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
13
18
|
/**
|
@@ -17,4 +22,9 @@ export declare const Group: React.ForwardRefExoticComponent<React.HTMLAttributes
|
|
17
22
|
as?: "div" | "span" | "nav" | undefined;
|
18
23
|
/** Content should be composed of other Taco elements */
|
19
24
|
children: React.ReactNode;
|
25
|
+
/**
|
26
|
+
* Define orientation of grouping.
|
27
|
+
* @defaultValue horizontal
|
28
|
+
*/
|
29
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
20
30
|
} & React.RefAttributes<HTMLDivElement>>;
|
@@ -15,14 +15,14 @@ export declare type ToastOptions = {
|
|
15
15
|
*/
|
16
16
|
type?: ToastType;
|
17
17
|
};
|
18
|
+
export declare type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;
|
18
19
|
export declare type ToastProps = {
|
19
20
|
/** Provide a unique id for toast */
|
20
21
|
id: string;
|
21
22
|
/**
|
22
23
|
* Content can be any valid react node, for e.g. a `div`, or a simple text.
|
23
|
-
* Note that content can also be `null`, resulting in a slimmer version of your toast with a vertically centered title
|
24
24
|
*/
|
25
|
-
content:
|
25
|
+
content: ToastContent;
|
26
26
|
/** Additional options to define your toast */
|
27
27
|
options: ToastOptions;
|
28
28
|
/**
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { ToastOptions } from './Toast';
|
2
|
+
import { ToastOptions, ToastContent } from './Toast';
|
3
3
|
import './Toast.css';
|
4
|
-
declare type ToastCreator<T> = (content:
|
4
|
+
declare type ToastCreator<T> = (content: ToastContent | ((close: () => void) => ToastContent), options?: ToastOptions) => T;
|
5
5
|
export interface Toaster<T> extends ToastCreator<T> {
|
6
6
|
success: ToastCreator<T>;
|
7
7
|
error: ToastCreator<T>;
|
@@ -1,17 +1,14 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import React__default from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Root, Header, Trigger as Trigger$1, Content as Content$1, Item as Item$1 } from '@radix-ui/react-accordion';
|
5
4
|
import { Icon } from '../Icon/Icon.js';
|
6
5
|
|
7
|
-
|
8
|
-
_excluded2 = ["id", "defaultId", "onChange", "as"];
|
9
|
-
var AccordionContext = /*#__PURE__*/React__default.createContext({
|
6
|
+
const AccordionContext = /*#__PURE__*/React__default.createContext({
|
10
7
|
as: 'h2'
|
11
8
|
});
|
12
|
-
|
13
|
-
|
14
|
-
|
9
|
+
const StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionStyledTrigger(props, ref) {
|
10
|
+
const isExpanded = !!props['aria-expanded'];
|
11
|
+
const className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue focus:yt-focus', props.className);
|
15
12
|
return React__default.createElement("button", Object.assign({}, props, {
|
16
13
|
ref: ref,
|
17
14
|
className: className
|
@@ -19,12 +16,13 @@ var StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionSty
|
|
19
16
|
name: isExpanded ? 'chevron-up' : 'chevron-down'
|
20
17
|
}));
|
21
18
|
});
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
19
|
+
const Trigger = /*#__PURE__*/React__default.forwardRef(function AccordionTrigger(props, ref) {
|
20
|
+
const {
|
21
|
+
children
|
22
|
+
} = props;
|
23
|
+
const {
|
24
|
+
as: Heading
|
25
|
+
} = React__default.useContext(AccordionContext);
|
28
26
|
return React__default.createElement(Header, {
|
29
27
|
asChild: true
|
30
28
|
}, React__default.createElement(Heading, {
|
@@ -34,35 +32,34 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function AccordionTrigger(p
|
|
34
32
|
asChild: true
|
35
33
|
}, React__default.createElement(StyledTrigger, null, children))));
|
36
34
|
});
|
37
|
-
|
35
|
+
const Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(props, ref) {
|
38
36
|
return React__default.createElement(Content$1, Object.assign({}, props, {
|
39
37
|
ref: ref
|
40
38
|
}));
|
41
39
|
});
|
42
40
|
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
41
|
+
const Item = props => {
|
42
|
+
const {
|
43
|
+
id,
|
44
|
+
...otherProps
|
45
|
+
} = props;
|
47
46
|
return React__default.createElement(Item$1, Object.assign({}, otherProps, {
|
48
47
|
value: id
|
49
48
|
}));
|
50
49
|
};
|
51
50
|
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
}, [as]);
|
65
|
-
var valueProps;
|
51
|
+
const Accordion = props => {
|
52
|
+
const {
|
53
|
+
id,
|
54
|
+
defaultId,
|
55
|
+
onChange,
|
56
|
+
as = 'h2',
|
57
|
+
...otherProps
|
58
|
+
} = props;
|
59
|
+
const context = React__default.useMemo(() => ({
|
60
|
+
as
|
61
|
+
}), [as]);
|
62
|
+
let valueProps;
|
66
63
|
|
67
64
|
if (defaultId) {
|
68
65
|
valueProps = {
|
@@ -75,8 +72,8 @@ var Accordion = function Accordion(props) {
|
|
75
72
|
};
|
76
73
|
}
|
77
74
|
|
78
|
-
|
79
|
-
|
75
|
+
const type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';
|
76
|
+
const className = cn('divide-y divide-grey', props.className);
|
80
77
|
return React__default.createElement(AccordionContext.Provider, {
|
81
78
|
value: context
|
82
79
|
}, React__default.createElement(Root, Object.assign({}, otherProps, valueProps, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { Icon } from '../Icon/Icon';\n\ntype AccordionContext = {\n as: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n as: 'h2',\n});\n\nexport type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;\n\nconst StyledTrigger = React.forwardRef(function AccordionStyledTrigger(\n props: AccordionPrimitive.AccordionTriggerProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const isExpanded = !!props['aria-expanded'];\n\n const className = cn(\n 'w-full inline-flex justify-between items-center align-middle',\n 'focus:rounded-sm focus:border-blue focus:yt-focus',\n props.className\n );\n\n return (\n <button {...props} ref={ref} className={className}>\n {props.children}\n <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />\n </button>\n );\n});\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const { children } = props;\n const { as: Heading } = React.useContext(AccordionContext);\n\n return (\n <AccordionPrimitive.Header asChild>\n <Heading className=\"my-3\">\n <AccordionPrimitive.Trigger ref={ref} asChild>\n <StyledTrigger>{children}</StyledTrigger>\n </AccordionPrimitive.Trigger>\n </Heading>\n </AccordionPrimitive.Header>\n );\n});\n\nexport type AccordionContentProps = React.HTMLAttributes<HTMLElement>;\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n return <AccordionPrimitive.Content {...props} ref={ref} />;\n});\n\nexport type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n id: string;\n disabled?: boolean;\n};\nconst Item = (props: AccordionItemProps) => {\n const { id, ...otherProps } = props;\n return <AccordionPrimitive.Item {...otherProps} value={id} />;\n};\n\ntype AccordionBaseProps = {\n children: React.ReactNode[];\n\n /** Change what heading element accordion regions will render */\n as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n /** Additional classes for Accordion root element */\n className?: string;\n};\n\nexport interface AccordionUncontrolledProps extends AccordionBaseProps {\n /** Default expanded accordion(s) */\n defaultId: string | string[];\n\n id?: never;\n onChange?: never;\n}\n\nexport interface AccordionMultipleControlledProps extends AccordionBaseProps {\n /** Expanded accordions */\n id: string[];\n\n /** onChange function to receive ids of expanded accordions */\n onChange: (id: string[]) => void;\n\n defaultId?: never;\n}\nexport interface AccordionSingleControlledProps extends AccordionBaseProps {\n /** Expanded accordion */\n id: string;\n\n /** onChange function to receive id of expanded accordion */\n onChange: (id: string) => void;\n\n defaultId?: never;\n}\n\nexport type AccordionProps = AccordionUncontrolledProps | AccordionMultipleControlledProps | AccordionSingleControlledProps;\n\nexport const Accordion = (props: AccordionProps) => {\n const { id, defaultId, onChange, as = 'h2', ...otherProps } = props;\n const context = React.useMemo(() => ({ as }), [as]);\n\n let valueProps;\n\n if (defaultId) {\n valueProps = {\n defaultValue: defaultId || undefined,\n };\n } else {\n valueProps = {\n onValueChange: onChange,\n value: id || undefined,\n };\n }\n\n const type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';\n const className = cn('divide-y divide-grey', props.className);\n\n return (\n <AccordionContext.Provider value={context}>\n <AccordionPrimitive.Root {...otherProps} {...valueProps} data-taco=\"accordion\" className={className} type={type} />\n </AccordionContext.Provider>\n );\n};\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["AccordionContext","React","createContext","as","StyledTrigger","forwardRef","AccordionStyledTrigger","props","ref","isExpanded","className","cn","children","Icon","name","Trigger","AccordionTrigger","
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { Icon } from '../Icon/Icon';\n\ntype AccordionContext = {\n as: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n as: 'h2',\n});\n\nexport type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;\n\nconst StyledTrigger = React.forwardRef(function AccordionStyledTrigger(\n props: AccordionPrimitive.AccordionTriggerProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const isExpanded = !!props['aria-expanded'];\n\n const className = cn(\n 'w-full inline-flex justify-between items-center align-middle',\n 'focus:rounded-sm focus:border-blue focus:yt-focus',\n props.className\n );\n\n return (\n <button {...props} ref={ref} className={className}>\n {props.children}\n <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />\n </button>\n );\n});\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const { children } = props;\n const { as: Heading } = React.useContext(AccordionContext);\n\n return (\n <AccordionPrimitive.Header asChild>\n <Heading className=\"my-3\">\n <AccordionPrimitive.Trigger ref={ref} asChild>\n <StyledTrigger>{children}</StyledTrigger>\n </AccordionPrimitive.Trigger>\n </Heading>\n </AccordionPrimitive.Header>\n );\n});\n\nexport type AccordionContentProps = React.HTMLAttributes<HTMLElement>;\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n return <AccordionPrimitive.Content {...props} ref={ref} />;\n});\n\nexport type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n id: string;\n disabled?: boolean;\n};\nconst Item = (props: AccordionItemProps) => {\n const { id, ...otherProps } = props;\n return <AccordionPrimitive.Item {...otherProps} value={id} />;\n};\n\ntype AccordionBaseProps = {\n children: React.ReactNode[];\n\n /** Change what heading element accordion regions will render */\n as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n /** Additional classes for Accordion root element */\n className?: string;\n};\n\nexport interface AccordionUncontrolledProps extends AccordionBaseProps {\n /** Default expanded accordion(s) */\n defaultId: string | string[];\n\n id?: never;\n onChange?: never;\n}\n\nexport interface AccordionMultipleControlledProps extends AccordionBaseProps {\n /** Expanded accordions */\n id: string[];\n\n /** onChange function to receive ids of expanded accordions */\n onChange: (id: string[]) => void;\n\n defaultId?: never;\n}\nexport interface AccordionSingleControlledProps extends AccordionBaseProps {\n /** Expanded accordion */\n id: string;\n\n /** onChange function to receive id of expanded accordion */\n onChange: (id: string) => void;\n\n defaultId?: never;\n}\n\nexport type AccordionProps = AccordionUncontrolledProps | AccordionMultipleControlledProps | AccordionSingleControlledProps;\n\nexport const Accordion = (props: AccordionProps) => {\n const { id, defaultId, onChange, as = 'h2', ...otherProps } = props;\n const context = React.useMemo(() => ({ as }), [as]);\n\n let valueProps;\n\n if (defaultId) {\n valueProps = {\n defaultValue: defaultId || undefined,\n };\n } else {\n valueProps = {\n onValueChange: onChange,\n value: id || undefined,\n };\n }\n\n const type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';\n const className = cn('divide-y divide-grey', props.className);\n\n return (\n <AccordionContext.Provider value={context}>\n <AccordionPrimitive.Root {...otherProps} {...valueProps} data-taco=\"accordion\" className={className} type={type} />\n </AccordionContext.Provider>\n );\n};\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["AccordionContext","React","createContext","as","StyledTrigger","forwardRef","AccordionStyledTrigger","props","ref","isExpanded","className","cn","children","Icon","name","Trigger","AccordionTrigger","Heading","useContext","AccordionPrimitive","asChild","Content","AccordionContent","Item","id","otherProps","value","Accordion","defaultId","onChange","context","useMemo","valueProps","defaultValue","undefined","onValueChange","type","Array","isArray","Provider"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,gBAAGC,cAAK,CAACC,aAAN,CAAsC;EAC3DC,EAAE,EAAE;AADuD,CAAtC,CAAzB;AAMA,MAAMC,aAAa,gBAAGH,cAAK,CAACI,UAAN,CAAiB,SAASC,sBAAT,CACnCC,KADmC,EAEnCC,GAFmC;EAInC,MAAMC,UAAU,GAAG,CAAC,CAACF,KAAK,CAAC,eAAD,CAA1B;EAEA,MAAMG,SAAS,GAAGC,EAAE,CAChB,8DADgB,EAEhB,mDAFgB,EAGhBJ,KAAK,CAACG,SAHU,CAApB;EAMA,OACIT,4BAAA,SAAA,oBAAYM;IAAOC,GAAG,EAAEA;IAAKE,SAAS,EAAEA;IAAxC,EACKH,KAAK,CAACK,QADX,EAEIX,4BAAA,CAACY,IAAD;IAAMC,IAAI,EAAEL,UAAU,GAAG,YAAH,GAAkB;GAAxC,CAFJ,CADJ;AAMH,CAlBqB,CAAtB;AAoBA,MAAMM,OAAO,gBAAGd,cAAK,CAACI,UAAN,CAAiB,SAASW,gBAAT,CAA0BT,KAA1B,EAAwDC,GAAxD;EAC7B,MAAM;IAAEI;MAAaL,KAArB;EACA,MAAM;IAAEJ,EAAE,EAAEc;MAAYhB,cAAK,CAACiB,UAAN,CAAiBlB,gBAAjB,CAAxB;EAEA,OACIC,4BAAA,CAACkB,MAAD;IAA2BC,OAAO;GAAlC,EACInB,4BAAA,CAACgB,OAAD;IAASP,SAAS,EAAC;GAAnB,EACIT,4BAAA,CAACkB,SAAD;IAA4BX,GAAG,EAAEA;IAAKY,OAAO;GAA7C,EACInB,4BAAA,CAACG,aAAD,MAAA,EAAgBQ,QAAhB,CADJ,CADJ,CADJ,CADJ;AASH,CAbe,CAAhB;AAgBA,MAAMS,OAAO,gBAAGpB,cAAK,CAACI,UAAN,CAAiB,SAASiB,gBAAT,CAA0Bf,KAA1B,EAAwDC,GAAxD;EAC7B,OAAOP,4BAAA,CAACkB,SAAD,oBAAgCZ;IAAOC,GAAG,EAAEA;IAA5C,CAAP;AACH,CAFe,CAAhB;;AAQA,MAAMe,IAAI,GAAIhB,KAAD;EACT,MAAM;IAAEiB,EAAF;IAAM,GAAGC;MAAelB,KAA9B;EACA,OAAON,4BAAA,CAACkB,MAAD,oBAA6BM;IAAYC,KAAK,EAAEF;IAAhD,CAAP;AACH,CAHD;;MA4CaG,SAAS,GAAIpB,KAAD;EACrB,MAAM;IAAEiB,EAAF;IAAMI,SAAN;IAAiBC,QAAjB;IAA2B1B,EAAE,GAAG,IAAhC;IAAsC,GAAGsB;MAAelB,KAA9D;EACA,MAAMuB,OAAO,GAAG7B,cAAK,CAAC8B,OAAN,CAAc,OAAO;IAAE5B;GAAT,CAAd,EAA8B,CAACA,EAAD,CAA9B,CAAhB;EAEA,IAAI6B,UAAJ;;EAEA,IAAIJ,SAAJ,EAAe;IACXI,UAAU,GAAG;MACTC,YAAY,EAAEL,SAAS,IAAIM;KAD/B;GADJ,MAIO;IACHF,UAAU,GAAG;MACTG,aAAa,EAAEN,QADN;MAETH,KAAK,EAAEF,EAAE,IAAIU;KAFjB;;;EAMJ,MAAME,IAAI,GAAGC,KAAK,CAACC,OAAN,CAAcN,UAAU,CAACC,YAAzB,KAA0CI,KAAK,CAACC,OAAN,CAAcN,UAAU,CAACN,KAAzB,CAA1C,GAA4E,UAA5E,GAAyF,QAAtG;EACA,MAAMhB,SAAS,GAAGC,EAAE,CAAC,sBAAD,EAAyBJ,KAAK,CAACG,SAA/B,CAApB;EAEA,OACIT,4BAAA,CAACD,gBAAgB,CAACuC,QAAlB;IAA2Bb,KAAK,EAAEI;GAAlC,EACI7B,4BAAA,CAACkB,IAAD,oBAA6BM,YAAgBO;iBAAsB;IAAYtB,SAAS,EAAEA;IAAW0B,IAAI,EAAEA;IAA3G,CADJ,CADJ;AAKH;AAEDT,SAAS,CAACJ,IAAV,GAAiBA,IAAjB;AACAI,SAAS,CAACZ,OAAV,GAAoBA,OAApB;AACAY,SAAS,CAACN,OAAV,GAAoBA,OAApB;;;;"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { forwardRef, createElement } from 'react';
|
2
2
|
import cn from 'classnames';
|
3
3
|
|
4
|
-
|
5
|
-
|
4
|
+
const Backdrop = /*#__PURE__*/forwardRef(function Backdrop(props, ref) {
|
5
|
+
const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] aria-hidden:hidden z-[996]', props.className);
|
6
6
|
return createElement("div", Object.assign({}, props, {
|
7
7
|
className: className,
|
8
8
|
ref: ref
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Backdrop.js","sources":["../../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, ref) {\n const className = cn(\n 'fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] aria-hidden:hidden z-[996]',\n props.className\n );\n\n return <div {...props} className={className} ref={ref} />;\n});\n"],"names":["Backdrop","React","props","ref","className","cn"],"mappings":";;;
|
1
|
+
{"version":3,"file":"Backdrop.js","sources":["../../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, ref) {\n const className = cn(\n 'fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] aria-hidden:hidden z-[996]',\n props.className\n );\n\n return <div {...props} className={className} ref={ref} />;\n});\n"],"names":["Backdrop","React","props","ref","className","cn"],"mappings":";;;MAKaA,QAAQ,gBAAGC,UAAA,CAAgD,SAASD,QAAT,CAAkBE,KAAlB,EAAyBC,GAAzB;EACpE,MAAMC,SAAS,GAAGC,EAAE,CAChB,iGADgB,EAEhBH,KAAK,CAACE,SAFU,CAApB;EAKA,OAAOH,aAAA,MAAA,oBAASC;IAAOE,SAAS,EAAEA;IAAWD,GAAG,EAAEA;IAA3C,CAAP;AACH,CAPuB;;;;"}
|
@@ -1,22 +1,22 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
|
5
4
|
import { getOutlineClasses, getStateClasses } from '../../utils/taillwind.js';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
6
|
+
const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
|
7
|
+
const {
|
8
|
+
children,
|
9
|
+
compact = false,
|
10
|
+
outline = false,
|
11
|
+
state,
|
12
|
+
...otherProps
|
13
|
+
} = props;
|
14
|
+
const className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
|
15
|
+
[getOutlineClasses(state)]: outline,
|
16
|
+
[`border-transparent ${getStateClasses(state)}`]: !outline,
|
17
|
+
'h-2 w-2 min-w-0': compact,
|
18
|
+
'h-5 py-0 px-1.5': !compact
|
19
|
+
}, props.className);
|
20
20
|
return createElement("span", Object.assign({}, otherProps, {
|
21
21
|
"aria-atomic": "true",
|
22
22
|
"aria-live": "polite",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { State } from '../../types';\nimport { getStateClasses, getOutlineClasses } from '../../utils/taillwind';\nimport './Badge.css';\n\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n /** Content should be a numerical value or tag/status like text **/\n children: React.ReactNode;\n /** Show compact version **/\n compact?: boolean;\n /** Show outlined version **/\n outline?: boolean;\n /** State will change the style of the badge **/\n state?: State;\n};\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n const { children, compact = false, outline = false, state, ...otherProps } = props;\n const className = cn(\n 'rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { State } from '../../types';\nimport { getStateClasses, getOutlineClasses } from '../../utils/taillwind';\nimport './Badge.css';\n\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n /** Content should be a numerical value or tag/status like text **/\n children: React.ReactNode;\n /** Show compact version **/\n compact?: boolean;\n /** Show outlined version **/\n outline?: boolean;\n /** State will change the style of the badge **/\n state?: State;\n};\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n const { children, compact = false, outline = false, state, ...otherProps } = props;\n const className = cn(\n 'rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n {\n [getOutlineClasses(state)]: outline,\n [`border-transparent ${getStateClasses(state)}`]: !outline,\n 'h-2 w-2 min-w-0': compact,\n 'h-5 py-0 px-1.5': !compact, // custom padding keeps single digits in a perfect circle\n },\n props.className\n );\n\n return (\n <span\n {...otherProps}\n aria-atomic=\"true\"\n aria-live=\"polite\"\n className={className}\n data-taco=\"badge\"\n ref={ref}\n role=\"status\"\n title={props['aria-label']}\n >\n {compact ? <VisuallyHidden>{children}</VisuallyHidden> : children}\n </span>\n );\n});\n"],"names":["Badge","React","props","ref","children","compact","outline","state","otherProps","className","cn","getOutlineClasses","getStateClasses","role","title","VisuallyHidden"],"mappings":";;;;;MAkBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,MAAM;IAAEC,QAAF;IAAYC,OAAO,GAAG,KAAtB;IAA6BC,OAAO,GAAG,KAAvC;IAA8CC,KAA9C;IAAqD,GAAGC;MAAeN,KAA7E;EACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,2HADgB,EAEhB;IACI,CAACC,iBAAiB,CAACJ,KAAD,CAAlB,GAA4BD,OADhC;IAEI,uBAAuBM,eAAe,CAACL,KAAD,GAAtC,GAAkD,CAACD,OAFvD;IAGI,mBAAmBD,OAHvB;IAII,mBAAmB,CAACA;GANR,EAQhBH,KAAK,CAACO,SARU,CAApB;EAWA,OACIR,aAAA,OAAA,oBACQO;mBACQ;iBACF;IACVC,SAAS,EAAEA;iBACD;IACVN,GAAG,EAAEA;IACLU,IAAI,EAAC;IACLC,KAAK,EAAEZ,KAAK,CAAC,YAAD;IARhB,EAUKG,OAAO,GAAGJ,aAAA,CAACc,cAAD,MAAA,EAAiBX,QAAjB,CAAH,GAAiDA,QAV7D,CADJ;AAcH,CA3BoB;;;;"}
|
@@ -3,11 +3,13 @@ import cn from 'classnames';
|
|
3
3
|
import { getBannerIcon } from './util.js';
|
4
4
|
import { IconButton } from '../IconButton/IconButton.js';
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
6
|
+
const Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
|
7
|
+
const {
|
8
|
+
children,
|
9
|
+
state,
|
10
|
+
onClose
|
11
|
+
} = props;
|
12
|
+
const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
|
11
13
|
return createElement("div", {
|
12
14
|
className: className,
|
13
15
|
"data-taco": "banner",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Content can be any react element, for e.g. a `div` */\n children: React.ReactNode;\n /** State will change the icon displayed in banner */\n state: State;\n onClose?: () => void;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n const { children, state, onClose } = props;\n const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n return (\n <div className={className} data-taco=\"banner\" ref={ref}>\n {getBannerIcon(state)}\n {children}\n {onClose ? (\n <IconButton className=\"ml-auto -mr-2 self-start\" icon=\"close\" appearance=\"discrete\" onClick={onClose} />\n ) : null}\n </div>\n );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","className","cn","getBannerIcon","IconButton","icon","appearance","onClick"],"mappings":";;;;;
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Content can be any react element, for e.g. a `div` */\n children: React.ReactNode;\n /** State will change the icon displayed in banner */\n state: State;\n onClose?: () => void;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n const { children, state, onClose } = props;\n const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n return (\n <div className={className} data-taco=\"banner\" ref={ref}>\n {getBannerIcon(state)}\n {children}\n {onClose ? (\n <IconButton className=\"ml-auto -mr-2 self-start\" icon=\"close\" appearance=\"discrete\" onClick={onClose} />\n ) : null}\n </div>\n );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","className","cn","getBannerIcon","IconButton","icon","appearance","onClick"],"mappings":";;;;;MAcaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;EACnC,MAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC;MAAYJ,KAArC;EACA,MAAMK,SAAS,GAAGC,EAAE,CAAC,8EAAD,EAAiFN,KAAK,CAACK,SAAvF,CAApB;EAEA,OACIN,aAAA,MAAA;IAAKM,SAAS,EAAEA;iBAAqB;IAASJ,GAAG,EAAEA;GAAnD,EACKM,aAAa,CAACJ,KAAD,CADlB,EAEKD,QAFL,EAGKE,OAAO,GACJL,aAAA,CAACS,UAAD;IAAYH,SAAS,EAAC;IAA2BI,IAAI,EAAC;IAAQC,UAAU,EAAC;IAAWC,OAAO,EAAEP;GAA7F,CADI,GAEJ,IALR,CADJ;AASH,CAbqB;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n switch (type) {\n case 'success':\n return <Icon name=\"tick\" className=\"yt-green-solid mt-1 self-start rounded-full\" />;\n\n case 'error':\n return <Icon name=\"warning\" className=\"yt-red-solid mt-1 self-start rounded-full\" />;\n\n case 'warning':\n return <Icon name=\"warning\" className=\"yt-yellow-solid mt-1 self-start rounded-full\" />;\n\n case 'information':\n return <Icon name=\"info\" className=\"yt-blue-solid mt-1 self-start rounded-full\" />;\n\n default:\n return null;\n }\n};\n"],"names":["getBannerIcon","type","React","Icon","name","className"],"mappings":";;;
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n switch (type) {\n case 'success':\n return <Icon name=\"tick\" className=\"yt-green-solid mt-1 self-start rounded-full\" />;\n\n case 'error':\n return <Icon name=\"warning\" className=\"yt-red-solid mt-1 self-start rounded-full\" />;\n\n case 'warning':\n return <Icon name=\"warning\" className=\"yt-yellow-solid mt-1 self-start rounded-full\" />;\n\n case 'information':\n return <Icon name=\"info\" className=\"yt-blue-solid mt-1 self-start rounded-full\" />;\n\n default:\n return null;\n }\n};\n"],"names":["getBannerIcon","type","React","Icon","name","className"],"mappings":";;;MAIaA,aAAa,GAAIC,IAAD;EACzB,QAAQA,IAAR;IACI,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAC;OAA5B,CAAP;;IAEJ,KAAK,OAAL;MACI,OAAOH,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAC;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOH,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAC;OAA/B,CAAP;;IAEJ,KAAK,aAAL;MACI,OAAOH,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAC;OAA5B,CAAP;;IAEJ;MACI,OAAO,IAAP;;AAEX;;;;"}
|
@@ -1,35 +1,34 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Icon } from '../Icon/Icon.js';
|
5
4
|
import { getButtonClasses, getAppearanceClasses, createButton } from './util.js';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
6
|
+
const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
|
7
|
+
const {
|
8
|
+
fluid,
|
9
|
+
...otherProps
|
10
|
+
} = props;
|
11
|
+
const className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
|
13
12
|
'cursor-not-allowed opacity-50': props.disabled,
|
14
13
|
'focus:yt-focus active:focus:yt-focus': !props.disabled,
|
15
14
|
'w-full': fluid
|
16
15
|
}, props.className);
|
17
|
-
|
16
|
+
let children = otherProps.children; // add a chevron icon to menu buttons
|
18
17
|
|
19
18
|
if (typeof otherProps.menu === 'function') {
|
20
|
-
children = Array.isArray(children) ? [
|
19
|
+
children = Array.isArray(children) ? [...children, createElement(Icon, {
|
21
20
|
key: "chevron-down",
|
22
21
|
name: "chevron-down"
|
23
|
-
})]
|
22
|
+
})] : [children, createElement(Icon, {
|
24
23
|
key: "chevron-down",
|
25
24
|
name: "chevron-down"
|
26
25
|
})];
|
27
26
|
}
|
28
27
|
|
29
|
-
return createButton(
|
30
|
-
children
|
28
|
+
return createButton({ ...otherProps,
|
29
|
+
children,
|
31
30
|
'data-taco': 'button'
|
32
|
-
}
|
31
|
+
}, className, ref);
|
33
32
|
});
|
34
33
|
|
35
34
|
export { Button };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = 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 /** 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;\n};\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n const { fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(otherProps.appearance),\n 'rounded px-3',\n {\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n 'w-full': fluid,\n },\n props.className\n );\n\n let children = otherProps.children;\n\n // add a chevron icon to menu buttons\n if (typeof otherProps.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 return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","children","menu","Array","isArray","Icon","key","name","createButton"],"mappings":"
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = 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 /** 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;\n};\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n const { fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(otherProps.appearance),\n 'rounded px-3',\n {\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n 'w-full': fluid,\n },\n props.className\n );\n\n let children = otherProps.children;\n\n // add a chevron icon to menu buttons\n if (typeof otherProps.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 return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","children","menu","Array","isArray","Icon","key","name","createButton"],"mappings":";;;;;MAqCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;EAInC,MAAM;IAAEC,KAAF;IAAS,GAAGC;MAAeH,KAAjC;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;IACI,iCAAiCR,KAAK,CAACS,QAD3C;IAEI,wCAAwC,CAACT,KAAK,CAACS,QAFnD;IAGI,UAAUP;GAPE,EAShBF,KAAK,CAACI,SATU,CAApB;EAYA,IAAIM,QAAQ,GAAGP,UAAU,CAACO,QAA1B;;EAGA,IAAI,OAAOP,UAAU,CAACQ,IAAlB,KAA2B,UAA/B,EAA2C;IACvCD,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,IACL,CAAC,GAAGA,QAAJ,EAAcX,aAAA,CAACe,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CAAd,CADK,GAEL,CAACN,QAAD,EAAWX,aAAA,CAACe,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CAAX,CAFN;;;EAKJ,OAAOC,YAAY,CAAC,EAAE,GAAGd,UAAL;IAAiBO,QAAjB;IAA2B,aAAa;GAAzC,EAAqDN,SAArD,EAAgEH,GAAhE,CAAnB;AACH,CA3BqB;;;;"}
|
@@ -1,49 +1,44 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import React__default from 'react';
|
3
2
|
import { Button } from '../../primitives/Button.js';
|
4
3
|
import { Tooltip } from '../Tooltip/Tooltip.js';
|
5
4
|
|
6
|
-
|
7
|
-
var getButtonClasses = function getButtonClasses() {
|
5
|
+
const getButtonClasses = () => {
|
8
6
|
return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';
|
9
7
|
};
|
10
|
-
|
11
|
-
if (icon === void 0) {
|
12
|
-
icon = false;
|
13
|
-
}
|
14
|
-
|
8
|
+
const getAppearanceClasses = (value, icon = false) => {
|
15
9
|
switch (value) {
|
16
10
|
case 'primary':
|
17
|
-
return
|
11
|
+
return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;
|
18
12
|
|
19
13
|
case 'danger':
|
20
|
-
return
|
14
|
+
return `yt-red-solid focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;
|
21
15
|
|
22
16
|
case 'ghost':
|
23
|
-
return
|
17
|
+
return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;
|
24
18
|
|
25
19
|
case 'discrete':
|
26
20
|
{
|
27
21
|
if (icon) {
|
28
|
-
return
|
22
|
+
return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:text-black `;
|
29
23
|
}
|
30
24
|
|
31
|
-
return
|
25
|
+
return `yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;
|
32
26
|
}
|
33
27
|
|
34
28
|
default:
|
35
|
-
return
|
29
|
+
return `yt-grey-solid focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;
|
36
30
|
}
|
37
31
|
};
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
32
|
+
const createButton = (props, className, ref) => {
|
33
|
+
const {
|
34
|
+
dialog,
|
35
|
+
hanger,
|
36
|
+
menu,
|
37
|
+
popover,
|
38
|
+
tooltip,
|
39
|
+
...otherProps
|
40
|
+
} = props;
|
41
|
+
let button = React__default.createElement(Button, Object.assign({}, otherProps, {
|
47
42
|
className: className,
|
48
43
|
ref: ref
|
49
44
|
}));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;\n\n case 'danger':\n return `yt-red-solid focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\n\n case 'ghost':\n return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:text-black `;\n }\n\n return `yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\n }\n\n default:\n return `yt-grey-solid focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\n }\n};\n\nexport const createButton = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button, appearance: otherProps.appearance });\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 if (tooltip) {\n button = <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","appearance","anchor","Tooltip","title"],"mappings":"
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;\n\n case 'danger':\n return `yt-red-solid focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\n\n case 'ghost':\n return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:text-black `;\n }\n\n return `yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\n }\n\n default:\n return `yt-grey-solid focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\n }\n};\n\nexport const createButton = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button, appearance: otherProps.appearance });\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 if (tooltip) {\n button = <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","appearance","anchor","Tooltip","title"],"mappings":";;;;MAKaA,gBAAgB,GAAG;EAC5B,OAAO,iHAAP;AACH;MAEYC,oBAAoB,GAAG,CAACC,KAAD,EAAgCC,IAAI,GAAG,KAAvC;EAChC,QAAQD,KAAR;IACI,KAAK,SAAL;MACI,4RAAA;;IAEJ,KAAK,QAAL;MACI,2NAAA;;IAEJ,KAAK,OAAL;MACI,sfAAA;;IAEJ,KAAK,UAAL;MAAiB;QACb,IAAIC,IAAJ,EAAU;UACN,wLAAA;;;QAGJ,4JAAA;;;IAGJ;MACI,0NAAA;;AAEX;MAEYC,YAAY,GAAG,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;EAKxB,MAAM;IAAEC,MAAF;IAAUC,MAAV;IAAkBC,IAAlB;IAAwBC,OAAxB;IAAiCC,OAAjC;IAA0C,GAAGC;MAAeR,KAAlE;EAEA,IAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;IAAYP,SAAS,EAAEA;IAAWC,GAAG,EAAEA;IAAnE,CAAb;;EAEA,IAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;IAC9BM,MAAM,GAAGN,MAAM,CAAC;MAAES,OAAO,EAAEH;KAAZ,CAAf;GADJ,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;IACnCI,MAAM,GAAGJ,IAAI,CAAC;MAAEO,OAAO,EAAEH,MAAX;MAAmBI,UAAU,EAAEL,UAAU,CAACK;KAA3C,CAAb;GADG,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;IACtCG,MAAM,GAAGH,OAAO,CAAC;MAAEM,OAAO,EAAEH;KAAZ,CAAhB;;;EAGJ,IAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;IAC9BK,MAAM,GAAGL,MAAM,CAAC;MAAEU,MAAM,EAAEL;KAAX,CAAf;;;EAGJ,IAAIF,OAAJ,EAAa;IACTE,MAAM,GAAGC,4BAAA,CAACK,OAAD;MAASC,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;;;EAGJ,OAAOA,MAAP;AACH;;;;"}
|