@djangocfg/ui-core 2.1.540 → 2.1.541

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.540",
+  "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.540",
+    "@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.540",
-    "@djangocfg/typescript-config": "^2.1.540",
+    "@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-group/index.tsx

@@ -14,7 +14,12 @@ 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]",
+        // `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
@@ -34,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",
@@ -154,17 +162,14 @@ const InputGroupInput = React.forwardRef<
   return (
     <Input
       ref={ref}
+      bare
       data-slot="input-group-control"
-      className={cn(
-        // `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
-      )}
+      // `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}
     />
   )
@@ -177,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}