@studiocms/ui 0.4.16 → 1.0.0-beta.0

package/dist/components/SearchSelect/searchselect.css

@@ -12,13 +12,13 @@
 .sui-search-select-label.disabled {
   opacity: 0.5;
   pointer-events: none;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }
 .label {
   font-size: 14px;
 }
 .req-star {
-  color: hsl(var(--danger-base));
+  color: var(--danger-base);
   font-weight: 700;
 }
 .sui-search-select-dropdown-container {
@@ -32,24 +32,36 @@
 .sui-search-select-dropdown {
   position: absolute;
   width: 100%;
-  border: 1px solid hsl(var(--border));
+  border: 1px solid var(--border);
   list-style: none;
   margin: 0;
   padding: 0;
   flex-direction: column;
   border-radius: var(--radius-md);
-  background-color: hsl(var(--background-step-2));
+  background-color: var(--background-step-2);
   overflow: hidden;
   top: calc(100% + 0.25rem);
   left: 0;
   display: none;
+  max-height: 300px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background-color: var(--background-step-2);
   z-index: 90;
-  box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+  box-shadow: 0px 4px 8px var(--shadow);
 }
 .sui-search-select-dropdown.above {
   top: auto;
   bottom: calc(100% - 1.5rem);
 }
+.sui-search-select-dropdown-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
 .sui-search-select-option,
 .empty-search-results {
   padding: 0.5rem;
@@ -58,25 +70,25 @@
   transition: all 0.15s ease;
 }
 .empty-search-results:hover {
-  background-color: hsl(var(--background-step-2));
+  background-color: var(--background-step-2);
   cursor: default;
 }
 .sui-search-select-option.disabled {
   pointer-events: none;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }
 .sui-search-select-option:hover,
 .sui-search-select-option.focused {
-  background-color: hsl(var(--background-step-3));
+  background-color: var(--background-step-3);
 }
 .sui-search-select-label[data-multiple=true] .sui-search-select-option.selected:hover,
 .sui-search-select-label[data-multiple=true] .sui-search-select-option.selected:focus,
 .sui-search-select-label[data-multiple=true] .sui-search-select-option.selected.focused {
-  background-color: hsl(var(--primary-hover));
+  background-color: var(--primary-hover);
 }
 .sui-search-select-option.selected {
-  background-color: hsl(var(--primary-base));
-  color: hsl(var(--text-inverted));
+  background-color: var(--primary-base);
+  color: var(--text-inverted);
   cursor: default;
 }
 .sui-search-select-label[data-multiple=true] .sui-search-select-option.selected {
@@ -105,7 +117,6 @@
   position: absolute;
   bottom: .675rem;
   right: .675rem;
-  pointer-events: none;
 }
 .sui-search-input-wrapper:has(input:focus) + .sui-search-select-dropdown {
   display: flex;
@@ -141,7 +152,7 @@
   aspect-ratio: 1 / 1;
   border-radius: 999px;
   cursor: pointer;
-  outline: 1px solid hsla(var(--border), 0);
+  outline: 1px solid transparent;
   transition: background-color 0.15s ease, outline 0.15s ease;
 }
 .sui-search-select-badge-container .sui-search-select-badge.sui-badge svg:hover {
@@ -150,9 +161,9 @@
 .sui-search-select-badge-container .sui-search-select-badge.sui-badge svg:active,
 .sui-search-select-badge-container .sui-search-select-badge.sui-badge svg:focus {
   background-color: hsla(100, 100%, 95%, 0.2);
-  outline: 1px solid hsl(var(--border));
+  outline: 1px solid var(--border);
 }
 .sui-search-select-max-span {
   font-size: 0.875em;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }

package/dist/components/SearchSelect/searchselect.js

@@ -82,7 +82,7 @@ function loadSearchSelects() {
     );
     if (option) {
       option.classList.toggle("selected", forceState ?? !isCurrentlySelected);
-      if (container && container.select) {
+      if (container?.select) {
         container.select.value = option.getAttribute("value");
       }
     }
@@ -150,6 +150,26 @@ function loadSearchSelects() {
     if (!target.closest("input")) {
       e.preventDefault();
     }
+    if (container.input?.value.length === 0) {
+      reconstructOptions(state2.optionsMap[container.dataset.id] ?? [], state2, container);
+    }
+    if (target.closest(".sui-search-select-indicator")) {
+      if (container.dropdown?.parentElement?.classList.contains("active")) {
+        container.dropdown?.parentElement?.classList.remove("active", "above");
+        container.input?.blur();
+        container.input.value = "";
+      } else {
+        container.dropdown?.parentElement?.classList.add("active");
+        container.input?.focus();
+        container.input.value = "";
+      }
+      return;
+    }
+    if (target.closest(".sui-search-select-badge-container")) {
+      container.dropdown?.parentElement?.classList.remove("active", "above");
+      container.input?.blur();
+      container.input.value = "";
+    }
     state2.isSelectingOption = true;
     setTimeout(() => {
       state2.isSelectingOption = false;
@@ -182,7 +202,7 @@ function loadSearchSelects() {
       }
       updateOptionSelection(opt.dataset.value, container, state2, true);
       updateLabel(false, state2, container);
-      container.dropdown?.classList.remove("active", "above");
+      container.dropdown?.parentElement?.classList.remove("active", "above");
       container.input?.blur();
       container.input.value = "";
     }
@@ -191,7 +211,7 @@ function loadSearchSelects() {
     const focusedElement = document.activeElement;
     if (e.key === "Escape" || e.key === "Tab") {
       container.input?.blur();
-      container.dropdown?.classList.remove("active", "above");
+      container.dropdown?.parentElement?.classList.remove("active", "above");
       return;
     }
     if ((e.key === "Enter" || e.key === " ") && focusedElement?.tagName.toLowerCase() === "svg") {
@@ -278,7 +298,7 @@ function loadSearchSelects() {
           }
           updateOptionSelection(value, container, state2, true);
           updateLabel(false, state2, container);
-          container.dropdown?.classList.remove("active", "above");
+          container.dropdown?.parentElement?.classList.remove("active", "above");
           container.input.value = "";
         }
       }
@@ -301,20 +321,20 @@ function loadSearchSelects() {
     if (state2.isSelectingOption) return;
     container.input.value = "";
     reconstructOptions(state2.optionsMap[container.dataset.id] ?? [], state2, container);
-    container.dropdown?.classList.remove("active", "above");
+    container.dropdown?.parentElement?.classList.remove("active", "above");
   };
   const handleContainerFocusIn = (state2, container) => {
-    const allDropdowns = document.querySelectorAll(".sui-search-select-dropdown");
+    const allDropdowns = document.querySelectorAll(".sui-search-select-dropdown-list");
     for (const dropdown of allDropdowns) {
       if (dropdown !== container.dropdown) {
-        dropdown.classList.remove("active", "above");
+        dropdown.parentElement?.classList.remove("active", "above");
       }
     }
     const { isAbove } = getDropdownPosition(
       container.input,
       state2.optionsMap[container.dataset.id]?.length ?? 0
     );
-    container.dropdown?.classList.add("active", ...isAbove ? [] : ["above"]);
+    container.dropdown?.parentElement?.classList.add("active", ...isAbove ? [] : ["above"]);
   };
   const state = {
     optionsMap: {},
@@ -330,7 +350,7 @@ function loadSearchSelects() {
     const id = container.dataset.id;
     const specialContainer = Object.assign(container, {
       input: container.querySelector("input"),
-      dropdown: container.querySelector(".sui-search-select-dropdown"),
+      dropdown: container.querySelector(".sui-search-select-dropdown-list"),
       select: container.querySelector("select")
     });
     const selectedOptions = Array.from(

package/dist/components/Select/Select.astro

@@ -160,36 +160,38 @@ const defaultLabel = selected
 		>
 			<span class="sui-select-value-span" id={`${name}-value-span`}>
 				{Array.isArray(selected)
-					? <div class="sui-select-badge-container">{selected.map((s) => s && <Badge class="sui-select-badge" data-value={s.value} size="sm" label={s.label} iconPosition="right" icon="x-mark" />)}</div>
+					? <div class="sui-select-badge-container">{selected.map((s) => s && <Badge class="sui-select-badge" data-value={s.value} size="sm" label={s.label} iconPosition="right" icon="heroicons:x-mark" />)}</div>
 					: selected?.label ?? defaultLabel
 				}
 			</span>
-			<Icon name="chevron-up-down" width={24} height={24} class="sui-select-chevron" />
+			<Icon name="heroicons:chevron-up-down" width={24} height={24} class="sui-select-chevron" />
 		</button>
-		<ul class="sui-select-dropdown" role="listbox" id={`${name}-dropdown`}>
-			{
-				options.map((x, i) => {
-					const isSelected = Array.isArray(selected)
-						? selected.map((y) => y && y.value).includes(x.value)
-						: selected?.value === x.value;
-					return (
-						<li
-							class="sui-select-option"
-							role="option"
-							value={x.value}
-							class:list={[
-								isSelected && `selected`,
-								x.disabled && "disabled",
-							]}
-							id={isSelected ? `${name}-selected` : ""}
-							data-option-index={i}
-						>
-							{x.label}
-						</li>
-					)
-				})
-			}
-		</ul>
+		<div class="sui-select-dropdown">
+			<ul class="sui-select-dropdown-list" role="listbox" id={`${name}-dropdown`}>
+				{
+					options.map((x, i) => {
+						const isSelected = Array.isArray(selected)
+							? selected.map((y) => y && y.value).includes(x.value)
+							: selected?.value === x.value;
+						return (
+							<li
+								class="sui-select-option"
+								role="option"
+								value={x.value}
+								class:list={[
+									isSelected && `selected`,
+									x.disabled && "disabled",
+								]}
+								id={isSelected ? `${name}-selected` : ""}
+								data-option-index={i}
+							>
+								{x.label}
+							</li>
+						)
+					})
+				}
+			</ul>
+		</div>
 	</div>
 	<select class="sui-hidden-select" id={name} name={name} required={isRequired} multiple={multiple ? "" : undefined} hidden tabindex="-1">
 		<option value={""}> Select </option>

package/dist/components/Select/select.css

@@ -14,21 +14,21 @@
 .sui-select-label.disabled {
   opacity: 0.5;
   pointer-events: none;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }
 .label {
   font-size: 14px;
 }
 .req-star {
-  color: hsl(var(--danger-base));
+  color: var(--danger-base);
   font-weight: 700;
 }
 .sui-select-button {
   padding: 0.5rem 0.75rem 0.5rem 0.75rem;
   border-radius: var(--radius-md);
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background-step-2));
-  color: hsl(var(--text-normal));
+  border: 1px solid var(--border);
+  background: var(--background-step-2);
+  color: var(--text-normal);
   transition: background, border 0.15s ease;
   display: flex;
   flex-direction: row;
@@ -38,17 +38,17 @@
   gap: 1rem;
 }
 .sui-select-button:focus {
-  border: 1px solid hsl(var(--primary-base));
+  border: 1px solid var(--primary-base);
 }
 .sui-select-button:hover,
 .sui-select-button:focus {
-  background: hsl(var(--background-step-3));
+  background: var(--background-step-3);
 }
 .sui-select-button.active,
 .sui-select-button:active,
 .sui-select-button:has(+ .sui-select-dropdown.active) {
-  border: 1px solid hsl(var(--primary-base));
-  background: hsl(var(--background-step-2));
+  border: 1px solid var(--primary-base);
+  background: var(--background-step-2);
 }
 .sui-select-button:has(.sui-select-badge-container) {
   padding: 0.5rem 0.75rem 0.5rem 0.5rem;
@@ -70,19 +70,23 @@
 .sui-select-dropdown {
   position: absolute;
   width: 100%;
-  border: 1px solid hsl(var(--border));
+  border: 1px solid var(--border);
   list-style: none;
   margin: 0;
   padding: 0;
   flex-direction: column;
   border-radius: var(--radius-md);
-  background-color: hsl(var(--background-step-2));
+  background-color: var(--background-step-2);
   overflow: hidden;
   top: calc(100% + 0.25rem);
   left: 0;
   display: none;
+  max-height: 300px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background-color: var(--background-step-2);
   z-index: 90;
-  box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+  box-shadow: 0px 4px 8px var(--shadow);
 }
 .sui-select-dropdown.active {
   display: flex;
@@ -91,6 +95,14 @@
   top: auto;
   bottom: calc(100% + 0.25rem);
 }
+.sui-select-dropdown-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
 .sui-select-option {
   padding: 0.5rem;
   cursor: pointer;
@@ -99,25 +111,25 @@
 }
 .sui-select-option.disabled {
   pointer-events: none;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }
 .sui-select-option:hover,
 .sui-select-option:focus,
 .sui-select-option.focused {
-  background-color: hsl(var(--background-step-3));
+  background-color: var(--background-step-3);
 }
 .sui-select-label[data-multiple=true] .sui-select-option.selected:hover,
 .sui-select-label[data-multiple=true] .sui-select-option.selected:focus,
 .sui-select-label[data-multiple=true] .sui-select-option.selected.focused {
-  background-color: hsl(var(--primary-hover));
+  background-color: var(--primary-hover);
 }
 .sui-select-option:focus {
   outline: none;
   border: none;
 }
 .sui-select-option.selected {
-  background-color: hsl(var(--primary-base));
-  color: hsl(var(--text-inverted));
+  background-color: var(--primary-base);
+  color: var(--text-inverted);
   cursor: default;
 }
 .sui-select-label[data-multiple=true] .sui-select-option.selected {
@@ -166,7 +178,7 @@
   aspect-ratio: 1 / 1;
   border-radius: 999px;
   cursor: pointer;
-  outline: 1px solid hsla(var(--border), 0);
+  outline: 1px solid transparent;
   transition: background-color 0.15s ease, outline 0.15s ease;
 }
 .sui-select-badge-container .sui-select-badge.sui-badge svg:hover {
@@ -175,9 +187,9 @@
 .sui-select-badge-container .sui-select-badge.sui-badge svg:active,
 .sui-select-badge-container .sui-select-badge.sui-badge svg:focus {
   background-color: hsla(100, 100%, 95%, 0.2);
-  outline: 1px solid hsl(var(--border));
+  outline: 1px solid var(--border);
 }
 .sui-select-max-span {
   font-size: 0.875em;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }

package/dist/components/Select/select.js

@@ -191,7 +191,7 @@ function loadSelects() {
       }
       if (option) {
         option.classList.add("selected");
-        if (container && container.select) {
+        if (container?.select) {
           container.select.value = option.getAttribute("value");
         }
         updateLabel(state2, container);

package/dist/components/Sidebar/Double.astro

@@ -27,8 +27,8 @@
     height: 100%;
     min-width: 280px;
     width: 280px;
-    background-color: hsl(var(--background-step-1));
-    border-right: 1px solid hsl(var(--border));
+    background-color: var(--background-step-1);
+    border-right: 1px solid var(--border);
     gap: 1rem;
     display: flex;
     flex-direction: column;
@@ -43,8 +43,8 @@
     min-width: 280px;
     width: 280px;
     height: 100%;
-    background-color: hsl(var(--background-step-2));
-    border-right: 1px solid hsl(var(--border));
+    background-color: var(--background-step-2);
+    border-right: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     gap: 1rem;

package/dist/components/Sidebar/Single.astro

@@ -13,8 +13,8 @@ const props = Astro.props;
     height: 100%;
     min-width: 280px;
     width: 280px;
-    background-color: hsl(var(--background-step-1));
-    border-right: 1px solid hsl(var(--border));
+    background-color: var(--background-step-1);
+    border-right: 1px solid var(--border);
     gap: 1rem;
     display: flex;
     flex-direction: column;

package/dist/components/Skeleton/Skeleton.astro

@@ -0,0 +1,61 @@
+---
+import type { z } from 'astro/zod';
+import './skeleton.css';
+import { SkeletonSchema } from './skeleton.js';
+
+type Props = z.infer<typeof SkeletonSchema>;
+
+const {
+	variant,
+	width,
+	height,
+	radius = 'lg',
+	animation = 'slide',
+	class: className,
+} = Astro.props;
+
+const gap = variant === 'card' ? (Astro.props.gap ?? '0.5rem') : undefined;
+
+const styles = [width && `width: ${width};`, height && `height: ${height};`, gap && `gap: ${gap};`]
+	.filter(Boolean)
+	.join(' ');
+
+function getClasses() {
+	const classes = ['sui-skeleton'];
+
+	if (variant) {
+		classes.push(`sui-skeleton-${variant}`);
+
+		if (variant === 'card') {
+			const direction = Astro.props.direction ?? 'column';
+			const hAlign = Astro.props.hAlign ?? 'center';
+			const vAlign = Astro.props.vAlign ?? 'center';
+
+			classes.push(`sui-skeleton-${direction}`);
+
+			const hAlignProp = direction === 'row' ? 'justify' : 'align';
+			const vAlignProp = direction === 'row' ? 'items' : 'justify';
+
+			classes.push(`sui-skeleton-${hAlignProp}-${hAlign}`);
+			classes.push(`sui-skeleton-${vAlignProp}-${vAlign}`);
+		}
+	}
+
+	if (radius !== 'none' && variant !== 'circle') {
+		classes.push(`sui-skeleton-radii-${radius}`);
+	}
+
+	if (animation !== 'none' && variant !== 'card') {
+		classes.push(`sui-skeleton-anim-${animation}`);
+	}
+	if (className) {
+		classes.push(className);
+	}
+
+	return classes;
+}
+---
+
+<div class:list={getClasses()} style={styles}>
+	<slot />
+</div>

package/dist/components/Skeleton/skeleton.css

@@ -0,0 +1,111 @@
+@keyframes sui-skeleton-slide {
+  0% {
+    background-position: 175% 0;
+  }
+  100% {
+    background-position: -75% 0;
+  }
+}
+@keyframes sui-skeleton-pulse {
+  0% {
+    background-color: var(--background-step-2);
+  }
+  50% {
+    background-color: var(--background-step-3);
+  }
+  100% {
+    background-color: var(--background-step-2);
+  }
+}
+.sui-skeleton {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--background-step-2);
+}
+.sui-skeleton-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-step-1);
+  padding: 1rem;
+  gap: 0.5rem;
+  height: 100%;
+  overflow: hidden;
+}
+.sui-skeleton-card.sui-skeleton-row {
+  flex-direction: row;
+}
+.sui-skeleton-justify-start,
+.sui-skeleton-align-start {
+  justify-content: flex-start;
+}
+.sui-skeleton-justify-center,
+.sui-skeleton-align-center {
+  justify-content: center;
+}
+.sui-skeleton-justify-end,
+.sui-skeleton-align-end {
+  justify-content: flex-end;
+}
+.sui-skeleton-items-start,
+.sui-skeleton-justify-start {
+  align-items: flex-start;
+}
+.sui-skeleton-items-center,
+.sui-skeleton-justify-center {
+  align-items: center;
+}
+.sui-skeleton-items-end,
+.sui-skeleton-justify-end {
+  align-items: flex-end;
+}
+.sui-skeleton-text {
+  display: inline-block;
+  background-color: var(--background-step-2);
+  height: 1rem;
+}
+.sui-skeleton-block {
+  display: block;
+  background-color: var(--background-step-2);
+  height: 1rem;
+}
+.sui-skeleton-circle {
+  display: inline-block;
+  background-color: var(--background-step-2);
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-full);
+}
+.sui-skeleton-radii-sm {
+  border-radius: var(--radius-sm);
+}
+.sui-skeleton-radii-md {
+  border-radius: var(--radius-md);
+}
+.sui-skeleton-radii-lg {
+  border-radius: var(--radius-lg);
+}
+.sui-skeleton-anim-none {
+  animation: none;
+}
+.sui-skeleton-anim-slide {
+  @media (prefers-reduced-motion: no-preference) {
+    background-image:
+      linear-gradient(
+        90deg,
+        var(--background-step-2) 25%,
+        var(--background-step-3) 50%,
+        var(--background-step-2) 75%);
+    background-position: 175% 0;
+    background-size: 200% 100%;
+    background-repeat: no-repeat;
+    animation: sui-skeleton-slide 2s ease-in-out infinite;
+  }
+}
+.sui-skeleton-anim-pulse {
+  @media (prefers-reduced-motion: no-preference) {
+    animation: sui-skeleton-pulse 2s linear infinite;
+  }
+}