@vygruppen/spor-react 10.0.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 (13) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +16 -0
  3. package/dist/{CountryCodeSelect-PWHXKGPJ.mjs → CountryCodeSelect-UFSVRLDY.mjs} +1 -1
  4. package/dist/{chunk-FQLXMFMW.mjs → chunk-BPDFFQ3U.mjs} +33 -6
  5. package/dist/index.d.mts +44 -318
  6. package/dist/index.d.ts +44 -318
  7. package/dist/index.js +33 -5
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/input/ChoiceChip.tsx +0 -1
  11. package/src/input/Input.tsx +7 -1
  12. package/src/modal/ModalHeader.tsx +1 -1
  13. 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.0.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.13 KB
13
- CJS ⚡️ Build success in 2896ms
14
12
  ESM dist/index.mjs 2.15 KB
15
- ESM dist/CountryCodeSelect-PWHXKGPJ.mjs 1.19 KB
16
- ESM dist/chunk-FQLXMFMW.mjs 415.51 KB
17
- ESM ⚡️ Build success in 2895ms
18
- DTS ⚡️ Build success in 20389ms
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,21 @@
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
+
13
+ ## 10.1.0
14
+
15
+ ### Minor Changes
16
+
17
+ - d63e3c6: ChoiceChip: Fix isChecked bug
18
+
3
19
  ## 10.0.0
4
20
 
5
21
  ### Major Changes
package/dist/{CountryCodeSelect-PWHXKGPJ.mjs → CountryCodeSelect-UFSVRLDY.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-FQLXMFMW.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-FQLXMFMW.mjs → chunk-BPDFFQ3U.mjs} RENAMED
@@ -974,7 +974,6 @@ var ChoiceChip = forwardRef(
974
974
  ({
975
975
  children,
976
976
  icon,
977
- isChecked,
978
977
  isDisabled,
979
978
  size: size2 = "sm",
980
979
  chipType = "choice",
@@ -1780,7 +1779,7 @@ var texts4 = createTexts({
1780
1779
  sv: "Landskod"
1781
1780
  }
1782
1781
  });
1783
- var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-PWHXKGPJ.mjs'));
1782
+ var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-UFSVRLDY.mjs'));
1784
1783
  var Radio = forwardRef((props, ref) => {
1785
1784
  return /* @__PURE__ */ React84__default.createElement(Radio$1, { ...props, ref });
1786
1785
  });
@@ -4359,7 +4358,7 @@ var ModalHeader = forwardRef(
4359
4358
  fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
4360
4359
  textAlign: size2 === "lg" ? "center" : "left"
4361
4360
  };
4362
- return /* @__PURE__ */ React84__default.createElement(ModalHeader$1, { ...props, ref, ...styles3 });
4361
+ return /* @__PURE__ */ React84__default.createElement(ModalHeader$1, { as: "h1", ...props, ref, ...styles3 });
4363
4362
  }
4364
4363
  );
4365
4364
 
@@ -12444,8 +12443,6 @@ var config21 = helpers14.defineMultiStyleConfig({
12444
12443
  paddingX: 3,
12445
12444
  height: 8,
12446
12445
  fontSize: "mobile.md",
12447
- ...baseBackground("default", props),
12448
- ...baseBorder("default", props),
12449
12446
  _hover: {
12450
12447
  ...baseBorder("hover", props)
12451
12448
  },
@@ -12494,7 +12491,37 @@ var config21 = helpers14.defineMultiStyleConfig({
12494
12491
  ...baseText("disabled", props)
12495
12492
  }
12496
12493
  }
12497
- })
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
+ }
12498
12525
  });
12499
12526
  var input_default = config21;
12500
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
@@ -1069,7 +1069,6 @@ var init_ChoiceChip = __esm({
1069
1069
  ({
1070
1070
  children,
1071
1071
  icon,
1072
- isChecked,
1073
1072
  isDisabled,
1074
1073
  size: size2 = "sm",
1075
1074
  chipType = "choice",
@@ -5133,7 +5132,7 @@ var init_ModalHeader = __esm({
5133
5132
  fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
5134
5133
  textAlign: size2 === "lg" ? "center" : "left"
5135
5134
  };
5136
- 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 });
5137
5136
  }
5138
5137
  );
5139
5138
  }
@@ -14051,6 +14050,7 @@ var init_input2 = __esm({
14051
14050
  init_base_utils();
14052
14051
  init_focus_utils();
14053
14052
  init_surface_utils();
14053
+ init_floating_utils();
14054
14054
  helpers14 = react.createMultiStyleConfigHelpers(inputAnatomy.keys);
14055
14055
  config21 = helpers14.defineMultiStyleConfig({
14056
14056
  baseStyle: (props) => ({
@@ -14066,8 +14066,6 @@ var init_input2 = __esm({
14066
14066
  paddingX: 3,
14067
14067
  height: 8,
14068
14068
  fontSize: "mobile.md",
14069
- ...baseBackground("default", props),
14070
- ...baseBorder("default", props),
14071
14069
  _hover: {
14072
14070
  ...baseBorder("hover", props)
14073
14071
  },
@@ -14116,7 +14114,37 @@ var init_input2 = __esm({
14116
14114
  ...baseText("disabled", props)
14117
14115
  }
14118
14116
  }
14119
- })
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
+ }
14120
14148
  });
14121
14149
  input_default = config21;
14122
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-FQLXMFMW.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.0.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/ChoiceChip.tsx CHANGED
@@ -59,7 +59,6 @@ export const ChoiceChip = forwardRef(
59
59
  {
60
60
  children,
61
61
  icon,
62
- isChecked,
63
62
  isDisabled,
64
63
  size = "sm",
65
64
  chipType = "choice",
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;