@maestro-js/components 1.0.0-alpha.0

package/src/components/checkbox-group.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { LabeledCheckbox } from './checkbox'
+
+export type CheckboxGroupOption = {
+  value: string
+  label: React.ReactNode
+  description?: React.ReactNode
+  isDisabled?: boolean
+}
+
+export type CheckboxGroupProps = {
+  name?: string
+  form?: string
+
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  warningMessage?: React.ReactNode
+
+  isRequired?: boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<string[]>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  value?: string[]
+  defaultValue?: string[]
+  onChange?: (value: string[]) => void
+
+  options: CheckboxGroupOption[]
+  orientation?: 'horizontal' | 'vertical'
+  showSelectAll?: boolean
+  minSelection?: number
+  maxSelection?: number
+}
+
+export function CheckboxGroup(props: CheckboxGroupProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+
+  const [value, setValue] = HeadlessForm.useControlledState(props.value, props.defaultValue ?? [], props.onChange)
+
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        // Focus is handled by individual checkboxes
+      }
+    },
+    hiddenInputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+  const orientation = props.orientation ?? 'vertical'
+
+  const enabledOptions = props.options.filter((o) => !o.isDisabled)
+  const allSelected = value.length === enabledOptions.length
+  const someSelected = value.length > 0 && !allSelected
+
+  const handleOptionToggle = (optionValue: string) => {
+    const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
+
+    if (props.minSelection && newValue.length < props.minSelection) {
+      return
+    }
+    if (props.maxSelection && newValue.length > props.maxSelection) {
+      return
+    }
+
+    setValue(newValue)
+    commitValidation()
+  }
+
+  const handleSelectAll = () => {
+    if (allSelected) {
+      setValue([])
+    } else {
+      setValue(enabledOptions.map((o) => o.value))
+    }
+    commitValidation()
+  }
+
+  return (
+    <div
+      className="relative"
+      role="group"
+      aria-labelledby={props.label ? `${helpTextId}-label` : undefined}
+      aria-describedby={helpTextId}
+    >
+      {value.map((v, i) => (
+        <HeadlessForm.HiddenInput
+          key={i}
+          ref={i === 0 ? hiddenInputRef : undefined}
+          name={props.name}
+          value={v}
+          form={props.form}
+        />
+      ))}
+      {value.length === 0 && <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value="" form={props.form} />}
+
+      {props.label && (
+        <div className="flex justify-between items-center mb-2">
+          <FormFieldComponents.Label as="span" id={`${helpTextId}-label`}>
+            {props.label}
+          </FormFieldComponents.Label>
+          {props.cornerHint && <div className="text-sm text-neutral-500">{props.cornerHint}</div>}
+        </div>
+      )}
+
+      {props.showSelectAll && (
+        <div className="mb-2 pb-2 border-b border-neutral-200">
+          <LabeledCheckbox
+            checked={allSelected}
+            isIndeterminate={someSelected}
+            onChange={handleSelectAll}
+            isDisabled={props.isDisabled}
+            label={<span className="text-sm font-medium">Select All</span>}
+          />
+        </div>
+      )}
+
+      <div className={tw('flex', orientation === 'vertical' ? 'flex-col space-y-1.5' : 'flex-row flex-wrap gap-4')}>
+        {props.options.map((option) => (
+          <LabeledCheckbox
+            key={option.value}
+            label={option.label}
+            helpText={option.description ?? null}
+            checked={value.includes(option.value)}
+            onChange={() => handleOptionToggle(option.value)}
+            isDisabled={option.isDisabled || props.isDisabled}
+          />
+        ))}
+      </div>
+
+      {(props.minSelection || props.maxSelection) && (
+        <div className="mt-2 text-xs text-neutral-500">
+          {props.minSelection && props.maxSelection
+            ? `Select between ${props.minSelection} and ${props.maxSelection} options`
+            : props.minSelection
+              ? `Select at least ${props.minSelection} option${props.minSelection > 1 ? 's' : ''}`
+              : `Select up to ${props.maxSelection} option${props.maxSelection! > 1 ? 's' : ''}`}
+          {' · '}
+          {value.length} selected
+        </div>
+      )}
+
+      <FormFieldComponents.FormFieldHelpText
+        id={helpTextId}
+        isInvalid={isInvalid}
+        validationMessage={validationMessage}
+        hasWarning={hasWarning}
+        warningMessage={props.warningMessage}
+        helpText={props.helpText}
+      />
+    </div>
+  )
+}
+
+CheckboxGroup.displayName = 'CheckboxGroup'

package/src/components/checkbox.tsx

@@ -0,0 +1,207 @@
+import * as React from 'react'
+import { Checkbox as AriaCheckbox } from 'react-aria-components'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { Icon } from './icon'
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export type PlainCheckboxProps = {
+  name?: string
+  form?: string
+
+  isDisabled?: boolean
+  isRequired?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<boolean>
+
+  checked?: boolean
+  defaultChecked?: boolean
+  onChange?: (checked: boolean) => void
+
+  'aria-label'?: string
+}
+
+export type LabeledCheckboxProps = {
+  name?: string
+  form?: string
+
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  warningMessage?: React.ReactNode
+
+  isRequired?: boolean
+  isDisabled?: boolean
+  isIndeterminate?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<boolean>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  checked?: boolean
+  defaultChecked?: boolean
+  onChange?: (checked: boolean) => void
+
+  value?: string
+}
+
+// ── Plain Checkbox ─────────────────────────────────────────────────────────────
+
+export function PlainCheckbox(props: PlainCheckboxProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+
+  const [checked, setChecked] = HeadlessForm.useControlledState(props.checked, props.defaultChecked ?? false, props.onChange)
+
+  const { isInvalid: validationInvalid, commitValidation } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: checked,
+      name: props.name,
+      isRequired: false,
+      form: props.form,
+      focus() {
+        hiddenInputRef.current?.closest('label')?.focus()
+      }
+    },
+    hiddenInputRef
+  )
+
+  return (
+    <AriaCheckbox
+      isSelected={checked}
+      onChange={(v) => {
+        setChecked(v)
+        commitValidation()
+      }}
+      isDisabled={props.isDisabled}
+      isInvalid={props.isInvalid || validationInvalid}
+      aria-label={props['aria-label']}
+      className="group inline-flex items-center focus:outline-none [&>div]:focus-visible:ring-2 [&>div]:focus-visible:ring-primary-500/20 [&>div]:focus-visible:ring-offset-2"
+    >
+      {({ isSelected, isIndeterminate, isDisabled }) => (
+        <>
+          {props.isDisabled || !props.name ? null : (
+            <HeadlessForm.HiddenInput
+              ref={hiddenInputRef}
+              name={props.name}
+              form={props.form}
+              value={checked ? 'true' : 'false'}
+            />
+          )}
+          <CheckboxBox isSelected={isSelected} isIndeterminate={isIndeterminate} isDisabled={isDisabled} />
+        </>
+      )}
+    </AriaCheckbox>
+  )
+}
+
+PlainCheckbox.displayName = 'PlainCheckbox'
+
+// ── Labeled Checkbox ───────────────────────────────────────────────────────────
+
+export function LabeledCheckbox(props: LabeledCheckboxProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+
+  const [checked, setChecked] = HeadlessForm.useControlledState(props.checked, props.defaultChecked ?? false, props.onChange)
+
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: checked,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        hiddenInputRef.current?.closest('label')?.focus()
+      }
+    },
+    hiddenInputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  return (
+    <AriaCheckbox
+      isSelected={checked}
+      isIndeterminate={props.isIndeterminate}
+      onChange={(v) => {
+        setChecked(v)
+        commitValidation()
+      }}
+      isDisabled={props.isDisabled}
+      isInvalid={isInvalid}
+      aria-describedby={helpTextId}
+      className="group relative flex items-start gap-3 select-none focus:outline-none [&>div:first-child>div]:focus-visible:ring-2 [&>div:first-child>div]:focus-visible:ring-primary-500/20 [&>div:first-child>div]:focus-visible:ring-offset-2"
+    >
+      {({ isSelected, isIndeterminate, isDisabled }) => (
+        <>
+          {props.isDisabled || !props.name ? null : (
+            <HeadlessForm.HiddenInput
+              ref={hiddenInputRef}
+              name={props.name}
+              form={props.form}
+              value={checked ? 'true' : 'false'}
+            />
+          )}
+          <div className="shrink-0">
+            <CheckboxBox isSelected={isSelected} isIndeterminate={isIndeterminate} isDisabled={isDisabled} />
+          </div>
+          <div className="flex flex-col justify-center">
+            <div className="flex items-center gap-2 justify-between">
+              <FormFieldComponents.Label as="span">{props.label}</FormFieldComponents.Label>
+              {props.cornerHint && <div className="text-sm text-neutral-500">{props.cornerHint}</div>}
+            </div>
+            <FormFieldComponents.FormFieldHelpText
+              id={helpTextId}
+              isInvalid={isInvalid}
+              validationMessage={validationMessage}
+              hasWarning={hasWarning}
+              warningMessage={props.warningMessage}
+              helpText={props.helpText}
+              UNSAFE_className="mt-0.5"
+            />
+          </div>
+        </>
+      )}
+    </AriaCheckbox>
+  )
+}
+
+LabeledCheckbox.displayName = 'LabeledCheckbox'
+
+// ── Helper components ──────────────────────────────────────────────────────────
+
+function CheckboxBox({
+  isSelected,
+  isIndeterminate,
+  isDisabled
+}: {
+  isSelected: boolean
+  isIndeterminate: boolean
+  isDisabled: boolean
+}) {
+  return (
+    <div
+      className={tw(
+        'relative h-5 w-5 rounded border transition-all duration-50',
+        isSelected || isIndeterminate ? 'bg-primary-500 border-primary-500' : 'bg-white border-neutral-300',
+        !isDisabled && !(isSelected || isIndeterminate) && 'group-hovered:border-neutral-400',
+        isDisabled && 'opacity-50 cursor-not-allowed'
+      )}
+    >
+      {isIndeterminate ? (
+        <Icon name="minus" className="h-5/6 absolute inset-0 m-auto aspect-square text-white" />
+      ) : (
+        <Icon name="check" className="h-5/6 absolute inset-0 m-auto aspect-square text-white" />
+      )}
+    </div>
+  )
+}

package/src/components/chip.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react'
+import { tw } from '../utils/tw'
+import { Icon } from './icon'
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export type ChipProps = {
+  children: React.ReactNode
+  onRemove?: () => void
+  isDisabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'stone' | 'info' | 'green' | 'yellow' | 'orange' | 'red'
+  colorMode?: 'light' | 'dark'
+  className?: string
+  style?: React.CSSProperties
+}
+
+export type ChipButtonProps = {
+  children: React.ReactNode
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'stone' | 'info' | 'green' | 'yellow' | 'orange' | 'red'
+  colorMode?: 'light' | 'dark'
+  className?: string
+} & Omit<React.ComponentProps<'button'>, 'disabled' | 'size' | 'color'>
+
+// ── Chip ──────────────────────────────────────────────────────────────────────
+
+export function Chip(props: ChipProps) {
+  const {
+    children,
+    onRemove,
+    isDisabled = false,
+    size = 'md',
+    color = 'stone',
+    colorMode = 'light',
+    className,
+    style
+  } = props
+
+  const colorClasses = colorMode === 'dark' ? darkColorClasses : lightColorClasses
+
+  return (
+    <div
+      className={tw(
+        'inline-flex items-center rounded-full font-normal transition-colors max-w-full',
+        sizeClasses[size],
+        !isDisabled && !style && colorClasses[color],
+        isDisabled && 'opacity-50 cursor-not-allowed',
+        className
+      )}
+      style={style}
+    >
+      <span className="truncate">{children}</span>
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          disabled={isDisabled}
+          className={tw(
+            'inline-flex items-center justify-center rounded-full transition-colors translate-x-1',
+            removeBtnSizeClasses[size],
+            !isDisabled && 'hover:bg-black/10',
+            isDisabled && 'cursor-not-allowed'
+          )}
+          aria-label="Remove"
+          tabIndex={-1}
+        >
+          <Icon name="x-mark" className={removeIconSizeClasses[size]} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ── ChipButton ────────────────────────────────────────────────────────────────
+
+export const ChipButton = React.forwardRef<HTMLButtonElement, ChipButtonProps>((props, ref) => {
+  const { children, size = 'md', color = 'stone', colorMode = 'light', className, disabled, ...rest } = props
+
+  const colorClasses = colorMode === 'dark' ? darkHoverColorClasses : lightHoverColorClasses
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={disabled}
+      className={tw(
+        'inline-flex items-center rounded-full font-normal transition-colors',
+        sizeClasses[size],
+        !disabled && colorClasses[color],
+        disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+})
+
+ChipButton.displayName = 'ChipButton'
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+const sizeClasses = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-2.5 py-1 text-sm',
+  lg: 'px-3 py-1.5 text-base'
+}
+
+const lightColorClasses = {
+  stone: 'bg-stone-100 text-stone-700',
+  info: 'bg-info-100 text-info-700',
+  green: 'bg-green-100 text-green-700',
+  yellow: 'bg-yellow-100 text-yellow-700',
+  orange: 'bg-orange-100 text-orange-700',
+  red: 'bg-red-100 text-red-700'
+}
+
+const darkColorClasses = {
+  stone: 'bg-stone-600 text-white',
+  info: 'bg-info-600 text-white',
+  green: 'bg-green-600 text-white',
+  yellow: 'bg-yellow-600 text-white',
+  orange: 'bg-orange-600 text-white',
+  red: 'bg-red-600 text-white'
+}
+
+const lightHoverColorClasses = {
+  stone: 'bg-stone-100 text-stone-700 hover:bg-stone-200',
+  info: 'bg-info-100 text-info-700 hover:bg-info-200',
+  green: 'bg-green-100 text-green-700 hover:bg-green-200',
+  yellow: 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200',
+  orange: 'bg-orange-100 text-orange-700 hover:bg-orange-200',
+  red: 'bg-red-100 text-red-700 hover:bg-red-200'
+}
+
+const darkHoverColorClasses = {
+  stone: 'bg-stone-600 text-white hover:bg-stone-700',
+  info: 'bg-info-600 text-white hover:bg-info-700',
+  green: 'bg-green-600 text-white hover:bg-green-700',
+  yellow: 'bg-yellow-600 text-white hover:bg-yellow-700',
+  orange: 'bg-orange-600 text-white hover:bg-orange-700',
+  red: 'bg-red-600 text-white hover:bg-red-700'
+}
+
+const removeBtnSizeClasses = {
+  sm: 'h-4 w-4 -m-0.5 p-0.5',
+  md: 'h-5 w-5 -m-1 p-1',
+  lg: 'h-6 w-6 -m-1.5 p-1.5'
+}
+
+const removeIconSizeClasses = {
+  sm: 'h-2 w-2',
+  md: 'h-3 w-3',
+  lg: 'h-4 w-4'
+}

package/src/components/container.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import { tw } from '../utils/tw'
+
+// ── Props ────────────────────────────────────────────────────────────────────
+
+export type ContainerSize = 'lg' | 'md' | 'sm'
+export type ContainerElevation = 0 | -1 | -2 | 'inherit'
+
+export type ContainerProps = React.ComponentProps<'div'> & {
+  size?: ContainerSize
+  elevation?: ContainerElevation
+}
+
+export type ContainerSectionProps = ContainerProps & {
+  label?: React.ReactNode
+  actions?: React.ReactNode
+}
+
+export type SectionProps = {
+  label?: React.ReactNode
+  actions?: React.ReactNode
+  children?: React.ReactNode
+}
+
+// ── Container ────────────────────────────────────────────────────────────────
+
+export function Container({ size = 'lg', elevation = 0, className, ...props }: ContainerProps) {
+  return <div {...props} className={tw(elevationClasses[String(elevation)], sizeClasses[size], className)} />
+}
+
+Container.displayName = 'Container'
+
+// ── ContainerSection ─────────────────────────────────────────────────────────
+
+export function ContainerSection({ label, actions, ...props }: ContainerSectionProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-start justify-between">
+        <h3 className="text-lg font-semibold">{label}</h3>
+        {actions}
+      </div>
+      <Container {...props} />
+    </div>
+  )
+}
+
+ContainerSection.displayName = 'ContainerSection'
+
+// ── Section ──────────────────────────────────────────────────────────────────
+
+export function Section({ label, actions, children }: SectionProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-start justify-between">
+        <h3 className="text-lg font-semibold">{label}</h3>
+        {actions}
+      </div>
+      <div>{children}</div>
+    </div>
+  )
+}
+
+Section.displayName = 'Section'
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+const sizeClasses: Record<ContainerSize, string> = {
+  lg: 'p-6 rounded-lg',
+  md: 'p-3 rounded',
+  sm: 'p-2 rounded-sm'
+}
+
+const elevationClasses: Record<string, string> = {
+  '0': 'bg-white border border-neutral-200',
+  '-1': 'bg-neutral-50 border border-neutral-200',
+  '-2': 'bg-neutral-100 border border-neutral-300',
+  inherit: ''
+}
+
+export function getSizeClassesForContainer(size: ContainerSize) {
+  return sizeClasses[size]
+}