@telegraph/input 0.0.48 → 0.0.49

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @telegraph/input
 
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [[`bca0117`](https://github.com/knocklabs/telegraph/commit/bca011776c3b8b96e4f46a049578fcd7a167e052)]:
+  - @telegraph/layout@0.2.0
+  - @telegraph/typography@0.1.22
+
 ## 0.0.48
 
 ### 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\": {\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\",\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\ntype BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\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,\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      >\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\ntype 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\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","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.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\",\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\ntype BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\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,\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      >\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\ntype 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\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","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.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\",\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\ntype BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\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,\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      >\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\ntype 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\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","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,IACX;AAAA,IACA,GAAK;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,GAAK;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,MAAM;AAAA,IACJ,GAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,IACN;AAAA,IACA,GAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,IACN;AAAA,IACA,GAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EAER;AAAA,EACA,aAAa;AAAA,IACX,GAAK;AAAA,MACH,IAAI;AAAA,IACN;AAAA,IACA,GAAK;AAAA,MACH,IAAI;AAAA,IACN;AAAA,IACA,GAAK;AAAA,MACH,IAAI;AAAA,IAAA;AAAA,EAER;AAAA,EACA,cAAc;AAAA,IACZ,GAAK;AAAA,MACH,IAAI;AAAA,IACN;AAAA,IACA,GAAK;AAAA,MACH,IAAI;AAAA,IACN;AAAA,IACA,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,mBAAmB;AAAA,QACnB,0BAA0B;AAAA,MAC5B;AAAA,MACA,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,IAE9B;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,IACT;AAAA,IACA,OAAO;AAAA,MACL,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GCpFMC,IAAeC,EAAM,cAAuC;AAAA,EAChE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX,CAAC,GAEKC,IAAO,CAAwB;AAAA,EACnC,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAoB;AAClB,QAAMC,IAAYT,GACZU,IAAWZ,EAAM,OAAyB,IAAI,GAC9Ca,IAAeC,EAAgBL,GAASG,CAAQ,GAEhDG,IAAQT,IAAW,aAAaC,IAAU,UAAU;AAGxD,SAAA,gBAAAS,EAACjB,EAAa,UAAb,EAAsB,OAAO,EAAE,MAAAI,GAAM,SAAAC,GAAS,OAAAW,KAC7C,UAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,eAAe,CAACC,MAA4C;AAItD,YAHWA,EAAM,OAGV,QAAQ,WAAW,GAAG;AAC/B,UAAAA,EAAM,eAAe;AACrB;AAAA,QAAA;AAGF,cAAMC,IAAQR,EAAS;AACvB,QAAKQ,KAEL,sBAAsB,MAAM;AAC1B,UAAAA,EAAM,MAAM;AAAA,QAAA,CACb;AAAA,MACH;AAAA,MACA,OAAM;AAAA,MACL,GAAGvB,EAAK,UAAUM,CAAI;AAAA,MACtB,GAAGL,EAAM,UAAUiB,CAAK,EAAEX,CAAO;AAAA,MAClC,6BAAyB;AAAA,MACzB,qCAAmCA;AAAA,MACnC,mCAAiCW;AAAA,MACjC,kCAAgCZ;AAAA,MAMhC,UAAA;AAAA,QAAA,gBAAAa;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,GAAGhB,EAAK,KAAKM,CAAI;AAAA,YACjB,GAAGL,EAAM,KAAKiB,CAAK;AAAA,YACnB,GAAGL;AAAA,YACH,GAAGL;AAAA,YACJ,yBAAqB;AAAA,UAAA;AAAA,QACvB;AAAA,QACCG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,GAQMc,IAAOtB,EAAM;AAAA,EACjB,CAAC,EAAE,UAAAuB,IAAW,WAAW,GAAGb,EAAA,GAASc,MAAiB;AAC9C,UAAAC,IAAUzB,EAAM,WAAWD,CAAY;AAE3C,WAAA,gBAAAiB;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,aAAa1B,EAAK,YAAY4B,EAAQ,IAAI;AAAA,QAC3D,GAAIF,MAAa,cAAc1B,EAAK,aAAa4B,EAAQ,IAAI;AAAA,QAE9D,UAAA,gBAAAT,EAACU,KAAU,MAAMD,EAAQ,MAAO,GAAGf,GAAO,KAAKc,EAAc,CAAA;AAAA,MAAA;AAAA,IAC/D;AAAA,EAAA;AAGN,GAQMG,IAAU,CAAwB;AAAA,EACtC,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,GAAGnB;AACL,MAEI,gBAAAO,EAAChB,GAAM,EAAA,GAAGS,GACP,UAAA;AAAA,EAAAkB,KAAqB,gBAAAZ,EAAAM,GAAA,EAAK,UAAS,WAAW,UAAiBM,GAAA;AAAA,EAC/DC,KACC,gBAAAb,EAACM,GAAK,EAAA,UAAS,YAAY,UAAkBO,EAAA,CAAA;AAAA,GAEjD;AAIJ,OAAO,OAAOF,GAAS,EAAE,MAAA1B,GAAM,MAAAqB,GAAM;AAErC,MAAMQ,IAAQH;"}
+{"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\",\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\ntype BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\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,\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      >\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\ntype 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\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","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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/input",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "description": "Input component for Telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/input",
   "author": "@knocklabs",
@@ -35,14 +35,14 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@telegraph/compose-refs": "^0.0.7",
     "@telegraph/helpers": "^0.0.13",
-    "@telegraph/layout": "^0.1.21",
-    "@telegraph/typography": "^0.1.21",
+    "@telegraph/layout": "^0.2.0",
+    "@telegraph/typography": "^0.1.22",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.4",
     "@knocklabs/typescript-config": "^0.0.2",
-    "@telegraph/postcss-config": "^0.0.27",
+    "@telegraph/postcss-config": "^0.0.28",
     "@telegraph/prettier-config": "^0.0.7",
     "@telegraph/vite-config": "^0.0.15",
     "@types/react": "^18.3.18",