@phcdevworks/spectre-ui 0.0.1 → 0.0.2

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 (11) hide show
  1. package/README.md +120 -30
  2. package/dist/base.css +36 -13
  3. package/dist/components.css +128 -99
  4. package/dist/index.cjs +121 -155
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +86 -52
  7. package/dist/index.d.ts +86 -52
  8. package/dist/index.js +120 -148
  9. package/dist/index.js.map +1 -1
  10. package/dist/utilities.css +3 -3
  11. package/package.json +11 -7
package/dist/index.cjs CHANGED
@@ -1,172 +1,141 @@
1
1
  'use strict';
2
2
 
3
- var tokens = require('@phcdevworks/spectre-tokens');
3
+ var spectreTokens = require('@phcdevworks/spectre-tokens');
4
4
 
5
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
6
-
7
- var tokens__default = /*#__PURE__*/_interopDefault(tokens);
5
+ // src/css-constants.ts
6
+ var spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
7
+ var spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
8
+ var spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
9
+ var spectreStyles = {
10
+ base: spectreBaseStylesPath,
11
+ components: spectreComponentsStylesPath,
12
+ utilities: spectreUtilitiesStylesPath
13
+ };
8
14
 
9
- // src/tokens.ts
10
- var spectreTokens = tokens__default.default;
11
- var spectreTailwindTheme = tokens.tailwindTheme;
12
- var spectreTailwindPreset = tokens.tailwindPreset;
13
- var createSpectreTailwindTheme = (source = spectreTokens) => tokens.createTailwindTheme(source);
14
- var createSpectreCssVariableMap = (source = spectreTokens, options) => tokens.createCssVariableMap(source, options);
15
- var generateSpectreCssVariables = (source = spectreTokens, options) => tokens.generateCssVariables(source, options);
15
+ // src/tailwind/theme.ts
16
+ function createSpectreTailwindTheme(options) {
17
+ const { tokens, overrides } = options;
18
+ const mergedTokens = {
19
+ ...tokens,
20
+ ...overrides ?? {}
21
+ };
22
+ const theme2 = {
23
+ // Safely map core token groups into Tailwind theme fields.
24
+ // Use `as any` where necessary to avoid overfitting types right now.
25
+ colors: mergedTokens.colors ?? {},
26
+ spacing: mergedTokens.spacing ?? {},
27
+ borderRadius: mergedTokens.radii ?? {},
28
+ boxShadow: mergedTokens.shadows ?? {},
29
+ fontFamily: mergedTokens.typography?.families ?? {}
30
+ };
31
+ return { theme: theme2 };
32
+ }
16
33
 
17
34
  // src/tailwind/preset.ts
18
- var readScaleValue = (scale, key) => {
19
- const value = scale[key];
20
- if (value == null) {
21
- throw new Error(`Missing Spectre token for key: ${String(key)}`);
22
- }
23
- return value;
24
- };
25
- var readColorValue = (scale, shade) => {
26
- const scaleValue = spectreTokens.colors[scale];
27
- if (!scaleValue) {
28
- throw new Error(`Missing Spectre color scale: ${scale}`);
29
- }
30
- const value = scaleValue[shade];
31
- if (!value) {
32
- throw new Error(`Missing shade ${String(shade)} for ${String(scale)}`);
33
- }
34
- return value;
35
- };
36
- var componentRadii = {
37
- btn: readScaleValue(spectreTokens.radii, "md"),
38
- input: readScaleValue(spectreTokens.radii, "md"),
39
- card: readScaleValue(spectreTokens.radii, "lg"),
40
- pill: readScaleValue(spectreTokens.radii, "pill")
41
- };
42
- var componentShadows = {
43
- soft: readScaleValue(spectreTokens.shadows, "md"),
44
- card: readScaleValue(spectreTokens.shadows, "lg")
45
- };
46
- var spacingShortcuts = {
47
- gutter: readScaleValue(spectreTokens.spacing, "lg"),
48
- section: readScaleValue(spectreTokens.spacing, "2xl"),
49
- stack: readScaleValue(spectreTokens.spacing, "md")
50
- };
51
- var componentColors = {
52
- surface: {
53
- DEFAULT: readColorValue("neutral", "50"),
54
- muted: readColorValue("neutral", "100"),
55
- strong: readColorValue("neutral", "900")
56
- },
57
- intent: {
58
- info: readColorValue("info", "500"),
59
- success: readColorValue("success", "500"),
60
- warning: readColorValue("warning", "500"),
61
- danger: readColorValue("error", "500")
62
- }
63
- };
35
+ var { theme } = createSpectreTailwindTheme({
36
+ tokens: spectreTokens.tokens
37
+ });
64
38
  var spectrePreset = {
39
+ // Required for Tailwind's Config type with exactOptionalPropertyTypes
65
40
  content: [],
66
- theme: {
67
- ...spectreTailwindTheme,
68
- extend: {
69
- borderRadius: componentRadii,
70
- boxShadow: componentShadows,
71
- spacing: spacingShortcuts,
72
- colors: componentColors
73
- }
74
- }
75
- };
76
-
77
- // src/components/button.config.ts
78
- var buttonConfig = {
79
- baseClass: "sp-btn",
80
- variants: {
81
- primary: "sp-btn-primary",
82
- secondary: "sp-btn-secondary",
83
- ghost: "sp-btn-ghost",
84
- success: "sp-btn-success",
85
- danger: "sp-btn-danger"
86
- },
87
- sizes: {
88
- sm: "sp-btn-sm",
89
- md: "sp-btn-md",
90
- lg: "sp-btn-lg"
91
- },
92
- states: {
93
- default: "",
94
- hover: "sp-btn-hover",
95
- active: "sp-btn-active",
96
- disabled: "sp-btn-disabled"
97
- }
41
+ theme: theme ?? {},
42
+ plugins: []
98
43
  };
99
44
 
100
45
  // src/recipes/button.ts
101
- var getButtonClasses = ({
102
- variant = "primary",
103
- size = "md",
104
- state = "default",
105
- extraClasses = ""
106
- } = {}) => {
107
- const classes = [
108
- buttonConfig.baseClass,
109
- buttonConfig.variants[variant],
110
- buttonConfig.sizes[size],
111
- buttonConfig.states[state],
112
- extraClasses
113
- ].filter(Boolean);
114
- return classes.join(" ").trim();
115
- };
116
-
117
- // src/components/input.config.ts
118
- var inputConfig = {
119
- baseClass: "sp-input",
120
- states: {
121
- default: "",
122
- focus: "sp-input-focus",
123
- invalid: "sp-input-error",
124
- valid: "sp-input-success",
125
- disabled: "sp-input-disabled"
46
+ function getButtonClasses(opts = {}) {
47
+ const {
48
+ variant = "primary",
49
+ size = "md",
50
+ tone = "default",
51
+ fullWidth = false,
52
+ loading = false,
53
+ disabled = false,
54
+ iconOnly = false
55
+ } = opts;
56
+ const classes = [];
57
+ classes.push("sp-btn");
58
+ const variantMap = {
59
+ primary: "sp-btn--primary",
60
+ secondary: "sp-btn--secondary",
61
+ ghost: "sp-btn--ghost",
62
+ danger: "sp-btn--danger"
63
+ };
64
+ classes.push(variantMap[variant]);
65
+ const sizeMap = {
66
+ sm: "sp-btn--sm",
67
+ md: "sp-btn--md",
68
+ lg: "sp-btn--lg"
69
+ };
70
+ classes.push(sizeMap[size]);
71
+ if (tone !== "default") {
72
+ const toneMap = {
73
+ success: "sp-btn--tone-success",
74
+ warning: "sp-btn--tone-warning",
75
+ danger: "sp-btn--tone-danger"
76
+ };
77
+ classes.push(toneMap[tone]);
126
78
  }
127
- };
128
-
129
- // src/recipes/input.ts
130
- var getInputClasses = ({
131
- state = "default",
132
- extraClasses = ""
133
- } = {}) => {
134
- const classes = [inputConfig.baseClass, inputConfig.states[state], extraClasses].filter(Boolean);
135
- return classes.join(" ").trim();
136
- };
137
-
138
- // src/components/card.config.ts
139
- var cardConfig = {
140
- baseClass: "sp-card",
141
- variants: {
142
- base: "",
143
- elevated: "sp-card-elevated",
144
- flat: "sp-card-flat"
145
- }
146
- };
79
+ if (fullWidth) classes.push("sp-btn--full");
80
+ if (loading) classes.push("sp-btn--loading");
81
+ if (disabled) classes.push("sp-btn--disabled");
82
+ if (iconOnly) classes.push("sp-btn--icon");
83
+ return classes.filter(Boolean).join(" ").trim();
84
+ }
147
85
 
148
86
  // src/recipes/card.ts
149
- var getCardClasses = ({
150
- variant = "base",
151
- extraClasses = ""
152
- } = {}) => {
153
- const classes = [cardConfig.baseClass, cardConfig.variants[variant], extraClasses].filter(Boolean);
154
- return classes.join(" ").trim();
155
- };
87
+ function getCardClasses(opts = {}) {
88
+ const {
89
+ variant = "elevated",
90
+ interactive = false,
91
+ padded = false,
92
+ fullHeight = false
93
+ } = opts;
94
+ const classes = [];
95
+ classes.push("sp-card");
96
+ const variantMap = {
97
+ elevated: "sp-card--elevated",
98
+ outline: "sp-card--outline",
99
+ ghost: "sp-card--ghost"
100
+ };
101
+ classes.push(variantMap[variant]);
102
+ if (interactive) classes.push("sp-card--interactive");
103
+ if (padded) classes.push("sp-card--padded");
104
+ if (fullHeight) classes.push("sp-card--full");
105
+ return classes.filter(Boolean).join(" ").trim();
106
+ }
156
107
 
157
- // src/index.ts
158
- var spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
159
- var spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
160
- var spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
161
- var spectreStyles = {
162
- base: spectreBaseStylesPath,
163
- components: spectreComponentsStylesPath,
164
- utilities: spectreUtilitiesStylesPath
165
- };
108
+ // src/recipes/input.ts
109
+ function getInputClasses(opts = {}) {
110
+ const {
111
+ state = "default",
112
+ size = "md",
113
+ fullWidth = false
114
+ } = opts;
115
+ const classes = [];
116
+ classes.push("sp-input");
117
+ if (state === "error") {
118
+ classes.push("sp-input--error");
119
+ } else if (state === "success") {
120
+ classes.push("sp-input--success");
121
+ }
122
+ const sizeMap = {
123
+ sm: "sp-input--sm",
124
+ md: "sp-input--md",
125
+ lg: "sp-input--lg"
126
+ };
127
+ classes.push(sizeMap[size]);
128
+ if (fullWidth) {
129
+ classes.push("sp-input--full");
130
+ }
131
+ return classes.filter(Boolean).join(" ").trim();
132
+ }
166
133
 
167
- exports.createSpectreCssVariableMap = createSpectreCssVariableMap;
134
+ Object.defineProperty(exports, "spectreTokens", {
135
+ enumerable: true,
136
+ get: function () { return spectreTokens.tokens; }
137
+ });
168
138
  exports.createSpectreTailwindTheme = createSpectreTailwindTheme;
169
- exports.generateSpectreCssVariables = generateSpectreCssVariables;
170
139
  exports.getButtonClasses = getButtonClasses;
171
140
  exports.getCardClasses = getCardClasses;
172
141
  exports.getInputClasses = getInputClasses;
@@ -174,9 +143,6 @@ exports.spectreBaseStylesPath = spectreBaseStylesPath;
174
143
  exports.spectreComponentsStylesPath = spectreComponentsStylesPath;
175
144
  exports.spectrePreset = spectrePreset;
176
145
  exports.spectreStyles = spectreStyles;
177
- exports.spectreTailwindPreset = spectreTailwindPreset;
178
- exports.spectreTailwindTheme = spectreTailwindTheme;
179
- exports.spectreTokens = spectreTokens;
180
146
  exports.spectreUtilitiesStylesPath = spectreUtilitiesStylesPath;
181
147
  //# sourceMappingURL=index.cjs.map
182
148
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tokens.ts","../src/tailwind/preset.ts","../src/components/button.config.ts","../src/recipes/button.ts","../src/components/input.config.ts","../src/recipes/input.ts","../src/components/card.config.ts","../src/recipes/card.ts","../src/index.ts"],"names":["tokens","tailwindTheme","tailwindPreset","baseCreateTailwindTheme","baseCreateCssVariableMap","baseGenerateCssVariables"],"mappings":"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","file":"index.cjs","sourcesContent":["import tokens, {\n createCssVariableMap as baseCreateCssVariableMap,\n createTailwindTheme as baseCreateTailwindTheme,\n generateCssVariables as baseGenerateCssVariables,\n tailwindPreset,\n tailwindTheme,\n type AccessibilityTokens,\n type AnimationEntry,\n type ButtonStateTokens,\n type FormStateTokens,\n type TailwindTheme,\n type TokenScale,\n type Tokens,\n type TransitionTokens,\n type TypographyTokens,\n} from '@phcdevworks/spectre-tokens';\n\nexport const spectreTokens = tokens;\nexport const spectreTailwindTheme = tailwindTheme;\nexport const spectreTailwindPreset = tailwindPreset;\n\nexport type SpectreTokens = Tokens;\nexport type SpectreTailwindTheme = TailwindTheme;\nexport type SpectreTokenScale = TokenScale;\nexport type SpectreTransitionTokens = TransitionTokens;\nexport type SpectreTypographyTokens = TypographyTokens;\nexport type SpectreAccessibilityTokens = AccessibilityTokens;\nexport type SpectreAnimationEntry = AnimationEntry;\nexport type SpectreButtonStateTokens = ButtonStateTokens;\nexport type SpectreFormStateTokens = FormStateTokens;\n\nexport interface SpectreCssVariableOptions {\n selector?: string;\n prefix?: string;\n}\n\nexport type SpectreCssVariableMap = Record<string, string>;\n\nexport const createSpectreTailwindTheme = (\n source: SpectreTokens = spectreTokens,\n): SpectreTailwindTheme => baseCreateTailwindTheme(source);\n\nexport const createSpectreCssVariableMap = (\n source: SpectreTokens = spectreTokens,\n options?: SpectreCssVariableOptions,\n): SpectreCssVariableMap => baseCreateCssVariableMap(source, options);\n\nexport const generateSpectreCssVariables = (\n source: SpectreTokens = spectreTokens,\n options?: SpectreCssVariableOptions,\n): string => baseGenerateCssVariables(source, options);\n","import type { Config } from 'tailwindcss';\nimport { spectreTailwindTheme, spectreTokens } from '../tokens';\n\nconst readScaleValue = <T extends Record<string, string>>(scale: T, key: keyof T): string => {\n const value = scale[key];\n if (value == null) {\n throw new Error(`Missing Spectre token for key: ${String(key)}`);\n }\n\n return value;\n};\n\nconst readColorValue = (scale: keyof typeof spectreTokens.colors, shade: keyof Record<string, string>): string => {\n const scaleValue = spectreTokens.colors[scale];\n if (!scaleValue) {\n throw new Error(`Missing Spectre color scale: ${scale as string}`);\n }\n\n const value = scaleValue[shade as string];\n if (!value) {\n throw new Error(`Missing shade ${String(shade)} for ${String(scale)}`);\n }\n\n return value;\n};\n\nconst componentRadii = {\n btn: readScaleValue(spectreTokens.radii, 'md'),\n input: readScaleValue(spectreTokens.radii, 'md'),\n card: readScaleValue(spectreTokens.radii, 'lg'),\n pill: readScaleValue(spectreTokens.radii, 'pill'),\n};\n\nconst componentShadows = {\n soft: readScaleValue(spectreTokens.shadows, 'md'),\n card: readScaleValue(spectreTokens.shadows, 'lg'),\n};\n\nconst spacingShortcuts = {\n gutter: readScaleValue(spectreTokens.spacing, 'lg'),\n section: readScaleValue(spectreTokens.spacing, '2xl'),\n stack: readScaleValue(spectreTokens.spacing, 'md'),\n};\n\nconst componentColors = {\n surface: {\n DEFAULT: readColorValue('neutral', '50'),\n muted: readColorValue('neutral', '100'),\n strong: readColorValue('neutral', '900'),\n },\n intent: {\n info: readColorValue('info', '500'),\n success: readColorValue('success', '500'),\n warning: readColorValue('warning', '500'),\n danger: readColorValue('error', '500'),\n },\n};\n\nexport const spectrePreset: Config = {\n content: [],\n theme: {\n ...spectreTailwindTheme,\n extend: {\n borderRadius: componentRadii,\n boxShadow: componentShadows,\n spacing: spacingShortcuts,\n colors: componentColors,\n },\n },\n};\n","export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonState = 'default' | 'hover' | 'active' | 'disabled';\n\nexport interface ButtonClassConfig {\n baseClass: string;\n variants: Record<ButtonVariant, string>;\n sizes: Record<ButtonSize, string>;\n states: Record<ButtonState, string>;\n}\n\nexport const buttonConfig: ButtonClassConfig = {\n baseClass: 'sp-btn',\n variants: {\n primary: 'sp-btn-primary',\n secondary: 'sp-btn-secondary',\n ghost: 'sp-btn-ghost',\n success: 'sp-btn-success',\n danger: 'sp-btn-danger',\n },\n sizes: {\n sm: 'sp-btn-sm',\n md: 'sp-btn-md',\n lg: 'sp-btn-lg',\n },\n states: {\n default: '',\n hover: 'sp-btn-hover',\n active: 'sp-btn-active',\n disabled: 'sp-btn-disabled',\n },\n};\n","import { buttonConfig, type ButtonSize, type ButtonState, type ButtonVariant } from '../components/button.config';\n\nexport interface GetButtonClassesOptions {\n variant?: ButtonVariant;\n size?: ButtonSize;\n state?: ButtonState;\n extraClasses?: string;\n}\n\nexport const getButtonClasses = ({\n variant = 'primary',\n size = 'md',\n state = 'default',\n extraClasses = '',\n}: GetButtonClassesOptions = {}): string => {\n const classes = [\n buttonConfig.baseClass,\n buttonConfig.variants[variant],\n buttonConfig.sizes[size],\n buttonConfig.states[state],\n extraClasses,\n ].filter(Boolean);\n\n return classes.join(' ').trim();\n};\n","export type InputState = 'default' | 'focus' | 'invalid' | 'valid' | 'disabled';\n\nexport interface InputClassConfig {\n baseClass: string;\n states: Record<InputState, string>;\n}\n\nexport const inputConfig: InputClassConfig = {\n baseClass: 'sp-input',\n states: {\n default: '',\n focus: 'sp-input-focus',\n invalid: 'sp-input-error',\n valid: 'sp-input-success',\n disabled: 'sp-input-disabled',\n },\n};\n","import { inputConfig, type InputState } from '../components/input.config';\n\nexport interface GetInputClassesOptions {\n state?: InputState;\n extraClasses?: string;\n}\n\nexport const getInputClasses = ({\n state = 'default',\n extraClasses = '',\n}: GetInputClassesOptions = {}): string => {\n const classes = [inputConfig.baseClass, inputConfig.states[state], extraClasses].filter(Boolean);\n return classes.join(' ').trim();\n};\n","export type CardVariant = 'base' | 'elevated' | 'flat';\n\nexport interface CardClassConfig {\n baseClass: string;\n variants: Record<CardVariant, string>;\n}\n\nexport const cardConfig: CardClassConfig = {\n baseClass: 'sp-card',\n variants: {\n base: '',\n elevated: 'sp-card-elevated',\n flat: 'sp-card-flat',\n },\n};\n","import { cardConfig, type CardVariant } from '../components/card.config';\n\nexport interface GetCardClassesOptions {\n variant?: CardVariant;\n extraClasses?: string;\n}\n\nexport const getCardClasses = ({\n variant = 'base',\n extraClasses = '',\n}: GetCardClassesOptions = {}): string => {\n const classes = [cardConfig.baseClass, cardConfig.variants[variant], extraClasses].filter(Boolean);\n return classes.join(' ').trim();\n};\n","export {\n spectreTokens,\n spectreTailwindPreset,\n spectreTailwindTheme,\n createSpectreCssVariableMap,\n createSpectreTailwindTheme,\n generateSpectreCssVariables,\n} from './tokens';\n\nexport type {\n SpectreAccessibilityTokens,\n SpectreAnimationEntry,\n SpectreButtonStateTokens,\n SpectreFormStateTokens,\n SpectreTailwindTheme,\n SpectreTokenScale,\n SpectreTokens,\n SpectreTransitionTokens,\n SpectreTypographyTokens,\n} from './tokens';\n\nexport { spectrePreset } from './tailwind';\n\nexport {\n getButtonClasses,\n type GetButtonClassesOptions,\n} from './recipes/button';\nexport { getInputClasses, type GetInputClassesOptions } from './recipes/input';\nexport { getCardClasses, type GetCardClassesOptions } from './recipes/card';\n\nexport type {\n ButtonSize,\n ButtonState,\n ButtonVariant,\n} from './components/button.config';\nexport type { InputState } from './components/input.config';\nexport type { CardVariant } from './components/card.config';\n\nexport const spectreBaseStylesPath = '@phcdevworks/spectre-ui/dist/base.css';\nexport const spectreComponentsStylesPath = '@phcdevworks/spectre-ui/dist/components.css';\nexport const spectreUtilitiesStylesPath = '@phcdevworks/spectre-ui/dist/utilities.css';\n\n/**\n * Structured helper for consumers that prefer namespaced CSS entry points.\n */\nexport const spectreStyles = {\n base: spectreBaseStylesPath,\n components: spectreComponentsStylesPath,\n utilities: spectreUtilitiesStylesPath,\n} as const;\n"]}
1
+ {"version":3,"sources":["../src/css-constants.ts","../src/tailwind/theme.ts","../src/tailwind/preset.ts","../src/recipes/button.ts","../src/recipes/card.ts","../src/recipes/input.ts"],"names":["theme","spectreTokens"],"mappings":"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","file":"index.cjs","sourcesContent":["export const spectreBaseStylesPath = \"@phcdevworks/spectre-ui/dist/base.css\";\nexport const spectreComponentsStylesPath = \"@phcdevworks/spectre-ui/dist/components.css\";\nexport const spectreUtilitiesStylesPath = \"@phcdevworks/spectre-ui/dist/utilities.css\";\n\nexport const spectreStyles = {\n base: spectreBaseStylesPath,\n components: spectreComponentsStylesPath,\n utilities: spectreUtilitiesStylesPath,\n};\n","import type { Config as TailwindConfig } from 'tailwindcss';\nimport type { SpectreTokens } from '../tokens';\n\nexport interface SpectreTailwindTheme {\n theme: TailwindConfig['theme'];\n}\n\nexport interface CreateSpectreTailwindThemeOptions {\n tokens: SpectreTokens;\n overrides?: Partial<SpectreTokens>;\n}\n\nexport function createSpectreTailwindTheme(\n options: CreateSpectreTailwindThemeOptions,\n): SpectreTailwindTheme {\n const { tokens, overrides } = options;\n\n // Shallow merge overrides into tokens\n const mergedTokens: SpectreTokens = {\n ...tokens,\n ...(overrides ?? {}),\n };\n\n const theme: TailwindConfig['theme'] = {\n // Safely map core token groups into Tailwind theme fields.\n // Use `as any` where necessary to avoid overfitting types right now.\n colors: (mergedTokens as any).colors ?? {},\n spacing: (mergedTokens as any).spacing ?? {},\n borderRadius: (mergedTokens as any).radii ?? {},\n boxShadow: (mergedTokens as any).shadows ?? {},\n fontFamily: (mergedTokens as any).typography?.families ?? {},\n };\n\n return { theme };\n}\n","import type { Config as TailwindConfig } from 'tailwindcss';\nimport { spectreTokens } from '../tokens';\nimport { createSpectreTailwindTheme } from './theme';\n\nconst { theme } = createSpectreTailwindTheme({\n tokens: spectreTokens,\n});\n\nexport const spectrePreset: TailwindConfig = {\n // Required for Tailwind's Config type with exactOptionalPropertyTypes\n content: [],\n theme: theme ?? {},\n plugins: [],\n};\n\nexport const spectreTailwindPreset: TailwindConfig = spectrePreset;\n","export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonTone = 'default' | 'success' | 'warning' | 'danger';\n\nexport interface ButtonRecipeOptions {\n variant?: ButtonVariant;\n size?: ButtonSize;\n tone?: ButtonTone;\n fullWidth?: boolean;\n loading?: boolean;\n disabled?: boolean;\n iconOnly?: boolean;\n}\n\n/**\n * Generate Spectre button classes.\n *\n * Rules:\n * - Base: \"sp-btn\"\n * - Variant: \"sp-btn--primary\" / \"sp-btn--secondary\" / \"sp-btn--ghost\" / \"sp-btn--danger\"\n * - default variant is \"primary\"\n * - Size: \"sp-btn--sm\" / \"sp-btn--md\" / \"sp-btn--lg\"\n * - default size is \"md\"\n * - Tone: \"sp-btn--tone-success\" / \"sp-btn--tone-warning\" / \"sp-btn--tone-danger\"\n * - default tone is \"default\" (no tone class)\n * - fullWidth: add \"sp-btn--full\"\n * - loading: add \"sp-btn--loading\"\n * - disabled: add \"sp-btn--disabled\"\n * - iconOnly: add \"sp-btn--icon\"\n *\n * Must return a single space-joined, trimmed class string.\n */\nexport function getButtonClasses(opts: ButtonRecipeOptions = {}): string {\n const {\n variant = 'primary',\n size = 'md',\n tone = 'default',\n fullWidth = false,\n loading = false,\n disabled = false,\n iconOnly = false,\n } = opts;\n\n const classes: string[] = [];\n\n // Base\n classes.push('sp-btn');\n\n // Variant\n const variantMap: Record<ButtonVariant, string> = {\n primary: 'sp-btn--primary',\n secondary: 'sp-btn--secondary',\n ghost: 'sp-btn--ghost',\n danger: 'sp-btn--danger',\n };\n classes.push(variantMap[variant]);\n\n // Size\n const sizeMap: Record<ButtonSize, string> = {\n sm: 'sp-btn--sm',\n md: 'sp-btn--md',\n lg: 'sp-btn--lg',\n };\n classes.push(sizeMap[size]);\n\n // Tone (optional)\n if (tone !== 'default') {\n const toneMap: Record<Exclude<ButtonTone, 'default'>, string> = {\n success: 'sp-btn--tone-success',\n warning: 'sp-btn--tone-warning',\n danger: 'sp-btn--tone-danger',\n };\n classes.push(toneMap[tone as Exclude<ButtonTone, 'default'>]);\n }\n\n // Flags\n if (fullWidth) classes.push('sp-btn--full');\n if (loading) classes.push('sp-btn--loading');\n if (disabled) classes.push('sp-btn--disabled');\n if (iconOnly) classes.push('sp-btn--icon');\n\n // Final class string\n return classes.filter(Boolean).join(' ').trim();\n}\n","export type CardVariant = 'elevated' | 'outline' | 'ghost';\n\nexport interface CardRecipeOptions {\n variant?: CardVariant;\n interactive?: boolean; // hover/focus styles\n padded?: boolean; // apply default padding\n fullHeight?: boolean;\n}\n\n/**\n * Generate Spectre card classes.\n *\n * Rules:\n * - Base class: \"sp-card\"\n * - Variant (default: elevated):\n * - \"sp-card--elevated\"\n * - \"sp-card--outline\"\n * - \"sp-card--ghost\"\n * - interactive: add \"sp-card--interactive\"\n * - padded: add \"sp-card--padded\"\n * - fullHeight: add \"sp-card--full\"\n */\nexport function getCardClasses(opts: CardRecipeOptions = {}): string {\n const {\n variant = 'elevated',\n interactive = false,\n padded = false,\n fullHeight = false,\n } = opts;\n\n const classes: string[] = [];\n\n // Base\n classes.push('sp-card');\n\n // Variant\n const variantMap: Record<CardVariant, string> = {\n elevated: 'sp-card--elevated',\n outline: 'sp-card--outline',\n ghost: 'sp-card--ghost',\n };\n classes.push(variantMap[variant]);\n\n // Flags\n if (interactive) classes.push('sp-card--interactive');\n if (padded) classes.push('sp-card--padded');\n if (fullHeight) classes.push('sp-card--full');\n\n return classes.filter(Boolean).join(' ').trim();\n}\n","export type InputState = 'default' | 'error' | 'success';\nexport type InputSize = 'sm' | 'md' | 'lg';\n\nexport interface InputRecipeOptions {\n state?: InputState;\n size?: InputSize;\n fullWidth?: boolean;\n}\n\n/**\n * Generate Spectre input classes.\n *\n * Rules:\n * - Base class: \"sp-input\"\n * - State:\n * - \"default\" => no state modifier\n * - \"error\" => \"sp-input--error\"\n * - \"success\" => \"sp-input--success\"\n * - Size (default: md):\n * - \"sp-input--sm\"\n * - \"sp-input--md\"\n * - \"sp-input--lg\"\n * - fullWidth: add \"sp-input--full\"\n */\nexport function getInputClasses(opts: InputRecipeOptions = {}): string {\n const {\n state = 'default',\n size = 'md',\n fullWidth = false,\n } = opts;\n\n const classes: string[] = [];\n\n // Base\n classes.push('sp-input');\n\n // State\n if (state === 'error') {\n classes.push('sp-input--error');\n } else if (state === 'success') {\n classes.push('sp-input--success');\n }\n\n // Size\n const sizeMap: Record<InputSize, string> = {\n sm: 'sp-input--sm',\n md: 'sp-input--md',\n lg: 'sp-input--lg',\n };\n classes.push(sizeMap[size]);\n\n // Flags\n if (fullWidth) {\n classes.push('sp-input--full');\n }\n\n return classes.filter(Boolean).join(' ').trim();\n}\n"]}
package/dist/index.d.cts CHANGED
@@ -1,69 +1,103 @@
1
- import { Tokens, TailwindTheme, AccessibilityTokens, AnimationEntry, ButtonStateTokens, FormStateTokens, TokenScale, TransitionTokens, TypographyTokens } from '@phcdevworks/spectre-tokens';
2
1
  import { Config } from 'tailwindcss';
2
+ import { SpectreTokens } from '@phcdevworks/spectre-tokens';
3
+ export { SpectreTokens, tokens as spectreTokens } from '@phcdevworks/spectre-tokens';
3
4
 
4
- declare const spectreTokens: Tokens;
5
- declare const spectreTailwindTheme: TailwindTheme;
6
- declare const spectreTailwindPreset: {
7
- theme: TailwindTheme;
5
+ declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
6
+ declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
7
+ declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
8
+ declare const spectreStyles: {
9
+ base: string;
10
+ components: string;
11
+ utilities: string;
8
12
  };
9
- type SpectreTokens = Tokens;
10
- type SpectreTailwindTheme = TailwindTheme;
11
- type SpectreTokenScale = TokenScale;
12
- type SpectreTransitionTokens = TransitionTokens;
13
- type SpectreTypographyTokens = TypographyTokens;
14
- type SpectreAccessibilityTokens = AccessibilityTokens;
15
- type SpectreAnimationEntry = AnimationEntry;
16
- type SpectreButtonStateTokens = ButtonStateTokens;
17
- type SpectreFormStateTokens = FormStateTokens;
18
- interface SpectreCssVariableOptions {
19
- selector?: string;
20
- prefix?: string;
21
- }
22
- type SpectreCssVariableMap = Record<string, string>;
23
- declare const createSpectreTailwindTheme: (source?: SpectreTokens) => SpectreTailwindTheme;
24
- declare const createSpectreCssVariableMap: (source?: SpectreTokens, options?: SpectreCssVariableOptions) => SpectreCssVariableMap;
25
- declare const generateSpectreCssVariables: (source?: SpectreTokens, options?: SpectreCssVariableOptions) => string;
26
13
 
27
14
  declare const spectrePreset: Config;
28
15
 
29
- type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger';
30
- type ButtonSize = 'sm' | 'md' | 'lg';
31
- type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
16
+ interface SpectreTailwindTheme {
17
+ theme: Config['theme'];
18
+ }
19
+ interface CreateSpectreTailwindThemeOptions {
20
+ tokens: SpectreTokens;
21
+ overrides?: Partial<SpectreTokens>;
22
+ }
23
+ declare function createSpectreTailwindTheme(options: CreateSpectreTailwindThemeOptions): SpectreTailwindTheme;
32
24
 
33
- interface GetButtonClassesOptions {
25
+ type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
26
+ type ButtonSize = 'sm' | 'md' | 'lg';
27
+ type ButtonTone = 'default' | 'success' | 'warning' | 'danger';
28
+ interface ButtonRecipeOptions {
34
29
  variant?: ButtonVariant;
35
30
  size?: ButtonSize;
36
- state?: ButtonState;
37
- extraClasses?: string;
38
- }
39
- declare const getButtonClasses: ({ variant, size, state, extraClasses, }?: GetButtonClassesOptions) => string;
40
-
41
- type InputState = 'default' | 'focus' | 'invalid' | 'valid' | 'disabled';
42
-
43
- interface GetInputClassesOptions {
44
- state?: InputState;
45
- extraClasses?: string;
31
+ tone?: ButtonTone;
32
+ fullWidth?: boolean;
33
+ loading?: boolean;
34
+ disabled?: boolean;
35
+ iconOnly?: boolean;
46
36
  }
47
- declare const getInputClasses: ({ state, extraClasses, }?: GetInputClassesOptions) => string;
48
-
49
- type CardVariant = 'base' | 'elevated' | 'flat';
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
+ declare function getButtonClasses(opts?: ButtonRecipeOptions): string;
50
56
 
51
- interface GetCardClassesOptions {
57
+ type CardVariant = 'elevated' | 'outline' | 'ghost';
58
+ interface CardRecipeOptions {
52
59
  variant?: CardVariant;
53
- extraClasses?: string;
60
+ interactive?: boolean;
61
+ padded?: boolean;
62
+ fullHeight?: boolean;
54
63
  }
55
- declare const getCardClasses: ({ variant, extraClasses, }?: GetCardClassesOptions) => string;
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
+ declare function getCardClasses(opts?: CardRecipeOptions): string;
56
78
 
57
- declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
58
- declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
59
- declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
79
+ type InputState = 'default' | 'error' | 'success';
80
+ type InputSize = 'sm' | 'md' | 'lg';
81
+ interface InputRecipeOptions {
82
+ state?: InputState;
83
+ size?: InputSize;
84
+ fullWidth?: boolean;
85
+ }
60
86
  /**
61
- * Structured helper for consumers that prefer namespaced CSS entry points.
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"
62
100
  */
63
- declare const spectreStyles: {
64
- readonly base: "@phcdevworks/spectre-ui/dist/base.css";
65
- readonly components: "@phcdevworks/spectre-ui/dist/components.css";
66
- readonly utilities: "@phcdevworks/spectre-ui/dist/utilities.css";
67
- };
101
+ declare function getInputClasses(opts?: InputRecipeOptions): string;
68
102
 
69
- export { type ButtonSize, type ButtonState, type ButtonVariant, type CardVariant, type GetButtonClassesOptions, type GetCardClassesOptions, type GetInputClassesOptions, type InputState, type SpectreAccessibilityTokens, type SpectreAnimationEntry, type SpectreButtonStateTokens, type SpectreFormStateTokens, type SpectreTailwindTheme, type SpectreTokenScale, type SpectreTokens, type SpectreTransitionTokens, type SpectreTypographyTokens, createSpectreCssVariableMap, createSpectreTailwindTheme, generateSpectreCssVariables, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreTailwindPreset, spectreTailwindTheme, spectreTokens, spectreUtilitiesStylesPath };
103
+ export { type ButtonRecipeOptions, type ButtonSize, type ButtonTone, type ButtonVariant, type CardRecipeOptions, type CardVariant, type CreateSpectreTailwindThemeOptions, type InputRecipeOptions, type InputSize, type InputState, type SpectreTailwindTheme, createSpectreTailwindTheme, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreUtilitiesStylesPath };