npm - @electroplix/components - Versions diffs - 0.2.0 → 0.2.2 - Mend

@electroplix/components 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +59 -132
package/cli.cjs +335 -61
package/dist/README.md +14 -89
package/dist/index.esm.js +21 -2
package/dist/src/core/provider.d.ts.map +1 -1
package/dist/src/core/types.d.ts +1 -1
package/dist/src/core/types.d.ts.map +1 -1
package/package.json +10 -1

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # @electroplix/components
-> Parametric, config-driven React UI components. **~154 components** across **18 categories** — zero external CSS, zero icon dependencies, fully themeable via a single provider.
+> Parametric, config-driven React UI components. **153 components** across **18 categories** — zero external CSS, zero icon dependencies, fully themeable via a single provider.
 [![npm](https://img.shields.io/npm/v/@electroplix/components)](https://www.npmjs.com/package/@electroplix/components)
@@ -36,27 +36,42 @@ yarn add @electroplix/components
 ## Quick Start
-### 1. Wrap your app with the provider
+### 1. Scaffold your project
+```bash
+npx @electroplix/components init
+```
+This creates two files:
+- **`electroplix.config.ts`** — your global theme configuration
+- **`components/providers.tsx`** — a `"use client"` wrapper for the provider
+### 2. Update your layout
+Your root layout stays as a **Server Component** — import the client-side `Providers` wrapper:
 ```tsx
-// app/layout.tsx (Next.js App Router)
-import { ElectroplixProvider } from "@electroplix/components";
-import config from "./electroplix.config";
+// app/layout.tsx — Server Component (no "use client" needed here)
+import { Providers } from "../components/providers";
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <body>
-        <ElectroplixProvider config={config}>
-          {children}
-        </ElectroplixProvider>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );
 }
 ```
-### 2. Use components anywhere
+> **Why a separate `providers.tsx`?**
+> `ElectroplixProvider` uses React Context (`createContext`), which only works in Client Components.
+> By isolating it in a `"use client"` file, your layout stays a Server Component so metadata,
+> static content, and other server-only features continue to work.
+### 3. Use components in client pages
 ```tsx
 "use client";
@@ -64,8 +79,6 @@ import {
   PrimaryNav,
   StaticHero,
   PrimaryButton,
-  ContactForm,
-  BlogCard,
 } from "@electroplix/components";
 export default function HomePage() {
@@ -83,36 +96,34 @@ export default function HomePage() {
 ## Configuration
-Create an `electroplix.config.ts` file using the server-safe `./config` entry:
+The `electroplix.config.ts` file uses the server-safe `./config` entry point (no React, no `"use client"`):
 ```ts
 // electroplix.config.ts
 import { defineConfig } from "@electroplix/components/config";
-export default defineConfig({
-  navigation: {
-    bgColor: "#1a1a2e",
-    accentColor: "#e94560",
-    sticky: true,
-    height: 64,
-  },
-  buttons: {
-    bgColor: "#e94560",
-    textColor: "#ffffff",
-    radius: 12,
-  },
-  hero: {
-    bgColor: "#16213e",
-    minH: 600,
-  },
-  forms: {
-    inputBg: "rgba(255,255,255,0.05)",
-    radius: 8,
-  },
-  // ... configure any of the 18 categories
+const config = defineConfig({
+  // ── Global overrides (applied to ALL categories) ──────────
+  accentColor: "#7C3AED",
+  textColor: "#E5E7EB",
+  bgColor: "#0b0b0c",
+  borderColor: "rgba(255,255,255,0.14)",
+  radius: 14,
+  fontFamily: "Inter, system-ui, sans-serif",
+  // ── Per-category overrides ────────────────────────────────
+  navigation: { sticky: true, height: 64 },
+  hero:       { minH: 600 },
+  buttons:    { bgColor: "#e94560", radius: 12 },
+  forms:      { inputBg: "rgba(255,255,255,0.05)" },
+  ecommerce:  { accentColor: "#10B981" },
 });
+export default config;
 ```
+**How merging works:** Global `BaseTheme` props (like `accentColor`, `bgColor`) are spread into every category as a baseline. Per-category overrides take priority. Built-in defaults fill any gaps.
 ### Available config keys
 | Key | Theme Type | Category |
@@ -136,7 +147,7 @@ export default defineConfig({
 | `social` | `SocialTheme` | Social sharing, login |
 | `userAccounts` | `UserAccountsTheme` | Auth forms, profile |
-Every theme extends `BaseTheme` which provides: `bgColor`, `textColor`, `accentColor`, `borderColor`, `fontFamily`, `radius`, `spacing`, `headingSize`, `bodySize`, `fontWeight`, `lineHeight`, `letterSpacing`, `shadow`.
+**Global BaseTheme props** (set at root level): `bgColor`, `textColor`, `accentColor`, `borderColor`, `fontFamily`, `radius`, `spacing`, `headingSize`, `bodySize`, `fontWeight`, `lineHeight`, `letterSpacing`, `shadow`.
 ---
@@ -185,17 +196,6 @@ Every theme extends `BaseTheme` which provides: `bgColor`, `textColor`, `accentC
 | `SplitHero` | `title`, `image`, `features`, `reverse` | Side-by-side hero |
 | `VideoHeaderHero` | `videoSrc`, `poster`, `title` | Full-width video hero |
-```tsx
-<StaticHero
-  title="Build Incredible Products"
-  subtitle="Ship faster with pre-built components."
-  ctaLabel="Get Started Free"
-  onCta={() => router.push("/signup")}
-  titleSize={48}
-  align="center"
-/>
-```
 ### Buttons (10)
 | Component | Key Props | Description |
@@ -211,25 +211,6 @@ Every theme extends `BaseTheme` which provides: `bgColor`, `textColor`, `accentC
 | `DownloadButton` | `fileUrl`, `label` | File download button |
 | `PrintButton` | `label` | Print page button |
-```tsx
-<PrimaryButton
-  label="Add to Cart"
-  icon="shopping-cart"
-  onClick={handleAddToCart}
-  bgColor="#7C3AED"
-  radius={12}
-/>
-<ButtonGroup
-  buttons={[
-    { label: "Monthly", value: "monthly" },
-    { label: "Yearly", value: "yearly" },
-  ]}
-  toggle
-  onChange={(v) => setBilling(v)}
-/>
-```
 ### Forms (14)
 | Component | Key Props | Description |
@@ -249,27 +230,6 @@ Every theme extends `BaseTheme` which provides: `bgColor`, `textColor`, `accentC
 | `AddressAutocomplete` | `suggestions`, `onQuery`, `onSelect` | Address autocomplete |
 | `ValidationWrapper` | `errors`, `children`, `success` | Error/success message wrapper |
-```tsx
-<InputField
-  label="Email"
-  name="email"
-  type="email"
-  value={email}
-  onChange={(e) => setEmail(e.target.value)}
-  error={errors.email}
-  icon="mail"
-/>
-<MultiStepWizard
-  steps={[
-    { label: "Personal", content: <PersonalStep /> },
-    { label: "Payment", content: <PaymentStep /> },
-    { label: "Confirm", content: <ConfirmStep /> },
-  ]}
-  onFinish={handleSubmit}
-/>
-```
 ### Content (6)
 | Component | Key Props | Description |
@@ -297,26 +257,6 @@ Every theme extends `BaseTheme` which provides: `bgColor`, `textColor`, `accentC
 | `CalendarGrid` | `year`, `month`, `marks`, `onDateClick` | Month calendar grid |
 | `Timeline` | `items` | Vertical timeline |
-```tsx
-<BarChart
-  data={[120, 280, 150, 350, 210]}
-  labels={["Mon", "Tue", "Wed", "Thu", "Fri"]}
-  title="Weekly Sales"
-  showGrid
-/>
-<DataTable
-  columns={[
-    { key: "name", label: "Name" },
-    { key: "email", label: "Email" },
-    { key: "role", label: "Role" },
-  ]}
-  rows={users}
-  pageSize={10}
-  searchable
-/>
-```
 ### Ecommerce (10)
 | Component | Key Props | Description |
@@ -332,14 +272,6 @@ Every theme extends `BaseTheme` which provides: `bgColor`, `textColor`, `accentC
 | `WishlistButton` | `productId`, `wishlisted`, `onToggle` | Heart wishlist toggle |
 | `PaymentButtons` | `methods`, `onPay` | Payment method buttons |
-```tsx
-<ProductCard
-  product={{ id: "1", name: "T-Shirt", price: 29.99, image: "/tshirt.jpg" }}
-  currency="USD"
-  onAddToCart={(p) => addToCart(p)}
-/>
-```
 ### Lists & Cards (8)
 | Component | Key Props | Description |
@@ -484,7 +416,7 @@ Every theme extends `BaseTheme` which provides: `bgColor`, `textColor`, `accentC
 ## Icon System
-The package includes **113+ inline SVG icons** — zero external dependencies. Use the `Icon` component:
+The package includes **113+ inline SVG icons** — zero external dependencies:
 ```tsx
 import { Icon, ICON_NAMES } from "@electroplix/components";
@@ -500,19 +432,22 @@ All available icon names: `activity`, `alert-circle`, `alert-triangle`, `align-l
 ## CLI
-The package includes a CLI for scaffolding:
 ```bash
-# Initialize config file
-npx electroplix-components init
+# Scaffold config + providers
+npx @electroplix/components init
+# Show all components in a category
+npx @electroplix/components add navigation
-# Add a component category to your project
-npx electroplix-components add navigation
+# Show import instructions for a single component
+npx @electroplix/components add PrimaryNav
-# List all available components
-npx electroplix-components list
+# Browse all 153 components with tree view
+npx @electroplix/components list
 ```
+The `add` command accepts both **component names** (`PrimaryNav`, `BlogCard`) and **category names** (`navigation`, `data-display`, `social`).
 ---
 ## Utilities
@@ -549,12 +484,10 @@ Exported utility functions and hooks:
 </ElectroplixProvider>
 ```
-- **`config`** — `Partial<ElectroplixConfig> | undefined` — optional theme overrides for any/all categories. Falls back to `defaultConfig` for unset values.
+- **`config`** — `Partial<ElectroplixConfig> | undefined` — optional theme overrides. Supports both root-level `BaseTheme` props (global) and per-category objects.
 ### Category hooks
-Each component internally calls its category hook. You can also use them directly:
 ```tsx
 import { useButtonTheme, useNavTheme } from "@electroplix/components";
@@ -566,7 +499,7 @@ function MyCustomButton() {
 ### `defineConfig(config)`
-Type-safe config authoring helper. Returns the config as-is.
+Server-safe type-checked config helper. Import from `@electroplix/components/config`.
 ### `mergeTheme(target, ...sources)`
@@ -581,9 +514,3 @@ pnpm nx test @electroplix/components
 ```
 19 test suites, 163 tests covering all 18 categories.
----
-## License
-MIT

package/cli.cjs CHANGED Viewed

@@ -4,15 +4,79 @@
  * @electroplix/components CLI
  *
  * Usage:
- *   npx @electroplix/components init         – scaffold electroplix.config.ts
- *   npx @electroplix/components add <name>   – show install/import instructions
- *   npx @electroplix/components list         – list all available components
+ *   npx @electroplix/components init                – scaffold config + providers
+ *   npx @electroplix/components add <name|category> – show install/import instructions
+ *   npx @electroplix/components list                – list all available components
  */
 const fs = require("fs");
 const path = require("path");
-/* ── component registry ─────────────────────────────────── */
+/* ══════════════════════════════════════════════════════════════════ */
+/*  ANSI Styling                                                     */
+/* ══════════════════════════════════════════════════════════════════ */
+const ESC = "\x1b[";
+const R = `${ESC}0m`;
+const s = {
+  bold:       (t) => `${ESC}1m${t}${R}`,
+  dim:        (t) => `${ESC}2m${t}${R}`,
+  italic:     (t) => `${ESC}3m${t}${R}`,
+  purple:     (t) => `${ESC}38;2;139;92;246m${t}${R}`,
+  violet:     (t) => `${ESC}38;2;167;139;250m${t}${R}`,
+  cyan:       (t) => `${ESC}38;2;34;211;238m${t}${R}`,
+  green:      (t) => `${ESC}38;2;52;211;153m${t}${R}`,
+  yellow:     (t) => `${ESC}38;2;251;191;36m${t}${R}`,
+  red:        (t) => `${ESC}38;2;251;113;133m${t}${R}`,
+  white:      (t) => `${ESC}38;2;243;244;246m${t}${R}`,
+  gray:       (t) => `${ESC}38;2;107;114;128m${t}${R}`,
+};
+/* ══════════════════════════════════════════════════════════════════ */
+/*  Box-drawing helpers                                               */
+/* ══════════════════════════════════════════════════════════════════ */
+const B = {
+  tl: "\u256D", tr: "\u256E", bl: "\u2570", br: "\u256F",
+  h: "\u2500", v: "\u2502",
+  tee: "\u251C", end: "\u2570",
+  branch: "\u251C\u2500\u2500", last: "\u2570\u2500\u2500",
+  pipe: "\u2502  ",
+  dot: "\u25CF", arrow: "\u2192", check: "\u2713", star: "\u2605",
+  diamond: "\u25C6", spark: "\u26A1",
+};
+function hr(w) { return B.h.repeat(w); }
+function stripAnsi(t) { return t.replace(/\x1b\[[0-9;]*m/g, ""); }
+function boxLine(l, content, r, w) {
+  const vis = stripAnsi(content);
+  const pad = Math.max(0, w - vis.length - 2);
+  return `  ${l}${content}${" ".repeat(pad)}${r}`;
+}
+/* ══════════════════════════════════════════════════════════════════ */
+/*  Brand banner                                                      */
+/* ══════════════════════════════════════════════════════════════════ */
+function printBanner() {
+  const W = 58;
+  const lines = [
+    "",
+    `  ${B.tl}${hr(W)}${B.tr}`,
+    boxLine(B.v, `  ${s.bold(s.purple(`${B.spark} ELECTROPLIX`))}  ${s.dim(s.violet("COMPONENTS"))}`, B.v, W),
+    boxLine(B.v, `  ${s.gray("Parametric \u2022 Config-Driven \u2022 Zero-Dependency")}`, B.v, W),
+    `  ${B.bl}${hr(W)}${B.br}`,
+    "",
+  ];
+  console.log(lines.join("\n"));
+}
+/* ══════════════════════════════════════════════════════════════════ */
+/*  Component registry                                                */
+/* ══════════════════════════════════════════════════════════════════ */
 const CATEGORIES = {
   navigation: [
@@ -32,6 +96,7 @@ const CATEGORIES = {
     "FormShell", "InputField", "TextAreaField", "SelectDropdown", "RadioGroup",
     "ToggleSwitch", "DateTimePicker", "FileUploader", "ContactForm",
     "NewsletterSignup", "MultiStepWizard", "Captcha", "AddressAutocomplete",
+    "ValidationWrapper",
   ],
   content: [
     "BlockquoteTestimonial", "CalloutBox", "HeadingSection",
@@ -93,100 +158,315 @@ const CATEGORIES = {
   ],
 };
+/* build lookup maps */
 const ALL_COMPONENTS = new Map();
 for (const [cat, names] of Object.entries(CATEGORIES)) {
   for (const n of names) ALL_COMPONENTS.set(n.toLowerCase(), { name: n, category: cat });
 }
-/* ── colours ────────────────────────────────────────────── */
+const CATEGORY_ALIASES = new Map();
+for (const cat of Object.keys(CATEGORIES)) {
+  CATEGORY_ALIASES.set(cat.toLowerCase(), cat);
+  CATEGORY_ALIASES.set(cat.replace(/-/g, "").toLowerCase(), cat);
+  CATEGORY_ALIASES.set(cat.replace(/-/g, " ").toLowerCase(), cat);
+}
-const PURPLE = "\x1b[35m";
-const GREEN = "\x1b[32m";
-const CYAN = "\x1b[36m";
-const DIM = "\x1b[2m";
-const BOLD = "\x1b[1m";
-const RESET = "\x1b[0m";
+const totalCount = Object.values(CATEGORIES).reduce((sum, a) => sum + a.length, 0);
-/* ── commands ───────────────────────────────────────────── */
+/* ══════════════════════════════════════════════════════════════════ */
+/*  Package manager detection                                         */
+/* ══════════════════════════════════════════════════════════════════ */
+function detectPackageManager() {
+  const cwd = process.cwd();
+  // Check for lockfiles in order of preference
+  if (fs.existsSync(path.join(cwd, "bun.lock"))) {
+    return { manager: "bun", command: "bun install", displayName: "Bun" };
+  }
+  if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) {
+    return { manager: "pnpm", command: "pnpm install", displayName: "pnpm" };
+  }
+  if (fs.existsSync(path.join(cwd, "yarn.lock"))) {
+    return { manager: "yarn", command: "yarn install", displayName: "Yarn" };
+  }
+  if (fs.existsSync(path.join(cwd, "package-lock.json"))) {
+    return { manager: "npm", command: "npm install", displayName: "npm" };
+  }
+  // Default to npm if no lockfile found
+  return { manager: "npm", command: "npm install", displayName: "npm" };
+}
+/* ══════════════════════════════════════════════════════════════════ */
+/*  INIT command                                                      */
+/* ══════════════════════════════════════════════════════════════════ */
 function init() {
+  printBanner();
   const configName = "electroplix.config.ts";
-  const target = path.join(process.cwd(), configName);
+  const providerRel = path.join("components", "providers.tsx");
+  const configPath = path.join(process.cwd(), configName);
+  const providerDir = path.join(process.cwd(), "components");
+  const providerPath = path.join(providerDir, "providers.tsx");
-  if (fs.existsSync(target)) {
-    console.log(`${PURPLE}electroplix${RESET}  ${configName} already exists.`);
-    process.exit(0);
-  }
+  const created = [];
+  const skipped = [];
-  const template = `import { defineConfig } from "@electroplix/components/config";
+  /* ── config file ─────────────────────────────────────── */
+  if (fs.existsSync(configPath)) {
+    skipped.push(configName);
+  } else {
+    const configTemplate = `import { defineConfig } from "@electroplix/components";
-export default defineConfig({
-  // Global theme overrides
+const config = defineConfig({
+  // \u2500\u2500 Global overrides (applied to ALL categories) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   accentColor: "#7C3AED",
   textColor: "#E5E7EB",
   bgColor: "#0b0b0c",
   borderColor: "rgba(255,255,255,0.14)",
   radius: 14,
-  spacing: 14,
   fontFamily: "Inter, system-ui, sans-serif",
-  headingSize: 18,
-  bodySize: 14,
-  // Optional: configure per-category themes
-  // navigation: { accentColor: "#7C3AED" },
-  // hero: { overlayOpacity: 0.55 },
-  // ecommerce: { currency: "USD" },
+  // \u2500\u2500 Per-category overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // navigation: { sticky: true, height: 64 },
+  // hero:       { minH: 600 },
+  // buttons:    { bgColor: "#e94560", radius: 12 },
+  // forms:      { inputBg: "rgba(255,255,255,0.05)" },
+  // ecommerce:  { accentColor: "#10B981" },
 });
+export default config;
 `;
+    fs.writeFileSync(configPath, configTemplate, "utf-8");
+    created.push(configName);
+  }
+  /* ── providers wrapper ───────────────────────────────── */
+  if (fs.existsSync(providerPath)) {
+    skipped.push(providerRel);
+  } else {
+    if (!fs.existsSync(providerDir)) {
+      fs.mkdirSync(providerDir, { recursive: true });
+    }
+    const providerTemplate = `"use client";
+import { ElectroplixProvider } from "@electroplix/components";
+import config from "../electroplix.config";
+/**
+ * Client-side providers wrapper.
+ * Import this into your root layout (which stays as a Server Component).
+ */
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ElectroplixProvider config={config}>
+      {children}
+    </ElectroplixProvider>
+  );
+}
+`;
+    fs.writeFileSync(providerPath, providerTemplate, "utf-8");
+    created.push(providerRel);
+  }
+  /* ── output ──────────────────────────────────────────── */
+  if (created.length) {
+    console.log(`  ${s.green(B.check)} ${s.bold("Created:")}`);
+    for (const f of created) {
+      console.log(`    ${s.green(B.arrow)} ${s.cyan(f)}`);
+    }
+    console.log();
+  }
+  if (skipped.length) {
+    console.log(`  ${s.yellow("!")} ${s.bold("Already exists")} ${s.dim("(skipped):")}`);
+    for (const f of skipped) {
+      console.log(`    ${s.gray(B.arrow)} ${s.gray(f)}`);
+    }
+    console.log();
+  }
+  console.log(`  ${s.bold("Next steps:")}`);
+  console.log();
+  console.log(`  ${s.white("1.")} Update your ${s.cyan("app/layout.tsx")}:`);
+  console.log();
+  console.log(`     ${s.gray("import { Providers } from \"../components/providers\";")}`);
+  console.log();
+  console.log(`     ${s.gray("export default function RootLayout({ children }) {")}`);
+  console.log(`     ${s.gray("  return (")}`);
+  console.log(`     ${s.gray("    <html><body>")}`);
+  console.log(`     ${s.gray("      ")}${s.cyan("<Providers>")}${s.gray("{children}")}${s.cyan("</Providers>")}`);
+  console.log(`     ${s.gray("    </body></html>")}`);
+  console.log(`     ${s.gray("  );")}`);
+  console.log(`     ${s.gray("}")}`);
+  console.log();
+  console.log(`  ${s.white("2.")} Import components in ${s.cyan("\"use client\"")} pages:`);
+  console.log();
+  console.log(`     ${s.gray("import { PrimaryNav, StaticHero } from \"@electroplix/components\";")}`);
+  console.log();
+  console.log();
-  fs.writeFileSync(target, template, "utf-8");
-  console.log(`\n${PURPLE}electroplix${RESET}  Created ${GREEN}${configName}${RESET}\n`);
-  console.log(`${DIM}Wrap your app with <ElectroplixProvider config={config}> to apply.${RESET}\n`);
+  /* ── install package ── */
+  const { execSync } = require("child_process");
+  const pmInfo = detectPackageManager();
+  console.log(`  ${s.white("3.")} Installing ${s.cyan("@electroplix/components")} with ${s.cyan(pmInfo.displayName)}...`);
+  console.log();
+  try {
+    execSync(`${pmInfo.command} @electroplix/components`, { stdio: "inherit" });
+    console.log();
+    console.log(`  ${s.green(B.check)} ${s.bold("Setup complete!")} You're ready to use Electroplix components.`);
+    console.log();
+  } catch (err) {
+    console.log();
+    console.log(`  ${s.yellow("!")} ${s.bold("Manual install required:")}`);
+    console.log(`     ${s.cyan(`${pmInfo.command} @electroplix/components`)}`);
+    console.log();
+  }
 }
+/* ══════════════════════════════════════════════════════════════════ */
+/*  ADD command                                                       */
+/* ══════════════════════════════════════════════════════════════════ */
 function add(name) {
+  printBanner();
   if (!name) {
-    console.log(`\n${PURPLE}electroplix${RESET}  Usage: ${CYAN}npx @electroplix/components add <ComponentName>${RESET}\n`);
+    console.log(`  ${s.red("\u2717")} ${s.bold("Missing argument")}\n`);
+    console.log(`  ${s.white("Usage:")}`);
+    console.log(`    ${s.cyan("npx @electroplix/components add")} ${s.violet("<ComponentName>")}`);
+    console.log(`    ${s.cyan("npx @electroplix/components add")} ${s.violet("<category>")}`);
+    console.log();
+    console.log(`  ${s.dim("Examples:")}`);
+    console.log(`    ${s.gray("npx @electroplix/components add PrimaryNav")}`);
+    console.log(`    ${s.gray("npx @electroplix/components add navigation")}`);
+    console.log();
     process.exit(1);
   }
-  const entry = ALL_COMPONENTS.get(name.toLowerCase());
+  const key = name.toLowerCase().replace(/\s+/g, "-");
+  /* ── try category match first ──────────────────────── */
+  const catMatch = CATEGORY_ALIASES.get(key);
+  if (catMatch) {
+    const comps = CATEGORIES[catMatch];
+    console.log(`  ${s.purple(B.star)} ${s.bold(catMatch)} ${s.dim(`\u2014 ${comps.length} components`)}`);
+    console.log();
+    console.log(`  ${s.white("Import all:")}`);
+    console.log();
+    console.log(`  ${s.cyan("import {")}`);
+    for (let i = 0; i < comps.length; i++) {
+      const comma = i < comps.length - 1 ? "," : "";
+      console.log(`  ${s.cyan("  " + comps[i] + comma)}`);
+    }
+    console.log(`  ${s.cyan("} from \"@electroplix/components\";")}`);
+    console.log();
+    /* tree display */
+    console.log(`  ${s.bold("Components:")}`);
+    console.log();
+    for (let i = 0; i < comps.length; i++) {
+      const isLast = i === comps.length - 1;
+      const prefix = isLast ? B.last : B.branch;
+      console.log(`    ${s.gray(prefix)} ${s.violet(comps[i])}`);
+    }
+    console.log();
+    return;
+  }
+  /* ── try individual component match ────────────────── */
+  const entry = ALL_COMPONENTS.get(key);
   if (!entry) {
-    console.log(`\n${PURPLE}electroplix${RESET}  Component "${name}" not found.\n`);
-    console.log(`Run ${CYAN}npx @electroplix/components list${RESET} to see all available components.\n`);
+    console.log(`  ${s.red("\u2717")} Component or category ${s.bold("\"" + name + "\"")} not found.\n`);
+    console.log(`  ${s.dim("Run")} ${s.cyan("npx @electroplix/components list")} ${s.dim("to see all options.")}\n`);
     process.exit(1);
   }
-  console.log(`
-${PURPLE}electroplix${RESET}  ${BOLD}${entry.name}${RESET}  ${DIM}(${entry.category})${RESET}
+  const W = 52;
+  console.log(`  ${B.tl}${hr(W)}${B.tr}`);
+  console.log(boxLine(B.v, `  ${s.bold(s.purple(entry.name))}  ${s.dim("from " + s.violet(entry.category))}`, B.v, W));
+  console.log(`  ${B.bl}${hr(W)}${B.br}`);
+  console.log();
+  console.log(`  ${s.green("1.")} ${s.white("Install")} ${s.dim("(if not already):")}`);
+  console.log(`     ${s.cyan("npm install @electroplix/components")}`);
+  console.log();
+  console.log(`  ${s.green("2.")} ${s.white("Import:")}`);
+  console.log(`     ${s.cyan("import { " + entry.name + " } from \"@electroplix/components\";")}`);
+  console.log();
+  console.log(`  ${s.green("3.")} ${s.white("Use in JSX:")}`);
+  console.log(`     ${s.cyan("<" + entry.name + " />")}`);
+  console.log();
+  console.log(`  ${s.dim("All components are config-driven. Wrap your app with")}`);
+  console.log(`  ${s.dim("<Providers> (from")} ${s.cyan("npx @electroplix/components init")}${s.dim(") to theme globally.")}`);
+  console.log();
+}
-${GREEN}1.${RESET} Make sure @electroplix/components is installed:
+/* ══════════════════════════════════════════════════════════════════ */
+/*  LIST command                                                      */
+/* ══════════════════════════════════════════════════════════════════ */
-   ${CYAN}npm install @electroplix/components${RESET}
+function list() {
+  printBanner();
-${GREEN}2.${RESET} Import the component:
+  console.log(`  ${s.bold(s.white(totalCount + " components"))} ${s.dim("across")} ${s.bold(s.white(Object.keys(CATEGORIES).length + " categories"))}`);
+  console.log(`  ${s.gray(hr(54))}`);
+  console.log();
-   ${CYAN}import { ${entry.name} } from "@electroplix/components";${RESET}
+  const catEntries = Object.entries(CATEGORIES);
-${GREEN}3.${RESET} Use it in your JSX:
+  for (let ci = 0; ci < catEntries.length; ci++) {
+    const [cat, names] = catEntries[ci];
+    const isLastCat = ci === catEntries.length - 1;
+    const catPrefix = isLastCat ? B.end : B.tee;
+    const childPipe = isLastCat ? "   " : B.pipe;
-   ${CYAN}<${entry.name} />${RESET}
+    console.log(`  ${s.gray(catPrefix)} ${s.bold(s.purple(cat))} ${s.dim("(" + names.length + ")")}`);
-${DIM}All components are config-driven. Wrap your app with
-<ElectroplixProvider> to customize themes globally.${RESET}
-`);
-}
+    for (let ni = 0; ni < names.length; ni++) {
+      const isLastName = ni === names.length - 1;
+      const namePrefix = isLastName ? B.last : B.branch;
+      console.log(`  ${s.gray(childPipe)} ${s.gray(namePrefix)} ${s.cyan(names[ni])}`);
+    }
-function list() {
-  console.log(`\n${PURPLE}@electroplix/components${RESET}  –  ${BOLD}${ALL_COMPONENTS.size} components${RESET}\n`);
-  for (const [cat, names] of Object.entries(CATEGORIES)) {
-    console.log(`  ${BOLD}${cat}${RESET} ${DIM}(${names.length})${RESET}`);
-    console.log(`    ${names.map((n) => `${CYAN}${n}${RESET}`).join(", ")}`);
-    console.log();
+    if (!isLastCat) console.log(`  ${s.gray(B.pipe)}`);
   }
+  console.log();
+  console.log(`  ${s.dim("Add a component:")}  ${s.cyan("npx @electroplix/components add <name>")}`);
+  console.log(`  ${s.dim("Add a category:")}   ${s.cyan("npx @electroplix/components add <category>")}`);
+  console.log(`  ${s.dim("Scaffold project:")} ${s.cyan("npx @electroplix/components init")}`);
+  console.log();
+}
+/* ══════════════════════════════════════════════════════════════════ */
+/*  HELP / default                                                    */
+/* ══════════════════════════════════════════════════════════════════ */
+function help() {
+  printBanner();
+  console.log(`  ${s.bold("Commands:")}`);
+  console.log();
+  console.log(`    ${s.cyan("init")}              ${s.white("Scaffold config + providers for your project")}`);
+  console.log(`    ${s.cyan("add")} ${s.violet("<name>")}        ${s.white("Show import instructions for a component")}`);
+  console.log(`    ${s.cyan("add")} ${s.violet("<category>")}    ${s.white("Show all components in a category")}`);
+  console.log(`    ${s.cyan("list")}              ${s.white("Browse all")} ${s.bold(totalCount + "")} ${s.white("components")}`);
+  console.log();
+  console.log(`  ${s.bold("Examples:")}`);
+  console.log();
+  console.log(`    ${s.gray("$")} ${s.white("npx @electroplix/components init")}`);
+  console.log(`    ${s.gray("$")} ${s.white("npx @electroplix/components add PrimaryNav")}`);
+  console.log(`    ${s.gray("$")} ${s.white("npx @electroplix/components add navigation")}`);
+  console.log(`    ${s.gray("$")} ${s.white("npx @electroplix/components list")}`);
+  console.log();
 }
-/* ── main ───────────────────────────────────────────────── */
+/* ══════════════════════════════════════════════════════════════════ */
+/*  Main                                                              */
+/* ══════════════════════════════════════════════════════════════════ */
 const [, , cmd, ...args] = process.argv;
@@ -195,17 +475,11 @@ switch (cmd) {
     init();
     break;
   case "add":
-    add(args[0]);
+    add(args.join(" "));
     break;
   case "list":
     list();
     break;
   default:
-    console.log(`
-${PURPLE}@electroplix/components${RESET} CLI
-  ${CYAN}init${RESET}           Scaffold electroplix.config.ts
-  ${CYAN}add <name>${RESET}     Show import instructions for a component
-  ${CYAN}list${RESET}           List all ${ALL_COMPONENTS.size} available components
-`);
+    help();
 }

package/dist/README.md CHANGED Viewed

@@ -1,110 +1,35 @@
 # @electroplix/components
-Parametric, config-driven React UI components.
+Parametric, config-driven React UI components — 153 components across 18 categories.
-## Install
-```bash
-npm install @electroplix/components
-# or
-pnpm add @electroplix/components
-```
-> **Peer dependencies:** `react >=18` and `react-dom >=18`.
+See the full documentation in the [root README](../README.md).
 ## Quick start
-```tsx
-import { Navbar } from "@electroplix/components";
-export default function Page() {
-  return (
-    <Navbar
-      logoText="MyBrand"
-      links={[
-        { label: "Home", href: "/" },
-        { label: "Docs", href: "/docs" },
-      ]}
-      ctaText="Sign Up"
-    />
-  );
-}
+```bash
+npm install @electroplix/components
+npx @electroplix/components init
 ```
-## Global configuration
-Create a config file and wrap your app with `ElectroplixProvider` to set
-style defaults for **every** component instance:
-```ts
-// electroplix.config.ts
-import { defineConfig } from "@electroplix/components";
-export default defineConfig({
-  navbar: {
-    bgColor: "#22223B",
-    textColor: "#F2E9E4",
-    accentColor: "#C9ADA7",
-    borderColor: "#4A4E69",
-    fontFamily: "Roboto, sans-serif",
-    height: 80,
-    padding: 32,
-    sticky: true,
-    showSearch: true,
-    showCTA: true,
-  },
-});
-```
+Then update `app/layout.tsx`:
 ```tsx
-// app/layout.tsx  (Next.js App Router example)
-import { ElectroplixProvider } from "@electroplix/components";
-import config from "../electroplix.config";
+import { Providers } from "../components/providers";
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html>
       <body>
-        <ElectroplixProvider config={config}>
-          {children}
-        </ElectroplixProvider>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );
 }
 ```
-Components will merge configuration in priority order:
-1. **Per-instance** `config` prop (highest)
-2. **Global** `ElectroplixProvider` config
-3. **Built-in** defaults
-## API reference
+Use components in `"use client"` pages:
-### `<Navbar>`
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `logoText` | `string` | `"Electroplix"` | Brand text |
-| `logoHref` | `string` | `"/"` | Logo link target |
-| `links` | `NavLink[]` | `[]` | Navigation links |
-| `ctaText` | `string` | `"Get Started"` | CTA button label |
-| `ctaHref` | `string` | `"#"` | CTA button href |
-| `searchPlaceholder` | `string` | `"Search…"` | Search input placeholder |
-| `onSearch` | `(q: string) => void` | — | Search callback |
-| `config` | `NavbarConfig` | — | Per-instance style overrides |
-### `NavbarConfig` (global or per-instance)
-| Key | Type | Default |
-|-----|------|---------|
-| `bgColor` | `string` | `"#0B0B0C"` |
-| `textColor` | `string` | `"#F3F4F6"` |
-| `accentColor` | `string` | `"#8B5CF6"` |
-| `borderColor` | `string` | `"rgba(255,255,255,0.1)"` |
-| `fontFamily` | `string` | `"Inter, ui-sans-serif, system-ui"` |
-| `height` | `number` | `72` |
-| `padding` | `number` | `24` |
-| `sticky` | `boolean` | `false` |
-| `showSearch` | `boolean` | `false` |
-| `showCTA` | `boolean` | `false` |
+```tsx
+"use client";
+import { PrimaryNav, StaticHero } from "@electroplix/components";
+```

package/dist/index.esm.js CHANGED Viewed

@@ -234,6 +234,12 @@ function mergeTheme(target, ...sources) {
 const Ctx = /*#__PURE__*/createContext(defaultConfig);
+/** Keys that belong to BaseTheme (global overrides), not categories */
+const BASE_KEYS = new Set(["bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "radius", "spacing", "headingSize", "bodySize", "fontWeight", "lineHeight", "letterSpacing", "shadow"]);
+/** Keys that map to per-category theme objects */
+const CATEGORY_KEYS = new Set(["blog", "buttons", "content", "dataDisplay", "ecommerce", "forms", "hero", "listsCards", "marketing", "media", "miscellaneous", "modals", "navigation", "onboarding", "search", "siteIdentity", "social", "userAccounts"]);
 /**
  * Wrap your app (or any subtree) to override default theme tokens.
  *
@@ -253,9 +259,22 @@ function ElectroplixProvider({
 }) {
   const merged = useMemo(() => {
     if (!config) return defaultConfig;
+    // Extract root-level BaseTheme overrides (accentColor, bgColor, etc.)
+    const globalBase = {};
+    for (const key of Object.keys(config)) {
+      if (BASE_KEYS.has(key)) {
+        globalBase[key] = config[key];
+      }
+    }
+    // Merge each category: default → global base → per-category overrides
     const out = {};
-    for (const key of Object.keys(defaultConfig)) {
-      out[key] = mergeTheme(defaultConfig[key], config[key]);
+    for (const key of CATEGORY_KEYS) {
+      const catKey = key;
+      const defaultVal = defaultConfig[catKey];
+      const categoryOverrides = config[catKey];
+      out[key] = mergeTheme(defaultVal != null ? defaultVal : {}, globalBase, categoryOverrides);
     }
     return out;
   }, [config]);

package/dist/src/core/provider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/core/provider.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,iBAAiB,~~EAAE~~,MAAM,SAAS,CAAC;~~AAKjD~~;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,~~2CAcA~~;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,iBAAiB,CAExD;AAED;;GAEG;AACH,wBAAgB,WAAW,kDAAgD;AAC3E,wBAAgB,YAAY,4CAA0C;AACtE,wBAAgB,cAAc,8CAA6C;AAC3E,wBAAgB,aAAa,6CAA2C;AACxE,wBAAgB,eAAe,+CAA6C;AAC5E,wBAAgB,mBAAmB,mDAAiD;AACpF,wBAAgB,iBAAiB,iDAA+C;AAChF,wBAAgB,kBAAkB,kDAAgD;AAClF,wBAAgB,iBAAiB,iDAA+C;AAChF,wBAAgB,aAAa,6CAA2C;AACxE,wBAAgB,YAAY,4CAAmD;AAC/E,wBAAgB,cAAc,8CAA4C;AAC1E,wBAAgB,kBAAkB,kDAAgD;AAClF,wBAAgB,cAAc,8CAA4C;AAC1E,wBAAgB,oBAAoB,oDAAkD;AACtF,wBAAgB,cAAc,8CAA4C;AAC1E,wBAAgB,oBAAoB,oDAAkD;AACtF,wBAAgB,YAAY,4CAA0C"}
1	+ {"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/core/provider.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAa,MAAM,SAAS,CAAC;AAmB5D;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CA4BA;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,iBAAiB,CAExD;AAED;;GAEG;AACH,wBAAgB,WAAW,kDAAgD;AAC3E,wBAAgB,YAAY,4CAA0C;AACtE,wBAAgB,cAAc,8CAA6C;AAC3E,wBAAgB,aAAa,6CAA2C;AACxE,wBAAgB,eAAe,+CAA6C;AAC5E,wBAAgB,mBAAmB,mDAAiD;AACpF,wBAAgB,iBAAiB,iDAA+C;AAChF,wBAAgB,kBAAkB,kDAAgD;AAClF,wBAAgB,iBAAiB,iDAA+C;AAChF,wBAAgB,aAAa,6CAA2C;AACxE,wBAAgB,YAAY,4CAAmD;AAC/E,wBAAgB,cAAc,8CAA4C;AAC1E,wBAAgB,kBAAkB,kDAAgD;AAClF,wBAAgB,cAAc,8CAA4C;AAC1E,wBAAgB,oBAAoB,oDAAkD;AACtF,wBAAgB,cAAc,8CAA4C;AAC1E,wBAAgB,oBAAoB,oDAAkD;AACtF,wBAAgB,YAAY,4CAA0C"}

package/dist/src/core/types.d.ts CHANGED Viewed

@@ -122,7 +122,7 @@ export interface ShellProps {
     className?: string;
     children?: ReactNode;
 }
-export interface ElectroplixConfig {
+export interface ElectroplixConfig extends Partial<BaseTheme> {
     blog?: BlogTheme;
     buttons?: ButtonTheme;
     content?: ContentTheme;

package/dist/src/core/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"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~~AAMD~~,MAAM,WAAW,~~iBAAiB~~;~~IAChC~~,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,YAAY,CAAC,EAAE,iBAAiB,CAAC;CAClC"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@electroplix/components",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Parametric, config-driven UI components by Electroplix. ~154 components across 18 categories — navigation, hero, buttons, forms, content, data display, ecommerce, lists/cards, marketing, media, miscellaneous, modals, onboarding, search, site-identity, social, user-accounts, and blog.",
   "type": "module",
   "sideEffects": false,
@@ -16,14 +16,23 @@
       "@electroplix-workspace/source": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.esm.js",
+      "require": "./dist/index.esm.js",
       "default": "./dist/index.esm.js"
     },
     "./config": {
       "types": "./dist/config.d.ts",
       "import": "./dist/config.esm.js",
+      "require": "./dist/config.esm.js",
       "default": "./dist/config.esm.js"
     }
   },
+  "typesVersions": {
+    "*": {
+      "config": [
+        "./dist/config.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
     "cli.cjs",