@macive/ui 0.0.12 → 0.0.13

package/dist/src/components/Input/Input.classnames.js

@@ -1,8 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const InputClassnames = {
-    "input-prefix": "Input-prefix",
-    "input-suffix": "Input-suffix",
-    "input-field": "Input-field"
+    "Backdrop-connectedLeft": "Input-connectedLeft",
+    "Backdrop-connectedRight": "Input-connectedRight",
+    "TextField": "Input-TextField",
+    "ClearButton": "Input-ClearButton",
+    "multiline": "Input-multiline",
+    "Input": "Input-Input",
+    "hasValue": "Input-hasValue",
+    "focus": "Input-focus",
+    "VerticalContent": "Input-VerticalContent",
+    "Backdrop": "Input-Backdrop",
+    "error": "Input-error",
+    "readOnly": "Input-readOnly",
+    "disabled": "Input-disabled",
+    "Prefix": "Input-Prefix",
+    "suggestion": "Input-suggestion",
+    "borderless": "Input-borderless",
+    "Input-hasClearButton": "Input-hasClearButton",
+    "Input-suffixed": "Input-suffixed",
+    "Input-alignRight": "Input-alignRight",
+    "Input-alignLeft": "Input-alignLeft",
+    "Input-alignCenter": "Input-alignCenter",
+    "Suffix": "Input-Suffix",
+    "CharacterCount": "Input-CharacterCount",
+    "AlignFieldBottom": "Input-AlignFieldBottom",
+    "Spinner": "Input-Spinner",
+    "SpinnerIcon": "Input-SpinnerIcon",
+    "Resizer": "Input-Resizer",
+    "DummyInput": "Input-DummyInput",
+    "Segment": "Input-Segment",
+    "monospaced": "Input-monospaced"
 };
 exports.default = InputClassnames;

package/dist/src/components/Input/Input.js

@@ -6,19 +6,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const css_1 = require("../../utils/css");
-const Label_1 = require("../Label");
-const Text_1 = require("../Text");
+const css_1 = require("../../utilities/css");
+const unique_id_1 = require("../../utilities/unique-id");
+const Connected_1 = require("../Connected");
+const Labelled_1 = require("../Labelled");
 const Input_classnames_1 = __importDefault(require("./Input.classnames"));
-/**
- * A simple input component.
- *
- * @param props InputProps for the component.
- * @returns A React functional component.
- */
-// const Input: React.FC<InputProps> = (props) => {
 exports.Input = react_1.default.forwardRef((props, ref) => {
-    const { className, gap, suffix, preffix, invalid, error, label, ...rest } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.classNames)(gap == 'none' && 'mt-4', className), children: [(0, jsx_runtime_1.jsx)("div", { className: 'mb-2', children: (0, jsx_runtime_1.jsx)(Label_1.Label, { id: rest === null || rest === void 0 ? void 0 : rest.name, children: label }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.classNames)(' focus-within:border-accent group relative  flex  w-full items-center rounded border-[0.5px]  border-gray-400  focus-within:ring focus-within:ring-gray-200  focus-within:ring-opacity-50 group-hover:!border-red-700 dark:bg-gray-600 dark:text-white md:text-sm ', error && '!border-danger'), children: [preffix && (0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default['input-prefix'], children: preffix }), (0, jsx_runtime_1.jsx)("input", { ref: ref, className: (0, css_1.classNames)(Input_classnames_1.default['input-field'], 'focus:shadow-outline ring-ring-brand-yellow focus:ring-brand-yellow focus:border-brand-yellow border-brand-yellow border border-none shadow-none outline-none focus:outline-none focus:ring', invalid ? 'border-red-500' : '', error ? 'border-red-500' : '', suffix ? 'dpr-10 ' : 'pr-4', preffix ? 'pl-1  placeholder:pl-0' : 'pl-4'), ...rest }), suffix && (0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default['input-suffix'], children: suffix })] }), error && (0, jsx_runtime_1.jsx)("p", { className: 'capitalize-first text-sm italic !text-red-500', children: error }), (props === null || props === void 0 ? void 0 : props.info) && (0, jsx_runtime_1.jsxs)(Text_1.Text, { color: 'subdued', children: [props === null || props === void 0 ? void 0 : props.info, " "] })] }));
+    var _a;
+    const { prefix, suffix, verticalContent, placeholder, 
+    // value = '',
+    helpText, label, labelAction, labelHidden, disabled, clearButton, readOnly, autoFocus, focused, error, connectedRight, connectedLeft, type = 'text', name, id: idProp, role, autoComplete, max, maxLength, min, showCharacterCount, requiredIndicator, monospaced, suggestion, onClearButtonClick, borderless, align, ...rest } = props;
+    const id = (0, unique_id_1.useUniqueId)('TextField', idProp);
+    const className = (0, css_1.classNames)(Input_classnames_1.default.TextField, 
+    // Boolean(normalizedValue) && styles.hasValue,
+    disabled && Input_classnames_1.default.disabled, readOnly && Input_classnames_1.default.readOnly, error && Input_classnames_1.default.error, borderless && Input_classnames_1.default.borderless);
+    const inputClassName = (0, css_1.classNames)(Input_classnames_1.default.Input, suffix && Input_classnames_1.default['Input'], clearButton && Input_classnames_1.default['Input-hasClearButton'], monospaced && Input_classnames_1.default.monospaced, suggestion && Input_classnames_1.default.suggestion, 
+    //@ts-expect-error
+    align && Input_classnames_1.default[variationName('Input-align', align)]);
+    return ((0, jsx_runtime_1.jsx)(Labelled_1.Labelled, { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText, requiredIndicator: requiredIndicator, children: (0, jsx_runtime_1.jsx)(Connected_1.Connected, { left: connectedLeft, right: connectedRight, children: (0, jsx_runtime_1.jsxs)("div", { className: className, children: [prefix ? ((0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default.Prefix, id: `${id}-Prefix`, children: prefix })) : null, (0, jsx_runtime_1.jsx)("input", { ...{
+                            name,
+                            id,
+                            disabled,
+                            readOnly,
+                            role,
+                            autoFocus,
+                            placeholder,
+                            autoComplete,
+                            className: inputClassName,
+                            min,
+                            max,
+                            ...rest,
+                        }, ref: (_a = rest.ref) !== null && _a !== void 0 ? _a : ref }), suffix ? ((0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default.Suffix, id: `${id}-Suffix`, children: suffix })) : null, showCharacterCount ? ((0, jsx_runtime_1.jsx)("div", { id: `${id}-CharacterCounter`, className: Input_classnames_1.default.CharacterCount, "aria-atomic": 'true', children: rest.value })) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(Input_classnames_1.default.Backdrop, connectedLeft && Input_classnames_1.default['Backdrop-connectedLeft'], connectedRight && Input_classnames_1.default['Backdrop-connectedRight']) })] }) }) }));
 });
 exports.Input.displayName = 'Input';