@safestrong/ppa-component-library 1.1.0 → 1.1.2
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/dist/index.d.mts +98 -0
- package/dist/index.d.ts +98 -0
- package/dist/index.js +423 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +384 -0
- package/dist/index.mjs.map +1 -0
- package/dist/styles.css +23 -10
- package/package.json +11 -4
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.faCircleNotch : 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
|
|
@@ -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 { default as Button } from \"./components/Button\";\nexport { default as TextInput } from \"./components/TextInput\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as SingleSelect } from \"./components/SingleSelect\";\nexport { default as Tooltip } from \"./components/Tooltip\";\nexport { default as NavTabClient } from \"./components/NavTabClient\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Toast } from \"./components/Toast\";\nexport { default as Expandable } from \"./components/Expandable\";\nexport { default as MultiSelect } from \"./components/MultiSelect\";\nexport { default as Dashboard } from \"./components/Dashboard\";\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { faCircleNotch } 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 ? faCircleNotch : 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 { faCircleNotch } 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 ? faCircleNotch : 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
|
|
@@ -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 { faCircleNotch } 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 ? faCircleNotch : 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,WAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AASjB,SAAR,OAAwB,IAOV;AAPU,eAC7B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAjBF,IAY+B,IAM1B,iBAN0B,IAM1B;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,aAAa,YAAY,gBAAgB;AAC/C,SACE;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,GAAG,CAAC,QAAQ,cAAc,IAAI,SAAS,IAChD,WAAW,eAAe,gBAC5B;AAAA;AAAA,IAEC,cAAc,QACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW,iBAAiB,aAAa,cAAc;AAAA;AAAA,IACzD;AAAA,IAED,YAAY,kBAAkB;AAAA,EACjC;AAEJ;;;ACrCA,OAAOA,YAAW;AAElB,SAAS,mBAAAC,wBAAuB;AAChC,IAAM,cAAc;AAEL,SAAR,UAA2B,IAW/B;AAX+B,eAChC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EARF,IAKkC,IAI7B,iBAJ6B,IAI7B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AASA,SACE,gBAAAC,OAAA,cAAC,SAAI,WAAU,eACZ,SACC,gBAAAA,OAAA,cAAC,WAAM,SAAS,UAAU,WAAU,uBACjC,KACH,GAEF,gBAAAA,OAAA,cAAC,SAAI,WAAU,yBACZ,QAAQ,gBAAAA,OAAA,cAACC,kBAAA,EAAgB,MAAY,WAAW,aAAa,GAC9D,gBAAAD,OAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,cAAc,KAAK,SAAS,IAAI,QAAQ,OAAO;AAAA;AAAA,EAC5D,CACF,CACF;AAEJ;;;ACjCA,OAAOE,YAAW;AAClB,SAAS,eAAe;AACxB,SAAS,mBAAAC,wBAAuB;AAEjB,SAAR,OACL,MACA;AACA,SACE,gBAAAC,OAAA,cAAC,SAAI,WAAU,2BACb,gBAAAA,OAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,WAAU;AAAA;AAAA,EACZ,GACA,gBAAAA,OAAA,cAAC,WAAM,SAAQ,UAAS,WAAU,YAChC,gBAAAA,OAAA,cAACC,kBAAA,EAAgB,MAAM,SAAS,WAAU,iBAAgB,CAC5D,CACF;AAEJ;;;ACnBA,OAAOC,UAAS,kBAAkB,gBAAgB;AAClD,SAAS,mBAAAC,wBAAuB;AAChC,SAAS,WAAAC,UAAS,qBAAqB;AAWxB,SAAR,aAA8B,MAA8B;AAdnE;AAeE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE,OAAO,IAAI,OAAO,GAAG,CAAC;AACjE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,eAAe,iBAAiB,OAAO;AAE7C,WAAS,cAAc;AACrB,WAAO,KAAK,QAAQ;AAAA,MAClB,CAAC,EAAE,OAAO,MAAM,MACd,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,WAAS,WAAW,EAAE,OAAO,MAAM,GAAqC;AACtE,gBAAY,EAAE,OAAO,MAAM,CAAC;AAC5B,eAAW,EAAE;AAAA,EACf;AAEA,SACE,gBAAAC,OAAA,cAAC,aACE,KAAK,SACJ,gBAAAA,OAAA,cAAC,WAAM,WAAU,qBAAoB,SAAS,KAAK,aAChD,KAAK,KACR,GAEF,gBAAAA,OAAA,cAAC,SAAI,WAAU,kCACb,gBAAAA,OAAA;AAAA,IAAC;AAAA,oDACK,OACC,KAAK,WAAW,EAAE,UAAU,KAAK,SAAS,IAAI,CAAC,IAFrD;AAAA,MAGC,QAAO,UAAK,UAAL,YAAc,SAAS;AAAA,MAC9B,MAAK;AAAA;AAAA,EACP,GACA,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA,MAC1C,WAAU;AAAA,MACV,aAAa,SAAS,QAAQ,SAAS,QAAQ;AAAA,OAC3C;AAAA,EACN,GACA,gBAAAA,OAAA,cAAC,SAAI,WAAU,0BACZ,YAAY,EAAE,UAAU,KAAK,WAAW,MACvC,gBAAAA,OAAA,cAAC,YAAO,WAAU,4CAAyC,gBAE3D,GAED,YAAY,EAAE,IAAI,CAAC,EAAE,OAAO,MAAM,MACjC,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET;AAAA,IACA,SAAS,SAAS,SACjB,gBAAAA,OAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAMC;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,gBAAAF,OAAA,cAACC,kBAAA,EAAgB,MAAM,eAAe,WAAWE,cAAa,CAChE,CACF;AAEJ;AAEA,IAAMA,eAAc;;;AClFpB,OAAOC,YAAW;AAQH,SAAR,QAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,WAAS,YAAY;AACnB,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACA,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAU,cACb,gBAAAA,OAAA,cAAC,SAAI,WAAU,UAAQ,QAAS,GAChC,gBAAAA,OAAA,cAAC,UAAK,WAAW,gBAAgB,UAAU,CAAC,MAAK,IAAK,CACxD;AAEJ;AAEA,IAAM,MACJ;AACF,IAAM,SACJ;AACF,IAAM,QACJ;AACF,IAAM,OACJ;;;ACrCF,OAAOC,YAAW;AAOH,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AACF,GAMI;AACF,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAU,qBACZ,MAAM,IAAI,CAAC,EAAE,OAAO,MAAM,MACzB,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,gBACT,MAAM,UAAU,SAAS,sBAC3B;AAAA,MACA,SAAS,MAAM,MAAM,UAAU,KAAK;AAAA;AAAA,IAEnC;AAAA,EACH,CACD,CACH;AAEJ;;;AChCA,OAAOC,YAAW;AAOH,SAAR,KAAsB,EAAE,UAAU,UAAU,GAAmB;AACpE,SAAO,gBAAAA,OAAA,cAAC,SAAI,WAAW,QAAQ,SAAS,MAAK,QAAS;AACxD;AAEA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AACF,MAGM;AACJ,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAW,GAAG,SAAS,8CACzB,QACH;AAEJ;AACA,KAAK,SAAS;;;ACxBd,OAAOC,YAAW;AAClB,SAAS,mBAAAC,wBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUQ,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,SACE,gBAAAD,OAAA,cAAC,SAAI,WAAW,GAAG,SAAS,2BAC1B,gBAAAA,OAAA,cAAC,SAAI,WAAU,iBACb,gBAAAA,OAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAM,QAAQ,IAAI;AAAA,MAClB,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,EACjC,GACA,gBAAAD,OAAA,cAAC,aACC,gBAAAA,OAAA,cAAC,OAAE,WAAU,kBAAgB,KAAM,GACnC,gBAAAA,OAAA,cAAC,OAAE,WAAU,wBAAsB,WAAY,CACjD,GACA,gBAAAA,OAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAM,QAAQ,IAAI;AAAA,MAClB,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,EACjC,CACF,GACA,gBAAAD,OAAA,cAAC,OAAE,WAAU,cAAa,OAAO,EAAE,YAAY,SAAS,IAAI,EAAE,GAAG,CACnE;AAEJ;AAEA,IAAM,SAAS,CAAC,EAAE,MAAM,KAAK,MAAyC;AACpE,SACE,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,eAAe,IAAI,UAAU,SAAS,IAAI;AAAA;AAAA,IAE/D,gBAAAA,OAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAM,QAAQ,IAAI;AAAA,QAClB,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,IACjC;AAAA,IACA,gBAAAD,OAAA,cAAC,WAAG,IAAK;AAAA,EACX;AAEJ;AAEA,MAAM,SAAS;AAEf,SAAS,SAAS,MAAc;AAC9B,SAAO,eAAe,IAAI;AAC5B;AAEA,SAAS,QAAQ,MAAc;AAC7B,QAAM,UAAU;AAAA,IACd,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAEA,SAAO,QAAQ,IAAI;AACrB;;;AC7EA,OAAOE,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,mBAAAC,wBAAuB;AASjB,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,OAAO,MAAM,QAAQ,KAAK,EAAE;AAClC,SACE,gBAAAD,OAAA,cAAC,SAAI,WAAW,cAAc,SAAS,MACrC,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,WAAU;AAAA;AAAA,EACZ,GACA,gBAAAA,OAAA,cAACC,kBAAA,EAAgB,MAAM,cAAc,WAAU,oBAAmB,GAClE,gBAAAD,OAAA,cAAC,WAAM,SAAS,MAAM,WAAU,uBAC7B,KACH,GACA,gBAAAA,OAAA,cAAC,SAAI,WAAU,sBACb,gBAAAA,OAAA,cAAC,SAAI,WAAU,2BAAyB,QAAS,CACnD,CACF;AAEJ;;;ACnCA,OAAOE,WAAS,aAAa,oBAAAC,mBAAkB,YAAAC,iBAAgB;AAC/D,SAAS,mBAAAC,wBAAuB;AAChC,SAAS,WAAAC,UAAS,mBAAmB;AAOtB,SAAR,YAA6B;AAAA,EAClC,MAAAC;AAAA,EACA;AACF,GAGI;AACF,QAAM,CAAC,SAAS,UAAU,IAAIH,UAAS,EAAE;AACzC,QAAM,eAAeD,kBAAiB,OAAO;AAE7C,WAAS,cAAc;AACrB,WAAOI,MAAK;AAAA,MACV,CAAC,EAAE,OAAO,MAAM,MACd,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,WAAS,WAAW,EAAE,OAAO,MAAM,GAAqC;AAEtE,UAAM,OAAO,CAAC,SAAS;AACrB,YAAMC,eAAc,KAAK,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAChE,UAAIA,cAAa;AACf,eAAO,KAAK,OAAO,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,MACvD;AACA,aAAO,CAAC,GAAG,MAAM,EAAE,OAAO,MAAM,CAAC;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,WAAS,YAAY,OAAe;AAClC,WAAO,MAAM,MAAM,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,EAC5D;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC1C,UAAM,gBAAgB,MAAM,MAAM,UAAUD,MAAK;AACjD,UAAM,OAAO,gBAAgB,CAAC,IAAIA,KAAI;AAAA,EACxC,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,SACE,gBAAAL,QAAA,cAAC,SAAI,WAAU,kCACb,gBAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,aAAa,GAAG,MAAM,MAAM,MAAM;AAAA,MAClC,WAAU;AAAA,MACV,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA;AAAA,EAC5C,GACA,gBAAAA,QAAA,cAAC,SAAI,WAAU,mDACZ,YAAY,EAAE,UAAU,KAAK,WAAW,MACvC,gBAAAA,QAAA,cAAC,YAAO,WAAU,4CAAyC,gBAE3D,GAED,YAAY,EAAE,IAAI,CAAC,EAAE,OAAO,MAAM,MACjC,gBAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET;AAAA,IACA,YAAY,KAAK,KAChB,gBAAAA,QAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAMC;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,gBAAAJ,QAAA,cAAC,YAAO,WAAU,kBAAiB,SAAS,qBAC1C,gBAAAA,QAAA,cAACG,kBAAA,EAAgB,MAAM,aAAa,WAAWI,cAAa,CAC9D,CACF;AAEJ;AACA,IAAMA,eAAc;;;ACpFpB,OAAOC,WAAS,YAAAC,iBAAgB;AAGhC,IAAM,OAAO;AAAA,EACX,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AACxC;AACe,SAAR,YAA6B;AAClC,QAAM,CAAC,cAAc,eAAe,IAAIC,UAEtC,CAAC,CAAC;AACJ,SACE,gBAAAC,QAAA,cAAC,aACC,gBAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,EAAE,OAAO,cAAc,QAAQ,gBAAgB;AAAA;AAAA,EACxD,CACF;AAEJ;","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/dist/styles.css
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
--color-white: #fff;
|
|
11
11
|
--spacing: 0.25rem;
|
|
12
12
|
--font-weight-semibold: 600;
|
|
13
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
13
14
|
--animate-spin: spin 1s linear infinite;
|
|
14
15
|
--default-transition-duration: 150ms;
|
|
15
16
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -350,6 +351,18 @@
|
|
|
350
351
|
.opacity-\[0\] {
|
|
351
352
|
opacity: 0;
|
|
352
353
|
}
|
|
354
|
+
.duration-500 {
|
|
355
|
+
--tw-duration: 500ms;
|
|
356
|
+
transition-duration: 500ms;
|
|
357
|
+
}
|
|
358
|
+
.duration-2000 {
|
|
359
|
+
--tw-duration: 2000ms;
|
|
360
|
+
transition-duration: 2000ms;
|
|
361
|
+
}
|
|
362
|
+
.ease-in-out {
|
|
363
|
+
--tw-ease: var(--ease-in-out);
|
|
364
|
+
transition-timing-function: var(--ease-in-out);
|
|
365
|
+
}
|
|
353
366
|
.after\:top-\[-0\.4rem\] {
|
|
354
367
|
&::after {
|
|
355
368
|
content: var(--tw-content);
|
|
@@ -852,6 +865,14 @@ body {
|
|
|
852
865
|
syntax: "*";
|
|
853
866
|
inherits: false;
|
|
854
867
|
}
|
|
868
|
+
@property --tw-duration {
|
|
869
|
+
syntax: "*";
|
|
870
|
+
inherits: false;
|
|
871
|
+
}
|
|
872
|
+
@property --tw-ease {
|
|
873
|
+
syntax: "*";
|
|
874
|
+
inherits: false;
|
|
875
|
+
}
|
|
855
876
|
@property --tw-content {
|
|
856
877
|
syntax: "*";
|
|
857
878
|
initial-value: "";
|
|
@@ -931,14 +952,6 @@ body {
|
|
|
931
952
|
syntax: "*";
|
|
932
953
|
inherits: false;
|
|
933
954
|
}
|
|
934
|
-
@property --tw-duration {
|
|
935
|
-
syntax: "*";
|
|
936
|
-
inherits: false;
|
|
937
|
-
}
|
|
938
|
-
@property --tw-ease {
|
|
939
|
-
syntax: "*";
|
|
940
|
-
inherits: false;
|
|
941
|
-
}
|
|
942
955
|
@keyframes spin {
|
|
943
956
|
to {
|
|
944
957
|
transform: rotate(360deg);
|
|
@@ -957,6 +970,8 @@ body {
|
|
|
957
970
|
--tw-skew-y: initial;
|
|
958
971
|
--tw-border-style: solid;
|
|
959
972
|
--tw-leading: initial;
|
|
973
|
+
--tw-duration: initial;
|
|
974
|
+
--tw-ease: initial;
|
|
960
975
|
--tw-content: "";
|
|
961
976
|
--tw-outline-style: solid;
|
|
962
977
|
--tw-shadow: 0 0 #0000;
|
|
@@ -974,8 +989,6 @@ body {
|
|
|
974
989
|
--tw-ring-offset-color: #fff;
|
|
975
990
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
976
991
|
--tw-font-weight: initial;
|
|
977
|
-
--tw-duration: initial;
|
|
978
|
-
--tw-ease: initial;
|
|
979
992
|
}
|
|
980
993
|
}
|
|
981
994
|
}
|
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,18 +32,19 @@
|
|
|
31
32
|
"react-dom": "^18.2.0"
|
|
32
33
|
},
|
|
33
34
|
"name": "@safestrong/ppa-component-library",
|
|
34
|
-
"version": "1.1.
|
|
35
|
+
"version": "1.1.2",
|
|
35
36
|
"description": "Collection of reusable components for any PPA web applications",
|
|
36
|
-
"main": "dist/index.
|
|
37
|
-
"module": "dist/index.
|
|
37
|
+
"main": "dist/index.cjs",
|
|
38
|
+
"module": "dist/index.js",
|
|
39
|
+
"types": "dist/index.d.ts",
|
|
38
40
|
"files": [
|
|
39
41
|
"dist"
|
|
40
42
|
],
|
|
41
|
-
"types": "dist/index.d.ts",
|
|
42
43
|
"repository": "https://github.com/safestrong/ppa-component-library.git",
|
|
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",
|
|
@@ -50,6 +52,11 @@
|
|
|
50
52
|
"rollup": "rollup -c --bundleConfigAsCjs"
|
|
51
53
|
},
|
|
52
54
|
"exports": {
|
|
55
|
+
".": {
|
|
56
|
+
"types": "./dist/index.d.ts",
|
|
57
|
+
"import": "./dist/index.js",
|
|
58
|
+
"require": "./dist/index.cjs"
|
|
59
|
+
},
|
|
53
60
|
"./styles.css": "./dist/styles.css"
|
|
54
61
|
},
|
|
55
62
|
"sideEffects": [
|