@moontra/moonui 3.4.0 → 4.1.0

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__/tags-input.test.tsx

@@ -0,0 +1,163 @@
+/**
+ * issue #272 — TagsInput erişilebilirlik ve klavye gezintisi.
+ *
+ * Bileşenin hiç testi yoktu. Aşağıdakiler denetimde bulunan üç boşluğu
+ * kilitler: X butonunun erişilebilir adı, tag ekleme input'unun erişilebilir
+ * adı ve etiketler arası klavye gezintisi (önceden yalnızca Backspace ile SON
+ * etiket silinebiliyordu; aradaki bir etiketi klavyeyle silmenin yolu yoktu).
+ */
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { TagsInput } from '../tags-input'
+
+/** Kontrollü sarmalayıcı — bileşen controlled API'ye sahip. */
+function Harness({
+  initial = ['alpha', 'beta', 'gamma'],
+  onChangeSpy,
+  ...rest
+}: {
+  initial?: string[]
+  onChangeSpy?: jest.Mock
+} & Partial<React.ComponentProps<typeof TagsInput>>) {
+  const [tags, setTags] = React.useState<string[]>(initial)
+  return (
+    <TagsInput
+      value={tags}
+      onChange={(next) => {
+        onChangeSpy?.(next)
+        setTags(next)
+      }}
+      {...rest}
+    />
+  )
+}
+
+const input = () => screen.getByRole('textbox')
+const removeBtn = (tag: string) => screen.getByRole('button', { name: `Remove ${tag}` })
+
+describe('TagsInput — erişilebilir adlar', () => {
+  it('tag ekleme input\'u erişilebilir ad taşır', () => {
+    render(<Harness />)
+    // Etiket eklendikçe placeholder kalkıyor; aria-label olmadan input adsız kalıyordu.
+    expect(input()).toHaveAccessibleName('Add tag')
+  })
+
+  it('tüketici kendi aria-label\'ını verebilir', () => {
+    render(<Harness aria-label="Etiketler" />)
+    expect(input()).toHaveAccessibleName('Etiketler')
+  })
+
+  it('her X butonu hangi etiketi sildiğini duyurur', () => {
+    render(<Harness />)
+    expect(removeBtn('alpha')).toBeInTheDocument()
+    expect(removeBtn('beta')).toBeInTheDocument()
+    expect(removeBtn('gamma')).toBeInTheDocument()
+  })
+
+  it('disabled iken silme butonları render edilmez', () => {
+    render(<Harness disabled />)
+    expect(screen.queryByRole('button', { name: /^Remove / })).not.toBeInTheDocument()
+  })
+})
+
+describe('TagsInput — etiket ekleme/silme', () => {
+  it('Enter ile etiket ekler', () => {
+    const spy = jest.fn()
+    render(<Harness initial={[]} onChangeSpy={spy} />)
+
+    fireEvent.change(input(), { target: { value: 'yeni' } })
+    fireEvent.keyDown(input(), { key: 'Enter' })
+
+    expect(spy).toHaveBeenCalledWith(['yeni'])
+  })
+
+  it('X butonuna tıklayınca doğru etiket silinir', () => {
+    const spy = jest.fn()
+    render(<Harness onChangeSpy={spy} />)
+
+    fireEvent.click(removeBtn('beta'))
+    expect(spy).toHaveBeenCalledWith(['alpha', 'gamma'])
+  })
+
+  it('boş input\'ta Backspace son etiketi siler', () => {
+    const spy = jest.fn()
+    render(<Harness onChangeSpy={spy} />)
+
+    fireEvent.keyDown(input(), { key: 'Backspace' })
+    expect(spy).toHaveBeenCalledWith(['alpha', 'beta'])
+  })
+
+  it('yinelenen etiket eklenmez ve hata duyurulur', () => {
+    render(<Harness />)
+
+    fireEvent.change(input(), { target: { value: 'alpha' } })
+    fireEvent.keyDown(input(), { key: 'Enter' })
+
+    const err = screen.getByRole('status')
+    expect(err).toHaveTextContent('This tag already exists')
+    // Hata input ile ilişkilendirilmeli.
+    expect(input()).toHaveAttribute('aria-invalid', 'true')
+    expect(input().getAttribute('aria-describedby')).toBe(err.id)
+  })
+})
+
+describe('TagsInput — klavye gezintisi (#272)', () => {
+  it('boş input\'ta sol ok son etikete odaklanır', () => {
+    render(<Harness />)
+
+    fireEvent.keyDown(input(), { key: 'ArrowLeft' })
+    expect(removeBtn('gamma')).toHaveFocus()
+  })
+
+  it('sol/sağ ok etiketler arasında gezinir', () => {
+    render(<Harness />)
+
+    removeBtn('gamma').focus()
+    fireEvent.keyDown(removeBtn('gamma'), { key: 'ArrowLeft' })
+    expect(removeBtn('beta')).toHaveFocus()
+
+    fireEvent.keyDown(removeBtn('beta'), { key: 'ArrowRight' })
+    expect(removeBtn('gamma')).toHaveFocus()
+  })
+
+  it('son etiketten sağ ok input\'a döner', () => {
+    render(<Harness />)
+
+    removeBtn('gamma').focus()
+    fireEvent.keyDown(removeBtn('gamma'), { key: 'ArrowRight' })
+    expect(input()).toHaveFocus()
+  })
+
+  it('Home/End uç etiketlere gider', () => {
+    render(<Harness />)
+
+    removeBtn('beta').focus()
+    fireEvent.keyDown(removeBtn('beta'), { key: 'Home' })
+    expect(removeBtn('alpha')).toHaveFocus()
+
+    fireEvent.keyDown(removeBtn('alpha'), { key: 'End' })
+    expect(removeBtn('gamma')).toHaveFocus()
+  })
+
+  it('odaklı etikette Delete o etiketi siler (hedefli silme)', () => {
+    const spy = jest.fn()
+    render(<Harness onChangeSpy={spy} />)
+
+    removeBtn('beta').focus()
+    fireEvent.keyDown(removeBtn('beta'), { key: 'Delete' })
+
+    // Backspace her zaman SONU siliyordu; ortadaki etiket klavyeyle silinemiyordu.
+    expect(spy).toHaveBeenCalledWith(['alpha', 'gamma'])
+  })
+
+  it('odaklı etikette Backspace de siler', () => {
+    const spy = jest.fn()
+    render(<Harness onChangeSpy={spy} />)
+
+    removeBtn('alpha').focus()
+    fireEvent.keyDown(removeBtn('alpha'), { key: 'Backspace' })
+
+    expect(spy).toHaveBeenCalledWith(['beta', 'gamma'])
+  })
+})

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/aspect-ratio.tsx

@@ -17,11 +17,15 @@ const aspectRatioVariants = cva(
   "relative overflow-hidden",
   {
     variants: {
+      // `variant` yalnız yüzey/kenarlık eksenini yönetir. Önceden her varyant
+      // ayrıca `rounded-md` taşıyordu ve `radius` ekseniyle çakışıyordu
+      // (aynı anda iki `rounded-*` sınıfı üretiliyordu). Köşe yuvarlaması artık
+      // TEK kaynaktan: `radius`.
       variant: {
-        default: "rounded-md bg-muted/10",
+        default: "bg-muted/10",
         ghost: "bg-transparent",
-        outline: "rounded-md border border-border",
-        card: "rounded-md bg-card shadow-sm",
+        outline: "border border-border",
+        card: "bg-card shadow-sm",
       },
       radius: {
         none: "rounded-none",
@@ -33,6 +37,8 @@ const aspectRatioVariants = cva(
     },
     defaultVariants: {
       variant: "default",
+      // Önceki davranış korunur: her varyant `rounded-md` taşıyordu.
+      radius: "md",
     },
   }
 )

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/button.tsx

@@ -205,6 +205,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={cn("moonui-theme", buttonVariants({ variant, size, rounded, fullWidth, className }))}
         ref={ref}
         disabled={disabled || loading}
+        // Görsel spinner + data-loading vardı ama yardımcı teknolojiye meşgul
+        // durumu hiç duyurulmuyordu.
+        aria-busy={loading || undefined}
         data-loading={loading ? "" : undefined}
         {...props}
       >

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

@@ -121,7 +121,12 @@ export interface DatePickerProps
   calendarProps?: React.ComponentProps<typeof Calendar>;
 }
 
-export function DatePicker({
+// NOT (issue #264): dört seçici de düz fonksiyondu, ref geçme yolu yoktu.
+// Her biri KENDİ gerçek kök DOM elemanına bağlanır — DOM yapısı değişmez.
+// DatePicker/DateTimePicker kök bir <div> render eder; DateRangePicker ve
+// MonthPicker'ın kökü Radix `Popover`'dır ve kendisi DOM üretmez, bu yüzden
+// onlarda ref tetikleyici butona gider.
+export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker({
   className,
   variant,
   size,
@@ -143,7 +148,7 @@ export function DatePicker({
   calendarProps,
   disabled,
   ...props
-}: DatePickerProps) {
+}: DatePickerProps, ref: React.ForwardedRef<HTMLDivElement>) {
   const [open, setOpen] = React.useState(false);
   const [internalDate, setInternalDate] = React.useState<Date | undefined>(value);
 
@@ -163,7 +168,11 @@ export function DatePicker({
     }
   };
 
-  const handleClear = (e: React.MouseEvent) => {
+  // Hem fare hem klavye (Enter/Space) yolundan çağrılıyor; yalnızca
+  // `stopPropagation` kullanıldığı için ortak taban tipi yeterli.
+  // (Önceden `React.MouseEvent` bekliyordu ve klavye yolunda `as any` ile
+  // zorlanıyordu.)
+  const handleClear = (e: React.SyntheticEvent) => {
     e.stopPropagation();
     handleSelect(undefined);
   };
@@ -188,7 +197,7 @@ export function DatePicker({
   const iconElement = icon || <CalendarIcon className="h-4 w-4" />;
 
   return (
-    <div className="moonui-theme">
+    <div ref={ref} className="moonui-theme">
       <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
@@ -231,7 +240,7 @@ export function DatePicker({
               onKeyDown={(e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                   e.preventDefault();
-                  handleClear(e as any);
+                  handleClear(e);
                 }
               }}
             >
@@ -255,7 +264,7 @@ export function DatePicker({
         </Button>
       </PopoverTrigger>
       <PopoverContent 
-        className="w-[360px] p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm !z-[9999]" 
+        className="w-[360px] p-0 shadow-2xl rounded-2xl border border-border bg-background/95 backdrop-blur-sm !z-[9999]" 
         align="start"
         sideOffset={12}
       >
@@ -289,7 +298,8 @@ export function DatePicker({
     </Popover>
     </div>
   );
-}
+});
+DatePicker.displayName = "DatePicker";
 
 /**
  * DateRangePicker Component
@@ -313,7 +323,7 @@ export interface DateRangePickerProps
   separator?: string;
 }
 
-export function DateRangePicker({
+export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps>(function DateRangePicker({
   className,
   value,
   onChange,
@@ -321,7 +331,7 @@ export function DateRangePicker({
   formatString = "LLL dd, y",
   separator = " - ",
   ...props
-}: DateRangePickerProps) {
+}: DateRangePickerProps, ref: React.ForwardedRef<HTMLButtonElement>) {
   const [open, setOpen] = React.useState(false);
   const [internalRange, setInternalRange] = React.useState(value);
 
@@ -352,6 +362,7 @@ export function DateRangePicker({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
+          ref={ref}
           variant={props.variant === "ghost" ? "ghost" : "outline"}
           className={cn(
             datePickerVariants({ 
@@ -370,7 +381,7 @@ export function DateRangePicker({
           </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm !z-[9999]" align="start" sideOffset={12}>
+      <PopoverContent className="w-auto p-0 shadow-2xl rounded-2xl border border-border bg-background/95 backdrop-blur-sm !z-[9999]" align="start" sideOffset={12}>
         <Calendar
           mode="range"
           defaultMonth={internalRange?.from}
@@ -383,7 +394,8 @@ export function DateRangePicker({
       </PopoverContent>
     </Popover>
   );
-}
+});
+DateRangePicker.displayName = "DateRangePicker";
 
 /**
  * DateTimePicker Component
@@ -406,7 +418,7 @@ export interface DateTimePickerProps extends DatePickerProps {
   timeInterval?: number;
 }
 
-export function DateTimePicker({
+export const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(function DateTimePicker({
   value,
   onChange,
   formatString = "PPP p",
@@ -414,7 +426,7 @@ export function DateTimePicker({
   timeFormat = "24",
   timeInterval = 15,
   ...props
-}: DateTimePickerProps) {
+}: DateTimePickerProps, ref: React.ForwardedRef<HTMLDivElement>) {
   const [date, setDate] = React.useState<Date | undefined>(value);
   const [time, setTime] = React.useState<string>(
     value ? format(value, timeFormat === "24" ? "HH:mm" : "hh:mm a") : "00:00"
@@ -469,7 +481,7 @@ export function DateTimePicker({
   }, [timeFormat, timeInterval]);
 
   return (
-    <div className="flex flex-col gap-2">
+    <div ref={ref} className="flex flex-col gap-2">
       <DatePicker
         {...props}
         value={date}
@@ -500,7 +512,8 @@ export function DateTimePicker({
       )}
     </div>
   );
-}
+});
+DateTimePicker.displayName = "DateTimePicker";
 
 /**
  * MonthPicker Component
@@ -515,13 +528,13 @@ export interface MonthPickerProps extends Omit<DatePickerProps, "formatString">
   formatString?: string;
 }
 
-export function MonthPicker({
+export const MonthPicker = React.forwardRef<HTMLButtonElement, MonthPickerProps>(function MonthPicker({
   value,
   onChange,
   placeholder = "Pick a month",
   formatString = "MMMM yyyy",
   ...props
-}: MonthPickerProps) {
+}: MonthPickerProps, ref: React.ForwardedRef<HTMLButtonElement>) {
   const [open, setOpen] = React.useState(false);
   const [viewDate, setViewDate] = React.useState(value || new Date());
 
@@ -550,6 +563,7 @@ export function MonthPicker({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
+          ref={ref}
           variant={props.variant === "default" ? "outline" : (props.variant || "outline")}
           className={cn(
             datePickerVariants({ 
@@ -566,12 +580,15 @@ export function MonthPicker({
           {displayValue || placeholder}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-64 p-0 shadow-2xl border border-gray-200 dark:border-gray-700 bg-background !z-[9999]" align="start">
+      <PopoverContent className="w-64 p-0 shadow-2xl border border-border bg-background !z-[9999]" align="start">
         <div className="p-3">
           <div className="flex items-center justify-between mb-3">
+            {/* İkon-only butonlar: erişilebilir ad olmadan ekran okuyucu
+                yalnızca "button" der, hangi yöne gidileceği anlaşılmaz. */}
             <Button
               variant="outline"
               size="icon"
+              aria-label={`Previous year, ${viewDate.getFullYear() - 1}`}
               onClick={() => handleYearChange(-1)}
             >
               <ChevronLeft className="h-4 w-4" />
@@ -582,6 +599,7 @@ export function MonthPicker({
             <Button
               variant="outline"
               size="icon"
+              aria-label={`Next year, ${viewDate.getFullYear() + 1}`}
               onClick={() => handleYearChange(1)}
             >
               <ChevronRight className="h-4 w-4" />
@@ -604,7 +622,8 @@ export function MonthPicker({
       </PopoverContent>
     </Popover>
   );
-}
+});
+MonthPicker.displayName = "MonthPicker";
 
 // Re-export utilities
 export { format } from "date-fns";

package/src/components/ui/file-upload.tsx

@@ -325,6 +325,10 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
             multiple={multiple}
             disabled={disabled}
             onChange={handleFileSelect}
+            // Input görsel olarak gizli (opacity-0) ve ilişkili bir <label>'ı
+            // yok — erişilebilir ad olmadan ekran okuyucu bunu adsız bir dosya
+            // alanı olarak duyuruyordu.
+            aria-label={multiple ? "Choose files to upload" : "Choose a file to upload"}
             className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
           />
           

package/src/components/ui/index.ts

@@ -34,6 +34,7 @@ export {
 
 export type {
     AvatarProps as MoonUIAvatarProps,
+    AvatarGroupProps as MoonUIAvatarGroupProps,
 } from "./avatar";
 
 // Badge
@@ -256,6 +257,10 @@ export type {
 // Label
 export { Label as MoonUILabel } from "./label";
 
+export type {
+    LabelProps as MoonUILabelProps,
+} from "./label";
+
 // LockedComponent
 export {
     LockedComponent as MoonUILockedComponent,
@@ -340,12 +345,21 @@ export {
     SelectScrollDownButton as MoonUISelectScrollDownButton,
 } from "./select";
 
+export type {
+    SelectTriggerProps as MoonUISelectTriggerProps,
+    SelectItemProps as MoonUISelectItemProps,
+} from "./select";
+
 // Separator
 export { Separator as MoonUISeparator } from "./separator";
 
 // SimpleEditor
 export { SimpleEditor as MoonUISimpleEditor } from "./simple-editor";
 
+export type {
+    SimpleEditorProps as MoonUISimpleEditorProps,
+} from "./simple-editor";
+
 // Skeleton
 export {
     Skeleton as MoonUISkeleton,
@@ -400,6 +414,14 @@ export {
 // TagsInput
 export { TagsInput as MoonUITagsInput } from "./tags-input";
 
+export type {
+    TagsInputProps as MoonUITagsInputProps,
+} from "./tags-input";
+
+export type {
+    ToggleProps as MoonUIToggleProps,
+} from "./toggle";
+
 // Textarea
 export { Textarea as MoonUITextarea } from "./textarea";
 

package/src/components/ui/input-otp.tsx

@@ -32,6 +32,11 @@ const InputOTP = React.forwardRef<
 >(({ className, containerClassName, ...props }, ref) => (
   <OTPInput
     ref={ref}
+    // input-otp gerçek girişi görsel olarak gizli bir <input> ile yapar ve o
+    // input'un ilişkili bir <label>'ı yok — erişilebilir ad olmadan ekran
+    // okuyucu adsız bir metin alanı duyuruyordu. Tüketici kendi aria-label'ını
+    // verirse aşağıdaki {...props} yayılımı bunu ezer.
+    aria-label="One-time password"
     containerClassName={cn(
       "moonui-theme",
       "flex items-center gap-2 has-[:disabled]:opacity-50",