@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/inputs/date-time/duration-picker/index.tsx

@@ -1,253 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): a duration field with
- * scrolling hour and minute columns. Props after utegsk/ui's DurationPicker
- * (`minHours`, `maxHours`, `hourStep`, `minuteStep`, `formatValue`), its
- * value a date-fns `Duration` instead of decimal hours.
- */
-
-import { type Duration, formatDuration, type Locale } from 'date-fns'
-import {
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type ReactNode,
-  type RefAttributes,
-  type RefObject,
-  useMemo,
-  useRef,
-} from 'react'
-import { defaultLocale, fieldLabel, resolveLocale } from '../../../../lib/date-locale'
-import type { FieldVariant } from '../../../../lib/field-classes'
-import { dividedColumns, ScrollColumn } from '../../../../lib/scroll-column'
-import type { SizeVariant } from '../../../../lib/size-context'
-import { useControllableState } from '../../../../lib/use-controllable-state'
-import { cn } from '../../../../lib/utils'
-import { controlAttributes, invalidOf, type PickerControlProps, PickerInput, PickerShell } from '../picker-shell'
-import { pad } from '../time-columns'
-
-/** Every word the picker announces, for translating it. */
-interface DurationPickerLabels {
-  /** Names the panel's duration input. Defaults to the `placeholder`, else `"Duration"`. */
-  duration?: string
-  /** Names the hour column. Defaults to the locale's name for it. */
-  hour?: string
-  /** Names the minute column. Defaults to the locale's name for it. */
-  minute?: string
-  /** Names the panel's close button. Defaults to `"Close"`. */
-  close?: string
-}
-
-interface DurationPickerProps extends PickerControlProps {
-  /** The picked duration, a date-fns `Duration` (`{ hours, minutes }`); `null` when empty. */
-  value?: Duration | null
-  /** Initial duration, for an uncontrolled picker. Defaults to `null`. */
-  defaultValue?: Duration | null
-  /** Called with the new duration, or `null` when the field is cleared. */
-  onValueChange?: (value: Duration | null) => void
-  /** The shortest duration's hours: the hour column starts at it, and a minute picked on an empty field takes it. Defaults to `0`. */
-  minHours?: number
-  /** The longest duration's hours: the hour column runs up to it. Defaults to `99`. */
-  maxHours?: number
-  /** Steps between the hour column's options, from `minHours`. Defaults to `1`. */
-  hourStep?: number
-  /** Steps between the minute column's options. Defaults to `1`. */
-  minuteStep?: number
-  /** A react-day-picker / date-fns locale, or a BCP 47 tag (`"sk"`) read through Intl: the field spells the duration out in it ("1 Stunde 30 Minuten"; a tag reads the names in English). Defaults to `enUS`. */
-  locale?: Locale | string
-  /** The field's text for a duration, in place of the locale's words: `(value) => …`, given `{ hours, minutes }`. */
-  formatValue?: (value: Duration) => ReactNode
-  /** Every word the picker announces (`duration`, `hour`, `minute`, `close`), for translating it. Defaults to English and the locale's field names. */
-  labels?: DurationPickerLabels
-  /** Shows the duration but never opens. Defaults to `false`. */
-  readOnly?: boolean
-  /** Names the value for a native form: a hidden input carries it as an ISO 8601 duration (`"PT1H30M"`). */
-  name?: string
-  /** Shown while empty. */
-  placeholder?: string
-  /** Disables the field. Defaults to `false`. */
-  disabled?: boolean
-  /** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
-  variant?: FieldVariant
-  /** Marks the field invalid. Defaults to `false`. */
-  invalid?: boolean
-  /** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Controlled open state. */
-  open?: boolean
-  /** Initial open state, for an uncontrolled panel. Defaults to `false`. */
-  defaultOpen?: boolean
-  /** Called when the panel opens or closes. */
-  onOpenChange?: (open: boolean) => void
-  /** Id of the field, for a `Label`'s `htmlFor`. */
-  id?: string
-  /** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
-  from?: 'trigger' | 'pointer' | 'center' | 'top' | 'right' | 'bottom' | 'left' | RefObject<HTMLElement | null>
-  /** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
-  effect?: 'goo' | 'morph' | 'slide' | 'fade'
-  /** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
-  hideSource?: boolean
-  /** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
-  tier?: 'moderate' | 'slow'
-  /** Classes for the field. */
-  className?: string
-}
-
-/** "1:30", or a bare number of hours ("2"). */
-const TYPED = /^\s*(\d{1,3})(?::(\d{1,2}))?\s*$/
-
-/**
- * A field for a length of time, in hours and minutes.
- *
- * The field spells the duration out in the locale ("1 hour 30 minutes"); its
- * panel has it as `H:mm` to type over, above an hour column (`minHours` to
- * `maxHours`, stepping by `hourStep`) and a minute column stepping by
- * `minuteStep`. The value is a date-fns `Duration`, `{ hours, minutes }`,
- * ready for `formatDuration` or date math.
- *
- * `formatValue` writes the field's text and `labels` every word it
- * announces; `locale` also takes a BCP 47 tag. `readOnly` shows the duration
- * and never opens. In a form, `name` submits the value as an ISO 8601
- * duration (`"PT1H30M"`) and `required` stops an empty submit; `id`, the
- * `aria-*` props, `onBlur`, `controlProps` and the `ref` reach the field's
- * button.
- *
- * @example {@include ./examples.mdx}
- */
-const DurationPicker: ForwardRefExoticComponent<DurationPickerProps & RefAttributes<HTMLButtonElement>> = forwardRef<
-  HTMLButtonElement,
-  DurationPickerProps
->(function DurationPicker(
-  {
-    value: valueProp,
-    defaultValue = null,
-    onValueChange,
-    minHours = 0,
-    maxHours = 99,
-    hourStep = 1,
-    minuteStep = 1,
-    locale: localeProp = defaultLocale,
-    formatValue,
-    labels,
-    readOnly = false,
-    name,
-    placeholder,
-    disabled,
-    variant,
-    invalid,
-    size,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
-    id,
-    from,
-    effect,
-    hideSource,
-    tier,
-    className,
-    ...control
-  },
-  ref,
-) {
-  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange)
-  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange)
-  const input = useRef<HTMLInputElement>(null)
-  const locale = resolveLocale(localeProp)
-  const hours = value?.hours ?? minHours
-  const minutes = value?.minutes ?? 0
-
-  const spelled = () =>
-    hours || minutes
-      ? formatDuration({ hours, minutes }, { locale, format: ['hours', 'minutes'] })
-      : formatDuration({ minutes: 0 }, { locale, format: ['minutes'], zero: true })
-  const display = value ? (formatValue?.({ hours, minutes }) ?? spelled()) : ''
-
-  const readDuration = (text: string) => {
-    if (!text.trim()) {
-      setValue(null)
-      return true
-    }
-    const match = TYPED.exec(text)
-    const h = Number(match?.[1])
-    const m = Number(match?.[2] ?? 0)
-    if (!match || h < minHours || h > maxHours || m > 59) return false
-    setValue({ hours: h, minutes: m })
-    return true
-  }
-
-  const hourOptions = useMemo(
-    () =>
-      Array.from({ length: Math.floor((maxHours - minHours) / Math.max(1, hourStep)) + 1 }, (_, i) => {
-        const h = minHours + i * Math.max(1, hourStep)
-        return { value: h, label: String(h) }
-      }),
-    [minHours, maxHours, hourStep],
-  )
-  const minuteOptions = useMemo(
-    () =>
-      Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({
-        value: i * minuteStep,
-        label: pad(i * minuteStep),
-      })),
-    [minuteStep],
-  )
-
-  return (
-    <PickerShell
-      open={open}
-      onOpenChange={setOpen}
-      size={size}
-      variant={variant}
-      invalid={invalidOf(invalid, control['aria-invalid'])}
-      disabled={disabled}
-      readOnly={readOnly}
-      icon="clock"
-      display={display}
-      placeholder={placeholder}
-      closeLabel={labels?.close}
-      controlRef={ref}
-      controlProps={controlAttributes(control)}
-      formValues={[{ slot: 'value', name, value: value ? `PT${hours}H${minutes}M` : '' }]}
-      required={control.required}
-      header={
-        <PickerInput
-          ref={input}
-          aria-label={labels?.duration || placeholder || 'Duration'}
-          placeholder="0:00"
-          formatted={value ? `${hours}:${pad(minutes)}` : ''}
-          onText={readDuration}
-          onEnter={() => setOpen(false)}
-          className="flex-1"
-        />
-      }
-      initialFocus={input}
-      popupClassName="w-[max(var(--anchor-width,0px),14rem)]"
-      id={id}
-      from={from}
-      effect={effect}
-      hideSource={hideSource}
-      tier={tier}
-      className={className}
-    >
-      <div className={cn(dividedColumns, 'h-56')}>
-        <ScrollColumn
-          label={labels?.hour ?? fieldLabel(locale, 'hour')}
-          options={hourOptions}
-          value={value ? hours : null}
-          onValueChange={h => setValue({ hours: h, minutes })}
-          className="min-w-0 flex-1"
-        />
-        <ScrollColumn
-          label={labels?.minute ?? fieldLabel(locale, 'minute')}
-          options={minuteOptions}
-          value={value ? minutes : null}
-          onValueChange={m => setValue({ hours, minutes: m })}
-          className="min-w-0 flex-1"
-        />
-      </div>
-    </PickerShell>
-  )
-})
-
-export type { DurationPickerLabels, DurationPickerProps }
-export { DurationPicker }
-
-export default DurationPicker

package/components/inputs/date-time/month-picker/examples.mdx

@@ -1,45 +0,0 @@
-import MonthPicker from './index'
-import { de } from 'react-day-picker/locale'
-
-# Basic
-
-<div className="w-60 max-w-full">
-  <MonthPicker defaultValue={new Date(2026, 9, 1)} />
-</div>
-
-# German, card expiry
-
-`startMonth` and `endMonth` bound the years.
-
-<div className="w-60 max-w-full">
-  <MonthPicker locale={de} placeholder="Ablaufdatum" startMonth={new Date(2026, 9, 1)} endMonth={new Date(2036, 11, 1)} />
-</div>
-
-# Month only
-
-`withYear={false}` leaves the month column alone, for a month of no particular year.
-
-<div className="w-60 max-w-full">
-  <MonthPicker withYear={false} placeholder="Billing month" defaultValue={new Date(2026, 9, 1)} />
-</div>
-
-# Slovak, labels and format
-
-`locale="sk"` names the months in Slovak; `labels` names the columns and `formatDate` writes the field's text.
-
-<div className="w-60 max-w-full">
-  <MonthPicker
-    locale="sk"
-    formatDate={date => date.toLocaleDateString('sk', { month: 'long', year: 'numeric' })}
-    labels={{ field: 'Mesiac', month: 'Mesiac', year: 'Rok', close: 'Zavrieť' }}
-    defaultValue={new Date(2026, 9, 1)}
-  />
-</div>
-
-# Read only
-
-`readOnly` shows the month and never opens.
-
-<div className="w-60 max-w-full">
-  <MonthPicker readOnly defaultValue={new Date(2026, 9, 1)} />
-</div>

package/components/inputs/date-time/month-picker/index.tsx

@@ -1,254 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): a month field with
- * scrolling month and year columns. After utegsk/ui's MonthPicker, its value
- * the month's first day (as react-day-picker's `month` is) instead of
- * `{ month, year }`.
- */
-
-import { addYears, endOfYear, format, type Locale, startOfMonth, startOfYear } from 'date-fns'
-import {
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type ReactNode,
-  type RefAttributes,
-  type RefObject,
-  useMemo,
-  useRef,
-} from 'react'
-import {
-  defaultLocale,
-  fieldLabel,
-  parseMonthNameText,
-  parseMonthText,
-  resolveLocale,
-} from '../../../../lib/date-locale'
-import type { FieldVariant } from '../../../../lib/field-classes'
-import { dividedColumns, ScrollColumn } from '../../../../lib/scroll-column'
-import type { SizeVariant } from '../../../../lib/size-context'
-import { useControllableState } from '../../../../lib/use-controllable-state'
-import { cn } from '../../../../lib/utils'
-import { controlAttributes, invalidOf, type PickerControlProps, PickerInput, PickerShell } from '../picker-shell'
-
-/** Every word the picker announces, for translating it. */
-interface MonthPickerLabels {
-  /** Names the panel's month input. Defaults to the `placeholder`, else `"Month"`. */
-  field?: string
-  /** Names the month column. Defaults to the locale's name for it. */
-  month?: string
-  /** Names the year column. Defaults to the locale's name for it. */
-  year?: string
-  /** Names the panel's close button. Defaults to `"Close"`. */
-  close?: string
-}
-
-interface MonthPickerProps extends PickerControlProps {
-  /** The picked month as its first day; `null` when empty. */
-  value?: Date | null
-  /** Initial month, for an uncontrolled picker. Defaults to `null`. */
-  defaultValue?: Date | null
-  /** Called with the new month's first day, or `null` when the field is cleared. */
-  onValueChange?: (value: Date | null) => void
-  /** A react-day-picker / date-fns locale, or a BCP 47 tag (`"sk"`) read through Intl: month names and what typing reads. Defaults to `enUS`. */
-  locale?: Locale | string
-  /** Adds the year column, and the year to the field. `false` leaves a month of the current year (or of the value's). Defaults to `true`. */
-  withYear?: boolean
-  /** The field's text for a month, in place of the locale's ("October 2026"): `(date) => …`, given its first day. */
-  formatDate?: (date: Date) => ReactNode
-  /** Every word the picker announces (`field`, `month`, `year`, `close`), for translating it. Defaults to English and the locale's field names. */
-  labels?: MonthPickerLabels
-  /** Shows the month but never opens. Defaults to `false`. */
-  readOnly?: boolean
-  /** Names the value for a native form: a hidden input carries it as `"yyyy-MM"` (an `<input type="month">`'s value). */
-  name?: string
-  /** Shown while empty. */
-  placeholder?: string
-  /** The first month that can be picked. Defaults to 100 years back. */
-  startMonth?: Date
-  /** The last month that can be picked. Defaults to 50 years ahead. */
-  endMonth?: Date
-  /** Disables the field. Defaults to `false`. */
-  disabled?: boolean
-  /** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
-  variant?: FieldVariant
-  /** Marks the field invalid. Defaults to `false`. */
-  invalid?: boolean
-  /** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Controlled open state. */
-  open?: boolean
-  /** Initial open state, for an uncontrolled panel. Defaults to `false`. */
-  defaultOpen?: boolean
-  /** Called when the panel opens or closes. */
-  onOpenChange?: (open: boolean) => void
-  /** Id of the field, for a `Label`'s `htmlFor`. */
-  id?: string
-  /** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
-  from?: 'trigger' | 'pointer' | 'center' | 'top' | 'right' | 'bottom' | 'left' | RefObject<HTMLElement | null>
-  /** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
-  effect?: 'goo' | 'morph' | 'slide' | 'fade'
-  /** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
-  hideSource?: boolean
-  /** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
-  tier?: 'moderate' | 'slow'
-  /** Classes for the field. */
-  className?: string
-}
-
-/**
- * A field for a month of a year: a billing period, a card's expiry.
- *
- * The panel has the month as text to type over ("October 2026", "10/2026"),
- * above a month column and a year column; the picked month and year carry a
- * dot. The value is the month's first day, the way react-day-picker names a
- * month. `withYear={false}` leaves the month column alone, for a month of
- * no particular year (the value keeps the current year).
- *
- * `formatDate` writes the field's text and `labels` every word it
- * announces; `locale` also takes a BCP 47 tag. `readOnly` shows the month
- * and never opens. In a form, `name` submits the value as `"yyyy-MM"` and
- * `required` stops an empty submit; `id`, the `aria-*` props, `onBlur`,
- * `controlProps` and the `ref` reach the field's button.
- *
- * @example {@include ./examples.mdx}
- */
-const MonthPicker: ForwardRefExoticComponent<MonthPickerProps & RefAttributes<HTMLButtonElement>> = forwardRef<
-  HTMLButtonElement,
-  MonthPickerProps
->(function MonthPicker(
-  {
-    value: valueProp,
-    defaultValue = null,
-    onValueChange,
-    locale: localeProp = defaultLocale,
-    withYear = true,
-    formatDate,
-    labels,
-    readOnly = false,
-    name,
-    placeholder,
-    startMonth,
-    endMonth,
-    disabled,
-    variant,
-    invalid,
-    size,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
-    id,
-    from,
-    effect,
-    hideSource,
-    tier,
-    className,
-    ...control
-  },
-  ref,
-) {
-  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange)
-  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange)
-  const input = useRef<HTMLInputElement>(null)
-  const locale = resolveLocale(localeProp)
-  const today = useMemo(() => new Date(), [])
-  const start = startOfMonth(startMonth ?? startOfYear(addYears(today, -100)))
-  const end = startOfMonth(endMonth ?? endOfYear(addYears(today, 50)))
-  const year = value?.getFullYear() ?? today.getFullYear()
-  const formatted = value ? format(value, withYear ? 'LLLL y' : 'LLLL', { locale }) : ''
-
-  // Clamped into the range, so a year change can't land outside it.
-  const pick = (date: Date) => setValue(startOfMonth(date < start ? start : date > end ? end : date))
-
-  const readMonth = (text: string) => {
-    if (!text.trim()) {
-      setValue(null)
-      return true
-    }
-    const read = withYear ? parseMonthText(text, locale) : parseMonthNameText(text, locale, new Date(year, 0, 1))
-    if (!read || read < start || read > end) return false
-    setValue(startOfMonth(read))
-    return true
-  }
-
-  const months = useMemo(
-    () =>
-      Array.from({ length: 12 }, (_, m) => ({
-        value: m,
-        label: format(new Date(2000, m, 1), 'LLLL', { locale }),
-        disabled: new Date(year, m, 1) < start || new Date(year, m, 1) > end,
-      })),
-    [locale, year, start.getTime(), end.getTime()],
-  )
-  const years = useMemo(
-    () =>
-      Array.from({ length: end.getFullYear() - start.getFullYear() + 1 }, (_, i) => ({
-        value: start.getFullYear() + i,
-        label: String(start.getFullYear() + i),
-      })),
-    [start.getFullYear(), end.getFullYear()],
-  )
-
-  return (
-    <PickerShell
-      open={open}
-      onOpenChange={setOpen}
-      size={size}
-      variant={variant}
-      invalid={invalidOf(invalid, control['aria-invalid'])}
-      disabled={disabled}
-      readOnly={readOnly}
-      icon="calendar"
-      display={value && formatDate ? formatDate(value) : formatted}
-      placeholder={placeholder}
-      closeLabel={labels?.close}
-      controlRef={ref}
-      controlProps={controlAttributes(control)}
-      formValues={[{ slot: 'value', name, value: value ? format(value, 'yyyy-MM') : '' }]}
-      required={control.required}
-      header={
-        <PickerInput
-          ref={input}
-          aria-label={labels?.field || placeholder || 'Month'}
-          placeholder={placeholder}
-          formatted={formatted}
-          onText={readMonth}
-          onEnter={() => setOpen(false)}
-          className="flex-1"
-        />
-      }
-      initialFocus={input}
-      popupClassName="w-[max(var(--anchor-width,0px),14rem)]"
-      id={id}
-      from={from}
-      effect={effect}
-      hideSource={hideSource}
-      tier={tier}
-      className={className}
-    >
-      <div className={cn(dividedColumns, 'h-56')}>
-        <ScrollColumn
-          label={labels?.month ?? fieldLabel(locale, 'month')}
-          options={months}
-          value={value?.getMonth() ?? null}
-          follow={value?.getMonth() ?? today.getMonth()}
-          onValueChange={m => pick(new Date(year, m, 1))}
-          className="min-w-0 flex-1"
-        />
-        {withYear && (
-          <ScrollColumn
-            label={labels?.year ?? fieldLabel(locale, 'year')}
-            options={years}
-            value={value?.getFullYear() ?? null}
-            follow={year}
-            onValueChange={y => pick(new Date(y, value?.getMonth() ?? today.getMonth(), 1))}
-            className="min-w-0 flex-1"
-          />
-        )}
-      </div>
-    </PickerShell>
-  )
-})
-
-export type { MonthPickerLabels, MonthPickerProps }
-export { MonthPicker }
-
-export default MonthPicker