shadcn-ui-react 0.5.0 → 0.5.1

package/README.md

@@ -141,6 +141,116 @@ export default function App() {
 <Button loading>Loading...</Button>
 ```
 
+---
+
+### ✍️ UiInput
+
+```tsx
+import { UiInput } from "shadcn-ui-react";
+
+export default function Example() {
+  const [name, setName] = React.useState("");
+
+  return (
+    <UiInput
+      htmlFormItemId="name"
+      variant="outline"
+      label="Name"
+      placeholder="Enter name"
+      value={name}
+      onChange={(e) => setName(e.target.value)}
+      errorMessage={
+        name.length > 0 && name.trim().length < 2
+          ? "Min 2 characters"
+          : undefined
+      }
+    />
+  );
+}
+```
+
+---
+
+### 🧾 UiSelect
+
+Using `items`:
+
+```tsx
+import { UiSelect } from "shadcn-ui-react";
+
+export default function LanguageSelectItemsDemo() {
+  const [lang, setLang] = React.useState("");
+
+  return (
+    <UiSelect
+      htmlFormItemId="language"
+      label="Language"
+      placeholder="Select a language"
+      value={lang}
+      onChange={setLang}
+      variant="outline"
+      size="md"
+      items={[
+        { label: "Spanish", value: "es" },
+        { label: "English", value: "en" },
+        { label: "Portuguese", value: "pt" },
+        { label: "Chinese", value: "zh" },
+        { label: "Japanese", value: "ja" },
+        { label: "Korean (disabled)", value: "ko", disabled: true },
+      ]}
+      errorMessage={!lang ? "Please select a language." : undefined}
+    />
+  );
+}
+```
+
+Using `children`:
+
+```tsx
+import {
+  UiSelect,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+} from "shadcn-ui-react";
+
+export default function LanguageSelectChildrenDemo() {
+  const [lang, setLang] = React.useState("");
+
+  return (
+    <UiSelect
+      htmlFormItemId="language_children"
+      label="Language (grouped)"
+      placeholder="Select a language"
+      value={lang}
+      onChange={setLang}
+      variant="outline"
+      size="md"
+      errorMessage={!lang ? "Please select a language." : undefined}
+    >
+      <SelectGroup>
+        <SelectLabel>Common</SelectLabel>
+        <SelectItem value="es">Spanish</SelectItem>
+        <SelectItem value="en">English</SelectItem>
+        <SelectItem value="pt">Portuguese</SelectItem>
+
+        <SelectSeparator />
+
+        <SelectLabel>Asia</SelectLabel>
+        <SelectItem value="zh">Chinese</SelectItem>
+        <SelectItem value="ja">Japanese</SelectItem>
+        <SelectItem value="ko" disabled>
+          Korean (disabled)
+        </SelectItem>
+      </SelectGroup>
+    </UiSelect>
+  );
+}
+```
+
+---
+
 ### 🪄 Accordion
 
 ```tsx
@@ -152,12 +262,16 @@ export default function App() {
 </Accordion>
 ```
 
+---
+
 ### ⚠️ Alert
 
 ```tsx
 <Alert>This is an alert message</Alert>
 ```
 
+---
+
 ### 🧾 Form
 
 ```tsx
@@ -177,13 +291,13 @@ import * as z from "zod";
 
 const formSchema = z.object({
   email: z.email({
-    pattern:  z.regexes.email,
-    error: 'Email is required'
+    pattern: z.regexes.email,
+    error: "Email is required",
   }),
   password: z
     .string()
     .min(8, { message: "Password must be at least 8 characters" }),
-  gender: z.enum(['male', 'female']).optional().nullable(),
+  gender: z.enum(["male", "female"]).optional().nullable(),
 });
 
 type UserFormValue = z.infer<typeof formSchema>;
@@ -192,6 +306,7 @@ export default function UserAuthForm() {
   const defaultValues = {
     email: "demo@domain.com",
   };
+
   const form = useForm<UserFormValue>({
     resolver: zodResolver(formSchema),
     defaultValues,
@@ -207,29 +322,32 @@ export default function UserAuthForm() {
         type="email"
         placeholder="Enter your email"
         label="Email"
-        variant="outline" //outline | soft | ghost | filled | flushed | unstyled | link
-        className="" //your style
+        variant="outline" // outline | soft | ghost | filled | flushed | unstyled | link
+        className="" // your style
       />
+
       <FormField
-          control={form.control}
-          name="password"
-          type="password"
-          placeholder="Enter password"
-          label="Password"
-          variant="outline" //outline | soft | ghost | filled | flushed | unstyled | link
-          className="" //your style
-        />
+        control={form.control}
+        name="password"
+        type="password"
+        placeholder="Enter password"
+        label="Password"
+        variant="outline" // outline | soft | ghost | filled | flushed | unstyled | link
+        className="" // your style
+      />
+
       <FormSelect
         control={form.control}
         name="gender"
         label="Gender"
-        variant="outline" //outline | soft | ghost | filled | flushed | unstyled | link
-        className="" //your style
+        variant="outline" // outline | soft | ghost | filled | flushed | unstyled | link
+        className="" // your style
         items={[
           { label: "Male", value: "male" },
           { label: "Female", value: "female" },
         ]}
       />
+
       <Button className="ml-auto w-full" type="submit">
         Log In
       </Button>
@@ -238,6 +356,8 @@ export default function UserAuthForm() {
 }
 ```
 
+---
+
 ### 📊 DataTable
 
 ```tsx
@@ -252,18 +372,9 @@ type User = {
 };
 
 const columns: ColumnDef<User, any>[] = [
-  {
-    accessorKey: "id",
-    header: "ID",
-  },
-  {
-    accessorKey: "name",
-    header: "Name",
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-  },
+  { accessorKey: "id", header: "ID" },
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "email", header: "Email" },
 ];
 
 const data: User[] = [
@@ -285,18 +396,17 @@ const Example = () => {
 
   const paginatedData = data.slice((page - 1) * perPage, page * perPage);
 
-  const handlePageChange = (newPage: number) => {
-    setPage(newPage);
-  };
+  const handlePageChange = (newPage: number) => setPage(newPage);
 
   const handlePageSizeChange = (newPageSize: number) => {
     setPerPage(newPageSize);
-    setPage(1); // Reset to the first page when page size changes
+    setPage(1);
   };
 
   return (
     <div>
       <h1 className="text-xl font-bold mb-4">Data Table with Pagination</h1>
+
       <DataTable
         columns={columns}
         data={paginatedData}