@studiocms/ui 0.0.1 → 0.3.0

package/src/components/Card.astro

@@ -1,28 +1,43 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 
+/**
+ * Props for the card component.
+ */
 type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
+	/**
+	 * The polymorphic component to render the card as. Defaults to `div`.
+	 */
 	as?: As;
-	class?: string;
+	/**
+	 * Whether the card should be full width. Defaults to `false`.
+	 */
 	fullWidth?: boolean;
+	/**
+	 * Whether the card should be full height. Defaults to `false`.
+	 */
 	fullHeight?: boolean;
+	/**
+	 * The variant of the card. Defaults to `default`.
+	 */
+	variant?: 'default' | 'filled';
 };
 
-const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = Astro.props;
+const { as: As = 'div', fullWidth, fullHeight, variant = 'default', ...props } = Astro.props;
 ---
-<As class="card" class:list={[fullWidth && "full-w", fullHeight && "full-h", className]} {...props}>
-  <div class="card-header">
+<As class="sui-card" class:list={[fullWidth && "full-w", fullHeight && "full-h", variant]} {...props}>
+  <div class="sui-card-header">
     <slot name="header" />
   </div>
-  <div class="card-body">
+  <div class="sui-card-body">
     <slot />
   </div>
-  <div class="card-footer">
+  <div class="sui-card-footer">
     <slot name="footer" />
   </div>
 </As>
 <style>
-  .card {
+  .sui-card {
     border: 1px solid hsl(var(--border));
     background-color: hsl(var(--background-base));
     border-radius: .5rem;
@@ -30,32 +45,41 @@ const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = As
     height: fit-content;
   }
 
-  .card.full-w {
+  .sui-card.filled {
+    background-color: hsl(var(--background-step-3));
+    border: none;
+  }
+
+  .sui-card.full-w {
     width: 100%;
   }
 
-  .card.full-h {
+  .sui-card.full-h {
     height: 100%;
   }
 
-  .card-header:has(*) {
+  .sui-card-header:has(*) {
     padding: 1rem 1rem 0rem 1rem;
     * {
       margin: 0;
     }
   }
 
-  .card-body {
+  .sui-card-body {
     padding: 1rem;
   }
 
-  .card-footer:has(*) {
+  .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) {
-    .card {
+    .sui-card {
       width: 100%;
     }
   }

package/src/components/Center.astro

@@ -1,9 +1,9 @@
 <!-- This was made for Jumper, to keep him happy <3 -->
-<div class="center">
+<div class="sui-center">
   <slot />
 </div>
 <style>
-  .center {
+  .sui-center {
     display: flex;
     align-items: center;
     justify-content: center;

package/src/components/Checkbox.astro

@@ -3,15 +3,39 @@ import Checkmark from '../icons/Checkmark.astro';
 import type { StudioCMSColorway } from '../utils/colors';
 import { generateID } from '../utils/generateID';
 
+/**
+ * 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',
@@ -30,7 +54,7 @@ const iconSizes = {
 };
 ---
 <label 
-  class="checkmark-label"
+  class="sui-checkmark-label"
   for={name}
   class:list={[
     disabled && "disabled",
@@ -38,9 +62,15 @@ const iconSizes = {
     size,
   ]}
 >
-  <div class="checkmark-container">
+  <div
+    class="sui-checkmark-container"
+    tabindex="0"
+    role="checkbox"
+    aria-checked={defaultChecked} 
+    aria-labelledby={`label-${name}`}
+    >
     <Checkmark
-      class={'checkmark'}
+      class={'sui-checkmark'}
       width={iconSizes[size]}
       height={iconSizes[size]}
     />
@@ -51,15 +81,48 @@ const iconSizes = {
       checked={defaultChecked}
       disabled={disabled}
       required={isRequired}
-      class="checkbox"
+      class="sui-checkbox"
+      hidden
     />
   </div>
-  <span>
+  <span id={`label-${name}`}>
     {label} <span class="req-star">{isRequired && "*"}</span>
   </span>
 </label>
+<script>
+  const elements = document.querySelectorAll<HTMLDivElement>('.sui-checkmark-container');
+  const checkbox = document.querySelectorAll<HTMLInputElement>('.sui-checkbox');
+
+  for (const element of elements) {
+    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<HTMLInputElement>('.sui-checkbox');
+        
+      if (!checkbox) return;
+
+      checkbox.click();
+    });
+  }
+
+  for (const box of checkbox) {
+    if (box.dataset.initialized) continue;
+
+    box.dataset.initialized = 'true';
+
+    box.addEventListener('change', (e) => {
+      box.parentElement!.ariaChecked = (e.target as HTMLInputElement).checked ? 'true' : 'false';
+    });
+  }
+</script>
 <style>
-  .checkmark-label {
+  .sui-checkmark-label {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -68,13 +131,13 @@ const iconSizes = {
     margin: .25rem 0;
   }
 
-  .checkmark-label.disabled {
+  .sui-checkmark-label.disabled {
     opacity: 0.5;
     pointer-events: none;
     color: hsl(var(--text-muted));
   }
 
-  .checkmark-container {
+  .sui-checkmark-container {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -82,57 +145,64 @@ const iconSizes = {
     border: 2px solid hsl(var(--default-base));
     border-radius: .5rem;
     cursor: pointer;
-    transition: all .15s ease;
+    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;
   }
 
-  .checkmark-label:hover .checkmark-container {
+  .sui-checkmark-label:hover .sui-checkmark-container {
     background-color: hsl(var(--default-hover));
   }
 
-  .checkmark-label:active .checkmark-container {
+  .sui-checkmark-label:active .sui-checkmark-container {
     background-color: hsl(var(--default-active));
     scale: 0.9;
   }
 
-  .checkmark-label.sm {
+  .sui-checkmark-label.sm {
     font-size: .875em;
   }
 
-  .checkmark-label.sm .checkmark-container {
+  .sui-checkmark-label.sm .sui-checkmark-container {
     width: 1.25rem;
     height: 1.25rem;
   }
 
-  .checkmark-label.md .checkmark-container {
+  .sui-checkmark-label.md .sui-checkmark-container {
     width: 1.5rem;
     height: 1.5rem;
   }
 
-  .checkmark-label.lg {
+  .sui-checkmark-label.lg {
     font-size: 1.125em;
   }
 
-  .checkmark-label.lg .checkmark-container {
+  .sui-checkmark-label.lg .sui-checkmark-container {
     width: 1.75rem;
     height: 1.75rem;
+    padding: .125rem;
   }
 
-  .primary .checkmark-container:has(.checkbox:checked) {
+  .primary .sui-checkmark-container:has(.sui-checkbox:checked) {
     border-color: hsl(var(--primary-base));
     background-color: hsl(var(--primary-base));
   }
 
-  .success .checkmark-container:has(.checkbox:checked) {
+  .success .sui-checkmark-container:has(.sui-checkbox:checked) {
     border-color: hsl(var(--success-base));
     background-color: hsl(var(--success-base));
   }
 
-  .warning .checkmark-container:has(.checkbox:checked) {
+  .warning .sui-checkmark-container:has(.sui-checkbox:checked) {
     border-color: hsl(var(--warning-base));
     background-color: hsl(var(--warning-base));
   }
 
-  .danger .checkmark-container:has(.checkbox:checked) {
+  .danger .sui-checkmark-container:has(.sui-checkbox:checked) {
     border-color: hsl(var(--danger-base));
     background-color: hsl(var(--danger-base));
   }
@@ -142,7 +212,7 @@ const iconSizes = {
     font-weight: 700;
   }
 
-  .checkbox {
+  .sui-checkbox {
     width: 0;
     height: 0;
     visibility: hidden;
@@ -151,29 +221,29 @@ const iconSizes = {
   }
 </style>
 <style is:global>
-  .checkmark polyline {
+  .sui-checkmark polyline {
     transition: all .15s ease;
     color: hsl(var(--text-normal));
   }
 
-  .primary .checkmark polyline {
+  .primary .sui-checkmark polyline {
     color: hsl(var(--text-inverted));
   }
 
-  .success .checkmark polyline {
+  .success .sui-checkmark polyline {
     color: hsl(var(--text-dark));
   }
 
-  .warning .checkmark polyline {
+  .warning .sui-checkmark polyline {
     color: hsl(var(--text-dark));
   }
 
-  .danger .checkmark polyline {
+  .danger .sui-checkmark polyline {
     color: hsl(var(--text-light));
   }
 
-  .checkmark-container:has(.checkbox:checked) {
-    .checkmark polyline {
+  .sui-checkmark-container:has(.sui-checkbox:checked) {
+    .sui-checkmark polyline {
       stroke-dashoffset: 44;
     }
   }

package/src/components/Divider.astro

@@ -1,18 +1,24 @@
 ---
+/**
+ * Props for the divider component.
+ */
 interface Props {
-  background?: 'background-base' | 'background-step-1' | 'background-step-2' | 'background-step-3';
-};
+	/**
+	 * The background color of the divider, used to "hide" content behind the slot. Defaults to `background-base`.
+	 */
+	background?: 'background-base' | 'background-step-1' | 'background-step-2' | 'background-step-3';
+}
 
 const { background = 'background-base' } = Astro.props;
 ---
-<div class="divide-container">
-  <div class="line" />
-  <div class="content" style={`background-color: hsl(var(--${background}));`}>
+<div class="sui-divider-container">
+  <hr class="sui-divider-line" />
+  <div class="sui-divider-content" style={`background-color: hsl(var(--${background}));`}>
     <slot />
   </div>
 </div>
 <style>
-  .divide-container {
+  .sui-divider-container {
     display: flex;
     width: 100%;
     align-items: center;
@@ -20,7 +26,7 @@ const { background = 'background-base' } = Astro.props;
     position: relative;
   }
 
-  .line {
+  .sui-divider-line {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -29,9 +35,10 @@ const { background = 'background-base' } = Astro.props;
     height: 1px;
     background-color: hsl(var(--border));
     z-index: 1;
+    border: none;
   }
 
-  .content {
+  .sui-divider-content {
     padding: .25rem .5rem;
     z-index: 2;
     color: hsl(var(--text-muted));

package/src/components/Dropdown/Dropdown.astro

@@ -3,50 +3,108 @@ import Icon from '../../utils/Icon.astro';
 import type { StudioCMSColorway } from '../../utils/colors';
 import type { HeroIconName } from '../../utils/iconType';
 
+/**
+ * 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;
-  icon?: HeroIconName;
-  href?: string;
-};
-
+	/**
+	 * 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';
-  offset?: number;
-};
-
-const { options, disabled = false, align = 'center', id, triggerOn = 'left', offset = 0 } = Astro.props;
+	/**
+	 * 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="dropdown-container"
+  class="sui-dropdown-container"
   class:list={[disabled && 'disabled']}
   data-align={align}
   id={`${id}-container`}
   data-trigger={triggerOn}
-  transition:persist transition:persist-props
+  transition:persist
+  transition:persist-props
 >
-  <div class="dropdown-toggle" id={`${id}-toggle-btn`}>
+  <div class="sui-dropdown-toggle" id={`${id}-toggle-btn`}>
     <slot />
   </div>
-  <ul class="dropdown above" class:list={[align]} role="listbox" id={`${id}-dropdown`} transition:persist transition:persist-props>
+  <ul 
+    class="sui-dropdown" 
+    class:list={[align]}
+    role="listbox" id={`${id}-dropdown`} 
+    transition:persist
+    transition:persist-props
+    aria-labelledby={`${id}-toggle-btn`}
+  >
     {options.map(({ value, disabled, color, label, icon, href }) => (
       <li
-        class="dropdown-option"
-        role="option"
+        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="dropdown-link">{label}</a>
+          <a href={href} class="sui-dropdown-link">{label}</a>
         ) : (
           <span>{label}</span>
         )}
@@ -55,18 +113,18 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
   </ul>
 </div>
 <style define:vars={{ offset: `${offset}px` }}>
-  .dropdown-toggle {
+  .sui-dropdown-toggle {
     width: fit-content;
   }
 
-  .dropdown-container {
+  .sui-dropdown-container {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: .25rem;
   }
 
-  .dropdown {
+  .sui-dropdown {
     position: absolute;
     list-style: none;
     margin: 0;
@@ -134,11 +192,11 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     }
   }
 
-  .dropdown.initialized {
+  .sui-dropdown.initialized {
     animation: pop-down .15s ease forwards;
   }
 
-  .dropdown.initialized.active {
+  .sui-dropdown.initialized.active {
     display: flex;
     border: 1px solid hsl(var(--border));
     height: auto;
@@ -147,36 +205,36 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     animation: pop-up .15s ease forwards;
   }
 
-  .dropdown.initialized.below {
+  .sui-dropdown.initialized.below {
     top: calc(100% + .25rem + var(--offset)) !important;
     bottom: auto;
 
     transform-origin: top center;
   }
 
-  .dropdown.below.start {
+  .sui-dropdown.below.start {
     transform-origin: top left;
   }
 
-  .dropdown.below.end {
+  .sui-dropdown.below.end {
     transform-origin: top right;
   }
 
-  .dropdown.above {
+  .sui-dropdown.above {
     top: auto;
     bottom: calc(100% + .25rem + var(--offset)) !important;
     transform-origin: bottom center;
   }
 
-  .dropdown.above.start {
+  .sui-dropdown.above.start {
     transform-origin: bottom left;
   }
 
-  .dropdown.above.end {
+  .sui-dropdown.above.end {
     transform-origin: bottom right;
   }
 
-  .dropdown-option {
+  .sui-dropdown-option {
     padding: .5rem .75rem;
     cursor: pointer;
     font-size: .975em;
@@ -187,67 +245,70 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     align-items: center;
     width: 100%;
     white-space: normal;
+    user-select: none;
   }
 
-  .dropdown-option:hover {
+  .sui-dropdown-option:hover, .sui-dropdown-option:focus, .sui-dropdown-option.focused {
     background-color: hsl(var(--background-step-3));
   }
 
-  .dropdown-option.has-href {
+  .sui-dropdown-option.has-href {
     padding: 0;
   }
 
-  .dropdown-link {
+  .sui-dropdown-link {
     padding: .5rem .75rem;
     width: 100%;
+    text-decoration: none;
+    color: hsl(var(--text-normal));
   }
 
-  .dropdown-option.primary {
+  .sui-dropdown-option.primary {
     color: hsl(var(--primary-base));
   }
 
-  .dropdown-option.primary:hover {
+  .sui-dropdown-option.primary:hover {
     background-color: hsl(var(--primary-base));
     color: hsl(var(--text-inverted));
   }
 
-  .dropdown-option.success {
+  .sui-dropdown-option.success {
     color: hsl(var(--success-base));
   }
 
-  .dropdown-option.success:hover {
+  .sui-dropdown-option.success:hover {
     background-color: hsl(var(--success-base));
     color: hsl(var(--text-dark));
   }
 
-  .dropdown-option.warning {
+  .sui-dropdown-option.warning {
     color: hsl(var(--warning-base));
   }
 
-  .dropdown-option.warning:hover {
+  .sui-dropdown-option.warning:hover {
     background-color: hsl(var(--warning-base));
     color: hsl(var(--text-dark));
   }
 
-  .dropdown-option.danger {
+  .sui-dropdown-option.danger {
     color: hsl(var(--danger-base));
   }
 
-  .dropdown-option.danger:hover {
+  .sui-dropdown-option.danger:hover {
     background-color: hsl(var(--danger-base));
     color: hsl(var(--text-light));
   }
 
-  .dropdown-option.disabled {
+  .sui-dropdown-option.disabled {
     pointer-events: none;
     color: hsl(var(--text-muted));
   }
 
-  .dropdown-option.end {
+  .sui-dropdown-option.end {
     justify-content: space-between;
   }
 
-  .dropdown-option.has-icon {
+  .sui-dropdown-option.has-icon {
     padding-left: .5rem;
   }
 </style>