@studiocms/ui 0.3.2 → 0.4.1

package/dist/components/Toast/Toaster.astro

@@ -0,0 +1,69 @@
+---
+import './toaster.css';
+
+/**
+ * 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 "studiocms:ui/scripts/toaster"
+</script>

package/dist/components/Toast/toast.d.ts

@@ -0,0 +1,8 @@
+import type { ToastProps } from '../../types/index.js';
+/**
+ * A function to create toasts with.
+
+ * @param props The props to pass to the toast
+ */
+declare function toast(props: ToastProps): void;
+export { toast };

package/dist/components/Toast/toast.js

@@ -0,0 +1,9 @@
+function toast(props) {
+  const createToast = new CustomEvent("createtoast", {
+    detail: props
+  });
+  document.dispatchEvent(createToast);
+}
+export {
+  toast
+};

package/dist/components/Toast/toaster.css

@@ -0,0 +1,168 @@
+#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%);
+}
+.sui-toast-container {
+  pointer-events: all;
+  padding: 1rem;
+  border-radius: var(--radius-md);
+  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-container.info .sui-toast-header-left-side svg {
+  color: hsl(var(--info-base));
+}
+.sui-toast-container.mono .sui-toast-header-left-side svg {
+  color: hsl(var(--mono-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: var(--radius-sm);
+}
+.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%;
+  }
+}

package/dist/components/Toast/toaster.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/toaster.js

@@ -0,0 +1,160 @@
+import { generateID } from "../../utils/generateID.js";
+import { getIconString } from "../../utils/iconStrings.js";
+let activeToasts = [];
+let lastActiveElement = null;
+const revertFocusBackToLastActiveElement = () => {
+  if (lastActiveElement) {
+    lastActiveElement.focus();
+    lastActiveElement = null;
+  }
+};
+class Timer {
+  id;
+  started;
+  remaining;
+  running;
+  callback;
+  constructor(callback, delay) {
+    this.id = null;
+    this.started = null;
+    this.remaining = delay;
+    this.running = false;
+    this.callback = callback;
+    this.start();
+  }
+  start = () => {
+    this.running = true;
+    this.started = /* @__PURE__ */ 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 -= (/* @__PURE__ */ new Date()).getTime() - this.started.getTime();
+  };
+  getTimeLeft = () => {
+    if (this.running) {
+      this.pause();
+      this.start();
+    }
+    return this.remaining;
+  };
+  getStateRunning = () => {
+    return this.running;
+  };
+}
+function removeToast(toastID) {
+  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) {
+  const toastParent = document.getElementById("sui-toast-drawer");
+  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.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;
+  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 || 4e3}ms`;
+    toastContainer.appendChild(toastProgressBar);
+  }
+  toastParent.appendChild(toastContainer);
+  activeToasts.push(toastID);
+  if (!props.persistent) {
+    const timer = new Timer(
+      () => removeToast(toastID),
+      props.duration || (toastParent.dataset.duration ? Number.parseInt(toastParent.dataset.duration) : 4e3)
+    );
+    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", () => {
+      const 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;
+  createToast(event.detail);
+});
+window.addEventListener("keydown", (e) => {
+  if (e.key === "F8") {
+    e.preventDefault();
+    const oldestToast = activeToasts[0];
+    if (oldestToast) {
+      lastActiveElement = document.activeElement;
+      const toastEl = document.getElementById(oldestToast);
+      if (toastEl) toastEl?.focus();
+    }
+  }
+});

package/dist/components/Toggle/Toggle.astro

@@ -0,0 +1,84 @@
+---
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import { generateID } from '../../utils/generateID.js';
+import './toggle.css';
+
+/**
+ * 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>
+import "studiocms:ui/scripts/toggle"
+</script>

package/dist/components/Toggle/toggle.css

@@ -0,0 +1,93 @@
+.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(--radius-full);
+}
+.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(--radius-full);
+  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));
+}
+.sui-toggle-label.info .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
+  background-color: hsl(var(--info-base));
+}
+.sui-toggle-label.mono .sui-toggle-container:has(.sui-toggle-checkbox:checked) {
+  background-color: hsl(var(--mono-base));
+}
+.sui-toggle-label.mono .sui-toggle-switch {
+  border: 1px solid hsl(var(--text-inverted));
+}
+.req-star {
+  color: hsl(var(--danger-base));
+  font-weight: 700;
+}
+.sui-toggle-checkbox {
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  opacity: 0;
+  margin: 0;
+}

package/dist/components/Toggle/toggle.d.ts

@@ -0,0 +1,2 @@
+declare const allToggleElements: NodeListOf<HTMLDivElement>;
+declare const allToggles: NodeListOf<HTMLInputElement>;

package/dist/components/Toggle/toggle.js

@@ -0,0 +1,20 @@
+const allToggleElements = document.querySelectorAll(".sui-toggle-container");
+const allToggles = document.querySelectorAll(".sui-toggle-checkbox");
+for (const element of allToggleElements) {
+  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(".sui-toggle-checkbox");
+    if (!checkbox) return;
+    checkbox.click();
+  });
+}
+for (const box of allToggles) {
+  if (box.dataset.initialized) continue;
+  box.dataset.initialized = "true";
+  box.addEventListener("change", (e) => {
+    box.previousSibling.ariaChecked = e.target.checked ? "true" : "false";
+  });
+}

package/{src/components → dist/components/User}/User.astro

@@ -1,6 +1,8 @@
 ---
+// @ts-ignore
 import { Image } from 'astro:assets';
-import Icon from '../utils/Icon.astro';
+import Icon from '../Icon/Icon.astro';
+import './user.css';
 
 /**
  * The props for the User component.
@@ -43,45 +45,3 @@ const { name, description, avatar, class: className, loading = 'lazy' } = Astro.
     <span class="sui-description">{description}</span>
   </div>
 </div>
-<style>
-  .sui-user-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .sui-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));
-  }
-
-  .sui-avatar-img {
-    width: 100%;
-    height: auto;
-  }
-
-  .sui-text-content {
-    display: flex;
-    flex-direction: column;
-    gap: .125rem;
-  }
-
-  .sui-name {
-    font-size: 1em;
-    font-weight: 600;
-  }
-
-  .sui-description {
-    font-size: .875em;
-    font-weight: 400;
-    color: hsl(var(--text-muted));
-  }
-</style>