@usefillo/react 0.12.1 → 0.14.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 (4) hide show
  1. package/dist/index.js +511 -346
  2. package/dist/styles.css +56 -10
  3. package/dist/styles.unlayered.css +56 -10
  4. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -831,20 +831,23 @@
831
831
  }
832
832
 
833
833
  /* ---------- Success ---------- */
834
- .fillo-success { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; padding: 1.4rem 1rem; }
834
+ .fillo-success { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; text-align: center; padding: 2rem 1rem; }
835
+ /* An affirming, filled mark: a solid primary disc with a contrast-colored
836
+ check — reads as "done and good", not a faint gray ring. Both tokens flip
837
+ per theme, so it stays legible on light and dark and honors the host's
838
+ --fillo-primary override. */
835
839
  .fillo-success-mark {
836
- width: 2.25rem; height: 2.25rem;
840
+ width: 2.5rem; height: 2.5rem;
837
841
  display: grid; place-items: center;
838
842
  border-radius: 999px;
839
- border: 1px solid color-mix(in srgb, var(--fillo-primary) 18%, transparent);
840
- background: color-mix(in srgb, var(--fillo-primary) 8%, transparent);
843
+ background: var(--fillo-primary);
841
844
  }
842
845
  .fillo-success-mark::before {
843
846
  content: "";
844
- width: 0.65rem; height: 0.35rem;
845
- border-left: 2px solid var(--fillo-primary);
846
- border-bottom: 2px solid var(--fillo-primary);
847
- transform: translateY(-0.08rem) rotate(-45deg);
847
+ width: 0.7rem; height: 0.38rem;
848
+ border-left: 2.5px solid var(--fillo-primary-contrast);
849
+ border-bottom: 2.5px solid var(--fillo-primary-contrast);
850
+ transform: translateY(-0.09rem) rotate(-45deg);
848
851
  }
849
852
  .fillo-success-title { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
850
853
  .fillo-success-message { margin: 0; font-size: 0.875rem; color: var(--fillo-muted); }
@@ -998,6 +1001,45 @@
998
1001
  line-height: 1.45;
999
1002
  }
1000
1003
 
1004
+ /* Repeating group: instance cards + add/remove controls. */
1005
+ .fillo-group { display: flex; flex-direction: column; gap: 0.8rem; }
1006
+ .fillo-group-instance {
1007
+ border: 1px solid var(--fillo-border);
1008
+ border-radius: var(--fillo-radius);
1009
+ padding: 0.8rem;
1010
+ display: flex;
1011
+ flex-direction: column;
1012
+ gap: 0.9rem;
1013
+ }
1014
+ .fillo-group-instance:focus-visible { outline: 2px solid var(--fillo-primary); outline-offset: 2px; }
1015
+ .fillo-group-instance-header {
1016
+ display: flex;
1017
+ align-items: center;
1018
+ justify-content: space-between;
1019
+ gap: 0.5rem;
1020
+ }
1021
+ .fillo-group-instance-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
1022
+ .fillo-group-add {
1023
+ align-self: flex-start;
1024
+ font: inherit;
1025
+ padding: 0.45rem 0.9rem;
1026
+ border: 1px solid var(--fillo-border);
1027
+ border-radius: var(--fillo-radius);
1028
+ background: var(--fillo-control-bg);
1029
+ color: var(--fillo-text);
1030
+ cursor: pointer;
1031
+ }
1032
+ .fillo-group-add:disabled { opacity: 0.5; cursor: default; }
1033
+ .fillo-group-remove {
1034
+ font-size: 1.1rem;
1035
+ line-height: 1;
1036
+ padding: 0 0.2rem;
1037
+ border: none;
1038
+ background: none;
1039
+ color: var(--fillo-muted);
1040
+ cursor: pointer;
1041
+ }
1042
+ .fillo-group-remove:disabled { opacity: 0.5; cursor: default; }
1001
1043
  /* ---------- Accessibility: focus rings, pointer targets, forced-colors
1002
1044
  (input-quality audit P1.1-P1.3) ---------- */
1003
1045
  /* Focus visibility: controls without a compensating border swap get a
@@ -1009,7 +1051,9 @@
1009
1051
  .fillo-ranking-move:focus-visible,
1010
1052
  .fillo-file-remove:focus-visible,
1011
1053
  .fillo-file-retry:focus-visible,
1012
- .fillo-signature-clear:focus-visible {
1054
+ .fillo-signature-clear:focus-visible,
1055
+ .fillo-group-add:focus-visible,
1056
+ .fillo-group-remove:focus-visible {
1013
1057
  outline: 2px solid var(--fillo-primary);
1014
1058
  outline-offset: 2px;
1015
1059
  box-shadow: none;
@@ -1018,7 +1062,9 @@
1018
1062
 
1019
1063
  /* Minimum pointer targets (WCAG 2.2 AA 24px; 1.5rem = 24px @16px root). */
1020
1064
  .fillo-ranking-move,
1021
- .fillo-signature-clear {
1065
+ .fillo-signature-clear,
1066
+ .fillo-group-add,
1067
+ .fillo-group-remove {
1022
1068
  min-width: 1.5rem;
1023
1069
  min-height: 1.5rem;
1024
1070
  display: inline-flex;
package/dist/styles.unlayered.css CHANGED
@@ -831,20 +831,23 @@
831
831
  }
832
832
 
833
833
  /* ---------- Success ---------- */
834
- .fillo-success { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; padding: 1.4rem 1rem; }
834
+ .fillo-success { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; text-align: center; padding: 2rem 1rem; }
835
+ /* An affirming, filled mark: a solid primary disc with a contrast-colored
836
+ check — reads as "done and good", not a faint gray ring. Both tokens flip
837
+ per theme, so it stays legible on light and dark and honors the host's
838
+ --fillo-primary override. */
835
839
  .fillo-success-mark {
836
- width: 2.25rem; height: 2.25rem;
840
+ width: 2.5rem; height: 2.5rem;
837
841
  display: grid; place-items: center;
838
842
  border-radius: 999px;
839
- border: 1px solid color-mix(in srgb, var(--fillo-primary) 18%, transparent);
840
- background: color-mix(in srgb, var(--fillo-primary) 8%, transparent);
843
+ background: var(--fillo-primary);
841
844
  }
842
845
  .fillo-success-mark::before {
843
846
  content: "";
844
- width: 0.65rem; height: 0.35rem;
845
- border-left: 2px solid var(--fillo-primary);
846
- border-bottom: 2px solid var(--fillo-primary);
847
- transform: translateY(-0.08rem) rotate(-45deg);
847
+ width: 0.7rem; height: 0.38rem;
848
+ border-left: 2.5px solid var(--fillo-primary-contrast);
849
+ border-bottom: 2.5px solid var(--fillo-primary-contrast);
850
+ transform: translateY(-0.09rem) rotate(-45deg);
848
851
  }
849
852
  .fillo-success-title { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
850
853
  .fillo-success-message { margin: 0; font-size: 0.875rem; color: var(--fillo-muted); }
@@ -998,6 +1001,45 @@
998
1001
  line-height: 1.45;
999
1002
  }
1000
1003
 
1004
+ /* Repeating group: instance cards + add/remove controls. */
1005
+ .fillo-group { display: flex; flex-direction: column; gap: 0.8rem; }
1006
+ .fillo-group-instance {
1007
+ border: 1px solid var(--fillo-border);
1008
+ border-radius: var(--fillo-radius);
1009
+ padding: 0.8rem;
1010
+ display: flex;
1011
+ flex-direction: column;
1012
+ gap: 0.9rem;
1013
+ }
1014
+ .fillo-group-instance:focus-visible { outline: 2px solid var(--fillo-primary); outline-offset: 2px; }
1015
+ .fillo-group-instance-header {
1016
+ display: flex;
1017
+ align-items: center;
1018
+ justify-content: space-between;
1019
+ gap: 0.5rem;
1020
+ }
1021
+ .fillo-group-instance-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
1022
+ .fillo-group-add {
1023
+ align-self: flex-start;
1024
+ font: inherit;
1025
+ padding: 0.45rem 0.9rem;
1026
+ border: 1px solid var(--fillo-border);
1027
+ border-radius: var(--fillo-radius);
1028
+ background: var(--fillo-control-bg);
1029
+ color: var(--fillo-text);
1030
+ cursor: pointer;
1031
+ }
1032
+ .fillo-group-add:disabled { opacity: 0.5; cursor: default; }
1033
+ .fillo-group-remove {
1034
+ font-size: 1.1rem;
1035
+ line-height: 1;
1036
+ padding: 0 0.2rem;
1037
+ border: none;
1038
+ background: none;
1039
+ color: var(--fillo-muted);
1040
+ cursor: pointer;
1041
+ }
1042
+ .fillo-group-remove:disabled { opacity: 0.5; cursor: default; }
1001
1043
  /* ---------- Accessibility: focus rings, pointer targets, forced-colors
1002
1044
  (input-quality audit P1.1-P1.3) ---------- */
1003
1045
  /* Focus visibility: controls without a compensating border swap get a
@@ -1009,7 +1051,9 @@
1009
1051
  .fillo-ranking-move:focus-visible,
1010
1052
  .fillo-file-remove:focus-visible,
1011
1053
  .fillo-file-retry:focus-visible,
1012
- .fillo-signature-clear:focus-visible {
1054
+ .fillo-signature-clear:focus-visible,
1055
+ .fillo-group-add:focus-visible,
1056
+ .fillo-group-remove:focus-visible {
1013
1057
  outline: 2px solid var(--fillo-primary);
1014
1058
  outline-offset: 2px;
1015
1059
  box-shadow: none;
@@ -1018,7 +1062,9 @@
1018
1062
 
1019
1063
  /* Minimum pointer targets (WCAG 2.2 AA 24px; 1.5rem = 24px @16px root). */
1020
1064
  .fillo-ranking-move,
1021
- .fillo-signature-clear {
1065
+ .fillo-signature-clear,
1066
+ .fillo-group-add,
1067
+ .fillo-group-remove {
1022
1068
  min-width: 1.5rem;
1023
1069
  min-height: 1.5rem;
1024
1070
  display: inline-flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usefillo/react",
3
- "version": "0.12.1",
3
+ "version": "0.14.0",
4
4
  "description": "Headless React components for embedding Fillo forms natively in your product.",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -34,7 +34,7 @@
34
34
  "access": "public"
35
35
  },
36
36
  "dependencies": {
37
- "@usefillo/core": "^0.12.1"
37
+ "@usefillo/core": "^0.14.0"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "^18.0.0 || ^19.0.0",