@cdx-ui/components 0.0.1-alpha.8 → 0.0.1-alpha.9

package/lib/commonjs/components/Switch/BaseSwitch.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseSwitch = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("@cdx-ui/utils");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+const BaseSwitch = exports.BaseSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
+  states,
+  className,
+  disabled,
+  value,
+  ...props
+}, ref) => {
+  const isChecked = value ?? states?.checked ?? false;
+  const isDisabled = disabled ?? states?.disabled ?? false;
+  const isInvalid = states?.invalid ?? false;
+  const uniwindProps = {
+    className,
+    thumbColorClassName: (0, _utils.cn)((0, _styles.switchThumbColorVariants)({
+      isDisabled
+    })),
+    trackColorOnClassName: (0, _utils.cn)((0, _styles.switchTrackOnVariants)({
+      isInvalid
+    })),
+    trackColorOffClassName: (0, _utils.cn)((0, _styles.switchTrackOffVariants)({
+      isInvalid
+    })),
+    ios_backgroundColorClassName: (0, _utils.cn)((0, _styles.switchIosBgVariants)({
+      isInvalid
+    }))
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+    ref: ref,
+    value: isChecked,
+    disabled: isDisabled,
+    ...uniwindProps,
+    ...props
+  });
+});
+BaseSwitch.displayName = 'BaseSwitch';
+//# sourceMappingURL=BaseSwitch.js.map

package/lib/commonjs/components/Switch/BaseSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","BaseSwitch","exports","forwardRef","states","className","disabled","value","props","ref","isChecked","checked","isDisabled","isInvalid","invalid","uniwindProps","thumbColorClassName","cn","switchThumbColorVariants","trackColorOnClassName","switchTrackOnVariants","trackColorOffClassName","switchTrackOffVariants","ios_backgroundColorClassName","switchIosBgVariants","jsx","Switch","displayName"],"sourceRoot":"../../../../src","sources":["components/Switch/BaseSwitch.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAKkB,IAAAI,WAAA,GAAAJ,OAAA;AASX,MAAMK,UAAU,GAAAC,OAAA,CAAAD,UAAA,gBAAG,IAAAE,iBAAU,EAClC,CAAC;EAAEC,MAAM;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACzD,MAAMC,SAAS,GAAGH,KAAK,IAAIH,MAAM,EAAEO,OAAO,IAAI,KAAK;EACnD,MAAMC,UAAU,GAAGN,QAAQ,IAAIF,MAAM,EAAEE,QAAQ,IAAI,KAAK;EACxD,MAAMO,SAAS,GAAGT,MAAM,EAAEU,OAAO,IAAI,KAAK;EAE1C,MAAMC,YAAgD,GAAG;IACvDV,SAAS;IACTW,mBAAmB,EAAE,IAAAC,SAAE,EAAC,IAAAC,gCAAwB,EAAC;MAAEN;IAAW,CAAC,CAAC,CAAC;IACjEO,qBAAqB,EAAE,IAAAF,SAAE,EAAC,IAAAG,6BAAqB,EAAC;MAAEP;IAAU,CAAC,CAAC,CAAC;IAC/DQ,sBAAsB,EAAE,IAAAJ,SAAE,EAAC,IAAAK,8BAAsB,EAAC;MAAET;IAAU,CAAC,CAAC,CAAC;IACjEU,4BAA4B,EAAE,IAAAN,SAAE,EAAC,IAAAO,2BAAmB,EAAC;MAAEX;IAAU,CAAC,CAAC;EACrE,CAAC;EAED,oBACE,IAAAb,WAAA,CAAAyB,GAAA,EAAC5B,YAAA,CAAA6B,MAAQ;IAACjB,GAAG,EAAEA,GAAI;IAACF,KAAK,EAAEG,SAAU;IAACJ,QAAQ,EAAEM,UAAW;IAAA,GAAKG,YAAY;IAAA,GAAMP;EAAK,CAAG,CAAC;AAE/F,CACF,CAAC;AAEDP,UAAU,CAAC0B,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/commonjs/components/Switch/BaseSwitch.web.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseSwitch = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("@cdx-ui/utils");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+const BaseSwitch = exports.BaseSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
+  value,
+  onValueChange,
+  disabled,
+  states,
+  dataSet,
+  className,
+  size = 'md',
+  onFocus,
+  onBlur,
+  ...props
+}, ref) => {
+  const isChecked = value ?? states?.checked ?? false;
+  const isDisabled = disabled ?? states?.disabled ?? false;
+  const isInvalid = states?.invalid ?? false;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ref: ref,
+    role: "switch",
+    "aria-checked": isChecked,
+    "aria-disabled": isDisabled,
+    disabled: isDisabled,
+    onPress: () => onValueChange?.(!isChecked),
+    onFocus: onFocus,
+    onBlur: onBlur,
+    tabIndex: 0,
+    className: (0, _utils.cn)((0, _styles.switchTrackVariants)({
+      size
+    }), (0, _styles.switchWebTrackColorVariants)({
+      isChecked,
+      isInvalid
+    }), className)
+    // @ts-expect-error dataSet is a RNW/Uniwind prop not in Pressable types
+    ,
+    dataSet: dataSet,
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: (0, _utils.cn)((0, _styles.switchThumbVariants)({
+        size,
+        isChecked
+      }))
+    })
+  });
+});
+BaseSwitch.displayName = 'BaseSwitch';
+//# sourceMappingURL=BaseSwitch.web.js.map

package/lib/commonjs/components/Switch/BaseSwitch.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","BaseSwitch","exports","forwardRef","value","onValueChange","disabled","states","dataSet","className","size","onFocus","onBlur","props","ref","isChecked","checked","isDisabled","isInvalid","invalid","jsx","Pressable","role","onPress","tabIndex","cn","switchTrackVariants","switchWebTrackColorVariants","children","View","switchThumbVariants","displayName"],"sourceRoot":"../../../../src","sources":["components/Switch/BaseSwitch.web.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAKkB,IAAAI,WAAA,GAAAJ,OAAA;AAcX,MAAMK,UAAU,GAAAC,OAAA,CAAAD,UAAA,gBAAG,IAAAE,iBAAU,EAClC,CACE;EACEC,KAAK;EACLC,aAAa;EACbC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,IAAI,GAAG,IAAI;EACXC,OAAO;EACPC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,SAAS,GAAGX,KAAK,IAAIG,MAAM,EAAES,OAAO,IAAI,KAAK;EACnD,MAAMC,UAAU,GAAGX,QAAQ,IAAIC,MAAM,EAAED,QAAQ,IAAI,KAAK;EACxD,MAAMY,SAAS,GAAGX,MAAM,EAAEY,OAAO,IAAI,KAAK;EAE1C,oBACE,IAAAnB,WAAA,CAAAoB,GAAA,EAACvB,YAAA,CAAAwB,SAAS;IACRP,GAAG,EAAEA,GAAI;IACTQ,IAAI,EAAC,QAAQ;IACb,gBAAcP,SAAU;IACxB,iBAAeE,UAAW;IAC1BX,QAAQ,EAAEW,UAAW;IACrBM,OAAO,EAAEA,CAAA,KAAMlB,aAAa,GAAG,CAACU,SAAS,CAAE;IAC3CJ,OAAO,EAAEA,OAAQ;IACjBC,MAAM,EAAEA,MAAO;IACfY,QAAQ,EAAE,CAAE;IACZf,SAAS,EAAE,IAAAgB,SAAE,EACX,IAAAC,2BAAmB,EAAC;MAAEhB;IAAK,CAAC,CAAC,EAC7B,IAAAiB,mCAA2B,EAAC;MAAEZ,SAAS;MAAEG;IAAU,CAAC,CAAC,EACrDT,SACF;IACA;IAAA;IACAD,OAAO,EAAEA,OAAQ;IAAA,GACbK,KAAK;IAAAe,QAAA,eAET,IAAA5B,WAAA,CAAAoB,GAAA,EAACvB,YAAA,CAAAgC,IAAI;MAACpB,SAAS,EAAE,IAAAgB,SAAE,EAAC,IAAAK,2BAAmB,EAAC;QAAEpB,IAAI;QAAEK;MAAU,CAAC,CAAC;IAAE,CAAE;EAAC,CACxD,CAAC;AAEhB,CACF,CAAC;AAEDd,UAAU,CAAC8B,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/commonjs/components/Switch/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = void 0;
+var _primitives = require("@cdx-ui/primitives");
+var _BaseSwitch = require("./BaseSwitch");
+const SwitchPrimitive = (0, _primitives.createSwitch)({
+  Root: _BaseSwitch.BaseSwitch
+});
+const Switch = exports.Switch = SwitchPrimitive;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_primitives","require","_BaseSwitch","SwitchPrimitive","createSwitch","Root","BaseSwitch","Switch","exports"],"sourceRoot":"../../../../src","sources":["components/Switch/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAGA,MAAME,eAAe,GAAG,IAAAC,wBAAY,EAAC;EAAEC,IAAI,EAAEC;AAAW,CAAC,CAAC;AAMnD,MAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAGJ,eAAe","ignoreList":[]}

package/lib/commonjs/components/Switch/styles.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.switchWebTrackColorVariants = exports.switchTrackVariants = exports.switchTrackOnVariants = exports.switchTrackOffVariants = exports.switchThumbVariants = exports.switchThumbColorVariants = exports.switchIosBgVariants = void 0;
+var _classVarianceAuthority = require("class-variance-authority");
+// =============================================================================
+// NATIVE — Uniwind className bindings for RN Switch
+// =============================================================================
+
+const switchThumbColorVariants = exports.switchThumbColorVariants = (0, _classVarianceAuthority.cva)(['accent-white'], {
+  variants: {
+    isDisabled: {
+      true: 'accent-gray-200',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isDisabled: false
+  }
+});
+const switchTrackOnVariants = exports.switchTrackOnVariants = (0, _classVarianceAuthority.cva)(['accent-blue-500'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-500',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isInvalid: false
+  }
+});
+const switchTrackOffVariants = exports.switchTrackOffVariants = (0, _classVarianceAuthority.cva)(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isInvalid: false
+  }
+});
+const switchIosBgVariants = exports.switchIosBgVariants = (0, _classVarianceAuthority.cva)(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isInvalid: false
+  }
+});
+
+// =============================================================================
+// WEB — Tailwind classes for custom Pressable toggle
+// =============================================================================
+
+const switchTrackVariants = exports.switchTrackVariants = (0, _classVarianceAuthority.cva)(['flex-row items-center rounded-full cursor-pointer', 'transition-colors duration-200', 'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed', 'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50', 'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50'], {
+  variants: {
+    size: {
+      sm: 'w-9 h-5 p-0.5',
+      md: 'w-11 h-6 p-0.5',
+      lg: 'w-14 h-8 p-1'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});
+const switchWebTrackColorVariants = exports.switchWebTrackColorVariants = (0, _classVarianceAuthority.cva)([], {
+  variants: {
+    isChecked: {
+      true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
+      false: 'bg-gray-300 data-[hover=true]:bg-gray-400'
+    },
+    isInvalid: {
+      true: '',
+      false: ''
+    }
+  },
+  compoundVariants: [{
+    isChecked: true,
+    isInvalid: true,
+    className: 'bg-red-500 data-[hover=true]:bg-red-600'
+  }, {
+    isChecked: false,
+    isInvalid: true,
+    className: 'bg-red-300 data-[hover=true]:bg-red-400'
+  }],
+  defaultVariants: {
+    isChecked: false,
+    isInvalid: false
+  }
+});
+const switchThumbVariants = exports.switchThumbVariants = (0, _classVarianceAuthority.cva)(['rounded-full bg-white shadow-sm', 'transition-transform duration-200'], {
+  variants: {
+    size: {
+      sm: 'w-4 h-4',
+      md: 'w-5 h-5',
+      lg: 'w-6 h-6'
+    },
+    isChecked: {
+      true: '',
+      false: 'translate-x-0'
+    }
+  },
+  compoundVariants: [{
+    size: 'sm',
+    isChecked: true,
+    className: 'translate-x-4'
+  }, {
+    size: 'md',
+    isChecked: true,
+    className: 'translate-x-5'
+  }, {
+    size: 'lg',
+    isChecked: true,
+    className: 'translate-x-6'
+  }],
+  defaultVariants: {
+    size: 'md',
+    isChecked: false
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/components/Switch/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_classVarianceAuthority","require","switchThumbColorVariants","exports","cva","variants","isDisabled","true","false","defaultVariants","switchTrackOnVariants","isInvalid","switchTrackOffVariants","switchIosBgVariants","switchTrackVariants","size","sm","md","lg","switchWebTrackColorVariants","isChecked","compoundVariants","className","switchThumbVariants"],"sourceRoot":"../../../../src","sources":["components/Switch/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/index.js

@@ -79,6 +79,18 @@ Object.keys(_Select).forEach(function (key) {
     }
   });
 });
+var _Switch = require("./Switch");
+Object.keys(_Switch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Switch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Switch[key];
+    }
+  });
+});
 var _Stack = require("./Stack");
 var _Text = require("./Text");
 Object.keys(_Text).forEach(function (key) {

package/lib/commonjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Box","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_Button","_Checkbox","_Input","_Select","_Stack","_Text"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_Box","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_Button","_Checkbox","_Input","_Select","_Switch","_Stack","_Text"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Switch/BaseSwitch.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { Switch as RNSwitch } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import { switchIosBgVariants, switchThumbColorVariants, switchTrackOffVariants, switchTrackOnVariants } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BaseSwitch = /*#__PURE__*/forwardRef(({
+  states,
+  className,
+  disabled,
+  value,
+  ...props
+}, ref) => {
+  const isChecked = value ?? states?.checked ?? false;
+  const isDisabled = disabled ?? states?.disabled ?? false;
+  const isInvalid = states?.invalid ?? false;
+  const uniwindProps = {
+    className,
+    thumbColorClassName: cn(switchThumbColorVariants({
+      isDisabled
+    })),
+    trackColorOnClassName: cn(switchTrackOnVariants({
+      isInvalid
+    })),
+    trackColorOffClassName: cn(switchTrackOffVariants({
+      isInvalid
+    })),
+    ios_backgroundColorClassName: cn(switchIosBgVariants({
+      isInvalid
+    }))
+  };
+  return /*#__PURE__*/_jsx(RNSwitch, {
+    ref: ref,
+    value: isChecked,
+    disabled: isDisabled,
+    ...uniwindProps,
+    ...props
+  });
+});
+BaseSwitch.displayName = 'BaseSwitch';
+//# sourceMappingURL=BaseSwitch.js.map

package/lib/module/components/Switch/BaseSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","Switch","RNSwitch","cn","switchIosBgVariants","switchThumbColorVariants","switchTrackOffVariants","switchTrackOnVariants","jsx","_jsx","BaseSwitch","states","className","disabled","value","props","ref","isChecked","checked","isDisabled","isInvalid","invalid","uniwindProps","thumbColorClassName","trackColorOnClassName","trackColorOffClassName","ios_backgroundColorClassName","displayName"],"sourceRoot":"../../../../src","sources":["components/Switch/BaseSwitch.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,MAAM,IAAIC,QAAQ,QAA0B,cAAc;AACnE,SAASC,EAAE,QAAQ,eAAe;AAClC,SACEC,mBAAmB,EACnBC,wBAAwB,EACxBC,sBAAsB,EACtBC,qBAAqB,QAChB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AASlB,OAAO,MAAMC,UAAU,gBAAGV,UAAU,CAClC,CAAC;EAAEW,MAAM;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACzD,MAAMC,SAAS,GAAGH,KAAK,IAAIH,MAAM,EAAEO,OAAO,IAAI,KAAK;EACnD,MAAMC,UAAU,GAAGN,QAAQ,IAAIF,MAAM,EAAEE,QAAQ,IAAI,KAAK;EACxD,MAAMO,SAAS,GAAGT,MAAM,EAAEU,OAAO,IAAI,KAAK;EAE1C,MAAMC,YAAgD,GAAG;IACvDV,SAAS;IACTW,mBAAmB,EAAEpB,EAAE,CAACE,wBAAwB,CAAC;MAAEc;IAAW,CAAC,CAAC,CAAC;IACjEK,qBAAqB,EAAErB,EAAE,CAACI,qBAAqB,CAAC;MAAEa;IAAU,CAAC,CAAC,CAAC;IAC/DK,sBAAsB,EAAEtB,EAAE,CAACG,sBAAsB,CAAC;MAAEc;IAAU,CAAC,CAAC,CAAC;IACjEM,4BAA4B,EAAEvB,EAAE,CAACC,mBAAmB,CAAC;MAAEgB;IAAU,CAAC,CAAC;EACrE,CAAC;EAED,oBACEX,IAAA,CAACP,QAAQ;IAACc,GAAG,EAAEA,GAAI;IAACF,KAAK,EAAEG,SAAU;IAACJ,QAAQ,EAAEM,UAAW;IAAA,GAAKG,YAAY;IAAA,GAAMP;EAAK,CAAG,CAAC;AAE/F,CACF,CAAC;AAEDL,UAAU,CAACiB,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/module/components/Switch/BaseSwitch.web.js

@@ -0,0 +1,52 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { Pressable, View } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import { switchThumbVariants, switchTrackVariants, switchWebTrackColorVariants } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BaseSwitch = /*#__PURE__*/forwardRef(({
+  value,
+  onValueChange,
+  disabled,
+  states,
+  dataSet,
+  className,
+  size = 'md',
+  onFocus,
+  onBlur,
+  ...props
+}, ref) => {
+  const isChecked = value ?? states?.checked ?? false;
+  const isDisabled = disabled ?? states?.disabled ?? false;
+  const isInvalid = states?.invalid ?? false;
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    role: "switch",
+    "aria-checked": isChecked,
+    "aria-disabled": isDisabled,
+    disabled: isDisabled,
+    onPress: () => onValueChange?.(!isChecked),
+    onFocus: onFocus,
+    onBlur: onBlur,
+    tabIndex: 0,
+    className: cn(switchTrackVariants({
+      size
+    }), switchWebTrackColorVariants({
+      isChecked,
+      isInvalid
+    }), className)
+    // @ts-expect-error dataSet is a RNW/Uniwind prop not in Pressable types
+    ,
+    dataSet: dataSet,
+    ...props,
+    children: /*#__PURE__*/_jsx(View, {
+      className: cn(switchThumbVariants({
+        size,
+        isChecked
+      }))
+    })
+  });
+});
+BaseSwitch.displayName = 'BaseSwitch';
+//# sourceMappingURL=BaseSwitch.web.js.map

package/lib/module/components/Switch/BaseSwitch.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","Pressable","View","cn","switchThumbVariants","switchTrackVariants","switchWebTrackColorVariants","jsx","_jsx","BaseSwitch","value","onValueChange","disabled","states","dataSet","className","size","onFocus","onBlur","props","ref","isChecked","checked","isDisabled","isInvalid","invalid","role","onPress","tabIndex","children","displayName"],"sourceRoot":"../../../../src","sources":["components/Switch/BaseSwitch.web.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC9C,SAASC,EAAE,QAAQ,eAAe;AAClC,SACEC,mBAAmB,EACnBC,mBAAmB,EACnBC,2BAA2B,QAEtB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAclB,OAAO,MAAMC,UAAU,gBAAGT,UAAU,CAClC,CACE;EACEU,KAAK;EACLC,aAAa;EACbC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,IAAI,GAAG,IAAI;EACXC,OAAO;EACPC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,SAAS,GAAGX,KAAK,IAAIG,MAAM,EAAES,OAAO,IAAI,KAAK;EACnD,MAAMC,UAAU,GAAGX,QAAQ,IAAIC,MAAM,EAAED,QAAQ,IAAI,KAAK;EACxD,MAAMY,SAAS,GAAGX,MAAM,EAAEY,OAAO,IAAI,KAAK;EAE1C,oBACEjB,IAAA,CAACP,SAAS;IACRmB,GAAG,EAAEA,GAAI;IACTM,IAAI,EAAC,QAAQ;IACb,gBAAcL,SAAU;IACxB,iBAAeE,UAAW;IAC1BX,QAAQ,EAAEW,UAAW;IACrBI,OAAO,EAAEA,CAAA,KAAMhB,aAAa,GAAG,CAACU,SAAS,CAAE;IAC3CJ,OAAO,EAAEA,OAAQ;IACjBC,MAAM,EAAEA,MAAO;IACfU,QAAQ,EAAE,CAAE;IACZb,SAAS,EAAEZ,EAAE,CACXE,mBAAmB,CAAC;MAAEW;IAAK,CAAC,CAAC,EAC7BV,2BAA2B,CAAC;MAAEe,SAAS;MAAEG;IAAU,CAAC,CAAC,EACrDT,SACF;IACA;IAAA;IACAD,OAAO,EAAEA,OAAQ;IAAA,GACbK,KAAK;IAAAU,QAAA,eAETrB,IAAA,CAACN,IAAI;MAACa,SAAS,EAAEZ,EAAE,CAACC,mBAAmB,CAAC;QAAEY,IAAI;QAAEK;MAAU,CAAC,CAAC;IAAE,CAAE;EAAC,CACxD,CAAC;AAEhB,CACF,CAAC;AAEDZ,UAAU,CAACqB,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/module/components/Switch/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { createSwitch } from '@cdx-ui/primitives';
+import { BaseSwitch } from './BaseSwitch';
+const SwitchPrimitive = createSwitch({
+  Root: BaseSwitch
+});
+export const Switch = SwitchPrimitive;
+//# sourceMappingURL=index.js.map

package/lib/module/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createSwitch","BaseSwitch","SwitchPrimitive","Root","Switch"],"sourceRoot":"../../../../src","sources":["components/Switch/index.tsx"],"mappings":";;AAAA,SAA4BA,YAAY,QAAQ,oBAAoB;AACpE,SAASC,UAAU,QAAQ,cAAc;AAGzC,MAAMC,eAAe,GAAGF,YAAY,CAAC;EAAEG,IAAI,EAAEF;AAAW,CAAC,CAAC;AAM1D,OAAO,MAAMG,MAAM,GAAGF,eAAe","ignoreList":[]}

package/lib/module/components/Switch/styles.js

@@ -0,0 +1,125 @@
+"use strict";
+
+import { cva } from 'class-variance-authority';
+
+// =============================================================================
+// NATIVE — Uniwind className bindings for RN Switch
+// =============================================================================
+
+export const switchThumbColorVariants = cva(['accent-white'], {
+  variants: {
+    isDisabled: {
+      true: 'accent-gray-200',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isDisabled: false
+  }
+});
+export const switchTrackOnVariants = cva(['accent-blue-500'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-500',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isInvalid: false
+  }
+});
+export const switchTrackOffVariants = cva(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isInvalid: false
+  }
+});
+export const switchIosBgVariants = cva(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isInvalid: false
+  }
+});
+
+// =============================================================================
+// WEB — Tailwind classes for custom Pressable toggle
+// =============================================================================
+
+export const switchTrackVariants = cva(['flex-row items-center rounded-full cursor-pointer', 'transition-colors duration-200', 'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed', 'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50', 'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50'], {
+  variants: {
+    size: {
+      sm: 'w-9 h-5 p-0.5',
+      md: 'w-11 h-6 p-0.5',
+      lg: 'w-14 h-8 p-1'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});
+export const switchWebTrackColorVariants = cva([], {
+  variants: {
+    isChecked: {
+      true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
+      false: 'bg-gray-300 data-[hover=true]:bg-gray-400'
+    },
+    isInvalid: {
+      true: '',
+      false: ''
+    }
+  },
+  compoundVariants: [{
+    isChecked: true,
+    isInvalid: true,
+    className: 'bg-red-500 data-[hover=true]:bg-red-600'
+  }, {
+    isChecked: false,
+    isInvalid: true,
+    className: 'bg-red-300 data-[hover=true]:bg-red-400'
+  }],
+  defaultVariants: {
+    isChecked: false,
+    isInvalid: false
+  }
+});
+export const switchThumbVariants = cva(['rounded-full bg-white shadow-sm', 'transition-transform duration-200'], {
+  variants: {
+    size: {
+      sm: 'w-4 h-4',
+      md: 'w-5 h-5',
+      lg: 'w-6 h-6'
+    },
+    isChecked: {
+      true: '',
+      false: 'translate-x-0'
+    }
+  },
+  compoundVariants: [{
+    size: 'sm',
+    isChecked: true,
+    className: 'translate-x-4'
+  }, {
+    size: 'md',
+    isChecked: true,
+    className: 'translate-x-5'
+  }, {
+    size: 'lg',
+    isChecked: true,
+    className: 'translate-x-6'
+  }],
+  defaultVariants: {
+    size: 'md',
+    isChecked: false
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/Switch/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","switchThumbColorVariants","variants","isDisabled","true","false","defaultVariants","switchTrackOnVariants","isInvalid","switchTrackOffVariants","switchIosBgVariants","switchTrackVariants","size","sm","md","lg","switchWebTrackColorVariants","isChecked","compoundVariants","className","switchThumbVariants"],"sourceRoot":"../../../../src","sources":["components/Switch/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/index.js

@@ -5,6 +5,7 @@ export * from './Button';
 export * from './Checkbox';
 export * from './Input';
 export * from './Select';
+export * from './Switch';
 export { HStack, VStack } from './Stack';
 export * from './Text';
 //# sourceMappingURL=index.js.map

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,QAAQ","ignoreList":[]}
+{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,QAAQ","ignoreList":[]}

package/lib/typescript/components/Switch/BaseSwitch.d.ts

@@ -0,0 +1,9 @@
+import { Switch as RNSwitch, type SwitchProps } from 'react-native';
+export interface BaseSwitchProps extends Omit<SwitchProps, 'className'> {
+    states?: Record<string, boolean | undefined>;
+    dataSet?: Record<string, string>;
+    className?: string;
+    size?: string;
+}
+export declare const BaseSwitch: import("react").ForwardRefExoticComponent<BaseSwitchProps & import("react").RefAttributes<RNSwitch>>;
+//# sourceMappingURL=BaseSwitch.d.ts.map

package/lib/typescript/components/Switch/BaseSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/BaseSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AASpE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,sGAkBtB,CAAC"}

package/lib/typescript/components/Switch/BaseSwitch.web.d.ts

@@ -0,0 +1,15 @@
+import { View } from 'react-native';
+import { type SwitchVariantProps } from './styles';
+export interface BaseSwitchProps {
+    value?: boolean;
+    onValueChange?: (value: boolean) => void;
+    disabled?: boolean;
+    states?: Record<string, boolean | undefined>;
+    dataSet?: Record<string, string>;
+    className?: string;
+    size?: SwitchVariantProps['size'];
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export declare const BaseSwitch: import("react").ForwardRefExoticComponent<BaseSwitchProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=BaseSwitch.web.d.ts.map

package/lib/typescript/components/Switch/BaseSwitch.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSwitch.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/BaseSwitch.web.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,IAAI,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,kGA4CtB,CAAC"}

package/lib/typescript/components/Switch/index.d.ts

@@ -0,0 +1,8 @@
+import { type ISwitchProps } from '@cdx-ui/primitives';
+import type { SwitchVariantProps } from './styles';
+export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
+    className?: string;
+}
+export declare const Switch: import("@cdx-ui/primitives").ISwitchComponentType<import("./BaseSwitch").BaseSwitchProps & import("react").RefAttributes<import("react-native").Switch>, unknown>;
+export type { SwitchVariantProps };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,oBAAoB,CAAC;AAErE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAInD,MAAM,WAAW,WAAY,SAAQ,YAAY,EAAE,kBAAkB;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,mKAAkB,CAAC;AAEtC,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/typescript/components/Switch/styles.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const switchThumbColorVariants: (props?: ({
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const switchTrackOnVariants: (props?: ({
+    isInvalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const switchTrackOffVariants: (props?: ({
+    isInvalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const switchIosBgVariants: (props?: ({
+    isInvalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const switchTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const switchWebTrackColorVariants: (props?: ({
+    isChecked?: boolean | null | undefined;
+    isInvalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const switchThumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isChecked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SwitchVariantProps = VariantProps<typeof switchTrackVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Switch/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMlE,eAAO,MAAM,wBAAwB;;8EAQnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAQhC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;8EAQjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAQ9B,CAAC;AAMH,eAAO,MAAM,mBAAmB;;8EAoB/B,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;8EAmBtC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;8EAwB/B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './Button';
 export * from './Checkbox';
 export * from './Input';
 export * from './Select';
+export * from './Switch';
 export { HStack, VStack } from './Stack';
 export * from './Text';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.1-alpha.9",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -60,8 +60,8 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.4.1",
-    "@cdx-ui/primitives": "0.0.1-alpha.8",
-    "@cdx-ui/utils": "0.0.1-alpha.8"
+    "@cdx-ui/primitives": "0.0.1-alpha.9",
+    "@cdx-ui/utils": "0.0.1-alpha.9"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Switch/BaseSwitch.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import { Switch as RNSwitch, type SwitchProps } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  switchIosBgVariants,
+  switchThumbColorVariants,
+  switchTrackOffVariants,
+  switchTrackOnVariants,
+} from './styles';
+
+export interface BaseSwitchProps extends Omit<SwitchProps, 'className'> {
+  states?: Record<string, boolean | undefined>;
+  dataSet?: Record<string, string>;
+  className?: string;
+  size?: string;
+}
+
+export const BaseSwitch = forwardRef<RNSwitch, BaseSwitchProps>(
+  ({ states, className, disabled, value, ...props }, ref) => {
+    const isChecked = value ?? states?.checked ?? false;
+    const isDisabled = disabled ?? states?.disabled ?? false;
+    const isInvalid = states?.invalid ?? false;
+
+    const uniwindProps: Record<string, string | undefined> = {
+      className,
+      thumbColorClassName: cn(switchThumbColorVariants({ isDisabled })),
+      trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid })),
+      trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid })),
+      ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid })),
+    };
+
+    return (
+      <RNSwitch ref={ref} value={isChecked} disabled={isDisabled} {...uniwindProps} {...props} />
+    );
+  },
+);
+
+BaseSwitch.displayName = 'BaseSwitch';

package/src/components/Switch/BaseSwitch.web.tsx

@@ -0,0 +1,69 @@
+import { forwardRef } from 'react';
+import { Pressable, View } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  switchThumbVariants,
+  switchTrackVariants,
+  switchWebTrackColorVariants,
+  type SwitchVariantProps,
+} from './styles';
+
+export interface BaseSwitchProps {
+  value?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  states?: Record<string, boolean | undefined>;
+  dataSet?: Record<string, string>;
+  className?: string;
+  size?: SwitchVariantProps['size'];
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export const BaseSwitch = forwardRef<View, BaseSwitchProps>(
+  (
+    {
+      value,
+      onValueChange,
+      disabled,
+      states,
+      dataSet,
+      className,
+      size = 'md',
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref,
+  ) => {
+    const isChecked = value ?? states?.checked ?? false;
+    const isDisabled = disabled ?? states?.disabled ?? false;
+    const isInvalid = states?.invalid ?? false;
+
+    return (
+      <Pressable
+        ref={ref}
+        role="switch"
+        aria-checked={isChecked}
+        aria-disabled={isDisabled}
+        disabled={isDisabled}
+        onPress={() => onValueChange?.(!isChecked)}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        tabIndex={0}
+        className={cn(
+          switchTrackVariants({ size }),
+          switchWebTrackColorVariants({ isChecked, isInvalid }),
+          className,
+        )}
+        // @ts-expect-error dataSet is a RNW/Uniwind prop not in Pressable types
+        dataSet={dataSet}
+        {...props}
+      >
+        <View className={cn(switchThumbVariants({ size, isChecked }))} />
+      </Pressable>
+    );
+  },
+);
+
+BaseSwitch.displayName = 'BaseSwitch';

package/src/components/Switch/index.tsx

@@ -0,0 +1,13 @@
+import { type ISwitchProps, createSwitch } from '@cdx-ui/primitives';
+import { BaseSwitch } from './BaseSwitch';
+import type { SwitchVariantProps } from './styles';
+
+const SwitchPrimitive = createSwitch({ Root: BaseSwitch });
+
+export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
+  className?: string;
+}
+
+export const Switch = SwitchPrimitive;
+
+export type { SwitchVariantProps };

package/src/components/Switch/styles.ts

@@ -0,0 +1,120 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// =============================================================================
+// NATIVE — Uniwind className bindings for RN Switch
+// =============================================================================
+
+export const switchThumbColorVariants = cva(['accent-white'], {
+  variants: {
+    isDisabled: {
+      true: 'accent-gray-200',
+      false: '',
+    },
+  },
+  defaultVariants: { isDisabled: false },
+});
+
+export const switchTrackOnVariants = cva(['accent-blue-500'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-500',
+      false: '',
+    },
+  },
+  defaultVariants: { isInvalid: false },
+});
+
+export const switchTrackOffVariants = cva(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: '',
+    },
+  },
+  defaultVariants: { isInvalid: false },
+});
+
+export const switchIosBgVariants = cva(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: '',
+    },
+  },
+  defaultVariants: { isInvalid: false },
+});
+
+// =============================================================================
+// WEB — Tailwind classes for custom Pressable toggle
+// =============================================================================
+
+export const switchTrackVariants = cva(
+  [
+    'flex-row items-center rounded-full cursor-pointer',
+    'transition-colors duration-200',
+    'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed',
+    'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50',
+    'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'w-9 h-5 p-0.5',
+        md: 'w-11 h-6 p-0.5',
+        lg: 'w-14 h-8 p-1',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export const switchWebTrackColorVariants = cva([], {
+  variants: {
+    isChecked: {
+      true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
+      false: 'bg-gray-300 data-[hover=true]:bg-gray-400',
+    },
+    isInvalid: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    { isChecked: true, isInvalid: true, className: 'bg-red-500 data-[hover=true]:bg-red-600' },
+    { isChecked: false, isInvalid: true, className: 'bg-red-300 data-[hover=true]:bg-red-400' },
+  ],
+  defaultVariants: {
+    isChecked: false,
+    isInvalid: false,
+  },
+});
+
+export const switchThumbVariants = cva(
+  ['rounded-full bg-white shadow-sm', 'transition-transform duration-200'],
+  {
+    variants: {
+      size: {
+        sm: 'w-4 h-4',
+        md: 'w-5 h-5',
+        lg: 'w-6 h-6',
+      },
+      isChecked: {
+        true: '',
+        false: 'translate-x-0',
+      },
+    },
+    compoundVariants: [
+      { size: 'sm', isChecked: true, className: 'translate-x-4' },
+      { size: 'md', isChecked: true, className: 'translate-x-5' },
+      { size: 'lg', isChecked: true, className: 'translate-x-6' },
+    ],
+    defaultVariants: {
+      size: 'md',
+      isChecked: false,
+    },
+  },
+);
+
+export type SwitchVariantProps = VariantProps<typeof switchTrackVariants>;

package/src/components/index.ts

@@ -3,5 +3,6 @@ export * from './Button';
 export * from './Checkbox';
 export * from './Input';
 export * from './Select';
+export * from './Switch';
 export { HStack, VStack } from './Stack';
 export * from './Text';