@djangocfg/ui-core 2.1.540 → 2.1.542

package/src/components/forms/money-field/index.tsx

@@ -0,0 +1,288 @@
+"use client"
+
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import { InputGroup, InputGroupAddon, InputGroupInput } from '../input-group';
+
+// =============================================================================
+// Money model
+// =============================================================================
+
+/**
+ * Currencies with no minor unit — ¥500 is five hundred yen, not five yen.
+ *
+ * Formatting one of these with two decimals inflates every amount by 100×,
+ * which reads as a plausible price rather than as an error. The list mirrors
+ * `@djangocfg/payments`' `domain/money.ts`; it is duplicated rather than
+ * imported because `ui-core` sits BELOW `payments` and may not depend on it.
+ */
+const ZERO_DECIMAL_CURRENCIES = new Set([
+  'BIF', 'CLP', 'DJF', 'GNF', 'JPY', 'KMF', 'KRW', 'MGA',
+  'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF',
+]);
+
+/** Minor units per major unit for a currency — 100 for USD, 1 for JPY. */
+export function minorUnitFactor(currency: string): number {
+  return ZERO_DECIMAL_CURRENCIES.has(currency.toUpperCase()) ? 1 : 100;
+}
+
+/** Digits after the decimal separator for a currency. */
+export function currencyFractionDigits(currency: string): number {
+  return ZERO_DECIMAL_CURRENCIES.has(currency.toUpperCase()) ? 0 : 2;
+}
+
+// =============================================================================
+// Locale probing
+// =============================================================================
+
+// A `localeParts()` helper used to probe the group/decimal separators by hand.
+// It is gone: nothing parses separators any more. Input is digits-only
+// (`parseToMinor`) and output goes straight through `Intl.NumberFormat`
+// (`formatMinor`), so the locale's separators never have to be named.
+
+/** The currency's symbol in this locale, e.g. "$", "€", "¥". */
+function currencySymbol(currency: string, locale: string | undefined): string {
+  try {
+    const parts = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currency.toUpperCase(),
+    }).formatToParts(0);
+    return parts.find((p) => p.type === 'currency')?.value ?? currency.toUpperCase();
+  } catch {
+    // Unknown code — show it as-is rather than throwing inside a render.
+    return currency.toUpperCase();
+  }
+}
+
+// =============================================================================
+// Format / parse
+// =============================================================================
+
+/** Format minor units for display, grouped and with the locale's separators. */
+function formatMinor(minor: number, currency: string, locale: string | undefined): string {
+  const digits = currencyFractionDigits(currency);
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+    useGrouping: true,
+  }).format(minor / minorUnitFactor(currency));
+}
+
+/**
+ * Read minor units out of whatever the user typed.
+ *
+ * Digits-only, right-anchored: the last `fractionDigits` digits are the minor
+ * part. Typing "5" in USD means $0.05, "550" means $5.50 — the till-style
+ * entry people expect from a money field, and the reason the caret never has
+ * to sit "before the decimal point".
+ */
+function parseToMinor(raw: string, _currency: string): number {
+  const digits = raw.replace(/\D/g, '');
+  if (!digits) return 0;
+  // Number, not parseInt: 16 digits of cents is past MAX_SAFE_INTEGER, and
+  // silently truncating someone's amount is worse than clamping it.
+  const value = Number(digits);
+  return Number.isFinite(value) ? value : 0;
+}
+
+/** Count digits in `text` up to `index` — the caret anchor that survives regrouping. */
+function digitsBefore(text: string, index: number): number {
+  let n = 0;
+  for (let i = 0; i < index && i < text.length; i += 1) {
+    if (text[i] !== undefined && /\d/.test(text[i] as string)) n += 1;
+  }
+  return n;
+}
+
+/** Inverse of `digitsBefore`: the offset just after the nth digit. */
+function offsetAfterDigits(text: string, digitCount: number): number {
+  if (digitCount <= 0) return 0;
+  let seen = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    if (text[i] !== undefined && /\d/.test(text[i] as string)) {
+      seen += 1;
+      if (seen === digitCount) return i + 1;
+    }
+  }
+  return text.length;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export interface MoneyFieldProps
+  extends Omit<
+    React.ComponentProps<'input'>,
+    'value' | 'defaultValue' | 'onChange' | 'prefix' | 'type'
+  > {
+  /**
+   * Amount in MINOR UNITS — cents, not dollars.
+   *
+   * Money never crosses a boundary as a float here. `19.99` is not
+   * representable in binary floating point, so a column of them drifts; `1999`
+   * is exact. This matches `@djangocfg/payments`, which moves `MinorUnits`
+   * for the same reason, so a value goes from this field to a charge with no
+   * conversion in between.
+   */
+  value?: number;
+  /** Uncontrolled initial amount, also in minor units. */
+  defaultValue?: number;
+  /** Called with the new amount in minor units. */
+  onValueChange?: (minorUnits: number) => void;
+  /** ISO 4217 code — drives the symbol, the decimals and the minor-unit factor. */
+  currency?: string;
+  /** BCP 47 tag for separators and symbol placement. Defaults to the runtime's. */
+  locale?: string;
+  /** Show the currency symbol before the input. Set false when the label carries it. */
+  showSymbol?: boolean;
+  /** Largest accepted amount, in minor units. Entry beyond it is ignored. */
+  max?: number;
+  /** Applied to the group, so callers can size the whole control. */
+  groupClassName?: string;
+}
+
+/**
+ * An amount input that formats as you type and reports MINOR UNITS.
+ *
+ * ```tsx
+ * const [price, setPrice] = React.useState(1999);   // $19.99
+ * <MoneyField currency="USD" value={price} onValueChange={setPrice} />
+ * ```
+ *
+ * Three decisions worth knowing, because each is a common way this component
+ * is got wrong:
+ *
+ * **The value is an integer.** A money field that hands back `19.99` hands
+ * back a number that does not exist in binary floating point. Totals drift by
+ * a cent, and the bug surfaces in an invoice rather than in a test.
+ *
+ * **Entry is till-style and right-anchored.** Every keystroke rewrites the
+ * whole display, so digits fill from the right: "1", "19", "199" → $1.99. The
+ * caret is then restored by DIGIT COUNT, not by string offset — inserting a
+ * thousands separator shifts every character after it, and an offset-based
+ * restore is exactly why so many currency inputs jump the cursor when a
+ * number crosses 1,000.
+ *
+ * **Separators come from `Intl`, not from a constant.** The decimal mark is a
+ * comma across most of Europe. Guessing it means "1.234" is read as either
+ * 1.234 or 1234 depending on where the user is, with nothing on screen to say
+ * which happened.
+ */
+const MoneyField = React.forwardRef<HTMLInputElement, MoneyFieldProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      currency = 'USD',
+      locale,
+      showSymbol = true,
+      max,
+      className,
+      groupClassName,
+      onBlur,
+      disabled,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    React.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);
+
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<number>(defaultValue ?? 0);
+    const minor = isControlled ? value : internal;
+
+    const display = React.useMemo(
+      () => formatMinor(minor, currency, locale),
+      [minor, currency, locale],
+    );
+    const symbol = React.useMemo(
+      () => currencySymbol(currency, locale),
+      [currency, locale],
+    );
+
+    // A controlled input commits the caret to end-of-string on every rewrite,
+    // so the position is recorded here during the change and applied after the
+    // render lands. Same shape as `MaskInput`, for the same reason.
+    const pendingCaretRef = React.useRef<number | null>(null);
+
+    React.useLayoutEffect(() => {
+      const pos = pendingCaretRef.current;
+      if (pos == null) return;
+      pendingCaretRef.current = null;
+      inputRef.current?.setSelectionRange(pos, pos);
+    });
+
+    const commit = React.useCallback(
+      (next: number) => {
+        if (!isControlled) setInternal(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange],
+    );
+
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const el = event.target;
+        const typed = el.value;
+        const caret = el.selectionStart ?? typed.length;
+
+        let next = parseToMinor(typed, currency);
+        if (max !== undefined && next > max) next = max;
+
+        // Anchor on digits to the LEFT of the caret, which regrouping cannot
+        // move. Deleting a separator deletes nothing, so step past it and take
+        // the digit instead — otherwise Backspace on "1,234" appears to do
+        // nothing at all.
+        let digitsLeft = digitsBefore(typed, caret);
+        const deletedSeparator =
+          typed.length < display.length && digitsLeft === digitsBefore(display, caret + 1);
+        if (deletedSeparator && digitsLeft > 0) digitsLeft -= 1;
+
+        const nextDisplay = formatMinor(next, currency, locale);
+        pendingCaretRef.current = offsetAfterDigits(nextDisplay, digitsLeft);
+
+        commit(next);
+      },
+      [commit, currency, display, locale, max],
+    );
+
+    return (
+      <InputGroup className={groupClassName} data-disabled={disabled ? '' : undefined}>
+        {showSymbol ? (
+          // aria-hidden: the accessible name belongs on the field's label.
+          // A screen reader announcing "dollar sign" on entry is noise; a
+          // label reading "Price in US dollars" is what actually helps.
+          <InputGroupAddon align="inline-start" aria-hidden="true">
+            {symbol}
+          </InputGroupAddon>
+        ) : null}
+        <InputGroupInput
+          ref={inputRef}
+          // `inputMode` rather than `type="number"`: a number input rejects
+          // the grouped string this component displays, and its spinner is
+          // meaningless for an amount. This still opens a numeric keypad.
+          inputMode="decimal"
+          autoComplete="off"
+          value={display}
+          onChange={handleChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          // Left-aligned, hugging the symbol. `text-right` looks correct in a
+          // column of amounts and wrong in a single field: `flex-1` stretches
+          // the control to the group's full width, so the symbol sits at one
+          // edge and the number at the other with a gap between them. Right
+          // alignment belongs to a table cell, which can set it via `className`.
+          className={cn('tabular-nums', className)}
+          {...props}
+        />
+      </InputGroup>
+    );
+  },
+);
+MoneyField.displayName = 'MoneyField';
+
+export { MoneyField };

package/src/components/forms/otp/use-otp-input.ts

@@ -30,7 +30,7 @@ function cleanInput(
   if (!input) return ''
 
   // Remove all whitespace and convert to uppercase for consistency
-  let cleaned = input.replace(/\s+/g, '').trim()
+  const cleaned = input.replace(/\s+/g, '').trim()
 
   if (validationMode === 'custom' && customValidator) {
     // For custom validation, filter character by character

package/src/components/forms/tags-input/index.tsx

@@ -56,8 +56,7 @@ export interface TagsInputRootProps
   children?: React.ReactNode | ((context: { value: TagValue[] }) => React.ReactNode);
 }
 
-export interface TagsInputInputProps
-  extends Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue"> {}
+export type TagsInputInputProps = Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue">;
 
 export interface TagsInputItemProps extends React.ComponentPropsWithoutRef<"div"> {
   /** The value of the item. */
@@ -66,11 +65,9 @@ export interface TagsInputItemProps extends React.ComponentPropsWithoutRef<"div"
   disabled?: boolean;
 }
 
-export interface TagsInputItemTextProps
-  extends React.ComponentPropsWithoutRef<"span"> {}
+export type TagsInputItemTextProps = React.ComponentPropsWithoutRef<"span">;
 
-export interface TagsInputItemDeleteProps
-  extends React.ComponentPropsWithoutRef<"button"> {}
+export type TagsInputItemDeleteProps = React.ComponentPropsWithoutRef<"button">;
 
 // =============================================================================
 // Context
@@ -169,7 +166,16 @@ const TagsInput = React.forwardRef<HTMLDivElement, TagsInputRootProps>(
     } = props;
 
     const [value = [], setValue] = React.useState<TagValue[] | undefined>(defaultValue);
-    const resolvedValue = valueProp !== undefined ? valueProp : (value ?? []);
+    /*
+     * Memoised because the `?? []` branch mints a NEW array each render, and
+     * four `useCallback`s below take `resolvedValue` as a dependency — so an
+     * uncontrolled, empty TagsInput rebuilt all four on every render and the
+     * memoisation bought nothing. Identity is what those hooks compare.
+     */
+    const resolvedValue = React.useMemo(
+      () => (valueProp !== undefined ? valueProp : (value ?? [])),
+      [valueProp, value],
+    );
 
     const [highlightedIndex, setHighlightedIndex] = React.useState<number | null>(null);
     const [editingIndex, setEditingIndex] = React.useState<number | null>(null);
@@ -531,46 +537,47 @@ const TagsInputInput = React.forwardRef<HTMLInputElement, TagsInputInputProps>(
   (props, ref) => {
     const { autoFocus, ...inputProps } = props;
     const context = useTagsInput("TagsInputInput");
+    const { onItemAdd, setHighlightedIndex, addOnTab, inputRef } = context;
 
     const onCustomKeydown = React.useCallback(
       (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.defaultPrevented) return;
         const value = event.currentTarget.value;
         if (!value) return;
-        const isAdded = context.onItemAdd(value);
+        const isAdded = onItemAdd(value);
         if (isAdded) {
           event.currentTarget.value = "";
-          context.setHighlightedIndex(null);
+          setHighlightedIndex(null);
         }
         event.preventDefault();
       },
-      [context.onItemAdd, context.setHighlightedIndex]
+      [onItemAdd, setHighlightedIndex]
     );
 
     const onTab = React.useCallback(
       (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (!context.addOnTab) return;
+        if (!addOnTab) return;
         onCustomKeydown(event);
       },
-      [context.addOnTab, onCustomKeydown]
+      [addOnTab, onCustomKeydown]
     );
 
     React.useEffect(() => {
       if (!autoFocus) return;
-      const id = requestAnimationFrame(() => context.inputRef.current?.focus());
+      const id = requestAnimationFrame(() => inputRef.current?.focus());
       return () => cancelAnimationFrame(id);
-    }, [autoFocus, context.inputRef]);
+    }, [autoFocus, inputRef]);
 
     const composedRef = React.useCallback(
       (node: HTMLInputElement | null) => {
-        context.inputRef.current = node;
+        inputRef.current = node;
         if (typeof ref === "function") {
           ref(node);
         } else if (ref) {
           (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
         }
       },
-      [ref, context.inputRef]
+      [ref, inputRef]
     );
 
     return (
@@ -664,10 +671,11 @@ const TagsInputItem = React.forwardRef<HTMLDivElement, TagsInputItemProps>(
     const itemDisabled = itemDisabledProp || context.disabled;
     const displayValue = context.displayValue(value);
 
+    const { setHighlightedIndex, inputRef } = context;
     const onItemSelect = React.useCallback(() => {
-      context.setHighlightedIndex(index);
-      context.inputRef.current?.focus();
-    }, [context.setHighlightedIndex, context.inputRef, index]);
+      setHighlightedIndex(index);
+      inputRef.current?.focus();
+    }, [setHighlightedIndex, inputRef, index]);
 
     return (
       <TagsInputItemContext.Provider
@@ -694,6 +702,10 @@ const TagsInputItem = React.forwardRef<HTMLDivElement, TagsInputItemProps>(
           data-editing={isEditing ? "" : undefined}
           data-editable={context.editable ? "" : undefined}
           data-disabled={itemDisabled ? "" : undefined}
+          {...itemProps}
+          // Spread stays ABOVE className and the handlers: below them, a consumer
+          // that passes any of these props replaces the composed behaviour
+          // outright — a tag with an onClick stops being selectable.
           className={cn(
             "inline-flex items-center gap-1 rounded-[var(--radius)] border bg-secondary px-2 py-0.5 text-sm text-secondary-foreground transition-colors",
             isHighlighted && "ring-1 ring-ring",
@@ -707,14 +719,14 @@ const TagsInputItem = React.forwardRef<HTMLDivElement, TagsInputItemProps>(
               onItemSelect();
             }
           }}
-          onDoubleClick={() => {
-            itemProps.onDoubleClick?.(undefined as unknown as React.MouseEvent<HTMLDivElement>);
+          onDoubleClick={(event) => {
+            itemProps.onDoubleClick?.(event);
             if (context.editable && !itemDisabled) {
               requestAnimationFrame(() => context.setEditingIndex(index));
             }
           }}
-          onPointerUp={() => {
-            itemProps.onPointerUp?.(undefined as unknown as React.PointerEvent<HTMLDivElement>);
+          onPointerUp={(event) => {
+            itemProps.onPointerUp?.(event);
             if (pointerTypeRef.current === "mouse") onItemSelect();
           }}
           onPointerDown={(event) => {
@@ -736,7 +748,6 @@ const TagsInputItem = React.forwardRef<HTMLDivElement, TagsInputItemProps>(
               context.onItemLeave();
             }
           }}
-          {...itemProps}
         />
       </TagsInputItemContext.Provider>
     );
@@ -754,10 +765,13 @@ function TagsInputEditableItemText() {
   const itemContext = useTagsInputItem("TagsInputEditableItemText");
   const [editValue, setEditValue] = React.useState(itemContext.displayValue);
 
+  const { setEditingIndex, setHighlightedIndex, onItemUpdate, inputRef, value: contextValue } = context;
+  const { displayValue, value: itemValue, index: itemIndex } = itemContext;
+
   const onBlur = React.useCallback(() => {
-    setEditValue(itemContext.displayValue);
-    context.setEditingIndex(null);
-  }, [context.setEditingIndex, itemContext.displayValue]);
+    setEditValue(displayValue);
+    setEditingIndex(null);
+  }, [setEditingIndex, displayValue]);
 
   const onChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     const target = event.target;
@@ -775,26 +789,26 @@ function TagsInputEditableItemText() {
   const onKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.key === "Enter") {
-        const index = context.value.indexOf(itemContext.value);
-        context.onItemUpdate(index, editValue);
+        const index = contextValue.indexOf(itemValue);
+        onItemUpdate(index, editValue);
       } else if (event.key === "Escape") {
-        setEditValue(itemContext.displayValue);
-        context.setEditingIndex(null);
-        context.setHighlightedIndex(itemContext.index);
-        context.inputRef.current?.focus();
+        setEditValue(displayValue);
+        setEditingIndex(null);
+        setHighlightedIndex(itemIndex);
+        inputRef.current?.focus();
       }
       event.stopPropagation();
     },
     [
-      context.value,
-      context.onItemUpdate,
-      context.setEditingIndex,
-      itemContext.displayValue,
+      contextValue,
+      onItemUpdate,
+      setEditingIndex,
+      displayValue,
       editValue,
-      itemContext.value,
-      context.setHighlightedIndex,
-      itemContext.index,
-      context.inputRef,
+      itemValue,
+      setHighlightedIndex,
+      itemIndex,
+      inputRef,
     ]
   );
 

package/src/components/forms/textarea/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { useStoredValue, type StorageType, type UseStoredValueOptions } from '../../../hooks';
 import { cn } from '../../../lib/utils';
-import { TEXTAREA_CLASS } from '../input';
+import { TEXTAREA_BARE_CLASS, TEXTAREA_CLASS } from '../input';
 
 export interface TextareaProps extends React.ComponentProps<"textarea"> {
   /**
@@ -15,10 +15,16 @@ export interface TextareaProps extends React.ComponentProps<"textarea"> {
   storageType?: StorageType;
   /** TTL in ms */
   storageTtl?: number;
+  /**
+   * Drop the field chrome for a textarea inside a control that draws its own
+   * (`InputGroup`). See `Input`'s `bare` for why this is a variant rather than
+   * something a wrapper overrides.
+   */
+  bare?: boolean;
 }
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, storageKey, storageType, storageTtl, onChange, defaultValue, value, ...props }, ref) => {
+  ({ className, storageKey, storageType, storageTtl, bare = false, onChange, defaultValue, value, ...props }, ref) => {
     const storageOptions: UseStoredValueOptions | undefined =
       storageKey ? { storage: storageType ?? 'local', ttl: storageTtl } : undefined;
 
@@ -41,7 +47,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     if (value !== undefined) {
       return (
         <textarea
-          className={cn(TEXTAREA_CLASS, className)}
+          className={cn(bare ? TEXTAREA_BARE_CLASS : TEXTAREA_CLASS, className)}
           ref={ref}
           value={value}
           onChange={storageKey ? handleChange : onChange}
@@ -52,7 +58,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     return (
       <textarea
-        className={cn(TEXTAREA_CLASS, className)}
+        className={cn(bare ? TEXTAREA_BARE_CLASS : TEXTAREA_CLASS, className)}
         ref={ref}
         defaultValue={storageKey && storedValue ? storedValue : defaultValue}
         onChange={storageKey ? handleChange : onChange}

package/src/components/forms/time-picker/index.tsx

@@ -3,6 +3,7 @@
 import { Clock } from "lucide-react";
 import * as React from "react";
 
+import { useComposedRefs } from "../../../lib/compose-refs";
 import { cn } from "../../../lib/utils";
 import { Button } from "../../forms/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../../overlay/popover";
@@ -166,8 +167,11 @@ const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
     }, [minuteStep]);
 
     const isFormControl = React.useRef(false);
-    const rootRef = React.useRef<HTMLDivElement>(null);
-    React.useImperativeHandle(ref, () => rootRef.current as unknown as HTMLButtonElement);
+    // The trigger is a <button>, and the caller's ref must see `null` before it
+    // mounts. useImperativeHandle cannot express that — it must produce a
+    // handle — so the two refs are composed onto the element instead.
+    const rootRef = React.useRef<HTMLButtonElement | null>(null);
+    const composedRef = useComposedRefs(rootRef, ref);
 
     React.useEffect(() => {
       if (rootRef.current) {
@@ -180,7 +184,7 @@ const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
             <Button
-              ref={rootRef as unknown as React.Ref<HTMLButtonElement>}
+              ref={composedRef}
               variant={variant}
               disabled={disabled}
               className={cn(

package/src/components/index.ts

@@ -31,6 +31,10 @@ export type { DownloadButtonProps } from './forms/button-download';
 export { PopoverActionButton } from './forms/popover-action-button';
 export type { PopoverActionButtonProps } from './forms/popover-action-button';
 
+// Money Field — amount in, minor units out.
+export { MoneyField, minorUnitFactor, currencyFractionDigits } from './forms/money-field';
+export type { MoneyFieldProps } from './forms/money-field';
+
 // Mask Input
 export { MaskInput } from './forms/mask-input';
 export type { MaskInputProps, MaskDefinition } from './forms/mask-input';

package/src/components/layout/key-value/index.tsx

@@ -408,7 +408,10 @@ function KeyValueKeyInput(props: KeyValueKeyInputProps) {
   const {
     onChange: onChangeProp,
     onPaste: onPasteProp,
-    asChild,
+    // Declared on the props type but not honoured here: unlike the `div`-based
+    // parts of this component, this one renders a concrete <Input>, so there is
+    // no element to Slot into. Destructured only to keep it off the DOM.
+    asChild: _asChild,
     disabled,
     readOnly,
     required,
@@ -565,10 +568,7 @@ function KeyValueKeyInput(props: KeyValueKeyInputProps) {
           store.setState("value", newValue)
 
           if (context.onPaste) {
-            context.onPaste(
-              event.nativeEvent as unknown as ClipboardEvent,
-              parsed,
-            )
+            context.onPaste(event.nativeEvent, parsed)
           }
         }
       }
@@ -608,7 +608,9 @@ interface KeyValueValueInputProps
 function KeyValueValueInput(props: KeyValueValueInputProps) {
   const {
     onChange: onChangeProp,
-    asChild,
+    // Same as KeyValueKeyInput: renders a concrete <Textarea>, nothing to Slot
+    // into. Destructured only to keep it off the DOM.
+    asChild: _asChild,
     disabled,
     readOnly,
     required,
@@ -724,7 +726,7 @@ function KeyValueValueInput(props: KeyValueValueInputProps) {
   )
 }
 
-interface KeyValueRemoveProps extends React.ComponentProps<typeof Button> {}
+type KeyValueRemoveProps = React.ComponentProps<typeof Button>;
 
 function KeyValueRemove(props: KeyValueRemoveProps) {
   const { onClick: onClickProp, children, ...removeProps } = props

package/src/components/layout/resizable/index.tsx

@@ -66,7 +66,12 @@ const ResizablePanel = React.forwardRef<
 
   // SSR fallback - render static div with default size
   if (!mounted) {
-    const direction = (props as any)['data-panel-group-direction']
+    // `data-*` attributes are not part of the typed prop surface, so the read
+    // needs a cast. Narrowed to the one attribute rather than `any` on `props`:
+    // this opens exactly the key it uses and leaves the rest checked.
+    const direction = (props as { 'data-panel-group-direction'?: string })[
+      'data-panel-group-direction'
+    ]
     const sizeStyle = defaultSize
       ? direction === 'vertical'
         ? { height: `${defaultSize}%` }