@phcdevworks/spectre-ui 0.0.5 → 0.2.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/README.md +82 -10
- package/dist/base.css +5 -11
- package/dist/components.css +218 -50
- package/dist/index.cjs +295 -77
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +44 -61
- package/dist/index.d.ts +44 -61
- package/dist/index.js +290 -79
- package/dist/index.js.map +1 -1
- package/dist/utilities.css +6 -6
- package/package.json +3 -3
package/dist/index.d.cts
CHANGED
|
@@ -1,103 +1,86 @@
|
|
|
1
1
|
import { Config } from 'tailwindcss';
|
|
2
2
|
import { SpectreTokens } from '@phcdevworks/spectre-tokens';
|
|
3
|
-
export { SpectreTokens,
|
|
3
|
+
export { SpectreTokens, default as spectreTokens } from '@phcdevworks/spectre-tokens';
|
|
4
4
|
|
|
5
|
-
declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/
|
|
6
|
-
declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/
|
|
7
|
-
declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/
|
|
5
|
+
declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/base.css";
|
|
6
|
+
declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/components.css";
|
|
7
|
+
declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/utilities.css";
|
|
8
8
|
declare const spectreStyles: {
|
|
9
|
+
index: string;
|
|
9
10
|
base: string;
|
|
10
11
|
components: string;
|
|
11
12
|
utilities: string;
|
|
12
13
|
};
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
type TailwindTheme = NonNullable<Config["theme"]>;
|
|
16
16
|
interface SpectreTailwindTheme {
|
|
17
|
-
theme:
|
|
17
|
+
theme: TailwindTheme;
|
|
18
18
|
}
|
|
19
19
|
interface CreateSpectreTailwindThemeOptions {
|
|
20
20
|
tokens: SpectreTokens;
|
|
21
21
|
overrides?: Partial<SpectreTokens>;
|
|
22
22
|
}
|
|
23
|
+
/**
|
|
24
|
+
* Minimal, type-safe theme mapper.
|
|
25
|
+
* Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).
|
|
26
|
+
*/
|
|
23
27
|
declare function createSpectreTailwindTheme(options: CreateSpectreTailwindThemeOptions): SpectreTailwindTheme;
|
|
24
28
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
29
|
+
declare const spectrePreset: Config;
|
|
30
|
+
|
|
31
|
+
declare const buttonVariants: readonly ["primary", "secondary", "ghost", "danger", "success"];
|
|
32
|
+
declare const buttonSizes: readonly ["sm", "md", "lg"];
|
|
33
|
+
type ButtonVariant = (typeof buttonVariants)[number];
|
|
34
|
+
type ButtonSize = (typeof buttonSizes)[number];
|
|
28
35
|
interface ButtonRecipeOptions {
|
|
29
36
|
variant?: ButtonVariant;
|
|
30
37
|
size?: ButtonSize;
|
|
31
|
-
tone?: ButtonTone;
|
|
32
38
|
fullWidth?: boolean;
|
|
33
39
|
loading?: boolean;
|
|
34
40
|
disabled?: boolean;
|
|
35
41
|
iconOnly?: boolean;
|
|
36
42
|
}
|
|
37
|
-
/**
|
|
38
|
-
* Generate Spectre button classes.
|
|
39
|
-
*
|
|
40
|
-
* Rules:
|
|
41
|
-
* - Base: "sp-btn"
|
|
42
|
-
* - Variant: "sp-btn--primary" / "sp-btn--secondary" / "sp-btn--ghost" / "sp-btn--danger"
|
|
43
|
-
* - default variant is "primary"
|
|
44
|
-
* - Size: "sp-btn--sm" / "sp-btn--md" / "sp-btn--lg"
|
|
45
|
-
* - default size is "md"
|
|
46
|
-
* - Tone: "sp-btn--tone-success" / "sp-btn--tone-warning" / "sp-btn--tone-danger"
|
|
47
|
-
* - default tone is "default" (no tone class)
|
|
48
|
-
* - fullWidth: add "sp-btn--full"
|
|
49
|
-
* - loading: add "sp-btn--loading"
|
|
50
|
-
* - disabled: add "sp-btn--disabled"
|
|
51
|
-
* - iconOnly: add "sp-btn--icon"
|
|
52
|
-
*
|
|
53
|
-
* Must return a single space-joined, trimmed class string.
|
|
54
|
-
*/
|
|
55
43
|
declare function getButtonClasses(opts?: ButtonRecipeOptions): string;
|
|
56
44
|
|
|
57
|
-
|
|
45
|
+
declare const cardVariants: readonly ["elevated", "flat", "outline", "ghost"];
|
|
46
|
+
type CardVariant = (typeof cardVariants)[number];
|
|
58
47
|
interface CardRecipeOptions {
|
|
59
48
|
variant?: CardVariant;
|
|
60
49
|
interactive?: boolean;
|
|
61
50
|
padded?: boolean;
|
|
62
51
|
fullHeight?: boolean;
|
|
63
52
|
}
|
|
64
|
-
/**
|
|
65
|
-
* Generate Spectre card classes.
|
|
66
|
-
*
|
|
67
|
-
* Rules:
|
|
68
|
-
* - Base class: "sp-card"
|
|
69
|
-
* - Variant (default: elevated):
|
|
70
|
-
* - "sp-card--elevated"
|
|
71
|
-
* - "sp-card--outline"
|
|
72
|
-
* - "sp-card--ghost"
|
|
73
|
-
* - interactive: add "sp-card--interactive"
|
|
74
|
-
* - padded: add "sp-card--padded"
|
|
75
|
-
* - fullHeight: add "sp-card--full"
|
|
76
|
-
*/
|
|
77
53
|
declare function getCardClasses(opts?: CardRecipeOptions): string;
|
|
78
54
|
|
|
79
|
-
|
|
80
|
-
|
|
55
|
+
declare const inputStates: readonly ["default", "error", "success", "disabled"];
|
|
56
|
+
declare const inputSizes: readonly ["sm", "md", "lg"];
|
|
57
|
+
type InputState = (typeof inputStates)[number];
|
|
58
|
+
type InputSize = (typeof inputSizes)[number];
|
|
81
59
|
interface InputRecipeOptions {
|
|
82
60
|
state?: InputState;
|
|
83
61
|
size?: InputSize;
|
|
84
62
|
fullWidth?: boolean;
|
|
85
63
|
}
|
|
86
|
-
/**
|
|
87
|
-
* Generate Spectre input classes.
|
|
88
|
-
*
|
|
89
|
-
* Rules:
|
|
90
|
-
* - Base class: "sp-input"
|
|
91
|
-
* - State:
|
|
92
|
-
* - "default" => no state modifier
|
|
93
|
-
* - "error" => "sp-input--error"
|
|
94
|
-
* - "success" => "sp-input--success"
|
|
95
|
-
* - Size (default: md):
|
|
96
|
-
* - "sp-input--sm"
|
|
97
|
-
* - "sp-input--md"
|
|
98
|
-
* - "sp-input--lg"
|
|
99
|
-
* - fullWidth: add "sp-input--full"
|
|
100
|
-
*/
|
|
101
64
|
declare function getInputClasses(opts?: InputRecipeOptions): string;
|
|
102
65
|
|
|
103
|
-
|
|
66
|
+
declare const badgeVariants: readonly ["primary", "success", "warning", "danger"];
|
|
67
|
+
declare const badgeSizes: readonly ["sm", "md", "lg"];
|
|
68
|
+
type BadgeVariant = (typeof badgeVariants)[number];
|
|
69
|
+
type BadgeSize = (typeof badgeSizes)[number];
|
|
70
|
+
interface BadgeRecipeOptions {
|
|
71
|
+
variant?: BadgeVariant;
|
|
72
|
+
size?: BadgeSize;
|
|
73
|
+
}
|
|
74
|
+
declare function getBadgeClasses(opts?: BadgeRecipeOptions): string;
|
|
75
|
+
|
|
76
|
+
declare const iconBoxVariants: readonly ["primary", "success", "warning", "danger", "info"];
|
|
77
|
+
declare const iconBoxSizes: readonly ["sm", "md", "lg"];
|
|
78
|
+
type IconBoxVariant = (typeof iconBoxVariants)[number];
|
|
79
|
+
type IconBoxSize = (typeof iconBoxSizes)[number];
|
|
80
|
+
interface IconBoxRecipeOptions {
|
|
81
|
+
variant?: IconBoxVariant;
|
|
82
|
+
size?: IconBoxSize;
|
|
83
|
+
}
|
|
84
|
+
declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
|
|
85
|
+
|
|
86
|
+
export { type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type CreateSpectreTailwindThemeOptions, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type SpectreTailwindTheme, createSpectreTailwindTheme, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreUtilitiesStylesPath };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,103 +1,86 @@
|
|
|
1
1
|
import { Config } from 'tailwindcss';
|
|
2
2
|
import { SpectreTokens } from '@phcdevworks/spectre-tokens';
|
|
3
|
-
export { SpectreTokens,
|
|
3
|
+
export { SpectreTokens, default as spectreTokens } from '@phcdevworks/spectre-tokens';
|
|
4
4
|
|
|
5
|
-
declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/
|
|
6
|
-
declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/
|
|
7
|
-
declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/
|
|
5
|
+
declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/base.css";
|
|
6
|
+
declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/components.css";
|
|
7
|
+
declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/utilities.css";
|
|
8
8
|
declare const spectreStyles: {
|
|
9
|
+
index: string;
|
|
9
10
|
base: string;
|
|
10
11
|
components: string;
|
|
11
12
|
utilities: string;
|
|
12
13
|
};
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
type TailwindTheme = NonNullable<Config["theme"]>;
|
|
16
16
|
interface SpectreTailwindTheme {
|
|
17
|
-
theme:
|
|
17
|
+
theme: TailwindTheme;
|
|
18
18
|
}
|
|
19
19
|
interface CreateSpectreTailwindThemeOptions {
|
|
20
20
|
tokens: SpectreTokens;
|
|
21
21
|
overrides?: Partial<SpectreTokens>;
|
|
22
22
|
}
|
|
23
|
+
/**
|
|
24
|
+
* Minimal, type-safe theme mapper.
|
|
25
|
+
* Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).
|
|
26
|
+
*/
|
|
23
27
|
declare function createSpectreTailwindTheme(options: CreateSpectreTailwindThemeOptions): SpectreTailwindTheme;
|
|
24
28
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
29
|
+
declare const spectrePreset: Config;
|
|
30
|
+
|
|
31
|
+
declare const buttonVariants: readonly ["primary", "secondary", "ghost", "danger", "success"];
|
|
32
|
+
declare const buttonSizes: readonly ["sm", "md", "lg"];
|
|
33
|
+
type ButtonVariant = (typeof buttonVariants)[number];
|
|
34
|
+
type ButtonSize = (typeof buttonSizes)[number];
|
|
28
35
|
interface ButtonRecipeOptions {
|
|
29
36
|
variant?: ButtonVariant;
|
|
30
37
|
size?: ButtonSize;
|
|
31
|
-
tone?: ButtonTone;
|
|
32
38
|
fullWidth?: boolean;
|
|
33
39
|
loading?: boolean;
|
|
34
40
|
disabled?: boolean;
|
|
35
41
|
iconOnly?: boolean;
|
|
36
42
|
}
|
|
37
|
-
/**
|
|
38
|
-
* Generate Spectre button classes.
|
|
39
|
-
*
|
|
40
|
-
* Rules:
|
|
41
|
-
* - Base: "sp-btn"
|
|
42
|
-
* - Variant: "sp-btn--primary" / "sp-btn--secondary" / "sp-btn--ghost" / "sp-btn--danger"
|
|
43
|
-
* - default variant is "primary"
|
|
44
|
-
* - Size: "sp-btn--sm" / "sp-btn--md" / "sp-btn--lg"
|
|
45
|
-
* - default size is "md"
|
|
46
|
-
* - Tone: "sp-btn--tone-success" / "sp-btn--tone-warning" / "sp-btn--tone-danger"
|
|
47
|
-
* - default tone is "default" (no tone class)
|
|
48
|
-
* - fullWidth: add "sp-btn--full"
|
|
49
|
-
* - loading: add "sp-btn--loading"
|
|
50
|
-
* - disabled: add "sp-btn--disabled"
|
|
51
|
-
* - iconOnly: add "sp-btn--icon"
|
|
52
|
-
*
|
|
53
|
-
* Must return a single space-joined, trimmed class string.
|
|
54
|
-
*/
|
|
55
43
|
declare function getButtonClasses(opts?: ButtonRecipeOptions): string;
|
|
56
44
|
|
|
57
|
-
|
|
45
|
+
declare const cardVariants: readonly ["elevated", "flat", "outline", "ghost"];
|
|
46
|
+
type CardVariant = (typeof cardVariants)[number];
|
|
58
47
|
interface CardRecipeOptions {
|
|
59
48
|
variant?: CardVariant;
|
|
60
49
|
interactive?: boolean;
|
|
61
50
|
padded?: boolean;
|
|
62
51
|
fullHeight?: boolean;
|
|
63
52
|
}
|
|
64
|
-
/**
|
|
65
|
-
* Generate Spectre card classes.
|
|
66
|
-
*
|
|
67
|
-
* Rules:
|
|
68
|
-
* - Base class: "sp-card"
|
|
69
|
-
* - Variant (default: elevated):
|
|
70
|
-
* - "sp-card--elevated"
|
|
71
|
-
* - "sp-card--outline"
|
|
72
|
-
* - "sp-card--ghost"
|
|
73
|
-
* - interactive: add "sp-card--interactive"
|
|
74
|
-
* - padded: add "sp-card--padded"
|
|
75
|
-
* - fullHeight: add "sp-card--full"
|
|
76
|
-
*/
|
|
77
53
|
declare function getCardClasses(opts?: CardRecipeOptions): string;
|
|
78
54
|
|
|
79
|
-
|
|
80
|
-
|
|
55
|
+
declare const inputStates: readonly ["default", "error", "success", "disabled"];
|
|
56
|
+
declare const inputSizes: readonly ["sm", "md", "lg"];
|
|
57
|
+
type InputState = (typeof inputStates)[number];
|
|
58
|
+
type InputSize = (typeof inputSizes)[number];
|
|
81
59
|
interface InputRecipeOptions {
|
|
82
60
|
state?: InputState;
|
|
83
61
|
size?: InputSize;
|
|
84
62
|
fullWidth?: boolean;
|
|
85
63
|
}
|
|
86
|
-
/**
|
|
87
|
-
* Generate Spectre input classes.
|
|
88
|
-
*
|
|
89
|
-
* Rules:
|
|
90
|
-
* - Base class: "sp-input"
|
|
91
|
-
* - State:
|
|
92
|
-
* - "default" => no state modifier
|
|
93
|
-
* - "error" => "sp-input--error"
|
|
94
|
-
* - "success" => "sp-input--success"
|
|
95
|
-
* - Size (default: md):
|
|
96
|
-
* - "sp-input--sm"
|
|
97
|
-
* - "sp-input--md"
|
|
98
|
-
* - "sp-input--lg"
|
|
99
|
-
* - fullWidth: add "sp-input--full"
|
|
100
|
-
*/
|
|
101
64
|
declare function getInputClasses(opts?: InputRecipeOptions): string;
|
|
102
65
|
|
|
103
|
-
|
|
66
|
+
declare const badgeVariants: readonly ["primary", "success", "warning", "danger"];
|
|
67
|
+
declare const badgeSizes: readonly ["sm", "md", "lg"];
|
|
68
|
+
type BadgeVariant = (typeof badgeVariants)[number];
|
|
69
|
+
type BadgeSize = (typeof badgeSizes)[number];
|
|
70
|
+
interface BadgeRecipeOptions {
|
|
71
|
+
variant?: BadgeVariant;
|
|
72
|
+
size?: BadgeSize;
|
|
73
|
+
}
|
|
74
|
+
declare function getBadgeClasses(opts?: BadgeRecipeOptions): string;
|
|
75
|
+
|
|
76
|
+
declare const iconBoxVariants: readonly ["primary", "success", "warning", "danger", "info"];
|
|
77
|
+
declare const iconBoxSizes: readonly ["sm", "md", "lg"];
|
|
78
|
+
type IconBoxVariant = (typeof iconBoxVariants)[number];
|
|
79
|
+
type IconBoxSize = (typeof iconBoxSizes)[number];
|
|
80
|
+
interface IconBoxRecipeOptions {
|
|
81
|
+
variant?: IconBoxVariant;
|
|
82
|
+
size?: IconBoxSize;
|
|
83
|
+
}
|
|
84
|
+
declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
|
|
85
|
+
|
|
86
|
+
export { type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type CreateSpectreTailwindThemeOptions, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type SpectreTailwindTheme, createSpectreTailwindTheme, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreUtilitiesStylesPath };
|