feat(tailwind): add Rating component

Author: tanerengiiin

apps/showcase/demo/styled/rating/emoji-demo.tsx

@@ -0,0 +1,22 @@
+import { Rating } from '@primereact/ui/rating';
+
+const emojis = ['😡', '😕', '😐', '🙂', '😍'];
+
+function EmojiDemo() {
+    return (
+        <div className="flex justify-center">
+            <Rating.Root defaultValue={3} allowHalf={false}>
+                {emojis.map((emoji, i) => (
+                    <Rating.Option key={i} index={i} className="!p-0 grayscale data-checked:grayscale-0 hover:grayscale-0 transition-all text-4xl select-none">
+                        <Rating.On />
+                        <Rating.Off>
+                            <span>{emoji}</span>
+                        </Rating.Off>
+                    </Rating.Option>
+                ))}
+            </Rating.Root>
+        </div>
+    );
+}
+
+export default EmojiDemo;

apps/showcase/demo/tailwind/rating/allow-half-demo.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Rating } from '@/components/ui/rating';
+
+export default function AllowHalfDemo() {
+    return (
+        <div className="flex justify-center">
+            <Rating defaultValue={3} allowHalf={false} />
+        </div>
+    );
+}

apps/showcase/demo/tailwind/rating/basic-demo.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Rating } from '@/components/ui/rating';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex justify-center">
+            <Rating defaultValue={3.5} />
+        </div>
+    );
+}

apps/showcase/demo/tailwind/rating/controlled-demo.tsx

@@ -0,0 +1,25 @@
+'use client';
+import { Rating } from '@/components/ui/rating';
+import type { RatingRootValueChangeEvent } from 'primereact/rating';
+import * as React from 'react';
+
+export default function ControlledDemo() {
+    const [value, setValue] = React.useState<number | undefined>(4);
+
+    return (
+        <div className="flex flex-col items-center justify-center gap-6">
+            <Rating value={value} onValueChange={(e: RatingRootValueChangeEvent) => setValue(e.value)} />
+            <div className="flex items-center gap-2">
+                <button onClick={() => setValue(2.5)} className="px-3 py-1.5 text-sm rounded-md border border-surface-300 dark:border-surface-700 text-surface-700 dark:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors">
+                    2.5 Star
+                </button>
+                <button onClick={() => setValue(3)} className="px-3 py-1.5 text-sm rounded-md border border-surface-300 dark:border-surface-700 text-surface-700 dark:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors">
+                    3 Star
+                </button>
+                <button onClick={() => setValue(3.5)} className="px-3 py-1.5 text-sm rounded-md border border-surface-300 dark:border-surface-700 text-surface-700 dark:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors">
+                    3.5 Star
+                </button>
+            </div>
+        </div>
+    );
+}

apps/showcase/demo/tailwind/rating/disabled-demo.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Rating } from '@/components/ui/rating';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex justify-center">
+            <Rating value={3} disabled />
+        </div>
+    );
+}

apps/showcase/demo/tailwind/rating/emoji-demo.tsx

@@ -0,0 +1,26 @@
+import { Rating, RatingOff, RatingOn, RatingOption } from '@/components/ui/rating';
+
+const emojis = ['😡', '😕', '😐', '🙂', '😍'];
+
+export default function EmojiDemo() {
+    return (
+        <div className="flex justify-center">
+            <Rating defaultValue={3} allowHalf={false}>
+                {emojis.map((emoji, i) => (
+                    <RatingOption
+                        key={i}
+                        index={i}
+                        className="grayscale data-checked:grayscale-0 hover:grayscale-0 transition-all text-4xl select-none"
+                    >
+                        <RatingOn>
+                            <span>{emoji}</span>
+                        </RatingOn>
+                        <RatingOff>
+                            <span>{emoji}</span>
+                        </RatingOff>
+                    </RatingOption>
+                ))}
+            </Rating>
+        </div>
+    );
+}

apps/showcase/demo/tailwind/rating/preview.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Rating } from '@/components/ui/rating';
+
+export default function Preview() {
+    return (
+        <div className="flex justify-center">
+            <Rating defaultValue={3.5} />
+        </div>
+    );
+}

apps/showcase/demo/tailwind/rating/rating-pt.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Rating } from '@/components/ui/rating';
+
+export default function RatingPT() {
+    return (
+        <div className="flex items-center justify-center">
+            <Rating defaultValue={3} />
+        </div>
+    );
+}

apps/showcase/demo/tailwind/rating/readonly-demo.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Rating } from '@/components/ui/rating';
+
+export default function ReadOnlyDemo() {
+    return (
+        <div className="flex justify-center">
+            <Rating value={3} readOnly />
+        </div>
+    );
+}

apps/showcase/demo/tailwind/rating/stars-demo.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Rating } from '@/components/ui/rating';
+
+export default function StarsDemo() {
+    return (
+        <div className="flex justify-center">
+            <Rating defaultValue={5} stars={10} />
+        </div>
+    );
+}