Merge pull request #52 from rhinobase/rc

fix(ui): added isReadOnly prop & improved isDisabled prop to form components

Author: MathurAditya724

apps/docs/.storybook/main.ts

@@ -1,4 +1,4 @@
-import path from "path";
+import path from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 

apps/docs/app/Wrapper.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { usePathname, useSearchParams } from "next/navigation";
-import { PropsWithChildren, useEffect, useState } from "react";
+import { type PropsWithChildren, useEffect, useState } from "react";
 import { Hero } from "../components/Hero";
 import { Layout } from "../components/Layout";
 import { MobileNavigation } from "../components/MobileNavigation";

apps/docs/app/docs/components/radio/page.md

@@ -126,6 +126,7 @@ This component is built on top of [Radix Radio Group](https://www.radix-ui.com/p
 | ---------- | -------------------------------------------------------- | -------------------------- | ------- |
 | size       | Size of the radio group component and its subcomponents. | `"sm"` or `"md"` or `"lg"` | `"md"`  |
 | isDisabled | To manage disabled state.                                | `boolean`                  | `false` |
+| isReadOnly | To manage readonly state.                                | `boolean`                  | `false` |
 
 ### RadioGroupItem
 

apps/docs/app/docs/components/slider/page.md

@@ -0,0 +1,113 @@
+---
+title: Slider
+nextjs:
+  metadata:
+    title: Slider
+    description: An input where the user selects a value from within a given range.
+    twitter:
+      title: Slider
+      images:
+        url: https://rafty.rhinobase.io/api/og?title=Slider
+    openGraph:
+      title: Slider
+      images:
+        url: https://rafty.rhinobase.io/api/og?title=Slider
+---
+
+An input where the user selects a value from within a given range.
+
+This component is made on top of [Radix UIs Slider Component](https://www.radix-ui.com/primitives/docs/components/slider) with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible.
+
+## Anatomy
+
+Import the component.
+
+```jsx
+import { Slider, SliderRange, SliderThumb, SliderTrack } from "@rafty/ui";
+
+<Slider>
+  <SliderTrack>
+    <SliderRange />
+  </SliderTrack>
+  <SliderThumb />
+</Slider>;
+```
+
+## ColorScheme
+
+There are 5 `colorScheme` options in badge: `primary` (default), `secondary`, `error`, `info`, `success` & `warning`.
+
+{% example %}
+
+```jsx
+<Slider colorScheme="secondary" defaultValue={[20]}>
+  <SliderTrack>
+    <SliderRange />
+  </SliderTrack>
+  <SliderThumb />
+</Slider>
+```
+
+{% /example %}
+
+## Size
+
+There are 3 `size` options available: `sm`, `md` (default) & `lg`
+
+{% example %}
+
+```jsx
+<Slider size="sm" defaultValue={[20]}>
+  <SliderTrack>
+    <SliderRange />
+  </SliderTrack>
+  <SliderThumb />
+</Slider>
+```
+
+{% /example %}
+
+## Range Slider
+
+Slider accepts value in array and returns value in array in `onValueChange` function, so it can be used as `Range Slider`. You just need to pass more than one values in `value` and `defaultValue` props and put the same number of `<SliderThumb />`.
+
+{% example %}
+
+```jsx
+<Slider defaultValue={[20, 80]}>
+  <SliderTrack>
+    <SliderRange />
+  </SliderTrack>
+  <SliderThumb />
+  <SliderThumb />
+</Slider>
+```
+
+{% /example %}
+
+## Props
+
+---
+
+### Slider
+
+This component is built on top of [Radix Slider](https://www.radix-ui.com/primitives/docs/components/slider#root).
+
+| Property    | Description                           | Type                                                                                | Default     |
+| ----------- | ------------------------------------- | ----------------------------------------------------------------------------------- | ----------- |
+| size        | Size of the Slider component.         | `"sm"` or `"md"` or `"lg"`                                                          | `"md"`      |
+| colorScheme | Color Scheme of the Slider component. | `"primary"` or `"secondary"` or `"error"` or `"success"` or `"warning"` or `"info"` | `"primary"` |
+| isDisabled  | To manage disabled state.             | `boolean`                                                                           | `false`     |
+| isReadOnly  | To manage readonly state.             | `boolean`                                                                           | `false`     |
+
+### SliderTrack
+
+This component is built on top of [Radix Slider Track](https://www.radix-ui.com/primitives/docs/components/slider#track).
+
+### SliderRange
+
+This component is built on top of [Radix Slider Range](https://www.radix-ui.com/primitives/docs/components/slider#range).
+
+### SliderThumb
+
+This component is built on top of [Radix Slider Thumb](https://www.radix-ui.com/primitives/docs/components/slider#thumb).

apps/docs/app/docs/examples/ExampleCodeRepo.tsx

@@ -1,4 +1,4 @@
-import Image, { StaticImageData } from "next/image";
+import Image, { type StaticImageData } from "next/image";
 import Link from "next/link";
 import { Fragment } from "react";
 import NextjsIcon from "../../../public/frameworks/nextjs.svg";

apps/docs/app/docs/examples/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
 import { DocsLayout } from "../../../components/DocsLayout";
 import { ExampleCodeRepo } from "./ExampleCodeRepo";
 

apps/docs/app/docs/layout.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 import { Layout } from "../../components/Layout";
 
 export default function DocsLayout({ children }: PropsWithChildren) {

apps/docs/app/layout.tsx

@@ -1,6 +1,6 @@
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { classNames } from "@rafty/ui";
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import localFont from "next/font/local";
 import type { PropsWithChildren } from "react";

apps/docs/app/providers.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { ThemeProvider } from "next-themes";
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 export function Providers({ children }: PropsWithChildren) {
   return (

apps/docs/app/sitemap.ts

@@ -1,6 +1,6 @@
-import path from "path";
+import path from "node:path";
 import glob from "fast-glob";
-import { MetadataRoute } from "next";
+import type { MetadataRoute } from "next";
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const pagesDir = path.resolve("./app");