signal-layers 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Aryan Batra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,261 @@
+# Signal Layers
+
+A minimalist, intent-driven UI system where components are laws, not presets. You copy the code. You own it. You change it. The system guides you instead of trapping you.
+
+Signal Layers exists because modern frontend UI has become over-configured, over-abstracted, and under-owned. This library fixes that through a revolutionary signal-based architecture where props are signals of intention, not configuration.
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+**Required Dependencies:**
+
+```bash
+react@>=16.8.0 
+react-dom@>=16.8.0
+tailwindcss@v4
+```
+
+### Installation & Setup
+
+#### Option 1: Copy All Components (Recommended)
+```bash
+npx signal-layers copy
+```
+This copies all components to `src/components/signals/` in your project.
+
+#### Option 2: Add Specific Components
+```bash
+npx signal-layers add button
+npx signal-layers add card
+npx signal-layers add dropdown
+```
+
+#### Option 3: List Available Components
+```bash
+npx signal-layers list
+```
+
+## 🧠 Architecture
+
+Signal Layers introduces a revolutionary four-signal architecture:
+
+### Signal Types
+
+1. **Input Signals** (`inputSignal`)
+   - Raw props passed to components
+   - User intention for styling
+   - Example: `primary`, `lg`, `onClick`, `disabled`
+
+2. **Layer Signals** (`layerSignal`)
+   - Mapped CSS classes and styling layers
+   - Visual presentation logic
+   - Example: Maps `primary` → `"bg-blue-500 text-white"`
+
+3. **Data Signals** (`dataSignal`)
+   - Processed and validated data
+   - Component state and computed values
+   - Example: Validated form values, computed dimensions
+
+4. **State Signals** (`stateSignal`)
+   - React hooks for interactivity
+   - Hover, focus, ripple states
+   - Example: `stateSignal.hover.get`, `stateSignal.ripples.set`
+
+### Signal Resolution Rules
+
+- **One signal per layer**: If multiple signals from the same layer are passed, the last one is applied
+- **Deterministic**: No magic, no warnings, predictable behavior
+- **Composable**: Signals can be combined freely
+- **Optional**: All signals are opt-in
+
+## 📦 Available Components
+
+| Component | Description |
+|-----------|-------------|
+| **Button** | Interactive button with ripple effects |
+| **Card** | Content container with layered styling |
+| **CheckBox** | Custom checkbox with animations |
+| **Dropdown** | Select dropdown with keyboard navigation |
+| **FabMenu** | Floating action button menu |
+| **ProgressBar** | Animated progress indicator |
+| **Slider** | Range slider with drag interaction |
+| **Spinner** | Loading spinner animations |
+| **Switch** | Toggle switch with smooth transitions |
+| **TextField** | Input field with validation states |
+
+## 🎯 Usage Examples
+
+### Basic Button
+```jsx
+import { Button } from './components/signals/Button.jsx';
+
+// Simple usage
+<Button onClick={() => console.log('clicked')}>Click me</Button>
+
+// With signals
+<Button primary lg hoverEnlarge>Primary Action</Button>
+
+// Multiple signals
+<Button ghost red sm hoverLift activeShrink>Ghost Button</Button>
+```
+
+### Interactive Components
+```jsx
+import { FabMenu } from './components/signals/FabMenu.jsx';
+
+<FabMenu 
+  icon="+"
+  actions={[
+    { icon: "📝", label: "New Document", onClick: () => {} },
+    { icon: "📁", label: "Open File", onClick: () => {} },
+    { icon: "💾", label: "Save", onClick: () => {} }
+  ]}
+/>
+```
+
+### Form Components
+```jsx
+import { TextField, CheckBox, Switch } from './components/signals';
+
+<TextField placeholder="Enter your name" lg />
+<CheckBox checked={isChecked} onChange={setIsChecked} />
+<Switch on={isEnabled} onChange={setIsEnabled} />
+```
+
+## 🎨 Signal System
+
+### Structural Signals (Identity)
+Define what the component is:
+
+**Tone/Style:** `primary`, `secondary`, `cta`, `ghost`, `neumorphism`
+**Color:** `red`, `green`, `blue`, `yellow`, `purple`
+**Size:** `xs`, `sm`, `md`, `lg`, `xl`
+**Shape:** `square`, `rounded`, `pill`, `circle`
+
+### Behavioral Signals (Interaction)
+Define how it behaves:
+
+**Hover:** `hoverEnlarge`, `hoverShrink`, `hoverLift`, `hoverFade`
+**Active:** `activeShrink`, `activeRipple`, `activeExplode`
+**Effects:** `ripple`, `innerShadow`, `noShadow`
+
+### Layout Signals
+**Display:** `block`, `inline`, `center`
+**Border:** `border`, `noBorder`, `roundedBorder`
+
+## 🔧 Advanced Usage
+
+### Custom Signal Mapping
+Each component contains a signal mapping section where you can customize how signals translate to CSS:
+
+```jsx
+// Inside Button.jsx
+const layer = (name, scope = "btn") => (className) =>
+  (layerSignal[scope] ||= {},
+  layerSignal[scope][name] ||= [],
+  (layerSignal[scope][name][0] = className));
+
+// Composite Signal
+  inputSignal.ghost && (
+btn.shape("rounded-full"),
+btn.shadow("shadow-none"),
+btn.color("bg-transparent text-gray-800"),
+btn.hover("hover:scale-110 hover:bg-gray-100/50 hover:text-gray-900"),
+btn.active("active:scale-95 active:bg-gray-100/75 active:text-gray-900"),
+btn.animation("transition-all duration-500 cursor-pointer")
+)
+
+// Individual Signals
+inputSignal.xs      && btn.size("px-2 py-1 text-xs"),
+inputSignal.sm      && btn.size("px-3 py-1.5 text-sm"),
+inputSignal.md      && btn.size("px-4 py-2 text-base"),
+inputSignal.lg      && btn.size("px-6 py-3 text-lg"),
+inputSignal.xl      && btn.size("px-8 py-4 text-xl")
+```
+
+### State Management
+Interactive components use state signals for React hooks:
+
+```jsx
+const state = (name, priority = 0, initial = false) => (
+  (stateSignal._hooks ||= {})[name] ||= (() => {
+    const [get, set] = useState(initial);
+    return { get, set };
+  })(),
+  priority && (!stateSignal._priority || priority > stateSignal._priority) &&
+    (stateSignal[name] = stateSignal._hooks[name], stateSignal._priority = priority)
+);
+```
+
+## 🛠️ Development
+
+### Component Structure
+Each component follows this structure:
+
+```jsx
+export function ComponentName(contract = {}) {
+  /* ────────────────────────────────────────────────────────────────────────────
+   * CONTRACT
+   * ──────────────────────────────────────────────────────────────────────────── */
+  const [inputSignal, layerSignal, dataSignal, stateSignal] = [{ ...contract }, {}, {}, {}];
+  
+  /* ────────────────────────────────────────────────────────────────────────────
+   * CONTRACT TOOLS
+   * ──────────────────────────────────────────────────────────────────────────── */
+  const layer = (name, scope = "root") => (className) => { /* ... */ };
+  const data = (name, key = name) => { /* ... */ };
+  const state = (name, priority = 0, initial = false) => { /* ... */ };
+  
+  /* ────────────────────────────────────────────────────────────────────────────
+   * LAYERS
+   * ──────────────────────────────────────────────────────────────────────────── */
+  // Signal mappings here
+  
+  /* ────────────────────────────────────────────────────────────────────────────
+   * RENDER
+   * ──────────────────────────────────────────────────────────────────────────── */
+  return (
+    // JSX with className={classes(layerSignal.root)}
+  );
+}
+```
+
+## 📚 Philosophy
+
+### Ownership Over Abstraction
+- **Copy, don't import**: Components are copied into your project
+- **No vendor lock-in**: You own the code completely
+- **No hidden logic**: Everything is visible and editable
+- **The file is the product**: Components are self-contained documentation
+
+### Intention Over Configuration
+- **No variant enums**: Use `primary`, not `variant="primary"`
+- **No size schemas**: Use `lg`, not `size="large"`
+- **Signals express intent**: Props describe what you want, not how to configure it
+- **Composable API**: Mix and match signals freely
+
+### HTML Already Has State
+- **Respect browser behavior**: Use `:hover`, `:focus`, `:active`
+- **Semantic HTML**: Proper elements and accessibility
+- **Keyboard navigation**: Built-in browser support
+- **No re-modeling**: Don't fight the platform
+
+## 🤝 Contributing
+
+Signal Layers follows the "copy and edit" philosophy. To contribute:
+
+1. **Copy components** to your project
+2. **Make changes** as needed
+3. **Share improvements** with the community
+4. **No PRs required** - this is a copy-first system
+
+## 📄 License
+
+MIT License - feel free to use, modify, and distribute.
+
+## 🔗 Links
+
+- **GitHub**: https://github.com/aryanbatras/minimalist-ui
+- **Issues**: https://github.com/aryanbatras/minimalist-ui/issues
+- **NPM**: https://www.npmjs.com/package/signal-layers

package/bin/signal-layers.js

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+
+import { existsSync, copyFileSync, mkdirSync, readdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const componentsDir = join(__dirname, '../src');
+const targetDir = join(process.cwd(), 'src/components/signals');
+
+function ensureDir(dir) {
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+}
+
+function addComponent(componentName) {
+  const sourceFile = join(componentsDir, `${componentName}.jsx`);
+  const targetFile = join(targetDir, `${componentName}.jsx`);
+
+  if (!existsSync(sourceFile)) {
+    console.error(`Component "${componentName}" not found in signal-layers`);
+    process.exit(1);
+  }
+
+  ensureDir(targetDir);
+
+  if (existsSync(targetFile)) {
+    console.log(`Component "${componentName}" already exists at ${targetFile}`);
+    console.log('Skipping to preserve your customizations');
+    return;
+  }
+
+  copyFileSync(sourceFile, targetFile);
+  console.log(`✓ Added ${componentName} to components/signals/${componentName}.jsx`);
+}
+
+function copyAll() {
+  try {
+    const components = readdirSync(componentsDir)
+      .filter(file => file.endsWith('.jsx'))
+      .map(file => file.replace('.jsx', ''));
+    
+    ensureDir(targetDir);
+    
+    components.forEach(componentName => {
+      const sourceFile = join(componentsDir, `${componentName}.jsx`);
+      const targetFile = join(targetDir, `${componentName}.jsx`);
+
+      if (!existsSync(targetFile)) {
+        copyFileSync(sourceFile, targetFile);
+        console.log(`✓ Added ${componentName} to components/signals/${componentName}.jsx`);
+      } else {
+        console.log(`- Skipped ${componentName} (already exists)`);
+      }
+    });
+    
+    console.log(`\nInstalled ${components.length} components to components/signals/`);
+  } catch (err) {
+    console.error('Could not install components:', err.message);
+  }
+}
+
+function listComponents() {
+  try {
+    const components = readdirSync(componentsDir)
+      .filter(file => file.endsWith('.jsx'))
+      .map(file => file.replace('.jsx', ''));
+    
+    console.log('Available components:');
+    components.forEach(comp => console.log(`  - ${comp}`));
+  } catch (err) {
+    console.error('Could not list components:', err.message);
+  }
+}
+
+function showHelp() {
+  console.log(`
+Usage:
+  signal-layers add <component>    Add a component to your project
+  signal-layers list               List available components
+  signal-layers copy               Copy all components
+  signal-layers help               Show this help
+
+Examples:
+  signal-layers add button
+  signal-layers copy
+  signal-layers list
+`);
+}
+
+const command = process.argv[2];
+const componentName = process.argv[3];
+
+switch (command) {
+  case 'add':
+    if (!componentName) {
+      console.error('Please specify a component name');
+      process.exit(1);
+    }
+    addComponent(componentName);
+    break;
+ 
+  case 'list':
+    listComponents();
+    break;
+
+  case 'copy':
+    copyAll();
+    break;
+ 
+
+  case 'help':
+  case '--help':
+  case '-h':
+    showHelp();
+    break;
+  
+  default:
+    console.error('Unknown command. Use "signal-layers help" for usage.');
+    showHelp();
+    process.exit(1);
+}

package/index.js

@@ -0,0 +1,10 @@
+export { Button } from "./src/Button.jsx";
+export { Card } from "./src/Card.jsx";
+export { Spinner } from "./src/Spinner.jsx";
+export { ProgressBar } from "./src/ProgressBar.jsx";
+export { Dropdown } from "./src/Dropdown.jsx";
+export { FabMenu } from "./src/FabMenu.jsx";
+export { Slider } from "./src/Slider.jsx";
+export { TextField } from "./src/TextField.jsx";
+export { CheckBox } from "./src/CheckBox.jsx";
+export { Switch } from "./src/Switch.jsx";

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "signal-layers",
+  "version": "0.0.5",
+  "description": "A minimalist, framework-agnostic component library where components respond to signals of intention, not rigid variants or configuration APIs",
+  "type": "module",
+  "main": "./index.js",
+  "bin": {
+    "signal-layers": "./bin/signal-layers.js"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./*": "./*"
+  },
+  "scripts": {},
+  "files": [
+    "index.js",
+    "src",
+    "bin",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "minimalist",
+    "signals",
+    "signal",
+    "intention",
+    "framework-agnostic"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "author": "Aryan Batra",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aryanbatras/minimalist-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/aryanbatras/minimalist-ui/issues"
+  },
+  "homepage": "https://github.com/aryanbatras/minimalist-ui#readme"
+}