@svadmin/surface 0.9.0 → 0.10.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.
Files changed (144) hide show
  1. package/README.md +9 -3
  2. package/STYLING.md +4 -2
  3. package/compatibility.json +18 -7
  4. package/dist/agent-contract.d.ts +1 -1
  5. package/dist/agent-contract.js +5 -2
  6. package/dist/builtin-schemas.js +1 -1
  7. package/dist/business-data.d.ts +16 -0
  8. package/dist/business-data.js +42 -0
  9. package/dist/business-definitions.d.ts +28 -0
  10. package/dist/business-definitions.js +53 -0
  11. package/dist/business.d.ts +3 -0
  12. package/dist/business.js +17 -0
  13. package/dist/components/ActivityFeedWidget.svelte +34 -0
  14. package/dist/components/ActivityFeedWidget.svelte.d.ts +4 -0
  15. package/dist/components/MetricWidget.svelte +2 -1
  16. package/dist/components/MetricWidget.svelte.d.ts +1 -0
  17. package/dist/components/ResourceDetailWidget.svelte +56 -0
  18. package/dist/components/ResourceDetailWidget.svelte.d.ts +4 -0
  19. package/dist/components/ResourceFormBody.svelte +1 -1
  20. package/dist/components/ResourceTableWidget.svelte +2 -1
  21. package/dist/components/ResourceTableWidget.svelte.d.ts +1 -0
  22. package/dist/components/SurfaceEditPreview.svelte +1 -1
  23. package/dist/components/SurfaceRenderer.svelte +2 -1
  24. package/dist/components/SurfaceRenderer.svelte.d.ts +1 -0
  25. package/dist/design-contract.d.ts +2 -0
  26. package/dist/design-contract.js +2 -0
  27. package/dist/localization.d.ts +11 -1
  28. package/dist/localization.js +20 -0
  29. package/dist/recipes.d.ts +20 -0
  30. package/dist/recipes.js +20 -0
  31. package/dist/styles/{editor.generated.js → editor.js} +1 -1
  32. package/dist/styles.css +41 -1260
  33. package/dist/types.d.ts +1 -1
  34. package/dist/validation.js +12 -6
  35. package/dist/workflows/catalog.js +1 -1
  36. package/package.json +15 -8
  37. package/dist/styled-system/css/conditions.js +0 -36
  38. package/dist/styled-system/css/css.d.ts +0 -22
  39. package/dist/styled-system/css/css.js +0 -45
  40. package/dist/styled-system/css/cva.d.ts +0 -6
  41. package/dist/styled-system/css/cva.js +0 -87
  42. package/dist/styled-system/css/cx.d.ts +0 -5
  43. package/dist/styled-system/css/cx.js +0 -15
  44. package/dist/styled-system/css/index.d.ts +0 -5
  45. package/dist/styled-system/css/index.js +0 -4
  46. package/dist/styled-system/css/sva.d.ts +0 -4
  47. package/dist/styled-system/css/sva.js +0 -46
  48. package/dist/styled-system/design-contract.d.ts +0 -13
  49. package/dist/styled-system/design-contract.js +0 -11
  50. package/dist/styled-system/helpers.js +0 -316
  51. package/dist/styled-system/patterns/aspect-ratio.d.ts +0 -20
  52. package/dist/styled-system/patterns/aspect-ratio.js +0 -38
  53. package/dist/styled-system/patterns/bleed.d.ts +0 -21
  54. package/dist/styled-system/patterns/bleed.js +0 -24
  55. package/dist/styled-system/patterns/box.d.ts +0 -20
  56. package/dist/styled-system/patterns/box.js +0 -15
  57. package/dist/styled-system/patterns/center.d.ts +0 -20
  58. package/dist/styled-system/patterns/center.js +0 -21
  59. package/dist/styled-system/patterns/circle.d.ts +0 -20
  60. package/dist/styled-system/patterns/circle.js +0 -25
  61. package/dist/styled-system/patterns/container.d.ts +0 -20
  62. package/dist/styled-system/patterns/container.js +0 -21
  63. package/dist/styled-system/patterns/cq.d.ts +0 -21
  64. package/dist/styled-system/patterns/cq.js +0 -21
  65. package/dist/styled-system/patterns/divider.d.ts +0 -22
  66. package/dist/styled-system/patterns/divider.js +0 -25
  67. package/dist/styled-system/patterns/flex.d.ts +0 -26
  68. package/dist/styled-system/patterns/flex.js +0 -26
  69. package/dist/styled-system/patterns/float.d.ts +0 -23
  70. package/dist/styled-system/patterns/float.js +0 -52
  71. package/dist/styled-system/patterns/grid-item.d.ts +0 -25
  72. package/dist/styled-system/patterns/grid-item.js +0 -25
  73. package/dist/styled-system/patterns/grid.d.ts +0 -24
  74. package/dist/styled-system/patterns/grid.js +0 -27
  75. package/dist/styled-system/patterns/hstack.d.ts +0 -21
  76. package/dist/styled-system/patterns/hstack.js +0 -24
  77. package/dist/styled-system/patterns/index.d.ts +0 -21
  78. package/dist/styled-system/patterns/index.js +0 -20
  79. package/dist/styled-system/patterns/link-overlay.d.ts +0 -20
  80. package/dist/styled-system/patterns/link-overlay.js +0 -24
  81. package/dist/styled-system/patterns/spacer.d.ts +0 -20
  82. package/dist/styled-system/patterns/spacer.js +0 -25
  83. package/dist/styled-system/patterns/square.d.ts +0 -20
  84. package/dist/styled-system/patterns/square.js +0 -24
  85. package/dist/styled-system/patterns/stack.d.ts +0 -23
  86. package/dist/styled-system/patterns/stack.js +0 -24
  87. package/dist/styled-system/patterns/visually-hidden.d.ts +0 -20
  88. package/dist/styled-system/patterns/visually-hidden.js +0 -18
  89. package/dist/styled-system/patterns/vstack.d.ts +0 -21
  90. package/dist/styled-system/patterns/vstack.js +0 -24
  91. package/dist/styled-system/patterns/wrap.d.ts +0 -24
  92. package/dist/styled-system/patterns/wrap.js +0 -25
  93. package/dist/styled-system/recipes/content-header.d.ts +0 -31
  94. package/dist/styled-system/recipes/content-header.js +0 -65
  95. package/dist/styled-system/recipes/content-page.d.ts +0 -34
  96. package/dist/styled-system/recipes/content-page.js +0 -43
  97. package/dist/styled-system/recipes/create-recipe.js +0 -82
  98. package/dist/styled-system/recipes/index.d.ts +0 -17
  99. package/dist/styled-system/recipes/index.js +0 -16
  100. package/dist/styled-system/recipes/metric-block.d.ts +0 -34
  101. package/dist/styled-system/recipes/metric-block.js +0 -76
  102. package/dist/styled-system/recipes/product-list.d.ts +0 -31
  103. package/dist/styled-system/recipes/product-list.js +0 -73
  104. package/dist/styled-system/recipes/product-section.d.ts +0 -31
  105. package/dist/styled-system/recipes/product-section.js +0 -49
  106. package/dist/styled-system/recipes/product-settings-row.d.ts +0 -34
  107. package/dist/styled-system/recipes/product-settings-row.js +0 -58
  108. package/dist/styled-system/recipes/product-settings.d.ts +0 -31
  109. package/dist/styled-system/recipes/product-settings.js +0 -57
  110. package/dist/styled-system/recipes/product-status.d.ts +0 -34
  111. package/dist/styled-system/recipes/product-status.js +0 -45
  112. package/dist/styled-system/recipes/product-toolbar.d.ts +0 -31
  113. package/dist/styled-system/recipes/product-toolbar.js +0 -41
  114. package/dist/styled-system/recipes/product-workspace.d.ts +0 -34
  115. package/dist/styled-system/recipes/product-workspace.js +0 -58
  116. package/dist/styled-system/recipes/surface-metric.d.ts +0 -38
  117. package/dist/styled-system/recipes/surface-metric.js +0 -63
  118. package/dist/styled-system/recipes/surface-table.d.ts +0 -34
  119. package/dist/styled-system/recipes/surface-table.js +0 -62
  120. package/dist/styled-system/recipes/ui-badge.d.ts +0 -31
  121. package/dist/styled-system/recipes/ui-badge.js +0 -38
  122. package/dist/styled-system/recipes/ui-button.d.ts +0 -32
  123. package/dist/styled-system/recipes/ui-button.js +0 -43
  124. package/dist/styled-system/recipes/ui-input.d.ts +0 -31
  125. package/dist/styled-system/recipes/ui-input.js +0 -49
  126. package/dist/styled-system/recipes/ui-textarea.d.ts +0 -31
  127. package/dist/styled-system/recipes/ui-textarea.js +0 -24
  128. package/dist/styled-system/styles.css +0 -1257
  129. package/dist/styled-system/tokens/index.d.ts +0 -9
  130. package/dist/styled-system/tokens/index.js +0 -268
  131. package/dist/styled-system/tokens/tokens.d.ts +0 -36
  132. package/dist/styled-system/types/composition.d.ts +0 -227
  133. package/dist/styled-system/types/conditions.d.ts +0 -236
  134. package/dist/styled-system/types/csstype.d.ts +0 -22570
  135. package/dist/styled-system/types/index.d.ts +0 -6
  136. package/dist/styled-system/types/parts.d.ts +0 -8
  137. package/dist/styled-system/types/pattern.d.ts +0 -78
  138. package/dist/styled-system/types/prop-type.d.ts +0 -223
  139. package/dist/styled-system/types/recipe.d.ts +0 -181
  140. package/dist/styled-system/types/selectors.d.ts +0 -59
  141. package/dist/styled-system/types/static-css.d.ts +0 -56
  142. package/dist/styled-system/types/style-props.d.ts +0 -8088
  143. package/dist/styled-system/types/system-types.d.ts +0 -151
  144. /package/dist/styles/{editor.generated.d.ts → editor.d.ts} +0 -0
@@ -1,6 +0,0 @@
1
- /* eslint-disable */
2
- export * from './conditions';
3
- export * from './pattern';
4
- export * from './recipe';
5
- export * from './system-types';
6
- export * from './style-props';
@@ -1,8 +0,0 @@
1
- /* eslint-disable */
2
- export interface Part {
3
- selector: string
4
- }
5
-
6
- export interface Parts {
7
- [key: string]: Part
8
- }
@@ -1,78 +0,0 @@
1
- /* eslint-disable */
2
- import type { CssProperty, SystemStyleObject } from './system-types';
3
- import type { TokenCategory } from '../tokens/index';
4
-
5
- type Primitive = string | number | boolean | null | undefined
6
- type LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)
7
-
8
- export type PatternProperty =
9
- | { type: 'property'; value: CssProperty; description?: string }
10
- | { type: 'enum'; value: string[]; description?: string }
11
- | { type: 'token'; value: TokenCategory; property?: CssProperty; description?: string }
12
- | { type: 'string' | 'boolean' | 'number'; description?: string }
13
-
14
- export interface PatternHelpers {
15
- map: (value: any, fn: (value: string) => string | undefined) => any
16
- isCssUnit: (value: any) => boolean
17
- isCssVar: (value: any) => boolean
18
- isCssFunction: (value: any) => boolean
19
- }
20
-
21
- export interface PatternProperties {
22
- [key: string]: PatternProperty
23
- }
24
-
25
- type InferProps<T> = Record<LiteralUnion<keyof T>, any>
26
-
27
- export type PatternDefaultValue<T> = Partial<InferProps<T>>
28
-
29
- export type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>
30
-
31
- export interface PatternConfig<T extends PatternProperties = PatternProperties> {
32
- /**
33
- * The description of the pattern. This will be used in the JSDoc comment.
34
- */
35
- description?: string
36
- /**
37
- * The JSX element rendered by the pattern
38
- * @default 'div'
39
- */
40
- jsxElement?: string
41
- /**
42
- * The properties of the pattern.
43
- */
44
- properties?: T
45
- /**
46
- * The default values of the pattern.
47
- */
48
- defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>
49
- /**
50
- * The css object this pattern will generate.
51
- */
52
- transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject
53
- /**
54
- * Whether the pattern is deprecated.
55
- */
56
- deprecated?: boolean | string
57
- /**
58
- * The jsx element name this pattern will generate.
59
- */
60
- jsxName?: string
61
- /**
62
- * The jsx elements to track for this pattern. Can be string or Regexp.
63
- *
64
- * @default capitalize(pattern.name)
65
- * @example ['Button', 'Link', /Button$/]
66
- */
67
- jsx?: Array<string | RegExp>
68
- /**
69
- * Whether to only generate types for the specified properties.
70
- * This will disallow css properties
71
- */
72
- strict?: boolean
73
- /**
74
- * @experimental
75
- * Disallow certain css properties for this pattern
76
- */
77
- blocklist?: LiteralUnion<CssProperty>[]
78
- }
@@ -1,223 +0,0 @@
1
- /* eslint-disable */
2
- import type { ConditionalValue } from './conditions';
3
- import type { CssProperties } from './system-types';
4
- import type { Tokens } from '../tokens/index';
5
-
6
- export interface UtilityValues {
7
- top: Tokens["spacing"];
8
- left: Tokens["spacing"];
9
- inset: "auto" | Tokens["spacing"];
10
- insetInline: Tokens["spacing"];
11
- insetBlock: Tokens["spacing"];
12
- insetBlockEnd: Tokens["spacing"];
13
- insetBlockStart: Tokens["spacing"];
14
- insetInlineEnd: Tokens["spacing"];
15
- insetInlineStart: Tokens["spacing"];
16
- right: Tokens["spacing"];
17
- bottom: Tokens["spacing"];
18
- float: "start" | "end" | CssProperties["float"];
19
- flexBasis: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full";
20
- flex: "1" | "auto" | "initial" | "none";
21
- gridAutoColumns: "min" | "max" | "fr";
22
- gridAutoRows: "min" | "max" | "fr";
23
- gap: Tokens["spacing"];
24
- gridGap: Tokens["spacing"];
25
- gridRowGap: Tokens["spacing"];
26
- gridColumnGap: Tokens["spacing"];
27
- rowGap: Tokens["spacing"];
28
- columnGap: Tokens["spacing"];
29
- padding: Tokens["spacing"];
30
- paddingLeft: Tokens["spacing"];
31
- paddingRight: Tokens["spacing"];
32
- paddingTop: Tokens["spacing"];
33
- paddingBottom: Tokens["spacing"];
34
- paddingBlock: Tokens["spacing"];
35
- paddingBlockEnd: Tokens["spacing"];
36
- paddingBlockStart: Tokens["spacing"];
37
- paddingInline: Tokens["spacing"];
38
- paddingInlineEnd: Tokens["spacing"];
39
- paddingInlineStart: Tokens["spacing"];
40
- marginLeft: "auto" | Tokens["spacing"];
41
- marginRight: "auto" | Tokens["spacing"];
42
- marginTop: "auto" | Tokens["spacing"];
43
- marginBottom: "auto" | Tokens["spacing"];
44
- margin: "auto" | Tokens["spacing"];
45
- marginBlock: "auto" | Tokens["spacing"];
46
- marginBlockEnd: "auto" | Tokens["spacing"];
47
- marginBlockStart: "auto" | Tokens["spacing"];
48
- marginInline: "auto" | Tokens["spacing"];
49
- marginInlineEnd: "auto" | Tokens["spacing"];
50
- marginInlineStart: "auto" | Tokens["spacing"];
51
- spaceX: "auto" | Tokens["spacing"] | CssProperties["marginInlineStart"];
52
- spaceY: "auto" | Tokens["spacing"] | CssProperties["marginBlockStart"];
53
- outlineColor: Tokens["colors"];
54
- outlineOffset: Tokens["spacing"];
55
- focusRing: "outside" | "inside" | "mixed" | "none";
56
- focusVisibleRing: "outside" | "inside" | "mixed" | "none";
57
- focusRingColor: Tokens["colors"];
58
- focusRingOffset: Tokens["spacing"];
59
- focusRingWidth: CssProperties["outlineWidth"];
60
- focusRingStyle: CssProperties["outlineStyle"];
61
- divideColor: Tokens["colors"];
62
- divideStyle: CssProperties["borderStyle"];
63
- width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
64
- inlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
65
- minWidth: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
66
- minInlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
67
- maxWidth: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
68
- maxInlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
69
- height: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
70
- blockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
71
- minHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
72
- minBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
73
- maxHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
74
- maxBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
75
- boxSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
76
- color: Tokens["colors"];
77
- fontSize: Tokens["fontSizes"];
78
- fontWeight: Tokens["fontWeights"];
79
- fontSmoothing: "antialiased" | "subpixel-antialiased";
80
- letterSpacing: Tokens["letterSpacings"];
81
- lineHeight: Tokens["lineHeights"];
82
- textDecorationColor: Tokens["colors"];
83
- textEmphasisColor: Tokens["colors"];
84
- textIndent: Tokens["spacing"];
85
- textShadow: Tokens["shadows"];
86
- textShadowColor: Tokens["colors"];
87
- WebkitTextFillColor: Tokens["colors"];
88
- textWrap: "wrap" | "balance" | "nowrap";
89
- truncate: boolean;
90
- background: Tokens["colors"];
91
- backgroundColor: Tokens["colors"];
92
- backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
93
- backgroundLinear: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
94
- textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
95
- gradientFrom: Tokens["colors"];
96
- gradientTo: Tokens["colors"];
97
- gradientVia: Tokens["colors"];
98
- borderRadius: Tokens["radii"];
99
- borderTopLeftRadius: Tokens["radii"];
100
- borderTopRightRadius: Tokens["radii"];
101
- borderBottomRightRadius: Tokens["radii"];
102
- borderBottomLeftRadius: Tokens["radii"];
103
- borderTopRadius: Tokens["radii"] | CssProperties["borderRadius"];
104
- borderRightRadius: Tokens["radii"] | CssProperties["borderRadius"];
105
- borderBottomRadius: Tokens["radii"] | CssProperties["borderRadius"];
106
- borderLeftRadius: Tokens["radii"] | CssProperties["borderRadius"];
107
- borderStartStartRadius: Tokens["radii"];
108
- borderStartEndRadius: Tokens["radii"];
109
- borderStartRadius: Tokens["radii"] | CssProperties["borderRadius"];
110
- borderEndStartRadius: Tokens["radii"];
111
- borderEndEndRadius: Tokens["radii"];
112
- borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"];
113
- borderColor: Tokens["colors"];
114
- borderInlineColor: Tokens["colors"];
115
- borderBlockColor: Tokens["colors"];
116
- borderLeftColor: Tokens["colors"];
117
- borderInlineStartColor: Tokens["colors"];
118
- borderRightColor: Tokens["colors"];
119
- borderInlineEndColor: Tokens["colors"];
120
- borderTopColor: Tokens["colors"];
121
- borderBottomColor: Tokens["colors"];
122
- borderBlockEndColor: Tokens["colors"];
123
- borderBlockStartColor: Tokens["colors"];
124
- boxShadow: Tokens["shadows"];
125
- boxShadowColor: Tokens["colors"];
126
- filter: "auto";
127
- backdropFilter: "auto";
128
- borderSpacing: Tokens["spacing"] | "auto";
129
- borderSpacingX: Tokens["spacing"];
130
- borderSpacingY: Tokens["spacing"];
131
- transitionProperty: "common" | "colors" | "size" | "position" | "background";
132
- transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
133
- rotate: "auto" | "auto-3d" | CssProperties["rotate"];
134
- rotateX: CssProperties["rotate"];
135
- rotateY: CssProperties["rotate"];
136
- rotateZ: CssProperties["rotate"];
137
- scale: "auto" | CssProperties["scale"];
138
- translate: "auto" | "auto-3d" | CssProperties["translate"];
139
- translateX: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
140
- translateY: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
141
- translateZ: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
142
- accentColor: Tokens["colors"];
143
- caretColor: Tokens["colors"];
144
- scrollbar: "visible" | "hidden";
145
- scrollbarColor: Tokens["colors"];
146
- scrollbarWidth: Tokens["sizes"];
147
- scrollMargin: Tokens["spacing"];
148
- scrollMarginLeft: Tokens["spacing"];
149
- scrollMarginRight: Tokens["spacing"];
150
- scrollMarginTop: Tokens["spacing"];
151
- scrollMarginBottom: Tokens["spacing"];
152
- scrollMarginBlock: Tokens["spacing"];
153
- scrollMarginBlockEnd: Tokens["spacing"];
154
- scrollMarginBlockStart: Tokens["spacing"];
155
- scrollMarginInline: Tokens["spacing"];
156
- scrollMarginInlineEnd: Tokens["spacing"];
157
- scrollMarginInlineStart: Tokens["spacing"];
158
- scrollPadding: Tokens["spacing"];
159
- scrollPaddingBlock: Tokens["spacing"];
160
- scrollPaddingBlockStart: Tokens["spacing"];
161
- scrollPaddingBlockEnd: Tokens["spacing"];
162
- scrollPaddingInline: Tokens["spacing"];
163
- scrollPaddingInlineEnd: Tokens["spacing"];
164
- scrollPaddingInlineStart: Tokens["spacing"];
165
- scrollPaddingLeft: Tokens["spacing"];
166
- scrollPaddingRight: Tokens["spacing"];
167
- scrollPaddingTop: Tokens["spacing"];
168
- scrollPaddingBottom: Tokens["spacing"];
169
- scrollSnapType: "none" | "x" | "y" | "both";
170
- scrollSnapStrictness: "mandatory" | "proximity";
171
- scrollSnapMargin: Tokens["spacing"];
172
- scrollSnapMarginTop: Tokens["spacing"];
173
- scrollSnapMarginBottom: Tokens["spacing"];
174
- scrollSnapMarginLeft: Tokens["spacing"];
175
- scrollSnapMarginRight: Tokens["spacing"];
176
- fill: Tokens["colors"];
177
- stroke: Tokens["colors"];
178
- srOnly: boolean;
179
- debug: boolean;
180
- containerName: CssProperties["containerName"];
181
- colorPalette: "surface" | "foreground" | "muted" | "border" | "success" | "warning" | "danger" | "info" | "content";
182
- }
183
-
184
-
185
-
186
- type WithColorOpacityModifier<T> = [T] extends [string] ? `${T}/${string}` & { __colorOpacityModifier?: true } : never
187
-
188
- type ImportantMark = "!" | "!important"
189
- type WhitespaceImportant = ` ${ImportantMark}`
190
- type Important = ImportantMark | WhitespaceImportant
191
- type WithImportant<T> = [T] extends [string] ? `${T}${Important}` & { __important?: true } : never
192
-
193
- /**
194
- * Only relevant when using `strictTokens` or `strictPropertyValues` in your config.
195
- * - Allows you to use an escape hatch (e.g. `[123px]`) to use any string as a value.
196
- * - Allows you to use a color opacity modifier (e.g. `red/300`) with known color values.
197
- * - Allows you to use an important mark (e.g. `!` or `!important`) in the value.
198
- *
199
- * This is useful when you want to use a value that is not defined in the config or want to opt-out of the defaults.
200
- *
201
- * @example
202
- * css({
203
- * fontSize: '[123px]', // ⚠️ will not throw even if you haven't defined 123px as a token
204
- * })
205
- *
206
- * @see https://panda-css.com/docs/concepts/writing-styles#stricttokens
207
- * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
208
- */
209
- export type WithEscapeHatch<T> = T | `[${string}]` | WithColorOpacityModifier<T> | WithImportant<T>
210
-
211
- /**
212
- * Will restrict the value of properties that have predefined values to those values only.
213
- *
214
- * @example
215
- * css({
216
- * display: 'abc', // ❌ will throw
217
- * })
218
- *
219
- * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
220
- */
221
- export type OnlyKnown<Key, Value> = Value extends boolean
222
- ? Value
223
- : Value extends `${infer _}` ? Value : never
@@ -1,181 +0,0 @@
1
- /* eslint-disable */
2
- import type { RecipeRule } from './static-css';
3
- import type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types';
4
-
5
- type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
6
-
7
- export type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>
8
-
9
- export type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T
10
- ? {}
11
- : {
12
- [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined
13
- }
14
-
15
- export type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string
16
-
17
- /**
18
- * Extract the variant as optional props from a `cva` function.
19
- * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.
20
- */
21
- export type RecipeVariantProps<
22
- T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,
23
- > = Pretty<Parameters<T>[0]>
24
-
25
- /**
26
- * Extract the variants from a `cva` function.
27
- */
28
- export type RecipeVariant<
29
- T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,
30
- > = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>
31
-
32
- type RecipeVariantMap<T extends RecipeVariantRecord> = {
33
- [K in keyof T]: Array<keyof T[K]>
34
- }
35
-
36
- /* -----------------------------------------------------------------------------
37
- * Recipe / Standard
38
- * -----------------------------------------------------------------------------*/
39
-
40
- export interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {
41
- __type: RecipeSelection<T>
42
- variantKeys: (keyof T)[]
43
- variantMap: RecipeVariantMap<T>
44
- raw: (props?: RecipeSelection<T>) => SystemStyleObject
45
- config: RecipeConfig<T>
46
- splitVariantProps<Props extends RecipeSelection<T>>(
47
- props: Props,
48
- ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
49
- getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>
50
- }
51
-
52
- type OneOrMore<T> = T | Array<T>
53
-
54
- export type RecipeCompoundSelection<T> = {
55
- [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined
56
- }
57
-
58
- export type RecipeCompoundVariant<T> = T & {
59
- css: SystemStyleObject
60
- }
61
-
62
- export interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {
63
- /**
64
- * The base styles of the recipe.
65
- */
66
- base?: SystemStyleObject
67
- /**
68
- * Whether the recipe is deprecated.
69
- */
70
- deprecated?: boolean | string
71
- /**
72
- * The multi-variant styles of the recipe.
73
- */
74
- variants?: T
75
- /**
76
- * The default variants of the recipe.
77
- */
78
- defaultVariants?: RecipeSelection<T>
79
- /**
80
- * The styles to apply when a combination of variants is selected.
81
- */
82
- compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]
83
- }
84
-
85
- export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
86
-
87
- interface RecipeConfigMeta {
88
- /**
89
- * The class name of the recipe.
90
- */
91
- className: string
92
- /**
93
- * The description of the recipe. This will be used in the JSDoc comment.
94
- */
95
- description?: string
96
- /**
97
- * The jsx elements to track for this recipe. Can be string or Regexp.
98
- *
99
- * @default capitalize(recipe.name)
100
- * @example ['Button', 'Link', /Button$/]
101
- */
102
- jsx?: Array<string | RegExp>
103
- /**
104
- * Variants to pre-generate, will be include in the final `config.staticCss`
105
- */
106
- staticCss?: RecipeRule[]
107
- }
108
-
109
- export interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>
110
- extends RecipeDefinition<T>,
111
- RecipeConfigMeta {}
112
-
113
- /* -----------------------------------------------------------------------------
114
- * Recipe / Slot
115
- * -----------------------------------------------------------------------------*/
116
-
117
- type SlotRecord<S extends string, T> = Partial<Record<S, T>>
118
-
119
- export type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>
120
-
121
- export type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (
122
- props?: RecipeSelection<T>,
123
- ) => SlotRecord<S, string>
124
-
125
- export interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>
126
- extends SlotRecipeVariantFn<S, T> {
127
- raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>
128
- variantKeys: (keyof T)[]
129
- variantMap: RecipeVariantMap<T>
130
- splitVariantProps<Props extends RecipeSelection<T>>(
131
- props: Props,
132
- ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
133
- getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>
134
- }
135
-
136
- export type SlotRecipeCompoundVariant<S extends string, T> = T & {
137
- css: SlotRecord<S, SystemStyleObject>
138
- }
139
-
140
- export interface SlotRecipeDefinition<
141
- S extends string = string,
142
- T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
143
- > {
144
- /**
145
- * An optional class name that can be used to target slots in the DOM.
146
- */
147
- className?: string
148
- /**
149
- * Whether the recipe is deprecated.
150
- */
151
- deprecated?: boolean | string
152
- /**
153
- * The parts/slots of the recipe.
154
- */
155
- slots: S[] | Readonly<S[]>
156
- /**
157
- * The base styles of the recipe.
158
- */
159
- base?: SlotRecord<S, SystemStyleObject>
160
- /**
161
- * The multi-variant styles of the recipe.
162
- */
163
- variants?: T
164
- /**
165
- * The default variants of the recipe.
166
- */
167
- defaultVariants?: RecipeSelection<T>
168
- /**
169
- * The styles to apply when a combination of variants is selected.
170
- */
171
- compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]
172
- }
173
-
174
- export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(
175
- config: SlotRecipeDefinition<S, T>,
176
- ) => SlotRecipeRuntimeFn<S, T>
177
-
178
- export type SlotRecipeConfig<
179
- S extends string = string,
180
- T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
181
- > = SlotRecipeDefinition<S, T> & RecipeConfigMeta
@@ -1,59 +0,0 @@
1
- /* eslint-disable */
2
- import type { Pseudos } from './csstype';
3
-
4
- type AriaAttributes =
5
- | '[aria-disabled]'
6
- | '[aria-hidden]'
7
- | '[aria-invalid]'
8
- | '[aria-readonly]'
9
- | '[aria-required]'
10
- | '[aria-selected]'
11
- | '[aria-checked]'
12
- | '[aria-expanded]'
13
- | '[aria-pressed]'
14
- | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]`
15
- | '[aria-invalid]'
16
- | `[aria-sort=${'ascending' | 'descending'}]`
17
-
18
- type DataAttributes =
19
- | '[data-selected]'
20
- | '[data-highlighted]'
21
- | '[data-hover]'
22
- | '[data-active]'
23
- | '[data-checked]'
24
- | '[data-disabled]'
25
- | '[data-readonly]'
26
- | '[data-focus]'
27
- | '[data-focus-visible]'
28
- | '[data-focus-visible-added]'
29
- | '[data-invalid]'
30
- | '[data-pressed]'
31
- | '[data-expanded]'
32
- | '[data-grabbed]'
33
- | '[data-dragged]'
34
- | '[data-orientation=horizontal]'
35
- | '[data-orientation=vertical]'
36
- | '[data-in-range]'
37
- | '[data-out-of-range]'
38
- | '[data-placeholder-shown]'
39
- | `[data-part=${string}]`
40
- | `[data-attr=${string}]`
41
- | `[data-placement=${string}]`
42
- | `[data-theme=${string}]`
43
- | `[data-size=${string}]`
44
- | `[data-state=${string}]`
45
- | '[data-empty]'
46
- | '[data-loading]'
47
- | '[data-loaded]'
48
- | '[data-enter]'
49
- | '[data-entering]'
50
- | '[data-exited]'
51
- | '[data-exiting]'
52
-
53
- type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`
54
- type ParentSelector = `${DataAttributes | AriaAttributes} &`
55
-
56
- type AtRuleType = 'media' | 'layer' | 'container' | 'supports' | 'page' | 'scope' | 'starting-style'
57
-
58
- export type AnySelector = `${string}&` | `&${string}` | `@${AtRuleType}${string}`
59
- export type Selectors = AttributeSelector | ParentSelector
@@ -1,56 +0,0 @@
1
- /* eslint-disable */
2
- interface ConditionOptions {
3
- /**
4
- * The conditions to generate for the rule.
5
- * @example ['hover', 'focus']
6
- */
7
- conditions?: string[]
8
- /**
9
- * Whether to generate responsive styles for the rule.
10
- */
11
- responsive?: boolean
12
- }
13
-
14
- export interface CssRule extends ConditionOptions {
15
- /**
16
- * The css properties to generate utilities for.
17
- * @example ['margin', 'padding']
18
- */
19
- properties: {
20
- [property: string]: Array<string | number>
21
- }
22
- }
23
-
24
- interface RecipeRuleVariants {
25
- [variant: string]: boolean | string[]
26
- }
27
-
28
- export type RecipeRuleObject = RecipeRuleVariants & ConditionOptions
29
- export type RecipeRule = '*' | RecipeRuleObject
30
-
31
- export type PatternRule = '*' | CssRule
32
-
33
- export interface StaticCssOptions {
34
- /**
35
- * The css utility classes to generate.
36
- */
37
- css?: CssRule[]
38
- /**
39
- * The css recipes to generate.
40
- */
41
- recipes?:
42
- | '*'
43
- | {
44
- [recipe: string]: RecipeRule[]
45
- }
46
- /**
47
- * The css patterns to generate.
48
- */
49
- patterns?: {
50
- [pattern: string]: PatternRule[]
51
- }
52
- /**
53
- * The CSS themes to generate
54
- */
55
- themes?: string[]
56
- }