@vygruppen/spor-react 10.1.0 → 10.2.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 (12) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +10 -0
  3. package/dist/{CountryCodeSelect-FKWNR6SG.mjs → CountryCodeSelect-UFSVRLDY.mjs} +1 -1
  4. package/dist/{chunk-MLRF67YM.mjs → chunk-BPDFFQ3U.mjs} +33 -5
  5. package/dist/index.d.mts +44 -318
  6. package/dist/index.d.ts +44 -318
  7. package/dist/index.js +33 -4
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/input/Input.tsx +7 -1
  11. package/src/modal/ModalHeader.tsx +1 -1
  12. package/src/theme/components/input.ts +32 -3
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@10.1.0 build
2
+ > @vygruppen/spor-react@10.2.0 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
9
9
  CJS Build start
10
10
  ESM Build start
11
11
  DTS Build start
12
- CJS dist/index.js 527.11 KB
13
- CJS ⚡️ Build success in 2350ms
14
12
  ESM dist/index.mjs 2.15 KB
15
- ESM dist/CountryCodeSelect-FKWNR6SG.mjs 1.19 KB
16
- ESM dist/chunk-MLRF67YM.mjs 415.50 KB
17
- ESM ⚡️ Build success in 2352ms
18
- DTS ⚡️ Build success in 16537ms
19
- DTS dist/index.d.ts 326.27 KB
20
- DTS dist/index.d.mts 326.27 KB
13
+ ESM dist/CountryCodeSelect-UFSVRLDY.mjs 1.19 KB
14
+ ESM dist/chunk-BPDFFQ3U.mjs 416.17 KB
15
+ ESM ⚡️ Build success in 2287ms
16
+ CJS dist/index.js 527.91 KB
17
+ CJS ⚡️ Build success in 2288ms
18
+ DTS ⚡️ Build success in 15575ms
19
+ DTS dist/index.d.ts 315.68 KB
20
+ DTS dist/index.d.mts 315.68 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 10.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 0a56c3b: Added variant floating to input component.
8
+
9
+ ### Patch Changes
10
+
11
+ - da227b9: Modal: Add h1 tag to title
12
+
3
13
  ## 10.1.0
4
14
 
5
15
  ### Minor Changes
package/dist/{CountryCodeSelect-FKWNR6SG.mjs → CountryCodeSelect-UFSVRLDY.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-MLRF67YM.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-BPDFFQ3U.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
package/dist/{chunk-MLRF67YM.mjs → chunk-BPDFFQ3U.mjs} RENAMED
@@ -1779,7 +1779,7 @@ var texts4 = createTexts({
1779
1779
  sv: "Landskod"
1780
1780
  }
1781
1781
  });
1782
- var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-FKWNR6SG.mjs'));
1782
+ var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-UFSVRLDY.mjs'));
1783
1783
  var Radio = forwardRef((props, ref) => {
1784
1784
  return /* @__PURE__ */ React84__default.createElement(Radio$1, { ...props, ref });
1785
1785
  });
@@ -4358,7 +4358,7 @@ var ModalHeader = forwardRef(
4358
4358
  fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
4359
4359
  textAlign: size2 === "lg" ? "center" : "left"
4360
4360
  };
4361
- return /* @__PURE__ */ React84__default.createElement(ModalHeader$1, { ...props, ref, ...styles3 });
4361
+ return /* @__PURE__ */ React84__default.createElement(ModalHeader$1, { as: "h1", ...props, ref, ...styles3 });
4362
4362
  }
4363
4363
  );
4364
4364
 
@@ -12443,8 +12443,6 @@ var config21 = helpers14.defineMultiStyleConfig({
12443
12443
  paddingX: 3,
12444
12444
  height: 8,
12445
12445
  fontSize: "mobile.md",
12446
- ...baseBackground("default", props),
12447
- ...baseBorder("default", props),
12448
12446
  _hover: {
12449
12447
  ...baseBorder("hover", props)
12450
12448
  },
@@ -12493,7 +12491,37 @@ var config21 = helpers14.defineMultiStyleConfig({
12493
12491
  ...baseText("disabled", props)
12494
12492
  }
12495
12493
  }
12496
- })
12494
+ }),
12495
+ variants: {
12496
+ base: (props) => ({
12497
+ field: {
12498
+ ...baseBackground("default", props),
12499
+ ...baseBorder("default", props)
12500
+ }
12501
+ }),
12502
+ floating: (props) => ({
12503
+ field: {
12504
+ boxShadow: "sm",
12505
+ ...floatingBackground("default", props),
12506
+ ...floatingBorder("default", props),
12507
+ _hover: {
12508
+ ...floatingBorder("hover", props),
12509
+ ...floatingBackground("hover", props)
12510
+ },
12511
+ _active: {
12512
+ ...floatingBorder("active", props),
12513
+ ...floatingBackground("active", props)
12514
+ },
12515
+ _selected: {
12516
+ ...floatingBorder("selected", props),
12517
+ ...floatingBackground("selected", props)
12518
+ }
12519
+ }
12520
+ })
12521
+ },
12522
+ defaultProps: {
12523
+ variant: "base"
12524
+ }
12497
12525
  });
12498
12526
  var input_default = config21;
12499
12527
  var parts10 = anatomy$1("line-tag").parts("iconContainer", "icon");
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
 
@@ -4333,94 +4339,6 @@ declare const theme: {
4333
4339
  Input: {
4334
4340
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4335
4341
  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
4342
  appearance: string;
4425
4343
  width: string;
4426
4344
  outline: string;
@@ -4432,7 +4350,6 @@ declare const theme: {
4432
4350
  paddingX: number;
4433
4351
  height: number;
4434
4352
  fontSize: string;
4435
- } | {
4436
4353
  _hover: {
4437
4354
  outlineWidth: string;
4438
4355
  outlineColor: string;
@@ -4516,19 +4433,6 @@ declare const theme: {
4516
4433
  transform: string;
4517
4434
  };
4518
4435
  };
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
4436
  };
4533
4437
  element: {
4534
4438
  height: string;
@@ -4545,13 +4449,46 @@ declare const theme: {
4545
4449
  }>;
4546
4450
  } | undefined;
4547
4451
  variants?: {
4548
- [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
4549
- keys: ("group" | "element" | "addon" | "field")[];
4550
- }>;
4452
+ base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4453
+ field: {
4454
+ outlineWidth: string;
4455
+ outlineColor: string;
4456
+ outlineStyle: string;
4457
+ outlineOffset: string;
4458
+ backgroundColor: string;
4459
+ } | {
4460
+ outline: string;
4461
+ outlineColor: string;
4462
+ backgroundColor: string;
4463
+ };
4464
+ };
4465
+ floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4466
+ field: {
4467
+ _hover: {
4468
+ backgroundColor: string;
4469
+ outline: string;
4470
+ outlineColor: string;
4471
+ };
4472
+ _active: {
4473
+ backgroundColor: string;
4474
+ outline: string;
4475
+ outlineColor: string;
4476
+ };
4477
+ _selected: {
4478
+ backgroundColor: string;
4479
+ outline: string;
4480
+ outlineColor: string;
4481
+ };
4482
+ outline: string;
4483
+ outlineColor: string;
4484
+ backgroundColor: string;
4485
+ boxShadow: string;
4486
+ };
4487
+ };
4551
4488
  } | undefined;
4552
4489
  defaultProps?: {
4553
4490
  size?: string | number | undefined;
4554
- variant?: string | number | undefined;
4491
+ variant?: "base" | "floating" | undefined;
4555
4492
  colorScheme?: string | undefined;
4556
4493
  } | undefined;
4557
4494
  parts: ("group" | "element" | "addon" | "field")[];
@@ -5648,94 +5585,6 @@ declare const theme: {
5648
5585
  appearance: string;
5649
5586
  paddingTop: string;
5650
5587
  "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
5588
  width: string;
5740
5589
  outline: string;
5741
5590
  border: number;
@@ -5746,10 +5595,6 @@ declare const theme: {
5746
5595
  paddingX: number;
5747
5596
  height: number;
5748
5597
  fontSize: string;
5749
- } | {
5750
- appearance: string;
5751
- paddingTop: string;
5752
- "option, optgroup": {};
5753
5598
  _hover: {
5754
5599
  outlineWidth: string;
5755
5600
  outlineColor: string;
@@ -5833,18 +5678,6 @@ declare const theme: {
5833
5678
  transform: string;
5834
5679
  };
5835
5680
  };
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
5681
  };
5849
5682
  icon: {
5850
5683
  width: number;
@@ -6490,88 +6323,6 @@ declare const theme: {
6490
6323
  transform: string;
6491
6324
  };
6492
6325
  };
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
6326
  width: string;
6576
6327
  outline: string;
6577
6328
  border: number;
@@ -6582,19 +6333,6 @@ declare const theme: {
6582
6333
  paddingX: number;
6583
6334
  height: number;
6584
6335
  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
6336
  _hover: {
6599
6337
  outlineWidth: string;
6600
6338
  outlineColor: string;
@@ -6672,18 +6410,6 @@ declare const theme: {
6672
6410
  transformOrigin: string;
6673
6411
  cursor: string;
6674
6412
  };
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
6413
  }) | undefined;
6688
6414
  sizes?: {
6689
6415
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
package/dist/index.d.ts 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
 
@@ -4333,94 +4339,6 @@ declare const theme: {
4333
4339
  Input: {
4334
4340
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4335
4341
  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
4342
  appearance: string;
4425
4343
  width: string;
4426
4344
  outline: string;
@@ -4432,7 +4350,6 @@ declare const theme: {
4432
4350
  paddingX: number;
4433
4351
  height: number;
4434
4352
  fontSize: string;
4435
- } | {
4436
4353
  _hover: {
4437
4354
  outlineWidth: string;
4438
4355
  outlineColor: string;
@@ -4516,19 +4433,6 @@ declare const theme: {
4516
4433
  transform: string;
4517
4434
  };
4518
4435
  };
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
4436
  };
4533
4437
  element: {
4534
4438
  height: string;
@@ -4545,13 +4449,46 @@ declare const theme: {
4545
4449
  }>;
4546
4450
  } | undefined;
4547
4451
  variants?: {
4548
- [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
4549
- keys: ("group" | "element" | "addon" | "field")[];
4550
- }>;
4452
+ base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4453
+ field: {
4454
+ outlineWidth: string;
4455
+ outlineColor: string;
4456
+ outlineStyle: string;
4457
+ outlineOffset: string;
4458
+ backgroundColor: string;
4459
+ } | {
4460
+ outline: string;
4461
+ outlineColor: string;
4462
+ backgroundColor: string;
4463
+ };
4464
+ };
4465
+ floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4466
+ field: {
4467
+ _hover: {
4468
+ backgroundColor: string;
4469
+ outline: string;
4470
+ outlineColor: string;
4471
+ };
4472
+ _active: {
4473
+ backgroundColor: string;
4474
+ outline: string;
4475
+ outlineColor: string;
4476
+ };
4477
+ _selected: {
4478
+ backgroundColor: string;
4479
+ outline: string;
4480
+ outlineColor: string;
4481
+ };
4482
+ outline: string;
4483
+ outlineColor: string;
4484
+ backgroundColor: string;
4485
+ boxShadow: string;
4486
+ };
4487
+ };
4551
4488
  } | undefined;
4552
4489
  defaultProps?: {
4553
4490
  size?: string | number | undefined;
4554
- variant?: string | number | undefined;
4491
+ variant?: "base" | "floating" | undefined;
4555
4492
  colorScheme?: string | undefined;
4556
4493
  } | undefined;
4557
4494
  parts: ("group" | "element" | "addon" | "field")[];
@@ -5648,94 +5585,6 @@ declare const theme: {
5648
5585
  appearance: string;
5649
5586
  paddingTop: string;
5650
5587
  "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
5588
  width: string;
5740
5589
  outline: string;
5741
5590
  border: number;
@@ -5746,10 +5595,6 @@ declare const theme: {
5746
5595
  paddingX: number;
5747
5596
  height: number;
5748
5597
  fontSize: string;
5749
- } | {
5750
- appearance: string;
5751
- paddingTop: string;
5752
- "option, optgroup": {};
5753
5598
  _hover: {
5754
5599
  outlineWidth: string;
5755
5600
  outlineColor: string;
@@ -5833,18 +5678,6 @@ declare const theme: {
5833
5678
  transform: string;
5834
5679
  };
5835
5680
  };
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
5681
  };
5849
5682
  icon: {
5850
5683
  width: number;
@@ -6490,88 +6323,6 @@ declare const theme: {
6490
6323
  transform: string;
6491
6324
  };
6492
6325
  };
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
6326
  width: string;
6576
6327
  outline: string;
6577
6328
  border: number;
@@ -6582,19 +6333,6 @@ declare const theme: {
6582
6333
  paddingX: number;
6583
6334
  height: number;
6584
6335
  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
6336
  _hover: {
6599
6337
  outlineWidth: string;
6600
6338
  outlineColor: string;
@@ -6672,18 +6410,6 @@ declare const theme: {
6672
6410
  transformOrigin: string;
6673
6411
  cursor: string;
6674
6412
  };
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
6413
  }) | undefined;
6688
6414
  sizes?: {
6689
6415
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
package/dist/index.js CHANGED
@@ -5132,7 +5132,7 @@ var init_ModalHeader = __esm({
5132
5132
  fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
5133
5133
  textAlign: size2 === "lg" ? "center" : "left"
5134
5134
  };
5135
- return /* @__PURE__ */ React85__namespace.default.createElement(react.ModalHeader, { ...props, ref, ...styles3 });
5135
+ return /* @__PURE__ */ React85__namespace.default.createElement(react.ModalHeader, { as: "h1", ...props, ref, ...styles3 });
5136
5136
  }
5137
5137
  );
5138
5138
  }
@@ -14050,6 +14050,7 @@ var init_input2 = __esm({
14050
14050
  init_base_utils();
14051
14051
  init_focus_utils();
14052
14052
  init_surface_utils();
14053
+ init_floating_utils();
14053
14054
  helpers14 = react.createMultiStyleConfigHelpers(inputAnatomy.keys);
14054
14055
  config21 = helpers14.defineMultiStyleConfig({
14055
14056
  baseStyle: (props) => ({
@@ -14065,8 +14066,6 @@ var init_input2 = __esm({
14065
14066
  paddingX: 3,
14066
14067
  height: 8,
14067
14068
  fontSize: "mobile.md",
14068
- ...baseBackground("default", props),
14069
- ...baseBorder("default", props),
14070
14069
  _hover: {
14071
14070
  ...baseBorder("hover", props)
14072
14071
  },
@@ -14115,7 +14114,37 @@ var init_input2 = __esm({
14115
14114
  ...baseText("disabled", props)
14116
14115
  }
14117
14116
  }
14118
- })
14117
+ }),
14118
+ variants: {
14119
+ base: (props) => ({
14120
+ field: {
14121
+ ...baseBackground("default", props),
14122
+ ...baseBorder("default", props)
14123
+ }
14124
+ }),
14125
+ floating: (props) => ({
14126
+ field: {
14127
+ boxShadow: "sm",
14128
+ ...floatingBackground("default", props),
14129
+ ...floatingBorder("default", props),
14130
+ _hover: {
14131
+ ...floatingBorder("hover", props),
14132
+ ...floatingBackground("hover", props)
14133
+ },
14134
+ _active: {
14135
+ ...floatingBorder("active", props),
14136
+ ...floatingBackground("active", props)
14137
+ },
14138
+ _selected: {
14139
+ ...floatingBorder("selected", props),
14140
+ ...floatingBackground("selected", props)
14141
+ }
14142
+ }
14143
+ })
14144
+ },
14145
+ defaultProps: {
14146
+ variant: "base"
14147
+ }
14119
14148
  });
14120
14149
  input_default = config21;
14121
14150
  }
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-MLRF67YM.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-BPDFFQ3U.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "10.1.0",
3
+ "version": "10.2.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/input/Input.tsx CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  } from "@chakra-ui/react";
11
11
  import React, { useId } from "react";
12
12
 
13
- export type InputProps = Omit<ChakraInputProps, "variant" | "size"> & {
13
+ export type InputProps = Omit<ChakraInputProps, "size"> & {
14
14
  /** The input's label */
15
15
  label: string;
16
16
  /** Icon that shows up to the left */
@@ -32,6 +32,12 @@ export type InputProps = Omit<ChakraInputProps, "variant" | "size"> & {
32
32
  * ```tsx
33
33
  * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} />
34
34
  * ```
35
+ *
36
+ * Input has two variants base, and floating.
37
+ *
38
+ * ```tsx
39
+ * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} variant="floating" />
40
+ * ```
35
41
  */
36
42
  export const Input = forwardRef<InputProps, "input">(
37
43
  ({ label, leftIcon, rightIcon, id, size, ...props }, ref) => {
package/src/modal/ModalHeader.tsx CHANGED
@@ -26,6 +26,6 @@ export const ModalHeader = forwardRef<ModalHeaderProps, "header">(
26
26
  ? "center"
27
27
  : ("left" as ChakraModalHeaderProps["textAlign"]),
28
28
  };
29
- return <ChakraModalHeader {...props} ref={ref} {...styles} />;
29
+ return <ChakraModalHeader as={"h1"} {...props} ref={ref} {...styles} />;
30
30
  },
31
31
  );
package/src/theme/components/input.ts CHANGED
@@ -3,6 +3,7 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
3
  import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
4
4
  import { focusVisibleStyles } from "../utils/focus-utils";
5
5
  import { surface } from "../utils/surface-utils";
6
+ import { floatingBackground, floatingBorder } from "../utils/floating-utils";
6
7
 
7
8
  const helpers = createMultiStyleConfigHelpers(parts.keys);
8
9
 
@@ -20,9 +21,6 @@ const config = helpers.defineMultiStyleConfig({
20
21
  paddingX: 3,
21
22
  height: 8,
22
23
  fontSize: "mobile.md",
23
- ...baseBackground("default", props),
24
-
25
- ...baseBorder("default", props),
26
24
  _hover: {
27
25
  ...baseBorder("hover", props),
28
26
  },
@@ -73,6 +71,37 @@ const config = helpers.defineMultiStyleConfig({
73
71
  },
74
72
  },
75
73
  }),
74
+ variants: {
75
+ base: (props) => ({
76
+ field: {
77
+ ...baseBackground("default", props),
78
+ ...baseBorder("default", props),
79
+ },
80
+ }),
81
+ floating: (props) => ({
82
+ field: {
83
+ boxShadow: "sm",
84
+ ...floatingBackground("default", props),
85
+ ...floatingBorder("default", props),
86
+
87
+ _hover: {
88
+ ...floatingBorder("hover", props),
89
+ ...floatingBackground("hover", props),
90
+ },
91
+ _active: {
92
+ ...floatingBorder("active", props),
93
+ ...floatingBackground("active", props),
94
+ },
95
+ _selected: {
96
+ ...floatingBorder("selected", props),
97
+ ...floatingBackground("selected", props),
98
+ },
99
+ },
100
+ }),
101
+ },
102
+ defaultProps: {
103
+ variant: "base",
104
+ },
76
105
  });
77
106
 
78
107
  export default config;