@deckai/deck-ui 0.0.4 → 0.0.6

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 (7) hide show
  1. package/dist/src/index.cjs +318 -322
  2. package/dist/src/index.cjs.map +1 -1
  3. package/dist/src/index.d.cts +86 -86
  4. package/dist/src/index.d.ts +86 -86
  5. package/dist/src/index.js +313 -317
  6. package/dist/src/index.js.map +1 -1
  7. package/package.json +3 -2
package/dist/src/index.cjs CHANGED
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var React8 = require('react');
4
- var TooltipPrimitive = require('@radix-ui/react-tooltip');
3
+ var React19 = require('react');
4
+ var Popover = require('@radix-ui/react-popover');
5
5
  var clsx = require('clsx');
6
6
  var tailwindMerge = require('tailwind-merge');
7
7
  var icons = require('@deckai/icons');
8
+ var TooltipPrimitive = require('@radix-ui/react-tooltip');
8
9
  var SwitchPrimitive = require('@radix-ui/react-switch');
9
- var Popover = require('@radix-ui/react-popover');
10
10
 
11
11
  function _interopNamespace(e) {
12
12
  if (e && e.__esModule) return e;
@@ -26,53 +26,12 @@ function _interopNamespace(e) {
26
26
  return Object.freeze(n);
27
27
  }
28
28
 
29
- var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
29
+ var React19__namespace = /*#__PURE__*/_interopNamespace(React19);
30
+ var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
30
31
  var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
31
32
  var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
32
- var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
33
-
34
- // src/components/Tooltip.tsx
35
- function cn(...inputs) {
36
- return tailwindMerge.twMerge(clsx.clsx(inputs));
37
- }
38
33
 
39
- // src/components/Tooltip.tsx
40
- var Tooltip = ({
41
- content,
42
- children,
43
- side = "bottom",
44
- align = "center",
45
- className,
46
- delayDuration = 200
47
- }) => /* @__PURE__ */ React8__namespace.createElement(TooltipPrimitive__namespace.Provider, { delayDuration }, /* @__PURE__ */ React8__namespace.createElement(TooltipPrimitive__namespace.Root, null, /* @__PURE__ */ React8__namespace.createElement(TooltipPrimitive__namespace.Trigger, { asChild: true }, /* @__PURE__ */ React8__namespace.createElement("span", { tabIndex: 0 }, children)), /* @__PURE__ */ React8__namespace.createElement(TooltipPrimitive__namespace.Portal, null, /* @__PURE__ */ React8__namespace.createElement(
48
- TooltipPrimitive__namespace.Content,
49
- {
50
- side,
51
- align,
52
- sideOffset: 4,
53
- className: cn(
54
- "z-50 overflow-hidden rounded-lg",
55
- "bg-text-primary px-3 py-1.5",
56
- "text-xs text-white",
57
- "animate-in fade-in-0 zoom-in-95",
58
- "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
59
- "data-[side=bottom]:slide-in-from-top-2",
60
- "data-[side=top]:slide-in-from-bottom-2",
61
- "select-none",
62
- "max-w-60",
63
- className
64
- )
65
- },
66
- content,
67
- /* @__PURE__ */ React8__namespace.createElement(
68
- TooltipPrimitive__namespace.Arrow,
69
- {
70
- className: "fill-text-primary",
71
- width: 10,
72
- height: 5
73
- }
74
- )
75
- ))));
34
+ // src/components/Navbar.tsx
76
35
 
77
36
  // src/utils/tailwind.ts
78
37
  var focusRingStyles = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
@@ -82,7 +41,7 @@ var Pressable = ({
82
41
  children,
83
42
  type = "button",
84
43
  ...props
85
- }) => /* @__PURE__ */ React8__namespace.default.createElement(
44
+ }) => /* @__PURE__ */ React19__namespace.default.createElement(
86
45
  "button",
87
46
  {
88
47
  type,
@@ -92,243 +51,10 @@ var Pressable = ({
92
51
  children
93
52
  );
94
53
 
95
- // src/components/Icon.tsx
96
- var COLOR_MAP = {
97
- primary: "#080808",
98
- secondary: "#666666",
99
- white: "#ffffff",
100
- primaryBlue: "#089CCB"
101
- };
102
- var Icon = React8__namespace.default.forwardRef(
103
- ({
104
- name,
105
- size = 24,
106
- color = "primary",
107
- title,
108
- className,
109
- onClick,
110
- style,
111
- ...props
112
- }, ref) => {
113
- const IconComponent = icons.IconMap[name];
114
- const sizeStyle = typeof size === "number" ? `${size}px` : size;
115
- const content = /* @__PURE__ */ React8__namespace.default.createElement(
116
- "div",
117
- {
118
- className: `flex justify-center items-center ${className}`,
119
- style: {
120
- width: sizeStyle,
121
- height: sizeStyle,
122
- ["--icon-stroke"]: COLOR_MAP[color],
123
- ...style
124
- }
125
- },
126
- /* @__PURE__ */ React8__namespace.default.createElement(
127
- IconComponent,
128
- {
129
- ref,
130
- "aria-hidden": !title,
131
- "aria-label": title,
132
- ...props
133
- }
134
- )
135
- );
136
- return onClick ? /* @__PURE__ */ React8__namespace.default.createElement(Pressable, { onClick }, content) : content;
137
- }
138
- );
139
- Icon.displayName = "Icon";
140
-
141
- // src/components/Badge.tsx
142
- var Badge = React8__namespace.forwardRef(
143
- ({ className, variant = "pink", iconName, children, ...props }, ref) => {
144
- const variants = {
145
- pink: "bg-tertiary-5",
146
- orange: "bg-tertiary-15",
147
- green: "bg-tertiary-25"
148
- };
149
- return /* @__PURE__ */ React8__namespace.createElement(
150
- "span",
151
- {
152
- ref,
153
- className: cn(
154
- "inline-flex items-center gap-2",
155
- "rounded-lg px-4 py-2",
156
- "text-sm font-medium",
157
- variants[variant],
158
- className
159
- ),
160
- ...props
161
- },
162
- iconName && /* @__PURE__ */ React8__namespace.createElement(Icon, { name: iconName }),
163
- children
164
- );
165
- }
166
- );
167
- Badge.displayName = "Badge";
168
- var HEADING_ELEMENT_MAP = {
169
- xl: "h1",
170
- lg: "h1",
171
- md: "h2",
172
- sm: "h3",
173
- xs: "h4"
174
- };
175
- var getElementFromVariant = (variant) => {
176
- const [category, size] = variant.split("-");
177
- if (category === "heading") {
178
- return HEADING_ELEMENT_MAP[size] || "p";
179
- }
180
- if (category === "label") {
181
- return "label";
182
- }
183
- return "p";
184
- };
185
- var fontWeight = {
186
- light: "font-light",
187
- regular: "font-regular",
188
- semibold: "font-semibold",
189
- bold: "font-bold"
190
- };
191
- var Text = React8__namespace.default.forwardRef(
192
- ({
193
- variant = "body-default",
194
- color = "text-primary",
195
- as,
196
- className,
197
- children,
198
- weight,
199
- ...props
200
- }, ref) => {
201
- const typographyClasses = `text-${variant}`;
202
- const colorClasses = color && color === "inherit" ? "inherit" : color ? `text-${color}` : "";
203
- const suggestedElement = React8__namespace.default.useMemo(
204
- () => getElementFromVariant(variant),
205
- [variant]
206
- );
207
- const Component = as || suggestedElement;
208
- return (
209
- // @ts-expect-error TODO: figure this out
210
- /* @__PURE__ */ React8__namespace.default.createElement(
211
- Component,
212
- {
213
- ref,
214
- className: `font-sans antialiased ${typographyClasses} ${colorClasses} ${weight ? `!${fontWeight[weight]}` : ""} ${className ?? ""}`,
215
- ...props
216
- },
217
- children
218
- )
219
- );
220
- }
221
- );
222
- Text.displayName = "Text";
223
-
224
- // src/components/Button.tsx
225
- var filled = {
226
- black: "bg-text-primary text-white",
227
- // fade it slightly
228
- accent: "bg-primary-100 text-white",
229
- secondary: "bg-secondary-100 text-secondary"
230
- };
231
- var outlined = {
232
- black: "border border-text-primary text-text-primary bg-white",
233
- accent: "border border-primary-100 text-primary-100 bg-white",
234
- secondary: "border border-text-secondary text-secondary bg-white"
235
- };
236
- var Button = React8__namespace.forwardRef(
237
- ({
238
- className,
239
- variant = "filled",
240
- color = "black",
241
- isLoading = false,
242
- children,
243
- disabled,
244
- ...props
245
- }, ref) => /* @__PURE__ */ React8__namespace.createElement(
246
- "button",
247
- {
248
- ref,
249
- className: `
250
- px-7
251
- py-2
252
- inline-flex items-center justify-center
253
- rounded-lg
254
- transition-colors duration-200
255
- ${focusRingStyles}
256
- disabled:opacity-50 disabled:pointer-events-none
257
- hover:opacity-80 active:scale-95
258
- truncate
259
- ${variant === "filled" ? filled[color] : outlined[color]}
260
- ${className}
261
- `,
262
- disabled: disabled || isLoading,
263
- type: "button",
264
- ...props
265
- },
266
- typeof children === "string" ? /* @__PURE__ */ React8__namespace.createElement(Text, { variant: "body-default-bold", color: "inherit" }, children) : children
267
- )
268
- );
269
- Button.displayName = "Button";
270
- var Switch = React8__namespace.forwardRef(({ className, label, description, ...props }, ref) => /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React8__namespace.createElement(
271
- SwitchPrimitive__namespace.Root,
272
- {
273
- className: cn(
274
- "peer inline-flex h-6 w-11 shrink-0 cursor-pointer",
275
- "items-center rounded-full border-2 border-transparent",
276
- "transition-colors focus-visible:outline-none",
277
- focusRingStyles,
278
- "disabled:cursor-not-allowed disabled:opacity-50",
279
- "data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",
280
- className
281
- ),
282
- ...props,
283
- ref
284
- },
285
- /* @__PURE__ */ React8__namespace.createElement(
286
- SwitchPrimitive__namespace.Thumb,
287
- {
288
- className: cn(
289
- "pointer-events-none block h-5 w-5",
290
- "rounded-full bg-white shadow-lg ring-0",
291
- "transition-transform",
292
- "data-[state=checked]:translate-x-5",
293
- "data-[state=unchecked]:translate-x-0"
294
- )
295
- }
296
- )
297
- ), (label || description) && /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex flex-col" }, label && /* @__PURE__ */ React8__namespace.createElement(
298
- "label",
299
- {
300
- className: "text-sm font-medium text-text-primary",
301
- htmlFor: props.id
302
- },
303
- label
304
- ), description && /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-xs text-text-secondary" }, description))));
305
- Switch.displayName = "Switch";
306
-
307
- // src/components/ProfileCard.tsx
308
- var ProfileCard = ({ profileImage }) => {
309
- const randomId = React8.useId();
310
- return /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "p-10 rounded-xl border border-stroke relative flex gap-6" }, /* @__PURE__ */ React8__namespace.default.createElement(
311
- Button,
312
- {
313
- variant: "outlined",
314
- color: "secondary",
315
- className: "absolute top-10 right-10 !px-2 py-2"
316
- },
317
- /* @__PURE__ */ React8__namespace.default.createElement(Icon, { color: "secondary", name: "edit-2" })
318
- ), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-row" }, /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React8__namespace.default.createElement("img", { src: profileImage, alt: "profile for fiona chen" }), /* @__PURE__ */ React8__namespace.default.createElement(Button, null, "Preview Profile"), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React8__namespace.default.createElement(
319
- Text,
320
- {
321
- as: "label",
322
- htmlFor: randomId,
323
- variant: "body-default-semibold",
324
- color: "text-secondary"
325
- },
326
- "Private Mode"
327
- ), /* @__PURE__ */ React8__namespace.default.createElement(Switch, { id: randomId })), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-row gap-1" }, /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "body-xs", color: "text-secondary" }, "What is this?"), /* @__PURE__ */ React8__namespace.default.createElement(Tooltip, { content: "Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode." }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { name: "message-question", color: "secondary", size: 16 }))))))), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React8__namespace.default.createElement(Text, { as: "h2", variant: "heading-md" }, "Fiona Chen"), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { name: "location" }), /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "body-lg", color: "text-secondary" }, "New York City, New York")), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { name: "profile" }), /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "body-lg", color: "text-secondary" }, "Member Since", " ", /* @__PURE__ */ React8__namespace.default.createElement(Text, { as: "span", variant: "body-lg-semibold" }, "October 2018"))), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "pt-8" }), /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "heading-sm" }, "My badges:"), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ React8__namespace.default.createElement(Badge, { iconName: "medal-star" }, "Top Creator"), /* @__PURE__ */ React8__namespace.default.createElement(Badge, { variant: "orange", iconName: "message-text" }, "Responds Quickly"))));
328
- };
54
+ // src/components/Avatar.tsx
329
55
  var Avatar = ({ src, size = 48, onClick, ...props }) => {
330
56
  const sizeStyle = typeof size === "number" ? `${size}px` : size;
331
- const content = /* @__PURE__ */ React8__namespace.default.createElement(
57
+ const content = /* @__PURE__ */ React19__namespace.default.createElement(
332
58
  "img",
333
59
  {
334
60
  src,
@@ -341,9 +67,14 @@ var Avatar = ({ src, size = 48, onClick, ...props }) => {
341
67
  ...props
342
68
  }
343
69
  );
344
- return onClick ? /* @__PURE__ */ React8__namespace.default.createElement(Pressable, { onClick }, content) : content;
70
+ return onClick ? /* @__PURE__ */ React19__namespace.default.createElement(Pressable, { onClick }, content) : content;
345
71
  };
346
- var Input = ({ className, end, ...props }) => /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative" }, /* @__PURE__ */ React8__namespace.createElement(
72
+ function cn(...inputs) {
73
+ return tailwindMerge.twMerge(clsx.clsx(inputs));
74
+ }
75
+
76
+ // src/components/Input.tsx
77
+ var Input = ({ className, end, ...props }) => /* @__PURE__ */ React19__namespace.createElement("div", { className: "relative" }, /* @__PURE__ */ React19__namespace.createElement(
347
78
  "input",
348
79
  {
349
80
  className: cn(
@@ -353,8 +84,8 @@ var Input = ({ className, end, ...props }) => /* @__PURE__ */ React8__namespace.
353
84
  ),
354
85
  ...props
355
86
  }
356
- ), end && /* @__PURE__ */ React8__namespace.createElement("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3" }, end));
357
- var Option = ({ value, label, onChange }) => /* @__PURE__ */ React8__namespace.default.createElement(
87
+ ), end && /* @__PURE__ */ React19__namespace.createElement("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3" }, end));
88
+ var Option = ({ value, label, onChange }) => /* @__PURE__ */ React19__namespace.default.createElement(
358
89
  "button",
359
90
  {
360
91
  type: "button",
@@ -375,16 +106,16 @@ var Combobox = ({
375
106
  end,
376
107
  className
377
108
  }) => {
378
- const [open, setOpen] = React8.useState(false);
379
- const [inputValue, setInputValue] = React8.useState(value);
380
- const selectedOption = React8.useMemo(
109
+ const [open, setOpen] = React19.useState(false);
110
+ const [inputValue, setInputValue] = React19.useState(value);
111
+ const selectedOption = React19.useMemo(
381
112
  () => options.find((option) => option.value === inputValue),
382
113
  [inputValue, options]
383
114
  );
384
115
  const filteredItems = options.filter(
385
116
  (option) => inputValue ? option.label.toLowerCase().includes(inputValue.toLowerCase()) : options
386
117
  );
387
- const handleOptionChange = React8.useCallback(
118
+ const handleOptionChange = React19.useCallback(
388
119
  (option) => {
389
120
  onChange(option);
390
121
  setOpen(false);
@@ -392,12 +123,12 @@ var Combobox = ({
392
123
  },
393
124
  [onChange, selectedOption?.label]
394
125
  );
395
- return /* @__PURE__ */ React8__namespace.default.createElement(Popover__namespace.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React8__namespace.default.createElement(
126
+ return /* @__PURE__ */ React19__namespace.default.createElement(Popover__namespace.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React19__namespace.default.createElement(
396
127
  "div",
397
128
  {
398
129
  className: `relative w-full font-sans text-text-secondary ${className}`
399
130
  },
400
- /* @__PURE__ */ React8__namespace.default.createElement(Popover__namespace.Trigger, { asChild: true }, /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex" }, /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ React8__namespace.default.createElement(
131
+ /* @__PURE__ */ React19__namespace.default.createElement(Popover__namespace.Trigger, { asChild: true }, /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex" }, /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ React19__namespace.default.createElement(
401
132
  Input,
402
133
  {
403
134
  placeholder,
@@ -407,13 +138,13 @@ var Combobox = ({
407
138
  className: "flex-1"
408
139
  }
409
140
  )))),
410
- /* @__PURE__ */ React8__namespace.default.createElement(Popover__namespace.Portal, null, /* @__PURE__ */ React8__namespace.default.createElement(
141
+ /* @__PURE__ */ React19__namespace.default.createElement(Popover__namespace.Portal, null, /* @__PURE__ */ React19__namespace.default.createElement(
411
142
  Popover__namespace.Content,
412
143
  {
413
144
  className: "w-[--radix-popover-trigger-width] p-1 bg-white rounded-md shadow-lg border mt-1",
414
145
  sideOffset: 5
415
146
  },
416
- /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "max-h-60 overflow-auto flex flex-col items-start" }, filteredItems.length > 0 ? filteredItems.map(({ label, value: optionValue }, index) => /* @__PURE__ */ React8__namespace.default.createElement(
147
+ /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "max-h-60 overflow-auto flex flex-col items-start" }, filteredItems.length > 0 ? filteredItems.map(({ label, value: optionValue }, index) => /* @__PURE__ */ React19__namespace.default.createElement(
417
148
  Option,
418
149
  {
419
150
  onChange: handleOptionChange,
@@ -421,11 +152,55 @@ var Combobox = ({
421
152
  key: index,
422
153
  label
423
154
  }
424
- )) : /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "px-2 py-1.5 text-sm text-gray-500" }, "No results found"))
155
+ )) : /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "px-2 py-1.5 text-sm text-gray-500" }, "No results found"))
425
156
  ))
426
157
  ));
427
158
  };
428
- var Logo = ({ width = 76, height = 25 }) => /* @__PURE__ */ React8__namespace.default.createElement(
159
+ var COLOR_MAP = {
160
+ primary: "#080808",
161
+ secondary: "#666666",
162
+ white: "#ffffff",
163
+ primaryBlue: "#089CCB"
164
+ };
165
+ var Icon = React19__namespace.default.forwardRef(
166
+ ({
167
+ name,
168
+ size = 24,
169
+ color = "primary",
170
+ title,
171
+ className,
172
+ onClick,
173
+ style,
174
+ ...props
175
+ }, ref) => {
176
+ const IconComponent = icons.IconMap[name];
177
+ const sizeStyle = typeof size === "number" ? `${size}px` : size;
178
+ const content = /* @__PURE__ */ React19__namespace.default.createElement(
179
+ "div",
180
+ {
181
+ className: `flex justify-center items-center ${className}`,
182
+ style: {
183
+ width: sizeStyle,
184
+ height: sizeStyle,
185
+ ["--icon-stroke"]: COLOR_MAP[color],
186
+ ...style
187
+ }
188
+ },
189
+ /* @__PURE__ */ React19__namespace.default.createElement(
190
+ IconComponent,
191
+ {
192
+ ref,
193
+ "aria-hidden": !title,
194
+ "aria-label": title,
195
+ ...props
196
+ }
197
+ )
198
+ );
199
+ return onClick ? /* @__PURE__ */ React19__namespace.default.createElement(Pressable, { onClick }, content) : content;
200
+ }
201
+ );
202
+ Icon.displayName = "Icon";
203
+ var Logo = ({ width = 76, height = 25 }) => /* @__PURE__ */ React19__namespace.default.createElement(
429
204
  "svg",
430
205
  {
431
206
  width,
@@ -434,7 +209,7 @@ var Logo = ({ width = 76, height = 25 }) => /* @__PURE__ */ React8__namespace.de
434
209
  fill: "none",
435
210
  xmlns: "http://www.w3.org/2000/svg"
436
211
  },
437
- /* @__PURE__ */ React8__namespace.default.createElement(
212
+ /* @__PURE__ */ React19__namespace.default.createElement(
438
213
  "path",
439
214
  {
440
215
  d: "M0.8 15.584C0.8 13.9413 1.12 12.4693 1.76 11.168C2.4 9.84533 3.27467 8.8 4.384 8.032C5.49333 7.264 6.77333 6.88 8.224 6.88C9.39733 6.88 10.464 7.168 11.424 7.744C12.384 8.29867 13.1093 9.03467 13.6 9.952V0.639999H18.72V18.304C18.72 18.816 18.8053 19.1787 18.976 19.392C19.1467 19.584 19.424 19.7013 19.808 19.744V24C18.912 24.1707 18.1867 24.256 17.632 24.256C16.7573 24.256 16.0427 24.064 15.488 23.68C14.9547 23.296 14.624 22.7627 14.496 22.08L14.4 21.216C13.8027 22.2613 12.992 23.04 11.968 23.552C10.944 24.064 9.86667 24.32 8.736 24.32C7.584 24.32 6.51733 24.1067 5.536 23.68C4.576 23.232 3.73333 22.6133 3.008 21.824C2.304 21.0347 1.76 20.1067 1.376 19.04C0.992 17.9733 0.8 16.8213 0.8 15.584ZM13.632 17.664V14.144C13.4187 13.568 13.1093 13.0667 12.704 12.64C12.32 12.2133 11.872 11.872 11.36 11.616C10.8693 11.36 10.368 11.232 9.856 11.232C9.30133 11.232 8.78933 11.3493 8.32 11.584C7.872 11.8187 7.47733 12.1493 7.136 12.576C6.79467 12.9813 6.528 13.4507 6.336 13.984C6.16533 14.5173 6.08 15.0827 6.08 15.68C6.08 16.2987 6.176 16.8747 6.368 17.408C6.58133 17.92 6.86933 18.3787 7.232 18.784C7.59467 19.168 8.02133 19.4667 8.512 19.68C9.00267 19.8933 9.536 20 10.112 20C10.4747 20 10.8267 19.9467 11.168 19.84C11.5093 19.712 11.8293 19.552 12.128 19.36C12.448 19.168 12.736 18.9227 12.992 18.624C13.248 18.3253 13.4613 18.0053 13.632 17.664ZM30.0895 24.32C28.6602 24.32 27.3908 24.096 26.2815 23.648C25.1722 23.1787 24.2228 22.5493 23.4335 21.76C22.6655 20.9707 22.0788 20.064 21.6735 19.04C21.2682 17.9947 21.0655 16.9067 21.0655 15.776C21.0655 14.1547 21.4175 12.6827 22.1215 11.36C22.8468 10.016 23.8815 8.93867 25.2255 8.128C26.5695 7.296 28.1908 6.88 30.0895 6.88C31.9882 6.88 33.5988 7.28533 34.9215 8.096C36.2655 8.90667 37.2895 9.97333 37.9935 11.296C38.6975 12.5973 39.0495 14.016 39.0495 15.552C39.0495 15.8507 39.0282 16.1493 38.9855 16.448C38.9642 16.7253 38.9428 16.9707 38.9215 17.184H26.5055C26.5695 17.9307 26.7722 18.56 27.1135 19.072C27.4762 19.584 27.9348 19.9787 28.4895 20.256C29.0442 20.512 29.6308 20.64 30.2495 20.64C31.0175 20.64 31.7322 20.4587 32.3935 20.096C33.0762 19.7333 33.5455 19.2427 33.8015 18.624L38.1535 19.84C37.7268 20.7147 37.1188 21.4933 36.3295 22.176C35.5615 22.8373 34.6442 23.36 33.5775 23.744C32.5322 24.128 31.3695 24.32 30.0895 24.32ZM26.3775 14.048H33.6735C33.5882 13.344 33.3855 12.736 33.0655 12.224C32.7455 11.6907 32.3188 11.2853 31.7855 11.008C31.2522 10.7093 30.6655 10.56 30.0255 10.56C29.3642 10.56 28.7668 10.7093 28.2335 11.008C27.7215 11.2853 27.3055 11.6907 26.9855 12.224C26.6655 12.736 26.4628 13.344 26.3775 14.048ZM48.762 24.32C47.3327 24.32 46.0633 24.0853 44.954 23.616C43.8447 23.1467 42.8953 22.5067 42.106 21.696C41.338 20.8853 40.7513 19.9573 40.346 18.912C39.9407 17.8667 39.738 16.7573 39.738 15.584C39.738 14.048 40.09 12.6187 40.794 11.296C41.5193 9.97333 42.554 8.90667 43.898 8.096C45.242 7.28533 46.8633 6.88 48.762 6.88C50.682 6.88 52.3033 7.296 53.626 8.128C54.97 8.93867 55.9727 10.0053 56.634 11.328L51.642 12.832C51.322 12.32 50.906 11.9253 50.394 11.648C49.9033 11.3707 49.3487 11.232 48.73 11.232C48.026 11.232 47.386 11.4133 46.81 11.776C46.2553 12.1387 45.8073 12.64 45.466 13.28C45.146 13.92 44.986 14.688 44.986 15.584C44.986 16.4587 45.1567 17.2267 45.498 17.888C45.8393 18.5493 46.2873 19.072 46.842 19.456C47.3967 19.8187 48.026 20 48.73 20C49.1567 20 49.5513 19.936 49.914 19.808C50.298 19.6587 50.6393 19.456 50.938 19.2C51.258 18.944 51.5033 18.656 51.674 18.336L56.666 19.872C56.2607 20.7253 55.674 21.4933 54.906 22.176C54.1593 22.8373 53.274 23.36 52.25 23.744C51.226 24.128 50.0633 24.32 48.762 24.32ZM69.636 24L65.252 17.28L63.46 19.104V24H58.34V0.639999H63.46V14.144L69.156 7.2H74.564L68.516 14.432L75.076 24H69.636Z",
@@ -447,7 +222,7 @@ var NavbarItem = ({
447
222
  iconName,
448
223
  onClick,
449
224
  ...props
450
- }) => /* @__PURE__ */ React8__namespace.default.createElement(Pressable, { title: label, onClick, ...props }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { name: iconName, className: "py-3 px-7" }));
225
+ }) => /* @__PURE__ */ React19__namespace.default.createElement(Pressable, { title: label, onClick, ...props }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { name: iconName, className: "py-3 px-7" }));
451
226
 
452
227
  // src/components/Navbar.tsx
453
228
  var Navbar = ({
@@ -456,16 +231,16 @@ var Navbar = ({
456
231
  navbarItems,
457
232
  onLogoClick,
458
233
  onProfileClick
459
- }) => /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex py-6 px-20 justify-between" }, /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-1 gap-6 items-center" }, /* @__PURE__ */ React8__namespace.default.createElement(Pressable, { onClick: onLogoClick, title: "Deck AI" }, /* @__PURE__ */ React8__namespace.default.createElement(Logo, null)), /* @__PURE__ */ React8__namespace.default.createElement(
234
+ }) => /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex py-6 px-20 justify-between" }, /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-1 gap-6 items-center" }, /* @__PURE__ */ React19__namespace.default.createElement(Pressable, { onClick: onLogoClick, title: "Deck AI" }, /* @__PURE__ */ React19__namespace.default.createElement(Logo, null)), /* @__PURE__ */ React19__namespace.default.createElement(
460
235
  Combobox,
461
236
  {
462
237
  options: searchOptions,
463
238
  placeholder: "Search for a creator, type of content, or platform...",
464
- end: /* @__PURE__ */ React8__namespace.default.createElement(Icon, { name: "search-normal" }),
239
+ end: /* @__PURE__ */ React19__namespace.default.createElement(Icon, { name: "search-normal" }),
465
240
  onChange: onSearchChange,
466
241
  className: "flex-1 mr-8"
467
242
  }
468
- )), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex gap-2 border-b-2 border-stroke items-center" }, navbarItems.map(({ iconName, label, onClick }) => /* @__PURE__ */ React8__namespace.default.createElement(
243
+ )), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex gap-2 border-b-2 border-stroke items-center" }, navbarItems.map(({ iconName, label, onClick }) => /* @__PURE__ */ React19__namespace.default.createElement(
469
244
  NavbarItem,
470
245
  {
471
246
  key: label,
@@ -473,13 +248,70 @@ var Navbar = ({
473
248
  label,
474
249
  onClick
475
250
  }
476
- ))), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex" }, /* @__PURE__ */ React8__namespace.default.createElement(
251
+ ))), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex" }, /* @__PURE__ */ React19__namespace.default.createElement(
477
252
  Avatar,
478
253
  {
479
254
  onClick: onProfileClick,
480
255
  src: "https://avatars.githubusercontent.com/u/17854809?v=4"
481
256
  }
482
257
  ))));
258
+ var HEADING_ELEMENT_MAP = {
259
+ xl: "h1",
260
+ lg: "h1",
261
+ md: "h2",
262
+ sm: "h3",
263
+ xs: "h4"
264
+ };
265
+ var getElementFromVariant = (variant) => {
266
+ const [category, size] = variant.split("-");
267
+ if (category === "heading") {
268
+ return HEADING_ELEMENT_MAP[size] || "p";
269
+ }
270
+ if (category === "label") {
271
+ return "label";
272
+ }
273
+ return "p";
274
+ };
275
+ var fontWeight = {
276
+ light: "font-light",
277
+ regular: "font-regular",
278
+ semibold: "font-semibold",
279
+ bold: "font-bold"
280
+ };
281
+ var Text = React19__namespace.default.forwardRef(
282
+ ({
283
+ variant = "body-default",
284
+ color = "text-primary",
285
+ as,
286
+ className,
287
+ children,
288
+ weight,
289
+ ...props
290
+ }, ref) => {
291
+ const typographyClasses = `text-${variant}`;
292
+ const colorClasses = color && color === "inherit" ? "inherit" : color ? `text-${color}` : "";
293
+ const suggestedElement = React19__namespace.default.useMemo(
294
+ () => getElementFromVariant(variant),
295
+ [variant]
296
+ );
297
+ const Component = as || suggestedElement;
298
+ return (
299
+ // @ts-expect-error TODO: figure this out
300
+ /* @__PURE__ */ React19__namespace.default.createElement(
301
+ Component,
302
+ {
303
+ ref,
304
+ className: `font-sans antialiased ${typographyClasses} ${colorClasses} ${weight ? `!${fontWeight[weight]}` : ""} ${className ?? ""}`,
305
+ ...props
306
+ },
307
+ children
308
+ )
309
+ );
310
+ }
311
+ );
312
+ Text.displayName = "Text";
313
+
314
+ // src/components/Link.tsx
483
315
  var Link = ({
484
316
  children,
485
317
  color = "text-primary",
@@ -487,7 +319,7 @@ var Link = ({
487
319
  href,
488
320
  className,
489
321
  ...props
490
- }) => /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant, color }, /* @__PURE__ */ React8__namespace.default.createElement(
322
+ }) => /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant, color }, /* @__PURE__ */ React19__namespace.default.createElement(
491
323
  "a",
492
324
  {
493
325
  href,
@@ -501,22 +333,20 @@ var Link = ({
501
333
  },
502
334
  children
503
335
  ));
504
-
505
- // src/components/Breadcrumbs.tsx
506
- var DefaultSeparator = () => /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "body-lg", color: "text-primary" }, "/");
507
- var Breadcrumbs = React8__namespace.default.forwardRef(
336
+ var DefaultSeparator = () => /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "body-lg", color: "text-primary" }, "/");
337
+ var Breadcrumbs = React19__namespace.default.forwardRef(
508
338
  ({ items, className, SeparatorComponent = DefaultSeparator, onHomeClick }, ref) => {
509
- const renderSeparator = () => typeof SeparatorComponent === "function" ? /* @__PURE__ */ React8__namespace.default.createElement(SeparatorComponent, null) : React8__namespace.default.cloneElement(SeparatorComponent);
510
- return /* @__PURE__ */ React8__namespace.default.createElement(
339
+ const renderSeparator = () => typeof SeparatorComponent === "function" ? /* @__PURE__ */ React19__namespace.default.createElement(SeparatorComponent, null) : React19__namespace.default.cloneElement(SeparatorComponent);
340
+ return /* @__PURE__ */ React19__namespace.default.createElement(
511
341
  "nav",
512
342
  {
513
343
  ref,
514
344
  "aria-label": "Breadcrumb",
515
345
  className: cn("relative", className)
516
346
  },
517
- /* @__PURE__ */ React8__namespace.default.createElement("ol", { className: "flex flex-wrap items-center gap-2" }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { onClick: onHomeClick, name: "home", size: 20, color: "secondary" }), renderSeparator(), items.map((item, index) => {
347
+ /* @__PURE__ */ React19__namespace.default.createElement("ol", { className: "flex flex-wrap items-center gap-2" }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { onClick: onHomeClick, name: "home", size: 20, color: "secondary" }), renderSeparator(), items.map((item, index) => {
518
348
  const isLastItem = index === items.length - 1;
519
- return isLastItem || !item.href ? /* @__PURE__ */ React8__namespace.default.createElement(
349
+ return isLastItem || !item.href ? /* @__PURE__ */ React19__namespace.default.createElement(
520
350
  Text,
521
351
  {
522
352
  variant: isLastItem ? "body-default-bold" : "body-default",
@@ -524,19 +354,191 @@ var Breadcrumbs = React8__namespace.default.forwardRef(
524
354
  "aria-current": isLastItem ? "page" : void 0
525
355
  },
526
356
  item.label
527
- ) : /* @__PURE__ */ React8__namespace.default.createElement(React8__namespace.default.Fragment, null, /* @__PURE__ */ React8__namespace.default.createElement(Link, { href: item.href }, item.label), renderSeparator());
357
+ ) : /* @__PURE__ */ React19__namespace.default.createElement(React19__namespace.default.Fragment, null, /* @__PURE__ */ React19__namespace.default.createElement(Link, { href: item.href }, item.label), renderSeparator());
528
358
  }))
529
359
  );
530
360
  }
531
361
  );
532
362
  Breadcrumbs.displayName = "Breadcrumbs";
533
- var Tag = ({ children, ...props }) => /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "rounded bg-secondary-400 py-1.5 px-2", ...props }, typeof children === "string" ? /* @__PURE__ */ React8__namespace.default.createElement(Text, { color: "primary-100", variant: "body-default-medium" }, children) : children);
363
+ var Tooltip = ({
364
+ content,
365
+ children,
366
+ side = "bottom",
367
+ align = "center",
368
+ className,
369
+ delayDuration = 200
370
+ }) => /* @__PURE__ */ React19__namespace.createElement(TooltipPrimitive__namespace.Provider, { delayDuration }, /* @__PURE__ */ React19__namespace.createElement(TooltipPrimitive__namespace.Root, null, /* @__PURE__ */ React19__namespace.createElement(TooltipPrimitive__namespace.Trigger, { asChild: true }, /* @__PURE__ */ React19__namespace.createElement("span", { tabIndex: 0 }, children)), /* @__PURE__ */ React19__namespace.createElement(TooltipPrimitive__namespace.Portal, null, /* @__PURE__ */ React19__namespace.createElement(
371
+ TooltipPrimitive__namespace.Content,
372
+ {
373
+ side,
374
+ align,
375
+ sideOffset: 4,
376
+ className: cn(
377
+ "z-50 overflow-hidden rounded-lg",
378
+ "bg-text-primary px-3 py-1.5",
379
+ "text-xs text-white",
380
+ "animate-in fade-in-0 zoom-in-95",
381
+ "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
382
+ "data-[side=bottom]:slide-in-from-top-2",
383
+ "data-[side=top]:slide-in-from-bottom-2",
384
+ "select-none",
385
+ "max-w-60",
386
+ className
387
+ )
388
+ },
389
+ content,
390
+ /* @__PURE__ */ React19__namespace.createElement(
391
+ TooltipPrimitive__namespace.Arrow,
392
+ {
393
+ className: "fill-text-primary",
394
+ width: 10,
395
+ height: 5
396
+ }
397
+ )
398
+ ))));
399
+ var Tag = ({ children, ...props }) => /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "rounded bg-secondary-400 py-1.5 px-2", ...props }, typeof children === "string" ? /* @__PURE__ */ React19__namespace.default.createElement(Text, { color: "primary-100", variant: "body-default-medium" }, children) : children);
400
+ var SocialCard = ({
401
+ icon,
402
+ followers,
403
+ engagement,
404
+ ...pressableProps
405
+ }) => /* @__PURE__ */ React19__namespace.default.createElement(Pressable, { ...pressableProps }, /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex gap-4 px-6 py-4 border border-secondary rounded-lg" }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { name: icon, size: 40 }), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { name: "profile", size: 20 }), /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "body-default-medium" }, followers)), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { name: "arrow-swap-horizontal", className: "rotate-90", size: 20 }), /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "body-default-medium" }, engagement))));
406
+ var Switch = React19__namespace.forwardRef(({ className, label, description, ...props }, ref) => /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React19__namespace.createElement(
407
+ SwitchPrimitive__namespace.Root,
408
+ {
409
+ className: cn(
410
+ "peer inline-flex h-6 w-11 shrink-0 cursor-pointer",
411
+ "items-center rounded-full border-2 border-transparent",
412
+ "transition-colors focus-visible:outline-none",
413
+ focusRingStyles,
414
+ "disabled:cursor-not-allowed disabled:opacity-50",
415
+ "data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",
416
+ className
417
+ ),
418
+ ...props,
419
+ ref
420
+ },
421
+ /* @__PURE__ */ React19__namespace.createElement(
422
+ SwitchPrimitive__namespace.Thumb,
423
+ {
424
+ className: cn(
425
+ "pointer-events-none block h-5 w-5",
426
+ "rounded-full bg-white shadow-lg ring-0",
427
+ "transition-transform",
428
+ "data-[state=checked]:translate-x-5",
429
+ "data-[state=unchecked]:translate-x-0"
430
+ )
431
+ }
432
+ )
433
+ ), (label || description) && /* @__PURE__ */ React19__namespace.createElement("div", { className: "flex flex-col" }, label && /* @__PURE__ */ React19__namespace.createElement(
434
+ "label",
435
+ {
436
+ className: "text-sm font-medium text-text-primary",
437
+ htmlFor: props.id
438
+ },
439
+ label
440
+ ), description && /* @__PURE__ */ React19__namespace.createElement("span", { className: "text-xs text-text-secondary" }, description))));
441
+ Switch.displayName = "Switch";
442
+ var Badge = React19__namespace.forwardRef(
443
+ ({ className, variant = "pink", iconName, children, ...props }, ref) => {
444
+ const variants = {
445
+ pink: "bg-tertiary-5",
446
+ orange: "bg-tertiary-15",
447
+ green: "bg-tertiary-25"
448
+ };
449
+ return /* @__PURE__ */ React19__namespace.createElement(
450
+ "span",
451
+ {
452
+ ref,
453
+ className: cn(
454
+ "inline-flex items-center gap-2",
455
+ "rounded-lg px-4 py-2",
456
+ "text-sm font-medium",
457
+ variants[variant],
458
+ className
459
+ ),
460
+ ...props
461
+ },
462
+ iconName && /* @__PURE__ */ React19__namespace.createElement(Icon, { name: iconName }),
463
+ children
464
+ );
465
+ }
466
+ );
467
+ Badge.displayName = "Badge";
468
+ var filled = {
469
+ black: "bg-text-primary text-white",
470
+ // fade it slightly
471
+ accent: "bg-primary-100 text-white",
472
+ secondary: "bg-secondary-100 text-secondary"
473
+ };
474
+ var outlined = {
475
+ black: "border border-text-primary text-text-primary bg-white",
476
+ accent: "border border-primary-100 text-primary-100 bg-white",
477
+ secondary: "border border-text-secondary text-secondary bg-white"
478
+ };
479
+ var Button = React19__namespace.forwardRef(
480
+ ({
481
+ className,
482
+ variant = "filled",
483
+ color = "black",
484
+ isLoading = false,
485
+ children,
486
+ disabled,
487
+ ...props
488
+ }, ref) => /* @__PURE__ */ React19__namespace.createElement(
489
+ "button",
490
+ {
491
+ ref,
492
+ className: `
493
+ px-7
494
+ py-2
495
+ inline-flex items-center justify-center
496
+ rounded-lg
497
+ transition-colors duration-200
498
+ ${focusRingStyles}
499
+ disabled:opacity-50 disabled:pointer-events-none
500
+ hover:opacity-80 active:scale-95
501
+ truncate
502
+ ${variant === "filled" ? filled[color] : outlined[color]}
503
+ ${className}
504
+ `,
505
+ disabled: disabled || isLoading,
506
+ type: "button",
507
+ ...props
508
+ },
509
+ typeof children === "string" ? /* @__PURE__ */ React19__namespace.createElement(Text, { variant: "body-default-bold", color: "inherit" }, children) : children
510
+ )
511
+ );
512
+ Button.displayName = "Button";
513
+
514
+ // src/components/ProfileCard.tsx
515
+ var ProfileCard = ({ profileImage }) => {
516
+ const randomId = React19.useId();
517
+ return /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "p-10 rounded-xl border border-stroke relative flex gap-6" }, /* @__PURE__ */ React19__namespace.default.createElement(
518
+ Button,
519
+ {
520
+ variant: "outlined",
521
+ color: "secondary",
522
+ className: "absolute top-10 right-10 !px-2 py-2"
523
+ },
524
+ /* @__PURE__ */ React19__namespace.default.createElement(Icon, { color: "secondary", name: "edit-2" })
525
+ ), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-row" }, /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React19__namespace.default.createElement("img", { src: profileImage, alt: "profile for fiona chen" }), /* @__PURE__ */ React19__namespace.default.createElement(Button, null, "Preview Profile"), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-row justify-between" }, /* @__PURE__ */ React19__namespace.default.createElement(
526
+ Text,
527
+ {
528
+ as: "label",
529
+ htmlFor: randomId,
530
+ variant: "body-default-semibold",
531
+ color: "text-secondary"
532
+ },
533
+ "Private Mode"
534
+ ), /* @__PURE__ */ React19__namespace.default.createElement(Switch, { id: randomId })), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-row gap-1" }, /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "body-xs", color: "text-secondary" }, "What is this?"), /* @__PURE__ */ React19__namespace.default.createElement(Tooltip, { content: "Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode." }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { name: "message-question", color: "secondary", size: 16 }))))))), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React19__namespace.default.createElement(Text, { as: "h2", variant: "heading-md" }, "Fiona Chen"), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { name: "location" }), /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "body-lg", color: "text-secondary" }, "New York City, New York")), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { name: "profile" }), /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "body-lg", color: "text-secondary" }, "Member Since", " ", /* @__PURE__ */ React19__namespace.default.createElement(Text, { as: "span", variant: "body-lg-semibold" }, "October 2018"))), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "pt-8" }), /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "heading-sm" }, "My badges:"), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ React19__namespace.default.createElement(Badge, { iconName: "medal-star" }, "Top Creator"), /* @__PURE__ */ React19__namespace.default.createElement(Badge, { variant: "orange", iconName: "message-text" }, "Responds Quickly"))));
535
+ };
534
536
  var ContactItem = ({
535
537
  iconName,
536
538
  children,
537
539
  href,
538
540
  ...linkProps
539
- }) => /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "row gap-2 flex items-center" }, /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "bg-secondary-400 rounded-full p-2.5" }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { name: iconName, color: "primaryBlue", size: 18 })), /* @__PURE__ */ React8__namespace.default.createElement(
541
+ }) => /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "row gap-2 flex items-center" }, /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "bg-secondary-400 rounded-full p-2.5" }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { name: iconName, color: "primaryBlue", size: 18 })), /* @__PURE__ */ React19__namespace.default.createElement(
540
542
  Text,
541
543
  {
542
544
  className: "hover:underline",
@@ -549,13 +551,7 @@ var ContactItem = ({
549
551
  ));
550
552
 
551
553
  // src/components/AboutCard.tsx
552
- var AboutCard = ({ interests, contactItems }) => /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "border border-secondary rounded-2xl p-10 relative flex" }, /* @__PURE__ */ React8__namespace.default.createElement(Button, { variant: "outlined", className: "absolute top-10 right-10 !px-2 py-2" }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { color: "primary", name: "edit-2" })), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex basis-1/2 flex-col gap-2 pr-10" }, /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "heading-sm" }, "About me"), /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "body-default" }, "Hi, I'm Fiona! Welcome to my world of travel and beauty. I've worked with major brands like Hyatt, Ritz Carlton, Marriott Bonvoy, Delta, REVOLVE, and Fenty Beauty to name a few. I've generated hundreds of thousands in sales and amassed millions of views across all platforms. Message me for partnership inquiries!")), /* @__PURE__ */ React8__namespace.default.createElement("span", { className: "absolute bg-secondary-50 w-[1px] inset-x-0 inset-y-10" }), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-col gap-2 pl-10" }, /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "heading-sm" }, "Interests"), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex gap-2" }, interests.map((interest) => /* @__PURE__ */ React8__namespace.default.createElement(Tag, null, interest))), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex flex-col pt-8 gap-4" }, contactItems.map((contactProps) => /* @__PURE__ */ React8__namespace.default.createElement(ContactItem, { ...contactProps })))));
553
- var SocialCard = ({
554
- icon,
555
- followers,
556
- engagement,
557
- ...pressableProps
558
- }) => /* @__PURE__ */ React8__namespace.default.createElement(Pressable, { ...pressableProps }, /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex gap-4 px-6 py-4 border border-secondary rounded-lg" }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { name: icon, size: 40 }), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { name: "profile", size: 20 }), /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "body-default-medium" }, followers)), /* @__PURE__ */ React8__namespace.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React8__namespace.default.createElement(Icon, { name: "arrow-swap-horizontal", className: "rotate-90", size: 20 }), /* @__PURE__ */ React8__namespace.default.createElement(Text, { variant: "body-default-medium" }, engagement))));
554
+ var AboutCard = ({ interests, contactItems }) => /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "border border-secondary rounded-2xl p-10 relative flex" }, /* @__PURE__ */ React19__namespace.default.createElement(Button, { variant: "outlined", className: "absolute top-10 right-10 !px-2 py-2" }, /* @__PURE__ */ React19__namespace.default.createElement(Icon, { color: "primary", name: "edit-2" })), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex basis-1/2 flex-col gap-2 pr-10" }, /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "heading-sm" }, "About me"), /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "body-default" }, "Hi, I'm Fiona! Welcome to my world of travel and beauty. I've worked with major brands like Hyatt, Ritz Carlton, Marriott Bonvoy, Delta, REVOLVE, and Fenty Beauty to name a few. I've generated hundreds of thousands in sales and amassed millions of views across all platforms. Message me for partnership inquiries!")), /* @__PURE__ */ React19__namespace.default.createElement("span", { className: "absolute bg-secondary-50 w-[1px] inset-x-0 inset-y-10" }), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-col gap-2 pl-10" }, /* @__PURE__ */ React19__namespace.default.createElement(Text, { variant: "heading-sm" }, "Interests"), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex gap-2" }, interests.map((interest) => /* @__PURE__ */ React19__namespace.default.createElement(Tag, null, interest))), /* @__PURE__ */ React19__namespace.default.createElement("div", { className: "flex flex-col pt-8 gap-4" }, contactItems.map((contactProps) => /* @__PURE__ */ React19__namespace.default.createElement(ContactItem, { ...contactProps })))));
559
555
  if (exports.default) module.exports = exports.default;
560
556
 
561
557
  exports.AboutCard = AboutCard;