@telegraph/input 0.0.24 → 0.0.25
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 +6 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/css/default.css +1 -1
- package/dist/esm/index.mjs +41 -32
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/Input/Input.constants.d.ts +8 -3
- package/dist/types/Input/Input.constants.d.ts.map +1 -1
- package/dist/types/Input/Input.d.ts +5 -2
- package/dist/types/Input/Input.d.ts.map +1 -1
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @telegraph/input
|
|
2
2
|
|
|
3
|
+
## 0.0.25
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#300](https://github.com/knocklabs/telegraph/pull/300) [`852f777`](https://github.com/knocklabs/telegraph/commit/852f777b0f5a0cb40ce4111ff918cc5c243b108d) Thanks [@kylemcd](https://github.com/kylemcd)! - add support for text props on input and textarea
|
|
8
|
+
|
|
3
9
|
## 0.0.22
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("@radix-ui/react-slot"),I=require("@telegraph/compose-refs"),b=require("@telegraph/layout"),v=require("@telegraph/typography"),l=require("clsx"),s=require("react"),a={Container:{1:"h-6 pl-0 rounded-2",2:"h-8 pl-0 rounded-2",3:"h-10 pl-0 rounded-3"},Input:{1:"px-1",2:"px-2",3:"px-3"},Text:{1:"1",2:"2",3:"3"},Slot:{1:"[&>[data-tgph-button]]:rounded-1",2:"[&>[data-tgph-button]]:rounded-1",3:"[&>[data-tgph-button]]:rounded-2"},SlotLeading:{1:"order-1 pl-1",2:"order-1 pl-2",3:"order-1 pl-3"},SlotTrailing:{1:"order-3 pr-1",2:"order-3 pr-2",3:"order-3 pr-3"}},z={Container:{default:{outline:"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8",ghost:"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8"},disabled:{outline:"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9",ghost:"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9"},error:{outline:"bg-surface-1 border-red-6",ghost:"bg-transparent border-red-6"}}},h=s.createContext({state:"default",size:"2",variant:"outline"}),x=({as:r="input",size:t="2",variant:o="outline",textProps:n={size:a.Text[t],color:"default"},className:y,disabled:d,errored:j,children:m,tgphRef:S,...R})=>{const q=r,i=s.useRef(null),w=I.useComposedRefs(S,i),c=d?"disabled":j?"error":"default";return e.jsx(h.Provider,{value:{size:t,variant:o,state:c},children:e.jsxs(b.Box,{className:l("box-border flex items-center transition-all","border-[1px] border-solid text-gray-12 placeholder:text-gray-10",z.Container[c][o],a.Container[t]),onPointerDown:p=>{if(p.target.closest("button, a")){p.preventDefault();return}const g=i.current;g&&requestAnimationFrame(()=>{g.focus()})},children:[e.jsx(v.Text,{as:q,className:l("appearance-none border-none shadow-0 outline-0 bg-transparent","[font-family:inherit] h-full w-full","order-2",a.Input[t],y),disabled:d,...n,...R,tgphRef:w}),m]})})},u=s.forwardRef(({position:r="leading",...t},o)=>{const n=s.useContext(h);return e.jsx(b.Box,{className:l("group box-border flex items-center justify-center h-full","[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto","[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0","[&>[data-tgph-button-layout='default']]:px-2","[&:has([data-tgph-button-layout='icon-only'])]:aspect-square","[&:has([data-tgph-button-layout='icon-only'])]:!p-1",r==="leading"&&a.SlotLeading[n.size],r==="trailing"&&a.SlotTrailing[n.size],a.Slot[t.size??n.size]),children:e.jsx(C.Slot,{size:n.size,...t,ref:o})})}),f=({LeadingComponent:r,TrailingComponent:t,...o})=>e.jsxs(x,{...o,children:[r&&e.jsx(u,{position:"leading",children:r}),t&&e.jsx(u,{position:"trailing",children:t})]});Object.assign(f,{Root:x,Slot:u});const T=f;exports.Input=T;
|
|
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\": \"h-6 pl-0 rounded-2\",\n \"2\": \"h-8 pl-0 rounded-2\",\n \"3\": \"h-10 pl-0 rounded-3\",\n },\n Input: {\n \"1\": \"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n Container: {\n \"1\": \"h-6 pl-0 rounded-2\",\n \"2\": \"h-8 pl-0 rounded-2\",\n \"3\": \"h-10 pl-0 rounded-3\",\n },\n Input: {\n \"1\": \"px-1\",\n \"2\": \"px-2\",\n \"3\": \"px-3\",\n },\n Text: {\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n },\n Slot: {\n \"1\": \"[&>[data-tgph-button]]:rounded-1\",\n \"2\": \"[&>[data-tgph-button]]:rounded-1\",\n \"3\": \"[&>[data-tgph-button]]:rounded-2\",\n },\n SlotLeading: {\n \"1\": \"order-1 pl-1\",\n \"2\": \"order-1 pl-2\",\n \"3\": \"order-1 pl-3\",\n },\n SlotTrailing: {\n \"1\": \"order-3 pr-1\",\n \"2\": \"order-3 pr-2\",\n \"3\": \"order-3 pr-3\",\n },\n} as const;\n\nexport const COLOR = {\n Container: {\n default: {\n outline:\n \"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8\",\n ghost:\n \"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8\",\n },\n disabled: {\n outline:\n \"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n ghost:\n \"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n },\n error: {\n outline: \"bg-surface-1 border-red-6\",\n ghost: \"bg-transparent border-red-6\",\n },\n },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n PolymorphicProps,\n PolymorphicPropsWithTgphRef,\n Required,\n TgphComponentProps,\n TgphElement,\n} from \"@telegraph/helpers\";\nimport { Box } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\ntype BaseRootProps = {\n size?: keyof typeof SIZE.Container;\n variant?: keyof typeof COLOR.Container.default;\n errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = Omit<\n PolymorphicPropsWithTgphRef<T, HTMLInputElement>,\n \"size\"\n> &\n BaseRootProps & {\n textProps?: Omit<React.ComponentProps<typeof Text<\"input\">>, \"as\">;\n };\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n state: \"default\" | \"disabled\" | \"error\";\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n state: \"default\",\n size: \"2\",\n variant: \"outline\",\n});\n\nconst Root = <T extends TgphElement>({\n as = \"input\" as T,\n size = \"2\",\n variant = \"outline\",\n textProps = { size: SIZE.Text[size], color: \"default\" },\n className,\n disabled,\n errored,\n children,\n tgphRef,\n ...props\n}: RootProps<T>) => {\n const Component = as;\n const inputRef = React.useRef<HTMLInputElement>(null);\n const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n return (\n <InputContext.Provider value={{ size, variant, state }}>\n <Box\n className={clsx(\n \"box-border flex items-center transition-all\",\n \"border-[1px] border-solid text-gray-12 placeholder:text-gray-10\",\n COLOR.Container[state][variant],\n SIZE.Container[size],\n )}\n // Focus the input when clicking on the container\n onPointerDown={(event: React.MouseEvent<HTMLDivElement>) => {\n const target = event.target as HTMLElement;\n\n // Make sure we're not clicking on an interactive element\n if (target.closest(\"button, a\")) {\n event.preventDefault();\n return;\n }\n\n const input = inputRef.current;\n if (!input) return;\n\n requestAnimationFrame(() => {\n input.focus();\n });\n }}\n >\n {/* \n We choose to use the `<Text/>` component as a base here so that we can \n configure the text inside of the input to match the design system font sizes\n */}\n <Text\n as={Component}\n className={clsx(\n \"appearance-none border-none shadow-0 outline-0 bg-transparent\",\n \"[font-family:inherit] h-full w-full\",\n \"order-2\",\n SIZE.Input[size],\n className,\n )}\n disabled={disabled}\n {...textProps}\n {...props}\n tgphRef={composedRefs}\n />\n {children}\n </Box>\n </InputContext.Provider>\n );\n};\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n size?: keyof typeof SIZE.Slot;\n position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = React.ElementRef<typeof RadixSlot>;\n\nconst Slot = React.forwardRef<SlotRef, SlotProps>(\n ({ position = \"leading\", ...props }, forwardedRef) => {\n const context = React.useContext(InputContext);\n return (\n <Box\n className={clsx(\n \"group box-border flex items-center justify-center h-full\",\n \"[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto\",\n // Overrides to match the icon button in figma\n \"[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0\",\n // Overrides default button layout to match the button in figma\n \"[&>[data-tgph-button-layout='default']]:px-2\",\n // If only an icon button is present, set the aspect ratio to square\n \"[&:has([data-tgph-button-layout='icon-only'])]:aspect-square\",\n // If only an icon button is present, reset the padding to spacing-1\n \"[&:has([data-tgph-button-layout='icon-only'])]:!p-1\",\n position === \"leading\" && SIZE.SlotLeading[context.size],\n position === \"trailing\" && SIZE.SlotTrailing[context.size],\n SIZE.Slot[props.size ?? context.size],\n )}\n >\n <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n </Box>\n );\n },\n);\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n TgphComponentProps<typeof Root> & {\n LeadingComponent?: React.ReactNode;\n TrailingComponent?: React.ReactNode;\n };\n\nconst Default = <T extends TgphElement>({\n LeadingComponent,\n TrailingComponent,\n ...props\n}: DefaultProps<T>) => {\n return (\n <Root {...props}>\n {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n {TrailingComponent && (\n <Slot position=\"trailing\">{TrailingComponent}</Slot>\n )}\n </Root>\n );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n Root: typeof Root;\n Slot: typeof Slot;\n};\n\nexport { Input };\n"],"names":["SIZE","COLOR","InputContext","React","Root","as","size","variant","textProps","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}
|
package/dist/css/default.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.tgph :is(.order-1){order:1}.tgph :is(.order-2){order:2}.tgph :is(.order-3){order:3}.tgph :is(.box-border){box-sizing:border-box}.tgph :is(.flex){display:flex}.tgph :is(.aspect-square){aspect-ratio:1 / 1}.tgph :is(.h-10){height:var(--tgph-spacing-10)}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.h-full){height:var(--tgph-spacing-full)}.tgph :is(.w-full){width:var(--tgph-spacing-full)}.tgph :is(.cursor-not-allowed){cursor:not-allowed}.tgph :is(.appearance-none){-webkit-appearance:none;-moz-appearance:none;appearance:none}.tgph :is(.items-center){align-items:center}.tgph :is(.justify-center){justify-content:center}.tgph :is(.rounded-2){border-radius:var(--tgph-rounded-2)}.tgph :is(.rounded-3){border-radius:var(--tgph-rounded-3)}.tgph :is(.border){border-width:1px}.tgph :is(.border-\[1px\]){border-width:1px}.tgph :is(.border-solid){border-style:solid}.tgph :is(.border-none){border-style:none}.tgph :is(.border-gray-2){border-color:var(--tgph-gray-2)}.tgph :is(.border-gray-6){border-color:var(--tgph-gray-6)}.tgph :is(.border-red-6){border-color:var(--tgph-red-6)}.tgph :is(.border-transparent){border-color:var(--tgph-transparent)}.tgph :is(.bg-gray-2){background-color:var(--tgph-gray-2)}.tgph :is(.bg-surface-1){background-color:var(--tgph-surface-1)}.tgph :is(.bg-transparent){background-color:var(--tgph-transparent)}.tgph :is(.\!p-1){padding:var(--tgph-spacing-1)!important}.tgph :is(.px-1){padding-left:var(--tgph-spacing-1);padding-right:var(--tgph-spacing-1)}.tgph :is(.px-2){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.px-3){padding-left:var(--tgph-spacing-3);padding-right:var(--tgph-spacing-3)}.tgph :is(.pl-0){padding-left:var(--tgph-spacing-0)}.tgph :is(.pl-1){padding-left:var(--tgph-spacing-1)}.tgph :is(.pl-2){padding-left:var(--tgph-spacing-2)}.tgph :is(.pl-3){padding-left:var(--tgph-spacing-3)}.tgph :is(.pr-1){padding-right:var(--tgph-spacing-1)}.tgph :is(.pr-2){padding-right:var(--tgph-spacing-2)}.tgph :is(.pr-3){padding-right:var(--tgph-spacing-3)}.tgph :is(.text-
|
|
1
|
+
.tgph :is(.order-1){order:1}.tgph :is(.order-2){order:2}.tgph :is(.order-3){order:3}.tgph :is(.box-border){box-sizing:border-box}.tgph :is(.flex){display:flex}.tgph :is(.aspect-square){aspect-ratio:1 / 1}.tgph :is(.h-10){height:var(--tgph-spacing-10)}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.h-full){height:var(--tgph-spacing-full)}.tgph :is(.w-full){width:var(--tgph-spacing-full)}.tgph :is(.cursor-not-allowed){cursor:not-allowed}.tgph :is(.appearance-none){-webkit-appearance:none;-moz-appearance:none;appearance:none}.tgph :is(.items-center){align-items:center}.tgph :is(.justify-center){justify-content:center}.tgph :is(.rounded-2){border-radius:var(--tgph-rounded-2)}.tgph :is(.rounded-3){border-radius:var(--tgph-rounded-3)}.tgph :is(.border){border-width:1px}.tgph :is(.border-\[1px\]){border-width:1px}.tgph :is(.border-solid){border-style:solid}.tgph :is(.border-none){border-style:none}.tgph :is(.border-gray-2){border-color:var(--tgph-gray-2)}.tgph :is(.border-gray-6){border-color:var(--tgph-gray-6)}.tgph :is(.border-red-6){border-color:var(--tgph-red-6)}.tgph :is(.border-transparent){border-color:var(--tgph-transparent)}.tgph :is(.bg-gray-2){background-color:var(--tgph-gray-2)}.tgph :is(.bg-surface-1){background-color:var(--tgph-surface-1)}.tgph :is(.bg-transparent){background-color:var(--tgph-transparent)}.tgph :is(.\!p-1){padding:var(--tgph-spacing-1)!important}.tgph :is(.px-1){padding-left:var(--tgph-spacing-1);padding-right:var(--tgph-spacing-1)}.tgph :is(.px-2){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.px-3){padding-left:var(--tgph-spacing-3);padding-right:var(--tgph-spacing-3)}.tgph :is(.pl-0){padding-left:var(--tgph-spacing-0)}.tgph :is(.pl-1){padding-left:var(--tgph-spacing-1)}.tgph :is(.pl-2){padding-left:var(--tgph-spacing-2)}.tgph :is(.pl-3){padding-left:var(--tgph-spacing-3)}.tgph :is(.pr-1){padding-right:var(--tgph-spacing-1)}.tgph :is(.pr-2){padding-right:var(--tgph-spacing-2)}.tgph :is(.pr-3){padding-right:var(--tgph-spacing-3)}.tgph :is(.text-gray-12){color:var(--tgph-gray-12)}.tgph :is(.shadow-0){--tw-shadow: var(--tgph-shadow-0);--tw-shadow-colored: var(--tgph-shadow-0);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph :is(.outline){outline-style:solid}.tgph :is(.outline-0){outline-width:0px}.tgph :is(.transition-all){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\[font-family\:inherit\]{font-family:inherit}.tgph :is(.placeholder\:text-gray-10)::-moz-placeholder{color:var(--tgph-gray-10)}.tgph :is(.placeholder\:text-gray-10)::placeholder{color:var(--tgph-gray-10)}.tgph :is(.placeholder\:text-gray-9)::-moz-placeholder{color:var(--tgph-gray-9)}.tgph :is(.placeholder\:text-gray-9)::placeholder{color:var(--tgph-gray-9)}.tgph :is(.focus-within\:\!border-blue-8:focus-within){border-color:var(--tgph-blue-8)!important}.tgph :is(.focus-within\:\!bg-gray-4:focus-within){background-color:var(--tgph-gray-4)!important}.tgph :is(.hover\:border-gray-7:hover){border-color:var(--tgph-gray-7)}.tgph :is(.hover\:bg-gray-3:hover){background-color:var(--tgph-gray-3)}.tgph :is(.\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:aspect-square:has([data-tgph-button-layout=icon-only])){aspect-ratio:1 / 1}.tgph :is(.\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:\!p-1:has([data-tgph-button-layout=icon-only])){padding:var(--tgph-spacing-1)!important}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'default\'\]\]\:px-2>[data-tgph-button-layout=default]){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:aspect-square>[data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:p-0>[data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-0)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:h-auto>[data-tgph-button]){height:var(--tgph-spacing-auto)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:w-full>[data-tgph-button]){width:var(--tgph-spacing-full)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-1>[data-tgph-button]){border-radius:var(--tgph-rounded-1)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-2>[data-tgph-button]){border-radius:var(--tgph-rounded-2)}.tgph :is(.\[\&\>input\]\:text-gray-9>input){color:var(--tgph-gray-9)}.tgph :is(.\[\&_\[data-tgph-icon\]\]\:text-gray-8 [data-tgph-icon]){color:var(--tgph-gray-8)}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,19 +1,25 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Slot as
|
|
3
|
-
import { useComposedRefs as
|
|
1
|
+
import { jsx as a, jsxs as b } from "react/jsx-runtime";
|
|
2
|
+
import { Slot as j } from "@radix-ui/react-slot";
|
|
3
|
+
import { useComposedRefs as v } from "@telegraph/compose-refs";
|
|
4
4
|
import { Box as h } from "@telegraph/layout";
|
|
5
|
+
import { Text as T } from "@telegraph/typography";
|
|
5
6
|
import d from "clsx";
|
|
6
7
|
import l from "react";
|
|
7
|
-
const
|
|
8
|
+
const n = {
|
|
8
9
|
Container: {
|
|
9
10
|
1: "h-6 pl-0 rounded-2",
|
|
10
11
|
2: "h-8 pl-0 rounded-2",
|
|
11
12
|
3: "h-10 pl-0 rounded-3"
|
|
12
13
|
},
|
|
13
14
|
Input: {
|
|
14
|
-
1: "
|
|
15
|
-
2: "
|
|
16
|
-
3: "
|
|
15
|
+
1: "px-1",
|
|
16
|
+
2: "px-2",
|
|
17
|
+
3: "px-3"
|
|
18
|
+
},
|
|
19
|
+
Text: {
|
|
20
|
+
1: "1",
|
|
21
|
+
2: "2",
|
|
22
|
+
3: "3"
|
|
17
23
|
},
|
|
18
24
|
Slot: {
|
|
19
25
|
1: "[&>[data-tgph-button]]:rounded-1",
|
|
@@ -30,7 +36,7 @@ const a = {
|
|
|
30
36
|
2: "order-3 pr-2",
|
|
31
37
|
3: "order-3 pr-3"
|
|
32
38
|
}
|
|
33
|
-
},
|
|
39
|
+
}, q = {
|
|
34
40
|
Container: {
|
|
35
41
|
default: {
|
|
36
42
|
outline: "bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8",
|
|
@@ -53,22 +59,23 @@ const a = {
|
|
|
53
59
|
as: r = "input",
|
|
54
60
|
size: t = "2",
|
|
55
61
|
variant: e = "outline",
|
|
56
|
-
|
|
62
|
+
textProps: o = { size: n.Text[t], color: "default" },
|
|
63
|
+
className: m,
|
|
57
64
|
disabled: u,
|
|
58
|
-
errored:
|
|
59
|
-
children:
|
|
60
|
-
tgphRef:
|
|
65
|
+
errored: w,
|
|
66
|
+
children: S,
|
|
67
|
+
tgphRef: R,
|
|
61
68
|
...C
|
|
62
69
|
}) => {
|
|
63
|
-
const
|
|
64
|
-
return /* @__PURE__ */
|
|
70
|
+
const z = r, i = l.useRef(null), I = v(R, i), p = u ? "disabled" : w ? "error" : "default";
|
|
71
|
+
return /* @__PURE__ */ a(f.Provider, { value: { size: t, variant: e, state: p }, children: /* @__PURE__ */ b(
|
|
65
72
|
h,
|
|
66
73
|
{
|
|
67
74
|
className: d(
|
|
68
75
|
"box-border flex items-center transition-all",
|
|
69
76
|
"border-[1px] border-solid text-gray-12 placeholder:text-gray-10",
|
|
70
|
-
|
|
71
|
-
|
|
77
|
+
q.Container[p][e],
|
|
78
|
+
n.Container[t]
|
|
72
79
|
),
|
|
73
80
|
onPointerDown: (c) => {
|
|
74
81
|
if (c.target.closest("button, a")) {
|
|
@@ -81,29 +88,31 @@ const a = {
|
|
|
81
88
|
});
|
|
82
89
|
},
|
|
83
90
|
children: [
|
|
84
|
-
/* @__PURE__ */
|
|
85
|
-
|
|
91
|
+
/* @__PURE__ */ a(
|
|
92
|
+
T,
|
|
86
93
|
{
|
|
94
|
+
as: z,
|
|
87
95
|
className: d(
|
|
88
|
-
"appearance-none
|
|
96
|
+
"appearance-none border-none shadow-0 outline-0 bg-transparent",
|
|
89
97
|
"[font-family:inherit] h-full w-full",
|
|
90
98
|
"order-2",
|
|
91
|
-
|
|
92
|
-
|
|
99
|
+
n.Input[t],
|
|
100
|
+
m
|
|
93
101
|
),
|
|
94
102
|
disabled: u,
|
|
103
|
+
...o,
|
|
95
104
|
...C,
|
|
96
|
-
|
|
105
|
+
tgphRef: I
|
|
97
106
|
}
|
|
98
107
|
),
|
|
99
|
-
|
|
108
|
+
S
|
|
100
109
|
]
|
|
101
110
|
}
|
|
102
111
|
) });
|
|
103
112
|
}, s = l.forwardRef(
|
|
104
113
|
({ position: r = "leading", ...t }, e) => {
|
|
105
114
|
const o = l.useContext(f);
|
|
106
|
-
return /* @__PURE__ */
|
|
115
|
+
return /* @__PURE__ */ a(
|
|
107
116
|
h,
|
|
108
117
|
{
|
|
109
118
|
className: d(
|
|
@@ -117,11 +126,11 @@ const a = {
|
|
|
117
126
|
"[&:has([data-tgph-button-layout='icon-only'])]:aspect-square",
|
|
118
127
|
// If only an icon button is present, reset the padding to spacing-1
|
|
119
128
|
"[&:has([data-tgph-button-layout='icon-only'])]:!p-1",
|
|
120
|
-
r === "leading" &&
|
|
121
|
-
r === "trailing" &&
|
|
122
|
-
|
|
129
|
+
r === "leading" && n.SlotLeading[o.size],
|
|
130
|
+
r === "trailing" && n.SlotTrailing[o.size],
|
|
131
|
+
n.Slot[t.size ?? o.size]
|
|
123
132
|
),
|
|
124
|
-
children: /* @__PURE__ */
|
|
133
|
+
children: /* @__PURE__ */ a(j, { size: o.size, ...t, ref: e })
|
|
125
134
|
}
|
|
126
135
|
);
|
|
127
136
|
}
|
|
@@ -130,12 +139,12 @@ const a = {
|
|
|
130
139
|
TrailingComponent: t,
|
|
131
140
|
...e
|
|
132
141
|
}) => /* @__PURE__ */ b(x, { ...e, children: [
|
|
133
|
-
r && /* @__PURE__ */
|
|
134
|
-
t && /* @__PURE__ */
|
|
142
|
+
r && /* @__PURE__ */ a(s, { position: "leading", children: r }),
|
|
143
|
+
t && /* @__PURE__ */ a(s, { position: "trailing", children: t })
|
|
135
144
|
] });
|
|
136
145
|
Object.assign(y, { Root: x, Slot: s });
|
|
137
|
-
const
|
|
146
|
+
const E = y;
|
|
138
147
|
export {
|
|
139
|
-
|
|
148
|
+
E as Input
|
|
140
149
|
};
|
|
141
150
|
//# 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\": \"h-6 pl-0 rounded-2\",\n \"2\": \"h-8 pl-0 rounded-2\",\n \"3\": \"h-10 pl-0 rounded-3\",\n },\n Input: {\n \"1\": \"text-1 px-1\",\n \"2\": \"text-2 px-2\",\n \"3\": \"text-3 px-3\",\n },\n Slot: {\n \"1\": \"[&>[data-tgph-button]]:rounded-1\",\n \"2\": \"[&>[data-tgph-button]]:rounded-1\",\n \"3\": \"[&>[data-tgph-button]]:rounded-2\",\n },\n SlotLeading: {\n \"1\": \"order-1 pl-1\",\n \"2\": \"order-1 pl-2\",\n \"3\": \"order-1 pl-3\",\n },\n SlotTrailing: {\n \"1\": \"order-3 pr-1\",\n \"2\": \"order-3 pr-2\",\n \"3\": \"order-3 pr-3\",\n },\n} as const;\n\nexport const COLOR = {\n Container: {\n default: {\n outline:\n \"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8\",\n ghost:\n \"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8\",\n },\n disabled: {\n outline:\n \"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n ghost:\n \"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n },\n error: {\n outline: \"bg-surface-1 border-red-6\",\n ghost: \"bg-transparent border-red-6\",\n },\n },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n PolymorphicProps,\n PolymorphicPropsWithTgphRef,\n Required,\n TgphComponentProps,\n TgphElement,\n} from \"@telegraph/helpers\";\nimport { Box } from \"@telegraph/layout\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\ntype BaseRootProps = {\n size?: keyof typeof SIZE.Container;\n variant?: keyof typeof COLOR.Container.default;\n errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = Omit<\n PolymorphicPropsWithTgphRef<T, HTMLInputElement>,\n \"size\"\n> &\n BaseRootProps;\n\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 className,\n disabled,\n errored,\n children,\n tgphRef,\n ...props\n}: RootProps<T>) => {\n const Component = as;\n const inputRef = React.useRef<HTMLInputElement>(null);\n const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n return (\n <InputContext.Provider value={{ size, variant, state }}>\n <Box\n className={clsx(\n \"box-border flex items-center transition-all\",\n \"border-[1px] border-solid text-gray-12 placeholder:text-gray-10\",\n COLOR.Container[state][variant],\n SIZE.Container[size],\n )}\n // Focus the input when clicking on the container\n onPointerDown={(event: React.MouseEvent<HTMLDivElement>) => {\n const target = event.target as HTMLElement;\n\n // Make sure we're not clicking on an interactive element\n if (target.closest(\"button, a\")) {\n event.preventDefault();\n return;\n }\n\n const input = inputRef.current;\n if (!input) return;\n\n requestAnimationFrame(() => {\n input.focus();\n });\n }}\n >\n <Component\n className={clsx(\n \"appearance-none text-gray-12 border-none shadow-0 outline-0 bg-transparent\",\n \"[font-family:inherit] h-full w-full\",\n \"order-2\",\n SIZE.Input[size],\n className,\n )}\n disabled={disabled}\n {...props}\n ref={composedRefs}\n />\n {children}\n </Box>\n </InputContext.Provider>\n );\n};\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n size?: keyof typeof SIZE.Slot;\n position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = React.ElementRef<typeof RadixSlot>;\n\nconst Slot = React.forwardRef<SlotRef, SlotProps>(\n ({ position = \"leading\", ...props }, forwardedRef) => {\n const context = React.useContext(InputContext);\n return (\n <Box\n className={clsx(\n \"group box-border flex items-center justify-center h-full\",\n \"[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto\",\n // Overrides to match the icon button in figma\n \"[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0\",\n // Overrides default button layout to match the button in figma\n \"[&>[data-tgph-button-layout='default']]:px-2\",\n // If only an icon button is present, set the aspect ratio to square\n \"[&:has([data-tgph-button-layout='icon-only'])]:aspect-square\",\n // If only an icon button is present, reset the padding to spacing-1\n \"[&:has([data-tgph-button-layout='icon-only'])]:!p-1\",\n position === \"leading\" && SIZE.SlotLeading[context.size],\n position === \"trailing\" && SIZE.SlotTrailing[context.size],\n SIZE.Slot[props.size ?? context.size],\n )}\n >\n <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n </Box>\n );\n },\n);\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n TgphComponentProps<typeof Root> & {\n LeadingComponent?: React.ReactNode;\n TrailingComponent?: React.ReactNode;\n };\n\nconst Default = <T extends TgphElement>({\n LeadingComponent,\n TrailingComponent,\n ...props\n}: DefaultProps<T>) => {\n return (\n <Root {...props}>\n {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n {TrailingComponent && (\n <Slot position=\"trailing\">{TrailingComponent}</Slot>\n )}\n </Root>\n );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n Root: typeof Root;\n Slot: typeof Slot;\n};\n\nexport { Input };\n"],"names":["SIZE","COLOR","InputContext","React","Root","as","size","variant","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","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\": \"h-6 pl-0 rounded-2\",\n \"2\": \"h-8 pl-0 rounded-2\",\n \"3\": \"h-10 pl-0 rounded-3\",\n },\n Input: {\n \"1\": \"px-1\",\n \"2\": \"px-2\",\n \"3\": \"px-3\",\n },\n Text: {\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n },\n Slot: {\n \"1\": \"[&>[data-tgph-button]]:rounded-1\",\n \"2\": \"[&>[data-tgph-button]]:rounded-1\",\n \"3\": \"[&>[data-tgph-button]]:rounded-2\",\n },\n SlotLeading: {\n \"1\": \"order-1 pl-1\",\n \"2\": \"order-1 pl-2\",\n \"3\": \"order-1 pl-3\",\n },\n SlotTrailing: {\n \"1\": \"order-3 pr-1\",\n \"2\": \"order-3 pr-2\",\n \"3\": \"order-3 pr-3\",\n },\n} as const;\n\nexport const COLOR = {\n Container: {\n default: {\n outline:\n \"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8\",\n ghost:\n \"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8\",\n },\n disabled: {\n outline:\n \"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n ghost:\n \"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n },\n error: {\n outline: \"bg-surface-1 border-red-6\",\n ghost: \"bg-transparent border-red-6\",\n },\n },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n PolymorphicProps,\n PolymorphicPropsWithTgphRef,\n Required,\n TgphComponentProps,\n TgphElement,\n} from \"@telegraph/helpers\";\nimport { Box } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\ntype BaseRootProps = {\n size?: keyof typeof SIZE.Container;\n variant?: keyof typeof COLOR.Container.default;\n errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = Omit<\n PolymorphicPropsWithTgphRef<T, HTMLInputElement>,\n \"size\"\n> &\n BaseRootProps & {\n textProps?: Omit<React.ComponentProps<typeof Text<\"input\">>, \"as\">;\n };\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n state: \"default\" | \"disabled\" | \"error\";\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n state: \"default\",\n size: \"2\",\n variant: \"outline\",\n});\n\nconst Root = <T extends TgphElement>({\n as = \"input\" as T,\n size = \"2\",\n variant = \"outline\",\n textProps = { size: SIZE.Text[size], color: \"default\" },\n className,\n disabled,\n errored,\n children,\n tgphRef,\n ...props\n}: RootProps<T>) => {\n const Component = as;\n const inputRef = React.useRef<HTMLInputElement>(null);\n const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n return (\n <InputContext.Provider value={{ size, variant, state }}>\n <Box\n className={clsx(\n \"box-border flex items-center transition-all\",\n \"border-[1px] border-solid text-gray-12 placeholder:text-gray-10\",\n COLOR.Container[state][variant],\n SIZE.Container[size],\n )}\n // Focus the input when clicking on the container\n onPointerDown={(event: React.MouseEvent<HTMLDivElement>) => {\n const target = event.target as HTMLElement;\n\n // Make sure we're not clicking on an interactive element\n if (target.closest(\"button, a\")) {\n event.preventDefault();\n return;\n }\n\n const input = inputRef.current;\n if (!input) return;\n\n requestAnimationFrame(() => {\n input.focus();\n });\n }}\n >\n {/* \n We choose to use the `<Text/>` component as a base here so that we can \n configure the text inside of the input to match the design system font sizes\n */}\n <Text\n as={Component}\n className={clsx(\n \"appearance-none border-none shadow-0 outline-0 bg-transparent\",\n \"[font-family:inherit] h-full w-full\",\n \"order-2\",\n SIZE.Input[size],\n className,\n )}\n disabled={disabled}\n {...textProps}\n {...props}\n tgphRef={composedRefs}\n />\n {children}\n </Box>\n </InputContext.Provider>\n );\n};\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n size?: keyof typeof SIZE.Slot;\n position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = React.ElementRef<typeof RadixSlot>;\n\nconst Slot = React.forwardRef<SlotRef, SlotProps>(\n ({ position = \"leading\", ...props }, forwardedRef) => {\n const context = React.useContext(InputContext);\n return (\n <Box\n className={clsx(\n \"group box-border flex items-center justify-center h-full\",\n \"[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto\",\n // Overrides to match the icon button in figma\n \"[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0\",\n // Overrides default button layout to match the button in figma\n \"[&>[data-tgph-button-layout='default']]:px-2\",\n // If only an icon button is present, set the aspect ratio to square\n \"[&:has([data-tgph-button-layout='icon-only'])]:aspect-square\",\n // If only an icon button is present, reset the padding to spacing-1\n \"[&:has([data-tgph-button-layout='icon-only'])]:!p-1\",\n position === \"leading\" && SIZE.SlotLeading[context.size],\n position === \"trailing\" && SIZE.SlotTrailing[context.size],\n SIZE.Slot[props.size ?? context.size],\n )}\n >\n <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n </Box>\n );\n },\n);\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n TgphComponentProps<typeof Root> & {\n LeadingComponent?: React.ReactNode;\n TrailingComponent?: React.ReactNode;\n };\n\nconst Default = <T extends TgphElement>({\n LeadingComponent,\n TrailingComponent,\n ...props\n}: DefaultProps<T>) => {\n return (\n <Root {...props}>\n {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n {TrailingComponent && (\n <Slot position=\"trailing\">{TrailingComponent}</Slot>\n )}\n </Root>\n );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n Root: typeof Root;\n Slot: typeof Slot;\n};\n\nexport { Input };\n"],"names":["SIZE","COLOR","InputContext","React","Root","as","size","variant","textProps","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}
|
|
@@ -5,9 +5,14 @@ export declare const SIZE: {
|
|
|
5
5
|
readonly "3": "h-10 pl-0 rounded-3";
|
|
6
6
|
};
|
|
7
7
|
readonly Input: {
|
|
8
|
-
readonly "1": "
|
|
9
|
-
readonly "2": "
|
|
10
|
-
readonly "3": "
|
|
8
|
+
readonly "1": "px-1";
|
|
9
|
+
readonly "2": "px-2";
|
|
10
|
+
readonly "3": "px-3";
|
|
11
|
+
};
|
|
12
|
+
readonly Text: {
|
|
13
|
+
readonly "1": "1";
|
|
14
|
+
readonly "2": "2";
|
|
15
|
+
readonly "3": "3";
|
|
11
16
|
};
|
|
12
17
|
readonly Slot: {
|
|
13
18
|
readonly "1": "[&>[data-tgph-button]]:rounded-1";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.constants.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"Input.constants.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BP,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;CAmBR,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { PolymorphicProps, PolymorphicPropsWithTgphRef, TgphComponentProps, TgphElement } from '@telegraph/helpers';
|
|
2
|
+
import { Text } from '@telegraph/typography';
|
|
2
3
|
import { default as React } from 'react';
|
|
3
4
|
import { COLOR, SIZE } from './Input.constants';
|
|
4
5
|
|
|
@@ -7,8 +8,10 @@ type BaseRootProps = {
|
|
|
7
8
|
variant?: keyof typeof COLOR.Container.default;
|
|
8
9
|
errored?: boolean;
|
|
9
10
|
};
|
|
10
|
-
type RootProps<T extends TgphElement> = Omit<PolymorphicPropsWithTgphRef<T, HTMLInputElement>, "size"> & BaseRootProps
|
|
11
|
-
|
|
11
|
+
type RootProps<T extends TgphElement> = Omit<PolymorphicPropsWithTgphRef<T, HTMLInputElement>, "size"> & BaseRootProps & {
|
|
12
|
+
textProps?: Omit<React.ComponentProps<typeof Text<"input">>, "as">;
|
|
13
|
+
};
|
|
14
|
+
declare const Root: <T extends TgphElement>({ as, size, variant, textProps, className, disabled, errored, children, tgphRef, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
12
15
|
declare const Slot: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & React.RefAttributes<HTMLElement>, "ref"> & {
|
|
13
16
|
size?: keyof typeof SIZE.Slot;
|
|
14
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,EAChB,2BAA2B,EAE3B,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,EAChB,2BAA2B,EAE3B,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEhD,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,IAAI,CAAC,SAAS,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CAC1C,2BAA2B,CAAC,CAAC,EAAE,gBAAgB,CAAC,EAChD,MAAM,CACP,GACC,aAAa,GAAG;IACd,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;CACpE,CAAC;AAYJ,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,+FAWhC,SAAS,CAAC,CAAC,CAAC,4CAwDd,CAAC;AAQF,QAAA,MAAM,IAAI;WALD,MAAM,OAAO,IAAI,CAAC,IAAI;eAClB,SAAS,GAAG,UAAU;qCA6BlC,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,qDAInC,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.0.
|
|
3
|
+
"version": "0.0.25",
|
|
4
4
|
"description": "Input component for Telegraph",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/input",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"@telegraph/compose-refs": "^0.0.2",
|
|
37
37
|
"@telegraph/helpers": "^0.0.7",
|
|
38
38
|
"@telegraph/layout": "^0.0.30",
|
|
39
|
+
"@telegraph/typography": "^0.0.30",
|
|
39
40
|
"clsx": "^2.1.1"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|