@versini/ui-toggle 4.0.4 → 4.0.6

package/README.md

@@ -1,3 +1,106 @@
 # @versini/ui-toggle
 
-A simple toggle component for React.
+[![npm version](https://img.shields.io/npm/v/@versini/ui-toggle?style=flat-square)](https://www.npmjs.com/package/@versini/ui-toggle)
+
+> An accessible and customizable React toggle switch component built with TypeScript and TailwindCSS.
+
+The Toggle component provides an intuitive switch interface for binary choices with comprehensive accessibility features and customizable styling options.
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [API](#api)
+
+## Features
+
+- **♿ Accessible**: WCAG compliant with proper ARIA attributes and keyboard navigation
+- **🎨 Customizable**: Multiple sizes, themes, and styling options
+- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
+- **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
+- **⌨️ Keyboard Friendly**: Full keyboard navigation support
+
+## Installation
+
+```bash
+npm install @versini/ui-toggle
+```
+
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
+
+## Usage
+
+### Basic Toggle
+
+```tsx
+import { Toggle } from "@versini/ui-toggle";
+
+function App() {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <Toggle
+      label="Enable notifications"
+      checked={enabled}
+      onChange={setEnabled}
+    />
+  );
+}
+```
+
+### Toggle with Description
+
+```tsx
+import { Toggle } from "@versini/ui-toggle";
+
+function App() {
+  return (
+    <Toggle
+      label="Dark mode"
+      labelHidden={false}
+      helperText="Switch between light and dark theme"
+      checked={darkMode}
+      onChange={setDarkMode}
+    />
+  );
+}
+```
+
+## Examples
+
+### Settings Panel
+
+```tsx
+import { Toggle } from "@versini/ui-toggle";
+
+function SettingsPanel() {
+  const [settings, setSettings] = useState({
+    notifications: true,
+    autoSave: false,
+    darkMode: true
+  });
+
+  return (
+    <div className="space-y-4">
+      <Toggle
+        label="Push notifications"
+        checked={settings.notifications}
+        onChange={(checked) =>
+          setSettings({ ...settings, notifications: checked })
+        }
+      />
+      <Toggle
+        label="Auto-save"
+        checked={settings.autoSave}
+        onChange={(checked) => setSettings({ ...settings, autoSave: checked })}
+      />
+      <Toggle
+        label="Dark mode"
+        checked={settings.darkMode}
+        onChange={(checked) => setSettings({ ...settings, darkMode: checked })}
+      />
+    </div>
+  );
+}
+```

package/dist/components/Toggle/Toggle.js

@@ -1,8 +1,8 @@
 import { jsxs as p, jsx as c } from "react/jsx-runtime";
-import t from "clsx";
-const b = "av-toggle", k = () => t("peer", "h-6", "w-11", "rounded-full"), h = ({
+import r from "clsx";
+const b = "av-toggle", k = () => r("peer", "h-6", "w-11", "rounded-full"), h = ({
   focusMode: e
-}) => t(
+}) => r(
   "peer-focus:outline",
   "peer-focus:outline-2",
   "peer-focus:outline-offset-2",
@@ -12,14 +12,14 @@ const b = "av-toggle", k = () => t("peer", "h-6", "w-11", "rounded-full"), h = (
     "peer-focus:outline-focus-light dark:peer-focus:outline-focus-dark": e === "alt-system",
     "peer-focus:outline-focus-dark dark:peer-focus:outline-focus-light": e === "system"
   }
-), m = () => t(
+), m = () => r(
   "peer-checked:after:translate-x-full",
   // background color when checked
   "peer-checked:bg-violet-500",
   // knob circle and border color when checked
   "peer-checked:after:bg-white",
   "peer-checked:after:border-white"
-), y = () => t(
+), y = () => r(
   "after:left-[2px]",
   "after:top-[2px]",
   "after:border",
@@ -33,36 +33,36 @@ const b = "av-toggle", k = () => t("peer", "h-6", "w-11", "rounded-full"), h = (
   "after:content-['']"
 ), x = ({
   mode: e,
-  noBorder: r
-}) => t({
-  border: !r,
+  noBorder: t
+}) => r({
+  border: !t,
   "border-border-dark bg-surface-medium": e === "light",
   "border-border-light bg-surface-darker": e === "dark",
   "border-border-light bg-surface-darker dark:border-border-dark dark:bg-surface-medium": e === "alt-system",
   "border-border-dark bg-surface-medium dark:border-border-light dark:bg-surface-darker": e === "system"
 }), C = ({
   mode: e,
-  labelHidden: r
-}) => r ? "sr-only" : t("ml-2 text-sm", {
+  labelHidden: t
+}) => t ? "sr-only" : r("ml-2 text-sm", {
   "text-copy-dark": e === "light",
   "text-copy-lighter": e === "dark",
   "text-copy-lighter dark:text-copy-dark": e === "alt-system",
   "text-copy-dark dark:text-copy-lighter": e === "system"
-}), T = ({ className: e }) => t(
+}), T = ({ className: e }) => r(
   b,
   "relative flex cursor-pointer items-center",
   e
 ), w = ({
   mode: e,
-  focusMode: r,
+  focusMode: t,
   labelHidden: a,
   className: l,
   noBorder: o
 }) => ({
-  toggle: t(
+  toggle: r(
     k(),
     x({ mode: e, noBorder: o }),
-    h({ focusMode: r }),
+    h({ focusMode: t }),
     y(),
     m()
   ),
@@ -71,23 +71,23 @@ const b = "av-toggle", k = () => t("peer", "h-6", "w-11", "rounded-full"), h = (
   wrapper: T({ className: l })
 }), K = ({
   checked: e = !1,
-  onChange: r,
+  onChange: t,
   label: a,
   labelHidden: l = !1,
   name: o,
-  mode: u = "system",
-  focusMode: g = "system",
-  className: f,
-  noBorder: d = !1
+  mode: g = "system",
+  focusMode: u = "system",
+  className: n,
+  noBorder: f = !1
 }) => {
   const s = w({
-    mode: u,
-    focusMode: g,
+    mode: g,
+    focusMode: u,
     labelHidden: l,
-    className: f,
-    noBorder: d
-  }), n = (i) => {
-    r == null || r(i.target.checked);
+    className: n,
+    noBorder: f
+  }), d = (i) => {
+    t?.(i.target.checked);
   };
   return /* @__PURE__ */ p("label", { className: s.wrapper, children: [
     /* @__PURE__ */ c(
@@ -97,7 +97,7 @@ const b = "av-toggle", k = () => t("peer", "h-6", "w-11", "rounded-full"), h = (
         checked: e,
         type: "checkbox",
         className: s.input,
-        onChange: n
+        onChange: d
       }
     ),
     /* @__PURE__ */ c("div", { className: s.toggle }),

package/dist/index.js

@@ -1,12 +1,12 @@
 import { TOGGLE_CLASSNAME as o, Toggle as r } from "./components/Toggle/Toggle.js";
 /*!
-  @versini/ui-toggle v4.0.4
+  @versini/ui-toggle v4.0.6
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TOGGLE__ || (window.__VERSINI_UI_TOGGLE__ = {
-    version: "4.0.4",
-    buildTime: "06/20/2025 05:21 PM EDT",
+    version: "4.0.6",
+    buildTime: "08/07/2025 04:11 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-toggle",
-	"version": "4.0.4",
+	"version": "4.0.6",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -27,6 +27,7 @@
 		"dev:types": "tsup --watch src",
 		"dev": "npm-run-all clean --parallel dev:js dev:types",
 		"lint": "biome lint src",
+		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
 		"start": "static-server dist --port 5173",
 		"test:coverage:ui": "vitest --coverage --ui",
@@ -39,15 +40,15 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "5.0.4"
+		"@versini/ui-types": "5.0.6"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.1.10"
+		"tailwindcss": "4.1.11"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "2fffae99315244f0662bdecbe45a89bc770f0f15"
+	"gitHead": "42daab1fb88c366495abbc1db78a9987de05e59b"
 }