@studiocms/ui 1.0.0-beta.2 → 1.0.0-beta.4

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 (7) hide show
  1. package/dist/components/Button/button.css +2 -2
  2. package/dist/components/Toggle/toggle.css +2 -2
  3. package/dist/css/colors.css +23 -18
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.js +17 -18
  6. package/dist/virtuals.d.ts +14 -1
  7. package/package.json +3 -2
package/dist/components/Button/button.css CHANGED
@@ -267,7 +267,7 @@
267
267
  color: hsl(259, 84%, 45%);
268
268
  }
269
269
  .sui-button.success.flat {
270
- background-color: var(--success-flat-base);
270
+ background-color: var(--success-flat);
271
271
  color: hsl(143, 59%, 20%);
272
272
  }
273
273
  .sui-button.success.flat:hover {
@@ -277,7 +277,7 @@
277
277
  background-color: var(--success-flat-active);
278
278
  }
279
279
  .sui-button.warning.flat {
280
- background-color: var(--warning-flat-base);
280
+ background-color: var(--warning-flat);
281
281
  color: hsl(48, 78%, 20%);
282
282
  }
283
283
  .sui-button.warning.flat:hover {
package/dist/components/Toggle/toggle.css CHANGED
@@ -30,7 +30,7 @@
30
30
  --switch: calc(var(--toggle-height) * 1.75);
31
31
  height: var(--switch);
32
32
  width: var(--switch);
33
- background-color: var(--text-muted);
33
+ background-color: var(--background-gray);
34
34
  border-radius: var(--radius-full);
35
35
  position: relative;
36
36
  left: 0;
@@ -60,7 +60,7 @@
60
60
  --switch: calc(var(--toggle-height) * 1.65);
61
61
  }
62
62
  .sui-toggle-label.primary .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
63
- background-color: var(--primary-base);
63
+ background-color: var(--primary-vibrant);
64
64
  }
65
65
  .sui-toggle-label.success .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
66
66
  background-color: var(--success-base);
package/dist/css/colors.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --background-step-1: hsl(0 0% 8%);
12
12
  --background-step-2: hsl(0, 0%, 9%);
13
13
  --background-step-3: hsl(0, 0%, 12%);
14
+ --background-gray: hsl(0 0% 50%);
14
15
  --text-normal: hsl(0 0% 100%);
15
16
  --text-dimmed: hsl(0 0% 100% / 0.8);
16
17
  --text-muted: hsl(0 0% 100% / 0.75);
@@ -46,32 +47,33 @@
46
47
  --text-light: hsl(0 0% 100%);
47
48
  --text-dark: hsl(0 0% 0%);
48
49
  --default-flat: hsl(0 0% 14% / 0.5);
49
- --default-flat-hover: hsl(0 0% 14% / 0.75);
50
- --default-flat-active: hsl(0 0% 14% / 0.85);
50
+ --default-flat-hover: hsl(0 0% 14% / 0.85);
51
+ --default-flat-active: hsl(0 0% 14% / 0.75);
51
52
  --primary-flat: hsl(259 83% 73% / 0.1);
52
- --primary-flat-hover: hsl(259 83% 73% / 0.25);
53
- --primary-flat-active: hsl(259 83% 73% / 0.35);
53
+ --primary-flat-hover: hsl(259 83% 73% / 0.35);
54
+ --primary-flat-active: hsl(259 83% 73% / 0.25);
54
55
  --success-flat: hsl(142 71% 46% / 0.1);
55
- --success-flat-hover: hsl(142 71% 46% / 0.25);
56
- --success-flat-active: hsl(142 71% 46% / 0.35);
56
+ --success-flat-hover: hsl(142 71% 46% / 0.35);
57
+ --success-flat-active: hsl(142 71% 46% / 0.25);
57
58
  --warning-flat: hsl(48 96% 53% / 0.1);
58
- --warning-flat-hover: hsl(48 96% 53% / 0.25);
59
- --warning-flat-active: hsl(48 96% 53% / 0.35);
59
+ --warning-flat-hover: hsl(48 96% 53% / 0.35);
60
+ --warning-flat-active: hsl(48 96% 53% / 0.25);
60
61
  --danger-flat: hsl(339 97% 31% / 0.1);
61
- --danger-flat-hover: hsl(339 97% 31% / 0.25);
62
- --danger-flat-active: hsl(339 97% 31% / 0.35);
62
+ --danger-flat-hover: hsl(339 97% 31% / 0.35);
63
+ --danger-flat-active: hsl(339 97% 31% / 0.25);
63
64
  --info-flat: hsl(217 92% 52% / 0.1);
64
- --info-flat-hover: hsl(217 92% 52% / 0.25);
65
- --info-flat-active: hsl(217 92% 52% / 0.35);
66
- --mono-flat: hsla(0, 0%, 70%, 0.1);
67
- --mono-flat-hover: hsl(0 0% 70% / 0.25);
68
- --mono-flat-active: hsl(0 0% 70% / 0.35);
65
+ --info-flat-hover: hsl(217 92% 52% / 0.35);
66
+ --info-flat-active: hsl(217 92% 52% / 0.25);
67
+ --mono-flat: hsl(0 0% 70% / 0.1);
68
+ --mono-flat-hover: hsl(0 0% 70% / 0.35);
69
+ --mono-flat-active: hsl(0 0% 70% / 0.25);
69
70
  }
70
71
  [data-theme=light] {
71
72
  --background-base: hsl(0 0% 97%);
72
- --background-step-1: hsl(0 0% 92%);
73
- --background-step-2: hsl(0 0% 87%);
74
- --background-step-3: hsl(0 0% 83%);
73
+ --background-step-1: hsl(0 0% 95%);
74
+ --background-step-2: hsl(0 0% 92%);
75
+ --background-step-3: hsl(0 0% 89%);
76
+ --background-gray: hsl(0 0% 50%);
75
77
  --text-normal: hsl(0 0% 0%);
76
78
  --text-dimmed: hsl(0 0% 0% / 0.8);
77
79
  --text-muted: hsl(0 0% 0% / 0.75);
@@ -104,4 +106,7 @@
104
106
  --mono-base: hsl(0 0% 10%);
105
107
  --mono-hover: hsl(0 0% 16%);
106
108
  --mono-active: hsl(0 0% 14%);
109
+ --default-flat: hsl(0 0% 70% / 0.5);
110
+ --default-flat-hover: hsl(0 0% 70% / 0.85);
111
+ --default-flat-active: hsl(0 0% 70% / 0.75);
107
112
  }
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- /// <reference path="../src/events.d.ts" preserve="true" />
2
- /// <reference path="../src/virtuals.d.ts" preserve="true" />
1
+ /// <reference path="events.d.ts" preserve="true" />
2
+ /// <reference path="virtuals.d.ts" preserve="true" />
3
3
  import type { IconifyJSON } from '@iconify/types';
4
4
  import type { AstroIntegration } from 'astro';
5
5
  type Options = {
package/dist/index.js CHANGED
@@ -62,23 +62,17 @@ function integration(options = {}) {
62
62
  "studiocms:ui/components/checkbox": `export { default as Checkbox } from '${resolve("./components/Checkbox/Checkbox.astro")}';`,
63
63
  "studiocms:ui/components/toggle": `export { default as Toggle } from '${resolve("./components/Toggle/Toggle.astro")}';`,
64
64
  "studiocms:ui/components/radiogroup": `export { default as RadioGroup } from '${resolve("./components/RadioGroup/RadioGroup.astro")}';`,
65
- "studiocms:ui/components/toaster": `
66
- export { default as Toaster } from '${resolve("./components/Toast/Toaster.astro")}';
67
- export { toast } from '${resolve("./components/Toast/toast.js")}';
68
- `,
65
+ "studiocms:ui/components/toaster": `export { default as Toaster } from '${resolve("./components/Toast/Toaster.astro")}';`,
66
+ "studiocms:ui/components/toaster/client": `export { toast } from '${resolve("./components/Toast/toast.js")}';`,
69
67
  "studiocms:ui/components/card": `export { default as Card } from '${resolve("./components/Card/Card.astro")}';`,
70
- "studiocms:ui/components/modal": `
71
- export { default as Modal } from '${resolve("./components/Modal/Modal.astro")}';
72
- export { ModalHelper } from '${resolve("./components/Modal/modal.js")}';
73
- `,
68
+ "studiocms:ui/components/modal": `export { default as Modal } from '${resolve("./components/Modal/Modal.astro")}';`,
69
+ "studiocms:ui/components/modal/client": `export { ModalHelper } from '${resolve("./components/Modal/modal.js")}';`,
74
70
  "studiocms:ui/components/select": `
75
71
  export { default as Select } from '${resolve("./components/Select/Select.astro")}';
76
72
  export { default as SearchSelect } from '${resolve("./components/SearchSelect/SearchSelect.astro")}';
77
73
  `,
78
- "studiocms:ui/components/dropdown": `
79
- export { default as Dropdown } from '${resolve("./components/Dropdown/Dropdown.astro")}';
80
- export { DropdownHelper } from '${resolve("./components/Dropdown/dropdown.js")}';
81
- `,
74
+ "studiocms:ui/components/dropdown": `export { default as Dropdown } from '${resolve("./components/Dropdown/Dropdown.astro")}';`,
75
+ "studiocms:ui/components/dropdown/client": `export { DropdownHelper } from '${resolve("./components/Dropdown/dropdown.js")}';`,
82
76
  "studiocms:ui/components/user": `export { default as User } from '${resolve("./components/User/User.astro")}';`,
83
77
  "studiocms:ui/components/tabs": `
84
78
  export { default as Tabs } from '${resolve("./components/Tabs/Tabs.astro")}';
@@ -89,15 +83,13 @@ function integration(options = {}) {
89
83
  export { default as AccordionItem } from '${resolve("./components/Accordion/Item.astro")}';
90
84
  `,
91
85
  "studiocms:ui/components/footer": `export { default as Footer } from '${resolve("./components/Footer/Footer.astro")}';`,
92
- "studiocms:ui/components/progress": `
93
- export { default as Progress } from '${resolve("./components/Progress/Progress.astro")}';
94
- export { ProgressHelper } from '${resolve("./components/Progress/helper.js")}';
95
- `,
86
+ "studiocms:ui/components/progress": `export { default as Progress } from '${resolve("./components/Progress/Progress.astro")}';`,
87
+ "studiocms:ui/components/progress/client": `export { ProgressHelper } from '${resolve("./components/Progress/helper.js")}';`,
96
88
  "studiocms:ui/components/sidebar": `
97
89
  export { default as Sidebar } from '${resolve("./components/Sidebar/Single.astro")}';
98
90
  export { default as DoubleSidebar } from '${resolve("./components/Sidebar/Double.astro")}';
99
- export { SingleSidebarHelper, DoubleSidebarHelper } from '${resolve("./components/Sidebar/helpers.js")}';
100
91
  `,
92
+ "studiocms:ui/components/sidebar/client": `export { SingleSidebarHelper, DoubleSidebarHelper } from '${resolve("./components/Sidebar/helpers.js")}';`,
101
93
  "studiocms:ui/components/breadcrumbs": `export { default as Breadcrumbs } from '${resolve("./components/Breadcrumbs/Breadcrumbs.astro")}';`,
102
94
  "studiocms:ui/components/group": `export { default as Group } from '${resolve("./components/Group/Group.astro")}';`,
103
95
  "studiocms:ui/components/badge": `export { default as Badge } from '${resolve("./components/Badge/Badge.astro")}';`,
@@ -108,9 +100,16 @@ function integration(options = {}) {
108
100
  "studiocms:ui/components/skeleton": `export { default as Skeleton } from '${resolve("./components/Skeleton/Skeleton.astro")}';`,
109
101
  "studiocms:ui/components/tooltip": `export { default as Tooltip } from '${resolve("./components/Tooltip/Tooltip.astro")}';`
110
102
  };
103
+ const ServerComponents = Object.entries(componentMap).filter(
104
+ ([key]) => !key.endsWith("/client")
105
+ );
106
+ const ClientComponents = Object.entries(componentMap).filter(
107
+ ([key]) => key.endsWith("/client")
108
+ );
111
109
  const virtualComponents = {
112
110
  ...componentMap,
113
- "studiocms:ui/components": Object.values(componentMap).join("\n")
111
+ "studiocms:ui/components": ServerComponents.map(([_, value]) => value).join("\n"),
112
+ "studiocms:ui/components/client": ClientComponents.map(([_, value]) => value).join("\n")
114
113
  };
115
114
  addVirtualImports(params, {
116
115
  name: "@studiocms/ui",
package/dist/virtuals.d.ts CHANGED
@@ -47,6 +47,9 @@ declare module 'studiocms:ui/components/radiogroup' {
47
47
 
48
48
  declare module 'studiocms:ui/components/toaster' {
49
49
  export const Toaster: typeof import('./components/Toast/Toaster.astro').default;
50
+ }
51
+
52
+ declare module 'studiocms:ui/components/toaster/client' {
50
53
  export const toast: typeof import('./components/Toast/toast.js').toast;
51
54
  }
52
55
 
@@ -56,7 +59,9 @@ declare module 'studiocms:ui/components/card' {
56
59
 
57
60
  declare module 'studiocms:ui/components/modal' {
58
61
  export const Modal: typeof import('./components/Modal/Modal.astro').default;
62
+ }
59
63
 
64
+ declare module 'studiocms:ui/components/modal/client' {
60
65
  export class ModalHelper {
61
66
  private element;
62
67
  private cancelButton;
@@ -113,7 +118,9 @@ declare module 'studiocms:ui/components/select' {
113
118
 
114
119
  declare module 'studiocms:ui/components/dropdown' {
115
120
  export const Dropdown: typeof import('./components/Dropdown/Dropdown.astro').default;
121
+ }
116
122
 
123
+ declare module 'studiocms:ui/components/dropdown/client' {
117
124
  export class DropdownHelper {
118
125
  private container;
119
126
  private toggleEl;
@@ -178,7 +185,9 @@ declare module 'studiocms:ui/components/footer' {
178
185
 
179
186
  declare module 'studiocms:ui/components/progress' {
180
187
  export const Progress: typeof import('./components/Progress/Progress.astro').default;
188
+ }
181
189
 
190
+ declare module 'studiocms:ui/components/progress/client' {
182
191
  export class ProgressHelper {
183
192
  private bar;
184
193
  private progress;
@@ -205,7 +214,9 @@ declare module 'studiocms:ui/components/accordion' {
205
214
  declare module 'studiocms:ui/components/sidebar' {
206
215
  export const Sidebar: typeof import('./components/Sidebar/Single.astro').default;
207
216
  export const DoubleSidebar: typeof import('./components/Sidebar/Double.astro').default;
217
+ }
208
218
 
219
+ declare module 'studiocms:ui/components/sidebar/client' {
209
220
  export class SingleSidebarHelper {
210
221
  private sidebar;
211
222
  private sidebarToggle?;
@@ -326,10 +337,12 @@ declare module 'studiocms:ui/components' {
326
337
  export const Textarea: typeof import('./components/Textarea/Textarea.astro').default;
327
338
  export const Toaster: typeof import('./components/Toast/Toaster.astro').default;
328
339
  export const Tooltip: typeof import('./components/Tooltip/Tooltip.astro').default;
329
- export const toast: typeof import('./components/Toast/toast.js').toast;
330
340
  export const Toggle: typeof import('./components/Toggle/Toggle.astro').default;
331
341
  export const User: typeof import('./components/User/User.astro').default;
342
+ }
332
343
 
344
+ declare module 'studiocms:ui/components/client' {
345
+ export const toast: typeof import('./components/Toast/toast.js').toast;
333
346
  export class ModalHelper {
334
347
  private element;
335
348
  private cancelButton;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@studiocms/ui",
3
- "version": "1.0.0-beta.2",
3
+ "version": "1.0.0-beta.4",
4
4
  "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -72,7 +72,8 @@
72
72
  "@types/node": "^24.5.2"
73
73
  },
74
74
  "scripts": {
75
- "build": "buildkit build 'src/**/*.{ts,d.ts,css,astro,stub}' --tsconfig=tsconfig.build.json",
75
+ "delete:dist": "node -e \"import { rmSync } from 'fs'; rmSync('./dist', { recursive: true, force: true });\"",
76
+ "build": "pnpm delete:dist && buildkit build 'src/**/*.{ts,d.ts,css,astro,stub}' --tsconfig=tsconfig.build.json",
76
77
  "dev": "buildkit dev 'src/**/*.{ts,d.ts,css,astro,stub}' --tsconfig=tsconfig.build.json",
77
78
  "playwright:setup": "pnpm exec playwright install --with-deps",
78
79
  "test-server": "pnpm --filter @test-fixture/server dev",