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

A design system with individually importable components

var __create=Object.create;var{getPrototypeOf:__getProtoOf,defineProperty:__defProp,getOwnPropertyNames:__getOwnPropNames,getOwnPropertyDescriptor:__getOwnPropDesc}=Object,__hasOwnProp=Object.prototype.hasOwnProperty;function __accessProp(key){return this[key]}var __reExport=(target,mod,secondTarget)=>{var keys=__getOwnPropNames(mod);for(let key of keys)if(!__hasOwnProp.call(target,key)&&key!=="default")__defProp(target,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(secondTarget){for(let key of keys)if(!__hasOwnProp.call(secondTarget,key)&&key!=="default")__defProp(secondTarget,key,{get:__accessProp.bind(mod,key),enumerable:!0});return secondTarget}},__toESMCache_node,__toESMCache_esm,__toESM=(mod,isNodeMode,target)=>{var canCache=mod!=null&&typeof mod==="object";if(canCache){var cache=isNodeMode?__toESMCache_node??=new WeakMap:__toESMCache_esm??=new WeakMap,cached=cache.get(mod);if(cached)return cached}target=mod!=null?__create(__getProtoOf(mod)):{};let to=isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target;for(let key of __getOwnPropNames(mod))if(!__hasOwnProp.call(to,key))__defProp(to,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(canCache)cache.set(mod,to);return to},__toCommonJS=(from)=>{var entry=(__moduleCache??=new WeakMap).get(from),desc;if(entry)return entry;if(entry=__defProp({},"__esModule",{value:!0}),from&&typeof from==="object"||typeof from==="function"){for(var key of __getOwnPropNames(from))if(!__hasOwnProp.call(entry,key))__defProp(entry,key,{get:__accessProp.bind(from,key),enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return __moduleCache.set(from,entry),entry},__moduleCache;var __returnValue=(v)=>v;function __exportSetter(name,newValue){this[name]=__returnValue.bind(null,newValue)}var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0,configurable:!0,set:__exportSetter.bind(all,name)})};var exports_input={};__export(exports_input,{Input:()=>Input});module.exports=__toCommonJS(exports_input);var import_button=require("@loke/design-system/button"),import_cn=require("@loke/design-system/cn"),import_icons=require("@loke/icons"),import_react=require("react"),jsx_runtime=require("react/jsx-runtime"),Input=import_react.forwardRef(({className,icon,onClear,type,...props},ref)=>{let displayIcon=((inputType)=>{if(icon)return icon;switch(inputType){case"time":return import_icons.Clock;case"date":case"datetime-local":return import_icons.Calendar;case"email":return import_icons.Mail;case"password":return import_icons.Lock;case"search":return import_icons.Search;default:return}})(type),isDateTimeInput=type==="date"||type==="time"||type==="datetime-local",classes=import_cn.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 jsx_runtime.jsxs("div",{className:"relative",children:[displayIcon&&jsx_runtime.jsx("div",{className:"pointer-events-none absolute top-1/2 left-3 z-10 -translate-y-1/2",children:import_react.createElement(displayIcon,{className:"size-4"})}),jsx_runtime.jsx("input",{className:import_cn.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_runtime.jsx(import_button.Button,{className:"absolute top-3 right-3 size-4 [&_svg]:size-4",onClick:onClear,size:"icon",variant:"ghost",children:jsx_runtime.jsx(import_icons.X,{size:"sm"})})]});return jsx_runtime.jsx("input",{className:classes,ref,type,...props})});Input.displayName="Input";