@consumidor-positivo/aurora 1.2.0 → 1.3.0

package/astro/SpecialButton/index.astro

@@ -0,0 +1,331 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconArrowRight from '../icons/default/IconArrowRight.astro'
+import IconCheck from '../icons/default/IconCheck.astro'
+import IconLoader from '../icons/default/IconLoader.astro'
+import IconSlash from '../icons/default/IconSlash.astro'
+import '../../dist/components/SpecialButton/styles.css'
+
+/**
+ * The React version takes `onConfirm`. Astro has no callback props: the
+ * controller emits `au:confirm` from the root (the `<button>` for 'press', the
+ * wrapper for 'slider') once the hold finishes or the knob passes 70% of the
+ * track, and then puts the component in the success state. The label is the
+ * default slot; the slider hint is the `hint` slot (falls back to
+ * `incompleteHint`). Every HTML attribute is forwarded to the
+ * `.au-special-button` element; `style` is not, because it carries the CSS
+ * variables the controller drives.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
+  /**
+   * Interaction mode: 'press' is hold-to-confirm (Figma: Press Button),
+   * 'slider' is swipe-to-confirm (Figma: Swipe Button).
+   */
+  type?: 'press' | 'slider'
+  disabled?: boolean
+  loading?: boolean
+  /** Renders already confirmed. The component also enters it after a completed interaction. */
+  success?: boolean
+  /** Press only: time in milliseconds the user must keep pressing to confirm. */
+  holdDuration?: number
+  /** Press only: stretches the button to fill the container width. */
+  expand?: 'x'
+  /** Slider only: visual variant (Figma: Swipe Button, ◇ Type Primary | Secondary). */
+  variant?: 'primary' | 'secondary'
+  /** Slider only: renders an empty skeleton placeholder. */
+  skeleton?: boolean
+  /**
+   * Slider only: accessible label for the draggable knob. Enter or Space on
+   * the focused knob confirms directly (keyboard alternative to the swipe).
+   */
+  knobAriaLabel?: string
+  /** Slider only: text shown below the button after an incomplete drag. */
+  incompleteHint?: string
+}
+
+const {
+  type = 'press',
+  disabled = false,
+  loading = false,
+  success = false,
+  holdDuration = 1500,
+  expand,
+  variant = 'primary',
+  skeleton = false,
+  knobAriaLabel = 'Arraste para confirmar',
+  incompleteHint = 'Arraste até o final para confirmar ação',
+  class: className,
+  ...rest
+} = Astro.props
+
+const isSlider = type === 'slider'
+---
+
+{
+  isSlider ? (
+    <div class="au-special-button-wrapper" data-element="au-special-button">
+      <div
+        class:list={[
+          'au-special-button',
+          'au-special-button--type-slider',
+          `au-special-button--variant-${variant}`,
+          disabled && 'au-special-button--disabled',
+          loading && 'au-special-button--loading',
+          success && 'au-special-button--success',
+          skeleton && 'au-special-button--skeleton',
+          className,
+        ]}
+        {...rest}
+        style="--au-special-button-progress: 0">
+        {loading && <IconLoader />}
+        {!loading && !skeleton && (
+          <Fragment>
+            <span class="au-special-button__label">
+              <slot>Slide to action</slot>
+            </span>
+            <button
+              type="button"
+              class="au-special-button__knob"
+              aria-label={knobAriaLabel}
+              disabled={disabled}>
+              {success ? (
+                <IconCheck />
+              ) : disabled ? (
+                <IconSlash />
+              ) : (
+                <IconArrowRight />
+              )}
+            </button>
+          </Fragment>
+        )}
+      </div>
+      {!loading && !skeleton && !success && (
+        <template data-au-special-button="hint">
+          <span class="au-special-button__hint" role="status">
+            <slot name="hint">{incompleteHint}</slot>
+          </span>
+        </template>
+      )}
+      {!loading && !skeleton && !success && !disabled && (
+        <template data-au-special-button="check">
+          <IconCheck />
+        </template>
+      )}
+    </div>
+  ) : (
+    <button
+      type="button"
+      class:list={[
+        'au-special-button',
+        'au-special-button--type-press',
+        disabled && 'au-special-button--disabled',
+        loading && 'au-special-button--loading',
+        success && 'au-special-button--success',
+        expand && `au-special-button--expand-${expand}`,
+        className,
+      ]}
+      disabled={disabled || loading}
+      aria-busy={loading ? 'true' : 'false'}
+      data-element="au-special-button"
+      {...rest}
+      style={`--au-special-button-duration: ${holdDuration}ms`}>
+      <span class="au-special-button__fill" aria-hidden="true" />
+      {loading ? (
+        <IconLoader />
+      ) : (
+        <span class="au-special-button__label">
+          {disabled && <IconSlash />}
+          <slot>Hold to confirm</slot>
+        </span>
+      )}
+    </button>
+  )
+}
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+  import type { ControllerContext } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const KNOB_SIZE = 40
+  const TRACK_PADDING = 4
+  // Figma (Behavior): from ~70% of the track the action already counts as
+  // confirmed and the button completes on its own.
+  const CONFIRM_THRESHOLD = 0.7
+  const COMPLETE_ANIMATION_MS = 400
+  const DEFAULT_HOLD_MS = 1500
+
+  const CLASS = {
+    holding: 'au-special-button--holding',
+    dragging: 'au-special-button--dragging',
+    completing: 'au-special-button--completing',
+    disabled: 'au-special-button--disabled',
+    loading: 'au-special-button--loading',
+    success: 'au-special-button--success',
+    skeleton: 'au-special-button--skeleton',
+  }
+
+  const isActivationKey = (key: string) => key === 'Enter' || key === ' '
+
+  function hasAny(element: Element, ...classes: string[]) {
+    return classes.some((name) => element.classList.contains(name))
+  }
+
+  function setupPress({ root, on, emit }: ControllerContext) {
+    // Read back from the CSS variable the markup already carries.
+    const holdDuration =
+      parseFloat(root.style.getPropertyValue('--au-special-button-duration')) ||
+      DEFAULT_HOLD_MS
+    let timer: number | undefined
+
+    const isHolding = () => root.classList.contains(CLASS.holding)
+    const isInteractive = () =>
+      !hasAny(root, CLASS.disabled, CLASS.loading, CLASS.success)
+
+    function startHold() {
+      if (!isInteractive() || isHolding()) return
+      root.classList.add(CLASS.holding)
+      timer = window.setTimeout(() => {
+        root.classList.remove(CLASS.holding)
+        root.classList.add(CLASS.success)
+        emit('au:confirm')
+      }, holdDuration)
+    }
+
+    function cancelHold() {
+      if (!isHolding()) return
+      window.clearTimeout(timer)
+      root.classList.remove(CLASS.holding)
+    }
+
+    on('pointerdown', startHold)
+    on('pointerup', cancelHold)
+    on('pointerleave', cancelHold)
+    on('pointercancel', cancelHold)
+
+    on('keydown', (event) => {
+      if (!isActivationKey(event.key) || event.repeat) return
+      event.preventDefault()
+      startHold()
+    })
+
+    on('keyup', (event) => {
+      if (isActivationKey(event.key)) cancelHold()
+    })
+  }
+
+  function setupSlider({ root, query, emit }: ControllerContext) {
+    const container = query<HTMLElement>('.au-special-button')
+    const knob = query<HTMLButtonElement>('.au-special-button__knob')
+    const hintTemplate = query<HTMLTemplateElement>(
+      'template[data-au-special-button="hint"]',
+    )
+    const checkTemplate = query<HTMLTemplateElement>(
+      'template[data-au-special-button="check"]',
+    )
+    // React renders the hint and the success icon only when needed: keep
+    // them in memory and take the templates out of the page.
+    const hintMarkup = hintTemplate?.content.firstElementChild ?? null
+    const checkIcon = checkTemplate?.content.firstElementChild ?? null
+    hintTemplate?.remove()
+    checkTemplate?.remove()
+    if (!container || !knob) return
+
+    let startX = 0
+    let dragX = 0
+    let hint: Element | null = null
+
+    const isDragging = () => container.classList.contains(CLASS.dragging)
+    const isInteractive = () =>
+      !hasAny(
+        container,
+        CLASS.disabled,
+        CLASS.loading,
+        CLASS.success,
+        CLASS.skeleton,
+        CLASS.completing,
+      )
+
+    function maxDrag() {
+      return container!.clientWidth - KNOB_SIZE - TRACK_PADDING * 2
+    }
+
+    function setDragX(value: number) {
+      dragX = value
+      const max = maxDrag()
+      knob!.style.transform = value > 0 ? `translateX(${value}px)` : ''
+      container!.style.setProperty(
+        '--au-special-button-progress',
+        String(max > 0 ? value / max : 0),
+      )
+    }
+
+    function showHint(isVisible: boolean) {
+      if (!isVisible) {
+        hint?.remove()
+        hint = null
+        return
+      }
+      if (hint || !hintMarkup) return
+      hint = hintMarkup.cloneNode(true) as Element
+      root.append(hint)
+    }
+
+    function confirm() {
+      container!.classList.add(CLASS.success)
+      showHint(false)
+      if (checkIcon) knob!.replaceChildren(checkIcon.cloneNode(true))
+      emit('au:confirm')
+    }
+
+    function complete() {
+      container!.classList.remove(CLASS.dragging)
+      container!.classList.add(CLASS.completing)
+      showHint(false)
+      setDragX(maxDrag())
+      window.setTimeout(() => {
+        container!.classList.remove(CLASS.completing)
+        setDragX(0)
+        confirm()
+      }, COMPLETE_ANIMATION_MS)
+    }
+
+    function endDrag() {
+      if (!isDragging()) return
+      container!.classList.remove(CLASS.dragging)
+      if (dragX > 0) showHint(true)
+      setDragX(0)
+    }
+
+    knob.addEventListener('pointerdown', (event) => {
+      if (!isInteractive()) return
+      container.classList.add(CLASS.dragging)
+      startX = event.clientX
+      knob.setPointerCapture?.(event.pointerId)
+    })
+
+    knob.addEventListener('pointermove', (event) => {
+      if (!isDragging()) return
+      const max = maxDrag()
+      const next = Math.min(Math.max(event.clientX - startX, 0), max)
+      setDragX(next)
+      if (max > 0 && next >= max * CONFIRM_THRESHOLD) complete()
+    })
+
+    knob.addEventListener('pointerup', endDrag)
+    knob.addEventListener('pointercancel', endDrag)
+
+    knob.addEventListener('keydown', (event) => {
+      if (!isInteractive() || !isActivationKey(event.key)) return
+      event.preventDefault()
+      confirm()
+    })
+  }
+
+  elementController('au-special-button', (context) => {
+    if (context.root.classList.contains('au-special-button--type-press')) {
+      setupPress(context)
+    } else {
+      setupSlider(context)
+    }
+  })
+</script>

package/astro/Spinner/index.astro

@@ -0,0 +1,75 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import { COLOR_BRAND_BLUE_40, COLOR_NEUTRAL_00 } from '@consumidor-positivo/aurora/astro/tokens'
+import '../../dist/components/Spinner/styles.css'
+
+const SIZE_MAP = {
+  small: 16,
+  medium: 20,
+  large: 32,
+}
+
+/**
+ * Same props as React; every HTML attribute is forwarded to the root `div`.
+ * The size is an inline `style`, so a `style` passed here is ignored.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
+  /**
+   * Token size (Figma: Spinner, ↕ Size). small = 16px, medium = 20px, large = 32px.
+   */
+  size?: 'small' | 'medium' | 'large'
+  /** White spinner for colored backgrounds (Figma: Negative). */
+  negative?: boolean
+}
+
+const {
+  size = 'medium',
+  negative = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+// Per instance, like React's `useId`: two spinners on the same page must not
+// share the gradient.
+const gradientId = `au-spinner-gradient-${crypto.randomUUID().slice(0, 8)}`
+const px = SIZE_MAP[size]
+const color = negative ? COLOR_NEUTRAL_00 : COLOR_BRAND_BLUE_40
+---
+
+<div
+  class:list={[
+    'au-spinner',
+    `au-spinner--size-${size}`,
+    negative && 'au-spinner--negative',
+    className,
+  ]}
+  role="status"
+  aria-live="polite"
+  aria-label="Carregando"
+  {...rest}
+  style={`width: ${px}px; height: ${px}px`}>
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 64 64"
+    width={px}
+    height={px}
+    color={color}>
+    <defs>
+      <linearGradient
+        id={gradientId}
+        gradientUnits="objectBoundingBox"
+        x1="10%"
+        y1="0%"
+        x2="90%"
+        y2="10%">
+        <stop offset="0" stop-color={color} stop-opacity="1"></stop>
+        <stop offset="1" stop-color={color} stop-opacity="0"></stop>
+      </linearGradient>
+    </defs>
+    <g stroke-width="7" stroke-linecap="round" fill="none">
+      <path stroke={color} d="M60,32 A28,28 0 1 1 4,32"></path>
+      <path d="M60,32 A28,28.5 0 1 0 4,32" stroke={`url(#${gradientId})`}></path>
+    </g>
+  </svg>
+</div>

package/astro/SubHeader/index.astro

@@ -0,0 +1,57 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Button from '../Button/index.astro'
+import Container from '../Container/index.astro'
+import Text from '../Text/index.astro'
+import IconChevronLeft from '../icons/default/IconChevronLeft.astro'
+import IconHelpCircle from '../icons/default/IconHelpCircle.astro'
+import '../../dist/components/SubHeader/styles.css'
+
+/**
+ * The React version takes `handleReturn` and `handleHelpInfo`. Astro has no
+ * callback props, so each button carries `data-au-sub-header="return"` /
+ * `="help"` for the page's own `<script>`. `showHelp` renders the help
+ * button, the same way React renders it when `handleHelpInfo` is passed.
+ * Every HTML attribute is forwarded to the root `div`.
+ */
+export type Props = HTMLAttributes<'div'> & {
+  title: string
+  /** Shows the help button as a `data-au-sub-header="help"` button. */
+  showHelp?: boolean
+}
+
+const { title, showHelp = false, class: className, ...rest } = Astro.props
+---
+
+<div
+  class:list={['au-sub-header', showHelp && 'au-sub-header--with-help', className]}
+  {...rest}>
+  <Container class="au-sub-header__container">
+    <Button
+      class="au-sub-header__button"
+      type="ghost"
+      aria-label="Voltar"
+      data-au-sub-header="return">
+      <IconChevronLeft />
+    </Button>
+    <Text
+      class="au-sub-header__title"
+      variant="heading-micro"
+      variantDesk="heading-small"
+      weight="bold"
+      as="div">
+      {title}
+    </Text>
+    {
+      showHelp && (
+        <Button
+          class="au-sub-header__button"
+          type="ghost"
+          aria-label="Ajuda"
+          data-au-sub-header="help">
+          <IconHelpCircle />
+        </Button>
+      )
+    }
+  </Container>
+</div>

package/astro/Switch/Card/index.astro

@@ -0,0 +1,69 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import PureSwitch from '../Pure/index.astro'
+import '../../../dist/components/Card/styles2.css'
+
+/**
+ * Differences from React: `isActive` is only the initial state, and the
+ * controller keeps the wrapper classes (`--active`, `--fade-out`) in sync with
+ * the checkbox. No callbacks: listen to the native `change` event, which
+ * bubbles to the root. `fadeOutDelayInSeconds` is dropped (React declares it
+ * but never reads it; the delay is the 1s in the stylesheet).
+ */
+export type Props = HTMLAttributes<'div'> & {
+  label: string
+  id: string
+  /** Initial state of the switch. */
+  isActive?: boolean
+  disabled?: boolean
+  /** Collapses and fades the card out once the switch is on. */
+  shouldFadeOutAfterActivate?: boolean
+}
+
+const {
+  label,
+  id,
+  isActive = false,
+  disabled = false,
+  shouldFadeOutAfterActivate = false,
+  class: className,
+  ...rest
+} = Astro.props
+---
+
+<div
+  class:list={['au-card-switch', className]}
+  data-element="au-card-switch"
+  data-fade-out={shouldFadeOutAfterActivate ? 'true' : undefined}
+  {...rest}>
+  <div
+    class:list={[
+      'au-card-switch-wrapper',
+      shouldFadeOutAfterActivate && isActive && 'au-card-switch-wrapper--fade-out',
+      isActive && 'au-card-switch-wrapper--active',
+    ]}>
+    <PureSwitch isActive={isActive} label={label} id={id} disabled={disabled} />
+  </div>
+</div>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const ACTIVE_CLASS = 'au-card-switch-wrapper--active'
+  const FADE_OUT_CLASS = 'au-card-switch-wrapper--fade-out'
+
+  elementController('au-card-switch', ({ root, query, on }) => {
+    const wrapper = query<HTMLElement>('.au-card-switch-wrapper')
+    const fadesOut = root.dataset.fadeOut === 'true'
+    // Controller setting only; React's root carries no such attribute.
+    root.removeAttribute('data-fade-out')
+
+    on('change', (event) => {
+      const input = event.target as HTMLInputElement | null
+      if (!wrapper || !input?.matches('.au-switch-checkbox')) return
+
+      wrapper.classList.toggle(ACTIVE_CLASS, input.checked)
+      wrapper.classList.toggle(FADE_OUT_CLASS, fadesOut && input.checked)
+    })
+  })
+</script>

package/astro/Switch/Pure/index.astro

@@ -0,0 +1,47 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../../dist/components/Pure/styles.css'
+
+/**
+ * Differences from React: the native checkbox is uncontrolled, `isActive` is
+ * only its initial state. No `activateCallBack`/`deactivateCallBack`: listen
+ * to the input's native `change` event (it bubbles to the root) and read
+ * `event.target.checked`.
+ */
+export type Props = HTMLAttributes<'div'> & {
+  /** Initial state of the switch. */
+  isActive?: boolean
+  label: string
+  /** Id of the native checkbox, tied to the label. */
+  id: string
+  disabled?: boolean
+}
+
+const {
+  isActive = false,
+  label,
+  id,
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props
+---
+
+<div class:list={['au-switch', className]} {...rest}>
+  <label for={id} class="au-switch-label">
+    <span>{label}</span>
+    <div class="au-switch-container">
+      <input
+        id={id}
+        type="checkbox"
+        class="au-switch-checkbox"
+        checked={isActive}
+        role="switch"
+        disabled={disabled}
+      />
+      <div class="au-switch-track">
+        <div class="au-switch-thumb"></div>
+      </div>
+    </div>
+  </label>
+</div>

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>