@studiocms/ui 0.3.2 → 0.4.1

package/dist/components/Dropdown/Dropdown.astro

@@ -0,0 +1,116 @@
+---
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import Icon from '../Icon/Icon.astro';
+import type { HeroIconName } from '../Icon/iconType.js';
+import './dropdown.css';
+
+/**
+ * An option in the dropdown.
+ */
+interface Option {
+	/**
+	 * The label of the option.
+	 */
+	label: string;
+	/**
+	 * The value of the option, returned by the helper when listened for.
+	 */
+	value: string;
+	/**
+	 * Whether the option is disabled.
+	 */
+	disabled?: boolean;
+	/**
+	 * The color of the option.
+	 */
+	color?: StudioCMSColorway;
+	/**
+	 * The icon to display next to the option.
+	 */
+	icon?: HeroIconName;
+	/**
+	 * The href to link to when the option is clicked. When given, the option will be rendered as an anchor tag.
+	 */
+	href?: string;
+}
+
+/**
+ * The props for the Dropdown component.
+ */
+interface Props {
+	/**
+	 * The options to display in the dropdown.
+	 */
+	options: Option[];
+	/**
+	 * Whether the dropdown is disabled.
+	 */
+	disabled?: boolean;
+	/**
+	 * The ID of the dropdown. Required because of the helper.
+	 */
+	id: string;
+	/**
+	 * The alignment of the dropdown, defaults to `center`. Will not work on mobile due to size constraints.
+	 */
+	align?: 'start' | 'center' | 'end';
+	/**
+	 * The type of click with which the dropdown is clicked. Defaults to `left`.
+	 */
+	triggerOn?: 'left' | 'right' | 'both';
+	/**
+	 * The offset of the dropdown from the trigger element in pixels.
+	 */
+	offset?: number;
+}
+
+const {
+	options,
+	disabled = false,
+	align = 'center',
+	id,
+	triggerOn = 'left',
+	offset = 0,
+} = Astro.props;
+---
+<div 
+  class="sui-dropdown-container"
+  class:list={[disabled && 'disabled']}
+  data-align={align}
+  id={`${id}-container`}
+  data-trigger={triggerOn}
+  transition:persist
+  transition:persist-props
+>
+  <div class="sui-dropdown-toggle" id={`${id}-toggle-btn`}>
+    <slot />
+  </div>
+  <ul 
+    class="sui-dropdown" 
+    class:list={[align]}
+    role="listbox" id={`${id}-dropdown`} 
+    transition:persist
+    transition:persist-props
+    aria-labelledby={`${id}-toggle-btn`}
+    style={`--offset: ${offset}px;`}
+  >
+    {options.map(({ value, disabled, color, label, icon, href }) => (
+      <li
+        class="sui-dropdown-option"
+        data-value={value}
+        class:list={[disabled && "disabled", icon && "has-icon", color, href && "has-href"]}
+        role="option"
+        aria-selected="false"
+      >
+        {icon && (
+          <Icon width={24} height={24} name={icon} />
+        )}
+        {href ? (
+          <a href={href} class="sui-dropdown-link">{label}</a>
+        ) : (
+          <span>{label}</span>
+        )}
+      </li>
+    ))}
+  </ul>
+</div>

package/dist/components/Dropdown/dropdown.css

@@ -0,0 +1,180 @@
+.sui-dropdown-toggle {
+  width: fit-content;
+}
+.sui-dropdown-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+}
+.sui-dropdown {
+  position: absolute;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  border-radius: var(--radius-md);
+  background-color: hsl(var(--background-step-2));
+  overflow: hidden;
+  left: 0;
+  z-index: 90;
+  min-width: 200px;
+  max-width: min-content;
+  height: 0;
+  border: none;
+  pointer-events: none;
+  user-select: none;
+  box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+}
+@keyframes pop-up {
+  0% {
+    scale: 0.9;
+    opacity: 0;
+  }
+  100% {
+    scale: 1;
+    opacity: 1;
+    user-select: all;
+  }
+}
+@keyframes pop-down {
+  0% {
+    scale: 1;
+    height: auto;
+    border: initial;
+    pointer-events: all;
+    top: auto;
+    bottom: auto;
+    border: 1px solid hsl(var(--border));
+    opacity: 1;
+    user-select: all;
+  }
+  99.9999% {
+    scale: 0.9;
+    height: auto;
+    border: initial;
+    pointer-events: all;
+    bottom: initial;
+    top: auto;
+    bottom: auto;
+    border: 1px solid hsl(var(--border));
+    opacity: 0;
+  }
+  100% {
+    height: 0;
+    border: none;
+    pointer-events: none;
+    user-select: none;
+  }
+}
+.sui-dropdown.initialized {
+  animation: pop-down .15s ease forwards;
+}
+.sui-dropdown.initialized.active {
+  display: flex;
+  border: 1px solid hsl(var(--border));
+  height: auto;
+  pointer-events: all;
+  animation: pop-up .15s ease forwards;
+}
+.sui-dropdown.initialized.below {
+  top: calc(100% + .25rem + var(--offset)) !important;
+  bottom: auto;
+  transform-origin: top center;
+}
+.sui-dropdown.below.start {
+  transform-origin: top left;
+}
+.sui-dropdown.below.end {
+  transform-origin: top right;
+}
+.sui-dropdown.above {
+  top: auto;
+  bottom: calc(100% + .25rem + var(--offset)) !important;
+  transform-origin: bottom center;
+}
+.sui-dropdown.above.start {
+  transform-origin: bottom left;
+}
+.sui-dropdown.above.end {
+  transform-origin: bottom right;
+}
+.sui-dropdown-option {
+  padding: .5rem .75rem;
+  cursor: pointer;
+  font-size: .975em;
+  transition: all .15s ease;
+  display: flex;
+  flex-direction: row;
+  gap: .5rem;
+  align-items: center;
+  width: 100%;
+  white-space: normal;
+  user-select: none;
+}
+.sui-dropdown-option:hover,
+.sui-dropdown-option:focus,
+.sui-dropdown-option.focused {
+  background-color: hsl(var(--background-step-3));
+}
+.sui-dropdown-option.has-href {
+  padding: 0;
+}
+.sui-dropdown-link {
+  padding: .5rem .75rem;
+  width: 100%;
+  text-decoration: none;
+  color: hsl(var(--text-normal));
+}
+.sui-dropdown-option.primary {
+  color: hsl(var(--primary-base));
+}
+.sui-dropdown-option.primary:hover {
+  background-color: hsl(var(--primary-base));
+  color: hsl(var(--text-inverted));
+}
+.sui-dropdown-option.success {
+  color: hsl(var(--success-base));
+}
+.sui-dropdown-option.success:hover {
+  background-color: hsl(var(--success-base));
+  color: hsl(var(--text-dark));
+}
+.sui-dropdown-option.warning {
+  color: hsl(var(--warning-base));
+}
+.sui-dropdown-option.warning:hover {
+  background-color: hsl(var(--warning-base));
+  color: hsl(var(--text-dark));
+}
+.sui-dropdown-option.danger {
+  color: hsl(var(--danger-base));
+}
+.sui-dropdown-option.danger:hover {
+  background-color: hsl(var(--danger-base));
+  color: hsl(var(--text-light));
+}
+.sui-dropdown-option.info {
+  color: hsl(var(--info-base));
+}
+.sui-dropdown-option.info:hover {
+  background-color: hsl(var(--info-base));
+  color: hsl(var(--text-light));
+}
+.sui-dropdown-option.mono {
+  color: hsl(var(--text-normal));
+}
+.sui-dropdown-option.mono:hover {
+  background-color: hsl(var(--mono-base));
+  color: hsl(var(--text-inverted));
+}
+.sui-dropdown-option.disabled {
+  pointer-events: none;
+  color: hsl(var(--text-muted));
+}
+.sui-dropdown-option.end {
+  justify-content: space-between;
+}
+.sui-dropdown-option.has-icon {
+  padding-left: .5rem;
+}

package/dist/components/Dropdown/dropdown.d.ts

@@ -0,0 +1,48 @@
+declare class DropdownHelper {
+    private container;
+    private toggleEl;
+    private dropdown;
+    private alignment;
+    private triggerOn;
+    private fullWidth;
+    private focusIndex;
+    active: boolean;
+    /**
+     * A helper function to interact with dropdowns.
+     * @param id The ID of the dropdown.
+     * @param fullWidth Whether the dropdown should be full width. Not needed normally.
+     */
+    constructor(id: string, fullWidth?: boolean);
+    /**
+     * Registers a click callback for the dropdown options. Whenever one of the options
+     * is clicked, the callback will be called with the value of the option.
+     * @param func The callback function.
+     */
+    registerClickCallback: (func: (value: string) => void) => void;
+    /**
+     * Sets up all listeners for the dropdown.
+     */
+    private initialBehaviorRegistration;
+    /**
+     * Registers callbacks to hide the dropdown when an option is clicked.
+     */
+    private initialOptClickRegistration;
+    /**
+     * A function to toggle the dropdown.
+     */
+    toggle: () => void;
+    /**
+     * A function to hide the dropdown.
+     */
+    hide: () => void;
+    /**
+     * A function to show the dropdown.
+     */
+    show: () => void;
+    /**
+     * A jQuery-like function to hide the dropdown when clicking outside of it.
+     * @param element The element to hide when clicking outside of it.
+     */
+    private hideOnClickOutside;
+}
+export { DropdownHelper };

package/dist/components/Dropdown/dropdown.js

@@ -0,0 +1,201 @@
+class DropdownHelper {
+  container;
+  toggleEl;
+  dropdown;
+  alignment;
+  triggerOn;
+  fullWidth = false;
+  focusIndex = -1;
+  active = false;
+  /**
+   * A helper function to interact with dropdowns.
+   * @param id The ID of the dropdown.
+   * @param fullWidth Whether the dropdown should be full width. Not needed normally.
+   */
+  constructor(id, fullWidth) {
+    this.container = document.getElementById(`${id}-container`);
+    if (!this.container) {
+      throw new Error(`Unable to find dropdown with ID ${id}.`);
+    }
+    this.alignment = this.container.dataset.align;
+    this.triggerOn = this.container.dataset.trigger;
+    this.toggleEl = document.getElementById(`${id}-toggle-btn`);
+    this.dropdown = document.getElementById(`${id}-dropdown`);
+    if (fullWidth) this.fullWidth = true;
+    this.hideOnClickOutside(this.container);
+    this.initialBehaviorRegistration();
+    this.initialOptClickRegistration();
+  }
+  /**
+   * Registers a click callback for the dropdown options. Whenever one of the options
+   * is clicked, the callback will be called with the value of the option.
+   * @param func The callback function.
+   */
+  registerClickCallback = (func) => {
+    const dropdownOpts = this.dropdown.querySelectorAll("li");
+    for (const opt of dropdownOpts) {
+      opt.removeEventListener("click", this.hide);
+      opt.addEventListener("click", () => {
+        func(opt.dataset.value || "");
+        this.hide();
+      });
+    }
+  };
+  /**
+   * Sets up all listeners for the dropdown.
+   */
+  initialBehaviorRegistration = () => {
+    window.addEventListener("scroll", this.hide);
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") this.hide();
+    });
+    document.addEventListener("astro:before-preparation", () => {
+      this.dropdown.classList.remove("initialized");
+    });
+    if (this.triggerOn === "left") {
+      this.toggleEl.addEventListener("click", this.toggle);
+    } else if (this.triggerOn === "both") {
+      this.toggleEl.addEventListener("click", this.toggle);
+      this.toggleEl.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        this.toggle();
+      });
+    } else {
+      this.toggleEl.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        this.toggle();
+      });
+    }
+    this.toggleEl.addEventListener("keydown", (e) => {
+      if (!this.active) return;
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const focused = this.dropdown.querySelector("li.focused");
+        if (!focused) {
+          this.hide();
+          return;
+        }
+        focused.click();
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        this.focusIndex = this.focusIndex === this.dropdown.children.length - 1 ? 0 : this.focusIndex + 1;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        this.focusIndex = this.focusIndex === 0 ? this.dropdown.children.length - 1 : this.focusIndex - 1;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        if (this.focusIndex > this.dropdown.children.length - 1) {
+          this.focusIndex = 0;
+        }
+        this.dropdown.querySelector("li.focused")?.classList.remove("focused");
+        const newFocus = this.dropdown.children[this.focusIndex];
+        if (!newFocus) return;
+        newFocus.classList.add("focused");
+        newFocus.focus();
+      }
+    });
+  };
+  /**
+   * Registers callbacks to hide the dropdown when an option is clicked.
+   */
+  initialOptClickRegistration = () => {
+    const dropdownOpts = this.dropdown.querySelectorAll("li");
+    for (const opt of dropdownOpts) {
+      opt.addEventListener("click", this.hide);
+    }
+  };
+  /**
+   * A function to toggle the dropdown.
+   */
+  toggle = () => {
+    if (this.active) {
+      this.hide();
+      return;
+    }
+    this.show();
+  };
+  /**
+   * A function to hide the dropdown.
+   */
+  hide = () => {
+    this.dropdown.classList.remove("active");
+    this.active = false;
+    this.focusIndex = -1;
+    this.dropdown.querySelector("li.focused")?.classList.remove("focused");
+    setTimeout(() => this.dropdown.classList.remove("above", "below"), 200);
+  };
+  /**
+   * A function to show the dropdown.
+   */
+  show = () => {
+    const isMobile = window.matchMedia("screen and (max-width: 840px)").matches;
+    const {
+      bottom,
+      left,
+      right,
+      width: parentWidth,
+      x,
+      y,
+      height
+    } = this.toggleEl.getBoundingClientRect();
+    const { width: dropdownWidth } = this.dropdown.getBoundingClientRect();
+    const optionHeight = 43.28;
+    const totalBorderSize = 2;
+    const margin = 4;
+    const dropdownHeight = this.dropdown.children.length * optionHeight + totalBorderSize + margin;
+    const CustomRect = {
+      top: bottom + margin,
+      left,
+      right,
+      bottom: bottom + margin + dropdownHeight,
+      width: isMobile || this.fullWidth ? parentWidth : dropdownWidth,
+      // Account for scaling of animation
+      height: dropdownHeight,
+      x,
+      y: y + height + margin
+    };
+    this.active = true;
+    if (isMobile || this.fullWidth) {
+      this.dropdown.style.maxWidth = `${parentWidth}px`;
+      this.dropdown.style.minWidth = "unset";
+      this.dropdown.style.width = `${parentWidth}px`;
+      this.dropdown.style.left = `calc(${parentWidth / 2}px - ${CustomRect.width / 2}px)`;
+    } else {
+      if (this.alignment === "end") {
+        this.dropdown.style.left = `calc(${parentWidth}px - ${CustomRect.width}px)`;
+      }
+      if (this.alignment === "center") {
+        this.dropdown.style.left = `calc(${parentWidth / 2}px - ${CustomRect.width / 2}px)`;
+      }
+    }
+    if (!this.dropdown.classList.contains("initialized")) {
+      this.dropdown.classList.add("initialized");
+    }
+    if (CustomRect.top >= 0 && CustomRect.left >= 0 && CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)) {
+      this.dropdown.classList.add("active", "below");
+      this.focusIndex = -1;
+    } else {
+      this.dropdown.classList.add("active", "above");
+      this.focusIndex = this.dropdown.children.length;
+    }
+  };
+  /**
+   * A jQuery-like function to hide the dropdown when clicking outside of it.
+   * @param element The element to hide when clicking outside of it.
+   */
+  hideOnClickOutside = (element) => {
+    const outsideClickListener = (event) => {
+      if (!event.target) return;
+      if (!element.contains(event.target) && isVisible(element) && this.active === true) {
+        this.hide();
+      }
+    };
+    document.addEventListener("click", outsideClickListener);
+  };
+}
+const isVisible = (elem) => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
+export {
+  DropdownHelper
+};

package/dist/components/Footer/Footer.astro

@@ -0,0 +1,58 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import './footer.css';
+
+interface FooterLink {
+	/**
+	 * The label of the link.
+	 */
+	label: string;
+	/**
+	 * The href of the link.
+	 */
+	href: string;
+}
+
+/**
+ * The props for the footer component.
+ */
+interface Props extends HTMLAttributes<'footer'> {
+	/**
+	 * The links to display in the footer.
+	 */
+	links: {
+		[label: string]: FooterLink[];
+	};
+	/**
+	 * The copyright text to display in the footer.
+	 */
+	copyright: string;
+}
+
+const { copyright, class: className, links, ...props } = Astro.props;
+---
+
+<footer {...props} class={`${className} sui-footer`}>
+  <div class="upper">
+    <div>
+      <slot name="brand" />
+    </div>
+    <div class="links">
+      {Object.keys(links).map((groupLabel) => (
+        <ul>
+          <li class="sui-footer-link-label">{groupLabel}</li>
+          {links[groupLabel]!.map((item) => (
+            <li>
+              <a href={item.href}>{item.label}</a>
+            </li>
+          ))}
+        </ul>
+      ))}
+    </div>
+  </div>
+  <hr class="separator" />
+  <div class="lower">
+    <span class="copyright-span">{copyright}</span>
+    <slot name="socials" />
+  </div>
+</footer>

package/dist/components/Footer/footer.css

@@ -0,0 +1,68 @@
+footer.sui-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  background-color: hsl(var(--background-step-1));
+  padding: 2rem 10vw;
+  color: hsl(var(--text-normal)) !important;
+}
+.upper,
+.lower {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.links {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 2rem;
+}
+.links ul {
+  list-style-type: none;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.links ul li,
+.links ul li * {
+  color: hsl(var(--text-normal)) !important;
+  width: fit-content;
+}
+.links ul li:has(a):hover {
+  text-decoration: underline;
+}
+.sui-footer-link-label {
+  font-size: 1.125em;
+  font-weight: 700;
+}
+.separator {
+  height: 1px;
+  width: 100%;
+  border: none;
+  background: hsl(var(--border));
+}
+.lower {
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+@media screen and (max-width: 1440px) {
+  footer.sui-footer {
+    padding: 2rem;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .upper {
+    flex-direction: column;
+    gap: 2rem;
+  }
+  .links {
+    justify-content: flex-start;
+  }
+}
+@media screen and (max-width: 640px) {
+  .links ul {
+    width: calc(50% - 1rem);
+  }
+}

package/dist/components/Group/Group.astro

@@ -0,0 +1,7 @@
+---
+import './group.css';
+---
+
+<div class="sui-group">
+  <slot />
+</div>

package/dist/components/Group/group.css

@@ -0,0 +1,19 @@
+.sui-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sui-group .sui-button:not(:first-child):not(:last-child),
+.sui-group .sui-badge:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.sui-group .sui-button:first-child,
+.sui-group .sui-badge:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.sui-group .sui-button:last-child,
+.sui-group .sui-badge:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

package/{src/utils → dist/components/Icon}/Icon.astro

@@ -2,7 +2,7 @@
 import { icons } from '@iconify-json/heroicons';
 import { getIconData, iconToSVG, replaceIDs } from '@iconify/utils';
 import type { HTMLAttributes } from 'astro/types';
-import { type HeroIconName } from './iconType';
+import { type HeroIconName } from './iconType.js';
 
 interface SVGAttributes extends HTMLAttributes<'svg'> {
 	// biome-ignore lint/suspicious/noExplicitAny: Allow any string index