@aristobyte-ui/switch 2.5.0 → 2.6.0

package/README.md

@@ -0,0 +1,98 @@
+# `@aristobyte-ui/switch`
+
+<p align="center">
+  <img src="https://img.shields.io/badge/TypeScript-5.8-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Build-Turbo-green?style=for-the-badge&logo=turbo&logoColor=white" alt="TurboRepo" />
+  <img src="https://img.shields.io/badge/Lint-Strict-red?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" />
+  <img src="https://img.shields.io/badge/License-MIT-black?style=for-the-badge&logo=open-source-initiative&logoColor=white" alt="License" />
+  <img src="https://img.shields.io/badge/AristoByte-UI-purple?style=for-the-badge&logo=react&logoColor=white" alt="AristoByte UI" />
+  <img src="https://img.shields.io/badge/Node-20.17.0+-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js >=20.17.0" />
+  <img src="https://img.shields.io/badge/Yarn-1.22+-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" alt="Yarn >=1.22" />
+  <img src="https://img.shields.io/badge/NPM-10.8+-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM >=10.8" />
+</p>
+
+A highly flexible and type-safe Switch component for React with multiple sizes, variants, and label alignment options.
+
+## 📦 Installation
+
+```bash
+# Install via Yarn
+yarn add -D @aristobyte-ui/switch
+
+# Or via npm
+npm install -D @aristobyte-ui/switch
+
+# Or via pnpm
+pnpm add -D @aristobyte-ui/switch
+```
+
+## 🛠 Usage
+
+```tsx
+import { Switch } from "@aristobyte-ui/switch";
+
+export const Demo = () => (
+  <Switch
+    label="Enable notifications"
+    alignLabel="horizontal"
+    switchSize="md"
+    variant="primary"
+    checked={true}
+    onChange={() => console.log("Toggled!")}
+  />
+);
+```
+
+## 📂 Presets Available
+
+**alignLabel**: `"horizontal"` | `"vertical"` (default: `"vertical"`)
+
+**switchSize**: `"xsm"` | `"sm"` | `"md"` | `"lg"` | `"xlg"` (default: `"md"`)
+
+**variant**: `"default"` | `"primary"` | `"secondary"` | `"success"` | `"error"` | `"warning"` (default: `"default"`)
+
+**trackIcon** & **thumbIcon**: Optional React components for custom icons
+
+**disabled**: Boolean flag to disable switch
+
+## 🔧 Example in a Package
+
+```tsx
+<Switch
+  label="Dark Mode"
+  switchSize="lg"
+  variant="secondary"
+  trackIcon={{ checked: CheckIcon, unchecked: CloseIcon }}
+  thumbIcon={StarIcon}
+  checked={false}
+/>
+```
+
+## 📊 Why This Matters
+
+- **Performance-first:** Lightweight CSS transitions ensure smooth toggling with zero layout thrashing.
+- **Fully typed:** TypeScript-first API for predictable integration and IDE autocomplete.
+- **AristoByteUI ready:** Integrates seamlessly with design tokens and SCSS modules.
+- **Flexible:** Supports multiple sizes, label alignments, variants, and custom icons.
+
+## 🏆 Philosophy
+
+- **Modular architecture:** Switch component is fully composable.
+- **Declarative styling:** SCSS modules keep styles maintainable and scoped.
+- **Strict typing & runtime flexibility:** Props fully typed while allowing runtime overrides.
+- **Developer experience optimized:** Easy to use with predictable behavior and minimal boilerplate.
+
+## 📜 License
+
+[MIT](./LICENSE) © AristoByte
+
+## 🛡 Shields Showcase
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Consistency-100%25-green?style=for-the-badge&logo=typescript" />
+  <img src="https://img.shields.io/badge/Maintained-Active-brightgreen?style=for-the-badge&logo=github" />
+  <img src="https://img.shields.io/badge/Strictness-High-critical?style=for-the-badge&logo=eslint" />
+  <img src="https://img.shields.io/badge/Declarations-Enabled-blue?style=for-the-badge&logo=typescript" />
+  <img src="https://img.shields.io/badge/Monorepo-Turbo-green?style=for-the-badge&logo=monorepo" />
+  <img src="https://img.shields.io/badge/Interop-ESM%2FCJS-orange?style=for-the-badge&logo=javascript" />
+</p>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aristobyte-ui/switch",
   "description": "A fully typed, customizable Switch/toggle component for React with multiple sizes, variants, label alignments, and optional icons. Built to integrate seamlessly with AristoByteUI design tokens and SCSS modules.",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",
@@ -39,14 +39,15 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "lib/src/main/index.js",
-  "module": "es/src/main/index.js",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.97.3"
   },
   "dependencies": {
-    "@aristobyte-ui/utils": "2.5.0"
+    "@aristobyte-ui/utils": "^2.6.0"
   }
 }

package/es/src/main/components/Switch.js

@@ -1,54 +0,0 @@
-"use client";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-import * as React from "react";
-export var Switch = function (_a) {
-    var onChange = _a.onChange, label = _a.label, _b = _a.alignLabel, alignLabel = _b === void 0 ? "vertical" : _b, checked = _a.checked, _c = _a.switchSize, switchSize = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "default" : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, trackIcon = _a.trackIcon, thumbIcon = _a.thumbIcon, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
-    var id = React.useId();
-    var _h = __read(React.useState(!!checked), 2), isChecked = _h[0], setIsChecked = _h[1];
-    var handleChange = function () {
-        setIsChecked(function (prev) { return !prev; });
-        if (onChange)
-            onChange();
-    };
-    var baseClasses = [
-        "switch",
-        "switch-size-".concat(switchSize),
-        "switch-variant-".concat(variant),
-        "switch-align-label-".concat(alignLabel),
-        disabled && "switch--disabled",
-        className,
-    ]
-        .filter(Boolean)
-        .join(" ");
-    return (React.createElement("label", { htmlFor: id, className: baseClasses, style: style },
-        React.createElement("input", { id: id, type: "checkbox", disabled: disabled, checked: isChecked, onChange: handleChange }),
-        React.createElement("span", { className: "switch__track relative rounded-full overflow-hidden transition-colors duration-300 ease-in-out" },
-            (trackIcon === null || trackIcon === void 0 ? void 0 : trackIcon.checked) && (React.createElement("span", { className: "switch__track-icon switch__track-icon--checked absolute top-1/2 flex items-center justify-center transition-all duration-200 ease-out z-0" }, trackIcon.checked.component({
-                size: trackIcon.checked.size,
-                color: trackIcon.checked.color,
-            }))),
-            React.createElement("span", { className: "switch__thumb absolute top-1/2 left-0 bg-white rounded-full transform -translate-y-1/2 transition-all duration-200 ease-out flex items-center justify-center z-10" }, thumbIcon && (React.createElement("span", { className: "switch__thumb-icon flex items-center justify-center" }, thumbIcon.component({
-                size: thumbIcon.size,
-                color: thumbIcon.color,
-            })))),
-            (trackIcon === null || trackIcon === void 0 ? void 0 : trackIcon.unchecked) && (React.createElement("span", { className: "switch__track-icon switch__track-icon--unchecked absolute top-1/2 flex items-center justify-center transition-all duration-200 ease-out z-0" }, trackIcon.unchecked.component({
-                size: trackIcon.unchecked.size,
-                color: trackIcon.unchecked.color,
-            })))),
-        label && React.createElement("span", { className: "switch__label ml-2" }, label)));
-};

package/es/src/main/components/index.js

@@ -1 +0,0 @@
-export * from "./Switch";

package/es/src/main/index.js

@@ -1 +0,0 @@
-export * from './components';

package/lib/src/main/components/Switch.js

@@ -1,91 +0,0 @@
-"use strict";
-"use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = void 0;
-var React = __importStar(require("react"));
-var Switch = function (_a) {
-    var onChange = _a.onChange, label = _a.label, _b = _a.alignLabel, alignLabel = _b === void 0 ? "vertical" : _b, checked = _a.checked, _c = _a.switchSize, switchSize = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "default" : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, trackIcon = _a.trackIcon, thumbIcon = _a.thumbIcon, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
-    var id = React.useId();
-    var _h = __read(React.useState(!!checked), 2), isChecked = _h[0], setIsChecked = _h[1];
-    var handleChange = function () {
-        setIsChecked(function (prev) { return !prev; });
-        if (onChange)
-            onChange();
-    };
-    var baseClasses = [
-        "switch",
-        "switch-size-".concat(switchSize),
-        "switch-variant-".concat(variant),
-        "switch-align-label-".concat(alignLabel),
-        disabled && "switch--disabled",
-        className,
-    ]
-        .filter(Boolean)
-        .join(" ");
-    return (React.createElement("label", { htmlFor: id, className: baseClasses, style: style },
-        React.createElement("input", { id: id, type: "checkbox", disabled: disabled, checked: isChecked, onChange: handleChange }),
-        React.createElement("span", { className: "switch__track relative rounded-full overflow-hidden transition-colors duration-300 ease-in-out" },
-            (trackIcon === null || trackIcon === void 0 ? void 0 : trackIcon.checked) && (React.createElement("span", { className: "switch__track-icon switch__track-icon--checked absolute top-1/2 flex items-center justify-center transition-all duration-200 ease-out z-0" }, trackIcon.checked.component({
-                size: trackIcon.checked.size,
-                color: trackIcon.checked.color,
-            }))),
-            React.createElement("span", { className: "switch__thumb absolute top-1/2 left-0 bg-white rounded-full transform -translate-y-1/2 transition-all duration-200 ease-out flex items-center justify-center z-10" }, thumbIcon && (React.createElement("span", { className: "switch__thumb-icon flex items-center justify-center" }, thumbIcon.component({
-                size: thumbIcon.size,
-                color: thumbIcon.color,
-            })))),
-            (trackIcon === null || trackIcon === void 0 ? void 0 : trackIcon.unchecked) && (React.createElement("span", { className: "switch__track-icon switch__track-icon--unchecked absolute top-1/2 flex items-center justify-center transition-all duration-200 ease-out z-0" }, trackIcon.unchecked.component({
-                size: trackIcon.unchecked.size,
-                color: trackIcon.unchecked.color,
-            })))),
-        label && React.createElement("span", { className: "switch__label ml-2" }, label)));
-};
-exports.Switch = Switch;

package/lib/src/main/components/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Switch"), exports);

package/lib/src/main/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);