@vygruppen/spor-react 10.1.0 → 10.3.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 (13) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +16 -0
  3. package/dist/{CountryCodeSelect-FKWNR6SG.mjs → CountryCodeSelect-KCPHU7A7.mjs} +1 -1
  4. package/dist/{chunk-MLRF67YM.mjs → chunk-5HRYDWQ5.mjs} +94 -23
  5. package/dist/index.d.mts +50 -319
  6. package/dist/index.d.ts +50 -319
  7. package/dist/index.js +94 -22
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/input/Input.tsx +7 -1
  11. package/src/input/NumericStepper.tsx +72 -19
  12. package/src/modal/ModalHeader.tsx +1 -1
  13. package/src/theme/components/input.ts +32 -3
package/dist/index.d.mts CHANGED
@@ -1104,7 +1104,7 @@ type InfoSelectProps<T extends object> = {
1104
1104
  */
1105
1105
  declare function InfoSelect<T extends object>({ placeholder, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
1106
1106
 
1107
- type InputProps = Omit<InputProps$1, "variant" | "size"> & {
1107
+ type InputProps = Omit<InputProps$1, "size"> & {
1108
1108
  /** The input's label */
1109
1109
  label: string;
1110
1110
  /** Icon that shows up to the left */
@@ -1126,6 +1126,12 @@ type InputProps = Omit<InputProps$1, "variant" | "size"> & {
1126
1126
  * ```tsx
1127
1127
  * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} />
1128
1128
  * ```
1129
+ *
1130
+ * Input has two variants base, and floating.
1131
+ *
1132
+ * ```tsx
1133
+ * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} variant="floating" />
1134
+ * ```
1129
1135
  */
1130
1136
  declare const Input: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
1131
1137
 
@@ -1264,6 +1270,11 @@ type NumericStepperProps = {
1264
1270
  stepSize?: number;
1265
1271
  /** Whether to show the number input when value is zero */
1266
1272
  showZero?: boolean;
1273
+ /** Name added to the aria-label of subtract and add buttons. */
1274
+ ariaLabelContext?: {
1275
+ singular: string;
1276
+ plural: string;
1277
+ };
1267
1278
  } & Omit<BoxProps, "onChange">;
1268
1279
  /** A simple stepper component for integer values
1269
1280
  *
@@ -1289,7 +1300,7 @@ type NumericStepperProps = {
1289
1300
  * </FormControl>
1290
1301
  * ```
1291
1302
  */
1292
- declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ...boxProps }: NumericStepperProps): React.JSX.Element;
1303
+ declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ariaLabelContext, ...boxProps }: NumericStepperProps): React.JSX.Element;
1293
1304
 
1294
1305
  type PasswordInputProps = InputProps;
1295
1306
  declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
@@ -4333,94 +4344,6 @@ declare const theme: {
4333
4344
  Input: {
4334
4345
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4335
4346
  field: {
4336
- _hover: {
4337
- outlineWidth: string;
4338
- outlineColor: string;
4339
- outlineStyle: string;
4340
- outlineOffset: string;
4341
- } | {
4342
- outline: string;
4343
- outlineColor: string;
4344
- };
4345
- _active: {
4346
- outlineWidth: string;
4347
- outlineColor: string;
4348
- outlineStyle: string;
4349
- outlineOffset: string;
4350
- backgroundColor: string;
4351
- } | {
4352
- outline: string;
4353
- outlineColor: string;
4354
- backgroundColor: string;
4355
- };
4356
- _focusVisible: {
4357
- outlineOffset: number;
4358
- outlineWidth: string;
4359
- outlineColor: string;
4360
- outlineStyle: string;
4361
- };
4362
- _disabled: {
4363
- pointerEvents: string;
4364
- outlineWidth: string;
4365
- outlineColor: string;
4366
- outlineStyle: string;
4367
- outlineOffset: string;
4368
- backgroundColor: string;
4369
- } | {
4370
- pointerEvents: string;
4371
- outline: string;
4372
- outlineColor: string;
4373
- backgroundColor: string;
4374
- };
4375
- _invalid: {
4376
- _hover: {
4377
- outlineWidth: string;
4378
- outlineColor: string;
4379
- outlineStyle: string;
4380
- outlineOffset: string;
4381
- } | {
4382
- outline: string;
4383
- outlineColor: string;
4384
- };
4385
- outlineWidth: string;
4386
- outlineColor: string;
4387
- outlineStyle: string;
4388
- outlineOffset: string;
4389
- } | {
4390
- _hover: {
4391
- outlineWidth: string;
4392
- outlineColor: string;
4393
- outlineStyle: string;
4394
- outlineOffset: string;
4395
- } | {
4396
- outline: string;
4397
- outlineColor: string;
4398
- };
4399
- outline: string;
4400
- outlineColor: string;
4401
- };
4402
- " + label": {
4403
- fontSize: ("mobile.sm" | "desktop.sm")[];
4404
- top: string;
4405
- left: any;
4406
- zIndex: number;
4407
- position: string;
4408
- marginY: number;
4409
- transition: string;
4410
- transformOrigin: string;
4411
- cursor: string;
4412
- };
4413
- "&:not(:placeholder-shown)": {
4414
- paddingTop: string;
4415
- "& + label": {
4416
- transform: string;
4417
- };
4418
- };
4419
- outlineWidth: string;
4420
- outlineColor: string;
4421
- outlineStyle: string;
4422
- outlineOffset: string;
4423
- backgroundColor: string;
4424
4347
  appearance: string;
4425
4348
  width: string;
4426
4349
  outline: string;
@@ -4432,7 +4355,6 @@ declare const theme: {
4432
4355
  paddingX: number;
4433
4356
  height: number;
4434
4357
  fontSize: string;
4435
- } | {
4436
4358
  _hover: {
4437
4359
  outlineWidth: string;
4438
4360
  outlineColor: string;
@@ -4516,19 +4438,6 @@ declare const theme: {
4516
4438
  transform: string;
4517
4439
  };
4518
4440
  };
4519
- outline: string;
4520
- outlineColor: string;
4521
- backgroundColor: string;
4522
- appearance: string;
4523
- width: string;
4524
- border: number;
4525
- borderRadius: string;
4526
- transitionProperty: string;
4527
- transitionDuration: string;
4528
- position: string;
4529
- paddingX: number;
4530
- height: number;
4531
- fontSize: string;
4532
4441
  };
4533
4442
  element: {
4534
4443
  height: string;
@@ -4545,13 +4454,46 @@ declare const theme: {
4545
4454
  }>;
4546
4455
  } | undefined;
4547
4456
  variants?: {
4548
- [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
4549
- keys: ("group" | "element" | "addon" | "field")[];
4550
- }>;
4457
+ base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4458
+ field: {
4459
+ outlineWidth: string;
4460
+ outlineColor: string;
4461
+ outlineStyle: string;
4462
+ outlineOffset: string;
4463
+ backgroundColor: string;
4464
+ } | {
4465
+ outline: string;
4466
+ outlineColor: string;
4467
+ backgroundColor: string;
4468
+ };
4469
+ };
4470
+ floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4471
+ field: {
4472
+ _hover: {
4473
+ backgroundColor: string;
4474
+ outline: string;
4475
+ outlineColor: string;
4476
+ };
4477
+ _active: {
4478
+ backgroundColor: string;
4479
+ outline: string;
4480
+ outlineColor: string;
4481
+ };
4482
+ _selected: {
4483
+ backgroundColor: string;
4484
+ outline: string;
4485
+ outlineColor: string;
4486
+ };
4487
+ outline: string;
4488
+ outlineColor: string;
4489
+ backgroundColor: string;
4490
+ boxShadow: string;
4491
+ };
4492
+ };
4551
4493
  } | undefined;
4552
4494
  defaultProps?: {
4553
4495
  size?: string | number | undefined;
4554
- variant?: string | number | undefined;
4496
+ variant?: "base" | "floating" | undefined;
4555
4497
  colorScheme?: string | undefined;
4556
4498
  } | undefined;
4557
4499
  parts: ("group" | "element" | "addon" | "field")[];
@@ -5648,94 +5590,6 @@ declare const theme: {
5648
5590
  appearance: string;
5649
5591
  paddingTop: string;
5650
5592
  "option, optgroup": {};
5651
- _hover: {
5652
- outlineWidth: string;
5653
- outlineColor: string;
5654
- outlineStyle: string;
5655
- outlineOffset: string;
5656
- } | {
5657
- outline: string;
5658
- outlineColor: string;
5659
- };
5660
- _active: {
5661
- outlineWidth: string;
5662
- outlineColor: string;
5663
- outlineStyle: string;
5664
- outlineOffset: string;
5665
- backgroundColor: string;
5666
- } | {
5667
- outline: string;
5668
- outlineColor: string;
5669
- backgroundColor: string;
5670
- };
5671
- _focusVisible: {
5672
- outlineOffset: number;
5673
- outlineWidth: string;
5674
- outlineColor: string;
5675
- outlineStyle: string;
5676
- };
5677
- _disabled: {
5678
- pointerEvents: string;
5679
- outlineWidth: string;
5680
- outlineColor: string;
5681
- outlineStyle: string;
5682
- outlineOffset: string;
5683
- backgroundColor: string;
5684
- } | {
5685
- pointerEvents: string;
5686
- outline: string;
5687
- outlineColor: string;
5688
- backgroundColor: string;
5689
- };
5690
- _invalid: {
5691
- _hover: {
5692
- outlineWidth: string;
5693
- outlineColor: string;
5694
- outlineStyle: string;
5695
- outlineOffset: string;
5696
- } | {
5697
- outline: string;
5698
- outlineColor: string;
5699
- };
5700
- outlineWidth: string;
5701
- outlineColor: string;
5702
- outlineStyle: string;
5703
- outlineOffset: string;
5704
- } | {
5705
- _hover: {
5706
- outlineWidth: string;
5707
- outlineColor: string;
5708
- outlineStyle: string;
5709
- outlineOffset: string;
5710
- } | {
5711
- outline: string;
5712
- outlineColor: string;
5713
- };
5714
- outline: string;
5715
- outlineColor: string;
5716
- };
5717
- " + label": {
5718
- fontSize: ("mobile.sm" | "desktop.sm")[];
5719
- top: string;
5720
- left: any;
5721
- zIndex: number;
5722
- position: string;
5723
- marginY: number;
5724
- transition: string;
5725
- transformOrigin: string;
5726
- cursor: string;
5727
- };
5728
- "&:not(:placeholder-shown)": {
5729
- paddingTop: string;
5730
- "& + label": {
5731
- transform: string;
5732
- };
5733
- };
5734
- outlineWidth: string;
5735
- outlineColor: string;
5736
- outlineStyle: string;
5737
- outlineOffset: string;
5738
- backgroundColor: string;
5739
5593
  width: string;
5740
5594
  outline: string;
5741
5595
  border: number;
@@ -5746,10 +5600,6 @@ declare const theme: {
5746
5600
  paddingX: number;
5747
5601
  height: number;
5748
5602
  fontSize: string;
5749
- } | {
5750
- appearance: string;
5751
- paddingTop: string;
5752
- "option, optgroup": {};
5753
5603
  _hover: {
5754
5604
  outlineWidth: string;
5755
5605
  outlineColor: string;
@@ -5833,18 +5683,6 @@ declare const theme: {
5833
5683
  transform: string;
5834
5684
  };
5835
5685
  };
5836
- outline: string;
5837
- outlineColor: string;
5838
- backgroundColor: string;
5839
- width: string;
5840
- border: number;
5841
- borderRadius: string;
5842
- transitionProperty: string;
5843
- transitionDuration: string;
5844
- position: string;
5845
- paddingX: number;
5846
- height: number;
5847
- fontSize: string;
5848
5686
  };
5849
5687
  icon: {
5850
5688
  width: number;
@@ -6490,88 +6328,6 @@ declare const theme: {
6490
6328
  transform: string;
6491
6329
  };
6492
6330
  };
6493
- _hover: {
6494
- outlineWidth: string;
6495
- outlineColor: string;
6496
- outlineStyle: string;
6497
- outlineOffset: string;
6498
- } | {
6499
- outline: string;
6500
- outlineColor: string;
6501
- };
6502
- _active: {
6503
- outlineWidth: string;
6504
- outlineColor: string;
6505
- outlineStyle: string;
6506
- outlineOffset: string;
6507
- backgroundColor: string;
6508
- } | {
6509
- outline: string;
6510
- outlineColor: string;
6511
- backgroundColor: string;
6512
- };
6513
- _focusVisible: {
6514
- outlineOffset: number;
6515
- outlineWidth: string;
6516
- outlineColor: string;
6517
- outlineStyle: string;
6518
- };
6519
- _disabled: {
6520
- pointerEvents: string;
6521
- outlineWidth: string;
6522
- outlineColor: string;
6523
- outlineStyle: string;
6524
- outlineOffset: string;
6525
- backgroundColor: string;
6526
- } | {
6527
- pointerEvents: string;
6528
- outline: string;
6529
- outlineColor: string;
6530
- backgroundColor: string;
6531
- };
6532
- _invalid: {
6533
- _hover: {
6534
- outlineWidth: string;
6535
- outlineColor: string;
6536
- outlineStyle: string;
6537
- outlineOffset: string;
6538
- } | {
6539
- outline: string;
6540
- outlineColor: string;
6541
- };
6542
- outlineWidth: string;
6543
- outlineColor: string;
6544
- outlineStyle: string;
6545
- outlineOffset: string;
6546
- } | {
6547
- _hover: {
6548
- outlineWidth: string;
6549
- outlineColor: string;
6550
- outlineStyle: string;
6551
- outlineOffset: string;
6552
- } | {
6553
- outline: string;
6554
- outlineColor: string;
6555
- };
6556
- outline: string;
6557
- outlineColor: string;
6558
- };
6559
- " + label": {
6560
- fontSize: ("mobile.sm" | "desktop.sm")[];
6561
- top: string;
6562
- left: any;
6563
- zIndex: number;
6564
- position: string;
6565
- marginY: number;
6566
- transition: string;
6567
- transformOrigin: string;
6568
- cursor: string;
6569
- };
6570
- outlineWidth: string;
6571
- outlineColor: string;
6572
- outlineStyle: string;
6573
- outlineOffset: string;
6574
- backgroundColor: string;
6575
6331
  width: string;
6576
6332
  outline: string;
6577
6333
  border: number;
@@ -6582,19 +6338,6 @@ declare const theme: {
6582
6338
  paddingX: number;
6583
6339
  height: number;
6584
6340
  fontSize: string;
6585
- } | {
6586
- minHeight: string;
6587
- verticalAlign: string;
6588
- appearance: string;
6589
- paddingTop: number;
6590
- "&:not(:placeholder-shown)": {
6591
- "&:has(+ label)": {
6592
- paddingTop: number;
6593
- };
6594
- "& + label": {
6595
- transform: string;
6596
- };
6597
- };
6598
6341
  _hover: {
6599
6342
  outlineWidth: string;
6600
6343
  outlineColor: string;
@@ -6672,18 +6415,6 @@ declare const theme: {
6672
6415
  transformOrigin: string;
6673
6416
  cursor: string;
6674
6417
  };
6675
- outline: string;
6676
- outlineColor: string;
6677
- backgroundColor: string;
6678
- width: string;
6679
- border: number;
6680
- borderRadius: string;
6681
- transitionProperty: string;
6682
- transitionDuration: string;
6683
- position: string;
6684
- paddingX: number;
6685
- height: number;
6686
- fontSize: string;
6687
6418
  }) | undefined;
6688
6419
  sizes?: {
6689
6420
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;