@nlabs/gothamjs
Version:
Platform
70 lines (69 loc) • 8.18 kB
JavaScript
import { cn } from "@nlabs/utils";
import { forwardRef, useMemo } from "react";
import {
getBorderClasses,
getOutlineClasses,
getPlaceholderClasses,
getTextClasses
} from "../../utils/colorUtils.js";
import { jsx } from "react/jsx-runtime";
const baseClasses = {
none: "",
rounded: "w-full rounded-md outline-1 outline-solid focus:outline-3 px-3.5 py-2 sm:text-sm sm:leading-6 bg-white/30 dark:bg-black/30",
solid: "w-full outline-1 outline-solid focus:outline-3 px-3.5 py-2 sm:text-sm sm:leading-6 bg-white/30 dark:bg-black/30",
underline: "w-full border-b-2 focus:border-b-3 autofill:bg-transparent outline-none py-2 sm:text-sm sm:leading-6"
};
const getInputBorderClass = (borderType, borderColor, textColor, placeholderColor) => cn(
baseClasses[borderType],
getTextClasses(textColor),
borderType === "underline" ? getBorderClasses(borderColor, { hasFocus: true, hasHover: true }) : "",
borderType === "rounded" || borderType === "solid" ? getOutlineClasses(borderColor, { hasFocus: true, hasHover: true }) : "",
getPlaceholderClasses(placeholderColor, { hasFocus: true, hasHover: true })
);
const InputField = forwardRef(({
borderColor = "neutral",
borderType = "solid",
className,
disabled = false,
label,
multiline = false,
placeholderColor = "neutral",
textColor = "neutral",
...inputProps
}, ref) => {
const borderClasses = useMemo(
() => getInputBorderClass(borderType, borderColor, textColor, placeholderColor),
[borderType, borderColor, textColor, placeholderColor]
);
const inputClasses = useMemo(
() => cn(
className,
disabled ? "text-neutral/30 dark:text-neutral-dark/30 outline-neutral/30 dark:outline-neutral-dark/30" : borderClasses,
multiline && "min-h-[100px] resize-y"
),
[className, borderClasses, disabled, multiline]
);
return multiline ? /* @__PURE__ */ jsx(
"textarea",
{
...inputProps,
className: inputClasses,
disabled,
ref
}
) : /* @__PURE__ */ jsx(
"input",
{
...inputProps,
className: inputClasses,
disabled,
ref
}
);
});
export {
InputField,
baseClasses,
getInputBorderClass
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSW5wdXRGaWVsZC9JbnB1dEZpZWxkLnRzeCJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTgtUHJlc2VudCwgTml0cm9nZW4gTGFicywgSW5jLlxuICogQ29weXJpZ2h0cyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIExpY2Vuc2UuIFNlZSB0aGUgYWNjb21wYW55aW5nIExJQ0VOU0UgZmlsZSBmb3IgdGVybXMuXG4gKi9cbmltcG9ydCB7Y259IGZyb20gJ0BubGFicy91dGlscyc7XG5pbXBvcnQge2ZvcndhcmRSZWYsIHVzZU1lbW99IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgZ2V0Qm9yZGVyQ2xhc3NlcyxcbiAgZ2V0T3V0bGluZUNsYXNzZXMsXG4gIGdldFBsYWNlaG9sZGVyQ2xhc3NlcyxcbiAgZ2V0VGV4dENsYXNzZXNcbn0gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JVdGlscy5qcyc7XG5cbmltcG9ydCB0eXBlIHtJbnB1dEhUTUxBdHRyaWJ1dGVzLCBSZWYsIFRleHRhcmVhSFRNTEF0dHJpYnV0ZXN9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHtHb3RoYW1Db2xvcn0gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JVdGlscy5qcyc7XG5cbmV4cG9ydCB0eXBlIElucHV0Qm9yZGVyVHlwZSA9ICdzb2xpZCcgfCAncm91bmRlZCcgfCAnbm9uZScgfCAndW5kZXJsaW5lJztcblxuZXhwb3J0IGludGVyZmFjZSBJbnB1dEZpZWxkUHJvcHMgZXh0ZW5kcyBPbWl0PElucHV0SFRNTEF0dHJpYnV0ZXM8SFRNTElucHV0RWxlbWVudD4gJiBUZXh0YXJlYUhUTUxBdHRyaWJ1dGVzPEhUTUxUZXh0QXJlYUVsZW1lbnQ+LCAnY2xhc3NOYW1lJz4ge1xuICByZWFkb25seSBib3JkZXJDb2xvcj86IEdvdGhhbUNvbG9yO1xuICByZWFkb25seSBib3JkZXJUeXBlPzogSW5wdXRCb3JkZXJUeXBlO1xuICByZWFkb25seSBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IGlkPzogc3RyaW5nO1xuICByZWFkb25seSBsYWJlbD86IHN0cmluZztcbiAgcmVhZG9ubHkgbXVsdGlsaW5lPzogYm9vbGVhbjtcbiAgcmVhZG9ubHkgcGxhY2Vob2xkZXJDb2xvcj86IEdvdGhhbUNvbG9yO1xuICByZWFkb25seSB0ZXh0Q29sb3I/OiBHb3RoYW1Db2xvcjtcbn1cblxuZXhwb3J0IGNvbnN0IGJhc2VDbGFzc2VzID0ge1xuICBub25lOiAnJyxcbiAgcm91bmRlZDogJ3ctZnVsbCByb3VuZGVkLW1kIG91dGxpbmUtMSBvdXRsaW5lLXNvbGlkIGZvY3VzOm91dGxpbmUtMyBweC0zLjUgcHktMiBzbTp0ZXh0LXNtIHNtOmxlYWRpbmctNiBiZy13aGl0ZS8zMCBkYXJrOmJnLWJsYWNrLzMwJyxcbiAgc29saWQ6ICd3LWZ1bGwgb3V0bGluZS0xIG91dGxpbmUtc29saWQgZm9jdXM6b3V0bGluZS0zIHB4LTMuNSBweS0yIHNtOnRleHQtc20gc206bGVhZGluZy02IGJnLXdoaXRlLzMwIGRhcms6YmctYmxhY2svMzAnLFxuICB1bmRlcmxpbmU6ICd3LWZ1bGwgYm9yZGVyLWItMiBmb2N1czpib3JkZXItYi0zIGF1dG9maWxsOmJnLXRyYW5zcGFyZW50IG91dGxpbmUtbm9uZSBweS0yIHNtOnRleHQtc20gc206bGVhZGluZy02J1xufTtcblxuZXhwb3J0IGNvbnN0IGdldElucHV0Qm9yZGVyQ2xhc3MgPSAoXG4gIGJvcmRlclR5cGU6IElucHV0Qm9yZGVyVHlwZSxcbiAgYm9yZGVyQ29sb3I6IEdvdGhhbUNvbG9yLFxuICB0ZXh0Q29sb3I6IEdvdGhhbUNvbG9yLFxuICBwbGFjZWhvbGRlckNvbG9yOiBHb3RoYW1Db2xvclxuKSA9PiBjbihcbiAgYmFzZUNsYXNzZXNbYm9yZGVyVHlwZV0sXG4gIGdldFRleHRDbGFzc2VzKHRleHRDb2xvciksXG4gIGJvcmRlclR5cGUgPT09ICd1bmRlcmxpbmUnXG4gICAgPyBnZXRCb3JkZXJDbGFzc2VzKGJvcmRlckNvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSlcbiAgICA6ICcnLFxuICBib3JkZXJUeXBlID09PSAncm91bmRlZCcgfHwgYm9yZGVyVHlwZSA9PT0gJ3NvbGlkJ1xuICAgID8gZ2V0T3V0bGluZUNsYXNzZXMoYm9yZGVyQ29sb3IsIHtoYXNGb2N1czogdHJ1ZSwgaGFzSG92ZXI6IHRydWV9KVxuICAgIDogJycsXG4gIGdldFBsYWNlaG9sZGVyQ2xhc3NlcyhwbGFjZWhvbGRlckNvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSlcbik7XG5cbmV4cG9ydCBjb25zdCBJbnB1dEZpZWxkID0gZm9yd2FyZFJlZjxIVE1MSW5wdXRFbGVtZW50IHwgSFRNTFRleHRBcmVhRWxlbWVudCwgSW5wdXRGaWVsZFByb3BzPigoe1xuICBib3JkZXJDb2xvciA9ICduZXV0cmFsJyxcbiAgYm9yZGVyVHlwZSA9ICdzb2xpZCcsXG4gIGNsYXNzTmFtZSxcbiAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgbGFiZWwsXG4gIG11bHRpbGluZSA9IGZhbHNlLFxuICBwbGFjZWhvbGRlckNvbG9yID0gJ25ldXRyYWwnLFxuICB0ZXh0Q29sb3IgPSAnbmV1dHJhbCcsXG4gIC4uLmlucHV0UHJvcHNcbn0sIHJlZikgPT4ge1xuICBjb25zdCBib3JkZXJDbGFzc2VzID0gdXNlTWVtbyhcbiAgICAoKSA9PiBnZXRJbnB1dEJvcmRlckNsYXNzKGJvcmRlclR5cGUsIGJvcmRlckNvbG9yLCB0ZXh0Q29sb3IsIHBsYWNlaG9sZGVyQ29sb3IpLFxuICAgIFtib3JkZXJUeXBlLCBib3JkZXJDb2xvciwgdGV4dENvbG9yLCBwbGFjZWhvbGRlckNvbG9yXVxuICApO1xuXG4gIGNvbnN0IGlucHV0Q2xhc3NlcyA9IHVzZU1lbW8oXG4gICAgKCkgPT4gY24oXG4gICAgICBjbGFzc05hbWUsXG4gICAgICBkaXNhYmxlZCA/ICd0ZXh0LW5ldXRyYWwvMzAgZGFyazp0ZXh0LW5ldXRyYWwtZGFyay8zMCBvdXRsaW5lLW5ldXRyYWwvMzAgZGFyazpvdXRsaW5lLW5ldXRyYWwtZGFyay8zMCcgOiBib3JkZXJDbGFzc2VzLFxuICAgICAgbXVsdGlsaW5lICYmICdtaW4taC1bMTAwcHhdIHJlc2l6ZS15J1xuICAgICksXG4gICAgW2NsYXNzTmFtZSwgYm9yZGVyQ2xhc3NlcywgZGlzYWJsZWQsIG11bHRpbGluZV1cbiAgKTtcblxuICByZXR1cm4gbXVsdGlsaW5lID8gKFxuICAgIDx0ZXh0YXJlYVxuICAgICAgey4uLmlucHV0UHJvcHMgYXMgVGV4dGFyZWFIVE1MQXR0cmlidXRlczxIVE1MVGV4dEFyZWFFbGVtZW50Pn1cbiAgICAgIGNsYXNzTmFtZT17aW5wdXRDbGFzc2VzfVxuICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgcmVmPXtyZWYgYXMgUmVmPEhUTUxUZXh0QXJlYUVsZW1lbnQ+fVxuICAgIC8+XG4gICkgOiAoXG4gICAgPGlucHV0XG4gICAgICB7Li4uaW5wdXRQcm9wcyBhcyBJbnB1dEhUTUxBdHRyaWJ1dGVzPEhUTUxJbnB1dEVsZW1lbnQ+fVxuICAgICAgY2xhc3NOYW1lPXtpbnB1dENsYXNzZXN9XG4gICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICByZWY9e3JlZiBhcyBSZWY8SFRNTElucHV0RWxlbWVudD59XG4gICAgLz5cbiAgKTtcbn0pOyJdLAogICJtYXBwaW5ncyI6ICJBQUlBLFNBQVEsVUFBUztBQUNqQixTQUFRLFlBQVksZUFBYztBQUVsQztBQUFBLEVBQ0U7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxPQUNLO0FBb0VIO0FBbERHLE1BQU0sY0FBYztBQUFBLEVBQ3pCLE1BQU07QUFBQSxFQUNOLFNBQVM7QUFBQSxFQUNULE9BQU87QUFBQSxFQUNQLFdBQVc7QUFDYjtBQUVPLE1BQU0sc0JBQXNCLENBQ2pDLFlBQ0EsYUFDQSxXQUNBLHFCQUNHO0FBQUEsRUFDSCxZQUFZLFVBQVU7QUFBQSxFQUN0QixlQUFlLFNBQVM7QUFBQSxFQUN4QixlQUFlLGNBQ1gsaUJBQWlCLGFBQWEsRUFBQyxVQUFVLE1BQU0sVUFBVSxLQUFJLENBQUMsSUFDOUQ7QUFBQSxFQUNKLGVBQWUsYUFBYSxlQUFlLFVBQ3ZDLGtCQUFrQixhQUFhLEVBQUMsVUFBVSxNQUFNLFVBQVUsS0FBSSxDQUFDLElBQy9EO0FBQUEsRUFDSixzQkFBc0Isa0JBQWtCLEVBQUMsVUFBVSxNQUFNLFVBQVUsS0FBSSxDQUFDO0FBQzFFO0FBRU8sTUFBTSxhQUFhLFdBQW9FLENBQUM7QUFBQSxFQUM3RixjQUFjO0FBQUEsRUFDZCxhQUFhO0FBQUEsRUFDYjtBQUFBLEVBQ0EsV0FBVztBQUFBLEVBQ1g7QUFBQSxFQUNBLFlBQVk7QUFBQSxFQUNaLG1CQUFtQjtBQUFBLEVBQ25CLFlBQVk7QUFBQSxFQUNaLEdBQUc7QUFDTCxHQUFHLFFBQVE7QUFDVCxRQUFNLGdCQUFnQjtBQUFBLElBQ3BCLE1BQU0sb0JBQW9CLFlBQVksYUFBYSxXQUFXLGdCQUFnQjtBQUFBLElBQzlFLENBQUMsWUFBWSxhQUFhLFdBQVcsZ0JBQWdCO0FBQUEsRUFDdkQ7QUFFQSxRQUFNLGVBQWU7QUFBQSxJQUNuQixNQUFNO0FBQUEsTUFDSjtBQUFBLE1BQ0EsV0FBVyw4RkFBOEY7QUFBQSxNQUN6RyxhQUFhO0FBQUEsSUFDZjtBQUFBLElBQ0EsQ0FBQyxXQUFXLGVBQWUsVUFBVSxTQUFTO0FBQUEsRUFDaEQ7QUFFQSxTQUFPLFlBQ0w7QUFBQSxJQUFDO0FBQUE7QUFBQSxNQUNFLEdBQUc7QUFBQSxNQUNKLFdBQVc7QUFBQSxNQUNYO0FBQUEsTUFDQTtBQUFBO0FBQUEsRUFDRixJQUVBO0FBQUEsSUFBQztBQUFBO0FBQUEsTUFDRSxHQUFHO0FBQUEsTUFDSixXQUFXO0FBQUEsTUFDWDtBQUFBLE1BQ0E7QUFBQTtBQUFBLEVBQ0Y7QUFFSixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=