@moontra/moonui 3.3.0 → 4.0.0

package/src/components/ui/__tests__/slider.test.tsx

@@ -490,4 +490,100 @@ describe('Slider Component', () => {
       expect(thumbs).toHaveLength(1)
     })
   })
+
+  // Regresyon koruması: thumb'lar `role="slider"` + `tabIndex=0` taşıyıp
+  // odaklanabiliyordu ama hiçbir klavye handler'ı yoktu — ARIA sözleşmesi
+  // slider vaat ediyor, bileşen yalnızca fareyle çalışıyordu (WCAG 2.1.1).
+  describe('Klavye ile değer değiştirme', () => {
+    it('ArrowRight ve ArrowUp değeri step kadar artırır', () => {
+      const onValueChange = jest.fn()
+      render(
+        <Slider defaultValue={[50]} min={0} max={100} step={1} onValueChange={onValueChange} />
+      )
+      const thumb = screen.getByRole('slider')
+
+      fireEvent.keyDown(thumb, { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenLastCalledWith([51])
+
+      fireEvent.keyDown(thumb, { key: 'ArrowUp' })
+      expect(onValueChange).toHaveBeenLastCalledWith([52])
+      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '52')
+    })
+
+    it('ArrowLeft ve ArrowDown değeri step kadar azaltır', () => {
+      const onValueChange = jest.fn()
+      render(
+        <Slider defaultValue={[50]} min={0} max={100} step={5} onValueChange={onValueChange} />
+      )
+      const thumb = screen.getByRole('slider')
+
+      fireEvent.keyDown(thumb, { key: 'ArrowLeft' })
+      expect(onValueChange).toHaveBeenLastCalledWith([45])
+
+      fireEvent.keyDown(thumb, { key: 'ArrowDown' })
+      expect(onValueChange).toHaveBeenLastCalledWith([40])
+    })
+
+    it('Home ve End uç değerlere taşır', () => {
+      const onValueChange = jest.fn()
+      render(
+        <Slider defaultValue={[50]} min={10} max={90} step={1} onValueChange={onValueChange} />
+      )
+      const thumb = screen.getByRole('slider')
+
+      fireEvent.keyDown(thumb, { key: 'Home' })
+      expect(onValueChange).toHaveBeenLastCalledWith([10])
+
+      fireEvent.keyDown(screen.getByRole('slider'), { key: 'End' })
+      expect(onValueChange).toHaveBeenLastCalledWith([90])
+    })
+
+    it('PageUp ve PageDown 10x step uygular', () => {
+      const onValueChange = jest.fn()
+      render(
+        <Slider defaultValue={[50]} min={0} max={100} step={2} onValueChange={onValueChange} />
+      )
+      fireEvent.keyDown(screen.getByRole('slider'), { key: 'PageUp' })
+      expect(onValueChange).toHaveBeenLastCalledWith([70])
+    })
+
+    it('min/max sınırlarını aşmaz', () => {
+      const onValueChange = jest.fn()
+      render(
+        <Slider defaultValue={[100]} min={0} max={100} step={1} onValueChange={onValueChange} />
+      )
+      fireEvent.keyDown(screen.getByRole('slider'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenLastCalledWith([100])
+    })
+
+    it('disabled iken hiçbir tuş değeri değiştirmez', () => {
+      const onValueChange = jest.fn()
+      render(
+        <Slider defaultValue={[50]} min={0} max={100} disabled onValueChange={onValueChange} />
+      )
+      fireEvent.keyDown(screen.getByRole('slider'), { key: 'ArrowRight' })
+      expect(onValueChange).not.toHaveBeenCalled()
+    })
+
+    it('çoklu thumb komşusunun ötesine geçmez', () => {
+      const onValueChange = jest.fn()
+      render(
+        <Slider defaultValue={[40, 41]} min={0} max={100} step={1} onValueChange={onValueChange} />
+      )
+
+      // Soldaki thumb sağdakine (41) kadar çıkabilir, ötesine geçemez.
+      fireEvent.keyDown(screen.getAllByRole('slider')[0], { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenLastCalledWith([41, 41])
+
+      fireEvent.keyDown(screen.getAllByRole('slider')[0], { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenLastCalledWith([41, 41])
+    })
+
+    it('eşlenmemiş tuşlar değeri değiştirmez', () => {
+      const onValueChange = jest.fn()
+      render(<Slider defaultValue={[50]} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('slider'), { key: 'a' })
+      expect(onValueChange).not.toHaveBeenCalled()
+    })
+  })
 })

package/src/components/ui/__tests__/switch.test.tsx

@@ -83,8 +83,8 @@ describe('Switch Component', () => {
       expect(switchElement).toHaveClass('data-[state=checked]:bg-warning')
     })
 
-    it('renders danger variant correctly', () => {
-      render(<Switch variant="danger" data-testid="switch" />)
+    it('renders destructive variant correctly', () => {
+      render(<Switch variant="destructive" data-testid="switch" />)
       const switchElement = screen.getByTestId('switch')
       expect(switchElement).toHaveClass('data-[state=checked]:bg-error')
     })
@@ -331,7 +331,7 @@ describe('Switch Component', () => {
         <Switch
           loading
           size="sm"
-          variant="danger"
+          variant="destructive"
           leftIcon={<span>Left</span>}
           description="Loading switch"
           data-testid="switch"
@@ -369,4 +369,37 @@ describe('Switch Component', () => {
       expect(switchElement).toBeInTheDocument()
     })
   })
+
+  describe('description ↔ aria-describedby bağı (#271)', () => {
+    it('description verildiğinde switch ile programatik olarak ilişkilendirilir', () => {
+      // Regresyon: description düz <span> olarak render ediliyor ama Root'a
+      // hiç bağlanmıyordu — ekran okuyucu açıklamayı switch ile ilişkilendiremiyordu.
+      render(<Switch description="Bildirimleri aç" data-testid="switch" />)
+
+      const el = screen.getByTestId('switch')
+      const describedBy = el.getAttribute('aria-describedby')
+      expect(describedBy).toBeTruthy()
+
+      const descEl = document.getElementById(describedBy!)
+      expect(descEl).toHaveTextContent('Bildirimleri aç')
+    })
+
+    it('description yoksa aria-describedby basılmaz', () => {
+      render(<Switch data-testid="switch" />)
+      expect(screen.getByTestId('switch')).not.toHaveAttribute('aria-describedby')
+    })
+
+    it('tüketicinin kendi aria-describedby değeri korunur', () => {
+      render(
+        <>
+          <span id="dis">Harici açıklama</span>
+          <Switch description="Dahili" aria-describedby="dis" data-testid="switch" />
+        </>
+      )
+
+      const describedBy = screen.getByTestId('switch').getAttribute('aria-describedby')!
+      expect(describedBy.split(' ')).toContain('dis')
+      expect(describedBy.split(' ').length).toBe(2)
+    })
+  })
 })

package/src/components/ui/__tests__/toggle-group.test.tsx

@@ -290,4 +290,34 @@ describe('ToggleGroup Components', () => {
       expect(first).toHaveFocus()
     })
   })
+
+  describe('Orientation', () => {
+    it('varsayılan/yatay yerleşimde taban sınıflar korunur', () => {
+      render(
+        <ToggleGroup type="single" data-testid="group">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const group = screen.getByTestId('group')
+      expect(group).toHaveClass('inline-flex', 'items-center', 'justify-center')
+    })
+
+    it('orientation="vertical" dikey yerleşim sınıflarını devreye alır', () => {
+      render(
+        <ToggleGroup type="single" orientation="vertical" data-testid="group">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const group = screen.getByTestId('group')
+      // Radix roving-focus köke data-orientation yazar; dikey sınıflar buna bağlıdır.
+      // Eskiden kök className sabitti: `orientation` tip yüzeyinde vardı ama
+      // yerleşime hiç yansımıyordu (kardeş button-group bunu doğru yapıyor).
+      expect(group).toHaveAttribute('data-orientation', 'vertical')
+      expect(group.className).toContain('data-[orientation=vertical]:flex-col')
+      expect(group.className).toContain('data-[orientation=vertical]:items-stretch')
+    })
+  })
 })

package/src/components/ui/alert.tsx

@@ -23,7 +23,10 @@ const alertVariants = cva(
                 success: "bg-success/10 text-success border-success/30",
                 warning: "bg-warning/10 text-warning border-warning/30",
                 error: "bg-destructive/10 text-destructive border-destructive/30",
-                info: "bg-blue-500/10 text-blue-500 border-blue-500/30",
+                // `--info` token'ı (tokens.css) blue-500 ile birebir aynı değeri
+                // taşır → görsel değişiklik yok, ancak varyant artık temaya ve
+                // karanlık moda duyarlı. Kardeş varyantlarla simetrik.
+                info: "bg-info/10 text-info border-info/30",
             },
             size: {
                 sm: "py-2 text-xs",
@@ -114,7 +117,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
                     <button
                         onClick={onClose}
                         className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100"
-                        aria-label="Kapat"
+                        aria-label="Close alert"
                     >
                         <X className="h-4 w-4" />
                     </button>

package/src/components/ui/avatar.tsx

@@ -85,16 +85,28 @@ const AvatarFallback = React.forwardRef<
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // Avatar Group Component for displaying multiple avatars
-interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  limit?: number;
-  avatars: React.ReactNode[];
+//
+// KIRICI (issue #260): prop sözleşmesi `limit`/`avatars: ReactNode[]` idi;
+// pro paketteki kardeşi (`MoonUIAvatarGroupPro`) ise `max`/`children` kullanıyordu
+// — aynı bileşen ailesi için iki farklı API. Standart React deseni (children)
+// kanonik kabul edilip free tarafı pro'ya hizalandı.
+//
+// Geçiş:  <AvatarGroup limit={3} avatars={[<Avatar/>, <Avatar/>]} />
+//     →   <AvatarGroup max={3}><Avatar/><Avatar/></AvatarGroup>
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Gösterilecek en fazla avatar sayısı; kalanlar "+N" olarak özetlenir. */
+  max?: number;
+  /** Avatar bileşenleri. */
+  children?: React.ReactNode;
+  /** Avatar'lar arası üst üste binme miktarı (px, negatif). */
   overlapOffset?: number;
 }
 
 const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ className, limit, avatars, overlapOffset = -8, ...props }, ref) => {
-    const visibleAvatars = limit ? avatars.slice(0, limit) : avatars;
-    const remainingCount = limit ? Math.max(0, avatars.length - limit) : 0;
+  ({ className, max, children, overlapOffset = -8, ...props }, ref) => {
+    const childrenArray = React.Children.toArray(children);
+    const visibleAvatars = max ? childrenArray.slice(0, max) : childrenArray;
+    const remainingCount = max ? Math.max(0, childrenArray.length - max) : 0;
 
     return (
       <div

package/src/components/ui/badge.tsx

@@ -21,11 +21,15 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
+        // KIRICI (issue #261): önceden ham `gray-900`/`white` kullanılıyordu;
+        // aynı varyant pro pakette token'lıydı → free ve pro `primary` için
+        // farklı renk üretiyordu. Artık token'a bağlı (tema/karanlık moda duyarlı).
+        // `primary` VARSAYILAN varyant olduğu için görünür bir renk değişimidir.
         primary: [
-          "border-transparent bg-gray-900 text-white",
-          "hover:bg-gray-800 dark:hover:bg-gray-700",
-          "focus-visible:ring-gray-500/30 dark:focus-visible:ring-gray-400/40",
-          "dark:bg-gray-700 dark:text-gray-50 dark:shadow-inner dark:shadow-gray-950/10",
+          "border-transparent bg-primary text-primary-foreground",
+          "hover:bg-primary/90",
+          "focus-visible:ring-primary/30 dark:focus-visible:ring-primary/40",
+          "dark:bg-primary/90 dark:shadow-inner dark:shadow-primary/10",
         ],
         secondary: [
           "border-transparent bg-secondary text-secondary-foreground",
@@ -127,7 +131,7 @@ export interface BadgeProps
  * @param props.rightIcon - Badge'in sağında görüntülenecek ikon
  * @param props.noAutoSpacing - Otomatik spacing'i devre dışı bırak
  */
-function Badge({
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({
   className,
   variant,
   size,
@@ -141,7 +145,7 @@ function Badge({
   noAutoSpacing,
   children,
   ...props
-}: BadgeProps) {
+}, ref) => {
   // Auto-assign icons and content for special variants
   let autoLeftIcon = leftIcon;
   let autoChildren = children;
@@ -169,14 +173,15 @@ function Badge({
   }
 
   return (
-    <div 
+    <div
+      ref={ref}
       className={cn(
-        "moonui-theme", 
-        badgeVariants({ variant, size, radius }), 
+        "moonui-theme",
+        badgeVariants({ variant, size, radius }),
         // Remove auto-spacing if noAutoSpacing is true
         noAutoSpacing && "mr-0 mb-0",
         className
-      )} 
+      )}
       data-removable={removable ? "" : undefined}
       {...props}
     >
@@ -234,6 +239,8 @@ function Badge({
       )}
     </div>
   );
-}
+});
+
+Badge.displayName = "Badge";
 
 export { Badge, badgeVariants };

package/src/components/ui/checkbox.tsx

@@ -15,14 +15,14 @@ import { cn } from "../../lib/utils";
  */
 
 const checkboxVariants = cva(
-  "peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary-foreground",
+  "peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground",
   {
     variants: {
       variant: {
-        default: "border-border bg-background data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-        outline: "border-border bg-transparent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-        muted: "border-border bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-        ghost: "border-transparent bg-transparent hover:bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
+        default: "border-border bg-background data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary",
+        outline: "border-border bg-transparent data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary",
+        muted: "border-border bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary",
+        ghost: "border-transparent bg-transparent hover:bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary",
       },
       size: {
         sm: "h-3.5 w-3.5",
@@ -80,16 +80,18 @@ const Checkbox = React.forwardRef<
   checked,
   ...props 
 }, ref) => {
-  // Indeterminate state yönetimi
-  const [isIndeterminate, setIsIndeterminate] = React.useState(indeterminate);
-  
-  React.useEffect(() => {
-    setIsIndeterminate(indeterminate);
-  }, [indeterminate]);
+  // Radix'in `CheckedState` tipi: boolean | "indeterminate".
+  // "indeterminate" iletildiğinde Radix kökte `data-state="indeterminate"` +
+  // `aria-checked="mixed"` üretir ve Indicator'ı render eder — Minus ikonu ancak
+  // bu durumda görünür olur.
+  //
+  // Eskiden burada `false` iletiliyordu: kök hep `data-state="unchecked"` kalıyor,
+  // Radix Indicator unchecked durumda render edilmediği için Minus hiç görünmüyor
+  // ve ekran okuyucu "kısmen seçili" durumunu duyuramıyordu.
+  //
+  // `checked` undefined ise olduğu gibi geçirilir — uncontrolled kullanım korunur.
+  const effectiveChecked = indeterminate ? "indeterminate" : checked;
 
-  // Checked state override, indeterminate olduğunda
-  const effectiveChecked = isIndeterminate ? false : checked;
-  
   return (
     <CheckboxPrimitive.Root
       ref={ref}
@@ -103,7 +105,7 @@ const Checkbox = React.forwardRef<
           animation === "bounce" && "data-[state=checked]:animate-bounce"
         )}
       >
-        {isIndeterminate ? (
+        {indeterminate ? (
           <Minus className="h-[65%] w-[65%]" />
         ) : icon ? (
           icon
@@ -117,7 +119,7 @@ const Checkbox = React.forwardRef<
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 // CheckboxGroup bileşeni
-interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Grup içi yerleşim - dikey veya yatay
    */
@@ -154,7 +156,7 @@ const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // CheckboxLabel bileşeni
-interface CheckboxLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
+export interface CheckboxLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
   /**
    * Checkbox bileşeni için HTML id
    */
@@ -195,7 +197,7 @@ const CheckboxLabel = React.forwardRef<HTMLLabelElement, CheckboxLabelProps>(
 CheckboxLabel.displayName = "CheckboxLabel";
 
 // Checkbox ve Label içeren bileşen
-interface CheckboxWithLabelProps extends CheckboxProps {
+export interface CheckboxWithLabelProps extends CheckboxProps {
   /**
    * Label içeriği
    */

package/src/components/ui/color-picker.tsx

@@ -528,8 +528,14 @@ export function ColorPicker({
               {presets.map((presetColor) => (
                 <button
                   key={presetColor}
+                  type="button"
+                  // Swatch'ın tek içeriği arka plan rengi — erişilebilir ad
+                  // olmadan ekran okuyucu yalnızca "button" diye okur.
+                  aria-label={`Select color ${presetColor}`}
+                  aria-pressed={color === presetColor}
                   className={cn(
                     "h-7 w-7 rounded border-2 transition-all hover:scale-110",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                     color === presetColor
                       ? "border-primary"
                       : "border-transparent"
@@ -578,8 +584,14 @@ export function SimpleColorPicker({
       {colors.map((color) => (
         <button
           key={color}
+          type="button"
+          // Swatch'ın tek içeriği arka plan rengi — erişilebilir ad olmadan
+          // ekran okuyucu yalnızca "button" diye okur.
+          aria-label={`Select color ${color}`}
+          aria-pressed={value === color}
           className={cn(
             "rounded-full border-2 transition-all hover:scale-110",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             sizeClasses[size],
             value === color ? "border-primary ring-2 ring-primary/20" : "border-transparent"
           )}

package/src/components/ui/index.ts

@@ -34,6 +34,7 @@ export {
 
 export type {
     AvatarProps as MoonUIAvatarProps,
+    AvatarGroupProps as MoonUIAvatarGroupProps,
 } from "./avatar";
 
 // Badge
@@ -125,6 +126,9 @@ export {
 
 export type {
     CheckboxProps as MoonUICheckboxProps,
+    CheckboxGroupProps as MoonUICheckboxGroupProps,
+    CheckboxLabelProps as MoonUICheckboxLabelProps,
+    CheckboxWithLabelProps as MoonUICheckboxWithLabelProps,
 } from "./checkbox";
 
 // Collapsible
@@ -302,6 +306,9 @@ export {
 
 export type {
     RadioGroupProps as MoonUIRadioGroupProps,
+    RadioGroupItemProps as MoonUIRadioGroupItemProps,
+    RadioLabelProps as MoonUIRadioLabelProps,
+    RadioItemWithLabelProps as MoonUIRadioItemWithLabelProps,
 } from "./radio-group";
 
 // RichTextEditor
@@ -334,6 +341,11 @@ export {
     SelectScrollDownButton as MoonUISelectScrollDownButton,
 } from "./select";
 
+export type {
+    SelectTriggerProps as MoonUISelectTriggerProps,
+    SelectItemProps as MoonUISelectItemProps,
+} from "./select";
+
 // Separator
 export { Separator as MoonUISeparator } from "./separator";
 
@@ -356,6 +368,11 @@ export type {
 // Slider
 export { Slider as MoonUISlider } from "./slider";
 
+export type {
+    SliderProps as MoonUISliderProps,
+    SliderBaseProps as MoonUISliderBaseProps,
+} from "./slider";
+
 // SwipeableCard
 export { SwipeableCard as MoonUISwipeableCard } from "./swipeable-card";
 

package/src/components/ui/radio-group.tsx

@@ -36,11 +36,20 @@ const radioGroupItemVariants = cva(
   }
 );
 
-export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+// NOT: `React.HTMLAttributes` kendi `defaultValue`'sunu
+// (`string | number | readonly string[]`) taşır; radio grubu için tek bir `string`
+// anlamlı olduğundan Omit ile daraltılır.
+export interface RadioGroupProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   /**
-   * Radio group value
+   * Radio group value (controlled)
    */
   value?: string;
+  /**
+   * Uncontrolled kullanımda başlangıç değeri. `value` verilmediğinde grup
+   * seçimi kendi iç state'inde tutar.
+   */
+  defaultValue?: string;
   /**
    * Function to call when radio group value changes
    */
@@ -63,9 +72,34 @@ const RadioGroupContext = React.createContext<{
 }>({});
 
 const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
-  ({ className, value, onValueChange, disabled, name, ...props }, ref) => {
+  ({ className, value, defaultValue, onValueChange, disabled, name, ...props }, ref) => {
+    // Controlled/uncontrolled ikili mod: `value` verilmişse tüketici yönetir,
+    // verilmemişse grup seçimi kendi iç state'inde tutar.
+    const [internalValue, setInternalValue] = React.useState<string | undefined>(
+      defaultValue
+    );
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+
+    const handleValueChange = React.useCallback(
+      (next: string) => {
+        if (!isControlled) {
+          setInternalValue(next);
+        }
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+
     return (
-      <RadioGroupContext.Provider value={{ value, onValueChange, disabled, name }}>
+      <RadioGroupContext.Provider
+        value={{
+          value: currentValue,
+          onValueChange: handleValueChange,
+          disabled,
+          name,
+        }}
+      >
         <div
           ref={ref}
           role="radiogroup"
@@ -131,7 +165,7 @@ const RadioGroupItem = React.forwardRef<
         disabled={disabled || radioGroup.disabled}
         name={radioGroup.name}
         onChange={handleChange}
-        className="sr-only"
+        className="peer sr-only"
         {...props}
       />
       <label
@@ -139,7 +173,12 @@ const RadioGroupItem = React.forwardRef<
         className={cn(
           radioGroupItemVariants({ variant, size }),
           "rounded-full",
-          "focus-visible:ring-primary/50",
+          // Gerçekte odaklanan eleman görsel olarak gizli `sr-only` input'tur.
+          // Görünür label onun KARDEŞİ olduğu için label'da `:focus-visible` hiç
+          // tetiklenmiyor, dolayısıyla klavye kullanıcısı hiçbir focus izi
+          // görmüyordu. Tailwind `peer` deseniyle (input `peer` sınıfını taşır ve
+          // DOM'da label'dan önce gelir) focus izi görünür elemana taşınır.
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary/50",
           "relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden",
           disabled && "cursor-not-allowed opacity-50",
           className
@@ -158,7 +197,7 @@ const RadioGroupItem = React.forwardRef<
 RadioGroupItem.displayName = "RadioGroupItem";
 
 // Radio Label Component
-interface RadioLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
+export interface RadioLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
   /**
    * HTML id for radio button
    */
@@ -194,7 +233,7 @@ const RadioLabel = React.forwardRef<HTMLLabelElement, RadioLabelProps>(
 RadioLabel.displayName = "RadioLabel";
 
 // Radio Item and Label combination
-interface RadioItemWithLabelProps extends RadioGroupItemProps {
+export interface RadioItemWithLabelProps extends RadioGroupItemProps {
   /**
    * Label content
    */