opus-toolkit-components 1.9.7 → 1.9.9

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 (4) hide show
  1. package/lib/components/Accordions/index.d.ts +20 -19
  2. package/lib/main.js +77 -67
  3. package/lib/main.js.map +1 -1
  4. package/package.json +1 -1
package/lib/components/Accordions/index.d.ts CHANGED
@@ -1,19 +1,20 @@
1
- // Accordion Typescript Definitions - update when new props added
2
- export interface AccordionProps {
3
- title: string | React.ReactNode;
4
- handleToggle?: (index: number) => void;
5
- activeIndex?: number;
6
- index: number;
7
- isPreview?: boolean;
8
- isLocked?: boolean;
9
- onExitPreview?: () => void;
10
- content: React.ReactNode;
11
- preview?: React.ReactNode;
12
- isPill?: boolean;
13
- pillText?: string;
14
- pillStatus?: "success" | "warning" | "error" | "info" | string;
15
- pillIcon?: React.ReactNode;
16
- disabled?: boolean;
17
- }
18
-
19
- export const Accordion: React.ComponentType<AccordionProps>;
1
+ // Accordion Typescript Definitions - update when new props added
2
+ export interface AccordionProps {
3
+ title?: string | React.ReactNode;
4
+ handleToggle?: (index: number) => void;
5
+ activeIndex?: number;
6
+ index: number;
7
+ isPreview?: boolean;
8
+ isLocked?: boolean;
9
+ onExitPreview?: () => void;
10
+ content: React.ReactNode;
11
+ preview?: React.ReactNode;
12
+ isPill?: boolean;
13
+ pillText?: string;
14
+ pillStatus?: "success" | "warning" | "error" | "info" | string;
15
+ pillIcon?: React.ReactNode;
16
+ hasOutline?: boolean;
17
+ disabled?: boolean;
18
+ }
19
+
20
+ export const Accordion: React.ComponentType<AccordionProps>;
package/lib/main.js CHANGED
@@ -11,64 +11,69 @@ __webpack_require__.r(__webpack_exports__);
11
11
  /* harmony export */ });
12
12
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9206);
13
13
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
14
- /* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(58964);
15
- /* harmony import */ var _Pills_Pill__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(89714);
16
- /* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21111);
17
- /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(94178);
18
- /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
14
+ /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(34164);
15
+ /* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(58964);
16
+ /* harmony import */ var _Pills_Pill__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(89714);
17
+ /* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(21111);
18
+ /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(94178);
19
+ /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
19
20
 
20
21
 
21
22
 
22
23
 
23
24
 
24
- /**
25
- * @typedef {Object} AccordionProps
26
- *
27
- * @property {string | React.ReactNode} title
28
- * Title rendered inside the header.
29
- *
30
- * @property {Function} [handleToggle]
31
- * Optional external toggle handler called with (index).
32
- *
33
- * @property {number} [activeIndex]
34
- * Controlled active index. If provided, the accordion becomes controlled.
35
- *
36
- * @property {number} index
37
- * This accordion's position in a list.
38
- *
39
- * @property {boolean} [isPreview]
40
- * If true, accordion goes into preview mode.
41
- *
42
- * @property {boolean} [isLocked]
43
- * If true, accordion cannot toggle.
44
- *
45
- * @property {Function} [onExitPreview]
46
- * Callback fired when exiting preview mode.
47
- *
48
- * @property {React.ReactNode} content
49
- * Accordion expanded content.
50
- *
51
- * @property {React.ReactNode} [preview]
52
- * Rendered when in preview mode and not active.
53
- *
54
- * @property {boolean} [isPill]
55
- * Whether to show a status pill.
56
- *
57
- * @property {string} [pillText]
58
- * Label inside the pill.
59
- *
60
- * @property {'success'|'warning'|'error'|'info'|string} [pillStatus]
61
- * Visual status for the pill.
62
- *
63
- * @property {React.ReactNode} [pillIcon]
64
- * Optional icon inside the pill.
65
- *
66
- * @property {boolean} [disabled]
67
- * Disables interaction with the accordion.
25
+
26
+ /**
27
+ * @typedef {Object} AccordionProps
28
+ *
29
+ * @property {string | React.ReactNode} [title]
30
+ * Title rendered inside the header.
31
+ *
32
+ * @property {Function} [handleToggle]
33
+ * Optional external toggle handler called with (index).
34
+ *
35
+ * @property {number} [activeIndex]
36
+ * Controlled active index. If provided, the accordion becomes controlled.
37
+ *
38
+ * @property {number} index
39
+ * This accordion's position in a list.
40
+ *
41
+ * @property {boolean} [isPreview]
42
+ * If true, accordion goes into preview mode.
43
+ *
44
+ * @property {boolean} [isLocked]
45
+ * If true, accordion cannot toggle.
46
+ *
47
+ * @property {Function} [onExitPreview]
48
+ * Callback fired when exiting preview mode.
49
+ *
50
+ * @property {React.ReactNode} content
51
+ * Accordion expanded content.
52
+ *
53
+ * @property {React.ReactNode} [preview]
54
+ * Rendered when in preview mode and not active.
55
+ *
56
+ * @property {boolean} [isPill]
57
+ * Whether to show a status pill.
58
+ *
59
+ * @property {string} [pillText]
60
+ * Label inside the pill.
61
+ *
62
+ * @property {'success'|'warning'|'error'|'info'|string} [pillStatus]
63
+ * Visual status for the pill.
64
+ *
65
+ * @property {React.ReactNode} [pillIcon]
66
+ * Optional icon inside the pill.
67
+ *
68
+ * @property {boolean} [hasOutline=true]
69
+ * Toggles the default accordion outline.
70
+ *
71
+ * @property {boolean} [disabled]
72
+ * Disables interaction with the accordion.
68
73
  */
69
74
 
70
- /**
71
- * @param {AccordionProps} props
75
+ /**
76
+ * @param {AccordionProps} props
72
77
  */
73
78
 
74
79
  const Accordion = _ref => {
@@ -86,9 +91,14 @@ const Accordion = _ref => {
86
91
  pillText,
87
92
  pillStatus,
88
93
  pillIcon,
94
+ hasOutline = true,
89
95
  disabled = false
90
96
  } = _ref;
91
97
  const [internalActiveIndex, setInternalActiveIndex] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
98
+ const hasTitle = title !== undefined && title !== null && title !== "";
99
+ const accordionClasses = (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("accordion w-full rounded-lg shadow-lg", hasOutline ? "border border-[--color-stroke]" : "border-0", disabled ? "pointer-events-none opacity-50" : "");
100
+ const dividerClasses = hasOutline ? "border-0 border-t-2 border-solid border-[--color-stroke]" : "border-0";
101
+ const actionBorderClasses = (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("border-0 border-solid border-[--color-stroke] p-4", !isLocked && "cursor-pointer", !isLocked && hasOutline && "border-l-2");
92
102
 
93
103
  // Determine which activeIndex to use: internal or external
94
104
  const isActive = activeIndex !== undefined ? activeIndex === index : internalActiveIndex === index;
@@ -108,49 +118,49 @@ const Accordion = _ref => {
108
118
  setInternalActiveIndex(activeIndex);
109
119
  }
110
120
  }, [activeIndex]);
111
- return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
121
+ return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
112
122
  id: `accordion-${index}`,
113
- className: `accordion w-full border border-[--color-stroke] shadow-lg ${disabled ? "pointer-events-none opacity-50" : ""} rounded-lg`,
114
- children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
123
+ className: accordionClasses,
124
+ children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
115
125
  className: "accordion-item",
116
- children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
126
+ children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
117
127
  onClick: !isPreview && !isLocked ? toggle : null,
118
128
  className: `accordion-header flex items-center justify-between rounded-t-lg bg-[--color-accordion-header] ${isActive || isPreview ? "" : "rounded-b-lg"} hover: ${!isLocked ? "cursor-pointer" : null} `,
119
- children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
129
+ children: [hasTitle && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
120
130
  className: "flex items-center justify-between gap-2",
121
- children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_3__["default"], {
131
+ children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_4__["default"], {
122
132
  as: "h2",
123
133
  variant: "h2",
124
134
  className: "text-h4 mx-4 my-2 text-[--color-text-strong]",
125
135
  children: title
126
136
  })
127
- }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
137
+ }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
128
138
  className: "flex items-center gap-4",
129
- children: [isPill && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Pills_Pill__WEBPACK_IMPORTED_MODULE_2__["default"], {
139
+ children: [isPill && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Pills_Pill__WEBPACK_IMPORTED_MODULE_3__["default"], {
130
140
  text: pillText,
131
141
  status: pillStatus,
132
142
  icon: pillIcon
133
- }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
134
- className: `border-0 ${!isLocked && "cursor-pointer border-l-2"} border-solid border-[--color-stroke] p-4`,
143
+ }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
144
+ className: actionBorderClasses,
135
145
  onClick: !isLocked ? toggle : null // toggle only here
136
146
  ,
137
- children: isPreview && !isLocked ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.PencilSquareIcon, {
147
+ children: isPreview && !isLocked ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__.PencilSquareIcon, {
138
148
  className: "h-5 w-5 text-[--color-text-strong]",
139
149
  onClick: e => {
140
150
  e.stopPropagation(); // prevent toggle from firing on pencil click
141
151
  onExitPreview(); // trigger exit preview
142
152
  }
143
- }) : !isLocked ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.ChevronDownIcon, {
153
+ }) : !isLocked ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__.ChevronDownIcon, {
144
154
  className: `h-4 w-4 transform text-[--color-text-strong] transition-transform ${isActive ? "rotate-180" : "rotate-0"}`
145
155
  }) : null
146
156
  })]
147
157
  })]
148
158
  })
149
- }, index), isActive && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
150
- className: "accordion-body rounded-b-lg border-0 border-t-2 border-solid border-[--color-stroke] bg-[--color-accordion-body] p-3 text-[--color-text-weak]",
159
+ }, index), isActive && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
160
+ className: `accordion-body rounded-b-lg bg-[--color-accordion-body] p-3 text-[--color-text-weak] ${dividerClasses}`,
151
161
  children: content
152
- }), isPreview && activeIndex !== index && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
153
- className: "accordion-body rounded-b-lg border-0 border-t-2 border-solid border-[--color-stroke] bg-[--color-accordion-body] p-3 text-[--color-text-weak]",
162
+ }), isPreview && activeIndex !== index && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
163
+ className: `accordion-body rounded-b-lg bg-[--color-accordion-body] p-3 text-[--color-text-weak] ${dividerClasses}`,
154
164
  children: preview
155
165
  })]
156
166
  });