@attrus-ds/core 0.2.0 → 1.0.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.
- package/LICENSE +27 -27
- package/dist/assets/flags/Brazil-rounded.svg +15 -15
- package/dist/assets/flags/Brazil-square.svg +16 -16
- package/dist/assets/flags/Chile-rounded.svg +10 -10
- package/dist/assets/flags/Chile-square.svg +10 -10
- package/dist/assets/flags/Colombia-rounded.svg +9 -9
- package/dist/assets/flags/Colombia-square.svg +9 -9
- package/dist/assets/flags/EUA-rounded.svg +10 -10
- package/dist/assets/flags/EUA-square.svg +10 -10
- package/dist/assets/flags/EUR-rounded.svg +8 -8
- package/dist/assets/flags/EUR-square.svg +8 -8
- package/dist/assets/flags/Mexico-rounded.svg +18 -18
- package/dist/assets/flags/Mexico-square.svg +18 -18
- package/dist/assets/icon-attrus-dark.svg +2 -2
- package/dist/assets/icon-attrus-light.svg +2 -2
- package/dist/assets/logo-attrus-dark.svg +7 -7
- package/dist/assets/logo-attrus-light.svg +7 -7
- package/dist/css/components/buttons.css +301 -301
- package/dist/css/components/callout.css +195 -195
- package/dist/css/components/cards.css +272 -272
- package/dist/css/components/combobox.css +319 -319
- package/dist/css/components/empty-states.css +61 -61
- package/dist/css/components/inputs.css +975 -975
- package/dist/css/components/number-input.css +138 -138
- package/dist/css/components/overlays.css +374 -374
- package/dist/css/components/primitives.css +314 -314
- package/dist/css/components/sidebar.css +179 -179
- package/dist/css/components/smart-search.css +91 -91
- package/dist/css/components/status-pills.css +207 -207
- package/dist/css/components/stepper.css +309 -309
- package/dist/css/components/table.css +602 -602
- package/dist/css/components/tabs.css +319 -319
- package/dist/css/components/toast.css +243 -243
- package/dist/css/components/tooltip.css +231 -231
- package/dist/css/components/topbar.css +148 -148
- package/dist/css/tokens.css +713 -666
- package/dist/react/AppSidebar/AppSidebar.d.ts +50 -50
- package/dist/react/AppSidebar/AppSidebar.tsx +197 -197
- package/dist/react/AppTopbar/AppTopbar.d.ts +58 -58
- package/dist/react/AppTopbar/AppTopbar.tsx +203 -203
- package/dist/react/Atoms/Atoms.d.ts +149 -149
- package/dist/react/Atoms/Atoms.tsx +407 -407
- package/dist/react/Button/Button.d.ts +25 -25
- package/dist/react/Button/Button.tsx +83 -83
- package/dist/react/Callout/Callout.d.ts +29 -29
- package/dist/react/Callout/Callout.tsx +98 -98
- package/dist/react/Card/Card.d.ts +38 -38
- package/dist/react/Card/Card.tsx +93 -93
- package/dist/react/Combobox/Combobox.d.ts +52 -52
- package/dist/react/Combobox/Combobox.tsx +254 -254
- package/dist/react/DataTable/DataTable.d.ts +81 -81
- package/dist/react/DataTable/DataTable.tsx +308 -308
- package/dist/react/Drawer/Drawer.d.ts +35 -35
- package/dist/react/Drawer/Drawer.tsx +226 -226
- package/dist/react/Input/Input.d.ts +155 -155
- package/dist/react/Input/Input.tsx +478 -478
- package/dist/react/Modal/Modal.d.ts +27 -27
- package/dist/react/Modal/Modal.tsx +173 -173
- package/dist/react/NumberInput/NumberInput.d.ts +25 -25
- package/dist/react/NumberInput/NumberInput.tsx +117 -117
- package/dist/react/Pill/Pill.d.ts +31 -31
- package/dist/react/Pill/Pill.tsx +104 -104
- package/dist/react/SearchPill/SearchPill.d.ts +14 -14
- package/dist/react/SearchPill/SearchPill.tsx +40 -40
- package/dist/react/SmartSearch/SmartSearch.d.ts +65 -65
- package/dist/react/SmartSearch/SmartSearch.tsx +271 -271
- package/dist/react/Stepper/Stepper.d.ts +25 -25
- package/dist/react/Stepper/Stepper.tsx +94 -94
- package/dist/react/Tabs/Tabs.d.ts +32 -32
- package/dist/react/Tabs/Tabs.tsx +147 -147
- package/dist/react/Toast/Toast.d.ts +30 -30
- package/dist/react/Toast/Toast.tsx +94 -94
- package/dist/react/Tooltip/Tooltip.d.ts +23 -23
- package/dist/react/Tooltip/Tooltip.tsx +80 -80
- package/dist/react/ZeroState/ZeroState.d.ts +17 -17
- package/dist/react/ZeroState/ZeroState.tsx +45 -45
- package/dist/react/index.ts +35 -35
- package/dist/tokens/attrus-tokens.flat.json +1234 -1234
- package/dist/tokens/attrus-tokens.json +1089 -1089
- package/package.json +66 -64
|
@@ -1,149 +1,149 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
export type MoneySize = 'sm' | 'md' | 'lg' | 'xl' | 'display';
|
|
4
|
-
export type MoneyTone = 'pos' | 'neg' | 'muted';
|
|
5
|
-
export interface MoneyProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
6
|
-
cur?: string;
|
|
7
|
-
amount: React.ReactNode;
|
|
8
|
-
frac?: React.ReactNode;
|
|
9
|
-
size?: MoneySize;
|
|
10
|
-
tone?: MoneyTone;
|
|
11
|
-
}
|
|
12
|
-
export declare const Money: React.FC<MoneyProps>;
|
|
13
|
-
|
|
14
|
-
export type MetricSize = 'sm' | 'md' | 'lg';
|
|
15
|
-
export type MetricTone = 'pos' | 'neg';
|
|
16
|
-
export interface MetricProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
17
|
-
cur?: string;
|
|
18
|
-
amount: React.ReactNode;
|
|
19
|
-
frac?: React.ReactNode;
|
|
20
|
-
size?: MetricSize;
|
|
21
|
-
tone?: MetricTone;
|
|
22
|
-
}
|
|
23
|
-
export declare const Metric: React.FC<MetricProps>;
|
|
24
|
-
|
|
25
|
-
export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
26
|
-
export type AvatarTone = 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
|
|
27
|
-
export type AvatarDot = boolean | 'busy' | 'away' | 'off';
|
|
28
|
-
export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
29
|
-
name?: string;
|
|
30
|
-
src?: string;
|
|
31
|
-
size?: AvatarSize;
|
|
32
|
-
tone?: AvatarTone;
|
|
33
|
-
dot?: AvatarDot;
|
|
34
|
-
}
|
|
35
|
-
export declare const Avatar: React.FC<AvatarProps>;
|
|
36
|
-
|
|
37
|
-
export interface AvatarGroupProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
38
|
-
more?: number;
|
|
39
|
-
size?: AvatarSize;
|
|
40
|
-
}
|
|
41
|
-
export declare const AvatarGroup: React.FC<AvatarGroupProps>;
|
|
42
|
-
|
|
43
|
-
export type EyebrowSize = 'xs' | 'sm' | 'md';
|
|
44
|
-
export type EyebrowTone = 'muted' | 'secondary' | 'default' | 'brand' | 'inverse';
|
|
45
|
-
export interface EyebrowProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
46
|
-
size?: EyebrowSize;
|
|
47
|
-
tone?: EyebrowTone;
|
|
48
|
-
icon?: React.ReactNode;
|
|
49
|
-
}
|
|
50
|
-
export declare const Eyebrow: React.FC<EyebrowProps>;
|
|
51
|
-
|
|
52
|
-
export type FlagCountry = 'BR' | 'MX' | 'CO' | 'CL' | 'US' | 'EU';
|
|
53
|
-
export type FlagShape = 'rounded' | 'square';
|
|
54
|
-
export interface FlagProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
|
|
55
|
-
country: FlagCountry;
|
|
56
|
-
size?: number;
|
|
57
|
-
shape?: FlagShape;
|
|
58
|
-
assetsBase?: string;
|
|
59
|
-
}
|
|
60
|
-
export declare const Flag: React.FC<FlagProps>;
|
|
61
|
-
|
|
62
|
-
export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
|
|
63
|
-
/** Lucide name — kebab-case ("arrow-left-right") or PascalCase. */
|
|
64
|
-
name: string;
|
|
65
|
-
size?: number;
|
|
66
|
-
stroke?: number;
|
|
67
|
-
}
|
|
68
|
-
export declare const Icon: React.FC<IconProps>;
|
|
69
|
-
|
|
70
|
-
export type DividerWeight = 'default' | 'subtle' | 'strong';
|
|
71
|
-
export interface DividerProps extends React.HTMLAttributes<HTMLElement> {
|
|
72
|
-
weight?: DividerWeight;
|
|
73
|
-
dashed?: boolean;
|
|
74
|
-
/** Vertical hairline for inline rows (1px × 1em). */
|
|
75
|
-
vertical?: boolean;
|
|
76
|
-
/** Midline label — renders the `.divider-labelled` layout. */
|
|
77
|
-
label?: React.ReactNode;
|
|
78
|
-
}
|
|
79
|
-
export declare const Divider: React.FC<DividerProps>;
|
|
80
|
-
|
|
81
|
-
export interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
82
|
-
/** Selected state (aria-pressed). */
|
|
83
|
-
selected?: boolean;
|
|
84
|
-
icon?: React.ReactNode;
|
|
85
|
-
/** Trailing dropdown indicator (`.chip-chevron`). */
|
|
86
|
-
chevron?: boolean;
|
|
87
|
-
}
|
|
88
|
-
export declare const FilterChip: React.FC<FilterChipProps>;
|
|
89
|
-
|
|
90
|
-
export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
91
|
-
/** 0–100. */
|
|
92
|
-
value: number;
|
|
93
|
-
/** Fill color — any token/var. */
|
|
94
|
-
fill?: string;
|
|
95
|
-
/** Track height px — feeds `--progress-h` (default 6). */
|
|
96
|
-
height?: number;
|
|
97
|
-
}
|
|
98
|
-
export declare const ProgressBar: React.FC<ProgressBarProps>;
|
|
99
|
-
|
|
100
|
-
export interface DescTermProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
101
|
-
label: React.ReactNode;
|
|
102
|
-
children?: React.ReactNode;
|
|
103
|
-
}
|
|
104
|
-
export declare const DescTerm: React.FC<DescTermProps>;
|
|
105
|
-
|
|
106
|
-
export type StatDeltaDirection = 'up' | 'down' | 'flat';
|
|
107
|
-
export interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
108
|
-
/** Mono overline label. */
|
|
109
|
-
label: React.ReactNode;
|
|
110
|
-
/** Big tabular figure. */
|
|
111
|
-
value: React.ReactNode;
|
|
112
|
-
/** Delta text, e.g. "+8.2%". Arrow glyph derives from deltaDirection. */
|
|
113
|
-
delta?: React.ReactNode;
|
|
114
|
-
/** up=success ↑ · down=danger ↓ · flat=muted. Default: 'flat'. */
|
|
115
|
-
deltaDirection?: StatDeltaDirection;
|
|
116
|
-
/** Footnote line (.stat-foot). */
|
|
117
|
-
foot?: React.ReactNode;
|
|
118
|
-
/** Leading icon beside the label. */
|
|
119
|
-
icon?: React.ReactNode;
|
|
120
|
-
/** No tile chrome — for use inside a Card (.stat.is-bare). */
|
|
121
|
-
bare?: boolean;
|
|
122
|
-
/** Dense paddings (.stat-compact). */
|
|
123
|
-
compact?: boolean;
|
|
124
|
-
}
|
|
125
|
-
export declare const Stat: React.FC<StatProps>;
|
|
126
|
-
|
|
127
|
-
export interface StatRowProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
128
|
-
/** Equal columns — feeds `--stat-cols`. Default 3. */
|
|
129
|
-
cols?: number;
|
|
130
|
-
}
|
|
131
|
-
export declare const StatRow: React.FC<StatRowProps>;
|
|
132
|
-
|
|
133
|
-
export declare const Atoms: {
|
|
134
|
-
Money: React.FC<MoneyProps>;
|
|
135
|
-
Metric: React.FC<MetricProps>;
|
|
136
|
-
Avatar: React.FC<AvatarProps>;
|
|
137
|
-
AvatarGroup: React.FC<AvatarGroupProps>;
|
|
138
|
-
Eyebrow: React.FC<EyebrowProps>;
|
|
139
|
-
Flag: React.FC<FlagProps>;
|
|
140
|
-
Icon: React.FC<IconProps>;
|
|
141
|
-
Divider: React.FC<DividerProps>;
|
|
142
|
-
FilterChip: React.FC<FilterChipProps>;
|
|
143
|
-
ProgressBar: React.FC<ProgressBarProps>;
|
|
144
|
-
DescTerm: React.FC<DescTermProps>;
|
|
145
|
-
Stat: React.FC<StatProps>;
|
|
146
|
-
StatRow: React.FC<StatRowProps>;
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
export default Atoms;
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
export type MoneySize = 'sm' | 'md' | 'lg' | 'xl' | 'display';
|
|
4
|
+
export type MoneyTone = 'pos' | 'neg' | 'muted';
|
|
5
|
+
export interface MoneyProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
6
|
+
cur?: string;
|
|
7
|
+
amount: React.ReactNode;
|
|
8
|
+
frac?: React.ReactNode;
|
|
9
|
+
size?: MoneySize;
|
|
10
|
+
tone?: MoneyTone;
|
|
11
|
+
}
|
|
12
|
+
export declare const Money: React.FC<MoneyProps>;
|
|
13
|
+
|
|
14
|
+
export type MetricSize = 'sm' | 'md' | 'lg';
|
|
15
|
+
export type MetricTone = 'pos' | 'neg';
|
|
16
|
+
export interface MetricProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
17
|
+
cur?: string;
|
|
18
|
+
amount: React.ReactNode;
|
|
19
|
+
frac?: React.ReactNode;
|
|
20
|
+
size?: MetricSize;
|
|
21
|
+
tone?: MetricTone;
|
|
22
|
+
}
|
|
23
|
+
export declare const Metric: React.FC<MetricProps>;
|
|
24
|
+
|
|
25
|
+
export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
26
|
+
export type AvatarTone = 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
|
|
27
|
+
export type AvatarDot = boolean | 'busy' | 'away' | 'off';
|
|
28
|
+
export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
29
|
+
name?: string;
|
|
30
|
+
src?: string;
|
|
31
|
+
size?: AvatarSize;
|
|
32
|
+
tone?: AvatarTone;
|
|
33
|
+
dot?: AvatarDot;
|
|
34
|
+
}
|
|
35
|
+
export declare const Avatar: React.FC<AvatarProps>;
|
|
36
|
+
|
|
37
|
+
export interface AvatarGroupProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
38
|
+
more?: number;
|
|
39
|
+
size?: AvatarSize;
|
|
40
|
+
}
|
|
41
|
+
export declare const AvatarGroup: React.FC<AvatarGroupProps>;
|
|
42
|
+
|
|
43
|
+
export type EyebrowSize = 'xs' | 'sm' | 'md';
|
|
44
|
+
export type EyebrowTone = 'muted' | 'secondary' | 'default' | 'brand' | 'inverse';
|
|
45
|
+
export interface EyebrowProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
46
|
+
size?: EyebrowSize;
|
|
47
|
+
tone?: EyebrowTone;
|
|
48
|
+
icon?: React.ReactNode;
|
|
49
|
+
}
|
|
50
|
+
export declare const Eyebrow: React.FC<EyebrowProps>;
|
|
51
|
+
|
|
52
|
+
export type FlagCountry = 'BR' | 'MX' | 'CO' | 'CL' | 'US' | 'EU';
|
|
53
|
+
export type FlagShape = 'rounded' | 'square';
|
|
54
|
+
export interface FlagProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
|
|
55
|
+
country: FlagCountry;
|
|
56
|
+
size?: number;
|
|
57
|
+
shape?: FlagShape;
|
|
58
|
+
assetsBase?: string;
|
|
59
|
+
}
|
|
60
|
+
export declare const Flag: React.FC<FlagProps>;
|
|
61
|
+
|
|
62
|
+
export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
|
|
63
|
+
/** Lucide name — kebab-case ("arrow-left-right") or PascalCase. */
|
|
64
|
+
name: string;
|
|
65
|
+
size?: number;
|
|
66
|
+
stroke?: number;
|
|
67
|
+
}
|
|
68
|
+
export declare const Icon: React.FC<IconProps>;
|
|
69
|
+
|
|
70
|
+
export type DividerWeight = 'default' | 'subtle' | 'strong';
|
|
71
|
+
export interface DividerProps extends React.HTMLAttributes<HTMLElement> {
|
|
72
|
+
weight?: DividerWeight;
|
|
73
|
+
dashed?: boolean;
|
|
74
|
+
/** Vertical hairline for inline rows (1px × 1em). */
|
|
75
|
+
vertical?: boolean;
|
|
76
|
+
/** Midline label — renders the `.divider-labelled` layout. */
|
|
77
|
+
label?: React.ReactNode;
|
|
78
|
+
}
|
|
79
|
+
export declare const Divider: React.FC<DividerProps>;
|
|
80
|
+
|
|
81
|
+
export interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
82
|
+
/** Selected state (aria-pressed). */
|
|
83
|
+
selected?: boolean;
|
|
84
|
+
icon?: React.ReactNode;
|
|
85
|
+
/** Trailing dropdown indicator (`.chip-chevron`). */
|
|
86
|
+
chevron?: boolean;
|
|
87
|
+
}
|
|
88
|
+
export declare const FilterChip: React.FC<FilterChipProps>;
|
|
89
|
+
|
|
90
|
+
export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
91
|
+
/** 0–100. */
|
|
92
|
+
value: number;
|
|
93
|
+
/** Fill color — any token/var. */
|
|
94
|
+
fill?: string;
|
|
95
|
+
/** Track height px — feeds `--progress-h` (default 6). */
|
|
96
|
+
height?: number;
|
|
97
|
+
}
|
|
98
|
+
export declare const ProgressBar: React.FC<ProgressBarProps>;
|
|
99
|
+
|
|
100
|
+
export interface DescTermProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
101
|
+
label: React.ReactNode;
|
|
102
|
+
children?: React.ReactNode;
|
|
103
|
+
}
|
|
104
|
+
export declare const DescTerm: React.FC<DescTermProps>;
|
|
105
|
+
|
|
106
|
+
export type StatDeltaDirection = 'up' | 'down' | 'flat';
|
|
107
|
+
export interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
108
|
+
/** Mono overline label. */
|
|
109
|
+
label: React.ReactNode;
|
|
110
|
+
/** Big tabular figure. */
|
|
111
|
+
value: React.ReactNode;
|
|
112
|
+
/** Delta text, e.g. "+8.2%". Arrow glyph derives from deltaDirection. */
|
|
113
|
+
delta?: React.ReactNode;
|
|
114
|
+
/** up=success ↑ · down=danger ↓ · flat=muted. Default: 'flat'. */
|
|
115
|
+
deltaDirection?: StatDeltaDirection;
|
|
116
|
+
/** Footnote line (.stat-foot). */
|
|
117
|
+
foot?: React.ReactNode;
|
|
118
|
+
/** Leading icon beside the label. */
|
|
119
|
+
icon?: React.ReactNode;
|
|
120
|
+
/** No tile chrome — for use inside a Card (.stat.is-bare). */
|
|
121
|
+
bare?: boolean;
|
|
122
|
+
/** Dense paddings (.stat-compact). */
|
|
123
|
+
compact?: boolean;
|
|
124
|
+
}
|
|
125
|
+
export declare const Stat: React.FC<StatProps>;
|
|
126
|
+
|
|
127
|
+
export interface StatRowProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
128
|
+
/** Equal columns — feeds `--stat-cols`. Default 3. */
|
|
129
|
+
cols?: number;
|
|
130
|
+
}
|
|
131
|
+
export declare const StatRow: React.FC<StatRowProps>;
|
|
132
|
+
|
|
133
|
+
export declare const Atoms: {
|
|
134
|
+
Money: React.FC<MoneyProps>;
|
|
135
|
+
Metric: React.FC<MetricProps>;
|
|
136
|
+
Avatar: React.FC<AvatarProps>;
|
|
137
|
+
AvatarGroup: React.FC<AvatarGroupProps>;
|
|
138
|
+
Eyebrow: React.FC<EyebrowProps>;
|
|
139
|
+
Flag: React.FC<FlagProps>;
|
|
140
|
+
Icon: React.FC<IconProps>;
|
|
141
|
+
Divider: React.FC<DividerProps>;
|
|
142
|
+
FilterChip: React.FC<FilterChipProps>;
|
|
143
|
+
ProgressBar: React.FC<ProgressBarProps>;
|
|
144
|
+
DescTerm: React.FC<DescTermProps>;
|
|
145
|
+
Stat: React.FC<StatProps>;
|
|
146
|
+
StatRow: React.FC<StatRowProps>;
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
export default Atoms;
|