@studiocms/ui 0.3.2 → 0.4.1

package/dist/components/Sidebar/helpers.js

@@ -0,0 +1,160 @@
+class SingleSidebarHelper {
+  sidebar;
+  sidebarToggle;
+  /**
+   * A helper to manage the sidebar with.
+   * @param toggleID The ID of the element that should toggle the sidebar.
+   */
+  constructor(toggleID) {
+    const sidebarContainer = document.getElementById("sui-sidebar");
+    if (!sidebarContainer) {
+      throw new Error(
+        `No item with ID 'sui-sidebar' found. Please add the <Sidebar> component to this page.`
+      );
+    }
+    this.sidebar = sidebarContainer;
+    if (toggleID) {
+      this.toggleSidebarOnClick(toggleID);
+    }
+  }
+  /**
+   * A helper function register an element which should toggle the sidebar.
+   * @param elementID The ID of the element that should toggle the sidebar.
+   */
+  toggleSidebarOnClick = (elementID) => {
+    const navToggle = document.getElementById(elementID);
+    if (!navToggle) {
+      throw new Error(`No item with ID ${elementID} found.`);
+    }
+    this.sidebarToggle = navToggle;
+    this.sidebarToggle.addEventListener("click", () => {
+      this.sidebar.classList.toggle("active");
+    });
+  };
+  /**
+   * A helper function to hide the sidebar when an element is clicked.
+   * @param elementID The ID of the element that should hide the sidebar.
+   */
+  hideSidebarOnClick = (elementID) => {
+    const element = document.getElementById(elementID);
+    if (!element) {
+      throw new Error(`No item with ID ${elementID} found.`);
+    }
+    element.addEventListener("click", this.hideSidebar);
+  };
+  /**
+   * A helper function to show the sidebar when an element is clicked.
+   * @param elementID The ID of the element that should show the sidebar.
+   */
+  showSidebarOnClick = (elementID) => {
+    const element = document.getElementById(elementID);
+    if (!element) {
+      throw new Error(`No item with ID ${elementID} found.`);
+    }
+    element.addEventListener("click", this.showSidebar);
+  };
+  /**
+   * A function to hide the sidebar.
+   */
+  hideSidebar = () => {
+    this.sidebar.classList.remove("active");
+  };
+  /**
+   * A function to show the sidebar.
+   */
+  showSidebar = () => {
+    this.sidebar.classList.add("active");
+  };
+}
+class DoubleSidebarHelper {
+  sidebarsContainer;
+  /**
+   * A helper to manage the double sidebar with.
+   */
+  constructor() {
+    const sidebarsContainer = document.getElementById("sui-sidebars");
+    if (!sidebarsContainer) {
+      throw new Error(
+        `No item with ID 'sidebars' found. Please add the <DoubleSidebar> component to this page.`
+      );
+    }
+    this.sidebarsContainer = sidebarsContainer;
+  }
+  /**
+   * A helper function to hide the sidebar when an element is clicked.
+   * @param elementID The ID of the element that should hide the sidebar.
+   */
+  hideSidebarOnClick = (elementID) => {
+    const element = document.getElementById(elementID);
+    if (!element) {
+      throw new Error(`No item with ID ${elementID} found.`);
+    }
+    element.addEventListener("click", this.hideSidebar);
+  };
+  /**
+   * A helper function to show the outer sidebar when an element is clicked.
+   * @param elementID The ID of the element that should show the outer sidebar.
+   */
+  showOuterOnClick = (elementID) => {
+    const element = document.getElementById(elementID);
+    if (!element) {
+      throw new Error(`No item with ID ${elementID} found.`);
+    }
+    element.addEventListener("click", this.showOuterSidebar);
+  };
+  /**
+   * A helper function to show the inner sidebar when an element is clicked.
+   * @param elementID The ID of the element that should show the inner sidebar.
+   */
+  showInnerOnClick = (elementID) => {
+    const element = document.getElementById(elementID);
+    if (!element) {
+      throw new Error(`No item with ID ${elementID} found.`);
+    }
+    element.addEventListener("click", this.showInnerSidebar);
+  };
+  /**
+   * A helper function to toggle between the outer and inner sidebar when an element is clicked.
+   * @param elementID The ID of the element that should toggle the sidebar view.
+   */
+  toggleStateOnClick = (elementID) => {
+    const element = document.getElementById(elementID);
+    if (!element) {
+      throw new Error(`No item with ID ${elementID} found.`);
+    }
+    element.addEventListener("click", this.toggleSidebarState);
+  };
+  /**
+   * A function to show the inner sidebar.
+   */
+  showInnerSidebar = () => {
+    this.sidebarsContainer.classList.add("inner", "active");
+  };
+  /**
+   * A function to show the outer sidebar.
+   */
+  showOuterSidebar = () => {
+    this.sidebarsContainer.classList.add("active");
+    this.sidebarsContainer.classList.remove("inner");
+  };
+  /**
+   * A function to toggle between the outer and inner sidebar.
+   */
+  toggleSidebarState = () => {
+    if (this.sidebarsContainer.classList.contains("inner")) {
+      this.showOuterSidebar();
+    } else {
+      this.showInnerSidebar();
+    }
+  };
+  /**
+   * A function to hide the sidebar altogether.
+   */
+  hideSidebar = () => {
+    this.sidebarsContainer.classList.remove("inner", "active");
+  };
+}
+export {
+  DoubleSidebarHelper,
+  SingleSidebarHelper
+};

package/{src → dist}/components/Tabs/TabItem.astro

@@ -1,7 +1,7 @@
 ---
-import type { StudioCMSColorway } from '../../utils/colors';
-import { generateID } from '../../utils/generateID';
-import type { HeroIconName } from '../../utils/iconType';
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import { generateID } from '../../utils/generateID.js';
+import type { HeroIconName } from '../Icon/iconType.js';
 
 /**
  * The props for the TabItem component.

package/dist/components/Tabs/Tabs.astro

@@ -0,0 +1,150 @@
+---
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import { generateID } from '../../utils/generateID.js';
+import Icon from '../Icon/Icon.astro';
+import type { HeroIconName } from '../Icon/iconType.js';
+import './tabs.css';
+
+interface Tab {
+	icon?: HeroIconName;
+	label: string;
+	color: Exclude<StudioCMSColorway, 'default'>;
+	tabId: string;
+}
+
+/**
+ * The props for the Tabs component.
+ */
+interface Props {
+	/**
+	 * The sync key for the tabs. If provided, the active tab will be synced across all instances of the tabs with the same sync key.
+	 * Additionally, the active tab will be stored session- or local storage depending on the `storage` prop.
+	 */
+	syncKey?: string;
+	/**
+	 * The storage type for the tabs. Defaults to `session`.
+	 */
+	storage?: 'session' | 'persistent';
+	/**
+	 * The variant of the tabs. Defaults to `default`.
+	 */
+	variant?: 'default' | 'starlight';
+	/**
+	 * The alignment of the tabs. Defaults to `left`.
+	 */
+	align?: 'left' | 'center' | 'right';
+}
+
+const extractTabInfoWithRegex = (input: string) => {
+	const tabItemRegex = /<sui-tab-item([^>]*)>/g;
+
+	const attributeRegex = /data-([\w-]+)="([^"]*)"/g;
+
+	const tabs: Tab[] = [];
+	let tabMatch: RegExpExecArray | null;
+
+	// biome-ignore lint/suspicious/noAssignInExpressions: Nop
+	while ((tabMatch = tabItemRegex.exec(input)) !== null) {
+		let attributes: { [key: string]: string } = {};
+
+		let attributeMatch: RegExpExecArray | null;
+
+		if (!tabMatch[1]) continue;
+
+		// biome-ignore lint/suspicious/noAssignInExpressions: Nop
+		while ((attributeMatch = attributeRegex.exec(tabMatch[1])) !== null) {
+			if (!attributeMatch[1] || !attributeMatch[2]) continue;
+
+			if (
+				attributeMatch[1] === 'icon' ||
+				attributeMatch[1] === 'label' ||
+				attributeMatch[1] === 'color'
+			) {
+				attributes[attributeMatch[1]] = attributeMatch[2];
+			}
+
+			if (attributeMatch[1] === 'tab-id') {
+				attributes.tabId = attributeMatch[2];
+			}
+		}
+
+		tabs.push(attributes as unknown as Tab);
+	}
+
+	return tabs;
+};
+
+const markTabAsActive = (tabId: string, html: string): string => {
+	if (!tabId) return html;
+
+	const updatedHtml = html.replace(
+		/<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;
+};
+
+const uniqueId = generateID('sui-tabs-container');
+
+const {
+	syncKey: originalSyncKey,
+	storage = 'session',
+	variant = 'default',
+	align = 'left',
+} = Astro.props;
+
+const syncKey = originalSyncKey ? `sui-tabs-${originalSyncKey}` : undefined;
+
+const tabContents = await Astro.slots.render('default');
+const tabs = extractTabInfoWithRegex(tabContents);
+const finalizedTabContents = markTabAsActive(tabs[0]?.tabId || '', tabContents);
+const containerId = generateID('sui-tabs-container');
+---
+
+<div 
+  class="sui-tabs-container"
+  id={containerId}
+  data-sync-key={syncKey}
+  data-unique-id={uniqueId}
+  data-storage-strategy={storage}
+  class:list={[variant, align]}
+>
+  <div class="sui-tabs-list" role="tablist">
+    {tabs.map((tab, i) => (
+      <button 
+        role="tab"
+		type="button"
+        class="sui-tab-header"
+        id={syncKey ? `${syncKey}-${i}` : undefined}
+        tabindex={i === 0 ? 0 : -1}
+        data-tab-child={tab.tabId}
+        class:list={[i === 0 && "active", tab.color, syncKey && `${syncKey}:${i}`]}
+      >
+        {tab.icon && (
+          <Icon name={tab.icon} width={24} height={24} />
+        )}
+        <span>{tab.label}</span>
+      </button>
+    ))}
+  </div>
+  <div class="sui-tabs-content">
+    <Fragment set:html={finalizedTabContents} />
+  </div>
+</div>
+<script>
+import "studiocms:ui/scripts/tabs"
+</script>

package/dist/components/Tabs/tabs.css

@@ -0,0 +1,121 @@
+.sui-tabs-container {
+  width: 100%;
+}
+.sui-tabs-list {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+  position: relative;
+}
+.default .sui-tabs-list {
+  margin-top: -4px;
+  margin-bottom: calc(2rem - 4px);
+  padding: 4px 4px;
+  margin-left: -4px;
+}
+.center .sui-tabs-list {
+  justify-content: center;
+}
+.right .sui-tabs-list {
+  justify-content: flex-end;
+}
+.sui-tab-header {
+  margin-top: 0 !important;
+  display: flex;
+  flex-direction: row;
+  gap: .5rem;
+  cursor: pointer;
+  position: relative;
+  min-width: fit-content;
+}
+.default .sui-tab-header {
+  border-radius: var(--radius-md);
+  height: 40px;
+  padding: 0.5rem 0.75rem;
+  transition: all .15s ease;
+  font-size: 0.875em;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sui-tab-header * {
+  pointer-events: none;
+}
+.default .sui-tab-header:focus-visible {
+  outline: 2px solid hsl(var(--text-normal));
+  outline-offset: 2px;
+}
+.default .sui-tab-header:hover {
+  background-color: hsla(var(--default-flat-active)) !important;
+}
+.default .sui-tab-header.active {
+  background-color: hsla(var(--primary-flat-active)) !important;
+}
+.default .sui-tab-header.success.active {
+  background-color: hsla(var(--success-flat-active)) !important;
+}
+.default .sui-tab-header.warning.active {
+  background-color: hsla(var(--warning-flat-active)) !important;
+}
+.default .sui-tab-header.danger.active {
+  background-color: hsla(var(--danger-flat-active)) !important;
+}
+.default .sui-tab-header.danger.info {
+  background-color: hsla(var(--info-flat-active)) !important;
+}
+.default .sui-tab-header.danger.mono {
+  background-color: hsla(var(--mono-flat-active)) !important;
+}
+.starlight .sui-tabs-list {
+  margin-bottom: 1rem;
+  gap: 0;
+}
+.starlight .sui-tabs-list::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: hsl(var(--border));
+}
+.starlight .sui-tab-header {
+  padding: 0.25rem 1.25rem;
+  color: hsl(var(--text-muted));
+}
+.starlight .sui-tab-header.active {
+  font-weight: 600;
+  color: hsl(var(--text-normal));
+}
+.starlight .sui-tab-header.active::after {
+  content: "";
+  width: 100%;
+  height: 2px;
+  background-color: hsl(var(--primary-base));
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 15;
+}
+.starlight .sui-tab-header:focus-visible::after {
+  height: calc(100% - 2px);
+  width: calc(100% - 2px);
+  bottom: 1px;
+  left: 1px;
+  border: 2px solid hsl(var(--primary-base));
+  background-color: transparent;
+  outline: 1px solid hsl(var(--text-normal));
+}
+.default .sui-tab-header.active {
+  background-color: hsla(var(--primary-flat-active)) !important;
+}
+.sui-tabs-content {
+  width: 100%;
+  margin: 0 !important;
+}

package/dist/components/Tabs/tabs.d.ts

@@ -0,0 +1 @@
+declare const allTabContainers: NodeListOf<HTMLDivElement>;

package/dist/components/Tabs/tabs.js

@@ -0,0 +1,82 @@
+const allTabContainers = document.querySelectorAll(".sui-tabs-container");
+for (const tabContainer of allTabContainers) {
+  const storage = tabContainer.dataset.storageStrategy;
+  const syncKey = tabContainer.dataset.syncKey;
+  const storageLayer = storage === "session" ? sessionStorage : localStorage;
+  const constructCustomEvent = (tabIndex, uniqueId) => {
+    return new CustomEvent(`sui-tab-switch:${syncKey}`, {
+      detail: {
+        tabIndex,
+        uniqueId
+      }
+    });
+  };
+  const switchTab = (target, container, originatedFromSync = false) => {
+    const activeChildren = container.querySelectorAll(".active");
+    for (const child of activeChildren) {
+      child.tabIndex = -1;
+      child.classList.remove("active");
+    }
+    const newActiveTab = target;
+    newActiveTab.classList.add("active");
+    newActiveTab.tabIndex = 0;
+    const newActiveTabContentId = newActiveTab.dataset.tabChild;
+    const newActiveTabContent = container.querySelector(
+      `sui-tab-item[data-tab-id="${newActiveTabContentId}"]`
+    );
+    newActiveTabContent.classList.add("active");
+    if (syncKey && !originatedFromSync) {
+      const tabIndex = Array.prototype.indexOf.call(
+        newActiveTab.parentElement.children,
+        newActiveTab
+      );
+      storageLayer.setItem(syncKey, tabIndex.toString());
+      document.dispatchEvent(constructCustomEvent(tabIndex, container.dataset.uniqueId));
+    }
+  };
+  const tabHeaders = tabContainer.querySelectorAll(".sui-tab-header");
+  for (const tab of tabHeaders) {
+    tab.addEventListener("click", (e) => switchTab(e.target, tabContainer));
+    tab.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        const activeTabIndex = Array.prototype.indexOf.call(tab.parentElement.children, tab);
+        const nextTabIndex = e.key === "ArrowLeft" ? activeTabIndex - 1 : activeTabIndex + 1;
+        if (nextTabIndex >= 0 && nextTabIndex < tab.parentElement.children.length) {
+          tab.tabIndex = -1;
+          const nextTab = tab.parentElement.children[nextTabIndex];
+          nextTab.tabIndex = 0;
+          nextTab.click();
+          nextTab.focus();
+        } else if (nextTabIndex < 0) {
+          tab.tabIndex = -1;
+          const lastTab = tab.parentElement.children[tab.parentElement.children.length - 1];
+          lastTab.tabIndex = 0;
+          lastTab.click();
+          lastTab.focus();
+        } else {
+          tab.tabIndex = -1;
+          const firstTab = tab.parentElement.children[0];
+          firstTab.tabIndex = 0;
+          firstTab.click();
+          firstTab.focus();
+        }
+      }
+    });
+  }
+  if (syncKey) {
+    const activeTabIndex = storageLayer.getItem(syncKey);
+    if (activeTabIndex) {
+      const activeTab = tabContainer.querySelector(`#${syncKey}-${activeTabIndex}`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+    document.addEventListener(`sui-tab-switch:${syncKey}`, (e) => {
+      const event = e;
+      const { tabIndex, uniqueId } = event.detail;
+      if (uniqueId === tabContainer.dataset.uniqueId) return;
+      const newTab = tabContainer.querySelector(`#${syncKey}-${tabIndex}`);
+      switchTab(newTab, tabContainer, true);
+    });
+  }
+}

package/{src/components → dist/components/Textarea}/Textarea.astro

@@ -1,6 +1,7 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
-import { generateID } from '../utils/generateID';
+import { generateID } from '../../utils/generateID.js';
+import './textarea.css';
 
 /**
  * Props for the textarea component
@@ -81,63 +82,3 @@ const {
     
   >{defaultValue}</textarea>
 </label>
-<style>
-  .sui-textarea-label {
-    display: flex;
-    flex-direction: column;
-    gap: .25rem;
-    max-width: 80ch;
-  }
-
-  .sui-textarea-label.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    color: hsl(var(--text-muted));
-  }
-
-  .sui-textarea-label.full-width {
-    width: 100%;
-    max-width: none;
-  }
-
-  .sui-textarea-label.full-height {
-    height: 100%;
-  }
-
-  .label {
-    font-size: 14px;
-  }
-
-  .sui-textarea {
-    padding: .65rem;
-    border-radius: 8px;
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--background-step-2));
-    color: hsl(var(--text-normal));
-    transition: all .15s ease;
-    resize: none;
-    min-height: 12ch;
-    width: 100%;
-    height: 100%;
-  }
-
-  .sui-textarea:hover {
-    background: hsl(var(--background-step-3));
-  }
-
-  .resize .sui-textarea {
-    resize: both;
-  }
-
-  .sui-textarea:active,
-  .sui-textarea:focus {
-    border: 1px solid hsl(var(--primary-base));
-    outline: none;
-    background: hsl(var(--background-step-2));
-  }
-
-  .req-star {
-    color: hsl(var(--danger-base));
-    font-weight: 700;
-  }
-</style>

package/dist/components/Textarea/textarea.css

@@ -0,0 +1,49 @@
+.sui-textarea-label {
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+  max-width: 80ch;
+}
+.sui-textarea-label.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  color: hsl(var(--text-muted));
+}
+.sui-textarea-label.full-width {
+  width: 100%;
+  max-width: none;
+}
+.sui-textarea-label.full-height {
+  height: 100%;
+}
+.label {
+  font-size: 14px;
+}
+.sui-textarea {
+  padding: .65rem;
+  border-radius: var(--radius-md);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background-step-2));
+  color: hsl(var(--text-normal));
+  transition: all .15s ease;
+  resize: none;
+  min-height: 12ch;
+  width: 100%;
+  height: 100%;
+}
+.sui-textarea:hover {
+  background: hsl(var(--background-step-3));
+}
+.resize .sui-textarea {
+  resize: both;
+}
+.sui-textarea:active,
+.sui-textarea:focus {
+  border: 1px solid hsl(var(--primary-base));
+  outline: none;
+  background: hsl(var(--background-step-2));
+}
+.req-star {
+  color: hsl(var(--danger-base));
+  font-weight: 700;
+}

package/dist/components/ThemeToggle/ThemeToggle.astro

@@ -0,0 +1,21 @@
+---
+import Button, { type Props as ButtonProps } from '../Button/Button.astro';
+import './themetoggle.css';
+
+type Props = ButtonProps;
+
+const props = Astro.props;
+---
+
+<Button id='sui-theme-toggle' {...props}>
+  <div id="dark-content">
+    <slot name="dark" />
+  </div>
+  <div id="light-content">
+    <slot name="light" />
+  </div>
+</Button>
+
+<script>
+  import "studiocms:ui/scripts/themetoggle"
+</script>

package/dist/components/ThemeToggle/themetoggle.css

@@ -0,0 +1,17 @@
+#sui-theme-toggle,
+#sui-theme-toggle * {
+  color: hsl(var(--text-normal));
+}
+#sui-theme-toggle #dark-content,
+#sui-theme-toggle #light-content {
+  display: none;
+  width: fit-content;
+  height: fit-content;
+  max-height: 100%;
+}
+[data-theme=dark] #sui-theme-toggle #dark-content {
+  display: block;
+}
+[data-theme=light] #sui-theme-toggle #light-content {
+  display: block;
+}

package/dist/components/ThemeToggle/themetoggle.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ThemeToggle/themetoggle.js

@@ -0,0 +1,4 @@
+import { ThemeHelper } from "../../utils/ThemeHelper.js";
+const themeToggle = document.getElementById("sui-theme-toggle");
+const themeHelper = new ThemeHelper();
+themeHelper.registerToggle(themeToggle);