@studiocms/ui 0.0.1 → 0.1.0

package/src/components/RadioGroup.astro

@@ -6,7 +6,7 @@ interface Option {
 	label: string;
 	value: string;
 	disabled?: boolean;
-};
+}
 
 interface Props {
 	label: string;
@@ -18,7 +18,7 @@ interface Props {
 	isRequired?: boolean;
 	horizontal?: boolean;
 	class?: string;
-};
+}
 
 const {
 	label,
@@ -34,7 +34,7 @@ const {
 ---
 
 <div 
-  class="radio-container"
+  class="sui-radio-container"
   class:list={[
     disabled && "disabled",
     horizontal && "horizontal",
@@ -45,18 +45,18 @@ const {
   <span>
     {label} <span class="req-star">{isRequired && "*"}</span>
   </span>
-  <div class="radio-inputs">
+  <div class="sui-radio-inputs">
     {options.map(({ label, value, disabled: individuallyDisabled }) => (
       <label
         for={value}
-        class="radio-label"
+        class="sui-radio-label"
         class:list={[ individuallyDisabled && "disabled" ]}
       >
-        <div class="radio-box-container">
-          <div class="radio-box" />
+        <div class="sui-radio-box-container">
+          <div class="sui-radio-box" />
         </div>
         <input 
-          class="radio-toggle" 
+          class="sui-radio-toggle" 
           type="radio" 
           value={value} 
           id={value} 
@@ -71,18 +71,18 @@ const {
   </div>
 </div>
 <style>
-  .radio-container {
+  .sui-radio-container {
     display: flex;
     flex-direction: column;
     gap: .5rem;
   }
 
-  .radio-container.disabled {
+  .sui-radio-container.disabled {
     opacity: 0.5;
     color: hsl(var(--text-muted));
   }
 
-  .radio-label.disabled {
+  .sui-radio-label.disabled {
     opacity: 0.5;
     color: hsl(var(--text-muted));
     pointer-events: none;
@@ -93,17 +93,17 @@ const {
     font-weight: 700;
   }
 
-  .radio-inputs {
+  .sui-radio-inputs {
     display: flex;
     flex-direction: column;
     gap: .75rem;
   }
 
-  .radio-container.horizontal .radio-inputs {
+  .sui-radio-container.horizontal .sui-radio-inputs {
     flex-direction: row;
   }
 
-  .radio-label {
+  .sui-radio-label {
     display: flex;
     flex-direction: row;
     gap: .5rem;
@@ -111,41 +111,41 @@ const {
     align-items: center;
   }
 
-  .radio-label:hover .radio-box {
+  .sui-radio-label:hover .sui-radio-box {
     outline-color: hsl(var(--default-hover));
   }
 
-  .radio-container:not(.disabled) .radio-label:active .radio-box {
+  .sui-radio-container:not(.disabled) .sui-radio-label:active .sui-radio-box {
     outline-color: hsl(var(--default-active));
     scale: 0.9;
   }
 
-  .radio-label:has(.radio-toggle:checked) .radio-box {
+  .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
     background-color: hsl(var(--text-normal));
     outline-color: hsl(var(--text-normal));
   }
 
-  .radio-container.primary .radio-label:has(.radio-toggle:checked) .radio-box {
+  .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));
   }
 
-  .radio-container.success .radio-label:has(.radio-toggle:checked) .radio-box {
+  .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));
   }
 
-  .radio-container.warning .radio-label:has(.radio-toggle:checked) .radio-box {
+  .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));
   }
 
-  .radio-container.danger .radio-label:has(.radio-toggle:checked) .radio-box {
+  .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));
   }
 
-  .radio-box-container {
+  .sui-radio-box-container {
     width: 20px;
     height: 20px;
     display: flex;
@@ -155,7 +155,7 @@ const {
     cursor: pointer;
   }
 
-  .radio-box {
+  .sui-radio-box {
     width: 12px;
     height: 12px;
     border-radius: 20px;
@@ -164,7 +164,7 @@ const {
     transition: all .15s ease;
   }
 
-  .radio-toggle {
+  .sui-radio-toggle {
     width: 0;
     height: 0;
     visibility: hidden;

package/src/components/Row.astro

@@ -4,35 +4,35 @@ import type { HTMLAttributes } from 'astro/types';
 interface Props extends HTMLAttributes<'div'> {
 	alignCenter?: boolean;
 	gapSize?: 'sm' | 'md' | 'lg';
-};
+}
 
 const { alignCenter, gapSize = 'md', ...props } = Astro.props;
 ---
 
-<div class="row" class:list={[alignCenter && "align", gapSize]} {...props}>
+<div class="sui-row" class:list={[alignCenter && "align", gapSize]} {...props}>
   <slot />
 </div>
 <style>
-	.row {
+	.sui-row {
 		display: flex;
 		flex-direction: row;
 		position: relative;
 		flex-wrap: wrap;
 	}
 
-	.row.align {
+	.sui-row.align {
 		align-items: center;
 	}
 
-	.row.sm {
+	.sui-row.sm {
 		gap: .5rem;
 	}
 
-	.row.md {
+	.sui-row.md {
 		gap: 1rem;
 	}
 
-	.row.lg {
+	.sui-row.lg {
 		gap: 2rem;
 	}
 </style>

package/src/components/SearchSelect.astro

@@ -7,7 +7,7 @@ interface Option {
 	label: string;
 	value: string;
 	disabled?: boolean;
-};
+}
 
 interface Props {
 	label?: string;
@@ -18,7 +18,8 @@ interface Props {
 	options: Option[];
 	disabled?: boolean;
 	fullWidth?: boolean;
-};
+	placeholder?: string;
+}
 
 const {
 	label,
@@ -29,29 +30,31 @@ const {
 	options = [],
 	disabled,
 	fullWidth,
+	placeholder,
 } = Astro.props;
 ---
 
 <div
     id={`${name}-container`}
-    class="search-select-label"
+    class="sui-search-select-label"
     class:list={[disabled && "disabled", className, fullWidth && "full"]}
 >
-    <label class="label" for={`${name}-search-select-btn`}>
-        {label}
-        <span class="req-star">{isRequired && "*"}</span>
-    </label>
-    <div class="search-input-wrapper" id={`${name}-search-input-wrapper`}>
+    <div class="sui-search-input-wrapper" id={`${name}-search-input-wrapper`}>
         <Input
-            placeholder={options.find((x) => x.value === defaultValue)?.label || "Select"}
+            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="search-select-indicator" width={24} height={24} />
+        <Icon name="chevron-up-down" class="sui-search-select-indicator" width={24} height={24} />
     </div>
-    <ul class="search-select-dropdown" role="listbox" id={`${name}-dropdown`}>
+    <ul class="sui-search-select-dropdown" role="listbox" id={`${name}-dropdown`}>
         {
             options.map((x, i) => (
                 <li
-                    class="search-select-option"
+                    class="sui-search-select-option"
                     role="option"
                     value={x.value}
                     class:list={[
@@ -67,7 +70,7 @@ const {
             ))
         }
     </ul>
-    <select class="hidden-select" id={name} name={name} required={isRequired}>
+    <select class="sui-hidden-select" id={name} name={name} required={isRequired}>
         <option value={""}> Select </option>
         {
             options.map((x) => (
@@ -116,12 +119,14 @@ const {
         };
 
         if (active) {
+            searchInput.ariaExpanded = false;
             dropdown.classList.remove("active", "above");
             active = false;
             return;
         }
 
         active = true;
+        searchInput.ariaExpanded = true;
 
         if (
             CustomRect.top >= 0 &&
@@ -300,7 +305,7 @@ const {
         for (const option of options) {
             const element = document.createElement('li');
             element.classList.add(...[
-                'search-select-option', 
+                'sui-search-select-option', 
                 option.disabled && "disabled",
                 focusIndex === i && 'focused',
             ].filter(Boolean));
@@ -322,7 +327,7 @@ const {
     }
 </script>
 <style is:global>
-    .search-select-label {
+    .sui-search-select-label {
         width: fit-content;
         display: flex;
         flex-direction: column;
@@ -331,11 +336,11 @@ const {
         position: relative;
     }
 
-    .search-select-label.full {
+    .sui-search-select-label.full {
         width: 100%;
     }
 
-    .search-select-label.disabled {
+    .sui-search-select-label.disabled {
         opacity: 0.5;
         pointer-events: none;
         color: hsl(var(--text-muted));
@@ -350,7 +355,7 @@ const {
         font-weight: 700;
     }
 
-    .search-select-dropdown {
+    .sui-search-select-dropdown {
         position: absolute;
         width: 100%;
         border: 1px solid hsl(var(--border));
@@ -368,34 +373,34 @@ const {
         box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
     }
 
-    .search-select-dropdown.above {
+    .sui-search-select-dropdown.above {
         top: auto;
         bottom: calc(100% - 18px + 0.25rem);
     }
 
-    .search-select-option, .empty-search-results {
+    .sui-search-select-option, .empty-search-results {
         padding: 0.5rem;
         cursor: pointer;
         font-size: 0.975em;
         transition: all 0.15s ease;
     }
 
-    .search-select-option.disabled {
+    .sui-search-select-option.disabled {
         pointer-events: none;
         color: hsl(var(--text-muted));
     }
 
-    .search-select-option:hover, .search-select-option.focused {
+    .sui-search-select-option:hover, .sui-search-select-option.focused {
         background-color: hsl(var(--background-step-3));
     }
 
-    .search-select-option.selected {
+    .sui-search-select-option.selected {
         background-color: hsl(var(--primary-base));
         color: hsl(var(--text-inverted));
         cursor: default;
     }
 
-    .hidden-select {
+    .sui-hidden-select {
         height: 0;
         width: 0;
         border: none;
@@ -406,25 +411,24 @@ const {
         opacity: 0;
     }
 
-    .search-input-wrapper {
+    .sui-search-input-wrapper {
         width: 100%;
         position: relative;
         height: fit-content;
         cursor: pointer;
     }
 
-    .search-select-indicator {
+    .sui-search-select-indicator {
         position: absolute;
-        top: calc(65% + 1px);
-        transform: translateY(-65%);
-        right: .5rem;
+        bottom: .75rem;
+        right: .75rem;
     }
 
-    .search-input-wrapper:has(input:focus) + .search-select-dropdown {
+    .sui-search-input-wrapper:has(input:focus) + .sui-search-select-dropdown {
         display: flex;
     }
 
-    .search-select-dropdown.active, .search-select-dropdown:has(> li:active) {
+    .sui-search-select-dropdown.active, .sui-search-select-dropdown:has(> li:active) {
         display: flex;
     }
 </style>

package/src/components/Select.astro

@@ -6,7 +6,7 @@ interface Option {
 	label: string;
 	value: string;
 	disabled?: boolean;
-};
+}
 
 interface Props {
 	label?: string;
@@ -17,7 +17,8 @@ interface Props {
 	options: Option[];
 	disabled?: boolean;
 	fullWidth?: boolean;
-};
+	placeholder?: string;
+}
 
 const {
 	label,
@@ -28,21 +29,26 @@ const {
 	options = [],
 	disabled,
 	fullWidth,
+	placeholder,
 } = Astro.props;
 ---
 
 <div
     id={`${name}-container`}
-    class="select-label"
+    class="sui-select-label"
     class:list={[disabled && "disabled", className, fullWidth && "full"]}
 >
-    <label class="label" for={`${name}-select-btn`}>
-        {label}
-        <span class="req-star">{isRequired && "*"}</span>
-    </label>
+    {label && (
+        <label class="label" for={`${name}-select-btn`}>
+            {label}
+            <span class="req-star">{isRequired && "*"}</span>
+        </label>
+    )}
     <button
-        class="select-button"
+        class="sui-select-button"
         role="combobox"
+        aria-controls={`${name}-dropdown`}
+        aria-expanded="false"
         id={`${name}-select-btn`}
         type="button"
     >
@@ -50,16 +56,16 @@ const {
             {
                 defaultValue
                     ? options.find((x) => x.value === defaultValue)?.label
-                    : "Select"
+                    : placeholder || "Select"
             }
         </span>
         <Icon name="chevron-up-down" width={24} height={24} />
     </button>
-    <ul class="select-dropdown" role="listbox" id={`${name}-dropdown`}>
+    <ul class="sui-select-dropdown" role="listbox" id={`${name}-dropdown`}>
         {
             options.map((x, i) => (
                 <li
-                    class="select-option"
+                    class="sui-select-option"
                     role="option"
                     value={x.value}
                     class:list={[
@@ -75,7 +81,7 @@ const {
             ))
         }
     </ul>
-    <select class="hidden-select" id={name} name={name} required={isRequired}>
+    <select class="sui-hidden-select" id={name} name={name} required={isRequired}>
         <option value={""}> Select </option>
         {
             options.map((x) => (
@@ -123,12 +129,14 @@ const {
         };
 
         if (active) {
+            button.ariaExpanded = false;
             dropdown.classList.remove("active", "above");
             active = false;
             return;
         }
 
         active = true;
+        button.ariaExpanded = true;
 
         if (
             CustomRect.top >= 0 &&
@@ -213,20 +221,21 @@ const {
         );
 </script>
 <style>
-    .select-label {
+    .sui-select-label {
         width: fit-content;
         display: flex;
         flex-direction: column;
         gap: 0.25rem;
         min-width: 200px;
         position: relative;
+        height: fit-content;
     }
 
-    .select-label.full {
+    .sui-select-label.full, .sui-select-label.full .sui-select-button {
         width: 100%;
     }
 
-    .select-label.disabled {
+    .sui-select-label.disabled {
         opacity: 0.5;
         pointer-events: none;
         color: hsl(var(--text-muted));
@@ -241,7 +250,7 @@ const {
         font-weight: 700;
     }
 
-    .select-button {
+    .sui-select-button {
         padding: 0.5rem 0.75rem 0.5rem 1rem;
         border-radius: 8px;
         border: 1px solid hsl(var(--border));
@@ -256,18 +265,18 @@ const {
         gap: 1rem;
     }
 
-    .select-button:hover {
+    .sui-select-button:hover {
         background: hsl(var(--background-step-3));
     }
 
-    .select-button.active,
-    .select-button:active,
-    .select-button:has(+ .select-dropdown.active) {
+    .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));
     }
 
-    .select-dropdown {
+    .sui-select-dropdown {
         position: absolute;
         width: 100%;
         border: 1px solid hsl(var(--border));
@@ -285,43 +294,43 @@ const {
         box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
     }
 
-    .select-dropdown.active {
+    .sui-select-dropdown.active {
         display: flex;
     }
 
-    .select-dropdown.above {
+    .sui-select-dropdown.above {
         top: auto;
         bottom: calc(100% - 18px + 0.25rem);
     }
 
-    .select-option {
+    .sui-select-option {
         padding: 0.5rem;
         cursor: pointer;
         font-size: 0.975em;
         transition: all 0.15s ease;
     }
 
-    .select-option.disabled {
+    .sui-select-option.disabled {
         pointer-events: none;
         color: hsl(var(--text-muted));
     }
 
-    .select-option:hover, .select-option:focus {
+    .sui-select-option:hover, .sui-select-option:focus {
         background-color: hsl(var(--background-step-3));
     }
 
-    .select-option:focus {
+    .sui-select-option:focus {
         outline: none;
         border: none;
     }
 
-    .select-option.selected {
+    .sui-select-option.selected {
         background-color: hsl(var(--primary-base));
         color: hsl(var(--text-inverted));
         cursor: default;
     }
 
-    .hidden-select {
+    .sui-hidden-select {
         height: 0;
         width: 0;
         border: none;

package/src/components/Sidebar/Double.astro

@@ -1,13 +1,13 @@
-<div id="sidebars" class="active inner">
-  <div id="sidebar-outer">
+<div id="sui-sidebars" class="active inner">
+  <div id="sui-sidebar-outer">
     <slot name="outer" />
   </div>
-  <div id="sidebar-inner">
+  <div id="sui-sidebar-inner">
     <slot name="inner" />
   </div>
 </div>
 <style>
-  #sidebars {
+  #sui-sidebars {
     --sidebars-container-width: calc((280px + 1px) * 2);
     display: flex;
     align-items: center;
@@ -19,11 +19,11 @@
     height: 100%;
   }
 
-  #sidebars.active {
+  #sui-sidebars.active {
     transform: translateX(0%);
   }
 
-  #sidebar-outer {
+  #sui-sidebar-outer {
     height: 100%;
     min-width: 280px;
     width: 280px;
@@ -39,7 +39,7 @@
     padding: 1.5rem;
   }
 
-  #sidebar-inner {
+  #sui-sidebar-inner {
     min-width: 280px;
     width: 280px;
     height: 100%;
@@ -56,7 +56,7 @@
   }
 
   @media screen and (max-width: 1200px) {
-    #sidebars {
+    #sui-sidebars {
       --sidebars-container-width: calc(280px + 1px);
     }
 
@@ -64,7 +64,7 @@
       display: block;
     }
 
-    #sidebars.inner {
+    #sui-sidebars.inner {
       #sidebar-outer,
       #sidebar-inner {
         transform: translateX(-100%);
@@ -73,7 +73,7 @@
   }
 
   @media screen and (max-width: 840px) {
-    #sidebars {
+    #sui-sidebars {
       transform: translateX(-100%);
       position: absolute;
       top: 0;
@@ -82,8 +82,8 @@
       width: 100%;
     }
 
-    #sidebar-outer,
-    #sidebar-inner {
+    #sui-sidebar-outer,
+    #sui-sidebar-inner {
       width: 100%;
       flex: 0 0 100%;
     }