@particle-academy/react-fancy 4.2.0 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs +22 -2
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +10 -0
  4. package/dist/index.d.ts +10 -0
  5. package/dist/index.js +22 -2
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles.css +43 -22
  8. package/dist/styles.css.map +1 -1
  9. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -16,46 +16,67 @@
16
16
  box-shadow 0.15s ease,
17
17
  background-color 0.15s ease;
18
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 {
19
+ :where(.dark [data-react-fancy-input] input),
20
+ :where(.dark [data-react-fancy-textarea]),
21
+ :where(.dark [data-react-fancy-select]),
22
+ :where(.dark [data-react-fancy-date-picker]),
23
+ :where(.dark [data-react-fancy-autocomplete] input),
24
+ :where(.dark [data-react-fancy-pillbox]),
25
+ :where(.dark [data-react-fancy-otp-input] input),
26
+ :where(.dark [data-react-fancy-time-picker] input) {
27
27
  background-color: #1e1e24;
28
28
  border-color: #3f3f46;
29
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 {
30
+ :where(.dark [data-react-fancy-input] input:focus),
31
+ :where(.dark [data-react-fancy-textarea]:focus),
32
+ :where(.dark [data-react-fancy-select]:focus),
33
+ :where(.dark [data-react-fancy-date-picker]:focus),
34
+ :where(.dark [data-react-fancy-autocomplete] input:focus),
35
+ :where(.dark [data-react-fancy-otp-input] input:focus),
36
+ :where(.dark [data-react-fancy-time-picker] input:focus) {
37
37
  border-color: #60a5fa;
38
38
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
39
39
  }
40
- .dark [data-react-fancy-field] > label:first-child {
40
+ :where(.dark [data-react-fancy-field] > label:first-child) {
41
41
  color: #f4f4f5;
42
42
  }
43
- .dark [data-react-fancy-checkbox] input,
44
- .dark [data-react-fancy-radio-group] input {
43
+ :where(.dark [data-react-fancy-checkbox] input),
44
+ :where(.dark [data-react-fancy-radio-group] input) {
45
45
  background-color: #1e1e24;
46
46
  border-color: #3f3f46;
47
47
  }
48
- .dark [data-react-fancy-switch] button[aria-checked=false] {
48
+ :where(.dark [data-react-fancy-switch] button[aria-checked=false]) {
49
49
  background-color: #3f3f46;
50
50
  }
51
- .dark [data-react-fancy-input-wrapper] > span:first-child,
52
- .dark [data-react-fancy-input-wrapper] > span:last-child {
51
+ :where(.dark [data-react-fancy-input-wrapper] > span:first-child),
52
+ :where(.dark [data-react-fancy-input-wrapper] > span:last-child) {
53
53
  border-color: #3f3f46;
54
54
  background-color: #27272a;
55
55
  }
56
- .dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator {
56
+ :where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {
57
57
  filter: invert(0.8);
58
58
  }
59
+ :where(.dark [data-react-fancy-dropdown]),
60
+ :where(.dark [data-react-fancy-menu]),
61
+ :where(.dark [data-react-fancy-popover]),
62
+ :where(.dark [data-react-fancy-context-menu]),
63
+ :where(.dark [data-react-fancy-context-menu-sub-content]),
64
+ :where(.dark [data-react-fancy-mobile-menu-flyout]),
65
+ :where(.dark [data-react-fancy-modal]),
66
+ :where(.dark [data-react-fancy-toast-item]) {
67
+ background-color: #18181b;
68
+ border-color: #3f3f46;
69
+ color: #d4d4d8;
70
+ }
71
+ :where(.dark [data-react-fancy-dropdown-item]:hover),
72
+ :where(.dark [data-react-fancy-menu-item]:hover),
73
+ :where(.dark [data-react-fancy-context-menu-item]:hover) {
74
+ background-color: #27272a;
75
+ }
76
+ :where(.dark [data-react-fancy-dropdown-separator]),
77
+ :where(.dark [data-react-fancy-context-menu-separator]) {
78
+ background-color: #3f3f46;
79
+ }
59
80
  @keyframes fancy-fade-in {
60
81
  from {
61
82
  opacity: 0;
package/dist/styles.css.map CHANGED
@@ -1 +1 @@
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":";AAQA,CAAC,wBAAwB,EAAE,CAAC;AAC1B,cAAY;AACd;AAGA,CAAC,wBAAwB;AACzB,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC,+BAA+B;AAChC,CAAC;AACD,CAAC,4BAA4B;AAC7B,CAAC,8BAA8B;AAC/B,CAAC,+BAA+B;AAC9B;AAAA,IAAY,aAAa,MAAM,IAAI;AAAA,IAAE,WAAW,MAAM,IAAI;AAAA,IACxD,iBAAiB,MAAM;AAC3B;AAGA,CAAC,KAAK,CAAC,wBAAwB;AAC/B,CADC,KACK,CAAC;AACP,CAFC,KAEK,CAAC;AACP,CAHC,KAGK,CAAC;AACP,CAJC,KAIK,CAAC,+BAA+B;AACtC,CALC,KAKK,CAAC;AACP,CANC,KAMK,CAAC,4BAA4B;AACnC,CAPC,KAOK,CAAC,8BAA8B;AACnC,oBAAkB;AAClB,gBAAc;AAChB;AAGA,CAbC,KAaK,CAAC,wBAAwB,KAAK;AACpC,CAdC,KAcK,CAAC,0BAA0B;AACjC,CAfC,KAeK,CAAC,wBAAwB;AAC/B,CAhBC,KAgBK,CAAC,6BAA6B;AACpC,CAjBC,KAiBK,CAAC,+BAA+B,KAAK;AAC3C,CAlBC,KAkBK,CAAC,4BAA4B,KAAK;AACxC,CAnBC,KAmBK,CAAC,8BAA8B,KAAK;AACxC,gBAAc;AACd,cAAY,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AAC3C;AAGA,CAzBC,KAyBK,CAAC,wBAAwB,EAAE,KAAK;AACpC,SAAO;AACT;AAGA,CA9BC,KA8BK,CAAC,2BAA2B;AAClC,CA/BC,KA+BK,CAAC,8BAA8B;AACnC,oBAAkB;AAClB,gBAAc;AAChB;AAGA,CArCC,KAqCK,CAAC,yBAAyB,MAAM,CAAC;AACrC,oBAAkB;AACpB;AAGA,CA1CC,KA0CK,CAAC,gCAAgC,EAAE,IAAI;AAC7C,CA3CC,KA2CK,CAAC,gCAAgC,EAAE,IAAI;AAC3C,gBAAc;AACd,oBAAkB;AACpB;AAGA,CAjDC,KAiDK,CAAC,6BAA6B;AAClC,UAAQ,OAAO;AACjB;AAEA,WAAW;AACT;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACA;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,WAAW;AACT;AACE,eAAW,WAAW;AACxB;AACA;AACE,eAAW,WAAW;AACxB;AACF;AAEA,WAAW;AACT;AACE,eAAW,WAAW;AACxB;AACA;AACE,eAAW,WAAW;AACxB;AACF;AAEA,CA7BW;AA8BT,aAAW,cAAc,KAAK;AAChC;AAEA,CAtBW;AAuBT,aAAW,iBAAiB,KAAK;AACnC;AAEA,CAjBW;AAkBT,aAAW,kBAAkB,KAAK;AACpC;AAIA,WAAW;AACT;AACE,aAAS;AACT,eAAW,MAAM;AACnB;AACA;AACE,aAAS;AACT,eAAW,MAAM;AACnB;AACF;AAEA,WAAW;AACT;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACA;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,WAAW;AACT;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAEA,WAAW;AACT;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACA;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,WAAW;AACT;AACE,wBAAoB;AACtB;AACA;AACE,wBAAoB;AACtB;AACF;AAEA,WAAW;AACT;AACE,wBAAoB;AACtB;AACA;AACE,wBAAoB;AACtB;AACF;AAEA,CA5DW;AA6DT,aAAW,eAAe,MAAM;AAClC;AAEA,CArDW;AAsDT,aAAW,eAAe,KAAK;AACjC;AAEA,CA9CW;AA+CT,aAAW,eAAe,MAAM,QAAQ;AAC1C;AAEA,CAzCW;AA0CT,aAAW,eAAe,KAAK;AACjC;AAEA,CAlCW;AAmCT,aAAW,oBAAoB,KAAK,SAAS;AAC/C;AAEA,CA7BW;AA8BT,aAAW,qBAAqB,MAAM,QAAQ;AAChD;AAIA,WAAW;AACT;AACE,eAAW,WAAW;AACxB;AACA;AACE,eAAW,WAAW;AACxB;AACF;AAEA,WAAW;AACT;AACE,eAAW,WAAW;AACxB;AACA;AACE,eAAW,WAAW;AACxB;AACF;AAEA,WAAW;AACT;AACE,eAAW,WAAW;AACxB;AACA;AACE,eAAW,WAAW;AACxB;AACF;AAEA,WAAW;AACT;AACE,eAAW,WAAW;AACxB;AACA;AACE,eAAW,WAAW;AACxB;AACF;AAEA,CApCW;AAqCT,aAAW,oBAAoB,MAAM;AACvC;AAEA,CA/BW;AAgCT,aAAW,qBAAqB,KAAK,QAAQ;AAC/C;AAEA,CA1BW;AA2BT,aAAW,qBAAqB,MAAM;AACxC;AAEA,CArBW;AAsBT,aAAW,sBAAsB,KAAK,QAAQ;AAChD;","names":[]}
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/* ─── Inherent dark-mode defaults ────────────────────────────────────────────\n Every rule below is wrapped in :where() so it carries ZERO specificity, which\n buys two properties at once:\n 1. Inherent — a sensible dark appearance ships out of the box, even when the\n consumer's Tailwind build doesn't generate react-fancy's `dark:` utility\n classes (e.g. they didn't @source the package). This is what lets the\n overlays (Dropdown, Menu, Popover, …) go dark on their own.\n 2. Override-friendly — because specificity is 0, ANY consumer override wins:\n a plain `dark:bg-…` utility, a custom class, or the component's own\n `dark:` class (when it IS generated) all take precedence — no !important,\n no need to target the data-attribute.\n ──────────────────────────────────────────────────────────────────────────── */\n\n/* Inputs / selects / textareas — darker bg for contrast against the page */\n:where(.dark [data-react-fancy-input] input),\n:where(.dark [data-react-fancy-textarea]),\n:where(.dark [data-react-fancy-select]),\n:where(.dark [data-react-fancy-date-picker]),\n:where(.dark [data-react-fancy-autocomplete] input),\n:where(.dark [data-react-fancy-pillbox]),\n:where(.dark [data-react-fancy-otp-input] input),\n:where(.dark [data-react-fancy-time-picker] input) {\n background-color: #1e1e24;\n border-color: #3f3f46;\n}\n\n/* Focus ring — brighter border + subtle glow */\n:where(.dark [data-react-fancy-input] input:focus),\n:where(.dark [data-react-fancy-textarea]:focus),\n:where(.dark [data-react-fancy-select]:focus),\n:where(.dark [data-react-fancy-date-picker]:focus),\n:where(.dark [data-react-fancy-autocomplete] input:focus),\n:where(.dark [data-react-fancy-otp-input] input:focus),\n:where(.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/* Field labels — brighter for readability */\n:where(.dark [data-react-fancy-field] > label:first-child) {\n color: #f4f4f5;\n}\n\n/* Checkbox & radio */\n:where(.dark [data-react-fancy-checkbox] input),\n:where(.dark [data-react-fancy-radio-group] input) {\n background-color: #1e1e24;\n border-color: #3f3f46;\n}\n\n/* Switch unchecked track */\n:where(.dark [data-react-fancy-switch] button[aria-checked=\"false\"]) {\n background-color: #3f3f46;\n}\n\n/* Input wrapper affixes */\n:where(.dark [data-react-fancy-input-wrapper] > span:first-child),\n:where(.dark [data-react-fancy-input-wrapper] > span:last-child) {\n border-color: #3f3f46;\n background-color: #27272a;\n}\n\n/* Date picker icon (calendar, clock) */\n:where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {\n filter: invert(0.8);\n}\n\n/* ─── Overlays — inherent dark surfaces ──────────────────────────────────────\n Dropdown / Menu / Popover / ContextMenu / MobileMenu flyout / Modal / Toast.\n Mirrors the components' own `dark:` utilities (zinc-900 surface, zinc-700\n border, zinc-300 text) so overlays render correctly in dark mode WITHOUT the\n consumer @sourcing react-fancy. When those utilities ARE generated they win\n (specificity 0 here), so there's no drift or double-styling. */\n:where(.dark [data-react-fancy-dropdown]),\n:where(.dark [data-react-fancy-menu]),\n:where(.dark [data-react-fancy-popover]),\n:where(.dark [data-react-fancy-context-menu]),\n:where(.dark [data-react-fancy-context-menu-sub-content]),\n:where(.dark [data-react-fancy-mobile-menu-flyout]),\n:where(.dark [data-react-fancy-modal]),\n:where(.dark [data-react-fancy-toast-item]) {\n background-color: #18181b; /* zinc-900 */\n border-color: #3f3f46; /* zinc-700 */\n color: #d4d4d8; /* zinc-300 */\n}\n\n/* Overlay item hover states */\n:where(.dark [data-react-fancy-dropdown-item]:hover),\n:where(.dark [data-react-fancy-menu-item]:hover),\n:where(.dark [data-react-fancy-context-menu-item]:hover) {\n background-color: #27272a; /* zinc-800 */\n}\n\n/* Overlay separators */\n:where(.dark [data-react-fancy-dropdown-separator]),\n:where(.dark [data-react-fancy-context-menu-separator]) {\n background-color: #3f3f46; /* zinc-700 */\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": "4.2.0",
3
+ "version": "4.4.0",
4
4
  "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
5
5
  "repository": {
6
6
  "type": "git",