@consumidor-positivo/aurora 1.1.0 → 1.3.0

package/astro/Tabs/index.astro

@@ -0,0 +1,142 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../dist/components/Tabs/styles.css'
+
+export type TabItem = {
+  tab: string
+  title: string
+}
+
+export type Props = HTMLAttributes<'div'> & {
+  tabs: TabItem[]
+  /** Hides the tab bar and renders only the panels. */
+  areTabsHidden?: boolean
+  initialTab?: string
+}
+
+const {
+  tabs,
+  areTabsHidden = false,
+  initialTab,
+  class: className,
+  ...rest
+} = Astro.props
+
+const activeTab = initialTab ?? tabs[0]?.tab
+---
+
+<div
+  class:list={['au-tabs-root', className]}
+  data-element="au-tabs"
+  data-active-tab={activeTab}
+  {...rest}>
+  {
+    !areTabsHidden && (
+      <div class="au-tabs">
+        <div class="au-tabs__container">
+          <div class="au-tabs__btns" role="tablist">
+            {tabs.map((item) => (
+              <button
+                type="button"
+                role="tab"
+                id={`au-tab-${item.tab}`}
+                data-tab={item.tab}
+                aria-selected={item.tab === activeTab ? 'true' : 'false'}
+                aria-controls={`au-tabpanel-${item.tab}`}
+                tabindex={item.tab === activeTab ? 0 : -1}
+                class:list={[
+                  'au-tabs__btns-option',
+                  item.tab === activeTab && 'au-tabs__btns-option--active',
+                ]}>
+                {item.title}
+              </button>
+            ))}
+            <div
+              class="au-tabs__btns-indicator"
+              aria-hidden="true"
+              style="left: 0; width: 0"
+            />
+          </div>
+          {Astro.slots.has('right') && <slot name="right" />}
+        </div>
+      </div>
+    )
+  }
+  <slot />
+</div>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const ACTIVE_CLASS = 'au-tabs__btns-option--active'
+  const NAV_KEYS = ['ArrowLeft', 'ArrowRight', 'Home', 'End'] as const
+
+  type NavKey = (typeof NAV_KEYS)[number]
+
+  const isNavKey = (key: string): key is NavKey =>
+    NAV_KEYS.includes(key as NavKey)
+
+  elementController('au-tabs', ({ root, query, queryAll, on, emit }) => {
+    const buttons = queryAll<HTMLButtonElement>('[role="tab"]')
+    const panels = queryAll<HTMLElement>('[role="tabpanel"]')
+    const indicator = query<HTMLElement>('.au-tabs__btns-indicator')
+
+    function moveIndicator() {
+      const active = query<HTMLElement>(`.${ACTIVE_CLASS}`)
+      if (!indicator || !active) return
+      indicator.style.left = `${active.offsetLeft}px`
+      indicator.style.width = `${active.offsetWidth}px`
+    }
+
+    function activate(tab?: string) {
+      if (!tab || root.dataset.activeTab === tab) return
+      root.dataset.activeTab = tab
+
+      buttons.forEach((button) => {
+        const isActive = button.dataset.tab === tab
+        button.classList.toggle(ACTIVE_CLASS, isActive)
+        button.setAttribute('aria-selected', String(isActive))
+        button.tabIndex = isActive ? 0 : -1
+      })
+
+      panels.forEach((panel) => {
+        panel.hidden = panel.dataset.tab !== tab
+      })
+
+      moveIndicator()
+      emit('au:tabchange', { tab })
+    }
+
+    on('click', (event) => {
+      const target = event.target as Element | null
+      const button = target?.closest<HTMLButtonElement>('[role="tab"]')
+      if (!button) return
+      activate(button.dataset.tab)
+    })
+
+    on('keydown', (event) => {
+      if (!isNavKey(event.key)) return
+
+      const current = buttons.indexOf(
+        document.activeElement as HTMLButtonElement,
+      )
+      if (current === -1) return
+
+      event.preventDefault()
+
+      const last = buttons.length - 1
+      const next: Record<NavKey, number> = {
+        ArrowLeft: current === 0 ? last : current - 1,
+        ArrowRight: current === last ? 0 : current + 1,
+        Home: 0,
+        End: last,
+      }
+
+      buttons[next[event.key]]?.focus()
+    })
+
+    on('global:resize', moveIndicator)
+
+    moveIndicator()
+  })
+</script>

package/astro/Text/index.astro

@@ -0,0 +1,75 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import '../../dist/components/Text/styles.css'
+
+type TextVariant =
+  | 'display-large'
+  | 'display-medium'
+  | 'display-small'
+  | 'heading-big'
+  | 'heading-large'
+  | 'heading-medium'
+  | 'heading-small'
+  | 'heading-minimum'
+  | 'heading-micro'
+  | 'heading-nano'
+  | 'body-big'
+  | 'body-large'
+  | 'body-medium'
+  | 'body-small'
+  | 'caption'
+
+type TextWeight = 'bold' | 'semibold' | 'medium' | 'regular' | 'light'
+
+type TextColor = 'common' | 'secondary' | 'white'
+
+export type Props = Omit<HTMLAttributes<'p'>, 'color'> & {
+  as?: HTMLTag
+  color?: TextColor
+  variant?: TextVariant
+  variantDesk?: TextVariant
+  weight?: TextWeight
+  /** Raw HTML string — the Astro counterpart of `dangerouslySetInnerHTML`. */
+  html?: string
+  /** Anchor attributes, for `as="a"`. */
+  href?: string
+  target?: string
+  rel?: string
+}
+
+const {
+  as = 'p',
+  color = 'common',
+  variant = 'body-medium',
+  variantDesk,
+  weight = 'regular',
+  html,
+  class: className,
+  // Astro passes `class:list` on a component through as a raw prop; without
+  // picking it up here it would land in `...rest` and overwrite the classes
+  // this component builds.
+  'class:list': classList,
+  ...rest
+} = Astro.props
+
+const Tag = as
+const classes = [
+  'au-text',
+  `au-text--${variant}`,
+  variantDesk && `au-text--desk-${variantDesk}`,
+  `au-text--color-${color}`,
+  `au-text--weight-${weight}`,
+  className,
+  classList,
+]
+---
+
+{
+  html ? (
+    <Tag class:list={classes} set:html={html} {...rest} />
+  ) : (
+    <Tag class:list={classes} {...rest}>
+      <slot />
+    </Tag>
+  )
+}

package/astro/Tooltip/index.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../dist/components/Tooltip/styles.css'
+
+/**
+ * Same props as React. The trigger (React `children`) is the default slot;
+ * every HTML attribute is forwarded to the container.
+ */
+export type Props = HTMLAttributes<'div'> & {
+  text: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** Keeps the tooltip visible without hover. */
+  open?: boolean
+}
+
+const {
+  text,
+  position = 'top',
+  open = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+// Per instance, like React's `useId`.
+const tooltipId = `au-tooltip-${crypto.randomUUID().slice(0, 8)}`
+---
+
+<div
+  class:list={[
+    'tooltip-container',
+    `tooltip-${position}`,
+    open && 'tooltip-open',
+    className,
+  ]}
+  aria-describedby={tooltipId}
+  {...rest}>
+  <slot /><div id={tooltipId} class="tooltip" role="tooltip">{text}</div>
+</div>

package/astro/form/Checkbox/Field/index.astro

@@ -0,0 +1,68 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import { COLOR_NEUTRAL_00 } from '@consumidor-positivo/aurora/astro/tokens'
+import IconCheck from '../../../icons/default/IconCheck.astro'
+import FieldErrorMessage from '../../Field/ErrorMessage/index.astro'
+import '../../../../dist/components/Field/styles.css'
+
+/**
+ * Same as React: every attribute except `style` and `class` goes to the
+ * native `<input type="checkbox">` (`name`, `value`, `checked`, `required`,
+ * `data-*`…), so listen to its native `change` event instead of `onChange`.
+ * Like React's `className`, `class` lands on the input and replaces
+ * `au-checkbox__input`.
+ * A string `label` is rendered as HTML, like React's `dangerouslySetInnerHTML`;
+ * for markup built from components, use the `label` slot.
+ */
+export type Props = Omit<HTMLAttributes<'input'>, 'type'> & {
+  label?: string
+  error?: boolean
+  errorMessage?: string
+}
+
+const {
+  label,
+  error = false,
+  errorMessage,
+  disabled = false,
+  id,
+  style,
+  class: className,
+  ...rest
+} = Astro.props
+
+// The React version falls back to `Math.random()`; here it is fixed at render.
+const safeId = id ?? `au-checkbox-${crypto.randomUUID().slice(0, 8)}`
+const hasLabelSlot = Astro.slots.has('label')
+---
+
+<div
+  class:list={[
+    'au-checkbox',
+    error && 'au-checkbox--error',
+    disabled && 'au-checkbox--disabled',
+  ]}
+  style={style}>
+  <label for={safeId} class="au-checkbox__holder">
+    <input
+      class={className ?? 'au-checkbox__input'}
+      type="checkbox"
+      id={safeId}
+      disabled={disabled}
+      {...rest}
+    />
+    <span class="au-checkbox__check">
+      <IconCheck rawColor={COLOR_NEUTRAL_00} size="small" />
+    </span>
+    {
+      hasLabelSlot ? (
+        <span class="au-checkbox__label">
+          <slot name="label" />
+        </span>
+      ) : (
+        <span class="au-checkbox__label" set:html={label ?? ''} />
+      )
+    }
+  </label>
+  <FieldErrorMessage hasError={error} message={errorMessage} />
+</div>

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>