@telegraph/input 0.0.29 → 0.0.31

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @telegraph/input
 
+## 0.0.31
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @telegraph/layout@0.1.5
+  - @telegraph/typography@0.1.5
+
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @telegraph/layout@0.1.4
+  - @telegraph/typography@0.1.4
+
 ## 0.0.29
 
 ### Patch Changes

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\": \"px-1\",\n    \"2\": \"px-2\",\n    \"3\": \"px-3\",\n  },\n  Text: {\n    \"1\": \"1\",\n    \"2\": \"2\",\n    \"3\": \"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 { Text } from \"@telegraph/typography\";\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    textProps?: Omit<React.ComponentProps<typeof Text<\"input\">>, \"as\">;\n  };\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  textProps = { size: SIZE.Text[size], color: \"default\" },\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        {/* \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          className={clsx(\n            \"appearance-none 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          {...textProps}\n          {...props}\n          tgphRef={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","textProps","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}
+{"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\": \"px-1\",\n    \"2\": \"px-2\",\n    \"3\": \"px-3\",\n  },\n  Text: {\n    \"1\": \"1\",\n    \"2\": \"2\",\n    \"3\": \"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 { Text } from \"@telegraph/typography\";\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    textProps?: Omit<React.ComponentProps<typeof Text<\"input\">>, \"as\">;\n  };\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  textProps = { size: SIZE.Text[size], color: \"default\" },\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        {/* \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          className={clsx(\n            \"appearance-none 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          {...textProps}\n          {...props}\n          tgphRef={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","textProps","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"mSAAaA,EAAO,CAClB,UAAW,CACT,EAAK,qBACL,EAAK,qBACL,EAAK,qBACP,EACA,MAAO,CACL,EAAK,OACL,EAAK,OACL,EAAK,MACP,EACA,KAAM,CACJ,EAAK,IACL,EAAK,IACL,EAAK,GACP,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,cAAA,CAET,EAEaC,EAAQ,CACnB,UAAW,CACT,QAAS,CACP,QACE,6EACF,MACE,uGACJ,EACA,SAAU,CACR,QACE,4HACF,MACE,4IACJ,EACA,MAAO,CACL,QAAS,4BACT,MAAO,6BAAA,CACT,CAEJ,EClBMC,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,EAAY,CAAE,KAAMR,EAAK,KAAKM,CAAI,EAAG,MAAO,SAAU,EACtD,UAAAG,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,UAGxD,OAAAS,MAAClB,EAAa,SAAb,CAAsB,MAAO,CAAE,KAAAI,EAAM,QAAAC,EAAS,MAAAY,GAC7C,SAAAE,EAAA,KAACC,EAAA,IAAA,CACC,UAAWC,EACT,8CACA,kEACAtB,EAAM,UAAUkB,CAAK,EAAEZ,CAAO,EAC9BP,EAAK,UAAUM,CAAI,CACrB,EAEA,cAAgBkB,GAA4C,CAItD,GAHWA,EAAM,OAGV,QAAQ,WAAW,EAAG,CAC/BA,EAAM,eAAe,EACrB,MAAA,CAGF,MAAMC,EAAQT,EAAS,QAClBS,GAEL,sBAAsB,IAAM,CAC1BA,EAAM,MAAM,CAAA,CACb,CACH,EAMA,SAAA,CAAAL,EAAA,IAACM,EAAA,KAAA,CACC,GAAIX,EACJ,UAAWQ,EACT,gEACA,sCACA,UACAvB,EAAK,MAAMM,CAAI,EACfG,CACF,EACA,SAAAC,EACC,GAAGF,EACH,GAAGM,EACJ,QAASG,CAAA,CACX,EACCL,CAAA,CAAA,CAAA,EAEL,CAEJ,EAQMe,EAAOxB,EAAM,WACjB,CAAC,CAAE,SAAAyB,EAAW,UAAW,GAAGd,CAAA,EAASe,IAAiB,CAC9C,MAAAC,EAAU3B,EAAM,WAAWD,CAAY,EAE3C,OAAAkB,EAAA,IAACE,EAAA,IAAA,CACC,UAAWC,EACT,2DACA,8DAEA,wGAEA,+CAEA,+DAEA,sDACAK,IAAa,WAAa5B,EAAK,YAAY8B,EAAQ,IAAI,EACvDF,IAAa,YAAc5B,EAAK,aAAa8B,EAAQ,IAAI,EACzD9B,EAAK,KAAKc,EAAM,MAAQgB,EAAQ,IAAI,CACtC,EAEA,SAAAV,EAAAA,IAACW,QAAU,KAAMD,EAAQ,KAAO,GAAGhB,EAAO,IAAKe,CAAc,CAAA,CAAA,CAC/D,CAAA,CAGN,EAQMG,EAAU,CAAwB,CACtC,iBAAAC,EACA,kBAAAC,EACA,GAAGpB,CACL,IAEIO,EAAA,KAACjB,EAAM,CAAA,GAAGU,EACP,SAAA,CAAAmB,GAAqBb,EAAA,IAAAO,EAAA,CAAK,SAAS,UAAW,SAAiBM,EAAA,EAC/DC,GACCd,EAAA,IAACO,EAAK,CAAA,SAAS,WAAY,SAAkBO,CAAA,CAAA,CAAA,EAEjD,EAIJ,OAAO,OAAOF,EAAS,CAAE,KAAA5B,EAAM,KAAAuB,EAAM,EAErC,MAAMQ,EAAQH"}

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\": \"px-1\",\n    \"2\": \"px-2\",\n    \"3\": \"px-3\",\n  },\n  Text: {\n    \"1\": \"1\",\n    \"2\": \"2\",\n    \"3\": \"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 { Text } from \"@telegraph/typography\";\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    textProps?: Omit<React.ComponentProps<typeof Text<\"input\">>, \"as\">;\n  };\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  textProps = { size: SIZE.Text[size], color: \"default\" },\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        {/* \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          className={clsx(\n            \"appearance-none 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          {...textProps}\n          {...props}\n          tgphRef={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","textProps","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","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\": \"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\": \"px-1\",\n    \"2\": \"px-2\",\n    \"3\": \"px-3\",\n  },\n  Text: {\n    \"1\": \"1\",\n    \"2\": \"2\",\n    \"3\": \"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 { Text } from \"@telegraph/typography\";\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    textProps?: Omit<React.ComponentProps<typeof Text<\"input\">>, \"as\">;\n  };\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  textProps = { size: SIZE.Text[size], color: \"default\" },\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        {/* \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          className={clsx(\n            \"appearance-none 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          {...textProps}\n          {...props}\n          tgphRef={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","textProps","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/input",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Input component for Telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/input",
   "author": "@knocklabs",
@@ -35,8 +35,8 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@telegraph/compose-refs": "^0.0.2",
     "@telegraph/helpers": "^0.0.7",
-    "@telegraph/layout": "^0.1.3",
-    "@telegraph/typography": "^0.1.3",
+    "@telegraph/layout": "^0.1.5",
+    "@telegraph/typography": "^0.1.5",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
@@ -51,7 +51,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
     "typescript": "^5.5.4",
-    "vite": "^5.4.7"
+    "vite": "^6.0.11"
   },
   "peerDependencies": {
     "react": "^18.2.0",