@studiocms/ui 0.0.1 → 0.1.0

package/src/components/Sidebar/Single.astro

@@ -1,15 +1,15 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types';
 
-interface Props extends Exclude<HTMLAttributes<'aside'>, 'id'> {};
+interface Props extends Exclude<HTMLAttributes<'aside'>, 'id'> {}
 
 const props = Astro.props;
 ---
-<aside id="sidebar" {...props}>
+<aside id="sui-sidebar" {...props}>
   <slot />
 </aside>
 <style>
-  #sidebar {
+  #sui-sidebar {
     height: 100%;
     min-width: 280px;
     width: 280px;
@@ -24,12 +24,12 @@ const props = Astro.props;
     transition: all .3s ease;
   }
 
-  #sidebar.active {
+  #sui-sidebar.active {
     transform: translateX(0%);
   }
 
   @media screen and (max-width: 840px) {
-    #sidebar {
+    #sui-sidebar {
       transform: translateX(-100%);
       position: absolute;
       top: 0;

package/src/components/Sidebar/helpers.ts

@@ -1,13 +1,13 @@
 class SingleSidebarHelper {
-	sidebar: HTMLElement;
-	sidebarToggle?: HTMLElement | undefined;
+	private sidebar: HTMLElement;
+	private sidebarToggle?: HTMLElement | undefined;
 
 	constructor(toggleID?: string) {
-		const sidebarContainer = document.getElementById('sidebar');
+		const sidebarContainer = document.getElementById('sui-sidebar');
 
 		if (!sidebarContainer) {
 			throw new Error(
-				`No item with ID 'sidebar' found. Please add the <Sidebar> component to this page.`
+				`No item with ID 'sui-sidebar' found. Please add the <Sidebar> component to this page.`
 			);
 		}
 
@@ -40,7 +40,7 @@ class SingleSidebarHelper {
 		this.sidebarToggle.addEventListener('click', () => {
 			this.sidebar.classList.toggle('active');
 		});
-	}
+	};
 
 	public hideSidebarOnClick = (elementID: string) => {
 		const element = document.getElementById(elementID);
@@ -72,10 +72,10 @@ class SingleSidebarHelper {
 }
 
 class DoubleSidebarHelper {
-	sidebarsContainer: HTMLElement;
+	private sidebarsContainer: HTMLElement;
 
 	constructor() {
-		const sidebarsContainer = document.getElementById('sidebars');
+		const sidebarsContainer = document.getElementById('sui-sidebars');
 
 		if (!sidebarsContainer) {
 			throw new Error(

package/src/components/Textarea.astro

@@ -1,33 +1,38 @@
 ---
+import type { HTMLAttributes } from 'astro/types';
 import { generateID } from '../utils/generateID';
 
-interface Props {
+interface Props extends HTMLAttributes<'textarea'> {
 	label?: string;
 	placeholder?: string;
 	isRequired?: boolean;
 	fullWidth?: boolean;
+	fullHeight?: boolean;
 	resize?: boolean;
 	name?: string;
 	disabled?: boolean;
 	defaultValue?: string;
-};
+}
 
 const {
 	label,
 	placeholder,
 	isRequired,
 	fullWidth,
+	fullHeight,
 	resize,
 	name = generateID('textarea'),
 	disabled,
 	defaultValue,
+	...props
 } = Astro.props;
 ---
 <label 
   for={name} 
-  class="textarea-label"
+  class="sui-textarea-label"
   class:list={[
-    fullWidth && "full",
+    fullWidth && "full-width",
+    fullHeight && "full-height",
     resize && "resize",
     disabled && "disabled",
   ]}
@@ -39,38 +44,42 @@ const {
     placeholder={placeholder}
     name={name}
     id={name}
-    class="textarea"
+    class="sui-textarea"
     required={isRequired}
     disabled={disabled}
+    {...props}
     
   >{defaultValue}</textarea>
 </label>
 <style>
-  .textarea-label {
+  .sui-textarea-label {
     display: flex;
     flex-direction: column;
     gap: .25rem;
-    margin-top: .5rem;
     max-width: 80ch;
   }
 
-  .textarea-label.disabled {
+  .sui-textarea-label.disabled {
     opacity: 0.5;
     pointer-events: none;
     color: hsl(var(--text-muted));
   }
 
-  .textarea-label.full {
+  .sui-textarea-label.full-width {
     width: 100%;
     max-width: none;
   }
 
+  .sui-textarea-label.full-height {
+    height: 100%;
+  }
+
   .label {
     font-size: 14px;
   }
 
-  .textarea {
-    padding: .65rem 1rem;
+  .sui-textarea {
+    padding: .65rem;
     border-radius: 8px;
     border: 1px solid hsl(var(--border));
     background: hsl(var(--background-step-2));
@@ -78,18 +87,20 @@ const {
     transition: all .15s ease;
     resize: none;
     min-height: 12ch;
+    width: 100%;
+    height: 100%;
   }
 
-  .textarea:hover {
+  .sui-textarea:hover {
     background: hsl(var(--background-step-3));
   }
 
-  .resize .textarea {
+  .resize .sui-textarea {
     resize: both;
   }
 
-  .textarea:active,
-  .textarea:focus {
+  .sui-textarea:active,
+  .sui-textarea:focus {
     border: 1px solid hsl(var(--primary-base));
     outline: none;
     background: hsl(var(--background-step-2));

package/src/components/ThemeToggle.astro

@@ -1,13 +1,13 @@
 ---
-import type { ComponentProps } from "astro/types";
-import Button from "./Button.astro";
+import type { ComponentProps } from 'astro/types';
+import Button from './Button.astro';
 
-interface Props extends ComponentProps<typeof Button> {};
+interface Props extends ComponentProps<typeof Button> {}
 
 const props = Astro.props;
 ---
 
-<Button id='sui__theme-toggle' {...props}>
+<Button id='sui-theme-toggle' {...props}>
   <div id="dark-content">
     <slot name="dark" />
   </div>
@@ -19,22 +19,25 @@ const props = Astro.props;
 <script>
   import { ThemeHelper } from '../utils/ThemeHelper';
 
-  const themeToggle = document.getElementById('sui__theme-toggle');
+  const themeToggle = document.getElementById('sui-theme-toggle');
   const themeHelper = new ThemeHelper();
   
   themeHelper.registerToggle(themeToggle);
 </script>
 
 <style is:global>
-  #sui__theme-toggle #dark-content, #sui__theme-toggle #light-content {
+  #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 {
+  [data-theme="dark"] #sui-theme-toggle #dark-content {
     display: block;
   }
 
-  [data-theme="light"] #sui__theme-toggle #light-content {
+  [data-theme="light"] #sui-theme-toggle #light-content {
     display: block;
   }
 </style>

package/src/components/Toast/Toaster.astro

@@ -11,7 +11,7 @@ interface Props {
 	closeButton?: boolean;
 	offset?: number;
 	gap?: number;
-};
+}
 
 const {
 	position = 'top-center',
@@ -22,14 +22,14 @@ const {
 } = Astro.props;
 ---
 <div 
-  id="toaster" 
+  id="sui-toaster" 
   class:list={[
     closeButton && "closeable",
     position,
   ]},
 >
   <div 
-    id="toast-drawer"
+    id="sui-toast-drawer"
     data-offset={offset}
     data-gap={gap}
     data-duration={duration}
@@ -66,22 +66,22 @@ const {
   }
 
   function createToast(props: ToastProps) {
-    const toastParent = document.getElementById('toast-drawer')! as HTMLDivElement;
+    const toastParent = document.getElementById('sui-toast-drawer')! as HTMLDivElement;
     
     const toastContainer = document.createElement('div');
     const toastID = generateID('toast');
     toastContainer.id = toastID;
-    toastContainer.classList.add('toast-container', props.type, `${props.closeButton || props.persistent && "closeable"}`, `${props.persistent && 'persistent'}`);
+    toastContainer.classList.add('sui-toast-container', props.type, `${props.closeButton || props.persistent && "closeable"}`, `${props.persistent && 'persistent'}`);
 
     const toastHeader = document.createElement('div');
-    toastHeader.classList.add('toast-header');
+    toastHeader.classList.add('sui-toast-header');
 
     const toastHeaderLeftSide = document.createElement('div');
-    toastHeaderLeftSide.classList.add('toast-header-left-side')
+    toastHeaderLeftSide.classList.add('sui-toast-header-left-side')
     
     const toastTitle = document.createElement('span');
     toastTitle.textContent = props.title;
-    toastTitle.classList.add('toast-title');
+    toastTitle.classList.add('sui-toast-title');
 
     let iconString: ValidIconString;
 
@@ -115,14 +115,14 @@ const {
     if (props.description) {
       const toastDesc = document.createElement('span');
       toastDesc.innerHTML = props.description;
-      toastDesc.classList.add('toast-desc');
+      toastDesc.classList.add('sui-toast-desc');
 
       toastContainer.appendChild(toastDesc);
     }
 
     if (!props.persistent) {
       const toastProgressBar = document.createElement('div');
-      toastProgressBar.classList.add('toast-progress-bar');
+      toastProgressBar.classList.add('sui-toast-progress-bar');
       toastProgressBar.style.animationDuration = props.duration ? `${props.duration}ms` : `${toastParent.dataset.duration || 4000}ms`;
 
       toastContainer.appendChild(toastProgressBar);
@@ -149,7 +149,7 @@ const {
   });
 </script>
 <style>
-  #toaster {
+  #sui-toaster {
     width: 100vw;
     height: 100vh;
     position: fixed;
@@ -157,9 +157,10 @@ const {
     left: 0;
     z-index: 100;
     pointer-events: none;
+    color: hsl(var(--text-normal));
   }
 
-  #toast-drawer {
+  #sui-toast-drawer {
     max-width: 420px;
     width: 100%;
     height: fit-content;
@@ -168,14 +169,14 @@ const {
     flex-direction: column;
   }
 
-  #toaster.top-left #toast-drawer,
-  #toaster.bottom-left #toast-drawer {
+  #sui-toaster.top-left #sui-toast-drawer,
+  #sui-toaster.bottom-left #sui-toast-drawer {
     left: 50%;
     transform: translateX(-50%);
   }
 </style>
 <style is:global>
-  .toast-container {
+  .sui-toast-container {
     pointer-events: all;
     padding: 1rem;
     border-radius: .5rem;
@@ -192,14 +193,14 @@ const {
     z-index: 90;
   }
 
-  .toast-header {
+  .sui-toast-header {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
   }
 
-  .toast-header-left-side {
+  .sui-toast-header-left-side {
     display: flex;
     flex-direction: row;
     gap: .5rem;
@@ -208,23 +209,23 @@ const {
     font-size: 1.125em;
   }
 
-  .toast-header-left-side svg {
+  .sui-toast-header-left-side svg {
     color: hsl(var(--primary-base));
   }
 
-  .toast-container.success .toast-header-left-side svg {
+  .sui-toast-container.success .sui-toast-header-left-side svg {
     color: hsl(var(--success-base));
   }
 
-  .toast-container.warning .toast-header-left-side svg {
+  .sui-toast-container.warning .sui-toast-header-left-side svg {
     color: hsl(var(--warning-base));
   }
 
-  .toast-container.danger .toast-header-left-side svg {
+  .sui-toast-container.danger .sui-toast-header-left-side svg {
     color: hsl(var(--danger-base));
   }
 
-  .toast-progress-bar {
+  .sui-toast-progress-bar {
     position: absolute;
     height: 4px;
     width: 100%;
@@ -234,15 +235,15 @@ const {
     animation: toast-progress forwards linear;
   }
 
-  .toast-container.success .toast-progress-bar {
+  .sui-toast-container.success .sui-toast-progress-bar {
     background-color: hsl(var(--success-base));
   }
 
-  .toast-container.warning .toast-progress-bar {
+  .sui-toast-container.warning .sui-toast-progress-bar {
     background-color: hsl(var(--warning-base));
   }
 
-  .toast-container.danger .toast-progress-bar {
+  .sui-toast-container.danger .sui-toast-progress-bar {
     background-color: hsl(var(--danger-base));
   }
 
@@ -261,23 +262,23 @@ const {
     background-color: hsl(var(--default-base));
   }
 
-  .toast-container.closing {
+  .sui-toast-container.closing {
     animation: toast-closing .25s ease forwards;
   }
 
-  .toast-container.persistent {
+  .sui-toast-container.persistent {
     border: 1px solid hsl(var(--primary-base));
   }
 
-  .toast-container.persistent.success {
+  .sui-toast-container.persistent.success {
     border: 1px solid hsl(var(--success-base));
   }
 
-  .toast-container.persistent.warning {
+  .sui-toast-container.persistent.warning {
     border: 1px solid hsl(var(--warning-base));
   }
 
-  .toast-container.persistent.danger {
+  .sui-toast-container.persistent.danger {
     border: 1px solid hsl(var(--danger-base));
   }
 

package/src/components/Toggle.astro

@@ -10,7 +10,7 @@ interface Props {
 	disabled?: boolean;
 	name?: string;
 	isRequired?: boolean;
-};
+}
 
 const {
 	size = 'md',
@@ -23,7 +23,7 @@ const {
 } = Astro.props;
 ---
 <label
-  class="toggle-label"
+  class="sui-toggle-label"
   for={name}
   class:list={[
     disabled && "disabled",
@@ -31,8 +31,8 @@ const {
     size,
   ]}
 >
-  <div class="toggle-container">
-    <div class="toggle-switch" />
+  <div class="sui-toggle-container">
+    <div class="sui-toggle-switch" />
     <input
       type="checkbox"
       name={name}
@@ -40,7 +40,7 @@ const {
       checked={defaultChecked}
       disabled={disabled}
       required={isRequired}
-      class="checkbox"
+      class="sui-checkbox"
     />
   </div>
   <span>
@@ -48,7 +48,7 @@ const {
   </span>
 </label>
 <style>
-  .toggle-label {
+  .sui-toggle-label {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -57,17 +57,17 @@ const {
     margin: .25rem 0;
   }
 
-  .toggle-label.disabled {
+  .sui-toggle-label.disabled {
     opacity: 0.5;
     pointer-events: none;
     color: hsl(var(--text-muted));
   }
 
-  .toggle-label:active .toggle-switch {
+  .sui-toggle-label:active .sui-toggle-switch {
     transform: scale(0.85);
   }
 
-  .toggle-container {
+  .sui-toggle-container {
     --toggle-height: 12px;
     --toggle-width: 40px;
     display: flex;
@@ -80,7 +80,7 @@ const {
     border-radius: var(--toggle-height);
   }
 
-  .toggle-switch {
+  .sui-toggle-switch {
     --switch: calc(var(--toggle-height) * 1.75);
     height: var(--switch);
     width: var(--switch);
@@ -92,42 +92,42 @@ const {
     will-change: transform;
   }
 
-  .toggle-container:has(.checkbox:checked) .toggle-switch {
+  .sui-toggle-container:has(.sui-checkbox:checked) .sui-toggle-switch {
     left: calc(100% - var(--switch));
     background-color: hsl(var(--text-normal));
   }
 
-  .toggle-label.sm .toggle-container {
+  .sui-toggle-label.sm .sui-toggle-container {
     --toggle-height: 10px;
     --toggle-width: 32px;
   }
 
-  .toggle-label.sm .toggle-switch {
+  .sui-toggle-label.sm .sui-toggle-switch {
     --switch: calc(var(--toggle-height) * 1.65);
   }
 
-  .toggle-label.lg .toggle-container {
+  .sui-toggle-label.lg .sui-toggle-container {
     --toggle-height: 16px;
     --toggle-width: 48px;
   }
 
-  .toggle-label.lg .toggle-switch {
+  .sui-toggle-label.lg .sui-toggle-switch {
     --switch: calc(var(--toggle-height) * 1.65);
   }
 
-  .toggle-label.primary .toggle-container:has(.checkbox:checked) {
+  .sui-toggle-label.primary .sui-toggle-container:has(.sui-checkbox:checked) {
     background-color: hsl(var(--primary-base));
   }
 
-  .toggle-label.success .toggle-container:has(.checkbox:checked) {
+  .sui-toggle-label.success .sui-toggle-container:has(.sui-checkbox:checked) {
     background-color: hsl(var(--success-base));
   }
 
-  .toggle-label.warning .toggle-container:has(.checkbox:checked) {
+  .sui-toggle-label.warning .sui-toggle-container:has(.sui-checkbox:checked) {
     background-color: hsl(var(--warning-base));
   }
 
-  .toggle-label.danger .toggle-container:has(.checkbox:checked) {
+  .sui-toggle-label.danger .sui-toggle-container:has(.sui-checkbox:checked) {
     background-color: hsl(var(--danger-base));
   }
 
@@ -136,7 +136,7 @@ const {
     font-weight: 700;
   }
 
-  .checkbox {
+  .sui-checkbox {
     width: 0;
     height: 0;
     visibility: hidden;

package/src/components/User.astro

@@ -7,32 +7,33 @@ interface Props {
 	description: string;
 	avatar?: string;
 	class?: string;
-};
+	loading?: 'eager' | 'lazy';
+}
 
-const { name, description, avatar, class: className } = Astro.props;
+const { name, description, avatar, class: className, loading } = 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} />
     )}
   </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 +45,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));