@devup-ui/components 0.1.0 → 0.1.2

package/README.md

@@ -82,31 +82,28 @@ Devup UI is a CSS in JS preprocessor that does not require runtime.
 Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
 We develop a preprocessor that considers all grammatical cases.
 
-```jsx
-// Before
-<Box bg={"red"}/>
-// After
-<Box className={"d0"}/>
+```typescript
+const before = <Box bg={"red"}/>
+
+const after = <div className="d0"/>
 ```
 
 Variables are fully supported.
 
-```jsx
-// Before
-<Box bg={colorVariable}/>
-// After
-<Box className={"d0"} style={{
+```typescript
+const before = <Box bg={colorVariable}/>
+
+const after = <div className="d0" style={{
     "--d0": colorVariable
 }}/>
 ```
 
 Various expressions and responsiveness are also fully supported.
 
-```jsx
-// Before
-<Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-// After
-<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
+```typescript
+const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
+
+const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
     "--d2": variable
 }}/>
 ```
@@ -130,7 +127,7 @@ Support Theme with Typing
 }
 ```
 
-```jsx
+```typescript
 // Type Safe
 <Text color="$text"/>
 ```
@@ -139,11 +136,10 @@ Support Responsive And Pseudo Selector
 
 You can use responsive and pseudo selector.
 
-```jsx
+```typescript
 // Responsive with Selector
-<Box _hover={{bg: ["red", "blue"]}}/>
-
-// Another way
-<Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
+const box = <Box _hover={{bg: ["red", "blue"]}}/>
 
+// Same
+const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```

package/dist/components/Button/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),a=require("@devup-ui/react"),d=require("clsx"),y=a.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"});function f({variant:e="default",type:u="button",colors:r,danger:t=!1,children:n,size:o="md",className:m,icon:i,ellipsis:s=!1,typography:x,disabled:p,...b}){return l.jsx(a.Button,{_active:{primary:{bg:"color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)"},default:{bg:{true:"var(--error, #D52B2E)",false:"color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)"}[t.toString()],border:{true:"1px solid var(--error, #D52B2E)",false:"1px solid var(--primary, #8163E1)"}[t.toString()],color:"#000"}}[e],_disabled:{primary:{color:"#D6D7DE",bgColor:"#F0F0F3",cursor:"not-allowed"},default:{color:"#D6D7DE",bgColor:"#F0F0F3",cursor:"not-allowed",borderColor:"var(--border, #E4E4E4)"}}[e],_focusVisible:{outline:"2px solid",outlineColor:{primary:"var(--primaryFocus, #9385D3)",default:{true:"var(--error, #FF5B5E)",false:"var(--primaryFocus, #9385D3)"}[t.toString()]}[e]},_hover:{primary:{bg:"color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)"},default:{borderColor:{true:"var(--error, #D52B2E)",false:"var(--primary, #8163E1)"}[t.toString()],bg:!t&&"color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)"}}[e],_themeDark:{_active:{primary:{bg:"color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);"},default:{bg:{true:"var(--error, #FF5B5E)",false:"var(--primary, #8163E1)"}[t.toString()],color:"var(--text, #F6F6F6)"}}[e],_disabled:{primary:{color:"#373737",bgColor:"#47474A",borderColor:"transparent"},default:{color:"#373737",bgColor:"#47474A",borderColor:"transparent"}}[e],_hover:{primary:{bg:"color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);",outlineColor:"var(--primary, #674DC7)"},default:{borderColor:{true:"var(--error, #FF5B5E)",false:"var(--primary, #8163E1)"}[t.toString()],bg:!t&&"color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)"}}[e],_focusVisible:{outlineColor:{primary:"var(--primaryFocus, #927CE4)",default:{true:"var(--error, #D52B2E)",false:"var(--primaryFocus, #927CE4)"}[t.toString()]}[e]},bg:{primary:"var(--primary, #8163E1)",default:"var(--inputBackground, #2E2E2E)"}[e]},"aria-disabled":p,"aria-label":"button",bg:{primary:"var(--primary, #8163E1)",default:"var(--inputBackground, #FFF)"}[e],border:{primary:"none",default:"1px solid var(--border, #E4E4E4)"}[e],borderRadius:{primary:"8px",default:"10px"}[e],boxSizing:"border-box",className:m,color:{primary:"#FFF",default:{true:"var(--error, #D52B2E)",false:"var(--text, #272727)"}[t.toString()]}[e],cursor:"pointer",disabled:p,fontSize:{default:["14px",null,null,null,"15px"],primary:["15px",null,null,null,"16px"]}[e],fontWeight:700,letterSpacing:{default:["-0.02em",null,null,null,"-0.03em"],primary:["0px",null,null,null,"-0.01em"]}[e],outlineOffset:"2px",pos:"relative",px:{false:{sm:"12px",md:"16px",lg:"20px"}[o],true:{sm:"24px",md:"28px",lg:"32px"}[o]}[(!!i).toString()],py:{sm:"8px",md:"10px",lg:"12px"}[o],styleOrder:1,styleVars:{primary:r==null?void 0:r.primary,error:r==null?void 0:r.error,text:r==null?void 0:r.text,border:r==null?void 0:r.border,inputBackground:r==null?void 0:r.inputBackground,primaryFocus:r==null?void 0:r.primaryFocus},transition:".25s",type:u,typography:x,...b,children:l.jsxs(a.Box,{maxW:"100%",mx:"auto",pos:"relative",w:"fit-content",children:[i&&l.jsx(a.Center,{boxSize:"24px",left:"4px",pos:"absolute",role:"presentation",selectors:{"&>svg":{color:"inherit"}},top:"50%",transform:"translate(-100%, -50%)",children:i}),l.jsx(a.Box,{className:d.clsx(s&&y),lineHeight:"1.2",minH:"1.2em",transform:!!i&&"translateX(8px)",children:n})]})})}exports.Button=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),a=require("@devup-ui/react"),d=require("clsx"),y=a.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"});function f({variant:e="default",type:u="button",colors:r,danger:t=!1,children:n,size:o="md",className:m,icon:i,ellipsis:x=!1,typography:s,disabled:p,...b}){return l.jsx(a.Button,{_active:{primary:{bg:"color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)"},default:{bg:{true:"var(--error, #D52B2E)",false:"color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)"}[t.toString()],border:{true:"1px solid var(--error, #D52B2E)",false:"1px solid var(--primary, #8163E1)"}[t.toString()],color:"var(--text, #272727)"}}[e],_disabled:{primary:{color:"#D6D7DE",bgColor:"#F0F0F3",cursor:"not-allowed"},default:{color:"#D6D7DE",bgColor:"#F0F0F3",cursor:"not-allowed",borderColor:"var(--border, #E4E4E4)"}}[e],_focusVisible:{outline:"2px solid",outlineColor:{primary:"var(--primaryFocus, #9385D3)",default:{true:"var(--error, #FF5B5E)",false:"var(--primaryFocus, #9385D3)"}[t.toString()]}[e]},_hover:{primary:{bg:"color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)"},default:{borderColor:{true:"var(--error, #D52B2E)",false:"var(--primary, #8163E1)"}[t.toString()],bg:!t&&"color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)"}}[e],_themeDark:{_active:{primary:{bg:"color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);"},default:{bg:{true:"var(--error, #FF5B5E)",false:"var(--primary, #8163E1)"}[t.toString()],color:"var(--text, #F6F6F6)"}}[e],_disabled:{primary:{color:"#373737",bgColor:"#47474A",borderColor:"transparent"},default:{color:"#373737",bgColor:"#47474A",borderColor:"transparent"}}[e],_hover:{primary:{bg:"color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);",outlineColor:"var(--primary, #674DC7)"},default:{borderColor:{true:"var(--error, #FF5B5E)",false:"var(--primary, #8163E1)"}[t.toString()],bg:!t&&"color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)"}}[e],_focusVisible:{outlineColor:{primary:"var(--primaryFocus, #927CE4)",default:{true:"var(--error, #D52B2E)",false:"var(--primaryFocus, #927CE4)"}[t.toString()]}[e]},bg:{primary:"var(--primary, #8163E1)",default:"var(--inputBackground, #2E2E2E)"}[e]},"aria-disabled":p,"aria-label":"button",bg:{primary:"var(--primary, #8163E1)",default:"var(--inputBackground, #FFF)"}[e],border:{primary:"none",default:"1px solid var(--border, #E4E4E4)"}[e],borderRadius:{primary:"8px",default:"10px"}[e],boxSizing:"border-box",className:m,color:{primary:"#FFF",default:{true:"var(--error, #D52B2E)",false:"var(--text, #272727)"}[t.toString()]}[e],cursor:"pointer",disabled:p,fontSize:{default:["14px",null,null,null,"15px"],primary:["15px",null,null,null,"16px"]}[e],fontWeight:700,letterSpacing:{default:["-0.02em",null,null,null,"-0.03em"],primary:["0px",null,null,null,"-0.01em"]}[e],outlineOffset:"2px",pos:"relative",px:{false:{sm:"12px",md:"16px",lg:"20px"}[o],true:{sm:"24px",md:"28px",lg:"32px"}[o]}[(!!i).toString()],py:{sm:"8px",md:"10px",lg:"12px"}[o],styleOrder:1,styleVars:{primary:r==null?void 0:r.primary,error:r==null?void 0:r.error,text:r==null?void 0:r.text,border:r==null?void 0:r.border,inputBackground:r==null?void 0:r.inputBackground,primaryFocus:r==null?void 0:r.primaryFocus},transition:".25s",type:u,typography:s,...b,children:l.jsxs(a.Box,{maxW:"100%",mx:"auto",pos:"relative",w:"fit-content",children:[i&&l.jsx(a.Center,{boxSize:"24px",left:"4px",pos:"absolute",role:"presentation",selectors:{"&>svg":{color:"inherit"}},top:"50%",transform:"translate(-100%, -50%)",children:i}),l.jsx(a.Box,{className:d.clsx(x&&y),lineHeight:"1.2",minH:"1.2em",transform:!!i&&"translateX(8px)",children:n})]})})}exports.Button=f;

package/dist/components/Button/index.js

@@ -36,7 +36,7 @@ function B({
             true: "1px solid var(--error, #D52B2E)",
             false: "1px solid var(--primary, #8163E1)"
           }[t.toString()],
-          color: "#000"
+          color: "var(--text, #272727)"
         }
       }[e],
       _disabled: {

package/dist/components/Input/Controlled.d.ts

@@ -0,0 +1,2 @@
+export declare function Controlled(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Controlled.d.ts.map

package/dist/components/Input/Controlled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controlled.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Controlled.tsx"],"names":[],"mappings":"AAIA,wBAAgB,UAAU,4CAIzB"}

package/dist/components/Input/GlassIcon.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from 'react';
+export declare function GlassIcon(props: ComponentProps<'svg'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GlassIcon.d.ts.map

package/dist/components/Input/GlassIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Input/GlassIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAkBrD"}

package/dist/components/Input/Input.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from './index';
+type Story = StoryObj<typeof meta>;
+declare const meta: Meta<typeof Input>;
+export declare const Default: Story;
+export declare const ControlledInput: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const WithIcon: Story;
+export default meta;
+//# sourceMappingURL=Input.stories.d.ts.map

package/dist/components/Input/Input.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAItD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAU5B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Input/index.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("@devup-ui/react"),f=require("react");function C({defaultValue:a,value:v,onChange:n,typography:k,error:o=!1,errorMessage:p,allowClear:l=!0,icon:d,colors:e,disabled:u,className:F,classNames:r,ref:B,...y}){const[b,x]=f.useState(a||""),D=g=>{x(g.target.value),n==null||n(g)},E=()=>{x("")},j=b&&!u&&l;return t.jsxs(i.Box,{display:"inline-block",pos:"relative",selectors:{"&,&>*":{boxSizing:"border-box"}},children:[d&&t.jsx(i.Center,{"aria-label":"icon",boxSize:"24px",className:r==null?void 0:r.icon,color:u?"var(--inputDisabledText, light-dark(#D6D7DE, #373737))":"var(--iconBold, light-dark(#8D8C9A, #666577))",left:"12px",pos:"absolute",styleOrder:1,top:"50%",transform:"translateY(-50%)",children:d}),t.jsx(i.Input,{ref:B,_disabled:{_placeholder:{color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},bg:"var(--inputDisabledBg, light-dark(#F0F0F3, #414244))",border:"1px solid var(--border, light-dark(#E4E4E4, #434343))",color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},_focus:{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))",border:"1px solid var(--primary, light-dark(#674DC7, #8163E1))",outline:"none"},_hover:{border:"1px solid var(--primary, light-dark(red, blue))"},_placeholder:{color:"var(--inputPlaceholder, light-dark(#A9A8AB, #CBCBCB))"},"aria-label":"input",bg:"var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",borderColor:o?"var(--error, light-dark(#D52B2E, #FF5B5E))":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"8px",borderStyle:"solid",borderWidth:"1px",className:`${F||""} ${(r==null?void 0:r.input)||""}`.trim(),disabled:u,onChange:D,pl:d?"36px":"12px",pr:l?"36px":"12px",py:"12px",styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,error:e==null?void 0:e.error,text:e==null?void 0:e.text,base:e==null?void 0:e.base,iconBold:e==null?void 0:e.iconBold,border:e==null?void 0:e.border,inputBackground:e==null?void 0:e.inputBackground,primaryFocus:e==null?void 0:e.primaryFocus,negative20:e==null?void 0:e.negative20},transition:"all 0.1s ease-in-out",typography:k,value:v??b,...y}),j&&t.jsx(h,{onClick:E}),p&&t.jsx(i.Text,{"aria-label":"error-message",bottom:"-8px",className:r==null?void 0:r.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",typography:"inputPlaceholder",children:p})]})}function h(a){return t.jsx(i.Button,{alignItems:"center","aria-label":"clear-button",bg:"var(--negative20, light-dark(#0003, #FFF6))",border:"none",borderRadius:"50%",boxSize:"20px",color:"var(--base, light-dark(#FFF, #000))",cursor:"pointer",display:"flex",justifyContent:"center",p:"2px",pos:"absolute",right:"12px",styleOrder:1,top:"50%",transform:"translateY(-50%)",...a,children:t.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("path",{d:"M18 6L6 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"}),t.jsx("path",{d:"M6 6L18 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})]})})}exports.ClearButton=h;exports.Input=C;

package/dist/components/Input/index.d.ts

@@ -0,0 +1,30 @@
+import { DevupThemeTypography } from '@devup-ui/react';
+import { ComponentProps } from 'react';
+interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
+    type?: Exclude<ComponentProps<'input'>['type'], 'file'>;
+    typography?: keyof DevupThemeTypography;
+    error?: boolean;
+    errorMessage?: string;
+    allowClear?: boolean;
+    classNames?: {
+        input?: string;
+        icon?: string;
+        errorMessage?: string;
+    };
+    colors?: {
+        primary?: string;
+        error?: string;
+        text?: string;
+        base?: string;
+        iconBold?: string;
+        border?: string;
+        inputBackground?: string;
+        primaryFocus?: string;
+        negative20?: string;
+    };
+    icon?: React.ReactNode;
+}
+export declare function Input({ defaultValue, value: valueProp, onChange: onChangeProp, typography, error, errorMessage, allowClear, icon, colors, disabled, className, classNames, ref, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClearButton(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAEhD,UAAU,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,UAAU,EACV,KAAa,EACb,YAAY,EACZ,UAAiB,EACjB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,2CA4GZ;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CA6C1D"}

package/dist/components/Input/index.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
+import { Box as f, Center as C, Input as m, Text as A, Button as L } from "@devup-ui/react";
+import { useState as j } from "react";
+function O({
+  defaultValue: i,
+  value: x,
+  onChange: a,
+  typography: k,
+  error: v = !1,
+  errorMessage: p,
+  allowClear: u = !0,
+  icon: n,
+  colors: r,
+  disabled: d,
+  className: o,
+  classNames: t,
+  ref: F,
+  ...B
+}) {
+  const [l, b] = j(i || ""), y = (h) => {
+    b(h.target.value), a == null || a(h);
+  }, D = () => {
+    b("");
+  }, E = l && !d && u;
+  return /* @__PURE__ */ g(
+    f,
+    {
+      display: "inline-block",
+      pos: "relative",
+      selectors: { "&,&>*": { boxSizing: "border-box" } },
+      children: [
+        n && /* @__PURE__ */ e(
+          C,
+          {
+            "aria-label": "icon",
+            boxSize: "24px",
+            className: t == null ? void 0 : t.icon,
+            color: d ? "var(--inputDisabledText, light-dark(#D6D7DE, #373737))" : "var(--iconBold, light-dark(#8D8C9A, #666577))",
+            left: "12px",
+            pos: "absolute",
+            styleOrder: 1,
+            top: "50%",
+            transform: "translateY(-50%)",
+            children: n
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            ref: F,
+            _disabled: {
+              _placeholder: {
+                color: "var(--inputDisabledText, light-dark(#D6D7DE, #373737))"
+              },
+              bg: "var(--inputDisabledBg, light-dark(#F0F0F3, #414244))",
+              border: "1px solid var(--border, light-dark(#E4E4E4, #434343))",
+              color: "var(--inputDisabledText, light-dark(#D6D7DE, #373737))"
+            },
+            _focus: {
+              bg: "var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))",
+              border: "1px solid var(--primary, light-dark(#674DC7, #8163E1))",
+              outline: "none"
+            },
+            _hover: {
+              border: "1px solid var(--primary, light-dark(red, blue))"
+            },
+            _placeholder: {
+              color: "var(--inputPlaceholder, light-dark(#A9A8AB, #CBCBCB))"
+            },
+            "aria-label": "input",
+            bg: "var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",
+            borderColor: v ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
+            borderRadius: "8px",
+            borderStyle: "solid",
+            borderWidth: "1px",
+            className: `${o || ""} ${(t == null ? void 0 : t.input) || ""}`.trim(),
+            disabled: d,
+            onChange: y,
+            pl: n ? "36px" : "12px",
+            pr: u ? "36px" : "12px",
+            py: "12px",
+            styleOrder: 1,
+            styleVars: {
+              primary: r == null ? void 0 : r.primary,
+              error: r == null ? void 0 : r.error,
+              text: r == null ? void 0 : r.text,
+              base: r == null ? void 0 : r.base,
+              iconBold: r == null ? void 0 : r.iconBold,
+              border: r == null ? void 0 : r.border,
+              inputBackground: r == null ? void 0 : r.inputBackground,
+              primaryFocus: r == null ? void 0 : r.primaryFocus,
+              negative20: r == null ? void 0 : r.negative20
+            },
+            transition: "all 0.1s ease-in-out",
+            typography: k,
+            value: x ?? l,
+            ...B
+          }
+        ),
+        E && /* @__PURE__ */ e(w, { onClick: D }),
+        p && /* @__PURE__ */ e(
+          A,
+          {
+            "aria-label": "error-message",
+            bottom: "-8px",
+            className: t == null ? void 0 : t.errorMessage,
+            color: "var(--error, light-dark(#D52B2E, #FF5B5E))",
+            left: "0",
+            pos: "absolute",
+            styleOrder: 1,
+            transform: "translateY(100%)",
+            typography: "inputPlaceholder",
+            children: p
+          }
+        )
+      ]
+    }
+  );
+}
+function w(i) {
+  return /* @__PURE__ */ e(
+    L,
+    {
+      alignItems: "center",
+      "aria-label": "clear-button",
+      bg: "var(--negative20, light-dark(#0003, #FFF6))",
+      border: "none",
+      borderRadius: "50%",
+      boxSize: "20px",
+      color: "var(--base, light-dark(#FFF, #000))",
+      cursor: "pointer",
+      display: "flex",
+      justifyContent: "center",
+      p: "2px",
+      pos: "absolute",
+      right: "12px",
+      styleOrder: 1,
+      top: "50%",
+      transform: "translateY(-50%)",
+      ...i,
+      children: /* @__PURE__ */ g(
+        "svg",
+        {
+          fill: "none",
+          height: "24",
+          viewBox: "0 0 24 24",
+          width: "24",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ e(
+              "path",
+              {
+                d: "M18 6L6 18",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "path",
+              {
+                d: "M6 6L18 18",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  w as ClearButton,
+  O as Input
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components/Button/index.cjs");exports.Button=t.Button;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components/Button/index.cjs"),e=require("./components/Input/index.cjs");exports.Button=t.Button;exports.Input=e.Input;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { Button } from './components/Button';
+export { Input } from './components/Input';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/index.js

@@ -1,4 +1,6 @@
 import { Button as r } from "./components/Button/index.js";
+import { Input as e } from "./components/Input/index.js";
 export {
-  r as Button
+  r as Button,
+  e as Input
 };

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -36,28 +36,28 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "csstype": "^3.1.3",
-    "react": "^19.1.0",
+    "react": "^19.1.1",
     "clsx": "^2.1",
-    "@devup-ui/react": "1.0.8"
+    "@devup-ui/react": "1.0.15"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "9.0.15",
-    "@storybook/addon-onboarding": "^9.0.15",
-    "@storybook/react-vite": "^9.0.15",
-    "@types/react": "^19.1.8",
-    "eslint-plugin-storybook": "9.0.15",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-onboarding": "^9.1.1",
+    "@storybook/react-vite": "^9.1.1",
+    "@types/react": "^19.1.9",
+    "eslint-plugin-storybook": "^9.1.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^9.0.15",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "storybook": "^9.1.1",
+    "typescript": "^5.9.2",
+    "vite": "^7.0.6",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@devup-ui/vite-plugin": "1.0.12"
+    "@devup-ui/vite-plugin": "1.0.26"
   },
   "peerDependencies": {
     "csstype": "*",
     "react": "*",
-    "@devup-ui/react": "1.0.8"
+    "@devup-ui/react": "1.0.15"
   },
   "scripts": {
     "lint": "eslint",