@create-ui/cli 0.5.8 → 0.5.9

package/dist/skills/createui/reference/chip.md

@@ -0,0 +1,115 @@
+<!-- GENERATED FILE - do not edit. Source: registry/ui/chip.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/chip.md -->
+
+# chip
+
+Interactive removable tag with closable, onClose and selected props; icon or Avatar auto-slots as the first child
+
+Install: `npx @create-ui/cli add chip`
+
+## Import
+
+```tsx
+import { Chip } from "@/components/ui/chip"
+```
+
+Also exported: `chipVariants`
+
+## Chip props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| variant | `neutral \| info \| danger \| success` | `neutral` |
+| appearance | `outline \| soft` | `outline` |
+| size | `xs \| sm \| md \| lg \| xl` | `lg` |
+| shape | `pill \| rounded` | `rounded` |
+| selected | `boolean` (controlled-only; Chip sets data-selected for styling but never toggles it itself (see chip-interactive)) | `false` |
+| disabled | `boolean` | `false` |
+| dragging | `boolean` (visual-only (drag shadow + data-dragging styles); drive it from your dnd library state, Chip wires no drag handlers) | `false` |
+| onClose | `(e: React.MouseEvent) => void` | - |
+| closable | `boolean` (shows the built-in close button; defaults to true when onClose is set, closable={false} hides it) | - |
+
+Extends `React.ComponentProps<"div">`.
+
+## Examples
+
+From `chip-demo`:
+
+```tsx
+"use client"
+
+import { RiCheckboxCircleFill, RiSparklingFill } from "@create-ui/assets/icons"
+
+import { Chip } from "@/components/ui/chip"
+
+export default function ChipDemo() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Chip shape="pill" variant="success" appearance="soft">
+        Live
+      </Chip>
+      <Chip shape="pill" variant="info">
+        In Review
+      </Chip>
+      <Chip shape="pill" variant="danger" appearance="soft">
+        Blocked
+      </Chip>
+      <Chip shape="pill">Draft</Chip>
+      <Chip shape="pill" variant="info" appearance="soft" selected>
+        <RiCheckboxCircleFill />
+        Approved
+      </Chip>
+      <Chip shape="pill" appearance="soft" closable onClose={() => {}}>
+        <RiSparklingFill />
+        Featured
+      </Chip>
+    </div>
+  )
+}
+```
+
+From `chip-with-icon`:
+
+```tsx
+import { RiFilter3Fill } from "@create-ui/assets/icons"
+
+import { Chip } from "@/components/ui/chip"
+
+export default function ChipWithIcon() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Chip variant="info">
+        <RiFilter3Fill />
+        Filter
+      </Chip>
+      <Chip variant="success" appearance="soft">
+        <RiFilter3Fill />
+        Filter
+      </Chip>
+      <Chip variant="danger" shape="pill">
+        <RiFilter3Fill />
+        Filter
+      </Chip>
+    </div>
+  )
+}
+```
+
+More: `npx @create-ui/cli view chip` or MCP `get_item_examples_from_registries` with "chip-demo" / "chip-example".
+
+## When to use
+
+Interactive or removable tags: filter rows, selected entities, tag-entry tokens. Passive status or count labels are `Badge`; primary actions are `Button`; a lone on/off form control is `Switch`.
+
+## Gotchas
+
+- Chip has NO `leadingIcon`/`avatar`/`flag` props. The first element child is auto-hoisted into the lead slot and force-sized by the chip's `size`; string children become the label:
+
+```tsx
+<Chip closable onClose={remove}><RiUserLine />Ayse Yilmaz</Chip>
+<Chip><Avatar size="2xs" stroke={false}><AvatarImage src={src} /></Avatar>Ayse</Chip>
+```
+
+- Hoisting means there is no trailing icon slot: an element placed AFTER the text still renders in the lead position, and wrapping the label in a `<span>` hoists it too. Keep the label as plain text; the only trailing affordance is the built-in close button.
+- `Avatar`, flag, and brand leads are auto-detected as media: the chip swaps to tighter uniform padding and clips the lead (circular under `shape="pill"`). Plain `Ri*` icons are not media. Never hand-size or hand-pad either kind.
+- The close button is built in; never append your own X icon. Its click stops propagation (root `onClick` will not fire) and it is mouse-only (no tabIndex, no key handler), so wire keyboard removal yourself if you need it.
+- `onClick` adds `role="button"` and a pointer cursor but NO Enter/Space handler. The root always has `tabIndex={0}` even without `onClick`, so purely decorative chips still land in the tab order.

package/dist/skills/createui/reference/close-button.md

@@ -0,0 +1,83 @@
+<!-- GENERATED FILE - do not edit. Source: registry/ui/close-button.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/close-button.md -->
+
+# close-button
+
+Icon-only X dismiss button for modals, toasts and overlays; neutral/inverse variants, four appearances, xs to 2xl sizes
+
+Install: `npx @create-ui/cli add close-button`
+
+## Import
+
+```tsx
+import { CloseButton } from "@/components/ui/close-button"
+```
+
+Also exported: `closeButtonVariants`
+
+## CloseButton props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| variant | `neutral \| inverse` (Theme-relative, not absolute luminance: the static-*-alpha tokens it uses remap under .dark, so neutral tracks the theme background and inverse pairs with theme-inverted surfaces like bg-strongest panels.) | `neutral` |
+| appearance | `solid \| outline \| ghost \| soft` | `ghost` |
+| size | `xs \| sm \| md \| lg \| xl \| 2xl` | `md` |
+| shape | `rounded \| pill \| square` (rounded is size-aware: the radius scales from rounded-xs at xs/sm up to rounded-lg at 2xl via compound variants.) | `rounded` |
+| asChild | `boolean` (Drops the built-in X icon; you must supply your own child element. Also stops setting type=button and maps disabled to aria-disabled plus tabIndex={-1} instead of the native disabled attribute.) | `false` |
+
+Extends `React.ComponentProps<"button">`.
+
+## Examples
+
+From `close-button-demo`:
+
+```tsx
+import { CloseButton } from "@/components/ui/close-button"
+
+export default function CloseButtonDemo() {
+  return <CloseButton />
+}
+```
+
+From `close-button-composition`:
+
+```tsx
+import { RiInformationFill } from "@create-ui/assets/icons"
+
+import {
+  InlineAlert,
+  InlineAlertClose,
+  InlineAlertContent,
+  InlineAlertHeading,
+  InlineAlertIcon,
+  InlineAlertTitle,
+} from "@/components/ui/inline-alert"
+
+export default function CloseButtonComposition() {
+  return (
+    <InlineAlert variant="info">
+      <InlineAlertIcon>
+        <RiInformationFill />
+      </InlineAlertIcon>
+      <InlineAlertContent>
+        <InlineAlertHeading>
+          <InlineAlertTitle>Heads up</InlineAlertTitle>
+        </InlineAlertHeading>
+      </InlineAlertContent>
+      <InlineAlertClose />
+    </InlineAlert>
+  )
+}
+```
+
+More: `npx @create-ui/cli view close-button` or MCP `get_item_examples_from_registries` with "close-button-demo" / "close-button-example".
+
+## When to use
+The dismiss control for surfaces: dialog corners, toast trailing slots, banner and drawer close affordances. It renders RiCloseLargeLine with aria-label="Close" automatically, so bare `<CloseButton />` is the normal usage. For any other icon-only action use Button with `iconOnly` + `leadingIcon` + `aria-label`; for a labeled action ("Cancel", "Close") use Button with text; for removable tags use Chip's `closable`/`onClose`.
+
+## Gotchas
+- The X icon is baked in. Without `asChild`, `children` are silently discarded, so passing a custom icon child does nothing; the only icon-swap path is `asChild` with your own child element.
+- Do not hand-place CloseButton inside components that ship their own close slot: InlineAlert has `InlineAlertClose`, Toast has `ToastClose`, Chip has `closable`/`onClose`. Those wrappers handle placement and wiring (see close-button-composition).
+- `aria-label="Close"` is set before the props spread, so passing your own `aria-label` (e.g. "Dismiss notification") overrides it cleanly.
+- Despite the "static" prefix, the `static-black/white-alpha-*` classes behind outline/ghost/soft remap under `.dark`, so colors follow the theme. On a surface whose luminance is fixed regardless of theme (photo overlay, brand color), neither variant stays correct across modes.
+- Native render hard-sets `type="button"`, so it never submits a wrapping form; with `asChild` no `type` is set and the host element's default applies.
+- `disabled` behaves differently per render mode: native gets the real `disabled` attribute; `asChild` gets `aria-disabled` + `tabIndex={-1}` (base classes add `aria-disabled:pointer-events-none`).

package/dist/skills/createui/reference/command.md

@@ -0,0 +1,69 @@
+<!-- GENERATED FILE - do not edit. Source: registry/ui/command.tsx, registry/ui/dialog.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/command.md -->
+
+# command
+
+cmdk command palette; Command renders inline while CommandDialog opens as a modal (bundles dialog.tsx)
+
+Install: `npx @create-ui/cli add command`
+
+## Import
+
+```tsx
+import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "@/components/ui/command"
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+```
+
+## CommandDialog props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| title | `string` | `Command Palette` |
+| description | `string` | `Search for a command to run...` |
+| className | `string` | - |
+| showCloseButton | `boolean` | `false` |
+
+Extends `React.ComponentProps<typeof Dialog>`.
+
+## DialogContent props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| showCloseButton | `boolean` | `true` |
+
+Extends `React.ComponentProps<typeof DialogPrimitive.Content>`.
+
+## DialogFooter props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| showCloseButton | `boolean` | `false` |
+
+Extends `React.ComponentProps<"div">`.
+
+## Examples
+
+More: `npx @create-ui/cli view command` or MCP `get_item_examples_from_registries` with "command-demo" / "command-example".
+
+## When to use
+Command is a searchable command palette built on cmdk: CommandDialog for a modal Cmd+K palette, bare Command for an inline list. Do not use it to pick a form value (use Select) or for a small action menu on a trigger (use DropdownMenu).
+## Gotchas
+- CommandDialog does NOT wrap children in Command (unlike shadcn): its children go directly into DialogContent. Nest Command yourself or filtering and keyboard navigation will not work:
+
+```tsx
+<CommandDialog open={open} onOpenChange={setOpen}>
+  <Command>
+    <CommandInput placeholder="Type a command or search..." />
+    <CommandList>
+      <CommandEmpty>No results found.</CommandEmpty>
+      <CommandGroup heading="Suggestions">
+        <CommandItem>Calendar</CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </Command>
+</CommandDialog>
+```
+- No built-in trigger or Cmd+K key handler, and DialogTrigger cannot be composed (all children land inside DialogContent). Drive it with open/onOpenChange state; the examples use a Button onClick.
+- CommandInput renders a trailing RiSearchLine icon on the right (not shadcn's left-side icon). Do not add your own search icon.
+- CommandItem auto-appends a RiCheckLine indicator: it shows only when you set data-checked="true" on the item (nothing sets this attribute for you), and it is hidden entirely whenever the item contains a CommandShortcut. Do not add your own check icon for selected state.
+- CommandDialog already renders sr-only DialogTitle/DialogDescription from its title/description props and pins the panel to the top third of the viewport with zero padding; do not add DialogHeader or try to re-center it.
+- Follow the example item anatomy: bare <RiIcon /> from @create-ui/assets/icons, then <span> text, optional CommandShortcut last; items sit in CommandGroup (with heading) inside CommandList.

package/dist/skills/createui/reference/country-flag.md

@@ -0,0 +1,109 @@
+<!-- GENERATED FILE - do not edit. Source: registry/ui/country-flag.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/country-flag.md -->
+
+# country-flag
+
+CountryFlag and CurrencyFlag SVG icons resolved from an ISO code prop, with a dashed-circle fallback
+
+Install: `npx @create-ui/cli add country-flag`
+
+## Import
+
+```tsx
+import { CountryFlag, CurrencyFlag, FlagFallback } from "@/components/ui/country-flag"
+```
+
+## CountryFlag props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| code | `string` (ISO 3166-1 alpha-2 country code for CountryFlag (US, TR; plus supranational EU); ISO 4217 currency code for CurrencyFlag (USD, EUR). Lookup is case-insensitive.) | - |
+| fallback | `ReactNode` (Checked with !== undefined, so fallback={null} renders nothing at all instead of the dashed circle.) | - |
+
+Extends `React.SVGProps<SVGSVGElement>`.
+
+## CurrencyFlag props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| code | `string` (ISO 3166-1 alpha-2 country code for CountryFlag (US, TR; plus supranational EU); ISO 4217 currency code for CurrencyFlag (USD, EUR). Lookup is case-insensitive.) | - |
+| fallback | `ReactNode` (Checked with !== undefined, so fallback={null} renders nothing at all instead of the dashed circle.) | - |
+
+Extends `React.SVGProps<SVGSVGElement>`.
+
+## Examples
+
+From `input-group-amount`:
+
+```tsx
+"use client"
+
+import * as React from "react"
+
+import { CurrencyFlag } from "@/components/ui/country-flag"
+import { Field, FieldLabel } from "@/components/ui/field"
+import {
+  InputGroup,
+  InputGroupControl,
+  InputGroupLeadingIcon,
+  InputGroupSelect,
+  InputGroupSlot,
+} from "@/components/ui/input-group"
+import { SelectItem } from "@/components/ui/select"
+
+const CURRENCIES = ["USD", "EUR", "GBP"] as const
+
+const CURRENCY_SYMBOLS: Record<(typeof CURRENCIES)[number], string> = {
+  USD: "$",
+  EUR: "€",
+  GBP: "£",
+}
+
+export default function InputGroupAmount() {
+  const [currency, setCurrency] = React.useState("USD")
+
+  return (
+    <Field className="max-w-md">
+      <FieldLabel htmlFor="input-group-amount">Amount</FieldLabel>
+      <InputGroup>
+        <InputGroupLeadingIcon>
+          <span className="font-medium">
+            {CURRENCY_SYMBOLS[currency as (typeof CURRENCIES)[number]]}
+          </span>
+        </InputGroupLeadingIcon>
+        <InputGroupSlot>
+          <InputGroupControl
+            id="input-group-amount"
+            placeholder="0.00"
+            defaultValue="1,250.00"
+            inputMode="decimal"
+          />
+        </InputGroupSlot>
+        <InputGroupSelect
+          value={currency}
+          onValueChange={setCurrency}
+          prefix={<CurrencyFlag code={currency} className="size-5" />}
+          valueChildren={currency}
+        >
+          {CURRENCIES.map((c) => (
+            <SelectItem key={c} value={c}>
+              <CurrencyFlag code={c} className="size-5" />
+              {c}
+            </SelectItem>
+          ))}
+        </InputGroupSelect>
+      </InputGroup>
+    </Field>
+  )
+}
+```
+
+More: `npx @create-ui/cli view country-flag` or MCP `get_item_examples_from_registries` with "country-flag-demo" / "country-flag-example".
+
+## When to use
+CountryFlag resolves an SVG flag from a runtime country code; CurrencyFlag maps a currency code to its country's flag (EUR renders the EU flag). Use them when the code is dynamic data: select values, currency pickers, table rows. When the country is statically known at write time, do NOT use these; import the named mark directly from `@create-ui/assets/flags` (e.g. `Turkey`), as select-example does.
+## Gotchas
+- The two components take DIFFERENT code formats: `<CountryFlag code="USD" />` or `<CurrencyFlag code="US" />` silently renders the dashed-circle fallback, with no error or console warning.
+- There is no size prop; dimensions come from className on top of the default `size-6 shrink-0`. Canonical examples use `className="size-5"` inside `InputGroupSelect` prefix and `SelectItem`.
+- CurrencyFlag only covers the ~50 currencies in `CURRENCY_TO_COUNTRY` (`lib/currency-flags.ts`); unlisted currencies hit the fallback. Extend that map rather than special-casing in app code.
+- Flags render `aria-hidden="true"` by default (the fallback always does): they are decorative, so the adjacent text must carry the meaning, e.g. `<CurrencyFlag code={c} /> {c}` inside a SelectItem.
+- Both components reject children (typed as `Omit<..., "children">`); they are leaf SVGs, not wrappers.

package/dist/skills/createui/reference/credit-card-input.md

@@ -0,0 +1,76 @@
+<!-- GENERATED FILE - do not edit. Source: registry/ui/credit-card-input.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/credit-card-input.md -->
+
+# credit-card-input
+
+Masked card number input that detects the brand and shows its badge plus a validity icon; onValueChange reports details
+
+Install: `npx @create-ui/cli add credit-card-input`
+
+## Import
+
+```tsx
+import { CreditCardInput } from "@/components/ui/credit-card-input"
+```
+
+## CreditCardInput props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| defaultValue | `string` (Raw digit string; the only way to seed the value - the input is uncontrolled (value/onChange are omitted from the props type).) | - |
+| onValueChange | `(value: string, details: CreditCardDetails) => void` (Receives the unmasked digit string (separators stripped) plus { cardType, isValid, isPotentiallyValid }; fires from an effect one render after each accepted keystroke and never on mount.) | - |
+| size | `xs \| sm \| md` | - |
+| invalid | `boolean` (Styles the group only; the trailing validity glyph renders with invalidIcon={null}, so the card's own valid/invalid icon stays authoritative under form errors.) | - |
+| disabled | `boolean` | - |
+| loading | `boolean` | - |
+| showLeadingIcon | `boolean` | `true` |
+| leadingIcon | `ReactNode` | - |
+| showBadge | `boolean` | `true` |
+| showValidationIcon | `boolean` | `true` |
+| badges | `Partial<Record<CardType, CardBadge>>` (Replaces the whole CardType-to-badge map (not merged); brands without an entry fall back to the generic card glyph.) | - |
+| className | `string` | - |
+| ref | `React.Ref<HTMLInputElement>` | - |
+
+Extends `React.ComponentProps<"input">`.
+
+## Icons
+
+Icons go through icon props - never as children next to text, and never with sizing classes (the component sizes icons per `size`): `CreditCardInput` (`leadingIcon`). Import icons from `@create-ui/assets/icons` (Remix `Ri*`).
+
+## Examples
+
+From `input-group-credit-card`:
+
+```tsx
+"use client"
+
+import { CreditCardInput } from "@/components/ui/credit-card-input"
+import { Field, FieldLabel } from "@/components/ui/field"
+
+export default function InputGroupCreditCard() {
+  return (
+    <Field className="max-w-md">
+      <FieldLabel htmlFor="input-group-credit-card">Card Number</FieldLabel>
+      <CreditCardInput
+        id="input-group-credit-card"
+        defaultValue="5555555555554444"
+        onValueChange={(value, { cardType, isValid }) =>
+          console.log(value, cardType, isValid)
+        }
+      />
+    </Field>
+  )
+}
+```
+
+More: `npx @create-ui/cli view credit-card-input` or MCP `get_item_examples_from_registries` with "credit-card-input-demo" / "credit-card-input-example".
+
+## When to use
+Card-number entry: a masked input (4-4-4-4 grouping, auto-switching to Amex 4-6-5 on a 34/37 prefix) with brand detection, a trailing brand badge, and a live validity icon driven by card-validator. It covers the card number only; build expiry and CVC as separate Field + Input controls. For plain text use Input, for custom masked/affixed compositions use InputGroup with InputGroupControl, and for one-time codes use InputOTP.
+
+## Gotchas
+- It already renders a complete InputGroup internally; never wrap it in InputGroup or rebuild it from InputGroupControl. Compose as Field > FieldLabel + CreditCardInput, wiring the label via id/htmlFor.
+- Uncontrolled only: there is no `value` prop and no plain `onChange`. Read state exclusively through onValueChange; an AI reaching for the shadcn controlled-input pattern will hit a type error.
+- size/invalid/disabled/loading cascade from a surrounding Field when left unset (resolved by the internal InputGroup); do not hard-set size inside a sized Field.
+- The validity icon is self-managing: hidden while empty or loading, check icon once the number is valid, error icon only when it can no longer become valid. showValidationIcon={false} removes it entirely.
+- There is no trailingIcon prop (despite the generic Icons blurb); the trailing area is owned by the validation icon and the brand badge. Only leadingIcon is customizable, and showBadge={false} drops the badge cell.
+- placeholder defaults to the mask string itself (zeros with bullet separators); pass placeholder to override it.

package/dist/skills/createui/reference/date-input.md

@@ -0,0 +1,71 @@
+<!-- GENERATED FILE - do not edit. Source: registry/ui/date-input.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/date-input.md -->
+
+# date-input
+
+Masked date field with configurable order (DMY/MDY/YMD); onValueChange emits the ISO string and a Date object
+
+Install: `npx @create-ui/cli add date-input`
+
+## Import
+
+```tsx
+import { DateInput } from "@/components/ui/date-input"
+```
+
+## DateInput props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| defaultValue | `string` (Masked display string in the active order (e.g. \"31 / 12 / 2024\" for DMY), NOT an ISO string) | - |
+| order | `DateOrder` (Static per mount, not reactive; remount with a key to switch order at runtime) | `DMY` |
+| onValueChange | `(iso: string, date: Date \| null) => void` (iso is \"\" and date is null until every segment is complete) | - |
+| size | `xs \| sm \| md` | - |
+| invalid | `boolean` | - |
+| disabled | `boolean` | - |
+| loading | `boolean` | - |
+| showLeadingIcon | `boolean` | `true` |
+| leadingIcon | `ReactNode` | - |
+| className | `string` | - |
+| ref | `React.Ref<HTMLInputElement>` | - |
+
+Extends `React.ComponentProps<"input">`.
+
+## Icons
+
+Icons go through icon props - never as children next to text, and never with sizing classes (the component sizes icons per `size`): `DateInput` (`leadingIcon`). Import icons from `@create-ui/assets/icons` (Remix `Ri*`).
+
+## Examples
+
+From `input-group-date`:
+
+```tsx
+"use client"
+
+import { DateInput } from "@/components/ui/date-input"
+import { Field, FieldLabel } from "@/components/ui/field"
+
+export default function InputGroupDate() {
+  return (
+    <Field className="max-w-md">
+      <FieldLabel htmlFor="input-group-date">Date</FieldLabel>
+      <DateInput
+        id="input-group-date"
+        onValueChange={(iso, date) => console.log(iso, date)}
+      />
+    </Field>
+  )
+}
+```
+
+More: `npx @create-ui/cli view date-input` or MCP `get_item_examples_from_registries` with "date-input-demo" / "date-input-example".
+
+## When to use
+Masked type-in date field: the user types digits and the mask inserts " / " separators per the DMY/MDY/YMD order, emitting an ISO string plus Date via onValueChange. It is typed entry only; Create UI has no Calendar or DatePicker component, so do not build a shadcn-style Popover+Calendar around it. For free-form text use Input; for other masked composites use PhoneInput or CreditCardInput.
+
+## Gotchas
+- Uncontrolled only: `value` and `onChange` are stripped from the input props, and `defaultValue` is repurposed to seed the mask. There is no controlled mode; read the value through `onValueChange` or the ref.
+- The calendar leading icon (RiCalendarLine) is purely decorative; it does not open a picker and nothing in the component is clickable besides the input itself.
+- It already composes InputGroup + InputGroupSlot + InputGroupControl internally. Never wrap it in another InputGroup or place it inside an InputGroupSlot; put it directly under Field and label it via `id` + `FieldLabel htmlFor` (Field context does not auto-wire ids).
+- `size`, `invalid`, `disabled`, `loading` fall through to the surrounding Field context when unset (then default size "sm"), because the internal InputGroup resolves `prop ?? fieldCtx ?? default`.
+- Mask auto-behaviors: day/month autofix-pad ("5" becomes "05"), day clamped 1-31, month 1-12, year 1900-2100 (years outside the range cannot be typed); `inputMode="numeric"` is set automatically.
+- The emitted iso is `toISOString()` of a Date built at local midnight, so it is a full UTC timestamp whose date part can differ from the typed day in non-UTC timezones; use the second `date` argument instead of string-slicing the iso.