@sanity/ui 1.8.1 → 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.
Files changed (52) hide show
  1. package/dist/index.d.ts +40 -14
  2. package/dist/index.esm.js +377 -134
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +376 -133
  5. package/dist/index.js.map +1 -1
  6. package/package.json +34 -16
  7. package/src/components/autocomplete/autocomplete.tsx +2 -1
  8. package/src/components/dialog/dialog.tsx +3 -3
  9. package/src/components/hotkeys/hotkeys.tsx +2 -1
  10. package/src/components/menu/menuButton.tsx +2 -2
  11. package/src/components/menu/menuGroup.tsx +2 -2
  12. package/src/components/tab/tab.tsx +2 -1
  13. package/src/primitives/avatar/styles.ts +1 -1
  14. package/src/primitives/button/button.tsx +6 -7
  15. package/src/primitives/button/styles.ts +20 -3
  16. package/src/primitives/card/styles.ts +1 -1
  17. package/src/primitives/checkbox/checkbox.tsx +1 -0
  18. package/src/primitives/checkbox/styles.ts +47 -17
  19. package/src/primitives/kbd/kbd.tsx +6 -6
  20. package/src/primitives/popover/constants.ts +15 -1
  21. package/src/primitives/popover/popover.tsx +3 -1
  22. package/src/primitives/popover/popoverCard.tsx +2 -2
  23. package/src/primitives/radio/radio.tsx +1 -0
  24. package/src/primitives/radio/styles.ts +17 -4
  25. package/src/primitives/select/select.tsx +3 -2
  26. package/src/primitives/select/styles.ts +2 -1
  27. package/src/primitives/switch/__workshop__/props.tsx +4 -4
  28. package/src/primitives/switch/styles.ts +19 -12
  29. package/src/primitives/text/styles.ts +1 -0
  30. package/src/primitives/textInput/textInput.tsx +2 -1
  31. package/src/primitives/tooltip/constants.ts +16 -0
  32. package/src/primitives/tooltip/tooltip.tsx +5 -3
  33. package/src/primitives/types.ts +3 -2
  34. package/src/styles/colorVars/colorVarsStyle.ts +2 -0
  35. package/src/styles/focusRing/index.ts +3 -1
  36. package/src/styles/input/textInputStyle.ts +2 -1
  37. package/src/styles/radius/radiusStyle.ts +14 -4
  38. package/src/styles/radius/types.ts +3 -1
  39. package/src/theme/lib/theme/avatar.ts +3 -0
  40. package/src/theme/lib/theme/color/_generic/types.ts +1 -0
  41. package/src/theme/lib/theme/color/color.test.ts +1 -0
  42. package/src/theme/lib/theme/color/defaults.ts +8 -0
  43. package/src/theme/lib/theme/color/input/types.ts +1 -0
  44. package/src/theme/lib/theme/input.ts +11 -0
  45. package/src/theme/lib/theme/theme.ts +5 -4
  46. package/src/theme/studioTheme/color.ts +82 -70
  47. package/src/theme/studioTheme/fonts.ts +3 -3
  48. package/src/theme/studioTheme/theme.ts +17 -7
  49. package/src/theme/studioTheme/tints.ts +152 -0
  50. package/src/theme/types.ts +8 -0
  51. package/src/types/index.ts +1 -0
  52. 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?: number | number[]
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
- * @beta
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?: number | number[]
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?: number | number[]
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?: number | number[]
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?: number | number[]
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?: number | number[]
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?: number | number[]
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?: number | number[]
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?: number | number[]
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
  /**