@aegov/design-system-react
Version:
A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.
90 lines (89 loc) • 4.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactLabel = require("@radix-ui/react-label");
var _react2 = require("@phosphor-icons/react");
var _utils = require("../../utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const Input = /*#__PURE__*/(0, _react.forwardRef)(({
type = 'text',
label,
error,
helperText,
prefix,
suffix,
className,
size = 'base',
variant = 'primary',
disabled,
required,
id,
...props
}, ref) => {
const [showPassword, setShowPassword] = _react.default.useState(false);
const [localType, setLocalType] = _react.default.useState(type);
_react.default.useEffect(() => {
if (type === 'password') {
setLocalType(showPassword ? 'text' : 'password');
}
}, [showPassword, type]);
const sizeClasses = {
sm: 'h-10 text-sm',
base: 'h-12 text-base',
lg: 'h-14 text-lg'
};
const labelSizeClasses = {
sm: 'text-sm',
base: 'text-sm',
lg: 'text-base'
};
const variantClasses = {
primary: 'focus-within:ring-primary-support-400 ring-primary-400',
secondary: 'focus-within:ring-secondary-600 ring-secondary-400',
error: 'focus-within:ring-red-600 ring-red-400 bg-red-50'
};
const inputContainerClasses = (0, _utils.cn)('relative flex rounded-lg shadow-sm ring-2 ring-inset focus-within:ring-2 focus-within:ring-inset bg-whitely-50', variantClasses[error ? 'error' : variant], disabled && 'opacity-40', className);
const inputClasses = (0, _utils.cn)('w-full flex-1 border-0 bg-transparent ps-4 text-gray-900 placeholder:text-gray-400', 'focus:ring-0 outline-none disabled:cursor-not-allowed', sizeClasses[size], prefix && 'pl-1.5', suffix && 'pr-1.5');
const renderPasswordToggle = () => /*#__PURE__*/_react.default.createElement("button", {
type: "button",
onClick: () => setShowPassword(!showPassword),
className: "pr-4 rtl:pl-4 text-gray-400 hover:text-gray-600 focus:outline-none"
}, showPassword ? /*#__PURE__*/_react.default.createElement(_react2.EyeSlash, {
className: "h-6 w-6"
}) : /*#__PURE__*/_react.default.createElement(_react2.Eye, {
className: "h-6 w-6"
}));
const renderSearchIcon = () => /*#__PURE__*/_react.default.createElement(_react2.MagnifyingGlass, {
className: "h-6 w-6 text-gray-400"
});
return /*#__PURE__*/_react.default.createElement("div", {
className: "w-full"
}, label && /*#__PURE__*/_react.default.createElement(_reactLabel.Root, {
htmlFor: id,
className: (0, _utils.cn)('mb-1 block font-medium text-gray-900', labelSizeClasses[size], error && 'text-red-600', required && 'after:ml-0.5 after:text-red-500 after:content-["*"]')
}, label), /*#__PURE__*/_react.default.createElement("div", {
className: inputContainerClasses
}, prefix && /*#__PURE__*/_react.default.createElement("div", {
className: "flex select-none items-center ps-4 text-gray-500"
}, prefix), type === 'search' && !prefix && /*#__PURE__*/_react.default.createElement("div", {
className: "flex select-none items-center ps-4 text-gray-500"
}, renderSearchIcon()), /*#__PURE__*/_react.default.createElement("input", _extends({
ref: ref,
type: localType,
id: id,
disabled: disabled,
required: required,
className: inputClasses
}, props)), suffix && /*#__PURE__*/_react.default.createElement("div", {
className: "flex select-none items-center pr-4 text-gray-500"
}, suffix), type === 'password' && !suffix && renderPasswordToggle()), (error || helperText) && /*#__PURE__*/_react.default.createElement("p", {
className: (0, _utils.cn)('mt-1 text-sm text-aeblack-500', error ? 'text-red-600' : 'text-gray-500')
}, error || helperText));
});
Input.displayName = 'Input';
var _default = exports.default = Input;