@texturehq/edges 1.33.2 → 1.34.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/README.md +57 -3
- package/dist/{RichTextEditor-CxrunTg7.d.cts → RichTextEditor-diZqy_s1.d.cts} +1 -1
- package/dist/{RichTextEditor-CxrunTg7.d.ts → RichTextEditor-diZqy_s1.d.ts} +1 -1
- package/dist/{TimeField-DRQshIHX.d.ts → TimeField-7pTUPh11.d.ts} +32 -17
- package/dist/{TimeField-WCmeiLu3.d.cts → TimeField-CqmVrAdn.d.cts} +32 -17
- package/dist/{colors-Cgs2MGZ8.d.ts → colors-CoULWZ5j.d.ts} +53 -18
- package/dist/{colors-DGRiGzgj.d.cts → colors-upTGgIQe.d.cts} +53 -18
- package/dist/form/index.cjs +1 -1
- package/dist/form/index.cjs.map +1 -1
- package/dist/form/index.d.cts +1 -1
- package/dist/form/index.d.ts +1 -1
- package/dist/form/index.js +1 -1
- package/dist/form/index.js.map +1 -1
- package/dist/{index-BqpWEc_N.d.ts → index-dofSwYId.d.cts} +5 -5
- package/dist/{index-BqpWEc_N.d.cts → index-dofSwYId.d.ts} +5 -5
- package/dist/index.cjs +10 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +161 -41
- package/dist/index.d.ts +161 -41
- package/dist/index.js +10 -10
- package/dist/index.js.map +1 -1
- package/dist/prose.css +202 -0
- package/dist/rhf/index.cjs +1 -1
- package/dist/rhf/index.cjs.map +1 -1
- package/dist/rhf/index.d.cts +2 -2
- package/dist/rhf/index.d.ts +2 -2
- package/dist/rhf/index.js +1 -1
- package/dist/rhf/index.js.map +1 -1
- package/dist/server.cjs +2 -2
- package/dist/server.cjs.map +1 -1
- package/dist/server.d.cts +2 -2
- package/dist/server.d.ts +2 -2
- package/dist/server.js +2 -2
- package/dist/server.js.map +1 -1
- package/dist/styles/computed.css +2 -2
- package/dist/styles/responsive-typography.css +9 -7
- package/dist/styles/theme-light-override.css +26 -15
- package/dist/styles.css +2122 -820
- package/dist/theme.css +20 -7
- package/dist/typography.css +150 -0
- package/package.json +13 -14
- package/scripts/check-legacy-action-variants.mjs +96 -0
- package/scripts/check-legacy-font-colors.mjs +92 -0
- package/scripts/copy-assets.js +12 -0
- package/scripts/generate-color-utilities.mjs +163 -0
- package/templates/claude-rules/.claude +5 -5
- package/templates/claude-rules/claude.md +5 -5
- package/templates/codex-rules/codex.md +5 -5
- package/dist/generated/tailwind-tokens-dark.css +0 -397
- package/dist/generated/tailwind-tokens-light.css +0 -611
- package/dist/generated/viz-runtime.css +0 -243
- package/scripts/generate-viz-runtime.js +0 -107
- package/scripts/validate-tokens.js +0 -176
package/README.md
CHANGED
|
@@ -25,6 +25,54 @@ This order is crucial because:
|
|
|
25
25
|
2. The styles CSS provides component-specific styles
|
|
26
26
|
3. Tailwind CSS needs to be imported last to properly process the custom theme
|
|
27
27
|
|
|
28
|
+
### Font loading
|
|
29
|
+
|
|
30
|
+
Edges ships font-family variables and typography role tokens, but it does not fetch webfonts for consumers. Load the font files at your app boundary, then map those loaded faces into the Edges variables.
|
|
31
|
+
|
|
32
|
+
Canonical font-family variables:
|
|
33
|
+
|
|
34
|
+
```css
|
|
35
|
+
--font-family-brand: "Rethink Sans", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
36
|
+
--font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
37
|
+
--font-family-mono: "Geist Mono", "JetBrains Mono", "SF Mono", "Menlo", monospace;
|
|
38
|
+
--font-family-agent: "Source Serif 4", Charter, Georgia, serif;
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
For Next apps, prefer `next/font/google` and wire the generated variables into Edges:
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { Geist_Mono, Inter, Rethink_Sans, Source_Serif_4 } from "next/font/google";
|
|
45
|
+
|
|
46
|
+
const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
|
|
47
|
+
const rethinkSans = Rethink_Sans({ subsets: ["latin"], variable: "--font-rethink-sans", display: "swap" });
|
|
48
|
+
const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", display: "swap" });
|
|
49
|
+
const sourceSerif = Source_Serif_4({
|
|
50
|
+
subsets: ["latin"],
|
|
51
|
+
weight: "variable",
|
|
52
|
+
variable: "--font-source-serif-4",
|
|
53
|
+
display: "swap",
|
|
54
|
+
axes: ["opsz"],
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
58
|
+
return (
|
|
59
|
+
<html className={`${inter.variable} ${rethinkSans.variable} ${geistMono.variable} ${sourceSerif.variable}`}>
|
|
60
|
+
<body>{children}</body>
|
|
61
|
+
</html>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
:root {
|
|
68
|
+
--font-family-brand: var(--font-rethink-sans), "Rethink Sans", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
69
|
+
--font-family-sans: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
70
|
+
--font-family-mono: var(--font-geist-mono), "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;
|
|
71
|
+
--font-family-agent: var(--font-source-serif-4), "Source Serif 4", Charter, Georgia, serif;
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
|
|
28
76
|
### Components
|
|
29
77
|
|
|
30
78
|
Import and use components as needed:
|
|
@@ -44,7 +92,7 @@ function MyComponent() {
|
|
|
44
92
|
|
|
45
93
|
### Color System
|
|
46
94
|
|
|
47
|
-
The package includes a comprehensive color system
|
|
95
|
+
The package includes a comprehensive color system from `@texturehq/edges-tokens`, exposed through `src/theme.css`. All custom colors are automatically available as utility classes.
|
|
48
96
|
|
|
49
97
|
#### Using Custom Colors
|
|
50
98
|
|
|
@@ -52,7 +100,12 @@ Your custom colors are available as utility classes:
|
|
|
52
100
|
|
|
53
101
|
```tsx
|
|
54
102
|
// Brand colors
|
|
55
|
-
<div className="bg-brand-primary text-
|
|
103
|
+
<div className="bg-brand-primary text-text-inverse">Brand content</div>
|
|
104
|
+
|
|
105
|
+
// Font colors
|
|
106
|
+
<div className="text-text-primary">Primary editorial text</div>
|
|
107
|
+
<div className="text-text-secondary">Supporting text, descriptions, and metadata</div>
|
|
108
|
+
<div className="text-text-disabled">Disabled or placeholder text</div>
|
|
56
109
|
|
|
57
110
|
// Device state colors
|
|
58
111
|
<div className="bg-device-charging-background border-device-charging-border">
|
|
@@ -67,7 +120,8 @@ Your custom colors are available as utility classes:
|
|
|
67
120
|
|
|
68
121
|
#### Available Color Categories
|
|
69
122
|
|
|
70
|
-
- **
|
|
123
|
+
- **Text colors**: `text-primary`, `text-secondary`, `text-inverse`, `text-disabled`
|
|
124
|
+
- **Brand/action colors**: `action-brand-*`, `action-default-*`
|
|
71
125
|
- **Device states**: `device-charging-*`, `device-heat-*`, `device-cool-*`, etc.
|
|
72
126
|
- **Feedback colors**: `feedback-success-*`, `feedback-error-*`, `feedback-warning-*`, `feedback-info-*`
|
|
73
127
|
- **Standard color scales**: All Tailwind color scales (red, blue, green, etc.)
|
|
@@ -187,7 +187,7 @@ declare function getInputStateStyles(props: {
|
|
|
187
187
|
declare function getInputBackgroundStyles(props: {
|
|
188
188
|
transparent?: boolean;
|
|
189
189
|
isDisabled?: boolean;
|
|
190
|
-
}): "bg-
|
|
190
|
+
}): "bg-background-muted" | "bg-transparent" | "bg-background-input";
|
|
191
191
|
/**
|
|
192
192
|
* Generates the complete set of base styles for input components.
|
|
193
193
|
* This includes state styles, background, sizing, and custom classes.
|
|
@@ -187,7 +187,7 @@ declare function getInputStateStyles(props: {
|
|
|
187
187
|
declare function getInputBackgroundStyles(props: {
|
|
188
188
|
transparent?: boolean;
|
|
189
189
|
isDisabled?: boolean;
|
|
190
|
-
}): "bg-
|
|
190
|
+
}): "bg-background-muted" | "bg-transparent" | "bg-background-input";
|
|
191
191
|
/**
|
|
192
192
|
* Generates the complete set of base styles for input components.
|
|
193
193
|
* This includes state styles, background, sizing, and custom classes.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React__default, { ComponentProps, ReactNode } from 'react';
|
|
3
3
|
import { Key, ValidationResult, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, CheckboxRenderProps, CheckboxGroupProps as CheckboxGroupProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue } from 'react-aria-components';
|
|
4
|
-
import { S as Size, I as Icon, B as BaseInputProps } from './RichTextEditor-
|
|
4
|
+
import { S as Size, I as Icon, B as BaseInputProps } from './RichTextEditor-diZqy_s1.js';
|
|
5
5
|
|
|
6
6
|
interface Item {
|
|
7
7
|
id: string;
|
|
@@ -93,11 +93,18 @@ type BaseButtonProps = Omit<ButtonProps$1, "className">;
|
|
|
93
93
|
*
|
|
94
94
|
* Example usage:
|
|
95
95
|
* ```tsx
|
|
96
|
-
* <Button variant="
|
|
96
|
+
* <Button variant="primary" size="md" icon="Check">Save</Button>
|
|
97
97
|
* ```
|
|
98
98
|
*/
|
|
99
|
+
type ButtonVariant = "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
|
|
100
|
+
type LegacyButtonVariant = "default" | "brand";
|
|
99
101
|
interface ButtonProps extends BaseButtonProps {
|
|
100
|
-
|
|
102
|
+
/**
|
|
103
|
+
* Visual treatment. Use `primary` for the main action and `secondary` for
|
|
104
|
+
* lower-emphasis actions. `default` and `brand` are deprecated aliases for
|
|
105
|
+
* `primary` during the primary/secondary migration.
|
|
106
|
+
*/
|
|
107
|
+
variant?: ButtonVariant | LegacyButtonVariant;
|
|
101
108
|
size?: Size;
|
|
102
109
|
badgeNumber?: number;
|
|
103
110
|
badgeVariant?: "primary" | "destructive";
|
|
@@ -126,6 +133,8 @@ declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
|
126
133
|
*
|
|
127
134
|
* Groups multiple checkboxes with shared label/description.
|
|
128
135
|
*/
|
|
136
|
+
type SelectionVariant$3 = "primary";
|
|
137
|
+
type LegacySelectionVariant$3 = "default" | "brand";
|
|
129
138
|
interface CheckboxGroupProps extends Omit<CheckboxGroupProps$1, "children"> {
|
|
130
139
|
label?: string;
|
|
131
140
|
children?: ReactNode;
|
|
@@ -140,10 +149,10 @@ interface CheckboxGroupProps extends Omit<CheckboxGroupProps$1, "children"> {
|
|
|
140
149
|
interface CheckboxProps extends Omit<CheckboxProps$1, "children"> {
|
|
141
150
|
children?: ReactNode | ((props: CheckboxRenderProps) => ReactNode);
|
|
142
151
|
/**
|
|
143
|
-
*
|
|
144
|
-
* @default "
|
|
152
|
+
* Deprecated compatibility prop. Checkbox now has one selected treatment; `default` and `brand` both map to primary.
|
|
153
|
+
* @default "primary"
|
|
145
154
|
*/
|
|
146
|
-
variant?:
|
|
155
|
+
variant?: SelectionVariant$3 | LegacySelectionVariant$3;
|
|
147
156
|
}
|
|
148
157
|
declare function CheckboxGroup(props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
|
|
149
158
|
declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
@@ -229,6 +238,8 @@ interface NumberFieldProps extends Omit<NumberFieldProps$1, "size" | "className"
|
|
|
229
238
|
}
|
|
230
239
|
declare function NumberField({ label, description, errorMessage, size, tooltip, isRequired, transparent, validationResult, reserveErrorSpace, descriptionPlacement, ...props }: NumberFieldProps): react_jsx_runtime.JSX.Element;
|
|
231
240
|
|
|
241
|
+
type SelectionVariant$2 = "primary";
|
|
242
|
+
type LegacySelectionVariant$2 = "default" | "brand";
|
|
232
243
|
interface RadioCardProps {
|
|
233
244
|
/**
|
|
234
245
|
* The value of the radio card
|
|
@@ -253,7 +264,7 @@ interface RadioCardProps {
|
|
|
253
264
|
/**
|
|
254
265
|
* Visual variant
|
|
255
266
|
*/
|
|
256
|
-
variant?:
|
|
267
|
+
variant?: SelectionVariant$2 | LegacySelectionVariant$2;
|
|
257
268
|
}
|
|
258
269
|
interface RadioCardGroupProps {
|
|
259
270
|
/**
|
|
@@ -295,7 +306,7 @@ interface RadioCardGroupProps {
|
|
|
295
306
|
/**
|
|
296
307
|
* Visual variant
|
|
297
308
|
*/
|
|
298
|
-
variant?:
|
|
309
|
+
variant?: SelectionVariant$2 | LegacySelectionVariant$2;
|
|
299
310
|
/**
|
|
300
311
|
* Grid columns configuration
|
|
301
312
|
*/
|
|
@@ -305,9 +316,11 @@ interface RadioCardGroupProps {
|
|
|
305
316
|
*/
|
|
306
317
|
gap?: string;
|
|
307
318
|
}
|
|
308
|
-
declare function RadioCard({ value, isDisabled, className, children, size, variant }: RadioCardProps): react_jsx_runtime.JSX.Element;
|
|
319
|
+
declare function RadioCard({ value, isDisabled, className, children, size, variant: _variant, }: RadioCardProps): react_jsx_runtime.JSX.Element;
|
|
309
320
|
declare function RadioCardGroup({ value, defaultValue, onChange, isDisabled, isReadOnly, isRequired, className, children, size, variant, columns, gap, }: RadioCardGroupProps): react_jsx_runtime.JSX.Element;
|
|
310
321
|
|
|
322
|
+
type SelectionVariant$1 = "primary";
|
|
323
|
+
type LegacySelectionVariant$1 = "default" | "brand";
|
|
311
324
|
interface RadioGroupProps extends Omit<RadioGroupProps$1, "children"> {
|
|
312
325
|
/** Label for the radio group */
|
|
313
326
|
label?: ReactNode;
|
|
@@ -320,10 +333,10 @@ interface RadioGroupProps extends Omit<RadioGroupProps$1, "children"> {
|
|
|
320
333
|
/** Validation result object for functional errorMessage */
|
|
321
334
|
validationResult?: ValidationResult;
|
|
322
335
|
/**
|
|
323
|
-
*
|
|
324
|
-
* @default "
|
|
336
|
+
* Deprecated compatibility prop. RadioGroup now has one selected treatment; `default` and `brand` both map to primary.
|
|
337
|
+
* @default "primary"
|
|
325
338
|
*/
|
|
326
|
-
variant?:
|
|
339
|
+
variant?: SelectionVariant$1 | LegacySelectionVariant$1;
|
|
327
340
|
}
|
|
328
341
|
declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
329
342
|
declare function Radio(props: RadioProps): react_jsx_runtime.JSX.Element;
|
|
@@ -409,13 +422,15 @@ interface SelectProps<T extends SelectItem> extends Omit<SelectProps$1<T>, "chil
|
|
|
409
422
|
}
|
|
410
423
|
declare function Select<T extends SelectItem>({ label, description, errorMessage, children, items, renderItem, renderSelectedValue, size, selectedKey: controlledSelectedKey, defaultSelectedKey, onSelectionChange, placeholder, showErrors, tooltip, isRequired, transparent, reserveErrorSpace, placement, shouldFlip, menuWidth, descriptionPlacement, useMobileTray, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
411
424
|
|
|
425
|
+
type SelectionVariant = "primary";
|
|
426
|
+
type LegacySelectionVariant = "default" | "brand";
|
|
412
427
|
interface SwitchProps extends Omit<SwitchProps$1, "children"> {
|
|
413
428
|
children: React__default.ReactNode;
|
|
414
429
|
/**
|
|
415
|
-
*
|
|
416
|
-
* @default "
|
|
430
|
+
* Deprecated compatibility prop. Switch now has one selected treatment; `default` and `brand` both map to primary.
|
|
431
|
+
* @default "primary"
|
|
417
432
|
*/
|
|
418
|
-
variant?:
|
|
433
|
+
variant?: SelectionVariant | LegacySelectionVariant;
|
|
419
434
|
/**
|
|
420
435
|
* Size of the switch
|
|
421
436
|
* @default "md"
|
|
@@ -428,7 +443,7 @@ interface SwitchProps extends Omit<SwitchProps$1, "children"> {
|
|
|
428
443
|
* Toggle switch component for binary on/off states.
|
|
429
444
|
* Provides an accessible alternative to checkboxes for settings and preferences.
|
|
430
445
|
*/
|
|
431
|
-
declare function Switch({ children, variant, size, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
|
|
446
|
+
declare function Switch({ children, variant: _variant, size, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
|
|
432
447
|
|
|
433
448
|
/**
|
|
434
449
|
* TextArea
|
|
@@ -531,4 +546,4 @@ interface TimeFieldProps extends Omit<TimeFieldProps$1<TimeValue>, "isRequired"
|
|
|
531
546
|
*/
|
|
532
547
|
declare function TimeField({ label, description, errorMessage, size, tooltip, isRequired, isDisabled, isInvalid, reserveErrorSpace, validationResult, className, descriptionPlacement, ...props }: TimeFieldProps): react_jsx_runtime.JSX.Element;
|
|
533
548
|
|
|
534
|
-
export { Autocomplete as A, Button as B, Checkbox as C, NumberField as N, RadioCardGroup as R, Select as S, TextArea as T, CheckboxGroup as a, ColorField as b, RadioGroup as c, Switch as d, TextField as e, type TimeFieldProps as f, type
|
|
549
|
+
export { Autocomplete as A, Button as B, Checkbox as C, NumberField as N, RadioCardGroup as R, Select as S, TextArea as T, CheckboxGroup as a, ColorField as b, RadioGroup as c, Switch as d, TextField as e, type TimeFieldProps as f, type ButtonProps as g, type ColorFieldProps as h, Radio as i, RadioCard as j, type RadioCardGroupProps as k, type RadioCardProps as l, type SelectItem as m, TimeField as n };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React__default, { ComponentProps, ReactNode } from 'react';
|
|
3
3
|
import { Key, ValidationResult, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, CheckboxRenderProps, CheckboxGroupProps as CheckboxGroupProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue } from 'react-aria-components';
|
|
4
|
-
import { S as Size, I as Icon, B as BaseInputProps } from './RichTextEditor-
|
|
4
|
+
import { S as Size, I as Icon, B as BaseInputProps } from './RichTextEditor-diZqy_s1.cjs';
|
|
5
5
|
|
|
6
6
|
interface Item {
|
|
7
7
|
id: string;
|
|
@@ -93,11 +93,18 @@ type BaseButtonProps = Omit<ButtonProps$1, "className">;
|
|
|
93
93
|
*
|
|
94
94
|
* Example usage:
|
|
95
95
|
* ```tsx
|
|
96
|
-
* <Button variant="
|
|
96
|
+
* <Button variant="primary" size="md" icon="Check">Save</Button>
|
|
97
97
|
* ```
|
|
98
98
|
*/
|
|
99
|
+
type ButtonVariant = "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
|
|
100
|
+
type LegacyButtonVariant = "default" | "brand";
|
|
99
101
|
interface ButtonProps extends BaseButtonProps {
|
|
100
|
-
|
|
102
|
+
/**
|
|
103
|
+
* Visual treatment. Use `primary` for the main action and `secondary` for
|
|
104
|
+
* lower-emphasis actions. `default` and `brand` are deprecated aliases for
|
|
105
|
+
* `primary` during the primary/secondary migration.
|
|
106
|
+
*/
|
|
107
|
+
variant?: ButtonVariant | LegacyButtonVariant;
|
|
101
108
|
size?: Size;
|
|
102
109
|
badgeNumber?: number;
|
|
103
110
|
badgeVariant?: "primary" | "destructive";
|
|
@@ -126,6 +133,8 @@ declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
|
126
133
|
*
|
|
127
134
|
* Groups multiple checkboxes with shared label/description.
|
|
128
135
|
*/
|
|
136
|
+
type SelectionVariant$3 = "primary";
|
|
137
|
+
type LegacySelectionVariant$3 = "default" | "brand";
|
|
129
138
|
interface CheckboxGroupProps extends Omit<CheckboxGroupProps$1, "children"> {
|
|
130
139
|
label?: string;
|
|
131
140
|
children?: ReactNode;
|
|
@@ -140,10 +149,10 @@ interface CheckboxGroupProps extends Omit<CheckboxGroupProps$1, "children"> {
|
|
|
140
149
|
interface CheckboxProps extends Omit<CheckboxProps$1, "children"> {
|
|
141
150
|
children?: ReactNode | ((props: CheckboxRenderProps) => ReactNode);
|
|
142
151
|
/**
|
|
143
|
-
*
|
|
144
|
-
* @default "
|
|
152
|
+
* Deprecated compatibility prop. Checkbox now has one selected treatment; `default` and `brand` both map to primary.
|
|
153
|
+
* @default "primary"
|
|
145
154
|
*/
|
|
146
|
-
variant?:
|
|
155
|
+
variant?: SelectionVariant$3 | LegacySelectionVariant$3;
|
|
147
156
|
}
|
|
148
157
|
declare function CheckboxGroup(props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
|
|
149
158
|
declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
@@ -229,6 +238,8 @@ interface NumberFieldProps extends Omit<NumberFieldProps$1, "size" | "className"
|
|
|
229
238
|
}
|
|
230
239
|
declare function NumberField({ label, description, errorMessage, size, tooltip, isRequired, transparent, validationResult, reserveErrorSpace, descriptionPlacement, ...props }: NumberFieldProps): react_jsx_runtime.JSX.Element;
|
|
231
240
|
|
|
241
|
+
type SelectionVariant$2 = "primary";
|
|
242
|
+
type LegacySelectionVariant$2 = "default" | "brand";
|
|
232
243
|
interface RadioCardProps {
|
|
233
244
|
/**
|
|
234
245
|
* The value of the radio card
|
|
@@ -253,7 +264,7 @@ interface RadioCardProps {
|
|
|
253
264
|
/**
|
|
254
265
|
* Visual variant
|
|
255
266
|
*/
|
|
256
|
-
variant?:
|
|
267
|
+
variant?: SelectionVariant$2 | LegacySelectionVariant$2;
|
|
257
268
|
}
|
|
258
269
|
interface RadioCardGroupProps {
|
|
259
270
|
/**
|
|
@@ -295,7 +306,7 @@ interface RadioCardGroupProps {
|
|
|
295
306
|
/**
|
|
296
307
|
* Visual variant
|
|
297
308
|
*/
|
|
298
|
-
variant?:
|
|
309
|
+
variant?: SelectionVariant$2 | LegacySelectionVariant$2;
|
|
299
310
|
/**
|
|
300
311
|
* Grid columns configuration
|
|
301
312
|
*/
|
|
@@ -305,9 +316,11 @@ interface RadioCardGroupProps {
|
|
|
305
316
|
*/
|
|
306
317
|
gap?: string;
|
|
307
318
|
}
|
|
308
|
-
declare function RadioCard({ value, isDisabled, className, children, size, variant }: RadioCardProps): react_jsx_runtime.JSX.Element;
|
|
319
|
+
declare function RadioCard({ value, isDisabled, className, children, size, variant: _variant, }: RadioCardProps): react_jsx_runtime.JSX.Element;
|
|
309
320
|
declare function RadioCardGroup({ value, defaultValue, onChange, isDisabled, isReadOnly, isRequired, className, children, size, variant, columns, gap, }: RadioCardGroupProps): react_jsx_runtime.JSX.Element;
|
|
310
321
|
|
|
322
|
+
type SelectionVariant$1 = "primary";
|
|
323
|
+
type LegacySelectionVariant$1 = "default" | "brand";
|
|
311
324
|
interface RadioGroupProps extends Omit<RadioGroupProps$1, "children"> {
|
|
312
325
|
/** Label for the radio group */
|
|
313
326
|
label?: ReactNode;
|
|
@@ -320,10 +333,10 @@ interface RadioGroupProps extends Omit<RadioGroupProps$1, "children"> {
|
|
|
320
333
|
/** Validation result object for functional errorMessage */
|
|
321
334
|
validationResult?: ValidationResult;
|
|
322
335
|
/**
|
|
323
|
-
*
|
|
324
|
-
* @default "
|
|
336
|
+
* Deprecated compatibility prop. RadioGroup now has one selected treatment; `default` and `brand` both map to primary.
|
|
337
|
+
* @default "primary"
|
|
325
338
|
*/
|
|
326
|
-
variant?:
|
|
339
|
+
variant?: SelectionVariant$1 | LegacySelectionVariant$1;
|
|
327
340
|
}
|
|
328
341
|
declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
329
342
|
declare function Radio(props: RadioProps): react_jsx_runtime.JSX.Element;
|
|
@@ -409,13 +422,15 @@ interface SelectProps<T extends SelectItem> extends Omit<SelectProps$1<T>, "chil
|
|
|
409
422
|
}
|
|
410
423
|
declare function Select<T extends SelectItem>({ label, description, errorMessage, children, items, renderItem, renderSelectedValue, size, selectedKey: controlledSelectedKey, defaultSelectedKey, onSelectionChange, placeholder, showErrors, tooltip, isRequired, transparent, reserveErrorSpace, placement, shouldFlip, menuWidth, descriptionPlacement, useMobileTray, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
411
424
|
|
|
425
|
+
type SelectionVariant = "primary";
|
|
426
|
+
type LegacySelectionVariant = "default" | "brand";
|
|
412
427
|
interface SwitchProps extends Omit<SwitchProps$1, "children"> {
|
|
413
428
|
children: React__default.ReactNode;
|
|
414
429
|
/**
|
|
415
|
-
*
|
|
416
|
-
* @default "
|
|
430
|
+
* Deprecated compatibility prop. Switch now has one selected treatment; `default` and `brand` both map to primary.
|
|
431
|
+
* @default "primary"
|
|
417
432
|
*/
|
|
418
|
-
variant?:
|
|
433
|
+
variant?: SelectionVariant | LegacySelectionVariant;
|
|
419
434
|
/**
|
|
420
435
|
* Size of the switch
|
|
421
436
|
* @default "md"
|
|
@@ -428,7 +443,7 @@ interface SwitchProps extends Omit<SwitchProps$1, "children"> {
|
|
|
428
443
|
* Toggle switch component for binary on/off states.
|
|
429
444
|
* Provides an accessible alternative to checkboxes for settings and preferences.
|
|
430
445
|
*/
|
|
431
|
-
declare function Switch({ children, variant, size, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
|
|
446
|
+
declare function Switch({ children, variant: _variant, size, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
|
|
432
447
|
|
|
433
448
|
/**
|
|
434
449
|
* TextArea
|
|
@@ -531,4 +546,4 @@ interface TimeFieldProps extends Omit<TimeFieldProps$1<TimeValue>, "isRequired"
|
|
|
531
546
|
*/
|
|
532
547
|
declare function TimeField({ label, description, errorMessage, size, tooltip, isRequired, isDisabled, isInvalid, reserveErrorSpace, validationResult, className, descriptionPlacement, ...props }: TimeFieldProps): react_jsx_runtime.JSX.Element;
|
|
533
548
|
|
|
534
|
-
export { Autocomplete as A, Button as B, Checkbox as C, NumberField as N, RadioCardGroup as R, Select as S, TextArea as T, CheckboxGroup as a, ColorField as b, RadioGroup as c, Switch as d, TextField as e, type TimeFieldProps as f, type
|
|
549
|
+
export { Autocomplete as A, Button as B, Checkbox as C, NumberField as N, RadioCardGroup as R, Select as S, TextArea as T, CheckboxGroup as a, ColorField as b, RadioGroup as c, Switch as d, TextField as e, type TimeFieldProps as f, type ButtonProps as g, type ColorFieldProps as h, Radio as i, RadioCard as j, type RadioCardGroupProps as k, type RadioCardProps as l, type SelectItem as m, TimeField as n };
|
|
@@ -3,7 +3,7 @@ import * as React$1 from 'react';
|
|
|
3
3
|
import React__default, { ReactNode, ComponentType } from 'react';
|
|
4
4
|
import { ScaleTime, ScaleLinear } from 'd3-scale';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
-
import { d as IconName } from './RichTextEditor-
|
|
6
|
+
import { d as IconName } from './RichTextEditor-diZqy_s1.js';
|
|
7
7
|
import * as react_map_gl from 'react-map-gl';
|
|
8
8
|
import { ViewState, MapRef } from 'react-map-gl';
|
|
9
9
|
import { MeterProps as MeterProps$1 } from 'react-aria-components';
|
|
@@ -75,7 +75,15 @@ interface BooleanFormat extends BaseFormat {
|
|
|
75
75
|
type EnergyUnit = "Wh" | "kWh" | "MWh" | "GWh";
|
|
76
76
|
interface EnergyFormat extends BaseFormat {
|
|
77
77
|
type: "energy";
|
|
78
|
+
/** Display unit. If omitted, the formatter auto-scales (Wh → kWh → MWh → GWh). */
|
|
78
79
|
unit?: EnergyUnit;
|
|
80
|
+
/**
|
|
81
|
+
* The unit the source value is already in. Defaults to "Wh" — the formatter's
|
|
82
|
+
* historical assumption. Set this when feeding a value that's already in a
|
|
83
|
+
* larger unit (e.g. `state.latestKwhUsage` is kWh) so auto-scale and the
|
|
84
|
+
* `unit` switch interpret the magnitude correctly.
|
|
85
|
+
*/
|
|
86
|
+
sourceUnit?: EnergyUnit;
|
|
79
87
|
autoScale?: boolean;
|
|
80
88
|
decimals?: number;
|
|
81
89
|
}
|
|
@@ -289,7 +297,7 @@ interface ActionItem {
|
|
|
289
297
|
/**
|
|
290
298
|
* Visual variant of the action
|
|
291
299
|
*/
|
|
292
|
-
variant?: "default" | "destructive";
|
|
300
|
+
variant?: "primary" | "default" | "destructive";
|
|
293
301
|
/**
|
|
294
302
|
* Icon to display with the action
|
|
295
303
|
*/
|
|
@@ -669,31 +677,49 @@ interface CodeEditorProps {
|
|
|
669
677
|
*/
|
|
670
678
|
declare function CodeEditor({ value, readOnly, onChange, language, theme, height, width, className, lineHeight, minLines, maxLines, showLineNumbers, showGutter, fontSize, wrapEnabled, }: CodeEditorProps): react_jsx_runtime.JSX.Element;
|
|
671
679
|
|
|
672
|
-
declare const
|
|
673
|
-
readonly
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
680
|
+
declare const variantSizeMap: {
|
|
681
|
+
readonly heading: {
|
|
682
|
+
readonly sm: "text-heading-sm";
|
|
683
|
+
readonly md: "text-heading-md";
|
|
684
|
+
readonly lg: "text-heading-lg";
|
|
685
|
+
readonly xl: "text-heading-xl";
|
|
686
|
+
};
|
|
687
|
+
readonly display: {
|
|
688
|
+
readonly sm: "text-display-sm";
|
|
689
|
+
readonly md: "text-display-md";
|
|
690
|
+
readonly lg: "text-display-lg";
|
|
691
|
+
readonly xl: "text-display-xl";
|
|
692
|
+
};
|
|
678
693
|
};
|
|
679
694
|
declare const heightVariants: {
|
|
680
695
|
readonly page: "h-16 leading-[62px]";
|
|
681
696
|
};
|
|
682
|
-
type
|
|
697
|
+
type HeadingVariant = keyof typeof variantSizeMap;
|
|
698
|
+
type HeadingSize = keyof (typeof variantSizeMap)["heading"] | "xs";
|
|
683
699
|
type HeadingHeight = keyof typeof heightVariants;
|
|
684
700
|
/**
|
|
685
701
|
* Heading
|
|
686
702
|
*
|
|
687
|
-
* Typography component for page/section headings
|
|
703
|
+
* Typography component for page/section headings.
|
|
704
|
+
*
|
|
705
|
+
* - `variant="heading"` (default) uses the Inter heading scale — for page titles,
|
|
706
|
+
* section titles, card titles, and other product chrome.
|
|
707
|
+
* - `variant="display"` uses the display scale — reserved for brand moments
|
|
708
|
+
* (signup, marketing surfaces) and big-number KPIs.
|
|
709
|
+
*
|
|
710
|
+
* Both variants share the same `sm` / `md` / `lg` / `xl` size scale.
|
|
688
711
|
*/
|
|
689
712
|
interface HeadingProps {
|
|
690
713
|
tag?: React__default.ElementType;
|
|
714
|
+
/** Type scale to render in. Defaults to "heading". */
|
|
715
|
+
variant?: HeadingVariant;
|
|
716
|
+
/** Size within the chosen variant's scale. */
|
|
691
717
|
size?: HeadingSize;
|
|
692
718
|
height?: HeadingHeight;
|
|
693
719
|
className?: string;
|
|
694
720
|
children?: React__default.ReactNode;
|
|
695
721
|
}
|
|
696
|
-
declare function Heading({ tag: Tag, size, height, className, children }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
722
|
+
declare function Heading({ tag: Tag, variant, size, height, className, children, }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
697
723
|
|
|
698
724
|
interface LoaderProps {
|
|
699
725
|
/**
|
|
@@ -1599,6 +1625,8 @@ type SegmentOption = {
|
|
|
1599
1625
|
label: string;
|
|
1600
1626
|
icon?: IconName;
|
|
1601
1627
|
};
|
|
1628
|
+
type SegmentedControlVariant = "primary" | "subtle";
|
|
1629
|
+
type LegacySegmentedControlVariant = "default" | "brand" | "secondary";
|
|
1602
1630
|
interface SegmentedControlProps {
|
|
1603
1631
|
/**
|
|
1604
1632
|
* Array of segment options
|
|
@@ -1631,9 +1659,9 @@ interface SegmentedControlProps {
|
|
|
1631
1659
|
"aria-label"?: string;
|
|
1632
1660
|
/**
|
|
1633
1661
|
* Visual variant of the control
|
|
1634
|
-
* @default "
|
|
1662
|
+
* @default "subtle"
|
|
1635
1663
|
*/
|
|
1636
|
-
variant?:
|
|
1664
|
+
variant?: SegmentedControlVariant | LegacySegmentedControlVariant;
|
|
1637
1665
|
}
|
|
1638
1666
|
/**
|
|
1639
1667
|
* SegmentedControl
|
|
@@ -1643,13 +1671,20 @@ interface SegmentedControlProps {
|
|
|
1643
1671
|
*/
|
|
1644
1672
|
declare function SegmentedControl({ options, value, onChange, size, className, isDisabled, variant, "aria-label": ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
1645
1673
|
|
|
1674
|
+
type TextLinkVariant = "primary" | "secondary" | "muted" | "unstyled";
|
|
1675
|
+
type LegacyTextLinkVariant = "default" | "brand";
|
|
1646
1676
|
interface TextLinkProps {
|
|
1647
1677
|
href?: string;
|
|
1648
1678
|
children: ReactNode;
|
|
1649
1679
|
className?: string;
|
|
1650
1680
|
external?: boolean;
|
|
1651
1681
|
title?: string;
|
|
1652
|
-
|
|
1682
|
+
/**
|
|
1683
|
+
* Color treatment. Use `primary` for the main action link and `secondary`
|
|
1684
|
+
* for the standard inline/action link. `default` and `brand` are deprecated
|
|
1685
|
+
* aliases for `secondary` and `primary`, respectively.
|
|
1686
|
+
*/
|
|
1687
|
+
variant?: TextLinkVariant | LegacyTextLinkVariant;
|
|
1653
1688
|
onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
1654
1689
|
asButton?: boolean;
|
|
1655
1690
|
onPress?: () => void;
|
|
@@ -1860,10 +1895,10 @@ declare function getEntityLabel(entityType: EntityType, plural?: boolean): strin
|
|
|
1860
1895
|
* Supports multiple formats and automatically adds the color- prefix if needed
|
|
1861
1896
|
*
|
|
1862
1897
|
* @param variableName - CSS variable name in any of these formats:
|
|
1863
|
-
* - "brand
|
|
1864
|
-
* - "color-brand
|
|
1865
|
-
* - "--color-brand
|
|
1866
|
-
* - "var(--color-brand
|
|
1898
|
+
* - "action-brand" → resolves to --color-action-brand
|
|
1899
|
+
* - "color-action-brand" → resolves to --color-action-brand
|
|
1900
|
+
* - "--color-action-brand" → used as-is
|
|
1901
|
+
* - "var(--color-action-brand)" → unwrapped and used
|
|
1867
1902
|
* @returns Resolved color value or fallback
|
|
1868
1903
|
*/
|
|
1869
1904
|
declare const getResolvedColor: (variableName: string, fallback?: string) => string;
|