@particle-academy/react-fancy 1.5.0 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -0
- package/dist/index.cjs +550 -179
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +62 -13
- package/dist/index.d.ts +62 -13
- package/dist/index.js +550 -179
- package/dist/index.js.map +1 -1
- package/dist/styles.css +57 -0
- package/dist/styles.css.map +1 -1
- package/package.json +10 -9
package/dist/styles.css
CHANGED
|
@@ -1,4 +1,61 @@
|
|
|
1
1
|
/* src/styles.css */
|
|
2
|
+
[data-react-fancy-field] + [data-react-fancy-field] {
|
|
3
|
+
margin-top: 1rem;
|
|
4
|
+
}
|
|
5
|
+
[data-react-fancy-input] input,
|
|
6
|
+
[data-react-fancy-textarea],
|
|
7
|
+
[data-react-fancy-select],
|
|
8
|
+
[data-react-fancy-date-picker],
|
|
9
|
+
[data-react-fancy-autocomplete] input,
|
|
10
|
+
[data-react-fancy-pillbox],
|
|
11
|
+
[data-react-fancy-otp-input] input,
|
|
12
|
+
[data-react-fancy-time-picker] input,
|
|
13
|
+
[data-react-fancy-color-picker] input {
|
|
14
|
+
transition:
|
|
15
|
+
border-color 0.15s ease,
|
|
16
|
+
box-shadow 0.15s ease,
|
|
17
|
+
background-color 0.15s ease;
|
|
18
|
+
}
|
|
19
|
+
.dark [data-react-fancy-input] input,
|
|
20
|
+
.dark [data-react-fancy-textarea],
|
|
21
|
+
.dark [data-react-fancy-select],
|
|
22
|
+
.dark [data-react-fancy-date-picker],
|
|
23
|
+
.dark [data-react-fancy-autocomplete] input,
|
|
24
|
+
.dark [data-react-fancy-pillbox],
|
|
25
|
+
.dark [data-react-fancy-otp-input] input,
|
|
26
|
+
.dark [data-react-fancy-time-picker] input {
|
|
27
|
+
background-color: #1e1e24;
|
|
28
|
+
border-color: #3f3f46;
|
|
29
|
+
}
|
|
30
|
+
.dark [data-react-fancy-input] input:focus,
|
|
31
|
+
.dark [data-react-fancy-textarea]:focus,
|
|
32
|
+
.dark [data-react-fancy-select]:focus,
|
|
33
|
+
.dark [data-react-fancy-date-picker]:focus,
|
|
34
|
+
.dark [data-react-fancy-autocomplete] input:focus,
|
|
35
|
+
.dark [data-react-fancy-otp-input] input:focus,
|
|
36
|
+
.dark [data-react-fancy-time-picker] input:focus {
|
|
37
|
+
border-color: #60a5fa;
|
|
38
|
+
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
|
|
39
|
+
}
|
|
40
|
+
.dark [data-react-fancy-field] > label:first-child {
|
|
41
|
+
color: #f4f4f5;
|
|
42
|
+
}
|
|
43
|
+
.dark [data-react-fancy-checkbox] input,
|
|
44
|
+
.dark [data-react-fancy-radio-group] input {
|
|
45
|
+
background-color: #1e1e24;
|
|
46
|
+
border-color: #3f3f46;
|
|
47
|
+
}
|
|
48
|
+
.dark [data-react-fancy-switch] button[aria-checked=false] {
|
|
49
|
+
background-color: #3f3f46;
|
|
50
|
+
}
|
|
51
|
+
.dark [data-react-fancy-input-wrapper] > span:first-child,
|
|
52
|
+
.dark [data-react-fancy-input-wrapper] > span:last-child {
|
|
53
|
+
border-color: #3f3f46;
|
|
54
|
+
background-color: #27272a;
|
|
55
|
+
}
|
|
56
|
+
.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator {
|
|
57
|
+
filter: invert(0.8);
|
|
58
|
+
}
|
|
2
59
|
@keyframes fancy-fade-in {
|
|
3
60
|
from {
|
|
4
61
|
opacity: 0;
|
package/dist/styles.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* @particle-academy/react-fancy —
|
|
1
|
+
{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* @particle-academy/react-fancy — base styles + animations */\n\n/* ─── Input & Field defaults ─────────────────────────────────────────────────\n Better UX out of the box: spacing between stacked fields, smooth transitions,\n and polished dark-mode defaults. All overridable via data-attribute selectors.\n ──────────────────────────────────────────────────────────────────────────── */\n\n/* Field spacing — adjacent fields get vertical breathing room */\n[data-react-fancy-field] + [data-react-fancy-field] {\n margin-top: 1rem;\n}\n\n/* Smooth transitions on all text inputs, selects, and textareas */\n[data-react-fancy-input] input,\n[data-react-fancy-textarea],\n[data-react-fancy-select],\n[data-react-fancy-date-picker],\n[data-react-fancy-autocomplete] input,\n[data-react-fancy-pillbox],\n[data-react-fancy-otp-input] input,\n[data-react-fancy-time-picker] input,\n[data-react-fancy-color-picker] input {\n transition: border-color 0.15s ease, box-shadow 0.15s ease,\n background-color 0.15s ease;\n}\n\n/* Dark-mode input refinements — slightly darker bg for contrast against page */\n.dark [data-react-fancy-input] input,\n.dark [data-react-fancy-textarea],\n.dark [data-react-fancy-select],\n.dark [data-react-fancy-date-picker],\n.dark [data-react-fancy-autocomplete] input,\n.dark [data-react-fancy-pillbox],\n.dark [data-react-fancy-otp-input] input,\n.dark [data-react-fancy-time-picker] input {\n background-color: #1e1e24;\n border-color: #3f3f46;\n}\n\n/* Dark-mode focus ring — brighter border + subtle glow */\n.dark [data-react-fancy-input] input:focus,\n.dark [data-react-fancy-textarea]:focus,\n.dark [data-react-fancy-select]:focus,\n.dark [data-react-fancy-date-picker]:focus,\n.dark [data-react-fancy-autocomplete] input:focus,\n.dark [data-react-fancy-otp-input] input:focus,\n.dark [data-react-fancy-time-picker] input:focus {\n border-color: #60a5fa;\n box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);\n}\n\n/* Dark-mode labels — brighter for readability */\n.dark [data-react-fancy-field] > label:first-child {\n color: #f4f4f5;\n}\n\n/* Dark-mode checkbox & radio refinements */\n.dark [data-react-fancy-checkbox] input,\n.dark [data-react-fancy-radio-group] input {\n background-color: #1e1e24;\n border-color: #3f3f46;\n}\n\n/* Dark-mode switch unchecked track */\n.dark [data-react-fancy-switch] button[aria-checked=\"false\"] {\n background-color: #3f3f46;\n}\n\n/* Dark-mode input wrapper affixes */\n.dark [data-react-fancy-input-wrapper] > span:first-child,\n.dark [data-react-fancy-input-wrapper] > span:last-child {\n border-color: #3f3f46;\n background-color: #27272a;\n}\n\n/* Dark-mode date picker icon (calendar, clock) */\n.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator {\n filter: invert(0.8);\n}\n\n@keyframes fancy-fade-in {\n from {\n opacity: 0;\n transform: translateY(4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fancy-slide-left {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes fancy-slide-right {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n.fancy-fade-in {\n animation: fancy-fade-in 0.2s ease-out;\n}\n\n.fancy-slide-left {\n animation: fancy-slide-left 0.3s ease-out;\n}\n\n.fancy-slide-right {\n animation: fancy-slide-right 0.3s ease-out;\n}\n\n/* Overlay / floating animations */\n\n@keyframes fancy-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes fancy-slide-up {\n from {\n opacity: 0;\n transform: translateY(16px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fancy-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n@keyframes fancy-toast-in {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes fancy-collapse-open {\n from {\n grid-template-rows: 0fr;\n }\n to {\n grid-template-rows: 1fr;\n }\n}\n\n@keyframes fancy-collapse-close {\n from {\n grid-template-rows: 1fr;\n }\n to {\n grid-template-rows: 0fr;\n }\n}\n\n.fancy-scale-in {\n animation: fancy-scale-in 0.15s ease-out;\n}\n\n.fancy-slide-up {\n animation: fancy-slide-up 0.2s ease-out;\n}\n\n.fancy-fade-out {\n animation: fancy-fade-out 0.15s ease-in forwards;\n}\n\n.fancy-toast-in {\n animation: fancy-toast-in 0.3s ease-out;\n}\n\n.fancy-collapse-open {\n animation: fancy-collapse-open 0.2s ease-out forwards;\n}\n\n.fancy-collapse-close {\n animation: fancy-collapse-close 0.15s ease-in forwards;\n}\n\n/* Mobile flyout slide animations */\n\n@keyframes fancy-slide-in-left {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes fancy-slide-out-left {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n\n@keyframes fancy-slide-in-right {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes fancy-slide-out-right {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n.fancy-slide-in-left {\n animation: fancy-slide-in-left 0.25s ease-out;\n}\n\n.fancy-slide-out-left {\n animation: fancy-slide-out-left 0.2s ease-in forwards;\n}\n\n.fancy-slide-in-right {\n animation: fancy-slide-in-right 0.25s ease-out;\n}\n\n.fancy-slide-out-right {\n animation: fancy-slide-out-right 0.2s ease-in forwards;\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@particle-academy/react-fancy",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.1",
|
|
4
4
|
"description": "React UI component library — React port of the fancy-flux Blade component library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -23,6 +23,13 @@
|
|
|
23
23
|
"dist",
|
|
24
24
|
"README.md"
|
|
25
25
|
],
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "tsup",
|
|
28
|
+
"dev": "tsup --watch",
|
|
29
|
+
"lint": "tsc --noEmit",
|
|
30
|
+
"clean": "rm -rf dist",
|
|
31
|
+
"prepublishOnly": "tsup"
|
|
32
|
+
},
|
|
26
33
|
"keywords": [
|
|
27
34
|
"react",
|
|
28
35
|
"components",
|
|
@@ -56,11 +63,5 @@
|
|
|
56
63
|
"license": "MIT",
|
|
57
64
|
"sideEffects": [
|
|
58
65
|
"**/*.css"
|
|
59
|
-
]
|
|
60
|
-
|
|
61
|
-
"build": "tsup",
|
|
62
|
-
"dev": "tsup --watch",
|
|
63
|
-
"lint": "tsc --noEmit",
|
|
64
|
-
"clean": "rm -rf dist"
|
|
65
|
-
}
|
|
66
|
-
}
|
|
66
|
+
]
|
|
67
|
+
}
|