@studiocms/ui 0.0.1 → 0.3.0

package/src/components/User.astro

@@ -2,37 +2,56 @@
 import { Image } from 'astro:assets';
 import Icon from '../utils/Icon.astro';
 
+/**
+ * The props for the User component.
+ */
 interface Props {
+	/**
+	 * The name of the user.
+	 */
 	name: string;
+	/**
+	 * The description of the user. Could be a role, a handle, etc.
+	 */
 	description: string;
+	/**
+	 * The avatar of the user. Either a URL to an image or an imported image.
+	 */
 	avatar?: string;
+	/**
+	 * Additional classes to apply to the user container.
+	 */
 	class?: string;
-};
+	/**
+	 * The loading strategy for the image. Defaults to `lazy`.
+	 */
+	loading?: 'eager' | 'lazy';
+}
 
-const { name, description, avatar, class: className } = Astro.props;
+const { name, description, avatar, class: className, loading = 'lazy' } = Astro.props;
 ---
-<div class="user-container" class:list={[ className ]}>
-  <div class="avatar-container">
+<div class="sui-user-container" class:list={[ className ]}>
+  <div class="sui-avatar-container">
     {avatar ? (
-      <Image src={avatar} inferSize alt={name} class="avatar-img" />
+      <Image src={avatar} inferSize loading={loading} alt={name} class="sui-avatar-img" />
     ) : (
-      <Icon name='user' width={24} height={24} />
+      <Icon name='user' width={24} height={24} role='img' aria-label={`Placeholder avatar for ${name}`} />
     )}
   </div>
-  <div class="text-content">
-    <span class="name">{name}</span>
-    <span class="description">{description}</span>
+  <div class="sui-text-content">
+    <span class="sui-name">{name}</span>
+    <span class="sui-description">{description}</span>
   </div>
 </div>
 <style>
-  .user-container {
+  .sui-user-container {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 1rem;
   }
 
-  .avatar-container {
+  .sui-avatar-container {
     width: 2.5rem;
     height: 2.5rem;
     background-color: hsl(var(--default-base));
@@ -44,23 +63,23 @@ const { name, description, avatar, class: className } = Astro.props;
     border: 1px solid hsl(var(--border));
   }
 
-  .avatar-img {
+  .sui-avatar-img {
     width: 100%;
     height: auto;
   }
 
-  .text-content {
+  .sui-text-content {
     display: flex;
     flex-direction: column;
     gap: .125rem;
   }
 
-  .name {
+  .sui-name {
     font-size: 1em;
     font-weight: 600;
   }
 
-  .description {
+  .sui-description {
     font-size: .875em;
     font-weight: 400;
     color: hsl(var(--text-muted));

package/src/components/index.ts

@@ -1,25 +1,27 @@
-export { default as Button } from "./Button.astro";
-export { default as Divider } from "./Divider.astro";
-export { default as Input } from "./Input.astro";
-export { default as Row } from "./Row.astro";
-export { default as Center } from "./Center.astro";
-export { default as Textarea } from "./Textarea.astro";
-export { default as Checkbox } from "./Checkbox.astro";
-export { default as Toggle } from "./Toggle.astro";
-export { default as RadioGroup } from "./RadioGroup.astro";
-export { default as Toaster } from "./Toast/Toaster.astro";
-export { default as Card } from "./Card.astro";
-export { default as Modal } from "./Modal/Modal.astro";
-export { default as Select } from "./Select.astro";
-export { default as SearchSelect } from "./SearchSelect.astro";
-export { default as Dropdown } from "./Dropdown/Dropdown.astro";
-export { default as User } from "./User.astro";
+export { default as Button } from './Button.astro';
+export { default as Divider } from './Divider.astro';
+export { default as Input } from './Input.astro';
+export { default as Row } from './Row.astro';
+export { default as Center } from './Center.astro';
+export { default as Textarea } from './Textarea.astro';
+export { default as Checkbox } from './Checkbox.astro';
+export { default as Toggle } from './Toggle.astro';
+export { default as RadioGroup } from './RadioGroup.astro';
+export { default as Toaster } from './Toast/Toaster.astro';
+export { default as Card } from './Card.astro';
+export { default as Modal } from './Modal/Modal.astro';
+export { default as Select } from './Select.astro';
+export { default as SearchSelect } from './SearchSelect.astro';
+export { default as Dropdown } from './Dropdown/Dropdown.astro';
+export { default as User } from './User.astro';
 export { default as ThemeToggle } from './ThemeToggle.astro';
+export { default as Footer } from './Footer.astro';
+export { Tabs, TabItem } from './Tabs/index';
 
-export { default as Sidebar } from "./Sidebar/Single.astro";
-export { default as DoubleSidebar } from "./Sidebar/Double.astro";
-export { SingleSidebarHelper, DoubleSidebarHelper } from "./Sidebar/helpers";
+export { default as Sidebar } from './Sidebar/Single.astro';
+export { default as DoubleSidebar } from './Sidebar/Double.astro';
+export { SingleSidebarHelper, DoubleSidebarHelper } from './Sidebar/helpers';
 
-export { toast } from "./Toast/toast";
-export { ModalHelper } from "./Modal/modal";
-export { DropdownHelper } from "./Dropdown/dropdown";
+export { toast } from './Toast/toast';
+export { ModalHelper } from './Modal/modal';
+export { DropdownHelper } from './Dropdown/dropdown';

package/src/components.ts

@@ -15,6 +15,8 @@ export { SearchSelect } from './components/index';
 export { Dropdown, DropdownHelper } from './components/index';
 export { User } from './components/index';
 export { ThemeToggle } from './components/index';
+export { Footer } from './components/index';
+export { Tabs, TabItem } from './components/index';
 
 export {
 	Sidebar,

package/src/css/colors.css

@@ -10,97 +10,97 @@
 
 :root {
 	/* Default Styles (Dark Mode) */
-	--background-base: 0, 0%, 6%;
-	--background-step-1: 0, 0%, 8%;
-	--background-step-2: 0, 0%, 10%;
-	--background-step-3: 0, 0%, 14%;
+	--background-base: 0 0% 6%;
+	--background-step-1: 0 0% 8%;
+	--background-step-2: 0 0% 10%;
+	--background-step-3: 0 0% 14%;
 
-	--text-normal: 0, 0%, 100%;
-	--text-muted: 0, 0%, 54%;
-	--text-inverted: 0, 0%, 0%;
+	--text-normal: 0 0% 100%;
+	--text-muted: 0 0% 54%;
+	--text-inverted: 0 0% 0%;
 
-	--border: 240, 5%, 17%;
+	--border: 240 5% 17%;
 
-	--shadow: 0, 0%, 0%;
+	--shadow: 0 0% 0%;
 
-	--default-base: 0, 0%, 14%;
-	--default-hover: 0, 0%, 15%;
-	--default-active: 0, 0%, 19%;
+	--default-base: 0 0% 14%;
+	--default-hover: 0 0% 21%;
+	--default-active: 0 0% 15%;
 
-	--primary-base: 259, 83%, 73%;
-	--primary-hover: 259, 77%, 71%;
-	--primary-active: 259, 73%, 67%;
+	--primary-base: 259 83% 73%;
+	--primary-hover: 259 77% 78%;
+	--primary-active: 259 73% 67%;
 
-	--success-base: 142, 71%, 46%;
-	--success-hover: 142, 72%, 52%;
-	--success-active: 142, 87%, 59%;
+	--success-base: 142 71% 46%;
+	--success-hover: 142 72% 61%;
+	--success-active: 142 87% 52%;
 
-	--warning-base: 48, 96%, 53%;
-	--warning-hover: 48, 97%, 61%;
-	--warning-active: 48, 100%, 71%;
+	--warning-base: 48 96% 53%;
+	--warning-hover: 48 97% 70%;
+	--warning-active: 48 100% 61%;
 
-	--danger-base: 339, 97%, 31%;
-	--danger-hover: 337, 98%, 37%;
-	--danger-active: 337, 88%, 45%;
+	--danger-base: 339 97% 31%;
+	--danger-hover: 337 98% 37%;
+	--danger-active: 337 88% 32%;
 
 	/* Non-specific variables */
-	--text-light: 0, 0%, 100%;
-	--text-dark: 0, 0%, 0%;
+	--text-light: 0 0% 100%;
+	--text-dark: 0 0% 0%;
 
 	/* Flat colorways since they use variables */
-	--default-flat: var(--default-base), 0.5;
-	--default-flat-hover: var(--default-base), 0.75;
-	--default-flat-active: var(--default-base), 0.85;
+	--default-flat: var(--default-base) / 0.5;
+	--default-flat-hover: var(--default-base) / 0.75;
+	--default-flat-active: var(--default-base) / 0.85;
 
-	--primary-flat: var(--primary-base), 0.1;
-	--primary-flat-hover: var(--primary-base), 0.25;
-	--primary-flat-active: var(--primary-base), 0.35;
+	--primary-flat: var(--primary-base) / 0.1;
+	--primary-flat-hover: var(--primary-base) / 0.25;
+	--primary-flat-active: var(--primary-base) / 0.35;
 
-	--success-flat: var(--success-base), 0.1;
-	--success-flat-hover: var(--success-base), 0.25;
-	--success-flat-active: var(--success-base), 0.35;
+	--success-flat: var(--success-base) / 0.1;
+	--success-flat-hover: var(--success-base) / 0.25;
+	--success-flat-active: var(--success-base) / 0.35;
 
-	--warning-flat: var(--warning-base), 0.1;
-	--warning-flat-hover: var(--warning-base), 0.25;
-	--warning-flat-active: var(--warning-base), 0.35;
+	--warning-flat: var(--warning-base) / 0.1;
+	--warning-flat-hover: var(--warning-base) / 0.25;
+	--warning-flat-active: var(--warning-base) / 0.35;
 
-	--danger-flat: var(--danger-base), 0.1;
-	--danger-flat-hover: var(--danger-base), 0.25;
-	--danger-flat-active: var(--danger-base), 0.35;
+	--danger-flat: var(--danger-base) / 0.1;
+	--danger-flat-hover: var(--danger-base) / 0.25;
+	--danger-flat-active: var(--danger-base) / 0.35;
 }
 
 [data-theme="light"] {
 	/* Light Mode Styles */
-	--background-base: 0, 0%, 97%;
-	--background-step-1: 0, 0%, 90%;
-	--background-step-2: 0, 0%, 85%;
-	--background-step-3: 0, 0%, 80%;
+	--background-base: 0 0% 97%;
+	--background-step-1: 0 0% 90%;
+	--background-step-2: 0 0% 85%;
+	--background-step-3: 0 0% 80%;
 
-	--text-normal: 0, 0%, 0%;
-	--text-muted: 0, 0%, 24%;
-	--text-inverted: 0, 0%, 100%;
+	--text-normal: 0 0% 0%;
+	--text-muted: 0 0% 24%;
+	--text-inverted: 0 0% 100%;
 
-	--border: 263, 5%, 68%;
+	--border: 263 5% 68%;
 
-	--shadow: 0, 0%, 65%;
+	--shadow: 0 0% 65%;
 
-	--default-base: 0, 0%, 74%;
-	--default-hover: 0, 0%, 81%;
-	--default-active: 0, 0%, 91%;
+	--default-base: 0 0% 74%;
+	--default-hover: 0 0% 81%;
+	--default-active: 0 0% 91%;
 
-	--primary-base: 259, 85%, 61%;
-	--primary-hover: 259, 78%, 56%;
-	--primary-active: 259, 71%, 50%;
+	--primary-base: 259 85% 61%;
+	--primary-hover: 259 78% 56%;
+	--primary-active: 259 71% 50%;
 
-	--success-base: 142, 59%, 47%;
-	--success-hover: 142, 62%, 56%;
-	--success-active: 142, 87%, 59%;
+	--success-base: 142 59% 47%;
+	--success-hover: 142 62% 56%;
+	--success-active: 142 87% 59%;
 
-	--warning-base: 48, 92%, 46%;
-	--warning-hover: 48, 88%, 43%;
-	--warning-active: 48, 85%, 40%;
+	--warning-base: 48 92% 46%;
+	--warning-hover: 48 88% 43%;
+	--warning-active: 48 85% 40%;
 
-	--danger-base: 339, 97%, 31%;
-	--danger-hover: 337, 98%, 37%;
-	--danger-active: 337, 88%, 45%;
+	--danger-base: 339 97% 31%;
+	--danger-hover: 337 98% 37%;
+	--danger-active: 337 88% 45%;
 }

package/src/css/resets.css

@@ -19,7 +19,6 @@ html[data-theme="light"] {
 }
 
 body {
-	font-family: "Onest Variable", sans-serif;
 	-webkit-font-smoothing: antialiased;
 	color: hsl(var(--text-normal));
 	background-color: hsl(var(--background-base));

package/src/integration.ts

@@ -0,0 +1,18 @@
+import type { AstroIntegration } from 'astro';
+import { createResolver } from './utils/create-resolver';
+
+// biome-ignore lint/complexity/noBannedTypes: Will be implemented in v0.3.0
+type Options = {};
+
+export default function integration(options: Options = {}): AstroIntegration {
+	const { resolve } = createResolver(import.meta.url);
+
+	return {
+		name: '@studiocms/ui',
+		hooks: {
+			'astro:config:setup': ({ injectScript }) => {
+				injectScript('page-ssr', `import '${resolve('./css/global.css')}'`);
+			},
+		},
+	};
+}

package/src/layouts/RootLayout.astro

@@ -1,5 +1,4 @@
 ---
-import '@fontsource-variable/onest/index.css';
 import '../css/global.css';
 import BaseHead from '../components/BaseHead.astro';
 import type { HeadConfig } from '../utils/headers';
@@ -11,7 +10,7 @@ export interface RootLayoutProps {
 	headers?: HeadConfig | undefined;
 	lang?: string;
 	defaultTheme?: 'dark' | 'light';
-};
+}
 
 type Props = RootLayoutProps;
 

package/src/types/index.ts

@@ -8,4 +8,4 @@ export interface ToastProps {
 	duration?: number;
 	persistent?: boolean;
 	closeButton?: boolean;
-};
+}

package/src/utils/ThemeHelper.ts

@@ -5,123 +5,141 @@ type ThemeChangeCallback = (newTheme: Theme, oldTheme: Theme) => void;
  * A helper to toggle, set and get the current StudioCMS UI theme.
  */
 class ThemeHelper {
-  private themeManagerElement: HTMLElement;
-  private observer: MutationObserver | undefined;
-  private themeChangeCallbacks: ThemeChangeCallback[] = [];
-
-  /**
-   * A helper to toggle, set and get the current StudioCMS UI theme.
-   * @param themeProvider The element that should carry the data-theme attribute (replaces the document root)
-   */
-  constructor(themeProvider?: HTMLElement) {
-    this.themeManagerElement = themeProvider || document.documentElement;
-  }
-
-  /**
-   * Get the current theme.
-   * @param {boolean} resolveSystemTheme Whether to resolve the `system` theme to the actual theme (`dark` or `light`)
-   * @returns {Theme} The current theme.
-   */
-  public getTheme = <T extends boolean>(resolveSystemTheme?: T): T extends true ? 'dark' | 'light' : Theme => {
-    const theme = this.themeManagerElement.dataset.theme as Theme || 'system';
-
-    if (!resolveSystemTheme) {
-      // Side note: Don't ask me why this type wizardry is needed but it gives proper return types so I don't care
-      return theme as T extends true ? 'dark' | 'light' : Theme; 
-    }
-    
-    if (this.themeManagerElement.dataset.theme !== 'system')  {
-      return this.themeManagerElement.dataset.theme as 'dark' | 'light';
-    }
-
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-
-    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-      return 'light';
-    }
-
-    // This should (in theory) never happen since, at time of writing, window.matchMedia is supported
-    // by 96.83% of all browsers in use. (https://caniuse.com/mdn-api_window_matchmedia)
-    throw new Error('Unable to resolve theme. (Most likely cause: window.matchMedia is not supported by the browser)');
-  };
-
-  /**
-   * Sets the current theme.
-   * @param theme The new theme. One of `dark`, `light` or `system`.
-   */
-  public setTheme = (theme: Theme): void => {
-    this.themeManagerElement.dataset.theme = theme;
-  };
-
-  /**
-   * Toggles the current theme. 
-   * 
-   * If the theme is set to `system` (or no theme is set via the root element),
-   * the theme is set depending on the user's color scheme preference (set in the browser).
-   */
-  public toggleTheme = (): void => {
-    const theme = this.getTheme();
-
-    if (theme === 'dark') {
-      this.setTheme('light');
-      return;
-    }
-
-    if (theme === 'light') {
-      this.setTheme('dark');
-      return;
-    }
-
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      this.setTheme('light');
-      return;
-    }
-
-    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-      this.setTheme('dark');
-      return;
-    }
-  };
-
-  /**
-   * Register an element to act as a toggle! When clicked, it will toggle the theme.
-   * @param toggle The HTML element that should act as the toggle
-   */
-  public registerToggle = (toggle: HTMLElement | null): void => {
-    if (!toggle) {
-      console.error('Element passed to toggle registration does not exist.');
-      return;
-    };
-
-    toggle.addEventListener('click', this.toggleTheme);
-  };
-
-  /**
-   * Allows for adding a callback that gets called whenever the theme changes.
-   * @param callback The callback to be executed
-   */
-  public onThemeChange = (callback: ThemeChangeCallback): void => {
-    if (!this.observer) {
-      this.observer = new MutationObserver(this.themeManagerMutationHandler);
-      this.observer.observe(this.themeManagerElement, { attributes: true, attributeOldValue: true, attributeFilter: ['data-theme'] });
-    }
-
-    this.themeChangeCallbacks.push(callback);
-  };
-
-  /**
-   * Simply gets the first mutation and calls all registered callbacks. 
-   * @param mutations The mutations array from the observer. Due to the specified options, this will always be a 1-length array,
-   */
-  private themeManagerMutationHandler = (mutations: MutationRecord[]): void => {
-    if (!mutations[0]) return;
-
-    for (const callback of this.themeChangeCallbacks) {
-      callback(this.getTheme(), mutations[0].oldValue as Theme || 'system');
-    }
-  };
+	private themeManagerElement: HTMLElement;
+	private observer: MutationObserver | undefined;
+	private themeChangeCallbacks: ThemeChangeCallback[] = [];
+
+	/**
+	 * A helper to toggle, set and get the current StudioCMS UI theme.
+	 * @param themeProvider The element that should carry the data-theme attribute (replaces the document root)
+	 */
+	constructor(themeProvider?: HTMLElement) {
+		this.themeManagerElement = themeProvider || document.documentElement;
+		this.themeManagerElement.dataset.theme = this.getTheme(true);
+	}
+
+	/**
+	 * Get the current theme.
+	 * @param {boolean} resolveSystemTheme Whether to resolve the `system` theme to the actual theme (`dark` or `light`)
+	 * @returns {Theme} The current theme.
+	 */
+	public getTheme = <T extends boolean>(
+		resolveSystemTheme?: T
+	): T extends true ? 'dark' | 'light' : Theme => {
+		const theme = (this.themeManagerElement.dataset.theme as Theme) || 'system';
+
+		if (!resolveSystemTheme) {
+			// Side note: Don't ask me why this type wizardry is needed but it gives proper return types so I don't care
+			return theme as T extends true ? 'dark' | 'light' : Theme;
+		}
+
+		if ((this.themeManagerElement.dataset.theme ?? 'system') !== 'system') {
+			return this.themeManagerElement.dataset.theme as 'dark' | 'light';
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			return 'dark';
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+			return 'light';
+		}
+
+		// This should (in theory) never happen since, at time of writing, window.matchMedia is supported
+		// by 96.83% of all browsers in use. (https://caniuse.com/mdn-api_window_matchmedia)
+		throw new Error(
+			'Unable to resolve theme. (Most likely cause: window.matchMedia is not supported by the browser)'
+		);
+	};
+
+	/**
+	 * Sets the current theme.
+	 * @param theme The new theme. One of `dark`, `light` or `system`.
+	 */
+	public setTheme = (theme: Theme): void => {
+		// Assign the new theme to the dataset
+		this.themeManagerElement.dataset.theme = theme;
+
+		// If starlight is used, we also want to set the theme in local storage.
+		if (typeof localStorage.getItem('starlight-theme') === 'string') {
+			localStorage.setItem('starlight-theme', theme === 'system' ? '' : theme);
+		}
+	};
+
+	/**
+	 * Toggles the current theme.
+	 *
+	 * If the theme is set to `system` (or no theme is set via the root element),
+	 * the theme is set depending on the user's color scheme preference (set in the browser).
+	 */
+	public toggleTheme = (): void => {
+		const theme = this.getTheme();
+
+		if (theme && theme === 'dark') {
+			this.setTheme('light');
+			return;
+		}
+
+		if (theme && theme === 'light') {
+			this.setTheme('dark');
+			return;
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			this.setTheme('light');
+			return;
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+			this.setTheme('dark');
+			return;
+		}
+	};
+
+	/**
+	 * Register an element to act as a toggle! When clicked, it will toggle the theme.
+	 * @param toggle The HTML element that should act as the toggle
+	 */
+	public registerToggle = (toggle: HTMLElement | null): void => {
+		if (!toggle) {
+			console.error('Element passed to toggle registration does not exist.');
+			return;
+		}
+
+		if (!toggle.dataset.suiThemeToggle) {
+			toggle.addEventListener('click', this.toggleTheme);
+			toggle.dataset.suiThemeToggle = 'true';
+		}
+	};
+
+	/**
+	 * Allows for adding a callback that gets called whenever the theme changes.
+	 * @param callback The callback to be executed
+	 */
+	public onThemeChange = (callback: ThemeChangeCallback): void => {
+		if (!this.observer) {
+			this.observer = new MutationObserver(this.themeManagerMutationHandler);
+			this.observer.observe(this.themeManagerElement, {
+				attributes: true,
+				attributeOldValue: true,
+				attributeFilter: ['data-theme'],
+			});
+		}
+
+		this.themeChangeCallbacks.push(callback);
+	};
+
+	/**
+	 * Simply gets the first mutation and calls all registered callbacks.
+	 * @param mutations The mutations array from the observer. Due to the specified options, this will always be a 1-length array,
+	 */
+	private themeManagerMutationHandler = (mutations: MutationRecord[]): void => {
+		if (!mutations[0]) return;
+
+		for (const callback of this.themeChangeCallbacks) {
+			callback(this.getTheme(), (mutations[0].oldValue as Theme) || 'system');
+		}
+	};
 }
 
 export { ThemeHelper, type Theme };