@djangocfg/ui-core 2.1.539 → 2.1.540

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.539",
+  "version": "2.1.540",
   "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.540",
     "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.540",
+    "@djangocfg/typescript-config": "^2.1.540",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

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

@@ -15,7 +15,18 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       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",
+        // 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",
@@ -128,21 +139,37 @@ 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}
       data-slot="input-group-control"
       className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        // `focus-visible:border-transparent` alongside `ring-0`: the group
+        // draws the focus ring for the whole control, and `INPUT_BASE` also
+        // turns the input's own border to `--ring` on focus. Suppressing only
+        // the ring left that border visible, so a focused money field showed a
+        // rectangle inside a rectangle — the addon sitting outside the inner
+        // one, which is exactly what the group exists to prevent.
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent",
         className
       )}
       {...props}
     />
   )
-}
+})
+InputGroupInput.displayName = "InputGroupInput"
 
 function InputGroupTextarea({
   className,

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;
   /**