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

package/components/inputs/number-input/examples.mdx

@@ -1,69 +0,0 @@
-import NumberInput from './index'
-import Field from '../field'
-
-# Basics
-
-## Number input
-
-Type a number, or step it with minus and plus. Hold a button to repeat; the arrow keys step too, Shift by ten.
-
-<div className="w-56 max-w-full">
-  <NumberInput variant="bordered" defaultValue={4} min={0} max={20} inputProps={{ 'aria-label': 'Quantity' }} />
-</div>
-
-## Formats
-
-`format` takes `Intl.NumberFormat` options and `locale` the locale. Typing in the shown form parses back.
-
-<div className="flex flex-col gap-3 w-56 max-w-full">
-  <NumberInput variant="bordered" defaultValue={1234.5} format={{ style: 'currency', currency: 'EUR' }} locale="en-US" inputProps={{ 'aria-label': 'Price in euros, US format' }} />
-  <NumberInput variant="bordered" defaultValue={1234.5} format={{ style: 'currency', currency: 'EUR' }} locale="sk-SK" inputProps={{ 'aria-label': 'Price in euros, Slovak format' }} />
-  <NumberInput variant="bordered" defaultValue={0.25} step={0.05} format={{ style: 'percent' }} inputProps={{ 'aria-label': 'Discount' }} />
-</div>
-
-## Units and scrubbing
-
-`endAdornment` holds a unit. With `scrub`, the start adornment is a handle: drag it sideways to change the value.
-
-<div className="flex flex-col gap-3 w-56 max-w-full">
-  <NumberInput variant="bordered" defaultValue={72} endAdornment="kg" inputProps={{ 'aria-label': 'Weight in kilograms' }} />
-  <NumberInput variant="bordered" defaultValue={320} min={0} startAdornment="W" scrub stepper={false} inputProps={{ 'aria-label': 'Width' }} />
-</div>
-
-## Compact
-
-The compact step shrinks the box, the text and the steppers together.
-
-<div className="w-44 max-w-full">
-  <NumberInput size="compact" variant="bordered" defaultValue={10} step={5} inputProps={{ 'aria-label': 'Spacing' }} />
-</div>
-
-# Composition
-
-## In a Field
-
-Inside a Field it is labelled and takes the field's state: here invalid, with its message.
-
-<Field invalid className="w-56 max-w-full">
-  <Field.Label>Guests</Field.Label>
-  <NumberInput defaultValue={12} max={10} inputProps={{ 'aria-label': 'Guests' }} />
-  <Field.Error>The room seats ten.</Field.Error>
-</Field>
-
-## Input props
-
-`inputProps` goes onto the `<input>` itself, after the field's own, so an accessible name, `autoFocus`, `autoComplete`, `inputMode` or a key handler reaches it. `onValueChange` also hears Base UI's change details; `reason` tells typing from a stepper press.
-
-<div className="w-56 max-w-full">
-  <NumberInput variant="bordered" defaultValue={2} min={0} inputProps={{ 'aria-label': 'Seats', 'aria-describedby': 'seats-help', autoComplete: 'off', inputMode: 'numeric' }} />
-  <p id="seats-help" className="mt-1 text-caption text-muted-foreground">Described by this line.</p>
-</div>
-
-# States
-
-Disabled dims the field and its steppers; read-only hides the steppers and keeps the value selectable.
-
-<div className="flex flex-col gap-3 w-56 max-w-full">
-  <NumberInput variant="bordered" defaultValue={3} disabled inputProps={{ 'aria-label': 'Disabled count' }} />
-  <NumberInput variant="bordered" defaultValue={3} readOnly inputProps={{ 'aria-label': 'Read-only count' }} />
-</div>

package/components/inputs/number-input/index.tsx

@@ -1,221 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): a number field on Base
- * UI's NumberField, drawn on the shared field box (`useFieldBox` in
- * `lib/field-classes.ts`) like Input, with its steppers as field actions
- * (`FIELD_ACTION_BOX` / `FIELD_ACTION_END` in `lib/field-variants.ts`).
- * `inputProps` reaches the `<input>` (last, so `aria-*`, `autoFocus`, handlers and `id`
- * win), and `onValueChange` hears Base UI's change details as a second argument.
- */
-
-import { NumberField, type NumberFieldRootChangeEventDetails } from '@base-ui/react/number-field'
-import { forwardRef, type InputHTMLAttributes, type ReactNode, useRef } from 'react'
-import {
-  FIELD_ACTION_BOX,
-  FIELD_ACTION_END,
-  FIELD_ACTION_RADIUS,
-  type FieldVariant,
-  fieldActionClasses,
-  focusControlOnPress,
-  useFieldBox,
-} from '../../../lib/field-classes'
-import { useIcon } from '../../../lib/icon-context'
-import { useShape } from '../../../lib/shape-context'
-import type { SizeVariant } from '../../../lib/size-context'
-import { cn } from '../../../lib/utils'
-import { InputAdornment } from '../input'
-
-interface NumberInputProps {
-  /** Controlled value; `null` while the field is empty. Pair with `onValueChange`. */
-  value?: number | null
-  /** Initial value when uncontrolled. Empty when unset. */
-  defaultValue?: number
-  /** Called with the new value as it changes (typing, steppers, arrow keys, scrubbing); `null` when cleared. The second argument is Base UI's change details: `reason` names the cause (`"input-change"`, `"keyboard"`, `"increment-press"`, `"scrub"`, …) and `event` the DOM event. */
-  onValueChange?: (value: number | null, details: NumberFieldRootChangeEventDetails) => void
-  /** Called once a change is done: on blur after typing, on release after a stepper press or a scrub. */
-  onValueCommitted?: (value: number | null) => void
-  /** Lowest value the steppers, arrow keys and blur clamp to. */
-  min?: number
-  /** Highest value the steppers, arrow keys and blur clamp to. */
-  max?: number
-  /** Amount a stepper press or an arrow key adds. Defaults to `1`. */
-  step?: number
-  /** Amount with Alt held. Defaults to `0.1`. */
-  smallStep?: number
-  /** Amount with Shift held. Defaults to `10`. */
-  largeStep?: number
-  /** How the value is shown and read back: `Intl.NumberFormat` options, e.g. `{ style: 'currency', currency: 'EUR' }` or `{ style: 'percent' }`. */
-  format?: Intl.NumberFormatOptions
-  /** Locale for formatting and parsing (`"sk-SK"` writes `1 234,5`). Defaults to the browser's. */
-  locale?: Intl.LocalesArgument
-  /** Placeholder text while empty. */
-  placeholder?: string
-  /** Shows the minus and plus buttons. Defaults to `true`. */
-  stepper?: boolean
-  /** Turns `startAdornment` into a scrub handle: drag it sideways to change the value. Defaults to `false`. */
-  scrub?: boolean
-  /** Lets the mouse wheel change the value while the field is focused and hovered. Defaults to `false`. */
-  wheel?: boolean
-  /** Content before the number: a label such as `"W"` (a scrub handle with `scrub`), a currency sign, an icon. */
-  startAdornment?: ReactNode
-  /** Content after the number, before the steppers: a unit such as `"kg"`. */
-  endAdornment?: ReactNode
-  /** Accessible name of the minus button. Defaults to `"Decrease"`. */
-  decrementLabel?: string
-  /** Accessible name of the plus button. Defaults to `"Increase"`. */
-  incrementLabel?: string
-  /** Names the value when the form is submitted. */
-  name?: string
-  /** Id of the input, for a `Label`'s `htmlFor`. Inside a Field it is wired for you. */
-  id?: string
-  /** Marks the value required. Defaults to the surrounding Field's `required`. */
-  required?: boolean
-  /** Framed at rest, or invisible until hovered or focused. Defaults to `"borderless"`. */
-  variant?: FieldVariant
-  /** Marks the value invalid: the field turns destructive and sets `aria-invalid`. Defaults to `false`. */
-  invalid?: boolean
-  /** Disables the field and its steppers. Defaults to `false`. */
-  disabled?: boolean
-  /** Shows the value without letting it change; the steppers hide. Defaults to `false`. */
-  readOnly?: boolean
-  /** Pins the field to one step of the size ladder (36px default, 28px compact). Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Classes for the ringed box. */
-  className?: string
-  /** Props for the `<input>` itself, applied last so they win: `aria-label`, `aria-describedby`, `autoFocus`, `onKeyDown`, `id`, `autoComplete`, `inputMode`. Use the root `name`; a `name` here posts the formatted text. `disabled`, `required`, `readOnly` and `type` stay with the root props and the surrounding Field; a `className` joins the input's own. */
-  inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size'>
-}
-
-/**
- * Number field with steppers, formatting and an optional scrub handle.
- *
- * It sits on the same ground as Input: bare at rest (or framed with
- * `variant="bordered"`), a muted wash on hover, the card on focus, a
- * destructive ring when `invalid`. Minus and plus sit inside the ring at the
- * end; holding one repeats, the arrow keys step (Shift for `largeStep`, Alt
- * for `smallStep`), and both stop at `min` / `max`. `format` takes
- * `Intl.NumberFormat` options and `locale` the locale, so a value reads
- * `€1,234.50` or `1 234,5 %` and typing in that form parses back. With
- * `scrub`, the start adornment becomes a handle: drag it sideways to change
- * the value, as in a design tool. The value is a number, or `null` while
- * empty: uncontrolled with `defaultValue`, controlled with `value` +
- * `onValueChange`. Behavior comes from Base UI's NumberField; inside a Field
- * it is labelled and takes the field's state.
- *
- * @example {@include ./examples.mdx}
- */
-const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
-  (
-    {
-      value,
-      defaultValue,
-      onValueChange,
-      onValueCommitted,
-      format,
-      locale,
-      placeholder,
-      stepper = true,
-      scrub = false,
-      wheel = false,
-      startAdornment,
-      endAdornment,
-      decrementLabel = 'Decrease',
-      incrementLabel = 'Increase',
-      id,
-      variant = 'borderless',
-      invalid,
-      disabled,
-      readOnly,
-      required,
-      size,
-      className,
-      inputProps,
-      ...props
-    },
-    ref,
-  ) => {
-    const inputRef = useRef<HTMLInputElement | null>(null)
-    const box = useFieldBox({ variant, invalid, disabled, readOnly, required, size })
-    const shape = useShape()
-    const Minus = useIcon('minus')
-    const Plus = useIcon('plus')
-    const Arrows = useIcon('chevrons-up-down')
-    const stepClasses = cn(fieldActionClasses, FIELD_ACTION_BOX[box.size.variant], FIELD_ACTION_RADIUS[shape.variant])
-
-    const start = startAdornment != null && (
-      <InputAdornment size={size}>
-        {scrub ? (
-          <NumberField.ScrubArea className="cursor-ew-resize select-none">
-            {startAdornment}
-            {/* The pointer is locked while scrubbing; this stands in for it. */}
-            <NumberField.ScrubAreaCursor className="text-foreground">
-              <Arrows size={box.size.icon} strokeWidth={2} className="rotate-90" />
-            </NumberField.ScrubAreaCursor>
-          </NumberField.ScrubArea>
-        ) : (
-          startAdornment
-        )}
-      </InputAdornment>
-    )
-
-    return (
-      <NumberField.Root
-        id={id}
-        value={value}
-        defaultValue={defaultValue}
-        onValueChange={(next, details) => onValueChange?.(next, details)}
-        onValueCommitted={next => onValueCommitted?.(next)}
-        format={format}
-        locale={locale}
-        allowWheelScrub={wheel}
-        disabled={box.disabled}
-        readOnly={box.readOnly}
-        required={box.required}
-        {...props}
-      >
-        <NumberField.Group
-          onMouseDown={focusControlOnPress(inputRef)}
-          {...box.props}
-          className={cn(box.props.className, 'flex items-center', box.size.gap, box.size.control, className)}
-        >
-          {start}
-          <NumberField.Input
-            ref={node => {
-              inputRef.current = node
-              if (typeof ref === 'function') ref(node)
-              else if (ref) ref.current = node
-            }}
-            placeholder={placeholder}
-            aria-invalid={box.invalid || undefined}
-            {...inputProps}
-            className={cn(
-              'w-full min-w-0 rounded-none bg-transparent text-foreground tabular-nums placeholder:text-muted-foreground outline-none font-[inherit] weight-normal',
-              box.size.text,
-              inputProps?.className,
-            )}
-          />
-          <InputAdornment size={size}>{endAdornment}</InputAdornment>
-          {stepper && !box.readOnly && (
-            // The steppers sit side by side, the last 4px inside the ring.
-            <span className="flex shrink-0 items-center">
-              <NumberField.Decrement aria-label={decrementLabel} className={stepClasses}>
-                <Minus size={box.size.icon} strokeWidth={1.5} />
-              </NumberField.Decrement>
-              <NumberField.Increment
-                aria-label={incrementLabel}
-                className={cn(stepClasses, FIELD_ACTION_END[box.size.variant])}
-              >
-                <Plus size={box.size.icon} strokeWidth={1.5} />
-              </NumberField.Increment>
-            </span>
-          )}
-        </NumberField.Group>
-      </NumberField.Root>
-    )
-  },
-)
-
-NumberInput.displayName = 'NumberInput'
-
-export type { NumberInputProps }
-export { NumberInput }
-export default NumberInput

package/components/inputs/radio/examples.mdx

@@ -1,77 +0,0 @@
-import Radio from './index'
-import { Label } from '../input'
-
-# Basic
-
-One option at a time; the selected background follows the pick.
-
-<Radio.Group defaultSelectedIndex={0}>
-  {['Option A', 'Option B', 'Option C'].map(label => (
-    <Radio key={label} label={label} />
-  ))}
-</Radio.Group>
-
-# Compact
-
-`size="compact"` pins every row to the 28px step of the size ladder.
-
-<Radio.Group size="compact" defaultSelectedIndex={1}>
-  {['Option A', 'Option B', 'Option C'].map(label => (
-    <Radio key={label} label={label} />
-  ))}
-</Radio.Group>
-
-# By value
-
-Give rows a `value` and select by it; the group then renders Base UI radios
-for form integration.
-
-<Radio.Group defaultValue="weekly">
-  <Radio value="daily" label="Daily digest" />
-  <Radio value="weekly" label="Weekly summary" />
-  <Radio value="never" label="Never" />
-</Radio.Group>
-
-# Bare
-
-A `Radio` without a `label` is just the circle, picked by its `value`. Lay bare radios out however you like inside a value-mode group, here with a description line each; the group draws no rows of its own and the arrow keys move between the circles.
-
-<Radio.Group defaultValue="standard" aria-label="Shipping" className="w-80 max-w-full gap-3">
-  <div className="flex items-start gap-3">
-    <Radio id="ship-standard" value="standard" className="mt-0.5" />
-    <div className="flex flex-col gap-1">
-      <Label htmlFor="ship-standard">Standard</Label>
-      <span className="text-caption text-muted-foreground">4–6 business days</span>
-    </div>
-  </div>
-  <div className="flex items-start gap-3">
-    <Radio id="ship-express" value="express" className="mt-0.5" />
-    <div className="flex flex-col gap-1">
-      <Label htmlFor="ship-express">Express</Label>
-      <span className="text-caption text-muted-foreground">1–2 business days</span>
-    </div>
-  </div>
-  <div className="flex items-start gap-3">
-    <Radio id="ship-pickup" value="pickup" disabled className="mt-0.5" />
-    <div className="flex flex-col gap-1">
-      <Label htmlFor="ship-pickup">Pick up in store</Label>
-      <span className="text-caption text-muted-foreground">Not available for this order</span>
-    </div>
-  </div>
-</Radio.Group>
-
-# Disabled
-
-`disabled` on a row dims it and the hover and arrow keys skip it; on the group it turns every radio off.
-
-<div className="flex flex-col gap-3">
-  <Radio.Group defaultValue="monthly">
-    <Radio value="monthly" label="Monthly" />
-    <Radio value="yearly" label="Yearly (coming soon)" disabled />
-    <Radio value="lifetime" label="Lifetime" />
-  </Radio.Group>
-  <Radio.Group defaultValue="monthly" disabled>
-    <Radio value="monthly" label="Monthly" />
-    <Radio value="yearly" label="Yearly" />
-  </Radio.Group>
-</div>