@moontra/moonui 3.0.1 → 3.2.0

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";
 
@@ -394,6 +424,27 @@ 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";
+
 // Also export without MoonUI prefix for backward compatibility
 export * from "./accordion";
 export * from "./alert";
@@ -404,6 +455,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 +468,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";
@@ -441,3 +494,6 @@ export * from "./textarea";
 export * from "./toast";
 export * from "./toggle";
 export * from "./tooltip";
+export * from "./kbd";
+export * from "./rating";
+export * from "./spinner";

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

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Dot } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Premium InputOTP Component
+ *
+ * input-otp kütüphanesi tabanlı, erişilebilir tek kullanımlık şifre (OTP) girişi.
+ * Paste desteği, pattern doğrulama ve aktif slot vurgusu sunar.
+ */
+
+// Pattern sabitleri — kullanım kolaylığı için input-otp'den yeniden export edilir
+export {
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+} from "input-otp";
+
+/* -------------------------------------------------------------------------------------------------
+ * InputOTP Root
+ * -----------------------------------------------------------------------------------------------*/
+export type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  InputOTPProps
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "moonui-theme",
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+/* -------------------------------------------------------------------------------------------------
+ * InputOTPGroup
+ * -----------------------------------------------------------------------------------------------*/
+const InputOTPGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+/* -------------------------------------------------------------------------------------------------
+ * InputOTPSlot
+ * -----------------------------------------------------------------------------------------------*/
+const inputOTPSlotVariants = cva(
+  [
+    "relative flex h-10 w-10 items-center justify-center",
+    "border-y border-r border-input text-sm text-foreground",
+    "transition-all duration-200",
+    "first:rounded-l-md first:border-l last:rounded-r-md",
+  ],
+  {
+    variants: {
+      // Aktif slot vurgusu — token tabanlı ring stili
+      isActive: {
+        true: "z-10 ring-2 ring-ring ring-offset-background",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      isActive: false,
+    },
+  }
+);
+
+export interface InputOTPSlotProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof inputOTPSlotVariants>, "isActive"> {
+  /** Bu slotun temsil ettiği karakter index'i */
+  index: number;
+}
+
+const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
+  ({ index, className, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const slot = inputOTPContext?.slots?.[index];
+    const char = slot?.char;
+    const hasFakeCaret = slot?.hasFakeCaret;
+    const isActive = slot?.isActive;
+
+    return (
+      <div
+        ref={ref}
+        data-active={isActive ? "" : undefined}
+        className={cn(inputOTPSlotVariants({ isActive: !!isActive }), className)}
+        {...props}
+      >
+        {char}
+        {hasFakeCaret && (
+          // Sahte imleç — gerçek input görünmez olduğu için aktif slotta yanıp söner
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+InputOTPSlot.displayName = "InputOTPSlot";
+
+/* -------------------------------------------------------------------------------------------------
+ * InputOTPSeparator
+ * -----------------------------------------------------------------------------------------------*/
+const InputOTPSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="separator"
+    className={cn("text-muted-foreground", className)}
+    {...props}
+  >
+    <Dot aria-hidden="true" />
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+  inputOTPSlotVariants,
+};

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 };

package/src/components/ui/rating.tsx

@@ -0,0 +1,253 @@
+"use client"
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Star } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+/**
+ * Premium Rating Component
+ *
+ * Standalone yıldız-değerlendirme bileşeni (input + display).
+ * Kontrollü/kontrolsüz kullanım, yarım-yıldız hassasiyeti, salt-gösterim modu
+ * ve tam klavye erişilebilirliği (radiogroup) sunar. Dark/light modda uyumludur.
+ */
+
+const ratingVariants = cva(
+  [
+    "moonui-theme inline-flex items-center rounded-md outline-none",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "gap-0.5",
+        md: "gap-1",
+        lg: "gap-1.5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+// Boyuta göre ikon ölçüsü (yarım-yıldız maskesinin hizalanması için sabit px gerekir)
+const iconSizeMap: Record<NonNullable<VariantProps<typeof ratingVariants>["size"]>, string> = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+};
+
+export interface RatingProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    VariantProps<typeof ratingVariants> {
+  /** Kontrollü değer (0..max) */
+  value?: number;
+  /** Kontrolsüz başlangıç değeri */
+  defaultValue?: number;
+  /** Değer değiştiğinde çağrılır */
+  onValueChange?: (value: number) => void;
+  /** Yıldız sayısı (varsayılan 5) */
+  max?: number;
+  /** Salt-gösterim: etkileşim yok, aria-readonly işaretlenir */
+  readOnly?: boolean;
+  /** Yarım-yıldız desteği (varsayılan "full") */
+  precision?: "full" | "half";
+  /** Özel ikon (varsayılan lucide Star) */
+  icon?: React.ReactNode;
+}
+
+/**
+ * Premium Rating Component
+ *
+ * @param props.value - Kontrollü değer
+ * @param props.defaultValue - Kontrolsüz başlangıç değeri
+ * @param props.onValueChange - Değer değişim geri çağrımı
+ * @param props.max - Yıldız sayısı (varsayılan 5)
+ * @param props.readOnly - Salt-gösterim modu
+ * @param props.precision - "full" | "half" hassasiyet
+ * @param props.icon - Özel ikon
+ * @param props.size - Boyut (sm | md | lg)
+ */
+const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
+  (
+    {
+      className,
+      value,
+      defaultValue,
+      onValueChange,
+      max = 5,
+      readOnly = false,
+      precision = "full",
+      icon,
+      size,
+      "aria-label": ariaLabel = "Rating",
+      ...props
+    },
+    ref
+  ) => {
+    const resolvedSize = size ?? "md";
+    const iconSizeClass = iconSizeMap[resolvedSize];
+    const step = precision === "half" ? 0.5 : 1;
+
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState<number>(defaultValue ?? 0);
+    const currentValue = isControlled ? value ?? 0 : internalValue;
+
+    // Hover önizlemesi (geçici doldurma)
+    const [hoverValue, setHoverValue] = React.useState<number | null>(null);
+    const displayValue = hoverValue !== null ? hoverValue : currentValue;
+
+    // Değeri işle: kontrolsüzde iç state'i güncelle, her durumda geri çağrımı tetikle
+    const commit = React.useCallback(
+      (next: number) => {
+        if (readOnly) return;
+        if (!isControlled) setInternalValue(next);
+        onValueChange?.(next);
+      },
+      [readOnly, isControlled, onValueChange]
+    );
+
+    // Klavye: ok-tuşları değeri step kadar artır/azalt, Home/End min/max
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (readOnly) return;
+        let next: number | null = null;
+        switch (event.key) {
+          case "ArrowRight":
+          case "ArrowUp":
+            next = Math.min(max, currentValue + step);
+            break;
+          case "ArrowLeft":
+          case "ArrowDown":
+            next = Math.max(step, currentValue - step);
+            break;
+          case "Home":
+            next = step;
+            break;
+          case "End":
+            next = max;
+            break;
+          default:
+            return;
+        }
+        event.preventDefault();
+        commit(next);
+      },
+      [readOnly, max, currentValue, step, commit]
+    );
+
+    // İkonu doldurmalı/boş olarak üret (özel ikon desteklenir)
+    const renderIcon = (filled: boolean): React.ReactNode => {
+      if (React.isValidElement(icon)) {
+        const element = icon as React.ReactElement<{ className?: string }>;
+        return React.cloneElement(element, {
+          className: cn(
+            iconSizeClass,
+            "shrink-0",
+            filled && "fill-current",
+            element.props?.className
+          ),
+        });
+      }
+      return (
+        <Star
+          className={cn(iconSizeClass, "shrink-0", filled && "fill-current")}
+          aria-hidden="true"
+        />
+      );
+    };
+
+    const stars = Array.from({ length: max }, (_, index) => index + 1);
+
+    return (
+      <div
+        ref={ref}
+        role="radiogroup"
+        aria-label={ariaLabel}
+        aria-orientation="horizontal"
+        aria-readonly={readOnly || undefined}
+        tabIndex={readOnly ? undefined : 0}
+        onKeyDown={handleKeyDown}
+        onMouseLeave={() => setHoverValue(null)}
+        className={cn(ratingVariants({ size }), className)}
+        {...props}
+      >
+        {stars.map((starValue) => {
+          // Bu yıldızın doluluk oranı (0..1) — yarım yıldız için ondalık olur
+          const fraction = Math.max(0, Math.min(1, displayValue - (starValue - 1)));
+          const halfValue = starValue - 0.5;
+
+          return (
+            <span
+              key={starValue}
+              data-slot="rating-star"
+              className={cn(
+                "relative inline-flex shrink-0",
+                !readOnly && "cursor-pointer"
+              )}
+            >
+              {/* Boş katman (görsel taban) */}
+              <span aria-hidden="true" className="inline-flex text-muted-foreground/30">
+                {renderIcon(false)}
+              </span>
+
+              {/* Dolu katman — overflow-hidden maske ile kısmi doldurma */}
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute left-0 top-0 h-full overflow-hidden text-amber-400"
+                style={{ width: `${fraction * 100}%` }}
+              >
+                {renderIcon(true)}
+              </span>
+
+              {/* Etkileşim katmanı (salt-gösterimde yok) */}
+              {!readOnly && precision === "half" && (
+                <>
+                  <button
+                    type="button"
+                    role="radio"
+                    aria-checked={currentValue === halfValue}
+                    aria-label={`${halfValue} stars`}
+                    tabIndex={-1}
+                    onClick={() => commit(halfValue)}
+                    onMouseEnter={() => setHoverValue(halfValue)}
+                    className="absolute inset-y-0 left-0 z-10 w-1/2 cursor-pointer bg-transparent"
+                  />
+                  <button
+                    type="button"
+                    role="radio"
+                    aria-checked={currentValue === starValue}
+                    aria-label={`${starValue} stars`}
+                    tabIndex={-1}
+                    onClick={() => commit(starValue)}
+                    onMouseEnter={() => setHoverValue(starValue)}
+                    className="absolute inset-y-0 right-0 z-10 w-1/2 cursor-pointer bg-transparent"
+                  />
+                </>
+              )}
+
+              {!readOnly && precision === "full" && (
+                <button
+                  type="button"
+                  role="radio"
+                  aria-checked={currentValue === starValue}
+                  aria-label={`${starValue} ${starValue === 1 ? "star" : "stars"}`}
+                  tabIndex={-1}
+                  onClick={() => commit(starValue)}
+                  onMouseEnter={() => setHoverValue(starValue)}
+                  className="absolute inset-0 z-10 cursor-pointer bg-transparent"
+                />
+              )}
+            </span>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+Rating.displayName = "Rating";
+
+export { Rating, ratingVariants };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+/**
+ * Spinner Component
+ *
+ * Bağımsız (standalone) dönen yükleme göstergesi. Asenkron işlemler
+ * sırasında kullanıcıya süregelen bir aktivite olduğunu bildirmek için
+ * kullanılır.
+ *
+ * Erişilebilirlik: `role="status"` + `aria-live="polite"` ile ekran
+ * okuyuculara duyurulur; görsel olarak gizli (`sr-only`) `label` metni
+ * seslendirilir. `prefers-reduced-motion` açıkken animasyon
+ * `motion-reduce:animate-none` ile durdurulur.
+ *
+ * Renk `currentColor` üzerinden miras alınır; `text-primary`, `text-muted-foreground`
+ * gibi metin renk yardımcılarıyla renklendirilir (hardcoded renk yoktur).
+ */
+
+// Dönen halka (default) varyantının temel stilleri + boyut eşlemesi
+const spinnerVariants = cva(
+  [
+    "inline-block shrink-0 rounded-full",
+    "border-current border-t-transparent",
+    "animate-spin motion-reduce:animate-none",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 border-2", // 16px
+        md: "h-6 w-6 border-2", // 24px
+        lg: "h-8 w-8 border-[3px]", // 32px
+        xl: "h-10 w-10 border-4", // 40px
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+// Dots varyantı için nokta boyutu eşlemesi (renk `currentColor` ile gelir)
+const dotSizeMap = {
+  sm: "h-1 w-1",
+  md: "h-1.5 w-1.5",
+  lg: "h-2 w-2",
+  xl: "h-2.5 w-2.5",
+} as const;
+
+export interface SpinnerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof spinnerVariants> {
+  /**
+   * Görsel stil: dönen halka (`default`) veya zıplayan noktalar (`dots`)
+   */
+  variant?: "default" | "dots";
+  /**
+   * Ekran okuyucular için erişilebilir metin (görsel olarak gizli)
+   * @default "Loading"
+   */
+  label?: string;
+}
+
+/**
+ * Spinner — dönen yükleme göstergesi
+ *
+ * @param props.size - Gösterge boyutu (`sm` | `md` | `lg` | `xl`)
+ * @param props.variant - Görsel stil (`default` halka | `dots` noktalar)
+ * @param props.label - Ekran okuyucular için erişilebilir metin (varsayılan "Loading")
+ */
+const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ className, size, variant = "default", label = "Loading", ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="status"
+        aria-live="polite"
+        className={cn(
+          "moonui-theme inline-flex items-center justify-center",
+          className
+        )}
+        {...props}
+      >
+        {variant === "dots" ? (
+          <span className="inline-flex items-center gap-1" aria-hidden="true">
+            {[0, 1, 2].map((i) => (
+              <span
+                key={i}
+                className={cn(
+                  "inline-block rounded-full bg-current",
+                  "animate-bounce motion-reduce:animate-none",
+                  dotSizeMap[size ?? "md"]
+                )}
+                style={{ animationDelay: `${i * 0.15}s` }}
+              />
+            ))}
+          </span>
+        ) : (
+          <span className={cn(spinnerVariants({ size }))} aria-hidden="true" />
+        )}
+        {/* Görsel olarak gizli erişilebilir metin */}
+        <span className="sr-only">{label}</span>
+      </div>
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+export { Spinner, spinnerVariants };

package/tailwind-preset.js

@@ -133,6 +133,7 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
         shake: "shake 0.5s ease-in-out",
         rotate: "rotate 0.5s ease-in-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
       },
       keyframes: {
         "accordion-down": {
@@ -152,6 +153,11 @@ module.exports = {
           "0%": { transform: "rotate(0deg)" },
           "100%": { transform: "rotate(360deg)" },
         },
+        // InputOTP sahte imleç animasyonu
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" },
+        },
       },
       boxShadow: {
         "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",