@moontra/moonui 3.1.0 → 3.3.0

package/dist/index.js

@@ -30,6 +30,7 @@ var TogglePrimitive = require('@radix-ui/react-toggle');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var ToastPrimitives = require('@radix-ui/react-toast');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -69,6 +70,7 @@ var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive)
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 var ToastPrimitives__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitives);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -8139,6 +8141,403 @@ 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";
+var buttonGroupVariants = classVarianceAuthority.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
+    }
+  }
+);
+var ButtonGroup = React10__namespace.forwardRef(
+  ({ className, orientation, attached, size, variant, children, ...props }, ref) => {
+    const shouldPropagate = size !== void 0 || variant !== void 0;
+    const enhancedChildren = shouldPropagate ? React10__namespace.Children.map(children, (child) => {
+      if (!React10__namespace.isValidElement(child) || child.type !== Button) {
+        return child;
+      }
+      const childProps = child.props;
+      return React10__namespace.cloneElement(child, {
+        size: childProps.size ?? size,
+        variant: childProps.variant ?? variant
+      });
+    }) : children;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(buttonGroupVariants({ orientation, attached }), className),
+        ...props,
+        children: enhancedChildren
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var ToggleGroupContext = React10__namespace.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = React10__namespace.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToggleGroupPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "moonui-theme inline-flex items-center justify-center gap-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = "ToggleGroup";
+var ToggleGroupItem = React10__namespace.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React10__namespace.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupPrimitive__namespace.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({
+          variant: context.variant ?? variant,
+          size: context.size ?? size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
 
 Object.defineProperty(exports, 'Palette', {
   enumerable: true,
@@ -8185,6 +8584,7 @@ exports.BreadcrumbList = BreadcrumbList;
 exports.BreadcrumbPage = BreadcrumbPage;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
 exports.CardCVCInput = CardCVCInput;
 exports.CardContent = CardContent;
@@ -8256,6 +8656,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;
@@ -8283,6 +8684,7 @@ exports.MoonUIBreadcrumbList = BreadcrumbList;
 exports.MoonUIBreadcrumbPage = BreadcrumbPage;
 exports.MoonUIBreadcrumbSeparator = BreadcrumbSeparator;
 exports.MoonUIButton = Button;
+exports.MoonUIButtonGroup = ButtonGroup;
 exports.MoonUICalendar = Calendar;
 exports.MoonUICard = Card;
 exports.MoonUICardCVCInput = CardCVCInput;
@@ -8354,6 +8756,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 +8779,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 +8804,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;
@@ -8425,6 +8830,8 @@ exports.MoonUIToastTitle = ToastTitle;
 exports.MoonUIToastViewport = ToastViewport;
 exports.MoonUIToaster = Toaster;
 exports.MoonUIToggle = Toggle;
+exports.MoonUIToggleGroup = ToggleGroup;
+exports.MoonUIToggleGroupItem = ToggleGroupItem;
 exports.MoonUITooltip = Tooltip;
 exports.MoonUITooltipContent = TooltipContent;
 exports.MoonUITooltipProvider = TooltipProvider;
@@ -8452,6 +8859,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 +8885,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;
@@ -8502,6 +8911,8 @@ exports.ToastTitle = ToastTitle;
 exports.ToastViewport = ToastViewport;
 exports.Toaster = Toaster;
 exports.Toggle = Toggle;
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
 exports.Tooltip = Tooltip;
 exports.TooltipArrow = TooltipArrow;
 exports.TooltipContent = TooltipContent;
@@ -8509,6 +8920,7 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.aspectRatioVariants = aspectRatioVariants;
 exports.badgeVariants = badgeVariants;
+exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
 exports.carouselContentVariants = carouselContentVariants;
 exports.carouselItemVariants = carouselItemVariants;
@@ -8516,18 +8928,25 @@ exports.cn = cn;
 exports.collapsibleContentVariants = collapsibleContentVariants;
 exports.collapsibleTriggerVariants = collapsibleTriggerVariants;
 exports.inputOTPSlotVariants = inputOTPSlotVariants;
+exports.kbdVariants = kbdVariants;
 exports.moonUIBadgeVariants = badgeVariants;
+exports.moonUIButtonGroupVariants = buttonGroupVariants;
 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;