@snapcall/design-system 1.24.0 → 1.24.3

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.
Files changed (12) hide show
  1. package/dist/components/MediaCard/index.d.mts +3 -2
  2. package/dist/components/MediaCard/index.d.ts +3 -2
  3. package/dist/components/MediaCard/index.js +101 -56
  4. package/dist/components/MediaCard/index.mjs +90 -45
  5. package/dist/components/Textarea/index.d.mts +3 -0
  6. package/dist/components/Textarea/index.d.ts +3 -0
  7. package/dist/components/Textarea/index.js +69 -12
  8. package/dist/components/Textarea/index.mjs +70 -11
  9. package/dist/index.d.mts +6 -2
  10. package/dist/index.d.ts +6 -2
  11. package/dist/style.css +1 -1
  12. package/package.json +2 -2
package/dist/components/MediaCard/index.mjs CHANGED
@@ -14,11 +14,11 @@ import {
14
14
  // src/components/MediaCard/MediaCard.tsx
15
15
  import { cloneElement } from "react";
16
16
 
17
- // src/icons/image1.tsx
17
+ // src/icons/file6.tsx
18
18
  import { forwardRef } from "react";
19
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
20
- var Image1Icon = forwardRef(
21
- function Image1Icon2(_a, ref) {
19
+ import { jsx, jsxs } from "react/jsx-runtime";
20
+ var File6Icon = forwardRef(
21
+ function File6Icon2(_a, ref) {
22
22
  var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
23
23
  return /* @__PURE__ */ jsxs(
24
24
  "svg",
@@ -32,8 +32,50 @@ var Image1Icon = forwardRef(
32
32
  className
33
33
  }, other), {
34
34
  children: [
35
- duotone && /* @__PURE__ */ jsxs(Fragment, { children: [
36
- /* @__PURE__ */ jsx(
35
+ duotone && /* @__PURE__ */ jsx(
36
+ "path",
37
+ {
38
+ opacity: "0.12",
39
+ d: "M19.1213 7.12139L14.8787 2.87875C14.6222 2.62223 14.324 2.41696 14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305C19.5831 7.67611 19.3778 7.37792 19.1213 7.12139Z",
40
+ fill: "currentColor"
41
+ }
42
+ ),
43
+ /* @__PURE__ */ jsx(
44
+ "path",
45
+ {
46
+ d: "M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M16 13H8M16 17H8M10 9H8M14 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H15.2C16.8802 22 17.7202 22 18.362 21.673C18.9265 21.3854 19.3854 20.9265 19.673 20.362C20 19.7202 20 18.8802 20 17.2V8L14 2Z",
47
+ stroke: "currentColor",
48
+ strokeWidth: "2",
49
+ strokeLinecap: "round",
50
+ strokeLinejoin: "round"
51
+ }
52
+ )
53
+ ]
54
+ })
55
+ );
56
+ }
57
+ );
58
+
59
+ // src/icons/image1.tsx
60
+ import { forwardRef as forwardRef2 } from "react";
61
+ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
62
+ var Image1Icon = forwardRef2(
63
+ function Image1Icon2(_a, ref) {
64
+ var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
65
+ return /* @__PURE__ */ jsxs2(
66
+ "svg",
67
+ __spreadProps(__spreadValues({
68
+ ref,
69
+ width: size,
70
+ height: size,
71
+ viewBox: "0 0 24 24",
72
+ fill: "none",
73
+ xmlns: "http://www.w3.org/2000/svg",
74
+ className
75
+ }, other), {
76
+ children: [
77
+ duotone && /* @__PURE__ */ jsxs2(Fragment, { children: [
78
+ /* @__PURE__ */ jsx2(
37
79
  "path",
38
80
  {
39
81
  d: "M6.36574 19.6343L14.8687 11.1314C15.2647 10.7354 15.4627 10.5373 15.691 10.4632C15.8919 10.3979 16.1082 10.3979 16.3091 10.4632C16.5374 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2C21 17.8802 21 18.7202 20.6731 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7203 21 17.8802 21 16.2 21H6.93142C6.3256 21 6.0227 21 5.88243 20.8802C5.76073 20.7763 5.69614 20.6203 5.7087 20.4608C5.72317 20.2769 5.93736 20.0627 6.36574 19.6343Z",
@@ -41,7 +83,7 @@ var Image1Icon = forwardRef(
41
83
  fillOpacity: "0.12"
42
84
  }
43
85
  ),
44
- /* @__PURE__ */ jsx(
86
+ /* @__PURE__ */ jsx2(
45
87
  "path",
46
88
  {
47
89
  d: "M8.50005 10.5C9.60462 10.5 10.5 9.60457 10.5 8.5C10.5 7.39543 9.60462 6.5 8.50005 6.5C7.39548 6.5 6.50005 7.39543 6.50005 8.5C6.50005 9.60457 7.39548 10.5 8.50005 10.5Z",
@@ -50,7 +92,7 @@ var Image1Icon = forwardRef(
50
92
  }
51
93
  )
52
94
  ] }),
53
- /* @__PURE__ */ jsx(
95
+ /* @__PURE__ */ jsx2(
54
96
  "path",
55
97
  {
56
98
  d: "M16.2 21H6.93137C6.32555 21 6.02265 21 5.88238 20.8802C5.76068 20.7763 5.69609 20.6203 5.70865 20.4608C5.72312 20.2769 5.93731 20.0627 6.36569 19.6343L14.8686 11.1314C15.2646 10.7354 15.4627 10.5373 15.691 10.4632C15.8918 10.3979 16.1082 10.3979 16.309 10.4632C16.5373 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2M16.2 21C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2M16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2M10.5 8.5C10.5 9.60457 9.60457 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.60457 6.5 10.5 7.39543 10.5 8.5Z",
@@ -67,11 +109,11 @@ var Image1Icon = forwardRef(
67
109
  );
68
110
 
69
111
  // src/icons/play.tsx
70
- import { forwardRef as forwardRef2 } from "react";
71
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
72
- var PlayIcon = forwardRef2(function PlayIcon2(_a, ref) {
112
+ import { forwardRef as forwardRef3 } from "react";
113
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
114
+ var PlayIcon = forwardRef3(function PlayIcon2(_a, ref) {
73
115
  var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
74
- return /* @__PURE__ */ jsxs2(
116
+ return /* @__PURE__ */ jsxs3(
75
117
  "svg",
76
118
  __spreadProps(__spreadValues({
77
119
  ref,
@@ -83,7 +125,7 @@ var PlayIcon = forwardRef2(function PlayIcon2(_a, ref) {
83
125
  className
84
126
  }, other), {
85
127
  children: [
86
- duotone && /* @__PURE__ */ jsx2(
128
+ duotone && /* @__PURE__ */ jsx3(
87
129
  "path",
88
130
  {
89
131
  opacity: "0.12",
@@ -91,7 +133,7 @@ var PlayIcon = forwardRef2(function PlayIcon2(_a, ref) {
91
133
  fill: "currentColor"
92
134
  }
93
135
  ),
94
- /* @__PURE__ */ jsx2(
136
+ /* @__PURE__ */ jsx3(
95
137
  "path",
96
138
  {
97
139
  d: "M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z",
@@ -107,12 +149,12 @@ var PlayIcon = forwardRef2(function PlayIcon2(_a, ref) {
107
149
  });
108
150
 
109
151
  // src/icons/recording2.tsx
110
- import { forwardRef as forwardRef3 } from "react";
111
- import { jsx as jsx3 } from "react/jsx-runtime";
112
- var Recording2Icon = forwardRef3(
152
+ import { forwardRef as forwardRef4 } from "react";
153
+ import { jsx as jsx4 } from "react/jsx-runtime";
154
+ var Recording2Icon = forwardRef4(
113
155
  function Recording2Icon2(_a, ref) {
114
156
  var _b = _a, { size = 24, className = "text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
115
- return /* @__PURE__ */ jsx3(
157
+ return /* @__PURE__ */ jsx4(
116
158
  "svg",
117
159
  __spreadProps(__spreadValues({
118
160
  ref,
@@ -123,7 +165,7 @@ var Recording2Icon = forwardRef3(
123
165
  xmlns: "http://www.w3.org/2000/svg",
124
166
  className
125
167
  }, other), {
126
- children: /* @__PURE__ */ jsx3(
168
+ children: /* @__PURE__ */ jsx4(
127
169
  "path",
128
170
  {
129
171
  d: "M3 10L3 14M7.5 11V13M12 6V18M16.5 3V21M21 10V14",
@@ -139,12 +181,12 @@ var Recording2Icon = forwardRef3(
139
181
  );
140
182
 
141
183
  // src/icons/videoRecorder.tsx
142
- import { forwardRef as forwardRef4 } from "react";
143
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
144
- var VideoRecorderIcon = forwardRef4(
184
+ import { forwardRef as forwardRef5 } from "react";
185
+ import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
186
+ var VideoRecorderIcon = forwardRef5(
145
187
  function VideoRecorderIcon2(_a, ref) {
146
188
  var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
147
- return /* @__PURE__ */ jsxs3(
189
+ return /* @__PURE__ */ jsxs4(
148
190
  "svg",
149
191
  __spreadProps(__spreadValues({
150
192
  ref,
@@ -156,7 +198,7 @@ var VideoRecorderIcon = forwardRef4(
156
198
  className
157
199
  }, other), {
158
200
  children: [
159
- duotone && /* @__PURE__ */ jsx4(
201
+ duotone && /* @__PURE__ */ jsx5(
160
202
  "path",
161
203
  {
162
204
  opacity: "0.12",
@@ -168,7 +210,7 @@ var VideoRecorderIcon = forwardRef4(
168
210
  strokeLinejoin: "round"
169
211
  }
170
212
  ),
171
- /* @__PURE__ */ jsx4(
213
+ /* @__PURE__ */ jsx5(
172
214
  "path",
173
215
  {
174
216
  d: "M22 8.93137C22 8.32555 22 8.02265 21.8802 7.88238C21.7763 7.76068 21.6203 7.69609 21.4608 7.70865C21.2769 7.72312 21.0627 7.93731 20.6343 8.36569L17 12L20.6343 15.6343C21.0627 16.0627 21.2769 16.2769 21.4608 16.2914C21.6203 16.3039 21.7763 16.2393 21.8802 16.1176C22 15.9774 22 15.6744 22 15.0686V8.93137Z",
@@ -178,7 +220,7 @@ var VideoRecorderIcon = forwardRef4(
178
220
  strokeLinejoin: "round"
179
221
  }
180
222
  ),
181
- /* @__PURE__ */ jsx4(
223
+ /* @__PURE__ */ jsx5(
182
224
  "path",
183
225
  {
184
226
  d: "M2 9.8C2 8.11984 2 7.27976 2.32698 6.63803C2.6146 6.07354 3.07354 5.6146 3.63803 5.32698C4.27976 5 5.11984 5 6.8 5H12.2C13.8802 5 14.7202 5 15.362 5.32698C15.9265 5.6146 16.3854 6.07354 16.673 6.63803C17 7.27976 17 8.11984 17 9.8V14.2C17 15.8802 17 16.7202 16.673 17.362C16.3854 17.9265 15.9265 18.3854 15.362 18.673C14.7202 19 13.8802 19 12.2 19H6.8C5.11984 19 4.27976 19 3.63803 18.673C3.07354 18.3854 2.6146 17.9265 2.32698 17.362C2 16.7202 2 15.8802 2 14.2V9.8Z",
@@ -206,11 +248,12 @@ var secondsToDuration = (seconds) => {
206
248
  };
207
249
 
208
250
  // src/components/MediaCard/MediaCard.tsx
209
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
251
+ import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
210
252
  var typesIcons = {
211
- audio: /* @__PURE__ */ jsx5(Recording2Icon, {}),
212
- video: /* @__PURE__ */ jsx5(VideoRecorderIcon, { duotone: true }),
213
- image: /* @__PURE__ */ jsx5(Image1Icon, { duotone: true })
253
+ audio: /* @__PURE__ */ jsx6(Recording2Icon, {}),
254
+ video: /* @__PURE__ */ jsx6(VideoRecorderIcon, { duotone: true }),
255
+ image: /* @__PURE__ */ jsx6(Image1Icon, { duotone: true }),
256
+ other: /* @__PURE__ */ jsx6(File6Icon, { duotone: true })
214
257
  };
215
258
  var MediaCard = (_a) => {
216
259
  var _b = _a, {
@@ -219,6 +262,7 @@ var MediaCard = (_a) => {
219
262
  duration,
220
263
  type,
221
264
  image,
265
+ icon,
222
266
  action,
223
267
  actionBehavior = "default",
224
268
  isLoading,
@@ -231,6 +275,7 @@ var MediaCard = (_a) => {
231
275
  "duration",
232
276
  "type",
233
277
  "image",
278
+ "icon",
234
279
  "action",
235
280
  "actionBehavior",
236
281
  "isLoading",
@@ -238,24 +283,24 @@ var MediaCard = (_a) => {
238
283
  "author",
239
284
  "className"
240
285
  ]);
241
- const thumbnail = /* @__PURE__ */ jsx5(
286
+ const thumbnail = /* @__PURE__ */ jsx6(
242
287
  "div",
243
288
  {
244
289
  className: cn("min-h-0 bg-gray-50 relative", {
245
290
  "aspect-square rounded-md shrink-0": size === "medium" || size === "small",
246
291
  "flex-1": size === "large"
247
292
  }),
248
- children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-center items-center w-full h-full rounded-[inherit] overflow-hidden relative", children: [
249
- /* @__PURE__ */ jsx5(
293
+ children: /* @__PURE__ */ jsxs5("div", { className: "flex justify-center items-center w-full h-full rounded-[inherit] overflow-hidden relative", children: [
294
+ /* @__PURE__ */ jsx6(
250
295
  "div",
251
296
  {
252
297
  className: cn(
253
298
  "absolute w-full h-full",
254
299
  size === "large" ? "p-2" : "p-1"
255
300
  ),
256
- children: /* @__PURE__ */ jsxs4("div", { className: "relative w-full h-full flex justify-center items-center", children: [
257
- duration !== void 0 && size === "large" && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ jsx5("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded-sm text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
258
- size !== "small" && author && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ jsx5(
301
+ children: /* @__PURE__ */ jsxs5("div", { className: "relative w-full h-full flex justify-center items-center", children: [
302
+ duration !== void 0 && size === "large" && /* @__PURE__ */ jsx6("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ jsx6("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded-sm text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
303
+ size !== "small" && author && /* @__PURE__ */ jsx6("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ jsx6(
259
304
  Avatar,
260
305
  {
261
306
  size: size === "large" ? "sm" : "xs",
@@ -263,7 +308,7 @@ var MediaCard = (_a) => {
263
308
  image: author.image
264
309
  }
265
310
  ) }),
266
- type === "video" && image && /* @__PURE__ */ jsx5(
311
+ type === "video" && image && /* @__PURE__ */ jsx6(
267
312
  PlayIcon,
268
313
  {
269
314
  size: size === "large" ? 24 : size === "medium" ? 18 : 12,
@@ -273,14 +318,14 @@ var MediaCard = (_a) => {
273
318
  ] })
274
319
  }
275
320
  ),
276
- typeof image === "string" ? /* @__PURE__ */ jsx5("img", { className: "w-full h-full object-cover", src: image }) : image ? image : cloneElement(typesIcons[type], {
321
+ typeof image === "string" ? /* @__PURE__ */ jsx6("img", { className: "w-full h-full object-cover", src: image }) : image ? image : cloneElement(icon || typesIcons[type], {
277
322
  className: "text-gray-900 self-center",
278
323
  size: size === "large" ? 24 : size === "medium" ? 18 : 16
279
324
  })
280
325
  ] })
281
326
  }
282
327
  );
283
- return /* @__PURE__ */ jsxs4(
328
+ return /* @__PURE__ */ jsxs5(
284
329
  "div",
285
330
  __spreadProps(__spreadValues({}, otherProps), {
286
331
  className: cn(
@@ -296,7 +341,7 @@ var MediaCard = (_a) => {
296
341
  ),
297
342
  children: [
298
343
  size === "large" && thumbnail,
299
- /* @__PURE__ */ jsxs4(
344
+ /* @__PURE__ */ jsxs5(
300
345
  "div",
301
346
  {
302
347
  className: cn("flex gap-4", {
@@ -305,12 +350,12 @@ var MediaCard = (_a) => {
305
350
  }),
306
351
  children: [
307
352
  size !== "large" && thumbnail,
308
- /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 items-center w-full min-w-0", children: [
309
- /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col gap-0.5 min-w-0", children: [
310
- /* @__PURE__ */ jsx5("p", { className: "text-black text-sm font-medium truncate", children: title }),
311
- /* @__PURE__ */ jsx5("p", { className: "text-xs text-gray-900 truncate", children: description })
353
+ /* @__PURE__ */ jsxs5("div", { className: "flex gap-2 items-center w-full min-w-0", children: [
354
+ /* @__PURE__ */ jsxs5("div", { className: "flex-1 flex flex-col gap-0.5 min-w-0", children: [
355
+ /* @__PURE__ */ jsx6("p", { className: "text-black text-sm font-medium truncate", children: title }),
356
+ /* @__PURE__ */ jsx6("p", { className: "text-xs text-gray-900 truncate", children: description })
312
357
  ] }),
313
- isLoading ? /* @__PURE__ */ jsx5(SpinnerIcon, { size: 24, className: "text-blue-700 animate-spin" }) : /* @__PURE__ */ jsx5(
358
+ isLoading ? /* @__PURE__ */ jsx6(SpinnerIcon, { size: 24, className: "text-blue-700 animate-spin" }) : /* @__PURE__ */ jsx6(
314
359
  "div",
315
360
  {
316
361
  className: cn({
package/dist/components/Textarea/index.d.mts CHANGED
@@ -3,6 +3,9 @@ import * as React from 'react';
3
3
  interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
4
4
  'data-has-error'?: string;
5
5
  'data-is-disabled'?: string;
6
+ canResize?: boolean;
7
+ autoSize?: boolean;
8
+ onMaximizeClick?: () => void;
6
9
  }
7
10
  declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
8
11
 
package/dist/components/Textarea/index.d.ts CHANGED
@@ -3,6 +3,9 @@ import * as React from 'react';
3
3
  interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
4
4
  'data-has-error'?: string;
5
5
  'data-is-disabled'?: string;
6
+ canResize?: boolean;
7
+ autoSize?: boolean;
8
+ onMaximizeClick?: () => void;
6
9
  }
7
10
  declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
8
11
 
package/dist/components/Textarea/index.js CHANGED
@@ -66,6 +66,38 @@ module.exports = __toCommonJS(Textarea_exports);
66
66
  // src/components/Textarea/Textarea.tsx
67
67
  var React = __toESM(require("react"));
68
68
 
69
+ // src/icons/maximize1.tsx
70
+ var import_react = require("react");
71
+ var import_jsx_runtime = require("react/jsx-runtime");
72
+ var Maximize1Icon = (0, import_react.forwardRef)(
73
+ function Maximize1Icon2(_a, ref) {
74
+ var _b = _a, { size = 24, className = "text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
75
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
76
+ "svg",
77
+ __spreadProps(__spreadValues({
78
+ ref,
79
+ width: size,
80
+ height: size,
81
+ viewBox: "0 0 24 24",
82
+ fill: "none",
83
+ xmlns: "http://www.w3.org/2000/svg",
84
+ className
85
+ }, other), {
86
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
87
+ "path",
88
+ {
89
+ d: "M14 10L21 3M21 3H15M21 3V9M10 14L3 21M3 21H9M3 21L3 15",
90
+ stroke: "currentColor",
91
+ strokeWidth: "2",
92
+ strokeLinecap: "round",
93
+ strokeLinejoin: "round"
94
+ }
95
+ )
96
+ })
97
+ );
98
+ }
99
+ );
100
+
69
101
  // src/utils/cn.ts
70
102
  var import_clsx = require("clsx");
71
103
  var import_tailwind_merge = require("tailwind-merge");
@@ -74,30 +106,55 @@ function cn(...inputs) {
74
106
  }
75
107
 
76
108
  // src/components/Textarea/Textarea.tsx
77
- var import_jsx_runtime = require("react/jsx-runtime");
109
+ var import_jsx_runtime2 = require("react/jsx-runtime");
78
110
  var Textarea = React.forwardRef(
79
111
  (_a, ref) => {
80
- var _b = _a, { className, disabled } = _b, props = __objRest(_b, ["className", "disabled"]);
112
+ var _b = _a, {
113
+ className,
114
+ disabled,
115
+ canResize = false,
116
+ autoSize = true,
117
+ onMaximizeClick
118
+ } = _b, props = __objRest(_b, [
119
+ "className",
120
+ "disabled",
121
+ "canResize",
122
+ "autoSize",
123
+ "onMaximizeClick"
124
+ ]);
81
125
  const isDisabled = !!props["data-is-disabled"] || disabled;
82
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
126
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
83
127
  "div",
84
128
  {
85
129
  className: cn(
86
- "flex min-h-[80px] w-full rounded-md border border-gray-200 bg-transparent focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px]",
130
+ "flex min-h-[80px] w-full rounded-md border border-gray-200 bg-transparent relative focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
87
131
  { "cursor-not-allowed opacity-50": isDisabled },
88
132
  {
89
133
  "border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]
90
134
  },
91
135
  className
92
136
  ),
93
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
94
- "textarea",
95
- __spreadProps(__spreadValues({}, props), {
96
- disabled: isDisabled,
97
- className: "w-full px-3 py-2 text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
98
- ref
99
- })
100
- )
137
+ children: [
138
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
139
+ "textarea",
140
+ __spreadProps(__spreadValues({}, props), {
141
+ disabled: isDisabled,
142
+ className: cn(
143
+ "w-full p-3 text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
144
+ { "resize-none": !canResize, "field-sizing-content": autoSize }
145
+ ),
146
+ ref
147
+ })
148
+ ),
149
+ onMaximizeClick && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
150
+ Maximize1Icon,
151
+ {
152
+ size: 16,
153
+ className: "absolute right-2 bottom-2 text-gray-900 cursor-pointer",
154
+ onClick: onMaximizeClick
155
+ }
156
+ )
157
+ ]
101
158
  }
102
159
  ) });
103
160
  }
package/dist/components/Textarea/index.mjs CHANGED
@@ -7,30 +7,89 @@ import {
7
7
 
8
8
  // src/components/Textarea/Textarea.tsx
9
9
  import * as React from "react";
10
+
11
+ // src/icons/maximize1.tsx
12
+ import { forwardRef } from "react";
10
13
  import { jsx } from "react/jsx-runtime";
14
+ var Maximize1Icon = forwardRef(
15
+ function Maximize1Icon2(_a, ref) {
16
+ var _b = _a, { size = 24, className = "text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
17
+ return /* @__PURE__ */ jsx(
18
+ "svg",
19
+ __spreadProps(__spreadValues({
20
+ ref,
21
+ width: size,
22
+ height: size,
23
+ viewBox: "0 0 24 24",
24
+ fill: "none",
25
+ xmlns: "http://www.w3.org/2000/svg",
26
+ className
27
+ }, other), {
28
+ children: /* @__PURE__ */ jsx(
29
+ "path",
30
+ {
31
+ d: "M14 10L21 3M21 3H15M21 3V9M10 14L3 21M3 21H9M3 21L3 15",
32
+ stroke: "currentColor",
33
+ strokeWidth: "2",
34
+ strokeLinecap: "round",
35
+ strokeLinejoin: "round"
36
+ }
37
+ )
38
+ })
39
+ );
40
+ }
41
+ );
42
+
43
+ // src/components/Textarea/Textarea.tsx
44
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
11
45
  var Textarea = React.forwardRef(
12
46
  (_a, ref) => {
13
- var _b = _a, { className, disabled } = _b, props = __objRest(_b, ["className", "disabled"]);
47
+ var _b = _a, {
48
+ className,
49
+ disabled,
50
+ canResize = false,
51
+ autoSize = true,
52
+ onMaximizeClick
53
+ } = _b, props = __objRest(_b, [
54
+ "className",
55
+ "disabled",
56
+ "canResize",
57
+ "autoSize",
58
+ "onMaximizeClick"
59
+ ]);
14
60
  const isDisabled = !!props["data-is-disabled"] || disabled;
15
- return /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx(
61
+ return /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(
16
62
  "div",
17
63
  {
18
64
  className: cn(
19
- "flex min-h-[80px] w-full rounded-md border border-gray-200 bg-transparent focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px]",
65
+ "flex min-h-[80px] w-full rounded-md border border-gray-200 bg-transparent relative focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
20
66
  { "cursor-not-allowed opacity-50": isDisabled },
21
67
  {
22
68
  "border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]
23
69
  },
24
70
  className
25
71
  ),
26
- children: /* @__PURE__ */ jsx(
27
- "textarea",
28
- __spreadProps(__spreadValues({}, props), {
29
- disabled: isDisabled,
30
- className: "w-full px-3 py-2 text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
31
- ref
32
- })
33
- )
72
+ children: [
73
+ /* @__PURE__ */ jsx2(
74
+ "textarea",
75
+ __spreadProps(__spreadValues({}, props), {
76
+ disabled: isDisabled,
77
+ className: cn(
78
+ "w-full p-3 text-sm bg-transparent outline-hidden text-black placeholder:text-gray-700 disabled:cursor-not-allowed",
79
+ { "resize-none": !canResize, "field-sizing-content": autoSize }
80
+ ),
81
+ ref
82
+ })
83
+ ),
84
+ onMaximizeClick && /* @__PURE__ */ jsx2(
85
+ Maximize1Icon,
86
+ {
87
+ size: 16,
88
+ className: "absolute right-2 bottom-2 text-gray-900 cursor-pointer",
89
+ onClick: onMaximizeClick
90
+ }
91
+ )
92
+ ]
34
93
  }
35
94
  ) });
36
95
  }
package/dist/index.d.mts CHANGED
@@ -694,8 +694,9 @@ type MediaCardProps = {
694
694
  title: string;
695
695
  description?: string;
696
696
  duration?: number;
697
- type: 'audio' | 'video' | 'image';
697
+ type: 'audio' | 'video' | 'image' | 'other';
698
698
  image?: string | React.JSX.Element;
699
+ icon?: React.JSX.Element;
699
700
  action?: React.JSX.Element;
700
701
  actionBehavior?: 'default' | 'hover';
701
702
  moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
@@ -707,7 +708,7 @@ type MediaCardProps = {
707
708
  };
708
709
  } & HTMLAttributes<HTMLDivElement>;
709
710
  declare const MediaCard: {
710
- ({ title, description, duration, type, image, action, actionBehavior, isLoading, size, author, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
711
+ ({ title, description, duration, type, image, icon, action, actionBehavior, isLoading, size, author, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
711
712
  displayName: string;
712
713
  };
713
714
 
@@ -854,6 +855,9 @@ declare const TabsContent: react.ForwardRefExoticComponent<Omit<TabsPrimitive.Ta
854
855
  interface TextareaProps extends react.TextareaHTMLAttributes<HTMLTextAreaElement> {
855
856
  'data-has-error'?: string;
856
857
  'data-is-disabled'?: string;
858
+ canResize?: boolean;
859
+ autoSize?: boolean;
860
+ onMaximizeClick?: () => void;
857
861
  }
858
862
  declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
859
863
 
package/dist/index.d.ts CHANGED
@@ -694,8 +694,9 @@ type MediaCardProps = {
694
694
  title: string;
695
695
  description?: string;
696
696
  duration?: number;
697
- type: 'audio' | 'video' | 'image';
697
+ type: 'audio' | 'video' | 'image' | 'other';
698
698
  image?: string | React.JSX.Element;
699
+ icon?: React.JSX.Element;
699
700
  action?: React.JSX.Element;
700
701
  actionBehavior?: 'default' | 'hover';
701
702
  moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
@@ -707,7 +708,7 @@ type MediaCardProps = {
707
708
  };
708
709
  } & HTMLAttributes<HTMLDivElement>;
709
710
  declare const MediaCard: {
710
- ({ title, description, duration, type, image, action, actionBehavior, isLoading, size, author, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
711
+ ({ title, description, duration, type, image, icon, action, actionBehavior, isLoading, size, author, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
711
712
  displayName: string;
712
713
  };
713
714
 
@@ -854,6 +855,9 @@ declare const TabsContent: react.ForwardRefExoticComponent<Omit<TabsPrimitive.Ta
854
855
  interface TextareaProps extends react.TextareaHTMLAttributes<HTMLTextAreaElement> {
855
856
  'data-has-error'?: string;
856
857
  'data-is-disabled'?: string;
858
+ canResize?: boolean;
859
+ autoSize?: boolean;
860
+ onMaximizeClick?: () => void;
857
861
  }
858
862
  declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
859
863