pejay-ui 1.4.2 → 1.5.0

package/templates/button/Button.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 
-import { Tooltip } from "./tooltip";
+import { Spinner } from "@/pejay-ui/spinner";
+import { Tooltip } from "@/pejay-ui/components/overlays";
 
 /* ─────────────────────────────────────────────
    Types
@@ -28,7 +29,8 @@ export type ButtonVariant =
   | "success-ghost"
   | "warning-ghost"
   | "black-ghost"
-  | "white-ghost";
+  | "white-ghost"
+  | "soft";
 export type RoundedStyle = "full" | "lg" | "md" | "sm" | "none";
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -67,6 +69,7 @@ const variantMap: Record<ButtonVariant, string> = {
   warning: "bg-amber-500   hover:bg-amber-600   active:bg-amber-700   text-white",
   black:   "bg-black       hover:bg-black/80    active:bg-black/70    text-white",
   white:   "bg-white       hover:bg-white/80    active:bg-white/70    text-black",
+  soft:    "bg-sky-500/10  hover:bg-sky-500/20  active:bg-sky-500/30  text-sky-500",
 
   /* ── Soft (coloured text, always-visible tint) ───────── */
   "primary-soft": "text-sky-500     bg-current/10 hover:bg-current/15 active:bg-current/20",
@@ -119,10 +122,8 @@ export const Button = ({
     ? stripInteractive(variantMap[variant])
     : variantMap[variant];
 
-  /* Render content: loader node / fallback text / normal children */
-  const content = isLoading
-    ? (loader ?? <span className="text-sm font-medium">Loading…</span>)
-    : children;
+  /* Render content: loader node / spinner / normal children */
+  const content = isLoading ? (loader ?? <Spinner size="sm" />) : children;
 
   return (
     <Tooltip content={tooltipContent}>

package/templates/button/README.md

@@ -0,0 +1,81 @@
+# Button & Tooltip Components
+
+A highly flexible button component with built-in loading states, visual style presets (variants), size options, prefix/suffix icon slots, and hover tooltip support.
+
+---
+
+## 1. Button Usage & API
+
+```tsx
+import { Button } from "@/pejay-ui/components/button";
+
+// Basic Button
+<Button onClick={handleClick}>Click Me</Button>
+
+// Custom Styling & Icons
+<Button variant="danger" size="lg" icon={TrashIcon} loading={isDeleting}>
+  Delete Record
+</Button>
+```
+
+### Component Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `children` | `ReactNode` | — | Text or elements inside the button. |
+| `variant` | `ButtonVariant` | `"primary"` | Visual preset theme style. (See options below) |
+| `rounded` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"lg"` | Controls the button border radius. |
+| `disableHoverEffect` | `boolean` | `false` | Removes hover/active style transforms (keeps it static). |
+| `isLoading` | `boolean` | `false` | Displays a loading spinner and disables clicks. |
+| `loader` | `ReactNode` | — | Custom loading component override. |
+| `fullWidth` | `boolean` | `false` | Sets button width to `w-full` (100% parent container width). |
+| `tooltipContent` | `ReactNode \| string` | — | Display a hover tooltip panel with this content. |
+
+---
+
+## 2. Visual Variants & Color Palette Reference
+
+We categorize button variants into 3 distinct styling structures. Colors are predefined and tailored for dark/light contrast:
+
+### A. Solid Variants (Filled background, white/black text)
+* **`primary`** : Sky Blue (`bg-sky-500` $\rightarrow$ hover `bg-sky-600` $\rightarrow$ active `bg-sky-700`)
+* **`danger`** : Red (`bg-red-600` $\rightarrow$ hover `bg-red-700` $\rightarrow$ active `bg-red-800`)
+* **`success`** : Emerald (`bg-emerald-600` $\rightarrow$ hover `bg-emerald-700` $\rightarrow$ active `bg-emerald-800`)
+* **`warning`** : Amber (`bg-amber-500` $\rightarrow$ hover `bg-amber-600` $\rightarrow$ active `bg-amber-700`)
+* **`black`** : Black (`bg-black` $\rightarrow$ hover `bg-black/80` $\rightarrow$ active `bg-black/70`)
+* **`white`** : White (`bg-white`, text black $\rightarrow$ hover `bg-white/80` $\rightarrow$ active `bg-white/70`)
+
+---
+
+### B. Soft Variants (Always-visible colored tint background + matching text color)
+*Soft variants use `bg-current` opacity mappings, meaning the background tint color automatically inherits and matches the text color:*
+* **`primary-soft`** / **`soft`** : Sky Blue text + 10% opacity Sky Blue background.
+* **`danger-soft`** : Red text + 10% opacity Red background.
+* **`success-soft`** : Emerald text + 10% opacity Emerald background.
+* **`warning-soft`** : Amber text + 10% opacity Amber background.
+* **`black-soft`** : Black text + 10% opacity Black background.
+* **`white-soft`** : White text + 10% opacity White background.
+
+---
+
+### C. Ghost Variants (Transparent background $\rightarrow$ fades in soft tint on hover)
+* **`primary-ghost`** : Sky Blue text.
+* **`danger-ghost`** : Red text.
+* **`success-ghost`** : Emerald text.
+* **`warning-ghost`** : Amber text.
+* **`black-ghost`** : Black text.
+* **`white-ghost`** : White text.
+
+---
+
+## 3. Tooltip Component
+
+A standalone utility to show extra info bubbles on hover for any parent component.
+
+```tsx
+import { Tooltip } from "@/pejay-ui/components/overlays/tooltip";
+
+<Tooltip content="Upload CSV file" placement="bottom">
+  <div className="p-2 border rounded">Hover Over Me</div>
+</Tooltip>
+```

package/templates/button/index.ts

@@ -1,2 +1 @@
-export * from "./Button";
-export * from "./tooltip";
+export * from "./Button";

package/templates/form/{checkbox-group.tsx → choices/checkbox-group.tsx}

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 import { Checkbox, type CheckboxProps } from "./checkbox";
 
 /*

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

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

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/pejay-ui/utils/cn";
 import { Radio, type RadioProps } from "./radio";
 
 /*

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";
 
 /*
  * ============================================================================