@usefillo/react 0.12.1 → 0.13.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 +45 -2
  3. package/dist/styles.unlayered.css +45 -2
  4. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -998,6 +998,45 @@
998
998
  line-height: 1.45;
999
999
  }
1000
1000
 
1001
+ /* Repeating group: instance cards + add/remove controls. */
1002
+ .fillo-group { display: flex; flex-direction: column; gap: 0.8rem; }
1003
+ .fillo-group-instance {
1004
+ border: 1px solid var(--fillo-border);
1005
+ border-radius: var(--fillo-radius);
1006
+ padding: 0.8rem;
1007
+ display: flex;
1008
+ flex-direction: column;
1009
+ gap: 0.9rem;
1010
+ }
1011
+ .fillo-group-instance:focus-visible { outline: 2px solid var(--fillo-primary); outline-offset: 2px; }
1012
+ .fillo-group-instance-header {
1013
+ display: flex;
1014
+ align-items: center;
1015
+ justify-content: space-between;
1016
+ gap: 0.5rem;
1017
+ }
1018
+ .fillo-group-instance-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
1019
+ .fillo-group-add {
1020
+ align-self: flex-start;
1021
+ font: inherit;
1022
+ padding: 0.45rem 0.9rem;
1023
+ border: 1px solid var(--fillo-border);
1024
+ border-radius: var(--fillo-radius);
1025
+ background: var(--fillo-control-bg);
1026
+ color: var(--fillo-text);
1027
+ cursor: pointer;
1028
+ }
1029
+ .fillo-group-add:disabled { opacity: 0.5; cursor: default; }
1030
+ .fillo-group-remove {
1031
+ font-size: 1.1rem;
1032
+ line-height: 1;
1033
+ padding: 0 0.2rem;
1034
+ border: none;
1035
+ background: none;
1036
+ color: var(--fillo-muted);
1037
+ cursor: pointer;
1038
+ }
1039
+ .fillo-group-remove:disabled { opacity: 0.5; cursor: default; }
1001
1040
  /* ---------- Accessibility: focus rings, pointer targets, forced-colors
1002
1041
  (input-quality audit P1.1-P1.3) ---------- */
1003
1042
  /* Focus visibility: controls without a compensating border swap get a
@@ -1009,7 +1048,9 @@
1009
1048
  .fillo-ranking-move:focus-visible,
1010
1049
  .fillo-file-remove:focus-visible,
1011
1050
  .fillo-file-retry:focus-visible,
1012
- .fillo-signature-clear:focus-visible {
1051
+ .fillo-signature-clear:focus-visible,
1052
+ .fillo-group-add:focus-visible,
1053
+ .fillo-group-remove:focus-visible {
1013
1054
  outline: 2px solid var(--fillo-primary);
1014
1055
  outline-offset: 2px;
1015
1056
  box-shadow: none;
@@ -1018,7 +1059,9 @@
1018
1059
 
1019
1060
  /* Minimum pointer targets (WCAG 2.2 AA 24px; 1.5rem = 24px @16px root). */
1020
1061
  .fillo-ranking-move,
1021
- .fillo-signature-clear {
1062
+ .fillo-signature-clear,
1063
+ .fillo-group-add,
1064
+ .fillo-group-remove {
1022
1065
  min-width: 1.5rem;
1023
1066
  min-height: 1.5rem;
1024
1067
  display: inline-flex;
package/dist/styles.unlayered.css CHANGED
@@ -998,6 +998,45 @@
998
998
  line-height: 1.45;
999
999
  }
1000
1000
 
1001
+ /* Repeating group: instance cards + add/remove controls. */
1002
+ .fillo-group { display: flex; flex-direction: column; gap: 0.8rem; }
1003
+ .fillo-group-instance {
1004
+ border: 1px solid var(--fillo-border);
1005
+ border-radius: var(--fillo-radius);
1006
+ padding: 0.8rem;
1007
+ display: flex;
1008
+ flex-direction: column;
1009
+ gap: 0.9rem;
1010
+ }
1011
+ .fillo-group-instance:focus-visible { outline: 2px solid var(--fillo-primary); outline-offset: 2px; }
1012
+ .fillo-group-instance-header {
1013
+ display: flex;
1014
+ align-items: center;
1015
+ justify-content: space-between;
1016
+ gap: 0.5rem;
1017
+ }
1018
+ .fillo-group-instance-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
1019
+ .fillo-group-add {
1020
+ align-self: flex-start;
1021
+ font: inherit;
1022
+ padding: 0.45rem 0.9rem;
1023
+ border: 1px solid var(--fillo-border);
1024
+ border-radius: var(--fillo-radius);
1025
+ background: var(--fillo-control-bg);
1026
+ color: var(--fillo-text);
1027
+ cursor: pointer;
1028
+ }
1029
+ .fillo-group-add:disabled { opacity: 0.5; cursor: default; }
1030
+ .fillo-group-remove {
1031
+ font-size: 1.1rem;
1032
+ line-height: 1;
1033
+ padding: 0 0.2rem;
1034
+ border: none;
1035
+ background: none;
1036
+ color: var(--fillo-muted);
1037
+ cursor: pointer;
1038
+ }
1039
+ .fillo-group-remove:disabled { opacity: 0.5; cursor: default; }
1001
1040
  /* ---------- Accessibility: focus rings, pointer targets, forced-colors
1002
1041
  (input-quality audit P1.1-P1.3) ---------- */
1003
1042
  /* Focus visibility: controls without a compensating border swap get a
@@ -1009,7 +1048,9 @@
1009
1048
  .fillo-ranking-move:focus-visible,
1010
1049
  .fillo-file-remove:focus-visible,
1011
1050
  .fillo-file-retry:focus-visible,
1012
- .fillo-signature-clear:focus-visible {
1051
+ .fillo-signature-clear:focus-visible,
1052
+ .fillo-group-add:focus-visible,
1053
+ .fillo-group-remove:focus-visible {
1013
1054
  outline: 2px solid var(--fillo-primary);
1014
1055
  outline-offset: 2px;
1015
1056
  box-shadow: none;
@@ -1018,7 +1059,9 @@
1018
1059
 
1019
1060
  /* Minimum pointer targets (WCAG 2.2 AA 24px; 1.5rem = 24px @16px root). */
1020
1061
  .fillo-ranking-move,
1021
- .fillo-signature-clear {
1062
+ .fillo-signature-clear,
1063
+ .fillo-group-add,
1064
+ .fillo-group-remove {
1022
1065
  min-width: 1.5rem;
1023
1066
  min-height: 1.5rem;
1024
1067
  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.13.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.13.0"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "^18.0.0 || ^19.0.0",