@telegraph/input 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @telegraph/input
 
+## 0.2.2
+
+### Patch Changes
+
+- [#701](https://github.com/knocklabs/telegraph/pull/701) [`16e678c`](https://github.com/knocklabs/telegraph/commit/16e678c5e8bc7f13613116954bc15099a8694bb7) Thanks [@ksorathia](https://github.com/ksorathia)! - Add surface-3 background color for interactive outlined variants.
+
+## 0.2.1
+
+### Patch Changes
+
+- [#704](https://github.com/knocklabs/telegraph/pull/704) [`b954d02`](https://github.com/knocklabs/telegraph/commit/b954d0263ccde551736b07fed21b13f5bf78d9fb) Thanks [@dependabot](https://github.com/apps/dependabot)! - chore(deps): bump @radix-ui/react-slot from 1.2.3 to 1.2.4
+
 ## 0.2.0
 
 ### Minor 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"),q=require("@radix-ui/react-slot"),w=require("@telegraph/compose-refs"),b=require("@telegraph/layout"),T=require("@telegraph/typography"),s=require("react"),i={Container:{1:{h:"6",pl:"0",rounded:"2"},2:{h:"8",pl:"0",rounded:"2"},3:{h:"10",pl:"0",rounded:"2"}},Text:{1:{size:"1",px:"1"},2:{size:"2",px:"2"},3:{size:"3",px:"3"}},SlotLeading:{1:{pl:"1_5"},2:{pl:"2"},3:{pl:"3"}},SlotTrailing:{1:{pr:"1"},2:{pr:"2"},3:{pr:"3"}}},g={Container:{default:{outline:{bg:"surface-1",border:"px",borderColor:"gray-6",hover_borderColor:"gray-7",focus_within_borderColor:"blue-8"},ghost:{bg:"transparent",border:"px",borderColor:"transparent",hover_backgroundColor:"gray-3",hover_borderColor:"transparent",focus_within_backgroundColor:"gray-4",focus_within_borderColor:"blue-8"}},disabled:{outline:{bg:"gray-2",border:"px",borderColor:"gray-2"},ghost:{bg:"transparent",border:"px",borderColor:"transparent"}},error:{outline:{bg:"surface-1",border:"px",borderColor:"red-6"},ghost:{bg:"transparent",border:"px",borderColor:"red-6"}}},Text:{default:{color:"default"},disabled:{color:"disabled"},error:{color:"default"}}},f=s.createContext({state:"default",size:"2",variant:"outline"}),h=({as:e="input",size:t="2",variant:o="outline",textProps:n,stackProps:C,disabled:u,errored:j,children:y,tgphRef:S,...R})=>{const _=e,d=s.useRef(null),z=w.useComposedRefs(S,d),a=u?"disabled":j?"error":"default";return r.jsx(f.Provider,{value:{size:t,variant:o,state:a},children:r.jsxs(b.Stack,{onPointerDown:c=>{if(c.target.closest("button, a")){c.preventDefault();return}const p=d.current;p&&requestAnimationFrame(()=>{p.focus()})},align:"center",...i.Container[t],...g.Container[a][o],"data-tgph-input-container":!0,"data-tgph-input-container-variant":o,"data-tgph-input-container-state":a,"data-tgph-input-container-size":t,...C,children:[r.jsx(T.Text,{as:_,bg:"transparent",shadow:"0",h:"full",w:"full",disabled:u,tgphRef:z,...i.Text[t],...g.Text[a],...R,...n,"data-tgph-input-field":!0}),y]})})},l=s.forwardRef(({position:e="leading",...t},o)=>{const n=s.useContext(f);return r.jsx(b.Stack,{align:"center",justify:"center",h:"full","data-tgph-input-slot":!0,"data-tgph-input-slot-position":e,"data-tgph-input-slot-size":t.size??n.size,...e==="leading"&&i.SlotLeading[n.size],...e==="trailing"&&i.SlotTrailing[n.size],children:r.jsx(q.Slot,{size:n.size,...t,ref:o})})}),x=({LeadingComponent:e,TrailingComponent:t,...o})=>r.jsxs(h,{...o,children:[e&&r.jsx(l,{position:"leading",children:e}),t&&r.jsx(l,{position:"trailing",children:t})]});Object.assign(x,{Root:h,Slot:l});const m=x;exports.Input=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),k=require("@radix-ui/react-slot"),y=require("@telegraph/compose-refs"),b=require("@telegraph/layout"),z=require("@telegraph/typography"),s=require("react"),u={Container:{1:{h:"6",pl:"0",rounded:"2"},2:{h:"8",pl:"0",rounded:"2"},3:{h:"10",pl:"0",rounded:"2"}},Text:{1:{size:"1",px:"1"},2:{size:"2",px:"2"},3:{size:"3",px:"3"}},SlotLeading:{1:{pl:"1_5"},2:{pl:"2"},3:{pl:"3"}},SlotTrailing:{1:{pr:"1"},2:{pr:"2"},3:{pr:"3"}}},g={Container:{default:{outline:{bg:"surface-3",border:"px",borderColor:"gray-6",hover_backgroundColor:"surface-2",hover_borderColor:"gray-7",focus_within_backgroundColor:"surface-3",focus_within_borderColor:"blue-8"},ghost:{bg:"transparent",border:"px",borderColor:"transparent",hover_backgroundColor:"surface-2",hover_borderColor:"gray-7",focus_within_backgroundColor:"surface-3",focus_within_borderColor:"blue-8"}},disabled:{outline:{bg:"gray-2",border:"px",borderColor:"transparent"},ghost:{bg:"transparent",border:"px",borderColor:"transparent"}},error:{outline:{bg:"surface-3",border:"px",borderColor:"red-6",hover_backgroundColor:"surface-2",hover_borderColor:"red-7",focus_within_backgroundColor:"surface-3",focus_within_borderColor:"blue-8"},ghost:{bg:"surface-3",border:"px",borderColor:"red-6",hover_backgroundColor:"surface-2",hover_borderColor:"red-7",focus_within_backgroundColor:"surface-3",focus_within_borderColor:"blue-8"}}},Text:{default:{color:"default"},disabled:{color:"disabled"},error:{color:"default"}}},f=s.createContext({state:"default",size:"2",variant:"outline"}),h=({as:e="input",size:r="2",variant:t="outline",textProps:n,stackProps:x,disabled:l,errored:_,children:j,tgphRef:w,...S})=>{const v=e,c=s.useRef(null),R=y.useComposedRefs(w,c),a=l?"disabled":_?"error":"default";return o.jsx(f.Provider,{value:{size:r,variant:t,state:a},children:o.jsxs(b.Stack,{onPointerDown:d=>{if(d.target.closest("button, a")){d.preventDefault();return}const p=c.current;p&&requestAnimationFrame(()=>{p.focus()})},align:"center",...u.Container[r],...g.Container[a][t],"data-tgph-input-container":!0,"data-tgph-input-container-variant":t,"data-tgph-input-container-state":a,"data-tgph-input-container-size":r,...x,children:[o.jsx(z.Text,{as:v,bg:"transparent",shadow:"0",h:"full",w:"full",disabled:l,tgphRef:R,...u.Text[r],...g.Text[a],...S,...n,"data-tgph-input-field":!0}),j]})})},i=s.forwardRef(({position:e="leading",...r},t)=>{const n=s.useContext(f);return o.jsx(b.Stack,{align:"center",justify:"center",h:"full","data-tgph-input-slot":!0,"data-tgph-input-slot-position":e,"data-tgph-input-slot-size":r.size??n.size,...e==="leading"&&u.SlotLeading[n.size],...e==="trailing"&&u.SlotTrailing[n.size],children:o.jsx(k.Slot,{size:n.size,...r,ref:t})})}),C=({LeadingComponent:e,TrailingComponent:r,...t})=>o.jsxs(h,{...t,children:[e&&o.jsx(i,{position:"leading",children:e}),r&&o.jsx(i,{position:"trailing",children:r})]});Object.assign(C,{Root:h,Slot:i});const q=C;exports.Input=q;
 //# 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\": {\n      h: \"6\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      h: \"8\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      h: \"10\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n  },\n  Text: {\n    \"1\": {\n      size: \"1\",\n      px: \"1\",\n    },\n    \"2\": {\n      size: \"2\",\n      px: \"2\",\n    },\n    \"3\": {\n      size: \"3\",\n      px: \"3\",\n    },\n  },\n  SlotLeading: {\n    \"1\": {\n      pl: \"1_5\",\n    },\n    \"2\": {\n      pl: \"2\",\n    },\n    \"3\": {\n      pl: \"3\",\n    },\n  },\n  SlotTrailing: {\n    \"1\": {\n      pr: \"1\",\n    },\n    \"2\": {\n      pr: \"2\",\n    },\n    \"3\": {\n      pr: \"3\",\n    },\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"gray-6\",\n        hover_borderColor: \"gray-7\",\n        focus_within_borderColor: \"blue-8\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n        hover_backgroundColor: \"gray-3\",\n        hover_borderColor: \"transparent\",\n        focus_within_backgroundColor: \"gray-4\",\n        focus_within_borderColor: \"blue-8\",\n      },\n    },\n    disabled: {\n      outline: {\n        bg: \"gray-2\",\n        border: \"px\",\n        borderColor: \"gray-2\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n    },\n    error: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"red-6\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"red-6\",\n      },\n    },\n  },\n  Text: {\n    default: {\n      color: \"default\",\n    },\n    disabled: {\n      color: \"disabled\",\n    },\n    error: {\n      color: \"default\",\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  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\nexport type BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\nexport type RootProps<T extends TgphElement = \"input\"> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n  stackProps?: Omit<React.ComponentProps<typeof Stack>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\" | keyof 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 = \"input\">({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  textProps,\n  stackProps,\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      <Stack\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        align=\"center\"\n        {...SIZE.Container[size]}\n        {...COLOR.Container[state][variant]}\n        data-tgph-input-container\n        data-tgph-input-container-variant={variant}\n        data-tgph-input-container-state={state}\n        data-tgph-input-container-size={size}\n        {...stackProps}\n      >\n        {/* \n          We choose to use the `<Text/>` component as a base here so that we can \n          configure the text inside of the input to match the design system font sizes\n        */}\n        <Text\n          as={Component}\n          bg=\"transparent\"\n          shadow=\"0\"\n          h=\"full\"\n          w=\"full\"\n          disabled={disabled}\n          tgphRef={composedRefs}\n          {...SIZE.Text[size]}\n          {...COLOR.Text[state]}\n          {...props}\n          {...textProps}\n          data-tgph-input-field\n        />\n        {children}\n      </Stack>\n    </InputContext.Provider>\n  );\n};\n\nexport type SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: \"1\" | \"2\" | \"3\";\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      <Stack\n        align=\"center\"\n        justify=\"center\"\n        h=\"full\"\n        data-tgph-input-slot\n        data-tgph-input-slot-position={position}\n        data-tgph-input-slot-size={props.size ?? context.size}\n        {...(position === \"leading\" && SIZE.SlotLeading[context.size])}\n        {...(position === \"trailing\" && SIZE.SlotTrailing[context.size])}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </Stack>\n    );\n  },\n);\n\nexport type DefaultProps<T extends TgphElement = \"input\"> = Omit<\n  PolymorphicProps<T>,\n  keyof BaseRootProps\n> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement = \"input\">({\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","textProps","stackProps","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Stack","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"iRAAaA,EAAO,CAClB,UAAW,CACT,EAAK,CACH,EAAG,IACH,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,IACH,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,KACH,GAAI,IACJ,QAAS,GAAA,CACX,EAEF,KAAM,CACJ,EAAK,CACH,KAAM,IACN,GAAI,GAAA,EAEN,EAAK,CACH,KAAM,IACN,GAAI,GAAA,EAEN,EAAK,CACH,KAAM,IACN,GAAI,GAAA,CACN,EAEF,YAAa,CACX,EAAK,CACH,GAAI,KAAA,EAEN,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,CACN,EAEF,aAAc,CACZ,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,CACN,CAEJ,EAEaC,EAAQ,CACnB,UAAW,CACT,QAAS,CACP,QAAS,CACP,GAAI,YACJ,OAAQ,KACR,YAAa,SACb,kBAAmB,SACnB,yBAA0B,QAAA,EAE5B,MAAO,CACL,GAAI,cACJ,OAAQ,KACR,YAAa,cACb,sBAAuB,SACvB,kBAAmB,cACnB,6BAA8B,SAC9B,yBAA0B,QAAA,CAC5B,EAEF,SAAU,CACR,QAAS,CACP,GAAI,SACJ,OAAQ,KACR,YAAa,QAAA,EAEf,MAAO,CACL,GAAI,cACJ,OAAQ,KACR,YAAa,aAAA,CACf,EAEF,MAAO,CACL,QAAS,CACP,GAAI,YACJ,OAAQ,KACR,YAAa,OAAA,EAEf,MAAO,CACL,GAAI,cACJ,OAAQ,KACR,YAAa,OAAA,CACf,CACF,EAEF,KAAM,CACJ,QAAS,CACP,MAAO,SAAA,EAET,SAAU,CACR,MAAO,UAAA,EAET,MAAO,CACL,MAAO,SAAA,CACT,CAEJ,ECnFMC,EAAeC,EAAM,cAAuC,CAChE,MAAO,UACP,KAAM,IACN,QAAS,SACX,CAAC,EAEKC,EAAO,CAAkC,CAC7C,GAAAC,EAAK,QACL,KAAAC,EAAO,IACP,QAAAC,EAAU,UACV,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,MAAMC,EAAYV,EACZW,EAAWb,EAAM,OAAyB,IAAI,EAC9Cc,EAAeC,EAAAA,gBAAgBL,EAASG,CAAQ,EAEhDG,EAAQT,EAAW,WAAaC,EAAU,QAAU,UAE1D,OACES,MAAClB,EAAa,SAAb,CAAsB,MAAO,CAAE,KAAAI,EAAM,QAAAC,EAAS,MAAAY,GAC7C,SAAAE,EAAAA,KAACC,EAAAA,MAAA,CAEC,cAAgBC,GAA4C,CAI1D,GAHeA,EAAM,OAGV,QAAQ,WAAW,EAAG,CAC/BA,EAAM,eAAA,EACN,MACF,CAEA,MAAMC,EAAQR,EAAS,QAClBQ,GAEL,sBAAsB,IAAM,CAC1BA,EAAM,MAAA,CACR,CAAC,CACH,EACA,MAAM,SACL,GAAGxB,EAAK,UAAUM,CAAI,EACtB,GAAGL,EAAM,UAAUkB,CAAK,EAAEZ,CAAO,EAClC,4BAAyB,GACzB,oCAAmCA,EACnC,kCAAiCY,EACjC,iCAAgCb,EAC/B,GAAGG,EAMJ,SAAA,CAAAW,EAAAA,IAACK,EAAAA,KAAA,CACC,GAAIV,EACJ,GAAG,cACH,OAAO,IACP,EAAE,OACF,EAAE,OACF,SAAAL,EACA,QAASO,EACR,GAAGjB,EAAK,KAAKM,CAAI,EACjB,GAAGL,EAAM,KAAKkB,CAAK,EACnB,GAAGL,EACH,GAAGN,EACJ,wBAAqB,EAAA,CAAA,EAEtBI,CAAA,CAAA,CAAA,EAEL,CAEJ,EAQMc,EAAOvB,EAAM,WACjB,CAAC,CAAE,SAAAwB,EAAW,UAAW,GAAGb,CAAA,EAASc,IAAiB,CACpD,MAAMC,EAAU1B,EAAM,WAAWD,CAAY,EAC7C,OACEkB,EAAAA,IAACE,EAAAA,MAAA,CACC,MAAM,SACN,QAAQ,SACR,EAAE,OACF,uBAAoB,GACpB,gCAA+BK,EAC/B,4BAA2Bb,EAAM,MAAQe,EAAQ,KAChD,GAAIF,IAAa,WAAa3B,EAAK,YAAY6B,EAAQ,IAAI,EAC3D,GAAIF,IAAa,YAAc3B,EAAK,aAAa6B,EAAQ,IAAI,EAE9D,SAAAT,EAAAA,IAACU,EAAAA,MAAU,KAAMD,EAAQ,KAAO,GAAGf,EAAO,IAAKc,CAAA,CAAc,CAAA,CAAA,CAGnE,CACF,EAWMG,EAAU,CAAkC,CAChD,iBAAAC,EACA,kBAAAC,EACA,GAAGnB,CACL,IAEIO,EAAAA,KAACjB,EAAA,CAAM,GAAGU,EACP,SAAA,CAAAkB,GAAoBZ,EAAAA,IAACM,EAAA,CAAK,SAAS,UAAW,SAAAM,EAAiB,EAC/DC,GACCb,EAAAA,IAACM,EAAA,CAAK,SAAS,WAAY,SAAAO,CAAA,CAAkB,CAAA,EAEjD,EAIJ,OAAO,OAAOF,EAAS,CAAE,KAAA3B,EAAM,KAAAsB,EAAM,EAErC,MAAMQ,EAAQH"}
+{"version":3,"file":"index.js","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n  Container: {\n    \"1\": {\n      h: \"6\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      h: \"8\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      h: \"10\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n  },\n  Text: {\n    \"1\": {\n      size: \"1\",\n      px: \"1\",\n    },\n    \"2\": {\n      size: \"2\",\n      px: \"2\",\n    },\n    \"3\": {\n      size: \"3\",\n      px: \"3\",\n    },\n  },\n  SlotLeading: {\n    \"1\": {\n      pl: \"1_5\",\n    },\n    \"2\": {\n      pl: \"2\",\n    },\n    \"3\": {\n      pl: \"3\",\n    },\n  },\n  SlotTrailing: {\n    \"1\": {\n      pr: \"1\",\n    },\n    \"2\": {\n      pr: \"2\",\n    },\n    \"3\": {\n      pr: \"3\",\n    },\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline: {\n        bg: \"surface-3\",\n        border: \"px\",\n        borderColor: \"gray-6\",\n        hover_backgroundColor: \"surface-2\",\n        hover_borderColor: \"gray-7\",\n        focus_within_backgroundColor: \"surface-3\",\n        focus_within_borderColor: \"blue-8\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n        hover_backgroundColor: \"surface-2\",\n        hover_borderColor: \"gray-7\",\n        focus_within_backgroundColor: \"surface-3\",\n        focus_within_borderColor: \"blue-8\",\n      },\n    },\n    disabled: {\n      outline: {\n        bg: \"gray-2\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n    },\n    error: {\n      outline: {\n        bg: \"surface-3\",\n        border: \"px\",\n        borderColor: \"red-6\",\n        hover_backgroundColor: \"surface-2\",\n        hover_borderColor: \"red-7\",\n        focus_within_backgroundColor: \"surface-3\",\n        focus_within_borderColor: \"blue-8\",\n      },\n      ghost: {\n        bg: \"surface-3\",\n        border: \"px\",\n        borderColor: \"red-6\",\n        hover_backgroundColor: \"surface-2\",\n        hover_borderColor: \"red-7\",\n        focus_within_backgroundColor: \"surface-3\",\n        focus_within_borderColor: \"blue-8\",\n      },\n    },\n  },\n  Text: {\n    default: {\n      color: \"default\",\n    },\n    disabled: {\n      color: \"disabled\",\n    },\n    error: {\n      color: \"default\",\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  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\nexport type BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\nexport type RootProps<T extends TgphElement = \"input\"> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n  stackProps?: Omit<React.ComponentProps<typeof Stack>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\" | keyof 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 = \"input\">({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  textProps,\n  stackProps,\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      <Stack\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        align=\"center\"\n        {...SIZE.Container[size]}\n        {...COLOR.Container[state][variant]}\n        data-tgph-input-container\n        data-tgph-input-container-variant={variant}\n        data-tgph-input-container-state={state}\n        data-tgph-input-container-size={size}\n        {...stackProps}\n      >\n        {/* \n          We choose to use the `<Text/>` component as a base here so that we can \n          configure the text inside of the input to match the design system font sizes\n        */}\n        <Text\n          as={Component}\n          bg=\"transparent\"\n          shadow=\"0\"\n          h=\"full\"\n          w=\"full\"\n          disabled={disabled}\n          tgphRef={composedRefs}\n          {...SIZE.Text[size]}\n          {...COLOR.Text[state]}\n          {...props}\n          {...textProps}\n          data-tgph-input-field\n        />\n        {children}\n      </Stack>\n    </InputContext.Provider>\n  );\n};\n\nexport type SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: \"1\" | \"2\" | \"3\";\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      <Stack\n        align=\"center\"\n        justify=\"center\"\n        h=\"full\"\n        data-tgph-input-slot\n        data-tgph-input-slot-position={position}\n        data-tgph-input-slot-size={props.size ?? context.size}\n        {...(position === \"leading\" && SIZE.SlotLeading[context.size])}\n        {...(position === \"trailing\" && SIZE.SlotTrailing[context.size])}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </Stack>\n    );\n  },\n);\n\nexport type DefaultProps<T extends TgphElement = \"input\"> = Omit<\n  PolymorphicProps<T>,\n  keyof BaseRootProps\n> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement = \"input\">({\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","textProps","stackProps","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Stack","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -1,8 +1,8 @@
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { Slot as T } from "@radix-ui/react-slot";
-import { useComposedRefs as v } from "@telegraph/compose-refs";
-import { Stack as b } from "@telegraph/layout";
-import { Text as j } from "@telegraph/typography";
+import { jsx as n, jsxs as b } from "react/jsx-runtime";
+import { Slot as S } from "@radix-ui/react-slot";
+import { useComposedRefs as T } from "@telegraph/compose-refs";
+import { Stack as g } from "@telegraph/layout";
+import { Text as y } from "@telegraph/typography";
 import i from "react";
 const l = {
   Container: {
@@ -58,23 +58,25 @@ const l = {
       pr: "3"
     }
   }
-}, g = {
+}, f = {
   Container: {
     default: {
       outline: {
-        bg: "surface-1",
+        bg: "surface-3",
         border: "px",
         borderColor: "gray-6",
+        hover_backgroundColor: "surface-2",
         hover_borderColor: "gray-7",
+        focus_within_backgroundColor: "surface-3",
         focus_within_borderColor: "blue-8"
       },
       ghost: {
         bg: "transparent",
         border: "px",
         borderColor: "transparent",
-        hover_backgroundColor: "gray-3",
-        hover_borderColor: "transparent",
-        focus_within_backgroundColor: "gray-4",
+        hover_backgroundColor: "surface-2",
+        hover_borderColor: "gray-7",
+        focus_within_backgroundColor: "surface-3",
         focus_within_borderColor: "blue-8"
       }
     },
@@ -82,7 +84,7 @@ const l = {
       outline: {
         bg: "gray-2",
         border: "px",
-        borderColor: "gray-2"
+        borderColor: "transparent"
       },
       ghost: {
         bg: "transparent",
@@ -92,14 +94,22 @@ const l = {
     },
     error: {
       outline: {
-        bg: "surface-1",
+        bg: "surface-3",
         border: "px",
-        borderColor: "red-6"
+        borderColor: "red-6",
+        hover_backgroundColor: "surface-2",
+        hover_borderColor: "red-7",
+        focus_within_backgroundColor: "surface-3",
+        focus_within_borderColor: "blue-8"
       },
       ghost: {
-        bg: "transparent",
+        bg: "surface-3",
         border: "px",
-        borderColor: "red-6"
+        borderColor: "red-6",
+        hover_backgroundColor: "surface-2",
+        hover_borderColor: "red-7",
+        focus_within_backgroundColor: "surface-3",
+        focus_within_borderColor: "blue-8"
       }
     }
   },
@@ -118,90 +128,90 @@ const l = {
   state: "default",
   size: "2",
   variant: "outline"
-}), x = ({
-  as: r = "input",
-  size: t = "2",
+}), C = ({
+  as: o = "input",
+  size: r = "2",
   variant: e = "outline",
-  textProps: o,
-  stackProps: m,
-  disabled: d,
-  errored: _,
-  children: z,
-  tgphRef: R,
-  ...S
+  textProps: t,
+  stackProps: x,
+  disabled: s,
+  errored: m,
+  children: w,
+  tgphRef: v,
+  ...k
 }) => {
-  const w = r, u = i.useRef(null), y = v(R, u), a = d ? "disabled" : _ ? "error" : "default";
-  return /* @__PURE__ */ n(h.Provider, { value: { size: t, variant: e, state: a }, children: /* @__PURE__ */ f(
-    b,
+  const z = o, d = i.useRef(null), R = T(v, d), a = s ? "disabled" : m ? "error" : "default";
+  return /* @__PURE__ */ n(h.Provider, { value: { size: r, variant: e, state: a }, children: /* @__PURE__ */ b(
+    g,
     {
-      onPointerDown: (p) => {
-        if (p.target.closest("button, a")) {
-          p.preventDefault();
+      onPointerDown: (c) => {
+        if (c.target.closest("button, a")) {
+          c.preventDefault();
           return;
         }
-        const c = u.current;
-        c && requestAnimationFrame(() => {
-          c.focus();
+        const p = d.current;
+        p && requestAnimationFrame(() => {
+          p.focus();
         });
       },
       align: "center",
-      ...l.Container[t],
-      ...g.Container[a][e],
+      ...l.Container[r],
+      ...f.Container[a][e],
       "data-tgph-input-container": !0,
       "data-tgph-input-container-variant": e,
       "data-tgph-input-container-state": a,
-      "data-tgph-input-container-size": t,
-      ...m,
+      "data-tgph-input-container-size": r,
+      ...x,
       children: [
         /* @__PURE__ */ n(
-          j,
+          y,
           {
-            as: w,
+            as: z,
             bg: "transparent",
             shadow: "0",
             h: "full",
             w: "full",
-            disabled: d,
-            tgphRef: y,
-            ...l.Text[t],
-            ...g.Text[a],
-            ...S,
-            ...o,
+            disabled: s,
+            tgphRef: R,
+            ...l.Text[r],
+            ...f.Text[a],
+            ...k,
+            ...t,
             "data-tgph-input-field": !0
           }
         ),
-        z
+        w
       ]
     }
   ) });
-}, s = i.forwardRef(
-  ({ position: r = "leading", ...t }, e) => {
-    const o = i.useContext(h);
+}, u = i.forwardRef(
+  ({ position: o = "leading", ...r }, e) => {
+    const t = i.useContext(h);
     return /* @__PURE__ */ n(
-      b,
+      g,
       {
         align: "center",
         justify: "center",
         h: "full",
         "data-tgph-input-slot": !0,
-        "data-tgph-input-slot-position": r,
-        "data-tgph-input-slot-size": t.size ?? o.size,
-        ...r === "leading" && l.SlotLeading[o.size],
-        ...r === "trailing" && l.SlotTrailing[o.size],
-        children: /* @__PURE__ */ n(T, { size: o.size, ...t, ref: e })
+        "data-tgph-input-slot-position": o,
+        "data-tgph-input-slot-size": r.size ?? t.size,
+        ...o === "leading" && l.SlotLeading[t.size],
+        ...o === "trailing" && l.SlotTrailing[t.size],
+        children: /* @__PURE__ */ n(S, { size: t.size, ...r, ref: e })
       }
     );
   }
-), C = ({
-  LeadingComponent: r,
-  TrailingComponent: t,
+), _ = ({
+  LeadingComponent: o,
+  TrailingComponent: r,
   ...e
-}) => /* @__PURE__ */ f(x, { ...e, children: [
-  r && /* @__PURE__ */ n(s, { position: "leading", children: r }),
-  t && /* @__PURE__ */ n(s, { position: "trailing", children: t })
+}) => /* @__PURE__ */ b(C, { ...e, children: [
+  o && /* @__PURE__ */ n(u, { position: "leading", children: o }),
+  r && /* @__PURE__ */ n(u, { position: "trailing", children: r })
 ] });
-Object.assign(C, { Root: x, Slot: s });
-const A = C;
+Object.assign(_, { Root: C, Slot: u });
+const A = _;
 export {
   A as Input
 };

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\": {\n      h: \"6\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      h: \"8\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      h: \"10\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n  },\n  Text: {\n    \"1\": {\n      size: \"1\",\n      px: \"1\",\n    },\n    \"2\": {\n      size: \"2\",\n      px: \"2\",\n    },\n    \"3\": {\n      size: \"3\",\n      px: \"3\",\n    },\n  },\n  SlotLeading: {\n    \"1\": {\n      pl: \"1_5\",\n    },\n    \"2\": {\n      pl: \"2\",\n    },\n    \"3\": {\n      pl: \"3\",\n    },\n  },\n  SlotTrailing: {\n    \"1\": {\n      pr: \"1\",\n    },\n    \"2\": {\n      pr: \"2\",\n    },\n    \"3\": {\n      pr: \"3\",\n    },\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"gray-6\",\n        hover_borderColor: \"gray-7\",\n        focus_within_borderColor: \"blue-8\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n        hover_backgroundColor: \"gray-3\",\n        hover_borderColor: \"transparent\",\n        focus_within_backgroundColor: \"gray-4\",\n        focus_within_borderColor: \"blue-8\",\n      },\n    },\n    disabled: {\n      outline: {\n        bg: \"gray-2\",\n        border: \"px\",\n        borderColor: \"gray-2\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n    },\n    error: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"red-6\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"red-6\",\n      },\n    },\n  },\n  Text: {\n    default: {\n      color: \"default\",\n    },\n    disabled: {\n      color: \"disabled\",\n    },\n    error: {\n      color: \"default\",\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  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\nexport type BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\nexport type RootProps<T extends TgphElement = \"input\"> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n  stackProps?: Omit<React.ComponentProps<typeof Stack>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\" | keyof 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 = \"input\">({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  textProps,\n  stackProps,\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      <Stack\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        align=\"center\"\n        {...SIZE.Container[size]}\n        {...COLOR.Container[state][variant]}\n        data-tgph-input-container\n        data-tgph-input-container-variant={variant}\n        data-tgph-input-container-state={state}\n        data-tgph-input-container-size={size}\n        {...stackProps}\n      >\n        {/* \n          We choose to use the `<Text/>` component as a base here so that we can \n          configure the text inside of the input to match the design system font sizes\n        */}\n        <Text\n          as={Component}\n          bg=\"transparent\"\n          shadow=\"0\"\n          h=\"full\"\n          w=\"full\"\n          disabled={disabled}\n          tgphRef={composedRefs}\n          {...SIZE.Text[size]}\n          {...COLOR.Text[state]}\n          {...props}\n          {...textProps}\n          data-tgph-input-field\n        />\n        {children}\n      </Stack>\n    </InputContext.Provider>\n  );\n};\n\nexport type SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: \"1\" | \"2\" | \"3\";\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      <Stack\n        align=\"center\"\n        justify=\"center\"\n        h=\"full\"\n        data-tgph-input-slot\n        data-tgph-input-slot-position={position}\n        data-tgph-input-slot-size={props.size ?? context.size}\n        {...(position === \"leading\" && SIZE.SlotLeading[context.size])}\n        {...(position === \"trailing\" && SIZE.SlotTrailing[context.size])}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </Stack>\n    );\n  },\n);\n\nexport type DefaultProps<T extends TgphElement = \"input\"> = Omit<\n  PolymorphicProps<T>,\n  keyof BaseRootProps\n> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement = \"input\">({\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","textProps","stackProps","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Stack","event","input","Text","Slot","position","forwardedRef","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\": {\n      h: \"6\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      h: \"8\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      h: \"10\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n  },\n  Text: {\n    \"1\": {\n      size: \"1\",\n      px: \"1\",\n    },\n    \"2\": {\n      size: \"2\",\n      px: \"2\",\n    },\n    \"3\": {\n      size: \"3\",\n      px: \"3\",\n    },\n  },\n  SlotLeading: {\n    \"1\": {\n      pl: \"1_5\",\n    },\n    \"2\": {\n      pl: \"2\",\n    },\n    \"3\": {\n      pl: \"3\",\n    },\n  },\n  SlotTrailing: {\n    \"1\": {\n      pr: \"1\",\n    },\n    \"2\": {\n      pr: \"2\",\n    },\n    \"3\": {\n      pr: \"3\",\n    },\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline: {\n        bg: \"surface-3\",\n        border: \"px\",\n        borderColor: \"gray-6\",\n        hover_backgroundColor: \"surface-2\",\n        hover_borderColor: \"gray-7\",\n        focus_within_backgroundColor: \"surface-3\",\n        focus_within_borderColor: \"blue-8\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n        hover_backgroundColor: \"surface-2\",\n        hover_borderColor: \"gray-7\",\n        focus_within_backgroundColor: \"surface-3\",\n        focus_within_borderColor: \"blue-8\",\n      },\n    },\n    disabled: {\n      outline: {\n        bg: \"gray-2\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n    },\n    error: {\n      outline: {\n        bg: \"surface-3\",\n        border: \"px\",\n        borderColor: \"red-6\",\n        hover_backgroundColor: \"surface-2\",\n        hover_borderColor: \"red-7\",\n        focus_within_backgroundColor: \"surface-3\",\n        focus_within_borderColor: \"blue-8\",\n      },\n      ghost: {\n        bg: \"surface-3\",\n        border: \"px\",\n        borderColor: \"red-6\",\n        hover_backgroundColor: \"surface-2\",\n        hover_borderColor: \"red-7\",\n        focus_within_backgroundColor: \"surface-3\",\n        focus_within_borderColor: \"blue-8\",\n      },\n    },\n  },\n  Text: {\n    default: {\n      color: \"default\",\n    },\n    disabled: {\n      color: \"disabled\",\n    },\n    error: {\n      color: \"default\",\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  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\nexport type BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\nexport type RootProps<T extends TgphElement = \"input\"> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n  stackProps?: Omit<React.ComponentProps<typeof Stack>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\" | keyof 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 = \"input\">({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  textProps,\n  stackProps,\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      <Stack\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        align=\"center\"\n        {...SIZE.Container[size]}\n        {...COLOR.Container[state][variant]}\n        data-tgph-input-container\n        data-tgph-input-container-variant={variant}\n        data-tgph-input-container-state={state}\n        data-tgph-input-container-size={size}\n        {...stackProps}\n      >\n        {/* \n          We choose to use the `<Text/>` component as a base here so that we can \n          configure the text inside of the input to match the design system font sizes\n        */}\n        <Text\n          as={Component}\n          bg=\"transparent\"\n          shadow=\"0\"\n          h=\"full\"\n          w=\"full\"\n          disabled={disabled}\n          tgphRef={composedRefs}\n          {...SIZE.Text[size]}\n          {...COLOR.Text[state]}\n          {...props}\n          {...textProps}\n          data-tgph-input-field\n        />\n        {children}\n      </Stack>\n    </InputContext.Provider>\n  );\n};\n\nexport type SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: \"1\" | \"2\" | \"3\";\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      <Stack\n        align=\"center\"\n        justify=\"center\"\n        h=\"full\"\n        data-tgph-input-slot\n        data-tgph-input-slot-position={position}\n        data-tgph-input-slot-size={props.size ?? context.size}\n        {...(position === \"leading\" && SIZE.SlotLeading[context.size])}\n        {...(position === \"trailing\" && SIZE.SlotTrailing[context.size])}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </Stack>\n    );\n  },\n);\n\nexport type DefaultProps<T extends TgphElement = \"input\"> = Omit<\n  PolymorphicProps<T>,\n  keyof BaseRootProps\n> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement = \"input\">({\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","textProps","stackProps","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Stack","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":";;;;;;AAAO,MAAMA,IAAO;AAAA,EAClB,WAAW;AAAA,IACT,GAAK;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,GAAK;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,GAAK;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,GAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,GAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,GAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,aAAa;AAAA,IACX,GAAK;AAAA,MACH,IAAI;AAAA,IAAA;AAAA,IAEN,GAAK;AAAA,MACH,IAAI;AAAA,IAAA;AAAA,IAEN,GAAK;AAAA,MACH,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,cAAc;AAAA,IACZ,GAAK;AAAA,MACH,IAAI;AAAA,IAAA;AAAA,IAEN,GAAK;AAAA,MACH,IAAI;AAAA,IAAA;AAAA,IAEN,GAAK;AAAA,MACH,IAAI;AAAA,IAAA;AAAA,EACN;AAEJ,GAEaC,IAAQ;AAAA,EACnB,WAAW;AAAA,IACT,SAAS;AAAA,MACP,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,uBAAuB;AAAA,QACvB,mBAAmB;AAAA,QACnB,8BAA8B;AAAA,QAC9B,0BAA0B;AAAA,MAAA;AAAA,MAE5B,OAAO;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,uBAAuB;AAAA,QACvB,mBAAmB;AAAA,QACnB,8BAA8B;AAAA,QAC9B,0BAA0B;AAAA,MAAA;AAAA,IAC5B;AAAA,IAEF,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,MAEf,OAAO;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,IAEF,OAAO;AAAA,MACL,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,uBAAuB;AAAA,QACvB,mBAAmB;AAAA,QACnB,8BAA8B;AAAA,QAC9B,0BAA0B;AAAA,MAAA;AAAA,MAE5B,OAAO;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,uBAAuB;AAAA,QACvB,mBAAmB;AAAA,QACnB,8BAA8B;AAAA,QAC9B,0BAA0B;AAAA,MAAA;AAAA,IAC5B;AAAA,EACF;AAAA,EAEF,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,UAAU;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,IAET,OAAO;AAAA,MACL,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GC7FMC,IAAeC,EAAM,cAAuC;AAAA,EAChE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX,CAAC,GAEKC,IAAO,CAAkC;AAAA,EAC7C,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAoB;AAClB,QAAMC,IAAYV,GACZW,IAAWb,EAAM,OAAyB,IAAI,GAC9Cc,IAAeC,EAAgBL,GAASG,CAAQ,GAEhDG,IAAQT,IAAW,aAAaC,IAAU,UAAU;AAE1D,SACE,gBAAAS,EAAClB,EAAa,UAAb,EAAsB,OAAO,EAAE,MAAAI,GAAM,SAAAC,GAAS,OAAAY,KAC7C,UAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,eAAe,CAACC,MAA4C;AAI1D,YAHeA,EAAM,OAGV,QAAQ,WAAW,GAAG;AAC/B,UAAAA,EAAM,eAAA;AACN;AAAA,QACF;AAEA,cAAMC,IAAQR,EAAS;AACvB,QAAKQ,KAEL,sBAAsB,MAAM;AAC1B,UAAAA,EAAM,MAAA;AAAA,QACR,CAAC;AAAA,MACH;AAAA,MACA,OAAM;AAAA,MACL,GAAGxB,EAAK,UAAUM,CAAI;AAAA,MACtB,GAAGL,EAAM,UAAUkB,CAAK,EAAEZ,CAAO;AAAA,MAClC,6BAAyB;AAAA,MACzB,qCAAmCA;AAAA,MACnC,mCAAiCY;AAAA,MACjC,kCAAgCb;AAAA,MAC/B,GAAGG;AAAA,MAMJ,UAAA;AAAA,QAAA,gBAAAW;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,IAAIV;AAAA,YACJ,IAAG;AAAA,YACH,QAAO;AAAA,YACP,GAAE;AAAA,YACF,GAAE;AAAA,YACF,UAAAL;AAAA,YACA,SAASO;AAAA,YACR,GAAGjB,EAAK,KAAKM,CAAI;AAAA,YACjB,GAAGL,EAAM,KAAKkB,CAAK;AAAA,YACnB,GAAGL;AAAA,YACH,GAAGN;AAAA,YACJ,yBAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtBI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,GAQMc,IAAOvB,EAAM;AAAA,EACjB,CAAC,EAAE,UAAAwB,IAAW,WAAW,GAAGb,EAAA,GAASc,MAAiB;AACpD,UAAMC,IAAU1B,EAAM,WAAWD,CAAY;AAC7C,WACE,gBAAAkB;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,GAAE;AAAA,QACF,wBAAoB;AAAA,QACpB,iCAA+BK;AAAA,QAC/B,6BAA2Bb,EAAM,QAAQe,EAAQ;AAAA,QAChD,GAAIF,MAAa,aAAa3B,EAAK,YAAY6B,EAAQ,IAAI;AAAA,QAC3D,GAAIF,MAAa,cAAc3B,EAAK,aAAa6B,EAAQ,IAAI;AAAA,QAE9D,UAAA,gBAAAT,EAACU,KAAU,MAAMD,EAAQ,MAAO,GAAGf,GAAO,KAAKc,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAGnE;AACF,GAWMG,IAAU,CAAkC;AAAA,EAChD,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,GAAGnB;AACL,MAEI,gBAAAO,EAACjB,GAAA,EAAM,GAAGU,GACP,UAAA;AAAA,EAAAkB,KAAoB,gBAAAZ,EAACM,GAAA,EAAK,UAAS,WAAW,UAAAM,GAAiB;AAAA,EAC/DC,KACC,gBAAAb,EAACM,GAAA,EAAK,UAAS,YAAY,UAAAO,EAAA,CAAkB;AAAA,GAEjD;AAIJ,OAAO,OAAOF,GAAS,EAAE,MAAA3B,GAAM,MAAAsB,GAAM;AAErC,MAAMQ,IAAQH;"}

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

@@ -57,19 +57,21 @@ export declare const COLOR: {
     readonly Container: {
         readonly default: {
             readonly outline: {
-                readonly bg: "surface-1";
+                readonly bg: "surface-3";
                 readonly border: "px";
                 readonly borderColor: "gray-6";
+                readonly hover_backgroundColor: "surface-2";
                 readonly hover_borderColor: "gray-7";
+                readonly focus_within_backgroundColor: "surface-3";
                 readonly focus_within_borderColor: "blue-8";
             };
             readonly ghost: {
                 readonly bg: "transparent";
                 readonly border: "px";
                 readonly borderColor: "transparent";
-                readonly hover_backgroundColor: "gray-3";
-                readonly hover_borderColor: "transparent";
-                readonly focus_within_backgroundColor: "gray-4";
+                readonly hover_backgroundColor: "surface-2";
+                readonly hover_borderColor: "gray-7";
+                readonly focus_within_backgroundColor: "surface-3";
                 readonly focus_within_borderColor: "blue-8";
             };
         };
@@ -77,7 +79,7 @@ export declare const COLOR: {
             readonly outline: {
                 readonly bg: "gray-2";
                 readonly border: "px";
-                readonly borderColor: "gray-2";
+                readonly borderColor: "transparent";
             };
             readonly ghost: {
                 readonly bg: "transparent";
@@ -87,14 +89,22 @@ export declare const COLOR: {
         };
         readonly error: {
             readonly outline: {
-                readonly bg: "surface-1";
+                readonly bg: "surface-3";
                 readonly border: "px";
                 readonly borderColor: "red-6";
+                readonly hover_backgroundColor: "surface-2";
+                readonly hover_borderColor: "red-7";
+                readonly focus_within_backgroundColor: "surface-3";
+                readonly focus_within_borderColor: "blue-8";
             };
             readonly ghost: {
-                readonly bg: "transparent";
+                readonly bg: "surface-3";
                 readonly border: "px";
                 readonly borderColor: "red-6";
+                readonly hover_backgroundColor: "surface-2";
+                readonly hover_borderColor: "red-7";
+                readonly focus_within_backgroundColor: "surface-3";
+                readonly focus_within_borderColor: "blue-8";
             };
         };
     };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/input",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Input component for Telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/input",
   "author": "@knocklabs",
@@ -32,7 +32,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@telegraph/compose-refs": "^0.0.8",
     "@telegraph/helpers": "^0.0.15",
     "@telegraph/layout": "^0.4.0",
@@ -46,7 +46,7 @@
     "@telegraph/prettier-config": "^0.0.7",
     "@telegraph/vite-config": "^0.0.15",
     "@types/react": "^19.2.9",
-    "eslint": "^8.56.0",
+    "eslint": "^10.0.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",