free-astro-components 0.0.25 → 0.0.26

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

package/package.json

@@ -3,7 +3,7 @@
   "description": "A collection of free Astro components",
   "author": "Denis Ventura",
   "type": "module",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "exports": {
     ".": {
       "import": {

package/src/components/Checkbox.astro

@@ -101,4 +101,8 @@ const checkboxClasses = [
       color: rgb(var(--ac-danger));
     }
   }
+
+  .ac-checkbox-label {
+    transition: color 0.3s ease-in-out;
+  }
 </style>

package/src/components/Input.astro

@@ -6,8 +6,6 @@ import Icon from './Icon.astro'
 interface Props {
   icon?: string
   label?: string
-  placeholder?: string
-  disabled?: boolean
   helperText?: string
   status?: 'default' | 'error' | 'success'
   class?: string
@@ -16,8 +14,6 @@ interface Props {
 const {
   icon,
   label,
-  placeholder = '',
-  disabled = false,
   helperText = '',
   status = 'default',
   class: className,
@@ -43,12 +39,7 @@ const inputClasses = ['ac-input', statusClasses, className]
         <Icon icon="search" class="ac-input-icon ac-input-icon--left" />
       )
     }
-    <input
-      class={inputClasses}
-      placeholder={placeholder}
-      disabled={disabled}
-      {...props}
-    />
+    <input class={inputClasses} {...props} />
     {
       icon && props.type !== 'password' && (
         <Icon icon={icon} class="ac-input-icon ac-input-icon--right" />
@@ -218,7 +209,8 @@ const inputClasses = ['ac-input', statusClasses, className]
 </style>
 
 <script>
-  import { DOMLoaded, toggleInputPassword } from '../utils/utils.ts'
+  import { DOMLoaded } from '../utils/utils.ts'
+  import { toggleInputPassword } from '../utils/input'
 
   DOMLoaded(() => {
     const inputPasswordButtons = document.querySelectorAll(

package/src/components/Select.astro

@@ -0,0 +1,372 @@
+---
+import '../css/main.css'
+import Icon from './Icon.astro'
+
+interface Props {
+  label?: string
+  placeholder?: string
+  helperText?: string
+  status?: 'default' | 'error' | 'success'
+  options?: { label: string; value: string | number; selected?: boolean }[]
+  class?: string
+}
+
+const {
+  label,
+  placeholder = '',
+  helperText,
+  status = 'default',
+  options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+  ],
+  class: className,
+  ...props
+} = Astro.props
+
+const hasSelectedOption = options.some((option) => option.selected)
+
+const statusClasses = {
+  default: '',
+  error: 'ac-select--error',
+  success: 'ac-select--success',
+}[status]
+
+const selectClasses = [
+  'ac-select',
+  statusClasses,
+  className,
+  hasSelectedOption ? 'is-selected' : '',
+]
+  .filter(Boolean)
+  .join(' ')
+---
+
+<label class="ac-select-wrapper">
+  {label && <span class="ac-select-label">{label}</span>}
+
+  <div>
+    <select class={selectClasses} {...props}>
+      {
+        hasSelectedOption ? (
+          <option disabled hidden>
+            {placeholder}
+          </option>
+        ) : (
+          <option disabled selected hidden>
+            {placeholder}
+          </option>
+        )
+      }
+
+      {
+        options.map((option) => (
+          <option value={option.value} selected={option.selected}>
+            {option.label}
+          </option>
+        ))
+      }
+    </select>
+
+    <Icon icon="chevron-down" class="ac-select-icon" />
+
+    <div class="ac-select-popover">
+      <div>
+        <ul class="ac-select-list">
+          {
+            options.map((option) => (
+              <li>
+                <button disabled class={option.selected ? 'is-selected' : ''}>
+                  <span>{option.label}</span>
+                  <Icon icon="check" />
+                </button>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  {
+    helperText && (
+      <span class="ac-select-helper-text">
+        {status === 'error' && <Icon icon="warning" />}
+        {status === 'success' && <Icon icon="check-circle" />}
+        {helperText}
+      </span>
+    )
+  }
+</label>
+
+<style>
+  :root {
+    --ac-select-border-radius: var(--ac-rounded-xl);
+    --ac-select-padding: var(--ac-spacing-4);
+    --ac-select-height: var(--ac-spacing-12);
+  }
+
+  .ac-select-wrapper {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--ac-font-sans);
+    gap: var(--ac-spacing-2);
+
+    > div {
+      position: relative;
+    }
+
+    &:has(.ac-select.is-open) .ac-select-icon {
+      transform: translateY(-50%) rotate(180deg);
+    }
+
+    &:has(.ac-select.is-open) .ac-select-popover {
+      grid-template-rows: 1fr;
+    }
+
+    &:has(.ac-select:disabled) {
+      opacity: var(--ac-disabled-opacity);
+      pointer-events: none;
+    }
+
+    &:has(.ac-select--error) .ac-select-helper-text {
+      color: rgb(var(--ac-danger));
+    }
+
+    &:has(.ac-select--success) .ac-select-helper-text {
+      color: rgb(var(--ac-success));
+    }
+  }
+
+  .ac-select {
+    appearance: none;
+    background-color: rgb(var(--ac-white));
+    background-image: none;
+    border-color: rgb(var(--ac-gray-100));
+    border-radius: var(--ac-select-border-radius);
+    border-width: var(--ac-border-2);
+    color: rgb(var(--ac-gray-300));
+    cursor: pointer;
+    font-size: var(--ac-text-base);
+    font-weight: var(--ac-font-normal);
+    height: var(--ac-select-height);
+    line-height: var(--ac-leading-normal);
+    padding-left: var(--ac-select-padding);
+    padding-right: var(--ac-select-padding);
+    transition: all 0.3s ease-in-out;
+    width: 100%;
+
+    &.is-selected {
+      color: rgb(var(--ac-dark));
+    }
+
+    &.is-open,
+    &.is-open:hover {
+      border-color: var(--ac-primary-hover);
+    }
+
+    &:hover {
+      border-color: rgb(var(--ac-gray-200));
+    }
+
+    &:focus,
+    &.ac-select--error:focus,
+    &:focus:hover {
+      border-color: var(--ac-primary-hover);
+      outline: none;
+    }
+
+    &:disabled {
+      background-color: rgb(var(--ac-gray-100));
+    }
+
+    &.ac-select--error,
+    &.ac-select--error:hover {
+      border-color: rgb(var(--ac-danger));
+    }
+  }
+
+  .ac-select-label {
+    color: rgb(var(--ac-gray-400));
+    font-size: var(--ac-text-sm);
+  }
+
+  .ac-select-helper-text {
+    align-items: center;
+    color: rgb(var(--ac-gray-300));
+    display: flex;
+    font-size: var(--ac-text-sm);
+    gap: var(--ac-spacing-1);
+
+    svg {
+      flex-shrink: 0;
+      height: var(--ac-spacing-4);
+      width: var(--ac-spacing-4);
+    }
+  }
+
+  .ac-select-icon {
+    color: rgb(var(--ac-gray-300));
+    position: absolute;
+    right: var(--ac-select-padding);
+    top: 50%;
+    transform-origin: center;
+    transform: translateY(-50%);
+    transition: all 0.3s ease-in-out;
+  }
+
+  .ac-select-popover {
+    display: grid;
+    grid-template-rows: 0fr;
+    left: 0;
+    position: absolute;
+    position: absolute;
+    right: 0;
+    top: calc(100% + var(--ac-spacing-1));
+    transition: grid-template-rows 0.3s ease-in-out;
+    z-index: 1;
+
+    > div {
+      background-color: rgb(var(--ac-white));
+      border-radius: var(--ac-select-border-radius);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      list-style: none;
+      margin: 0;
+      overflow: hidden;
+      padding: 0;
+    }
+  }
+
+  .ac-select-list {
+    -ms-overflow-style: none;
+    border-color: rgb(var(--ac-gray-100));
+    border-radius: var(--ac-rounded-xl);
+    border-width: var(--ac-border-1);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ac-spacing-1);
+    list-style: none;
+    margin: 0;
+    max-height: 14.188rem;
+    overflow-y: auto;
+    padding: var(--ac-spacing-1);
+    scrollbar-width: none;
+
+    > li > button {
+      align-items: center;
+      background-color: rgb(var(--ac-white));
+      border-radius: var(--ac-rounded-lg);
+      color: rgb(var(--ac-gray-400));
+      cursor: pointer;
+      display: flex;
+      font-size: var(--ac-text-sm);
+      justify-content: space-between;
+      padding: var(--ac-spacing-2) var(--ac-select-padding);
+      transition: all 0.3s ease-in-out;
+      width: 100%;
+
+      > svg {
+        color: rgb(var(--ac-primary));
+        opacity: 0;
+        transition: all 0.3s ease-in-out;
+        width: var(--ac-spacing-6);
+      }
+
+      &:hover {
+        color: var(--ac-primary-hover);
+      }
+
+      &:hover,
+      &:focus {
+        background-color: rgba(var(--ac-primary), 0.1);
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &.is-selected {
+        background-color: rgba(var(--ac-primary), 0.1);
+        color: rgb(var(--ac-dark));
+
+        > svg {
+          opacity: 1;
+        }
+      }
+    }
+  }
+</style>
+
+<script>
+  import { DOMLoaded } from '../utils/utils'
+  import {
+    closeSelect,
+    openSelect,
+    selectOption,
+    handleDocumentMousedown,
+    handleDocumentKeydown,
+  } from '../utils/select.ts'
+
+  DOMLoaded(() => {
+    const selects = document.querySelectorAll('.ac-select')
+
+    selects.forEach((item) => {
+      const select = item as HTMLSelectElement
+      const selectWrapper = select.closest('.ac-select-wrapper')
+      const popover = selectWrapper?.querySelector(
+        '.ac-select-popover'
+      ) as HTMLElement
+      const options = popover?.querySelectorAll(
+        '.ac-select-list li button'
+      ) as NodeListOf<HTMLButtonElement>
+
+      let isOpen = false
+
+      const setIsOpen = (value: boolean) => {
+        isOpen = value
+      }
+
+      select.addEventListener('mousedown', (event) =>
+        openSelect(event, options, select).then(() => {
+          setIsOpen(true)
+        })
+      )
+
+      select.addEventListener('keydown', (event) => {
+        if (
+          event.key === 'Enter' ||
+          event.code === 'Space' ||
+          event.key === 'ArrowDown' ||
+          event.key === 'ArrowUp'
+        )
+          openSelect(event, options, select).then(() => {
+            setIsOpen(true)
+          })
+      })
+
+      document.addEventListener('mousedown', (event) => {
+        handleDocumentMousedown(
+          event,
+          options,
+          select,
+          popover,
+          isOpen,
+          setIsOpen
+        )
+      })
+
+      document.addEventListener('keydown', (event) => {
+        handleDocumentKeydown(event, options, select, isOpen, setIsOpen)
+      })
+
+      options?.forEach((option, index) => {
+        option.addEventListener('click', () => {
+          selectOption(index, options, option, select)
+          closeSelect(options, select)
+          setIsOpen(false)
+        })
+      })
+    })
+  })
+</script>

package/src/components/Textarea.astro

@@ -7,8 +7,6 @@ interface Props {
   icon?: string
   label?: string
   value?: string
-  placeholder?: string
-  disabled?: boolean
   helperText?: string
   status?: 'default' | 'error' | 'success'
   class?: string
@@ -18,8 +16,6 @@ const {
   icon,
   label,
   value,
-  placeholder = '',
-  disabled = false,
   helperText = '',
   status = 'default',
   class: className,
@@ -40,12 +36,7 @@ const inputClasses = ['ac-textarea', statusClasses, className]
 <label class="ac-textarea-wrapper">
   {label && <span class="ac-textarea-label">{label}</span>}
   <div>
-    <textarea
-      class={inputClasses}
-      placeholder={placeholder}
-      disabled={disabled}
-      {...props}>{value}</textarea
-    >
+    <textarea class={inputClasses} {...props}>{value}</textarea>
     {
       icon && (
         <Icon icon={icon} class="ac-textarea-icon ac-textarea-icon--right" />

package/src/index.js

@@ -5,3 +5,4 @@ export { default as Radio } from './components/Radio.astro'
 export { default as Switch } from './components/Switch.astro'
 export { default as Input } from './components/Input.astro'
 export { default as Textarea } from './components/Textarea.astro'
+export { default as Select } from './components/Select.astro'

package/src/pages/index.astro

@@ -2,6 +2,7 @@
 import Layout from '../layouts/Layout.astro'
 import Input from '../components/Input.astro'
 import Textarea from '../components/Textarea.astro'
+import Select from '../components/Select.astro'
 ---
 
 <Layout title="Welcome to Astro.">
@@ -136,8 +137,61 @@ import Textarea from '../components/Textarea.astro'
         <Textarea
           icon="star"
           label="Textarea label"
-          placeholder="Input with icon"
+          placeholder="Textarea with icon"
+          helperText="Helper text"
+        />
+      </div>
+
+      <h2>Select</h2>
+      <div class="controls-wrapper">
+        <Select
+          label="Select label"
+          placeholder="Select an option"
+          helperText="Helper text"
+        />
+        <Select
+          label="Select label"
+          placeholder="Select an option"
+          options={[
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2', selected: true },
+            { label: 'Option 3', value: '3' },
+          ]}
+          helperText="Helper text"
+        />
+        <Select
+          label="Select label"
+          placeholder="Select an option"
           helperText="Helper text"
+          disabled
+        />
+        <Select
+          label="Select label"
+          placeholder="Select an option"
+          options={[
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2', selected: true },
+            { label: 'Option 3', value: '3' },
+          ]}
+          helperText="Helper text"
+          disabled
+        />
+        <Select
+          label="Select label"
+          placeholder="Select an option"
+          helperText="Helper text"
+          status="error"
+        />
+        <Select
+          label="Select label"
+          placeholder="Select an option"
+          options={[
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2', selected: true },
+            { label: 'Option 3', value: '3' },
+          ]}
+          helperText="Helper text"
+          status="success"
         />
       </div>
     </div>
@@ -148,7 +202,7 @@ import Textarea from '../components/Textarea.astro'
   /*@import '../css/preflight.css';*/
 
   .content {
-    padding: var(--ac-spacing-8);
+    padding: var(--ac-spacing-8) var(--ac-spacing-8) 500px;
   }
 
   .controls-wrapper {

package/src/types/index.d.ts

@@ -24,4 +24,8 @@ export const Input: Input
 
 // Textarea component
 export type Textarea = typeof import('../index.js').Textarea
-export const Textarea: Textarea
+export const Textarea: Textarea
+
+// Select component
+export type Select = typeof import('../index.js').Select
+export const Select: Select

package/src/utils/input.ts

@@ -0,0 +1,9 @@
+export const toggleInputPassword = (button: Element, input: HTMLInputElement) => {
+  if (button.classList.contains('is-visible')) {
+    input.type = 'password'
+    button.classList.remove('is-visible')
+  } else {
+    input.type = 'text'
+    button.classList.add('is-visible')
+  }
+}

package/src/utils/select.ts

@@ -0,0 +1,108 @@
+export const openSelect = (
+  event: Event,
+  options: NodeListOf<HTMLButtonElement>,
+  select: HTMLSelectElement
+): Promise<void> => {
+  event.preventDefault()
+  select.classList.add('is-open')
+
+  return new Promise((resolve) => {
+    let hasSelectedOption = false
+
+    options.forEach((option: HTMLButtonElement) => {
+      option.removeAttribute('disabled')
+      if (option.classList.contains('is-selected')) {
+        hasSelectedOption = true
+        option.focus()
+      }
+    })
+
+    if (!hasSelectedOption && options.length > 0) {
+      options[0].focus()
+    }
+
+    setTimeout(() => resolve(), 0)
+  })
+}
+
+export const closeSelect = (
+  options: NodeListOf<HTMLButtonElement>,
+  select: HTMLSelectElement
+) => {
+  select.classList.remove('is-open')
+  options.forEach((option: HTMLButtonElement) => {
+    option.setAttribute('disabled', 'disabled')
+  })
+}
+
+export const selectOption = (
+  index: number,
+  options: NodeListOf<HTMLButtonElement>,
+  option: Element,
+  select: HTMLSelectElement
+) => {
+  select.selectedIndex = index + 1
+  select.classList.add('is-selected')
+  options.forEach((option: Element) => option.classList.remove('is-selected'))
+  option.classList.add('is-selected')
+}
+
+export const handleDocumentMousedown = (
+  event: MouseEvent,
+  options: NodeListOf<HTMLButtonElement>,
+  select: HTMLSelectElement,
+  popover: HTMLElement,
+  isOpen: boolean,
+  setIsOpen: (isOpen: boolean) => void
+) => {
+  if (!isOpen) return
+
+  const target = event.target as HTMLElement | null
+  const insideSelect = select.contains(target)
+  const insidePopover = popover?.contains(target)
+
+  if (!insideSelect && !insidePopover) {
+    closeSelect(options, select)
+    setIsOpen(false)
+  }
+}
+
+export const handleDocumentKeydown = (
+  event: KeyboardEvent,
+  options: NodeListOf<HTMLButtonElement>,
+  select: HTMLSelectElement,
+  isOpen: boolean,
+  setIsOpen: (isOpen: boolean) => void
+) => {
+  if (!isOpen) return
+
+  const activeElement = document.activeElement as HTMLElement
+  const focusedOption = Array.from(options).indexOf(
+    activeElement as HTMLButtonElement
+  )
+
+  if (event.key === 'Escape') {
+    closeSelect(options, select)
+    setIsOpen(false)
+  }
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    focusNextOption(focusedOption, options, 1)
+  }
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    focusNextOption(focusedOption, options, -1)
+  }
+}
+
+export const focusNextOption = (
+  currentIndex: number,
+  options: NodeListOf<HTMLButtonElement>,
+  direction: number
+) => {
+  if (currentIndex === -1) return
+  const nextIndex =
+    (currentIndex + direction + options.length) % options.length
+  options[nextIndex].focus()
+}

package/src/utils/utils.ts

@@ -4,14 +4,4 @@ export const DOMLoaded = (callback: () => void) => {
   } else {
     callback()
   }
-}
-
-export const toggleInputPassword = (button: Element, input: HTMLInputElement) => {
-  if (button.classList.contains('is-visible')) {
-    input.type = 'password'
-    button.classList.remove('is-visible')
-  } else {
-    input.type = 'text'
-    button.classList.add('is-visible')
-  }
 }