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.
87 lines (86 loc) • 6.71 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 * as SelectPrimitive from "@radix-ui/react-select";
import { Label } from "../label";
import { Check, ChevronDown, ChevronUp } from "lucide-react";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils";
const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const selectTriggerVariants = cva("flex h-10 w-full items-center justify-between rounded-md border border-[#dbdbdb] bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 disabled:bg-[#dbdbdb]", {
variants: {
variant: {
search: "pr-2.5",
error: "pr-2.5 border-2 border-red-500",
warn: "pr-2.5 border-2 border-orange-500",
success: "pr-2.5 border-2 border-green-600",
},
},
});
const SelectTrigger = React.forwardRef((_a, ref) => {
var { className, variant, label, description, showIcons = true, id = "selectbox", children } = _a, props = __rest(_a, ["className", "variant", "label", "description", "showIcons", "id", "children"]);
return (React.createElement("div", { className: "flex flex-col gap-3" },
label && (React.createElement(Label, { className: "text-abb-grey-90 pl-0.5", htmlFor: id }, label)),
React.createElement("div", { className: "relative w-full" },
React.createElement(SelectPrimitive.Trigger, Object.assign({ ref: ref, className: cn(selectTriggerVariants({ variant, className })) }, props),
children,
React.createElement(SelectPrimitive.Icon, { asChild: true },
React.createElement(ChevronDown, { className: "w-4 h-4 opacity-50" })))),
description && (React.createElement("p", { className: cn("text-[14px] text-muted-foreground -mt-2", variant == "error" && "text-destructive", variant == "success" && "text-green-600", variant == "warn" && "text-orange-500") }, description))));
});
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectScrollUpButton = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(SelectPrimitive.ScrollUpButton, Object.assign({ ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className) }, props),
React.createElement(ChevronUp, { className: "w-4 h-4" })));
});
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
const SelectScrollDownButton = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(SelectPrimitive.ScrollDownButton, Object.assign({ ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className) }, props),
React.createElement(ChevronDown, { className: "w-4 h-4" })));
});
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName;
const SelectContent = React.forwardRef((_a, ref) => {
var { className, children, position = "popper" } = _a, props = __rest(_a, ["className", "children", "position"]);
return (React.createElement(SelectPrimitive.Portal, null,
React.createElement(SelectPrimitive.Content, Object.assign({ ref: ref, className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position }, props),
React.createElement(SelectScrollUpButton, null),
React.createElement(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]") }, children),
React.createElement(SelectScrollDownButton, null))));
});
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(SelectPrimitive.Label, Object.assign({ ref: ref, className: cn("py-1.5 pl-4 pr-2 text-sm font-semibold", className) }, props)));
});
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = React.forwardRef((_a, ref) => {
var { className, children } = _a, props = __rest(_a, ["className", "children"]);
return (React.createElement(SelectPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-4 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className) }, props),
React.createElement(SelectPrimitive.ItemText, { className: "pr-2" }, children),
React.createElement("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center" },
React.createElement(SelectPrimitive.ItemIndicator, null,
React.createElement(Check, { className: "w-4 h-4" })))));
});
SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(SelectPrimitive.Separator, Object.assign({ ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className) }, props)));
});
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };