pala-ui-core 0.1.0

package/README.md

@@ -0,0 +1,164 @@
+# pala-ui-core
+
+**PalaUI** is a warm, mobile-first React component library built for platforms connecting businesses with on-the-go workers in informal job markets.
+
+Every component ships with the signature asymmetric pill radius and a soft, approachable color palette — making job seeking feel human again.
+
+## Installation
+
+```bash
+npm install pala-ui-core lucide-react
+```
+
+## Setup
+
+### 1. Tailwind CSS v4 configuration
+
+PalaUI requires **Tailwind CSS v4** (the components use Tailwind utility classes).
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "pala-ui-core/tokens.css";
+```
+
+### 2. Load the fonts
+
+Add Funnel Sans (headings) and Inter (body) to your project:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link href="https://fonts.googleapis.com/css2?family=Funnel+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+```
+
+### 3. (Optional) Plain CSS fallback
+
+If you're not using Tailwind v4, import the fallback stylesheet with raw CSS variables and animations:
+
+```css
+@import "pala-ui-core/styles.css";
+```
+
+This provides `:root` variable defaults and utility animations, but you'll need to write your own utility classes since the components rely on Tailwind classes.
+
+## Usage
+
+```tsx
+import { ButtonPrimary, Alert } from "pala-ui-core";
+
+function MyPage() {
+  return (
+    <div>
+      <Alert type="success" message="Job posted successfully!" />
+      <ButtonPrimary onClick={() => {}} />
+    </div>
+  );
+}
+```
+
+## Button Variants
+
+| Component | Purpose |
+|-----------|---------|
+| `ButtonPrimary` | Main call-to-action |
+| `ButtonSecondary` | Alternative action |
+| `ButtonAccent` | High-emphasis CTA |
+| `ButtonSuccess` | Positive outcome |
+| `ButtonDestructive` | Irreversible action |
+| `ButtonWarning` | Non-blocking caution |
+| `ButtonOutline` | Secondary with border |
+| `ButtonGhost` | Minimal, no fill |
+| `ButtonLink` | Text-only link |
+| `ButtonWithIconLeft` | Primary + leading icon |
+| `ButtonWithIconRight` | Primary + trailing icon |
+| `ButtonBlock` | Full-width primary |
+| `ButtonSplit` | Primary + dropdown caret |
+| `ButtonIcon` | Icon-only square |
+| `ButtonLoading` | Disabled with spinner |
+| `ButtonSmall` / `ButtonLarge` | Size variants |
+| `ButtonGroup` | Segmented control |
+
+## Form Elements
+
+| Component | Purpose |
+|-----------|---------|
+| `InputField` | Text input |
+| `TextareaField` | Multi-line input |
+| `ToggleSwitch` | ON/OFF toggle |
+| `RadioGroup` | Single-select |
+| `CheckboxInput` | Multi-select |
+| `DropdownMenu` | Dropdown selection |
+| `FileUpload` | File picker trigger |
+| `DatePickerTrigger` | Date picker trigger |
+
+## Feedback Components
+
+| Component | Purpose |
+|-----------|---------|
+| `Alert` | Banner with type variant |
+| `ToastSuccess` | Success notification |
+| `SnackbarDefault` / `SnackbarAction` | Bottom snackbars |
+| `ModalDialog` | Confirmation/result modal |
+| `LoaderSpinner` / `LoaderDots` | Loading indicators |
+| `SkeletonBlock` | Content skeleton |
+
+## Navigation
+
+| Component | Purpose |
+|-----------|---------|
+| `SidebarNav` | Vertical sidebar |
+| `TabBar` | Horizontal tabs |
+| `Breadcrumbs` | Page hierarchy |
+| `Pagination` | Page navigation |
+| `NavItem` / `NavItemActive` | Individual nav items |
+
+## Data Display & Cards
+
+| Component | Purpose |
+|-----------|---------|
+| `StatCard` | Metric display |
+| `Avatar` | User avatar |
+| `ProgressBar` | Progress indicator |
+| `Badge/*` | Status badges |
+| `Tooltip/*` | Hover tooltips |
+| `Accordion` | Expandable sections |
+
+## Recruiting Components
+
+| Component | Purpose |
+|-----------|---------|
+| `CandidateCard` | Candidate profile card |
+| `JobCard` | Job listing card |
+| `SkillsChips` | Skill tags |
+| `Rating` | Star rating |
+| `AppTracker` | Application stages |
+| `InterviewCard` | Interview details |
+| `EmptyState` | Empty state placeholder |
+
+## Theming
+
+PalaUI uses CSS custom properties for all colors. Override any token at `:root`:
+
+```css
+:root {
+  --palaui-primary: #6C63FF;
+  --palaui-accent: #FF6B6B;
+}
+```
+
+For runtime theme switching (light/dark palettes), use the palette system:
+
+```tsx
+import { palettes, defaultPaletteId } from "pala-ui-core";
+
+// palettes contains 9 pre-built themes:
+// - Ocean, Sunset, Forest, Lavender, Coral, Slate (light)
+// - Midnight, Obsidian, Void (dark)
+
+const ocean = palettes.find(p => p.id === "ocean")!;
+// Apply tokens: iterate over ocean.tokens and set --palaui-* CSS vars
+```
+
+## License
+
+MIT