Merge branch 'v11' into v11-usemask

Author: tugcekucukoglu

apps/showcase/demo/knob/basic-demo.tsx

@@ -0,0 +1,13 @@
+import { Knob } from 'primereact/knob';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Knob defaultValue={50}>
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob>
+        </div>
+    );
+}

apps/showcase/demo/knob/color-demo.tsx

@@ -0,0 +1,13 @@
+import { Knob } from 'primereact/knob';
+
+export default function ColorDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Knob defaultValue={50}>
+                <Knob.Range color="MediumTurquoise" />
+                <Knob.Value color="PeachPuff" />
+                <Knob.Text />
+            </Knob>
+        </div>
+    );
+}

apps/showcase/demo/knob/disabled-demo.tsx

@@ -0,0 +1,13 @@
+import { Knob } from 'primereact/knob';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Knob defaultValue={50} disabled>
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob>
+        </div>
+    );
+}

apps/showcase/demo/knob/knob-pt.tsx

@@ -0,0 +1,11 @@
+import { Knob } from 'primereact/knob';
+
+export default function KnobPTDemo() {
+    return (
+        <Knob defaultValue={50}>
+            <Knob.Range />
+            <Knob.Value />
+            <Knob.Text />
+        </Knob>
+    );
+}

apps/showcase/demo/knob/min-max-demo.tsx

@@ -0,0 +1,13 @@
+import { Knob } from 'primereact/knob';
+
+export default function MinMaxDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Knob defaultValue={10} min={-50} max={50}>
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob>
+        </div>
+    );
+}

apps/showcase/demo/knob/reactive-demo.tsx

@@ -0,0 +1,25 @@
+import { Button } from 'primereact/button';
+import { Knob } from 'primereact/knob';
+import * as React from 'react';
+
+export default function ReactiveDemo() {
+    const [value, setValue] = React.useState(0);
+
+    return (
+        <div className="card flex flex-col items-center gap-2">
+            <Knob value={value} size={150} readOnly>
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob>
+            <div className="flex gap-2">
+                <Button onClick={() => setValue(value + 1)} disabled={value === 100}>
+                    <i className="pi pi-plus" />
+                </Button>
+                <Button onClick={() => setValue(value - 1)} disabled={value <= 0}>
+                    <i className="pi pi-minus" />
+                </Button>
+            </div>
+        </div>
+    );
+}

apps/showcase/demo/knob/read-only-demo.tsx

@@ -0,0 +1,13 @@
+import { Knob } from 'primereact/knob';
+
+export default function ReadOnlyDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Knob defaultValue={50} readOnly>
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob>
+        </div>
+    );
+}

apps/showcase/demo/knob/size-demo.tsx

@@ -0,0 +1,13 @@
+import { Knob } from 'primereact/knob';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Knob defaultValue={60} size={200}>
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob>
+        </div>
+    );
+}

apps/showcase/demo/knob/step-demo.tsx

@@ -0,0 +1,13 @@
+import { Knob } from 'primereact/knob';
+
+export default function StepDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Knob defaultValue={50} step={10}>
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob>
+        </div>
+    );
+}

apps/showcase/demo/knob/stroke-demo.tsx

@@ -0,0 +1,13 @@
+import { Knob } from 'primereact/knob';
+
+export default function StrokeDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Knob defaultValue={40}>
+                <Knob.Range strokeWidth={5} />
+                <Knob.Value strokeWidth={5} />
+                <Knob.Text />
+            </Knob>
+        </div>
+    );
+}