@studiocms/ui 0.3.2 → 0.4.1

package/src/components/Toast/Toaster.astro

@@ -1,470 +0,0 @@
----
-/**
- * Props for the Toast component.
- */
-interface Props {
-	/**
-	 * The position of the toaster. All toasts will originate from this position.
-	 */
-	position?:
-		| 'top-left'
-		| 'top-right'
-		| 'top-center'
-		| 'bottom-left'
-		| 'bottom-right'
-		| 'bottom-center';
-	/**
-	 * The duration of the toast in milliseconds. Defaults to 4000 (4 seconds).
-	 */
-	duration?: number;
-	/**
-	 * Whether the toast has a close button. Defaults to false.
-	 */
-	closeButton?: boolean;
-	/**
-	 * The offset of the toaster from the edge of the screen in pixels. Defaults to 32.
-	 */
-	offset?: number;
-	/**
-	 * The gap between toasts in pixels. Defaults to 8.
-	 */
-	gap?: number;
-}
-
-const {
-	position = 'top-center',
-	duration = 4000,
-	closeButton = false,
-	offset = 32,
-	gap = 8,
-} = Astro.props;
----
-<div 
-  id="sui-toaster" 
-  class:list={[
-    closeButton && "closeable",
-    position,
-  ]},
->
-  <div 
-    id="sui-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[] = [];
-
-  let lastActiveElement: HTMLElement | null = null;
-
-  const revertFocusBackToLastActiveElement = () => {
-    if (lastActiveElement) {
-      lastActiveElement.focus();
-      lastActiveElement = null;
-    }
-  };
-
-  /**
-   * Callback wrapper that allows for pausing, continuing and clearing a timer. Based on https://stackoverflow.com/a/20745721.
-   * @param callback The callback to be called.
-   * @param delay The delay in milliseconds.
-   */
-  class Timer {
-    private id: NodeJS.Timeout | null;
-    private started: Date | null;
-    private remaining: number;
-    private running: boolean;
-    private callback: () => any;
-
-    constructor(callback: () => any, delay: number) {
-      this.id = null;
-      this.started = null;
-      this.remaining = delay;
-      this.running = false;
-      this.callback = callback;
-
-      this.start();
-    }
-
-    start = () => {
-      this.running = true;
-      this.started = new Date();
-      this.id = setTimeout(this.callback, this.remaining);
-    };
-
-    pause = () => {
-      if (!this.id || !this.started || !this.running) return;
-
-      this.running = false;
-      clearTimeout(this.id);
-      this.remaining -= new Date().getTime() - this.started.getTime();
-    };
-
-    getTimeLeft = () => {
-      if (this.running) {
-        this.pause();
-        this.start();
-      }
-
-      return this.remaining;
-    };
-
-    getStateRunning = () => {
-      return this.running;
-    };
-  }
-
-  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('sui-toast-drawer')! as HTMLDivElement;
-    
-    const toastContainer = document.createElement('div');
-    const toastID = generateID('toast');
-    toastContainer.tabIndex = 0;
-    toastContainer.ariaLive = 'polite';
-    toastContainer.role = 'alert';
-    toastContainer.id = toastID;
-    toastContainer.ariaLabel = `${props.title} (F8)`;
-    toastContainer.classList.add('sui-toast-container', props.type, `${props.closeButton || props.persistent && "closeable"}`, `${props.persistent && 'persistent'}`);
-
-    const toastHeader = document.createElement('div');
-    toastHeader.classList.add('sui-toast-header');
-
-    const toastHeaderLeftSide = document.createElement('div');
-    toastHeaderLeftSide.classList.add('sui-toast-header-left-side')
-    
-    const toastTitle = document.createElement('span');
-    toastTitle.textContent = props.title;
-    toastTitle.classList.add('sui-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);
-      closeIconContainer.tabIndex = 0;
-      closeIconContainer.ariaLabel = 'Close toast';
-
-      toastHeader.appendChild(closeIconContainer);
-    }
-
-    toastContainer.appendChild(toastHeader);
-
-    if (props.description) {
-      const toastDesc = document.createElement('span');
-      toastDesc.innerHTML = props.description;
-      toastDesc.classList.add('sui-toast-desc');
-
-      toastContainer.appendChild(toastDesc);
-    }
-
-    if (!props.persistent) {
-      const toastProgressBar = document.createElement('div');
-      toastProgressBar.classList.add('sui-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) {
-      let timer = new Timer(
-        () => removeToast(toastID),
-        props.duration || (toastParent.dataset.duration ? parseInt(toastParent.dataset.duration) : 4000)
-      );
-
-      const timerPauseWrapper = () => {
-        toastContainer.classList.add('paused');
-        timer.pause();
-      };
-
-      const timerStartWrapper = () => {
-        toastContainer.classList.remove('paused');
-        timer.start();
-      };
-
-      toastContainer.addEventListener('mouseenter', timerPauseWrapper);
-      toastContainer.addEventListener('focusin', timerPauseWrapper);
-
-      toastContainer.addEventListener('mouseleave', timerStartWrapper);
-      toastContainer.addEventListener('focusout', () => {
-        let focusedOrHasFocused = toastContainer.matches(':focus-within');
-
-        if (!focusedOrHasFocused) {
-          revertFocusBackToLastActiveElement();
-        }
-
-        timerStartWrapper();
-      });
-    }
-
-    toastContainer.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        removeToast(toastID);
-        revertFocusBackToLastActiveElement();
-      }
-    });
-  }
-
-  document.addEventListener('createtoast', (e) => {
-    e.stopImmediatePropagation();
-
-    const event = e as CustomEvent<ToastProps>;
-    
-    createToast(event.detail);
-  });
-
-  window.addEventListener('keydown', (e) => {
-    if (e.key === 'F8') {
-      e.preventDefault();
-
-      const oldestToast = activeToasts[0];
-
-      if (oldestToast) {
-        lastActiveElement = document.activeElement as HTMLElement;
-
-        const toastEl = document.getElementById(oldestToast);
-        if (toastEl) toastEl?.focus();
-      }
-    }
-  });
-</script>
-<style>
-  #sui-toaster {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    pointer-events: none;
-    color: hsl(var(--text-normal));
-  }
-
-  #sui-toast-drawer {
-    max-width: 420px;
-    width: 100%;
-    height: fit-content;
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-  }
-
-  #sui-toaster.top-left #sui-toast-drawer,
-  #sui-toaster.bottom-left #sui-toast-drawer {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-</style>
-<style is:global>
-  .sui-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;
-  }
-
-  .sui-toast-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .sui-toast-header-left-side {
-    display: flex;
-    flex-direction: row;
-    gap: .5rem;
-    align-items: center;
-    font-weight: 500;
-    font-size: 1.125em;
-  }
-
-  .sui-toast-header-left-side svg {
-    color: hsl(var(--primary-base));
-  }
-
-  .sui-toast-container.success .sui-toast-header-left-side svg {
-    color: hsl(var(--success-base));
-  }
-
-  .sui-toast-container.warning .sui-toast-header-left-side svg {
-    color: hsl(var(--warning-base));
-  }
-
-  .sui-toast-container.danger .sui-toast-header-left-side svg {
-    color: hsl(var(--danger-base));
-  }
-
-  .sui-toast-progress-bar {
-    position: absolute;
-    height: 4px;
-    width: 100%;
-    bottom: 0;
-    left: 0%;
-    background-color: hsl(var(--primary-base));
-    animation: toast-progress forwards linear;
-  }
-
-  .sui-toast-container.paused .sui-toast-progress-bar {
-    animation-play-state: paused;
-  }
-
-  .sui-toast-container.success .sui-toast-progress-bar {
-    background-color: hsl(var(--success-base));
-  }
-
-  .sui-toast-container.warning .sui-toast-progress-bar {
-    background-color: hsl(var(--warning-base));
-  }
-
-  .sui-toast-container.danger .sui-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));
-  }
-
-  .close-icon-container:focus-visible {
-    outline: 2px solid hsl(var(--text-normal));
-    outline-offset: 2px;
-  }
-
-  .sui-toast-container.closing {
-    animation: toast-closing .25s ease forwards;
-  }
-
-  .sui-toast-container.persistent {
-    border: 1px solid hsl(var(--primary-base));
-  }
-
-  .sui-toast-container.persistent.success {
-    border: 1px solid hsl(var(--success-base));
-  }
-
-  .sui-toast-container.persistent.warning {
-    border: 1px solid hsl(var(--warning-base));
-  }
-
-  .sui-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

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

package/src/components/Toast/toast.ts

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

@@ -1,214 +0,0 @@
----
-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;
-}
-
-const {
-	size = 'md',
-	color = 'default',
-	defaultChecked,
-	disabled,
-	name = generateID('checkbox'),
-	label,
-	isRequired,
-} = Astro.props;
----
-<label
-  class="sui-toggle-label"
-  for={name}
-  class:list={[
-    disabled && "disabled",
-    color,
-    size,
-  ]}
->
-  <div class="sui-toggle-container">
-    <div 
-      class="sui-toggle-switch"
-      tabindex="0"
-      role="checkbox"
-      aria-checked={defaultChecked}
-      aria-label={label}
-    />
-    <input
-      type="checkbox"
-      name={name}
-      id={name}
-      checked={defaultChecked}
-      disabled={disabled}
-      required={isRequired}
-      class="sui-toggle-checkbox"
-      hidden
-    />
-  </div>
-  <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;
-    flex-direction: row;
-    align-items: center;
-    gap: .5rem;
-    position: relative;
-    margin: .25rem 0;
-  }
-
-  .sui-toggle-label.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    color: hsl(var(--text-muted));
-  }
-
-  .sui-toggle-label:active .sui-toggle-switch {
-    transform: scale(0.85);
-  }
-
-  .sui-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);
-  }
-
-  .sui-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;
-  }
-
-  .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));
-  }
-
-  .sui-toggle-label.sm .sui-toggle-container {
-    --toggle-height: 10px;
-    --toggle-width: 32px;
-  }
-
-  .sui-toggle-label.sm .sui-toggle-switch {
-    --switch: calc(var(--toggle-height) * 1.65);
-  }
-
-  .sui-toggle-label.lg .sui-toggle-container {
-    --toggle-height: 16px;
-    --toggle-width: 48px;
-  }
-
-  .sui-toggle-label.lg .sui-toggle-switch {
-    --switch: calc(var(--toggle-height) * 1.65);
-  }
-
-  .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-toggle-checkbox:checked) {
-    background-color: hsl(var(--success-base));
-  }
-
-  .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-toggle-checkbox:checked) {
-    background-color: hsl(var(--danger-base));
-  }
-
-  .req-star {
-    color: hsl(var(--danger-base));
-    font-weight: 700;
-  }
-
-  .sui-toggle-checkbox {
-    width: 0;
-    height: 0;
-    visibility: hidden;
-    opacity: 0;
-    margin: 0;
-  }
-</style>