@vygruppen/spor-react 13.1.3 → 13.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.
- package/.turbo/turbo-build.log +12 -12
- package/.turbo/turbo-postinstall.log +2 -2
- package/CHANGELOG.md +14 -0
- package/dist/index.cjs +377 -80
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +252 -40
- package/dist/index.d.ts +252 -40
- package/dist/index.mjs +375 -81
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/input/ChoiceChip.tsx +133 -71
- package/src/input/FilterChip.tsx +85 -0
- package/src/input/PasswordInput.tsx +1 -1
- package/src/input/index.ts +1 -0
- package/src/popover/index.tsx +9 -3
- package/src/theme/slot-recipes/anatomy.ts +1 -0
- package/src/theme/slot-recipes/choice-chip.ts +77 -49
- package/src/theme/slot-recipes/filter-chip.ts +197 -0
- package/src/theme/slot-recipes/index.ts +3 -1
- package/src/theme/slot-recipes/menu.ts +4 -0
- package/src/theme/slot-recipes/popover.ts +1 -2
- package/src/theme/slot-recipes/table.ts +0 -1
- package/src/tooltip.tsx +13 -6
package/dist/index.mjs
CHANGED
|
@@ -3738,31 +3738,69 @@ var CheckboxGroup = (props) => {
|
|
|
3738
3738
|
const { direction = "row", children, gap = 1, ...rest } = props;
|
|
3739
3739
|
return /* @__PURE__ */ jsx(CheckboxGroup$1, { ...rest, children: /* @__PURE__ */ jsx(Stack, { direction, gap, children }) });
|
|
3740
3740
|
};
|
|
3741
|
+
var ChoiceChipContext = createContext({
|
|
3742
|
+
variant: "core",
|
|
3743
|
+
size: "sm"
|
|
3744
|
+
});
|
|
3745
|
+
var useChoiceChipContext = () => useContext(ChoiceChipContext);
|
|
3741
3746
|
var ChoiceChip = ({
|
|
3742
3747
|
ref,
|
|
3743
|
-
|
|
3744
|
-
icon,
|
|
3745
|
-
onCheckedChange,
|
|
3746
|
-
...rootProps
|
|
3748
|
+
...props
|
|
3747
3749
|
}) => {
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
+
const { children, inputProps, icon, variant, size, css, ...rest } = props;
|
|
3751
|
+
const { variant: contextVariant, size: contextSize } = useChoiceChipContext();
|
|
3752
|
+
const uniqueId = useId();
|
|
3753
|
+
const itemControlId = `radio-card-item-control-${uniqueId}`;
|
|
3754
|
+
const inputHasAriaLabel = (inputProps == null ? void 0 : inputProps["aria-labelledby"]) || (inputProps == null ? void 0 : inputProps["aria-label"]);
|
|
3755
|
+
const finalVariant = variant ?? contextVariant;
|
|
3756
|
+
const finalSize = size ?? contextSize;
|
|
3757
|
+
const recipe = useSlotRecipe({ key: "choiceChip" });
|
|
3758
|
+
const styles = recipe({
|
|
3759
|
+
variant: finalVariant,
|
|
3760
|
+
size: finalSize
|
|
3761
|
+
});
|
|
3762
|
+
return /* @__PURE__ */ jsxs(RadioCard$1.Item, { ...rest, css: { ...css, ...styles.item }, children: [
|
|
3763
|
+
/* @__PURE__ */ jsx(
|
|
3764
|
+
RadioCard$1.ItemHiddenInput,
|
|
3765
|
+
{
|
|
3766
|
+
"aria-labelledby": inputHasAriaLabel ? inputProps == null ? void 0 : inputProps["aria-labelledby"] : itemControlId,
|
|
3767
|
+
ref,
|
|
3768
|
+
...inputProps
|
|
3769
|
+
}
|
|
3770
|
+
),
|
|
3771
|
+
/* @__PURE__ */ jsx(
|
|
3772
|
+
RadioCard$1.ItemControl,
|
|
3773
|
+
{
|
|
3774
|
+
id: itemControlId,
|
|
3775
|
+
"aria-hidden": true,
|
|
3776
|
+
css: styles.itemControl,
|
|
3777
|
+
children: /* @__PURE__ */ jsx(RadioCard$1.ItemContext, { children: ({ checked }) => /* @__PURE__ */ jsxs(RadioCard$1.Label, { css: styles.label, children: [
|
|
3778
|
+
checked ? (icon == null ? void 0 : icon.checked) && /* @__PURE__ */ jsx(Span, { children: icon.checked }) : (icon == null ? void 0 : icon.default) && /* @__PURE__ */ jsx(Span, { children: icon.default }),
|
|
3779
|
+
children
|
|
3780
|
+
] }) })
|
|
3781
|
+
}
|
|
3782
|
+
)
|
|
3783
|
+
] });
|
|
3784
|
+
};
|
|
3785
|
+
var ChoiceChipGroup = ({
|
|
3786
|
+
ref,
|
|
3787
|
+
...props
|
|
3788
|
+
}) => {
|
|
3789
|
+
const { children, variant, size, css, ...rest } = props;
|
|
3790
|
+
const recipe = useSlotRecipe({ key: "choiceChip" });
|
|
3791
|
+
const styles = recipe({ variant, size });
|
|
3792
|
+
return /* @__PURE__ */ jsx(ChoiceChipContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx(
|
|
3793
|
+
RadioCard$1.Root,
|
|
3750
3794
|
{
|
|
3751
|
-
...
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
children
|
|
3756
|
-
/* @__PURE__ */ jsx(CheckboxCard.HiddenInput, { ref }),
|
|
3757
|
-
/* @__PURE__ */ jsx(CheckboxCard.Control, { children: /* @__PURE__ */ jsx(CheckboxCard.Content, { children: /* @__PURE__ */ jsxs(CheckboxCard.Label, { children: [
|
|
3758
|
-
icon && /* @__PURE__ */ jsx(Span, { width: "24px", children: checked ? icon.checked : icon.default }),
|
|
3759
|
-
rootProps.chipType !== "icon" && children,
|
|
3760
|
-
rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsx(CloseOutline24Icon, {})
|
|
3761
|
-
] }) }) })
|
|
3762
|
-
] }) })
|
|
3795
|
+
css: { ...styles.root, ...css },
|
|
3796
|
+
ref,
|
|
3797
|
+
variant,
|
|
3798
|
+
...rest,
|
|
3799
|
+
children
|
|
3763
3800
|
}
|
|
3764
|
-
);
|
|
3801
|
+
) });
|
|
3765
3802
|
};
|
|
3803
|
+
var ChoiceChipLabel = RadioCard$1.Label;
|
|
3766
3804
|
var Popover = ({
|
|
3767
3805
|
ref,
|
|
3768
3806
|
children,
|
|
@@ -4019,6 +4057,31 @@ var FieldsetLegend = Fieldset$1.Legend;
|
|
|
4019
4057
|
var FieldsetContent = Fieldset$1.Content;
|
|
4020
4058
|
var FieldsetHelperText = Fieldset$1.HelperText;
|
|
4021
4059
|
var FieldsetErrorText = Fieldset$1.ErrorText;
|
|
4060
|
+
var FilterChip = ({
|
|
4061
|
+
ref,
|
|
4062
|
+
children,
|
|
4063
|
+
icon,
|
|
4064
|
+
onCheckedChange,
|
|
4065
|
+
...rootProps
|
|
4066
|
+
}) => {
|
|
4067
|
+
return /* @__PURE__ */ jsx(
|
|
4068
|
+
CheckboxCard.Root,
|
|
4069
|
+
{
|
|
4070
|
+
...rootProps,
|
|
4071
|
+
...onCheckedChange && {
|
|
4072
|
+
onCheckedChange: (details) => onCheckedChange(!!details.checked)
|
|
4073
|
+
},
|
|
4074
|
+
children: /* @__PURE__ */ jsx(CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4075
|
+
/* @__PURE__ */ jsx(CheckboxCard.HiddenInput, { ref }),
|
|
4076
|
+
/* @__PURE__ */ jsx(CheckboxCard.Control, { children: /* @__PURE__ */ jsx(CheckboxCard.Content, { children: /* @__PURE__ */ jsxs(CheckboxCard.Label, { children: [
|
|
4077
|
+
checked ? (icon == null ? void 0 : icon.checked) && /* @__PURE__ */ jsx(Span, { children: icon.checked }) : (icon == null ? void 0 : icon.default) && /* @__PURE__ */ jsx(Span, { children: icon.default }),
|
|
4078
|
+
rootProps.chipType !== "icon" && children,
|
|
4079
|
+
rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsx(CloseOutline24Icon, {})
|
|
4080
|
+
] }) }) })
|
|
4081
|
+
] }) })
|
|
4082
|
+
}
|
|
4083
|
+
);
|
|
4084
|
+
};
|
|
4022
4085
|
var InputChip = ({
|
|
4023
4086
|
startIcon,
|
|
4024
4087
|
endIcon,
|
|
@@ -4581,7 +4644,7 @@ var PasswordInput = ({
|
|
|
4581
4644
|
Input,
|
|
4582
4645
|
{
|
|
4583
4646
|
ref,
|
|
4584
|
-
startElement
|
|
4647
|
+
startElement,
|
|
4585
4648
|
label,
|
|
4586
4649
|
type: visible ? "text" : "password",
|
|
4587
4650
|
endElement: /* @__PURE__ */ jsx(
|
|
@@ -6376,7 +6439,16 @@ var PopoverTrigger = ({
|
|
|
6376
6439
|
...props
|
|
6377
6440
|
}) => {
|
|
6378
6441
|
const isStringChild = typeof children === "string";
|
|
6379
|
-
return /* @__PURE__ */ jsx(
|
|
6442
|
+
return /* @__PURE__ */ jsx(
|
|
6443
|
+
Popover$1.Trigger,
|
|
6444
|
+
{
|
|
6445
|
+
ref,
|
|
6446
|
+
asChild: !isStringChild,
|
|
6447
|
+
width: isStringChild ? void 0 : "fit-content",
|
|
6448
|
+
...props,
|
|
6449
|
+
children: isStringChild ? children : /* @__PURE__ */ jsx(Box, { children })
|
|
6450
|
+
}
|
|
6451
|
+
);
|
|
6380
6452
|
};
|
|
6381
6453
|
var PopoverContent = ({
|
|
6382
6454
|
ref,
|
|
@@ -6394,14 +6466,14 @@ var PopoverContent = ({
|
|
|
6394
6466
|
}, [showCloseButton, open]);
|
|
6395
6467
|
return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, { ref, ...props, children: [
|
|
6396
6468
|
/* @__PURE__ */ jsx(Popover$1.Arrow, {}),
|
|
6469
|
+
/* @__PURE__ */ jsx(Popover$1.Body, { ...props, children }),
|
|
6397
6470
|
showCloseButton && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Popover$1.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
6398
6471
|
CloseButton,
|
|
6399
6472
|
{
|
|
6400
6473
|
className: colorMode === "dark" ? "light" : "dark",
|
|
6401
6474
|
ref: closeButtonRef
|
|
6402
6475
|
}
|
|
6403
|
-
) }) })
|
|
6404
|
-
/* @__PURE__ */ jsx(Popover$1.Body, { ...props, children })
|
|
6476
|
+
) }) })
|
|
6405
6477
|
] }) }) });
|
|
6406
6478
|
};
|
|
6407
6479
|
var ProgressDot = ({ isActive }) => {
|
|
@@ -7804,7 +7876,8 @@ var radioCardAnatomy = createAnatomy("radio-card").parts(
|
|
|
7804
7876
|
"label",
|
|
7805
7877
|
"itemText",
|
|
7806
7878
|
"itemDescription",
|
|
7807
|
-
"itemContent"
|
|
7879
|
+
"itemContent",
|
|
7880
|
+
"itemControl"
|
|
7808
7881
|
);
|
|
7809
7882
|
var radioAnatomy = createAnatomy("radio").parts(
|
|
7810
7883
|
"root",
|
|
@@ -8585,38 +8658,30 @@ var checkboxSlotRecipe = defineSlotRecipe({
|
|
|
8585
8658
|
}
|
|
8586
8659
|
});
|
|
8587
8660
|
var choiceChipSlotRecipe = defineSlotRecipe({
|
|
8588
|
-
|
|
8589
|
-
|
|
8661
|
+
className: "spor-choice-chip",
|
|
8662
|
+
slots: radioCardAnatomy.keys(),
|
|
8590
8663
|
base: {
|
|
8591
8664
|
root: {
|
|
8592
|
-
display: "
|
|
8593
|
-
|
|
8594
|
-
|
|
8595
|
-
|
|
8665
|
+
display: "flex",
|
|
8666
|
+
flexDirection: "row",
|
|
8667
|
+
gap: "1",
|
|
8668
|
+
width: "fit-content"
|
|
8669
|
+
},
|
|
8670
|
+
item: {
|
|
8671
|
+
display: "flex-inline",
|
|
8596
8672
|
transitionProperty: "all",
|
|
8597
|
-
borderRadius: "xl",
|
|
8598
8673
|
transitionDuration: "fast",
|
|
8599
|
-
paddingInlineStart: "2",
|
|
8600
|
-
paddingInlineEnd: "2",
|
|
8601
|
-
outline: "1px solid",
|
|
8602
|
-
outlineColor: "outline.core",
|
|
8603
8674
|
_checked: {
|
|
8604
|
-
backgroundColor: "surface.brand",
|
|
8605
|
-
borderRadius: "sm",
|
|
8606
8675
|
outline: "none",
|
|
8607
|
-
|
|
8676
|
+
_focusVisible: {
|
|
8677
|
+
outline: "2px solid",
|
|
8678
|
+
outlineColor: "outline.focus",
|
|
8679
|
+
outlineOffset: "1px"
|
|
8680
|
+
},
|
|
8608
8681
|
_hover: {
|
|
8609
|
-
|
|
8610
|
-
_active: {
|
|
8611
|
-
backgroundColor: "surface.brand.active"
|
|
8612
|
-
}
|
|
8682
|
+
outline: "none"
|
|
8613
8683
|
}
|
|
8614
8684
|
},
|
|
8615
|
-
_focusVisible: {
|
|
8616
|
-
outline: "2px solid",
|
|
8617
|
-
outlineColor: "outline.focus",
|
|
8618
|
-
outlineOffset: "1px"
|
|
8619
|
-
},
|
|
8620
8685
|
_disabled: {
|
|
8621
8686
|
pointerEvents: "none",
|
|
8622
8687
|
boxShadow: "none",
|
|
@@ -8641,32 +8706,44 @@ var choiceChipSlotRecipe = defineSlotRecipe({
|
|
|
8641
8706
|
}
|
|
8642
8707
|
}
|
|
8643
8708
|
},
|
|
8709
|
+
itemControl: {
|
|
8710
|
+
display: "flex",
|
|
8711
|
+
alignItems: "center",
|
|
8712
|
+
justifyContent: "center"
|
|
8713
|
+
},
|
|
8644
8714
|
label: {
|
|
8645
8715
|
display: "flex",
|
|
8646
8716
|
alignItems: "center",
|
|
8717
|
+
justifyContent: "center",
|
|
8647
8718
|
gap: "1"
|
|
8648
8719
|
}
|
|
8649
8720
|
},
|
|
8650
8721
|
variants: {
|
|
8651
8722
|
size: {
|
|
8652
8723
|
xs: {
|
|
8653
|
-
|
|
8724
|
+
item: {
|
|
8725
|
+
borderRadius: "xl",
|
|
8654
8726
|
_checked: {
|
|
8655
|
-
borderRadius: "
|
|
8656
|
-
}
|
|
8727
|
+
borderRadius: "9px"
|
|
8728
|
+
}
|
|
8729
|
+
},
|
|
8730
|
+
itemControl: {
|
|
8657
8731
|
height: 5,
|
|
8658
8732
|
paddingX: 1.5
|
|
8659
8733
|
},
|
|
8660
8734
|
label: {
|
|
8661
8735
|
fontSize: { base: "mobile.sm", sm: "desktop.sm" },
|
|
8662
|
-
fontWeight: "
|
|
8736
|
+
fontWeight: "regular"
|
|
8663
8737
|
}
|
|
8664
8738
|
},
|
|
8665
8739
|
sm: {
|
|
8666
|
-
|
|
8740
|
+
item: {
|
|
8741
|
+
borderRadius: "xl",
|
|
8667
8742
|
_checked: {
|
|
8668
8743
|
borderRadius: "sm"
|
|
8669
|
-
}
|
|
8744
|
+
}
|
|
8745
|
+
},
|
|
8746
|
+
itemControl: {
|
|
8670
8747
|
height: 6,
|
|
8671
8748
|
paddingX: 2
|
|
8672
8749
|
},
|
|
@@ -8676,10 +8753,13 @@ var choiceChipSlotRecipe = defineSlotRecipe({
|
|
|
8676
8753
|
}
|
|
8677
8754
|
},
|
|
8678
8755
|
md: {
|
|
8679
|
-
|
|
8756
|
+
item: {
|
|
8757
|
+
borderRadius: "xl",
|
|
8680
8758
|
_checked: {
|
|
8681
8759
|
borderRadius: "sm"
|
|
8682
|
-
}
|
|
8760
|
+
}
|
|
8761
|
+
},
|
|
8762
|
+
itemControl: {
|
|
8683
8763
|
height: 7,
|
|
8684
8764
|
paddingX: 2
|
|
8685
8765
|
},
|
|
@@ -8689,10 +8769,13 @@ var choiceChipSlotRecipe = defineSlotRecipe({
|
|
|
8689
8769
|
}
|
|
8690
8770
|
},
|
|
8691
8771
|
lg: {
|
|
8692
|
-
|
|
8772
|
+
item: {
|
|
8773
|
+
borderRadius: "xl",
|
|
8693
8774
|
_checked: {
|
|
8694
8775
|
borderRadius: "md"
|
|
8695
|
-
}
|
|
8776
|
+
}
|
|
8777
|
+
},
|
|
8778
|
+
itemControl: {
|
|
8696
8779
|
height: 8,
|
|
8697
8780
|
paddingX: 3
|
|
8698
8781
|
},
|
|
@@ -8704,9 +8787,18 @@ var choiceChipSlotRecipe = defineSlotRecipe({
|
|
|
8704
8787
|
},
|
|
8705
8788
|
variant: {
|
|
8706
8789
|
core: {
|
|
8707
|
-
|
|
8708
|
-
|
|
8709
|
-
|
|
8790
|
+
itemControl: {
|
|
8791
|
+
_checked: {
|
|
8792
|
+
backgroundColor: "surface.brand",
|
|
8793
|
+
color: "text.brand",
|
|
8794
|
+
outline: "none",
|
|
8795
|
+
_hover: {
|
|
8796
|
+
backgroundColor: "surface.brand.hover",
|
|
8797
|
+
_active: {
|
|
8798
|
+
backgroundColor: "surface.brand.active"
|
|
8799
|
+
}
|
|
8800
|
+
}
|
|
8801
|
+
},
|
|
8710
8802
|
_hover: {
|
|
8711
8803
|
outline: "2px solid",
|
|
8712
8804
|
outlineColor: "outline.core.hover",
|
|
@@ -8719,10 +8811,22 @@ var choiceChipSlotRecipe = defineSlotRecipe({
|
|
|
8719
8811
|
}
|
|
8720
8812
|
},
|
|
8721
8813
|
accent: {
|
|
8722
|
-
|
|
8814
|
+
itemControl: {
|
|
8723
8815
|
backgroundColor: "surface.accent",
|
|
8724
8816
|
color: "text.accent",
|
|
8725
8817
|
outline: "none",
|
|
8818
|
+
border: "none",
|
|
8819
|
+
_checked: {
|
|
8820
|
+
backgroundColor: "surface.brand",
|
|
8821
|
+
color: "text.brand",
|
|
8822
|
+
outline: "none",
|
|
8823
|
+
_hover: {
|
|
8824
|
+
backgroundColor: "surface.brand.hover",
|
|
8825
|
+
_active: {
|
|
8826
|
+
backgroundColor: "surface.brand.active"
|
|
8827
|
+
}
|
|
8828
|
+
}
|
|
8829
|
+
},
|
|
8726
8830
|
_hover: {
|
|
8727
8831
|
backgroundColor: "surface.accent.hover",
|
|
8728
8832
|
_active: {
|
|
@@ -8732,12 +8836,23 @@ var choiceChipSlotRecipe = defineSlotRecipe({
|
|
|
8732
8836
|
}
|
|
8733
8837
|
},
|
|
8734
8838
|
floating: {
|
|
8735
|
-
|
|
8839
|
+
itemControl: {
|
|
8736
8840
|
backgroundColor: "surface.floating",
|
|
8737
8841
|
outline: "1px solid",
|
|
8738
8842
|
outlineColor: "outline.floating",
|
|
8739
8843
|
color: "text.floating",
|
|
8740
8844
|
boxShadow: "sm",
|
|
8845
|
+
_checked: {
|
|
8846
|
+
backgroundColor: "surface.brand",
|
|
8847
|
+
color: "text.brand",
|
|
8848
|
+
outline: "none",
|
|
8849
|
+
_hover: {
|
|
8850
|
+
backgroundColor: "surface.brand.hover",
|
|
8851
|
+
_active: {
|
|
8852
|
+
backgroundColor: "surface.brand.active"
|
|
8853
|
+
}
|
|
8854
|
+
}
|
|
8855
|
+
},
|
|
8741
8856
|
_hover: {
|
|
8742
8857
|
backgroundColor: "surface.floating.hover",
|
|
8743
8858
|
outline: "1px solid",
|
|
@@ -8750,17 +8865,11 @@ var choiceChipSlotRecipe = defineSlotRecipe({
|
|
|
8750
8865
|
}
|
|
8751
8866
|
}
|
|
8752
8867
|
}
|
|
8753
|
-
},
|
|
8754
|
-
chipType: {
|
|
8755
|
-
icon: {},
|
|
8756
|
-
choice: {},
|
|
8757
|
-
filter: {}
|
|
8758
8868
|
}
|
|
8759
8869
|
},
|
|
8760
8870
|
defaultVariants: {
|
|
8761
8871
|
size: "sm",
|
|
8762
|
-
variant: "core"
|
|
8763
|
-
chipType: "choice"
|
|
8872
|
+
variant: "core"
|
|
8764
8873
|
}
|
|
8765
8874
|
});
|
|
8766
8875
|
var collapsibleSlotRecipe = defineSlotRecipe({
|
|
@@ -9482,6 +9591,186 @@ var fieldSlotRecipe = defineSlotRecipe({
|
|
|
9482
9591
|
}
|
|
9483
9592
|
}
|
|
9484
9593
|
});
|
|
9594
|
+
var filterChipSlotRecipe = defineSlotRecipe({
|
|
9595
|
+
slots: checkboxCardAnatomy.keys(),
|
|
9596
|
+
className: "chakra-checkbox-card",
|
|
9597
|
+
base: {
|
|
9598
|
+
root: {
|
|
9599
|
+
display: "inline-flex",
|
|
9600
|
+
alignItems: "center",
|
|
9601
|
+
boxAlign: "center",
|
|
9602
|
+
cursor: "pointer",
|
|
9603
|
+
transitionProperty: "all",
|
|
9604
|
+
borderRadius: "xl",
|
|
9605
|
+
transitionDuration: "fast",
|
|
9606
|
+
paddingInlineStart: "2",
|
|
9607
|
+
paddingInlineEnd: "2",
|
|
9608
|
+
outline: "1px solid",
|
|
9609
|
+
outlineColor: "outline.core",
|
|
9610
|
+
_checked: {
|
|
9611
|
+
backgroundColor: "surface.brand",
|
|
9612
|
+
borderRadius: "sm",
|
|
9613
|
+
outline: "none",
|
|
9614
|
+
color: "text.brand",
|
|
9615
|
+
_hover: {
|
|
9616
|
+
outline: "none",
|
|
9617
|
+
backgroundColor: "surface.brand.hover",
|
|
9618
|
+
_active: {
|
|
9619
|
+
backgroundColor: "surface.brand.active"
|
|
9620
|
+
}
|
|
9621
|
+
}
|
|
9622
|
+
},
|
|
9623
|
+
_focusVisible: {
|
|
9624
|
+
outline: "2px solid",
|
|
9625
|
+
outlineColor: "outline.focus",
|
|
9626
|
+
outlineOffset: "1px"
|
|
9627
|
+
},
|
|
9628
|
+
_disabled: {
|
|
9629
|
+
pointerEvents: "none",
|
|
9630
|
+
boxShadow: "none",
|
|
9631
|
+
backgroundColor: "surface.disabled",
|
|
9632
|
+
color: "text.disabled",
|
|
9633
|
+
outline: "none",
|
|
9634
|
+
_hover: {
|
|
9635
|
+
backgroundColor: "surface.disabled",
|
|
9636
|
+
boxShadow: "none",
|
|
9637
|
+
color: "text.disabled"
|
|
9638
|
+
},
|
|
9639
|
+
_checked: {
|
|
9640
|
+
cursor: "not-allowed",
|
|
9641
|
+
boxShadow: "none",
|
|
9642
|
+
color: "text.disabled",
|
|
9643
|
+
backgroundColor: "surface.disabled",
|
|
9644
|
+
_hover: {
|
|
9645
|
+
backgroundColor: "surface.disabled",
|
|
9646
|
+
boxShadow: "none",
|
|
9647
|
+
color: "text.disabled"
|
|
9648
|
+
}
|
|
9649
|
+
}
|
|
9650
|
+
}
|
|
9651
|
+
},
|
|
9652
|
+
label: {
|
|
9653
|
+
display: "flex",
|
|
9654
|
+
alignItems: "center",
|
|
9655
|
+
gap: "1"
|
|
9656
|
+
}
|
|
9657
|
+
},
|
|
9658
|
+
variants: {
|
|
9659
|
+
size: {
|
|
9660
|
+
xs: {
|
|
9661
|
+
root: {
|
|
9662
|
+
_checked: {
|
|
9663
|
+
borderRadius: "0.563rem"
|
|
9664
|
+
},
|
|
9665
|
+
height: 5,
|
|
9666
|
+
paddingX: 1.5
|
|
9667
|
+
},
|
|
9668
|
+
label: {
|
|
9669
|
+
fontSize: { base: "mobile.sm", sm: "desktop.sm" },
|
|
9670
|
+
fontWeight: "medium"
|
|
9671
|
+
}
|
|
9672
|
+
},
|
|
9673
|
+
sm: {
|
|
9674
|
+
root: {
|
|
9675
|
+
_checked: {
|
|
9676
|
+
borderRadius: "sm"
|
|
9677
|
+
},
|
|
9678
|
+
height: 6,
|
|
9679
|
+
paddingX: 2
|
|
9680
|
+
},
|
|
9681
|
+
label: {
|
|
9682
|
+
fontSize: { base: "mobile.sm", sm: "desktop.sm" },
|
|
9683
|
+
fontWeight: "bold"
|
|
9684
|
+
}
|
|
9685
|
+
},
|
|
9686
|
+
md: {
|
|
9687
|
+
root: {
|
|
9688
|
+
_checked: {
|
|
9689
|
+
borderRadius: "sm"
|
|
9690
|
+
},
|
|
9691
|
+
height: 7,
|
|
9692
|
+
paddingX: 2
|
|
9693
|
+
},
|
|
9694
|
+
label: {
|
|
9695
|
+
fontSize: { base: "mobile.md", sm: "desktop.md" },
|
|
9696
|
+
fontWeight: "bold"
|
|
9697
|
+
}
|
|
9698
|
+
},
|
|
9699
|
+
lg: {
|
|
9700
|
+
root: {
|
|
9701
|
+
_checked: {
|
|
9702
|
+
borderRadius: "md"
|
|
9703
|
+
},
|
|
9704
|
+
height: 8,
|
|
9705
|
+
paddingX: 3
|
|
9706
|
+
},
|
|
9707
|
+
label: {
|
|
9708
|
+
fontSize: { base: "mobile.md", sm: "desktop.md" },
|
|
9709
|
+
fontWeight: "bold"
|
|
9710
|
+
}
|
|
9711
|
+
}
|
|
9712
|
+
},
|
|
9713
|
+
variant: {
|
|
9714
|
+
core: {
|
|
9715
|
+
root: {
|
|
9716
|
+
color: "text.core",
|
|
9717
|
+
outlineColor: "outline.core",
|
|
9718
|
+
_hover: {
|
|
9719
|
+
outline: "2px solid",
|
|
9720
|
+
outlineColor: "outline.core.hover",
|
|
9721
|
+
_active: {
|
|
9722
|
+
outline: "1px solid",
|
|
9723
|
+
outlineColor: "outline.core",
|
|
9724
|
+
backgroundColor: "surface.core.active"
|
|
9725
|
+
}
|
|
9726
|
+
}
|
|
9727
|
+
}
|
|
9728
|
+
},
|
|
9729
|
+
accent: {
|
|
9730
|
+
root: {
|
|
9731
|
+
backgroundColor: "surface.accent",
|
|
9732
|
+
color: "text.accent",
|
|
9733
|
+
outline: "none",
|
|
9734
|
+
_hover: {
|
|
9735
|
+
backgroundColor: "surface.accent.hover",
|
|
9736
|
+
_active: {
|
|
9737
|
+
backgroundColor: "surface.accent.active"
|
|
9738
|
+
}
|
|
9739
|
+
}
|
|
9740
|
+
}
|
|
9741
|
+
},
|
|
9742
|
+
floating: {
|
|
9743
|
+
root: {
|
|
9744
|
+
backgroundColor: "surface.floating",
|
|
9745
|
+
outline: "1px solid",
|
|
9746
|
+
outlineColor: "outline.floating",
|
|
9747
|
+
color: "text.floating",
|
|
9748
|
+
boxShadow: "sm",
|
|
9749
|
+
_hover: {
|
|
9750
|
+
backgroundColor: "surface.floating.hover",
|
|
9751
|
+
outline: "1px solid",
|
|
9752
|
+
outlineColor: "outline.floating.hover",
|
|
9753
|
+
_active: {
|
|
9754
|
+
backgroundColor: "surface.floating.active",
|
|
9755
|
+
outline: "1px solid",
|
|
9756
|
+
outlineColor: "outline.floating"
|
|
9757
|
+
}
|
|
9758
|
+
}
|
|
9759
|
+
}
|
|
9760
|
+
}
|
|
9761
|
+
},
|
|
9762
|
+
chipType: {
|
|
9763
|
+
icon: {},
|
|
9764
|
+
choice: {},
|
|
9765
|
+
filter: {}
|
|
9766
|
+
}
|
|
9767
|
+
},
|
|
9768
|
+
defaultVariants: {
|
|
9769
|
+
size: "sm",
|
|
9770
|
+
variant: "core",
|
|
9771
|
+
chipType: "choice"
|
|
9772
|
+
}
|
|
9773
|
+
});
|
|
9485
9774
|
var floatingActionButtonSlotRecipe = defineSlotRecipe({
|
|
9486
9775
|
slots: floatingActionButtonAnatomy.keys(),
|
|
9487
9776
|
className: "spor-floating-action-button",
|
|
@@ -10361,6 +10650,7 @@ var menuSlotRecipe = defineSlotRecipe({
|
|
|
10361
10650
|
display: "flex",
|
|
10362
10651
|
justifyContent: "space-between",
|
|
10363
10652
|
gap: 1.5,
|
|
10653
|
+
cursor: "pointer",
|
|
10364
10654
|
_hover: {
|
|
10365
10655
|
backgroundColor: "surface.accent.hover"
|
|
10366
10656
|
},
|
|
@@ -10388,19 +10678,22 @@ var menuSlotRecipe = defineSlotRecipe({
|
|
|
10388
10678
|
radioItem: {
|
|
10389
10679
|
display: "flex",
|
|
10390
10680
|
justifyContent: "space-between",
|
|
10391
|
-
gap: 2
|
|
10681
|
+
gap: 2,
|
|
10682
|
+
cursor: "pointer"
|
|
10392
10683
|
},
|
|
10393
10684
|
triggerItem: {
|
|
10394
10685
|
display: "flex",
|
|
10395
10686
|
justifyContent: "space-between",
|
|
10396
10687
|
gap: 1.5,
|
|
10397
|
-
alignItems: "center"
|
|
10688
|
+
alignItems: "center",
|
|
10689
|
+
cursor: "pointer"
|
|
10398
10690
|
},
|
|
10399
10691
|
checkboxItem: {
|
|
10400
10692
|
display: "flex",
|
|
10401
10693
|
gap: 2,
|
|
10402
10694
|
alignItems: "center",
|
|
10403
|
-
width: "full"
|
|
10695
|
+
width: "full",
|
|
10696
|
+
cursor: "pointer"
|
|
10404
10697
|
}
|
|
10405
10698
|
},
|
|
10406
10699
|
variants: {
|
|
@@ -10598,7 +10891,7 @@ var popoverSlotRecipe = defineSlotRecipe({
|
|
|
10598
10891
|
content: {
|
|
10599
10892
|
position: "relative",
|
|
10600
10893
|
display: "flex",
|
|
10601
|
-
flexDirection: "row
|
|
10894
|
+
flexDirection: "row",
|
|
10602
10895
|
color: "text.brand",
|
|
10603
10896
|
gap: "0.625rem",
|
|
10604
10897
|
padding: "0.563rem 0.75rem",
|
|
@@ -11383,8 +11676,7 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
11383
11676
|
cell: {
|
|
11384
11677
|
...numericStyles,
|
|
11385
11678
|
paddingX: 1.5,
|
|
11386
|
-
paddingY: 1
|
|
11387
|
-
width: "100%"
|
|
11679
|
+
paddingY: 1
|
|
11388
11680
|
},
|
|
11389
11681
|
footer: {
|
|
11390
11682
|
fontWeight: "medium"
|
|
@@ -11791,11 +12083,12 @@ var slotRecipes = {
|
|
|
11791
12083
|
tabs: tabsSlotRecipe,
|
|
11792
12084
|
travelTag: travelTagSlotRecipe,
|
|
11793
12085
|
toast: toastSlotRecipe,
|
|
11794
|
-
checkboxCard:
|
|
12086
|
+
checkboxCard: filterChipSlotRecipe,
|
|
11795
12087
|
collapsible: collapsibleSlotRecipe,
|
|
11796
12088
|
tooltip: popoverSlotRecipe,
|
|
11797
12089
|
tag: inputChipSlotRecipe,
|
|
11798
|
-
menu: menuSlotRecipe
|
|
12090
|
+
menu: menuSlotRecipe,
|
|
12091
|
+
choiceChip: choiceChipSlotRecipe
|
|
11799
12092
|
};
|
|
11800
12093
|
var animations = defineTokens.animations({
|
|
11801
12094
|
spin: {
|
|
@@ -12629,19 +12922,20 @@ var TooltipTrigger = ({
|
|
|
12629
12922
|
...props
|
|
12630
12923
|
}) => {
|
|
12631
12924
|
const isStringChild = typeof children === "string";
|
|
12632
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
|
|
12925
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { ref, asChild: !isStringChild, ...props, children: isStringChild ? children : /* @__PURE__ */ jsx(Box, { width: "fit-content", children }) });
|
|
12633
12926
|
};
|
|
12634
12927
|
var TooltipContent = ({
|
|
12635
12928
|
ref,
|
|
12636
12929
|
children,
|
|
12930
|
+
showArrow = false,
|
|
12637
12931
|
...props
|
|
12638
12932
|
}) => {
|
|
12639
12933
|
return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip$1.Content, { ref, ...props, children: [
|
|
12640
|
-
/* @__PURE__ */ jsx(Tooltip$1.Arrow, {}),
|
|
12641
|
-
|
|
12934
|
+
showArrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, { children: /* @__PURE__ */ jsx(Tooltip$1.ArrowTip, {}) }),
|
|
12935
|
+
children
|
|
12642
12936
|
] }) }) });
|
|
12643
12937
|
};
|
|
12644
12938
|
|
|
12645
|
-
export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, InputChip, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, TableBody, TableColumnHeader, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };
|
|
12939
|
+
export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, ChoiceChipGroup, ChoiceChipLabel, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FilterChip, FloatingActionButton, Heading, IconButton, InfoTag, Input, InputChip, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, TableBody, TableColumnHeader, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };
|
|
12646
12940
|
//# sourceMappingURL=out.js.map
|
|
12647
12941
|
//# sourceMappingURL=index.mjs.map
|