@maestro-js/components 1.0.0-alpha.0

package/src/components/date-range-picker.tsx

@@ -0,0 +1,290 @@
+import * as React from 'react'
+import {
+  DateRangePicker as AriaDateRangePicker,
+  DateInput,
+  DateSegment,
+  Button,
+  Dialog,
+  RangeCalendar,
+  CalendarGrid,
+  CalendarCell,
+  Heading,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  CalendarGridBody,
+  I18nProvider
+} from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import { CalendarDate, parseDate } from '@internationalized/date'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { Icon } from './icon'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+
+export type DateRange = {
+  start: string | null
+  end: string | null
+}
+
+export type DateRangePickerProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  warningMessage?: React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<DateRange>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management
+  value?: DateRange
+  defaultValue?: DateRange
+  onChange?: (value: DateRange) => void
+
+  // Date specific (ISO date strings)
+  minValue?: string
+  maxValue?: string
+  presetRanges?: Array<{
+    label: string
+    start: string
+    end: string
+  }>
+
+  // Calendar display
+  locale?: string
+  shape?: 'rectangle' | 'oval'
+}
+
+export function DateRangePicker(props: DateRangePickerProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+
+  // Controlled state management
+  const [value, setValue] = HeadlessForm.useControlledState<DateRange>(
+    props.value,
+    props.defaultValue ?? { start: null, end: null },
+    props.onChange
+  )
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        // Focus handled by AriaDateRangePicker
+      }
+    },
+    hiddenInputRef as React.RefObject<HTMLInputElement>
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  // Convert ISO strings to CalendarDate for aria components
+  const ariaValue = React.useMemo(() => {
+    if (!value.start || !value.end) return null
+    try {
+      return {
+        start: parseDate(value.start),
+        end: parseDate(value.end)
+      }
+    } catch {
+      return null
+    }
+  }, [value])
+
+  const minDate = React.useMemo(() => {
+    if (!props.minValue) return undefined
+    try {
+      return parseDate(props.minValue)
+    } catch {
+      return undefined
+    }
+  }, [props.minValue])
+
+  const maxDate = React.useMemo(() => {
+    if (!props.maxValue) return undefined
+    try {
+      return parseDate(props.maxValue)
+    } catch {
+      return undefined
+    }
+  }, [props.maxValue])
+
+  const handleRangeChange = (range: { start: CalendarDate; end: CalendarDate } | null) => {
+    if (!range) {
+      setValue({ start: null, end: null })
+    } else {
+      setValue({
+        start: range.start.toString(),
+        end: range.end.toString()
+      })
+    }
+    commitValidation()
+  }
+
+  const handlePresetClick = (preset: { start: string; end: string }) => {
+    setValue({ start: preset.start, end: preset.end })
+    commitValidation()
+  }
+
+  return (
+    <I18nProvider locale={props.locale ?? 'en'}>
+      <div className="relative">
+        {/* Hidden inputs for form submission */}
+        <HeadlessForm.HiddenInput
+          ref={hiddenInputRef}
+          name={props.name ? `${props.name}.start` : undefined}
+          value={value.start || ''}
+          form={props.form}
+        />
+        <HeadlessForm.HiddenInput
+          name={props.name ? `${props.name}.end` : undefined}
+          value={value.end || ''}
+          form={props.form}
+        />
+
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+        {/* Preset ranges */}
+        {props.presetRanges && props.presetRanges.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-2">
+            {props.presetRanges.map((preset, i) => (
+              <button
+                key={i}
+                type="button"
+                onClick={() => handlePresetClick(preset)}
+                disabled={props.isDisabled}
+                className="px-2 py-1 text-xs rounded border border-neutral-200 hover:bg-neutral-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {preset.label}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Date range picker */}
+        <AriaDateRangePicker
+          aria-labelledby={labelId}
+          value={ariaValue}
+          onChange={handleRangeChange}
+          minValue={minDate}
+          maxValue={maxDate}
+          isDisabled={props.isDisabled}
+          isReadOnly={props.isReadonly}
+          isInvalid={isInvalid}
+          isRequired={props.isRequired}
+        >
+          <FormFieldComponents.FieldGroup
+            isDisabled={props.isDisabled}
+            isReadonly={props.isReadonly}
+            isInvalid={isInvalid}
+            hasWarning={hasWarning}
+            shape={props.shape}
+            className="flex"
+          >
+            <div className="flex items-center justify-start flex-1 px-3 py-2 text-sm">
+              <DateInput slot="start" className="flex">
+                {(segment) => (
+                  <DateSegment
+                    segment={segment}
+                    className={tw('px-0.5 tabular-nums outline-none rounded-sm', 'focus:bg-primary-500 focus:text-white')}
+                  />
+                )}
+              </DateInput>
+              <span className="mx-2 text-neutral-400">&ndash;</span>
+              <DateInput slot="end" className="flex">
+                {(segment) => (
+                  <DateSegment
+                    segment={segment}
+                    className={tw('px-0.5 tabular-nums outline-none rounded-sm', 'focus:bg-primary-500 focus:text-white')}
+                  />
+                )}
+              </DateInput>
+            </div>
+            <Button className="flex items-center px-2 py-2">
+              <Icon name="calendar" className="h-4 w-4 text-neutral-400" />
+            </Button>
+          </FormFieldComponents.FieldGroup>
+
+          <AnimatedPopover>
+            <Dialog>
+              <RangeCalendar className="bg-white border border-neutral-200 rounded-md shadow-lg p-3">
+                <header className="flex items-center justify-between mb-2">
+                  <Button slot="previous" className="p-1 hover:bg-neutral-100 rounded">
+                    <Icon name="chevron-left" className="h-4 w-4" />
+                  </Button>
+                  <Heading className="text-sm font-semibold text-neutral-900 flex-1 text-center" />
+                  <Button slot="next" className="p-1 hover:bg-neutral-100 rounded">
+                    <Icon name="chevron-right" className="h-4 w-4" />
+                  </Button>
+                </header>
+                <CalendarGrid>
+                  <CalendarGridHeader>
+                    {(day) => (
+                      <CalendarHeaderCell className="text-xs text-neutral-500 font-medium w-8 h-8">{day}</CalendarHeaderCell>
+                    )}
+                  </CalendarGridHeader>
+                  <CalendarGridBody>
+                    {(date) => (
+                      <CalendarCell
+                        date={date}
+                        className={({
+                          isSelected,
+                          isSelectionStart,
+                          isSelectionEnd,
+                          isOutsideMonth,
+                          isDisabled,
+                          isUnavailable,
+                          isFocusVisible
+                        }) =>
+                          tw(
+                            'w-8 h-8 text-sm rounded cursor-pointer flex items-center justify-center',
+                            'hover:bg-neutral-100',
+                            isOutsideMonth && 'text-neutral-300',
+                            (isDisabled || isUnavailable) && 'text-neutral-300 cursor-not-allowed',
+                            isSelected && !isSelectionStart && !isSelectionEnd && 'bg-primary-500/20',
+                            (isSelectionStart || isSelectionEnd) && 'bg-primary-500 text-white hover:bg-primary-500',
+                            isFocusVisible && 'ring-2 ring-primary-500 ring-offset-1'
+                          )
+                        }
+                      />
+                    )}
+                  </CalendarGridBody>
+                </CalendarGrid>
+              </RangeCalendar>
+            </Dialog>
+          </AnimatedPopover>
+        </AriaDateRangePicker>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={validationMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </I18nProvider>
+  )
+}

package/src/components/date-time-picker.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react'
+import { DatePicker as AriaDatePicker, DateInput, DateSegment, Button, Dialog, I18nProvider } from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import { CalendarDateTime, parseDateTime } from '@internationalized/date'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { Icon } from './icon'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { CustomCalendar } from './helpers/calendar-month-year-picker'
+import { dateFns, dateTimeFns, type Iso } from 'iso-fns'
+
+export type DateTimePickerProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  placeholder?: string
+  warningMessage?: React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<Iso.DateTime | null>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (ISO datetime string e.g. 2024-01-15T09:30:00)
+  value?: Iso.DateTime | null
+  defaultValue?: Iso.DateTime | null
+  onChange?: (value: Iso.DateTime | null) => void
+
+  // Date/Time specific
+  minValue?: Iso.DateTime
+  maxValue?: Iso.DateTime
+  use24Hour?: boolean
+  minuteStep?: number
+  locale?: string
+  shape?: 'rectangle' | 'oval'
+}
+
+export function DateTimePicker(props: DateTimePickerProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+
+  // Internal state for CalendarDateTime
+  const [value, _setValue] = React.useState(() => {
+    try {
+      const startingValue = props.value === undefined ? (props.defaultValue ?? null) : props.value
+      return startingValue ? parseDateTime(startingValue) : null
+    } catch {
+      return null
+    }
+  })
+
+  function setValue(dt: CalendarDateTime | null) {
+    _setValue(dt)
+    if (!dt || dateTimeFns.isValid(dt.toString())) {
+      props.onChange && props.onChange(dt ? (dt.toString() as Iso.DateTime) : null)
+    }
+    commitValidation()
+  }
+
+  // Sync controlled value
+  if (props.value !== undefined) {
+    const currentValueAsIso = value && dateTimeFns.isValid(value.toString()) ? value.toString() : null
+    const propValue = props.value && dateTimeFns.isValid(props.value) ? props.value : null
+    if ((!value || dateTimeFns.isValid(value.toString())) && propValue !== currentValueAsIso) {
+      try {
+        _setValue(propValue ? parseDateTime(propValue) : null)
+      } catch {
+        _setValue(null)
+      }
+    }
+  }
+
+  // Convert min/max values
+  const minDateTime = React.useMemo(() => {
+    if (!props.minValue) return undefined
+    try {
+      return parseDateTime(props.minValue)
+    } catch {
+      return undefined
+    }
+  }, [props.minValue])
+
+  const maxDateTime = React.useMemo(() => {
+    if (!props.maxValue) return undefined
+    try {
+      return parseDateTime(props.maxValue)
+    } catch {
+      return undefined
+    }
+  }, [props.maxValue])
+
+  // Form validation
+  const {
+    validationMessage: validationMessageRaw,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: value && dateTimeFns.isValid(value.toString()) ? (value.toString() as Iso.DateTime) : null,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        // Focus handled by AriaDatePicker
+      }
+    },
+    hiddenInputRef as React.RefObject<HTMLInputElement>
+  )
+
+  const lessThanMin =
+    props.minValue && value && dateTimeFns.isValid(value.toString()) ? value.toString() < props.minValue : false
+  const greaterThanMax =
+    props.maxValue && value && dateTimeFns.isValid(value.toString()) ? value.toString() > props.maxValue : false
+
+  const validationMessage =
+    validationMessageRaw ||
+    (lessThanMin ? `Cannot be before ${dateTimeFns.format(props.minValue!, 'MM/dd/yyyy h:mm a')}` : '') ||
+    (greaterThanMax ? `Cannot be after ${dateTimeFns.format(props.maxValue!, 'MM/dd/yyyy h:mm a')}` : '')
+
+  const isInvalid = props.isInvalid || validationInvalid || lessThanMin || greaterThanMax
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  return (
+    <I18nProvider locale={props.locale ?? 'en'}>
+      <div className="relative">
+        {/* Hidden input for form submission */}
+        <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value={value?.toString() ?? ''} form={props.form} />
+
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+        <AriaDatePicker
+          value={value}
+          aria-labelledby={labelId}
+          aria-describedby={helpTextId}
+          onChange={setValue}
+          minValue={minDateTime}
+          maxValue={maxDateTime}
+          isDisabled={props.isDisabled}
+          isReadOnly={props.isReadonly}
+          isInvalid={isInvalid}
+          isRequired={props.isRequired}
+          granularity="minute"
+          hideTimeZone
+          hourCycle={props.use24Hour ? 24 : 12}
+        >
+          <FormFieldComponents.FieldGroup
+            isDisabled={props.isDisabled}
+            isReadonly={props.isReadonly}
+            isInvalid={isInvalid}
+            hasWarning={hasWarning}
+            shape={props.shape}
+            className="flex"
+          >
+            <DateInput className="flex-1 grow flex px-3 py-2 text-sm">
+              {(segment) => (
+                <DateSegment
+                  segment={segment}
+                  className={tw('px-0.5 tabular-nums outline-none rounded-sm', 'focus:bg-primary-500 focus:text-white')}
+                />
+              )}
+            </DateInput>
+            <Button className="flex items-center px-2 py-2">
+              <Icon name="calendar" className="h-4 w-4 text-neutral-400" />
+            </Button>
+          </FormFieldComponents.FieldGroup>
+
+          <AnimatedPopover>
+            <Dialog>
+              <CustomCalendar value={value} onChange={setValue} minValue={minDateTime} maxValue={maxDateTime} />
+            </Dialog>
+          </AnimatedPopover>
+        </AriaDatePicker>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={validationMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </I18nProvider>
+  )
+}

package/src/components/dialog.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { Modal, ModalOverlay, Dialog as AriaDialog, Heading } from 'react-aria-components'
+import { tw } from '../utils/tw'
+import { Button } from './button'
+
+export type DialogProps = {
+  children?: React.ReactNode
+  title?: React.ReactNode
+  isOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  size?: 'sm' | 'lg'
+  className?: string
+  isDismissable?: boolean
+  actions?: React.ReactNode
+}
+
+interface DialogContextValue {
+  close(): void
+}
+
+const DialogContext = React.createContext<DialogContextValue>({ close: () => undefined })
+
+function Dialog_({
+  children,
+  title,
+  isOpen = false,
+  onOpenChange,
+  size = 'sm',
+  className,
+  isDismissable = false,
+  actions
+}: DialogProps) {
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      isDismissable={isDismissable}
+      isKeyboardDismissDisabled={!isDismissable}
+      className={tw(
+        'fixed inset-0 z-[2000] flex items-center justify-center bg-black/70 backdrop-blur-lg',
+        'transition-opacity duration-300 ease-in-out',
+        'data-[entering]:opacity-0',
+        'data-[exiting]:opacity-0'
+      )}
+    >
+      <Modal
+        className={tw(
+          'w-[calc(100%-4rem)] m-auto',
+          size === 'lg' ? 'max-w-[1080px]' : 'max-w-[640px]',
+          'transition-all duration-300 ease-in-out',
+          'data-[entering]:scale-95 data-[entering]:opacity-0',
+          'data-[exiting]:scale-95 data-[exiting]:opacity-0'
+        )}
+      >
+        <AriaDialog
+          className={tw(
+            'w-full max-h-[calc(100vh-6rem)] bg-white shadow-xl outline-none rounded-lg',
+            'flex flex-col overflow-x-hidden overflow-y-auto',
+            className
+          )}
+        >
+          {({ close }) => (
+            <DialogContext.Provider value={{ close }}>
+              <div className="flex items-start justify-between gap-4 pt-6 px-6">
+                {title ? (
+                  <Heading slot="title" className="flex-1 text-xl font-semibold text-neutral-900">
+                    {title}
+                  </Heading>
+                ) : (
+                  <div />
+                )}
+              </div>
+
+              <div className="flex flex-col gap-3 px-6 pb-6">
+                <div className="">{children}</div>
+                <div className="flex gap-2 items-start">{actions}</div>
+              </div>
+            </DialogContext.Provider>
+          )}
+        </AriaDialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}
+
+function CancelButton({ children = 'Cancel' }: { children?: React.ReactNode }) {
+  const context = React.useContext(DialogContext)
+  return (
+    <Button color="neutral" onClick={context.close} variant="soft" shape="oval">
+      {children}
+    </Button>
+  )
+}
+
+export const Dialog = Object.assign(Dialog_, {
+  CancelButton
+})

package/src/components/disclosure.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react'
+import {
+  Disclosure as AriaDisclosure,
+  DisclosurePanel as AriaDisclosurePanel,
+  DisclosureGroup,
+  DisclosureStateContext,
+  Button,
+  Heading
+} from 'react-aria-components'
+import { tw } from '../utils/tw'
+import { type ContainerSize } from './container'
+import { Icon } from './icon'
+
+export type DisclosureProps = {
+  id?: string | number
+  title: React.ReactNode
+  children: React.ReactNode
+  className?: string
+  size?: ContainerSize
+  isDisabled?: boolean
+  defaultOpen?: boolean
+  isOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+}
+
+function DisclosureRaw({
+  id,
+  title,
+  className,
+  defaultOpen,
+  isOpen,
+  onOpenChange,
+  children,
+  size = 'md',
+  isDisabled = false
+}: DisclosureProps) {
+  const paddingX = size === 'lg' ? 'px-6' : size === 'md' ? 'px-3' : 'px-2'
+  const paddingBottom = size === 'lg' ? 'pb-6' : size === 'md' ? 'pb-3' : 'pb-2'
+
+  return (
+    <AriaDisclosure
+      id={id}
+      defaultExpanded={defaultOpen}
+      isExpanded={isOpen}
+      onExpandedChange={onOpenChange}
+      isDisabled={isDisabled}
+    >
+      <DisclosureHeader size={size} isDisabled={isDisabled} className={className}>
+        {title}
+      </DisclosureHeader>
+      <AriaDisclosurePanel className="h-(--disclosure-panel-height) motion-safe:transition-[height] duration-200 ease-in-out overflow-clip mt-1">
+        <div className={tw(paddingX, paddingBottom)}>{children}</div>
+      </AriaDisclosurePanel>
+    </AriaDisclosure>
+  )
+}
+
+function DisclosureHeader({
+  size,
+  isDisabled,
+  className,
+  children
+}: {
+  size: ContainerSize
+  isDisabled: boolean
+  className?: string
+  children: React.ReactNode
+}) {
+  const { isExpanded } = React.useContext(DisclosureStateContext)!
+
+  return (
+    <Heading>
+      <Button
+        slot="trigger"
+        className={tw(
+          'flex w-full items-center justify-start text-left transition-colors gap-2 font-medium',
+          'hover:bg-neutral-50',
+          size === 'lg' ? 'px-4 py-2.5' : size === 'md' ? 'px-2.5 py-1.5' : 'px-2 py-1',
+          'rounded-lg',
+          isDisabled && 'opacity-50 cursor-not-allowed hover:bg-transparent',
+          className
+        )}
+      >
+        <Icon
+          name="chevron-right"
+          className={tw(
+            'shrink-0 transition-transform duration-200 ease-in-out',
+            size === 'md' || size === 'lg' ? 'w-4 h-4' : 'w-3 h-3',
+            isExpanded && 'rotate-90',
+            isDisabled ? 'text-neutral-300' : 'text-neutral-500'
+          )}
+        />
+        <span
+          className={tw(
+            size === 'lg'
+              ? 'text-lg font-semibold'
+              : size === 'md'
+                ? 'text-base font-medium'
+                : 'text-sm font-medium',
+            isDisabled ? 'text-neutral-400' : 'text-neutral-700'
+          )}
+        >
+          {children}
+        </span>
+      </Button>
+    </Heading>
+  )
+}
+
+export const Disclosure = Object.assign(DisclosureRaw, {
+  Group: DisclosureGroup
+})
+
+Object.defineProperty(DisclosureRaw, 'name', { value: 'Disclosure' })