@djangocfg/ui-core 2.1.539 → 2.1.541

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.539",
+  "version": "2.1.541",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -128,7 +128,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.539",
+    "@djangocfg/i18n": "^2.1.541",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,8 +206,8 @@
     "@chenglou/pretext": "^0.0.8"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.539",
-    "@djangocfg/typescript-config": "^2.1.539",
+    "@djangocfg/i18n": "^2.1.541",
+    "@djangocfg/typescript-config": "^2.1.541",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

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

@@ -35,6 +35,18 @@ export interface InputProps extends React.ComponentProps<"input"> {
    * - `sm` — 36px, smaller text (inline edits, dense rows, settings chips).
    */
   inputSize?: 'default' | 'sm';
+  /**
+   * Drop the field chrome — border, surface, rounding, focus ring — for an
+   * input that sits inside a control that draws them itself (`InputGroup`).
+   *
+   * A wrapper cannot do this from the outside: `focus-visible:ring-0` and
+   * `focus-visible:ring-1` are the same specificity, so which one wins is
+   * decided by their order in the generated stylesheet, not by the order they
+   * are passed to `cn()`. Suppression like that works until a Tailwind version
+   * reorders its output. Omitting the rules is the only stable way to not have
+   * them.
+   */
+  bare?: boolean;
 }
 
 /**
@@ -49,9 +61,19 @@ export interface InputProps extends React.ComponentProps<"input"> {
  * and a tight 1px solid ring of the same colour doubles it to a clean ~2px
  * edge (NO blurry translucent halo). `:focus-visible` only, so mouse users on
  * other controls don't get rings. This is the sharp Vercel/Linear look.
+ *
+ * Split in two so an input inside `InputGroup` can omit the chrome rather than
+ * override it — see `bare`.
  */
-const INPUT_BASE =
-  "flex w-full rounded-[var(--radius)] border border-border bg-input shadow-sm transition-[color,background-color,border-color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+/** Everything an input needs regardless of who draws its edge. */
+const INPUT_CORE =
+  "flex w-full transition-[color,background-color,border-color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+
+/** The field's own edge: border, surface, rounding, and the focus treatment. */
+const INPUT_CHROME =
+  "rounded-[var(--radius)] border border-border bg-input shadow-sm focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring";
+
+const INPUT_BASE = cn(INPUT_CORE, INPUT_CHROME);
 
 const INPUT_SIZE: Record<NonNullable<InputProps['inputSize']>, string> = {
   default: "h-10 px-3 py-2 text-base md:text-sm",
@@ -59,8 +81,10 @@ const INPUT_SIZE: Record<NonNullable<InputProps['inputSize']>, string> = {
 };
 
 /** Resolve the full input class for a given size. */
-export const inputClass = (size: NonNullable<InputProps['inputSize']> = 'default') =>
-  cn(INPUT_BASE, INPUT_SIZE[size]);
+export const inputClass = (
+  size: NonNullable<InputProps['inputSize']> = 'default',
+  bare = false,
+) => cn(bare ? INPUT_CORE : INPUT_BASE, INPUT_SIZE[size], bare && 'h-full px-0');
 
 /** Default-size input styling — kept as a named export for reuse (e.g. Editable). */
 export const INPUT_CLASS = inputClass('default');
@@ -71,9 +95,12 @@ export const INPUT_CLASS = inputClass('default');
  */
 export const TEXTAREA_CLASS = cn(INPUT_BASE, 'min-h-[60px] px-3 py-2 text-sm');
 
+/** `TEXTAREA_CLASS` without the field's own edge — for use inside `InputGroup`. */
+export const TEXTAREA_BARE_CLASS = cn(INPUT_CORE, 'min-h-[60px] py-3 text-sm');
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, storageKey, storageType, storageTtl, inputSize = 'default', onChange, defaultValue, value, ...props }, ref) => {
-    const resolvedClass = cn(inputClass(inputSize), className);
+  ({ className, type, storageKey, storageType, storageTtl, inputSize = 'default', bare = false, onChange, defaultValue, value, ...props }, ref) => {
+    const resolvedClass = cn(inputClass(inputSize, bare), className);
     const storageOptions: UseStoredValueOptions | undefined =
       storageKey ? { storage: storageType ?? 'local', ttl: storageTtl } : undefined;
 

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

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '../input-group';
+
+/**
+ * An input with a fixed symbol before and/or after the value.
+ *
+ * `InputGroup` already does this, but it takes four components and the right
+ * `align` on each — enough ceremony that a currency field gets written as a
+ * bare `Input` with the unit in the label instead, which is how a form ends up
+ * not saying what unit it is in.
+ *
+ * This is the same thing in one component:
+ *
+ *   <InputAffix prefix="$" value={price} onChange={onPrice} />
+ *   <InputAffix suffix="%" value={rate} onChange={onRate} />
+ *   <InputAffix prefix="$" suffix="/ yr" value={rent} onChange={onRent} />
+ *
+ * The affixes are **static marks, not content**: a currency symbol, a unit, a
+ * per-period suffix. They carry `aria-hidden` because the accessible name
+ * belongs on the field's label — a screen reader announcing "dollar sign" as
+ * it enters the field is noise, and a label reading "Purchase price in US
+ * dollars" is the thing that actually helps. Where an affix carries meaning
+ * the label does not, put it in the label or in a `FieldDescription`.
+ *
+ * Not for a button, a select, or anything interactive. Reach for `InputGroup`
+ * directly there — that is what `InputGroupButton` is for.
+ */
+export interface InputAffixProps
+  extends Omit<React.ComponentProps<typeof InputGroupInput>, 'prefix'> {
+  /** Shown before the value — a currency symbol, a unit. */
+  prefix?: React.ReactNode;
+  /** Shown after the value — a unit, a period. */
+  suffix?: React.ReactNode;
+  /** Applied to the group, so callers can size the whole control. */
+  groupClassName?: string;
+}
+
+const InputAffix = React.forwardRef<HTMLInputElement, InputAffixProps>(
+  ({ prefix, suffix, className, groupClassName, ...props }, ref) => (
+    <InputGroup className={groupClassName}>
+      {prefix ? (
+        <InputGroupAddon align="inline-start" aria-hidden="true">
+          {prefix}
+        </InputGroupAddon>
+      ) : null}
+      <InputGroupInput ref={ref} className={cn(className)} {...props} />
+      {suffix ? (
+        <InputGroupAddon align="inline-end" aria-hidden="true">
+          {suffix}
+        </InputGroupAddon>
+      ) : null}
+    </InputGroup>
+  ),
+);
+InputAffix.displayName = 'InputAffix';
+
+export { InputAffix };

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

@@ -14,8 +14,24 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-[var(--radius)] border outline-none transition-[color,box-shadow]",
-        "h-9 has-[>textarea]:h-auto",
+        // `border-border` and `bg-input`, the same pair `Input` resolves to. The
+        // group had `border-input`, which in the light theme is the *fill*
+        // token (97% L) rather than the edge one (86%) — so its border was
+        // nearly invisible next to a plain field's, and a focused money input
+        // showed a crisp inner rectangle inside a ghost of an outer one.
+        "group/input-group border-border bg-input shadow-xs relative flex w-full items-center rounded-[var(--radius)] border outline-none transition-[color,background-color,border-color,box-shadow]",
+        // Matches `Input`'s default size (h-10), not its `sm` one.
+        //
+        // This was `h-9`, which made a grouped input a row shorter than a bare
+        // `Input` or a `SelectTrigger` beside it — visible the moment a form
+        // puts a prefixed money field next to a plain select, and not
+        // attributable to either component from the outside. A wrapper that
+        // changes a control's height is a wrapper that cannot be dropped into
+        // an existing row.
+        //
+        // Use `className="h-9"` at the call site for the compact size, the
+        // same way `inputSize="sm"` is opted into rather than inherited.
+        "h-10 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
@@ -23,8 +39,11 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
+        // Focus state. Border AND ring, the same pair `Input` uses on its own
+        // — the group is standing in for a field's edge, so it has to draw the
+        // whole treatment. Ring alone left the group's border its resting grey
+        // while the control inside lit up, which reads as two nested fields.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
 
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
@@ -128,21 +147,34 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   )
 }
 
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
+/**
+ * Forwards its ref, unlike the other parts of this group.
+ *
+ * `Input` is a `forwardRef`, and a plain function wrapper around it swallows
+ * the ref silently — no warning, no type error, just a null ref at the call
+ * site. Anything wrapping this (see `InputAffix`) needs the node to focus or
+ * measure it.
+ */
+const InputGroupInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<"input">
+>(({ className, ...props }, ref) => {
   return (
     <Input
+      ref={ref}
+      bare
       data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
+      // `bare` omits the field chrome instead of overriding it. Cancelling it
+      // from here needed `focus-visible:ring-0` to beat `focus-visible:ring-1`
+      // at equal specificity — decided by stylesheet order, not by `cn()` — so
+      // a focused money field drew a rectangle inside a rectangle whenever the
+      // order went the other way.
+      className={cn("flex-1", className)}
       {...props}
     />
   )
-}
+})
+InputGroupInput.displayName = "InputGroupInput"
 
 function InputGroupTextarea({
   className,
@@ -150,11 +182,9 @@ function InputGroupTextarea({
 }: React.ComponentProps<"textarea">) {
   return (
     <Textarea
+      bare
       data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
+      className={cn("flex-1 resize-none", className)}
       {...props}
     />
   )

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/index.ts

@@ -19,6 +19,7 @@ export { Slider } from './forms/slider';
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './forms/button-group';
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from './forms/form';
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea } from './forms/input-group';
+export { InputAffix, type InputAffixProps } from './forms/input-affix';
 export { InputOTP, InputOTPGroup, InputOTPSlot } from './forms/input-otp';
 export { PhoneInput } from './forms/phone-input';
 export type { PhoneInputProps } from './forms/phone-input';

package/src/components/navigation/pagination/pagination.tsx

@@ -38,6 +38,13 @@ PaginationItem.displayName = "PaginationItem"
 type PaginationLinkProps = {
   isActive?: boolean
   href?: string
+  /**
+   * Scroll to the top after navigating. Forwarded to `<Link>`, which defaults
+   * it to `false` — so a paginator that omits it leaves the visitor at the
+   * scroll offset they had on the previous page, looking at row 40 of a list
+   * that now starts again at row 1.
+   */
+  scroll?: boolean
 } & Pick<ButtonProps, "size"> &
   React.ComponentProps<"a">
 
@@ -46,6 +53,7 @@ const PaginationLink = ({
   isActive,
   size = "icon",
   href,
+  scroll,
   children,
   ...props
 }: PaginationLinkProps) => {
@@ -63,6 +71,7 @@ const PaginationLink = ({
         href={href}
         aria-current={isActive ? "page" : undefined}
         className={classes}
+        scroll={scroll}
       >
         {children}
       </Link>

package/src/components/navigation/pagination/ssr-pagination.tsx

@@ -143,6 +143,7 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
             <PaginationPrevious
               href={actualHasPreviousPage ? getPageUrl(actualCurrentPage - 1) : undefined}
               className={!actualHasPreviousPage ? "pointer-events-none opacity-50" : undefined}
+              scroll
             />
           </PaginationItem>
 
@@ -154,6 +155,7 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
                 <PaginationLink
                   href={getPageUrl(page)}
                   isActive={page === actualCurrentPage}
+                  scroll
                 >
                   {page}
                 </PaginationLink>
@@ -165,6 +167,7 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
             <PaginationNext
               href={hasNextPage ? getPageUrl(actualCurrentPage + 1) : undefined}
               className={!hasNextPage ? "pointer-events-none opacity-50" : undefined}
+              scroll
             />
           </PaginationItem>
         </PaginationContent>

package/src/hooks/router/useNavigate.ts

@@ -38,7 +38,8 @@ export interface NavigateOptions {
 export interface UseNavigateReturn {
   /**
    * SPA navigation through the active adapter.
-   * Default: pushState + scroll to top.
+   * Default: pushState, and NO scroll — pass `scroll: true` for a transition
+   * that should land the visitor at the top.
    */
   navigate: (href: string, opts?: NavigateOptions) => void;
   /**