@moontra/moonui 3.1.0 → 3.3.0

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

@@ -0,0 +1,293 @@
+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()
+    })
+  })
+})

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/index.ts

@@ -424,6 +424,44 @@ export {
     TooltipProvider as MoonUITooltipProvider,
 } from "./tooltip";
 
+// Kbd (issue #247) — standalone klavye-tuşu rozeti
+export {
+    Kbd as MoonUIKbd,
+    kbdVariants as moonUIKbdVariants,
+} from "./kbd";
+export type { KbdProps as MoonUIKbdProps } from "./kbd";
+
+// Rating (issue #247) — standalone yıldız değerlendirme
+export {
+    Rating as MoonUIRating,
+    ratingVariants as moonUIRatingVariants,
+} from "./rating";
+export type { RatingProps as MoonUIRatingProps } from "./rating";
+
+// Spinner (issue #247) — standalone yükleme göstergesi
+export {
+    Spinner as MoonUISpinner,
+    spinnerVariants as moonUISpinnerVariants,
+} from "./spinner";
+export type { SpinnerProps as MoonUISpinnerProps } from "./spinner";
+
+// Button Group (issue #257) — bitişik/segmentli buton grupları
+export {
+    ButtonGroup as MoonUIButtonGroup,
+    buttonGroupVariants as moonUIButtonGroupVariants,
+} from "./button-group";
+export type { ButtonGroupProps as MoonUIButtonGroupProps } from "./button-group";
+
+// Toggle Group (issue #257) — tek/çoklu seçim segmented toggle seti
+export {
+    ToggleGroup as MoonUIToggleGroup,
+    ToggleGroupItem as MoonUIToggleGroupItem,
+} from "./toggle-group";
+export type {
+    ToggleGroupProps as MoonUIToggleGroupProps,
+    ToggleGroupItemProps as MoonUIToggleGroupItemProps,
+} from "./toggle-group";
+
 // Also export without MoonUI prefix for backward compatibility
 export * from "./accordion";
 export * from "./alert";
@@ -473,3 +511,8 @@ export * from "./textarea";
 export * from "./toast";
 export * from "./toggle";
 export * from "./tooltip";
+export * from "./kbd";
+export * from "./rating";
+export * from "./spinner";
+export * from "./button-group";
+export * from "./toggle-group";

package/src/components/ui/kbd.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+/**
+ * Premium Kbd Component
+ *
+ * Klavye tuşlarını (⌘, Ctrl, K vb.) görsel olarak temsil eden standalone
+ * bir rozet bileşeni. Dark ve light modda uyumlu, token tabanlı stiller
+ * kullanır ve hafif kabartma/gölge ile fiziksel bir tuş görünümü verir.
+ */
+const kbdVariants = cva(
+  [
+    // Temel klavye-tuşu görünümü — token tabanlı, hardcoded renk yok
+    "inline-flex items-center justify-center rounded",
+    "border border-border bg-muted",
+    "px-1.5 font-mono font-medium text-muted-foreground",
+    // Alt kenarda hafif kabartma (border token'ı ile — [#...] hex sınıfı DEĞİL)
+    "shadow-[0_1px_0_1px_hsl(var(--border))]",
+    "select-none whitespace-nowrap",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-5 min-w-5 text-[10px]",
+        md: "h-6 min-w-6 text-xs",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export interface KbdProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof kbdVariants> {
+  /** Tuş içeriği (⌘, K, Ctrl vb.) */
+  children: React.ReactNode;
+}
+
+/**
+ * Premium Kbd Component
+ *
+ * @param props - Kbd bileşeni özellikleri
+ * @param props.size - Tuş boyutu ("sm" | "md")
+ * @param props.children - Tuş içeriği (⌘, K, Ctrl vb.)
+ */
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+  ({ className, size, children, ...props }, ref) => {
+    return (
+      <kbd
+        ref={ref}
+        className={cn("moonui-theme", kbdVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </kbd>
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+
+export { Kbd, kbdVariants };