@studiocms/ui 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
   "repository": {
     "type": "git",

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 * {