@studiocms/ui 0.0.1

package/src/css/colors.css

@@ -0,0 +1,106 @@
+[data-theme="light"],
+[data-theme="light"] * {
+	color-scheme: light;
+}
+
+[data-theme="dark"],
+[data-theme="dark"] * {
+	color-scheme: dark;
+}
+
+: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%;
+
+	--text-normal: 0, 0%, 100%;
+	--text-muted: 0, 0%, 54%;
+	--text-inverted: 0, 0%, 0%;
+
+	--border: 240, 5%, 17%;
+
+	--shadow: 0, 0%, 0%;
+
+	--default-base: 0, 0%, 14%;
+	--default-hover: 0, 0%, 15%;
+	--default-active: 0, 0%, 19%;
+
+	--primary-base: 259, 83%, 73%;
+	--primary-hover: 259, 77%, 71%;
+	--primary-active: 259, 73%, 67%;
+
+	--success-base: 142, 71%, 46%;
+	--success-hover: 142, 72%, 52%;
+	--success-active: 142, 87%, 59%;
+
+	--warning-base: 48, 96%, 53%;
+	--warning-hover: 48, 97%, 61%;
+	--warning-active: 48, 100%, 71%;
+
+	--danger-base: 339, 97%, 31%;
+	--danger-hover: 337, 98%, 37%;
+	--danger-active: 337, 88%, 45%;
+
+	/* Non-specific variables */
+	--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;
+
+	--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;
+
+	--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;
+}
+
+[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%;
+
+	--text-normal: 0, 0%, 0%;
+	--text-muted: 0, 0%, 24%;
+	--text-inverted: 0, 0%, 100%;
+
+	--border: 263, 5%, 68%;
+
+	--shadow: 0, 0%, 65%;
+
+	--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%;
+
+	--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%;
+
+	--danger-base: 339, 97%, 31%;
+	--danger-hover: 337, 98%, 37%;
+	--danger-active: 337, 88%, 45%;
+}

package/src/css/global.css

@@ -0,0 +1,2 @@
+@import url("./colors.css");
+@import url("./resets.css");

package/src/css/resets.css

@@ -0,0 +1,55 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box !important;
+}
+
+html {
+	color-scheme: dark;
+	accent-color: hsl(var(--primary-base));
+}
+
+html,
+body {
+	margin: 0;
+}
+
+html[data-theme="light"] {
+	color-scheme: light;
+}
+
+body {
+	font-family: "Onest Variable", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	color: hsl(var(--text-normal));
+	background-color: hsl(var(--background-base));
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+code {
+	overflow-wrap: anywhere;
+}
+
+code {
+	font-family: monospace;
+}
+
+button {
+	border: none;
+	outline: none;
+	background: none;
+	padding: 0;
+}

package/src/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference path="../.astro/types.d.ts" />
+
+interface CustomEventMap {
+	createtoast: CustomEvent<import('./types').ToastProps>;
+}
+
+declare global {
+	interface Document {
+		addEventListener<K extends keyof CustomEventMap>(
+			type: K,
+			listener: (this: Document, ev: CustomEventMap[K]) => void
+		): void;
+		dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
+	}
+}

package/src/icons/Checkmark.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg role="presentation" viewBox="0 0 17 18" width={width} height={height} {...props}>
+  <polyline fill="none" points="1 9 7 14 15 4" stroke="currentColor" stroke-dasharray="22" stroke-dashoffset="66" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
+</svg>

package/src/icons/ChevronUpDown.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width={width} height={height} {...props} stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+</svg>

package/src/icons/User.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width={width} height={height} {...props}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+</svg>

package/src/icons/X-Mark.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {
+	height?: number;
+	width?: number;
+}
+
+const { height = 24, width = 24, ...props } = Astro.props;
+---
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width={width} height={height} {...props}>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>

package/src/layouts/RootLayout.astro

@@ -0,0 +1,34 @@
+---
+import '@fontsource-variable/onest/index.css';
+import '../css/global.css';
+import BaseHead from '../components/BaseHead.astro';
+import type { HeadConfig } from '../utils/headers';
+
+export interface RootLayoutProps {
+	title: string;
+	description: string;
+	image?: string | undefined;
+	headers?: HeadConfig | undefined;
+	lang?: string;
+	defaultTheme?: 'dark' | 'light';
+};
+
+type Props = RootLayoutProps;
+
+const { title, description, image, headers, lang = 'en', defaultTheme = 'dark' } = Astro.props;
+---
+
+<!doctype html>
+<html lang={lang} data-theme={defaultTheme}>
+  <head>
+    <BaseHead
+      {title}
+      {description}
+      {headers}
+      {image}
+    />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

package/src/layouts/index.ts

@@ -0,0 +1,2 @@
+export { default as RootLayout } from './RootLayout.astro';
+export type { RootLayoutProps } from './RootLayout.astro';

package/src/layouts.ts

@@ -0,0 +1 @@
+export { RootLayout, type RootLayoutProps } from './layouts/index';

package/src/types/index.ts

@@ -0,0 +1,11 @@
+export interface ToastProps {
+	title: string;
+	/**
+	 * This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
+	 */
+	description?: string;
+	type: 'success' | 'warning' | 'danger' | 'info';
+	duration?: number;
+	persistent?: boolean;
+	closeButton?: boolean;
+};

package/src/utils/Icon.astro

@@ -0,0 +1,41 @@
+---
+import { icons } from '@iconify-json/heroicons';
+import { getIconData, iconToSVG, replaceIDs } from '@iconify/utils';
+import type { HTMLAttributes } from 'astro/types';
+import { type HeroIconName } from './iconType';
+
+interface SVGAttributes extends HTMLAttributes<'svg'> {
+	// biome-ignore lint/suspicious/noExplicitAny: Allow any string index
+	[key: string]: any;
+}
+
+interface Props extends HTMLAttributes<'svg'> {
+	name: HeroIconName;
+}
+
+const { name, ...props } = Astro.props;
+const attributes = props as SVGAttributes;
+const iconData = getIconData(icons, name);
+
+if (!iconData) {
+	throw new Error(`Icon "${name}" is missing`);
+}
+
+const renderData = iconToSVG(iconData, {
+	height: attributes.height || 24,
+	width: attributes.width || 24,
+});
+
+const body = replaceIDs(renderData.body);
+
+let renderAttribsHTML =
+	body.indexOf('xlink:') === -1 ? '' : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
+
+for (const attr in attributes) {
+	renderAttribsHTML += ` ${attr}="${attributes[attr]}"`;
+}
+
+const svg = `<svg xmlns="http://www.w3.org/2000/svg"${renderAttribsHTML}>${body}</svg>`;
+---
+
+<Fragment set:html={svg} />

package/src/utils/ThemeHelper.ts

@@ -0,0 +1,127 @@
+type Theme = 'dark' | 'light' | 'system';
+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');
+    }
+  };
+}
+
+export { ThemeHelper, type Theme };

package/src/utils/colors.ts

@@ -0,0 +1 @@
+export type StudioCMSColorway = 'default' | 'primary' | 'success' | 'warning' | 'danger';

package/src/utils/generateID.ts

@@ -0,0 +1,5 @@
+function generateID(prefix: string): string {
+	return `${prefix}-${Math.random().toString(16).slice(2)}`;
+}
+
+export { generateID };

package/src/utils/headers.ts

@@ -0,0 +1,190 @@
+import type { AstroGlobalPartial } from 'astro';
+import { z } from 'astro/zod';
+
+export const HeadConfigSchema = () =>
+	z
+		.array(
+			z.object({
+				/** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
+				tag: z.enum(['title', 'base', 'link', 'style', 'meta', 'script', 'noscript', 'template']),
+				/** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
+				attrs: z.record(z.union([z.string(), z.boolean(), z.undefined()])).default({}),
+				/** Content to place inside the tag (optional). */
+				content: z.string().default(''),
+			})
+		)
+		.default([]);
+
+/**
+ * Default Head Tags for use with createHead() helper
+ *
+ * @param title
+ * @param description
+ * @param lang
+ * @param Astro
+ * @param favicon
+ * @param ogImage
+ * @param canonical
+ * @returns
+ */
+export const headDefaults = (
+	title: string,
+	description: string,
+	Astro: AstroGlobalPartial,
+	ogImage: string | undefined,
+	canonical: URL | undefined
+) => {
+	const headDefaults: z.input<ReturnType<typeof HeadConfigSchema>> = [
+		{ tag: 'meta', attrs: { charset: 'utf-8' } },
+		{
+			tag: 'meta',
+			attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+		},
+		{ tag: 'title', content: `${title}` },
+		{ tag: 'meta', attrs: { name: 'title', content: title } },
+		{ tag: 'meta', attrs: { name: 'description', content: description } },
+		{ tag: 'link', attrs: { rel: 'canonical', href: canonical?.href } },
+		{ tag: 'meta', attrs: { name: 'generator', content: Astro.generator } },
+		// Favicon
+		{
+			tag: 'link',
+			attrs: { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' },
+		},
+		{
+			tag: 'link',
+			attrs: { rel: 'icon', href: '/favicon-32x32.png', type: 'image/png', sizes: '32x32' },
+		},
+		{
+			tag: 'link',
+			attrs: { rel: 'icon', href: '/favicon-16x16.png', type: 'image/png', sizes: '16x16' },
+		},
+		{ tag: 'link', attrs: { rel: 'icon', href: '/favicon.png', type: 'image/png' } },
+		{ tag: 'link', attrs: { rel: 'manifest', href: '/site.webmanifest' } },
+		{ tag: 'link', attrs: { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' } },
+		{ tag: 'link', attrs: { rel: 'shortcut icon', href: '/favicon.ico' } },
+		{ tag: 'meta', attrs: { name: 'msapplication-TileColor', content: '#da532c' } },
+		{ tag: 'meta', attrs: { name: 'msapplication-config', content: '/browserconfig.xml' } },
+		{ tag: 'meta', attrs: { name: 'theme-color', content: '#aa87f4' } },
+		// OpenGraph Tags
+		{ tag: 'meta', attrs: { property: 'og:title', content: title } },
+		{ tag: 'meta', attrs: { property: 'og:type', content: 'website' } },
+		{ tag: 'meta', attrs: { property: 'og:url', content: canonical?.href } },
+		{ tag: 'meta', attrs: { property: 'og:description', content: description } },
+		{ tag: 'meta', attrs: { property: 'og:site_name', content: title } },
+		// Twitter Tags
+		{
+			tag: 'meta',
+			attrs: { name: 'twitter:card', content: 'summary_large_image' },
+		},
+		{ tag: 'meta', attrs: { name: 'twitter:url', content: canonical?.href } },
+		{ tag: 'meta', attrs: { name: 'twitter:title', content: title } },
+		{ tag: 'meta', attrs: { name: 'twitter:description', content: description } },
+	];
+
+	if (ogImage) {
+		headDefaults.push(
+			{ tag: 'meta', attrs: { property: 'og:image', content: ogImage } },
+			{ tag: 'meta', attrs: { name: 'twitter:image', content: ogImage } }
+		);
+	}
+
+	return headDefaults;
+};
+
+const HeadSchema = HeadConfigSchema();
+
+export type HeadUserConfig = z.input<ReturnType<typeof HeadConfigSchema>>;
+export type HeadConfig = z.output<ReturnType<typeof HeadConfigSchema>>;
+
+/**
+ * Test if a head config object contains a matching `<title>` or `<meta>` tag.
+ *
+ * For example, will return true if `head` already contains
+ * `<meta name="description" content="A">` and the passed `tag`
+ * is `<meta name="description" content="B">`. Tests against `name`,
+ * `property`, and `http-equiv` attributes for `<meta>` tags.
+ */
+function hasTag(head: HeadConfig, entry: HeadConfig[number]): boolean {
+	switch (entry.tag) {
+		case 'title':
+			return head.some(({ tag }) => tag === 'title');
+		case 'meta':
+			return hasOneOf(head, entry, ['name', 'property', 'http-equiv']);
+		default:
+			return false;
+	}
+}
+
+/**
+ * Test if a head config object contains a tag of the same type
+ * as `entry` and a matching attribute for one of the passed `keys`.
+ */
+function hasOneOf(head: HeadConfig, entry: HeadConfig[number], keys: string[]): boolean {
+	const attr = getAttr(keys, entry);
+	if (!attr) return false;
+	const [key, val] = attr;
+	return head.some(({ tag, attrs }) => tag === entry.tag && attrs[key] === val);
+}
+
+/** Find the first matching key–value pair in a head entry’s attributes. */
+function getAttr(
+	keys: string[],
+	entry: HeadConfig[number]
+): [key: string, value: string | boolean] | undefined {
+	let attr: [string, string | boolean] | undefined;
+	for (const key of keys) {
+		const val = entry.attrs[key];
+		if (val) {
+			attr = [key, val];
+			break;
+		}
+	}
+	return attr;
+}
+
+/** Merge two heads, overwriting entries in the first head that exist in the second. */
+function mergeHead(oldHead: HeadConfig, newHead: HeadConfig) {
+	return [...oldHead.filter((tag) => !hasTag(newHead, tag)), ...newHead];
+}
+
+/** Sort head tags to place important tags first and relegate “SEO” meta tags. */
+function sortHead(head: HeadConfig) {
+	return head.sort((a, b) => {
+		const aImportance = getImportance(a);
+		const bImportance = getImportance(b);
+		return aImportance > bImportance ? -1 : bImportance > aImportance ? 1 : 0;
+	});
+}
+
+/** Get the relative importance of a specific head tag. */
+function getImportance(entry: HeadConfig[number]) {
+	// 1. Important meta tags.
+	if (
+		entry.tag === 'meta' &&
+		('charset' in entry.attrs || 'http-equiv' in entry.attrs || entry.attrs.name === 'viewport')
+	) {
+		return 100;
+	}
+	// 2. Page title
+	if (entry.tag === 'title') return 90;
+	// 3. Anything that isn’t an SEO meta tag.
+	if (entry.tag !== 'meta') {
+		// The default favicon should be below any extra icons that the user may have set
+		// because if several icons are equally appropriate, the last one is used and we
+		// want to use the SVG icon when supported.
+		if (entry.tag === 'link' && 'rel' in entry.attrs && entry.attrs.rel === 'shortcut icon') {
+			return 70;
+		}
+		return 80;
+	}
+	// 4. SEO meta tags.
+	return 0;
+}
+/** Create a fully parsed, merged, and sorted head entry array from multiple sources. */
+export function createHead(defaultHeaders: HeadUserConfig, ...heads: HeadConfig[]) {
+	let head = HeadSchema.parse(defaultHeaders);
+	for (const next of heads) {
+		head = mergeHead(head, next);
+	}
+	return sortHead(head);
+}