@sanity/ui 1.8.2 → 2.0.0-alpha.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/index.d.ts +40 -14
- package/dist/index.esm.js +335 -120
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +334 -119
- package/dist/index.js.map +1 -1
- package/package.json +34 -16
- package/src/components/autocomplete/autocomplete.tsx +2 -1
- package/src/components/dialog/dialog.tsx +3 -3
- package/src/components/hotkeys/hotkeys.tsx +2 -1
- package/src/components/menu/menuButton.tsx +2 -2
- package/src/components/menu/menuGroup.tsx +2 -2
- package/src/components/tab/tab.tsx +2 -1
- package/src/primitives/avatar/styles.ts +1 -1
- package/src/primitives/button/button.tsx +6 -7
- package/src/primitives/button/styles.ts +20 -3
- package/src/primitives/card/styles.ts +1 -1
- package/src/primitives/checkbox/checkbox.tsx +1 -0
- package/src/primitives/checkbox/styles.ts +47 -17
- package/src/primitives/kbd/kbd.tsx +6 -6
- package/src/primitives/popover/popoverCard.tsx +2 -2
- package/src/primitives/radio/radio.tsx +1 -0
- package/src/primitives/radio/styles.ts +17 -4
- package/src/primitives/select/select.tsx +3 -2
- package/src/primitives/select/styles.ts +2 -1
- package/src/primitives/switch/__workshop__/props.tsx +4 -4
- package/src/primitives/switch/styles.ts +19 -12
- package/src/primitives/text/styles.ts +1 -0
- package/src/primitives/textInput/textInput.tsx +2 -1
- package/src/primitives/tooltip/tooltip.tsx +2 -2
- package/src/primitives/types.ts +3 -2
- package/src/styles/colorVars/colorVarsStyle.ts +2 -0
- package/src/styles/focusRing/index.ts +3 -1
- package/src/styles/input/textInputStyle.ts +2 -1
- package/src/styles/radius/radiusStyle.ts +14 -4
- package/src/styles/radius/types.ts +3 -1
- package/src/theme/lib/theme/avatar.ts +3 -0
- package/src/theme/lib/theme/color/_generic/types.ts +1 -0
- package/src/theme/lib/theme/color/color.test.ts +1 -0
- package/src/theme/lib/theme/color/defaults.ts +8 -0
- package/src/theme/lib/theme/color/input/types.ts +1 -0
- package/src/theme/lib/theme/input.ts +11 -0
- package/src/theme/lib/theme/theme.ts +5 -4
- package/src/theme/studioTheme/color.ts +82 -70
- package/src/theme/studioTheme/fonts.ts +3 -3
- package/src/theme/studioTheme/theme.ts +17 -7
- package/src/theme/studioTheme/tints.ts +152 -0
- package/src/theme/types.ts +8 -0
- package/src/types/index.ts +1 -0
- package/src/types/radius.ts +4 -0
package/dist/index.d.ts
CHANGED
|
@@ -132,7 +132,7 @@ export declare interface AutocompleteProps<
|
|
|
132
132
|
popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
|
|
133
133
|
Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
|
|
134
134
|
prefix?: ReactNode
|
|
135
|
-
radius?:
|
|
135
|
+
radius?: Radius | Radius[]
|
|
136
136
|
/** @beta */
|
|
137
137
|
relatedElements?: HTMLElement[]
|
|
138
138
|
renderOption?: (option: Option) => ReactElement
|
|
@@ -342,13 +342,10 @@ export declare interface BaseTheme<Styles extends {} = {}> {
|
|
|
342
342
|
avatar: ThemeAvatar
|
|
343
343
|
button: {
|
|
344
344
|
textWeight: ThemeFontWeightKey
|
|
345
|
+
focusRing: FocusRing
|
|
345
346
|
}
|
|
346
347
|
color: ThemeColorSchemes
|
|
347
348
|
container: number[]
|
|
348
|
-
focusRing: {
|
|
349
|
-
offset: number
|
|
350
|
-
width: number
|
|
351
|
-
}
|
|
352
349
|
fonts: ThemeFonts
|
|
353
350
|
/**
|
|
354
351
|
* THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
|
|
@@ -360,6 +357,9 @@ export declare interface BaseTheme<Styles extends {} = {}> {
|
|
|
360
357
|
shadows: Array<ThemeShadow | null>
|
|
361
358
|
space: number[]
|
|
362
359
|
input: ThemeInput
|
|
360
|
+
card: {
|
|
361
|
+
focusRing: FocusRing
|
|
362
|
+
}
|
|
363
363
|
styles?: Styles
|
|
364
364
|
}
|
|
365
365
|
|
|
@@ -481,6 +481,7 @@ export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveR
|
|
|
481
481
|
selected?: boolean
|
|
482
482
|
space?: number | number[]
|
|
483
483
|
textAlign?: ButtonTextAlign
|
|
484
|
+
muted?: boolean
|
|
484
485
|
text?: React.ReactNode
|
|
485
486
|
tone?: ButtonTone
|
|
486
487
|
type?: 'button' | 'reset' | 'submit'
|
|
@@ -628,7 +629,7 @@ export declare function createColorTheme(
|
|
|
628
629
|
export declare type CSSObject = StyledObject<any>
|
|
629
630
|
|
|
630
631
|
/**
|
|
631
|
-
* @
|
|
632
|
+
* @public
|
|
632
633
|
*/
|
|
633
634
|
export declare type Delay =
|
|
634
635
|
| number
|
|
@@ -677,7 +678,7 @@ export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveW
|
|
|
677
678
|
* @beta
|
|
678
679
|
*/
|
|
679
680
|
__unstable_hideCloseButton?: boolean
|
|
680
|
-
cardRadius?:
|
|
681
|
+
cardRadius?: Radius | Radius[]
|
|
681
682
|
cardShadow?: number | number[]
|
|
682
683
|
contentRef?: React.ForwardedRef<HTMLDivElement>
|
|
683
684
|
footer?: React.ReactNode
|
|
@@ -854,6 +855,14 @@ export declare function focusFirstDescendant(element: HTMLElement): boolean
|
|
|
854
855
|
*/
|
|
855
856
|
export declare function focusLastDescendant(element: HTMLElement): boolean
|
|
856
857
|
|
|
858
|
+
/**
|
|
859
|
+
* @public
|
|
860
|
+
*/
|
|
861
|
+
export declare interface FocusRing {
|
|
862
|
+
offset: number
|
|
863
|
+
width: number
|
|
864
|
+
}
|
|
865
|
+
|
|
857
866
|
/**
|
|
858
867
|
* @internal
|
|
859
868
|
*/
|
|
@@ -1002,7 +1011,7 @@ export declare const Hotkeys: ForwardRefExoticComponent<
|
|
|
1002
1011
|
export declare interface HotkeysProps {
|
|
1003
1012
|
fontSize?: number | number[]
|
|
1004
1013
|
padding?: number | number[]
|
|
1005
|
-
radius?:
|
|
1014
|
+
radius?: Radius | Radius[]
|
|
1006
1015
|
space?: number | number[]
|
|
1007
1016
|
keys?: string[]
|
|
1008
1017
|
}
|
|
@@ -1094,7 +1103,7 @@ export declare interface KBDProps {
|
|
|
1094
1103
|
as?: React.ElementType | keyof JSX.IntrinsicElements
|
|
1095
1104
|
fontSize?: number | number[]
|
|
1096
1105
|
padding?: number | number[]
|
|
1097
|
-
radius?:
|
|
1106
|
+
radius?: Radius | Radius[]
|
|
1098
1107
|
}
|
|
1099
1108
|
|
|
1100
1109
|
/**
|
|
@@ -1244,7 +1253,7 @@ export declare interface MenuButtonProps {
|
|
|
1244
1253
|
/**
|
|
1245
1254
|
* @deprecated Use `popover={{radius: 2}}` instead.
|
|
1246
1255
|
*/
|
|
1247
|
-
popoverRadius?:
|
|
1256
|
+
popoverRadius?: Radius | Radius[]
|
|
1248
1257
|
/**
|
|
1249
1258
|
* @beta Do not use in production.
|
|
1250
1259
|
* @deprecated Use `popover={{portal: true}}` instead.
|
|
@@ -1592,7 +1601,7 @@ export declare interface MenuGroupProps {
|
|
|
1592
1601
|
icon?: React.ElementType | React.ReactNode
|
|
1593
1602
|
padding?: number | number[]
|
|
1594
1603
|
popover?: Omit<PopoverProps, 'content' | 'open'>
|
|
1595
|
-
radius?:
|
|
1604
|
+
radius?: Radius | Radius[]
|
|
1596
1605
|
space?: number | number[]
|
|
1597
1606
|
text: React.ReactNode
|
|
1598
1607
|
tone?: SelectableTone
|
|
@@ -1799,6 +1808,11 @@ export declare interface RadioProps {
|
|
|
1799
1808
|
customValidity?: string
|
|
1800
1809
|
}
|
|
1801
1810
|
|
|
1811
|
+
/**
|
|
1812
|
+
* @public
|
|
1813
|
+
*/
|
|
1814
|
+
export declare type Radius = number | 'full'
|
|
1815
|
+
|
|
1802
1816
|
/**
|
|
1803
1817
|
* @internal
|
|
1804
1818
|
*/
|
|
@@ -1971,7 +1985,7 @@ export declare interface ResponsivePaddingProps {
|
|
|
1971
1985
|
* @public
|
|
1972
1986
|
*/
|
|
1973
1987
|
export declare interface ResponsiveRadiusProps {
|
|
1974
|
-
radius?:
|
|
1988
|
+
radius?: Radius | Radius[]
|
|
1975
1989
|
}
|
|
1976
1990
|
|
|
1977
1991
|
/**
|
|
@@ -2075,7 +2089,7 @@ export declare type SelectableTone = 'default' | 'primary' | 'positive' | 'cauti
|
|
|
2075
2089
|
export declare interface SelectProps {
|
|
2076
2090
|
fontSize?: number | number[]
|
|
2077
2091
|
padding?: number | number[]
|
|
2078
|
-
radius?:
|
|
2092
|
+
radius?: Radius | Radius[]
|
|
2079
2093
|
space?: number | number[]
|
|
2080
2094
|
customValidity?: string
|
|
2081
2095
|
}
|
|
@@ -2309,7 +2323,7 @@ export declare interface TextInputProps {
|
|
|
2309
2323
|
onClear?: () => void
|
|
2310
2324
|
padding?: number | number[]
|
|
2311
2325
|
prefix?: React.ReactNode
|
|
2312
|
-
radius?:
|
|
2326
|
+
radius?: Radius | Radius[]
|
|
2313
2327
|
space?: number | number[]
|
|
2314
2328
|
suffix?: React.ReactNode
|
|
2315
2329
|
type?: TextInputType
|
|
@@ -2388,6 +2402,7 @@ export declare interface ThemeAvatar {
|
|
|
2388
2402
|
distance: number
|
|
2389
2403
|
size: number
|
|
2390
2404
|
}[]
|
|
2405
|
+
focusRing: FocusRing
|
|
2391
2406
|
}
|
|
2392
2407
|
|
|
2393
2408
|
/**
|
|
@@ -2551,6 +2566,7 @@ export declare interface ThemeColorGenericState {
|
|
|
2551
2566
|
bg2?: string
|
|
2552
2567
|
border: string
|
|
2553
2568
|
fg: string
|
|
2569
|
+
iconColor: string
|
|
2554
2570
|
muted: {
|
|
2555
2571
|
fg: string
|
|
2556
2572
|
}
|
|
@@ -2583,6 +2599,7 @@ export declare interface ThemeColorInput {
|
|
|
2583
2599
|
*/
|
|
2584
2600
|
export declare interface ThemeColorInputState {
|
|
2585
2601
|
bg: string
|
|
2602
|
+
bg2: string
|
|
2586
2603
|
fg: string
|
|
2587
2604
|
border: string
|
|
2588
2605
|
placeholder: string
|
|
@@ -2873,10 +2890,12 @@ export declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bo
|
|
|
2873
2890
|
export declare interface ThemeInput {
|
|
2874
2891
|
checkbox: {
|
|
2875
2892
|
size: number
|
|
2893
|
+
focusRing: FocusRing
|
|
2876
2894
|
}
|
|
2877
2895
|
radio: {
|
|
2878
2896
|
size: number
|
|
2879
2897
|
markSize: number
|
|
2898
|
+
focusRing: FocusRing
|
|
2880
2899
|
}
|
|
2881
2900
|
switch: {
|
|
2882
2901
|
width: number
|
|
@@ -2884,10 +2903,17 @@ export declare interface ThemeInput {
|
|
|
2884
2903
|
padding: number
|
|
2885
2904
|
transitionDurationMs: number
|
|
2886
2905
|
transitionTimingFunction: string
|
|
2906
|
+
focusRing: FocusRing
|
|
2887
2907
|
}
|
|
2888
2908
|
border: {
|
|
2889
2909
|
width: number
|
|
2890
2910
|
}
|
|
2911
|
+
select: {
|
|
2912
|
+
focusRing: FocusRing
|
|
2913
|
+
}
|
|
2914
|
+
text: {
|
|
2915
|
+
focusRing: FocusRing
|
|
2916
|
+
}
|
|
2891
2917
|
}
|
|
2892
2918
|
|
|
2893
2919
|
/**
|