@djangocfg/ui-core 2.1.426 → 2.1.427

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.426",
+  "version": "2.1.427",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -106,7 +106,7 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.426",
+    "@djangocfg/i18n": "^2.1.427",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -180,8 +180,8 @@
     "@chenglou/pretext": "*"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.426",
-    "@djangocfg/typescript-config": "^2.1.426",
+    "@djangocfg/i18n": "^2.1.427",
+    "@djangocfg/typescript-config": "^2.1.427",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/components/data/badge/index.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { cn } from '../../../lib/utils';
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-[var(--radius)] border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-[var(--radius)] border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-1 focus:ring-ring",
   {
     variants: {
       variant: {

package/src/components/data/calendar/calendar.tsx

@@ -66,7 +66,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-[var(--radius)] border",
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring has-focus:ring-1 relative rounded-[var(--radius)] border",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
@@ -197,7 +197,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-1 [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}

package/src/components/data/stat/index.tsx

@@ -45,10 +45,10 @@ const statIndicatorVariants = cva(
       color: {
         default: "bg-muted text-muted-foreground",
         success:
-          "border-green-500/20 bg-green-500/10 text-green-600 dark:text-green-400",
-        info: "border-blue-500/20 bg-blue-500/10 text-blue-600 dark:text-blue-400",
+          "border-success-border bg-success-background text-success",
+        info: "border-info-border bg-info-background text-info",
         warning:
-          "border-orange-500/20 bg-orange-500/10 text-orange-600 dark:text-orange-400",
+          "border-warning-border bg-warning-background text-warning",
         error: "border-destructive/20 bg-destructive/10 text-destructive",
       },
     },
@@ -102,8 +102,8 @@ function StatTrend({
       className={cn(
         "inline-flex items-center gap-1 font-medium text-xs [&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         {
-          "text-green-600 dark:text-green-400": trend === "up",
-          "text-red-600 dark:text-red-400": trend === "down",
+          "text-success": trend === "up",
+          "text-destructive": trend === "down",
           "text-muted-foreground": trend === "neutral" || !trend,
         },
         className,

package/src/components/data/status/index.tsx

@@ -12,12 +12,12 @@ const statusVariants = cva(
         default:
           "border-transparent bg-muted text-muted-foreground **:data-[slot=status-indicator]:bg-muted-foreground",
         success:
-          "border-green-500/20 bg-green-500/10 text-green-600 **:data-[slot=status-indicator]:bg-green-600 dark:text-green-400 **:data-[slot=status-indicator]:dark:bg-green-400",
+          "border-success-border bg-success-background text-success **:data-[slot=status-indicator]:bg-success",
         error:
           "border-destructive/20 bg-destructive/10 text-destructive **:data-[slot=status-indicator]:bg-destructive",
         warning:
-          "border-orange-500/20 bg-orange-500/10 text-orange-600 **:data-[slot=status-indicator]:bg-orange-600 dark:text-orange-400 **:data-[slot=status-indicator]:dark:bg-orange-400",
-        info: "border-blue-500/20 bg-blue-500/10 text-blue-600 **:data-[slot=status-indicator]:bg-blue-600 dark:text-blue-400 **:data-[slot=status-indicator]:dark:bg-blue-400",
+          "border-warning-border bg-warning-background text-warning **:data-[slot=status-indicator]:bg-warning",
+        info: "border-info-border bg-info-background text-info **:data-[slot=status-indicator]:bg-info",
       },
     },
     defaultVariants: {

package/src/components/data/table/index.tsx

@@ -4,15 +4,21 @@ import { cn } from '../../../lib/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement> & { containerClassName?: string }
->(({ className, containerClassName, ...props }, ref) => (
-  // Card-style frame: a bordered, rounded `--card` surface so the table
-  // reads as a contained data panel in both themes (the page `--background`
-  // alone gives no separation). `overflow-hidden` clips the header band and
-  // row borders to the rounded corners.
-  <div className="relative w-full overflow-hidden rounded-[var(--radius)] border border-border bg-card text-card-foreground">
-    {/* Scroll container. Cap its height via `containerClassName`
-      * (e.g. "max-h-80") to get a scrollable body with a sticky header. */}
+  React.HTMLAttributes<HTMLTableElement> & {
+    containerClassName?: string
+    /**
+     * Wrap the table in the card-style frame (border + radius + `--card`
+     * surface). Default `true` — a standalone `<Table>` reads as a contained
+     * data panel against the page background. Set `false` when an outer
+     * container (e.g. `DataTable`) already supplies the frame, to avoid a
+     * double border and a radius that doesn't match the parent's.
+     */
+    frame?: boolean
+  }
+>(({ className, containerClassName, frame = true, ...props }, ref) => {
+  // Scroll container. Cap its height via `containerClassName`
+  // (e.g. "max-h-80") to get a scrollable body with a sticky header.
+  const scroll = (
     <div className={cn("w-full overflow-auto", containerClassName)}>
       <table
         ref={ref}
@@ -20,8 +26,21 @@ const Table = React.forwardRef<
         {...props}
       />
     </div>
-  </div>
-))
+  )
+
+  if (!frame) return scroll
+
+  // Card-style frame: matches ui-core `Card` (`--radius-popover` corner +
+  // `--shadow-card`) so a standalone table reads as the same kind of contained
+  // panel as every other surface in the app — the page `--background` alone
+  // gives no separation. `overflow-hidden` clips the header band and row
+  // borders to the rounded corners.
+  return (
+    <div className="relative w-full overflow-hidden rounded-[var(--radius-popover)] border border-border bg-card text-card-foreground [box-shadow:var(--shadow-card)]">
+      {scroll}
+    </div>
+  )
+})
 Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<

package/src/components/feedback/banner/index.tsx

@@ -306,12 +306,13 @@ const bannerVariants = cva(
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
-        info: "bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-50",
+        info: "bg-info-background text-info-foreground border-info-border",
         success:
-          "bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-50",
+          "bg-success-background text-success-foreground border-success-border",
         warning:
-          "bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-50",
-        destructive: "bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-50",
+          "bg-warning-background text-warning-foreground border-warning-border",
+        destructive:
+          "bg-destructive-background text-destructive-foreground border-destructive-border",
       },
     },
     defaultVariants: {

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

@@ -33,10 +33,20 @@ const buttonVariants = cva(
         huge: "h-14 rounded-[var(--radius)] px-10 text-lg",
         icon: "h-9 w-9",
       },
+      // Most variants ship a baked-in `shadow`/`shadow-sm` for a lifted look.
+      // `elevated={false}` flattens that (e.g. controls grouped inside a card —
+      // a table's pagination — where a per-button shadow fights the panel).
+      // `shadow-none` wins over the variant's shadow: both set `--tw-shadow`
+      // and this class is appended after the variant in the utility order.
+      elevated: {
+        true: "",
+        false: "shadow-none",
+      },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
+      elevated: true,
     },
   }
 )
@@ -64,7 +74,7 @@ function filterIcons(children: React.ReactNode): React.ReactNode {
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading = false, onClick, children, disabled, ...props }, ref) => {
+  ({ className, variant, size, elevated, asChild = false, loading = false, onClick, children, disabled, ...props }, ref) => {
     const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
       if (!loading) {
         onClick?.(e);
@@ -76,7 +86,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     if (asChild) {
       return (
         <Slot
-          className={cn(buttonVariants({ variant, size, className }))}
+          className={cn(buttonVariants({ variant, size, elevated, className }))}
           ref={ref}
           onClick={onClick}
           {...props}
@@ -88,7 +98,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <button
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, elevated, className }))}
         ref={ref}
         onClick={handleClick}
         disabled={disabled || loading}
@@ -122,14 +132,14 @@ export interface ButtonLinkProps
 }
 
 const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
-  ({ className, variant, size, href, replace, scroll, prefetch, children, ...props }, ref) => {
+  ({ className, variant, size, elevated, href, replace, scroll, prefetch, children, ...props }, ref) => {
     return (
       <Link
         href={href}
         replace={replace}
         scroll={scroll}
         prefetch={prefetch}
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, elevated, className }))}
         ref={ref}
         {...props}
       >

package/src/components/forms/button-download/index.tsx

@@ -248,9 +248,9 @@ const DownloadButton = React.forwardRef<HTMLButtonElement, DownloadButtonProps>(
         case 'downloading':
           return <Loader2 className="animate-spin" />
         case 'success':
-          return <CheckCircle2 className="text-green-600" />
+          return <CheckCircle2 className="text-success" />
         case 'error':
-          return <AlertCircle className="text-red-600" />
+          return <AlertCircle className="text-destructive" />
         default:
           return <Download />
       }

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

@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
     className={cn(
       "peer h-[1.125rem] w-[1.125rem] shrink-0 rounded-[4px] border border-input bg-background shadow-none",
       "transition-colors duration-150",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+      "focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
       "disabled:cursor-not-allowed disabled:opacity-40",
       "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className

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

@@ -3,6 +3,7 @@
 import * as React from "react";
 
 import { cn } from "../../../lib/utils";
+import { inputClass, TEXTAREA_CLASS } from "../input";
 
 // =============================================================================
 // Types
@@ -42,7 +43,10 @@ export interface EditableRootProps
 
 export interface EditablePreviewProps extends React.ComponentPropsWithoutRef<"span"> {}
 
-export interface EditableInputProps extends Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue"> {}
+export interface EditableInputProps extends Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue"> {
+  /** Density — matches the standalone Input's `inputSize`. Default: 'default'. */
+  inputSize?: 'default' | 'sm';
+}
 
 export interface EditableTextareaProps extends Omit<React.ComponentPropsWithoutRef<"textarea">, "value" | "defaultValue"> {}
 
@@ -270,7 +274,7 @@ EditablePreview.displayName = "EditablePreview";
 // =============================================================================
 
 const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>(
-  (props, ref) => {
+  ({ inputSize = 'default', className, onChange, onKeyDown, onBlur, onFocus, ...props }, ref) => {
     const context = useEditable("EditableInput");
 
     const composedRef = React.useCallback(
@@ -294,18 +298,19 @@ const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>(
         value={context.value}
         disabled={context.disabled}
         aria-label="Edit value"
-        className={cn(
-          "flex h-10 rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          props.className
-        )}
+        // Share the global Input styling (crisp focus, proper surface) so
+        // inline-edit fields match standalone inputs everywhere.
+        // NOTE: spread `props` FIRST, then our handlers/className, so the
+        // styled className + wrapped handlers always win (a trailing spread
+        // would clobber them — that bug left the input unstyled/borderless).
+        {...props}
+        className={cn(inputClass(inputSize), className)}
         onChange={(event) => {
-          props.onChange?.(event);
+          onChange?.(event);
           context.setValue(event.target.value);
         }}
         onKeyDown={(event) => {
-          props.onKeyDown?.(event);
+          onKeyDown?.(event);
           switch (event.key) {
             case "Enter":
               event.preventDefault();
@@ -318,18 +323,17 @@ const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>(
           }
         }}
         onBlur={(event) => {
-          props.onBlur?.(event);
+          onBlur?.(event);
           if (context.submitOnBlur) {
             context.submit();
           }
         }}
         onFocus={(event) => {
-          props.onFocus?.(event);
+          onFocus?.(event);
           if (context.selectAllOnFocus) {
             event.target.select();
           }
         }}
-        {...props}
       />
     );
   }
@@ -365,12 +369,8 @@ const EditableTextarea = React.forwardRef<HTMLTextAreaElement, EditableTextareaP
         value={context.value}
         disabled={context.disabled}
         aria-label="Edit value"
-        className={cn(
-          "flex min-h-[80px] w-full rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "disabled:cursor-not-allowed disabled:opacity-50 resize-none",
-          props.className
-        )}
+        // Share the global Textarea styling (crisp focus, proper surface).
+        className={cn(TEXTAREA_CLASS, 'resize-none', props.className)}
         onChange={(event) => {
           props.onChange?.(event);
           context.setValue(event.target.value);

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

@@ -29,10 +29,51 @@ export interface InputProps extends React.ComponentProps<"input"> {
    * TTL in ms. Stored value expires after this duration.
    */
   storageTtl?: number;
+  /**
+   * Control height/density.
+   * - `default` — 40px (forms, standalone fields).
+   * - `sm` — 36px, smaller text (inline edits, dense rows, settings chips).
+   */
+  inputSize?: 'default' | 'sm';
 }
 
+/**
+ * Shared input styling — single source so controlled/uncontrolled branches
+ * stay identical.
+ *
+ * Surface: `bg-input` (a token a notch off the page/panel) instead of
+ * `bg-transparent`, so the field reads as a real input on any surface (cards,
+ * dialogs) rather than a near-black hole.
+ *
+ * Focus: a CRISP thin accent outline — the border turns the `--ring` colour
+ * 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.
+ */
+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";
+
+const INPUT_SIZE: Record<NonNullable<InputProps['inputSize']>, string> = {
+  default: "h-10 px-3 py-2 text-base md:text-sm",
+  sm: "h-9 px-2.5 py-1.5 text-sm",
+};
+
+/** Resolve the full input class for a given size. */
+export const inputClass = (size: NonNullable<InputProps['inputSize']> = 'default') =>
+  cn(INPUT_BASE, INPUT_SIZE[size]);
+
+/** Default-size input styling — kept as a named export for reuse (e.g. Editable). */
+export const INPUT_CLASS = inputClass('default');
+
+/**
+ * Textarea styling — shares the SAME border/surface/focus base as inputs (one
+ * source of truth) with multi-line height/padding instead of a fixed height.
+ */
+export const TEXTAREA_CLASS = cn(INPUT_BASE, 'min-h-[60px] px-3 py-2 text-sm');
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, storageKey, storageType, storageTtl, onChange, defaultValue, value, ...props }, ref) => {
+  ({ className, type, storageKey, storageType, storageTtl, inputSize = 'default', onChange, defaultValue, value, ...props }, ref) => {
+    const resolvedClass = cn(inputClass(inputSize), className);
     const storageOptions: UseStoredValueOptions | undefined =
       storageKey ? { storage: storageType ?? 'local', ttl: storageTtl } : undefined;
 
@@ -62,10 +103,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       return (
         <input
           type={type}
-          className={cn(
-            "flex h-10 w-full rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            className
-          )}
+          className={resolvedClass}
           ref={ref}
           value={value}
           onChange={storageKey ? handleChange : onChange}
@@ -81,10 +119,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        className={cn(
-          "flex h-10 w-full rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        )}
+        className={cn(INPUT_CLASS, className)}
         ref={ref}
         defaultValue={storageKey && storedValue ? storedValue : defaultValue}
         onChange={storageKey ? handleChange : onChange}

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

@@ -164,7 +164,7 @@ export const OTPInput = React.forwardRef<
                 ? `flex-1 min-w-0 aspect-square ${sizeTextVariants[resolvedSize]}`
                 : sizeVariants[resolvedSize],
               error && 'border-destructive ring-destructive/20',
-              success && 'border-green-500 ring-green-500/20',
+              success && 'border-success ring-success/20',
               slotClassName
             )}
           />