cynx-ui 1.2.11 → 1.2.13

package/components/Toggle.jsx

@@ -1,56 +1,67 @@
-const SIZES = {
-  sm: { w: 28, h: 16, r: 8, dot: 12, off: 2, on: 14 },
-  md: { w: 34, h: 18, r: 9, dot: 14, off: 2, on: 18 },
-  lg: { w: 44, h: 24, r: 12, dot: 18, off: 3, on: 23 },
-};
-
-const COLORS = {
-  primary: 'var(--accent)',
-  success: 'var(--success)',
-  warning: '#f59e0b',
-  danger:  'var(--danger)',
-};
-
-export default function Toggle({
-  checked = false,
-  onChange,
-  disabled = false,
-  size = 'md',
-  color = 'primary',
-  label = null,
-  labelStyle = {},
-  onClick = null,
-  className = '',
-  style = {},
-}) {
-  const s = SIZES[size] || SIZES.md;
-  const trackBg = checked ? (COLORS[color] || COLORS.primary) : 'var(--bd2,#d7d8e0)';
-
-  return (
-    <label
-      className={className}
-      style={{ display:'inline-flex', alignItems:'center', gap:8, cursor: disabled ? 'not-allowed' : 'pointer', userSelect:'none', opacity: disabled ? .4 : 1, ...style }}
-      onClick={onClick}
-    >
-      <input type="checkbox" checked={checked} disabled={disabled}
-        onChange={e => onChange?.(e.target.checked)}
-        style={{ position:'absolute', opacity:0, width:0, height:0 }} />
-      <span style={{
-        position:'relative', width: s.w, height: s.h, borderRadius: s.r,
-        background: trackBg, flexShrink:0, transition:'background .2s ease',
-        boxShadow:'0 1px 3px rgba(20,22,41,.1)',
-      }}>
-        <span style={{
-          position:'absolute', top:'50%',
-          transform:'translateY(-50%)',
-          left: checked ? s.on : s.off,
-          width: s.dot, height: s.dot,
-          background:'#fff', borderRadius:'50%',
-          boxShadow:'0 1px 3px rgba(0,0,0,.25)',
-          transition:'left .25s cubic-bezier(.34,1.56,.64,1)',
-        }} />
-      </span>
-      {label && <span style={labelStyle}>{label}</span>}
-    </label>
-  );
-}
+const SIZES = {
+  sm: { w: 28, h: 16, r: 8, dot: 12, off: 2, on: 14 },
+  md: { w: 34, h: 18, r: 9, dot: 14, off: 2, on: 18 },
+  lg: { w: 44, h: 24, r: 12, dot: 18, off: 3, on: 23 },
+};
+
+const COLORS = {
+  primary: '#f99e2c',
+  success: '#27ae60',
+  warning: '#f59e0b',
+  danger:  '#f64747',
+};
+
+const OFF_COLOR = '#d7d8e0';
+
+export default function Toggle({
+  checked = false,
+  onChange,
+  disabled = false,
+  size = 'md',
+  color = 'primary',
+  label = null,
+  labelStyle = {},
+  onClick = null,
+  className = '',
+  style = {},
+}) {
+  const s = SIZES[size] || SIZES.md;
+  const trackBg = checked ? (COLORS[color] || COLORS.primary) : OFF_COLOR;
+
+  return (
+    <label
+      className={className}
+      style={{
+        display:'inline-flex', alignItems:'center', gap:8,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        userSelect:'none', opacity: disabled ? .4 : 1,
+        ...style,
+      }}
+      onClick={onClick}
+    >
+      <input type="checkbox" checked={checked} disabled={disabled}
+        onChange={e => onChange?.(e.target.checked)}
+        style={{ position:'absolute', opacity:0, width:0, height:0 }} />
+      <span style={{
+        position:'relative', width: s.w, height: s.h, borderRadius: s.r,
+        background: trackBg, flexShrink: 0,
+        transition: 'background .25s ease',
+        boxShadow: '0 1px 3px rgba(20,22,41,.1)',
+      }}>
+        <span style={{
+          position:'absolute', top:'50%',
+          transform: checked
+            ? 'translateY(-50%) scale(1)'
+            : 'translateY(-50%) scale(1)',
+          left: checked ? s.on : s.off,
+          width: s.dot, height: s.dot,
+          background: '#fff', borderRadius: '50%',
+          boxShadow: '0 1px 3px rgba(0,0,0,.25)',
+          transition: 'left .3s cubic-bezier(.34,1.56,.64,1), transform .2s ease',
+          willChange: 'left',
+        }} />
+      </span>
+      {label && <span style={labelStyle}>{label}</span>}
+    </label>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "type": "module",
   "exports": {
     ".": "./index.js"