@telegraph/input 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @telegraph/input
 
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`8d4c7bb`](https://github.com/knocklabs/telegraph/commit/8d4c7bb5031747c185faa31c0bc0aef7bd14d01c)]:
+  - @telegraph/helpers@0.0.3
+  - @telegraph/layout@0.0.13
+
+## 0.0.6
+
+### Patch Changes
+
+- [#124](https://github.com/knocklabs/telegraph/pull/124) [`def3d89`](https://github.com/knocklabs/telegraph/commit/def3d89056aa54c0d24f74e33bc04df8efc712d9) Thanks [@kylemcd](https://github.com/kylemcd)! - better ts support for as prop with custom tgphRef
+
+- Updated dependencies [[`04e1459`](https://github.com/knocklabs/telegraph/commit/04e14597ed2148354923023b3668f63387ce63c4), [`def3d89`](https://github.com/knocklabs/telegraph/commit/def3d89056aa54c0d24f74e33bc04df8efc712d9), [`790c5e0`](https://github.com/knocklabs/telegraph/commit/790c5e0626c9b99451214f892def9807165d9572)]:
+  - @telegraph/layout@0.0.12
+  - @telegraph/helpers@0.0.2
+
 ## 0.0.5
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +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"}}},g=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(g.Provider,{value:{size:t,variant:e,state:i},children:r.jsxs("div",{className:l("box-border flex items-center transition-all","border-[1px] 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 p=d.current;p&&requestAnimationFrame(()=>{p.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(g);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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("@radix-ui/react-slot"),C=require("@telegraph/compose-refs"),b=require("@telegraph/layout"),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"}},I={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"}}},h=s.createContext({state:"default",size:"2",variant:"outline"}),x=({as:r="input",size:t="2",variant:o="outline",className:n,disabled:d,errored:y,children:j,tgphRef:m,...S})=>{const w=r,i=s.useRef(null),R=C.useComposedRefs(m,i),c=d?"disabled":y?"error":"default";return e.jsx(h.Provider,{value:{size:t,variant:o,state:c},children:e.jsxs(b.Box,{className:l("box-border flex items-center transition-all","border-[1px] border-solid text-gray-12 placeholder:text-gray-10",I.Container[c][o],a.Container[t]),onPointerDown:p=>{if(p.target.closest("button, a")){p.preventDefault();return}const g=i.current;g&&requestAnimationFrame(()=>{g.focus()})},children:[e.jsx(w,{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:d,...S,ref:R}),j]})})},u=s.forwardRef(({position:r="leading",...t},o)=>{const n=s.useContext(h);return e.jsx(b.Box,{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",r==="leading"&&a.SlotLeading[n.size],r==="trailing"&&a.SlotTrailing[n.size],a.Slot[t.size??n.size]),children:e.jsx(q.Slot,{size:n.size,...t,ref:o})})}),f=({LeadingComponent:r,TrailingComponent:t,...o})=>e.jsxs(x,{...o,children:[r&&e.jsx(u,{position:"leading",children:r}),t&&e.jsx(u,{position:"trailing",children:t})]});Object.assign(f,{Root:x,Slot:u});const v=f;exports.Input=v;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +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 type { Required } from \"@telegraph/helpers\";\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\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-[1px] 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,ECxBMC,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,kEACAlB,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"}
+{"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 type {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Box } from \"@telegraph/layout\";\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<T extends TgphElement> = Omit<\n  PolymorphicPropsWithTgphRef<T, HTMLInputElement>,\n  \"size\"\n> &\n  BaseRootProps;\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n  state: \"default\" | \"disabled\" | \"error\";\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n  state: \"default\",\n  size: \"2\",\n  variant: \"outline\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  className,\n  disabled,\n  errored,\n  children,\n  tgphRef,\n  ...props\n}: RootProps<T>) => {\n  const Component = as;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n  const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n  return (\n    <InputContext.Provider value={{ size, variant, state }}>\n      <Box\n        className={clsx(\n          \"box-border flex items-center transition-all\",\n          \"border-[1px] 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: React.MouseEvent<HTMLDivElement>) => {\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        <Component\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      </Box>\n    </InputContext.Provider>\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      <Box\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      </Box>\n    );\n  },\n);\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement>({\n  LeadingComponent,\n  TrailingComponent,\n  ...props\n}: DefaultProps<T>) => {\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","as","size","variant","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"gQAAaA,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,EChBMC,EAAeC,EAAM,cAAuC,CAChE,MAAO,UACP,KAAM,IACN,QAAS,SACX,CAAC,EAEKC,EAAO,CAAwB,CACnC,GAAAC,EAAK,QACL,KAAAC,EAAO,IACP,QAAAC,EAAU,UACV,UAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,MAAMC,EAAYT,EACZU,EAAWZ,EAAM,OAAyB,IAAI,EAC9Ca,EAAeC,EAAAA,gBAAgBL,EAASG,CAAQ,EAEhDG,EAAQT,EAAW,WAAaC,EAAU,QAAU,UAGxD,OAAAS,MAACjB,EAAa,SAAb,CAAsB,MAAO,CAAE,KAAAI,EAAM,QAAAC,EAAS,MAAAW,GAC7C,SAAAE,EAAA,KAACC,EAAA,IAAA,CACC,UAAWC,EACT,8CACA,kEACArB,EAAM,UAAUiB,CAAK,EAAEX,CAAO,EAC9BP,EAAK,UAAUM,CAAI,CACrB,EAEA,cAAgBiB,GAA4C,CAItD,GAHWA,EAAM,OAGV,QAAQ,WAAW,EAAG,CAC/BA,EAAM,eAAe,EACrB,MACF,CAEA,MAAMC,EAAQT,EAAS,QAClBS,GAEL,sBAAsB,IAAM,CAC1BA,EAAM,MAAM,CAAA,CACb,CACH,EAEA,SAAA,CAAAL,EAAA,IAACL,EAAA,CACC,UAAWQ,EACT,6EACA,sCACA,UACAtB,EAAK,MAAMM,CAAI,EACfE,CACF,EACA,SAAAC,EACC,GAAGI,EACJ,IAAKG,CAAA,CACP,EACCL,CAAA,CAAA,CAEL,CAAA,CAAA,CAEJ,EAQMc,EAAOtB,EAAM,WACjB,CAAC,CAAE,SAAAuB,EAAW,UAAW,GAAGb,CAAA,EAASc,IAAiB,CAC9C,MAAAC,EAAUzB,EAAM,WAAWD,CAAY,EAE3C,OAAAiB,EAAA,IAACE,EAAA,IAAA,CACC,UAAWC,EACT,2DACA,8DAEA,wGAEA,+CAEA,+DAEA,sDACAI,IAAa,WAAa1B,EAAK,YAAY4B,EAAQ,IAAI,EACvDF,IAAa,YAAc1B,EAAK,aAAa4B,EAAQ,IAAI,EACzD5B,EAAK,KAAKa,EAAM,MAAQe,EAAQ,IAAI,CACtC,EAEA,SAAAT,EAAA,IAACU,QAAU,KAAMD,EAAQ,KAAO,GAAGf,EAAO,IAAKc,EAAc,CAAA,CAAA,CAGnE,CACF,EAQMG,EAAU,CAAwB,CACtC,iBAAAC,EACA,kBAAAC,EACA,GAAGnB,CACL,IAEIO,EAAA,KAAChB,EAAM,CAAA,GAAGS,EACP,SAAA,CAAAkB,GAAqBZ,EAAA,IAAAM,EAAA,CAAK,SAAS,UAAW,SAAiBM,EAAA,EAC/DC,GACCb,EAAA,IAACM,EAAK,CAAA,SAAS,WAAY,SAAkBO,EAAA,CAEjD,CAAA,CAAA,EAIJ,OAAO,OAAOF,EAAS,CAAE,KAAA1B,EAAM,KAAAqB,CAAM,CAAA,EAErC,MAAMQ,EAAQH"}

package/dist/esm/index.mjs

@@ -1,6 +1,7 @@
-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 { jsx as n, jsxs as b } from "react/jsx-runtime";
+import { Slot as I } from "@radix-ui/react-slot";
+import { useComposedRefs as j } from "@telegraph/compose-refs";
+import { Box as h } from "@telegraph/layout";
 import d from "clsx";
 import l from "react";
 const a = {
@@ -44,66 +45,66 @@ const a = {
       ghost: "bg-transparent border-red-6"
     }
   }
-}, b = l.createContext({
+}, f = 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-[1px] 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;
+}), x = ({
+  as: r = "input",
+  size: t = "2",
+  variant: e = "outline",
+  className: o,
+  disabled: u,
+  errored: m,
+  children: w,
+  tgphRef: S,
+  ...C
+}) => {
+  const R = r, i = l.useRef(null), z = j(S, i), p = u ? "disabled" : m ? "error" : "default";
+  return /* @__PURE__ */ n(f.Provider, { value: { size: t, variant: e, state: p }, children: /* @__PURE__ */ b(
+    h,
+    {
+      className: d(
+        "box-border flex items-center transition-all",
+        "border-[1px] border-solid text-gray-12 placeholder:text-gray-10",
+        v.Container[p][e],
+        a.Container[t]
+      ),
+      onPointerDown: (c) => {
+        if (c.target.closest("button, a")) {
+          c.preventDefault();
+          return;
+        }
+        const g = i.current;
+        g && requestAnimationFrame(() => {
+          g.focus();
+        });
+      },
+      children: [
+        /* @__PURE__ */ n(
+          R,
+          {
+            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],
+              o
+            ),
+            disabled: u,
+            ...C,
+            ref: z
           }
-          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",
+        ),
+        w
+      ]
+    }
+  ) });
+}, s = l.forwardRef(
+  ({ position: r = "leading", ...t }, e) => {
+    const o = l.useContext(f);
+    return /* @__PURE__ */ n(
+      h,
       {
         className: d(
           "group box-border flex items-center justify-center h-full",
@@ -116,25 +117,25 @@ const a = {
           "[&: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]
+          r === "leading" && a.SlotLeading[o.size],
+          r === "trailing" && a.SlotTrailing[o.size],
+          a.Slot[t.size ?? o.size]
         ),
-        children: /* @__PURE__ */ o(R, { size: e.size, ...r, ref: n })
+        children: /* @__PURE__ */ n(I, { size: o.size, ...t, ref: e })
       }
     );
   }
-), 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 })
+), y = ({
+  LeadingComponent: r,
+  TrailingComponent: t,
+  ...e
+}) => /* @__PURE__ */ b(x, { ...e, children: [
+  r && /* @__PURE__ */ n(s, { position: "leading", children: r }),
+  t && /* @__PURE__ */ n(s, { position: "trailing", children: t })
 ] });
-Object.assign(f, { Root: h, Slot: i });
-const O = f;
+Object.assign(y, { Root: x, Slot: s });
+const A = y;
 export {
-  O as Input
+  A as Input
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +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 type { Required } from \"@telegraph/helpers\";\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\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-[1px] 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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"}
+{"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 type {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Box } from \"@telegraph/layout\";\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<T extends TgphElement> = Omit<\n  PolymorphicPropsWithTgphRef<T, HTMLInputElement>,\n  \"size\"\n> &\n  BaseRootProps;\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n  state: \"default\" | \"disabled\" | \"error\";\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n  state: \"default\",\n  size: \"2\",\n  variant: \"outline\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  className,\n  disabled,\n  errored,\n  children,\n  tgphRef,\n  ...props\n}: RootProps<T>) => {\n  const Component = as;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n  const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n  return (\n    <InputContext.Provider value={{ size, variant, state }}>\n      <Box\n        className={clsx(\n          \"box-border flex items-center transition-all\",\n          \"border-[1px] 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: React.MouseEvent<HTMLDivElement>) => {\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        <Component\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      </Box>\n    </InputContext.Provider>\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      <Box\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      </Box>\n    );\n  },\n);\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement>({\n  LeadingComponent,\n  TrailingComponent,\n  ...props\n}: DefaultProps<T>) => {\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","as","size","variant","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}

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

@@ -1,20 +1,23 @@
-import React from "react";
-import { COLOR, SIZE } from "./Input.constants";
+import { PolymorphicProps, PolymorphicPropsWithTgphRef, TgphComponentProps, TgphElement } from '@telegraph/helpers';
+import { default as 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"> & {
+type RootProps<T extends TgphElement> = Omit<PolymorphicPropsWithTgphRef<T, HTMLInputElement>, "size"> & BaseRootProps;
+declare const Root: <T extends TgphElement>({ as, size, variant, className, disabled, errored, children, tgphRef, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
+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> & {
+type DefaultProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Root> & {
     LeadingComponent?: React.ReactNode;
     TrailingComponent?: React.ReactNode;
 };
-declare const Input: (({ LeadingComponent, TrailingComponent, ...props }: DefaultProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const Input: (<T extends TgphElement>({ LeadingComponent, TrailingComponent, ...props }: DefaultProps<T>) => import("react/jsx-runtime").JSX.Element) & {
     Root: typeof Root;
     Slot: typeof Slot;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"AAIA,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;AAiBF,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"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,2BAA2B,EAE3B,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAG5B,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;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CAC1C,2BAA2B,CAAC,CAAC,EAAE,gBAAgB,CAAC,EAChD,MAAM,CACP,GACC,aAAa,CAAC;AAYhB,QAAA,MAAM,IAAI,4GAUP,UAAU,CAAC,CAAC,4CAkDd,CAAC;AAQF,QAAA,MAAM,IAAI;;;qCAyBT,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC5D,kBAAkB,CAAC,OAAO,IAAI,CAAC,GAAG;IAChC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,CAAC;AAmBJ,QAAA,MAAM,KAAK,8EAbR,aAAa,CAAC,CAAC;UAcV,WAAW;UACX,WAAW;CAClB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

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

package/dist/types/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/input",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Input component for Telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/input",
   "author": "@knocklabs",
@@ -37,13 +37,14 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
     "@telegraph/compose-refs": "^0.0.1",
-    "@telegraph/helpers": "^0.0.1",
+    "@telegraph/helpers": "^0.0.3",
+    "@telegraph/layout": "^0.0.13",
     "clsx": "^2.1.0"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.3",
     "@knocklabs/typescript-config": "^0.0.2",
-    "@telegraph/postcss-config": "^0.0.13",
+    "@telegraph/postcss-config": "^0.0.16",
     "@telegraph/prettier-config": "^0.0.6",
     "@telegraph/tailwind-config": "^0.0.11",
     "@telegraph/vite-config": "^0.0.9",
@@ -53,7 +54,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.7",
+    "vite": "^5.3.0",
     "vitest": "^1.2.2"
   },
   "peerDependencies": {

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

@@ -1,9 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;AAIvD,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AAKlD,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,KA0BrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA6B5B,CAAC"}