@spothero/ui 25.1.6 → 25.2.0-beta.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/dist/components/Accordion/styles/index.d.ts +93 -0
- package/dist/components/RefreshedInput/Select/styles/index.d.ts +73 -0
- package/dist/components/Select/styles/index.d.ts +5 -5
- package/dist/index.cjs.js +88 -34
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +85 -35
- package/dist/index.esm.js.map +1 -1
- package/dist/theme/base/breakpoints.d.ts +4 -4
- package/dist/theme/base/colors.d.ts +13 -13
- package/dist/theme/base/notifications.d.ts +36 -36
- package/dist/theme/base/typography.d.ts +7 -7
- package/dist/theme/base/zindices.d.ts +13 -13
- package/package.json +4 -4
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
export declare const accordionTheme: {
|
|
2
|
+
baseStyle?: {
|
|
3
|
+
icon: {
|
|
4
|
+
color: string;
|
|
5
|
+
};
|
|
6
|
+
button: {
|
|
7
|
+
display: string;
|
|
8
|
+
gridGap: number;
|
|
9
|
+
alignItems: string;
|
|
10
|
+
fontSize: string;
|
|
11
|
+
fontWeight: string;
|
|
12
|
+
_hover: {
|
|
13
|
+
backgroundColor: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
container: {
|
|
17
|
+
borderColor: string;
|
|
18
|
+
};
|
|
19
|
+
} | undefined;
|
|
20
|
+
sizes?: {
|
|
21
|
+
[key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
|
|
22
|
+
keys: ("container" | "button" | "root" | "panel" | "icon")[];
|
|
23
|
+
}>;
|
|
24
|
+
} | undefined;
|
|
25
|
+
variants?: {
|
|
26
|
+
lined: {
|
|
27
|
+
button: {
|
|
28
|
+
px: number;
|
|
29
|
+
py: number;
|
|
30
|
+
};
|
|
31
|
+
container: {
|
|
32
|
+
borderTopWidth: number;
|
|
33
|
+
_last: {
|
|
34
|
+
borderBottomWidth: number;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
panel: {
|
|
38
|
+
px: number;
|
|
39
|
+
py: number;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
contained: {
|
|
43
|
+
button: {
|
|
44
|
+
px: number;
|
|
45
|
+
py: number;
|
|
46
|
+
};
|
|
47
|
+
container: {
|
|
48
|
+
borderLeftWidth: number;
|
|
49
|
+
borderRightWidth: number;
|
|
50
|
+
_first: {
|
|
51
|
+
borderTopLeftRadius: number;
|
|
52
|
+
borderTopRightRadius: number;
|
|
53
|
+
};
|
|
54
|
+
_last: {
|
|
55
|
+
borderBottomLeftRadius: number;
|
|
56
|
+
borderBottomRightRadius: number;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
panel: {
|
|
60
|
+
p: number;
|
|
61
|
+
borderColor: string;
|
|
62
|
+
borderTopWidth: number;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
unstyled: {
|
|
66
|
+
icon: {
|
|
67
|
+
color: string;
|
|
68
|
+
};
|
|
69
|
+
button: {
|
|
70
|
+
display: string;
|
|
71
|
+
alignItems: string;
|
|
72
|
+
fontSize: string;
|
|
73
|
+
fontWeight: string;
|
|
74
|
+
_hover: {
|
|
75
|
+
backgroundColor: string;
|
|
76
|
+
};
|
|
77
|
+
paddingTop: string;
|
|
78
|
+
paddingBottom: string;
|
|
79
|
+
};
|
|
80
|
+
container: {
|
|
81
|
+
borderColor: string;
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
} | undefined;
|
|
85
|
+
defaultProps?: {
|
|
86
|
+
size?: string | number | undefined;
|
|
87
|
+
variant?: "lined" | "contained" | "unstyled" | undefined;
|
|
88
|
+
colorScheme?: string | undefined;
|
|
89
|
+
} | undefined;
|
|
90
|
+
parts: ("container" | "button" | "root" | "panel" | "icon")[];
|
|
91
|
+
};
|
|
92
|
+
export declare const theme: Record<string, any>;
|
|
93
|
+
export default theme;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
export declare const selectTheme: {
|
|
2
|
+
baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
|
|
3
|
+
keys: ("icon" | "field")[];
|
|
4
|
+
}> | undefined;
|
|
5
|
+
sizes?: {
|
|
6
|
+
[key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
|
|
7
|
+
keys: ("icon" | "field")[];
|
|
8
|
+
}>;
|
|
9
|
+
} | undefined;
|
|
10
|
+
variants?: {
|
|
11
|
+
refreshed: {
|
|
12
|
+
field: {
|
|
13
|
+
height: string;
|
|
14
|
+
paddingTop: number;
|
|
15
|
+
paddingBottom: number;
|
|
16
|
+
border: string;
|
|
17
|
+
borderColor: string;
|
|
18
|
+
bg: string;
|
|
19
|
+
_hover: {
|
|
20
|
+
borderColor: string;
|
|
21
|
+
};
|
|
22
|
+
_readOnly: {
|
|
23
|
+
boxShadow: string;
|
|
24
|
+
userSelect: string;
|
|
25
|
+
};
|
|
26
|
+
_disabled: {
|
|
27
|
+
opacity: number;
|
|
28
|
+
cursor: string;
|
|
29
|
+
};
|
|
30
|
+
_invalid: {
|
|
31
|
+
borderColor: string;
|
|
32
|
+
boxShadow: (t: any) => string;
|
|
33
|
+
};
|
|
34
|
+
_focus: {
|
|
35
|
+
borderColor: string;
|
|
36
|
+
boxShadow: (t: any) => string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
icon: {
|
|
40
|
+
border: string;
|
|
41
|
+
borderColor: string;
|
|
42
|
+
bg: string;
|
|
43
|
+
_hover: {
|
|
44
|
+
borderColor: string;
|
|
45
|
+
};
|
|
46
|
+
_readOnly: {
|
|
47
|
+
boxShadow: string;
|
|
48
|
+
userSelect: string;
|
|
49
|
+
};
|
|
50
|
+
_disabled: {
|
|
51
|
+
opacity: number;
|
|
52
|
+
cursor: string;
|
|
53
|
+
};
|
|
54
|
+
_invalid: {
|
|
55
|
+
borderColor: string;
|
|
56
|
+
boxShadow: (t: any) => string;
|
|
57
|
+
};
|
|
58
|
+
_focus: {
|
|
59
|
+
borderColor: string;
|
|
60
|
+
boxShadow: (t: any) => string;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
} | undefined;
|
|
65
|
+
defaultProps?: {
|
|
66
|
+
size?: string | number | undefined;
|
|
67
|
+
variant?: "refreshed" | undefined;
|
|
68
|
+
colorScheme?: string | undefined;
|
|
69
|
+
} | undefined;
|
|
70
|
+
parts: ("icon" | "field")[];
|
|
71
|
+
};
|
|
72
|
+
export declare const theme: Record<string, any>;
|
|
73
|
+
export default theme;
|
|
@@ -76,7 +76,7 @@ declare const _default: {
|
|
|
76
76
|
};
|
|
77
77
|
} | undefined;
|
|
78
78
|
variants?: {
|
|
79
|
-
outline: (props: import("
|
|
79
|
+
outline: (props: import("@chakra-ui/react").StyleFunctionProps) => {
|
|
80
80
|
field: {
|
|
81
81
|
border: string;
|
|
82
82
|
borderColor: string;
|
|
@@ -104,7 +104,7 @@ declare const _default: {
|
|
|
104
104
|
bg: string;
|
|
105
105
|
};
|
|
106
106
|
};
|
|
107
|
-
filled: (props: import("
|
|
107
|
+
filled: (props: import("@chakra-ui/react").StyleFunctionProps) => {
|
|
108
108
|
field: {
|
|
109
109
|
border: string;
|
|
110
110
|
borderColor: string;
|
|
@@ -130,7 +130,7 @@ declare const _default: {
|
|
|
130
130
|
bg: string;
|
|
131
131
|
};
|
|
132
132
|
};
|
|
133
|
-
flushed: (props: import("
|
|
133
|
+
flushed: (props: import("@chakra-ui/react").StyleFunctionProps) => {
|
|
134
134
|
field: {
|
|
135
135
|
borderBottom: string;
|
|
136
136
|
borderColor: string;
|
|
@@ -172,8 +172,8 @@ declare const _default: {
|
|
|
172
172
|
};
|
|
173
173
|
} | undefined;
|
|
174
174
|
defaultProps?: {
|
|
175
|
-
size?: "
|
|
176
|
-
variant?: "outline" | "
|
|
175
|
+
size?: "md" | "xs" | "sm" | "lg" | undefined;
|
|
176
|
+
variant?: "outline" | "filled" | "unstyled" | "flushed" | undefined;
|
|
177
177
|
colorScheme?: string | undefined;
|
|
178
178
|
} | undefined;
|
|
179
179
|
parts: ("icon" | "field")[];
|
package/dist/index.cjs.js
CHANGED
|
@@ -776,6 +776,19 @@ var base = /*#__PURE__*/Object.freeze({
|
|
|
776
776
|
zIndices: indices
|
|
777
777
|
});
|
|
778
778
|
|
|
779
|
+
const heightProps = function () {
|
|
780
|
+
let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'md';
|
|
781
|
+
const heights = {
|
|
782
|
+
md: {},
|
|
783
|
+
lg: {
|
|
784
|
+
height: 12,
|
|
785
|
+
lineHeight: sizes$6['6']
|
|
786
|
+
}
|
|
787
|
+
};
|
|
788
|
+
return heights[height] || {
|
|
789
|
+
height // when a custom height is provided, pass it as is
|
|
790
|
+
};
|
|
791
|
+
};
|
|
779
792
|
const baseStyle$f = {
|
|
780
793
|
px: 8,
|
|
781
794
|
py: 3,
|
|
@@ -785,7 +798,7 @@ const baseStyle$f = {
|
|
|
785
798
|
fontWeight: 'semibold',
|
|
786
799
|
borderWidth: '1px',
|
|
787
800
|
borderStyle: 'solid',
|
|
788
|
-
borderRadius: '
|
|
801
|
+
borderRadius: 'md',
|
|
789
802
|
textTransform: 'capitalize',
|
|
790
803
|
transition: 'all normal ease',
|
|
791
804
|
_disabled: {
|
|
@@ -816,25 +829,78 @@ const destructiveButtonStyles = {
|
|
|
816
829
|
color: 'red.800'
|
|
817
830
|
}, disabledButtonHoverStyle)
|
|
818
831
|
};
|
|
832
|
+
|
|
833
|
+
/**
|
|
834
|
+
* ## OKLCH Color Adjustments Reference
|
|
835
|
+
* | State | OKLCH Calculation | Visual Effect |
|
|
836
|
+
* |-------|-------------------|---------------|
|
|
837
|
+
* | Default | `primary.default` | Base color |
|
|
838
|
+
* | Hover (light bg) | `calc(l - 0.1)` | 10% darker (lightness) |
|
|
839
|
+
* | Active/Pressed | `calc(l - 0.15)` | 15% darker (lightness) |
|
|
840
|
+
* | Hover (secondary) | `calc(l - 0.3)` | 3% darker (lightness) |
|
|
841
|
+
* | Active/Pressed (secondary) | `calc(l - 0.6)` | 6% darker (lightness) |
|
|
842
|
+
* | Hover (dark bg) | `calc(l + 0.1)` | 10% lighter (lightness) |
|
|
843
|
+
* | Disabled | `opacity: 0.4` | 60% transparent |
|
|
844
|
+
*/
|
|
845
|
+
|
|
846
|
+
//Helper function to make oklch color strings
|
|
847
|
+
const generateOklchColor = (colorVar, adjustment) => {
|
|
848
|
+
return "oklch(from var(--chakra-colors-".concat(colorVar, ") calc(l ").concat(adjustment, ") c h)");
|
|
849
|
+
};
|
|
850
|
+
|
|
851
|
+
// 10% darker (lightness)
|
|
852
|
+
const hoverPrimaryColor = generateOklchColor('primary-default', '- 0.1');
|
|
853
|
+
// 15% darker (lightness)
|
|
854
|
+
const activePrimaryColor = generateOklchColor('primary-default', '- 0.15');
|
|
855
|
+
// 3% darker (lightness)
|
|
856
|
+
const hoverSecondaryColor = generateOklchColor('white', '- 0.03');
|
|
857
|
+
// 6% darker (lightness)
|
|
858
|
+
const activeSecondaryColor = generateOklchColor('white', '- 0.06');
|
|
859
|
+
// 10% lighter (lightness)
|
|
860
|
+
const hoverDarkColor = generateOklchColor('yellow-default', '+ 0.1');
|
|
861
|
+
|
|
862
|
+
/**
|
|
863
|
+
* Button Variants - Simplified Color System Using OKLCH
|
|
864
|
+
*
|
|
865
|
+
* This implementation uses OKLCH relative color syntax for perceptually uniform color adjustments.
|
|
866
|
+
* Benefits:
|
|
867
|
+
* - White-label theming: Only need ONE brand color (primary.default)
|
|
868
|
+
* - No package dependencies (native CSS)
|
|
869
|
+
* - Text color NOT affected (unlike CSS filters)
|
|
870
|
+
* - Perceptually uniform adjustments (10% lighter looks consistent across all hues)
|
|
871
|
+
* - Can adjust lightness, chroma, or hue independently
|
|
872
|
+
* - Future-proof modern CSS standard
|
|
873
|
+
*
|
|
874
|
+
* OKLCH Syntax: oklch(from <color> <lightness> <chroma> <hue>)
|
|
875
|
+
* - Lightness adjustments: calc(l - 0.1) = 10% darker, calc(l + 0.1) = 10% lighter
|
|
876
|
+
* - Works with any color format (hex, rgb, etc.) - CSS converts automatically
|
|
877
|
+
*
|
|
878
|
+
* Browser Support: Chrome 111+, Safari 16.4+, Firefox 113+ (Mar-May 2023)
|
|
879
|
+
* Fallback: Older browsers use base color without hover effect degradation
|
|
880
|
+
*
|
|
881
|
+
* Note: Destructive variants still use semantic red for safety/UX consistency
|
|
882
|
+
*/
|
|
819
883
|
const variants$d = {
|
|
820
884
|
primary: {
|
|
821
885
|
bg: 'primary.default',
|
|
822
886
|
borderColor: 'primary.default',
|
|
823
887
|
color: 'white',
|
|
824
888
|
_hover: _objectSpread2({
|
|
825
|
-
bg:
|
|
826
|
-
borderColor:
|
|
827
|
-
|
|
828
|
-
|
|
889
|
+
bg: hoverPrimaryColor,
|
|
890
|
+
borderColor: hoverPrimaryColor
|
|
891
|
+
}, disabledButtonHoverStyle),
|
|
892
|
+
_active: {
|
|
893
|
+
bg: activePrimaryColor,
|
|
894
|
+
borderColor: activePrimaryColor
|
|
895
|
+
}
|
|
829
896
|
},
|
|
830
897
|
primaryOnDark: {
|
|
831
898
|
bg: 'yellow.default',
|
|
832
899
|
borderColor: 'yellow.default',
|
|
833
900
|
color: 'black',
|
|
834
901
|
_hover: _objectSpread2({
|
|
835
|
-
bg:
|
|
836
|
-
borderColor:
|
|
837
|
-
color: 'black'
|
|
902
|
+
bg: hoverDarkColor,
|
|
903
|
+
borderColor: hoverDarkColor
|
|
838
904
|
}, disabledButtonHoverStyle),
|
|
839
905
|
_focus: {
|
|
840
906
|
boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
|
|
@@ -845,18 +911,18 @@ const variants$d = {
|
|
|
845
911
|
borderColor: 'gray.medium',
|
|
846
912
|
color: 'primary.default',
|
|
847
913
|
_hover: _objectSpread2({
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
914
|
+
bg: hoverSecondaryColor
|
|
915
|
+
}, disabledButtonHoverStyle),
|
|
916
|
+
_active: {
|
|
917
|
+
bg: activeSecondaryColor
|
|
918
|
+
}
|
|
851
919
|
},
|
|
852
920
|
secondaryOnDark: {
|
|
853
921
|
bg: 'none',
|
|
854
922
|
borderColor: 'white',
|
|
855
923
|
color: 'white',
|
|
856
924
|
_hover: _objectSpread2({
|
|
857
|
-
bg: 'white'
|
|
858
|
-
borderColor: 'white',
|
|
859
|
-
color: 'black'
|
|
925
|
+
bg: 'white'
|
|
860
926
|
}, disabledButtonHoverStyle),
|
|
861
927
|
_focus: {
|
|
862
928
|
boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
|
|
@@ -877,13 +943,11 @@ const variants$d = {
|
|
|
877
943
|
color: 'gray.dark'
|
|
878
944
|
},
|
|
879
945
|
_hover: {
|
|
880
|
-
color: 'primary.600',
|
|
881
946
|
_disabled: {
|
|
882
947
|
color: 'gray.dark'
|
|
883
948
|
}
|
|
884
949
|
},
|
|
885
950
|
_active: {
|
|
886
|
-
color: 'primary.600',
|
|
887
951
|
_disabled: {
|
|
888
952
|
color: 'gray.dark'
|
|
889
953
|
}
|
|
@@ -901,13 +965,13 @@ const variants$d = {
|
|
|
901
965
|
_disabled: {
|
|
902
966
|
bg: 'none',
|
|
903
967
|
color: 'white',
|
|
904
|
-
opacity:
|
|
968
|
+
opacity: 0.4
|
|
905
969
|
},
|
|
906
970
|
_hover: {
|
|
907
971
|
color: 'white',
|
|
908
|
-
opacity:
|
|
972
|
+
opacity: 0.8,
|
|
909
973
|
_disabled: {
|
|
910
|
-
opacity:
|
|
974
|
+
opacity: 0.4
|
|
911
975
|
}
|
|
912
976
|
}
|
|
913
977
|
},
|
|
@@ -992,20 +1056,6 @@ const anchorProps = function () {
|
|
|
992
1056
|
rel: 'noopener noreferrer'
|
|
993
1057
|
});
|
|
994
1058
|
};
|
|
995
|
-
const heightProps = function () {
|
|
996
|
-
let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'md';
|
|
997
|
-
const heights = {
|
|
998
|
-
md: {},
|
|
999
|
-
lg: {
|
|
1000
|
-
height: 12,
|
|
1001
|
-
borderRadius: sizes$6['6'],
|
|
1002
|
-
lineHeight: sizes$6['6']
|
|
1003
|
-
}
|
|
1004
|
-
};
|
|
1005
|
-
return heights[height] || {
|
|
1006
|
-
height // when a custom height is provided, pass it as is
|
|
1007
|
-
};
|
|
1008
|
-
};
|
|
1009
1059
|
const Button$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
1010
1060
|
let {
|
|
1011
1061
|
asAnchor,
|
|
@@ -3597,7 +3647,7 @@ const controlStyles = {
|
|
|
3597
3647
|
color: 'gray.600'
|
|
3598
3648
|
},
|
|
3599
3649
|
'& + label': {
|
|
3600
|
-
color: '
|
|
3650
|
+
color: 'text.secondary.light'
|
|
3601
3651
|
},
|
|
3602
3652
|
'& + label .chakra-form__required-indicator': {
|
|
3603
3653
|
//Styling for asterisk always to be red if invalid
|
|
@@ -5158,6 +5208,10 @@ Object.defineProperty(exports, "createIcon", {
|
|
|
5158
5208
|
enumerable: true,
|
|
5159
5209
|
get: function () { return react.createIcon; }
|
|
5160
5210
|
});
|
|
5211
|
+
Object.defineProperty(exports, "extendTheme", {
|
|
5212
|
+
enumerable: true,
|
|
5213
|
+
get: function () { return react.extendTheme; }
|
|
5214
|
+
});
|
|
5161
5215
|
Object.defineProperty(exports, "keyframes", {
|
|
5162
5216
|
enumerable: true,
|
|
5163
5217
|
get: function () { return react.keyframes; }
|