@motor-hero/ui-kit 0.36.3 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.36.3",
+  "version": "0.37.0",
   "description": "Componentes React reutilizáveis para o ecossistema MotorHero — shadcn/ui + Tailwind CSS v4",
   "author": "MotorHero",
   "license": "UNLICENSED",
@@ -60,6 +60,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.16",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@react-input/mask": "^2.0.4",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.1.1",

package/src/components/rating.tsx

@@ -0,0 +1,99 @@
+import * as ToggleGroup from "@radix-ui/react-toggle-group"
+import { Star } from "lucide-react"
+import { cn } from "../lib/utils"
+
+const MAX_STARS = 5
+
+const sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+} as const
+
+export interface RatingProps {
+  value?: number
+  onChange?: (value: number) => void
+  readOnly?: boolean
+  size?: "sm" | "md" | "lg"
+  className?: string
+  "aria-label"?: string
+}
+
+function defaultLabel(value: number) {
+  return value > 0
+    ? `Avaliação: ${value} de ${MAX_STARS} estrelas`
+    : "Avaliação: sem nota"
+}
+
+export function Rating({
+  value = 0,
+  onChange,
+  readOnly = false,
+  size = "md",
+  className,
+  "aria-label": ariaLabel,
+}: RatingProps) {
+  const clamped = Math.min(MAX_STARS, Math.max(0, value))
+  const label = ariaLabel ?? defaultLabel(clamped)
+
+  if (readOnly) {
+    return (
+      <div
+        role="img"
+        aria-label={label}
+        className={cn("inline-flex items-center gap-0.5", className)}
+      >
+        {Array.from({ length: MAX_STARS }, (_, index) => (
+          <Star
+            key={index}
+            aria-hidden
+            className={cn(
+              sizeClasses[size],
+              index < clamped
+                ? "fill-amber-400 text-amber-400"
+                : "text-muted-foreground",
+            )}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <ToggleGroup.Root
+      type="single"
+      value={clamped > 0 ? String(clamped) : ""}
+      onValueChange={(next) => {
+        // Radix emite "" ao clicar de novo na estrela já selecionada;
+        // mantemos a nota atual em vez de zerar (onChange é sempre 1-5).
+        if (next) onChange?.(Number(next))
+      }}
+      aria-label={label}
+      className={cn("inline-flex items-center gap-0.5", className)}
+    >
+      {Array.from({ length: MAX_STARS }, (_, index) => {
+        const starValue = index + 1
+        const filled = starValue <= clamped
+        return (
+          <ToggleGroup.Item
+            key={starValue}
+            value={String(starValue)}
+            aria-label={`${starValue} ${starValue === 1 ? "estrela" : "estrelas"}`}
+            className="inline-flex cursor-pointer items-center justify-center rounded-sm bg-transparent p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <Star
+              aria-hidden
+              className={cn(
+                sizeClasses[size],
+                "transition-colors",
+                filled
+                  ? "fill-amber-400 text-amber-400"
+                  : "text-muted-foreground hover:text-amber-400",
+              )}
+            />
+          </ToggleGroup.Item>
+        )
+      })}
+    </ToggleGroup.Root>
+  )
+}

package/src/index.ts

@@ -8,6 +8,8 @@ export type { BaseDialogProps, BaseDialogSize } from "./components/base-dialog";
 export { BaseDialog } from "./components/base-dialog";
 export type { ColorPickerProps } from "./components/color-picker";
 export { ColorPicker } from "./components/color-picker";
+export { Rating } from "./components/rating"
+export type { RatingProps } from "./components/rating"
 export type { ComboboxOption, ComboboxProps } from "./components/combobox";
 export { Combobox } from "./components/combobox";
 export { ConfirmDialog } from "./components/confirm-dialog";