New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@telegraph/input

Package Overview
Dependencies
Maintainers
2
Versions
61
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@telegraph/input - npm Package Compare versions

Comparing version
0.1.7
 to
0.2.0
+12
-0
CHANGELOG.md
# @telegraph/input
## 0.2.0
### Minor Changes
- [#688](https://github.com/knocklabs/telegraph/pull/688) [`8d55540`](https://github.com/knocklabs/telegraph/commit/8d5554005bea4695560efbee9ea4333ccddfc1bf) Thanks [@kylemcd](https://github.com/kylemcd)! - fix: invalid props on components would not throw type errors
### Patch Changes
- Updated dependencies [[`8d55540`](https://github.com/knocklabs/telegraph/commit/8d5554005bea4695560efbee9ea4333ccddfc1bf)]:
- @telegraph/typography@0.2.0
- @telegraph/layout@0.4.0
## 0.1.7

@@ -4,0 +16,0 @@ 

+1
-1
dist/cjs/index.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.js","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n Container: {\n \"1\": {\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\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 stackProps?: Omit<React.ComponentProps<typeof Stack>, \"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 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\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","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.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":"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"}
+1
-1
dist/esm/index.mjs.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.mjs","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n Container: {\n \"1\": {\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\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 stackProps?: Omit<React.ComponentProps<typeof Stack>, \"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 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\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","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-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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"}
+1
-0
dist/types/index.d.ts
export { Input } from './Input';
export type { InputBaseRootProps, InputRootProps, InputSlotProps, InputProps, } from './Input';
//# sourceMappingURL=index.d.ts.map
+1
-1
dist/types/index.d.ts.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,UAAU,GACX,MAAM,SAAS,CAAC"}
+1
-0
dist/types/Input/index.d.ts
export { Input } from './Input';
export type { BaseRootProps as InputBaseRootProps, RootProps as InputRootProps, SlotProps as InputSlotProps, DefaultProps as InputProps, } from './Input';
//# sourceMappingURL=index.d.ts.map
+1
-1
dist/types/Input/index.d.ts.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,aAAa,IAAI,kBAAkB,EACnC,SAAS,IAAI,cAAc,EAC3B,SAAS,IAAI,cAAc,EAC3B,YAAY,IAAI,UAAU,GAC3B,MAAM,SAAS,CAAC"}
+11
-6
dist/types/Input/Input.d.ts

@@ -0,1 +1,2 @@

import { Slot as RadixSlot } from '@radix-ui/react-slot';
import { PolymorphicProps, TgphComponentProps, TgphElement } from '@telegraph/helpers';

@@ -5,3 +6,3 @@ import { Stack } from '@telegraph/layout';

import { default as React } from 'react';
type BaseRootProps = {
export type BaseRootProps = {
size?: "1" | "2" | "3";

@@ -11,7 +12,11 @@ variant?: "outline" | "ghost";

};
type RootProps<T extends TgphElement> = BaseRootProps & {
export type RootProps<T extends TgphElement = "input"> = BaseRootProps & {
textProps?: Omit<React.ComponentProps<typeof Text<T>>, "as">;
stackProps?: Omit<React.ComponentProps<typeof Stack>, "as">;
} & Omit<React.ComponentProps<typeof Text<T>>, "as">;
declare const Root: <T extends TgphElement>({ as, size, variant, textProps, stackProps, disabled, errored, children, tgphRef, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
} & Omit<React.ComponentProps<typeof Text<T>>, "as" | keyof BaseRootProps>;
declare const Root: <T extends TgphElement = "input">({ as, size, variant, textProps, stackProps, disabled, errored, children, tgphRef, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
export type SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {
size?: "1" | "2" | "3";
position?: "leading" | "trailing";
};
declare const Slot: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & React.RefAttributes<HTMLElement>, "ref"> & {

@@ -21,7 +26,7 @@ size?: "1" | "2" | "3";

} & React.RefAttributes<HTMLElement>>;
type DefaultProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Root> & {
export type DefaultProps<T extends TgphElement = "input"> = Omit<PolymorphicProps<T>, keyof BaseRootProps> & TgphComponentProps<typeof Root> & {
LeadingComponent?: React.ReactNode;
TrailingComponent?: React.ReactNode;
};
declare const Default: <T extends TgphElement>({ LeadingComponent, TrailingComponent, ...props }: DefaultProps<T>) => import("react/jsx-runtime").JSX.Element;
declare const Default: <T extends TgphElement = "input">({ LeadingComponent, TrailingComponent, ...props }: DefaultProps<T>) => import("react/jsx-runtime").JSX.Element;
declare const Input: typeof Default & {

@@ -28,0 +33,0 @@ Root: typeof Root;

+1
-1
dist/types/Input/Input.d.ts.map

@@ -1,1 +0,1 @@

{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAEhB,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,aAAa,GAAG;IACtD,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IAC7D,UAAU,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;CAC7D,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AAYrD,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,EAAE,8FAWlC,SAAS,CAAC,CAAC,CAAC,4CA0Dd,CAAC;AAQF,QAAA,MAAM,IAAI;WALD,GAAG,GAAG,GAAG,GAAG,GAAG;eACX,SAAS,GAAG,UAAU;qCAsBlC,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC5D,kBAAkB,CAAC,OAAO,IAAI,CAAC,GAAG;IAChC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,CAAC;AAEJ,QAAA,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,EAAE,mDAIrC,YAAY,CAAC,CAAC,CAAC,4CASjB,CAAC;AAIF,QAAA,MAAM,KAAK,EAAc,OAAO,OAAO,GAAG;IACxC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;CACnB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,KAAK,EACV,gBAAgB,EAEhB,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,IAAI,aAAa,GAAG;IACvE,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IAC7D,UAAU,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;CAC7D,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,aAAa,CAAC,CAAC;AAY3E,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,GAAG,OAAO,EAAE,8FAW5C,SAAS,CAAC,CAAC,CAAC,4CA0Dd,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,SAAS,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CACnC,CAAC;AAGF,QAAA,MAAM,IAAI;WALD,GAAG,GAAG,GAAG,GAAG,GAAG;eACX,SAAS,GAAG,UAAU;qCAsBlC,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,IAAI,IAAI,CAC9D,gBAAgB,CAAC,CAAC,CAAC,EACnB,MAAM,aAAa,CACpB,GACC,kBAAkB,CAAC,OAAO,IAAI,CAAC,GAAG;IAChC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,CAAC;AAEJ,QAAA,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,GAAG,OAAO,EAAE,mDAI/C,YAAY,CAAC,CAAC,CAAC,4CASjB,CAAC;AAIF,QAAA,MAAM,KAAK,EAAc,OAAO,OAAO,GAAG;IACxC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;CACnB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+5
-5
package.json
{
"name": "@telegraph/input",
"version": "0.1.7",
"version": "0.2.0",
"description": "Input component for Telegraph",

@@ -38,4 +38,4 @@ "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/input",

"@telegraph/helpers": "^0.0.15",
"@telegraph/layout": "^0.3.3",
"@telegraph/typography": "^0.1.29",
"@telegraph/layout": "^0.4.0",
"@telegraph/typography": "^0.2.0",
"clsx": "^2.1.1"

@@ -51,4 +51,4 @@ },

"eslint": "^8.56.0",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"typescript": "^5.9.3",

@@ -55,0 +55,0 @@ "vite": "^6.4.1"