@veracity/vui 2.9.0-beta.0 → 2.9.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/cjs/accordion/accordion.d.ts.map +1 -1
  2. package/dist/cjs/accordion/accordion.js +8 -6
  3. package/dist/cjs/accordion/accordion.types.d.ts +1 -4
  4. package/dist/cjs/accordion/accordion.types.d.ts.map +1 -1
  5. package/dist/cjs/accordion/accordionItem.d.ts.map +1 -1
  6. package/dist/cjs/accordion/accordionItem.js +9 -6
  7. package/dist/cjs/accordion/accordionItemArrow.d.ts +1 -1
  8. package/dist/cjs/accordion/accordionItemArrow.d.ts.map +1 -1
  9. package/dist/cjs/accordion/accordionItemArrow.js +1 -2
  10. package/dist/cjs/accordion/accordionItemHorizontal.d.ts.map +1 -1
  11. package/dist/cjs/accordion/accordionItemHorizontal.js +7 -4
  12. package/dist/cjs/accordion/theme.d.ts +33 -1
  13. package/dist/cjs/accordion/theme.d.ts.map +1 -1
  14. package/dist/cjs/accordion/theme.js +34 -2
  15. package/dist/cjs/input/input.d.ts.map +1 -1
  16. package/dist/cjs/input/input.js +5 -1
  17. package/dist/cjs/input/inputInput.js +1 -1
  18. package/dist/cjs/list/listItem.js +2 -2
  19. package/dist/cjs/theme/components.d.ts +33 -1
  20. package/dist/cjs/theme/components.d.ts.map +1 -1
  21. package/dist/cjs/theme/defaultTheme.d.ts +33 -1
  22. package/dist/cjs/theme/defaultTheme.d.ts.map +1 -1
  23. package/dist/esm/accordion/accordion.d.ts.map +1 -1
  24. package/dist/esm/accordion/accordion.js +8 -6
  25. package/dist/esm/accordion/accordion.types.d.ts +1 -4
  26. package/dist/esm/accordion/accordion.types.d.ts.map +1 -1
  27. package/dist/esm/accordion/accordionItem.d.ts.map +1 -1
  28. package/dist/esm/accordion/accordionItem.js +9 -6
  29. package/dist/esm/accordion/accordionItemArrow.d.ts +1 -1
  30. package/dist/esm/accordion/accordionItemArrow.d.ts.map +1 -1
  31. package/dist/esm/accordion/accordionItemArrow.js +1 -2
  32. package/dist/esm/accordion/accordionItemHorizontal.d.ts.map +1 -1
  33. package/dist/esm/accordion/accordionItemHorizontal.js +7 -4
  34. package/dist/esm/accordion/theme.d.ts +33 -1
  35. package/dist/esm/accordion/theme.d.ts.map +1 -1
  36. package/dist/esm/accordion/theme.js +34 -2
  37. package/dist/esm/input/input.d.ts.map +1 -1
  38. package/dist/esm/input/input.js +5 -1
  39. package/dist/esm/input/inputInput.js +1 -1
  40. package/dist/esm/list/listItem.js +2 -2
  41. package/dist/esm/theme/components.d.ts +33 -1
  42. package/dist/esm/theme/components.d.ts.map +1 -1
  43. package/dist/esm/theme/defaultTheme.d.ts +33 -1
  44. package/dist/esm/theme/defaultTheme.d.ts.map +1 -1
  45. package/package.json +1 -1
  46. package/src/accordion/accordion.tsx +12 -22
  47. package/src/accordion/accordion.types.ts +1 -4
  48. package/src/accordion/accordionItem.tsx +15 -6
  49. package/src/accordion/accordionItemArrow.tsx +6 -3
  50. package/src/accordion/accordionItemHorizontal.tsx +12 -18
  51. package/src/accordion/theme.ts +34 -2
  52. package/src/input/input.tsx +6 -1
  53. package/src/input/inputInput.tsx +1 -1
  54. package/src/list/listItem.tsx +2 -2
  55. package/dist/cjs/accordion/consts.d.ts +0 -5
  56. package/dist/cjs/accordion/consts.d.ts.map +0 -1
  57. package/dist/cjs/accordion/consts.js +0 -7
  58. package/dist/esm/accordion/consts.d.ts +0 -5
  59. package/dist/esm/accordion/consts.d.ts.map +0 -1
  60. package/dist/esm/accordion/consts.js +0 -4
  61. package/src/accordion/consts.ts +0 -7
@@ -1 +1 @@
1
- {"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,uBAAuB,MAAM,2BAA2B,CAAA;AAI/D,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS;UAgDd,oBAAoB;oBACV,8BAA8B;CAC/C,CAAA;AAKD,eAAe,SAAS,CAAA"}
1
+ {"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,uBAAuB,MAAM,2BAA2B,CAAA;AAG/D,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS;UAuCd,oBAAoB;oBACV,8BAA8B;CAC/C,CAAA;AAKD,eAAe,SAAS,CAAA"}
@@ -44,7 +44,6 @@ const list_1 = __importDefault(require("../list"));
44
44
  const utils_1 = require("../utils");
45
45
  const accordionItem_1 = __importDefault(require("./accordionItem"));
46
46
  const accordionItemHorizontal_1 = __importDefault(require("./accordionItemHorizontal"));
47
- const consts_1 = require("./consts");
48
47
  const context_1 = require("./context");
49
48
  exports.AccordionBase = core_1.styled.divBox `
50
49
  display: flex;
@@ -54,15 +53,18 @@ exports.AccordionBase = core_1.styled.divBox `
54
53
  /** Allows to show and hide sections of related content on a page. */
55
54
  exports.Accordion = (0, core_1.vui)((props, ref) => {
56
55
  var _a, _b;
57
- const { children, className, itemTitleHoverBg = consts_1.defaultItemTitleHoverBg, items, orientation = 'vertical', iconPosition = 'end', size } = props, rest = __rest(props, ["children", "className", "itemTitleHoverBg", "items", "orientation", "iconPosition", "size"]);
56
+ const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant } = props, rest = __rest(props, ["children", "className", "items", "orientation", "iconPosition", "size", "variant"]);
58
57
  const styles = (0, core_1.useStyleConfig)('Accordion', props);
59
- const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size }), [size]);
58
+ const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size, variant }), [size, variant]);
60
59
  const aliasedProps = (0, utils_1.filterUndefined)({});
61
60
  const isVertical = orientation === 'vertical';
62
61
  return (react_1.default.createElement(context_1.AccordionProvider, { value: context },
63
- react_1.default.createElement(exports.AccordionBase, Object.assign({ borderLeft: isVertical ? undefined : `1px solid ${consts_1.borderColor}`, borderTop: isVertical ? `1px solid ${consts_1.borderColor}` : undefined, className: (0, utils_1.cs)('vui-accordion', className), ref: ref }, styles, aliasedProps, rest), isVertical ? (react_1.default.createElement(list_1.default, { w: "100%" }, items
64
- ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => (react_1.default.createElement(accordionItem_1.default, Object.assign({ iconPosition: iconPosition, itemTitleHoverBg: itemTitleHoverBg, key: key }, item))))
65
- : children)) : items ? ((_b = items === null || items === void 0 ? void 0 : items.map) === null || _b === void 0 ? void 0 : _b.call(items, (item, key) => (react_1.default.createElement(accordionItemHorizontal_1.default, Object.assign({ itemTitleHoverBg: itemTitleHoverBg, key: key }, item))))) : (children))));
62
+ react_1.default.createElement(exports.AccordionBase, Object.assign({ borderLeft: isVertical
63
+ ? undefined
64
+ : `1px solid transparent
65
+ `, borderTop: isVertical ? `1px solid transparent` : undefined, className: (0, utils_1.cs)('vui-accordion', className), ref: ref }, styles.container, aliasedProps, rest), isVertical ? (react_1.default.createElement(list_1.default, { w: "100%" }, items
66
+ ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => (react_1.default.createElement(accordionItem_1.default, Object.assign({ iconPosition: iconPosition, key: key }, item))))
67
+ : children)) : items ? ((_b = items === null || items === void 0 ? void 0 : items.map) === null || _b === void 0 ? void 0 : _b.call(items, (item, key) => react_1.default.createElement(accordionItemHorizontal_1.default, Object.assign({ key: key }, item)))) : (children))));
66
68
  });
67
69
  exports.Accordion.Item = accordionItem_1.default;
68
70
  exports.Accordion.ItemHorizontal = accordionItemHorizontal_1.default;
@@ -7,8 +7,6 @@ export type AccordionIconPosition = 'end' | 'start';
7
7
  export type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
8
8
  /** Items AccordionOrientation @default "vertical" */
9
9
  orientation?: AccordionOrientation;
10
- /** Hover color for the item title @default "skyBlue.95" */
11
- itemTitleHoverBg?: string;
12
10
  /** Collection of Accordion items */
13
11
  items?: AccordionItemProps[];
14
12
  /** Icon position for vertical orientation @default "end" */
@@ -34,8 +32,6 @@ export type AccordionItemProps = ListItemProps & {
34
32
  collapsed?: boolean;
35
33
  /** The icon position @default "end" */
36
34
  iconPosition?: AccordionIconPosition;
37
- /** Hover color for the item title @default "skyBlue.95" */
38
- itemTitleHoverBg?: string;
39
35
  /** Title */
40
36
  title?: string | ReactNode;
41
37
  /** Collapse change state */
@@ -44,5 +40,6 @@ export type AccordionItemProps = ListItemProps & {
44
40
  export type AccordionItemArrowProps = {
45
41
  collapsed?: boolean;
46
42
  orientation?: AccordionOrientation;
43
+ color?: string;
47
44
  };
48
45
  //# sourceMappingURL=accordion.types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAC5D,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,OAAO,CAAA;AAEnD,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC,CAAA;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,oBAAoB,CAAA;CACnC,CAAA"}
1
+ {"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAC5D,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,OAAO,CAAA;AAEnD,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,oCAAoC;IACpC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC,CAAA;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAKtD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBA0EtD,CAAA;AAED,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBAoFtD,CAAA;AAED,eAAe,aAAa,CAAA"}
@@ -44,11 +44,10 @@ const core_1 = require("../core");
44
44
  const list_1 = require("../list");
45
45
  const utils_1 = require("../utils");
46
46
  const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
47
- const consts_1 = require("./consts");
48
47
  const context_1 = require("./context");
49
48
  /** An accordion item. */
50
49
  const AccordionItem = (props) => {
51
- const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, iconPosition = 'end', itemTitleHoverBg = consts_1.defaultItemTitleHoverBg, title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "iconPosition", "itemTitleHoverBg", "title", "onToggle"]);
50
+ const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, iconPosition = 'end', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "iconPosition", "title", "onToggle"]);
52
51
  const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
53
52
  const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
54
53
  (0, react_1.useEffect)(() => {
@@ -62,13 +61,17 @@ const AccordionItem = (props) => {
62
61
  };
63
62
  const isIconStart = iconPosition === 'start';
64
63
  const isIconEnd = iconPosition === 'end';
65
- return (react_1.default.createElement(list_1.ListItem, Object.assign({ borderBottom: `1px solid ${consts_1.borderColor}`, className: (0, utils_1.cs)('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%" }, rest),
66
- react_1.default.createElement(box_1.Box, Object.assign({ cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: disabled ? 'transparent' : collapsedInternal ? itemTitleHoverBg : consts_1.expandedItemTitleHoverBg, justifyContent: iconPosition === 'start' ? 'initial' : 'space-between', onClick: toggle, px: 2, w: "100%" }, styles.item),
64
+ return (react_1.default.createElement(list_1.ListItem, Object.assign({ borderBottom: "1px solid transparent", borderColor: styles.item.borderColor, className: (0, utils_1.cs)('vui-accordion-item', className), color: "yellow", disabled: disabled, disabledBg: styles.item.disabledBg, disabledColor: styles.item.disabledColor, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%" }, rest),
65
+ react_1.default.createElement(box_1.Box, Object.assign({ color: "yellow", cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: disabled
66
+ ? 'transparent'
67
+ : collapsedInternal
68
+ ? styles.item.itemTitleHoverBg
69
+ : styles.item.expandedItemTitleHoverBg, justifyContent: iconPosition === 'start' ? 'initial' : 'space-between', onClick: toggle, px: 2, w: "100%" }, styles.item),
67
70
  isIconStart && (react_1.default.createElement(box_1.Box, null,
68
- react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal }))),
71
+ react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color }))),
69
72
  react_1.default.createElement(box_1.Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit', ml: isIconStart ? 2 : 0 }, title),
70
73
  isIconEnd && (react_1.default.createElement(box_1.Box, null,
71
- react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal })))),
74
+ react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color })))),
72
75
  !collapsedInternal && (react_1.default.createElement(box_1.Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%" }, children !== null && children !== void 0 ? children : content))));
73
76
  };
74
77
  exports.AccordionItem = AccordionItem;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  import { AccordionItemArrowProps } from './accordion.types';
3
- declare const _default: React.MemoExoticComponent<({ collapsed, orientation }: AccordionItemArrowProps) => JSX.Element>;
3
+ declare const _default: React.MemoExoticComponent<({ collapsed, color, orientation }: AccordionItemArrowProps) => JSX.Element>;
4
4
  export default _default;
5
5
  //# sourceMappingURL=accordionItemArrow.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAkB3D,wBAA6C"}
1
+ {"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAqB3D,wBAA6C"}
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const react_1 = __importDefault(require("react"));
7
7
  const icon_1 = __importDefault(require("../icon"));
8
- const consts_1 = require("./consts");
9
8
  const names = {
10
9
  horizontal: {
11
10
  collapsed: 'falChevronRight',
@@ -16,5 +15,5 @@ const names = {
16
15
  expanded: 'falChevronUp'
17
16
  }
18
17
  };
19
- const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }) => (react_1.default.createElement(icon_1.default, { color: consts_1.iconColor, name: names[orientation][collapsed ? 'collapsed' : 'expanded'], size: "xs" }));
18
+ const AccordionItemArrow = ({ collapsed, color = 'sandstone.10', orientation = 'vertical' }) => (react_1.default.createElement(icon_1.default, { name: names[orientation][collapsed ? 'collapsed' : 'expanded'], pathFill: color, size: "sm" }));
20
19
  exports.default = react_1.default.memo(AccordionItemArrow);
@@ -1 +1 @@
1
- {"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAKtD,2DAA2D;AAC3D,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAsFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}
1
+ {"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,2DAA2D;AAC3D,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAiFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}
@@ -43,11 +43,10 @@ const box_1 = __importDefault(require("../box"));
43
43
  const core_1 = require("../core");
44
44
  const utils_1 = require("../utils");
45
45
  const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
46
- const consts_1 = require("./consts");
47
46
  const context_1 = require("./context");
48
47
  /** An accordion item (horizontal AccordionOrientation). */
49
48
  const AccordionItemHorizontal = (props) => {
50
- const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, contentPx, itemTitleHoverBg = consts_1.defaultItemTitleHoverBg, title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "contentPx", "itemTitleHoverBg", "title", "onToggle"]);
49
+ const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, contentPx, title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "contentPx", "title", "onToggle"]);
51
50
  const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
52
51
  const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
53
52
  (0, react_1.useEffect)(() => {
@@ -62,8 +61,12 @@ const AccordionItemHorizontal = (props) => {
62
61
  const cursor = disabled ? 'not-allowed' : 'pointer';
63
62
  const fontWeight = typeof title === 'string' ? '500' : 'inherit';
64
63
  const expandedContentPx = contentPx ? contentPx : styles.item.pt;
65
- return (react_1.default.createElement(box_1.default, Object.assign({ alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: `1px solid ${consts_1.borderColor}`, className: (0, utils_1.cs)('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, p: 0, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined }, rest),
66
- react_1.default.createElement(box_1.default, Object.assign({}, styles.item, { cursor: cursor, hoverBg: disabled ? 'transparent' : collapsedInternal ? itemTitleHoverBg : consts_1.expandedItemTitleHoverBg, justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%" }),
64
+ return (react_1.default.createElement(box_1.default, Object.assign({ alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid transparent", className: (0, utils_1.cs)('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined }, styles.item, { p: 0 }, rest),
65
+ react_1.default.createElement(box_1.default, { cursor: cursor, hoverBg: disabled
66
+ ? 'transparent'
67
+ : collapsedInternal
68
+ ? styles.item.itemTitleHoverBg
69
+ : styles.item.expandedItemTitleHoverBg, justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%" },
67
70
  !collapsedInternal && react_1.default.createElement(box_1.default, { fontWeight: fontWeight }, title),
68
71
  react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, orientation: "horizontal" })),
69
72
  !collapsedInternal ? (react_1.default.createElement(box_1.default, { p: styles.item.pt, pt: 0, px: expandedContentPx, transitionDuration: "0ms", w: 1 }, children !== null && children !== void 0 ? children : content)) : (react_1.default.createElement(box_1.default, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap" }, title))));
@@ -2,6 +2,7 @@ declare const _default: {
2
2
  baseStyle: {};
3
3
  defaultProps: {
4
4
  size: string;
5
+ variant: string;
5
6
  };
6
7
  sizes: {
7
8
  sm: {
@@ -23,7 +24,38 @@ declare const _default: {
23
24
  };
24
25
  };
25
26
  };
26
- variants: {};
27
+ variants: {
28
+ light: {
29
+ container: {
30
+ bg: string;
31
+ borderColor: string;
32
+ };
33
+ item: {
34
+ borderColor: string;
35
+ itemTitleHoverBg: string;
36
+ expandedItemTitleHoverBg: string;
37
+ };
38
+ icon: {
39
+ color: string;
40
+ };
41
+ };
42
+ dark: {
43
+ container: {
44
+ bg: string;
45
+ borderColor: string;
46
+ color: string;
47
+ };
48
+ item: {
49
+ borderColor: string;
50
+ disabledBg: string;
51
+ itemTitleHoverBg: string;
52
+ expandedItemTitleHoverBg: string;
53
+ };
54
+ icon: {
55
+ color: string;
56
+ };
57
+ };
58
+ };
27
59
  };
28
60
  export default _default;
29
61
  //# sourceMappingURL=theme.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/accordion/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,wBAKC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/accordion/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,wBAKC"}
@@ -2,7 +2,8 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const baseStyle = {};
4
4
  const defaultProps = {
5
- size: 'md'
5
+ size: 'md',
6
+ variant: 'light'
6
7
  };
7
8
  const sizes = {
8
9
  sm: {
@@ -24,7 +25,38 @@ const sizes = {
24
25
  }
25
26
  }
26
27
  };
27
- const variants = {};
28
+ const variants = {
29
+ light: {
30
+ container: {
31
+ bg: 'white',
32
+ borderColor: 'sandstone.main'
33
+ },
34
+ item: {
35
+ borderColor: 'sandstone.main',
36
+ itemTitleHoverBg: 'skyBlue.95',
37
+ expandedItemTitleHoverBg: 'skyBlue.90'
38
+ },
39
+ icon: {
40
+ color: 'sandstone.10'
41
+ }
42
+ },
43
+ dark: {
44
+ container: {
45
+ bg: 'darkBlue.main',
46
+ borderColor: 'white',
47
+ color: 'white'
48
+ },
49
+ item: {
50
+ borderColor: 'white',
51
+ disabledBg: 'transparent',
52
+ itemTitleHoverBg: 'seaBlue.35',
53
+ expandedItemTitleHoverBg: 'seaBlue.25'
54
+ },
55
+ icon: {
56
+ color: 'digiGreen.main'
57
+ }
58
+ }
59
+ };
28
60
  exports.default = {
29
61
  baseStyle,
30
62
  defaultProps,
@@ -1 +1 @@
1
- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAQnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,cAAc,+HAE1B,CAAA;AAED,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAwIV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
1
+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAQnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,cAAc,+HAE1B,CAAA;AAED,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA6IV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
@@ -88,6 +88,10 @@ exports.Input = (0, core_1.vui)((props, ref) => {
88
88
  setCount(e.target.value.length);
89
89
  onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
90
90
  }
91
+ function onAutoCompleteSelect(value) {
92
+ const e = { target: { value } };
93
+ onChange(e);
94
+ }
91
95
  const aliasedProps = (0, utils_1.filterUndefined)({
92
96
  'aria-disabled': disabled,
93
97
  bg: readOnly ? consts_1.inputColors.disabled : undefined,
@@ -132,7 +136,7 @@ exports.Input = (0, core_1.vui)((props, ref) => {
132
136
  " ",
133
137
  maxLength ? `/ ${maxLength}` : null)))),
134
138
  !!autoCompleteOptions && (react_1.default.createElement(popover_1.Popover.Content, null,
135
- react_1.default.createElement(list_1.List, null, autoCompleteOptions.filter(filterAutoCompleteOptions).map((i) => (react_1.default.createElement(list_1.List.Item, { cursor: "pointer", hoverBg: "skyBlue.hover", key: i, onClick: () => setValueInternal(i) }, i))))))),
139
+ react_1.default.createElement(list_1.List, null, autoCompleteOptions.filter(filterAutoCompleteOptions).map((i) => (react_1.default.createElement(list_1.List.Item, { cursor: "pointer", hoverBg: "skyBlue.hover", key: i, onClick: () => onAutoCompleteSelect(i) }, i))))))),
136
140
  !!helpText && react_1.default.createElement(helpText_1.default, null, helpText),
137
141
  !!errorText && react_1.default.createElement(helpText_1.default, { isError: true }, errorText)));
138
142
  });
@@ -44,6 +44,6 @@ exports.InputInput = (0, core_1.vui)((props, ref) => {
44
44
  const aliasedProps = (0, utils_1.filterUndefined)({
45
45
  'aria-disabled': mergedProps.disabled
46
46
  });
47
- return (react_1.default.createElement(exports.InputInputBase, Object.assign({ "aria-label": "input-text", autoComplete: "false", className: (0, utils_1.cs)('vui-inputInput', className), ref: ref }, styles.input, aliasedProps, rest)));
47
+ return (react_1.default.createElement(exports.InputInputBase, Object.assign({ "aria-label": "input-text", autoComplete: "off", className: (0, utils_1.cs)('vui-inputInput', className), ref: ref }, styles.input, aliasedProps, rest)));
48
48
  });
49
49
  exports.default = exports.InputInput;
@@ -55,9 +55,9 @@ exports.ListItemBase = core_1.styled.liBox `
55
55
  transition-duration: fast;
56
56
 
57
57
  &[aria-disabled='true'] {
58
- color: sandstone.main;
59
58
  cursor: not-allowed;
60
59
  user-select: none;
60
+ opacity: 0.5;
61
61
  }
62
62
 
63
63
  &:focus-visible {
@@ -98,7 +98,7 @@ exports.ListItem = (0, core_1.vui)((props, ref) => {
98
98
  justifyContent,
99
99
  px: isLinkItem ? 0 : undefined
100
100
  });
101
- return (react_1.default.createElement(exports.ListItemBase, Object.assign({ bg: disabled ? 'sandstone.95' : undefined, className: (0, utils_1.cs)('vui-listItem', className), onClick: !disabled ? onClick : undefined, ref: ref }, itemStyles, interactiveProps, aliasedProps, rest),
101
+ return (react_1.default.createElement(exports.ListItemBase, Object.assign({ bg: disabled ? rest.disabledBg || 'sandstone.95' : undefined, className: (0, utils_1.cs)('vui-listItem', className), onClick: !disabled ? onClick : undefined, ref: ref }, itemStyles, interactiveProps, aliasedProps, rest),
102
102
  react_1.default.createElement(ContentWrapper, Object.assign({}, linkProps),
103
103
  itemLeft,
104
104
  (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(listIcon_1.default, { mr: 1, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(listText_1.default, Object.assign({}, { isTruncated, text })) : text),
@@ -3,6 +3,7 @@ declare const _default: {
3
3
  baseStyle: {};
4
4
  defaultProps: {
5
5
  size: string;
6
+ variant: string;
6
7
  };
7
8
  sizes: {
8
9
  sm: {
@@ -24,7 +25,38 @@ declare const _default: {
24
25
  };
25
26
  };
26
27
  };
27
- variants: {};
28
+ variants: {
29
+ light: {
30
+ container: {
31
+ bg: string;
32
+ borderColor: string;
33
+ };
34
+ item: {
35
+ borderColor: string;
36
+ itemTitleHoverBg: string;
37
+ expandedItemTitleHoverBg: string;
38
+ };
39
+ icon: {
40
+ color: string;
41
+ };
42
+ };
43
+ dark: {
44
+ container: {
45
+ bg: string;
46
+ borderColor: string;
47
+ color: string;
48
+ };
49
+ item: {
50
+ borderColor: string;
51
+ disabledBg: string;
52
+ itemTitleHoverBg: string;
53
+ expandedItemTitleHoverBg: string;
54
+ };
55
+ icon: {
56
+ color: string;
57
+ };
58
+ };
59
+ };
28
60
  };
29
61
  Avatar: {
30
62
  baseStyle: {};
@@ -1 +1 @@
1
- {"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,wBA6CC"}
1
+ {"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,wBA6CC"}
@@ -507,6 +507,7 @@ declare const defaultTheme: {
507
507
  baseStyle: {};
508
508
  defaultProps: {
509
509
  size: string;
510
+ variant: string;
510
511
  };
511
512
  sizes: {
512
513
  sm: {
@@ -528,7 +529,38 @@ declare const defaultTheme: {
528
529
  };
529
530
  };
530
531
  };
531
- variants: {};
532
+ variants: {
533
+ light: {
534
+ container: {
535
+ bg: string;
536
+ borderColor: string;
537
+ };
538
+ item: {
539
+ borderColor: string;
540
+ itemTitleHoverBg: string;
541
+ expandedItemTitleHoverBg: string;
542
+ };
543
+ icon: {
544
+ color: string;
545
+ };
546
+ };
547
+ dark: {
548
+ container: {
549
+ bg: string;
550
+ borderColor: string;
551
+ color: string;
552
+ };
553
+ item: {
554
+ borderColor: string;
555
+ disabledBg: string;
556
+ itemTitleHoverBg: string;
557
+ expandedItemTitleHoverBg: string;
558
+ };
559
+ icon: {
560
+ color: string;
561
+ };
562
+ };
563
+ };
532
564
  };
533
565
  Avatar: {
534
566
  baseStyle: {};
@@ -1 +1 @@
1
- {"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
1
+ {"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,uBAAuB,MAAM,2BAA2B,CAAA;AAI/D,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS;UAgDd,oBAAoB;oBACV,8BAA8B;CAC/C,CAAA;AAKD,eAAe,SAAS,CAAA"}
1
+ {"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,uBAAuB,MAAM,2BAA2B,CAAA;AAG/D,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS;UAuCd,oBAAoB;oBACV,8BAA8B;CAC/C,CAAA;AAKD,eAAe,SAAS,CAAA"}
@@ -4,7 +4,6 @@ import List from '../list';
4
4
  import { cs, filterUndefined } from '../utils';
5
5
  import AccordionItem from './accordionItem';
6
6
  import AccordionItemHorizontal from './accordionItemHorizontal';
7
- import { borderColor, defaultItemTitleHoverBg } from './consts';
8
7
  import { AccordionProvider } from './context';
9
8
  export const AccordionBase = styled.divBox `
10
9
  display: flex;
@@ -13,15 +12,18 @@ export const AccordionBase = styled.divBox `
13
12
  `;
14
13
  /** Allows to show and hide sections of related content on a page. */
15
14
  export const Accordion = vui((props, ref) => {
16
- const { children, className, itemTitleHoverBg = defaultItemTitleHoverBg, items, orientation = 'vertical', iconPosition = 'end', size, ...rest } = props;
15
+ const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant, ...rest } = props;
17
16
  const styles = useStyleConfig('Accordion', props);
18
- const context = useMemo(() => filterUndefined({ size }), [size]);
17
+ const context = useMemo(() => filterUndefined({ size, variant }), [size, variant]);
19
18
  const aliasedProps = filterUndefined({});
20
19
  const isVertical = orientation === 'vertical';
21
20
  return (React.createElement(AccordionProvider, { value: context },
22
- React.createElement(AccordionBase, { borderLeft: isVertical ? undefined : `1px solid ${borderColor}`, borderTop: isVertical ? `1px solid ${borderColor}` : undefined, className: cs('vui-accordion', className), ref: ref, ...styles, ...aliasedProps, ...rest }, isVertical ? (React.createElement(List, { w: "100%" }, items
23
- ? items?.map?.((item, key) => (React.createElement(AccordionItem, { iconPosition: iconPosition, itemTitleHoverBg: itemTitleHoverBg, key: key, ...item })))
24
- : children)) : items ? (items?.map?.((item, key) => (React.createElement(AccordionItemHorizontal, { itemTitleHoverBg: itemTitleHoverBg, key: key, ...item })))) : (children))));
21
+ React.createElement(AccordionBase, { borderLeft: isVertical
22
+ ? undefined
23
+ : `1px solid transparent
24
+ `, borderTop: isVertical ? `1px solid transparent` : undefined, className: cs('vui-accordion', className), ref: ref, ...styles.container, ...aliasedProps, ...rest }, isVertical ? (React.createElement(List, { w: "100%" }, items
25
+ ? items?.map?.((item, key) => (React.createElement(AccordionItem, { iconPosition: iconPosition, key: key, ...item })))
26
+ : children)) : items ? (items?.map?.((item, key) => React.createElement(AccordionItemHorizontal, { key: key, ...item }))) : (children))));
25
27
  });
26
28
  Accordion.Item = AccordionItem;
27
29
  Accordion.ItemHorizontal = AccordionItemHorizontal;
@@ -7,8 +7,6 @@ export type AccordionIconPosition = 'end' | 'start';
7
7
  export type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
8
8
  /** Items AccordionOrientation @default "vertical" */
9
9
  orientation?: AccordionOrientation;
10
- /** Hover color for the item title @default "skyBlue.95" */
11
- itemTitleHoverBg?: string;
12
10
  /** Collection of Accordion items */
13
11
  items?: AccordionItemProps[];
14
12
  /** Icon position for vertical orientation @default "end" */
@@ -34,8 +32,6 @@ export type AccordionItemProps = ListItemProps & {
34
32
  collapsed?: boolean;
35
33
  /** The icon position @default "end" */
36
34
  iconPosition?: AccordionIconPosition;
37
- /** Hover color for the item title @default "skyBlue.95" */
38
- itemTitleHoverBg?: string;
39
35
  /** Title */
40
36
  title?: string | ReactNode;
41
37
  /** Collapse change state */
@@ -44,5 +40,6 @@ export type AccordionItemProps = ListItemProps & {
44
40
  export type AccordionItemArrowProps = {
45
41
  collapsed?: boolean;
46
42
  orientation?: AccordionOrientation;
43
+ color?: string;
47
44
  };
48
45
  //# sourceMappingURL=accordion.types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAC5D,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,OAAO,CAAA;AAEnD,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC,CAAA;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,oBAAoB,CAAA;CACnC,CAAA"}
1
+ {"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAC5D,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,OAAO,CAAA;AAEnD,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,oCAAoC;IACpC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC,CAAA;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAKtD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBA0EtD,CAAA;AAED,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBAoFtD,CAAA;AAED,eAAe,aAAa,CAAA"}
@@ -4,11 +4,10 @@ import { omitThemingProps, useStyleConfig } from '../core';
4
4
  import { ListItem } from '../list';
5
5
  import { cs } from '../utils';
6
6
  import AccordionItemArrow from './accordionItemArrow';
7
- import { borderColor, defaultItemTitleHoverBg, expandedItemTitleHoverBg } from './consts';
8
7
  import { useAccordionContext } from './context';
9
8
  /** An accordion item. */
10
9
  export const AccordionItem = (props) => {
11
- const { className, children, collapsed, content, disabled, id, iconPosition = 'end', itemTitleHoverBg = defaultItemTitleHoverBg, title, onToggle, ...rest } = omitThemingProps(props);
10
+ const { className, children, collapsed, content, disabled, id, iconPosition = 'end', title, onToggle, ...rest } = omitThemingProps(props);
12
11
  const [collapsedInternal, setIsCollapsedInternal] = useState(false);
13
12
  const styles = useStyleConfig('Accordion', useAccordionContext());
14
13
  useEffect(() => {
@@ -22,13 +21,17 @@ export const AccordionItem = (props) => {
22
21
  };
23
22
  const isIconStart = iconPosition === 'start';
24
23
  const isIconEnd = iconPosition === 'end';
25
- return (React.createElement(ListItem, { borderBottom: `1px solid ${borderColor}`, className: cs('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%", ...rest },
26
- React.createElement(Box, { cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: disabled ? 'transparent' : collapsedInternal ? itemTitleHoverBg : expandedItemTitleHoverBg, justifyContent: iconPosition === 'start' ? 'initial' : 'space-between', onClick: toggle, px: 2, w: "100%", ...styles.item },
24
+ return (React.createElement(ListItem, { borderBottom: "1px solid transparent", borderColor: styles.item.borderColor, className: cs('vui-accordion-item', className), color: "yellow", disabled: disabled, disabledBg: styles.item.disabledBg, disabledColor: styles.item.disabledColor, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%", ...rest },
25
+ React.createElement(Box, { color: "yellow", cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: disabled
26
+ ? 'transparent'
27
+ : collapsedInternal
28
+ ? styles.item.itemTitleHoverBg
29
+ : styles.item.expandedItemTitleHoverBg, justifyContent: iconPosition === 'start' ? 'initial' : 'space-between', onClick: toggle, px: 2, w: "100%", ...styles.item },
27
30
  isIconStart && (React.createElement(Box, null,
28
- React.createElement(AccordionItemArrow, { collapsed: collapsedInternal }))),
31
+ React.createElement(AccordionItemArrow, { collapsed: collapsedInternal, color: styles.icon.color }))),
29
32
  React.createElement(Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit', ml: isIconStart ? 2 : 0 }, title),
30
33
  isIconEnd && (React.createElement(Box, null,
31
- React.createElement(AccordionItemArrow, { collapsed: collapsedInternal })))),
34
+ React.createElement(AccordionItemArrow, { collapsed: collapsedInternal, color: styles.icon.color })))),
32
35
  !collapsedInternal && (React.createElement(Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%" }, children ?? content))));
33
36
  };
34
37
  export default AccordionItem;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  import { AccordionItemArrowProps } from './accordion.types';
3
- declare const _default: React.MemoExoticComponent<({ collapsed, orientation }: AccordionItemArrowProps) => JSX.Element>;
3
+ declare const _default: React.MemoExoticComponent<({ collapsed, color, orientation }: AccordionItemArrowProps) => JSX.Element>;
4
4
  export default _default;
5
5
  //# sourceMappingURL=accordionItemArrow.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAkB3D,wBAA6C"}
1
+ {"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAqB3D,wBAA6C"}