pejay-ui 1.4.3 → 1.5.0

package/templates/form/{radio.tsx → choices/radio.tsx}

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 
 /*
  * ============================================================================

package/templates/form/choices/readme.checkbox-group.md

@@ -0,0 +1,27 @@
+# CheckboxGroup Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { CheckboxGroup } from "@/pejay-ui/components/form";
+
+<CheckboxGroup
+  label="Hobbies"
+  options={[{ label: "Sports", value: "sports" }, { label: "Music", value: "music" }]}
+  value={hobbies}
+  onChange={setHobbies}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `options` | `Array<{ label: string, value: string }>` | — | Option items list. |
+| `value` | `string[]` | — | Selected values list. |

package/templates/form/choices/readme.checkbox.md

@@ -0,0 +1,26 @@
+# Checkbox Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { Checkbox } from "@/pejay-ui/components/form";
+
+<Checkbox
+  label="I agree to terms"
+  checked={agreed}
+  onChange={(e) => setAgreed(e.target.checked)}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | — | Description text displayed next to the checkbox box. |
+| `checked` | `boolean` | `false` | Checked state. |

package/templates/form/choices/readme.radio-group.md

@@ -0,0 +1,26 @@
+# RadioGroup Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { RadioGroup } from "@/pejay-ui/components/form";
+
+<RadioGroup
+  label="Preferred Mode"
+  options={[{ label: "Dark", value: "dark" }, { label: "Light", value: "light" }]}
+  value={theme}
+  onChange={setTheme}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `options` | `Array<{ label: string, value: string }>` | — | Group items lists. |

package/templates/form/choices/readme.radio.md

@@ -0,0 +1,24 @@
+# Radio Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { Radio } from "@/pejay-ui/components/form";
+
+<Radio
+  label="Option Item"
+  name="group-1"
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | — | Option description text. |

package/templates/form/choices/readme.switch.md

@@ -0,0 +1,26 @@
+# Switch Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { Switch } from "@/pejay-ui/components/form";
+
+<Switch
+  label="Enable Notifications"
+  checked={isEnabled}
+  onChange={setIsEnabled}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | — | Helper label text. |
+| `checked` | `boolean` | `false` | Toggles checkbox status on/off. |

package/templates/form/{switch.tsx → choices/switch.tsx}

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 
 interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
   /* Title label of the switch toggle */

package/templates/form/{file-input.tsx → file/file-input.tsx}

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 import { Upload, X, FileText, Image as ImageIcon } from "lucide-react";
-import { cn } from "@/utils/cn";
-import { Input } from "./input";
+import { cn } from "@/pejay-ui/utils/cn";
+import { Input } from "../text-inputs/input";
 
 /*
  * ============================================================================

package/templates/form/file/readme.file-input.md

@@ -0,0 +1,26 @@
+# FileInput Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { FileInput } from "@/pejay-ui/components/form";
+
+<FileInput
+  label="Upload Resume"
+  accept=".pdf,.docx"
+  onChange={(files) => console.log(files)}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `multiple` | `boolean` | `false` | Allows multiple file select upload. |
+| `accept` | `string` | — | Accepted file formats. |

package/templates/form/index.ts

@@ -1,22 +1,19 @@
-export * from "./input";
-export * from "./checkbox";
-export * from "./textarea";
-export * from "./radio";
-export * from "./radio-group";
-export * from "./switch";
-export * from "./checkbox-group";
-export * from "./range-slider";
-export * from "./password-input";
-
-export * from "./date-picker";
-export * from "./time-picker";
-export * from "./date-range-picker";
-export * from "./time-range-picker";
-
-export * from "./number-input";
-export * from "./amount-input";
-export * from "./phone-input";
-export * from "./url-input";
-
-export * from "./email-input";
-export * from "./file-input";
+export * from "./text-inputs/input";
+export * from "./text-inputs/textarea";
+export * from "./text-inputs/email-input";
+export * from "./text-inputs/password-input";
+export * from "./text-inputs/phone-input";
+export * from "./text-inputs/url-input";
+export * from "./pickers/date-picker";
+export * from "./pickers/date-range-picker";
+export * from "./pickers/time-picker";
+export * from "./pickers/time-range-picker";
+export * from "./numeric/number-input";
+export * from "./numeric/amount-input";
+export * from "./numeric/range-slider";
+export * from "./choices/checkbox";
+export * from "./choices/checkbox-group";
+export * from "./choices/radio";
+export * from "./choices/radio-group";
+export * from "./choices/switch";
+export * from "./file/file-input";

package/templates/form/{amount-input.tsx → numeric/amount-input.tsx}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { Input } from "./input";
+import { Input } from "../text-inputs/input";
 import { Plus, Minus } from "lucide-react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 
 /*
  * ============================================================================

package/templates/form/{number-input.tsx → numeric/number-input.tsx}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { Input } from "./input";
+import { Input } from "../text-inputs/input";
 import { Plus, Minus } from "lucide-react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 
 /*
  * ============================================================================

package/templates/form/{range-slider.tsx → numeric/range-slider.tsx}

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 
 interface RangeSliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
   /* Title label of the range slider */

package/templates/form/numeric/readme.amount-input.md

@@ -0,0 +1,27 @@
+# AmountInput Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { AmountInput } from "@/pejay-ui/components/form";
+
+<AmountInput
+  label="Price Value"
+  currency="USD"
+  value={amount}
+  onChange={setAmount}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `currency` | `string` | `"$"` | Currency prefix symbol. |
+| `allowDecimals` | `boolean` | `true` | Allows float decimals. |

package/templates/form/numeric/readme.number-input.md

@@ -0,0 +1,26 @@
+# NumberInput Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { NumberInput } from "@/pejay-ui/components/form";
+
+<NumberInput
+  label="Age"
+  min={18}
+  max={99}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `min` | `number` | — | Minimum value allowed. |
+| `max` | `number` | — | Maximum value allowed. |

package/templates/form/numeric/readme.range-slider.md

@@ -0,0 +1,27 @@
+# RangeSlider Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { RangeSlider } from "@/pejay-ui/components/form";
+
+<RangeSlider
+  min={0}
+  max={100}
+  value={val}
+  onChange={setVal}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `min` | `number` | `0` | Minimum range. |
+| `max` | `number` | `100` | Maximum range. |

package/templates/form/{date-picker.tsx → pickers/date-picker.tsx}

@@ -5,14 +5,14 @@ import React, {
   useEffect,
   useLayoutEffect,
 } from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 import {
   Calendar as CalendarIcon,
   ChevronLeft,
   ChevronRight,
   ChevronDown,
 } from "lucide-react";
-import { SelectInput } from "../select-dropdown/select-input";
+import { SelectInput } from "../../select-dropdown/select-input";
 const DateUtils = {};
 import {
   useFloating,

package/templates/form/{date-range-picker.tsx → pickers/date-range-picker.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 import {
   Calendar as CalendarIcon,
   ChevronLeft,
@@ -8,7 +8,7 @@ import {
   PanelLeftClose,
   PanelLeft,
 } from "lucide-react";
-import { SelectInput } from "../select-dropdown/select-input";
+import { SelectInput } from "../../select-dropdown/select-input";
 const DateUtils = {};
 import {
   useFloating,

package/templates/form/pickers/readme.date-picker.md

@@ -0,0 +1,26 @@
+# DatePicker Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { DatePicker } from "@/pejay-ui/components/form";
+
+<DatePicker
+  label="Date of Birth"
+  value={birthDate}
+  onChange={setBirthDate}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `Date` | — | Selected date object. |
+| `onChange` | `(date: Date) => void` | — | Callback when date is selected. |

package/templates/form/pickers/readme.date-range-picker.md

@@ -0,0 +1,25 @@
+# DateRangePicker Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { DateRangePicker } from "@/pejay-ui/components/form";
+
+<DateRangePicker
+  label="Booking Duration"
+  value={range}
+  onChange={setRange}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `{ start: Date, end: Date }` | — | Date range values. |

package/templates/form/pickers/readme.time-picker.md

@@ -0,0 +1,25 @@
+# TimePicker Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { TimePicker } from "@/pejay-ui/components/form";
+
+<TimePicker
+  label="Start Time"
+  value={time}
+  onChange={setTime}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string` | — | Time string value (e.g. "12:00 AM"). |

package/templates/form/pickers/readme.time-range-picker.md

@@ -0,0 +1,25 @@
+# TimeRangePicker Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { TimeRangePicker } from "@/pejay-ui/components/form";
+
+<TimeRangePicker
+  label="Shift Duration"
+  value={range}
+  onChange={setRange}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `{ start: string, end: string }` | — | Time range selector values. |

package/templates/form/{time-picker.tsx → pickers/time-picker.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useRef, useEffect } from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 import { Clock, ChevronDown } from "lucide-react";
 const DateUtils = {};
 import {

package/templates/form/{time-range-picker.tsx → pickers/time-range-picker.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 import { Clock, ChevronDown } from "lucide-react";
 const DateUtils = {};
 import {

package/templates/form/{input.tsx → text-inputs/input.tsx}

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 
 /*
  * ============================================================================

package/templates/form/{password-input.tsx → text-inputs/password-input.tsx}

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Input } from "./input";
 import { Check, Eye, EyeOff, AlertTriangle } from "lucide-react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 
 /*
  * ============================================================================

package/templates/form/text-inputs/readme.email-input.md

@@ -0,0 +1,24 @@
+# EmailInput Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { EmailInput } from "@/pejay-ui/components/form";
+
+<EmailInput
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `"Email"` | Field label text. |

package/templates/form/text-inputs/readme.input.md

@@ -0,0 +1,28 @@
+# Input (Text) Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { Input } from "@/pejay-ui/components/form";
+
+<Input
+  label="User Name"
+  placeholder="Enter your user name"
+  prefix={<UserIcon size={16} />}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | — | Label text displayed above the input. |
+| `error` | `string` | — | Validation error text that highlights borders red. |
+| `prefix` | `ReactNode` | — | Component to render on the left side of the input field. |
+| `suffix` | `ReactNode` | — | Component to render on the right side of the input field. |

package/templates/form/text-inputs/readme.password-input.md

@@ -0,0 +1,24 @@
+# PasswordInput Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { PasswordInput } from "@/pejay-ui/components/form";
+
+<PasswordInput
+  label="Password"
+  placeholder="Enter secret pass"
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `strengthBar` | `boolean` | `false` | Toggles password strength progress indicator. |

package/templates/form/text-inputs/readme.phone-input.md

@@ -0,0 +1,24 @@
+# PhoneInput Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { PhoneInput } from "@/pejay-ui/components/form";
+
+<PhoneInput
+  value={phone}
+  onChange={(val) => setPhone(val)}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `"Phone Number"` | Input field label. |

package/templates/form/text-inputs/readme.textarea.md

@@ -0,0 +1,24 @@
+# Textarea Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { Textarea } from "@/pejay-ui/components/form";
+
+<Textarea
+  label="Remarks"
+  rows={6}
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `rows` | `number` | `4` | Default display rows. |

package/templates/form/text-inputs/readme.url-input.md

@@ -0,0 +1,23 @@
+# UrlInput Component
+
+A styled form input component optimized for Tailwind.
+
+---
+
+## Usage
+
+```tsx
+import { UrlInput } from "@/pejay-ui/components/form";
+
+<UrlInput
+  placeholder="https://example.com"
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `"URL"` | Input field label. |