@loke/design-system/dist/components/input/index.mjs

A design system with individually importable components

import{Button}from"@loke/design-system/button";import{cn}from"@loke/design-system/cn";import{Calendar,Clock,Lock,Mail,Search,X}from"@loke/icons";import{createElement,forwardRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";var Input=forwardRef(({className,icon,onClear,type,...props},ref)=>{let displayIcon=((inputType)=>{if(icon)return icon;switch(inputType){case"time":return Clock;case"date":case"datetime-local":return Calendar;case"email":return Mail;case"password":return Lock;case"search":return Search;default:return}})(type),isDateTimeInput=type==="date"||type==="time"||type==="datetime-local",classes=cn("flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background","file:border-0 file:bg-transparent file:text-sm file:font-medium","placeholder:text-muted-foreground","focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50","[&::-webkit-outer-spin-button]:hidden [&::-webkit-inner-spin-button]:hidden",isDateTimeInput&&displayIcon&&"[&::-webkit-calendar-picker-indicator]:opacity-0",displayIcon&&"pl-8",className);if(displayIcon||onClear)return jsxs("div",{className:"relative",children:[displayIcon&&jsx("div",{className:"pointer-events-none absolute top-1/2 left-3 z-10 -translate-y-1/2",children:createElement(displayIcon,{className:"size-4"})}),jsx("input",{className:cn(classes,isDateTimeInput&&displayIcon&&"[&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:top-0 [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-8 [&::-webkit-calendar-picker-indicator]:cursor-pointer"),ref,type,...props}),onClear&&jsx(Button,{className:"absolute top-3 right-3 size-4 [&_svg]:size-4",onClick:onClear,size:"icon",variant:"ghost",children:jsx(X,{size:"sm"})})]});return jsx("input",{className:classes,ref,type,...props})});Input.displayName="Input";export{Input};