@yr3/ui 1.0.7 → 1.0.9

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 (13) hide show
  1. package/dist/components/Button/buttons.css +90 -57
  2. package/dist/components/Button/buttons.css.map +1 -1
  3. package/dist/components/Select/select.css +18 -23
  4. package/dist/components/Select/select.css.map +1 -1
  5. package/dist/components/Switch/switch.css +16 -0
  6. package/dist/components/Switch/switch.css.map +1 -1
  7. package/dist/index.cjs +184 -62
  8. package/dist/index.d.cts +25 -10
  9. package/dist/index.d.ts +25 -10
  10. package/dist/index.js +184 -62
  11. package/dist/styles/index.css +125 -80
  12. package/dist/styles/index.css.map +1 -1
  13. package/package.json +1 -1
package/dist/components/Button/buttons.css CHANGED
@@ -13,88 +13,114 @@
13
13
  text-transform: var(--typo-button-textTransform);
14
14
  letter-spacing: var(--typo-button-letterSpacing);
15
15
  border-radius: var(--border-radius);
16
+ border: 1px solid var(--border-button, --color-primary);
17
+ --bg-button: var(--color-primary);
16
18
  cursor: pointer;
17
19
  }
18
20
 
19
- .yr3Button--filled.yr3Button--color-primary {
20
- background: var(--bg-surface);
21
- color: var(--color-primary-contrast);
22
- border: 1px solid var(--color-primary);
21
+ .yr3Button--filled {
22
+ background: var(--bg-button);
23
+ border-color: transparent;
23
24
  }
24
- .yr3Button--filled.yr3Button--color-secondary {
25
- background: var(--color-secondary);
26
- color: var(--color-secondary-contrast);
27
- border: 1px solid var(--color-secondary);
28
- }
29
- .yr3Button--filled.yr3Button--color-text {
30
- background: var(--color-secondary);
31
- color: var(--color-secondary-contrast);
32
- border: 1px solid var(--color-secondary);
25
+ .yr3Button--filled.yr3Button--gradientBorder {
26
+ --color-button: var(--color-surface);
27
+ --border-radius: 4px;
28
+ border: none !important;
29
+ background: linear-gradient(155deg, #fdfdfd, #81e9f9, #fda6fe, var(--color-primary)) !important;
30
+ -webkit-text-fill-color: var(--color-surface) !important;
33
31
  }
34
32
 
35
33
  /* ===== OUTLINED ===== */
36
- .yr3Button--outlined.yr3Button--color-primary {
34
+ .yr3Button--outlined {
37
35
  background: transparent;
38
- box-sizing: content-box;
39
- border: 1px solid var(--color-primary);
40
- color: var(--color-primary);
36
+ border-color: var(--border-button);
37
+ color: var(--color-button);
41
38
  }
42
- .yr3Button--outlined.yr3Button--color-secondary {
39
+ .yr3Button--outlined.yr3Button--gradientBorder {
40
+ background: linear-gradient(129deg, #fdfdfd, #81e9f9, #fda6fe, var(--color-primary)) !important;
41
+ background-clip: text !important;
42
+ -webkit-background-clip: text !important;
43
+ -webkit-text-fill-color: transparent !important;
44
+ border: 2px solid;
45
+ border-image: linear-gradient(135deg, #42fbfe, #fda6fe, var(--color-primary)) 1 !important;
46
+ }
47
+
48
+ .yr3Button--text {
43
49
  background: transparent;
44
- box-sizing: content-box;
45
- border: 1px solid var(--color-secondary);
50
+ border-color: transparent;
51
+ color: var(--color-button);
52
+ }
53
+ .yr3Button--text.yr3Button--gradientBorder {
54
+ background: linear-gradient(129deg, #fdfdfd, #81e9f9, #fda6fe, var(--color-primary)) !important;
55
+ background-clip: text !important;
56
+ -webkit-background-clip: text !important;
57
+ -webkit-text-fill-color: transparent !important;
46
58
  }
47
- .yr3Button--outlined.yr3Button--color-text {
48
- background: var(--color-secondary);
49
- color: var(--color-secondary-contrast);
50
- border: 1px solid var(--color-secondary);
59
+
60
+ .yr3Button--color-primary {
61
+ --bg-button: var(--color-primary);
62
+ --border-button: var(--color-primary);
63
+ --color-button: var(--color-primary);
51
64
  }
52
65
 
53
- /* ===== TEXT ===== */
54
- .yr3Button--text.yr3Button--color-primary {
55
- background: transparent;
56
- border: none;
57
- min-width: auto;
58
- padding: 0px 4px;
59
- color: var(--color-primary);
66
+ .yr3Button--color-secondary {
67
+ --bg-button: var(--color-secondary);
68
+ --border-button: var(--color-secondary);
69
+ --color-button: var(--color-secondary);
60
70
  }
61
- .yr3Button--text.yr3Button--color-secondary {
62
- background: transparent;
63
- border: none;
64
- min-width: auto;
65
- padding: 0px 4px;
66
- color: var(--color-secondary);
71
+
72
+ .yr3Button--color-text {
73
+ --bg-button: var(--color-text);
74
+ --border-button: var(--color-text);
75
+ --color-button: var(--color-text);
67
76
  }
68
- .yr3Button--text.yr3Button--color-text {
69
- background: transparent;
70
- border: none;
71
- min-width: auto;
72
- padding: 0px 4px;
73
- color: var(--color-text);
77
+
78
+ .yr3Button--color-disabled {
79
+ --bg-button: var(--color-disabled);
80
+ --border-button: var(--color-disabled);
81
+ --color-button: var(--color-disabled);
82
+ }
83
+
84
+ .yr3Button--color-success {
85
+ --bg-button: var(--color-success);
86
+ --border-button: var(--color-success);
87
+ --color-button: var(--color-success);
88
+ }
89
+
90
+ .yr3Button--color-error {
91
+ --bg-button: var(--color-error);
92
+ --border-button: var(--color-error);
93
+ --color-button: var(--color-error);
94
+ }
95
+
96
+ .yr3Button--color-background {
97
+ --bg-button: var(--color-surface);
98
+ --border-button: var(--color-surface);
99
+ --color-button: var(--color-surface);
100
+ }
101
+
102
+ .yr3Button--color-info {
103
+ --bg-button: var(--color-info);
104
+ --border-button: var(--color-info);
105
+ --color-button: var(--color-info);
106
+ }
107
+
108
+ .yr3Button--color-warning {
109
+ --bg-button: var(--color-warning);
110
+ --border-button: var(--color-warning);
111
+ --color-button: var(--color-warning);
74
112
  }
75
113
 
76
114
  .yr3Button--animated {
77
- animation: glowPulse 3s infinite;
78
- background: linear-gradient(135deg, #4e90fa 0%, #9b41ee 50%, #fd58aa 100%) !important;
115
+ animation: glowPulse 1s infinite;
116
+ background: linear-gradient(155deg, #4e90fa 0%, #9b41ee 50%, #fd58aa 100%) !important;
79
117
  }
80
118
 
81
119
  .yr3Button--disabled {
82
- border-image: none;
83
- color: var(--color-disabled);
84
- border-color: var(--color-disabled);
85
120
  animation: none;
86
121
  opacity: 0.6;
87
122
  }
88
123
 
89
- .yr3Button--gradientBorder {
90
- background: linear-gradient(129deg, #fdfdfd, #81e9f9, #fda6fe, var(--color-primary)) !important;
91
- background-clip: text !important;
92
- -webkit-background-clip: text !important;
93
- -webkit-text-fill-color: transparent !important;
94
- border: 2px solid;
95
- border-image: linear-gradient(135deg, #42fbfe, #fda6fe, var(--color-primary)) 1 !important;
96
- }
97
-
98
124
  .yr3Button:hover, .yr3Button:focus, .yr3Button:active {
99
125
  background: none;
100
126
  }
@@ -110,5 +136,12 @@
110
136
  filter: drop-shadow(0 0 8px rgba(165, 71, 254, 0.8588235294));
111
137
  }
112
138
  }
139
+ .yr3Button--size-auto {
140
+ width: auto;
141
+ }
142
+
143
+ .yr3Button--size-full {
144
+ width: 100%;
145
+ }
113
146
 
114
147
  /*# sourceMappingURL=buttons.css.map */
package/dist/components/Button/buttons.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/components/Button/buttons.scss","../../../src/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAIH;AAEG;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAIN;AAEI;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAIN;EACE;EACA;;;AASF;EACE;EACA;EACA;EACA;EACA;;;AAIF;EChGI;EAOA;EACA;EACA;EACA;EACA;;;ADyFJ;EACE;;;AAIF;EACE;IAAK;;EACL;IAAM;;EACN;IAAO","file":"buttons.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/components/Button/buttons.scss","../../../src/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AACA;EACI;EACA;ECAF;EACA;EAOA;;;ADHH;AACD;EACE;EACA;EACA;;AACA;EC9BE;EAOA;EACA;EACA;EACA;EACA;;;ADwBJ;EACE;EACA;EACA;;AACA;ECPE;EAOA;EACA;EACA;;;ADKJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAKF;EACE;EACA;;;AASF;EACE;EACA;;;AAKF;EACE;;;AAIF;EACE;IAAK;;EACL;IAAM;;EACN;IAAO;;;AAGT;EACE;;;AAEF;EACE","file":"buttons.css"}
package/dist/components/Select/select.css CHANGED
@@ -1,32 +1,28 @@
1
- .yr3Select-wrapper {
1
+ .yr3Select {
2
+ display: flex;
3
+ flex-direction: row;
4
+ align-items: center;
5
+ justify-content: space-between;
2
6
  position: relative;
3
- width: 100%;
4
- box-sizing: border-box;
5
- padding: 4px;
7
+ box-sizing: content-box;
6
8
  }
7
- .yr3Select-wrapper .yr3Select {
8
- width: 100%;
9
+ .yr3Select.yr3Select--wrapper {
10
+ position: relative;
9
11
  display: flex;
10
12
  flex-direction: row;
11
13
  align-items: center;
12
14
  justify-content: space-between;
13
15
  }
14
- .yr3Select-wrapper .yr3Select .yr3Select--icon {
16
+ .yr3Select--icon {
15
17
  margin-top: 10px;
18
+ position: absolute;
19
+ right: 0;
20
+ z-index: 3;
16
21
  }
17
- .yr3Select-wrapper .yr3Select.yr3Select--open .yr3Select--icon {
18
- margin-top: 10px;
22
+ .yr3Select--icon--open {
19
23
  transform: rotate(180deg);
20
24
  }
21
25
 
22
- /* CONTROL */
23
- .yr3Select--control {
24
- padding-left: 4px;
25
- margin-top: 10px;
26
- cursor: pointer;
27
- color: var(--color-secondary);
28
- }
29
-
30
26
  /* MENU */
31
27
  .yr3Select--menu {
32
28
  position: absolute;
@@ -37,17 +33,16 @@
37
33
  border: 1px solid var(--color-primary);
38
34
  border-radius: 4px;
39
35
  z-index: 10;
40
- overflow-x: "hidden";
41
- max-height: 100;
42
- z-index: 1000;
36
+ overflow-x: hidden;
37
+ max-height: 100px;
43
38
  overflow-y: auto;
39
+ padding: 8px;
44
40
  }
45
41
 
46
42
  /* OPTION */
47
- .yr3Select--control {
48
- padding: 8px;
43
+ .yr3Select--option {
44
+ padding: 3px 4px;
49
45
  cursor: pointer;
50
- color: var(--color-secondary);
51
46
  }
52
47
 
53
48
  .yr3Select--option:hover {
package/dist/components/Select/select.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/components/Select/select.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACI;;AAGI;EACA;EACA;;;AAQd;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACI","file":"select.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/components/Select/select.scss"],"names":[],"mappings":"AACE;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACI;;;AAMV;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACI;EACA;;;AAGJ;EACI","file":"select.css"}
package/dist/components/Switch/switch.css CHANGED
@@ -129,4 +129,20 @@
129
129
  --switch-track-active: var(--color-warning);
130
130
  }
131
131
 
132
+ .yr3Switch--label-start {
133
+ flex-direction: row-reverse;
134
+ }
135
+ .yr3Switch--label-start .yr3Switch--label {
136
+ margin-left: 0;
137
+ margin-right: 8px;
138
+ }
139
+
140
+ .yr3Switch--label-end {
141
+ flex-direction: row;
142
+ }
143
+ .yr3Switch--label-end .yr3Switch--label {
144
+ margin-left: 8px;
145
+ margin-right: 0;
146
+ }
147
+
132
148
  /*# sourceMappingURL=switch.css.map */
package/dist/components/Switch/switch.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/components/Switch/switch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA","file":"switch.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/components/Switch/switch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;AACA;EACI;EACA;;;AAIR;EACI;;AACA;EACI;EACA","file":"switch.css"}
package/dist/index.cjs CHANGED
@@ -712,6 +712,42 @@ var Box = ({
712
712
  );
713
713
  };
714
714
 
715
+ // src/components/Text/text.variants.ts
716
+ var textVariants = createVariants({
717
+ base: "yr3Text",
718
+ variants: {
719
+ variant: {
720
+ h1: "yr3Text--h1",
721
+ h2: "yr3Text--h2",
722
+ h3: "yr3Text--h3",
723
+ h4: "yr3Text--h4",
724
+ h5: "yr3Text--h5",
725
+ h6: "yr3Text--h6",
726
+ title: "yr3Text--title",
727
+ subtitle: "yr3Text--subtitle",
728
+ body1: "yr3Text--body1",
729
+ body2: "yr3Text--body2",
730
+ helper: "yr3Text--helper",
731
+ inherit: "yr3Text--inherit",
732
+ caption: "yr3Text--caption",
733
+ button: "yr3Text--button",
734
+ code: "yr3Text--code"
735
+ },
736
+ color: {
737
+ primary: "yr3Text--color-primary",
738
+ secondary: "yr3Text--color-secondary",
739
+ success: "yr3Text--color-success",
740
+ text: "yr3Text--color-text",
741
+ disabled: "yr3Text--color-disabled",
742
+ warning: "yr3Text--color-warning",
743
+ error: "yr3Text--color-error",
744
+ info: "yr3Text--color-info",
745
+ background: "yr3Text--color-background"
746
+ }
747
+ }
748
+ });
749
+ var text_variants_default = textVariants;
750
+
715
751
  // src/components/Text/Text.tsx
716
752
  var import_jsx_runtime5 = require("react/jsx-runtime");
717
753
  var Text = ({
@@ -726,16 +762,11 @@ var Text = ({
726
762
  onClick
727
763
  }) => {
728
764
  const styleUI = uiStyle({ ...ui, marginTop: gutters[0] || 0, marginBottom: gutters[1] || 0 });
765
+ const classes = text_variants_default({ variant, color, weight });
729
766
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
730
767
  Component,
731
768
  {
732
- className: `
733
- yr3Text
734
- yr3Text--${variant}
735
- yr3Text--${color}
736
- ${weight ? `yr3Text--${weight}` : ""}
737
-
738
- `,
769
+ className: classes,
739
770
  style: composeStyles(styleUI, style),
740
771
  onClick,
741
772
  "data-testid": "yr3Text",
@@ -758,7 +789,11 @@ var buttonVariant = createVariants({
758
789
  secondary: "yr3Button--color-secondary",
759
790
  success: "yr3Button--color-success",
760
791
  text: "yr3Button--color-text",
761
- disabled: "yr3Button--color-disabled"
792
+ disabled: "yr3Button--color-disabled",
793
+ info: "yr3Button--color-info",
794
+ error: "yr3Button--color-error",
795
+ background: "yr3Button--color-background",
796
+ warning: "yr3Button--color-warning"
762
797
  },
763
798
  size: {
764
799
  auto: "yr3Button--size-auto",
@@ -788,7 +823,7 @@ var Button = ({ children, color = "text", variant = "text", animated, disabled,
788
823
  "data-testid": "yr3Button",
789
824
  ...props,
790
825
  style: composeStyles(ui, style),
791
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { variant: propsComponent?.text?.variant || "button", children })
826
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { variant: propsComponent?.text?.variant || "button", ...propsComponent?.text, children })
792
827
  }
793
828
  );
794
829
  };
@@ -2266,67 +2301,140 @@ var Radio = ({
2266
2301
 
2267
2302
  // src/components/Select/Select.tsx
2268
2303
  var React18 = __toESM(require("react"), 1);
2304
+
2305
+ // src/components/Select/select.variants.ts
2306
+ var selectVariants = createVariants({
2307
+ base: "yr3Select",
2308
+ variants: {
2309
+ wrapper: {
2310
+ true: "yr3Select--wrapper"
2311
+ },
2312
+ variant: {
2313
+ filled: "yr3Select--filled",
2314
+ outlined: "yr3Select--outlined",
2315
+ base: "yr3Select--base",
2316
+ lined: "yr3Select--lined"
2317
+ },
2318
+ color: {
2319
+ primary: "yr3Select--color-primary",
2320
+ secondary: "yr3Select--color-secondary",
2321
+ success: "yr3Select--color-success",
2322
+ text: "yr3Select--color-text",
2323
+ disabled: "yr3Select--color-disabled",
2324
+ background: "yr3Select--color-background",
2325
+ error: "yr3Select--color-error",
2326
+ warning: "yr3Select--color-warning",
2327
+ info: "yr3Select--color-info"
2328
+ },
2329
+ animated: {
2330
+ true: "yr3Select--animated"
2331
+ }
2332
+ }
2333
+ });
2334
+ var select_variants_default = selectVariants;
2335
+
2336
+ // src/components/Select/Select.tsx
2269
2337
  var import_jsx_runtime35 = require("react/jsx-runtime");
2270
- var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
2338
+ var initiaPropsComponent3 = {
2339
+ control: {
2340
+ variant: "outlined",
2341
+ color: "primary",
2342
+ ui: {},
2343
+ style: {}
2344
+ },
2345
+ label: {
2346
+ display: true,
2347
+ ui: {},
2348
+ style: {}
2349
+ },
2350
+ wrapper: {
2351
+ ui: {},
2352
+ style: {}
2353
+ },
2354
+ menu: {
2355
+ ui: {},
2356
+ style: {},
2357
+ options: {
2358
+ text: {
2359
+ variant: "caption",
2360
+ color: "primary"
2361
+ },
2362
+ ui: {},
2363
+ style: {}
2364
+ }
2365
+ },
2366
+ icon: {
2367
+ style: {
2368
+ width: 24,
2369
+ height: 24,
2370
+ stroke: "currentColor"
2371
+ },
2372
+ component: void 0
2373
+ }
2374
+ };
2375
+ var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent = initiaPropsComponent3 }) => {
2271
2376
  const [open, setOpen] = React18.useState(false);
2272
2377
  const [valueState, setValueState] = React18.useState(value || defaultValue || null);
2273
2378
  const ref = React18.useRef(null);
2274
2379
  useClickAway(ref, () => setOpen(false));
2275
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Control, { ...propsComponent?.control, children: [
2380
+ const classes = select_variants_default({ wrapper: true });
2381
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: classes, ref, children: [
2276
2382
  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2277
- Label,
2383
+ Input,
2278
2384
  {
2279
- ...propsComponent?.label,
2280
- text: label || "seleziona"
2385
+ label,
2386
+ variant: "base",
2387
+ disabled: true,
2388
+ value: valueState,
2389
+ propsComponent: {
2390
+ control: propsComponent?.control,
2391
+ label: propsComponent?.label
2392
+ }
2281
2393
  }
2282
2394
  ),
2283
- /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "yr3Select-wrapper", ref, children: [
2284
- /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
2285
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "yr3Select--control", children: valueState }),
2286
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "yr3Select--icon", onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2287
- IconDown,
2395
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `yr3Select--icon ${open ? "yr3Select--icon--open" : ""}`, onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2396
+ IconDown,
2397
+ {
2398
+ width: propsComponent?.icon?.style?.width,
2399
+ height: propsComponent?.icon?.style?.height,
2400
+ stroke: propsComponent?.icon?.style?.stroke || "currentColor",
2401
+ style: propsComponent?.icon?.style
2402
+ }
2403
+ ) }),
2404
+ open && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2405
+ "div",
2406
+ {
2407
+ className: "yr3Select--menu",
2408
+ style: composeStyles(propsComponent?.menu?.ui, propsComponent?.menu?.style),
2409
+ "data-testid": "yr3Select-menu",
2410
+ children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2411
+ "div",
2288
2412
  {
2289
- width: propsComponent?.icon?.style?.width || 26,
2290
- height: propsComponent?.icon?.style?.height || 26,
2291
- stroke: propsComponent?.icon?.style?.stroke || "currentColor",
2292
- style: propsComponent?.icon?.style
2293
- }
2294
- ) })
2295
- ] }),
2296
- open && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2297
- "div",
2298
- {
2299
- className: "yr3Select--menu",
2300
- style: composeStyles(propsComponent?.menu?.ui, propsComponent?.menu?.style),
2301
- "data-testid": "yr3Select-menu",
2302
- children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
2303
- "div",
2304
- {
2305
- className: "yr3Select--option",
2306
- onClick: (e) => {
2307
- e.stopPropagation();
2308
- setValueState(opt.value);
2309
- setOpen(false);
2310
- const event = {
2311
- event: e,
2312
- target: {
2313
- name,
2314
- value: opt.value
2315
- },
2316
- currentTarget: {
2317
- name,
2318
- value: opt.value
2319
- }
2320
- };
2321
- onChange?.(event, opt.value);
2322
- },
2323
- children: opt.label
2413
+ className: "yr3Select--option",
2414
+ onClick: (e) => {
2415
+ e.stopPropagation();
2416
+ setValueState(opt.value);
2417
+ setOpen(false);
2418
+ const event = {
2419
+ event: e,
2420
+ target: {
2421
+ name,
2422
+ value: opt.value
2423
+ },
2424
+ currentTarget: {
2425
+ name,
2426
+ value: opt.value
2427
+ }
2428
+ };
2429
+ onChange?.(event, opt.value);
2324
2430
  },
2325
- opt.value
2326
- ))
2327
- }
2328
- )
2329
- ] })
2431
+ style: composeStyles(propsComponent?.menu?.options?.ui, propsComponent?.menu?.options?.style),
2432
+ children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "span", variant: "caption", color: propsComponent?.menu?.options?.text?.color || "primary", ...propsComponent?.menu?.options?.text, children: opt.label })
2433
+ },
2434
+ opt.value
2435
+ ))
2436
+ }
2437
+ )
2330
2438
  ] });
2331
2439
  };
2332
2440
 
@@ -2400,6 +2508,10 @@ var switchVariants = createVariants({
2400
2508
  },
2401
2509
  checked: {
2402
2510
  true: "yr3Switch--checked"
2511
+ },
2512
+ placement: {
2513
+ start: "yr3Switch--label-start",
2514
+ end: "yr3Switch--label-end"
2403
2515
  }
2404
2516
  }
2405
2517
  });
@@ -2413,10 +2525,12 @@ var Switch = ({
2413
2525
  disabled,
2414
2526
  color = "primary",
2415
2527
  size = "sm",
2416
- label
2528
+ label,
2529
+ placement = "end",
2530
+ propsComponent
2417
2531
  }) => {
2418
2532
  const [internal, setInternal] = React20.useState(defaultChecked || false);
2419
- const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal });
2533
+ const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal, placement });
2420
2534
  const isControlled = checked !== void 0;
2421
2535
  const value = isControlled ? checked : internal;
2422
2536
  const handleChange = (e) => {
@@ -2439,7 +2553,15 @@ var Switch = ({
2439
2553
  }
2440
2554
  ),
2441
2555
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "yr3Switch--thumb" }) }),
2442
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "yr3Switch--label", "data-testid": "yr3Switch-label", children: label })
2556
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
2557
+ "span",
2558
+ {
2559
+ className: "yr3Switch--label",
2560
+ "data-testid": "yr3Switch-label",
2561
+ style: composeStyles(propsComponent?.label.ui, propsComponent?.label?.style),
2562
+ children: label
2563
+ }
2564
+ )
2443
2565
  ]
2444
2566
  }
2445
2567
  );