trepur_components 2.3.5 → 2.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Accordion/index.d.ts +1 -2
- package/lib/components/Accordion/index.js +8 -8
- package/lib/components/AlertBar/index.d.ts +1 -2
- package/lib/components/AlertBar/index.js +13 -13
- package/lib/components/index.d.ts +2 -2
- package/lib/index.js +4 -4
- package/lib/styles/{base.css → global.css} +2 -44
- package/lib/styles/themes/local.css +40 -0
- package/lib/styles/themes/palette.css +131 -0
- package/lib/tailwind/boxShadow.ts +9 -0
- package/lib/tailwind/colors.ts +410 -0
- package/lib/tailwind/container.ts +11 -0
- package/lib/tailwind/preset.ts +88 -0
- package/lib/tailwind/spacing.ts +14 -0
- package/package.json +1 -1
- package/src/components/Accordion/Accordion.stories.tsx +1 -1
- package/src/components/Accordion/index.tsx +1 -3
- package/src/components/AlertBar/AlertBar.stories.tsx +1 -1
- package/src/components/AlertBar/index.tsx +2 -4
- package/src/components/index.ts +2 -2
- package/src/styles/{base.css → global.css} +2 -44
- package/src/styles/themes/local.css +40 -0
- package/src/styles/themes/palette.css +131 -0
- package/tailwind/boxShadow.ts +9 -0
- package/tailwind/colors.ts +410 -0
- package/tailwind/container.ts +11 -0
- package/tailwind/preset.ts +88 -0
- package/tailwind/spacing.ts +14 -0
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import e from "classnames";
|
|
3
|
+
const i = ({
|
|
4
4
|
id: c,
|
|
5
5
|
className: a,
|
|
6
|
-
items:
|
|
7
|
-
}) => /* @__PURE__ */
|
|
6
|
+
items: r
|
|
7
|
+
}) => /* @__PURE__ */ o("div", { id: c, className: e(a, "theme-local"), children: r == null ? void 0 : r.map((l, m) => (
|
|
8
8
|
// <Collapsible key={`collapsible_item_${i}`} {...item}>
|
|
9
9
|
// {item.children}
|
|
10
10
|
// </Collapsible>
|
|
11
|
-
/* @__PURE__ */
|
|
12
|
-
)) })
|
|
11
|
+
/* @__PURE__ */ o("div", {})
|
|
12
|
+
)) });
|
|
13
13
|
export {
|
|
14
|
-
|
|
14
|
+
i as Accordion
|
|
15
15
|
};
|
|
@@ -9,5 +9,4 @@ export interface Props {
|
|
|
9
9
|
isDismissable?: boolean;
|
|
10
10
|
onDismissClick?: MouseEventHandler;
|
|
11
11
|
}
|
|
12
|
-
declare const AlertBar: ({ id, className, type, text, textCenter, isDismissable, onDismissClick, }: Props) => JSX.Element;
|
|
13
|
-
export default AlertBar;
|
|
12
|
+
export declare const AlertBar: ({ id, className, type, text, textCenter, isDismissable, onDismissClick, }: Props) => JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
2
|
+
import { useState as m } from "react";
|
|
3
3
|
import t from "classnames";
|
|
4
|
-
const
|
|
4
|
+
const x = ({
|
|
5
5
|
id: a,
|
|
6
6
|
className: o,
|
|
7
7
|
type: s = "warning",
|
|
@@ -9,13 +9,13 @@ const f = ({
|
|
|
9
9
|
// leftIconProps,
|
|
10
10
|
// rightIconProps,
|
|
11
11
|
textCenter: n = !1,
|
|
12
|
-
isDismissable:
|
|
13
|
-
onDismissClick:
|
|
12
|
+
isDismissable: c = !1,
|
|
13
|
+
onDismissClick: d
|
|
14
14
|
}) => {
|
|
15
|
-
const [r,
|
|
15
|
+
const [r, f] = m({
|
|
16
16
|
state: "open",
|
|
17
17
|
display: !0
|
|
18
|
-
}),
|
|
18
|
+
}), l = t({
|
|
19
19
|
"bg-success": s === "success",
|
|
20
20
|
"bg-warning": s === "warning",
|
|
21
21
|
"bg-error": s === "error",
|
|
@@ -26,10 +26,10 @@ const f = ({
|
|
|
26
26
|
hidden: !r.display
|
|
27
27
|
}), u = t(
|
|
28
28
|
o,
|
|
29
|
-
|
|
29
|
+
l,
|
|
30
30
|
p,
|
|
31
|
-
"flex py-2 text-white duration-700
|
|
32
|
-
),
|
|
31
|
+
"flex py-2 text-white duration-700 w-parent transition-opactiy"
|
|
32
|
+
), g = t(
|
|
33
33
|
{
|
|
34
34
|
"text-center": n
|
|
35
35
|
// 'pl-20': !textCenter && leftIconProps !== null,
|
|
@@ -39,11 +39,11 @@ const f = ({
|
|
|
39
39
|
);
|
|
40
40
|
return t(
|
|
41
41
|
{
|
|
42
|
-
"hover:cursor-pointer":
|
|
42
|
+
"hover:cursor-pointer": c
|
|
43
43
|
},
|
|
44
44
|
"absolute right-0 pr-8 pt-3"
|
|
45
|
-
), /* @__PURE__ */ e("div", { id: a, className: u, children: /* @__PURE__ */ e("h3", { className:
|
|
46
|
-
}
|
|
45
|
+
), /* @__PURE__ */ e("div", { id: a, className: u, children: /* @__PURE__ */ e("h3", { className: g, children: i }) });
|
|
46
|
+
};
|
|
47
47
|
export {
|
|
48
|
-
|
|
48
|
+
x as AlertBar
|
|
49
49
|
};
|
package/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { Accordion as e } from "./components/Accordion/index.js";
|
|
2
|
+
import { AlertBar as c } from "./components/AlertBar/index.js";
|
|
3
3
|
export {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
e as Accordion,
|
|
5
|
+
c as AlertBar
|
|
6
6
|
};
|
|
@@ -1,50 +1,8 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import './themes/palette.css';
|
|
2
|
+
@import './themes/local.css';
|
|
2
3
|
|
|
3
4
|
@tailwind base;
|
|
4
5
|
@tailwind components;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
.theme-local {
|
|
8
|
-
--color-primary: #0036a0;
|
|
9
|
-
--color-secondary: #e2e2e2;
|
|
10
|
-
--color-tertiary: #921457;
|
|
11
|
-
--color-ink: #495863;
|
|
12
|
-
--color-transparent: transparent;
|
|
13
|
-
--color-white: #ffffff;
|
|
14
|
-
--color-black: #000000;
|
|
15
|
-
--color-red: #bb0a1e;
|
|
16
|
-
--color-grey: #2c373b;
|
|
17
|
-
--color-light-grey: #495c63;
|
|
18
|
-
--color-lightest-grey: #f5f5f5;
|
|
19
|
-
--color-primary-strict: #ff007d;
|
|
20
|
-
--color-border: #d0d0d0;
|
|
21
|
-
--color-border-lightest: #eeeeee;
|
|
22
|
-
--color-border-light: #d8d8d8;
|
|
23
|
-
--color-border-dark: #616161;
|
|
24
|
-
--color-error-light: #ffd9d9;
|
|
25
|
-
--color-success-light: #e7f5e7;
|
|
26
|
-
--color-facebook: #3b5999;
|
|
27
|
-
--color-whatsapp: #25d366;
|
|
28
|
-
--color-twitter: #55acee;
|
|
29
|
-
--color-linkedin: #0a66c2;
|
|
30
|
-
--color-email: #c71610;
|
|
31
|
-
--color-github: #171515;
|
|
32
|
-
--color-instagram: #8a3ab9;
|
|
33
|
-
--color-interactive-facebook: #2d4474;
|
|
34
|
-
--color-interactive-whatsapp: #25d566;
|
|
35
|
-
--color-interactive-twitter: #55acee;
|
|
36
|
-
--color-interactive-linkedin: #0a66c2;
|
|
37
|
-
--color-interactive-instagram: #6d2e92;
|
|
38
|
-
--color-interactive-email: #9f110c;
|
|
39
|
-
--color-interactive-github: #000000;
|
|
40
|
-
--color-gold: #e2b13c;
|
|
41
|
-
--color-error: #b11013;
|
|
42
|
-
--color-warning: #ffd35c;
|
|
43
|
-
--color-success: #69c364;
|
|
44
|
-
--color-info-light: #d8eaf5;
|
|
45
|
-
--color-linkedin: #0e76a8;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
6
|
@tailwind utilities;
|
|
49
7
|
|
|
50
8
|
@font-face {
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
body {
|
|
2
|
+
--color-primary: #0036a0;
|
|
3
|
+
--color-secondary: #e2e2e2;
|
|
4
|
+
--color-tertiary: #921457;
|
|
5
|
+
--color-ink: #495863;
|
|
6
|
+
--color-transparent: transparent;
|
|
7
|
+
--color-white: #ffffff;
|
|
8
|
+
--color-black: #000000;
|
|
9
|
+
--color-red: #bb0a1e;
|
|
10
|
+
--color-grey: #2c373b;
|
|
11
|
+
--color-light-grey: #495c63;
|
|
12
|
+
--color-lightest-grey: #f5f5f5;
|
|
13
|
+
--color-primary-strict: #ff007d;
|
|
14
|
+
--color-border: #d0d0d0;
|
|
15
|
+
--color-border-lightest: #eeeeee;
|
|
16
|
+
--color-border-light: #d8d8d8;
|
|
17
|
+
--color-border-dark: #616161;
|
|
18
|
+
--color-error-light: #ffd9d9;
|
|
19
|
+
--color-success-light: #e7f5e7;
|
|
20
|
+
--color-facebook: #3b5999;
|
|
21
|
+
--color-whatsapp: #25d366;
|
|
22
|
+
--color-twitter: #55acee;
|
|
23
|
+
--color-linkedin: #0a66c2;
|
|
24
|
+
--color-email: #c71610;
|
|
25
|
+
--color-github: #171515;
|
|
26
|
+
--color-instagram: #8a3ab9;
|
|
27
|
+
--color-interactive-facebook: #2d4474;
|
|
28
|
+
--color-interactive-whatsapp: #25d566;
|
|
29
|
+
--color-interactive-twitter: #55acee;
|
|
30
|
+
--color-interactive-linkedin: #0a66c2;
|
|
31
|
+
--color-interactive-instagram: #6d2e92;
|
|
32
|
+
--color-interactive-email: #9f110c;
|
|
33
|
+
--color-interactive-github: #000000;
|
|
34
|
+
--color-gold: #e2b13c;
|
|
35
|
+
--color-error: #b11013;
|
|
36
|
+
--color-warning: #ffd35c;
|
|
37
|
+
--color-success: #69c364;
|
|
38
|
+
--color-info-light: #d8eaf5;
|
|
39
|
+
--color-linkedin: #0e76a8;
|
|
40
|
+
}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
* {
|
|
2
|
+
/* Palette */
|
|
3
|
+
--hsl-black: 0 0% 0%;
|
|
4
|
+
--hsl-white: 0 0% 100%;
|
|
5
|
+
|
|
6
|
+
/* Blue */
|
|
7
|
+
--hsl-blue-100: 240 100% 15%;
|
|
8
|
+
--hsl-blue-90: 240 91% 26%;
|
|
9
|
+
--hsl-blue-80: 239 82.1% 44%;
|
|
10
|
+
--hsl-blue-70: 235 89.8% 57.8%;
|
|
11
|
+
--hsl-blue-60: 233 92.4% 63.7%;
|
|
12
|
+
--hsl-blue-50: 230 94.7% 70.4%;
|
|
13
|
+
--hsl-blue-40: 227 96.4% 78.4%;
|
|
14
|
+
--hsl-blue-30: 224 97% 87.1%;
|
|
15
|
+
--hsl-blue-20: 222 100% 91.6%;
|
|
16
|
+
--hsl-blue-10: 222 100% 96.1%;
|
|
17
|
+
|
|
18
|
+
/* Cyan */
|
|
19
|
+
--hsl-cyan-100: 198.1 96.4% 10.8%;
|
|
20
|
+
--hsl-cyan-90: 198 100% 18.6%;
|
|
21
|
+
--hsl-cyan-80: 198.3 93.8% 31.6%;
|
|
22
|
+
--hsl-cyan-70: 197.9 85.1% 39.4%;
|
|
23
|
+
--hsl-cyan-60: 198 73.5% 48.8%;
|
|
24
|
+
--hsl-cyan-50: 197.9 91.1% 60.4%;
|
|
25
|
+
--hsl-cyan-40: 198 91.1% 69.2%;
|
|
26
|
+
--hsl-cyan-30: 198.2 92.7% 78.4%;
|
|
27
|
+
--hsl-cyan-20: 198.3 93.7% 87.6%;
|
|
28
|
+
--hsl-cyan-10: 200 100% 97.1%;
|
|
29
|
+
|
|
30
|
+
/* Fuchsia */
|
|
31
|
+
--hsl-fuchsia-100: 296.9 54.9% 13.9%;
|
|
32
|
+
--hsl-fuchsia-90: 297.4 60% 22.5%;
|
|
33
|
+
--hsl-fuchsia-80: 298.2 66.7% 38.8%;
|
|
34
|
+
--hsl-fuchsia-70: 297.8 67.6% 47.3%;
|
|
35
|
+
--hsl-fuchsia-60: 297.8 85.7% 56.3%;
|
|
36
|
+
--hsl-fuchsia-50: 297.8 94.3% 65.5%;
|
|
37
|
+
--hsl-fuchsia-40: 300 100% 75.1%;
|
|
38
|
+
--hsl-fuchsia-30: 300 100% 86.1%;
|
|
39
|
+
--hsl-fuchsia-20: 300 100% 91.6%;
|
|
40
|
+
--hsl-fuchsia-10: 296 100% 97.1%;
|
|
41
|
+
|
|
42
|
+
/* Green */
|
|
43
|
+
--hsl-green-100: 140.6 94.6% 7.3%;
|
|
44
|
+
--hsl-green-90: 135.6 73% 14.5%;
|
|
45
|
+
--hsl-green-80: 136.4 67.7% 25.5%;
|
|
46
|
+
--hsl-green-70: 139.6 68.5% 32.4%;
|
|
47
|
+
--hsl-green-60: 140.2 54.7% 45.9%;
|
|
48
|
+
--hsl-green-50: 139.8 55.4% 65.7%;
|
|
49
|
+
--hsl-green-40: 140.3 64.4% 80.2%;
|
|
50
|
+
--hsl-green-30: 135.6 73.5% 86.7%;
|
|
51
|
+
--hsl-green-20: 136 75% 92.2%;
|
|
52
|
+
--hsl-green-10: 138 100% 98%;
|
|
53
|
+
|
|
54
|
+
/* Neutral */
|
|
55
|
+
--hsl-neutral-99: 216.7 64.3% 5.5%;
|
|
56
|
+
--hsl-neutral-95: 220.9 39.3% 11%;
|
|
57
|
+
--hsl-neutral-90: 223.6 27.5% 15.7%;
|
|
58
|
+
--hsl-neutral-85: 222 19.6% 20%;
|
|
59
|
+
--hsl-neutral-80: 222.4 11.6% 28.8%;
|
|
60
|
+
--hsl-neutral-70: 221.3 8.3% 37.6%;
|
|
61
|
+
--hsl-neutral-60: 221.5 5.5% 46.5%;
|
|
62
|
+
--hsl-neutral-50: 223.6 4.8% 55.5%;
|
|
63
|
+
--hsl-neutral-40: 220 5% 64.5%;
|
|
64
|
+
--hsl-neutral-30: 220 5.3% 77.6%;
|
|
65
|
+
--hsl-neutral-25: 216 5.5% 82.2%;
|
|
66
|
+
--hsl-neutral-20: 225 5.9% 86.7%;
|
|
67
|
+
--hsl-neutral-15: 210 4.3% 91%;
|
|
68
|
+
--hsl-neutral-10: 180 4.3% 95.5%;
|
|
69
|
+
--hsl-neutral-5: 210 20% 98%;
|
|
70
|
+
--hsl-neutral-1: 0 0% 99.6%;
|
|
71
|
+
|
|
72
|
+
/* Orange */
|
|
73
|
+
--hsl-orange-100: 23.6 57.9% 11.2%;
|
|
74
|
+
--hsl-orange-90: 24.7 64.2% 20.8%;
|
|
75
|
+
--hsl-orange-80: 25.1 68.6% 30%;
|
|
76
|
+
--hsl-orange-70: 24.8 72.5% 48.4%;
|
|
77
|
+
--hsl-orange-60: 24.8 88.5% 55.5%;
|
|
78
|
+
--hsl-orange-50: 26 100% 66.5%;
|
|
79
|
+
--hsl-orange-40: 28.3 100% 75.9%;
|
|
80
|
+
--hsl-orange-30: 28.1 100% 87.5%;
|
|
81
|
+
--hsl-orange-20: 27.4 100% 93.1%;
|
|
82
|
+
--hsl-orange-10: 30 100% 98.4%;
|
|
83
|
+
|
|
84
|
+
/* Purple */
|
|
85
|
+
--hsl-purple-100: 265.5 60.6% 12.9%;
|
|
86
|
+
--hsl-purple-90: 266.1 85.7% 24.7%;
|
|
87
|
+
--hsl-purple-80: 266 83.6% 40.6%;
|
|
88
|
+
--hsl-purple-70: 265.9 78% 50%;
|
|
89
|
+
--hsl-purple-60: 266 85.2% 60.2%;
|
|
90
|
+
--hsl-purple-50: 265.7 97.2% 72.2%;
|
|
91
|
+
--hsl-purple-40: 266.1 96.4% 78%;
|
|
92
|
+
--hsl-purple-30: 266.2 97.5% 84.3%;
|
|
93
|
+
--hsl-purple-20: 266.1 95.8% 90.6%;
|
|
94
|
+
--hsl-purple-10: 264 100% 97.1%;
|
|
95
|
+
|
|
96
|
+
/* Red */
|
|
97
|
+
--hsl-red-100: 356.6 63.6% 10.8%;
|
|
98
|
+
--hsl-red-90: 356.3 69.9% 18.2%;
|
|
99
|
+
--hsl-red-80: 356.9 74% 25.7%;
|
|
100
|
+
--hsl-red-70: 356.8 77.4% 32.9%;
|
|
101
|
+
--hsl-red-60: 356.9 75.9% 45.5%;
|
|
102
|
+
--hsl-red-50: 356.5 87.9% 57.8%;
|
|
103
|
+
--hsl-red-40: 356.8 89.2% 71%;
|
|
104
|
+
--hsl-red-30: 357.5 89.9% 84.5%;
|
|
105
|
+
--hsl-red-20: 357 90.9% 91.4%;
|
|
106
|
+
--hsl-red-10: 352.5 100% 98.4%;
|
|
107
|
+
|
|
108
|
+
/* Teal */
|
|
109
|
+
--hsl-teal-100: 177.1 44.7% 9.2%;
|
|
110
|
+
--hsl-teal-90: 180 51.3% 15.3%;
|
|
111
|
+
--hsl-teal-80: 179.1 61.9% 20.6%;
|
|
112
|
+
--hsl-teal-70: 179.3 70.8% 25.5%;
|
|
113
|
+
--hsl-teal-60: 178.9 100% 30.8%;
|
|
114
|
+
--hsl-teal-50: 179 91.9% 38.6%;
|
|
115
|
+
--hsl-teal-40: 178.9 64.8% 52.2%;
|
|
116
|
+
--hsl-teal-30: 178.7 68.4% 73.9%;
|
|
117
|
+
--hsl-teal-20: 178.8 69.9% 85.7%;
|
|
118
|
+
--hsl-teal-10: 180 100% 98.4%;
|
|
119
|
+
|
|
120
|
+
/* Yellow */
|
|
121
|
+
--hsl-yellow-100: 47 85.2% 10.6%;
|
|
122
|
+
--hsl-yellow-90: 46.9 90.7% 16.9%;
|
|
123
|
+
--hsl-yellow-80: 46.9 94.8% 22.7%;
|
|
124
|
+
--hsl-yellow-70: 47.1 94.5% 35.7%;
|
|
125
|
+
--hsl-yellow-60: 46.9 89.1% 43.3%;
|
|
126
|
+
--hsl-yellow-50: 46.8 88.4% 52.5%;
|
|
127
|
+
--hsl-yellow-40: 46.9 97.7% 66.1%;
|
|
128
|
+
--hsl-yellow-30: 46.7 100% 82.4%;
|
|
129
|
+
--hsl-yellow-20: 46.5 100% 90.4%;
|
|
130
|
+
--hsl-yellow-10: 45 100% 98.4%;
|
|
131
|
+
}
|