commonux2
Version:
A collection of styled components for use in ABB projects, designed for React and Next.js. It features TypeScript support, integrates Lucide icons, and is built on Radix primitives with Tailwind CSS.
67 lines (66 loc) • 3.97 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import * as React from "react";
import { AlertCircleIcon, CircleCheck, SearchIcon } from "lucide-react";
import { cva } from "class-variance-authority";
import clsx from "clsx";
import { cn } from "../../lib/utils";
import { Label } from "../label";
const inputVariants = cva("flex h-9 w-full rounded-md border-2 border-stone-200 bg-background px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed", {
variants: {
variant: {
search: "pr-8",
error: "pr-8 border-2 border-red-500",
warn: "pr-8 border-2 border-orange-500",
success: "pr-8 border-2 border-green-600",
},
size: {
default: "h-8",
sm: "h-8 text-[13px]",
md: "h-10",
lg: "h-11",
},
},
});
function inputHeightClass(size, variant) {
if (variant == "search") {
return clsx({
"right-2.5 top-[0.51rem]": size == "sm",
"right-2.5 top-[0.5rem]": size == "default",
"right-2.5 top-[0.75rem]": size == "md",
"right-2.5 top-[0.78rem] w-5 h-5": size == "lg",
});
}
return clsx({
"right-2 top-1.5": size == "sm",
"right-2 top-[0.52rem]": size == "default",
"right-2 top-[0.6rem]": size == "md",
"right-2 top-2.5 h-6 w-6": size == "lg",
});
}
const Input = React.forwardRef((_a, ref) => {
var { className, variant, type, label, description, required, id = "inputbox", showIcons = true, disabled, size = "default" } = _a, props = __rest(_a, ["className", "variant", "type", "label", "description", "required", "id", "showIcons", "disabled", "size"]);
return (React.createElement("div", { className: "flex flex-col gap-1" },
label && (React.createElement(Label, { className: "text-abb-grey-90 pl-0.5", htmlFor: id },
label,
" ",
required && (React.createElement("span", { className: cn("text-destructive text-sm", !required && "opacity-0") }, "*")))),
React.createElement("div", { className: "relative" },
variant == "error" && showIcons && (React.createElement(AlertCircleIcon, { className: cn("absolute w-5 h-5 text-white fill-destructive", inputHeightClass(size)) })),
variant == "search" && showIcons && (React.createElement(SearchIcon, { className: cn("absolute w-4 h-4 text-muted-foreground text-stone-500", inputHeightClass(size, variant)) })),
variant == "success" && showIcons && (React.createElement(CircleCheck, { className: cn("absolute w-5 h-5 text-white fill-green-600", inputHeightClass(size)) })),
variant == "warn" && showIcons && (React.createElement(AlertCircleIcon, { className: cn("absolute w-5 h-5 text-white fill-orange-500", inputHeightClass(size)) })),
React.createElement("input", Object.assign({ id: id, required: required, type: type, className: cn(inputVariants({ variant, className, size }), disabled && "bg-stone-200 !border-stone-300"), ref: ref, disabled: disabled }, props))),
description && (React.createElement("p", { className: cn("text-[14px] text-muted-foreground", variant == "error" && "text-destructive", variant == "success" && "text-green-600", variant == "warn" && "text-orange-500") }, description))));
});
Input.displayName = "Input";
export { Input, inputVariants };