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

package/components/inputs/textarea/examples.mdx

@@ -1,126 +0,0 @@
-import Textarea from './index'
-import Button from '../../button'
-import Input, { InputGroup, Label } from '../input'
-
-# Basics
-
-## Basic
-
-Type past the third line: the box grows with the text, then scrolls at eight rows.
-
-<div className="w-72 max-w-full">
-  <Textarea placeholder="Write a note..." />
-</div>
-
-## Variants
-
-`borderless` is invisible until hovered or focused; `bordered` is framed at rest.
-
-<div className="flex flex-col gap-3 w-72 max-w-full">
-  <Textarea minRows={2} placeholder="Borderless" />
-  <Textarea variant="bordered" minRows={2} placeholder="Bordered" />
-</div>
-
-## With a Label
-
-`Label` pairs with the textarea through `htmlFor` and `id`.
-
-<div className="flex flex-col gap-1 w-72 max-w-full">
-  <Label htmlFor="textarea-bio">Bio</Label>
-  <Textarea id="textarea-bio" placeholder="A few words about you" />
-</div>
-
-## Rows
-
-`minRows` sets the empty height and `maxRows` where growth stops. Equal values give a fixed box.
-
-<div className="flex flex-col gap-3 w-72 max-w-full">
-  <Textarea minRows={1} maxRows={4} placeholder="Starts at one row, grows to four" />
-  <Textarea minRows={4} maxRows={4} placeholder="Fixed at four rows" />
-</div>
-
-## Compact
-
-`size="compact"` steps the text and padding down the size ladder.
-
-<div className="w-72 max-w-full">
-  <Textarea size="compact" minRows={2} placeholder="Dense note..." />
-</div>
-
-# States
-
-## Invalid
-
-`invalid` turns the field destructive.
-
-<div className="flex flex-col gap-1 w-72 max-w-full">
-  <Label htmlFor="textarea-invalid" invalid>
-    Message
-  </Label>
-  <Textarea id="textarea-invalid" defaultValue="Too short" invalid />
-</div>
-
-## Disabled
-
-<div className="w-72 max-w-full">
-  <Textarea defaultValue="Read only for now" disabled />
-</div>
-
-# Composition
-
-## In a form
-
-One row lines up with an Input of the same size, so the two stack without a seam.
-
-<div className="flex flex-col gap-3 w-72 max-w-full">
-  <div className="flex flex-col gap-1">
-    <Label htmlFor="textarea-form-title">Title</Label>
-    <Input id="textarea-form-title" placeholder="Short summary" />
-  </div>
-  <div className="flex flex-col gap-1">
-    <Label htmlFor="textarea-form-body">Description</Label>
-    <Textarea id="textarea-form-body" minRows={1} placeholder="Add details" />
-  </div>
-</div>
-
-## In a group
-
-Inside `InputGroup.Field` the textarea joins the group's hover, and the field's `error` turns it destructive.
-
-<InputGroup>
-  <InputGroup.Field index={0} label="Name" placeholder="Your name" />
-  <InputGroup.Field index={1} label="Feedback" error="Tell us a little more.">
-    <Textarea defaultValue="Nice" />
-  </InputGroup.Field>
-</InputGroup>
-
-## Uncontrolled
-
-With neither `value` nor `onChange` the DOM holds the text, so `ref` is the real `<textarea>`: `defaultValue`, `ref.current.value = ''` and a native form reset behave as on any textarea. Type, grow the box, then reset: the text goes back to its default and the box re-fits.
-
-<form className="flex flex-col items-start gap-2 w-72 max-w-full">
-  <Textarea name="note" aria-label="Note" defaultValue={'First line\nSecond line\nThird line\nFourth line'} />
-  <Button type="reset" variant="ghost">Reset</Button>
-</form>
-
-```tsx
-const ref = useRef<HTMLTextAreaElement>(null)
-
-<Textarea ref={ref} name="note" defaultValue="Hello" />
-
-ref.current.value // what was typed
-ref.current.value = '' // clears it
-```
-
-
-Choose one mode per instance. A `defaultValue` with an `onChange` that is passed on some renders and not others would flip the textarea between DOM-held and controlled text.
-
-## With a form library
-
-A `register()`-style form needs the DOM mode, but its `onChange` takes an event where the Textarea's takes a string, so the result can't be spread whole. Only that key clashes: take `onChange` out and pass it as `onInput`, the event handler that fires on every keystroke. `rest` carries `name`, `ref` and `onBlur` straight through.
-
-```tsx
-const { onChange, ...rest } = register('note')
-
-<Textarea {...rest} onInput={onChange} />
-```

package/components/inputs/textarea/index.tsx

@@ -1,207 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the multi-line twin of
- * Input, on the same field box (`useFieldBox` in `lib/field-classes.ts`); the box grows with its text from `minRows` to `maxRows`, the way
- * InputMessage's composer does.
- */
-
-import { Field } from '@base-ui/react/field'
-import { forwardRef, type TextareaHTMLAttributes, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
-import { type FieldVariant, focusControlOnPress, useFieldBox } from '../../../lib/field-classes'
-import type { SizeVariant } from '../../../lib/size-context'
-import { useControllableState } from '../../../lib/use-controllable-state'
-import { cn } from '../../../lib/utils'
-
-interface TextareaProps
-  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'value' | 'defaultValue' | 'rows'> {
-  /** Placeholder text. */
-  placeholder?: string
-  /** Controlled value. Pair with `onChange`. */
-  value?: string
-  /** Initial value when uncontrolled. Defaults to `''`. */
-  defaultValue?: string
-  /** Called with the new value on every change. With neither `value` nor `onChange` the textarea keeps its text in the DOM, for `register()`-style forms that read it through a `ref`; choose one mode per instance, since a `defaultValue` with a conditional `onChange` flips between the two. A form library's event handler goes in `onInput`, not here. */
-  onChange?: (value: string) => void
-  /** Rows shown when empty; the box never gets shorter. Defaults to `3`. */
-  minRows?: number
-  /** Rows the box grows to before it scrolls. Set it to `minRows` for a fixed height. Defaults to `8`. */
-  maxRows?: number
-  /** 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 textarea. Defaults to `false`. */
-  disabled?: boolean
-  /** Keeps the value selectable but not editable, with the field's read-only look. Defaults to the surrounding Field's `readOnly`. */
-  readOnly?: boolean
-  /** Marks the textarea required. Defaults to the surrounding Field's `required`. */
-  required?: boolean
-  /** Pins the textarea to one step of the size ladder (36px default, 28px compact): its text and padding follow, so one row matches an Input. Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Classes for the ringed box around the textarea. */
-  className?: string
-}
-
-// Literal table: one row plus this padding lands on the ladder's control
-// height (20px leading + 8px × 2 = 36px, + 4px × 2 = 28px).
-const PADDING_Y: Record<SizeVariant, string> = {
-  default: 'py-2',
-  compact: 'py-1',
-}
-
-/**
- * Multi-line text field that grows with what you type.
- *
- * It sits on the same ground as Input: bare text at rest (or framed, with
- * `variant="bordered"`), a muted fill with a hairline ring on hover, the
- * card ground on focus, a destructive ring when `invalid`. The box starts at `minRows`, grows line by line as text wraps,
- * and scrolls once it reaches `maxRows`. One row lines up with an Input of
- * the same size, so the two stack in a form without a seam. It is
- * uncontrolled with `defaultValue`, or controlled with `value` + `onChange`,
- * fills the width of its container, and joins a Base UI `Field` when placed
- * inside one. Pair it with a `Label` (see Input) through `htmlFor` / `id`,
- * or put it in an `InputGroup.Field` to label it, join the group's hover and
- * take the field's error.
- *
- * With neither `value` nor `onChange` it is a plain uncontrolled `<textarea>`:
- * the DOM holds the text, `ref` is the real element, and `defaultValue`,
- * `ref.current.value = ''` and a native `form.reset()` all behave as on any
- * textarea (the box re-fits on input and on a form reset), which is what a form
- * library reading fields through refs needs. Choose one mode per instance:
- * a `defaultValue` with an `onChange` that is sometimes passed and sometimes
- * not would flip the textarea between DOM-held and controlled text.
- *
- * `register()`'s result can't be spread whole, because its `onChange` takes an
- * event where this one takes a string, but only that key clashes. Pull it out
- * and hand it to `onInput`, which is the event handler and fires on every
- * keystroke: `const { onChange, ...rest } = register('x')` then
- * `<Textarea {...rest} onInput={onChange} />` (`rest` carries `name`, `ref`
- * and `onBlur`).
- *
- * @example {@include ./examples.mdx}
- */
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      value: valueProp,
-      defaultValue = '',
-      onChange: onChangeProp,
-      minRows = 3,
-      maxRows = 8,
-      variant = 'borderless',
-      invalid,
-      disabled,
-      readOnly,
-      required,
-      size,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const [value, onChange] = useControllableState(valueProp, defaultValue, onChangeProp)
-    const domState = valueProp === undefined && onChangeProp === undefined
-
-    const textareaRef = useRef<HTMLTextAreaElement | null>(null)
-    const box = useFieldBox({ variant, invalid, disabled, readOnly, required, size })
-
-    const resize = useCallback(() => {
-      const el = textareaRef.current
-      if (!el) return
-      el.style.height = 'auto'
-      const lineHeight = Number.parseFloat(getComputedStyle(el).lineHeight)
-      const max = lineHeight * Math.max(maxRows, minRows)
-      el.style.height = `${Math.min(Math.max(el.scrollHeight, lineHeight * minRows), max)}px`
-      el.style.overflowY = el.scrollHeight > max ? 'auto' : 'hidden'
-    }, [minRows, maxRows])
-
-    // Layout effect: the new height lands before paint, so a wrapped line
-    // never flashes a scrollbar. `value` and the size step aren't read here,
-    // but they change the content height `resize` measures.
-    useLayoutEffect(resize, [resize, value, box.size.variant])
-
-    // DOM-held text changes without a render: re-fit when code assigns `ref.current.value` (the
-    // setter is wrapped on the element, over React's own value tracker) and once a native form
-    // reset has put the default back.
-    useEffect(() => {
-      const el = textareaRef.current
-      if (!domState || !el) return
-      const own = Object.getOwnPropertyDescriptor(el, 'value')
-      const inherited = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')
-      const base = own ?? inherited
-      const set = base?.set
-      if (set) {
-        Object.defineProperty(el, 'value', {
-          configurable: true,
-          enumerable: base.enumerable,
-          get: base.get,
-          set(next: string) {
-            set.call(this, next)
-            resize()
-          },
-        })
-      }
-      const form = el.form
-      const onReset = () => setTimeout(resize)
-      form?.addEventListener('reset', onReset)
-      return () => {
-        form?.removeEventListener('reset', onReset)
-        if (own) Object.defineProperty(el, 'value', own)
-        else if (set) Reflect.deleteProperty(el, 'value')
-      }
-    }, [domState, resize])
-
-    // The first measure can run while an ancestor is still at (near-)zero
-    // width. Width-gated, so the observer never loops on its own height writes.
-    useEffect(() => {
-      const el = textareaRef.current
-      if (!el) return
-      let lastWidth = el.offsetWidth
-      const observer = new ResizeObserver(() => {
-        if (el.offsetWidth === lastWidth) return
-        lastWidth = el.offsetWidth
-        resize()
-      })
-      observer.observe(el)
-      return () => observer.disconnect()
-    }, [resize])
-
-    return (
-      // biome-ignore lint/a11y/noStaticElementInteractions: the textarea is the focusable control; the box only forwards pointer focus from its padding.
-      <div
-        onMouseDown={focusControlOnPress(textareaRef)}
-        {...box.props}
-        className={cn(box.props.className, 'flex', PADDING_Y[box.size.variant], className)}
-      >
-        {/* Field.Control rendered as a <textarea>: on its own a plain
-            textarea, inside a Field.Root it joins the field's wiring. The
-            rest props ride on the render element, since Field.Control types
-            its own as an <input>'s; Base UI merges the two. */}
-        <Field.Control
-          ref={(node: HTMLElement | null) => {
-            const textarea = node as HTMLTextAreaElement | null
-            textareaRef.current = textarea
-            if (typeof ref === 'function') ref(textarea)
-            else if (ref) ref.current = textarea
-          }}
-          render={<textarea rows={minRows} {...props} />}
-          {...(domState ? { defaultValue, onChange: resize } : { value, onChange: e => onChange(e.target.value) })}
-          disabled={box.disabled}
-          readOnly={box.readOnly}
-          required={box.required}
-          aria-invalid={box.invalid || undefined}
-          className={cn(
-            'block w-full resize-none rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]',
-            box.size.text,
-            'weight-normal',
-          )}
-        />
-      </div>
-    )
-  },
-)
-
-Textarea.displayName = 'Textarea'
-
-export type { TextareaProps }
-export { Textarea }
-export default Textarea

package/components/navigation/navigation-menu/examples.mdx

@@ -1,136 +0,0 @@
-import NavigationMenu from './index'
-import { BookOpen, Boxes, Code, LifeBuoy, Newspaper, Palette, Rocket, Users } from 'lucide-react'
-
-# Basic
-
-Hover or press a trigger: the panel melts out of it. Move to the next trigger and the one panel springs to the new content, which slides in from that side.
-
-<div className="flex min-h-[320px] w-full justify-center">
-  <NavigationMenu>
-    <NavigationMenu.List>
-      <NavigationMenu.Indicator />
-      <NavigationMenu.Item value="product">
-        <NavigationMenu.Trigger>Product</NavigationMenu.Trigger>
-        <NavigationMenu.Content className="grid w-[26rem] grid-cols-2 gap-1">
-          <NavigationMenu.Link href="#components" icon={Boxes} description="Every control, on one size ladder.">Components</NavigationMenu.Link>
-          <NavigationMenu.Link href="#themes" icon={Palette} description="Tokens for light, dark and your brand.">Themes</NavigationMenu.Link>
-          <NavigationMenu.Link href="#motion" icon={Rocket} description="Springs, goo and fluid hover.">Motion</NavigationMenu.Link>
-          <NavigationMenu.Link href="#code" icon={Code} description="Typed, documented, tree-shaken.">For developers</NavigationMenu.Link>
-        </NavigationMenu.Content>
-      </NavigationMenu.Item>
-      <NavigationMenu.Item value="resources">
-        <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
-        <NavigationMenu.Content className="flex w-64 flex-col">
-          <NavigationMenu.Link href="#docs" icon={BookOpen}>Documentation</NavigationMenu.Link>
-          <NavigationMenu.Link href="#blog" icon={Newspaper}>Blog</NavigationMenu.Link>
-          <NavigationMenu.Link href="#community" icon={Users}>Community</NavigationMenu.Link>
-          <NavigationMenu.Link href="#support" icon={LifeBuoy}>Support</NavigationMenu.Link>
-        </NavigationMenu.Content>
-      </NavigationMenu.Item>
-      <NavigationMenu.Item>
-        <NavigationMenu.Link href="#pricing">Pricing</NavigationMenu.Link>
-      </NavigationMenu.Item>
-    </NavigationMenu.List>
-  </NavigationMenu>
-</div>
-
-# Current page
-
-`active` on a link marks the current page: the indicator rests under it while no panel is open, and travels to whichever item opens.
-
-<div className="flex min-h-[240px] w-full justify-center">
-  <NavigationMenu>
-    <NavigationMenu.List>
-      <NavigationMenu.Indicator />
-      <NavigationMenu.Item>
-        <NavigationMenu.Link href="#home">Home</NavigationMenu.Link>
-      </NavigationMenu.Item>
-      <NavigationMenu.Item>
-        <NavigationMenu.Link href="#projects" active>Projects</NavigationMenu.Link>
-      </NavigationMenu.Item>
-      <NavigationMenu.Item value="team">
-        <NavigationMenu.Trigger>Team</NavigationMenu.Trigger>
-        <NavigationMenu.Content className="flex w-56 flex-col">
-          <NavigationMenu.Link href="#members">Members</NavigationMenu.Link>
-          <NavigationMenu.Link href="#roles">Roles</NavigationMenu.Link>
-          <NavigationMenu.Link href="#invites">Invites</NavigationMenu.Link>
-        </NavigationMenu.Content>
-      </NavigationMenu.Item>
-    </NavigationMenu.List>
-  </NavigationMenu>
-</div>
-
-# Effects
-
-The morph options of every overlay: here the panel grows as a plain morph on the moderate tier.
-
-<div className="flex min-h-[240px] w-full justify-center">
-  <NavigationMenu effect="morph" tier="moderate">
-    <NavigationMenu.List>
-      <NavigationMenu.Item value="docs">
-        <NavigationMenu.Trigger>Docs</NavigationMenu.Trigger>
-        <NavigationMenu.Content className="flex w-56 flex-col">
-          <NavigationMenu.Link href="#start">Getting started</NavigationMenu.Link>
-          <NavigationMenu.Link href="#guides">Guides</NavigationMenu.Link>
-          <NavigationMenu.Link href="#api">API reference</NavigationMenu.Link>
-        </NavigationMenu.Content>
-      </NavigationMenu.Item>
-      <NavigationMenu.Item value="company">
-        <NavigationMenu.Trigger>Company</NavigationMenu.Trigger>
-        <NavigationMenu.Content className="flex w-48 flex-col">
-          <NavigationMenu.Link href="#about">About</NavigationMenu.Link>
-          <NavigationMenu.Link href="#careers">Careers</NavigationMenu.Link>
-        </NavigationMenu.Content>
-      </NavigationMenu.Item>
-    </NavigationMenu.List>
-  </NavigationMenu>
-</div>
-
-# Compact
-
-`size="compact"` steps the strip and its panels down the size ladder.
-
-<div className="flex min-h-[240px] w-full justify-center">
-  <NavigationMenu size="compact">
-    <NavigationMenu.List>
-      <NavigationMenu.Indicator />
-      <NavigationMenu.Item value="product">
-        <NavigationMenu.Trigger>Product</NavigationMenu.Trigger>
-        <NavigationMenu.Content className="flex w-56 flex-col">
-          <NavigationMenu.Link href="#components" icon={Boxes} description="Every control.">Components</NavigationMenu.Link>
-          <NavigationMenu.Link href="#themes" icon={Palette} description="Tokens and modes.">Themes</NavigationMenu.Link>
-        </NavigationMenu.Content>
-      </NavigationMenu.Item>
-      <NavigationMenu.Item>
-        <NavigationMenu.Link href="#pricing">Pricing</NavigationMenu.Link>
-      </NavigationMenu.Item>
-    </NavigationMenu.List>
-  </NavigationMenu>
-</div>
-
-# Landmark and slots
-
-The root is the `<nav>`: it takes a ref and HTML attributes, so give it an `aria-label`. `asChild` on `Trigger` and
-`Content` makes them the element you pass, which keeps its type and ref: here the panel is a real `ul` of `li` links.
-
-<div className="flex min-h-[240px] w-full justify-center">
-  <NavigationMenu aria-label="Main">
-    <NavigationMenu.List>
-      <NavigationMenu.Item value="docs">
-        <NavigationMenu.Trigger asChild>
-          <button type="button">Docs</button>
-        </NavigationMenu.Trigger>
-        <NavigationMenu.Content asChild className="m-0 flex w-56 list-none flex-col">
-          <ul>
-            <li><NavigationMenu.Link href="#start" icon={BookOpen}>Getting started</NavigationMenu.Link></li>
-            <li><NavigationMenu.Link href="#guides" icon={Newspaper}>Guides</NavigationMenu.Link></li>
-            <li><NavigationMenu.Link href="#api" icon={Code}>API reference</NavigationMenu.Link></li>
-          </ul>
-        </NavigationMenu.Content>
-      </NavigationMenu.Item>
-      <NavigationMenu.Item>
-        <NavigationMenu.Link href="#pricing">Pricing</NavigationMenu.Link>
-      </NavigationMenu.Item>
-    </NavigationMenu.List>
-  </NavigationMenu>
-</div>