@moontra/moonui 3.1.0 → 3.2.0

package/dist/index.js

@@ -8139,6 +8139,295 @@ function Toaster() {
     /* @__PURE__ */ jsxRuntime.jsx(ToastViewport, {})
   ] });
 }
+var kbdVariants = classVarianceAuthority.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"
+    }
+  }
+);
+var Kbd = React10__namespace.forwardRef(
+  ({ className, size, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "kbd",
+      {
+        ref,
+        className: cn("moonui-theme", kbdVariants({ size }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+var ratingVariants = classVarianceAuthority.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"
+    }
+  }
+);
+var iconSizeMap = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+var Rating = React10__namespace.forwardRef(
+  ({
+    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 !== void 0;
+    const [internalValue, setInternalValue] = React10__namespace.useState(defaultValue ?? 0);
+    const currentValue = isControlled ? value ?? 0 : internalValue;
+    const [hoverValue, setHoverValue] = React10__namespace.useState(null);
+    const displayValue = hoverValue !== null ? hoverValue : currentValue;
+    const commit = React10__namespace.useCallback(
+      (next) => {
+        if (readOnly)
+          return;
+        if (!isControlled)
+          setInternalValue(next);
+        onValueChange?.(next);
+      },
+      [readOnly, isControlled, onValueChange]
+    );
+    const handleKeyDown = React10__namespace.useCallback(
+      (event) => {
+        if (readOnly)
+          return;
+        let next = 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]
+    );
+    const renderIcon = (filled) => {
+      if (React10__namespace.isValidElement(icon)) {
+        const element = icon;
+        return React10__namespace.cloneElement(element, {
+          className: cn(
+            iconSizeClass,
+            "shrink-0",
+            filled && "fill-current",
+            element.props?.className
+          )
+        });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.Star,
+        {
+          className: cn(iconSizeClass, "shrink-0", filled && "fill-current"),
+          "aria-hidden": "true"
+        }
+      );
+    };
+    const stars = Array.from({ length: max }, (_, index) => index + 1);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": ariaLabel,
+        "aria-orientation": "horizontal",
+        "aria-readonly": readOnly || void 0,
+        tabIndex: readOnly ? void 0 : 0,
+        onKeyDown: handleKeyDown,
+        onMouseLeave: () => setHoverValue(null),
+        className: cn(ratingVariants({ size }), className),
+        ...props,
+        children: stars.map((starValue) => {
+          const fraction = Math.max(0, Math.min(1, displayValue - (starValue - 1)));
+          const halfValue = starValue - 0.5;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              "data-slot": "rating-star",
+              className: cn(
+                "relative inline-flex shrink-0",
+                !readOnly && "cursor-pointer"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "inline-flex text-muted-foreground/30", children: renderIcon(false) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute left-0 top-0 h-full overflow-hidden text-amber-400",
+                    style: { width: `${fraction * 100}%` },
+                    children: renderIcon(true)
+                  }
+                ),
+                !readOnly && precision === "half" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "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"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "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" && /* @__PURE__ */ jsxRuntime.jsx(
+                  "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"
+                  }
+                )
+              ]
+            },
+            starValue
+          );
+        })
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
+var spinnerVariants = classVarianceAuthority.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"
+    }
+  }
+);
+var 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"
+};
+var Spinner = React10__namespace.forwardRef(
+  ({ className, size, variant = "default", label = "Loading", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: cn(
+          "moonui-theme inline-flex items-center justify-center",
+          className
+        ),
+        ...props,
+        children: [
+          variant === "dots" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "inline-block rounded-full bg-current",
+                "animate-bounce motion-reduce:animate-none",
+                dotSizeMap[size ?? "md"]
+              ),
+              style: { animationDelay: `${i * 0.15}s` }
+            },
+            i
+          )) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(spinnerVariants({ size })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
+        ]
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
 
 Object.defineProperty(exports, 'Palette', {
   enumerable: true,
@@ -8256,6 +8545,7 @@ exports.InputOTP = InputOTP;
 exports.InputOTPGroup = InputOTPGroup;
 exports.InputOTPSeparator = InputOTPSeparator;
 exports.InputOTPSlot = InputOTPSlot;
+exports.Kbd = Kbd;
 exports.Label = Label;
 exports.LockedComponent = LockedComponent;
 exports.MonthPicker = MonthPicker;
@@ -8354,6 +8644,7 @@ exports.MoonUIInputOTP = InputOTP;
 exports.MoonUIInputOTPGroup = InputOTPGroup;
 exports.MoonUIInputOTPSeparator = InputOTPSeparator;
 exports.MoonUIInputOTPSlot = InputOTPSlot;
+exports.MoonUIKbd = Kbd;
 exports.MoonUILabel = Label;
 exports.MoonUILockedComponent = LockedComponent;
 exports.MoonUIMonthPicker = MonthPicker;
@@ -8376,6 +8667,7 @@ exports.MoonUIRadioGroup = RadioGroup2;
 exports.MoonUIRadioGroupItem = RadioGroupItem;
 exports.MoonUIRadioItemWithLabel = RadioItemWithLabel;
 exports.MoonUIRadioLabel = RadioLabel;
+exports.MoonUIRating = Rating;
 exports.MoonUIRichTextEditor = RichTextEditor;
 exports.MoonUIScrollArea = ScrollArea;
 exports.MoonUIScrollBar = ScrollBar;
@@ -8400,6 +8692,7 @@ exports.MoonUISkeletonAvatar = SkeletonAvatar;
 exports.MoonUISkeletonCard = SkeletonCard;
 exports.MoonUISkeletonText = SkeletonText;
 exports.MoonUISlider = Slider;
+exports.MoonUISpinner = Spinner;
 exports.MoonUISwipeableCard = SwipeableCard;
 exports.MoonUISwitch = Switch;
 exports.MoonUITable = Table;
@@ -8452,6 +8745,7 @@ exports.RadioGroup = RadioGroup2;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RadioItemWithLabel = RadioItemWithLabel;
 exports.RadioLabel = RadioLabel;
+exports.Rating = Rating;
 exports.RichTextEditor = RichTextEditor;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
@@ -8477,6 +8771,7 @@ exports.SkeletonAvatar = SkeletonAvatar;
 exports.SkeletonCard = SkeletonCard;
 exports.SkeletonText = SkeletonText;
 exports.Slider = Slider;
+exports.Spinner = Spinner;
 exports.SwipeableCard = SwipeableCard;
 exports.Switch = Switch;
 exports.Table = Table;
@@ -8516,18 +8811,24 @@ exports.cn = cn;
 exports.collapsibleContentVariants = collapsibleContentVariants;
 exports.collapsibleTriggerVariants = collapsibleTriggerVariants;
 exports.inputOTPSlotVariants = inputOTPSlotVariants;
+exports.kbdVariants = kbdVariants;
 exports.moonUIBadgeVariants = badgeVariants;
 exports.moonUIButtonVariants = buttonVariants;
 exports.moonUICarouselContentVariants = carouselContentVariants;
 exports.moonUICarouselItemVariants = carouselItemVariants;
 exports.moonUICreateSortableHeader = createSortableHeader;
 exports.moonUIInputOTPSlotVariants = inputOTPSlotVariants;
+exports.moonUIKbdVariants = kbdVariants;
+exports.moonUIRatingVariants = ratingVariants;
 exports.moonUISkeletonVariants = skeletonVariants;
+exports.moonUISpinnerVariants = spinnerVariants;
 exports.moonUIToggleVariants = toggleVariants;
 exports.popoverContentVariants = popoverContentVariants;
 exports.progressVariants = progressVariants;
+exports.ratingVariants = ratingVariants;
 exports.separatorVariants = separatorVariants;
 exports.skeletonVariants = skeletonVariants;
+exports.spinnerVariants = spinnerVariants;
 exports.toast = toast;
 exports.toggleVariants = toggleVariants;
 exports.tooltipVariants = tooltipVariants;