@safestrong/ppa-component-library 1.1.0 → 1.1.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 (7) hide show
  1. package/dist/index.d.mts +98 -0
  2. package/dist/index.d.ts +98 -0
  3. package/dist/index.js +423 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +384 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/package.json +3 -1
package/dist/index.d.mts ADDED
@@ -0,0 +1,98 @@
1
+ import React from 'react';
2
+ import { IconProp } from '@fortawesome/fontawesome-svg-core';
3
+
4
+ type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
5
+ icon?: IconProp;
6
+ label: string;
7
+ btnType?: "primary" | "secondary" | "tertiary";
8
+ isLoading?: boolean;
9
+ };
10
+ declare function Button({ label, icon, isLoading, btnType, className, ...rest }: Readonly<Button>): React.JSX.Element;
11
+
12
+ declare function TextInput({ label, labelFor, icon, ...attr }: Readonly<React.InputHTMLAttributes<HTMLInputElement> & {
13
+ label?: string;
14
+ labelFor?: string;
15
+ icon?: IconProp;
16
+ }>): React.JSX.Element;
17
+
18
+ declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
19
+
20
+ type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
21
+ label?: string;
22
+ labelHtml?: string;
23
+ options: {
24
+ label: string;
25
+ value: string;
26
+ }[];
27
+ };
28
+ declare function SingleSelect(attr: Readonly<SingleSelect>): React.JSX.Element;
29
+
30
+ type Tooltip = {
31
+ children: React.ReactNode;
32
+ text: string;
33
+ position: "top" | "bottom" | "right" | "left";
34
+ };
35
+ declare function Tooltip({ children, text, position, }: Readonly<Tooltip>): React.JSX.Element;
36
+
37
+ type Option$1 = {
38
+ label: string;
39
+ value: string;
40
+ };
41
+ declare function NavTabClient({ items, state, }: Readonly<{
42
+ items: Option$1[];
43
+ state: {
44
+ active: string;
45
+ setActive: (val: string) => void;
46
+ };
47
+ }>): React.JSX.Element;
48
+
49
+ type Card = {
50
+ children: React.ReactNode;
51
+ className: string;
52
+ };
53
+ declare function Card({ children, className }: Readonly<Card>): React.JSX.Element;
54
+ declare namespace Card {
55
+ var Footer: ({ className, children, }: {
56
+ className?: string;
57
+ children?: React.ReactNode;
58
+ }) => React.JSX.Element;
59
+ }
60
+
61
+ type ToastType = "warning" | "success" | "info" | "danger";
62
+ type Toast = {
63
+ title: string;
64
+ className?: string;
65
+ description: string;
66
+ type: ToastType;
67
+ };
68
+ declare function Toast({ title, description, type, className, }: Readonly<Toast>): React.JSX.Element;
69
+ declare namespace Toast {
70
+ var Inline: ({ text, type }: {
71
+ text: string;
72
+ type: ToastType;
73
+ }) => React.JSX.Element;
74
+ }
75
+
76
+ type Expandable = {
77
+ children: React.ReactNode;
78
+ title: string;
79
+ className: string;
80
+ isOpen?: boolean;
81
+ };
82
+ declare function Expandable({ children, title, className, isOpen, }: Readonly<Expandable>): React.JSX.Element;
83
+
84
+ type Option = {
85
+ value: string;
86
+ label: string;
87
+ };
88
+ declare function MultiSelect({ list, state, }: Readonly<{
89
+ list: Option[];
90
+ state: {
91
+ value: Option[];
92
+ select: (newVal: Option[]) => void;
93
+ };
94
+ }>): React.JSX.Element;
95
+
96
+ declare function Dashboard(): React.JSX.Element;
97
+
98
+ export { Button, Card, Dashboard, Expandable, MultiSelect, NavTabClient, SingleSelect, Slider, TextInput, Toast, Tooltip };
package/dist/index.d.ts ADDED
@@ -0,0 +1,98 @@
1
+ import React from 'react';
2
+ import { IconProp } from '@fortawesome/fontawesome-svg-core';
3
+
4
+ type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
5
+ icon?: IconProp;
6
+ label: string;
7
+ btnType?: "primary" | "secondary" | "tertiary";
8
+ isLoading?: boolean;
9
+ };
10
+ declare function Button({ label, icon, isLoading, btnType, className, ...rest }: Readonly<Button>): React.JSX.Element;
11
+
12
+ declare function TextInput({ label, labelFor, icon, ...attr }: Readonly<React.InputHTMLAttributes<HTMLInputElement> & {
13
+ label?: string;
14
+ labelFor?: string;
15
+ icon?: IconProp;
16
+ }>): React.JSX.Element;
17
+
18
+ declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
19
+
20
+ type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
21
+ label?: string;
22
+ labelHtml?: string;
23
+ options: {
24
+ label: string;
25
+ value: string;
26
+ }[];
27
+ };
28
+ declare function SingleSelect(attr: Readonly<SingleSelect>): React.JSX.Element;
29
+
30
+ type Tooltip = {
31
+ children: React.ReactNode;
32
+ text: string;
33
+ position: "top" | "bottom" | "right" | "left";
34
+ };
35
+ declare function Tooltip({ children, text, position, }: Readonly<Tooltip>): React.JSX.Element;
36
+
37
+ type Option$1 = {
38
+ label: string;
39
+ value: string;
40
+ };
41
+ declare function NavTabClient({ items, state, }: Readonly<{
42
+ items: Option$1[];
43
+ state: {
44
+ active: string;
45
+ setActive: (val: string) => void;
46
+ };
47
+ }>): React.JSX.Element;
48
+
49
+ type Card = {
50
+ children: React.ReactNode;
51
+ className: string;
52
+ };
53
+ declare function Card({ children, className }: Readonly<Card>): React.JSX.Element;
54
+ declare namespace Card {
55
+ var Footer: ({ className, children, }: {
56
+ className?: string;
57
+ children?: React.ReactNode;
58
+ }) => React.JSX.Element;
59
+ }
60
+
61
+ type ToastType = "warning" | "success" | "info" | "danger";
62
+ type Toast = {
63
+ title: string;
64
+ className?: string;
65
+ description: string;
66
+ type: ToastType;
67
+ };
68
+ declare function Toast({ title, description, type, className, }: Readonly<Toast>): React.JSX.Element;
69
+ declare namespace Toast {
70
+ var Inline: ({ text, type }: {
71
+ text: string;
72
+ type: ToastType;
73
+ }) => React.JSX.Element;
74
+ }
75
+
76
+ type Expandable = {
77
+ children: React.ReactNode;
78
+ title: string;
79
+ className: string;
80
+ isOpen?: boolean;
81
+ };
82
+ declare function Expandable({ children, title, className, isOpen, }: Readonly<Expandable>): React.JSX.Element;
83
+
84
+ type Option = {
85
+ value: string;
86
+ label: string;
87
+ };
88
+ declare function MultiSelect({ list, state, }: Readonly<{
89
+ list: Option[];
90
+ state: {
91
+ value: Option[];
92
+ select: (newVal: Option[]) => void;
93
+ };
94
+ }>): React.JSX.Element;
95
+
96
+ declare function Dashboard(): React.JSX.Element;
97
+
98
+ export { Button, Card, Dashboard, Expandable, MultiSelect, NavTabClient, SingleSelect, Slider, TextInput, Toast, Tooltip };
package/dist/index.js ADDED
@@ -0,0 +1,423 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
10
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ var __export = (target, all) => {
38
+ for (var name in all)
39
+ __defProp(target, name, { get: all[name], enumerable: true });
40
+ };
41
+ var __copyProps = (to, from, except, desc) => {
42
+ if (from && typeof from === "object" || typeof from === "function") {
43
+ for (let key of __getOwnPropNames(from))
44
+ if (!__hasOwnProp.call(to, key) && key !== except)
45
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
46
+ }
47
+ return to;
48
+ };
49
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
50
+ // If the importer is in node compatibility mode or this is not an ESM
51
+ // file that has been converted to a CommonJS file using a Babel-
52
+ // compatible transform (i.e. "__esModule" has not been set), then set
53
+ // "default" to the CommonJS "module.exports" for node compatibility.
54
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
55
+ mod
56
+ ));
57
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
+
59
+ // src/index.ts
60
+ var index_exports = {};
61
+ __export(index_exports, {
62
+ Button: () => Button,
63
+ Card: () => Card,
64
+ Dashboard: () => Dashboard,
65
+ Expandable: () => Expandable,
66
+ MultiSelect: () => MultiSelect,
67
+ NavTabClient: () => NavTabClient,
68
+ SingleSelect: () => SingleSelect,
69
+ Slider: () => Slider,
70
+ TextInput: () => TextInput,
71
+ Toast: () => Toast,
72
+ Tooltip: () => Tooltip
73
+ });
74
+ module.exports = __toCommonJS(index_exports);
75
+
76
+ // src/components/Button.tsx
77
+ var import_react = __toESM(require("react"));
78
+ var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
79
+ var import_react_fontawesome = require("@fortawesome/react-fontawesome");
80
+ function Button(_a) {
81
+ var _b = _a, {
82
+ label,
83
+ icon,
84
+ isLoading,
85
+ btnType,
86
+ className
87
+ } = _b, rest = __objRest(_b, [
88
+ "label",
89
+ "icon",
90
+ "isLoading",
91
+ "btnType",
92
+ "className"
93
+ ]);
94
+ const buttonIcon = isLoading ? import_free_solid_svg_icons.faRefresh : icon;
95
+ return /* @__PURE__ */ import_react.default.createElement(
96
+ "button",
97
+ __spreadProps(__spreadValues({}, rest), {
98
+ className: `${!icon && "py-[0.67rem]"} ${className} ${btnType == "secondary" && "btn__secondary"} btn__primary`
99
+ }),
100
+ buttonIcon && icon && /* @__PURE__ */ import_react.default.createElement(
101
+ import_react_fontawesome.FontAwesomeIcon,
102
+ {
103
+ icon: buttonIcon,
104
+ className: `text-[1.1rem] ${isLoading && "animate-spin"}`
105
+ }
106
+ ),
107
+ isLoading ? "Memproses ..." : label
108
+ );
109
+ }
110
+
111
+ // src/components/TextInput.tsx
112
+ var import_react2 = __toESM(require("react"));
113
+ var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
114
+ var input__icon = "px-[0.7rem] text-[1.1rem] text-[var(--color-icon-input)]";
115
+ function TextInput(_a) {
116
+ var _b = _a, {
117
+ label,
118
+ labelFor,
119
+ icon
120
+ } = _b, attr = __objRest(_b, [
121
+ "label",
122
+ "labelFor",
123
+ "icon"
124
+ ]);
125
+ return /* @__PURE__ */ import_react2.default.createElement("div", { className: "group ..." }, label && /* @__PURE__ */ import_react2.default.createElement("label", { htmlFor: labelFor, className: "text-input__label" }, label), /* @__PURE__ */ import_react2.default.createElement("div", { className: "text-input__wrapper" }, icon && /* @__PURE__ */ import_react2.default.createElement(import_react_fontawesome2.FontAwesomeIcon, { icon, className: input__icon }), /* @__PURE__ */ import_react2.default.createElement(
126
+ "input",
127
+ __spreadProps(__spreadValues({}, attr), {
128
+ className: `text-input ${attr.className} ${icon && "!pl-0"}`
129
+ })
130
+ )));
131
+ }
132
+
133
+ // src/components/Slider.tsx
134
+ var import_react3 = __toESM(require("react"));
135
+ var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
136
+ var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
137
+ function Slider(attr) {
138
+ return /* @__PURE__ */ import_react3.default.createElement("div", { className: "slider__wrapper group" }, /* @__PURE__ */ import_react3.default.createElement(
139
+ "input",
140
+ __spreadProps(__spreadValues({}, attr), {
141
+ id: "slider",
142
+ type: "checkbox",
143
+ className: "peer ... w-[2rem] opacity-[0] cursor-pointer"
144
+ })
145
+ ), /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "slider", className: "slider" }, /* @__PURE__ */ import_react3.default.createElement(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faCheck, className: "text-[0.7rem]" })));
146
+ }
147
+
148
+ // src/components/SingleSelect.tsx
149
+ var import_react4 = __toESM(require("react"));
150
+ var import_react_fontawesome4 = require("@fortawesome/react-fontawesome");
151
+ var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
152
+ function SingleSelect(attr) {
153
+ var _a;
154
+ const [selected, setSelected] = (0, import_react4.useState)({ label: "", value: "" });
155
+ const [keyword, setKeyword] = (0, import_react4.useState)("");
156
+ const inputKeyword = (0, import_react4.useDeferredValue)(keyword);
157
+ function getFiltered() {
158
+ return attr.options.filter(
159
+ ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
160
+ );
161
+ }
162
+ function selectItem({ label, value }) {
163
+ setSelected({ label, value });
164
+ setKeyword("");
165
+ }
166
+ return /* @__PURE__ */ import_react4.default.createElement("div", null, attr.label && /* @__PURE__ */ import_react4.default.createElement("label", { className: "text-input__label", htmlFor: attr.labelHtml }, attr.label), /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react4.default.createElement(
167
+ "input",
168
+ __spreadProps(__spreadValues(__spreadValues({}, attr), attr.onChange ? { onChange: attr.onChange } : {}), {
169
+ value: (_a = attr.value) != null ? _a : selected.value,
170
+ type: "hidden"
171
+ })
172
+ ), /* @__PURE__ */ import_react4.default.createElement(
173
+ "input",
174
+ __spreadValues({
175
+ value: keyword,
176
+ type: "search",
177
+ onChange: (e) => setKeyword(e.target.value),
178
+ className: "text-input peer ...",
179
+ placeholder: selected.value ? selected.label : "Cari opsi ..."
180
+ }, attr)
181
+ ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "select-item__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react4.default.createElement("button", { className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ import_react4.default.createElement(
182
+ "button",
183
+ {
184
+ onClick: () => selectItem({ label, value }),
185
+ key: value,
186
+ className: "select-item"
187
+ },
188
+ label,
189
+ selected.value == value && /* @__PURE__ */ import_react4.default.createElement(
190
+ import_react_fontawesome4.FontAwesomeIcon,
191
+ {
192
+ icon: import_free_solid_svg_icons3.faCheck,
193
+ className: "text-[var(--color-primary)]"
194
+ }
195
+ )
196
+ ))), /* @__PURE__ */ import_react4.default.createElement(import_react_fontawesome4.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faChevronDown, className: input__icon2 })));
197
+ }
198
+ var input__icon2 = "pr-[0.7rem] text-[var(--color-icon-input)]";
199
+
200
+ // src/components/Tooltip.tsx
201
+ var import_react5 = __toESM(require("react"));
202
+ function Tooltip({
203
+ children,
204
+ text,
205
+ position
206
+ }) {
207
+ function getAccent() {
208
+ const mapping = {
209
+ top,
210
+ bottom,
211
+ left,
212
+ right
213
+ };
214
+ return mapping[position];
215
+ }
216
+ return /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "peer" }, children), /* @__PURE__ */ import_react5.default.createElement("span", { className: `tooltip-text ${getAccent()}` }, text));
217
+ }
218
+ var top = "bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] ";
219
+ var bottom = "right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] ";
220
+ var right = "left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]";
221
+ var left = "right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]";
222
+
223
+ // src/components/NavTabClient.tsx
224
+ var import_react6 = __toESM(require("react"));
225
+ function NavTabClient({
226
+ items,
227
+ state
228
+ }) {
229
+ return /* @__PURE__ */ import_react6.default.createElement("nav", { className: "navtab__wrapper" }, items.map(({ label, value }) => /* @__PURE__ */ import_react6.default.createElement(
230
+ "button",
231
+ {
232
+ key: value,
233
+ className: `navtab__item ${state.active == value && "navtab__item__active"}`,
234
+ onClick: () => state.setActive(value)
235
+ },
236
+ label
237
+ )));
238
+ }
239
+
240
+ // src/components/Card.tsx
241
+ var import_react7 = __toESM(require("react"));
242
+ function Card({ children, className }) {
243
+ return /* @__PURE__ */ import_react7.default.createElement("div", { className: `card ${className}` }, children);
244
+ }
245
+ var Footer = ({
246
+ className,
247
+ children
248
+ }) => {
249
+ return /* @__PURE__ */ import_react7.default.createElement("div", { className: `${className} border-t border-t-[var(--color-border)]` }, children);
250
+ };
251
+ Card.Footer = Footer;
252
+
253
+ // src/components/Toast.tsx
254
+ var import_react8 = __toESM(require("react"));
255
+ var import_react_fontawesome5 = require("@fortawesome/react-fontawesome");
256
+ var import_free_solid_svg_icons4 = require("@fortawesome/free-solid-svg-icons");
257
+ function Toast({
258
+ title,
259
+ description,
260
+ type,
261
+ className
262
+ }) {
263
+ return /* @__PURE__ */ import_react8.default.createElement("div", { className: `${className} toast__wrapper group` }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "toast__body" }, /* @__PURE__ */ import_react8.default.createElement(
264
+ import_react_fontawesome5.FontAwesomeIcon,
265
+ {
266
+ icon: getIcon(type),
267
+ className: "text-[1.2rem]",
268
+ style: { color: getColor(type) }
269
+ }
270
+ ), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__title" }, title), /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__description" }, description)), /* @__PURE__ */ import_react8.default.createElement(
271
+ import_react_fontawesome5.FontAwesomeIcon,
272
+ {
273
+ icon: getIcon(type),
274
+ className: "toast-bg__icon",
275
+ style: { color: getColor(type) }
276
+ }
277
+ )), /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__bar", style: { background: getColor(type) } }));
278
+ }
279
+ var Inline = ({ text, type }) => {
280
+ return /* @__PURE__ */ import_react8.default.createElement(
281
+ "div",
282
+ {
283
+ className: "toast__inline",
284
+ style: { background: `var(--color-${type}-soft)`, opacity: 0.9 }
285
+ },
286
+ /* @__PURE__ */ import_react8.default.createElement(
287
+ import_react_fontawesome5.FontAwesomeIcon,
288
+ {
289
+ icon: getIcon(type),
290
+ className: "text-[1.1rem]",
291
+ style: { color: getColor(type) }
292
+ }
293
+ ),
294
+ /* @__PURE__ */ import_react8.default.createElement("p", null, text)
295
+ );
296
+ };
297
+ Toast.Inline = Inline;
298
+ function getColor(type) {
299
+ return `var(--color-${type})`;
300
+ }
301
+ function getIcon(type) {
302
+ const mapping = {
303
+ warning: import_free_solid_svg_icons4.faQuestionCircle,
304
+ info: import_free_solid_svg_icons4.faInfoCircle,
305
+ danger: import_free_solid_svg_icons4.faXmarkCircle,
306
+ success: import_free_solid_svg_icons4.faCheckCircle
307
+ };
308
+ return mapping[type];
309
+ }
310
+
311
+ // src/components/Expandable.tsx
312
+ var import_react9 = __toESM(require("react"));
313
+ var import_free_solid_svg_icons5 = require("@fortawesome/free-solid-svg-icons");
314
+ var import_react_fontawesome6 = require("@fortawesome/react-fontawesome");
315
+ function Expandable({
316
+ children,
317
+ title,
318
+ className,
319
+ isOpen
320
+ }) {
321
+ const name = title.replace(" ", "");
322
+ return /* @__PURE__ */ import_react9.default.createElement("div", { className: `expandable ${className}` }, /* @__PURE__ */ import_react9.default.createElement(
323
+ "input",
324
+ {
325
+ id: name,
326
+ type: "checkbox",
327
+ defaultChecked: isOpen,
328
+ className: "opacity-[0] peer absolute top-0 ex-title"
329
+ }
330
+ ), /* @__PURE__ */ import_react9.default.createElement(import_react_fontawesome6.FontAwesomeIcon, { icon: import_free_solid_svg_icons5.faCaretRight, className: "expandable__icon" }), /* @__PURE__ */ import_react9.default.createElement("label", { htmlFor: name, className: "expandable__title" }, title), /* @__PURE__ */ import_react9.default.createElement("div", { className: "expandable__body" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "p-[0.75rem] px-[1rem]" }, children)));
331
+ }
332
+
333
+ // src/components/MultiSelect.tsx
334
+ var import_react10 = __toESM(require("react"));
335
+ var import_react_fontawesome7 = require("@fortawesome/react-fontawesome");
336
+ var import_free_solid_svg_icons6 = require("@fortawesome/free-solid-svg-icons");
337
+ function MultiSelect({
338
+ list: list2,
339
+ state
340
+ }) {
341
+ const [keyword, setKeyword] = (0, import_react10.useState)("");
342
+ const inputKeyword = (0, import_react10.useDeferredValue)(keyword);
343
+ function getFiltered() {
344
+ return list2.filter(
345
+ ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
346
+ );
347
+ }
348
+ function selectItem({ label, value }) {
349
+ state.select((prev) => {
350
+ const isItemExist2 = prev.find((item) => item.value == value);
351
+ if (isItemExist2) {
352
+ return prev.filter((item) => item.value != value);
353
+ }
354
+ return [...prev, { label, value }];
355
+ });
356
+ }
357
+ function isItemExist(value) {
358
+ return state.value.find((item) => item.value == value);
359
+ }
360
+ const selectUnSelectAll = (0, import_react10.useCallback)(() => {
361
+ const isAllSelected = state.value.length == list2.length;
362
+ state.select(isAllSelected ? [] : list2);
363
+ }, [state.value]);
364
+ return /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react10.default.createElement(
365
+ "input",
366
+ {
367
+ value: keyword,
368
+ type: "search",
369
+ placeholder: `${state.value.length} Dipilih`,
370
+ className: "text-input peer ...",
371
+ onChange: (e) => setKeyword(e.target.value)
372
+ }
373
+ ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react10.default.createElement("button", { className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ import_react10.default.createElement(
374
+ "button",
375
+ {
376
+ onClick: () => selectItem({ label, value }),
377
+ key: value,
378
+ className: "select-item"
379
+ },
380
+ label,
381
+ isItemExist(value) && /* @__PURE__ */ import_react10.default.createElement(
382
+ import_react_fontawesome7.FontAwesomeIcon,
383
+ {
384
+ icon: import_free_solid_svg_icons6.faCheck,
385
+ className: "text-[var(--color-primary)]"
386
+ }
387
+ )
388
+ ))), /* @__PURE__ */ import_react10.default.createElement("button", { className: "cursor-pointer", onClick: selectUnSelectAll }, /* @__PURE__ */ import_react10.default.createElement(import_react_fontawesome7.FontAwesomeIcon, { icon: import_free_solid_svg_icons6.faListCheck, className: input__icon3 })));
389
+ }
390
+ var input__icon3 = "pr-[0.7rem] text-[var(--color-icon-input)]";
391
+
392
+ // src/components/Dashboard.tsx
393
+ var import_react11 = __toESM(require("react"));
394
+ var list = [
395
+ { label: "Option 1", value: "option1" },
396
+ { label: "Option 2", value: "option2" },
397
+ { label: "Option 3", value: "option3" }
398
+ ];
399
+ function Dashboard() {
400
+ const [selectedItem, setSelectedItem] = (0, import_react11.useState)([]);
401
+ return /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement(
402
+ MultiSelect,
403
+ {
404
+ list,
405
+ state: { value: selectedItem, select: setSelectedItem }
406
+ }
407
+ ));
408
+ }
409
+ // Annotate the CommonJS export names for ESM import in node:
410
+ 0 && (module.exports = {
411
+ Button,
412
+ Card,
413
+ Dashboard,
414
+ Expandable,
415
+ MultiSelect,
416
+ NavTabClient,
417
+ SingleSelect,
418
+ Slider,
419
+ TextInput,
420
+ Toast,
421
+ Tooltip
422
+ });
423
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/Dashboard.tsx"],"sourcesContent":["export * from './components'","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { faRefresh } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faRefresh : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.67rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.1rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon = \"px-[0.7rem] text-[1.1rem] text-[var(--color-icon-input)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ...\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input ${attr.className} ${icon && \"!pl-0\"}`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n options: {\n label: string;\n value: string;\n }[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const [selected, setSelected] = useState({ label: \"\", value: \"\" });\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return attr.options.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n setSelected({ label, value });\n setKeyword(\"\");\n }\n\n return (\n <div>\n {attr.label && (\n <label className=\"text-input__label\" htmlFor={attr.labelHtml}>\n {attr.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attr}\n {...(attr.onChange ? { onChange: attr.onChange } : {})}\n value={attr.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n onChange={(e) => setKeyword(e.target.value)}\n className=\"text-input peer ...\"\n placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n {...attr}\n />\n <div className=\"select-item__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position,\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value && \"navtab__item__active\"\n }`}\n onClick={() => state.setActive(value)}\n >\n {label}\n </button>\n ))}\n </nav>\n );\n}\n","import React from \"react\";\n\ntype Card = {\n children: React.ReactNode;\n className: string;\n};\n\nexport default function Card({ children, className }: Readonly<Card>) {\n return <div className={`card ${className}`}>{children}</div>;\n}\n\nconst Footer = ({\n className,\n children,\n}: {\n className?: string;\n children?: React.ReactNode;\n}) => {\n return (\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\n {children}\n </div>\n );\n};\nCard.Footer = Footer;\n","import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faInfoCircle,\n faQuestionCircle,\n faXmarkCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\n\ntype ToastType = \"warning\" | \"success\" | \"info\" | \"danger\";\ntype Toast = {\n title: string;\n className?: string;\n description: string;\n type: ToastType;\n};\n\nexport default function Toast({\n title,\n description,\n type,\n className,\n}: Readonly<Toast>) {\n return (\n <div className={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p className=\"toast__bar\" style={{ background: getColor(type) }}></p>\n </div>\n );\n}\n\nconst Inline = ({ text, type }: { text: string; type: ToastType }) => {\n return (\n <div\n className=\"toast__inline\"\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.1rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n value: string;\n label: string;\n};\n\nexport default function MultiSelect({\n list,\n state,\n}: Readonly<{\n list: Option[];\n state: { value: Option[]; select: (newVal: Option[]) => void };\n}>) {\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return list.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == list.length;\n state.select(isAllSelected ? [] : list);\n }, [state.value]);\n\n return (\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className=\"text-input peer ...\"\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button className=\"cursor-pointer\" onClick={selectUnSelectAll}>\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\nexport default function Dashboard() {\n const [selectedItem, setSelectedItem] = useState<\n { label: string; value: string }[]\n >([]);\n return (\n <div>\n <MultiSelect\n list={list}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n </div>\n );\n}\n"],"mappings":"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","names":["React","import_react","import_react_fontawesome","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","input__icon","import_react","React","import_react","React","import_react","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","list","isItemExist","React","input__icon","import_react","React"]}
package/dist/index.mjs ADDED
@@ -0,0 +1,384 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+
33
+ // src/components/Button.tsx
34
+ import React from "react";
35
+ import { faRefresh } from "@fortawesome/free-solid-svg-icons";
36
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
37
+ function Button(_a) {
38
+ var _b = _a, {
39
+ label,
40
+ icon,
41
+ isLoading,
42
+ btnType,
43
+ className
44
+ } = _b, rest = __objRest(_b, [
45
+ "label",
46
+ "icon",
47
+ "isLoading",
48
+ "btnType",
49
+ "className"
50
+ ]);
51
+ const buttonIcon = isLoading ? faRefresh : icon;
52
+ return /* @__PURE__ */ React.createElement(
53
+ "button",
54
+ __spreadProps(__spreadValues({}, rest), {
55
+ className: `${!icon && "py-[0.67rem]"} ${className} ${btnType == "secondary" && "btn__secondary"} btn__primary`
56
+ }),
57
+ buttonIcon && icon && /* @__PURE__ */ React.createElement(
58
+ FontAwesomeIcon,
59
+ {
60
+ icon: buttonIcon,
61
+ className: `text-[1.1rem] ${isLoading && "animate-spin"}`
62
+ }
63
+ ),
64
+ isLoading ? "Memproses ..." : label
65
+ );
66
+ }
67
+
68
+ // src/components/TextInput.tsx
69
+ import React2 from "react";
70
+ import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
71
+ var input__icon = "px-[0.7rem] text-[1.1rem] text-[var(--color-icon-input)]";
72
+ function TextInput(_a) {
73
+ var _b = _a, {
74
+ label,
75
+ labelFor,
76
+ icon
77
+ } = _b, attr = __objRest(_b, [
78
+ "label",
79
+ "labelFor",
80
+ "icon"
81
+ ]);
82
+ return /* @__PURE__ */ React2.createElement("div", { className: "group ..." }, label && /* @__PURE__ */ React2.createElement("label", { htmlFor: labelFor, className: "text-input__label" }, label), /* @__PURE__ */ React2.createElement("div", { className: "text-input__wrapper" }, icon && /* @__PURE__ */ React2.createElement(FontAwesomeIcon2, { icon, className: input__icon }), /* @__PURE__ */ React2.createElement(
83
+ "input",
84
+ __spreadProps(__spreadValues({}, attr), {
85
+ className: `text-input ${attr.className} ${icon && "!pl-0"}`
86
+ })
87
+ )));
88
+ }
89
+
90
+ // src/components/Slider.tsx
91
+ import React3 from "react";
92
+ import { faCheck } from "@fortawesome/free-solid-svg-icons";
93
+ import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
94
+ function Slider(attr) {
95
+ return /* @__PURE__ */ React3.createElement("div", { className: "slider__wrapper group" }, /* @__PURE__ */ React3.createElement(
96
+ "input",
97
+ __spreadProps(__spreadValues({}, attr), {
98
+ id: "slider",
99
+ type: "checkbox",
100
+ className: "peer ... w-[2rem] opacity-[0] cursor-pointer"
101
+ })
102
+ ), /* @__PURE__ */ React3.createElement("label", { htmlFor: "slider", className: "slider" }, /* @__PURE__ */ React3.createElement(FontAwesomeIcon3, { icon: faCheck, className: "text-[0.7rem]" })));
103
+ }
104
+
105
+ // src/components/SingleSelect.tsx
106
+ import React4, { useDeferredValue, useState } from "react";
107
+ import { FontAwesomeIcon as FontAwesomeIcon4 } from "@fortawesome/react-fontawesome";
108
+ import { faCheck as faCheck2, faChevronDown } from "@fortawesome/free-solid-svg-icons";
109
+ function SingleSelect(attr) {
110
+ var _a;
111
+ const [selected, setSelected] = useState({ label: "", value: "" });
112
+ const [keyword, setKeyword] = useState("");
113
+ const inputKeyword = useDeferredValue(keyword);
114
+ function getFiltered() {
115
+ return attr.options.filter(
116
+ ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
117
+ );
118
+ }
119
+ function selectItem({ label, value }) {
120
+ setSelected({ label, value });
121
+ setKeyword("");
122
+ }
123
+ return /* @__PURE__ */ React4.createElement("div", null, attr.label && /* @__PURE__ */ React4.createElement("label", { className: "text-input__label", htmlFor: attr.labelHtml }, attr.label), /* @__PURE__ */ React4.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React4.createElement(
124
+ "input",
125
+ __spreadProps(__spreadValues(__spreadValues({}, attr), attr.onChange ? { onChange: attr.onChange } : {}), {
126
+ value: (_a = attr.value) != null ? _a : selected.value,
127
+ type: "hidden"
128
+ })
129
+ ), /* @__PURE__ */ React4.createElement(
130
+ "input",
131
+ __spreadValues({
132
+ value: keyword,
133
+ type: "search",
134
+ onChange: (e) => setKeyword(e.target.value),
135
+ className: "text-input peer ...",
136
+ placeholder: selected.value ? selected.label : "Cari opsi ..."
137
+ }, attr)
138
+ ), /* @__PURE__ */ React4.createElement("div", { className: "select-item__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React4.createElement("button", { className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ React4.createElement(
139
+ "button",
140
+ {
141
+ onClick: () => selectItem({ label, value }),
142
+ key: value,
143
+ className: "select-item"
144
+ },
145
+ label,
146
+ selected.value == value && /* @__PURE__ */ React4.createElement(
147
+ FontAwesomeIcon4,
148
+ {
149
+ icon: faCheck2,
150
+ className: "text-[var(--color-primary)]"
151
+ }
152
+ )
153
+ ))), /* @__PURE__ */ React4.createElement(FontAwesomeIcon4, { icon: faChevronDown, className: input__icon2 })));
154
+ }
155
+ var input__icon2 = "pr-[0.7rem] text-[var(--color-icon-input)]";
156
+
157
+ // src/components/Tooltip.tsx
158
+ import React5 from "react";
159
+ function Tooltip({
160
+ children,
161
+ text,
162
+ position
163
+ }) {
164
+ function getAccent() {
165
+ const mapping = {
166
+ top,
167
+ bottom,
168
+ left,
169
+ right
170
+ };
171
+ return mapping[position];
172
+ }
173
+ return /* @__PURE__ */ React5.createElement("div", { className: "relative" }, /* @__PURE__ */ React5.createElement("div", { className: "peer" }, children), /* @__PURE__ */ React5.createElement("span", { className: `tooltip-text ${getAccent()}` }, text));
174
+ }
175
+ var top = "bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] ";
176
+ var bottom = "right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] ";
177
+ var right = "left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]";
178
+ var left = "right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]";
179
+
180
+ // src/components/NavTabClient.tsx
181
+ import React6 from "react";
182
+ function NavTabClient({
183
+ items,
184
+ state
185
+ }) {
186
+ return /* @__PURE__ */ React6.createElement("nav", { className: "navtab__wrapper" }, items.map(({ label, value }) => /* @__PURE__ */ React6.createElement(
187
+ "button",
188
+ {
189
+ key: value,
190
+ className: `navtab__item ${state.active == value && "navtab__item__active"}`,
191
+ onClick: () => state.setActive(value)
192
+ },
193
+ label
194
+ )));
195
+ }
196
+
197
+ // src/components/Card.tsx
198
+ import React7 from "react";
199
+ function Card({ children, className }) {
200
+ return /* @__PURE__ */ React7.createElement("div", { className: `card ${className}` }, children);
201
+ }
202
+ var Footer = ({
203
+ className,
204
+ children
205
+ }) => {
206
+ return /* @__PURE__ */ React7.createElement("div", { className: `${className} border-t border-t-[var(--color-border)]` }, children);
207
+ };
208
+ Card.Footer = Footer;
209
+
210
+ // src/components/Toast.tsx
211
+ import React8 from "react";
212
+ import { FontAwesomeIcon as FontAwesomeIcon5 } from "@fortawesome/react-fontawesome";
213
+ import {
214
+ faCheckCircle,
215
+ faInfoCircle,
216
+ faQuestionCircle,
217
+ faXmarkCircle
218
+ } from "@fortawesome/free-solid-svg-icons";
219
+ function Toast({
220
+ title,
221
+ description,
222
+ type,
223
+ className
224
+ }) {
225
+ return /* @__PURE__ */ React8.createElement("div", { className: `${className} toast__wrapper group` }, /* @__PURE__ */ React8.createElement("div", { className: "toast__body" }, /* @__PURE__ */ React8.createElement(
226
+ FontAwesomeIcon5,
227
+ {
228
+ icon: getIcon(type),
229
+ className: "text-[1.2rem]",
230
+ style: { color: getColor(type) }
231
+ }
232
+ ), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("p", { className: "toast__title" }, title), /* @__PURE__ */ React8.createElement("p", { className: "toast__description" }, description)), /* @__PURE__ */ React8.createElement(
233
+ FontAwesomeIcon5,
234
+ {
235
+ icon: getIcon(type),
236
+ className: "toast-bg__icon",
237
+ style: { color: getColor(type) }
238
+ }
239
+ )), /* @__PURE__ */ React8.createElement("p", { className: "toast__bar", style: { background: getColor(type) } }));
240
+ }
241
+ var Inline = ({ text, type }) => {
242
+ return /* @__PURE__ */ React8.createElement(
243
+ "div",
244
+ {
245
+ className: "toast__inline",
246
+ style: { background: `var(--color-${type}-soft)`, opacity: 0.9 }
247
+ },
248
+ /* @__PURE__ */ React8.createElement(
249
+ FontAwesomeIcon5,
250
+ {
251
+ icon: getIcon(type),
252
+ className: "text-[1.1rem]",
253
+ style: { color: getColor(type) }
254
+ }
255
+ ),
256
+ /* @__PURE__ */ React8.createElement("p", null, text)
257
+ );
258
+ };
259
+ Toast.Inline = Inline;
260
+ function getColor(type) {
261
+ return `var(--color-${type})`;
262
+ }
263
+ function getIcon(type) {
264
+ const mapping = {
265
+ warning: faQuestionCircle,
266
+ info: faInfoCircle,
267
+ danger: faXmarkCircle,
268
+ success: faCheckCircle
269
+ };
270
+ return mapping[type];
271
+ }
272
+
273
+ // src/components/Expandable.tsx
274
+ import React9 from "react";
275
+ import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
276
+ import { FontAwesomeIcon as FontAwesomeIcon6 } from "@fortawesome/react-fontawesome";
277
+ function Expandable({
278
+ children,
279
+ title,
280
+ className,
281
+ isOpen
282
+ }) {
283
+ const name = title.replace(" ", "");
284
+ return /* @__PURE__ */ React9.createElement("div", { className: `expandable ${className}` }, /* @__PURE__ */ React9.createElement(
285
+ "input",
286
+ {
287
+ id: name,
288
+ type: "checkbox",
289
+ defaultChecked: isOpen,
290
+ className: "opacity-[0] peer absolute top-0 ex-title"
291
+ }
292
+ ), /* @__PURE__ */ React9.createElement(FontAwesomeIcon6, { icon: faCaretRight, className: "expandable__icon" }), /* @__PURE__ */ React9.createElement("label", { htmlFor: name, className: "expandable__title" }, title), /* @__PURE__ */ React9.createElement("div", { className: "expandable__body" }, /* @__PURE__ */ React9.createElement("div", { className: "p-[0.75rem] px-[1rem]" }, children)));
293
+ }
294
+
295
+ // src/components/MultiSelect.tsx
296
+ import React10, { useCallback, useDeferredValue as useDeferredValue2, useState as useState2 } from "react";
297
+ import { FontAwesomeIcon as FontAwesomeIcon7 } from "@fortawesome/react-fontawesome";
298
+ import { faCheck as faCheck3, faListCheck } from "@fortawesome/free-solid-svg-icons";
299
+ function MultiSelect({
300
+ list: list2,
301
+ state
302
+ }) {
303
+ const [keyword, setKeyword] = useState2("");
304
+ const inputKeyword = useDeferredValue2(keyword);
305
+ function getFiltered() {
306
+ return list2.filter(
307
+ ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
308
+ );
309
+ }
310
+ function selectItem({ label, value }) {
311
+ state.select((prev) => {
312
+ const isItemExist2 = prev.find((item) => item.value == value);
313
+ if (isItemExist2) {
314
+ return prev.filter((item) => item.value != value);
315
+ }
316
+ return [...prev, { label, value }];
317
+ });
318
+ }
319
+ function isItemExist(value) {
320
+ return state.value.find((item) => item.value == value);
321
+ }
322
+ const selectUnSelectAll = useCallback(() => {
323
+ const isAllSelected = state.value.length == list2.length;
324
+ state.select(isAllSelected ? [] : list2);
325
+ }, [state.value]);
326
+ return /* @__PURE__ */ React10.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React10.createElement(
327
+ "input",
328
+ {
329
+ value: keyword,
330
+ type: "search",
331
+ placeholder: `${state.value.length} Dipilih`,
332
+ className: "text-input peer ...",
333
+ onChange: (e) => setKeyword(e.target.value)
334
+ }
335
+ ), /* @__PURE__ */ React10.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React10.createElement("button", { className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ React10.createElement(
336
+ "button",
337
+ {
338
+ onClick: () => selectItem({ label, value }),
339
+ key: value,
340
+ className: "select-item"
341
+ },
342
+ label,
343
+ isItemExist(value) && /* @__PURE__ */ React10.createElement(
344
+ FontAwesomeIcon7,
345
+ {
346
+ icon: faCheck3,
347
+ className: "text-[var(--color-primary)]"
348
+ }
349
+ )
350
+ ))), /* @__PURE__ */ React10.createElement("button", { className: "cursor-pointer", onClick: selectUnSelectAll }, /* @__PURE__ */ React10.createElement(FontAwesomeIcon7, { icon: faListCheck, className: input__icon3 })));
351
+ }
352
+ var input__icon3 = "pr-[0.7rem] text-[var(--color-icon-input)]";
353
+
354
+ // src/components/Dashboard.tsx
355
+ import React11, { useState as useState3 } from "react";
356
+ var list = [
357
+ { label: "Option 1", value: "option1" },
358
+ { label: "Option 2", value: "option2" },
359
+ { label: "Option 3", value: "option3" }
360
+ ];
361
+ function Dashboard() {
362
+ const [selectedItem, setSelectedItem] = useState3([]);
363
+ return /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement(
364
+ MultiSelect,
365
+ {
366
+ list,
367
+ state: { value: selectedItem, select: setSelectedItem }
368
+ }
369
+ ));
370
+ }
371
+ export {
372
+ Button,
373
+ Card,
374
+ Dashboard,
375
+ Expandable,
376
+ MultiSelect,
377
+ NavTabClient,
378
+ SingleSelect,
379
+ Slider,
380
+ TextInput,
381
+ Toast,
382
+ Tooltip
383
+ };
384
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/Dashboard.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { faRefresh } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faRefresh : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.67rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.1rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon = \"px-[0.7rem] text-[1.1rem] text-[var(--color-icon-input)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ...\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input ${attr.className} ${icon && \"!pl-0\"}`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n options: {\n label: string;\n value: string;\n }[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const [selected, setSelected] = useState({ label: \"\", value: \"\" });\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return attr.options.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n setSelected({ label, value });\n setKeyword(\"\");\n }\n\n return (\n <div>\n {attr.label && (\n <label className=\"text-input__label\" htmlFor={attr.labelHtml}>\n {attr.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attr}\n {...(attr.onChange ? { onChange: attr.onChange } : {})}\n value={attr.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n onChange={(e) => setKeyword(e.target.value)}\n className=\"text-input peer ...\"\n placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n {...attr}\n />\n <div className=\"select-item__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position,\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value && \"navtab__item__active\"\n }`}\n onClick={() => state.setActive(value)}\n >\n {label}\n </button>\n ))}\n </nav>\n );\n}\n","import React from \"react\";\n\ntype Card = {\n children: React.ReactNode;\n className: string;\n};\n\nexport default function Card({ children, className }: Readonly<Card>) {\n return <div className={`card ${className}`}>{children}</div>;\n}\n\nconst Footer = ({\n className,\n children,\n}: {\n className?: string;\n children?: React.ReactNode;\n}) => {\n return (\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\n {children}\n </div>\n );\n};\nCard.Footer = Footer;\n","import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faInfoCircle,\n faQuestionCircle,\n faXmarkCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\n\ntype ToastType = \"warning\" | \"success\" | \"info\" | \"danger\";\ntype Toast = {\n title: string;\n className?: string;\n description: string;\n type: ToastType;\n};\n\nexport default function Toast({\n title,\n description,\n type,\n className,\n}: Readonly<Toast>) {\n return (\n <div className={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p className=\"toast__bar\" style={{ background: getColor(type) }}></p>\n </div>\n );\n}\n\nconst Inline = ({ text, type }: { text: string; type: ToastType }) => {\n return (\n <div\n className=\"toast__inline\"\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.1rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n value: string;\n label: string;\n};\n\nexport default function MultiSelect({\n list,\n state,\n}: Readonly<{\n list: Option[];\n state: { value: Option[]; select: (newVal: Option[]) => void };\n}>) {\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return list.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == list.length;\n state.select(isAllSelected ? [] : list);\n }, [state.value]);\n\n return (\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className=\"text-input peer ...\"\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button className=\"cursor-pointer\" onClick={selectUnSelectAll}>\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\nexport default function Dashboard() {\n const [selectedItem, setSelectedItem] = useState<\n { label: string; value: string }[]\n >([]);\n return (\n <div>\n <MultiSelect\n list={list}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n </div>\n );\n}\n"],"mappings":"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","names":["React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","faCheck","React","FontAwesomeIcon","faCheck","input__icon","React","React","React","React","FontAwesomeIcon","React","FontAwesomeIcon","React","useDeferredValue","useState","FontAwesomeIcon","faCheck","list","isItemExist","input__icon","React","useState","useState","React"]}
package/package.json CHANGED
@@ -24,6 +24,7 @@
24
24
  "rollup-plugin-peer-deps-external": "^2.2.4",
25
25
  "storybook": "^8.4.2",
26
26
  "tailwindcss": "^4.1.12",
27
+ "tsup": "^8.5.0",
27
28
  "typescript": "^5.9.2"
28
29
  },
29
30
  "peerDependencies": {
@@ -31,7 +32,7 @@
31
32
  "react-dom": "^18.2.0"
32
33
  },
33
34
  "name": "@safestrong/ppa-component-library",
34
- "version": "1.1.0",
35
+ "version": "1.1.1",
35
36
  "description": "Collection of reusable components for any PPA web applications",
36
37
  "main": "dist/index.js",
37
38
  "module": "dist/index.esm.js",
@@ -43,6 +44,7 @@
43
44
  "author": "SS6 Development",
44
45
  "license": "MIT",
45
46
  "scripts": {
47
+ "build": "tsup src/index.ts --dts --format esm,cjs --sourcemap",
46
48
  "storybook": "concurrently \"npm:dev:css\" \"storybook dev -p 6006\"",
47
49
  "build-storybook": "storybook build",
48
50
  "build:css": "npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",