dynim-react 1.0.45 → 1.0.47

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 (4) hide show
  1. package/dist/theme.d.ts +43 -63
  2. package/dist/theme.d.ts.map +1 -1
  3. package/dist/theme.js +78 -99
  4. package/package.json +1 -1
package/dist/theme.d.ts CHANGED
@@ -7,51 +7,39 @@
7
7
  * Example API response:
8
8
  * ```json
9
9
  * {
10
- * "accent": "#007bff",
11
- * "bgPrimary": "#1a1a1a",
12
- * "textPrimary": "#ffffff"
10
+ * "accent": "#4CAF50",
11
+ * "builderBg": "#000000",
12
+ * "chatAccent": "#8b5cf6"
13
13
  * }
14
14
  * ```
15
15
  *
16
- * CSS variables are automatically generated and can be overridden:
16
+ * CSS variables are automatically generated and can be used in components:
17
17
  * ```css
18
- * :root {
19
- * --dynim-accent: #007bff;
20
- * --dynim-bg-primary: #1a1a1a;
18
+ * .builder-bar {
19
+ * background: var(--dynim-builder-bg);
20
+ * color: var(--dynim-builder-text);
21
21
  * }
22
22
  * ```
23
23
  */
24
24
  export interface DynimTheme {
25
25
  accent?: string;
26
26
  accentHover?: string;
27
- bgPrimary?: string;
28
- bgSecondary?: string;
29
- bgTertiary?: string;
30
- textPrimary?: string;
31
- textSecondary?: string;
32
- textMuted?: string;
33
- border?: string;
34
- success?: string;
35
- successBg?: string;
36
- error?: string;
37
- errorBg?: string;
38
- warning?: string;
39
- warningBg?: string;
40
- fontFamily?: string;
41
- fontFamilyMono?: string;
42
- fontSize?: string;
43
- fontSizeSm?: string;
44
- fontSizeXs?: string;
45
- lineHeight?: string;
46
- spacingXs?: string;
47
- spacingSm?: string;
48
- spacingMd?: string;
49
- spacingLg?: string;
50
- radiusSm?: string;
51
- radiusMd?: string;
52
- radiusLg?: string;
53
- shadow?: string;
54
- shadowLg?: string;
27
+ builderBg?: string;
28
+ builderText?: string;
29
+ builderFont?: string;
30
+ builderRadius?: string;
31
+ builderOpacity?: string;
32
+ chatAccent?: string;
33
+ chatBg?: string;
34
+ chatText?: string;
35
+ chatFont?: string;
36
+ chatRadius?: string;
37
+ chatOpacity?: string;
38
+ selectionColor?: string;
39
+ hoverColor?: string;
40
+ selectionRadius?: string;
41
+ selectionOpacity?: string;
42
+ hoverOpacity?: string;
55
43
  }
56
44
  /**
57
45
  * Default theme values
@@ -67,33 +55,25 @@ export declare function generateThemeCSS(theme?: DynimTheme): string;
67
55
  export declare const themeVars: {
68
56
  readonly accent: "var(--dynim-accent)";
69
57
  readonly accentHover: "var(--dynim-accent-hover)";
70
- readonly bgPrimary: "var(--dynim-bg-primary)";
71
- readonly bgSecondary: "var(--dynim-bg-secondary)";
72
- readonly bgTertiary: "var(--dynim-bg-tertiary)";
73
- readonly textPrimary: "var(--dynim-text-primary)";
74
- readonly textSecondary: "var(--dynim-text-secondary)";
75
- readonly textMuted: "var(--dynim-text-muted)";
76
- readonly border: "var(--dynim-border)";
77
- readonly success: "var(--dynim-success)";
78
- readonly successBg: "var(--dynim-success-bg)";
79
- readonly error: "var(--dynim-error)";
80
- readonly errorBg: "var(--dynim-error-bg)";
81
- readonly warning: "var(--dynim-warning)";
82
- readonly warningBg: "var(--dynim-warning-bg)";
83
- readonly fontFamily: "var(--dynim-font-family)";
84
- readonly fontFamilyMono: "var(--dynim-font-family-mono)";
85
- readonly fontSize: "var(--dynim-font-size)";
86
- readonly fontSizeSm: "var(--dynim-font-size-sm)";
87
- readonly fontSizeXs: "var(--dynim-font-size-xs)";
88
- readonly lineHeight: "var(--dynim-line-height)";
89
- readonly spacingXs: "var(--dynim-spacing-xs)";
90
- readonly spacingSm: "var(--dynim-spacing-sm)";
91
- readonly spacingMd: "var(--dynim-spacing-md)";
92
- readonly spacingLg: "var(--dynim-spacing-lg)";
93
- readonly radiusSm: "var(--dynim-radius-sm)";
94
- readonly radiusMd: "var(--dynim-radius-md)";
95
- readonly radiusLg: "var(--dynim-radius-lg)";
96
- readonly shadow: "var(--dynim-shadow)";
97
- readonly shadowLg: "var(--dynim-shadow-lg)";
58
+ readonly builderBg: "var(--dynim-builder-bg)";
59
+ readonly builderText: "var(--dynim-builder-text)";
60
+ readonly builderFont: "var(--dynim-builder-font)";
61
+ readonly builderRadius: "var(--dynim-builder-radius)";
62
+ readonly builderOpacity: "var(--dynim-builder-opacity)";
63
+ readonly chatAccent: "var(--dynim-chat-accent)";
64
+ readonly chatBg: "var(--dynim-chat-bg)";
65
+ readonly chatText: "var(--dynim-chat-text)";
66
+ readonly chatFont: "var(--dynim-chat-font)";
67
+ readonly chatRadius: "var(--dynim-chat-radius)";
68
+ readonly chatOpacity: "var(--dynim-chat-opacity)";
69
+ readonly selectionColor: "var(--dynim-selection-color)";
70
+ readonly hoverColor: "var(--dynim-hover-color)";
71
+ readonly selectionRadius: "var(--dynim-selection-radius)";
72
+ readonly selectionOpacity: "var(--dynim-selection-opacity)";
73
+ readonly hoverOpacity: "var(--dynim-hover-opacity)";
98
74
  };
75
+ /**
76
+ * Helper to convert hex to rgba for opacity support
77
+ */
78
+ export declare function hexToRgba(hex: string, opacity: string | number): string;
99
79
  //# sourceMappingURL=theme.d.ts.map
package/dist/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,WAAW,UAAU;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,UAAU,CA0C7C,CAAC;AAsCF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,UAAe,GAAG,MAAM,CAW/D;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,WAAW,UAAU;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,UAAU,CAwB7C,CAAC;AA+BF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,UAAe,GAAG,MAAM,CAW/D;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAwBZ,CAAC;AAEX;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAOvE"}
package/dist/theme.js CHANGED
@@ -7,17 +7,17 @@
7
7
  * Example API response:
8
8
  * ```json
9
9
  * {
10
- * "accent": "#007bff",
11
- * "bgPrimary": "#1a1a1a",
12
- * "textPrimary": "#ffffff"
10
+ * "accent": "#4CAF50",
11
+ * "builderBg": "#000000",
12
+ * "chatAccent": "#8b5cf6"
13
13
  * }
14
14
  * ```
15
15
  *
16
- * CSS variables are automatically generated and can be overridden:
16
+ * CSS variables are automatically generated and can be used in components:
17
17
  * ```css
18
- * :root {
19
- * --dynim-accent: #007bff;
20
- * --dynim-bg-primary: #1a1a1a;
18
+ * .builder-bar {
19
+ * background: var(--dynim-builder-bg);
20
+ * color: var(--dynim-builder-text);
21
21
  * }
22
22
  * ```
23
23
  */
@@ -25,77 +25,53 @@
25
25
  * Default theme values
26
26
  */
27
27
  export const defaultTheme = {
28
- // Colors
29
- accent: '#4CAF50',
30
- accentHover: '#43a047',
31
- bgPrimary: '#fafafa',
32
- bgSecondary: '#ffffff',
33
- bgTertiary: '#f5f5f5',
34
- textPrimary: '#333333',
35
- textSecondary: '#666666',
36
- textMuted: '#999999',
37
- border: '#e0e0e0',
38
- // Status colors
39
- success: '#155724',
40
- successBg: '#d4edda',
41
- error: '#721c24',
42
- errorBg: '#f8d7da',
43
- warning: '#856404',
44
- warningBg: '#fff3cd',
45
- // Typography
46
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
47
- fontFamilyMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
48
- fontSize: '14px',
49
- fontSizeSm: '13px',
50
- fontSizeXs: '12px',
51
- lineHeight: '1.5',
52
- // Spacing
53
- spacingXs: '4px',
54
- spacingSm: '8px',
55
- spacingMd: '12px',
56
- spacingLg: '16px',
57
- // Border radius
58
- radiusSm: '4px',
59
- radiusMd: '6px',
60
- radiusLg: '8px',
61
- // Shadows
62
- shadow: '0 1px 3px rgba(0,0,0,0.1)',
63
- shadowLg: '0 4px 12px rgba(0,0,0,0.15)',
28
+ // Builder Bar
29
+ accent: '#3b82f6',
30
+ accentHover: '#2563eb',
31
+ builderBg: '#000000',
32
+ builderText: '#ffffff',
33
+ builderFont: 'system-ui, -apple-system, sans-serif',
34
+ builderRadius: '22px',
35
+ builderOpacity: '0.08',
36
+ // Chat Widget
37
+ chatAccent: '#8b5cf6',
38
+ chatBg: '#000000',
39
+ chatText: '#ffffff',
40
+ chatFont: 'system-ui, -apple-system, sans-serif',
41
+ chatRadius: '12px',
42
+ chatOpacity: '0.85',
43
+ // Selection
44
+ selectionColor: '#8b5cf6',
45
+ hoverColor: '#0ea5e9',
46
+ selectionRadius: '6px',
47
+ selectionOpacity: '0.1',
48
+ hoverOpacity: '0.1',
64
49
  };
65
50
  /**
66
51
  * CSS variable names mapped to theme keys
67
52
  */
68
53
  const cssVarMap = {
54
+ // Builder Bar
69
55
  accent: '--dynim-accent',
70
56
  accentHover: '--dynim-accent-hover',
71
- bgPrimary: '--dynim-bg-primary',
72
- bgSecondary: '--dynim-bg-secondary',
73
- bgTertiary: '--dynim-bg-tertiary',
74
- textPrimary: '--dynim-text-primary',
75
- textSecondary: '--dynim-text-secondary',
76
- textMuted: '--dynim-text-muted',
77
- border: '--dynim-border',
78
- success: '--dynim-success',
79
- successBg: '--dynim-success-bg',
80
- error: '--dynim-error',
81
- errorBg: '--dynim-error-bg',
82
- warning: '--dynim-warning',
83
- warningBg: '--dynim-warning-bg',
84
- fontFamily: '--dynim-font-family',
85
- fontFamilyMono: '--dynim-font-family-mono',
86
- fontSize: '--dynim-font-size',
87
- fontSizeSm: '--dynim-font-size-sm',
88
- fontSizeXs: '--dynim-font-size-xs',
89
- lineHeight: '--dynim-line-height',
90
- spacingXs: '--dynim-spacing-xs',
91
- spacingSm: '--dynim-spacing-sm',
92
- spacingMd: '--dynim-spacing-md',
93
- spacingLg: '--dynim-spacing-lg',
94
- radiusSm: '--dynim-radius-sm',
95
- radiusMd: '--dynim-radius-md',
96
- radiusLg: '--dynim-radius-lg',
97
- shadow: '--dynim-shadow',
98
- shadowLg: '--dynim-shadow-lg',
57
+ builderBg: '--dynim-builder-bg',
58
+ builderText: '--dynim-builder-text',
59
+ builderFont: '--dynim-builder-font',
60
+ builderRadius: '--dynim-builder-radius',
61
+ builderOpacity: '--dynim-builder-opacity',
62
+ // Chat Widget
63
+ chatAccent: '--dynim-chat-accent',
64
+ chatBg: '--dynim-chat-bg',
65
+ chatText: '--dynim-chat-text',
66
+ chatFont: '--dynim-chat-font',
67
+ chatRadius: '--dynim-chat-radius',
68
+ chatOpacity: '--dynim-chat-opacity',
69
+ // Selection
70
+ selectionColor: '--dynim-selection-color',
71
+ hoverColor: '--dynim-hover-color',
72
+ selectionRadius: '--dynim-selection-radius',
73
+ selectionOpacity: '--dynim-selection-opacity',
74
+ hoverOpacity: '--dynim-hover-opacity',
99
75
  };
100
76
  /**
101
77
  * Generates CSS variable declarations from a theme object
@@ -114,34 +90,37 @@ export function generateThemeCSS(theme = {}) {
114
90
  * CSS variable references for use in styles
115
91
  */
116
92
  export const themeVars = {
93
+ // Builder Bar
117
94
  accent: 'var(--dynim-accent)',
118
95
  accentHover: 'var(--dynim-accent-hover)',
119
- bgPrimary: 'var(--dynim-bg-primary)',
120
- bgSecondary: 'var(--dynim-bg-secondary)',
121
- bgTertiary: 'var(--dynim-bg-tertiary)',
122
- textPrimary: 'var(--dynim-text-primary)',
123
- textSecondary: 'var(--dynim-text-secondary)',
124
- textMuted: 'var(--dynim-text-muted)',
125
- border: 'var(--dynim-border)',
126
- success: 'var(--dynim-success)',
127
- successBg: 'var(--dynim-success-bg)',
128
- error: 'var(--dynim-error)',
129
- errorBg: 'var(--dynim-error-bg)',
130
- warning: 'var(--dynim-warning)',
131
- warningBg: 'var(--dynim-warning-bg)',
132
- fontFamily: 'var(--dynim-font-family)',
133
- fontFamilyMono: 'var(--dynim-font-family-mono)',
134
- fontSize: 'var(--dynim-font-size)',
135
- fontSizeSm: 'var(--dynim-font-size-sm)',
136
- fontSizeXs: 'var(--dynim-font-size-xs)',
137
- lineHeight: 'var(--dynim-line-height)',
138
- spacingXs: 'var(--dynim-spacing-xs)',
139
- spacingSm: 'var(--dynim-spacing-sm)',
140
- spacingMd: 'var(--dynim-spacing-md)',
141
- spacingLg: 'var(--dynim-spacing-lg)',
142
- radiusSm: 'var(--dynim-radius-sm)',
143
- radiusMd: 'var(--dynim-radius-md)',
144
- radiusLg: 'var(--dynim-radius-lg)',
145
- shadow: 'var(--dynim-shadow)',
146
- shadowLg: 'var(--dynim-shadow-lg)',
96
+ builderBg: 'var(--dynim-builder-bg)',
97
+ builderText: 'var(--dynim-builder-text)',
98
+ builderFont: 'var(--dynim-builder-font)',
99
+ builderRadius: 'var(--dynim-builder-radius)',
100
+ builderOpacity: 'var(--dynim-builder-opacity)',
101
+ // Chat Widget
102
+ chatAccent: 'var(--dynim-chat-accent)',
103
+ chatBg: 'var(--dynim-chat-bg)',
104
+ chatText: 'var(--dynim-chat-text)',
105
+ chatFont: 'var(--dynim-chat-font)',
106
+ chatRadius: 'var(--dynim-chat-radius)',
107
+ chatOpacity: 'var(--dynim-chat-opacity)',
108
+ // Selection
109
+ selectionColor: 'var(--dynim-selection-color)',
110
+ hoverColor: 'var(--dynim-hover-color)',
111
+ selectionRadius: 'var(--dynim-selection-radius)',
112
+ selectionOpacity: 'var(--dynim-selection-opacity)',
113
+ hoverOpacity: 'var(--dynim-hover-opacity)',
147
114
  };
115
+ /**
116
+ * Helper to convert hex to rgba for opacity support
117
+ */
118
+ export function hexToRgba(hex, opacity) {
119
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
120
+ if (!result)
121
+ return hex;
122
+ const r = parseInt(result[1], 16);
123
+ const g = parseInt(result[2], 16);
124
+ const b = parseInt(result[3], 16);
125
+ return `rgba(${r}, ${g}, ${b}, ${opacity})`;
126
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dynim-react",
3
- "version": "1.0.45",
3
+ "version": "1.0.47",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",