@moontra/moonui 3.3.0 → 3.4.0

package/dist/index.mjs

@@ -1679,14 +1679,14 @@ var CarouselNext = React10.forwardRef(({ className, variant = "outline", size =
 });
 CarouselNext.displayName = "CarouselNext";
 var checkboxVariants = 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",
@@ -1727,11 +1727,7 @@ var Checkbox = React10.forwardRef(({
   checked,
   ...props
 }, ref) => {
-  const [isIndeterminate, setIsIndeterminate] = React10.useState(indeterminate);
-  React10.useEffect(() => {
-    setIsIndeterminate(indeterminate);
-  }, [indeterminate]);
-  const effectiveChecked = isIndeterminate ? false : checked;
+  const effectiveChecked = indeterminate ? "indeterminate" : checked;
   return /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
     {
@@ -1746,7 +1742,7 @@ var Checkbox = React10.forwardRef(({
             "flex items-center justify-center text-current",
             animation === "bounce" && "data-[state=checked]:animate-bounce"
           ),
-          children: isIndeterminate ? /* @__PURE__ */ jsx(Minus, { className: "h-[65%] w-[65%]" }) : icon ? icon : /* @__PURE__ */ jsx(Check, { className: "h-[65%] w-[65%]" })
+          children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: "h-[65%] w-[65%]" }) : icon ? icon : /* @__PURE__ */ jsx(Check, { className: "h-[65%] w-[65%]" })
         }
       )
     }
@@ -2538,6 +2534,44 @@ var Slider = React10.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__ */ jsxs("div", { className: "w-full", ref, ...props, children: [
     showValueLabel && /* @__PURE__ */ jsx("div", { className: cn(
       "flex justify-end mb-1 text-sm text-muted-foreground",
@@ -2587,6 +2621,7 @@ var Slider = React10.forwardRef(({
                 cursor: disabled ? "not-allowed" : "pointer"
               },
               onMouseDown: handleThumbMouseDown(i),
+              onKeyDown: handleThumbKeyDown(i),
               "aria-label": `Thumb ${i + 1}`,
               tabIndex: disabled ? -1 : 0,
               role: "slider",
@@ -3105,8 +3140,12 @@ function ColorPicker({
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-10 gap-1", children: presets.map((presetColor) => /* @__PURE__ */ 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 },
@@ -3133,8 +3172,12 @@ function SimpleColorPicker({
   return /* @__PURE__ */ jsx("div", { className: cn("moonui-theme", "flex flex-wrap gap-2", className), children: colors.map((color) => /* @__PURE__ */ 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"
       ),
@@ -6091,16 +6134,41 @@ var radioGroupItemVariants = cva(
 );
 var RadioGroupContext = React10.createContext({});
 var RadioGroup2 = React10.forwardRef(
-  ({ className, value, onValueChange, disabled, name, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { value, onValueChange, disabled, name }, children: /* @__PURE__ */ jsx(
-      "div",
+  ({ className, value, defaultValue, onValueChange, disabled, name, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React10.useState(
+      defaultValue
+    );
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const handleValueChange = React10.useCallback(
+      (next) => {
+        if (!isControlled) {
+          setInternalValue(next);
+        }
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    return /* @__PURE__ */ jsx(
+      RadioGroupContext.Provider,
       {
-        ref,
-        role: "radiogroup",
-        className: cn("moonui-theme", "grid gap-2", className),
-        ...props
+        value: {
+          value: currentValue,
+          onValueChange: handleValueChange,
+          disabled,
+          name
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            role: "radiogroup",
+            className: cn("moonui-theme", "grid gap-2", className),
+            ...props
+          }
+        )
       }
-    ) });
+    );
   }
 );
 RadioGroup2.displayName = "RadioGroup";
@@ -6129,7 +6197,7 @@ var RadioGroupItem = React10.forwardRef(({ className, variant, size, indicator,
         disabled: disabled || radioGroup.disabled,
         name: radioGroup.name,
         onChange: handleChange,
-        className: "sr-only",
+        className: "peer sr-only",
         ...props
       }
     ),
@@ -6140,7 +6208,12 @@ var RadioGroupItem = React10.forwardRef(({ className, variant, size, indicator,
         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
@@ -8474,6 +8547,10 @@ var ToggleGroup = React10.forwardRef(({ className, variant, size, children, ...p
     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,