velto-ui 1.0.0

package/dist/components/Button/Button.js

@@ -0,0 +1,142 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _theme = require("../../theme");
+var _button = require("./button.config");
+var _button2 = require("./button.utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var Button = function Button(_ref) {
+  var title = _ref.title,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$intent = _ref.intent,
+    intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    loadingText = _ref.loadingText,
+    _ref$loadingPosition = _ref.loadingPosition,
+    loadingPosition = _ref$loadingPosition === void 0 ? 'center' : _ref$loadingPosition,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$textTransform = _ref.textTransform,
+    textTransform = _ref$textTransform === void 0 ? 'none' : _ref$textTransform,
+    bg = _ref.bg,
+    textColor = _ref.textColor,
+    disabledBg = _ref.disabledBg,
+    disabledTextColor = _ref.disabledTextColor,
+    borderRadius = _ref.borderRadius,
+    paddingVertical = _ref.paddingVertical,
+    paddingHorizontal = _ref.paddingHorizontal,
+    leftIcon = _ref.leftIcon,
+    rightIcon = _ref.rightIcon,
+    _style = _ref.style,
+    textStyle = _ref.textStyle,
+    sx = _ref.sx,
+    onPress = _ref.onPress;
+  var _useTheme = (0, _theme.useTheme)(),
+    theme = _useTheme.theme;
+  var colors = theme.colors;
+
+  // resolve size, intent and variant styles based on props
+  var sizeConfig = _button.BUTTON_SIZES[size] || _button.BUTTON_SIZES.md;
+  var intentColor = (0, _button2.getIntentColor)(intent, colors);
+  var variantStyle = (0, _button2.getVariantStyle)(variant, intentColor);
+
+  // button becomes non-clickable when disabled or loading
+  var isDisabled = disabled || loading;
+
+  // only apply disabled styling when explicitly disabled (not during loading)
+  var showDisabledStyle = disabled;
+
+  // final background color with override priority
+  var finalBg = bg !== null && bg !== void 0 ? bg : showDisabledStyle ? disabledBg || colors.disabled : variantStyle.backgroundColor;
+
+  // final text color with override priority
+  var finalTextColor = textColor !== null && textColor !== void 0 ? textColor : showDisabledStyle ? disabledTextColor || '#888' : variantStyle.textColor;
+
+  // padding controls actual button size (not just text)
+  var finalPV = paddingVertical !== null && paddingVertical !== void 0 ? paddingVertical : sizeConfig.pv;
+  var finalPH = paddingHorizontal !== null && paddingHorizontal !== void 0 ? paddingHorizontal : sizeConfig.ph;
+
+  // pill shape only affects border radius, not height
+  var finalRadius = borderRadius !== null && borderRadius !== void 0 ? borderRadius : shape === 'pill' ? 999 : _button.BUTTON_SHAPES[shape] || _button.BUTTON_SHAPES.rounded;
+
+  // switch text when loadingText is provided
+  var finalText = loading && loadingText ? loadingText : title;
+  return /*#__PURE__*/_react["default"].createElement(_reactNative.Pressable, {
+    onPress: onPress,
+    disabled: isDisabled,
+    android_ripple: _reactNative.Platform.OS === 'android' ? {
+      color: '#ccc'
+    } : undefined,
+    style: function style(_ref2) {
+      var pressed = _ref2.pressed;
+      return [styles.base, {
+        backgroundColor: finalBg,
+        borderWidth: variantStyle.borderWidth || 0,
+        borderColor: variantStyle.borderColor || 'transparent',
+        paddingVertical: finalPV,
+        paddingHorizontal: finalPH,
+        borderRadius: finalRadius,
+        // handles both normal and full width layouts
+        alignSelf: fullWidth ? 'stretch' : 'flex-start',
+        width: fullWidth ? '100%' : undefined,
+        opacity: pressed ? 0.85 : 1
+      }, sx, _style];
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: styles.row
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: styles.side
+  }, loading && loadingPosition === 'left' ? /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    color: finalTextColor
+  }) : !loading && leftIcon), /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: styles.center
+  }, loading && loadingPosition === 'center' ? /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    color: finalTextColor
+  }) : /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    numberOfLines: 1,
+    style: [styles.text, {
+      color: finalTextColor,
+      fontSize: sizeConfig.fontSize,
+      textTransform: textTransform
+    }, textStyle]
+  }, finalText)), /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: styles.side
+  }, loading && loadingPosition === 'right' ? /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    color: finalTextColor
+  }) : !loading && rightIcon)));
+};
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(Button);
+var styles = _reactNative.StyleSheet.create({
+  base: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  side: {
+    minWidth: 24,
+    alignItems: 'center'
+  },
+  center: {
+    marginHorizontal: 6
+  },
+  text: {
+    fontWeight: '600'
+  }
+});

package/dist/components/Button/button.config.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BUTTON_VARIANTS = exports.BUTTON_SIZES = exports.BUTTON_SHAPES = void 0;
+var BUTTON_VARIANTS = exports.BUTTON_VARIANTS = ['solid', 'outline', 'ghost', 'soft', 'link'];
+var BUTTON_SIZES = exports.BUTTON_SIZES = {
+  xs: {
+    pv: 6,
+    ph: 10,
+    fontSize: 10
+  },
+  sm: {
+    pv: 8,
+    ph: 12,
+    fontSize: 12
+  },
+  md: {
+    pv: 12,
+    ph: 16,
+    fontSize: 16
+  },
+  lg: {
+    pv: 16,
+    ph: 20,
+    fontSize: 18
+  },
+  xl: {
+    pv: 20,
+    ph: 24,
+    fontSize: 20
+  },
+  icon: {
+    pv: 10,
+    ph: 10,
+    fontSize: 16
+  }
+};
+var BUTTON_SHAPES = exports.BUTTON_SHAPES = {
+  rounded: 10,
+  pill: 999,
+  square: 2
+};

package/dist/components/Button/button.utils.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariantStyle = exports.getIntentColor = void 0;
+var getIntentColor = exports.getIntentColor = function getIntentColor(intent, colors) {
+  var map = {
+    primary: colors.primary,
+    success: colors.secondary,
+    error: colors.danger,
+    warning: '#FFA500',
+    info: '#3B82F6'
+  };
+  return map[intent] || colors.primary;
+};
+var getVariantStyle = exports.getVariantStyle = function getVariantStyle(variant, intentColor) {
+  switch (variant) {
+    case 'outline':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: intentColor,
+        borderWidth: 1,
+        textColor: intentColor
+      };
+    case 'ghost':
+      return {
+        backgroundColor: 'transparent',
+        textColor: intentColor
+      };
+    case 'soft':
+      return {
+        backgroundColor: intentColor + '20',
+        textColor: intentColor
+      };
+    case 'link':
+      return {
+        backgroundColor: 'transparent',
+        textColor: intentColor
+      };
+    case 'solid':
+    default:
+      return {
+        backgroundColor: intentColor,
+        textColor: '#fff'
+      };
+  }
+};

package/dist/components/Input/Input.js

@@ -0,0 +1,195 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _theme = require("../../theme");
+var _input = require("./input.config");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var Input = function Input(_ref) {
+  var value = _ref.value,
+    onChangeText = _ref.onChangeText,
+    label = _ref.label,
+    placeholder = _ref.placeholder,
+    helperText = _ref.helperText,
+    error = _ref.error,
+    success = _ref.success,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$secureTextEntry = _ref.secureTextEntry,
+    secureTextEntry = _ref$secureTextEntry === void 0 ? false : _ref$secureTextEntry,
+    _ref$multiline = _ref.multiline,
+    multiline = _ref$multiline === void 0 ? false : _ref$multiline,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    bg = _ref.bg,
+    textColor = _ref.textColor,
+    borderRadius = _ref.borderRadius,
+    paddingVertical = _ref.paddingVertical,
+    paddingHorizontal = _ref.paddingHorizontal,
+    style = _ref.style,
+    inputStyle = _ref.inputStyle;
+  var _useTheme = (0, _theme.useTheme)(),
+    theme = _useTheme.theme;
+  var colors = theme.colors;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+
+  // password toggle state
+  var _useState3 = (0, _react.useState)(secureTextEntry),
+    _useState4 = _slicedToArray(_useState3, 2),
+    secure = _useState4[0],
+    setSecure = _useState4[1];
+
+  // ✅ sync with prop change (IMPORTANT FIX)
+  (0, _react.useEffect)(function () {
+    setSecure(secureTextEntry);
+  }, [secureTextEntry]);
+  var sizeConfig = _input.INPUT_SIZES[size] || _input.INPUT_SIZES.md;
+
+  /* ---------------- STATE PRIORITY ---------------- */
+  var state = disabled ? 'disabled' : error ? 'error' : success ? 'success' : focused ? 'focus' : 'default';
+
+  /* ---------------- COLORS ---------------- */
+
+  var finalBorderColor = state === 'disabled' ? colors.border : state === 'error' ? colors.error : state === 'success' ? colors.success : state === 'focus' ? colors.primary : colors.border;
+  var backgroundColor = bg !== null && bg !== void 0 ? bg : variant === 'solid' ? colors.surface || colors.background : 'transparent';
+  var finalTextColor = textColor !== null && textColor !== void 0 ? textColor : disabled ? colors.textSecondary || '#999' : colors.text;
+  var finalPV = paddingVertical !== null && paddingVertical !== void 0 ? paddingVertical : sizeConfig.pv;
+  var finalPH = paddingHorizontal !== null && paddingHorizontal !== void 0 ? paddingHorizontal : sizeConfig.ph;
+  var showClear = clearable && (value === null || value === void 0 ? void 0 : value.length) > 0 && !disabled && !readOnly;
+
+  /* ---------------- VARIANT STYLE ---------------- */
+
+  var getVariantStyle = function getVariantStyle() {
+    switch (variant) {
+      case 'solid':
+        return {
+          borderWidth: 1
+        };
+      case 'outline':
+        return {
+          borderWidth: 1
+        };
+      case 'underline':
+        return {
+          borderBottomWidth: 1
+        };
+      case 'ghost':
+        return {
+          borderWidth: 0
+        };
+      default:
+        return {
+          borderWidth: 1
+        };
+    }
+  };
+
+  /* ---------------- RENDER ---------------- */
+
+  return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: {
+      width: '100%'
+    }
+  }, label && /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: [styles.label, {
+      color: colors.text
+    }]
+  }, label), /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: [styles.wrapper, getVariantStyle(), {
+      backgroundColor: backgroundColor,
+      borderColor: finalBorderColor,
+      borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : 8,
+      paddingVertical: finalPV,
+      paddingHorizontal: finalPH,
+      minHeight: multiline ? 80 : 44,
+      opacity: disabled ? 0.5 : 1
+    }, style]
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.TextInput, {
+    value: value,
+    onChangeText: onChangeText,
+    placeholder: placeholder,
+    editable: !disabled && !readOnly,
+    secureTextEntry: secure // ✅ controlled by state
+    ,
+    multiline: multiline,
+    placeholderTextColor: colors.border,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    style: [styles.input, {
+      color: finalTextColor,
+      fontSize: sizeConfig.fontSize,
+      textAlignVertical: multiline ? 'top' : 'center'
+    }, inputStyle]
+  }), /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: styles.right
+  }, showClear && /*#__PURE__*/_react["default"].createElement(_reactNative.Pressable, {
+    onPress: function onPress() {
+      return onChangeText('');
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: {
+      color: colors.text
+    }
+  }, "\u2715")), secureTextEntry && /*#__PURE__*/_react["default"].createElement(_reactNative.Pressable, {
+    onPress: function onPress() {
+      return setSecure(function (prev) {
+        return !prev;
+      });
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: {
+      color: colors.text,
+      fontSize: 16
+    }
+  }, secure ? '👁️' : '🙈')))), (helperText || error) && /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: {
+      marginTop: 4,
+      fontSize: 12,
+      color: error ? colors.error : success ? colors.success : colors.textSecondary || colors.text
+    }
+  }, error || helperText));
+};
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(Input);
+/* ---------------- STYLES ---------------- */
+var styles = _reactNative.StyleSheet.create({
+  label: {
+    marginBottom: 4,
+    fontWeight: '500'
+  },
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  input: {
+    flex: 1
+  },
+  right: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6
+  }
+});

package/dist/components/Input/input.config.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INPUT_VARIANTS = exports.INPUT_SIZES = void 0;
+var INPUT_SIZES = exports.INPUT_SIZES = {
+  xs: {
+    fontSize: 12,
+    pv: 6,
+    ph: 8
+  },
+  sm: {
+    fontSize: 14,
+    pv: 8,
+    ph: 10
+  },
+  md: {
+    fontSize: 16,
+    pv: 10,
+    ph: 12
+  },
+  lg: {
+    fontSize: 18,
+    pv: 12,
+    ph: 14
+  },
+  xl: {
+    fontSize: 20,
+    pv: 14,
+    ph: 16
+  }
+};
+var INPUT_VARIANTS = exports.INPUT_VARIANTS = {
+  solid: function solid(c) {
+    return {
+      backgroundColor: c.background,
+      borderWidth: 0
+    };
+  },
+  outline: function outline(c) {
+    return {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: c.border
+    };
+  },
+  underline: function underline(c) {
+    return {
+      backgroundColor: 'transparent',
+      borderBottomWidth: 1,
+      borderColor: c.border
+    };
+  },
+  ghost: function ghost() {
+    return {
+      backgroundColor: 'transparent',
+      borderWidth: 0
+    };
+  }
+};

package/dist/components/Input/input.utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStateColor = void 0;
+var getStateColor = exports.getStateColor = function getStateColor(state, colors) {
+  switch (state) {
+    case 'error':
+      return colors.error;
+    case 'success':
+      return colors.success;
+    default:
+      return colors.border;
+  }
+};

package/dist/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Button: true,
+  Input: true
+};
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button["default"];
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input["default"];
+  }
+});
+var _Button = _interopRequireDefault(require("./components/Button/Button"));
+var _Input = _interopRequireDefault(require("./components/Input/Input"));
+var _theme = require("./theme");
+Object.keys(_theme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _theme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _theme[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,47 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = exports.ThemeProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _light = require("./light");
+var _dark = require("./dark");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var ThemeContext = /*#__PURE__*/(0, _react.createContext)();
+var ThemeProvider = exports.ThemeProvider = function ThemeProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)('light'),
+    _useState2 = _slicedToArray(_useState, 2),
+    mode = _useState2[0],
+    setMode = _useState2[1];
+  var theme = (0, _react.useMemo)(function () {
+    return mode === 'light' ? _light.lightTheme : _dark.darkTheme;
+  }, [mode]);
+  var toggleTheme = function toggleTheme() {
+    setMode(function (prev) {
+      return prev === 'light' ? 'dark' : 'light';
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(ThemeContext.Provider, {
+    value: {
+      theme: theme,
+      mode: mode,
+      toggleTheme: toggleTheme
+    }
+  }, children);
+};
+var useTheme = exports.useTheme = function useTheme() {
+  var context = (0, _react.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used inside ThemeProvider');
+  }
+  return context;
+};

package/dist/theme/dark.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.darkTheme = void 0;
+var darkTheme = exports.darkTheme = {
+  mode: 'dark',
+  colors: {
+    primary: '#3b82f6',
+    background: '#111827',
+    surface: '#1f2937',
+    text: '#f9fafb',
+    textSecondary: '#9ca3af',
+    border: '#374151',
+    error: '#ef4444',
+    success: '#22c55e',
+    disabled: '#374151'
+  }
+};

package/dist/theme/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ThemeProvider = require("./ThemeProvider");
+Object.keys(_ThemeProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ThemeProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ThemeProvider[key];
+    }
+  });
+});

package/dist/theme/light.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lightTheme = void 0;
+var lightTheme = exports.lightTheme = {
+  mode: 'light',
+  colors: {
+    primary: '#2563eb',
+    background: '#ffffff',
+    surface: '#f9fafb',
+    text: '#111827',
+    textSecondary: '#6b7280',
+    border: '#d1d5db',
+    error: '#dc2626',
+    success: '#16a34a',
+    disabled: '#e5e7eb'
+  }
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "velto-ui",
+  "version": "1.0.0",
+  "description": "VeltoUI - React Native UI component library",
+  "main": "dist/index.js",
+  "react-native": "src/index.js",
+  "author": "Kanhu Charan Sahoo",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "ui",
+    "components",
+    "design-system",
+    "velto-ui"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "babel src -d dist"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.29.7",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.29.7"
+  }
+}

package/src/components/Button/Button.js

@@ -0,0 +1,165 @@
+import React, { memo } from 'react';
+import { Pressable, Text, ActivityIndicator, View, StyleSheet, Platform } from 'react-native';
+import { useTheme } from '../../theme';
+import { BUTTON_SIZES, BUTTON_SHAPES } from './button.config';
+import { getIntentColor, getVariantStyle } from './button.utils';
+
+const Button = ({
+  title,
+  variant = 'solid',
+  size = 'md',
+  intent = 'primary',
+  shape = 'rounded',
+
+  loading = false,
+  loadingText,
+  loadingPosition = 'center',
+  disabled = false,
+
+  fullWidth = false,
+  textTransform = 'none',
+
+  bg,
+  textColor,
+  disabledBg,
+  disabledTextColor,
+  borderRadius,
+  paddingVertical,
+  paddingHorizontal,
+
+  leftIcon,
+  rightIcon,
+
+  style,
+  textStyle,
+  sx,
+
+  onPress,
+}) => {
+  const { theme } = useTheme();
+  const colors = theme.colors;
+
+  // resolve size, intent and variant styles based on props
+  const sizeConfig = BUTTON_SIZES[size] || BUTTON_SIZES.md;
+  const intentColor = getIntentColor(intent, colors);
+  const variantStyle = getVariantStyle(variant, intentColor);
+
+  // button becomes non-clickable when disabled or loading
+  const isDisabled = disabled || loading;
+
+  // only apply disabled styling when explicitly disabled (not during loading)
+  const showDisabledStyle = disabled;
+
+  // final background color with override priority
+  const finalBg =
+    bg ?? (showDisabledStyle ? disabledBg || colors.disabled : variantStyle.backgroundColor);
+
+  // final text color with override priority
+  const finalTextColor =
+    textColor ?? (showDisabledStyle ? disabledTextColor || '#888' : variantStyle.textColor);
+
+  // padding controls actual button size (not just text)
+  const finalPV = paddingVertical ?? sizeConfig.pv;
+  const finalPH = paddingHorizontal ?? sizeConfig.ph;
+
+  // pill shape only affects border radius, not height
+  const finalRadius =
+    borderRadius ?? (shape === 'pill' ? 999 : BUTTON_SHAPES[shape] || BUTTON_SHAPES.rounded);
+
+  // switch text when loadingText is provided
+  const finalText = loading && loadingText ? loadingText : title;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isDisabled}
+      android_ripple={Platform.OS === 'android' ? { color: '#ccc' } : undefined}
+      style={({ pressed }) => [
+        styles.base,
+        {
+          backgroundColor: finalBg,
+          borderWidth: variantStyle.borderWidth || 0,
+          borderColor: variantStyle.borderColor || 'transparent',
+
+          paddingVertical: finalPV,
+          paddingHorizontal: finalPH,
+
+          borderRadius: finalRadius,
+
+          // handles both normal and full width layouts
+          alignSelf: fullWidth ? 'stretch' : 'flex-start',
+          width: fullWidth ? '100%' : undefined,
+
+          opacity: pressed ? 0.85 : 1,
+        },
+        sx,
+        style,
+      ]}
+    >
+      <View style={styles.row}>
+        {/* left side: icon or loader */}
+        <View style={styles.side}>
+          {loading && loadingPosition === 'left' ? (
+            <ActivityIndicator color={finalTextColor} />
+          ) : (
+            !loading && leftIcon
+          )}
+        </View>
+
+        {/* center: text or loader */}
+        <View style={styles.center}>
+          {loading && loadingPosition === 'center' ? (
+            <ActivityIndicator color={finalTextColor} />
+          ) : (
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.text,
+                {
+                  color: finalTextColor,
+                  fontSize: sizeConfig.fontSize,
+                  textTransform,
+                },
+                textStyle,
+              ]}
+            >
+              {finalText}
+            </Text>
+          )}
+        </View>
+
+        {/* right side: icon or loader */}
+        <View style={styles.side}>
+          {loading && loadingPosition === 'right' ? (
+            <ActivityIndicator color={finalTextColor} />
+          ) : (
+            !loading && rightIcon
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+
+export default memo(Button);
+
+const styles = StyleSheet.create({
+  base: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  side: {
+    minWidth: 24,
+    alignItems: 'center',
+  },
+  center: {
+    marginHorizontal: 6,
+  },
+  text: {
+    fontWeight: '600',
+  },
+});

package/src/components/Button/button.config.js

@@ -0,0 +1,16 @@
+export const BUTTON_VARIANTS = ['solid', 'outline', 'ghost', 'soft', 'link'];
+
+export const BUTTON_SIZES = {
+  xs: { pv: 6, ph: 10, fontSize: 10 },
+  sm: { pv: 8, ph: 12, fontSize: 12 },
+  md: { pv: 12, ph: 16, fontSize: 16 },
+  lg: { pv: 16, ph: 20, fontSize: 18 },
+  xl: { pv: 20, ph: 24, fontSize: 20 },
+  icon: { pv: 10, ph: 10, fontSize: 16 },
+};
+
+export const BUTTON_SHAPES = {
+  rounded: 10,
+  pill: 999,
+  square: 2,
+};

package/src/components/Button/button.utils.js

@@ -0,0 +1,48 @@
+export const getIntentColor = (intent, colors) => {
+  const map = {
+    primary: colors.primary,
+    success: colors.secondary,
+    error: colors.danger,
+    warning: '#FFA500',
+    info: '#3B82F6',
+  };
+
+  return map[intent] || colors.primary;
+};
+
+export const getVariantStyle = (variant, intentColor) => {
+  switch (variant) {
+    case 'outline':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: intentColor,
+        borderWidth: 1,
+        textColor: intentColor,
+      };
+
+    case 'ghost':
+      return {
+        backgroundColor: 'transparent',
+        textColor: intentColor,
+      };
+
+    case 'soft':
+      return {
+        backgroundColor: intentColor + '20',
+        textColor: intentColor,
+      };
+
+    case 'link':
+      return {
+        backgroundColor: 'transparent',
+        textColor: intentColor,
+      };
+
+    case 'solid':
+    default:
+      return {
+        backgroundColor: intentColor,
+        textColor: '#fff',
+      };
+  }
+};

package/src/components/Input/Input.js

@@ -0,0 +1,206 @@
+import React, { useState, useEffect, memo } from 'react';
+import { View, Text, TextInput, StyleSheet, Pressable } from 'react-native';
+import { useTheme } from '../../theme';
+import { INPUT_SIZES } from './input.config';
+
+const Input = ({
+  value,
+  onChangeText,
+
+  label,
+  placeholder,
+  helperText,
+  error,
+  success,
+
+  variant = 'outline',
+  size = 'md',
+
+  disabled = false,
+  readOnly = false,
+
+  secureTextEntry = false,
+  multiline = false,
+
+  clearable = false,
+
+  bg,
+  textColor,
+  borderRadius,
+  paddingVertical,
+  paddingHorizontal,
+
+  style,
+  inputStyle,
+}) => {
+  const { theme } = useTheme();
+  const colors = theme.colors;
+
+  const [focused, setFocused] = useState(false);
+
+  // password toggle state
+  const [secure, setSecure] = useState(secureTextEntry);
+
+  // ✅ sync with prop change (IMPORTANT FIX)
+  useEffect(() => {
+    setSecure(secureTextEntry);
+  }, [secureTextEntry]);
+
+  const sizeConfig = INPUT_SIZES[size] || INPUT_SIZES.md;
+
+  /* ---------------- STATE PRIORITY ---------------- */
+  const state = disabled
+    ? 'disabled'
+    : error
+      ? 'error'
+      : success
+        ? 'success'
+        : focused
+          ? 'focus'
+          : 'default';
+
+  /* ---------------- COLORS ---------------- */
+
+  const finalBorderColor =
+    state === 'disabled'
+      ? colors.border
+      : state === 'error'
+        ? colors.error
+        : state === 'success'
+          ? colors.success
+          : state === 'focus'
+            ? colors.primary
+            : colors.border;
+
+  const backgroundColor =
+    bg ?? (variant === 'solid' ? colors.surface || colors.background : 'transparent');
+
+  const finalTextColor = textColor ?? (disabled ? colors.textSecondary || '#999' : colors.text);
+
+  const finalPV = paddingVertical ?? sizeConfig.pv;
+  const finalPH = paddingHorizontal ?? sizeConfig.ph;
+
+  const showClear = clearable && value?.length > 0 && !disabled && !readOnly;
+
+  /* ---------------- VARIANT STYLE ---------------- */
+
+  const getVariantStyle = () => {
+    switch (variant) {
+      case 'solid':
+        return { borderWidth: 1 };
+      case 'outline':
+        return { borderWidth: 1 };
+      case 'underline':
+        return { borderBottomWidth: 1 };
+      case 'ghost':
+        return { borderWidth: 0 };
+      default:
+        return { borderWidth: 1 };
+    }
+  };
+
+  /* ---------------- RENDER ---------------- */
+
+  return (
+    <View style={{ width: '100%' }}>
+      {/* LABEL */}
+      {label && <Text style={[styles.label, { color: colors.text }]}>{label}</Text>}
+
+      {/* INPUT */}
+      <View
+        style={[
+          styles.wrapper,
+          getVariantStyle(),
+          {
+            backgroundColor,
+            borderColor: finalBorderColor,
+            borderRadius: borderRadius ?? 8,
+            paddingVertical: finalPV,
+            paddingHorizontal: finalPH,
+            minHeight: multiline ? 80 : 44,
+            opacity: disabled ? 0.5 : 1,
+          },
+          style,
+        ]}
+      >
+        <TextInput
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          editable={!disabled && !readOnly}
+          secureTextEntry={secure} // ✅ controlled by state
+          multiline={multiline}
+          placeholderTextColor={colors.border}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          style={[
+            styles.input,
+            {
+              color: finalTextColor,
+              fontSize: sizeConfig.fontSize,
+              textAlignVertical: multiline ? 'top' : 'center',
+            },
+            inputStyle,
+          ]}
+        />
+
+        {/* RIGHT SIDE ACTIONS */}
+        <View style={styles.right}>
+          {/* Clear button */}
+          {showClear && (
+            <Pressable onPress={() => onChangeText('')}>
+              <Text style={{ color: colors.text }}>✕</Text>
+            </Pressable>
+          )}
+
+          {/* Password toggle */}
+          {secureTextEntry && (
+            <Pressable onPress={() => setSecure((prev) => !prev)}>
+              <Text style={{ color: colors.text, fontSize: 16 }}>{secure ? '👁️' : '🙈'}</Text>
+            </Pressable>
+          )}
+        </View>
+      </View>
+
+      {/* HELPER / ERROR */}
+      {(helperText || error) && (
+        <Text
+          style={{
+            marginTop: 4,
+            fontSize: 12,
+            color: error
+              ? colors.error
+              : success
+                ? colors.success
+                : colors.textSecondary || colors.text,
+          }}
+        >
+          {error || helperText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default memo(Input);
+
+/* ---------------- STYLES ---------------- */
+
+const styles = StyleSheet.create({
+  label: {
+    marginBottom: 4,
+    fontWeight: '500',
+  },
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+  },
+  right: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+});

package/src/components/Input/input.config.js

@@ -0,0 +1,28 @@
+export const INPUT_SIZES = {
+  xs: { fontSize: 12, pv: 6, ph: 8 },
+  sm: { fontSize: 14, pv: 8, ph: 10 },
+  md: { fontSize: 16, pv: 10, ph: 12 },
+  lg: { fontSize: 18, pv: 12, ph: 14 },
+  xl: { fontSize: 20, pv: 14, ph: 16 },
+};
+
+export const INPUT_VARIANTS = {
+  solid: (c) => ({
+    backgroundColor: c.background,
+    borderWidth: 0,
+  }),
+  outline: (c) => ({
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: c.border,
+  }),
+  underline: (c) => ({
+    backgroundColor: 'transparent',
+    borderBottomWidth: 1,
+    borderColor: c.border,
+  }),
+  ghost: () => ({
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+  }),
+};

package/src/components/Input/input.utils.js

@@ -0,0 +1,10 @@
+export const getStateColor = (state, colors) => {
+  switch (state) {
+    case 'error':
+      return colors.error;
+    case 'success':
+      return colors.success;
+    default:
+      return colors.border;
+  }
+};

package/src/index.js

@@ -0,0 +1,5 @@
+export { default as Button } from './components/Button/Button';
+export { default as Input } from './components/Input/Input';
+
+// theme exports
+export * from './theme';

package/src/theme/ThemeProvider.js

@@ -0,0 +1,29 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { lightTheme } from './light';
+import { darkTheme } from './dark';
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [mode, setMode] = useState('light');
+
+  const theme = useMemo(() => {
+    return mode === 'light' ? lightTheme : darkTheme;
+  }, [mode]);
+
+  const toggleTheme = () => {
+    setMode((prev) => (prev === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, mode, toggleTheme }}>{children}</ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used inside ThemeProvider');
+  }
+  return context;
+};

package/src/theme/dark.js

@@ -0,0 +1,19 @@
+export const darkTheme = {
+  mode: 'dark',
+  colors: {
+    primary: '#3b82f6',
+
+    background: '#111827',
+    surface: '#1f2937',
+
+    text: '#f9fafb',
+    textSecondary: '#9ca3af',
+
+    border: '#374151',
+
+    error: '#ef4444',
+    success: '#22c55e',
+
+    disabled: '#374151',
+  },
+};

package/src/theme/index.js

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

package/src/theme/light.js

@@ -0,0 +1,19 @@
+export const lightTheme = {
+  mode: 'light',
+  colors: {
+    primary: '#2563eb',
+
+    background: '#ffffff',
+    surface: '#f9fafb',
+
+    text: '#111827',
+    textSecondary: '#6b7280',
+
+    border: '#d1d5db',
+
+    error: '#dc2626',
+    success: '#16a34a',
+
+    disabled: '#e5e7eb',
+  },
+};