@moontra/moonui 3.2.0 → 3.4.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__/toggle-group.test.tsx

@@ -0,0 +1,323 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { ToggleGroup, ToggleGroupItem } from '../toggle-group'
+
+describe('ToggleGroup Components', () => {
+  describe('Rendering', () => {
+    it('renders group with items', () => {
+      render(
+        <ToggleGroup type="single" data-testid="group">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const group = screen.getByTestId('group')
+      expect(group).toBeInTheDocument()
+      expect(screen.getByText('A')).toBeInTheDocument()
+      expect(screen.getByText('B')).toBeInTheDocument()
+    })
+
+    it('applies base + custom className on the root', () => {
+      render(
+        <ToggleGroup type="single" className="custom-group" data-testid="group">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const group = screen.getByTestId('group')
+      // moonui-theme + FREE token/layout base sınıfları korunur
+      expect(group).toHaveClass('moonui-theme', 'inline-flex', 'items-center', 'gap-1')
+      expect(group).toHaveClass('custom-group')
+    })
+
+    it('applies custom className on an item alongside toggleVariants', () => {
+      render(
+        <ToggleGroup type="single">
+          <ToggleGroupItem value="a" className="custom-item">
+            A
+          </ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const item = screen.getByText('A')
+      expect(item).toHaveClass('custom-item')
+      // toggleVariants'tan gelen aktif-durum token sınıfı
+      expect(item).toHaveClass('data-[state=on]:bg-accent')
+    })
+
+    it('forwards ref on the group', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(
+        <ToggleGroup type="single" ref={ref}>
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+        </ToggleGroup>
+      )
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('forwards ref on the item', () => {
+      const ref = React.createRef<HTMLButtonElement>()
+      render(
+        <ToggleGroup type="single">
+          <ToggleGroupItem value="a" ref={ref}>
+            A
+          </ToggleGroupItem>
+        </ToggleGroup>
+      )
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+    })
+
+    it('maintains displayNames', () => {
+      expect(ToggleGroup.displayName).toBe('ToggleGroup')
+      expect(ToggleGroupItem.displayName).toBe('ToggleGroupItem')
+    })
+  })
+
+  describe('Single selection (type="single")', () => {
+    it('marks exactly one item active via defaultValue', () => {
+      render(
+        <ToggleGroup type="single" defaultValue="b">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      expect(screen.getByText('A')).toHaveAttribute('data-state', 'off')
+      expect(screen.getByText('B')).toHaveAttribute('data-state', 'on')
+    })
+
+    it('respects controlled value', () => {
+      render(
+        <ToggleGroup type="single" value="a">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      expect(screen.getByText('A')).toHaveAttribute('data-state', 'on')
+      expect(screen.getByText('B')).toHaveAttribute('data-state', 'off')
+    })
+
+    it('fires onValueChange with a string on click', () => {
+      const onValueChange = jest.fn()
+      render(
+        <ToggleGroup type="single" onValueChange={onValueChange}>
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      fireEvent.click(screen.getByText('B'))
+      expect(onValueChange).toHaveBeenCalledWith('b')
+    })
+  })
+
+  describe('Multiple selection (type="multiple")', () => {
+    it('marks multiple items active via defaultValue', () => {
+      render(
+        <ToggleGroup type="multiple" defaultValue={['a', 'b']}>
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+          <ToggleGroupItem value="c">C</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      expect(screen.getByText('A')).toHaveAttribute('data-state', 'on')
+      expect(screen.getByText('B')).toHaveAttribute('data-state', 'on')
+      expect(screen.getByText('C')).toHaveAttribute('data-state', 'off')
+    })
+
+    it('fires onValueChange with an array on click', () => {
+      const onValueChange = jest.fn()
+      render(
+        <ToggleGroup type="multiple" defaultValue={['a']} onValueChange={onValueChange}>
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      fireEvent.click(screen.getByText('B'))
+      expect(onValueChange).toHaveBeenCalledWith(['a', 'b'])
+    })
+  })
+
+  describe('Variant / size context propagation', () => {
+    it('propagates group variant + size to items', () => {
+      render(
+        <ToggleGroup type="single" variant="outline" size="lg">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const item = screen.getByText('A')
+      // outline variant + lg size (toggleVariants ile birebir)
+      expect(item).toHaveClass('border', 'border-input')
+      expect(item).toHaveClass('h-11', 'px-5')
+    })
+
+    it('uses item prop when the group provides no variant/size', () => {
+      render(
+        <ToggleGroup type="single">
+          <ToggleGroupItem value="a" variant="outline" size="sm">
+            A
+          </ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const item = screen.getByText('A')
+      // context tanımsız → item prop devreye girer
+      expect(item).toHaveClass('border', 'border-input')
+      expect(item).toHaveClass('h-9', 'px-2.5')
+    })
+
+    it('group variant overrides item variant (context wins)', () => {
+      render(
+        <ToggleGroup type="single" variant="outline">
+          <ToggleGroupItem value="a" variant="default">
+            A
+          </ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const item = screen.getByText('A')
+      // context.variant ?? props.variant → outline kazanır
+      expect(item).toHaveClass('border', 'border-input')
+    })
+
+    it('falls back to default variant/size when nothing is set', () => {
+      render(
+        <ToggleGroup type="single">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const item = screen.getByText('A')
+      // default variant: bg-transparent, default size: h-10 px-3
+      expect(item).toHaveClass('bg-transparent', 'h-10', 'px-3')
+    })
+  })
+
+  describe('Disabled state', () => {
+    it('disables all items when the group is disabled', () => {
+      render(
+        <ToggleGroup type="single" disabled>
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      expect(screen.getByText('A')).toBeDisabled()
+      expect(screen.getByText('B')).toBeDisabled()
+    })
+
+    it('disables an individual item', () => {
+      const onValueChange = jest.fn()
+      render(
+        <ToggleGroup type="single" onValueChange={onValueChange}>
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b" disabled>
+            B
+          </ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const disabledItem = screen.getByText('B')
+      expect(disabledItem).toBeDisabled()
+      fireEvent.click(disabledItem)
+      expect(onValueChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Accessibility (Radix-provided)', () => {
+    it('single group exposes radiogroup + radio roles', () => {
+      render(
+        <ToggleGroup type="single" data-testid="group">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      expect(screen.getByTestId('group')).toHaveAttribute('role', 'radiogroup')
+      expect(screen.getAllByRole('radio')).toHaveLength(2)
+    })
+
+    it('single active item reflects aria-checked', () => {
+      render(
+        <ToggleGroup type="single" defaultValue="a">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      expect(screen.getByText('A')).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByText('B')).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('multiple group exposes toolbar role + aria-pressed items', () => {
+      render(
+        <ToggleGroup type="multiple" defaultValue={['a']} data-testid="group">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      expect(screen.getByTestId('group')).toHaveAttribute('role', 'toolbar')
+      expect(screen.getByText('A')).toHaveAttribute('aria-pressed', 'true')
+      expect(screen.getByText('B')).toHaveAttribute('aria-pressed', 'false')
+    })
+
+    it('renders items as focusable buttons with Radix roving tabindex', () => {
+      render(
+        <ToggleGroup type="single" defaultValue="a">
+          <ToggleGroupItem value="a">A</ToggleGroupItem>
+          <ToggleGroupItem value="b">B</ToggleGroupItem>
+        </ToggleGroup>
+      )
+
+      const first = screen.getByText('A')
+      const second = screen.getByText('B')
+
+      // Radix RovingFocusGroup her item'a bir tabindex atar (roving nav altyapısı).
+      // Ok-tuşuyla odak taşıma gerçek tarayıcıda Radix tarafından sağlanır;
+      // jsdom odak olaylarını tam simüle etmediği için burada odaklanabilirlik doğrulanır.
+      expect(first).toHaveAttribute('tabindex')
+      expect(second).toHaveAttribute('tabindex')
+
+      first.focus()
+      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/button-group.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Button, type ButtonProps } from "./button";
+
+/**
+ * Premium ButtonGroup Component
+ *
+ * Bitişik (segmentli) veya boşluklu buton grupları için yüksek kaliteli,
+ * erişilebilir bir kapsayıcı bileşen. Yatay/dikey yerleşim, bitişik kenar
+ * radius birleştirme ve çocuk `<Button>`'lara size/variant yayılımı sunar.
+ *
+ * Tamamen token-tabanlıdır: kenarlık ve köşe yuvarlama değerleri mevcut Button
+ * token'larından gelir; hardcoded renk YOKtur.
+ */
+const buttonGroupVariants = cva(
+  // Temel kapsayıcı: inline-flex; çocuklar akış içinde hizalanır
+  "moonui-theme inline-flex",
+  {
+    variants: {
+      orientation: {
+        // Yatay: butonlar dikeyde ortalanır (içerik-genişliği korunur)
+        horizontal: "flex-row items-center",
+        // Dikey: butonlar aynı genişliğe uzar (items-stretch) → kenarlar hizalanır
+        vertical: "flex-col items-stretch",
+      },
+      attached: {
+        // Bitişik: boşluk yok; radius birleştirme compoundVariants ile uygulanır
+        true: "",
+        // Boşluklu: normal aralık, radius korunur
+        false: "gap-2",
+      },
+    },
+    compoundVariants: [
+      {
+        // Yatay + bitişik: bitişik yatay kenarlar düzleşir, -ml-px ile kenarlık örtüşür
+        orientation: "horizontal",
+        attached: true,
+        class: [
+          "[&>*:not(:first-child)]:rounded-l-none",
+          "[&>*:not(:last-child)]:rounded-r-none",
+          "[&>*:not(:first-child)]:-ml-px",
+        ],
+      },
+      {
+        // Dikey + bitişik: bitişik dikey kenarlar düzleşir, -mt-px ile kenarlık örtüşür
+        orientation: "vertical",
+        attached: true,
+        class: [
+          "[&>*:not(:first-child)]:rounded-t-none",
+          "[&>*:not(:last-child)]:rounded-b-none",
+          "[&>*:not(:first-child)]:-mt-px",
+        ],
+      },
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      attached: true,
+    },
+  }
+);
+
+// ButtonGroup component props
+export interface ButtonGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof buttonGroupVariants> {
+  /** Çocuk Button'lara yayılacak boyut (yalnızca çocuk kendi size'ını vermemişse) */
+  size?: ButtonProps["size"];
+  /** Çocuk Button'lara yayılacak varyant (yalnızca çocuk kendi variant'ını vermemişse) */
+  variant?: ButtonProps["variant"];
+}
+
+/**
+ * Premium ButtonGroup Component
+ *
+ * @param props - ButtonGroup bileşeni özellikleri
+ * @param props.orientation - Yerleşim yönü ("horizontal" | "vertical"), varsayılan "horizontal"
+ * @param props.attached - Bitişik (segmentli) mi yoksa boşluklu mu, varsayılan true
+ * @param props.size - Çocuk Button'lara yayılacak boyut (opsiyonel)
+ * @param props.variant - Çocuk Button'lara yayılacak varyant (opsiyonel)
+ */
+const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  (
+    { className, orientation, attached, size, variant, children, ...props },
+    ref
+  ) => {
+    // size/variant yalnızca en az biri tanımlıysa çocuklara enjekte edilir
+    const shouldPropagate = size !== undefined || variant !== undefined;
+
+    const enhancedChildren = shouldPropagate
+      ? React.Children.map(children, (child) => {
+          // Geçersiz element (string/number/null) veya Button olmayan çocuklar
+          // GRACEFUL geçilir — geçersiz prop enjekte edilmez
+          if (!React.isValidElement(child) || child.type !== Button) {
+            return child;
+          }
+
+          const childProps = child.props as ButtonProps;
+
+          // Çocuğun kendi prop'u önceliklidir (child.props.size ?? size)
+          return React.cloneElement(child as React.ReactElement<ButtonProps>, {
+            size: childProps.size ?? size,
+            variant: childProps.variant ?? variant,
+          });
+        })
+      : children;
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn(buttonGroupVariants({ orientation, attached }), className)}
+        {...props}
+      >
+        {enhancedChildren}
+      </div>
+    );
+  }
+);
+
+ButtonGroup.displayName = "ButtonGroup";
+
+export { ButtonGroup, buttonGroupVariants };

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"
           )}