@spothero/ui 25.1.6 → 25.2.0-beta.1
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 +90 -31
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +87 -32
- 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 +5 -5
|
@@ -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,24 +829,80 @@ 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:
|
|
889
|
+
bg: hoverPrimaryColor,
|
|
890
|
+
borderColor: hoverPrimaryColor,
|
|
891
|
+
color: 'white'
|
|
892
|
+
}, disabledButtonHoverStyle),
|
|
893
|
+
_active: {
|
|
894
|
+
bg: activePrimaryColor,
|
|
895
|
+
borderColor: activePrimaryColor,
|
|
827
896
|
color: 'white'
|
|
828
|
-
}
|
|
897
|
+
}
|
|
829
898
|
},
|
|
830
899
|
primaryOnDark: {
|
|
831
900
|
bg: 'yellow.default',
|
|
832
901
|
borderColor: 'yellow.default',
|
|
833
902
|
color: 'black',
|
|
834
903
|
_hover: _objectSpread2({
|
|
835
|
-
bg:
|
|
836
|
-
borderColor:
|
|
904
|
+
bg: hoverDarkColor,
|
|
905
|
+
borderColor: hoverDarkColor,
|
|
837
906
|
color: 'black'
|
|
838
907
|
}, disabledButtonHoverStyle),
|
|
839
908
|
_focus: {
|
|
@@ -845,9 +914,12 @@ const variants$d = {
|
|
|
845
914
|
borderColor: 'gray.medium',
|
|
846
915
|
color: 'primary.default',
|
|
847
916
|
_hover: _objectSpread2({
|
|
848
|
-
|
|
849
|
-
color: 'primary.
|
|
850
|
-
}, disabledButtonHoverStyle)
|
|
917
|
+
bg: hoverSecondaryColor,
|
|
918
|
+
color: 'primary.default'
|
|
919
|
+
}, disabledButtonHoverStyle),
|
|
920
|
+
_active: {
|
|
921
|
+
bg: activeSecondaryColor
|
|
922
|
+
}
|
|
851
923
|
},
|
|
852
924
|
secondaryOnDark: {
|
|
853
925
|
bg: 'none',
|
|
@@ -855,8 +927,7 @@ const variants$d = {
|
|
|
855
927
|
color: 'white',
|
|
856
928
|
_hover: _objectSpread2({
|
|
857
929
|
bg: 'white',
|
|
858
|
-
|
|
859
|
-
color: 'black'
|
|
930
|
+
color: 'white'
|
|
860
931
|
}, disabledButtonHoverStyle),
|
|
861
932
|
_focus: {
|
|
862
933
|
boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
|
|
@@ -877,13 +948,11 @@ const variants$d = {
|
|
|
877
948
|
color: 'gray.dark'
|
|
878
949
|
},
|
|
879
950
|
_hover: {
|
|
880
|
-
color: 'primary.600',
|
|
881
951
|
_disabled: {
|
|
882
952
|
color: 'gray.dark'
|
|
883
953
|
}
|
|
884
954
|
},
|
|
885
955
|
_active: {
|
|
886
|
-
color: 'primary.600',
|
|
887
956
|
_disabled: {
|
|
888
957
|
color: 'gray.dark'
|
|
889
958
|
}
|
|
@@ -901,13 +970,13 @@ const variants$d = {
|
|
|
901
970
|
_disabled: {
|
|
902
971
|
bg: 'none',
|
|
903
972
|
color: 'white',
|
|
904
|
-
opacity:
|
|
973
|
+
opacity: 0.4
|
|
905
974
|
},
|
|
906
975
|
_hover: {
|
|
907
976
|
color: 'white',
|
|
908
|
-
opacity:
|
|
977
|
+
opacity: 0.8,
|
|
909
978
|
_disabled: {
|
|
910
|
-
opacity:
|
|
979
|
+
opacity: 0.4
|
|
911
980
|
}
|
|
912
981
|
}
|
|
913
982
|
},
|
|
@@ -992,20 +1061,6 @@ const anchorProps = function () {
|
|
|
992
1061
|
rel: 'noopener noreferrer'
|
|
993
1062
|
});
|
|
994
1063
|
};
|
|
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
1064
|
const Button$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
1010
1065
|
let {
|
|
1011
1066
|
asAnchor,
|
|
@@ -3597,7 +3652,7 @@ const controlStyles = {
|
|
|
3597
3652
|
color: 'gray.600'
|
|
3598
3653
|
},
|
|
3599
3654
|
'& + label': {
|
|
3600
|
-
color: '
|
|
3655
|
+
color: 'text.secondary.light'
|
|
3601
3656
|
},
|
|
3602
3657
|
'& + label .chakra-form__required-indicator': {
|
|
3603
3658
|
//Styling for asterisk always to be red if invalid
|
|
@@ -5158,6 +5213,10 @@ Object.defineProperty(exports, "createIcon", {
|
|
|
5158
5213
|
enumerable: true,
|
|
5159
5214
|
get: function () { return react.createIcon; }
|
|
5160
5215
|
});
|
|
5216
|
+
Object.defineProperty(exports, "extendTheme", {
|
|
5217
|
+
enumerable: true,
|
|
5218
|
+
get: function () { return react.extendTheme; }
|
|
5219
|
+
});
|
|
5161
5220
|
Object.defineProperty(exports, "keyframes", {
|
|
5162
5221
|
enumerable: true,
|
|
5163
5222
|
get: function () { return react.keyframes; }
|