@djangocfg/ui-core 2.1.109 → 2.1.111

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.109",
+  "version": "2.1.111",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -65,6 +65,7 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@djangocfg/i18n": "^2.1.111",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
     "react": "^19.0.0",
@@ -122,7 +123,8 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.109",
+    "@djangocfg/i18n": "^2.1.111",
+    "@djangocfg/typescript-config": "^2.1.111",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/calendar/date-picker.tsx

@@ -4,6 +4,7 @@ import { format } from 'date-fns';
 import { CalendarIcon } from 'lucide-react';
 import * as React from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
@@ -43,7 +44,7 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
     {
       value,
       onChange,
-      placeholder = 'Pick a date',
+      placeholder,
       dateFormat = 'PPP',
       disabled = false,
       fromDate,
@@ -54,8 +55,11 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
     },
     ref
   ) => {
+    const t = useTypedT<I18nTranslations>()
     const [open, setOpen] = React.useState(false)
 
+    const resolvedPlaceholder = placeholder ?? t('ui.datetime.pickDate')
+
     const handleSelect: SelectSingleEventHandler = (date) => {
       onChange?.(date)
       setOpen(false)
@@ -75,7 +79,7 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
             )}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
-            {value ? format(value, dateFormat) : placeholder}
+            {value ? format(value, dateFormat) : resolvedPlaceholder}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align={align}>
@@ -132,7 +136,7 @@ const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps
     {
       value,
       onChange,
-      placeholder = 'Pick a date range',
+      placeholder,
       dateFormat = 'LLL dd, y',
       disabled = false,
       fromDate,
@@ -144,10 +148,13 @@ const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps
     },
     ref
   ) => {
+    const t = useTypedT<I18nTranslations>()
     const [open, setOpen] = React.useState(false)
 
+    const resolvedPlaceholder = placeholder ?? t('ui.datetime.pickDateRange')
+
     const formatRange = () => {
-      if (!value?.from) return placeholder
+      if (!value?.from) return resolvedPlaceholder
       if (!value.to) return format(value.from, dateFormat)
       return `${format(value.from, dateFormat)} - ${format(value.to, dateFormat)}`
     }

package/src/components/carousel.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../lib/utils';
 import { Button } from './button';
 
@@ -197,7 +198,9 @@ const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const t = useTypedT<I18nTranslations>()
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+  const previousLabel = t('ui.actions.previousSlide')
 
   return (
     <Button
@@ -216,7 +219,7 @@ const CarouselPrevious = React.forwardRef<
       {...props}
     >
       <ArrowLeftIcon className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
+      <span className="sr-only">{previousLabel}</span>
     </Button>
   )
 })
@@ -226,7 +229,9 @@ const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const t = useTypedT<I18nTranslations>()
   const { orientation, scrollNext, canScrollNext } = useCarousel()
+  const nextLabel = t('ui.actions.nextSlide')
 
   return (
     <Button
@@ -245,7 +250,7 @@ const CarouselNext = React.forwardRef<
       {...props}
     >
       <ArrowRightIcon className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
+      <span className="sr-only">{nextLabel}</span>
     </Button>
   )
 })

package/src/components/combobox.tsx

@@ -3,6 +3,7 @@
 import { Check, ChevronsUpDown } from 'lucide-react';
 import * as React from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../lib/utils';
 import { Button } from './button';
 import {
@@ -34,18 +35,24 @@ export function Combobox({
   options,
   value,
   onValueChange,
-  placeholder = "Select option...",
-  searchPlaceholder = "Search...",
-  emptyText = "No results found.",
+  placeholder,
+  searchPlaceholder,
+  emptyText,
   className,
   disabled = false,
   renderOption,
   renderValue,
 }: ComboboxProps) {
+  const t = useTypedT<I18nTranslations>()
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
   const scrollRef = React.useRef<HTMLDivElement>(null)
 
+  // Resolve translations
+  const resolvedPlaceholder = placeholder ?? t('ui.select.placeholder')
+  const resolvedSearchPlaceholder = searchPlaceholder ?? t('ui.select.search')
+  const resolvedEmptyText = emptyText ?? t('ui.select.noResults')
+
   React.useEffect(() => {
     if (scrollRef.current && open) {
       // Force scrollable styles with !important
@@ -102,14 +109,14 @@ export function Combobox({
             ? renderValue(selectedOption)
             : selectedOption
             ? selectedOption.label
-            : placeholder}
+            : resolvedPlaceholder}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
         <Command shouldFilter={false} className="flex flex-col">
           <CommandInput
-            placeholder={searchPlaceholder}
+            placeholder={resolvedSearchPlaceholder}
             className="shrink-0"
             value={search}
             onValueChange={setSearch}
@@ -128,7 +135,7 @@ export function Combobox({
           >
             <CommandList className="!max-h-none !overflow-visible" style={{ pointerEvents: 'auto' }}>
               {filteredOptions.length === 0 ? (
-                <CommandEmpty>{emptyText}</CommandEmpty>
+                <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
               ) : (
                 <CommandGroup className="!overflow-visible" style={{ pointerEvents: 'auto' }}>
                   {filteredOptions.map((option) => (

package/src/components/copy.tsx

@@ -3,6 +3,7 @@
 import { Check, Copy } from 'lucide-react';
 import * as React from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../lib/utils';
 import { Button } from './button';
 
@@ -39,6 +40,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
     iconClassName = 'h-4 w-4',
     ...props
   }, ref) => {
+    const t = useTypedT<I18nTranslations>()
     const [copied, setCopied] = React.useState(false)
 
     const handleCopy = async () => {
@@ -53,6 +55,8 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
     }
 
     const hasLabel = !!children
+    const copiedText = t('ui.actions.copied')
+    const copyLabel = t('ui.actions.copyToClipboard')
 
     return (
       <Button
@@ -62,7 +66,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         variant={variant}
         onClick={handleCopy}
         className={cn('shrink-0', className)}
-        aria-label={copied ? 'Copied' : 'Copy to clipboard'}
+        aria-label={copied ? copiedText : copyLabel}
         {...props}
       >
         {copied ? (
@@ -70,7 +74,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         ) : (
           <Copy className={iconClassName} />
         )}
-        {hasLabel && <span className={copied ? 'text-green-500' : undefined}>{copied ? 'Copied' : children}</span>}
+        {hasLabel && <span className={copied ? 'text-green-500' : undefined}>{copied ? copiedText : children}</span>}
       </Button>
     )
   }

package/src/components/index.ts

@@ -62,6 +62,7 @@ export { Calendar, CalendarDayButton } from './calendar';
 export { DatePicker, DateRangePicker } from './calendar';
 export type { DatePickerProps, DateRangePickerProps, DateRange } from './calendar';
 export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from './carousel';
+export type { CarouselApi } from './carousel';
 export { TokenIcon, getAllTokenSymbols, searchTokens, getTokensByCategory } from './token-icon';
 export type { TokenIconProps, TokenSymbol, TokenCategory } from './token-icon';
 

package/src/components/multi-select-pro/async.tsx

@@ -17,7 +17,7 @@ import { cva } from 'class-variance-authority';
 import { Check, ChevronsUpDown, Loader2, X, XCircle } from 'lucide-react';
 import * as React from 'react';
 
-
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Badge } from '../badge';
 import { Button } from '../button';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../command';
@@ -173,10 +173,10 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
       searchValue,
       onSearchChange,
       isLoading = false,
-      placeholder = "Select options",
-      searchPlaceholder = "Search...",
-      emptyText = "No results found.",
-      loadingText = "Loading...",
+      placeholder,
+      searchPlaceholder,
+      emptyText,
+      loadingText,
       variant = "default",
       animation = 0,
       animationConfig,
@@ -197,6 +197,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
     },
     ref
   ) => {
+    const t = useTypedT<I18nTranslations>()
     const [open, setOpen] = React.useState(false)
     const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue)
     const buttonRef = React.useRef<HTMLButtonElement>(null)
@@ -204,6 +205,18 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
     // Cache selected options to persist them when they disappear from current options
     const [selectedOptionsCache, setSelectedOptionsCache] = React.useState<Map<string, MultiSelectProAsyncOption>>(new Map())
 
+    // Prepare translations
+    const translations = React.useMemo(() => ({
+      placeholder: placeholder ?? t('ui.select.placeholder'),
+      search: searchPlaceholder ?? t('ui.select.search'),
+      selectAll: t('ui.select.selectAll'),
+      clearAll: t('ui.select.clearAll'),
+      noResults: emptyText ?? t('ui.select.noResults'),
+      loading: loadingText ?? t('ui.select.loading'),
+      moreItems: (count: number) => t('ui.select.moreItems', { count }),
+      remove: (label: string) => t('ui.actions.remove', { item: label }),
+    }), [placeholder, searchPlaceholder, emptyText, loadingText, t])
+
     // Process options
     const flatOptions = React.useMemo(() => {
       const flat = flattenOptions(options)
@@ -373,7 +386,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
                 e.stopPropagation()
                 toggleOption(option.value)
               }}
-              aria-label={`Remove ${option.label}`}
+              aria-label={translations.remove(option.label)}
             >
               <X className="h-3 w-3" />
             </button>
@@ -385,7 +398,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
     // Display value
     const displayValue = React.useMemo(() => {
       if (selectedOptions.length === 0) {
-        return <span className="text-muted-foreground">{placeholder}</span>
+        return <span className="text-muted-foreground">{translations.placeholder}</span>
       }
 
       const displayed = selectedOptions.slice(0, maxCount)
@@ -396,12 +409,12 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
           {displayed.map((option, index) => renderBadge(option, index))}
           {remaining > 0 && (
             <Badge variant="outline" className="text-xs">
-              +{remaining} more
+              {translations.moreItems(remaining)}
             </Badge>
           )}
         </div>
       )
-    }, [selectedOptions, maxCount, placeholder, singleLine, variant, disabled, animConfig])
+    }, [selectedOptions, maxCount, translations, singleLine, variant, disabled, animConfig])
 
     // Render options
     const renderOptions = () => {
@@ -535,7 +548,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
                       handleClearAll()
                     }}
                     className="rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-2 focus:ring-ring"
-                    aria-label="Clear all selections"
+                    aria-label={translations.clearAll}
                   >
                     <XCircle className="h-4 w-4 shrink-0 opacity-50" />
                   </button>
@@ -558,7 +571,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
             <Command shouldFilter={false}>
               {searchable && (
                 <CommandInput
-                  placeholder={searchPlaceholder}
+                  placeholder={translations.search}
                   value={searchValue}
                   onValueChange={onSearchChange}
                 />
@@ -571,7 +584,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
                         onSelect={handleSelectAll}
                         className="cursor-pointer justify-center font-medium"
                       >
-                        Select All
+                        {translations.selectAll}
                       </CommandItem>
                     </CommandGroup>
                     <Separator />
@@ -581,10 +594,10 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
                 {isLoading ? (
                   <div className="py-6 text-center text-sm">
                     <Loader2 className="h-4 w-4 animate-spin mx-auto mb-2" />
-                    {loadingText}
+                    {translations.loading}
                   </div>
                 ) : options.length === 0 ? (
-                  <CommandEmpty>{emptyText}</CommandEmpty>
+                  <CommandEmpty>{translations.noResults}</CommandEmpty>
                 ) : (
                   renderOptions()
                 )}

package/src/components/multi-select-pro/index.tsx

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { Check, ChevronsUpDown, X, XCircle } from 'lucide-react';
 import * as React from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Badge } from '../badge';
 import { Button } from '../button';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../command';
@@ -150,7 +151,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
       options,
       onValueChange,
       defaultValue = [],
-      placeholder = "Select options",
+      placeholder,
       variant = "default",
       animation = 0,
       animationConfig,
@@ -173,6 +174,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
     },
     ref
   ) => {
+    const t = useTypedT<I18nTranslations>()
     const [open, setOpen] = React.useState(false)
     const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue)
     const [search, setSearch] = React.useState("")
@@ -181,6 +183,17 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
     // Cache selected options to persist them when they disappear from current options
     const [selectedOptionsCache, setSelectedOptionsCache] = React.useState<Map<string, MultiSelectProOption>>(new Map())
 
+    // Prepare translations
+    const translations = React.useMemo(() => ({
+      placeholder: placeholder ?? t('ui.select.placeholder'),
+      search: t('ui.select.search'),
+      selectAll: t('ui.select.selectAll'),
+      clearAll: t('ui.select.clearAll'),
+      noResults: t('ui.select.noResults'),
+      moreItems: (count: number) => t('ui.select.moreItems', { count }),
+      remove: (label: string) => t('ui.actions.remove', { item: label }),
+    }), [placeholder, t])
+
     // Process options
     const flatOptions = React.useMemo(() => {
       const flat = flattenOptions(options)
@@ -389,7 +402,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
                 e.stopPropagation()
                 toggleOption(option.value)
               }}
-              aria-label={`Remove ${option.label}`}
+              aria-label={translations.remove(option.label)}
             >
               <X className="h-3 w-3" />
             </button>
@@ -401,7 +414,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
     // Display value
     const displayValue = React.useMemo(() => {
       if (selectedOptions.length === 0) {
-        return <span className="text-muted-foreground">{placeholder}</span>
+        return <span className="text-muted-foreground">{translations.placeholder}</span>
       }
 
       const displayed = selectedOptions.slice(0, maxCount)
@@ -412,12 +425,12 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
           {displayed.map((option, index) => renderBadge(option, index))}
           {remaining > 0 && (
             <Badge variant="outline" className="text-xs">
-              +{remaining} more
+              {translations.moreItems(remaining)}
             </Badge>
           )}
         </div>
       )
-    }, [selectedOptions, maxCount, placeholder, singleLine, variant, disabled, animConfig])
+    }, [selectedOptions, maxCount, translations, singleLine, variant, disabled, animConfig])
 
     // Render options
     const renderOptions = () => {
@@ -551,7 +564,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
                       handleClearAll()
                     }}
                     className="rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-2 focus:ring-ring"
-                    aria-label="Clear all selections"
+                    aria-label={translations.clearAll}
                   >
                     <XCircle className="h-4 w-4 shrink-0 opacity-50" />
                   </button>
@@ -574,7 +587,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
             <Command shouldFilter={false}>
               {searchable && (
                 <CommandInput
-                  placeholder="Search..."
+                  placeholder={translations.search}
                   value={search}
                   onValueChange={setSearch}
                 />
@@ -587,7 +600,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
                         onSelect={handleSelectAll}
                         className="cursor-pointer justify-center font-medium"
                       >
-                        Select All
+                        {translations.selectAll}
                       </CommandItem>
                     </CommandGroup>
                     <Separator />
@@ -596,7 +609,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
 
                 {filteredOptions.length === 0 ? (
                   <CommandEmpty>
-                    {emptyIndicator || "No results found."}
+                    {emptyIndicator || translations.noResults}
                   </CommandEmpty>
                 ) : (
                   renderOptions()

package/src/components/multi-select.tsx

@@ -3,6 +3,7 @@
 import { Check, ChevronsUpDown, X } from 'lucide-react';
 import * as React from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../lib/utils';
 import { Badge } from './badge';
 import { Button } from './button';
@@ -34,17 +35,23 @@ export function MultiSelect({
   options,
   value = [],
   onChange,
-  placeholder = "Select options...",
-  searchPlaceholder = "Search...",
-  emptyText = "No results found.",
+  placeholder,
+  searchPlaceholder,
+  emptyText,
   className,
   disabled = false,
   maxDisplay = 3,
 }: MultiSelectProps) {
+  const t = useTypedT<I18nTranslations>()
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
   const scrollRef = React.useRef<HTMLDivElement>(null)
 
+  // Resolve translations
+  const resolvedPlaceholder = placeholder ?? t('ui.select.placeholder')
+  const resolvedSearchPlaceholder = searchPlaceholder ?? t('ui.select.search')
+  const resolvedEmptyText = emptyText ?? t('ui.select.noResults')
+
   React.useEffect(() => {
     if (scrollRef.current && open) {
       const el = scrollRef.current
@@ -88,7 +95,7 @@ export function MultiSelect({
 
   const displayValue = React.useMemo(() => {
     if (selectedOptions.length === 0) {
-      return <span className="text-muted-foreground">{placeholder}</span>
+      return <span className="text-muted-foreground">{resolvedPlaceholder}</span>
     }
 
     const displayed = selectedOptions.slice(0, maxDisplay)
@@ -107,6 +114,7 @@ export function MultiSelect({
               className="ml-1 rounded-full hover:bg-muted-foreground/20"
               onClick={(e) => handleRemove(option.value, e)}
               disabled={disabled}
+              aria-label={t('ui.actions.remove', { item: option.label })}
             >
               <X className="h-3 w-3" />
             </button>
@@ -114,12 +122,12 @@ export function MultiSelect({
         ))}
         {remaining > 0 && (
           <Badge variant="outline" className="text-xs">
-            +{remaining} more
+            {t('ui.select.moreItems', { count: remaining })}
           </Badge>
         )}
       </div>
     )
-  }, [selectedOptions, maxDisplay, placeholder, disabled])
+  }, [selectedOptions, maxDisplay, resolvedPlaceholder, disabled, t])
 
   return (
     <Popover
@@ -151,7 +159,7 @@ export function MultiSelect({
       <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
         <Command shouldFilter={false} className="flex flex-col">
           <CommandInput
-            placeholder={searchPlaceholder}
+            placeholder={resolvedSearchPlaceholder}
             className="shrink-0"
             value={search}
             onValueChange={setSearch}
@@ -170,7 +178,7 @@ export function MultiSelect({
           >
             <CommandList className="!max-h-none !overflow-visible" style={{ pointerEvents: 'auto' }}>
               {filteredOptions.length === 0 ? (
-                <CommandEmpty>{emptyText}</CommandEmpty>
+                <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
               ) : (
                 <CommandGroup className="!overflow-visible" style={{ pointerEvents: 'auto' }}>
                   {filteredOptions.map((option) => {

package/src/components/phone-input.tsx

@@ -6,6 +6,7 @@ import {
 import { ChevronDown, Search } from 'lucide-react';
 import * as React from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Button } from './button';
 import { Input } from './input';
 import { cn } from '../lib';
@@ -58,16 +59,23 @@ const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
     value = '',
     onChange,
     defaultCountry = 'US',
-    placeholder = "Enter phone number",
+    placeholder,
     disabled = false,
     ...props
   }, ref) => {
+    const t = useTypedT<I18nTranslations>()
     const [selectedCountry, setSelectedCountry] = React.useState<CountryCode>(defaultCountry)
     const [inputValue, setInputValue] = React.useState('')
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false)
     const [searchQuery, setSearchQuery] = React.useState('')
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1)
 
+    // Prepare translations
+    const translations = React.useMemo(() => ({
+      searchCountries: t('ui.phone.searchCountries'),
+      noCountries: t('ui.phone.noCountries'),
+    }), [t])
+
     // Find country data
     const currentCountry = COUNTRIES.find(c => c.code === selectedCountry) || COUNTRIES[0]!
 
@@ -218,7 +226,7 @@ const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
               <div className="relative">
                 <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                 <Input
-                  placeholder="Search countries..."
+                  placeholder={translations.searchCountries}
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                   className="pl-8 h-8"
@@ -231,7 +239,7 @@ const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
             <div className="max-h-60 overflow-y-auto">
               {filteredCountries.length === 0 ? (
                 <div className="p-4 text-sm text-muted-foreground text-center">
-                  No countries found
+                  {translations.noCountries}
                 </div>
               ) : (
                 filteredCountries.map((country, index) => (

package/src/components/preloader.tsx

@@ -10,6 +10,7 @@
 import { Loader2 } from 'lucide-react';
 import React from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../lib/utils';
 import { Spinner } from './spinner';
 
@@ -102,6 +103,8 @@ export function Preloader({
   className,
   spinnerClassName,
 }: PreloaderProps) {
+  const t = useTypedT<I18nTranslations>()
+  const loadingLabel = text || t('ui.states.loading')
   const spinnerSize = sizeMap[size];
 
   // Fullscreen variant
@@ -124,7 +127,7 @@ export function Preloader({
           className
         )}
         role="status"
-        aria-label={text || 'Loading'}
+        aria-label={loadingLabel}
         aria-live="polite"
       >
         <div className="flex flex-col items-center gap-4 animate-in fade-in duration-300">
@@ -176,7 +179,7 @@ export function Preloader({
         className
       )}
       role="status"
-      aria-label={text || 'Loading'}
+      aria-label={loadingLabel}
       aria-live="polite"
     >
       <Loader2

package/src/components/spinner.tsx

@@ -1,12 +1,16 @@
 import { Loader2Icon } from 'lucide-react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../lib/utils';
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  const t = useTypedT<I18nTranslations>()
+  const loadingLabel = t('ui.states.loading')
+
   return (
     <Loader2Icon
       role="status"
-      aria-label="Loading"
+      aria-label={loadingLabel}
       className={cn("size-4 animate-spin", className)}
       {...props}
     />

package/src/components/tabs.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 import { useIsMobile } from '../hooks';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../lib/utils';
 import { Button } from './button';
 import { ScrollArea, ScrollBar } from './scroll-area';
@@ -40,7 +41,9 @@ interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.
 const Tabs = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Root>,
   TabsProps
->(({ mobileSheet = false, mobileSheetTitle = "Navigation", mobileTitleText, sticky = false, children, ...props }, ref) => {
+>(({ mobileSheet = false, mobileSheetTitle, mobileTitleText, sticky = false, children, ...props }, ref) => {
+  const t = useTypedT<I18nTranslations>()
+  const resolvedMobileSheetTitle = mobileSheetTitle ?? t('ui.navigation.title')
   const isMobile = useIsMobile()
   const [open, setOpen] = React.useState(false)
 
@@ -109,7 +112,7 @@ const Tabs = React.forwardRef<
             </SheetTrigger>
             <SheetContent side="right" className="w-[280px] sm:w-[350px]">
               <SheetHeader>
-                <SheetTitle>{mobileSheetTitle}</SheetTitle>
+                <SheetTitle>{resolvedMobileSheetTitle}</SheetTitle>
               </SheetHeader>
               <nav className="flex flex-col gap-2 mt-6">
                 <TabsPrimitive.List className="flex flex-col gap-2">