@studiocms/ui 0.3.2 → 0.4.0

package/dist/components/RadioGroup/RadioGroup.astro

@@ -0,0 +1,124 @@
+---
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import { generateID } from '../../utils/generateID.js';
+import './radiogroup.css';
+
+/**
+ * The props for the RadioGroup component.
+ */
+interface Option {
+	/**
+	 * The label of the option.
+	 */
+	label: string;
+	/**
+	 * The value of the option.
+	 */
+	value: string;
+	/**
+	 * Whether the option is disabled.
+	 */
+	disabled?: boolean;
+}
+
+/**
+ * The props for the RadioGroup component.
+ */
+interface Props {
+	/**
+	 * The label of the radio group.
+	 */
+	label: string;
+	/**
+	 * The color of the radio group. Defaults to `default`.
+	 */
+	color?: Omit<StudioCMSColorway, 'default'>;
+	/**
+	 * The default value of the radio group. Needs to be one of the values in the options.
+	 */
+	defaultValue?: string;
+	/**
+	 * The options to display in the radio group.
+	 */
+	options: Option[];
+	/**
+	 * Whether the radio group is disabled. Defaults to `false`.
+	 */
+	disabled?: boolean;
+	/**
+	 * The name of the radio group.
+	 */
+	name?: string;
+	/**
+	 * Whether the radio group is required. Defaults to `false`.
+	 */
+	isRequired?: boolean;
+	/**
+	 * Whether the radio group is horizontal. Defaults to `false`.
+	 */
+	horizontal?: boolean;
+	/**
+	 * Additional classes to apply to the radio group.
+	 */
+	class?: string;
+}
+
+const {
+	label,
+	color = 'primary',
+	defaultValue,
+	options,
+	disabled = false,
+	isRequired = false,
+	horizontal = false,
+	name = generateID('radio'),
+	class: className,
+} = Astro.props;
+---
+
+<div 
+  class="sui-radio-container"
+  class:list={[
+    disabled && "disabled",
+    horizontal && "horizontal",
+    color,
+    className
+  ]}
+>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <div class="sui-radio-inputs" role="radiogroup">
+    {options.map(({ label, value, disabled: individuallyDisabled }, i) => (
+      <label
+        for={value}
+        class="sui-radio-label"
+        class:list={[ individuallyDisabled && "disabled" ]}
+      >
+        <div class="sui-radio-box-container">
+          <div 
+            class="sui-radio-box" 
+            role="radio" 
+            tabindex={i === 0 ? 0 : -1} 
+            aria-checked={value === defaultValue}
+            aria-label={label}
+          />
+        </div>
+        <input 
+          class="sui-radio-toggle"
+          type="radio" 
+          value={value} 
+          id={value} 
+          name={name} 
+          checked={value === defaultValue} 
+          disabled={disabled || individuallyDisabled}
+          required={isRequired}
+        />
+        <span>{label}</span>
+      </label>
+    ))}
+  </div>
+</div>
+<script>
+	import 'studiocms:ui/scripts/radiogroup'
+</script>

package/dist/components/RadioGroup/radiogroup.css

@@ -0,0 +1,96 @@
+.sui-radio-container {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+.sui-radio-container.disabled {
+  opacity: 0.5;
+  color: hsl(var(--text-muted));
+}
+.sui-radio-label.disabled {
+  opacity: 0.5;
+  color: hsl(var(--text-muted));
+  pointer-events: none;
+}
+.req-star {
+  color: hsl(var(--danger-base));
+  font-weight: 700;
+}
+.sui-radio-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: .75rem;
+}
+.sui-radio-container.horizontal .sui-radio-inputs {
+  flex-direction: row;
+}
+.sui-radio-label {
+  display: flex;
+  flex-direction: row;
+  gap: .5rem;
+  position: relative;
+  align-items: center;
+}
+.sui-radio-label:hover .sui-radio-box {
+  outline-color: hsl(var(--default-hover));
+}
+.sui-radio-container:not(.disabled) .sui-radio-label:active .sui-radio-box {
+  outline-color: hsl(var(--default-active));
+  scale: 0.9;
+}
+.sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
+  background-color: hsl(var(--text-normal));
+  outline-color: hsl(var(--text-normal));
+}
+.sui-radio-container.primary .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
+  background-color: hsl(var(--primary-base));
+  outline-color: hsl(var(--primary-base));
+}
+.sui-radio-container.success .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
+  background-color: hsl(var(--success-base));
+  outline-color: hsl(var(--success-base));
+}
+.sui-radio-container.warning .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
+  background-color: hsl(var(--warning-base));
+  outline-color: hsl(var(--warning-base));
+}
+.sui-radio-container.danger .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
+  background-color: hsl(var(--danger-base));
+  outline-color: hsl(var(--danger-base));
+}
+.sui-radio-container.info .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
+  background-color: hsl(var(--info-base));
+  outline-color: hsl(var(--info-base));
+}
+.sui-radio-container.mono .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
+  background-color: hsl(var(--mono-base));
+  outline-color: hsl(var(--mono-base));
+}
+.sui-radio-box-container {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.sui-radio-box {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  outline: 1px solid hsl(var(--default-base));
+  outline-offset: 4px;
+  transition: all .15s ease;
+}
+.sui-radio-box:focus-visible {
+  outline-color: hsl(var(--text-normal)) !important;
+}
+.sui-radio-toggle {
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  opacity: 0;
+  margin: 0;
+  position: absolute;
+}

package/dist/components/RadioGroup/radiogroup.d.ts

@@ -0,0 +1 @@
+declare const AllRadioGroupContainers: NodeListOf<HTMLDivElement>;

package/dist/components/RadioGroup/radiogroup.js

@@ -0,0 +1,48 @@
+const AllRadioGroupContainers = document.querySelectorAll(".sui-radio-container");
+for (const element of AllRadioGroupContainers) {
+  if (element.dataset.initialized) continue;
+  element.dataset.initialized = "true";
+  const radioBoxes = element.querySelectorAll(".sui-radio-box");
+  let i = 0;
+  for (const radioBox of radioBoxes) {
+    radioBox.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const input = e.target.parentElement.parentElement.querySelector(".sui-radio-toggle");
+        if (input.disabled) return;
+        input.checked = true;
+      }
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        let nextRadioBox;
+        radioBoxes.forEach((box, index) => {
+          if (box === radioBox) nextRadioBox = radioBoxes[index + 1];
+        });
+        if (!nextRadioBox) return;
+        radioBox.tabIndex = -1;
+        nextRadioBox.tabIndex = 0;
+        nextRadioBox.focus();
+        nextRadioBox.click();
+      }
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        let previousRadioBox;
+        radioBoxes.forEach((box, index) => {
+          if (box === radioBox) previousRadioBox = radioBoxes[index - 1];
+        });
+        if (!previousRadioBox) return;
+        radioBox.tabIndex = -1;
+        previousRadioBox.tabIndex = 0;
+        previousRadioBox.focus();
+        previousRadioBox.click();
+      }
+    });
+    i++;
+  }
+  element.addEventListener("keydown", (e) => {
+    if (e.key !== "Enter") return;
+    const checkbox = element.querySelector(".sui-checkbox");
+    if (!checkbox) return;
+    checkbox.click();
+  });
+}

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

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import './row.css';
 
 /**
  * The props for the row component.
@@ -21,27 +22,3 @@ const { alignCenter, gapSize = 'md', ...props } = Astro.props;
 <div class="sui-row" class:list={[alignCenter && "align", gapSize]} {...props}>
   <slot />
 </div>
-<style>
-	.sui-row {
-		display: flex;
-		flex-direction: row;
-		position: relative;
-		flex-wrap: wrap;
-	}
-
-	.sui-row.align {
-		align-items: center;
-	}
-
-	.sui-row.sm {
-		gap: .5rem;
-	}
-
-	.sui-row.md {
-		gap: 1rem;
-	}
-
-	.sui-row.lg {
-		gap: 2rem;
-	}
-</style>

package/dist/components/Row/row.css

@@ -0,0 +1,18 @@
+.sui-row {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  flex-wrap: wrap;
+}
+.sui-row.align {
+  align-items: center;
+}
+.sui-row.sm {
+  gap: .5rem;
+}
+.sui-row.md {
+  gap: 1rem;
+}
+.sui-row.lg {
+  gap: 2rem;
+}

package/dist/components/SearchSelect/SearchSelect.astro

@@ -0,0 +1,135 @@
+---
+import { generateID } from '../../utils/generateID.js';
+import Icon from '../Icon/Icon.astro';
+import Input from '../Input/Input.astro';
+import './searchselect.css';
+
+/**
+ * An option in the select dropdown
+ */
+interface Option {
+	/**
+	 * The label of the option.
+	 */
+	label: string;
+	/**
+	 * The value of the option.
+	 */
+	value: string;
+	/**
+	 * Whether the option is disabled.
+	 */
+	disabled?: boolean;
+}
+
+/**
+ * The props for the search select component.
+ */
+interface Props {
+	/**
+	 * The label of the search select.
+	 */
+	label?: string;
+	/**
+	 * The default value of the search select. Needs to be one of the values in the options.
+	 */
+	defaultValue?: string;
+	/**
+	 * Additional classes to apply to the search select.
+	 */
+	class?: string;
+	/**
+	 * The name of the search select.
+	 */
+	name?: string;
+	/**
+	 * Whether the search select is required. Defaults to `false`.
+	 */
+	isRequired?: boolean;
+	/**
+	 * The options to display in the search select.
+	 */
+	options: Option[];
+	/**
+	 * Whether the search select is disabled. Defaults to `false`.
+	 */
+	disabled?: boolean;
+	/**
+	 * Whether the search select should take up the full width of its container.
+	 */
+	fullWidth?: boolean;
+	/**
+	 * The placeholder of the search select.
+	 */
+	placeholder?: string;
+}
+
+const {
+	label,
+	defaultValue,
+	class: className,
+	name = generateID('search-select'),
+	isRequired,
+	options = [],
+	disabled,
+	fullWidth,
+	placeholder,
+} = Astro.props;
+---
+
+<div
+    id={`${name}-container`}
+    class="sui-search-select-label"
+    class:list={[disabled && "disabled", className, fullWidth && "full"]}
+    data-options={JSON.stringify(options)}
+    data-id={name}
+>
+    <div class="sui-search-input-wrapper" id={`${name}-search-input-wrapper`}>
+        <Input
+            placeholder={options.find((x) => x.value === defaultValue)?.label || (placeholder || "Select")}
+            role='combobox'
+            aria-controls={`${name}-dropdown`}
+            aria-expanded="false"
+            label={label || ''}
+            isRequired={isRequired || false}
+        />
+        <Icon name="chevron-up-down" class="sui-search-select-indicator" width={24} height={24} />
+    </div>
+    <ul class="sui-search-select-dropdown" role="listbox" id={`${name}-dropdown`}>
+        {
+            options.map((x, i) => (
+                <li
+                    class="sui-search-select-option"
+                    role="option"
+                    value={x.value}
+                    class:list={[
+                        x.disabled && "disabled",
+                        i === 0 && 'focused',
+                    ]}
+                    id={defaultValue === x.value ? `${name}-selected` : ""}
+                    data-option-index={i}
+                    data-value={x.value}
+                >
+                    {x.label}
+                </li>
+            ))
+        }
+    </ul>
+    <select class="sui-hidden-select" id={name} name={name} required={isRequired} hidden tabindex="-1">
+        <option value={""}> Select </option>
+        {
+            options.map((x) => (
+                <option
+                    value={x.value}
+                    selected={defaultValue === x.value}
+                    disabled={x.disabled}
+                >
+                    {x.label}
+                </option>
+            ))
+        }
+    </select>
+</div>
+<script>
+import "studiocms:ui/scripts/searchselect"
+</script>

package/dist/components/SearchSelect/searchselect.css

@@ -0,0 +1,95 @@
+.sui-search-select-label {
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 200px;
+  position: relative;
+}
+.sui-search-select-label.full {
+  width: 100%;
+}
+.sui-search-select-label.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  color: hsl(var(--text-muted));
+}
+.label {
+  font-size: 14px;
+}
+.req-star {
+  color: hsl(var(--danger-base));
+  font-weight: 700;
+}
+.sui-search-select-dropdown {
+  position: absolute;
+  width: 100%;
+  border: 1px solid hsl(var(--border));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  border-radius: var(--radius-md);
+  background-color: hsl(var(--background-step-2));
+  overflow: hidden;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  display: none;
+  z-index: 90;
+  box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+}
+.sui-search-select-dropdown.above {
+  top: auto;
+  bottom: calc(100% - 18px + 0.25rem);
+}
+.sui-search-select-option,
+.empty-search-results {
+  padding: 0.5rem;
+  cursor: pointer;
+  font-size: 0.975em;
+  transition: all 0.15s ease;
+}
+.sui-search-select-option.disabled {
+  pointer-events: none;
+  color: hsl(var(--text-muted));
+}
+.sui-search-select-option:hover,
+.sui-search-select-option.focused {
+  background-color: hsl(var(--background-step-3));
+}
+.sui-search-select-option.selected {
+  background-color: hsl(var(--primary-base));
+  color: hsl(var(--text-inverted));
+  cursor: default;
+}
+.sui-hidden-select {
+  height: 0;
+  width: 0;
+  border: none;
+  outline: none;
+  position: absolute;
+  background-color: transparent;
+  pointer-events: none;
+  opacity: 0;
+}
+.sui-search-input-wrapper {
+  width: 100%;
+  position: relative;
+  height: fit-content;
+  cursor: pointer;
+}
+.sui-search-input-wrapper input {
+  padding-right: 2.5rem;
+}
+.sui-search-select-indicator {
+  position: absolute;
+  bottom: .675rem;
+  right: .675rem;
+}
+.sui-search-input-wrapper:has(input:focus) + .sui-search-select-dropdown {
+  display: flex;
+}
+.sui-search-select-dropdown.active,
+.sui-search-select-dropdown:has(> li:active) {
+  display: flex;
+}

package/dist/components/SearchSelect/searchselect.d.ts

@@ -0,0 +1,6 @@
+interface Option {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+declare const allSearchSelects: NodeListOf<HTMLDivElement>;