@moontra/moonui 3.3.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

@@ -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/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

@@ -125,6 +125,9 @@ export {
 
 export type {
     CheckboxProps as MoonUICheckboxProps,
+    CheckboxGroupProps as MoonUICheckboxGroupProps,
+    CheckboxLabelProps as MoonUICheckboxLabelProps,
+    CheckboxWithLabelProps as MoonUICheckboxWithLabelProps,
 } from "./checkbox";
 
 // Collapsible
@@ -302,6 +305,9 @@ export {
 
 export type {
     RadioGroupProps as MoonUIRadioGroupProps,
+    RadioGroupItemProps as MoonUIRadioGroupItemProps,
+    RadioLabelProps as MoonUIRadioLabelProps,
+    RadioItemWithLabelProps as MoonUIRadioItemWithLabelProps,
 } from "./radio-group";
 
 // RichTextEditor
@@ -356,6 +362,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
    */

package/src/components/ui/slider.tsx

@@ -97,7 +97,7 @@ const sliderThumbVariants = cva(
 )
 
 // Custom type definition for component properties
-type SliderBaseProps = {
+export type SliderBaseProps = {
   /**
    * Track variant
    */
@@ -161,7 +161,7 @@ type SliderBaseProps = {
 }
 
 // Merge HTML properties without defaultValue conflicts
-type SliderProps = SliderBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>
+export type SliderProps = SliderBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>
 
 const Slider = React.forwardRef<
   HTMLDivElement,
@@ -280,6 +280,59 @@ const Slider = React.forwardRef<
     document.addEventListener('mouseup', handleMouseUp);
   };
 
+  // Klavyeyle değer değiştirme (WCAG 2.1.1 Keyboard).
+  //
+  // Thumb'lar `role="slider"` + `aria-valuenow` + `tabIndex=0` taşıyıp
+  // odaklanabiliyordu, ancak hiçbir klavye handler'ı yoktu: bileşen ARIA
+  // sözleşmesinde slider olduğunu duyuruyor ama yalnızca fareyle çalışıyordu.
+  // Tuş eşlemesi Radix Slider davranışını izler.
+  const handleThumbKeyDown = (index: number) => (event: React.KeyboardEvent) => {
+    if (disabled) return;
+
+    const largeStep = step * 10;
+    const current = sliderValue[index];
+    let next: number;
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = current + step;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = current - step;
+        break;
+      case "PageUp":
+        next = current + largeStep;
+        break;
+      case "PageDown":
+        next = current - largeStep;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+      default:
+        return;
+    }
+
+    // Yalnızca yukarıdaki tuşlarda varsayılan davranışı engelle (sayfa kaydırma).
+    event.preventDefault();
+
+    // Çoklu thumb'da komşu değerleri aşma; tek thumb'da min/max sınırları geçerli.
+    const lowerBound = index > 0 ? sliderValue[index - 1] : min;
+    const upperBound =
+      index < sliderValue.length - 1 ? sliderValue[index + 1] : max;
+    const bounded = Math.max(lowerBound, Math.min(upperBound, next));
+
+    const newValues = [...sliderValue];
+    newValues[index] = bounded;
+    // handleValueChange, step hassasiyetine göre yuvarlamayı zaten uyguluyor.
+    handleValueChange(newValues);
+  };
+
   return (
     <div className="w-full" ref={ref} {...props}>
       {showValueLabel && (
@@ -332,6 +385,7 @@ const Slider = React.forwardRef<
               cursor: disabled ? 'not-allowed' : 'pointer',
             }}
             onMouseDown={handleThumbMouseDown(i)}
+            onKeyDown={handleThumbKeyDown(i)}
             aria-label={`Thumb ${i + 1}`}
             tabIndex={disabled ? -1 : 0}
             role="slider"

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

@@ -48,6 +48,10 @@ const ToggleGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "moonui-theme inline-flex items-center justify-center gap-1",
+      // Radix roving-focus kök elemana `data-orientation` yazar; dikey yerleşim
+      // buna bağlanır. Yatay/tanımsız durumda taban sınıflar geçerli kalır —
+      // yani mevcut render değişmez. Kardeş `button-group` ile desen paritesi.
+      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-start",
       className
     )}
     {...props}