@studiocms/ui 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
   "repository": {
     "type": "git",
@@ -21,7 +21,8 @@
     "astro-ui-library",
     "astro-components",
     "studiocms",
-    "ui-library"
+    "ui-library",
+    "astro-integration"
   ],
   "homepage": "https://ui.studiocms.dev",
   "publishConfig": {
@@ -42,8 +43,9 @@
     "./types": "./src/types/index.ts"
   },
   "dependencies": {
+    "@iconify-json/heroicons": "^1.2.1",
     "@iconify/utils": "^2.1.33",
-    "@iconify-json/heroicons": "^1.2.1"
+    "pathe": "^1.1.2"
   },
   "peerDependencies": {
     "astro": "^4.5 || ^5.0.0-beta.0"

package/src/components/Divider.astro

@@ -9,11 +9,16 @@ interface Props {
 	background?: 'background-base' | 'background-step-1' | 'background-step-2' | 'background-step-3';
 }
 
+const hasDefaultSlot = Astro.slots.has('default');
+
 const { background = 'background-base' } = Astro.props;
 ---
 <div class="sui-divider-container">
   <hr class="sui-divider-line" />
-  <div class="sui-divider-content" style={`background-color: hsl(var(--${background}));`}>
+  <div 
+    class="sui-divider-content" 
+    style={`background-color: hsl(var(--${background})); padding: ${hasDefaultSlot ? '.25rem .5rem;' : '0'}`}
+  >
     <slot />
   </div>
 </div>
@@ -28,9 +33,8 @@ const { background = 'background-base' } = Astro.props;
 
   .sui-divider-line {
     position: absolute;
-    top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, 0);
     width: 100%;
     height: 1px;
     background-color: hsl(var(--border));
@@ -39,7 +43,6 @@ const { background = 'background-base' } = Astro.props;
   }
 
   .sui-divider-content {
-    padding: .25rem .5rem;
     z-index: 2;
     color: hsl(var(--text-muted));
   }

package/src/components/Tabs/TabItem.astro

@@ -30,7 +30,6 @@ const { icon, label, color = 'primary' } = Astro.props;
   data-label={label}
   data-color={color}
   data-tab-id={id}
-  class=""
 >
   <slot />
 </sui-tab-item>

package/src/components/Tabs/Tabs.astro

@@ -1,4 +1,5 @@
 ---
+import { AstroError } from 'astro/errors';
 import { Icon } from '../../utils';
 import type { StudioCMSColorway } from '../../utils/colors';
 import { generateID } from '../../utils/generateID';
@@ -77,8 +78,21 @@ const markTabAsActive = (tabId: string, html: string): string => {
 	if (!tabId) return html;
 
 	const updatedHtml = html.replace(
-		new RegExp(`(<sui-tab-item[^>]*data-tab-id="${tabId}"[^>]*class=")([^"]*)(")`, 'g'),
-		'$1$2 active$3'
+		/<sui-tab-item[^>]*data-tab-id="([^"]*)"[^>]*>/g,
+		(match, tabIdValue) => {
+			// Check if the tabId matches
+			if (tabIdValue === tabId) {
+				// Check if the element already has a class attribute
+				if (match.includes('class="')) {
+					// If class attribute exists, add 'active' to the class attribute
+					return match.replace(/(class="[^"]*)"/, '$1 active"');
+				}
+
+				// If class attribute does not exist, add it
+				return match.replace(/(<sui-tab-item[^>]*data-tab-id="[^"]*")/, '$1 class="active"');
+			}
+			return match; // Return original if the tabId does not match
+		}
 	);
 
 	return updatedHtml;
@@ -288,6 +302,9 @@ const containerId = generateID('sui-tabs-container');
     font-size: 0.875em;
     outline: 2px solid transparent;
     outline-offset: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .sui-tab-header * {

package/src/integration.ts

@@ -1,5 +1,6 @@
 import type { AstroIntegration } from 'astro';
 import { createResolver } from './utils/create-resolver';
+import { viteVirtualModulePluginBuilder } from './utils/virtual-module-plugin-builder';
 
 // biome-ignore lint/complexity/noBannedTypes: Will be implemented in v0.3.0
 type Options = {};
@@ -7,11 +8,23 @@ type Options = {};
 export default function integration(options: Options = {}): AstroIntegration {
 	const { resolve } = createResolver(import.meta.url);
 
+	const globalCss = viteVirtualModulePluginBuilder(
+		'studiocms:ui/global-css',
+		'sui-global-css',
+		`import '${resolve('./css/global.css')}'`
+	);
+
 	return {
 		name: '@studiocms/ui',
 		hooks: {
-			'astro:config:setup': ({ injectScript }) => {
-				injectScript('page-ssr', `import '${resolve('./css/global.css')}'`);
+			'astro:config:setup': ({ injectScript, updateConfig }) => {
+				updateConfig({
+					vite: {
+						plugins: [globalCss()],
+					},
+				});
+
+				injectScript('page-ssr', `import 'studiocms:ui/global-css';`);
 			},
 		},
 	};

package/src/utils/create-resolver.ts

@@ -1,5 +1,5 @@
-import { dirname, resolve } from 'node:path'; // Swapped out pathe for node:path to cut down on dependencies
 import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'pathe';
 
 /**
  * From the Astro Integration Kit (https://astro-integration-kit.netlify.app/).

package/src/utils/virtual-module-plugin-builder.ts

@@ -0,0 +1,37 @@
+import type { AstroConfig } from 'astro';
+
+type VitePlugin = Required<AstroConfig['vite']>['plugins'][number];
+
+/**
+ * Builds a Vite plugin that creates a virtual module.
+ *
+ * @param moduleId - The ID of the virtual module.
+ * @param name - The name of the plugin.
+ * @param moduleContent - The content of the virtual module.
+ * @returns A Vite plugin that resolves and loads the virtual module.
+ */
+export function viteVirtualModulePluginBuilder(
+	moduleId: string,
+	name: string,
+	moduleContent: string
+) {
+	return function modulePlugin(): VitePlugin {
+		const resolvedVirtualModuleId = `\0${moduleId}`; // Prefix with \0 to avoid conflicts
+
+		return {
+			name,
+			resolveId(id) {
+				if (id === moduleId) {
+					return resolvedVirtualModuleId;
+				}
+				return;
+			},
+			load(id) {
+				if (id === resolvedVirtualModuleId) {
+					return moduleContent;
+				}
+				return;
+			},
+		};
+	};
+}