@moontra/moonui 3.0.0 → 3.1.0

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

@@ -0,0 +1,228 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+  inputOTPSlotVariants,
+  REGEXP_ONLY_DIGITS,
+} from '../input-otp'
+
+// Kontrollü test bileşeni — gerçek input-otp kütüphanesiyle uçtan uca çalışır
+const ControlledOTP = ({
+  onChange,
+  maxLength = 6,
+  ...props
+}: {
+  onChange?: (value: string) => void
+  maxLength?: number
+} & Partial<React.ComponentProps<typeof InputOTP>>) => {
+  const [value, setValue] = React.useState('')
+  return (
+    <InputOTP
+      maxLength={maxLength}
+      value={value}
+      onChange={(newValue) => {
+        setValue(newValue)
+        onChange?.(newValue)
+      }}
+      {...props}
+    >
+      <InputOTPGroup data-testid="otp-group">
+        {Array.from({ length: maxLength }, (_, i) => (
+          <InputOTPSlot key={i} index={i} data-testid={`otp-slot-${i}`} />
+        ))}
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+
+describe('InputOTP Components', () => {
+  describe('InputOTP Root', () => {
+    it('renders a textbox with the given maxLength', () => {
+      render(<ControlledOTP maxLength={6} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveAttribute('maxlength', '6')
+    })
+
+    it('applies moonui-theme to the container', () => {
+      const { container } = render(<ControlledOTP />)
+
+      expect(container.querySelector('.moonui-theme')).toBeInTheDocument()
+    })
+
+    it('merges custom containerClassName', () => {
+      const { container } = render(
+        <ControlledOTP containerClassName="custom-container" />
+      )
+
+      const otpContainer = container.querySelector('.custom-container')
+      expect(otpContainer).toBeInTheDocument()
+      expect(otpContainer).toHaveClass('flex', 'items-center', 'gap-2')
+    })
+
+    it('forwards ref to the underlying input', () => {
+      const ref = React.createRef<HTMLInputElement>()
+      render(
+        <InputOTP ref={ref} maxLength={4}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+          </InputOTPGroup>
+        </InputOTP>
+      )
+
+      expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(InputOTP.displayName).toBe('InputOTP')
+      expect(InputOTPGroup.displayName).toBe('InputOTPGroup')
+      expect(InputOTPSlot.displayName).toBe('InputOTPSlot')
+      expect(InputOTPSeparator.displayName).toBe('InputOTPSeparator')
+    })
+
+    it('passes through aria-label to the input', () => {
+      render(<ControlledOTP aria-label="One-time password" />)
+
+      expect(screen.getByRole('textbox')).toHaveAttribute(
+        'aria-label',
+        'One-time password'
+      )
+    })
+
+    it('disables the input when disabled prop is set', () => {
+      render(
+        <InputOTP maxLength={4} disabled>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+          </InputOTPGroup>
+        </InputOTP>
+      )
+
+      expect(screen.getByRole('textbox')).toBeDisabled()
+    })
+  })
+
+  describe('Value Entry', () => {
+    it('calls onChange and renders characters into slots when typing', () => {
+      const handleChange = jest.fn()
+      render(<ControlledOTP onChange={handleChange} />)
+
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '123' } })
+
+      expect(handleChange).toHaveBeenLastCalledWith('123')
+      expect(screen.getByTestId('otp-slot-0')).toHaveTextContent('1')
+      expect(screen.getByTestId('otp-slot-1')).toHaveTextContent('2')
+      expect(screen.getByTestId('otp-slot-2')).toHaveTextContent('3')
+      expect(screen.getByTestId('otp-slot-3')).toHaveTextContent('')
+    })
+
+    it('supports pasting a full code at once', () => {
+      const handleChange = jest.fn()
+      render(<ControlledOTP onChange={handleChange} />)
+
+      // Paste davranışı: input değeri tek seferde tamamen değişir
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '123456' } })
+
+      expect(handleChange).toHaveBeenLastCalledWith('123456')
+      expect(screen.getByTestId('otp-slot-5')).toHaveTextContent('6')
+    })
+
+    it('does not exceed maxLength', () => {
+      const handleChange = jest.fn()
+      render(<ControlledOTP maxLength={4} onChange={handleChange} />)
+
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '12345' } })
+
+      // input-otp maxLength üstünü keser veya reddeder — 5 karakterlik değer asla yayılmaz
+      expect(handleChange).not.toHaveBeenCalledWith('12345')
+    })
+
+    it('rejects non-matching characters when pattern is digits-only', () => {
+      const handleChange = jest.fn()
+      render(<ControlledOTP pattern={REGEXP_ONLY_DIGITS} onChange={handleChange} />)
+
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'abc' } })
+
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('InputOTPSlot', () => {
+    it('renders base styles with token-based border classes', () => {
+      render(<ControlledOTP />)
+
+      const slot = screen.getByTestId('otp-slot-0')
+      expect(slot).toHaveClass('border-y', 'border-r', 'border-input')
+    })
+
+    it('applies custom className', () => {
+      render(
+        <InputOTP maxLength={2}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} className="custom-slot" data-testid="slot" />
+          </InputOTPGroup>
+        </InputOTP>
+      )
+
+      expect(screen.getByTestId('slot')).toHaveClass('custom-slot')
+    })
+
+    it('marks the active slot with data-active and ring styles on focus', () => {
+      render(<ControlledOTP />)
+
+      const input = screen.getByRole('textbox')
+      fireEvent.focus(input)
+
+      const slot = screen.getByTestId('otp-slot-0')
+      expect(slot).toHaveAttribute('data-active')
+      expect(slot).toHaveClass('ring-2', 'ring-ring')
+    })
+
+    it('exposes active ring styling through inputOTPSlotVariants', () => {
+      // Aktif slot vurgusu token tabanlı ring sınıflarını içermeli
+      expect(inputOTPSlotVariants({ isActive: true })).toContain('ring-2')
+      expect(inputOTPSlotVariants({ isActive: true })).toContain('ring-ring')
+      expect(inputOTPSlotVariants({ isActive: false })).not.toContain('ring-2')
+    })
+  })
+
+  describe('InputOTPSeparator', () => {
+    it('renders with separator role', () => {
+      render(
+        <InputOTP maxLength={4}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+          </InputOTPGroup>
+          <InputOTPSeparator data-testid="separator" />
+          <InputOTPGroup>
+            <InputOTPSlot index={1} />
+          </InputOTPGroup>
+        </InputOTP>
+      )
+
+      const separator = screen.getByTestId('separator')
+      expect(separator).toHaveAttribute('role', 'separator')
+    })
+
+    it('applies custom className', () => {
+      render(
+        <InputOTP maxLength={2}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+          </InputOTPGroup>
+          <InputOTPSeparator className="custom-separator" data-testid="separator" />
+        </InputOTP>
+      )
+
+      expect(screen.getByTestId('separator')).toHaveClass('custom-separator')
+    })
+  })
+})

package/src/components/ui/carousel.tsx

@@ -0,0 +1,324 @@
+"use client"
+
+import * as React from "react";
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+
+/**
+ * Premium Carousel Component
+ *
+ * Embla Carousel tabanlı, erişilebilir ve esnek carousel bileşeni.
+ * Yatay/dikey yön desteği, klavye navigasyonu ve plugin (autoplay vb.) desteği sunar.
+ */
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Embla carousel seçenekleri (loop, align, axis vb.) */
+  opts?: CarouselOptions;
+  /** Embla plugin listesi (ör. autoplay) */
+  plugins?: CarouselPlugin;
+  /** Kaydırma yönü */
+  orientation?: "horizontal" | "vertical";
+  /** Embla API'sine dışarıdan erişmek için callback */
+  setApi?: (api: CarouselApi) => void;
+}
+
+interface CarouselContextProps
+  extends Pick<CarouselProps, "opts" | "plugins" | "setApi"> {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  orientation: "horizontal" | "vertical";
+}
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+/**
+ * Carousel context hook'u — Carousel alt bileşenlerinin embla API'sine
+ * ve yön bilgisine erişmesini sağlar.
+ */
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Carousel Root
+ * -----------------------------------------------------------------------------------------------*/
+const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Yön bilgisi opts.axis ile de verilebilir — orientation prop'u öncelikli
+    const resolvedOrientation =
+      orientation || (opts?.axis === "y" ? "vertical" : "horizontal");
+
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: resolvedOrientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    // Embla "select" olayında ileri/geri butonlarının durumunu güncelle
+    const onSelect = React.useCallback((emblaApi: CarouselApi) => {
+      if (!emblaApi) return;
+      setCanScrollPrev(emblaApi.canScrollPrev());
+      setCanScrollNext(emblaApi.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    // Klavye navigasyonu: yatayda sol/sağ, dikeyde yukarı/aşağı ok tuşları
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        const prevKey =
+          resolvedOrientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+        const nextKey =
+          resolvedOrientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+
+        if (event.key === prevKey) {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === nextKey) {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [resolvedOrientation, scrollPrev, scrollNext]
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) return;
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) return;
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api.off("reInit", onSelect);
+        api.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api,
+          opts,
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+          orientation: resolvedOrientation,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("moonui-theme", "relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+/* -------------------------------------------------------------------------------------------------
+ * CarouselContent
+ * -----------------------------------------------------------------------------------------------*/
+const carouselContentVariants = cva("flex", {
+  variants: {
+    orientation: {
+      horizontal: "-ml-4",
+      vertical: "-mt-4 flex-col",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export interface CarouselContentProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof carouselContentVariants>, "orientation"> {}
+
+const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn(carouselContentVariants({ orientation }), className)}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+
+/* -------------------------------------------------------------------------------------------------
+ * CarouselItem
+ * -----------------------------------------------------------------------------------------------*/
+const carouselItemVariants = cva("min-w-0 shrink-0 grow-0 basis-full", {
+  variants: {
+    orientation: {
+      horizontal: "pl-4",
+      vertical: "pt-4",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export interface CarouselItemProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof carouselItemVariants>, "orientation"> {}
+
+const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn(carouselItemVariants({ orientation }), className)}
+        {...props}
+      />
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
+
+/* -------------------------------------------------------------------------------------------------
+ * CarouselPrevious
+ * -----------------------------------------------------------------------------------------------*/
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon-sm", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      rounded="full"
+      className={cn(
+        "absolute",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+/* -------------------------------------------------------------------------------------------------
+ * CarouselNext
+ * -----------------------------------------------------------------------------------------------*/
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon-sm", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      rounded="full"
+      className={cn(
+        "absolute",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" aria-hidden="true" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  type CarouselApi,
+  type CarouselOptions,
+  type CarouselPlugin,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+  carouselContentVariants,
+  carouselItemVariants,
+};

package/src/components/ui/index.ts

@@ -98,6 +98,23 @@ export {
     CardZipInput as MoonUICardZipInput,
 } from "./card-input";
 
+// Carousel
+export {
+    Carousel as MoonUICarousel,
+    CarouselContent as MoonUICarouselContent,
+    CarouselItem as MoonUICarouselItem,
+    CarouselPrevious as MoonUICarouselPrevious,
+    CarouselNext as MoonUICarouselNext,
+    carouselContentVariants as moonUICarouselContentVariants,
+    carouselItemVariants as moonUICarouselItemVariants,
+    useCarousel,
+} from "./carousel";
+
+export type {
+    CarouselProps as MoonUICarouselProps,
+    CarouselApi as MoonUICarouselApi,
+} from "./carousel";
+
 // Checkbox
 export {
     Checkbox as MoonUICheckbox,
@@ -220,6 +237,19 @@ export type {
     InputProps as MoonUIInputProps,
 } from "./input";
 
+// InputOTP
+export {
+    InputOTP as MoonUIInputOTP,
+    InputOTPGroup as MoonUIInputOTPGroup,
+    InputOTPSlot as MoonUIInputOTPSlot,
+    InputOTPSeparator as MoonUIInputOTPSeparator,
+    inputOTPSlotVariants as moonUIInputOTPSlotVariants,
+} from "./input-otp";
+
+export type {
+    InputOTPProps as MoonUIInputOTPProps,
+} from "./input-otp";
+
 // Label
 export { Label as MoonUILabel } from "./label";
 
@@ -404,6 +434,7 @@ export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
 export * from "./card-input";
+export * from "./carousel";
 export * from "./checkbox";
 export * from "./collapsible";
 export * from "./color-picker";
@@ -416,6 +447,7 @@ export * from "./file-upload";
 export * from "./gesture-drawer";
 export * from "./github-stars";
 export * from "./input";
+export * from "./input-otp";
 export * from "./label";
 export * from "./locked-component";
 export * from "./moon-logo";