@versini/ui-toggle 4.0.11 → 4.1.1

package/dist/components/Toggle/Toggle.js

@@ -1,6 +1,15 @@
-import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { jsxs as b, jsx as n } from "react/jsx-runtime";
 import r from "clsx";
-const b = "av-toggle", h = () => r("peer", "h-6", "w-11", "rounded-full"), k = ({
+const h = "av-toggle", k = ({ narrow: e }) => r(
+  "peer",
+  "rounded-full",
+  {
+    "h-6 w-11": !e,
+    "h-5 w-12": e
+  },
+  // Smooth background/border transition when toggling
+  "transition-colors duration-300 ease-in-out motion-reduce:transition-none"
+), m = ({
   focusMode: e
 }) => r(
   "peer-focus:outline",
@@ -12,26 +21,33 @@ const b = "av-toggle", h = () => r("peer", "h-6", "w-11", "rounded-full"), k = (
     "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 = () => r(
-  "peer-checked:after:translate-x-full",
+), x = ({ narrow: e }) => r(
+  {
+    "peer-checked:after:translate-x-full": !e,
+    "peer-checked:after:translate-x-4": e
+  },
   // background color when checked
   "peer-checked:bg-action-light",
   // knob circle and border color when checked
   "peer-checked:after:bg-white",
   "peer-checked:after:border-white"
-), y = () => r(
+), y = ({ narrow: e }) => r(
   "after:left-[2px]",
   "after:top-[2px]",
   "after:border",
   "after:border-surface-light dark:after:border-surface-medium",
   "after:bg-surface-light dark:after:bg-surface-medium",
   "after:absolute",
-  "after:h-5",
-  "after:w-5",
+  "after:transition-all after:duration-300 after:ease-in-out after:motion-reduce:transition-none after:will-change-transform",
+  "after:content-['']",
   "after:rounded-full",
-  "after:transition-all",
-  "after:content-['']"
-), x = ({
+  {
+    // Normal toggle knob (circle)
+    "after:h-5 after:w-5": !e,
+    // Narrow toggle knob (oval)
+    " after:h-4 after:w-7": e
+  }
+), C = ({
   mode: e,
   noBorder: t
 }) => r({
@@ -40,7 +56,7 @@ const b = "av-toggle", h = () => r("peer", "h-6", "w-11", "rounded-full"), k = (
   "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-medium bg-surface-medium dark:border-border-light dark:bg-surface-darker": e === "system"
-}), C = ({
+}), T = ({
   mode: e,
   labelHidden: t
 }) => t ? "sr-only" : r("ml-2 text-sm", {
@@ -48,63 +64,66 @@ const b = "av-toggle", h = () => r("peer", "h-6", "w-11", "rounded-full"), k = (
   "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 }) => r(
-  b,
+}), N = ({ className: e }) => r(
+  h,
   "relative flex cursor-pointer items-center",
   e
 ), w = ({
   mode: e,
   focusMode: t,
-  labelHidden: a,
+  labelHidden: o,
   className: l,
-  noBorder: o
+  noBorder: c,
+  narrow: s
 }) => ({
   toggle: r(
-    h(),
-    x({ mode: e, noBorder: o }),
-    k({ focusMode: t }),
-    y(),
-    m()
+    k({ narrow: s }),
+    C({ mode: e, noBorder: c }),
+    m({ focusMode: t }),
+    y({ narrow: s }),
+    x({ narrow: s })
   ),
-  label: C({ mode: e, labelHidden: a }),
+  label: T({ mode: e, labelHidden: o }),
   input: "peer sr-only",
-  wrapper: T({ className: l })
-}), K = ({
+  wrapper: N({ className: l })
+}), L = ({
   checked: e = !1,
   onChange: t,
-  label: a,
+  label: o,
   labelHidden: l = !1,
-  name: o,
-  mode: g = "system",
+  name: c,
+  mode: s = "system",
   focusMode: u = "system",
-  className: n,
-  noBorder: f = !1
+  className: f,
+  noBorder: i = !1,
+  narrow: g = !1
 }) => {
-  const s = w({
-    mode: g,
+  const a = w({
+    mode: s,
     focusMode: u,
     labelHidden: l,
-    className: n,
-    noBorder: f
-  }), d = (i) => {
-    t?.(i.target.checked);
+    className: f,
+    noBorder: i,
+    narrow: g
+  }), d = (p) => {
+    t?.(p.target.checked);
   };
-  return /* @__PURE__ */ p("label", { className: s.wrapper, children: [
-    /* @__PURE__ */ c(
+  return /* @__PURE__ */ b("label", { className: a.wrapper, children: [
+    /* @__PURE__ */ n(
       "input",
       {
-        name: o,
+        name: c,
         checked: e,
         type: "checkbox",
-        className: s.input,
+        className: a.input,
         onChange: d
       }
     ),
-    /* @__PURE__ */ c("div", { className: s.toggle }),
-    /* @__PURE__ */ c("span", { className: s.label, children: a })
+    /* @__PURE__ */ n("div", { className: a.toggle }),
+    /* @__PURE__ */ n("span", { className: a.label, children: o })
   ] });
 };
 export {
-  b as TOGGLE_CLASSNAME,
-  K as Toggle
+  h as TOGGLE_CLASSNAME,
+  L as Toggle
 };

package/dist/index.d.ts

@@ -40,12 +40,18 @@ type ToggleProps = {
 	 * @default false
 	 */
 	noBorder?: boolean;
+	/**
+	 * Whether or not to render the Toggle in narrow style.
+	 * When true, the toggle has a smaller height, longer width, and oval knob.
+	 * @default false
+	 */
+	narrow?: boolean;
 	/**
 	 * The classes to apply to the component.
 	 */
 	className?: string;
 };
 
-declare const Toggle: ({ checked, onChange, label, labelHidden, name, mode, focusMode, className, noBorder, }: ToggleProps) => react_jsx_runtime.JSX.Element;
+declare const Toggle: ({ checked, onChange, label, labelHidden, name, mode, focusMode, className, noBorder, narrow, }: ToggleProps) => react_jsx_runtime.JSX.Element;
 
 export { TOGGLE_CLASSNAME, 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.11
+  @versini/ui-toggle v4.1.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TOGGLE__ || (window.__VERSINI_UI_TOGGLE__ = {
-    version: "4.0.11",
-    buildTime: "08/23/2025 12:22 PM EDT",
+    version: "4.1.1",
+    buildTime: "09/01/2025 02:19 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.11",
+	"version": "4.1.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -41,7 +41,7 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "../ui-types"
+		"@versini/ui-types": "5.0.7"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
@@ -51,5 +51,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "d568e20474c6c87f836c4cb6548f2cc0143a353c"
+	"gitHead": "c577149643ec36cad454587166e62410a77aed38"
 }