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

package/dist/components/Button/button.css

@@ -267,7 +267,7 @@
     color: hsl(259, 84%, 45%);
   }
   .sui-button.success.flat {
-    background-color: var(--success-flat-base);
+    background-color: var(--success-flat);
     color: hsl(143, 59%, 20%);
   }
   .sui-button.success.flat:hover {
@@ -277,7 +277,7 @@
     background-color: var(--success-flat-active);
   }
   .sui-button.warning.flat {
-    background-color: var(--warning-flat-base);
+    background-color: var(--warning-flat);
     color: hsl(48, 78%, 20%);
   }
   .sui-button.warning.flat:hover {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference path="../src/events.d.ts" preserve="true" />
-/// <reference path="../src/virtuals.d.ts" preserve="true" />
+/// <reference path="events.d.ts" preserve="true" />
+/// <reference path="virtuals.d.ts" preserve="true" />
 import type { IconifyJSON } from '@iconify/types';
 import type { AstroIntegration } from 'astro';
 type Options = {

package/dist/index.js

@@ -62,23 +62,17 @@ function integration(options = {}) {
           "studiocms:ui/components/checkbox": `export { default as Checkbox } from '${resolve("./components/Checkbox/Checkbox.astro")}';`,
           "studiocms:ui/components/toggle": `export { default as Toggle } from '${resolve("./components/Toggle/Toggle.astro")}';`,
           "studiocms:ui/components/radiogroup": `export { default as RadioGroup } from '${resolve("./components/RadioGroup/RadioGroup.astro")}';`,
-          "studiocms:ui/components/toaster": `
-						export { default as Toaster } from '${resolve("./components/Toast/Toaster.astro")}';
-						export { toast } from '${resolve("./components/Toast/toast.js")}';
-					`,
+          "studiocms:ui/components/toaster": `export { default as Toaster } from '${resolve("./components/Toast/Toaster.astro")}';`,
+          "studiocms:ui/components/toaster/client": `export { toast } from '${resolve("./components/Toast/toast.js")}';`,
           "studiocms:ui/components/card": `export { default as Card } from '${resolve("./components/Card/Card.astro")}';`,
-          "studiocms:ui/components/modal": `
-						export { default as Modal } from '${resolve("./components/Modal/Modal.astro")}';
-						export { ModalHelper } from '${resolve("./components/Modal/modal.js")}';
-					`,
+          "studiocms:ui/components/modal": `export { default as Modal } from '${resolve("./components/Modal/Modal.astro")}';`,
+          "studiocms:ui/components/modal/client": `export { ModalHelper } from '${resolve("./components/Modal/modal.js")}';`,
           "studiocms:ui/components/select": `
 						export { default as Select } from '${resolve("./components/Select/Select.astro")}';
 						export { default as SearchSelect } from '${resolve("./components/SearchSelect/SearchSelect.astro")}';
 					`,
-          "studiocms:ui/components/dropdown": `
-						export { default as Dropdown } from '${resolve("./components/Dropdown/Dropdown.astro")}';
-						export { DropdownHelper } from '${resolve("./components/Dropdown/dropdown.js")}';
-					`,
+          "studiocms:ui/components/dropdown": `export { default as Dropdown } from '${resolve("./components/Dropdown/Dropdown.astro")}';`,
+          "studiocms:ui/components/dropdown/client": `export { DropdownHelper } from '${resolve("./components/Dropdown/dropdown.js")}';`,
           "studiocms:ui/components/user": `export { default as User } from '${resolve("./components/User/User.astro")}';`,
           "studiocms:ui/components/tabs": `
 						export { default as Tabs } from '${resolve("./components/Tabs/Tabs.astro")}';
@@ -89,15 +83,13 @@ function integration(options = {}) {
 						export { default as AccordionItem } from '${resolve("./components/Accordion/Item.astro")}';
 					`,
           "studiocms:ui/components/footer": `export { default as Footer } from '${resolve("./components/Footer/Footer.astro")}';`,
-          "studiocms:ui/components/progress": `
-						export { default as Progress } from '${resolve("./components/Progress/Progress.astro")}';
-						export { ProgressHelper } from '${resolve("./components/Progress/helper.js")}';
-					`,
+          "studiocms:ui/components/progress": `export { default as Progress } from '${resolve("./components/Progress/Progress.astro")}';`,
+          "studiocms:ui/components/progress/client": `export { ProgressHelper } from '${resolve("./components/Progress/helper.js")}';`,
           "studiocms:ui/components/sidebar": `
 						export { default as Sidebar } from '${resolve("./components/Sidebar/Single.astro")}';
 						export { default as DoubleSidebar } from '${resolve("./components/Sidebar/Double.astro")}';
-						export { SingleSidebarHelper, DoubleSidebarHelper } from '${resolve("./components/Sidebar/helpers.js")}';
 					`,
+          "studiocms:ui/components/sidebar/client": `export { SingleSidebarHelper, DoubleSidebarHelper } from '${resolve("./components/Sidebar/helpers.js")}';`,
           "studiocms:ui/components/breadcrumbs": `export { default as Breadcrumbs } from '${resolve("./components/Breadcrumbs/Breadcrumbs.astro")}';`,
           "studiocms:ui/components/group": `export { default as Group } from '${resolve("./components/Group/Group.astro")}';`,
           "studiocms:ui/components/badge": `export { default as Badge } from '${resolve("./components/Badge/Badge.astro")}';`,
@@ -108,9 +100,16 @@ function integration(options = {}) {
           "studiocms:ui/components/skeleton": `export { default as Skeleton } from '${resolve("./components/Skeleton/Skeleton.astro")}';`,
           "studiocms:ui/components/tooltip": `export { default as Tooltip } from '${resolve("./components/Tooltip/Tooltip.astro")}';`
         };
+        const ServerComponents = Object.entries(componentMap).filter(
+          ([key]) => !key.endsWith("/client")
+        );
+        const ClientComponents = Object.entries(componentMap).filter(
+          ([key]) => key.endsWith("/client")
+        );
         const virtualComponents = {
           ...componentMap,
-          "studiocms:ui/components": Object.values(componentMap).join("\n")
+          "studiocms:ui/components": ServerComponents.map(([_, value]) => value).join("\n"),
+          "studiocms:ui/components/client": ClientComponents.map(([_, value]) => value).join("\n")
         };
         addVirtualImports(params, {
           name: "@studiocms/ui",

package/dist/virtuals.d.ts

@@ -47,6 +47,9 @@ declare module 'studiocms:ui/components/radiogroup' {
 
 declare module 'studiocms:ui/components/toaster' {
 	export const Toaster: typeof import('./components/Toast/Toaster.astro').default;
+}
+
+declare module 'studiocms:ui/components/toaster/client' {
 	export const toast: typeof import('./components/Toast/toast.js').toast;
 }
 
@@ -56,7 +59,9 @@ declare module 'studiocms:ui/components/card' {
 
 declare module 'studiocms:ui/components/modal' {
 	export const Modal: typeof import('./components/Modal/Modal.astro').default;
+}
 
+declare module 'studiocms:ui/components/modal/client' {
 	export class ModalHelper {
 		private element;
 		private cancelButton;
@@ -113,7 +118,9 @@ declare module 'studiocms:ui/components/select' {
 
 declare module 'studiocms:ui/components/dropdown' {
 	export const Dropdown: typeof import('./components/Dropdown/Dropdown.astro').default;
+}
 
+declare module 'studiocms:ui/components/dropdown/client' {
 	export class DropdownHelper {
 		private container;
 		private toggleEl;
@@ -178,7 +185,9 @@ declare module 'studiocms:ui/components/footer' {
 
 declare module 'studiocms:ui/components/progress' {
 	export const Progress: typeof import('./components/Progress/Progress.astro').default;
+}
 
+declare module 'studiocms:ui/components/progress/client' {
 	export class ProgressHelper {
 		private bar;
 		private progress;
@@ -205,7 +214,9 @@ declare module 'studiocms:ui/components/accordion' {
 declare module 'studiocms:ui/components/sidebar' {
 	export const Sidebar: typeof import('./components/Sidebar/Single.astro').default;
 	export const DoubleSidebar: typeof import('./components/Sidebar/Double.astro').default;
+}
 
+declare module 'studiocms:ui/components/sidebar/client' {
 	export class SingleSidebarHelper {
 		private sidebar;
 		private sidebarToggle?;
@@ -326,10 +337,12 @@ declare module 'studiocms:ui/components' {
 	export const Textarea: typeof import('./components/Textarea/Textarea.astro').default;
 	export const Toaster: typeof import('./components/Toast/Toaster.astro').default;
 	export const Tooltip: typeof import('./components/Tooltip/Tooltip.astro').default;
-	export const toast: typeof import('./components/Toast/toast.js').toast;
 	export const Toggle: typeof import('./components/Toggle/Toggle.astro').default;
 	export const User: typeof import('./components/User/User.astro').default;
+}
 
+declare module 'studiocms:ui/components/client' {
+	export const toast: typeof import('./components/Toast/toast.js').toast;
 	export class ModalHelper {
 		private element;
 		private cancelButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/ui",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
   "repository": {
     "type": "git",
@@ -72,7 +72,8 @@
     "@types/node": "^24.5.2"
   },
   "scripts": {
-    "build": "buildkit build 'src/**/*.{ts,d.ts,css,astro,stub}' --tsconfig=tsconfig.build.json",
+    "delete:dist": "node -e \"import { rmSync } from 'fs'; rmSync('./dist', { recursive: true, force: true });\"",
+    "build": "pnpm delete:dist && buildkit build 'src/**/*.{ts,d.ts,css,astro,stub}' --tsconfig=tsconfig.build.json",
     "dev": "buildkit dev 'src/**/*.{ts,d.ts,css,astro,stub}' --tsconfig=tsconfig.build.json",
     "playwright:setup": "pnpm exec playwright install --with-deps",
     "test-server": "pnpm --filter @test-fixture/server dev",