@consumidor-positivo/aurora 1.2.0 → 1.3.0

package/astro/form/Checkbox/Group/index.astro

@@ -0,0 +1,79 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../../../Text/index.astro'
+import CheckboxField from '../Field/index.astro'
+import type { Props as CheckboxFieldProps } from '../Field/index.astro'
+import FieldErrorMessage from '../../Field/ErrorMessage/index.astro'
+import '../../../../dist/components/Group/styles2.css'
+
+/**
+ * React clones its children to inject `name`, `error`, `defaultChecked`,
+ * `onChange` and `onFocus`. Astro cannot touch slotted children, so:
+ * - pass the fields as `options` and the group renders each
+ *   `Checkbox/Field` with the group's `name` and `error`, checked when its
+ *   `value` matches `defaultValue` (an option's own props win, like React;
+ *   also like React, an option without `value` is checked when there is no
+ *   `defaultValue`, since `undefined === undefined`);
+ * - or put your own `Checkbox/Field`s in the default slot, rendered after the
+ *   `options`; those must carry `name` (and `error`) themselves.
+ * No `onChange`/`onFocus`: the native `change`/`focusin` events bubble to the
+ * root. React's `onChange` hands back the checked options; read them from
+ * `root.querySelectorAll('input:checked')`.
+ */
+export type Props = HTMLAttributes<'div'> & {
+  options?: CheckboxFieldProps[]
+  name?: string
+  defaultValue?: string | number
+  orientation?: 'horizontal' | 'vertical'
+  label?: string
+  error?: boolean
+  errorMessage?: string
+  required?: boolean
+}
+
+const {
+  options = [],
+  name,
+  defaultValue,
+  orientation = 'vertical',
+  label,
+  error = false,
+  errorMessage,
+  required = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const safeName = name || `au-checkbox-group-${crypto.randomUUID().slice(0, 8)}`
+---
+
+<div
+  class:list={[
+    'au-checkbox-group',
+    orientation === 'horizontal' && 'au-checkbox-group--horizontal',
+    className,
+  ]}
+  {...rest}>
+  {
+    label && (
+      <Text variant="body-small" weight="semibold" color="secondary">
+        {label}{' '}
+        {required && <span class="au-checkbox-group__label--required">*</span>}
+      </Text>
+    )
+  }
+  <div class="au-checkbox-group__fields">
+    {
+      options.map((option) => (
+        <CheckboxField
+          name={safeName}
+          error={error}
+          checked={defaultValue === option.value}
+          {...option}
+        />
+      ))
+    }
+    <slot />
+  </div>
+  <FieldErrorMessage hasError={error} message={errorMessage} />
+</div>

package/astro/form/Datepicker/Calendar/index.astro

@@ -0,0 +1,53 @@
+---
+import Button from '../../../Button/index.astro'
+import CalendarHeader from '../CalendarHeader/index.astro'
+import '../../../../dist/components/index/styles.css'
+
+/**
+ * The calendar dialog of the Datepicker. The React version renders the grid
+ * with `react-aria-components` (`Calendar`, `CalendarGrid`, `CalendarCell`);
+ * this is the same markup, with the parts react-aria computes at render time
+ * (title, weekday names, the day cells and their `data-*` state) left for the
+ * Datepicker controller to fill, since they depend on the browser locale and
+ * on the focused month. Only rendered inside the Datepicker `<template>`.
+ */
+export type Props = {
+  minYear: number
+  maxYear: number
+  month: number
+  year: number
+}
+
+const { minYear, maxYear, month, year } = Astro.props
+
+const uid = crypto.randomUUID().slice(0, 8)
+// Stand in for the `useId()` react-aria gives the calendar and the grid.
+const calendarId = `au-datepicker-${uid}-calendar`
+const gridId = `au-datepicker-${uid}-grid`
+// The inline style of react-aria's `VisuallyHidden`.
+const visuallyHidden =
+  'border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap'
+---
+
+<div class="au-datepicker__calendar">
+  <div class="au-datepicker__calendar-backdrop"></div>
+  <div class="au-datepicker__calendar-card">
+    <div class="au-datepicker__calendar-base" data-rac="" id={calendarId} role="application">
+      <div style={visuallyHidden}><h2></h2></div>
+      <CalendarHeader minYear={minYear} maxYear={maxYear} month={month} year={year} />
+      <table id={gridId} role="grid" cellpadding="0" class="au-datepicker__calendar-grid">
+        <thead aria-hidden="true" class="react-aria-CalendarGridHeader">
+          <tr>
+            {Array.from({ length: 7 }).map(() => <th class="au-datepicker__calendar-weekday"></th>)}
+          </tr>
+        </thead>
+        <tbody class="react-aria-CalendarGridBody"></tbody>
+      </table>
+      <div style={visuallyHidden}><button tabindex="-1"></button></div>
+    </div>
+    <div class="au-datepicker__calendar-actions-dock">
+      <Button type="outlined" class="au-datepicker__calendar-cancel" expand="x">Cancelar</Button>
+      <Button expand="x">Confirmar</Button>
+    </div>
+  </div>
+</div>

package/astro/form/Datepicker/CalendarHeader/index.astro

@@ -0,0 +1,57 @@
+---
+import IconChevronLeft from '../../../icons/default/IconChevronLeft.astro'
+import IconChevronRight from '../../../icons/default/IconChevronRight.astro'
+import Segment from '../Segment/index.astro'
+import '../../../../dist/components/index/styles3.css'
+
+/**
+ * Month navigation of the Datepicker calendar: previous month, the month and
+ * year pickers, next month. Same markup as the React `CalendarHeader`; the
+ * Datepicker controller drives it.
+ */
+export type Props = {
+  /** Year of the first option in the year picker. */
+  minYear: number
+  /** Year of the last option in the year picker. */
+  maxYear: number
+  /** Month (1-12) and year shown when the calendar opens. */
+  month: number
+  year: number
+}
+
+const { minYear, maxYear, month, year } = Astro.props
+
+// Same lists as `useCalendarHeader`.
+const monthsOptions = [
+  'Janeiro',
+  'Fevereiro',
+  'Março',
+  'Abril',
+  'Maio',
+  'Junho',
+  'Julho',
+  'Agosto',
+  'Setembro',
+  'Outubro',
+  'Novembro',
+  'Dezembro',
+].map((label, index) => ({ label, value: index + 1 }))
+
+const yearsOptions = Array.from({ length: maxYear - minYear + 1 }, (_, index) => ({
+  label: String(minYear + index),
+  value: minYear + index,
+}))
+---
+
+<div class="au-datepicker__header">
+  <button class="au-datepicker__header-navigation-btn" aria-label="Mês anterior">
+    <IconChevronLeft />
+  </button>
+  <div class="au-datepicker__header-segments">
+    <Segment currentValue={month} mobileTitle="Escolha o mês" options={monthsOptions} />
+    <Segment currentValue={year} mobileTitle="Escolha o ano" options={yearsOptions} />
+  </div>
+  <button class="au-datepicker__header-navigation-btn" aria-label="Próximo">
+    <IconChevronRight />
+  </button>
+</div>

package/astro/form/Datepicker/Segment/index.astro

@@ -0,0 +1,53 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconChevronDown from '../../../icons/default/IconChevronDown.astro'
+import IconChevronLeft from '../../../icons/default/IconChevronLeft.astro'
+import IconX from '../../../icons/default/IconX.astro'
+import '../../../../dist/components/index/styles2.css'
+
+export type SegmentItem = { label: string; value: number }
+
+/**
+ * The month/year picker of the Datepicker calendar header. Static markup only:
+ * the Datepicker controller keeps the current label, the selected option and
+ * the open state in sync (React does it in `useSegment`).
+ */
+export type Props = HTMLAttributes<'div'> & {
+  mobileTitle: string
+  options: SegmentItem[]
+  currentValue: number
+}
+
+const { mobileTitle, options, currentValue, class: className, ...rest } = Astro.props
+const current = options.find((option) => option.value === currentValue)
+---
+
+<div class:list={['au-datepicker__segment', className]} {...rest}>
+  <button
+    type="button"
+    class="au-datepicker__segment-input"
+    role="combobox"
+    aria-haspopup="listbox"
+    aria-expanded="false">{current?.label}<IconChevronDown /></button>
+  <div class="au-datepicker__segment-list-holder">
+    <div class="au-datepicker__segment-list-header">
+      <button type="button" aria-label="Voltar"><IconChevronLeft /></button>
+      <h4 class="au-datepicker__segment-title">{mobileTitle}</h4>
+      <button type="button" aria-label="Fechar"><IconX /></button>
+    </div>
+    <ul class="au-datepicker__segment-list" role="listbox">
+      {
+        options.map((option) => (
+          <li
+            role="option"
+            aria-selected={option.value === currentValue ? 'true' : 'false'}
+            class:list={[
+              'au-datepicker__segment-list-item',
+              option.value === currentValue && 'au-datepicker__segment-list-item--active',
+            ]}
+            data-au-value={option.value}>{option.label}</li>
+        ))
+      }
+    </ul>
+  </div>
+</div>