@studiocms/ui 0.0.1

package/src/components/ThemeToggle.astro

@@ -0,0 +1,40 @@
+---
+import type { ComponentProps } from "astro/types";
+import Button from "./Button.astro";
+
+interface Props extends ComponentProps<typeof Button> {};
+
+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 { ThemeHelper } from '../utils/ThemeHelper';
+
+  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 {
+    display: none;
+  }
+
+  [data-theme="dark"] #sui__theme-toggle #dark-content {
+    display: block;
+  }
+
+  [data-theme="light"] #sui__theme-toggle #light-content {
+    display: block;
+  }
+</style>

package/src/components/Toast/Toaster.astro

@@ -0,0 +1,330 @@
+---
+interface Props {
+	position?:
+		| 'top-left'
+		| 'top-right'
+		| 'top-center'
+		| 'bottom-left'
+		| 'bottom-right'
+		| 'bottom-center';
+	duration?: number;
+	closeButton?: boolean;
+	offset?: number;
+	gap?: number;
+};
+
+const {
+	position = 'top-center',
+	duration = 4000,
+	closeButton = false,
+	offset = 32,
+	gap = 8,
+} = Astro.props;
+---
+<div 
+  id="toaster" 
+  class:list={[
+    closeButton && "closeable",
+    position,
+  ]},
+>
+  <div 
+    id="toast-drawer"
+    data-offset={offset}
+    data-gap={gap}
+    data-duration={duration}
+    style={[
+      `${position.includes("top-") ? 'top:' : 'bottom:'} ${offset}px;`,
+      position.includes("-left") && `left: ${offset}px`,
+      position.includes("-right") && `right: ${offset}px`,
+      position.includes("-center") && `left: 50%; transform: translateX(-50%);`,
+      `--gap: ${gap}px;`,
+      `padding-left: ${offset}px;`,
+      `padding-right: ${offset}px;`,
+    ].filter(Boolean).join("")}
+  />
+</div>
+<script>
+  import type { ToastProps } from '../../types';
+  import type { ValidIconString } from '../../utils/iconStrings';
+
+  import { generateID } from '../../utils/generateID';
+  import { getIconString } from '../../utils/iconStrings';
+
+  let activeToasts: string[] = [];
+
+  function removeToast(toastID: string) {
+    const toastEl = document.getElementById(toastID);
+
+    if (!toastEl) return;
+
+    activeToasts = activeToasts.filter(x => x !== toastID);
+    
+    toastEl.classList.add('closing');
+    
+    setTimeout(() => toastEl.remove(), 400);
+  }
+
+  function createToast(props: ToastProps) {
+    const toastParent = document.getElementById('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'}`);
+
+    const toastHeader = document.createElement('div');
+    toastHeader.classList.add('toast-header');
+
+    const toastHeaderLeftSide = document.createElement('div');
+    toastHeaderLeftSide.classList.add('toast-header-left-side')
+    
+    const toastTitle = document.createElement('span');
+    toastTitle.textContent = props.title;
+    toastTitle.classList.add('toast-title');
+
+    let iconString: ValidIconString;
+
+    if (props.type === 'success') {
+      iconString = 'check-circle';
+    } else if (props.type === 'danger') {
+      iconString = 'exclamation-circle';
+    } else if (props.type === 'warning') {
+      iconString = 'exclamation-triangle';
+    } else {
+      iconString = 'information-circle';
+    }
+
+    const toastIcon = getIconString(iconString, 'toast-icon', 24, 24);
+    toastHeaderLeftSide.innerHTML = toastIcon;
+
+    toastHeaderLeftSide.appendChild(toastTitle);
+    toastHeader.appendChild(toastHeaderLeftSide);
+    
+    if (props.closeButton || props.persistent) {
+      const closeIconContainer = document.createElement('button');
+      closeIconContainer.classList.add('close-icon-container');
+      closeIconContainer.addEventListener('click', () => removeToast(toastID));
+      closeIconContainer.innerHTML = getIconString('x-mark', 'close-icon', 24, 24);
+
+      toastHeader.appendChild(closeIconContainer);
+    }
+
+    toastContainer.appendChild(toastHeader);
+
+    if (props.description) {
+      const toastDesc = document.createElement('span');
+      toastDesc.innerHTML = props.description;
+      toastDesc.classList.add('toast-desc');
+
+      toastContainer.appendChild(toastDesc);
+    }
+
+    if (!props.persistent) {
+      const toastProgressBar = document.createElement('div');
+      toastProgressBar.classList.add('toast-progress-bar');
+      toastProgressBar.style.animationDuration = props.duration ? `${props.duration}ms` : `${toastParent.dataset.duration || 4000}ms`;
+
+      toastContainer.appendChild(toastProgressBar);
+    }
+
+    toastParent.appendChild(toastContainer);
+
+    activeToasts.push(toastID);
+
+    if (!props.persistent) {
+      setTimeout(
+        () => removeToast(toastID),
+        props.duration || (toastParent.dataset.duration ? parseInt(toastParent.dataset.duration) : 4000)
+      );
+    }
+  }
+
+  document.addEventListener('createtoast', (e) => {
+    e.stopImmediatePropagation();
+
+    const event = e as CustomEvent<ToastProps>;
+    
+    createToast(event.detail);
+  });
+</script>
+<style>
+  #toaster {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    pointer-events: none;
+  }
+
+  #toast-drawer {
+    max-width: 420px;
+    width: 100%;
+    height: fit-content;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #toaster.top-left #toast-drawer,
+  #toaster.bottom-left #toast-drawer {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+</style>
+<style is:global>
+  .toast-container {
+    pointer-events: all;
+    padding: 1rem;
+    border-radius: .5rem;
+    border: 1px solid hsl(var(--border));
+    background-color: hsl(var(--background-base));
+    box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    position: relative;
+    overflow: hidden;
+    margin-bottom: var(--gap);
+    animation: toast-pop-in .25s ease forwards;
+    z-index: 90;
+  }
+
+  .toast-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .toast-header-left-side {
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    align-items: center;
+    font-weight: 500;
+    font-size: 1.125em;
+  }
+
+  .toast-header-left-side svg {
+    color: hsl(var(--primary-base));
+  }
+
+  .toast-container.success .toast-header-left-side svg {
+    color: hsl(var(--success-base));
+  }
+
+  .toast-container.warning .toast-header-left-side svg {
+    color: hsl(var(--warning-base));
+  }
+
+  .toast-container.danger .toast-header-left-side svg {
+    color: hsl(var(--danger-base));
+  }
+
+  .toast-progress-bar {
+    position: absolute;
+    height: 4px;
+    width: 100%;
+    bottom: 0;
+    left: 0%;
+    background-color: hsl(var(--primary-base));
+    animation: toast-progress forwards linear;
+  }
+
+  .toast-container.success .toast-progress-bar {
+    background-color: hsl(var(--success-base));
+  }
+
+  .toast-container.warning .toast-progress-bar {
+    background-color: hsl(var(--warning-base));
+  }
+
+  .toast-container.danger .toast-progress-bar {
+    background-color: hsl(var(--danger-base));
+  }
+
+  .close-icon-container {
+    cursor: pointer;
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color .15s ease;
+    border-radius: .25rem;
+  }
+
+  .close-icon-container:hover {
+    background-color: hsl(var(--default-base));
+  }
+
+  .toast-container.closing {
+    animation: toast-closing .25s ease forwards;
+  }
+
+  .toast-container.persistent {
+    border: 1px solid hsl(var(--primary-base));
+  }
+
+  .toast-container.persistent.success {
+    border: 1px solid hsl(var(--success-base));
+  }
+
+  .toast-container.persistent.warning {
+    border: 1px solid hsl(var(--warning-base));
+  }
+
+  .toast-container.persistent.danger {
+    border: 1px solid hsl(var(--danger-base));
+  }
+
+  @keyframes toast-pop-in {
+    0% {
+      opacity: 0;
+      scale: 0.75;
+    }
+    100% {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes toast-closing {
+    0% {
+      opacity: 1;
+      scale: 1;
+      max-height: 500px;
+      margin-bottom: var(--gap);
+      padding: 1rem;
+      border: 1px solid hsl(var(--border));
+    }
+    62.5% {
+      scale: 0.75;
+      opacity: 0;
+      max-height: 500px;
+      margin-bottom: var(--gap);
+      padding: 1rem;
+      border: 1px solid hsl(var(--border));
+    }
+    100% {
+      scale: 0.75;
+      opacity: 0;
+      max-height: 0px;
+      margin-bottom: 0;
+      padding: 0;
+      border: 0px solid hsl(var(--border));
+    }
+  }
+
+  @keyframes toast-progress {
+    0% {
+      left: 0%;
+    }
+    100% {
+      left: -100%;
+    }
+  }
+</style>

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export { default as Toaster } from './Toaster.astro';
+export { toast } from './toast';

package/src/components/Toast/toast.ts

@@ -0,0 +1,16 @@
+import type { ToastProps } from '../../types';
+
+/**
+ * A function to create toasts with.
+
+ * @param props The props to pass to the toast
+ */
+function toast(props: ToastProps) {
+	const createToast = new CustomEvent('createtoast', {
+		detail: props,
+	});
+
+	document.dispatchEvent(createToast);
+}
+
+export { toast };

package/src/components/Toggle.astro

@@ -0,0 +1,146 @@
+---
+import type { StudioCMSColorway } from '../utils/colors';
+import { generateID } from '../utils/generateID';
+
+interface Props {
+	label: string;
+	size?: 'sm' | 'md' | 'lg';
+	color?: StudioCMSColorway;
+	defaultChecked?: boolean;
+	disabled?: boolean;
+	name?: string;
+	isRequired?: boolean;
+};
+
+const {
+	size = 'md',
+	color = 'default',
+	defaultChecked,
+	disabled,
+	name = generateID('checkbox'),
+	label,
+	isRequired,
+} = Astro.props;
+---
+<label
+  class="toggle-label"
+  for={name}
+  class:list={[
+    disabled && "disabled",
+    color,
+    size,
+  ]}
+>
+  <div class="toggle-container">
+    <div class="toggle-switch" />
+    <input
+      type="checkbox"
+      name={name}
+      id={name}
+      checked={defaultChecked}
+      disabled={disabled}
+      required={isRequired}
+      class="checkbox"
+    />
+  </div>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+</label>
+<style>
+  .toggle-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .5rem;
+    position: relative;
+    margin: .25rem 0;
+  }
+
+  .toggle-label.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .toggle-label:active .toggle-switch {
+    transform: scale(0.85);
+  }
+
+  .toggle-container {
+    --toggle-height: 12px;
+    --toggle-width: 40px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: all .15s ease;
+    background-color: hsl(var(--default-base));
+    width: var(--toggle-width);
+    height: var(--toggle-height);
+    border-radius: var(--toggle-height);
+  }
+
+  .toggle-switch {
+    --switch: calc(var(--toggle-height) * 1.75);
+    height: var(--switch);
+    width: var(--switch);
+    background-color: hsl(var(--text-muted));
+    border-radius: var(--toggle-height);
+    position: relative;
+    left: 0;
+    transition: all .15s ease;
+    will-change: transform;
+  }
+
+  .toggle-container:has(.checkbox:checked) .toggle-switch {
+    left: calc(100% - var(--switch));
+    background-color: hsl(var(--text-normal));
+  }
+
+  .toggle-label.sm .toggle-container {
+    --toggle-height: 10px;
+    --toggle-width: 32px;
+  }
+
+  .toggle-label.sm .toggle-switch {
+    --switch: calc(var(--toggle-height) * 1.65);
+  }
+
+  .toggle-label.lg .toggle-container {
+    --toggle-height: 16px;
+    --toggle-width: 48px;
+  }
+
+  .toggle-label.lg .toggle-switch {
+    --switch: calc(var(--toggle-height) * 1.65);
+  }
+
+  .toggle-label.primary .toggle-container:has(.checkbox:checked) {
+    background-color: hsl(var(--primary-base));
+  }
+
+  .toggle-label.success .toggle-container:has(.checkbox:checked) {
+    background-color: hsl(var(--success-base));
+  }
+
+  .toggle-label.warning .toggle-container:has(.checkbox:checked) {
+    background-color: hsl(var(--warning-base));
+  }
+
+  .toggle-label.danger .toggle-container:has(.checkbox:checked) {
+    background-color: hsl(var(--danger-base));
+  }
+
+  .req-star {
+    color: hsl(var(--danger-base));
+    font-weight: 700;
+  }
+
+  .checkbox {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+    opacity: 0;
+    margin: 0;
+  }
+</style>

package/src/components/User.astro

@@ -0,0 +1,68 @@
+---
+import { Image } from 'astro:assets';
+import Icon from '../utils/Icon.astro';
+
+interface Props {
+	name: string;
+	description: string;
+	avatar?: string;
+	class?: string;
+};
+
+const { name, description, avatar, class: className } = Astro.props;
+---
+<div class="user-container" class:list={[ className ]}>
+  <div class="avatar-container">
+    {avatar ? (
+      <Image src={avatar} inferSize alt={name} class="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>
+</div>
+<style>
+  .user-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .avatar-container {
+    width: 2.5rem;
+    height: 2.5rem;
+    background-color: hsl(var(--default-base));
+    border-radius: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid hsl(var(--border));
+  }
+
+  .avatar-img {
+    width: 100%;
+    height: auto;
+  }
+
+  .text-content {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+  }
+
+  .name {
+    font-size: 1em;
+    font-weight: 600;
+  }
+
+  .description {
+    font-size: .875em;
+    font-weight: 400;
+    color: hsl(var(--text-muted));
+  }
+</style>

package/src/components/index.ts

@@ -0,0 +1,25 @@
+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 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";

package/src/components.ts

@@ -0,0 +1,24 @@
+export { Button } from './components/index';
+export { Divider } from './components/index';
+export { Input } from './components/index';
+export { Row } from './components/index';
+export { Center } from './components/index';
+export { Textarea } from './components/index';
+export { Checkbox } from './components/index';
+export { Toggle } from './components/index';
+export { RadioGroup } from './components/index';
+export { Toaster, toast } from './components/index';
+export { Card } from './components/index';
+export { Modal, ModalHelper } from './components/index';
+export { Select } from './components/index';
+export { SearchSelect } from './components/index';
+export { Dropdown, DropdownHelper } from './components/index';
+export { User } from './components/index';
+export { ThemeToggle } from './components/index';
+
+export {
+	Sidebar,
+	DoubleSidebar,
+	SingleSidebarHelper,
+	DoubleSidebarHelper,
+} from './components/index';