opus-toolkit-components 1.9.8 → 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.
- package/lib/components/Accordions/index.d.ts +1 -0
- package/lib/main.js +30 -21
- package/lib/main.js.map +1 -1
- package/package.json +1 -1
package/lib/main.js
CHANGED
|
@@ -11,11 +11,13 @@ __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
|
|
15
|
-
/* harmony import */ var
|
|
16
|
-
/* harmony import */ var
|
|
17
|
-
/* harmony import */ var
|
|
18
|
-
/* harmony import */ var
|
|
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__);
|
|
20
|
+
|
|
19
21
|
|
|
20
22
|
|
|
21
23
|
|
|
@@ -63,6 +65,9 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
63
65
|
* @property {React.ReactNode} [pillIcon]
|
|
64
66
|
* Optional icon inside the pill.
|
|
65
67
|
*
|
|
68
|
+
* @property {boolean} [hasOutline=true]
|
|
69
|
+
* Toggles the default accordion outline.
|
|
70
|
+
*
|
|
66
71
|
* @property {boolean} [disabled]
|
|
67
72
|
* Disables interaction with the accordion.
|
|
68
73
|
*/
|
|
@@ -86,10 +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);
|
|
92
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");
|
|
93
102
|
|
|
94
103
|
// Determine which activeIndex to use: internal or external
|
|
95
104
|
const isActive = activeIndex !== undefined ? activeIndex === index : internalActiveIndex === index;
|
|
@@ -109,49 +118,49 @@ const Accordion = _ref => {
|
|
|
109
118
|
setInternalActiveIndex(activeIndex);
|
|
110
119
|
}
|
|
111
120
|
}, [activeIndex]);
|
|
112
|
-
return /*#__PURE__*/(0,
|
|
121
|
+
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
|
|
113
122
|
id: `accordion-${index}`,
|
|
114
|
-
className:
|
|
115
|
-
children: [/*#__PURE__*/(0,
|
|
123
|
+
className: accordionClasses,
|
|
124
|
+
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
|
|
116
125
|
className: "accordion-item",
|
|
117
|
-
children: /*#__PURE__*/(0,
|
|
126
|
+
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
|
|
118
127
|
onClick: !isPreview && !isLocked ? toggle : null,
|
|
119
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} `,
|
|
120
|
-
children: [hasTitle && /*#__PURE__*/(0,
|
|
129
|
+
children: [hasTitle && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
|
|
121
130
|
className: "flex items-center justify-between gap-2",
|
|
122
|
-
children: /*#__PURE__*/(0,
|
|
131
|
+
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_4__["default"], {
|
|
123
132
|
as: "h2",
|
|
124
133
|
variant: "h2",
|
|
125
134
|
className: "text-h4 mx-4 my-2 text-[--color-text-strong]",
|
|
126
135
|
children: title
|
|
127
136
|
})
|
|
128
|
-
}), /*#__PURE__*/(0,
|
|
137
|
+
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
|
|
129
138
|
className: "flex items-center gap-4",
|
|
130
|
-
children: [isPill && /*#__PURE__*/(0,
|
|
139
|
+
children: [isPill && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Pills_Pill__WEBPACK_IMPORTED_MODULE_3__["default"], {
|
|
131
140
|
text: pillText,
|
|
132
141
|
status: pillStatus,
|
|
133
142
|
icon: pillIcon
|
|
134
|
-
}), /*#__PURE__*/(0,
|
|
135
|
-
className:
|
|
143
|
+
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
|
|
144
|
+
className: actionBorderClasses,
|
|
136
145
|
onClick: !isLocked ? toggle : null // toggle only here
|
|
137
146
|
,
|
|
138
|
-
children: isPreview && !isLocked ? /*#__PURE__*/(0,
|
|
147
|
+
children: isPreview && !isLocked ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__.PencilSquareIcon, {
|
|
139
148
|
className: "h-5 w-5 text-[--color-text-strong]",
|
|
140
149
|
onClick: e => {
|
|
141
150
|
e.stopPropagation(); // prevent toggle from firing on pencil click
|
|
142
151
|
onExitPreview(); // trigger exit preview
|
|
143
152
|
}
|
|
144
|
-
}) : !isLocked ? /*#__PURE__*/(0,
|
|
153
|
+
}) : !isLocked ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__.ChevronDownIcon, {
|
|
145
154
|
className: `h-4 w-4 transform text-[--color-text-strong] transition-transform ${isActive ? "rotate-180" : "rotate-0"}`
|
|
146
155
|
}) : null
|
|
147
156
|
})]
|
|
148
157
|
})]
|
|
149
158
|
})
|
|
150
|
-
}, index), isActive && /*#__PURE__*/(0,
|
|
151
|
-
className:
|
|
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}`,
|
|
152
161
|
children: content
|
|
153
|
-
}), isPreview && activeIndex !== index && /*#__PURE__*/(0,
|
|
154
|
-
className:
|
|
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}`,
|
|
155
164
|
children: preview
|
|
156
165
|
})]
|
|
157
166
|
});
|