@shipfox/react-ui 0.0.1 → 0.2.0
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/.turbo/turbo-build.log +2 -2
- package/.turbo/turbo-check.log +2 -2
- package/.turbo/turbo-type.log +1 -1
- package/CHANGELOG.md +16 -0
- package/README.md +21 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/input.d.ts +10 -0
- package/dist/components/input.d.ts.map +1 -0
- package/dist/components/input.js +32 -0
- package/dist/components/input.js.map +1 -0
- package/dist/components/input.stories.js +199 -0
- package/dist/components/input.stories.js.map +1 -0
- package/dist/components/textarea/index.d.ts +2 -0
- package/dist/components/textarea/index.d.ts.map +1 -0
- package/dist/components/textarea/index.js +3 -0
- package/dist/components/textarea/index.js.map +1 -0
- package/dist/components/textarea/textarea.d.ts +10 -0
- package/dist/components/textarea/textarea.d.ts.map +1 -0
- package/dist/components/textarea/textarea.js +31 -0
- package/dist/components/textarea/textarea.js.map +1 -0
- package/dist/components/textarea/textarea.stories.js +333 -0
- package/dist/components/textarea/textarea.stories.js.map +1 -0
- package/index.css +9 -0
- package/package.json +7 -7
- package/src/components/index.ts +1 -0
- package/src/components/input.stories.tsx +138 -0
- package/src/components/input.tsx +43 -0
- package/src/components/textarea/index.ts +1 -0
- package/src/components/textarea/textarea.stories.tsx +190 -0
- package/src/components/textarea/textarea.tsx +42 -0
- package/src/utils/date.test.ts +1 -1
- package/src/utils/format/date.test.ts +1 -1
- package/src/utils/format/duration.test.ts +1 -1
- package/src/utils/format/number.test.ts +1 -1
- package/test/setup.ts +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
WARN Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
|
|
2
2
|
|
|
3
|
-
> @shipfox/react-ui@0.0
|
|
3
|
+
> @shipfox/react-ui@0.2.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
|
|
4
4
|
> swc
|
|
5
5
|
|
|
6
|
-
Successfully compiled:
|
|
6
|
+
Successfully compiled: 48 files with swc (555.95ms)
|
package/.turbo/turbo-check.log
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
WARN Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
|
|
2
2
|
|
|
3
|
-
> @shipfox/react-ui@0.0
|
|
3
|
+
> @shipfox/react-ui@0.2.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
|
|
4
4
|
> biome --fix
|
|
5
5
|
|
|
6
|
-
Checked
|
|
6
|
+
Checked 64 files in 542ms. No fixes applied.
|
package/.turbo/turbo-type.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
WARN Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
|
|
2
2
|
|
|
3
|
-
> @shipfox/react-ui@0.0
|
|
3
|
+
> @shipfox/react-ui@0.2.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
|
|
4
4
|
> tsc-emit
|
|
5
5
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @shipfox/react-ui
|
|
2
2
|
|
|
3
|
+
## 0.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- d2f5795: Add textarea component
|
|
8
|
+
|
|
9
|
+
## 0.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- cd386f2: Add Input component
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- 674ecbb: Add README for all packages
|
|
18
|
+
|
|
3
19
|
## 0.0.1
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
package/README.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Shipfox Design System
|
|
2
|
+
|
|
3
|
+
The Shipfox Design System is the core of the [Shipfox](https://www.shipfox.io/) UI grammar. It contains all the React components which are the building blocks of our front-end projects.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
### Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @shipfox/react-ui
|
|
11
|
+
# or
|
|
12
|
+
yarn add @shipfox/react-ui
|
|
13
|
+
# or
|
|
14
|
+
npm install @shipfox/react-ui
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Storybook
|
|
18
|
+
|
|
19
|
+
The storybook is [publicly accessible online](react-ui.shipfox.vercel.app).
|
|
20
|
+
|
|
21
|
+
You can also launch it locally by running `pnpm storybook` from within this package's directory.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './button';\nexport * from './icon';\nexport * from './theme-provider';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,mBAAmB;AACjC,cAAc,eAAe"}
|
|
1
|
+
{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './button';\nexport * from './icon';\nexport * from './textarea';\nexport * from './theme-provider';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,eAAe"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
import type { ComponentProps } from 'react';
|
|
3
|
+
export declare const inputVariants: (props?: ({
|
|
4
|
+
variant?: "base" | "component" | null | undefined;
|
|
5
|
+
size?: "base" | "small" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
type InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>;
|
|
8
|
+
export declare function Input({ className, type, variant, size, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,aAAa;;;8EAexB,CAAC;AAEH,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE7F,wBAAgB,KAAK,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,2CAmB3E"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { cn } from '../utils/cn.js';
|
|
4
|
+
export const inputVariants = cva('', {
|
|
5
|
+
variants: {
|
|
6
|
+
variant: {
|
|
7
|
+
base: 'bg-background-field-base',
|
|
8
|
+
component: 'bg-background-field-component'
|
|
9
|
+
},
|
|
10
|
+
size: {
|
|
11
|
+
base: 'py-6',
|
|
12
|
+
small: 'py-4'
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
variant: 'base',
|
|
17
|
+
size: 'base'
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
export function Input({ className, type, variant, size, ...props }) {
|
|
21
|
+
return /*#__PURE__*/ _jsx("input", {
|
|
22
|
+
type: type,
|
|
23
|
+
"data-slot": "input",
|
|
24
|
+
className: cn('placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 text-sm leading-20 text-foreground-neutral-base shadow-border-base transition-[color,box-shadow] outline-none', 'hover:bg-background-field-hover', 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted', 'file:text-foreground-neutral-base file:inline-flex file:font-medium', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled', 'focus-visible:shadow-border-interactive-with-active', 'aria-invalid:shadow-border-error', inputVariants({
|
|
25
|
+
variant,
|
|
26
|
+
size
|
|
27
|
+
}), className),
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
//# sourceMappingURL=input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const inputVariants = cva('', {\n variants: {\n variant: {\n base: 'bg-background-field-base',\n component: 'bg-background-field-component',\n },\n size: {\n base: 'py-6',\n small: 'py-4',\n },\n },\n defaultVariants: {\n variant: 'base',\n size: 'base',\n },\n});\n\ntype InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>;\n\nexport function Input({className, type, variant, size, ...props}: InputProps) {\n return (\n <input\n type={type}\n data-slot=\"input\"\n className={cn(\n 'placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 text-sm leading-20 text-foreground-neutral-base shadow-border-base transition-[color,box-shadow] outline-none',\n 'hover:bg-background-field-hover',\n 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted',\n 'file:text-foreground-neutral-base file:inline-flex file:font-medium',\n 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',\n 'focus-visible:shadow-border-interactive-with-active',\n 'aria-invalid:shadow-border-error',\n inputVariants({variant, size}),\n className,\n )}\n {...props}\n />\n );\n}\n"],"names":["cva","cn","inputVariants","variants","variant","base","component","size","small","defaultVariants","Input","className","type","props","input","data-slot"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,gBAAgBF,IAAI,IAAI;IACnCG,UAAU;QACRC,SAAS;YACPC,MAAM;YACNC,WAAW;QACb;QACAC,MAAM;YACJF,MAAM;YACNG,OAAO;QACT;IACF;IACAC,iBAAiB;QACfL,SAAS;QACTG,MAAM;IACR;AACF,GAAG;AAIH,OAAO,SAASG,MAAM,EAACC,SAAS,EAAEC,IAAI,EAAER,OAAO,EAAEG,IAAI,EAAE,GAAGM,OAAkB;IAC1E,qBACE,KAACC;QACCF,MAAMA;QACNG,aAAU;QACVJ,WAAWV,GACT,yLACA,mCACA,6FACA,uEACA,mKACA,uDACA,oCACAC,cAAc;YAACE;YAASG;QAAI,IAC5BI;QAED,GAAGE,KAAK;;AAGf"}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Code, Header } from '../components/typography/index.js';
|
|
3
|
+
import { Input } from './input.js';
|
|
4
|
+
const typeOptions = [
|
|
5
|
+
'text',
|
|
6
|
+
'email',
|
|
7
|
+
'password',
|
|
8
|
+
'number',
|
|
9
|
+
'search',
|
|
10
|
+
'url',
|
|
11
|
+
'tel',
|
|
12
|
+
'date',
|
|
13
|
+
'time',
|
|
14
|
+
'datetime-local',
|
|
15
|
+
'month',
|
|
16
|
+
'week',
|
|
17
|
+
'color',
|
|
18
|
+
'file'
|
|
19
|
+
];
|
|
20
|
+
const meta = {
|
|
21
|
+
title: 'Components/Input',
|
|
22
|
+
component: Input,
|
|
23
|
+
tags: [
|
|
24
|
+
'autodocs'
|
|
25
|
+
],
|
|
26
|
+
argTypes: {
|
|
27
|
+
type: {
|
|
28
|
+
control: 'select',
|
|
29
|
+
options: typeOptions
|
|
30
|
+
},
|
|
31
|
+
placeholder: {
|
|
32
|
+
control: 'text'
|
|
33
|
+
},
|
|
34
|
+
disabled: {
|
|
35
|
+
control: 'boolean'
|
|
36
|
+
},
|
|
37
|
+
'aria-invalid': {
|
|
38
|
+
control: 'boolean'
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
args: {
|
|
42
|
+
type: 'text',
|
|
43
|
+
placeholder: 'Type something…',
|
|
44
|
+
disabled: false,
|
|
45
|
+
'aria-invalid': false
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
export default meta;
|
|
49
|
+
export const Default = {};
|
|
50
|
+
const variants = [
|
|
51
|
+
'base',
|
|
52
|
+
'component'
|
|
53
|
+
];
|
|
54
|
+
const sizes = [
|
|
55
|
+
'base',
|
|
56
|
+
'small'
|
|
57
|
+
];
|
|
58
|
+
export const States = {
|
|
59
|
+
render: (args)=>/*#__PURE__*/ _jsx("div", {
|
|
60
|
+
className: "flex flex-col gap-32",
|
|
61
|
+
children: variants.map((variant)=>sizes.map((size)=>/*#__PURE__*/ _jsxs("div", {
|
|
62
|
+
className: "flex flex-col gap-16",
|
|
63
|
+
children: [
|
|
64
|
+
/*#__PURE__*/ _jsxs(Header, {
|
|
65
|
+
variant: "h3",
|
|
66
|
+
children: [
|
|
67
|
+
variant,
|
|
68
|
+
" ",
|
|
69
|
+
size
|
|
70
|
+
]
|
|
71
|
+
}),
|
|
72
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
73
|
+
className: "flex flex-col gap-8",
|
|
74
|
+
children: [
|
|
75
|
+
/*#__PURE__*/ _jsx(Code, {
|
|
76
|
+
variant: "label",
|
|
77
|
+
className: "text-foreground-neutral-subtle",
|
|
78
|
+
children: "Default"
|
|
79
|
+
}),
|
|
80
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
81
|
+
...args,
|
|
82
|
+
variant: variant,
|
|
83
|
+
size: size
|
|
84
|
+
})
|
|
85
|
+
]
|
|
86
|
+
}),
|
|
87
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
88
|
+
className: "flex flex-col gap-8",
|
|
89
|
+
children: [
|
|
90
|
+
/*#__PURE__*/ _jsx(Code, {
|
|
91
|
+
variant: "label",
|
|
92
|
+
className: "text-foreground-neutral-subtle",
|
|
93
|
+
children: "Hover"
|
|
94
|
+
}),
|
|
95
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
96
|
+
...args,
|
|
97
|
+
className: "hover",
|
|
98
|
+
variant: variant,
|
|
99
|
+
size: size
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
}),
|
|
103
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
104
|
+
className: "flex flex-col gap-8",
|
|
105
|
+
children: [
|
|
106
|
+
/*#__PURE__*/ _jsx(Code, {
|
|
107
|
+
variant: "label",
|
|
108
|
+
className: "text-foreground-neutral-subtle",
|
|
109
|
+
children: "Active"
|
|
110
|
+
}),
|
|
111
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
112
|
+
...args,
|
|
113
|
+
className: "active",
|
|
114
|
+
defaultValue: "The quick brown fox jumps over the lazy dog",
|
|
115
|
+
variant: variant,
|
|
116
|
+
size: size
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
}),
|
|
120
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
121
|
+
className: "flex flex-col gap-8",
|
|
122
|
+
children: [
|
|
123
|
+
/*#__PURE__*/ _jsx(Code, {
|
|
124
|
+
variant: "label",
|
|
125
|
+
className: "text-foreground-neutral-subtle",
|
|
126
|
+
children: "Focus"
|
|
127
|
+
}),
|
|
128
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
129
|
+
...args,
|
|
130
|
+
className: "focus",
|
|
131
|
+
variant: variant,
|
|
132
|
+
size: size
|
|
133
|
+
})
|
|
134
|
+
]
|
|
135
|
+
}),
|
|
136
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
137
|
+
className: "flex flex-col gap-8",
|
|
138
|
+
children: [
|
|
139
|
+
/*#__PURE__*/ _jsx(Code, {
|
|
140
|
+
variant: "label",
|
|
141
|
+
className: "text-foreground-neutral-subtle",
|
|
142
|
+
children: "Disabled"
|
|
143
|
+
}),
|
|
144
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
145
|
+
...args,
|
|
146
|
+
disabled: true,
|
|
147
|
+
variant: variant,
|
|
148
|
+
size: size
|
|
149
|
+
})
|
|
150
|
+
]
|
|
151
|
+
}),
|
|
152
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
153
|
+
className: "flex flex-col gap-8",
|
|
154
|
+
children: [
|
|
155
|
+
/*#__PURE__*/ _jsx(Code, {
|
|
156
|
+
variant: "label",
|
|
157
|
+
className: "text-foreground-neutral-subtle",
|
|
158
|
+
children: "Invalid"
|
|
159
|
+
}),
|
|
160
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
161
|
+
...args,
|
|
162
|
+
"aria-invalid": true,
|
|
163
|
+
variant: variant,
|
|
164
|
+
size: size
|
|
165
|
+
})
|
|
166
|
+
]
|
|
167
|
+
})
|
|
168
|
+
]
|
|
169
|
+
}, variant + size)))
|
|
170
|
+
})
|
|
171
|
+
};
|
|
172
|
+
States.parameters = {
|
|
173
|
+
pseudo: {
|
|
174
|
+
hover: '.hover',
|
|
175
|
+
active: '.active',
|
|
176
|
+
focusVisible: '.focus'
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
export const Types = {
|
|
180
|
+
render: (args)=>/*#__PURE__*/ _jsx("div", {
|
|
181
|
+
className: "flex flex-col gap-32",
|
|
182
|
+
children: typeOptions.map((t)=>/*#__PURE__*/ _jsxs("div", {
|
|
183
|
+
className: "flex flex-col gap-8",
|
|
184
|
+
children: [
|
|
185
|
+
/*#__PURE__*/ _jsx(Code, {
|
|
186
|
+
variant: "label",
|
|
187
|
+
className: "text-foreground-neutral-subtle",
|
|
188
|
+
children: t
|
|
189
|
+
}),
|
|
190
|
+
/*#__PURE__*/ _jsx(Input, {
|
|
191
|
+
...args,
|
|
192
|
+
type: t
|
|
193
|
+
})
|
|
194
|
+
]
|
|
195
|
+
}, t))
|
|
196
|
+
})
|
|
197
|
+
};
|
|
198
|
+
|
|
199
|
+
//# sourceMappingURL=input.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/input.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {Input} from './input';\n\nconst typeOptions = [\n 'text',\n 'email',\n 'password',\n 'number',\n 'search',\n 'url',\n 'tel',\n 'date',\n 'time',\n 'datetime-local',\n 'month',\n 'week',\n 'color',\n 'file',\n] as const;\n\nconst meta = {\n title: 'Components/Input',\n component: Input,\n tags: ['autodocs'],\n argTypes: {\n type: {\n control: 'select',\n options: typeOptions,\n },\n placeholder: {control: 'text'},\n disabled: {control: 'boolean'},\n 'aria-invalid': {control: 'boolean'},\n },\n args: {\n type: 'text',\n placeholder: 'Type something…',\n disabled: false,\n 'aria-invalid': false,\n },\n} satisfies Meta<typeof Input>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nconst variants = ['base', 'component'] as const;\nconst sizes = ['base', 'small'] as const;\n\nexport const States: Story = {\n render: (args) => (\n <div className=\"flex flex-col gap-32\">\n {variants.map((variant) =>\n sizes.map((size) => (\n <div key={variant + size} className=\"flex flex-col gap-16\">\n <Header variant=\"h3\">\n {variant} {size}\n </Header>\n <div className=\"flex flex-col gap-8\">\n <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n Default\n </Code>\n\n <Input {...args} variant={variant} size={size} />\n </div>\n\n <div className=\"flex flex-col gap-8\">\n <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n Hover\n </Code>\n\n <Input {...args} className=\"hover\" variant={variant} size={size} />\n </div>\n <div className=\"flex flex-col gap-8\">\n <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n Active\n </Code>\n\n <Input\n {...args}\n className=\"active\"\n defaultValue=\"The quick brown fox jumps over the lazy dog\"\n variant={variant}\n size={size}\n />\n </div>\n <div className=\"flex flex-col gap-8\">\n <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n Focus\n </Code>\n\n <Input {...args} className=\"focus\" variant={variant} size={size} />\n </div>\n <div className=\"flex flex-col gap-8\">\n <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n Disabled\n </Code>\n\n <Input {...args} disabled variant={variant} size={size} />\n </div>\n <div className=\"flex flex-col gap-8\">\n <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n Invalid\n </Code>\n\n <Input {...args} aria-invalid variant={variant} size={size} />\n </div>\n </div>\n )),\n )}\n </div>\n ),\n};\n\nStates.parameters = {\n pseudo: {\n hover: '.hover',\n active: '.active',\n focusVisible: '.focus',\n },\n};\n\nexport const Types: Story = {\n render: (args) => (\n <div className=\"flex flex-col gap-32\">\n {typeOptions.map((t) => (\n <div key={t} className=\"flex flex-col gap-8\">\n <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n {t}\n </Code>\n <Input {...args} type={t} />\n </div>\n ))}\n </div>\n ),\n};\n"],"names":["Code","Header","Input","typeOptions","meta","title","component","tags","argTypes","type","control","options","placeholder","disabled","args","Default","variants","sizes","States","render","div","className","map","variant","size","defaultValue","aria-invalid","parameters","pseudo","hover","active","focusVisible","Types","t"],"mappings":";AACA,SAAQA,IAAI,EAAEC,MAAM,QAAO,wBAAwB;AACnD,SAAQC,KAAK,QAAO,UAAU;AAE9B,MAAMC,cAAc;IAClB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWJ;IACXK,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,MAAM;YACJC,SAAS;YACTC,SAASR;QACX;QACAS,aAAa;YAACF,SAAS;QAAM;QAC7BG,UAAU;YAACH,SAAS;QAAS;QAC7B,gBAAgB;YAACA,SAAS;QAAS;IACrC;IACAI,MAAM;QACJL,MAAM;QACNG,aAAa;QACbC,UAAU;QACV,gBAAgB;IAClB;AACF;AAEA,eAAeT,KAAK;AAIpB,OAAO,MAAMW,UAAiB,CAAC,EAAE;AAEjC,MAAMC,WAAW;IAAC;IAAQ;CAAY;AACtC,MAAMC,QAAQ;IAAC;IAAQ;CAAQ;AAE/B,OAAO,MAAMC,SAAgB;IAC3BC,QAAQ,CAACL,qBACP,KAACM;YAAIC,WAAU;sBACZL,SAASM,GAAG,CAAC,CAACC,UACbN,MAAMK,GAAG,CAAC,CAACE,qBACT,MAACJ;wBAAyBC,WAAU;;0CAClC,MAACpB;gCAAOsB,SAAQ;;oCACbA;oCAAQ;oCAAEC;;;0CAEb,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAES,SAASA;wCAASC,MAAMA;;;;0CAG3C,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAEO,WAAU;wCAAQE,SAASA;wCAASC,MAAMA;;;;0CAE7D,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCACE,GAAGY,IAAI;wCACRO,WAAU;wCACVI,cAAa;wCACbF,SAASA;wCACTC,MAAMA;;;;0CAGV,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAEO,WAAU;wCAAQE,SAASA;wCAASC,MAAMA;;;;0CAE7D,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAED,QAAQ;wCAACU,SAASA;wCAASC,MAAMA;;;;0CAEpD,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAEY,cAAY;wCAACH,SAASA;wCAASC,MAAMA;;;;;uBAnDhDD,UAAUC;;AA0D9B,EAAE;AAEFN,OAAOS,UAAU,GAAG;IAClBC,QAAQ;QACNC,OAAO;QACPC,QAAQ;QACRC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1Bb,QAAQ,CAACL,qBACP,KAACM;YAAIC,WAAU;sBACZlB,YAAYmB,GAAG,CAAC,CAACW,kBAChB,MAACb;oBAAYC,WAAU;;sCACrB,KAACrB;4BAAKuB,SAAQ;4BAAQF,WAAU;sCAC7BY;;sCAEH,KAAC/B;4BAAO,GAAGY,IAAI;4BAAEL,MAAMwB;;;mBAJfA;;AASlB,EAAE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/textarea/index.ts"],"sourcesContent":["export * from './textarea';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
import type { ComponentProps } from 'react';
|
|
3
|
+
export declare const textareaVariants: (props?: ({
|
|
4
|
+
variant?: "base" | "component" | null | undefined;
|
|
5
|
+
size?: "base" | "small" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
type TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> & VariantProps<typeof textareaVariants>;
|
|
8
|
+
export declare function Textarea({ className, variant, size, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,gBAAgB;;;8EAe3B,CAAC;AAEH,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,GAC3D,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAExC,wBAAgB,QAAQ,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,2CAiB3E"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { cn } from '../../utils/cn.js';
|
|
4
|
+
export const textareaVariants = cva('', {
|
|
5
|
+
variants: {
|
|
6
|
+
variant: {
|
|
7
|
+
base: 'bg-background-field-base',
|
|
8
|
+
component: 'bg-background-field-component'
|
|
9
|
+
},
|
|
10
|
+
size: {
|
|
11
|
+
base: 'py-6',
|
|
12
|
+
small: 'py-4'
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
variant: 'base',
|
|
17
|
+
size: 'base'
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
export function Textarea({ className, variant, size, ...props }) {
|
|
21
|
+
return /*#__PURE__*/ _jsx("textarea", {
|
|
22
|
+
"data-slot": "textarea",
|
|
23
|
+
className: cn('textarea-resize-custom placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 pr-24 text-sm leading-20 text-foreground-neutral-base shadow-border-base transition-[color,box-shadow] outline-none', 'hover:bg-background-field-hover', 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled', 'focus-visible:shadow-border-interactive-with-active', 'aria-invalid:shadow-border-error', textareaVariants({
|
|
24
|
+
variant,
|
|
25
|
+
size
|
|
26
|
+
}), className),
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
//# sourceMappingURL=textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const textareaVariants = cva('', {\n variants: {\n variant: {\n base: 'bg-background-field-base',\n component: 'bg-background-field-component',\n },\n size: {\n base: 'py-6',\n small: 'py-4',\n },\n },\n defaultVariants: {\n variant: 'base',\n size: 'base',\n },\n});\n\ntype TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> &\n VariantProps<typeof textareaVariants>;\n\nexport function Textarea({className, variant, size, ...props}: TextareaProps) {\n return (\n <textarea\n data-slot=\"textarea\"\n className={cn(\n 'textarea-resize-custom placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 pr-24 text-sm leading-20 text-foreground-neutral-base shadow-border-base transition-[color,box-shadow] outline-none',\n 'hover:bg-background-field-hover',\n 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted',\n 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',\n 'focus-visible:shadow-border-interactive-with-active',\n 'aria-invalid:shadow-border-error',\n textareaVariants({variant, size}),\n className,\n )}\n {...props}\n />\n );\n}\n"],"names":["cva","cn","textareaVariants","variants","variant","base","component","size","small","defaultVariants","Textarea","className","props","textarea","data-slot"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,mBAAmBF,IAAI,IAAI;IACtCG,UAAU;QACRC,SAAS;YACPC,MAAM;YACNC,WAAW;QACb;QACAC,MAAM;YACJF,MAAM;YACNG,OAAO;QACT;IACF;IACAC,iBAAiB;QACfL,SAAS;QACTG,MAAM;IACR;AACF,GAAG;AAKH,OAAO,SAASG,SAAS,EAACC,SAAS,EAAEP,OAAO,EAAEG,IAAI,EAAE,GAAGK,OAAqB;IAC1E,qBACE,KAACC;QACCC,aAAU;QACVH,WAAWV,GACT,sNACA,mCACA,6FACA,mKACA,uDACA,oCACAC,iBAAiB;YAACE;YAASG;QAAI,IAC/BI;QAED,GAAGC,KAAK;;AAGf"}
|