@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/ui/hover-card.js

@@ -1,44 +1,200 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { chain, mergeRefs } from "@react-aria/utils";
+import { Popover as AriaPopover } from "react-aria-components";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/slot.js";
+function toPlacement(side, align) {
+  if (align === "center") return side;
+  if (side === "top" || side === "bottom") return `${side} ${align}`;
+  return `${side} ${align === "start" ? "top" : "bottom"}`;
+}
+function toContainerPadding(padding) {
+  if (padding == null) return void 0;
+  if (typeof padding === "number") return padding;
+  const sides = Object.values(padding).filter(
+    (value) => typeof value === "number"
+  );
+  return sides.length ? Math.max(...sides) : void 0;
+}
+const HoverCardContext = React.createContext(null);
+function useHoverCard(component) {
+  const context = React.useContext(HoverCardContext);
+  if (!context) {
+    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`HoverCard\`.`);
+  }
+  return context;
+}
 function HoverCard({
+  open,
+  defaultOpen,
+  onOpenChange,
   openDelay = 200,
   closeDelay = 100,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const triggerRef = React.useRef(null);
+  const openTimer = React.useRef(null);
+  const closeTimer = React.useRef(null);
+  const isOpen = open ?? uncontrolledOpen;
+  const setOpenImmediately = React.useCallback(
+    (next) => {
+      if (open === void 0) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange]
+  );
+  const value = React.useMemo(() => {
+    const clearOpen = () => {
+      if (openTimer.current) clearTimeout(openTimer.current);
+      openTimer.current = null;
+    };
+    const clearClose = () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    };
+    return {
+      open: isOpen,
+      triggerRef,
+      setOpenImmediately: (next) => {
+        clearOpen();
+        clearClose();
+        setOpenImmediately(next);
+      },
+      scheduleOpen: () => {
+        clearClose();
+        if (openTimer.current) return;
+        openTimer.current = setTimeout(() => {
+          openTimer.current = null;
+          setOpenImmediately(true);
+        }, openDelay);
+      },
+      scheduleClose: () => {
+        clearOpen();
+        if (closeTimer.current) return;
+        closeTimer.current = setTimeout(() => {
+          closeTimer.current = null;
+          setOpenImmediately(false);
+        }, closeDelay);
+      },
+      cancelClose: clearClose
+    };
+  }, [isOpen, setOpenImmediately, openDelay, closeDelay]);
+  React.useEffect(
+    () => () => {
+      if (openTimer.current) clearTimeout(openTimer.current);
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx(HoverCardContext.Provider, { value, children });
+}
+function HoverCardTrigger({
+  asChild,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  ref,
   ...props
 }) {
+  const card = useHoverCard("HoverCardTrigger");
+  const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
-    HoverCardPrimitive.Root,
+    Comp,
     {
-      "data-slot": "hover-card",
-      openDelay,
-      closeDelay,
-      ...props
+      "data-state": card.open ? "open" : "closed",
+      ...props,
+      ref: mergeRefs(ref, card.triggerRef),
+      onPointerEnter: chain(onPointerEnter, (event) => {
+        if (event.pointerType === "touch") return;
+        card.scheduleOpen();
+      }),
+      onPointerLeave: chain(onPointerLeave, (event) => {
+        if (event.pointerType === "touch") return;
+        card.scheduleClose();
+      }),
+      onFocus: chain(onFocus, () => card.setOpenImmediately(true)),
+      onBlur: chain(onBlur, () => card.setOpenImmediately(false))
+    }
+  );
+}
+function HoverCardContent({
+  className,
+  style,
+  children,
+  ref,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset,
+  avoidCollisions = true,
+  collisionPadding,
+  sticky: _sticky,
+  hideWhenDetached: _hideWhenDetached,
+  forceMount: _forceMount,
+  onPointerEnter,
+  onPointerLeave,
+  ...props
+}) {
+  const card = useHoverCard("HoverCardContent");
+  return /* @__PURE__ */ jsx(
+    AriaPopover,
+    {
+      isOpen: card.open,
+      onOpenChange: card.setOpenImmediately,
+      isNonModal: true,
+      triggerRef: card.triggerRef,
+      placement: toPlacement(side, align),
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip: avoidCollisions,
+      containerPadding: toContainerPadding(collisionPadding),
+      render: (racProps, { isExiting }) => {
+        const {
+          className: _racClassName,
+          "data-rac": _rac,
+          ref: racRef,
+          style: racStyle,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...rest,
+            "data-slot": "hover-card-content",
+            "data-side": side,
+            "data-align": align,
+            "data-state": isExiting ? "closed" : "open",
+            ...props,
+            ref: mergeRefs(ref, racRef),
+            onPointerEnter: chain(onPointerEnter, () => card.cancelClose()),
+            onPointerLeave: chain(onPointerLeave, () => card.scheduleClose()),
+            className: cn(
+              // Match Popover/Tooltip: a directional fade+zoom+slide entrance so it doesn't pop abruptly.
+              "ui-hover-card-content origin-[var(--radix-hover-card-content-transform-origin)]",
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+              "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+              "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+              "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+              className
+            ),
+            style: {
+              ...racStyle,
+              "--radix-hover-card-content-transform-origin": "var(--trigger-anchor-point)",
+              ...style
+            },
+            children
+          }
+        );
+      }
     }
   );
 }
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  HoverCardPrimitive.Content,
-  {
-    ref,
-    "data-slot": "hover-card-content",
-    align,
-    sideOffset,
-    className: cn(
-      // Match Popover/Tooltip: a directional fade+zoom+slide entrance so it doesn't pop abruptly.
-      "ui-hover-card-content origin-[var(--radix-hover-card-content-transform-origin)]",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
-  }
-) }));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 export {
   HoverCard,
   HoverCardContent,

package/dist/components/ui/input-otp.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import type { InputOTPAlignProp } from "../../props/components/data-entry.prop.js";
 /**
  * InputOTP — the code-challenge field.
  *
@@ -8,39 +7,38 @@ import type { InputOTPAlignProp } from "../../props/components/data-entry.prop.j
  * hidden input because `input-otp` owns the container element; `.ui-otp-container` reads it back
  * through `:has()`, exactly as it already does for the invalid and disabled states. A service that
  * wants every code field centred sets `--otp-container-align` once instead.
+ *
+ * `size`/`status`/`variant` ride the same `controlSurfaceAttrs` helper as Input, Select, Cascader
+ * and TagInput, so the code field sits on the shared control-height ladder and paints the same
+ * error edge — they reach the CSS by the same `:has()` route as `align`.
+ *
+ * The VALUE is owned here, not by `input-otp`: `formatter` and `readOnly` have to hold for paste
+ * too, and `input-otp` writes its own internal state inside its paste handler, which a wrapper
+ * that only intercepted `onChange` could not undo.
  */
-export declare const InputOTP: React.ForwardRefExoticComponent<((Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "containerClassName" | "maxLength" | "noScriptCSSFallback" | "nonce" | "onChange" | "onComplete" | "pasteTransformer" | "pushPasswordManagerStrategy" | "textAlign" | "value"> & {
-    value?: string;
-    onChange?: (newValue: string) => unknown;
+export declare const InputOTP: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "onChange" | "size" | "value"> & {
     maxLength: number;
-    textAlign?: 'left' | 'center' | 'right';
-    onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: 'increase-width' | 'none';
-    pasteTransformer?: (pasted: string) => string;
-    containerClassName?: string;
-    noScriptCSSFallback?: string | null;
-    nonce?: string;
-} & {
-    render: (props: import("input-otp").RenderProps) => React.ReactNode;
-    children?: never;
-} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "containerClassName" | "maxLength" | "noScriptCSSFallback" | "nonce" | "onChange" | "onComplete" | "pasteTransformer" | "pushPasswordManagerStrategy" | "textAlign" | "value"> & {
     value?: string;
-    onChange?: (newValue: string) => unknown;
-    maxLength: number;
-    textAlign?: 'left' | 'center' | 'right';
-    onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: 'increase-width' | 'none';
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    formatter?: (value: string) => string;
+    mask?: import("./input-otp.js").InputOTPMaskProp;
+    align?: import("./input-otp.js").InputOTPAlignProp;
+    size?: import("../../props/index.js").SizeProp;
+    status?: import("../../props/index.js").ControlStatusProp;
+    variant?: import("../../props/index.js").ControlVariantProp;
+    pattern?: string;
     pasteTransformer?: (pasted: string) => string;
-    containerClassName?: string;
+    containerClassName?: import("../../props/index.js").ClassNameProp;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
     noScriptCSSFallback?: string | null;
     nonce?: string;
-} & {
-    render?: never;
-    children: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>, "ref">) & {
-    align?: InputOTPAlignProp;
-}) & React.RefAttributes<HTMLInputElement>>;
-export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, } from "../../props/components/data-entry.prop.js";
+    children?: React.ReactNode;
+    render?: (props: import("input-otp").RenderProps) => React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, InputOTPMaskProp, InputOTPProp, InputOTPProp as InputOTPProps, } from "../../props/components/data-entry.prop.js";
 export declare const InputOTPGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     appearance?: import("./input-otp.js").InputOTPGroupAppearanceProp;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/input-otp.js

@@ -4,18 +4,58 @@ import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-const InputOTP = React.forwardRef(({ className, containerClassName, align, ...props }, ref) => /* @__PURE__ */ jsx(
-  OTPInput,
-  {
+import { controlSurfaceAttrs, resolveAriaInvalid } from "../data-entry/control-surface.js";
+const DEFAULT_MASK_CHAR = "\u2022";
+const InputOTPMaskContext = React.createContext(null);
+const InputOTP = React.forwardRef(function InputOTP2({
+  className,
+  containerClassName,
+  align,
+  mask,
+  formatter,
+  size,
+  status,
+  variant,
+  value,
+  defaultValue,
+  onChange,
+  onValueChange,
+  readOnly,
+  "aria-invalid": ariaInvalid,
+  children,
+  render,
+  ...props
+}, ref) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  const handleChange = (next) => {
+    if (readOnly) return;
+    const formatted = formatter ? formatter(next) : next;
+    if (!isControlled) setUncontrolled(formatted);
+    onValueChange?.(formatted);
+    if (onChange !== onValueChange) onChange?.(formatted);
+  };
+  const maskChar = mask === true ? DEFAULT_MASK_CHAR : typeof mask === "string" && mask ? mask.charAt(0) : null;
+  const shared = {
     ref,
     "data-slot": "input-otp",
+    // INERT DEFAULT: `start` emits no attribute, so an existing field keeps its exact DOM.
     "data-align": align && align !== "start" ? align : void 0,
+    ...controlSurfaceAttrs({ size, status, variant }),
+    "aria-invalid": resolveAriaInvalid(ariaInvalid, status),
+    // Native `readonly` already conveys the state, but the library's readOnly contract names
+    // `aria-readonly` explicitly and half the controls did not honour it.
+    "aria-readonly": readOnly ? true : void 0,
+    readOnly,
+    value: current,
+    onChange: handleChange,
     containerClassName: cn("ui-otp-container", containerClassName),
     className: cn("ui-otp-input", className),
     ...props
-  }
-));
-InputOTP.displayName = "InputOTP";
+  };
+  return /* @__PURE__ */ jsx(InputOTPMaskContext.Provider, { value: maskChar, children: render ? /* @__PURE__ */ jsx(OTPInput, { ...shared, render }) : /* @__PURE__ */ jsx(OTPInput, { ...shared, children }) });
+});
 const InputOTPGroup = React.forwardRef(
   ({ appearance = "slots", className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -31,17 +71,20 @@ const InputOTPGroup = React.forwardRef(
 InputOTPGroup.displayName = "InputOTPGroup";
 const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
   const context = React.useContext(OTPInputContext);
+  const maskChar = React.useContext(InputOTPMaskContext);
   const slot = context.slots[index] ?? { char: null, hasFakeCaret: false, isActive: false };
+  const painted = slot.char === null ? null : maskChar ?? slot.char;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       "data-slot": "input-otp-slot",
       "data-active": slot.isActive || void 0,
+      "data-masked": maskChar && slot.char !== null ? "" : void 0,
       className: cn("ui-otp-slot", className),
       ...props,
       children: [
-        slot.char,
+        painted,
         slot.hasFakeCaret ? /* @__PURE__ */ jsx("div", { className: "ui-otp-caret-wrapper", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "ui-otp-caret" }) }) : null
       ]
     }

package/dist/components/ui/label.js

@@ -1,2 +1 @@
-"use client";
 export * from "../data-entry/label.js";

package/dist/components/ui/password-input.d.ts

@@ -1,4 +1,38 @@
 import * as React from "react";
 import { Input } from "../data-entry/input.js";
-export type PasswordInputProps = Omit<React.ComponentPropsWithoutRef<typeof Input>, "type">;
-export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * antd `Input.Password.visibilityToggle`. `false` removes the eye entirely — a kiosk, a shared
+ * screen, or a security policy that forbids ever revealing a secret has no other way to say so.
+ * The object form is the controlled triad for the reveal state: `visible` wins when provided, and
+ * `onVisibleChange` fires on both the controlled and the uncontrolled path.
+ */
+export type PasswordVisibilityToggleProp = boolean | {
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+};
+export type PasswordInputProps = Omit<React.ComponentPropsWithoutRef<typeof Input>, "type"> & {
+    /** antd `visibilityToggle` — see {@link PasswordVisibilityToggleProp}. Default `true`. */
+    visibilityToggle?: PasswordVisibilityToggleProp;
+    /** antd `iconRender` — replace the eye glyph. Receives the CURRENT visibility. */
+    iconRender?: (visible: boolean) => React.ReactNode;
+};
+export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "size"> & {
+    onValueChange?: (value: string) => void;
+    size?: "sm" | "md" | "lg";
+    status?: import("../../props/index.js").ControlStatusProp;
+    variant?: import("../../props/index.js").ControlVariantProp;
+    allowClear?: import("../../props/index.js").AllowClearProp;
+    onClear?: () => void;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    count?: import("../../props/components/data-entry.prop.js").ControlCountProp;
+} & React.RefAttributes<HTMLInputElement>, "ref">, "type"> & {
+    /** antd `visibilityToggle` — see {@link PasswordVisibilityToggleProp}. Default `true`. */
+    visibilityToggle?: PasswordVisibilityToggleProp;
+    /** antd `iconRender` — replace the eye glyph. Receives the CURRENT visibility. */
+    iconRender?: (visible: boolean) => React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/ui/password-input.js

@@ -6,30 +6,50 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { Input } from "../data-entry/input.js";
 const PasswordInput = React.forwardRef(
-  ({ className, ...props }, ref) => {
+  ({ className, visibilityToggle = true, iconRender, suffix, trailingIcon, allowClear, ...props }, ref) => {
     const { t } = useTranslation();
-    const [visible, setVisible] = React.useState(false);
+    const controlledVisible = typeof visibilityToggle === "object" ? visibilityToggle.visible : void 0;
+    const onVisibleChange = typeof visibilityToggle === "object" ? visibilityToggle.onVisibleChange : void 0;
+    const showToggle = visibilityToggle !== false;
+    const [internalVisible, setInternalVisible] = React.useState(false);
+    const isVisibleControlled = controlledVisible !== void 0;
+    const visible = showToggle ? isVisibleControlled ? controlledVisible : internalVisible : false;
+    const setVisible = (next) => {
+      if (!isVisibleControlled) setInternalVisible(next);
+      onVisibleChange?.(next);
+    };
+    const toggleOwnsTrailing = showToggle;
+    if (toggleOwnsTrailing && process.env?.NODE_ENV !== "production" && (suffix != null || trailingIcon != null || allowClear)) {
+      console.warn(
+        "[godxjp-ui] PasswordInput: the reveal toggle owns the trailing slot, so `suffix` / `trailingIcon` / `allowClear` are ignored. Use `leadingIcon` (or `prefix`), or pass `visibilityToggle={false}` to hand the slot back."
+      );
+    }
     return /* @__PURE__ */ jsxs("div", { className: "ui-password-input", "data-slot": "password-input", children: [
       /* @__PURE__ */ jsx(
         Input,
         {
           ref,
           type: visible ? "text" : "password",
-          className: cn("ui-password-input-field", className),
+          className: cn(showToggle && "ui-password-input-field", className),
+          suffix: toggleOwnsTrailing ? void 0 : suffix,
+          trailingIcon: toggleOwnsTrailing ? void 0 : trailingIcon,
+          allowClear: toggleOwnsTrailing ? false : allowClear,
           ...props
         }
       ),
-      /* @__PURE__ */ jsx(
+      showToggle ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           className: "ui-password-input-toggle",
-          onClick: () => setVisible((v) => !v),
+          disabled: props.disabled,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => setVisible(!visible),
           "aria-label": visible ? t("ui.passwordInput.hide") : t("ui.passwordInput.show"),
           "aria-pressed": visible,
-          children: visible ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
+          children: iconRender ? iconRender(visible) : visible ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
         }
-      )
+      ) : null
     ] });
   }
 );

package/dist/components/ui/rating.d.ts

@@ -3,7 +3,32 @@ export type RatingProps = {
     value?: number;
     defaultValue?: number;
     onValueChange?: (value: number) => void;
+    /** Number of symbols. This library's older name for antd's `count`; both are accepted. */
     max?: number;
+    /** antd `count` — number of symbols. Default 5. */
+    count?: number;
+    /**
+     * antd `allowHalf` — a symbol can be half-filled, so the scale is 0.5 … count in steps of 0.5.
+     * The keyboard steps by a half too, and each symbol becomes TWO hit areas (leading / trailing).
+     */
+    allowHalf?: boolean;
+    /**
+     * antd `allowClear` — choosing the value that is already chosen clears it back to 0. On by
+     * default in antd; off here, because a rating inside a form is usually required and a silent
+     * reset on a second click reads as a lost answer.
+     */
+    allowClear?: boolean;
+    /**
+     * antd `character` — what a symbol IS. A node for every symbol, or a function of the 1-based
+     * index for a scale whose symbols differ (A/B/C, 松竹梅, a heart for the top step).
+     */
+    character?: React.ReactNode | ((index: number) => React.ReactNode);
+    /**
+     * antd `tooltips` — a label per step, in order. It is folded into each symbol's ACCESSIBLE NAME
+     * rather than shown only on hover: a `title` attribute is invisible to a keyboard and to touch,
+     * and the whole point of the prop is to say what "3 of 5" means.
+     */
+    tooltips?: readonly string[];
     readOnly?: boolean;
     disabled?: boolean;
     name?: string;

package/dist/components/ui/rating.js

@@ -9,7 +9,12 @@ const Rating = React.forwardRef(
     value,
     defaultValue = 0,
     onValueChange,
-    max = 5,
+    max,
+    count,
+    allowHalf = false,
+    allowClear = false,
+    character,
+    tooltips,
     readOnly,
     disabled,
     name,
@@ -17,68 +22,103 @@ const Rating = React.forwardRef(
     ...rest
   }, ref) => {
     const { t } = useTranslation();
+    const symbols = count ?? max ?? 5;
     const [internal, setInternal] = React.useState(defaultValue);
     const current = value ?? internal;
     const [hover, setHover] = React.useState(null);
     const display = hover ?? current;
     const interactive = !readOnly && !disabled;
+    const stepSize = allowHalf ? 0.5 : 1;
     const select = (next) => {
       if (!interactive) return;
-      if (value === void 0) setInternal(next);
-      onValueChange?.(next);
+      const resolved = allowClear && next === current ? 0 : next;
+      if (value === void 0) setInternal(resolved);
+      onValueChange?.(resolved);
     };
-    const focusableStar = current > 0 ? current : 1;
+    const focusableStar = current > 0 ? Math.ceil(current) : 1;
     const onKeyDown = (e, star) => {
       if (!interactive) return;
       let next;
       switch (e.key) {
         case "ArrowRight":
         case "ArrowUp":
-          next = Math.min(max, star + 1);
+          next = Math.min(symbols, star + stepSize);
           break;
         case "ArrowLeft":
         case "ArrowDown":
-          next = Math.max(1, star - 1);
+          next = Math.max(stepSize, star - stepSize);
           break;
         case "Home":
-          next = 1;
+          next = stepSize;
           break;
         case "End":
-          next = max;
+          next = symbols;
           break;
         default:
           return;
       }
       e.preventDefault();
-      select(next);
+      if (value === void 0) setInternal(next);
+      onValueChange?.(next);
+    };
+    const stepLabel = (star) => {
+      const tooltip = tooltips?.[star - 1];
+      const base = t("ui.rating.starLabel", { star, max: symbols });
+      return tooltip ? `${base}, ${tooltip}` : base;
     };
+    const glyph = (star) => typeof character === "function" ? character(star) : character ?? /* @__PURE__ */ jsx(Star, { "aria-hidden": "true" });
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         role: "radiogroup",
         "data-slot": "rating",
+        "data-allow-half": allowHalf ? "true" : void 0,
         className: cn("ui-rating", className),
         "aria-label": rest["aria-label"] ?? t("ui.rating.ariaLabel"),
         children: [
-          Array.from({ length: max }, (_, i) => i + 1).map((star) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              role: "radio",
-              "aria-checked": current === star,
-              "aria-label": t("ui.rating.starLabel", { star, max }),
-              disabled: disabled || readOnly,
-              tabIndex: interactive && star === focusableStar ? 0 : -1,
-              className: cn("ui-rating-star", star <= display && "ui-rating-star-filled"),
-              onMouseEnter: () => interactive && setHover(star),
-              onMouseLeave: () => setHover(null),
-              onClick: () => select(star),
-              onKeyDown: (e) => onKeyDown(e, star),
-              children: /* @__PURE__ */ jsx(Star, { "aria-hidden": "true" })
-            },
-            star
-          )),
+          Array.from({ length: symbols }, (_, i) => i + 1).map((star) => {
+            const symbol = /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": current === star,
+                "aria-label": stepLabel(star),
+                disabled: disabled || readOnly,
+                tabIndex: interactive && star === focusableStar ? 0 : -1,
+                className: cn(
+                  "ui-rating-star",
+                  star <= display && "ui-rating-star-filled",
+                  allowHalf && star - 0.5 === display && "ui-rating-star-half-filled"
+                ),
+                onMouseEnter: () => interactive && setHover(star),
+                onMouseLeave: () => setHover(null),
+                onClick: () => select(star),
+                onKeyDown: (e) => onKeyDown(e, star),
+                children: glyph(star)
+              },
+              star
+            );
+            if (!allowHalf) return symbol;
+            return /* @__PURE__ */ jsxs("span", { "data-slot": "rating-symbol", className: "ui-rating-symbol", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-hidden": "true",
+                  disabled: disabled || readOnly,
+                  "data-slot": "rating-half",
+                  className: "ui-rating-star-half",
+                  onMouseEnter: () => interactive && setHover(star - 0.5),
+                  onMouseLeave: () => setHover(null),
+                  onClick: () => select(star - 0.5)
+                }
+              ),
+              symbol
+            ] }, star);
+          }),
           name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current }) : null
         ]
       }