@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/components/chip.d.ts

@@ -1,12 +1,9 @@
-import * as react from 'react';
-import { ReactNode, ReactElement, KeyboardEvent, Ref, MouseEvent, ComponentPropsWithoutRef } from 'react';
-import { LucideIcon } from 'lucide-react';
-import { DisabledReasonDisplay } from './field-parts.js';
-import { CommitScope } from './write-lock.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-
+import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
+import type { LucideIcon } from "lucide-react";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type CommitScope } from "./write-lock.js";
+export { refreshChipEdges } from "../lib/chip-edge-snap.js";
+export type { ChipInputLabels, ChipInputProps } from "./chip-input.js";
 /**
  * A chip: a compact pill carrying one value.
  *
@@ -21,7 +18,7 @@ import '../lib/clipping.js';
  * "choose one of eight things to do" and a row of eight chips says "here are eight
  * things". Using `Button` for both is the mistake this exists to prevent.
  */
-type ChipTone = "neutral" | "brand" | "danger" | "warning" | "success" | "info" | "income" | "expense" | ChipHue;
+export type ChipTone = "neutral" | "brand" | "danger" | "warning" | "success" | "info" | "income" | "expense" | ChipHue;
 /**
  * Categorical hues (0.10.0): colour that says "a different value" and nothing more —
  * kastlan's status-badge.tsx paints ~15 enums in 9 Tailwind hues by hand. Four of those
@@ -31,11 +28,11 @@ type ChipTone = "neutral" | "brand" | "danger" | "warning" | "success" | "info"
  * meaning (overdue is `danger`), a hue when it only needs telling apart (sent vs
  * accepted vs invoiced).
  */
-type ChipHue = "blue" | "indigo" | "purple" | "teal" | "orange";
+export type ChipHue = "blue" | "indigo" | "purple" | "teal" | "orange";
 /** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px.
  *  `xs` (0.10.0) is 11px type at `px-1.5` — keksdose's goal markers and budget-cell
  *  badges, which sit inside a figure's line and must not make it taller. */
-type ChipSize = "xs" | "sm" | "md" | "lg";
+export type ChipSize = "xs" | "sm" | "md" | "lg";
 /**
  * How much of the tone the chip wears.
  *
@@ -51,14 +48,14 @@ type ChipSize = "xs" | "sm" | "md" | "lg";
  *   would outshout the figures beside them (kastlan's unit picker already draws its
  *   UnitStatus this way, from a separate `dotColor` map).
  */
-type ChipVariant = "soft" | "outline" | "solid" | "dot";
+export type ChipVariant = "soft" | "outline" | "solid" | "dot";
 /** `pill` (default) is fully rounded; `square` has the small radius of a field or a
  *  button — for a chip that sits in a table cell or beside square controls. */
-type ChipShape = "pill" | "square";
+export type ChipShape = "pill" | "square";
 /** What {@link ChipProps.renderLink} is handed: everything the chip would have put on
  *  its own `<a>`. Spread it onto your router's link, mapping `href` to what the link
  *  calls it — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
-interface ChipLinkProps {
+export interface ChipLinkProps {
     href: string;
     /** The chip's whole look — keep it, or the pill is a bare link. */
     className: string;
@@ -79,13 +76,6 @@ interface ChipLinkProps {
     [key: `aria-${string}`]: string | boolean | number | undefined;
     [key: `data-${string}`]: unknown;
 }
-/**
- * Re-snap every chip rendered with `snapEdges`, now. The kit already re-snaps when a
- * chip renders, resizes, or the window or the ratio changes; call this after moving
- * chips some other way (a side panel sliding in beside a table of status chips),
- * since a move is not something an observer can see.
- */
-declare function refreshChipEdges(): void;
 interface ChipBaseProps {
     children: ReactNode;
     tone?: ChipTone;
@@ -105,7 +95,7 @@ interface ChipBaseProps {
     caps?: boolean;
     /**
      * The leading glyph: a lucide component (`icon={Check}`, drawn at the chip's size), or
-     * — since 0.15.4 — a ready element (`icon={<Check className="text-[var(--success)]" />}`)
+     * — since 0.15.4 — a ready element (`icon={<Check className="text-success" />}`)
      * for a glyph whose colour or stroke carries a state; it is sized to the same box
      * (keksdose live #358 built that slot by hand inside `children`).
      */
@@ -185,6 +175,9 @@ interface ChipBaseProps {
      * nothing to snap.
      */
     snapEdges?: boolean;
+    /** The interactive element — the pill, or a split pill's body. A React 19 ref prop
+     *  since 0.34 (MOD-4, refactor audit 2026-10); it was `forwardRef`. */
+    ref?: Ref<HTMLElement>;
 }
 /**
  * A chip is a link OR a button, never both — so the types say so. Before 0.7.0 both were
@@ -194,7 +187,7 @@ interface ChipBaseProps {
  * That shape wants a definite `href` string, so a bare `onClick` is always the
  * button's, with a button's event.
  */
-type ChipProps = ChipBaseProps & ({
+export type ChipProps = ChipBaseProps & ({
     /** Renders the chip as a link. */
     href?: string;
     onClick?: never;
@@ -271,72 +264,4 @@ type ChipProps = ChipBaseProps & ({
  * focus ring is drawn on the body alone, and `ref`, `id` and the ARIA props still reach
  * the body — the interactive element.
  */
-declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLElement>>;
-interface ChipInputLabels {
-    /** Announced after a value is added. Receives the value. */
-    added: (value: string) => string;
-    /** Announced after a value is removed. Receives the value. */
-    removed: (value: string) => string;
-    /** Accessible name for each chip's dismiss button. */
-    remove: string;
-    /** Shown when `max` is reached. Receives the limit. */
-    atLimit: (max: number) => string;
-    /** Shown when a duplicate is rejected. Receives the value. */
-    duplicate: (value: string) => string;
-}
-declare const DEFAULT_CHIP_INPUT_LABELS: ChipInputLabels;
-declare function resolveChipInputLabels(labels?: Partial<ChipInputLabels>): ChipInputLabels;
-/**
- * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper
- * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this
- * component's, forwarded to the inner `<input>`; the div has none of its own.
- */
-interface ChipInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "placeholder" | "children"> {
-    value: string[];
-    onChange: (next: string[]) => void;
-    placeholder?: string;
-    /** Visible label, rendered above the field. Without one, name the field with
-     *  `aria-label`. */
-    label?: string;
-    /**
-     * @deprecated Pass `aria-label` instead — the DOM spelling the rest of this kit
-     * now uses. Still honoured, and still second to `aria-label` when both are given.
-     */
-    ariaLabel?: string;
-    /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */
-    validate?: (raw: string) => string | null;
-    /** Characters that commit the current text, besides Enter. Default: comma. */
-    separators?: string[];
-    allowDuplicates?: boolean;
-    max?: number;
-    tone?: ChipTone;
-    size?: ChipSize;
-    disabled?: boolean;
-    invalid?: boolean;
-    /** Error text. Wires `aria-describedby` and implies `invalid`. */
-    error?: ReactNode;
-    labels?: Partial<ChipInputLabels>;
-    className?: string;
-}
-/**
- * A field whose value is a LIST, entered as chips.
- *
- * The keyboard model is the whole component; the pills are the easy part. Per the WAI
- * pattern for a "tag" input:
- *
- *   Enter, or any separator  commit the typed text
- *   Backspace on empty text  move focus to the last chip (does NOT delete it)
- *   ← →  while on a chip     move between chips, in reading order (mirrored in RTL)
- *   Backspace / Delete       remove the focused chip, focus its neighbour
- *   Escape                   clear what is typed but keep the committed chips
- *   paste                    splits on the separators, so a pasted CSV becomes chips
- *
- * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately
- * is more common and is a trap: it is a destructive action with no feedback on a key
- * people hit by reflex, and the value it destroys may have taken a while to type. Moving
- * focus first makes the second Backspace a deliberate one, and it is what lets a
- * keyboard user reach a chip at all.
- */
-declare function ChipInput({ value, onChange, placeholder, label, ariaLabel, validate, separators, allowDuplicates, max, tone, size, disabled, invalid, error, labels, className, "aria-label": ariaLabelAttr, ...rest }: ChipInputProps): react.JSX.Element;
-
-export { Chip, type ChipHue, ChipInput, type ChipInputLabels, type ChipInputProps, type ChipLinkProps, type ChipProps, type ChipShape, type ChipSize, type ChipTone, type ChipVariant, DEFAULT_CHIP_INPUT_LABELS, refreshChipEdges, resolveChipInputLabels };
+export declare function Chip({ ref, children, tone, size, variant, shape, caps, icon: Icon, selected, checkbox, href, renderLink, onClick, onRemove, removeLabel, removeDisabled, disabled, className, tabIndex, role, onKeyDown, onFocus, snapEdges, disabledReason: ownDisabledReason, disabledReasonDisplay, commit, ...rest }: ChipProps): import("react").JSX.Element;