@driveflux/beam 1.10.1 → 1.11.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 (92) hide show
  1. package/dist/accordion/Accordion.js +1 -1
  2. package/dist/accordion/Accordion.js.map +1 -1
  3. package/dist/box/Box.d.ts +1 -1
  4. package/dist/box/Box.d.ts.map +1 -1
  5. package/dist/button/Button.d.ts +1 -1
  6. package/dist/carousel/Carousel.d.ts +2 -5
  7. package/dist/carousel/Carousel.d.ts.map +1 -1
  8. package/dist/carousel/Carousel.js +4 -6
  9. package/dist/carousel/Carousel.js.map +1 -1
  10. package/dist/datepicker/DatePicker.d.ts +24 -2
  11. package/dist/datepicker/DatePicker.d.ts.map +1 -1
  12. package/dist/datepicker/DatePicker.js +78 -136
  13. package/dist/datepicker/DatePicker.js.map +1 -1
  14. package/dist/datepicker/DatePicker.stories.d.ts.map +1 -1
  15. package/dist/datepicker/DatePicker.stories.js +21 -0
  16. package/dist/datepicker/DatePickerDrawer.d.ts +6 -0
  17. package/dist/datepicker/DatePickerDrawer.d.ts.map +1 -0
  18. package/dist/datepicker/DatePickerDrawer.js +133 -0
  19. package/dist/datepicker/DatePickerDrawer.js.map +1 -0
  20. package/dist/datepicker/DatePickerPopover.d.ts +6 -0
  21. package/dist/datepicker/DatePickerPopover.d.ts.map +1 -0
  22. package/dist/datepicker/DatePickerPopover.js +246 -0
  23. package/dist/datepicker/DatePickerPopover.js.map +1 -0
  24. package/dist/datepicker/constants.d.ts +4 -0
  25. package/dist/datepicker/constants.d.ts.map +1 -0
  26. package/dist/datepicker/constants.js +3 -0
  27. package/dist/datepicker/constants.js.map +1 -0
  28. package/dist/datepicker/utils.d.ts +3 -0
  29. package/dist/datepicker/utils.d.ts.map +1 -0
  30. package/dist/datepicker/utils.js +8 -0
  31. package/dist/datepicker/utils.js.map +1 -0
  32. package/dist/drawer/index.d.ts +3 -1
  33. package/dist/drawer/index.d.ts.map +1 -1
  34. package/dist/drawer/index.js +4 -3
  35. package/dist/drawer/index.js.map +1 -1
  36. package/dist/field-wrapper/FieldWrapper.js +3 -3
  37. package/dist/field-wrapper/FieldWrapper.js.map +1 -1
  38. package/dist/hooks/use-breakpoint-value.js +1 -1
  39. package/dist/hooks/use-breakpoint-value.js.map +1 -1
  40. package/dist/icons/IconArrow.d.ts +11 -0
  41. package/dist/icons/IconArrow.d.ts.map +1 -0
  42. package/dist/icons/IconArrow.js +86 -0
  43. package/dist/icons/IconArrow.js.map +1 -0
  44. package/dist/icons/IconCalendar.d.ts.map +1 -1
  45. package/dist/icons/IconCalendar.js +7 -41
  46. package/dist/icons/IconCalendar.js.map +1 -1
  47. package/dist/icons/IconCalendarArrowBack.d.ts +8 -0
  48. package/dist/icons/IconCalendarArrowBack.d.ts.map +1 -0
  49. package/dist/icons/IconCalendarArrowBack.js +76 -0
  50. package/dist/icons/IconCalendarArrowBack.js.map +1 -0
  51. package/dist/icons/IconCalendarArrowForward.d.ts +8 -0
  52. package/dist/icons/IconCalendarArrowForward.d.ts.map +1 -0
  53. package/dist/icons/IconCalendarArrowForward.js +76 -0
  54. package/dist/icons/IconCalendarArrowForward.js.map +1 -0
  55. package/dist/icons/IconCalendarDoubleArrowBack.d.ts +8 -0
  56. package/dist/icons/IconCalendarDoubleArrowBack.d.ts.map +1 -0
  57. package/dist/icons/IconCalendarDoubleArrowBack.js +76 -0
  58. package/dist/icons/IconCalendarDoubleArrowBack.js.map +1 -0
  59. package/dist/icons/IconCalendarDoubleArrowForward.d.ts +8 -0
  60. package/dist/icons/IconCalendarDoubleArrowForward.d.ts.map +1 -0
  61. package/dist/icons/IconCalendarDoubleArrowForward.js +76 -0
  62. package/dist/icons/IconCalendarDoubleArrowForward.js.map +1 -0
  63. package/dist/icons/IconCircleCheckmark.d.ts +1 -0
  64. package/dist/icons/IconCircleCheckmark.d.ts.map +1 -1
  65. package/dist/icons/IconCircleCheckmark.js +8 -3
  66. package/dist/icons/IconCircleCheckmark.js.map +1 -1
  67. package/dist/input/Input.js +1 -1
  68. package/dist/input-mask/InputMask.d.ts.map +1 -1
  69. package/dist/input-mask/InputMask.js +54 -1
  70. package/dist/input-select/InputSelect.d.ts.map +1 -1
  71. package/dist/input-select/InputSelect.js +31 -33
  72. package/dist/input-select/InputSelect.js.map +1 -1
  73. package/dist/input-select/InputSelect.stories.d.ts +1 -0
  74. package/dist/input-select/InputSelect.stories.d.ts.map +1 -1
  75. package/dist/input-select/InputSelect.stories.js +46 -0
  76. package/dist/input-select/InputSelect.stories.js.map +1 -1
  77. package/dist/select/Select.js +6 -2
  78. package/dist/select/Select.js.map +1 -1
  79. package/dist/select/Select.stories.d.ts.map +1 -1
  80. package/dist/styles.css +152 -23
  81. package/dist/text/Text.d.ts +2 -1
  82. package/dist/text/Text.d.ts.map +1 -1
  83. package/dist/text/Text.js.map +1 -1
  84. package/dist/toggle/Toggle.d.ts +12 -0
  85. package/dist/toggle/Toggle.d.ts.map +1 -0
  86. package/dist/toggle/Toggle.js +131 -0
  87. package/dist/toggle/Toggle.js.map +1 -0
  88. package/dist/toggle/Toggle.stories.d.ts +11 -0
  89. package/dist/toggle/Toggle.stories.d.ts.map +1 -0
  90. package/dist/toggle/Toggle.stories.js +17 -0
  91. package/dist/toggle/Toggle.stories.js.map +1 -0
  92. package/package.json +6 -1
package/dist/styles.css CHANGED
@@ -184,13 +184,16 @@
184
184
  display: flex;
185
185
  flex-direction: column;
186
186
  row-gap: 8px;
187
+ width: 100%;
187
188
  border: none;
188
189
  }
189
190
 
190
191
  /* ======================= top navigation start ======================= */
191
192
 
192
193
  .react-calendar__navigation {
193
- margin-bottom: 0px;
194
+ margin-bottom: 16px;
195
+ padding-bottom: 16px;
196
+ border-bottom: 1px solid var(--primary1) !important;
194
197
  }
195
198
 
196
199
  .react-calendar__navigation button {
@@ -203,9 +206,19 @@
203
206
  background-color: var(--primary1);
204
207
  }
205
208
 
209
+ .react-calendar__navigation button:disabled {
210
+ background-color: transparent;
211
+ }
212
+
213
+ .react-calendar__navigation button:disabled path {
214
+ fill: var(--primary2);
215
+ }
216
+
206
217
  .react-calendar__navigation__label {
207
- font-family: "Gotham-Medium", sans-serif;
218
+ font-family: "Gotham", sans-serif;
208
219
  font-size: 14px;
220
+ font-weight: 700;
221
+ letter-spacing: 0.5px;
209
222
  text-transform: uppercase;
210
223
  }
211
224
 
@@ -213,9 +226,24 @@
213
226
 
214
227
  /* ========================= calendar start ========================= */
215
228
 
229
+ .react-calendar__month-view__days,
230
+ .react-calendar__year-view__months,
231
+ .react-calendar__decade-view__years,
232
+ .react-calendar__century-view__decades {
233
+ border-top: 1px solid var(--primary1);
234
+ border-left: 1px solid var(--primary1);
235
+ }
236
+
237
+ .react-calendar__month-view__weekdays {
238
+ margin-bottom: 4px;
239
+ }
240
+
216
241
  .react-calendar__month-view__weekdays__weekday {
217
242
  display: flex;
218
243
  justify-content: center;
244
+ font-weight: 700;
245
+ font-family: "Gotham", sans-serif;
246
+ color: var(--primary3);
219
247
  }
220
248
 
221
249
  .react-calendar__month-view__weekdays__weekday abbr {
@@ -226,25 +254,35 @@
226
254
  letter-spacing: 1px;
227
255
  font-size: 12px;
228
256
  text-transform: uppercase;
257
+ border-right: 1px solid var(--primary1) !important;
258
+ border-bottom: 1px solid var(--primary1) !important;
229
259
  }
230
260
 
231
261
  .react-calendar__tile:enabled:hover {
232
262
  background: var(--primary1);
233
263
  }
234
264
 
235
- /* today's date */
265
+ /* today's date - default state */
236
266
 
237
- .react-calendar__tile--now,
238
- .react-calendar__tile--now:enabled:focus,
239
- .react-calendar__tile--now:enabled:hover {
240
- background: var(--links);
241
- color: white;
267
+ .react-calendar__tile--now {
268
+ background: transparent;
269
+ color: var(--primary4);
270
+ }
271
+
272
+ /* today's date - hover */
273
+
274
+ .react-calendar__tile--now:enabled:hover,
275
+ .react-calendar__tile--now:enabled:focus {
276
+ background: var(--primary1);
277
+ color: var(--primary4);
242
278
  }
243
279
 
244
280
  .react-calendar__month-view__days__day--neighboringMonth {
245
281
  color: var(--primary2);
246
282
  }
247
283
 
284
+ /* weekends */
285
+
248
286
  .react-calendar__month-view__days__day--weekend {
249
287
  color: var(--accent);
250
288
  }
@@ -252,7 +290,7 @@
252
290
  /* range tiles before selected */
253
291
 
254
292
  .react-calendar--selectRange .react-calendar__tile--hover {
255
- background-color: var(--primary1);
293
+ background-color: var(--primary2);
256
294
  color: var(--primary4);
257
295
  }
258
296
 
@@ -951,10 +989,6 @@ video {
951
989
  top: 50%;
952
990
  }
953
991
 
954
- .top-12 {
955
- top: 3rem;
956
- }
957
-
958
992
  .top-\[50\%\] {
959
993
  top: 50%;
960
994
  }
@@ -975,6 +1009,10 @@ video {
975
1009
  z-index: 50;
976
1010
  }
977
1011
 
1012
+ .z-\[1\] {
1013
+ z-index: 1;
1014
+ }
1015
+
978
1016
  .m-2 {
979
1017
  margin: 0.5rem;
980
1018
  }
@@ -1039,6 +1077,10 @@ video {
1039
1077
  display: block;
1040
1078
  }
1041
1079
 
1080
+ .inline-block {
1081
+ display: inline-block;
1082
+ }
1083
+
1042
1084
  .flex {
1043
1085
  display: flex;
1044
1086
  }
@@ -1104,6 +1146,10 @@ video {
1104
1146
  height: 1.25rem;
1105
1147
  }
1106
1148
 
1149
+ .h-6 {
1150
+ height: 1.5rem;
1151
+ }
1152
+
1107
1153
  .h-64 {
1108
1154
  height: 16rem;
1109
1155
  }
@@ -1116,6 +1162,10 @@ video {
1116
1162
  height: 2.25rem;
1117
1163
  }
1118
1164
 
1165
+ .h-\[1000px\] {
1166
+ height: 1000px;
1167
+ }
1168
+
1119
1169
  .h-\[10px\] {
1120
1170
  height: 10px;
1121
1171
  }
@@ -1176,6 +1226,10 @@ video {
1176
1226
  width: 1rem;
1177
1227
  }
1178
1228
 
1229
+ .w-5 {
1230
+ width: 1.25rem;
1231
+ }
1232
+
1179
1233
  .w-56 {
1180
1234
  width: 14rem;
1181
1235
  }
@@ -1204,10 +1258,19 @@ video {
1204
1258
  width: 44px;
1205
1259
  }
1206
1260
 
1261
+ .w-\[46px\] {
1262
+ width: 46px;
1263
+ }
1264
+
1207
1265
  .w-full {
1208
1266
  width: 100%;
1209
1267
  }
1210
1268
 
1269
+ .w-max {
1270
+ width: -moz-max-content;
1271
+ width: max-content;
1272
+ }
1273
+
1211
1274
  .min-w-0 {
1212
1275
  min-width: 0px;
1213
1276
  }
@@ -1245,6 +1308,10 @@ video {
1245
1308
  max-width: 628px;
1246
1309
  }
1247
1310
 
1311
+ .max-w-sm {
1312
+ max-width: 24rem;
1313
+ }
1314
+
1248
1315
  .flex-1 {
1249
1316
  flex: 1 1 0%;
1250
1317
  }
@@ -1270,11 +1337,21 @@ video {
1270
1337
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1271
1338
  }
1272
1339
 
1340
+ .translate-x-6 {
1341
+ --tw-translate-x: 1.5rem;
1342
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1343
+ }
1344
+
1273
1345
  .translate-x-\[-50\%\] {
1274
1346
  --tw-translate-x: -50%;
1275
1347
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1276
1348
  }
1277
1349
 
1350
+ .translate-x-\[2px\] {
1351
+ --tw-translate-x: 2px;
1352
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1353
+ }
1354
+
1278
1355
  .translate-y-\[-50\%\] {
1279
1356
  --tw-translate-y: -50%;
1280
1357
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1303,6 +1380,10 @@ video {
1303
1380
  cursor: default;
1304
1381
  }
1305
1382
 
1383
+ .cursor-not-allowed {
1384
+ cursor: not-allowed;
1385
+ }
1386
+
1306
1387
  .cursor-pointer {
1307
1388
  cursor: pointer;
1308
1389
  }
@@ -1333,6 +1414,10 @@ video {
1333
1414
  grid-template-columns: repeat(6, minmax(0, 1fr));
1334
1415
  }
1335
1416
 
1417
+ .flex-row {
1418
+ flex-direction: row;
1419
+ }
1420
+
1336
1421
  .flex-col {
1337
1422
  flex-direction: column;
1338
1423
  }
@@ -1349,6 +1434,14 @@ video {
1349
1434
  align-items: center;
1350
1435
  }
1351
1436
 
1437
+ .items-stretch {
1438
+ align-items: stretch;
1439
+ }
1440
+
1441
+ .justify-start {
1442
+ justify-content: flex-start;
1443
+ }
1444
+
1352
1445
  .justify-center {
1353
1446
  justify-content: center;
1354
1447
  }
@@ -1385,6 +1478,11 @@ video {
1385
1478
  gap: 2rem;
1386
1479
  }
1387
1480
 
1481
+ .gap-x-0 {
1482
+ -moz-column-gap: 0px;
1483
+ column-gap: 0px;
1484
+ }
1485
+
1388
1486
  .gap-x-2 {
1389
1487
  -moz-column-gap: 0.5rem;
1390
1488
  column-gap: 0.5rem;
@@ -1815,6 +1913,11 @@ video {
1815
1913
  padding-right: 1rem;
1816
1914
  }
1817
1915
 
1916
+ .px-6 {
1917
+ padding-left: 1.5rem;
1918
+ padding-right: 1.5rem;
1919
+ }
1920
+
1818
1921
  .px-\[16px\] {
1819
1922
  padding-left: 16px;
1820
1923
  padding-right: 16px;
@@ -1860,6 +1963,10 @@ video {
1860
1963
  padding-bottom: 13px;
1861
1964
  }
1862
1965
 
1966
+ .pl-2 {
1967
+ padding-left: 0.5rem;
1968
+ }
1969
+
1863
1970
  .pl-8 {
1864
1971
  padding-left: 2rem;
1865
1972
  }
@@ -1978,6 +2085,10 @@ video {
1978
2085
  line-height: 1;
1979
2086
  }
1980
2087
 
2088
+ .tracking-\[0\.5px\] {
2089
+ letter-spacing: 0.5px;
2090
+ }
2091
+
1981
2092
  .tracking-\[2px\] {
1982
2093
  letter-spacing: 2px;
1983
2094
  }
@@ -2121,16 +2232,6 @@ video {
2121
2232
  color: rgb(202 202 202 / var(--tw-placeholder-opacity, 1));
2122
2233
  }
2123
2234
 
2124
- .placeholder-primary3::-moz-placeholder {
2125
- --tw-placeholder-opacity: 1;
2126
- color: rgb(88 88 88 / var(--tw-placeholder-opacity, 1));
2127
- }
2128
-
2129
- .placeholder-primary3::placeholder {
2130
- --tw-placeholder-opacity: 1;
2131
- color: rgb(88 88 88 / var(--tw-placeholder-opacity, 1));
2132
- }
2133
-
2134
2235
  .opacity-50 {
2135
2236
  opacity: 0.5;
2136
2237
  }
@@ -2609,6 +2710,11 @@ li::marker {
2609
2710
  border-color: rgb(202 202 202 / var(--tw-border-opacity, 1));
2610
2711
  }
2611
2712
 
2713
+ .hover\:border-primary4:hover {
2714
+ --tw-border-opacity: 1;
2715
+ border-color: rgb(25 25 25 / var(--tw-border-opacity, 1));
2716
+ }
2717
+
2612
2718
  .hover\:bg-accent4:hover {
2613
2719
  --tw-bg-opacity: 1;
2614
2720
  background-color: rgb(229 88 103 / var(--tw-bg-opacity, 1));
@@ -2629,6 +2735,11 @@ li::marker {
2629
2735
  background-color: rgb(239 239 240 / var(--tw-bg-opacity, 1));
2630
2736
  }
2631
2737
 
2738
+ .hover\:bg-primary2:hover {
2739
+ --tw-bg-opacity: 1;
2740
+ background-color: rgb(202 202 202 / var(--tw-bg-opacity, 1));
2741
+ }
2742
+
2632
2743
  .hover\:bg-primary4:hover {
2633
2744
  --tw-bg-opacity: 1;
2634
2745
  background-color: rgb(25 25 25 / var(--tw-bg-opacity, 1));
@@ -2737,6 +2848,16 @@ li::marker {
2737
2848
  cursor: not-allowed;
2738
2849
  }
2739
2850
 
2851
+ .disabled\:bg-primary1:disabled {
2852
+ --tw-bg-opacity: 1;
2853
+ background-color: rgb(239 239 240 / var(--tw-bg-opacity, 1));
2854
+ }
2855
+
2856
+ .disabled\:text-primary3:disabled {
2857
+ --tw-text-opacity: 1;
2858
+ color: rgb(88 88 88 / var(--tw-text-opacity, 1));
2859
+ }
2860
+
2740
2861
  .disabled\:\!opacity-100:disabled {
2741
2862
  opacity: 1 !important;
2742
2863
  }
@@ -3132,6 +3253,14 @@ li::marker {
3132
3253
  .lg\:h-11 {
3133
3254
  height: 2.75rem;
3134
3255
  }
3256
+
3257
+ .lg\:h-6 {
3258
+ height: 1.5rem;
3259
+ }
3260
+
3261
+ .lg\:w-6 {
3262
+ width: 1.5rem;
3263
+ }
3135
3264
  }
3136
3265
 
3137
3266
  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
@@ -3,7 +3,8 @@ export interface TextProps extends React.HTMLAttributes<HTMLDivElement> {
3
3
  /**
4
4
  * @default 'p'
5
5
  */
6
- as?: React.HTMLElementType;
6
+ as?: keyof React.ReactHTML;
7
+ type?: keyof React.ReactHTML;
7
8
  }
8
9
  declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLDivElement>>;
9
10
  export default Text;
@@ -1 +1 @@
1
- {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,eAAe,CAAA;CAC1B;AAED,QAAA,MAAM,IAAI,kFAiBT,CAAA;AAGD,eAAe,IAAI,CAAA"}
1
+ {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,QAAA,MAAM,IAAI,kFAiBT,CAAA;AAGD,eAAe,IAAI,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAA;AAS7B,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EAAE,EAAE,GAAG,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpD,OAAO,KAAK,CAAC,aAAa,CACzB,EAAE,EACF;QACC,GAAG,KAAK;QACR,SAAS,EAAE,EAAE,CACZ,4BAA4B,EAC5B,EAAE,KAAK,IAAI,IAAI,uBAAuB,EACtC,EAAE,KAAK,IAAI,IAAI,yBAAyB,EACxC,SAAS,CACT;QACD,GAAG;KACH,EACD,QAAQ,CACR,CAAA;AACF,CAAC,CACD,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
1
+ {"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAA;AAU7B,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EAAE,EAAE,GAAG,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpD,OAAO,KAAK,CAAC,aAAa,CACzB,EAAE,EACF;QACC,GAAG,KAAK;QACR,SAAS,EAAE,EAAE,CACZ,4BAA4B,EAC5B,EAAE,KAAK,IAAI,IAAI,uBAAuB,EACtC,EAAE,KAAK,IAAI,IAAI,yBAAyB,EACxC,SAAS,CACT;QACD,GAAG;KACH,EACD,QAAQ,CACR,CAAA;AACF,CAAC,CACD,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
@@ -0,0 +1,12 @@
1
+ import * as React from 'react';
2
+ export type ToggleProps = {
3
+ checked?: boolean;
4
+ onCheckedChange?: (checked: boolean) => void;
5
+ disabled?: boolean;
6
+ htmlFor?: string;
7
+ children?: React.ReactNode;
8
+ className?: string;
9
+ };
10
+ declare const Toggle: React.FC<ToggleProps>;
11
+ export default Toggle;
12
+ //# sourceMappingURL=Toggle.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/toggle/Toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgD9B,MAAM,MAAM,WAAW,GAAG;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAajC,CAAA;AAED,eAAe,MAAM,CAAA"}
@@ -0,0 +1,131 @@
1
+ 'use client';
2
+ function _define_property(obj, key, value) {
3
+ if (key in obj) {
4
+ Object.defineProperty(obj, key, {
5
+ value: value,
6
+ enumerable: true,
7
+ configurable: true,
8
+ writable: true
9
+ });
10
+ } else {
11
+ obj[key] = value;
12
+ }
13
+ return obj;
14
+ }
15
+ function _object_spread(target) {
16
+ for(var i = 1; i < arguments.length; i++){
17
+ var source = arguments[i] != null ? arguments[i] : {};
18
+ var ownKeys = Object.keys(source);
19
+ if (typeof Object.getOwnPropertySymbols === "function") {
20
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
21
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
22
+ }));
23
+ }
24
+ ownKeys.forEach(function(key) {
25
+ _define_property(target, key, source[key]);
26
+ });
27
+ }
28
+ return target;
29
+ }
30
+ function ownKeys(object, enumerableOnly) {
31
+ var keys = Object.keys(object);
32
+ if (Object.getOwnPropertySymbols) {
33
+ var symbols = Object.getOwnPropertySymbols(object);
34
+ if (enumerableOnly) {
35
+ symbols = symbols.filter(function(sym) {
36
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
37
+ });
38
+ }
39
+ keys.push.apply(keys, symbols);
40
+ }
41
+ return keys;
42
+ }
43
+ function _object_spread_props(target, source) {
44
+ source = source != null ? source : {};
45
+ if (Object.getOwnPropertyDescriptors) {
46
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
47
+ } else {
48
+ ownKeys(Object(source)).forEach(function(key) {
49
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
50
+ });
51
+ }
52
+ return target;
53
+ }
54
+ function _object_without_properties(source, excluded) {
55
+ if (source == null) return {};
56
+ var target = _object_without_properties_loose(source, excluded);
57
+ var key, i;
58
+ if (Object.getOwnPropertySymbols) {
59
+ var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
60
+ for(i = 0; i < sourceSymbolKeys.length; i++){
61
+ key = sourceSymbolKeys[i];
62
+ if (excluded.indexOf(key) >= 0) continue;
63
+ if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
64
+ target[key] = source[key];
65
+ }
66
+ }
67
+ return target;
68
+ }
69
+ function _object_without_properties_loose(source, excluded) {
70
+ if (source == null) return {};
71
+ var target = {};
72
+ var sourceKeys = Object.keys(source);
73
+ var key, i;
74
+ for(i = 0; i < sourceKeys.length; i++){
75
+ key = sourceKeys[i];
76
+ if (excluded.indexOf(key) >= 0) continue;
77
+ target[key] = source[key];
78
+ }
79
+ return target;
80
+ }
81
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
82
+ import Button from '@driveflux/beam/button';
83
+ import { cn } from '@driveflux/beam/utils';
84
+ import * as React from 'react';
85
+ var ToggleRoot = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
86
+ var className = _param.className, _param_checked = _param.checked, checked = _param_checked === void 0 ? false : _param_checked, onCheckedChange = _param.onCheckedChange, disabled = _param.disabled, props = _object_without_properties(_param, [
87
+ "className",
88
+ "checked",
89
+ "onCheckedChange",
90
+ "disabled"
91
+ ]);
92
+ var handleClick = function() {
93
+ if (!disabled && onCheckedChange) {
94
+ onCheckedChange(!checked);
95
+ }
96
+ };
97
+ return /*#__PURE__*/ _jsx(Button, _object_spread_props(_object_spread({
98
+ ref: ref,
99
+ onClick: handleClick,
100
+ isDisabled: disabled,
101
+ role: "switch",
102
+ "aria-checked": checked,
103
+ className: cn('relative h-6 w-[46px] rounded-full p-0 min-w-0 block items-start justify-start bg-primary2', checked ? 'bg-black hover:bg-black' : 'bg-primary2 hover:bg-primary2', className)
104
+ }, props), {
105
+ children: /*#__PURE__*/ _jsx("span", {
106
+ className: cn('inline-block h-5 w-5 transform rounded-full bg-white transition-transform duration-300', checked ? 'translate-x-6' : 'translate-x-[2px]')
107
+ })
108
+ }));
109
+ });
110
+ ToggleRoot.displayName = 'ToggleRoot';
111
+ var Toggle = function(_param) {
112
+ var children = _param.children, htmlFor = _param.htmlFor, props = _object_without_properties(_param, [
113
+ "children",
114
+ "htmlFor"
115
+ ]);
116
+ if (children && htmlFor) {
117
+ return /*#__PURE__*/ _jsxs("div", {
118
+ className: "flex items-center gap-2",
119
+ children: [
120
+ /*#__PURE__*/ _jsx(ToggleRoot, _object_spread({}, props)),
121
+ /*#__PURE__*/ _jsx("label", {
122
+ htmlFor: htmlFor,
123
+ className: "flex-1",
124
+ children: children
125
+ })
126
+ ]
127
+ });
128
+ }
129
+ return /*#__PURE__*/ _jsx(ToggleRoot, _object_spread({}, props));
130
+ };
131
+ export default Toggle;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CASlC,CACC,EAAE,SAAS,EAAE,OAAO,GAAG,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACF,EAAE;IACH,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,eAAe,EAAE,CAAC;YAClC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAA;QAC1B,CAAC;IACF,CAAC,CAAA;IAED,OAAO,CACN,KAAC,MAAM,IACN,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,QAAQ,EACpB,IAAI,EAAC,QAAQ,kBACC,OAAO,EACrB,SAAS,EAAE,EAAE,CACZ,4FAA4F,EAC5F,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,+BAA+B,EACrE,SAAS,CACT,KACG,KAAK,YAET,eACC,SAAS,EAAE,EAAE,CACZ,wFAAwF,EACxF,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAC/C,GACA,GACM,CACT,CAAA;AACF,CAAC,CACD,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAWrC,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzE,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;QACzB,OAAO,CACN,eAAK,SAAS,EAAC,yBAAyB,aACvC,KAAC,UAAU,OAAK,KAAK,GAAI,EACzB,gBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,QAAQ,YACzC,QAAQ,GACF,IACH,CACN,CAAA;IACF,CAAC;IAED,OAAO,KAAC,UAAU,OAAK,KAAK,GAAI,CAAA;AACjC,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}
@@ -0,0 +1,11 @@
1
+ import type { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ component: import("react").FC<import("./Toggle").ToggleProps>;
4
+ args: {
5
+ htmlFor: string;
6
+ };
7
+ };
8
+ export default meta;
9
+ type Story = StoryObj<typeof meta>;
10
+ export declare const FirstStory: Story;
11
+ //# sourceMappingURL=Toggle.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../src/toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,QAAA,MAAM,IAAI;;;;;CAKqB,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAA"}
@@ -0,0 +1,17 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import Toggle from './Toggle';
3
+ var meta = {
4
+ component: Toggle,
5
+ args: {
6
+ htmlFor: ''
7
+ }
8
+ };
9
+ export default meta;
10
+ export var FirstStory = {
11
+ render: function() {
12
+ return /*#__PURE__*/ _jsx(Toggle, {
13
+ htmlFor: "tnc",
14
+ children: "I accept the terms and conditions."
15
+ });
16
+ }
17
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toggle.stories.js","sourceRoot":"","sources":["../../src/toggle/Toggle.stories.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,IAAI,GAAG;IACZ,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE;QACL,OAAO,EAAE,EAAE;KACX;CAC6B,CAAA;AAE/B,eAAe,IAAI,CAAA;AAGnB,MAAM,CAAC,MAAM,UAAU,GAAU;IAChC,MAAM,EAAE,GAAG,EAAE;QACZ,OAAO,KAAC,MAAM,IAAC,OAAO,EAAC,KAAK,mDAA4C,CAAA;IACzE,CAAC;CACD,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@driveflux/beam",
3
- "version": "1.10.1",
3
+ "version": "1.11.0",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  "./accordion": {
@@ -147,6 +147,10 @@
147
147
  "types": "./dist/tooltip/Tooltip.d.ts",
148
148
  "import": "./dist/tooltip/Tooltip.js"
149
149
  },
150
+ "./toggle": {
151
+ "types": "./dist/toggle/Toggle.d.ts",
152
+ "import": "./dist/toggle/Toggle.js"
153
+ },
150
154
  "./vstack": {
151
155
  "types": "./dist/vstack/VStack.d.ts",
152
156
  "import": "./dist/vstack/VStack.js"
@@ -210,6 +214,7 @@
210
214
  "class-variance-authority": "^0.7.0",
211
215
  "clsx": "^2.1.1",
212
216
  "cmdk": "^1.0.0",
217
+ "date-fns": "^3.6.0",
213
218
  "embla-carousel-react": "^8.3.0",
214
219
  "embla-carousel-wheel-gestures": "^8.0.1",
215
220
  "lucide-react": "^0.453.0",