@algolia/satellite 1.6.0 → 1.7.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.
Files changed (86) hide show
  1. package/dist/cjs/Actions/Accordion/Accordion.d.ts +142 -0
  2. package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
  3. package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  4. package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
  5. package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  6. package/dist/cjs/Actions/index.d.ts +2 -0
  7. package/dist/cjs/Actions/index.js +18 -0
  8. package/dist/cjs/Fields/Field/Field.js +1 -1
  9. package/dist/cjs/Fields/Form/Form.d.ts +12 -10
  10. package/dist/cjs/Fields/Form/Form.js +50 -38
  11. package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
  12. package/dist/cjs/Fields/Form/FormContext.js +2 -2
  13. package/dist/cjs/Fields/Form/index.d.ts +4 -3
  14. package/dist/cjs/Fields/Form/index.js +31 -21
  15. package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
  16. package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
  17. package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
  18. package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
  19. package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
  20. package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
  21. package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
  22. package/dist/cjs/Fields/Form/stories/JSONForms.js +58 -55
  23. package/dist/cjs/Fields/Form/stories/MultiStep.js +474 -468
  24. package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
  25. package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
  26. package/dist/cjs/Fields/Form/useForm.js +3 -3
  27. package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
  28. package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
  29. package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
  30. package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
  31. package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
  32. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  33. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  34. package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  35. package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
  36. package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
  37. package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
  38. package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
  39. package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  40. package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  41. package/dist/cjs/styles/tailwind.config.js +1 -1
  42. package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
  43. package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
  44. package/dist/esm/Actions/Accordion/Accordion.js +139 -0
  45. package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  46. package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
  47. package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  48. package/dist/esm/Actions/index.d.ts +2 -0
  49. package/dist/esm/Actions/index.js +2 -2
  50. package/dist/esm/Fields/Field/Field.js +2 -2
  51. package/dist/esm/Fields/Form/Form.d.ts +12 -10
  52. package/dist/esm/Fields/Form/Form.js +52 -40
  53. package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
  54. package/dist/esm/Fields/Form/FormContext.js +1 -1
  55. package/dist/esm/Fields/Form/index.d.ts +4 -3
  56. package/dist/esm/Fields/Form/index.js +2 -3
  57. package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
  58. package/dist/esm/Fields/Form/stories/Complex.js +649 -643
  59. package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
  60. package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
  61. package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
  62. package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
  63. package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
  64. package/dist/esm/Fields/Form/stories/JSONForms.js +59 -56
  65. package/dist/esm/Fields/Form/stories/MultiStep.js +475 -469
  66. package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
  67. package/dist/esm/Fields/Form/useForm.d.ts +1 -1
  68. package/dist/esm/Fields/Form/useForm.js +3 -3
  69. package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
  70. package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
  71. package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
  72. package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
  73. package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
  74. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  75. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  76. package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  77. package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
  78. package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
  79. package/dist/esm/Layout/Tables/Table/Table.js +4 -2
  80. package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
  81. package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  82. package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  83. package/dist/esm/styles/tailwind.config.js +1 -1
  84. package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
  85. package/dist/satellite.min.css +1 -1
  86. package/package.json +2 -1
@@ -30,14 +30,14 @@ var SidebarLink = exports.SidebarLink = function SidebarLink(props) {
30
30
  var isActive = !disabled && !isExternalLink && isLinkActive((_linkProps$href = linkProps.href) !== null && _linkProps$href !== void 0 ? _linkProps$href : "");
31
31
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
32
32
  id: id,
33
- className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n flex items-center overflow-hidden w-full\n group hover:no-underline focus:outline-none\n ", "\n "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
33
+ className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n flex items-center w-full\n group focusable-visible-group hover:no-underline focus:outline-none\n ", "\n "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
34
34
  "aria-current": isActive,
35
35
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
36
36
  className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-3 ", ""])), disabled ? "text-grey-300" : "text-grey-500"),
37
37
  width: "1rem",
38
38
  height: "1rem"
39
39
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
40
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n flex-1 inline-flex items-center overflow-hidden\n ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued group-focus:text-accent-600 group-hover:text-accent-600"),
40
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n flex-1 inline-flex items-center overflow-hidden\n ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued focusable-visible-group-item group-hover:text-accent-600"),
41
41
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
42
42
  className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
43
43
  children: children
@@ -23,7 +23,7 @@ var SidebarGroupLink = exports.SidebarGroupLink = function SidebarGroupLink(prop
23
23
  var isExternalLink = linkProps.target === "_blank";
24
24
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
25
25
  id: id,
26
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n inline-flex w-full items-center hover:no-underline focus:outline-none leading-md\n ", "\n ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600 focus:text-accent-600"),
26
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n inline-flex w-full items-center hover:no-underline leading-md\n ", "\n ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer focusable-visible", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600"),
27
27
  "aria-current": active,
28
28
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
29
29
  className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
@@ -17,7 +17,7 @@ var _SidebarContext = require("../SidebarContext");
17
17
  var _ActiveLinkIndicator = require("./ActiveLinkIndicator");
18
18
  var _SidebarGroupLink = require("./SidebarGroupLink");
19
19
  var _jsxRuntime = require("react/jsx-runtime");
20
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
20
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
21
21
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
22
22
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
23
23
  var isCollapsibleSidebarLinksGroupProps = function isCollapsibleSidebarLinksGroupProps(props) {
@@ -58,7 +58,7 @@ var SidebarLinksGroup = exports.SidebarLinksGroup = function SidebarLinksGroup(p
58
58
  className: className,
59
59
  children: [isCollapsibleSidebarLinksGroupProps(props) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
60
60
  type: "button",
61
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n flex w-full text-left items-center mb-4 overflow-hidden focus:outline-none group cursor-pointer"]))),
61
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n flex w-full text-left items-center mb-4 focus:outline-none group focusable-visible-group cursor-pointer"]))),
62
62
  onClick: function onClick() {
63
63
  return setIsOpen(!isOpen);
64
64
  },
@@ -69,7 +69,7 @@ var SidebarLinksGroup = exports.SidebarLinksGroup = function SidebarLinksGroup(p
69
69
  width: "1rem",
70
70
  height: "1rem"
71
71
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
72
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 group-focus:text-accent-500 group-hover:text-accent-500 mr-2"]))),
72
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 focusable-visible-group-item group-hover:text-accent-500 mr-2"]))),
73
73
  children: props.title
74
74
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronRightIcon, {
75
75
  className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-grey-500 motion-safe:transition-all motion-safe:duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
@@ -83,10 +83,9 @@ var SidebarLinksGroup = exports.SidebarLinksGroup = function SidebarLinksGroup(p
83
83
  activeIndex: activeLinkIndex,
84
84
  linksCount: links.length
85
85
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
86
- className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex-1 space-y-2 overflow-hidden"]))),
86
+ className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex-1 space-y-2 min-w-0"]))),
87
87
  children: links.map(function (link, idx) {
88
88
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
89
- className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden"]))),
90
89
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarGroupLink.SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
91
90
  active: activeLinkIndex === idx
92
91
  }))
@@ -1,4 +1,5 @@
1
1
  import type { ReactNode } from "react";
2
+ import { type DisplayMode } from "../Table";
2
3
  import type { ColumnDefinition, DataConfiguration, GetItemId, PaginationConfiguration, Row, SelectMode, Sorting, Status } from "./types";
3
4
  declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
4
5
  export declare type SortMode = "single" | "multi";
@@ -21,6 +22,7 @@ interface BaseDataTableProps<Item> {
21
22
  pagination?: PaginationConfiguration;
22
23
  /** the `onChange` is triggered when either sorting or paginating */
23
24
  onChange?(dataConfiguration: DataConfiguration): void;
25
+ mode?: DisplayMode;
24
26
  /** Specify the global status of the table */
25
27
  status?: Status;
26
28
  /** Allows for specifying a custom empty state */
@@ -51,5 +53,5 @@ export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTable
51
53
  *
52
54
  * See the [Data Table documentation page](https://satellite.algolia.com/layouts/data-table) for more information.
53
55
  */
54
- export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
56
+ export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, mode, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
55
57
  export {};
@@ -52,6 +52,8 @@ var DataTable = exports.DataTable = function DataTable(_ref) {
52
52
  itemId = _ref.itemId,
53
53
  columns = _ref.columns,
54
54
  onChange = _ref.onChange,
55
+ _ref$mode = _ref.mode,
56
+ mode = _ref$mode === void 0 ? "comfortable" : _ref$mode,
55
57
  _ref$status = _ref.status,
56
58
  status = _ref$status === void 0 ? "success" : _ref$status,
57
59
  noDataContent = _ref.noDataContent,
@@ -220,6 +222,7 @@ var DataTable = exports.DataTable = function DataTable(_ref) {
220
222
  })
221
223
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.Table, {
222
224
  className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
225
+ mode: mode,
223
226
  highlight: false,
224
227
  footer: shouldRenderPagination() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.DataTableFooter, {
225
228
  pagination: pagination,
@@ -1,9 +1,11 @@
1
1
  import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes, VFC } from "react";
2
+ export declare type DisplayMode = "comfortable" | "compact";
2
3
  export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
3
4
  footer?: ReactNode;
4
5
  smallFooter?: boolean;
5
6
  hasActions?: boolean;
6
7
  highlight?: boolean;
8
+ mode?: DisplayMode;
7
9
  }
8
10
  /**
9
11
  * The `Table` component is used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
@@ -13,7 +13,7 @@ var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers
13
13
  var _TableFooter = require("./components/TableFooter");
14
14
  var _jsxRuntime = require("react/jsx-runtime");
15
15
  var _templateObject, _templateObject2, _templateObject3;
16
- var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
16
+ var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight", "mode"];
17
17
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
18
18
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
19
19
  /**
@@ -29,13 +29,15 @@ var Table = exports.Table = function Table(_ref) {
29
29
  hasActions = _ref.hasActions,
30
30
  _ref$highlight = _ref.highlight,
31
31
  highlight = _ref$highlight === void 0 ? true : _ref$highlight,
32
+ _ref$mode = _ref.mode,
33
+ mode = _ref$mode === void 0 ? "comfortable" : _ref$mode,
32
34
  props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
33
35
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
34
36
  className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className),
35
37
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
36
38
  className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["overflow-x-auto"]))),
37
39
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", _objectSpread(_objectSpread({}, props), {}, {
38
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
40
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["table ", " ", " ", ""])), mode === "compact" && "table-compact", hasActions && "table-with-actions", highlight && "table-with-highlight")
39
41
  }))
40
42
  }), !!footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableFooter.TableFooter, {
41
43
  size: smallFooter ? "small" : "default",
@@ -11,7 +11,7 @@ var tablePlugin = plugin(function (_ref) {
11
11
  borderCollapse: "collapse",
12
12
  textAlign: "left",
13
13
  "th, td": {
14
- padding: "14px 16px"
14
+ padding: "12px 16px"
15
15
  },
16
16
  thead: {
17
17
  backgroundColor: theme("colors.grey.50")
@@ -24,6 +24,11 @@ var tablePlugin = plugin(function (_ref) {
24
24
  borderBottom: "1px solid ".concat(theme("colors.grey.100"))
25
25
  }
26
26
  },
27
+ ".table-compact": {
28
+ "th, td": {
29
+ padding: "10px 16px"
30
+ }
31
+ },
27
32
  ".table-with-actions": {
28
33
  "th:last-of-type, td:last-of-type": {
29
34
  textAlign: "right"
@@ -1,5 +1,5 @@
1
- import type { IconComponentType } from "Icons";
2
1
  import type { FC } from "react";
2
+ import type { IconComponentType } from "../../../../Icons";
3
3
  import type { BaseItemProps } from "../../useMenuItemProps";
4
4
  declare type LinkItemNavigationType = "auto" | "reload" | "newTab";
5
5
  export declare type LinkItemProps = BaseItemProps & {
@@ -1,6 +1,6 @@
1
1
  import type { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
2
- import type { IconComponentType } from "Icons";
3
2
  import type { FC } from "react";
3
+ import type { IconComponentType } from "../../../../Icons";
4
4
  export interface ToggleItemProps extends Omit<DropdownMenuCheckboxItemProps, "asChild"> {
5
5
  startIcon?: IconComponentType;
6
6
  }
@@ -141,5 +141,5 @@ module.exports = {
141
141
  }
142
142
  }
143
143
  },
144
- plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
144
+ plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Actions/Accordion/Accordion.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
145
145
  };
@@ -1 +1 @@
1
- export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "clipPath" | "marker" | "mask" | "grid" | "fontSize" | "translate" | "content" | "color" | "width" | "height" | "direction" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "left" | "right" | "top" | "bottom" | "all" | "columns" | "padding" | "resize" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "item" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;
1
+ export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "clipPath" | "marker" | "mask" | "grid" | "fontSize" | "translate" | "content" | "color" | "width" | "height" | "direction" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "item" | "all" | "left" | "right" | "top" | "bottom" | "columns" | "padding" | "resize" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;
@@ -0,0 +1,142 @@
1
+ import * as RadixAccordion from "@radix-ui/react-accordion";
2
+ import type { ReactNode, VFC } from "react";
3
+ import type { IconComponentType } from "../../Icons";
4
+ declare type AccordionSharedProps = {
5
+ children: ReactNode;
6
+ /**
7
+ * Defines a class name for the `Accordion`.
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Defines whether the `Accordion` is disabled, preventing the user from interacting with the accordion and all its items.
12
+ */
13
+ disabled?: boolean;
14
+ };
15
+ declare type AccordionSingleProps = {
16
+ /**
17
+ * Defines whether a single or multiple items can be expanded at a time.
18
+ * @default false
19
+ */
20
+ multiple?: false;
21
+ /**
22
+ * Defines the controlled value of the item to expand when `multiple` is `false`.
23
+ * Must be used in conjunction with `onValueChange`.
24
+ */
25
+ value?: RadixAccordion.AccordionSingleProps["value"];
26
+ /**
27
+ * Defines the value of the item to expand when initially rendered and `multiple` is `false`.
28
+ * Use when you do not need to control the state of the items.
29
+ */
30
+ defaultValue?: RadixAccordion.AccordionSingleProps["defaultValue"];
31
+ /**
32
+ * Defines the event handler called when the expanded state of an item changes and `multiple` is `false`.
33
+ */
34
+ onChange?: RadixAccordion.AccordionSingleProps["onValueChange"];
35
+ /**
36
+ * Allows closing content when clicking trigger for an open item when `multiple` is `false`.
37
+ * @default true
38
+ */
39
+ collapsible?: boolean;
40
+ };
41
+ declare type AccordionMultipleProps = {
42
+ /**
43
+ * Defines whether a single or multiple items can be expanded at a time.
44
+ * @default false
45
+ */
46
+ multiple: true;
47
+ /**
48
+ * Defines the controlled value of the item to expand when `multiple` is `true`.
49
+ * Must be used in conjunction with `onValueChange`.
50
+ */
51
+ value?: RadixAccordion.AccordionMultipleProps["value"];
52
+ /**
53
+ * Defines the value of the item to expand when initially rendered when `multiple` is `true`.
54
+ * Use when you do not need to control the state of the items.
55
+ */
56
+ defaultValue?: RadixAccordion.AccordionMultipleProps["defaultValue"];
57
+ /**
58
+ * Defines the event handler called when the expanded state of an item changes and `multiple` is `true`.
59
+ */
60
+ onChange?: RadixAccordion.AccordionMultipleProps["onValueChange"];
61
+ /**
62
+ * Only available when `multiple` is `false`.
63
+ */
64
+ collapsible?: never;
65
+ };
66
+ export declare type AccordionProps = AccordionSharedProps & (AccordionSingleProps | AccordionMultipleProps);
67
+ export declare type AccordionItemProps = {
68
+ children: ReactNode;
69
+ /**
70
+ * Defines a class name for the item.
71
+ */
72
+ className?: string;
73
+ /**
74
+ * Defines a unique value for the item.
75
+ */
76
+ value: string;
77
+ /**
78
+ * Defines whether the item is disabled, preventing the user from interacting with the item.
79
+ */
80
+ disabled?: boolean;
81
+ };
82
+ export declare type AccordionHeaderProps = {
83
+ /**
84
+ * Defines the title of the header.
85
+ */
86
+ children: ReactNode;
87
+ /**
88
+ * Defines a class name for the header.
89
+ */
90
+ className?: string;
91
+ /**
92
+ * Defines an icon to display next to the title and description.
93
+ */
94
+ icon?: IconComponentType;
95
+ /**
96
+ * Defines a class name for the icon.
97
+ */
98
+ iconClassName?: string;
99
+ /**
100
+ * Defines a class name for the icon background.
101
+ */
102
+ iconBgClassName?: string;
103
+ /**
104
+ * Defines a description for the header.
105
+ */
106
+ description?: ReactNode;
107
+ /**
108
+ * Defines a meta value for the header.
109
+ */
110
+ meta?: ReactNode;
111
+ /**
112
+ * Defines an icon to display as the trigger.
113
+ * Defaults to a chevron icon.
114
+ */
115
+ triggerIcon?: IconComponentType;
116
+ /**
117
+ * Defines a class name for the trigger.
118
+ */
119
+ triggerClassName?: string;
120
+ };
121
+ export declare type AccordionContentProps = {
122
+ children: ReactNode;
123
+ /**
124
+ * Defines a class name for the content.
125
+ */
126
+ className?: string;
127
+ };
128
+ declare type AccordionComponent = VFC<AccordionProps> & {
129
+ Item: typeof AccordionItem;
130
+ Header: typeof AccordionHeader;
131
+ Content: typeof AccordionContent;
132
+ };
133
+ /**
134
+ * The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
135
+ *
136
+ * See the [Accordion documentation page](https://satellite.algolia.com/components/actions/accordion) for more information.
137
+ */
138
+ export declare const Accordion: AccordionComponent;
139
+ declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
140
+ declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionHeaderProps & import("react").RefAttributes<HTMLButtonElement>>;
141
+ declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
142
+ export {};
@@ -0,0 +1,139 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
5
+ var _excluded = ["children", "className"],
6
+ _excluded2 = ["onChange", "multiple"],
7
+ _excluded3 = ["onChange", "multiple", "collapsible"];
8
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
9
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
10
+ import * as RadixAccordion from "@radix-ui/react-accordion";
11
+ import cx from "clsx";
12
+ import { forwardRef } from "react";
13
+ import { ChevronDownIcon } from "../../Icons";
14
+ import stl from "../../styles/helpers/satellitePrefixer";
15
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
16
+ var ICON_SIZE = 16;
17
+ var TRIGGER_ICON_SIZE = 20;
18
+
19
+ /**
20
+ * The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
21
+ *
22
+ * See the [Accordion documentation page](https://satellite.algolia.com/components/actions/accordion) for more information.
23
+ */
24
+ export var Accordion = function Accordion(_ref) {
25
+ var children = _ref.children,
26
+ className = _ref.className,
27
+ props = _objectWithoutProperties(_ref, _excluded);
28
+ var sharedProps = {
29
+ className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col"]))), className)
30
+ };
31
+ if (props.multiple) {
32
+ var _onChange = props.onChange,
33
+ _multiple = props.multiple,
34
+ _rest = _objectWithoutProperties(props, _excluded2);
35
+ return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, _rest), sharedProps), {}, {
36
+ type: "multiple",
37
+ onValueChange: _onChange,
38
+ children: children
39
+ }));
40
+ }
41
+ var onChange = props.onChange,
42
+ multiple = props.multiple,
43
+ _props$collapsible = props.collapsible,
44
+ collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
45
+ rest = _objectWithoutProperties(props, _excluded3);
46
+ return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, rest), sharedProps), {}, {
47
+ type: "single",
48
+ onValueChange: onChange,
49
+ collapsible: collapsible,
50
+ children: children
51
+ }));
52
+ };
53
+ Accordion.displayName = "Accordion";
54
+ var AccordionItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
55
+ var value = _ref2.value,
56
+ disabled = _ref2.disabled,
57
+ children = _ref2.children,
58
+ className = _ref2.className;
59
+ return /*#__PURE__*/_jsx(RadixAccordion.Item, {
60
+ value: value,
61
+ disabled: disabled,
62
+ ref: ref,
63
+ className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group/accordion-item flex flex-col"]))), className),
64
+ children: children
65
+ });
66
+ });
67
+ AccordionItem.displayName = "AccordionItem";
68
+ var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
69
+ var children = _ref3.children,
70
+ description = _ref3.description,
71
+ Icon = _ref3.icon,
72
+ _ref3$iconClassName = _ref3.iconClassName,
73
+ iconClassName = _ref3$iconClassName === void 0 ? stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["typo-subdued"]))) : _ref3$iconClassName,
74
+ _ref3$iconBgClassName = _ref3.iconBgClassName,
75
+ iconBgClassName = _ref3$iconBgClassName === void 0 ? stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-100"]))) : _ref3$iconBgClassName,
76
+ meta = _ref3.meta,
77
+ triggerIcon = _ref3.triggerIcon,
78
+ triggerClassName = _ref3.triggerClassName,
79
+ className = _ref3.className;
80
+ var TriggerIcon = triggerIcon || ChevronDownIcon;
81
+ return /*#__PURE__*/_jsx(RadixAccordion.Header, {
82
+ className: className,
83
+ children: /*#__PURE__*/_jsxs(RadixAccordion.Trigger, {
84
+ ref: ref,
85
+ className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["group/accordion-trigger flex gap-x-3 items-center w-full justify-between px-3.5 py-2.5 group-first/accordion-item:rounded-t group-last/accordion-item:rounded-b bg-white border-2 border-transparent focus-visible:outline-none focus-visible:border-accent-600 enabled:hover:bg-grey-50 motion-safe:transition-colors"]))), triggerClassName),
86
+ children: [/*#__PURE__*/_jsxs("div", {
87
+ className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center gap-x-3 grow"]))),
88
+ children: [Icon && /*#__PURE__*/_jsx("span", {
89
+ className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["rounded-full w-8 h-8 flex items-center justify-center shrink-0"]))), iconBgClassName),
90
+ "aria-hidden": true,
91
+ children: /*#__PURE__*/_jsx(Icon, {
92
+ className: cx(iconClassName, stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["group-disabled/accordion-trigger:text-grey-300"])))),
93
+ width: ICON_SIZE,
94
+ height: ICON_SIZE
95
+ })
96
+ }), /*#__PURE__*/_jsxs("div", {
97
+ className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col gap-y-1 text-left grow"]))),
98
+ children: [/*#__PURE__*/_jsx("div", {
99
+ className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))),
100
+ children: children
101
+ }), typeof description !== "undefined" && /*#__PURE__*/_jsx("div", {
102
+ className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["typo-display-body typo-subdued line-clamp-3 group-disabled/accordion-trigger:text-grey-300"]))),
103
+ children: description
104
+ })]
105
+ })]
106
+ }), /*#__PURE__*/_jsxs("div", {
107
+ className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex items-center gap-x-2"]))),
108
+ children: [typeof meta !== "undefined" && /*#__PURE__*/_jsx("div", {
109
+ className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["typo-display-caption group-disabled/accordion-trigger:text-grey-300"]))),
110
+ children: meta
111
+ }), /*#__PURE__*/_jsx(TriggerIcon, {
112
+ className: cx(stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["shrink-0 typo-subdued group-disabled/accordion-trigger:text-grey-300"]))),
113
+ // Don't rotate the trigger icon if it's a custom one.
114
+ !triggerIcon && stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([" group-data-[state=open]/accordion-trigger:rotate-180 motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out"])))),
115
+ width: TRIGGER_ICON_SIZE,
116
+ height: TRIGGER_ICON_SIZE,
117
+ "aria-hidden": true
118
+ })]
119
+ })]
120
+ })
121
+ });
122
+ });
123
+ AccordionHeader.displayName = "AccordionHeader";
124
+ var AccordionContent = /*#__PURE__*/forwardRef(function (_ref4, ref) {
125
+ var children = _ref4.children,
126
+ className = _ref4.className;
127
+ return /*#__PURE__*/_jsx(RadixAccordion.Content, {
128
+ ref: ref,
129
+ className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["typo-display-body typo-subdued overflow-hidden accordion-content"]))), className),
130
+ children: /*#__PURE__*/_jsx("div", {
131
+ className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["px-4 pt-2 pb-4"]))),
132
+ children: children
133
+ })
134
+ });
135
+ });
136
+ AccordionContent.displayName = "AccordionContent";
137
+ Accordion.Item = AccordionItem;
138
+ Accordion.Header = AccordionHeader;
139
+ Accordion.Content = AccordionContent;
@@ -0,0 +1,5 @@
1
+ export = accordionPlugin;
2
+ declare const accordionPlugin: {
3
+ handler: import("tailwindcss/types/config").PluginCreator;
4
+ config?: Partial<import("tailwindcss/types/config").Config> | undefined;
5
+ };
@@ -0,0 +1,43 @@
1
+ import _plugin from "tailwindcss/plugin";
2
+ // @ts-check
3
+ var plugin = _plugin;
4
+ var accordionPlugin = plugin(function (_ref) {
5
+ var addComponents = _ref.addComponents;
6
+ var animationDuration = "300ms";
7
+ var animationEasing = "ease-out";
8
+ addComponents({
9
+ /* eslint-disable @algolia/stl/prefer-stl-helper */
10
+ "@media (prefers-reduced-motion: no-preference)": {
11
+ ".accordion-content": {
12
+ "&[data-state='open']": {
13
+ animation: "stl-accordion-content-slide-down ".concat(animationDuration, " ").concat(animationEasing)
14
+ },
15
+ "&[data-state='closed']": {
16
+ animation: "stl-accordion-content-slide-up ".concat(animationDuration, " ").concat(animationEasing)
17
+ }
18
+ }
19
+ },
20
+ "@keyframes stl-accordion-content-slide-down": {
21
+ from: {
22
+ height: "0",
23
+ opacity: "0"
24
+ },
25
+ to: {
26
+ height: "var(--radix-accordion-content-height)",
27
+ opacity: "1"
28
+ }
29
+ },
30
+ "@keyframes stl-accordion-content-slide-up": {
31
+ from: {
32
+ height: "var(--radix-accordion-content-height)",
33
+ opacity: "1"
34
+ },
35
+ to: {
36
+ height: "0",
37
+ opacity: "0"
38
+ }
39
+ }
40
+ /* eslint-enable @algolia/stl/prefer-stl-helper */
41
+ });
42
+ });
43
+ export default accordionPlugin;
@@ -15,7 +15,7 @@ declare type ToggleGroupSingleProps = {
15
15
  type: "single";
16
16
  /**
17
17
  * Defines the controlled value of the pressed item.
18
- * Must be used in conjunction with `onValueChange`.
18
+ * Must be used in conjunction with `onChange`.
19
19
  */
20
20
  value?: RadixToggleGroupSingleProps["value"];
21
21
  /**
@@ -31,7 +31,7 @@ declare type ToggleGroupMultipleProps = {
31
31
  type: "multiple";
32
32
  /**
33
33
  * Defines the controlled value of the pressed items.
34
- * Must be used in conjunction with `onValueChange`.
34
+ * Must be used in conjunction with `onChange`.
35
35
  */
36
36
  value?: RadixToggleGroupMultipleProps["value"];
37
37
  /**
@@ -1,3 +1,5 @@
1
+ export type { AccordionProps as ExperimentalAccordionProps, AccordionContentProps as ExperimentalAccordionContentProps, AccordionHeaderProps as ExperimentalAccordionHeaderProps, AccordionItemProps as ExperimentalAccordionItemProps, } from "./Accordion/Accordion";
2
+ export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
1
3
  export * from "./Button/Button";
2
4
  export * from "./ButtonGroup/ButtonGroup";
3
5
  export * from "./ButtonLink/ButtonLink";