@djangocfg/ui-core 2.1.433 → 2.1.435

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.433",
+  "version": "2.1.435",
   "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.433",
+    "@djangocfg/i18n": "^2.1.435",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -180,8 +180,8 @@
     "@chenglou/pretext": "*"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.433",
-    "@djangocfg/typescript-config": "^2.1.433",
+    "@djangocfg/i18n": "^2.1.435",
+    "@djangocfg/typescript-config": "^2.1.435",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

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

@@ -12,9 +12,9 @@ import { createPasteHandler, useSmartOTP } from './use-otp-input';
 import type { SmartOTPProps } from './types'
 
 /**
- * Size variants for OTP slots.
- * In fluid mode these only set font-size — width/height are driven by the container.
- * In fixed mode they set explicit w/h dimensions.
+ * Size variants for OTP slots — fixed square dimensions (Vercel/Linear look).
+ * The boxes never stretch to the container width: a code is a small, tidy
+ * cluster of fixed cells, centered, not a row of full-width fields.
  */
 const sizeVariants = {
   sm: 'h-10 w-10 text-base',
@@ -22,14 +22,6 @@ const sizeVariants = {
   lg: 'h-14 w-14 text-xl',
 }
 
-// Fluid mode: width is fed by flex-1, height by aspect-square. We only
-// need to size the text inside the box.
-const sizeTextVariants = {
-  sm: 'text-base',
-  default: 'text-lg',
-  lg: 'text-xl',
-}
-
 /**
  * OTP Separator Component
  */
@@ -99,7 +91,6 @@ export const OTPInput = React.forwardRef<
       size,
       error = false,
       success = false,
-      fluid = false,
       ...props
     },
     ref
@@ -160,9 +151,7 @@ export const OTPInput = React.forwardRef<
             key={i}
             index={i}
             className={cn(
-              fluid
-                ? `flex-1 min-w-0 aspect-square ${sizeTextVariants[resolvedSize]}`
-                : sizeVariants[resolvedSize],
+              sizeVariants[resolvedSize],
               error && 'border-destructive ring-destructive/20',
               success && 'border-success ring-success/20',
               slotClassName
@@ -172,7 +161,7 @@ export const OTPInput = React.forwardRef<
       }
 
       return slotElements
-    }, [length, showSeparator, separatorPosition, separatorClassName, resolvedSize, fluid, error, success, slotClassName])
+    }, [length, showSeparator, separatorPosition, separatorClassName, resolvedSize, error, success, slotClassName])
 
     return (
       <InputOTP
@@ -182,12 +171,12 @@ export const OTPInput = React.forwardRef<
         onChange={handleChange}
         onComplete={handleComplete}
         disabled={disabled}
-        containerClassName={cn('gap-2', fluid && 'w-full', containerClassName)}
+        containerClassName={cn('gap-2', containerClassName)}
         autoFocus={autoFocus}
         onPaste={pasteHandler}
         {...props}
       >
-        <InputOTPGroup className={cn('gap-2', fluid && 'w-full')}>{slots}</InputOTPGroup>
+        <InputOTPGroup className="gap-2">{slots}</InputOTPGroup>
       </InputOTP>
     )
   }

package/src/components/forms/otp/types.ts

@@ -118,13 +118,6 @@ export interface SmartOTPProps {
    * Success state
    */
   success?: boolean
-
-  /**
-   * Fluid mode — slots stretch to fill the full container width.
-   * Useful for responsive layouts where fixed slot widths would overflow.
-   * @default false
-   */
-  fluid?: boolean
 }
 
 /**

package/src/components/select/index.ts

@@ -65,7 +65,13 @@ export type { TCountryCode } from 'countries-list';
 
 // LanguageSelect
 export { LanguageSelect } from './language-select';
-export type { LanguageSelectProps, LanguageOption, TLanguageCode } from './language-select';
+export type {
+  LanguageSelectProps,
+  LanguageSelectSize,
+  LanguageSelectVariant,
+  LanguageOption,
+  TLanguageCode,
+} from './language-select';
 
 // Shared types
 export type {

package/src/components/select/language-select.tsx

@@ -25,6 +25,10 @@ export interface LanguageOption {
 
 export type LanguageSelectVariant = 'dropdown' | 'inline';
 
+/** Trigger size for the dropdown variant — mirrors Button/Input sizing.
+ *  `default` = 40px form control; `sm` = 32px compact (settings rows, chips). */
+export type LanguageSelectSize = 'default' | 'sm';
+
 export interface LanguageSelectProps {
   /** Selected language codes (ISO 639-1) */
   value?: string[];
@@ -34,6 +38,8 @@ export interface LanguageSelectProps {
   multiple?: boolean;
   /** Display variant: dropdown (popover) or inline (scrollable list) */
   variant?: LanguageSelectVariant;
+  /** Trigger size for the dropdown variant (default | sm). Mirrors Button. */
+  size?: LanguageSelectSize;
   /** Placeholder text (default: "Select language...") */
   placeholder?: string;
   /** Search placeholder text (default: "Search...") */
@@ -121,6 +127,7 @@ export function LanguageSelect({
   onChange,
   multiple = false,
   variant = 'dropdown',
+  size = 'default',
   placeholder,
   searchPlaceholder,
   emptyText,
@@ -363,10 +370,17 @@ export function LanguageSelect({
       <PopoverTrigger asChild>
         <Button
           variant="outline"
+          size={size === 'sm' ? 'sm' : 'default'}
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between min-h-10 h-auto py-2",
+            "w-full justify-between",
+            // Single-select: a fixed-height pill (the Button size sets height).
+            // Multiple: allow growth so wrapped badges aren't clipped — keep the
+            // auto-height min behaviour, scaled to the chosen size.
+            multiple
+              ? (size === 'sm' ? "min-h-8 h-auto py-1" : "min-h-10 h-auto py-2")
+              : (size === 'sm' ? "text-xs" : "h-10"),
             className
           )}
           disabled={disabled}
@@ -374,17 +388,25 @@ export function LanguageSelect({
           <div className="flex-1 text-left overflow-hidden">
             {displayValue}
           </div>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronsUpDown className={cn("ml-2 shrink-0 opacity-50", size === 'sm' ? "h-3.5 w-3.5" : "h-4 w-4")} />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+      {/* The list must stay readable even when the trigger is a narrow
+          status-bar/settings pill: grow to the trigger width but never below a
+          legible min, so language names aren't clipped to "En…". */}
+      <PopoverContent
+        className="w-auto min-w-[var(--radix-popover-trigger-width)] p-0 [--lang-min:11rem] [min-width:max(var(--radix-popover-trigger-width),var(--lang-min))]"
+        align="start"
+      >
         <Command shouldFilter={false} className="flex flex-col">
-          <CommandInput
-            placeholder={resolvedSearchPlaceholder}
-            className="shrink-0"
-            value={search}
-            onValueChange={setSearch}
-          />
+          {showSearch && (
+            <CommandInput
+              placeholder={resolvedSearchPlaceholder}
+              className="shrink-0"
+              value={search}
+              onValueChange={setSearch}
+            />
+          )}
           <CommandList className="max-h-[300px] overflow-y-auto">
             {filteredLanguages.length === 0 ? (
               <CommandEmpty>{resolvedEmptyText}</CommandEmpty>