@studiocms/ui 0.1.0 → 0.3.1

package/src/components/Toggle.astro

@@ -2,13 +2,37 @@
 import type { StudioCMSColorway } from '../utils/colors';
 import { generateID } from '../utils/generateID';
 
+/**
+ * The props for the toggle component
+ */
 interface Props {
+	/**
+	 * The label of the toggle.
+	 */
 	label: string;
+	/**
+	 * The size of the toggle. Defaults to `md`.
+	 */
 	size?: 'sm' | 'md' | 'lg';
+	/**
+	 * The color of the toggle. Defaults to `default`.
+	 */
 	color?: StudioCMSColorway;
+	/**
+	 * Whether the toggle is checked by default. Defaults to `false`.
+	 */
 	defaultChecked?: boolean;
+	/**
+	 * Whether the toggle is disabled. Defaults to `false`.
+	 */
 	disabled?: boolean;
+	/**
+	 * The name of the toggle.
+	 */
 	name?: string;
+	/**
+	 * Whether the toggle is required. Defaults to `false`.
+	 */
 	isRequired?: boolean;
 }
 
@@ -32,7 +56,13 @@ const {
   ]}
 >
   <div class="sui-toggle-container">
-    <div class="sui-toggle-switch" />
+    <div 
+      class="sui-toggle-switch"
+      tabindex="0"
+      role="checkbox"
+      aria-checked={defaultChecked}
+      aria-label={label}
+    />
     <input
       type="checkbox"
       name={name}
@@ -40,13 +70,46 @@ const {
       checked={defaultChecked}
       disabled={disabled}
       required={isRequired}
-      class="sui-checkbox"
+      class="sui-toggle-checkbox"
+      hidden
     />
   </div>
-  <span>
+  <span id={`label-${name}`}>
     {label} <span class="req-star">{isRequired && "*"}</span>
   </span>
 </label>
+<script>
+  const elements = document.querySelectorAll<HTMLDivElement>('.sui-toggle-container');
+  const toggles = document.querySelectorAll<HTMLInputElement>('.sui-toggle-checkbox');
+
+  for (const element of elements) {
+    if (element.dataset.initialized) continue;
+    
+    element.dataset.initialized = 'true';
+
+    element.addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+
+      e.preventDefault();
+
+      const checkbox = element.querySelector<HTMLInputElement>('.sui-toggle-checkbox');
+        
+      if (!checkbox) return;
+
+      checkbox.click();
+    });
+  }
+
+  for (const box of toggles) {
+    if (box.dataset.initialized) continue;
+
+    box.dataset.initialized = 'true';
+
+    box.addEventListener('change', (e) => {
+      (box.previousSibling as HTMLDivElement).ariaChecked = (e.target as HTMLInputElement).checked ? 'true' : 'false';
+    });
+  }
+</script>
 <style>
   .sui-toggle-label {
     display: flex;
@@ -92,7 +155,12 @@ const {
     will-change: transform;
   }
 
-  .sui-toggle-container:has(.sui-checkbox:checked) .sui-toggle-switch {
+  .sui-toggle-switch:focus-visible {
+    outline: 2px solid hsl(var(--text-normal));
+    outline-offset: 2px;
+  }
+
+  .sui-toggle-container:has(.sui-toggle-checkbox:checked) .sui-toggle-switch {
     left: calc(100% - var(--switch));
     background-color: hsl(var(--text-normal));
   }
@@ -115,19 +183,19 @@ const {
     --switch: calc(var(--toggle-height) * 1.65);
   }
 
-  .sui-toggle-label.primary .sui-toggle-container:has(.sui-checkbox:checked) {
+  .sui-toggle-label.primary .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
     background-color: hsl(var(--primary-base));
   }
 
-  .sui-toggle-label.success .sui-toggle-container:has(.sui-checkbox:checked) {
+  .sui-toggle-label.success .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
     background-color: hsl(var(--success-base));
   }
 
-  .sui-toggle-label.warning .sui-toggle-container:has(.sui-checkbox:checked) {
+  .sui-toggle-label.warning .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
     background-color: hsl(var(--warning-base));
   }
 
-  .sui-toggle-label.danger .sui-toggle-container:has(.sui-checkbox:checked) {
+  .sui-toggle-label.danger .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
     background-color: hsl(var(--danger-base));
   }
 
@@ -136,7 +204,7 @@ const {
     font-weight: 700;
   }
 
-  .sui-checkbox {
+  .sui-toggle-checkbox {
     width: 0;
     height: 0;
     visibility: hidden;

package/src/components/User.astro

@@ -2,22 +2,40 @@
 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, loading } = Astro.props;
+const { name, description, avatar, class: className, loading = 'lazy' } = Astro.props;
 ---
 <div class="sui-user-container" class:list={[ className ]}>
   <div class="sui-avatar-container">
     {avatar ? (
       <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="sui-text-content">

package/src/components/index.ts

@@ -16,6 +16,7 @@ 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';

package/src/components.ts

@@ -16,6 +16,7 @@ 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

@@ -24,24 +24,24 @@
 	--shadow: 0 0% 0%;
 
 	--default-base: 0 0% 14%;
-	--default-hover: 0 0% 15%;
-	--default-active: 0 0% 19%;
+	--default-hover: 0 0% 21%;
+	--default-active: 0 0% 15%;
 
 	--primary-base: 259 83% 73%;
-	--primary-hover: 259 77% 71%;
+	--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-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-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-active: 337 88% 32%;
 
 	/* Non-specific variables */
 	--text-light: 0 0% 100%;

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,31 @@
+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 = {};
+
+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, updateConfig }) => {
+				updateConfig({
+					vite: {
+						plugins: [globalCss()],
+					},
+				});
+
+				injectScript('page-ssr', `import 'studiocms:ui/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';

package/src/utils/ThemeHelper.ts

@@ -15,6 +15,7 @@ class ThemeHelper {
 	 */
 	constructor(themeProvider?: HTMLElement) {
 		this.themeManagerElement = themeProvider || document.documentElement;
+		this.themeManagerElement.dataset.theme = this.getTheme(true);
 	}
 
 	/**
@@ -32,7 +33,7 @@ class ThemeHelper {
 			return theme as T extends true ? 'dark' | 'light' : Theme;
 		}
 
-		if (this.themeManagerElement.dataset.theme !== 'system') {
+		if ((this.themeManagerElement.dataset.theme ?? 'system') !== 'system') {
 			return this.themeManagerElement.dataset.theme as 'dark' | 'light';
 		}
 
@@ -56,7 +57,13 @@ class ThemeHelper {
 	 * @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);
+		}
 	};
 
 	/**

package/src/utils/create-resolver.ts

@@ -0,0 +1,30 @@
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'pathe';
+
+/**
+ * From the Astro Integration Kit (https://astro-integration-kit.netlify.app/).
+ *
+ * Allows resolving paths relatively to the integration folder easily. Call it like this:
+ *
+ * @param {string} _base - The location you want to create relative references from. `import.meta.url` is usually what you'll want.
+ *
+ * @see https://astro-integration-kit.netlify.app/core/create-resolver/
+ *
+ * @example
+ * ```ts
+ * const { resolve } = createResolver(import.meta.url);
+ * const pluginPath = resolve("./plugin.ts");
+ * ```
+ *
+ * This way, you do not have to add your plugin to your package.json `exports`.
+ */
+export const createResolver = (_base: string) => {
+	let base = _base;
+	if (base.startsWith('file://')) {
+		base = dirname(fileURLToPath(base));
+	}
+
+	return {
+		resolve: (...path: Array<string>) => resolve(base, ...path),
+	};
+};

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;
+			},
+		};
+	};
+}