@studiocms/ui 0.3.2 → 0.4.1

package/dist/components/Button/button.css

@@ -0,0 +1,292 @@
+.sui-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: center;
+  position: relative;
+  gap: 0.5rem;
+  outline: none;
+  border: none;
+  font-weight: 400;
+  border-radius: var(--radius-md);
+  transition:
+    transform 0.15s,
+    background-color 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+  transition-timing-function: ease;
+  cursor: pointer;
+  background-color: hsl(var(--default-base));
+  border-color: hsl(var(--border));
+  color: hsl(var(--text-normal));
+  min-width: fit-content;
+  will-change: transform;
+  text-decoration: none;
+}
+.sui-button.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.sui-button.outlined {
+  border-width: 1px;
+  border-style: solid;
+}
+.sui-button.outlined:hover {
+  background-color: hsl(var(--default-hover));
+}
+.sui-button.outlined:active {
+  background-color: hsl(var(--default-hover));
+}
+.sui-button:hover {
+  background-color: hsl(var(--default-hover));
+}
+.sui-button:active {
+  background-color: hsl(var(--default-active));
+  transform: scale(0.95);
+}
+.sui-button.flat {
+  background: hsla(var(--default-flat));
+}
+.sui-button.flat:hover {
+  background: hsla(var(--default-flat-hover));
+}
+.sui-button.flat:active {
+  background: hsla(var(--default-flat-active));
+}
+.sui-button.sm {
+  height: 32px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.825em;
+}
+.sui-button.md {
+  height: 40px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875em;
+}
+.sui-button.lg {
+  height: 48px;
+  padding: 0.75rem 1rem;
+  font-size: 1em;
+}
+.sui-button:focus-visible {
+  outline: 2px solid hsl(var(--text-normal));
+  outline-offset: 2px;
+}
+.sui-button.primary {
+  background-color: hsl(var(--primary-base));
+  border-color: hsl(var(--primary-base));
+  color: hsl(var(--text-inverted));
+}
+.sui-button.primary:hover {
+  background-color: hsl(var(--primary-hover));
+}
+.sui-button.primary:active {
+  background-color: hsl(var(--primary-active));
+}
+.sui-button.primary.outlined {
+  background-color: hsl(var(--default-base));
+  color: hsl(var(--text-normal));
+}
+.sui-button.primary.outlined:hover {
+  background-color: hsl(var(--default-hover));
+}
+.sui-button.primary.outlined:active {
+  background-color: hsl(var(--default-active));
+}
+.sui-button.primary.flat {
+  background-color: hsla(var(--primary-flat));
+  color: hsl(259, 96%, 79%);
+}
+.sui-button.primary.flat:hover {
+  background-color: hsla(var(--primary-flat-hover));
+}
+.sui-button.primary.flat:active {
+  background-color: hsla(var(--primary-flat-active));
+}
+.sui-button.success {
+  background-color: hsl(var(--success-base));
+  border-color: hsl(var(--success-base));
+  color: hsl(var(--text-dark));
+}
+.sui-button.success:hover {
+  background-color: hsl(var(--success-hover));
+}
+.sui-button.success:active {
+  background-color: hsl(var(--success-active));
+}
+.sui-button.success.outlined {
+  background-color: hsl(var(--default-base));
+  color: hsl(var(--text-normal));
+}
+.sui-button.success.outlined:hover {
+  background-color: hsl(var(--default-hover));
+}
+.sui-button.success.outlined:active {
+  background-color: hsl(var(--default-active));
+}
+.sui-button.success.flat {
+  background-color: hsla(var(--success-flat));
+  color: hsl(var(--success-base));
+}
+.sui-button.success.flat:hover {
+  background-color: hsla(var(--success-flat-hover));
+}
+.sui-button.success.flat:active {
+  background-color: hsla(var(--success-flat-active));
+}
+.sui-button.warning {
+  background-color: hsl(var(--warning-base));
+  border-color: hsl(var(--warning-base));
+  color: hsl(var(--text-dark));
+}
+.sui-button.warning:hover {
+  background-color: hsl(var(--warning-hover));
+}
+.sui-button.warning:active {
+  background-color: hsl(var(--warning-active));
+}
+.sui-button.warning.outlined {
+  background-color: hsl(var(--default-base));
+  color: hsl(var(--text-normal));
+}
+.sui-button.warning.outlined:hover {
+  background-color: hsl(var(--default-hover));
+}
+.sui-button.warning.outlined:active {
+  background-color: hsl(var(--default-active));
+}
+.sui-button.warning.flat {
+  background-color: hsla(var(--warning-flat));
+  color: hsl(var(--warning-base));
+}
+.sui-button.warning.flat:hover {
+  background-color: hsla(var(--warning-flat-hover));
+}
+.sui-button.warning.flat:active {
+  background-color: hsla(var(--warning-flat-active));
+}
+.sui-button.danger {
+  background-color: hsl(var(--danger-base));
+  border-color: hsl(var(--danger-base));
+  color: hsl(var(--text-light));
+}
+.sui-button.danger:hover {
+  background-color: hsl(var(--danger-hover));
+}
+.sui-button.danger:active {
+  background-color: hsl(var(--danger-active));
+}
+.sui-button.danger.outlined {
+  background-color: hsl(var(--default-base));
+  color: hsl(var(--text-normal));
+}
+.sui-button.danger.outlined:hover {
+  background-color: hsl(var(--default-hover));
+}
+.sui-button.danger.outlined:active {
+  background-color: hsl(var(--default-active));
+}
+.sui-button.danger.flat {
+  background-color: hsla(var(--danger-flat));
+  color: hsl(337, 92%, 71%);
+}
+.sui-button.danger.flat:hover {
+  background-color: hsla(var(--danger-flat-hover));
+}
+.sui-button.danger.flat:active {
+  background-color: hsla(var(--danger-flat-active));
+}
+.sui-button.info {
+  background-color: hsl(var(--info-base));
+  border-color: hsl(var(--info-base));
+  color: hsl(var(--text-light));
+}
+.sui-button.info:hover {
+  background-color: hsl(var(--info-hover));
+}
+.sui-button.info:active {
+  background-color: hsl(var(--info-active));
+}
+.sui-button.info.outlined {
+  background-color: hsl(var(--default-base));
+  color: hsl(var(--text-normal));
+}
+.sui-button.info.outlined:hover {
+  background-color: hsl(var(--default-hover));
+}
+.sui-button.info.outlined:active {
+  background-color: hsl(var(--default-active));
+}
+.sui-button.info.flat {
+  background-color: hsla(var(--info-flat));
+  color: hsl(var(--info-base));
+}
+.sui-button.info.flat:hover {
+  background-color: hsla(var(--info-flat-hover));
+}
+.sui-button.info.flat:active {
+  background-color: hsla(var(--info-flat-active));
+}
+.sui-button.mono {
+  background-color: hsl(var(--mono-base));
+  border-color: hsl(var(--mono-base));
+  color: hsl(var(--text-inverted));
+}
+.sui-button.mono:hover {
+  background-color: hsl(var(--mono-hover));
+}
+.sui-button.mono:active {
+  background-color: hsl(var(--mono-active));
+}
+.sui-button.mono.outlined {
+  background-color: hsl(var(--default-base));
+  color: hsl(var(--text-normal));
+}
+.sui-button.mono.outlined:hover {
+  background-color: hsl(var(--default-hover));
+}
+.sui-button.mono.outlined:active {
+  background-color: hsl(var(--default-active));
+}
+.sui-button.mono.flat {
+  background-color: hsla(var(--mono-flat));
+  color: hsl(var(--mono-base));
+}
+.sui-button.mono.flat:hover {
+  background-color: hsla(var(--mono-flat-hover));
+}
+.sui-button.mono.flat:active {
+  background-color: hsla(var(--mono-flat-active));
+}
+.sui-button.full {
+  width: 100%;
+  justify-content: center;
+}
+[data-theme=light] {
+  .sui-button.primary.flat {
+    color: hsl(259, 84%, 45%);
+  }
+  .sui-button.success.flat {
+    background-color: hsl(var(--success-base), 0.2);
+    color: hsl(143, 59%, 20%);
+  }
+  .sui-button.success.flat:hover {
+    background-color: hsla(var(--success-flat-hover));
+  }
+  .sui-button.success.flat:active {
+    background-color: hsla(var(--success-flat-active));
+  }
+  .sui-button.warning.flat {
+    background-color: hsla(var(--warning-base), 0.2);
+    color: hsl(48, 78%, 20%);
+  }
+  .sui-button.warning.flat:hover {
+    background-color: hsla(var(--warning-base), 0.25);
+  }
+  .sui-button.warning.flat:active {
+    background-color: hsla(var(--warning-base), 0.4);
+  }
+  .sui-button.danger.flat {
+    color: hsl(339, 97%, 29%);
+  }
+}

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

@@ -1,5 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
+import './card.css';
 
 /**
  * Props for the card component.
@@ -36,51 +37,3 @@ const { as: As = 'div', fullWidth, fullHeight, variant = 'default', ...props } =
     <slot name="footer" />
   </div>
 </As>
-<style>
-  .sui-card {
-    border: 1px solid hsl(var(--border));
-    background-color: hsl(var(--background-base));
-    border-radius: .5rem;
-    width: fit-content;
-    height: fit-content;
-  }
-
-  .sui-card.filled {
-    background-color: hsl(var(--background-step-3));
-    border: none;
-  }
-
-  .sui-card.full-w {
-    width: 100%;
-  }
-
-  .sui-card.full-h {
-    height: 100%;
-  }
-
-  .sui-card-header:has(*) {
-    padding: 1rem 1rem 0rem 1rem;
-    * {
-      margin: 0;
-    }
-  }
-
-  .sui-card-body {
-    padding: 1rem;
-  }
-
-  .sui-card-footer:has(*) {
-    border-top: 1px solid hsl(var(--border));
-    padding: 1rem;
-  }
-
-  .filled .sui-card-footer {
-    border: none;
-  }
-
-  @media screen and (max-width: 840px) {
-    .sui-card {
-      width: 100%;
-    }
-  }
-</style>

package/dist/components/Card/card.css

@@ -0,0 +1,38 @@
+.sui-card {
+  border: 1px solid hsl(var(--border));
+  background-color: hsl(var(--background-base));
+  border-radius: var(--radius-md);
+  width: fit-content;
+  height: fit-content;
+}
+.sui-card.filled {
+  background-color: hsl(var(--background-step-3));
+  border: none;
+}
+.sui-card.full-w {
+  width: 100%;
+}
+.sui-card.full-h {
+  height: 100%;
+}
+.sui-card-header:has(*) {
+  padding: 1rem 1rem 0rem 1rem;
+  * {
+    margin: 0;
+  }
+}
+.sui-card-body {
+  padding: 1rem;
+}
+.sui-card-footer:has(*) {
+  border-top: 1px solid hsl(var(--border));
+  padding: 1rem;
+}
+.filled .sui-card-footer {
+  border: none;
+}
+@media screen and (max-width: 840px) {
+  .sui-card {
+    width: 100%;
+  }
+}

package/dist/components/Center/Center.astro

@@ -0,0 +1,7 @@
+---
+import './center.css';
+---
+<!-- This was made for Jumper, to keep him happy <3 -->
+<div class="sui-center">
+  <slot />
+</div>

package/dist/components/Center/center.css

@@ -0,0 +1,8 @@
+.sui-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}

package/dist/components/Checkbox/Checkbox.astro

@@ -0,0 +1,95 @@
+---
+import Checkmark from '../../icons/Checkmark.astro';
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import { generateID } from '../../utils/generateID.js';
+import './checkbox.css';
+
+/**
+ * The props for the Checkbox component.
+ */
+interface Props {
+	/**
+	 * The label of the checkbox.
+	 */
+	label: string;
+	/**
+	 * The size of the checkbox. Defaults to `md`.
+	 */
+	size?: 'sm' | 'md' | 'lg';
+	/**
+	 * The color of the checkbox. Defaults to `default`.
+	 */
+	color?: StudioCMSColorway;
+	/**
+	 * Whether the checkbox is checked by default.
+	 */
+	defaultChecked?: boolean;
+	/**
+	 * Whether the checkbox is disabled.
+	 */
+	disabled?: boolean;
+	/**
+	 * The name of the checkbox.
+	 */
+	name?: string;
+	/**
+	 * Whether the checkbox is required.
+	 */
+	isRequired?: boolean;
+}
+
+const {
+	size = 'md',
+	color = 'default',
+	defaultChecked,
+	disabled,
+	name = generateID('checkbox'),
+	label,
+	isRequired,
+} = Astro.props;
+
+const iconSizes = {
+	sm: 14,
+	md: 16,
+	lg: 24,
+};
+---
+<label 
+  class="sui-checkmark-label"
+  for={name}
+  class:list={[
+    disabled && "disabled",
+    color,
+    size,
+  ]}
+>
+  <div
+    class="sui-checkmark-container"
+    tabindex="0"
+    role="checkbox"
+    aria-checked={defaultChecked} 
+    aria-labelledby={`label-${name}`}
+    >
+    <Checkmark
+      class={'sui-checkmark'}
+      width={iconSizes[size]}
+      height={iconSizes[size]}
+    />
+    <input
+      type="checkbox"
+      name={name}
+      id={name}
+      checked={defaultChecked}
+      disabled={disabled}
+      required={isRequired}
+      class="sui-checkbox"
+      hidden
+    />
+  </div>
+  <span id={`label-${name}`}>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+</label>
+<script>
+import "studiocms:ui/scripts/checkbox"
+</script>

package/dist/components/Checkbox/checkbox.css

@@ -0,0 +1,119 @@
+.sui-checkmark-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: .5rem;
+  position: relative;
+  margin: .25rem 0;
+}
+.sui-checkmark-label.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  color: hsl(var(--text-muted));
+}
+.sui-checkmark-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: hsl(var(--default-base));
+  border: 2px solid hsl(var(--default-base));
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition:
+    background-color .15s,
+    border .15s,
+    transform .15s;
+  transition-timing-function: ease;
+}
+.sui-checkmark-container:focus-visible {
+  outline: 2px solid hsl(var(--text-normal));
+  outline-offset: 2px;
+}
+.sui-checkmark-label:hover .sui-checkmark-container {
+  background-color: hsl(var(--default-hover));
+}
+.sui-checkmark-label:active .sui-checkmark-container {
+  background-color: hsl(var(--default-active));
+  scale: 0.9;
+}
+.sui-checkmark-label.sm {
+  font-size: .875em;
+}
+.sui-checkmark-label.sm .sui-checkmark-container {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.sui-checkmark-label.md .sui-checkmark-container {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.sui-checkmark-label.lg {
+  font-size: 1.125em;
+}
+.sui-checkmark-label.lg .sui-checkmark-container {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: .125rem;
+}
+.primary .sui-checkmark-container:has(.sui-checkbox:checked) {
+  border-color: hsl(var(--primary-base));
+  background-color: hsl(var(--primary-base));
+}
+.success .sui-checkmark-container:has(.sui-checkbox:checked) {
+  border-color: hsl(var(--success-base));
+  background-color: hsl(var(--success-base));
+}
+.warning .sui-checkmark-container:has(.sui-checkbox:checked) {
+  border-color: hsl(var(--warning-base));
+  background-color: hsl(var(--warning-base));
+}
+.danger .sui-checkmark-container:has(.sui-checkbox:checked) {
+  border-color: hsl(var(--danger-base));
+  background-color: hsl(var(--danger-base));
+}
+.info .sui-checkmark-container:has(.sui-checkbox:checked) {
+  border-color: hsl(var(--info-base));
+  background-color: hsl(var(--info-base));
+}
+.mono .sui-checkmark-container:has(.sui-checkbox:checked) {
+  border-color: hsl(var(--mono-base));
+  background-color: hsl(var(--mono-base));
+}
+.req-star {
+  color: hsl(var(--danger-base));
+  font-weight: 700;
+}
+.sui-checkbox {
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  opacity: 0;
+  margin: 0;
+}
+.sui-checkmark polyline {
+  transition: all .15s ease;
+  color: hsl(var(--text-normal));
+}
+.primary .sui-checkmark polyline {
+  color: hsl(var(--text-inverted));
+}
+.success .sui-checkmark polyline {
+  color: hsl(var(--text-dark));
+}
+.warning .sui-checkmark polyline {
+  color: hsl(var(--text-dark));
+}
+.danger .sui-checkmark polyline {
+  color: hsl(var(--text-light));
+}
+.info .sui-checkmark polyline {
+  color: hsl(var(--text-light));
+}
+.mono .sui-checkmark polyline {
+  color: hsl(var(--text-inverted));
+}
+.sui-checkmark-container:has(.sui-checkbox:checked) {
+  .sui-checkmark polyline {
+    stroke-dashoffset: 44;
+  }
+}

package/dist/components/Checkbox/checkbox.d.ts

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

package/dist/components/Checkbox/checkbox.js

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

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

@@ -1,4 +1,6 @@
 ---
+import './divider.css';
+
 /**
  * Props for the divider component.
  */
@@ -22,28 +24,3 @@ const { background = 'background-base' } = Astro.props;
     <slot />
   </div>
 </div>
-<style>
-  .sui-divider-container {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-  }
-
-  .sui-divider-line {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0);
-    width: 100%;
-    height: 1px;
-    background-color: hsl(var(--border));
-    z-index: 1;
-    border: none;
-  }
-
-  .sui-divider-content {
-    z-index: 2;
-    color: hsl(var(--text-muted));
-  }
-</style>

package/dist/components/Divider/divider.css

@@ -0,0 +1,21 @@
+.sui-divider-container {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.sui-divider-line {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 100%;
+  height: 1px;
+  background-color: hsl(var(--border));
+  z-index: 1;
+  border: none;
+}
+.sui-divider-content {
+  z-index: 2;
+  color: hsl(var(--text-muted));
+}