@telegraph/input 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @telegraph/input
+
+## 0.0.1
+
+### Patch Changes
+
+- [`5b0ad10`](https://github.com/knocklabs/telegraph/commit/5b0ad10f29a0f850a4ec3c4a4e5096b5df3b4591) Thanks [@kylemcd](https://github.com/kylemcd)! - initial version
+
+- Updated dependencies [[`5b0ad10`](https://github.com/knocklabs/telegraph/commit/5b0ad10f29a0f850a4ec3c4a4e5096b5df3b4591)]:
+  - @telegraph/compose-refs@0.0.1

package/README.md

@@ -0,0 +1,18 @@
+![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
+
+[![npm version](https://img.shields.io/npm/v/@telegraph/input.svg)](https://www.npmjs.com/package/@telegraph/input)
+
+# @telegraph/input
+> Input component with options
+
+## Installation Instructions
+
+```
+npm install @telegraph/input
+```
+
+### Add stylesheet
+```
+@import "@telegraph/input"
+```
+

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("@radix-ui/react-slot"),w=require("@telegraph/compose-refs"),l=require("clsx"),s=require("react"),a={Container:{1:"h-6 pl-0 rounded-2",2:"h-8 pl-0 rounded-2",3:"h-10 pl-0 rounded-3"},Input:{1:"text-1 px-1",2:"text-2 px-2",3:"text-3 px-3"},Slot:{1:"[&>[data-tgph-button]]:rounded-1",2:"[&>[data-tgph-button]]:rounded-1",3:"[&>[data-tgph-button]]:rounded-2"},SlotLeading:{1:"order-1 pl-1",2:"order-1 pl-2",3:"order-1 pl-3"},SlotTrailing:{1:"order-3 pr-1",2:"order-3 pr-2",3:"order-3 pr-3"}},R={Container:{default:{outline:"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8",ghost:"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8"},disabled:{outline:"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9",ghost:"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9"},error:{outline:"bg-surface-1 border-red-6",ghost:"bg-transparent border-red-6"}}},p=s.createContext({state:"default",size:"2",variant:"outline"}),b=s.forwardRef(({size:t="2",variant:e="outline",className:n,disabled:o,errored:f,children:x,...y},j)=>{const d=s.useRef(null),S=w.useComposedRefs(j,d),i=o?"disabled":f?"error":"default";return r.jsx(p.Provider,{value:{size:t,variant:e,state:i},children:r.jsxs("div",{className:l("box-border flex items-center transition-all","border-2 border-solid text-gray-12 placeholder:text-gray-10",R.Container[i][e],a.Container[t]),onPointerDown:c=>{if(c.target.closest("button, a")){c.preventDefault();return}const g=d.current;g&&requestAnimationFrame(()=>{g.focus()})},children:[r.jsx("input",{className:l("appearance-none text-gray-12 border-none shadow-0 outline-0 bg-transparent","[font-family:inherit] h-full w-full","order-2",a.Input[t],n),disabled:o,...y,ref:S}),x]})})}),u=s.forwardRef(({position:t="leading",...e},n)=>{const o=s.useContext(p);return r.jsx("div",{className:l("group box-border flex items-center justify-center h-full","[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto","[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0","[&>[data-tgph-button-layout='default']]:px-2","[&:has([data-tgph-button-layout='icon-only'])]:aspect-square","[&:has([data-tgph-button-layout='icon-only'])]:!p-1",t==="leading"&&a.SlotLeading[o.size],t==="trailing"&&a.SlotTrailing[o.size],a.Slot[e.size??o.size]),children:r.jsx(m.Slot,{size:o.size,...e,ref:n})})}),h=({LeadingComponent:t,TrailingComponent:e,...n})=>r.jsxs(b,{...n,children:[t&&r.jsx(u,{position:"leading",children:t}),e&&r.jsx(u,{position:"trailing",children:e})]});Object.assign(h,{Root:b,Slot:u});const q=h;exports.Input=q;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n  Container: {\n    \"1\": \"h-6 pl-0 rounded-2\",\n    \"2\": \"h-8 pl-0 rounded-2\",\n    \"3\": \"h-10 pl-0 rounded-3\",\n  },\n  Input: {\n    \"1\": \"text-1 px-1\",\n    \"2\": \"text-2 px-2\",\n    \"3\": \"text-3 px-3\",\n  },\n  Slot: {\n    \"1\": \"[&>[data-tgph-button]]:rounded-1\",\n    \"2\": \"[&>[data-tgph-button]]:rounded-1\",\n    \"3\": \"[&>[data-tgph-button]]:rounded-2\",\n  },\n  SlotLeading: {\n    \"1\": \"order-1 pl-1\",\n    \"2\": \"order-1 pl-2\",\n    \"3\": \"order-1 pl-3\",\n  },\n  SlotTrailing: {\n    \"1\": \"order-3 pr-1\",\n    \"2\": \"order-3 pr-2\",\n    \"3\": \"order-3 pr-3\",\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline:\n        \"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8\",\n      ghost:\n        \"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8\",\n    },\n    disabled: {\n      outline:\n        \"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n      ghost:\n        \"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n    },\n    error: {\n      outline: \"bg-surface-1 border-red-6\",\n      ghost: \"bg-transparent border-red-6\",\n    },\n  },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\ntype BaseRootProps = {\n  size?: keyof typeof SIZE.Container;\n  variant?: keyof typeof COLOR.Container.default;\n  errored?: boolean;\n};\n\ntype RootProps = BaseRootProps &\n  Omit<React.ComponentPropsWithoutRef<\"input\">, \"size\">;\n\ntype RootRef = HTMLInputElement;\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n  state: \"default\" | \"disabled\" | \"error\";\n};\n\ntype Required<T> = {\n  [P in keyof T]-?: T[P];\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n  state: \"default\",\n  size: \"2\",\n  variant: \"outline\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    {\n      size = \"2\",\n      variant = \"outline\",\n      className,\n      disabled,\n      errored,\n      children,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, inputRef);\n\n    const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n    return (\n      <InputContext.Provider value={{ size, variant, state }}>\n        <div\n          className={clsx(\n            \"box-border flex items-center transition-all\",\n            \"border-2 border-solid text-gray-12 placeholder:text-gray-10\",\n            COLOR.Container[state][variant],\n            SIZE.Container[size],\n          )}\n          // Focus the input when clicking on the container\n          onPointerDown={(event) => {\n            const target = event.target as HTMLElement;\n\n            // Make sure we're not clicking on an interactive element\n            if (target.closest(\"button, a\")) {\n              event.preventDefault();\n              return;\n            }\n\n            const input = inputRef.current;\n            if (!input) return;\n\n            requestAnimationFrame(() => {\n              input.focus();\n            });\n          }}\n        >\n          <input\n            className={clsx(\n              \"appearance-none text-gray-12 border-none shadow-0 outline-0 bg-transparent\",\n              \"[font-family:inherit] h-full w-full\",\n              \"order-2\",\n              SIZE.Input[size],\n              className,\n            )}\n            disabled={disabled}\n            {...props}\n            ref={composedRefs}\n          />\n          {children}\n        </div>\n      </InputContext.Provider>\n    );\n  },\n);\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: keyof typeof SIZE.Slot;\n  position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = React.ElementRef<typeof RadixSlot>;\n\nconst Slot = React.forwardRef<SlotRef, SlotProps>(\n  ({ position = \"leading\", ...props }, forwardedRef) => {\n    const context = React.useContext(InputContext);\n    return (\n      <div\n        className={clsx(\n          \"group box-border flex items-center justify-center h-full\",\n          \"[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto\",\n          // Overrides to match the icon button in figma\n          \"[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0\",\n          // Overrides default button layout to match the button in figma\n          \"[&>[data-tgph-button-layout='default']]:px-2\",\n          // If only an icon button is present, set the aspect ratio to square\n          \"[&:has([data-tgph-button-layout='icon-only'])]:aspect-square\",\n          // If only an icon button is present, reset the padding to spacing-1\n          \"[&:has([data-tgph-button-layout='icon-only'])]:!p-1\",\n          position === \"leading\" && SIZE.SlotLeading[context.size],\n          position === \"trailing\" && SIZE.SlotTrailing[context.size],\n          SIZE.Slot[props.size ?? context.size],\n        )}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </div>\n    );\n  },\n);\n\ntype DefaultProps = React.ComponentPropsWithoutRef<typeof Root> & {\n  LeadingComponent?: React.ReactNode;\n  TrailingComponent?: React.ReactNode;\n};\n\nconst Default = ({\n  LeadingComponent,\n  TrailingComponent,\n  ...props\n}: DefaultProps) => {\n  return (\n    <Root {...props}>\n      {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n      {TrailingComponent && (\n        <Slot position=\"trailing\">{TrailingComponent}</Slot>\n      )}\n    </Root>\n  );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n  Root: typeof Root;\n  Slot: typeof Slot;\n};\n\nexport { Input };\n"],"names":["SIZE","COLOR","InputContext","React","Root","size","variant","className","disabled","errored","children","props","forwardedRef","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","clsx","event","input","Slot","position","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"iOAAaA,EAAO,CAClB,UAAW,CACT,EAAK,qBACL,EAAK,qBACL,EAAK,qBACP,EACA,MAAO,CACL,EAAK,cACL,EAAK,cACL,EAAK,aACP,EACA,KAAM,CACJ,EAAK,mCACL,EAAK,mCACL,EAAK,kCACP,EACA,YAAa,CACX,EAAK,eACL,EAAK,eACL,EAAK,cACP,EACA,aAAc,CACZ,EAAK,eACL,EAAK,eACL,EAAK,cACP,CACF,EAEaC,EAAQ,CACnB,UAAW,CACT,QAAS,CACP,QACE,6EACF,MACE,uGACJ,EACA,SAAU,CACR,QACE,4HACF,MACE,4IACJ,EACA,MAAO,CACL,QAAS,4BACT,MAAO,6BACT,CACF,CACF,ECrBMC,EAAeC,EAAM,cAAuC,CAChE,MAAO,UACP,KAAM,IACN,QAAS,SACX,CAAC,EAEKC,EAAOD,EAAM,WACjB,CACE,CACE,KAAAE,EAAO,IACP,QAAAC,EAAU,UACV,UAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,GAELC,IACG,CACG,MAAAC,EAAWV,EAAM,OAAyB,IAAI,EAC9CW,EAAeC,EAAAA,gBAAgBH,EAAcC,CAAQ,EAErDG,EAAQR,EAAW,WAAaC,EAAU,QAAU,UAGxD,OAAAQ,MAACf,EAAa,SAAb,CAAsB,MAAO,CAAE,KAAAG,EAAM,QAAAC,EAAS,MAAAU,GAC7C,SAAAE,EAAA,KAAC,MAAA,CACC,UAAWC,EACT,8CACA,8DACAlB,EAAM,UAAUe,CAAK,EAAEV,CAAO,EAC9BN,EAAK,UAAUK,CAAI,CACrB,EAEA,cAAgBe,GAAU,CAIpB,GAHWA,EAAM,OAGV,QAAQ,WAAW,EAAG,CAC/BA,EAAM,eAAe,EACrB,MACF,CAEA,MAAMC,EAAQR,EAAS,QAClBQ,GAEL,sBAAsB,IAAM,CAC1BA,EAAM,MAAM,CAAA,CACb,CACH,EAEA,SAAA,CAAAJ,EAAA,IAAC,QAAA,CACC,UAAWE,EACT,6EACA,sCACA,UACAnB,EAAK,MAAMK,CAAI,EACfE,CACF,EACA,SAAAC,EACC,GAAGG,EACJ,IAAKG,CAAA,CACP,EACCJ,CAAA,CAAA,CAEL,CAAA,CAAA,CAEJ,CACF,EAQMY,EAAOnB,EAAM,WACjB,CAAC,CAAE,SAAAoB,EAAW,UAAW,GAAGZ,CAAA,EAASC,IAAiB,CAC9C,MAAAY,EAAUrB,EAAM,WAAWD,CAAY,EAE3C,OAAAe,EAAA,IAAC,MAAA,CACC,UAAWE,EACT,2DACA,8DAEA,wGAEA,+CAEA,+DAEA,sDACAI,IAAa,WAAavB,EAAK,YAAYwB,EAAQ,IAAI,EACvDD,IAAa,YAAcvB,EAAK,aAAawB,EAAQ,IAAI,EACzDxB,EAAK,KAAKW,EAAM,MAAQa,EAAQ,IAAI,CACtC,EAEA,SAAAP,EAAA,IAACQ,QAAU,KAAMD,EAAQ,KAAO,GAAGb,EAAO,IAAKC,EAAc,CAAA,CAAA,CAGnE,CACF,EAOMc,EAAU,CAAC,CACf,iBAAAC,EACA,kBAAAC,EACA,GAAGjB,CACL,IAEIO,EAAA,KAACd,EAAM,CAAA,GAAGO,EACP,SAAA,CAAAgB,GAAqBV,EAAA,IAAAK,EAAA,CAAK,SAAS,UAAW,SAAiBK,EAAA,EAC/DC,GACCX,EAAA,IAACK,EAAK,CAAA,SAAS,WAAY,SAAkBM,EAAA,CAEjD,CAAA,CAAA,EAIJ,OAAO,OAAOF,EAAS,CAAE,KAAAtB,EAAM,KAAAkB,CAAM,CAAA,EAErC,MAAMO,EAAQH"}

package/dist/css/default.css

@@ -0,0 +1 @@
+.tgph :is(.order-1){order:1}.tgph :is(.order-2){order:2}.tgph :is(.order-3){order:3}.tgph :is(.box-border){box-sizing:border-box}.tgph :is(.flex){display:flex}.tgph :is(.aspect-square){aspect-ratio:1 / 1}.tgph :is(.h-10){height:var(--tgph-spacing-10)}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.h-full){height:100%}.tgph :is(.w-full){width:100%}.tgph :is(.cursor-not-allowed){cursor:not-allowed}.tgph :is(.appearance-none){-webkit-appearance:none;-moz-appearance:none;appearance:none}.tgph :is(.items-center){align-items:center}.tgph :is(.justify-center){justify-content:center}.tgph :is(.rounded-2){border-radius:var(--tgph-rounded-2)}.tgph :is(.rounded-3){border-radius:var(--tgph-rounded-3)}.tgph :is(.border){border-width:1px}.tgph :is(.border-2){border-width:2px}.tgph :is(.border-solid){border-style:solid}.tgph :is(.border-none){border-style:none}.tgph :is(.border-gray-2){border-color:var(--tgph-gray-2)}.tgph :is(.border-gray-6){border-color:var(--tgph-gray-6)}.tgph :is(.border-red-6){border-color:var(--tgph-red-6)}.tgph :is(.border-transparent){border-color:var(--tgph-transparent)}.tgph :is(.bg-gray-2){background-color:var(--tgph-gray-2)}.tgph :is(.bg-surface-1){background-color:var(--tgph-surface-1)}.tgph :is(.bg-transparent){background-color:var(--tgph-transparent)}.tgph :is(.\!p-1){padding:var(--tgph-spacing-1)!important}.tgph :is(.px-1){padding-left:var(--tgph-spacing-1);padding-right:var(--tgph-spacing-1)}.tgph :is(.px-2){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.px-3){padding-left:var(--tgph-spacing-3);padding-right:var(--tgph-spacing-3)}.tgph :is(.pl-0){padding-left:var(--tgph-spacing-0)}.tgph :is(.pl-1){padding-left:var(--tgph-spacing-1)}.tgph :is(.pl-2){padding-left:var(--tgph-spacing-2)}.tgph :is(.pl-3){padding-left:var(--tgph-spacing-3)}.tgph :is(.pr-1){padding-right:var(--tgph-spacing-1)}.tgph :is(.pr-2){padding-right:var(--tgph-spacing-2)}.tgph :is(.pr-3){padding-right:var(--tgph-spacing-3)}.tgph :is(.text-1){font-size:var(--tgph-text-1)}.tgph :is(.text-2){font-size:var(--tgph-text-2)}.tgph :is(.text-3){font-size:var(--tgph-text-3)}.tgph :is(.text-gray-12){color:var(--tgph-gray-12)}.tgph :is(.shadow-0){--tw-shadow: var(--tgph-shadow-0);--tw-shadow-colored: var(--tgph-shadow-0);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph :is(.outline){outline-style:solid}.tgph :is(.outline-0){outline-width:0px}.tgph :is(.transition-all){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\[font-family\:inherit\]{font-family:inherit}.tgph :is(.placeholder\:text-gray-10)::-moz-placeholder{color:var(--tgph-gray-10)}.tgph :is(.placeholder\:text-gray-10)::placeholder{color:var(--tgph-gray-10)}.tgph :is(.placeholder\:text-gray-9)::-moz-placeholder{color:var(--tgph-gray-9)}.tgph :is(.placeholder\:text-gray-9)::placeholder{color:var(--tgph-gray-9)}.tgph :is(.focus-within\:\!border-blue-8:focus-within){border-color:var(--tgph-blue-8)!important}.tgph :is(.focus-within\:\!bg-gray-4:focus-within){background-color:var(--tgph-gray-4)!important}.tgph :is(.hover\:border-gray-7:hover){border-color:var(--tgph-gray-7)}.tgph :is(.hover\:bg-gray-3:hover){background-color:var(--tgph-gray-3)}.tgph :is(.\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:aspect-square:has([data-tgph-button-layout=icon-only])){aspect-ratio:1 / 1}.tgph :is(.\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:\!p-1:has([data-tgph-button-layout=icon-only])){padding:var(--tgph-spacing-1)!important}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'default\'\]\]\:px-2>[data-tgph-button-layout=default]){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:aspect-square>[data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:p-0>[data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-0)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:h-auto>[data-tgph-button]){height:auto}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:w-full>[data-tgph-button]){width:100%}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-1>[data-tgph-button]){border-radius:var(--tgph-rounded-1)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-2>[data-tgph-button]){border-radius:var(--tgph-rounded-2)}.tgph :is(.\[\&\>input\]\:text-gray-9>input){color:var(--tgph-gray-9)}.tgph :is(.\[\&_\[data-tgph-icon\]\]\:text-gray-8 [data-tgph-icon]){color:var(--tgph-gray-8)}

package/dist/esm/index.mjs

@@ -0,0 +1,140 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { Slot as R } from "@radix-ui/react-slot";
+import { useComposedRefs as C } from "@telegraph/compose-refs";
+import d from "clsx";
+import l from "react";
+const a = {
+  Container: {
+    1: "h-6 pl-0 rounded-2",
+    2: "h-8 pl-0 rounded-2",
+    3: "h-10 pl-0 rounded-3"
+  },
+  Input: {
+    1: "text-1 px-1",
+    2: "text-2 px-2",
+    3: "text-3 px-3"
+  },
+  Slot: {
+    1: "[&>[data-tgph-button]]:rounded-1",
+    2: "[&>[data-tgph-button]]:rounded-1",
+    3: "[&>[data-tgph-button]]:rounded-2"
+  },
+  SlotLeading: {
+    1: "order-1 pl-1",
+    2: "order-1 pl-2",
+    3: "order-1 pl-3"
+  },
+  SlotTrailing: {
+    1: "order-3 pr-1",
+    2: "order-3 pr-2",
+    3: "order-3 pr-3"
+  }
+}, v = {
+  Container: {
+    default: {
+      outline: "bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8",
+      ghost: "bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8"
+    },
+    disabled: {
+      outline: "cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9",
+      ghost: "cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9"
+    },
+    error: {
+      outline: "bg-surface-1 border-red-6",
+      ghost: "bg-transparent border-red-6"
+    }
+  }
+}, b = l.createContext({
+  state: "default",
+  size: "2",
+  variant: "outline"
+}), h = l.forwardRef(
+  ({
+    size: t = "2",
+    variant: r = "outline",
+    className: n,
+    disabled: e,
+    errored: x,
+    children: y,
+    ...m
+  }, w) => {
+    const u = l.useRef(null), S = C(w, u), s = e ? "disabled" : x ? "error" : "default";
+    return /* @__PURE__ */ o(b.Provider, { value: { size: t, variant: r, state: s }, children: /* @__PURE__ */ g(
+      "div",
+      {
+        className: d(
+          "box-border flex items-center transition-all",
+          "border-2 border-solid text-gray-12 placeholder:text-gray-10",
+          v.Container[s][r],
+          a.Container[t]
+        ),
+        onPointerDown: (p) => {
+          if (p.target.closest("button, a")) {
+            p.preventDefault();
+            return;
+          }
+          const c = u.current;
+          c && requestAnimationFrame(() => {
+            c.focus();
+          });
+        },
+        children: [
+          /* @__PURE__ */ o(
+            "input",
+            {
+              className: d(
+                "appearance-none text-gray-12 border-none shadow-0 outline-0 bg-transparent",
+                "[font-family:inherit] h-full w-full",
+                "order-2",
+                a.Input[t],
+                n
+              ),
+              disabled: e,
+              ...m,
+              ref: S
+            }
+          ),
+          y
+        ]
+      }
+    ) });
+  }
+), i = l.forwardRef(
+  ({ position: t = "leading", ...r }, n) => {
+    const e = l.useContext(b);
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        className: d(
+          "group box-border flex items-center justify-center h-full",
+          "[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto",
+          // Overrides to match the icon button in figma
+          "[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0",
+          // Overrides default button layout to match the button in figma
+          "[&>[data-tgph-button-layout='default']]:px-2",
+          // If only an icon button is present, set the aspect ratio to square
+          "[&:has([data-tgph-button-layout='icon-only'])]:aspect-square",
+          // If only an icon button is present, reset the padding to spacing-1
+          "[&:has([data-tgph-button-layout='icon-only'])]:!p-1",
+          t === "leading" && a.SlotLeading[e.size],
+          t === "trailing" && a.SlotTrailing[e.size],
+          a.Slot[r.size ?? e.size]
+        ),
+        children: /* @__PURE__ */ o(R, { size: e.size, ...r, ref: n })
+      }
+    );
+  }
+), f = ({
+  LeadingComponent: t,
+  TrailingComponent: r,
+  ...n
+}) => /* @__PURE__ */ g(h, { ...n, children: [
+  t && /* @__PURE__ */ o(i, { position: "leading", children: t }),
+  r && /* @__PURE__ */ o(i, { position: "trailing", children: r })
+] });
+Object.assign(f, { Root: h, Slot: i });
+const O = f;
+export {
+  O as Input
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n  Container: {\n    \"1\": \"h-6 pl-0 rounded-2\",\n    \"2\": \"h-8 pl-0 rounded-2\",\n    \"3\": \"h-10 pl-0 rounded-3\",\n  },\n  Input: {\n    \"1\": \"text-1 px-1\",\n    \"2\": \"text-2 px-2\",\n    \"3\": \"text-3 px-3\",\n  },\n  Slot: {\n    \"1\": \"[&>[data-tgph-button]]:rounded-1\",\n    \"2\": \"[&>[data-tgph-button]]:rounded-1\",\n    \"3\": \"[&>[data-tgph-button]]:rounded-2\",\n  },\n  SlotLeading: {\n    \"1\": \"order-1 pl-1\",\n    \"2\": \"order-1 pl-2\",\n    \"3\": \"order-1 pl-3\",\n  },\n  SlotTrailing: {\n    \"1\": \"order-3 pr-1\",\n    \"2\": \"order-3 pr-2\",\n    \"3\": \"order-3 pr-3\",\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline:\n        \"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8\",\n      ghost:\n        \"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8\",\n    },\n    disabled: {\n      outline:\n        \"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n      ghost:\n        \"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n    },\n    error: {\n      outline: \"bg-surface-1 border-red-6\",\n      ghost: \"bg-transparent border-red-6\",\n    },\n  },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\ntype BaseRootProps = {\n  size?: keyof typeof SIZE.Container;\n  variant?: keyof typeof COLOR.Container.default;\n  errored?: boolean;\n};\n\ntype RootProps = BaseRootProps &\n  Omit<React.ComponentPropsWithoutRef<\"input\">, \"size\">;\n\ntype RootRef = HTMLInputElement;\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n  state: \"default\" | \"disabled\" | \"error\";\n};\n\ntype Required<T> = {\n  [P in keyof T]-?: T[P];\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n  state: \"default\",\n  size: \"2\",\n  variant: \"outline\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    {\n      size = \"2\",\n      variant = \"outline\",\n      className,\n      disabled,\n      errored,\n      children,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, inputRef);\n\n    const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n    return (\n      <InputContext.Provider value={{ size, variant, state }}>\n        <div\n          className={clsx(\n            \"box-border flex items-center transition-all\",\n            \"border-2 border-solid text-gray-12 placeholder:text-gray-10\",\n            COLOR.Container[state][variant],\n            SIZE.Container[size],\n          )}\n          // Focus the input when clicking on the container\n          onPointerDown={(event) => {\n            const target = event.target as HTMLElement;\n\n            // Make sure we're not clicking on an interactive element\n            if (target.closest(\"button, a\")) {\n              event.preventDefault();\n              return;\n            }\n\n            const input = inputRef.current;\n            if (!input) return;\n\n            requestAnimationFrame(() => {\n              input.focus();\n            });\n          }}\n        >\n          <input\n            className={clsx(\n              \"appearance-none text-gray-12 border-none shadow-0 outline-0 bg-transparent\",\n              \"[font-family:inherit] h-full w-full\",\n              \"order-2\",\n              SIZE.Input[size],\n              className,\n            )}\n            disabled={disabled}\n            {...props}\n            ref={composedRefs}\n          />\n          {children}\n        </div>\n      </InputContext.Provider>\n    );\n  },\n);\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: keyof typeof SIZE.Slot;\n  position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = React.ElementRef<typeof RadixSlot>;\n\nconst Slot = React.forwardRef<SlotRef, SlotProps>(\n  ({ position = \"leading\", ...props }, forwardedRef) => {\n    const context = React.useContext(InputContext);\n    return (\n      <div\n        className={clsx(\n          \"group box-border flex items-center justify-center h-full\",\n          \"[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto\",\n          // Overrides to match the icon button in figma\n          \"[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0\",\n          // Overrides default button layout to match the button in figma\n          \"[&>[data-tgph-button-layout='default']]:px-2\",\n          // If only an icon button is present, set the aspect ratio to square\n          \"[&:has([data-tgph-button-layout='icon-only'])]:aspect-square\",\n          // If only an icon button is present, reset the padding to spacing-1\n          \"[&:has([data-tgph-button-layout='icon-only'])]:!p-1\",\n          position === \"leading\" && SIZE.SlotLeading[context.size],\n          position === \"trailing\" && SIZE.SlotTrailing[context.size],\n          SIZE.Slot[props.size ?? context.size],\n        )}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </div>\n    );\n  },\n);\n\ntype DefaultProps = React.ComponentPropsWithoutRef<typeof Root> & {\n  LeadingComponent?: React.ReactNode;\n  TrailingComponent?: React.ReactNode;\n};\n\nconst Default = ({\n  LeadingComponent,\n  TrailingComponent,\n  ...props\n}: DefaultProps) => {\n  return (\n    <Root {...props}>\n      {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n      {TrailingComponent && (\n        <Slot position=\"trailing\">{TrailingComponent}</Slot>\n      )}\n    </Root>\n  );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n  Root: typeof Root;\n  Slot: typeof Slot;\n};\n\nexport { Input };\n"],"names":["SIZE","COLOR","InputContext","React","Root","size","variant","className","disabled","errored","children","props","forwardedRef","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","clsx","event","input","Slot","position","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}

package/dist/types/Input/Input.constants.d.ts

@@ -0,0 +1,44 @@
+export declare const SIZE: {
+    readonly Container: {
+        readonly "1": "h-6 pl-0 rounded-2";
+        readonly "2": "h-8 pl-0 rounded-2";
+        readonly "3": "h-10 pl-0 rounded-3";
+    };
+    readonly Input: {
+        readonly "1": "text-1 px-1";
+        readonly "2": "text-2 px-2";
+        readonly "3": "text-3 px-3";
+    };
+    readonly Slot: {
+        readonly "1": "[&>[data-tgph-button]]:rounded-1";
+        readonly "2": "[&>[data-tgph-button]]:rounded-1";
+        readonly "3": "[&>[data-tgph-button]]:rounded-2";
+    };
+    readonly SlotLeading: {
+        readonly "1": "order-1 pl-1";
+        readonly "2": "order-1 pl-2";
+        readonly "3": "order-1 pl-3";
+    };
+    readonly SlotTrailing: {
+        readonly "1": "order-3 pr-1";
+        readonly "2": "order-3 pr-2";
+        readonly "3": "order-3 pr-3";
+    };
+};
+export declare const COLOR: {
+    readonly Container: {
+        readonly default: {
+            readonly outline: "bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8";
+            readonly ghost: "bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8";
+        };
+        readonly disabled: {
+            readonly outline: "cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9";
+            readonly ghost: "cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9";
+        };
+        readonly error: {
+            readonly outline: "bg-surface-1 border-red-6";
+            readonly ghost: "bg-transparent border-red-6";
+        };
+    };
+};
+//# sourceMappingURL=Input.constants.d.ts.map

package/dist/types/Input/Input.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.constants.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BP,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;CAmBR,CAAC"}

package/dist/types/Input/Input.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { COLOR, SIZE } from "./Input.constants";
+type BaseRootProps = {
+    size?: keyof typeof SIZE.Container;
+    variant?: keyof typeof COLOR.Container.default;
+    errored?: boolean;
+};
+declare const Root: React.ForwardRefExoticComponent<BaseRootProps & Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & React.RefAttributes<HTMLInputElement>>;
+declare const Slot: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & {
+    size?: "1" | "2" | "3" | undefined;
+    position?: "leading" | "trailing" | undefined;
+} & React.RefAttributes<HTMLElement>>;
+type DefaultProps = React.ComponentPropsWithoutRef<typeof Root> & {
+    LeadingComponent?: React.ReactNode;
+    TrailingComponent?: React.ReactNode;
+};
+declare const Input: (({ LeadingComponent, TrailingComponent, ...props }: DefaultProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: typeof Root;
+    Slot: typeof Slot;
+};
+export { Input };
+//# sourceMappingURL=Input.d.ts.map

package/dist/types/Input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEhD,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,IAAI,CAAC,SAAS,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAqBF,QAAA,MAAM,IAAI,4MA8DT,CAAC;AAQF,QAAA,MAAM,IAAI;;;qCAyBT,CAAC;AAEF,KAAK,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,GAAG;IAChE,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,CAAC;AAmBF,QAAA,MAAM,KAAK,uDAbR,YAAY;UAcP,WAAW;UACX,WAAW;CAClB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input as TelegraphInput } from "./Input";
+declare const meta: Meta<typeof TelegraphInput>;
+export default meta;
+type Story = StoryObj<typeof TelegraphInput>;
+export declare const Default: Story;
+export declare const LeadingIcon: Story;
+export declare const TrailingAction: Story;
+//# sourceMappingURL=Input.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AAGlD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CA+CrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Input } from "./Input";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from "./Input";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@telegraph/input",
+  "version": "0.0.1",
+  "description": "Input component for Telegraph",
+  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/input",
+  "author": "@knocklabs",
+  "license": "MIT",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/css/default.css"
+    },
+    "./default.css": "./dist/css/default.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "prettier": "@telegraph/prettier-config",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "vite build --watch --emptyOutDir false",
+    "build": "yarn clean && vite build",
+    "//test": "vitest run",
+    "//test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier \"src/**/*.{js,ts,tsx}\" --write",
+    "format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "@telegraph/compose-refs": "^0.0.1",
+    "clsx": "^2.1.0"
+  },
+  "devDependencies": {
+    "@knocklabs/eslint-config": "^0.0.3",
+    "@knocklabs/typescript-config": "^0.0.2",
+    "@telegraph/postcss-config": "^0.0.10",
+    "@telegraph/prettier-config": "^0.0.6",
+    "@telegraph/tailwind-config": "^0.0.10",
+    "@telegraph/vite-config": "^0.0.8",
+    "@telegraph/vitest-config": "^0.0.6",
+    "@types/react": "^18.2.48",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vitest": "^1.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}