@moontra/moonui 3.2.0 → 3.4.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));
@@ -1715,14 +1717,14 @@ var CarouselNext = React10__namespace.forwardRef(({ className, variant = "outlin
 });
 CarouselNext.displayName = "CarouselNext";
 var checkboxVariants = classVarianceAuthority.cva(
-  "peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary-foreground",
+  "peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground",
   {
     variants: {
       variant: {
-        default: "border-border bg-background data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-        outline: "border-border bg-transparent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-        muted: "border-border bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-        ghost: "border-transparent bg-transparent hover:bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+        default: "border-border bg-background data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary",
+        outline: "border-border bg-transparent data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary",
+        muted: "border-border bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary",
+        ghost: "border-transparent bg-transparent hover:bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary"
       },
       size: {
         sm: "h-3.5 w-3.5",
@@ -1763,11 +1765,7 @@ var Checkbox = React10__namespace.forwardRef(({
   checked,
   ...props
 }, ref) => {
-  const [isIndeterminate, setIsIndeterminate] = React10__namespace.useState(indeterminate);
-  React10__namespace.useEffect(() => {
-    setIsIndeterminate(indeterminate);
-  }, [indeterminate]);
-  const effectiveChecked = isIndeterminate ? false : checked;
+  const effectiveChecked = indeterminate ? "indeterminate" : checked;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CheckboxPrimitive__namespace.Root,
     {
@@ -1782,7 +1780,7 @@ var Checkbox = React10__namespace.forwardRef(({
             "flex items-center justify-center text-current",
             animation === "bounce" && "data-[state=checked]:animate-bounce"
           ),
-          children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-[65%] w-[65%]" }) : icon ? icon : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-[65%] w-[65%]" })
+          children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-[65%] w-[65%]" }) : icon ? icon : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-[65%] w-[65%]" })
         }
       )
     }
@@ -2574,6 +2572,44 @@ var Slider = React10__namespace.forwardRef(({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   };
+  const handleThumbKeyDown = (index) => (event) => {
+    if (disabled)
+      return;
+    const largeStep = step * 10;
+    const current = sliderValue[index];
+    let next;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = current + step;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = current - step;
+        break;
+      case "PageUp":
+        next = current + largeStep;
+        break;
+      case "PageDown":
+        next = current - largeStep;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const lowerBound = index > 0 ? sliderValue[index - 1] : min;
+    const upperBound = index < sliderValue.length - 1 ? sliderValue[index + 1] : max;
+    const bounded = Math.max(lowerBound, Math.min(upperBound, next));
+    const newValues = [...sliderValue];
+    newValues[index] = bounded;
+    handleValueChange(newValues);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", ref, ...props, children: [
     showValueLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
       "flex justify-end mb-1 text-sm text-muted-foreground",
@@ -2623,6 +2659,7 @@ var Slider = React10__namespace.forwardRef(({
                 cursor: disabled ? "not-allowed" : "pointer"
               },
               onMouseDown: handleThumbMouseDown(i),
+              onKeyDown: handleThumbKeyDown(i),
               "aria-label": `Thumb ${i + 1}`,
               tabIndex: disabled ? -1 : 0,
               role: "slider",
@@ -3141,8 +3178,12 @@ function ColorPicker({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-10 gap-1", children: presets.map((presetColor) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
+            type: "button",
+            "aria-label": `Select color ${presetColor}`,
+            "aria-pressed": color === presetColor,
             className: cn(
               "h-7 w-7 rounded border-2 transition-all hover:scale-110",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               color === presetColor ? "border-primary" : "border-transparent"
             ),
             style: { backgroundColor: presetColor },
@@ -3169,8 +3210,12 @@ function SimpleColorPicker({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("moonui-theme", "flex flex-wrap gap-2", className), children: colors.map((color) => /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
+      type: "button",
+      "aria-label": `Select color ${color}`,
+      "aria-pressed": value === color,
       className: cn(
         "rounded-full border-2 transition-all hover:scale-110",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         sizeClasses[size],
         value === color ? "border-primary ring-2 ring-primary/20" : "border-transparent"
       ),
@@ -6127,16 +6172,41 @@ var radioGroupItemVariants = classVarianceAuthority.cva(
 );
 var RadioGroupContext = React10__namespace.createContext({});
 var RadioGroup2 = React10__namespace.forwardRef(
-  ({ className, value, onValueChange, disabled, name, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: { value, onValueChange, disabled, name }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+  ({ className, value, defaultValue, onValueChange, disabled, name, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React10__namespace.useState(
+      defaultValue
+    );
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const handleValueChange = React10__namespace.useCallback(
+      (next) => {
+        if (!isControlled) {
+          setInternalValue(next);
+        }
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadioGroupContext.Provider,
       {
-        ref,
-        role: "radiogroup",
-        className: cn("moonui-theme", "grid gap-2", className),
-        ...props
+        value: {
+          value: currentValue,
+          onValueChange: handleValueChange,
+          disabled,
+          name
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            role: "radiogroup",
+            className: cn("moonui-theme", "grid gap-2", className),
+            ...props
+          }
+        )
       }
-    ) });
+    );
   }
 );
 RadioGroup2.displayName = "RadioGroup";
@@ -6165,7 +6235,7 @@ var RadioGroupItem = React10__namespace.forwardRef(({ className, variant, size,
         disabled: disabled || radioGroup.disabled,
         name: radioGroup.name,
         onChange: handleChange,
-        className: "sr-only",
+        className: "peer sr-only",
         ...props
       }
     ),
@@ -6176,7 +6246,12 @@ var RadioGroupItem = React10__namespace.forwardRef(({ className, variant, size,
         className: cn(
           radioGroupItemVariants({ variant, size }),
           "rounded-full",
-          "focus-visible:ring-primary/50",
+          // Gerçekte odaklanan eleman görsel olarak gizli `sr-only` input'tur.
+          // Görünür label onun KARDEŞİ olduğu için label'da `:focus-visible` hiç
+          // tetiklenmiyor, dolayısıyla klavye kullanıcısı hiçbir focus izi
+          // görmüyordu. Tailwind `peer` deseniyle (input `peer` sınıfını taşır ve
+          // DOM'da label'dan önce gelir) focus izi görünür elemana taşınır.
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary/50",
           "relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden",
           disabled && "cursor-not-allowed opacity-50",
           className
@@ -8428,6 +8503,118 @@ var Spinner = React10__namespace.forwardRef(
   }
 );
 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",
+      // Radix roving-focus kök elemana `data-orientation` yazar; dikey yerleşim
+      // buna bağlanır. Yatay/tanımsız durumda taban sınıflar geçerli kalır —
+      // yani mevcut render değişmez. Kardeş `button-group` ile desen paritesi.
+      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-start",
+      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,
@@ -8474,6 +8661,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;
@@ -8573,6 +8761,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;
@@ -8718,6 +8907,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;
@@ -8797,6 +8988,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;
@@ -8804,6 +8997,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;
@@ -8813,6 +9007,7 @@ exports.collapsibleTriggerVariants = collapsibleTriggerVariants;
 exports.inputOTPSlotVariants = inputOTPSlotVariants;
 exports.kbdVariants = kbdVariants;
 exports.moonUIBadgeVariants = badgeVariants;
+exports.moonUIButtonGroupVariants = buttonGroupVariants;
 exports.moonUIButtonVariants = buttonVariants;
 exports.moonUICarouselContentVariants = carouselContentVariants;
 exports.moonUICarouselItemVariants = carouselItemVariants;