@telegraph/input 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/README.md +50 -7
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +18 -16
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/Input/Input.d.ts +3 -1
- package/dist/types/Input/Input.d.ts.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @telegraph/input
|
|
2
2
|
|
|
3
|
+
## 0.1.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#620](https://github.com/knocklabs/telegraph/pull/620) [`2789747`](https://github.com/knocklabs/telegraph/commit/27897474bb1885ff126513205557f2a60242b82c) Thanks [@kylemcd](https://github.com/kylemcd)! - feat: add support for styling input's wrapping stack component
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`aeb1c2b`](https://github.com/knocklabs/telegraph/commit/aeb1c2bf0db098320ecc960debf7f99ce0bb35d3), [`7c5f127`](https://github.com/knocklabs/telegraph/commit/7c5f127d945bfe3a171032195e214454ac4291cf), [`5901b31`](https://github.com/knocklabs/telegraph/commit/5901b317bef94ae6ff3903ed5c8129bde6a4532b)]:
|
|
10
|
+
- @telegraph/layout@0.3.0
|
|
11
|
+
- @telegraph/typography@0.1.26
|
|
12
|
+
|
|
3
13
|
## 0.1.3
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -61,6 +61,8 @@ The default Input component provides a simple API for common use cases.
|
|
|
61
61
|
| `disabled` | `boolean` | `false` | Disables the input |
|
|
62
62
|
| `LeadingComponent` | `React.ReactNode` | `undefined` | Component to display before the input text |
|
|
63
63
|
| `TrailingComponent` | `React.ReactNode` | `undefined` | Component to display after the input text |
|
|
64
|
+
| `textProps` | `object` | `undefined` | Props to pass to the inner Text component |
|
|
65
|
+
| `stackProps` | `object` | `undefined` | Props to pass to the Stack container |
|
|
64
66
|
| `as` | `TgphElement` | `"input"` | HTML element or component to render |
|
|
65
67
|
|
|
66
68
|
### Composition API
|
|
@@ -71,13 +73,15 @@ For advanced use cases, use the composition API:
|
|
|
71
73
|
|
|
72
74
|
Container component that wraps the input and slots.
|
|
73
75
|
|
|
74
|
-
| Prop
|
|
75
|
-
|
|
|
76
|
-
| `size`
|
|
77
|
-
| `variant`
|
|
78
|
-
| `errored`
|
|
79
|
-
| `disabled`
|
|
80
|
-
| `
|
|
76
|
+
| Prop | Type | Default | Description |
|
|
77
|
+
| ------------ | ---------------------- | ----------- | ----------------------------------- |
|
|
78
|
+
| `size` | `"1" \| "2" \| "3"` | `"2"` | Input size |
|
|
79
|
+
| `variant` | `"outline" \| "ghost"` | `"outline"` | Visual style variant |
|
|
80
|
+
| `errored` | `boolean` | `false` | Shows error state styling |
|
|
81
|
+
| `disabled` | `boolean` | `false` | Disables the input |
|
|
82
|
+
| `textProps` | `object` | `undefined` | Props to pass to the inner Text component |
|
|
83
|
+
| `stackProps` | `object` | `undefined` | Props to pass to the Stack container |
|
|
84
|
+
| `as` | `TgphElement` | `"input"` | HTML element or component to render |
|
|
81
85
|
|
|
82
86
|
#### `<Input.Slot>`
|
|
83
87
|
|
|
@@ -180,6 +184,45 @@ import { Search, Mail, Lock } from "lucide-react";
|
|
|
180
184
|
|
|
181
185
|
## Advanced Usage
|
|
182
186
|
|
|
187
|
+
### Customizing with stackProps and textProps
|
|
188
|
+
|
|
189
|
+
Use `stackProps` to customize the container and `textProps` to customize the input field:
|
|
190
|
+
|
|
191
|
+
```tsx
|
|
192
|
+
import { Input } from "@telegraph/input";
|
|
193
|
+
|
|
194
|
+
// Full-width input with custom padding
|
|
195
|
+
<Input
|
|
196
|
+
placeholder="Search..."
|
|
197
|
+
stackProps={{
|
|
198
|
+
w: "full",
|
|
199
|
+
padding: "3",
|
|
200
|
+
}}
|
|
201
|
+
/>
|
|
202
|
+
|
|
203
|
+
// Custom text styling
|
|
204
|
+
<Input
|
|
205
|
+
placeholder="Enter code"
|
|
206
|
+
textProps={{
|
|
207
|
+
fontFamily: "mono",
|
|
208
|
+
letterSpacing: "wider",
|
|
209
|
+
}}
|
|
210
|
+
/>
|
|
211
|
+
|
|
212
|
+
// Combined customization
|
|
213
|
+
<Input
|
|
214
|
+
placeholder="Custom input"
|
|
215
|
+
stackProps={{
|
|
216
|
+
w: "full",
|
|
217
|
+
rounded: "4",
|
|
218
|
+
border: "2",
|
|
219
|
+
}}
|
|
220
|
+
textProps={{
|
|
221
|
+
weight: "medium",
|
|
222
|
+
}}
|
|
223
|
+
/>
|
|
224
|
+
```
|
|
225
|
+
|
|
183
226
|
### Composition Pattern
|
|
184
227
|
|
|
185
228
|
Use `Input.Root` and `Input.Slot` for maximum control:
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),q=require("@radix-ui/react-slot"),w=require("@telegraph/compose-refs"),b=require("@telegraph/layout"),T=require("@telegraph/typography"),s=require("react"),i={Container:{1:{h:"6",pl:"0",rounded:"2"},2:{h:"8",pl:"0",rounded:"2"},3:{h:"10",pl:"0",rounded:"2"}},Text:{1:{size:"1",px:"1"},2:{size:"2",px:"2"},3:{size:"3",px:"3"}},SlotLeading:{1:{pl:"1_5"},2:{pl:"2"},3:{pl:"3"}},SlotTrailing:{1:{pr:"1"},2:{pr:"2"},3:{pr:"3"}}},g={Container:{default:{outline:{bg:"surface-1",border:"px",borderColor:"gray-6",hover_borderColor:"gray-7",focus_within_borderColor:"blue-8"},ghost:{bg:"transparent",border:"px",borderColor:"transparent",hover_backgroundColor:"gray-3",hover_borderColor:"transparent",focus_within_backgroundColor:"gray-4",focus_within_borderColor:"blue-8"}},disabled:{outline:{bg:"gray-2",border:"px",borderColor:"gray-2"},ghost:{bg:"transparent",border:"px",borderColor:"transparent"}},error:{outline:{bg:"surface-1",border:"px",borderColor:"red-6"},ghost:{bg:"transparent",border:"px",borderColor:"red-6"}}},Text:{default:{color:"default"},disabled:{color:"disabled"},error:{color:"default"}}},f=s.createContext({state:"default",size:"2",variant:"outline"}),h=({as:e="input",size:t="2",variant:o="outline",textProps:n,stackProps:C,disabled:u,errored:j,children:y,tgphRef:S,...R})=>{const _=e,d=s.useRef(null),z=w.useComposedRefs(S,d),a=u?"disabled":j?"error":"default";return r.jsx(f.Provider,{value:{size:t,variant:o,state:a},children:r.jsxs(b.Stack,{onPointerDown:c=>{if(c.target.closest("button, a")){c.preventDefault();return}const p=d.current;p&&requestAnimationFrame(()=>{p.focus()})},align:"center",...i.Container[t],...g.Container[a][o],"data-tgph-input-container":!0,"data-tgph-input-container-variant":o,"data-tgph-input-container-state":a,"data-tgph-input-container-size":t,...C,children:[r.jsx(T.Text,{as:_,bg:"transparent",shadow:"0",h:"full",w:"full",disabled:u,tgphRef:z,...i.Text[t],...g.Text[a],...R,...n,"data-tgph-input-field":!0}),y]})})},l=s.forwardRef(({position:e="leading",...t},o)=>{const n=s.useContext(f);return r.jsx(b.Stack,{align:"center",justify:"center",h:"full","data-tgph-input-slot":!0,"data-tgph-input-slot-position":e,"data-tgph-input-slot-size":t.size??n.size,...e==="leading"&&i.SlotLeading[n.size],...e==="trailing"&&i.SlotTrailing[n.size],children:r.jsx(q.Slot,{size:n.size,...t,ref:o})})}),x=({LeadingComponent:e,TrailingComponent:t,...o})=>r.jsxs(h,{...o,children:[e&&r.jsx(l,{position:"leading",children:e}),t&&r.jsx(l,{position:"trailing",children:t})]});Object.assign(x,{Root:h,Slot:l});const m=x;exports.Input=m;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n Container: {\n \"1\": {\n h: \"6\",\n pl: \"0\",\n rounded: \"2\",\n },\n \"2\": {\n h: \"8\",\n pl: \"0\",\n rounded: \"2\",\n },\n \"3\": {\n h: \"10\",\n pl: \"0\",\n rounded: \"2\",\n },\n },\n Text: {\n \"1\": {\n size: \"1\",\n px: \"1\",\n },\n \"2\": {\n size: \"2\",\n px: \"2\",\n },\n \"3\": {\n size: \"3\",\n px: \"3\",\n },\n },\n SlotLeading: {\n \"1\": {\n pl: \"1_5\",\n },\n \"2\": {\n pl: \"2\",\n },\n \"3\": {\n pl: \"3\",\n },\n },\n SlotTrailing: {\n \"1\": {\n pr: \"1\",\n },\n \"2\": {\n pr: \"2\",\n },\n \"3\": {\n pr: \"3\",\n },\n },\n} as const;\n\nexport const COLOR = {\n Container: {\n default: {\n outline: {\n bg: \"surface-1\",\n border: \"px\",\n borderColor: \"gray-6\",\n hover_borderColor: \"gray-7\",\n focus_within_borderColor: \"blue-8\",\n },\n ghost: {\n bg: \"transparent\",\n border: \"px\",\n borderColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n hover_borderColor: \"transparent\",\n focus_within_backgroundColor: \"gray-4\",\n focus_within_borderColor: \"blue-8\",\n },\n },\n disabled: {\n outline: {\n bg: \"gray-2\",\n border: \"px\",\n borderColor: \"gray-2\",\n },\n ghost: {\n bg: \"transparent\",\n border: \"px\",\n borderColor: \"transparent\",\n },\n },\n error: {\n outline: {\n bg: \"surface-1\",\n border: \"px\",\n borderColor: \"red-6\",\n },\n ghost: {\n bg: \"transparent\",\n border: \"px\",\n borderColor: \"red-6\",\n },\n },\n },\n Text: {\n default: {\n color: \"default\",\n },\n disabled: {\n color: \"disabled\",\n },\n error: {\n color: \"default\",\n },\n },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n PolymorphicProps,\n Required,\n TgphComponentProps,\n TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\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":"iRAAaA,EAAO,CAClB,UAAW,CACT,EAAK,CACH,EAAG,IACH,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,IACH,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,KACH,GAAI,IACJ,QAAS,GAAA,CACX,EAEF,KAAM,CACJ,EAAK,CACH,KAAM,IACN,GAAI,GAAA,EAEN,EAAK,CACH,KAAM,IACN,GAAI,GAAA,EAEN,EAAK,CACH,KAAM,IACN,GAAI,GAAA,CACN,EAEF,YAAa,CACX,EAAK,CACH,GAAI,KAAA,EAEN,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,CACN,EAEF,aAAc,CACZ,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,CACN,CAEJ,EAEaC,EAAQ,CACnB,UAAW,CACT,QAAS,CACP,QAAS,CACP,GAAI,YACJ,OAAQ,KACR,YAAa,SACb,kBAAmB,SACnB,yBAA0B,QAAA,EAE5B,MAAO,CACL,GAAI,cACJ,OAAQ,KACR,YAAa,cACb,sBAAuB,SACvB,kBAAmB,cACnB,6BAA8B,SAC9B,yBAA0B,QAAA,CAC5B,EAEF,SAAU,CACR,QAAS,CACP,GAAI,SACJ,OAAQ,KACR,YAAa,QAAA,EAEf,MAAO,CACL,GAAI,cACJ,OAAQ,KACR,YAAa,aAAA,CACf,EAEF,MAAO,CACL,QAAS,CACP,GAAI,YACJ,OAAQ,KACR,YAAa,OAAA,EAEf,MAAO,CACL,GAAI,cACJ,OAAQ,KACR,YAAa,OAAA,CACf,CACF,EAEF,KAAM,CACJ,QAAS,CACP,MAAO,SAAA,EAET,SAAU,CACR,MAAO,UAAA,EAET,MAAO,CACL,MAAO,SAAA,CACT,CAEJ,
|
|
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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"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as n, jsxs as f } from "react/jsx-runtime";
|
|
2
|
-
import { Slot as
|
|
3
|
-
import { useComposedRefs as
|
|
2
|
+
import { Slot as T } from "@radix-ui/react-slot";
|
|
3
|
+
import { useComposedRefs as v } from "@telegraph/compose-refs";
|
|
4
4
|
import { Stack as b } from "@telegraph/layout";
|
|
5
|
-
import { Text as
|
|
5
|
+
import { Text as j } from "@telegraph/typography";
|
|
6
6
|
import i from "react";
|
|
7
7
|
const l = {
|
|
8
8
|
Container: {
|
|
@@ -123,13 +123,14 @@ const l = {
|
|
|
123
123
|
size: t = "2",
|
|
124
124
|
variant: e = "outline",
|
|
125
125
|
textProps: o,
|
|
126
|
+
stackProps: m,
|
|
126
127
|
disabled: d,
|
|
127
|
-
errored:
|
|
128
|
-
children:
|
|
129
|
-
tgphRef:
|
|
130
|
-
...
|
|
128
|
+
errored: _,
|
|
129
|
+
children: z,
|
|
130
|
+
tgphRef: R,
|
|
131
|
+
...S
|
|
131
132
|
}) => {
|
|
132
|
-
const
|
|
133
|
+
const w = r, u = i.useRef(null), y = v(R, u), a = d ? "disabled" : _ ? "error" : "default";
|
|
133
134
|
return /* @__PURE__ */ n(h.Provider, { value: { size: t, variant: e, state: a }, children: /* @__PURE__ */ f(
|
|
134
135
|
b,
|
|
135
136
|
{
|
|
@@ -150,25 +151,26 @@ const l = {
|
|
|
150
151
|
"data-tgph-input-container-variant": e,
|
|
151
152
|
"data-tgph-input-container-state": a,
|
|
152
153
|
"data-tgph-input-container-size": t,
|
|
154
|
+
...m,
|
|
153
155
|
children: [
|
|
154
156
|
/* @__PURE__ */ n(
|
|
155
|
-
|
|
157
|
+
j,
|
|
156
158
|
{
|
|
157
|
-
as:
|
|
159
|
+
as: w,
|
|
158
160
|
bg: "transparent",
|
|
159
161
|
shadow: "0",
|
|
160
162
|
h: "full",
|
|
161
163
|
w: "full",
|
|
162
164
|
disabled: d,
|
|
163
|
-
tgphRef:
|
|
165
|
+
tgphRef: y,
|
|
164
166
|
...l.Text[t],
|
|
165
167
|
...g.Text[a],
|
|
166
|
-
...
|
|
168
|
+
...S,
|
|
167
169
|
...o,
|
|
168
170
|
"data-tgph-input-field": !0
|
|
169
171
|
}
|
|
170
172
|
),
|
|
171
|
-
|
|
173
|
+
z
|
|
172
174
|
]
|
|
173
175
|
}
|
|
174
176
|
) });
|
|
@@ -186,7 +188,7 @@ const l = {
|
|
|
186
188
|
"data-tgph-input-slot-size": t.size ?? o.size,
|
|
187
189
|
...r === "leading" && l.SlotLeading[o.size],
|
|
188
190
|
...r === "trailing" && l.SlotTrailing[o.size],
|
|
189
|
-
children: /* @__PURE__ */ n(
|
|
191
|
+
children: /* @__PURE__ */ n(T, { size: o.size, ...t, ref: e })
|
|
190
192
|
}
|
|
191
193
|
);
|
|
192
194
|
}
|
|
@@ -199,8 +201,8 @@ const l = {
|
|
|
199
201
|
t && /* @__PURE__ */ n(s, { position: "trailing", children: t })
|
|
200
202
|
] });
|
|
201
203
|
Object.assign(C, { Root: x, Slot: s });
|
|
202
|
-
const
|
|
204
|
+
const A = C;
|
|
203
205
|
export {
|
|
204
|
-
|
|
206
|
+
A as Input
|
|
205
207
|
};
|
|
206
208
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n Container: {\n \"1\": {\n h: \"6\",\n pl: \"0\",\n rounded: \"2\",\n },\n \"2\": {\n h: \"8\",\n pl: \"0\",\n rounded: \"2\",\n },\n \"3\": {\n h: \"10\",\n pl: \"0\",\n rounded: \"2\",\n },\n },\n Text: {\n \"1\": {\n size: \"1\",\n px: \"1\",\n },\n \"2\": {\n size: \"2\",\n px: \"2\",\n },\n \"3\": {\n size: \"3\",\n px: \"3\",\n },\n },\n SlotLeading: {\n \"1\": {\n pl: \"1_5\",\n },\n \"2\": {\n pl: \"2\",\n },\n \"3\": {\n pl: \"3\",\n },\n },\n SlotTrailing: {\n \"1\": {\n pr: \"1\",\n },\n \"2\": {\n pr: \"2\",\n },\n \"3\": {\n pr: \"3\",\n },\n },\n} as const;\n\nexport const COLOR = {\n Container: {\n default: {\n outline: {\n bg: \"surface-1\",\n border: \"px\",\n borderColor: \"gray-6\",\n hover_borderColor: \"gray-7\",\n focus_within_borderColor: \"blue-8\",\n },\n ghost: {\n bg: \"transparent\",\n border: \"px\",\n borderColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n hover_borderColor: \"transparent\",\n focus_within_backgroundColor: \"gray-4\",\n focus_within_borderColor: \"blue-8\",\n },\n },\n disabled: {\n outline: {\n bg: \"gray-2\",\n border: \"px\",\n borderColor: \"gray-2\",\n },\n ghost: {\n bg: \"transparent\",\n border: \"px\",\n borderColor: \"transparent\",\n },\n },\n error: {\n outline: {\n bg: \"surface-1\",\n border: \"px\",\n borderColor: \"red-6\",\n },\n ghost: {\n bg: \"transparent\",\n border: \"px\",\n borderColor: \"red-6\",\n },\n },\n },\n Text: {\n default: {\n color: \"default\",\n },\n disabled: {\n color: \"disabled\",\n },\n error: {\n color: \"default\",\n },\n },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n PolymorphicProps,\n Required,\n TgphComponentProps,\n TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\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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"}
|
|
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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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { PolymorphicProps, TgphComponentProps, TgphElement } from '@telegraph/helpers';
|
|
2
|
+
import { Stack } from '@telegraph/layout';
|
|
2
3
|
import { Text } from '@telegraph/typography';
|
|
3
4
|
import { default as React } from 'react';
|
|
4
5
|
type BaseRootProps = {
|
|
@@ -8,8 +9,9 @@ type BaseRootProps = {
|
|
|
8
9
|
};
|
|
9
10
|
type RootProps<T extends TgphElement> = BaseRootProps & {
|
|
10
11
|
textProps?: Omit<React.ComponentProps<typeof Text<T>>, "as">;
|
|
12
|
+
stackProps?: Omit<React.ComponentProps<typeof Stack>, "as">;
|
|
11
13
|
} & Omit<React.ComponentProps<typeof Text<T>>, "as">;
|
|
12
|
-
declare const Root: <T extends TgphElement>({ as, size, variant, textProps, disabled, errored, children, tgphRef, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare const Root: <T extends TgphElement>({ as, size, variant, textProps, stackProps, disabled, errored, children, tgphRef, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
13
15
|
declare const Slot: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & React.RefAttributes<HTMLElement>, "ref"> & {
|
|
14
16
|
size?: "1" | "2" | "3";
|
|
15
17
|
position?: "leading" | "trailing";
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/input",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "Input component for Telegraph",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/input",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"@radix-ui/react-slot": "^1.2.3",
|
|
36
36
|
"@telegraph/compose-refs": "^0.0.7",
|
|
37
37
|
"@telegraph/helpers": "^0.0.13",
|
|
38
|
-
"@telegraph/layout": "^0.
|
|
39
|
-
"@telegraph/typography": "^0.1.
|
|
38
|
+
"@telegraph/layout": "^0.3.0",
|
|
39
|
+
"@telegraph/typography": "^0.1.26",
|
|
40
40
|
"clsx": "^2.1.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|