@wow-two-beta/ui 0.0.23 → 0.0.24
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/dist/{chunk-XAJKBU6P.js → chunk-6RFXTWLM.js} +18 -4
- package/dist/chunk-6RFXTWLM.js.map +1 -0
- package/dist/{chunk-5KVTU5TX.js → chunk-I4WUBNR6.js} +1616 -6
- package/dist/chunk-I4WUBNR6.js.map +1 -0
- package/dist/{chunk-XLPFX4WK.js → chunk-TK3SXTTF.js} +4 -17
- package/dist/chunk-TK3SXTTF.js.map +1 -0
- package/dist/display/index.js +2 -2
- package/dist/forms/addressForm/AddressForm.d.ts +38 -0
- package/dist/forms/addressForm/AddressForm.d.ts.map +1 -0
- package/dist/forms/addressForm/index.d.ts +2 -0
- package/dist/forms/addressForm/index.d.ts.map +1 -0
- package/dist/forms/cronInput/CronInput.d.ts +16 -0
- package/dist/forms/cronInput/CronInput.d.ts.map +1 -0
- package/dist/forms/cronInput/index.d.ts +2 -0
- package/dist/forms/cronInput/index.d.ts.map +1 -0
- package/dist/forms/emojiPicker/EmojiPicker.d.ts +27 -0
- package/dist/forms/emojiPicker/EmojiPicker.d.ts.map +1 -0
- package/dist/forms/emojiPicker/index.d.ts +2 -0
- package/dist/forms/emojiPicker/index.d.ts.map +1 -0
- package/dist/forms/fontPicker/FontPicker.d.ts +23 -0
- package/dist/forms/fontPicker/FontPicker.d.ts.map +1 -0
- package/dist/forms/fontPicker/index.d.ts +2 -0
- package/dist/forms/fontPicker/index.d.ts.map +1 -0
- package/dist/forms/gradientPicker/GradientPicker.d.ts +25 -0
- package/dist/forms/gradientPicker/GradientPicker.d.ts.map +1 -0
- package/dist/forms/gradientPicker/index.d.ts +2 -0
- package/dist/forms/gradientPicker/index.d.ts.map +1 -0
- package/dist/forms/iconPicker/IconPicker.d.ts +21 -0
- package/dist/forms/iconPicker/IconPicker.d.ts.map +1 -0
- package/dist/forms/iconPicker/index.d.ts +2 -0
- package/dist/forms/iconPicker/index.d.ts.map +1 -0
- package/dist/forms/index.d.ts +9 -0
- package/dist/forms/index.d.ts.map +1 -1
- package/dist/forms/index.js +2 -2
- package/dist/forms/keyboardShortcutPicker/KeyboardShortcutPicker.d.ts +17 -0
- package/dist/forms/keyboardShortcutPicker/KeyboardShortcutPicker.d.ts.map +1 -0
- package/dist/forms/keyboardShortcutPicker/index.d.ts +2 -0
- package/dist/forms/keyboardShortcutPicker/index.d.ts.map +1 -0
- package/dist/forms/knob/Knob.d.ts +25 -0
- package/dist/forms/knob/Knob.d.ts.map +1 -0
- package/dist/forms/knob/index.d.ts +2 -0
- package/dist/forms/knob/index.d.ts.map +1 -0
- package/dist/forms/phoneInput/PhoneInput.d.ts +26 -0
- package/dist/forms/phoneInput/PhoneInput.d.ts.map +1 -0
- package/dist/forms/phoneInput/index.d.ts +2 -0
- package/dist/forms/phoneInput/index.d.ts.map +1 -0
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/dist/chunk-5KVTU5TX.js.map +0 -1
- package/dist/chunk-XAJKBU6P.js.map +0 -1
- package/dist/chunk-XLPFX4WK.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { listboxVariants, listboxItemVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-FFQENBTW.js';
|
|
2
2
|
import { PopoverTrigger, Popover, PopoverContent } from './chunk-DSA7L7PD.js';
|
|
3
|
-
import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-
|
|
3
|
+
import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-6RFXTWLM.js';
|
|
4
4
|
import { tv, dataAttr } from './chunk-BMBIZLO4.js';
|
|
5
5
|
import { useControlled } from './chunk-4P2TFUVW.js';
|
|
6
6
|
import { Icon } from './chunk-TDX22OWF.js';
|
|
@@ -9,9 +9,9 @@ import { composeRefs } from './chunk-DN7WBRIV.js';
|
|
|
9
9
|
import { useId } from './chunk-KDXJQNB6.js';
|
|
10
10
|
import { cn } from './chunk-KZ4VFY2T.js';
|
|
11
11
|
import * as React from 'react';
|
|
12
|
-
import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useMemo, useCallback, useEffect, useContext } from 'react';
|
|
12
|
+
import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useMemo, useCallback, useEffect, Fragment as Fragment$1, useContext } from 'react';
|
|
13
13
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
14
|
-
import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, Calendar as Calendar$1, Clock, UploadCloud, ChevronRight, Copy, ChevronLeft, Heading1, Heading2, Bold, Italic,
|
|
14
|
+
import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, Calendar as Calendar$1, Clock, UploadCloud, ChevronRight, Copy, Zap, Wallet, Video, User, Trash, Tag as Tag$1, Sun, Star, ShoppingCart, Share2, Settings, Send, Play, Pin, Phone, Pencil, Paperclip, Music, Moon, Mic, MessageCircle, Map as Map$1, Mail, Lock, Link2, Lightbulb, Layers, Info, Inbox, Image, Home, Heart, Globe, Folder, File, ExternalLink, Edit, Download, Compass, Coffee, Code, Cloud, Camera, Bookmark, Bell, ChevronLeft, Heading1, Heading2, Bold, Italic, List, Quote } from 'lucide-react';
|
|
15
15
|
import { marked } from 'marked';
|
|
16
16
|
|
|
17
17
|
var Label = forwardRef(
|
|
@@ -5198,7 +5198,1617 @@ var RecurrenceEditor = forwardRef(
|
|
|
5198
5198
|
);
|
|
5199
5199
|
}
|
|
5200
5200
|
);
|
|
5201
|
+
var TONE_CLASS = {
|
|
5202
|
+
brand: "text-primary",
|
|
5203
|
+
success: "text-success",
|
|
5204
|
+
warning: "text-warning",
|
|
5205
|
+
danger: "text-destructive",
|
|
5206
|
+
muted: "text-muted-foreground"
|
|
5207
|
+
};
|
|
5208
|
+
function clamp(v, min, max) {
|
|
5209
|
+
return Math.max(min, Math.min(max, v));
|
|
5210
|
+
}
|
|
5211
|
+
var Knob = forwardRef(function Knob2({
|
|
5212
|
+
value: valueProp,
|
|
5213
|
+
defaultValue,
|
|
5214
|
+
onValueChange,
|
|
5215
|
+
min = 0,
|
|
5216
|
+
max = 1,
|
|
5217
|
+
step = 0.01,
|
|
5218
|
+
largeStep = 0.1,
|
|
5219
|
+
size = 64,
|
|
5220
|
+
arcDegrees = 270,
|
|
5221
|
+
tone = "brand",
|
|
5222
|
+
format = (v) => v.toFixed(2),
|
|
5223
|
+
showValue = true,
|
|
5224
|
+
disabled,
|
|
5225
|
+
name,
|
|
5226
|
+
className,
|
|
5227
|
+
"aria-label": ariaLabel = "Knob",
|
|
5228
|
+
...rest
|
|
5229
|
+
}, ref) {
|
|
5230
|
+
const [value, setValue] = useControlled({
|
|
5231
|
+
controlled: valueProp,
|
|
5232
|
+
default: defaultValue ?? min,
|
|
5233
|
+
onChange: onValueChange
|
|
5234
|
+
});
|
|
5235
|
+
const containerRef = useRef(null);
|
|
5236
|
+
const dragStateRef = useRef(null);
|
|
5237
|
+
const fraction = (clamp(value, min, max) - min) / (max - min);
|
|
5238
|
+
const halfArc = arcDegrees / 2;
|
|
5239
|
+
const startAngle = -halfArc - 90;
|
|
5240
|
+
const endAngle = halfArc - 90;
|
|
5241
|
+
const angle = startAngle + fraction * arcDegrees;
|
|
5242
|
+
const setClamped = useCallback(
|
|
5243
|
+
(v) => setValue(clamp(v, min, max)),
|
|
5244
|
+
[min, max, setValue]
|
|
5245
|
+
);
|
|
5246
|
+
const handlePointerDown = (e) => {
|
|
5247
|
+
if (disabled || e.button !== 0) return;
|
|
5248
|
+
dragStateRef.current = { startY: e.clientY, startValue: value };
|
|
5249
|
+
e.currentTarget.setPointerCapture(e.pointerId);
|
|
5250
|
+
};
|
|
5251
|
+
const handlePointerMove = (e) => {
|
|
5252
|
+
if (disabled || !dragStateRef.current) return;
|
|
5253
|
+
const dy = dragStateRef.current.startY - e.clientY;
|
|
5254
|
+
const range = max - min;
|
|
5255
|
+
const sensitivity = range / 200;
|
|
5256
|
+
setClamped(dragStateRef.current.startValue + dy * sensitivity);
|
|
5257
|
+
};
|
|
5258
|
+
const handlePointerUp = (e) => {
|
|
5259
|
+
if (!dragStateRef.current) return;
|
|
5260
|
+
dragStateRef.current = null;
|
|
5261
|
+
e.currentTarget.releasePointerCapture?.(e.pointerId);
|
|
5262
|
+
};
|
|
5263
|
+
const handleWheel = (e) => {
|
|
5264
|
+
if (disabled) return;
|
|
5265
|
+
e.preventDefault();
|
|
5266
|
+
const delta = e.deltaY < 0 ? step : -step;
|
|
5267
|
+
setClamped(value + delta);
|
|
5268
|
+
};
|
|
5269
|
+
const handleKey = (e) => {
|
|
5270
|
+
if (disabled) return;
|
|
5271
|
+
const s = e.shiftKey ? largeStep : step;
|
|
5272
|
+
switch (e.key) {
|
|
5273
|
+
case "ArrowUp":
|
|
5274
|
+
case "ArrowRight":
|
|
5275
|
+
e.preventDefault();
|
|
5276
|
+
setClamped(value + s);
|
|
5277
|
+
break;
|
|
5278
|
+
case "ArrowDown":
|
|
5279
|
+
case "ArrowLeft":
|
|
5280
|
+
e.preventDefault();
|
|
5281
|
+
setClamped(value - s);
|
|
5282
|
+
break;
|
|
5283
|
+
case "Home":
|
|
5284
|
+
e.preventDefault();
|
|
5285
|
+
setClamped(min);
|
|
5286
|
+
break;
|
|
5287
|
+
case "End":
|
|
5288
|
+
e.preventDefault();
|
|
5289
|
+
setClamped(max);
|
|
5290
|
+
break;
|
|
5291
|
+
}
|
|
5292
|
+
};
|
|
5293
|
+
const radius = size / 2 - 4;
|
|
5294
|
+
const center = size / 2;
|
|
5295
|
+
const polar = (deg, r) => {
|
|
5296
|
+
const rad = deg * Math.PI / 180;
|
|
5297
|
+
return [center + r * Math.cos(rad), center + r * Math.sin(rad)];
|
|
5298
|
+
};
|
|
5299
|
+
const [trackStartX, trackStartY] = polar(startAngle, radius);
|
|
5300
|
+
const [trackEndX, trackEndY] = polar(endAngle, radius);
|
|
5301
|
+
const largeArc = arcDegrees > 180 ? 1 : 0;
|
|
5302
|
+
const trackPath = `M ${trackStartX} ${trackStartY} A ${radius} ${radius} 0 ${largeArc} 1 ${trackEndX} ${trackEndY}`;
|
|
5303
|
+
const [valueEndX, valueEndY] = polar(angle, radius);
|
|
5304
|
+
const valueLargeArc = fraction * arcDegrees > 180 ? 1 : 0;
|
|
5305
|
+
const valuePath = `M ${trackStartX} ${trackStartY} A ${radius} ${radius} 0 ${valueLargeArc} 1 ${valueEndX} ${valueEndY}`;
|
|
5306
|
+
const [pointerInnerX, pointerInnerY] = polar(angle, radius * 0.45);
|
|
5307
|
+
const [pointerOuterX, pointerOuterY] = polar(angle, radius * 0.85);
|
|
5308
|
+
return /* @__PURE__ */ jsxs(
|
|
5309
|
+
"div",
|
|
5310
|
+
{
|
|
5311
|
+
ref: (el) => {
|
|
5312
|
+
containerRef.current = el;
|
|
5313
|
+
if (typeof ref === "function") ref(el);
|
|
5314
|
+
else if (ref) ref.current = el;
|
|
5315
|
+
},
|
|
5316
|
+
role: "slider",
|
|
5317
|
+
"aria-label": ariaLabel,
|
|
5318
|
+
"aria-valuenow": value,
|
|
5319
|
+
"aria-valuemin": min,
|
|
5320
|
+
"aria-valuemax": max,
|
|
5321
|
+
"aria-orientation": "vertical",
|
|
5322
|
+
"aria-disabled": disabled || void 0,
|
|
5323
|
+
tabIndex: disabled ? -1 : 0,
|
|
5324
|
+
onPointerDown: handlePointerDown,
|
|
5325
|
+
onPointerMove: handlePointerMove,
|
|
5326
|
+
onPointerUp: handlePointerUp,
|
|
5327
|
+
onPointerCancel: handlePointerUp,
|
|
5328
|
+
onWheel: handleWheel,
|
|
5329
|
+
onKeyDown: handleKey,
|
|
5330
|
+
style: { width: size, height: size, touchAction: "none" },
|
|
5331
|
+
className: cn(
|
|
5332
|
+
"relative inline-flex select-none items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
5333
|
+
TONE_CLASS[tone],
|
|
5334
|
+
disabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing",
|
|
5335
|
+
className
|
|
5336
|
+
),
|
|
5337
|
+
...rest,
|
|
5338
|
+
children: [
|
|
5339
|
+
/* @__PURE__ */ jsxs("svg", { width: size, height: size, className: "overflow-visible", children: [
|
|
5340
|
+
/* @__PURE__ */ jsx(
|
|
5341
|
+
"path",
|
|
5342
|
+
{
|
|
5343
|
+
d: trackPath,
|
|
5344
|
+
fill: "none",
|
|
5345
|
+
stroke: "currentColor",
|
|
5346
|
+
strokeWidth: 4,
|
|
5347
|
+
strokeLinecap: "round",
|
|
5348
|
+
className: "opacity-20"
|
|
5349
|
+
}
|
|
5350
|
+
),
|
|
5351
|
+
/* @__PURE__ */ jsx(
|
|
5352
|
+
"path",
|
|
5353
|
+
{
|
|
5354
|
+
d: valuePath,
|
|
5355
|
+
fill: "none",
|
|
5356
|
+
stroke: "currentColor",
|
|
5357
|
+
strokeWidth: 4,
|
|
5358
|
+
strokeLinecap: "round"
|
|
5359
|
+
}
|
|
5360
|
+
),
|
|
5361
|
+
/* @__PURE__ */ jsx(
|
|
5362
|
+
"line",
|
|
5363
|
+
{
|
|
5364
|
+
x1: pointerInnerX,
|
|
5365
|
+
y1: pointerInnerY,
|
|
5366
|
+
x2: pointerOuterX,
|
|
5367
|
+
y2: pointerOuterY,
|
|
5368
|
+
stroke: "currentColor",
|
|
5369
|
+
strokeWidth: 2.5,
|
|
5370
|
+
strokeLinecap: "round"
|
|
5371
|
+
}
|
|
5372
|
+
)
|
|
5373
|
+
] }),
|
|
5374
|
+
showValue && /* @__PURE__ */ jsx(
|
|
5375
|
+
"span",
|
|
5376
|
+
{
|
|
5377
|
+
"aria-hidden": "true",
|
|
5378
|
+
className: "absolute inset-0 grid place-items-center text-[10px] font-medium tabular-nums text-foreground",
|
|
5379
|
+
children: format(value)
|
|
5380
|
+
}
|
|
5381
|
+
),
|
|
5382
|
+
name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value })
|
|
5383
|
+
]
|
|
5384
|
+
}
|
|
5385
|
+
);
|
|
5386
|
+
});
|
|
5387
|
+
var MODIFIER_NAMES = {
|
|
5388
|
+
Control: "Ctrl",
|
|
5389
|
+
Meta: navigator?.platform?.toLowerCase?.().includes("mac") ? "\u2318" : "Meta",
|
|
5390
|
+
Alt: "Alt",
|
|
5391
|
+
Shift: "Shift"
|
|
5392
|
+
};
|
|
5393
|
+
function isModifier(key) {
|
|
5394
|
+
return ["Control", "Meta", "Alt", "Shift"].includes(key);
|
|
5395
|
+
}
|
|
5396
|
+
function normalizeKey(key) {
|
|
5397
|
+
if (key === " ") return "Space";
|
|
5398
|
+
if (key.length === 1) return key.toUpperCase();
|
|
5399
|
+
return key;
|
|
5400
|
+
}
|
|
5401
|
+
var KeyboardShortcutPicker = forwardRef(
|
|
5402
|
+
function KeyboardShortcutPicker2({
|
|
5403
|
+
value: valueProp,
|
|
5404
|
+
defaultValue,
|
|
5405
|
+
onValueChange,
|
|
5406
|
+
placeholder = "Click to record",
|
|
5407
|
+
recordLabel = "Press keys\u2026",
|
|
5408
|
+
disabled,
|
|
5409
|
+
name,
|
|
5410
|
+
className,
|
|
5411
|
+
type = "button",
|
|
5412
|
+
...rest
|
|
5413
|
+
}, ref) {
|
|
5414
|
+
const [keys, setKeys] = useControlled({
|
|
5415
|
+
controlled: valueProp,
|
|
5416
|
+
default: defaultValue ?? [],
|
|
5417
|
+
onChange: onValueChange
|
|
5418
|
+
});
|
|
5419
|
+
const [recording, setRecording] = useState(false);
|
|
5420
|
+
const buttonRef = useRef(null);
|
|
5421
|
+
useEffect(() => {
|
|
5422
|
+
if (!recording) return;
|
|
5423
|
+
const handleKey = (e) => {
|
|
5424
|
+
e.preventDefault();
|
|
5425
|
+
e.stopPropagation();
|
|
5426
|
+
if (e.key === "Escape") {
|
|
5427
|
+
setRecording(false);
|
|
5428
|
+
return;
|
|
5429
|
+
}
|
|
5430
|
+
if (e.key === "Backspace") {
|
|
5431
|
+
setKeys([]);
|
|
5432
|
+
setRecording(false);
|
|
5433
|
+
return;
|
|
5434
|
+
}
|
|
5435
|
+
if (isModifier(e.key)) return;
|
|
5436
|
+
const captured = [];
|
|
5437
|
+
if (e.metaKey) captured.push("Meta");
|
|
5438
|
+
if (e.ctrlKey) captured.push("Control");
|
|
5439
|
+
if (e.altKey) captured.push("Alt");
|
|
5440
|
+
if (e.shiftKey) captured.push("Shift");
|
|
5441
|
+
captured.push(normalizeKey(e.key));
|
|
5442
|
+
setKeys(captured);
|
|
5443
|
+
setRecording(false);
|
|
5444
|
+
};
|
|
5445
|
+
const handleClickOutside = (e) => {
|
|
5446
|
+
if (buttonRef.current && !buttonRef.current.contains(e.target)) {
|
|
5447
|
+
setRecording(false);
|
|
5448
|
+
}
|
|
5449
|
+
};
|
|
5450
|
+
document.addEventListener("keydown", handleKey, true);
|
|
5451
|
+
document.addEventListener("pointerdown", handleClickOutside);
|
|
5452
|
+
return () => {
|
|
5453
|
+
document.removeEventListener("keydown", handleKey, true);
|
|
5454
|
+
document.removeEventListener("pointerdown", handleClickOutside);
|
|
5455
|
+
};
|
|
5456
|
+
}, [recording, setKeys]);
|
|
5457
|
+
const startRecord = () => {
|
|
5458
|
+
if (disabled) return;
|
|
5459
|
+
setRecording(true);
|
|
5460
|
+
};
|
|
5461
|
+
const handleButtonKey = (e) => {
|
|
5462
|
+
if (recording) return;
|
|
5463
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
5464
|
+
e.preventDefault();
|
|
5465
|
+
startRecord();
|
|
5466
|
+
}
|
|
5467
|
+
};
|
|
5468
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
5469
|
+
/* @__PURE__ */ jsx(
|
|
5470
|
+
"button",
|
|
5471
|
+
{
|
|
5472
|
+
...rest,
|
|
5473
|
+
ref: (el) => {
|
|
5474
|
+
buttonRef.current = el;
|
|
5475
|
+
if (typeof ref === "function") ref(el);
|
|
5476
|
+
else if (ref) ref.current = el;
|
|
5477
|
+
},
|
|
5478
|
+
type,
|
|
5479
|
+
"aria-pressed": recording,
|
|
5480
|
+
disabled,
|
|
5481
|
+
onClick: startRecord,
|
|
5482
|
+
onKeyDown: handleButtonKey,
|
|
5483
|
+
className: cn(
|
|
5484
|
+
"inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60",
|
|
5485
|
+
recording && "border-primary bg-primary-soft text-primary-soft-foreground",
|
|
5486
|
+
className
|
|
5487
|
+
),
|
|
5488
|
+
children: recording ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: recordLabel }) : keys.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 text-muted-foreground", children: keys.map((k, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
5489
|
+
i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+" }),
|
|
5490
|
+
/* @__PURE__ */ jsx(Kbd, { children: MODIFIER_NAMES[k] ?? k })
|
|
5491
|
+
] }, i)) })
|
|
5492
|
+
}
|
|
5493
|
+
),
|
|
5494
|
+
name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: keys.join("+") })
|
|
5495
|
+
] });
|
|
5496
|
+
}
|
|
5497
|
+
);
|
|
5498
|
+
var BUILT_IN_ICONS = {
|
|
5499
|
+
bell: Bell,
|
|
5500
|
+
bookmark: Bookmark,
|
|
5501
|
+
calendar: Calendar$1,
|
|
5502
|
+
camera: Camera,
|
|
5503
|
+
check: Check,
|
|
5504
|
+
"chevron-down": ChevronDown,
|
|
5505
|
+
clock: Clock,
|
|
5506
|
+
cloud: Cloud,
|
|
5507
|
+
code: Code,
|
|
5508
|
+
coffee: Coffee,
|
|
5509
|
+
compass: Compass,
|
|
5510
|
+
download: Download,
|
|
5511
|
+
edit: Edit,
|
|
5512
|
+
"external-link": ExternalLink,
|
|
5513
|
+
eye: Eye,
|
|
5514
|
+
file: File,
|
|
5515
|
+
folder: Folder,
|
|
5516
|
+
globe: Globe,
|
|
5517
|
+
heart: Heart,
|
|
5518
|
+
home: Home,
|
|
5519
|
+
image: Image,
|
|
5520
|
+
inbox: Inbox,
|
|
5521
|
+
info: Info,
|
|
5522
|
+
layers: Layers,
|
|
5523
|
+
lightbulb: Lightbulb,
|
|
5524
|
+
link: Link2,
|
|
5525
|
+
lock: Lock,
|
|
5526
|
+
mail: Mail,
|
|
5527
|
+
map: Map$1,
|
|
5528
|
+
message: MessageCircle,
|
|
5529
|
+
mic: Mic,
|
|
5530
|
+
moon: Moon,
|
|
5531
|
+
music: Music,
|
|
5532
|
+
paperclip: Paperclip,
|
|
5533
|
+
pencil: Pencil,
|
|
5534
|
+
phone: Phone,
|
|
5535
|
+
pin: Pin,
|
|
5536
|
+
play: Play,
|
|
5537
|
+
plus: Plus,
|
|
5538
|
+
search: Search,
|
|
5539
|
+
send: Send,
|
|
5540
|
+
settings: Settings,
|
|
5541
|
+
share: Share2,
|
|
5542
|
+
cart: ShoppingCart,
|
|
5543
|
+
star: Star,
|
|
5544
|
+
sun: Sun,
|
|
5545
|
+
tag: Tag$1,
|
|
5546
|
+
trash: Trash,
|
|
5547
|
+
upload: Upload,
|
|
5548
|
+
user: User,
|
|
5549
|
+
video: Video,
|
|
5550
|
+
wallet: Wallet,
|
|
5551
|
+
zap: Zap
|
|
5552
|
+
};
|
|
5553
|
+
var IconPicker = forwardRef(
|
|
5554
|
+
function IconPicker2({
|
|
5555
|
+
value: valueProp,
|
|
5556
|
+
defaultValue,
|
|
5557
|
+
onValueChange,
|
|
5558
|
+
icons = BUILT_IN_ICONS,
|
|
5559
|
+
columns = 8,
|
|
5560
|
+
size = 20,
|
|
5561
|
+
iconButtonSize = 36,
|
|
5562
|
+
placeholder = "Search icons\u2026",
|
|
5563
|
+
disabled,
|
|
5564
|
+
name,
|
|
5565
|
+
className,
|
|
5566
|
+
...rest
|
|
5567
|
+
}, ref) {
|
|
5568
|
+
const [value, setValue] = useControlled({
|
|
5569
|
+
controlled: valueProp,
|
|
5570
|
+
default: defaultValue ?? "",
|
|
5571
|
+
onChange: onValueChange
|
|
5572
|
+
});
|
|
5573
|
+
const [query, setQuery] = useState("");
|
|
5574
|
+
const filtered = useMemo(() => {
|
|
5575
|
+
const entries = Object.entries(icons);
|
|
5576
|
+
if (!query) return entries;
|
|
5577
|
+
const q = query.toLowerCase();
|
|
5578
|
+
return entries.filter(([key]) => key.toLowerCase().includes(q));
|
|
5579
|
+
}, [icons, query]);
|
|
5580
|
+
return /* @__PURE__ */ jsxs(
|
|
5581
|
+
"div",
|
|
5582
|
+
{
|
|
5583
|
+
ref,
|
|
5584
|
+
className: cn(
|
|
5585
|
+
"flex flex-col gap-2 rounded-md border border-border bg-card p-3 text-card-foreground shadow-sm",
|
|
5586
|
+
className
|
|
5587
|
+
),
|
|
5588
|
+
...rest,
|
|
5589
|
+
children: [
|
|
5590
|
+
/* @__PURE__ */ jsx(
|
|
5591
|
+
"input",
|
|
5592
|
+
{
|
|
5593
|
+
type: "search",
|
|
5594
|
+
value: query,
|
|
5595
|
+
placeholder,
|
|
5596
|
+
disabled,
|
|
5597
|
+
onChange: (e) => setQuery(e.target.value),
|
|
5598
|
+
className: cn(inputBaseVariants({ size: "sm" }))
|
|
5599
|
+
}
|
|
5600
|
+
),
|
|
5601
|
+
/* @__PURE__ */ jsxs(
|
|
5602
|
+
"div",
|
|
5603
|
+
{
|
|
5604
|
+
role: "grid",
|
|
5605
|
+
"aria-label": "Icons",
|
|
5606
|
+
className: "grid gap-1 overflow-y-auto",
|
|
5607
|
+
style: { gridTemplateColumns: `repeat(${columns}, ${iconButtonSize}px)`, maxHeight: 240 },
|
|
5608
|
+
children: [
|
|
5609
|
+
filtered.map(([key, IconComp]) => {
|
|
5610
|
+
const selected = value === key;
|
|
5611
|
+
return /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
|
|
5612
|
+
"button",
|
|
5613
|
+
{
|
|
5614
|
+
type: "button",
|
|
5615
|
+
"aria-pressed": selected,
|
|
5616
|
+
"aria-label": key,
|
|
5617
|
+
disabled,
|
|
5618
|
+
onClick: () => setValue(key),
|
|
5619
|
+
style: { width: iconButtonSize, height: iconButtonSize },
|
|
5620
|
+
className: cn(
|
|
5621
|
+
"inline-flex items-center justify-center rounded-md border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
5622
|
+
selected ? "border-primary bg-primary text-primary-foreground hover:bg-primary" : "border-transparent"
|
|
5623
|
+
),
|
|
5624
|
+
children: /* @__PURE__ */ jsx(Icon, { icon: IconComp, size })
|
|
5625
|
+
}
|
|
5626
|
+
) }, key);
|
|
5627
|
+
}),
|
|
5628
|
+
filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "col-span-full px-2 py-6 text-center text-xs text-muted-foreground", children: "No icons match." })
|
|
5629
|
+
]
|
|
5630
|
+
}
|
|
5631
|
+
),
|
|
5632
|
+
name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value })
|
|
5633
|
+
]
|
|
5634
|
+
}
|
|
5635
|
+
);
|
|
5636
|
+
}
|
|
5637
|
+
);
|
|
5638
|
+
var BUILT_IN_FONTS = [
|
|
5639
|
+
{ name: "System Sans", family: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' },
|
|
5640
|
+
{ name: "System Serif", family: 'ui-serif, Cambria, Georgia, "Times New Roman", serif' },
|
|
5641
|
+
{ name: "System Mono", family: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
|
|
5642
|
+
{ name: "Helvetica", family: "Helvetica, Arial, sans-serif" },
|
|
5643
|
+
{ name: "Times", family: '"Times New Roman", Times, serif' },
|
|
5644
|
+
{ name: "Courier", family: '"Courier New", Courier, monospace' },
|
|
5645
|
+
{ name: "Georgia", family: 'Georgia, "Times New Roman", serif' },
|
|
5646
|
+
{ name: "Verdana", family: "Verdana, Geneva, Tahoma, sans-serif" },
|
|
5647
|
+
{ name: "Tahoma", family: "Tahoma, Geneva, Verdana, sans-serif" },
|
|
5648
|
+
{ name: "Trebuchet", family: '"Trebuchet MS", Helvetica, sans-serif' },
|
|
5649
|
+
{ name: "Garamond", family: 'Garamond, "Times New Roman", serif' },
|
|
5650
|
+
{ name: "Comic Sans", family: '"Comic Sans MS", "Comic Sans", cursive' },
|
|
5651
|
+
{ name: "Impact", family: 'Impact, "Arial Narrow", sans-serif' }
|
|
5652
|
+
];
|
|
5653
|
+
var FontPicker = forwardRef(
|
|
5654
|
+
function FontPicker2({
|
|
5655
|
+
value: valueProp,
|
|
5656
|
+
defaultValue,
|
|
5657
|
+
onValueChange,
|
|
5658
|
+
fonts = BUILT_IN_FONTS,
|
|
5659
|
+
placeholder = "Select font\u2026",
|
|
5660
|
+
previewText = "The quick brown fox",
|
|
5661
|
+
disabled,
|
|
5662
|
+
name,
|
|
5663
|
+
className,
|
|
5664
|
+
...rest
|
|
5665
|
+
}, ref) {
|
|
5666
|
+
const [value, setValue] = useControlled({
|
|
5667
|
+
controlled: valueProp,
|
|
5668
|
+
default: defaultValue ?? fonts[0]?.family ?? "",
|
|
5669
|
+
onChange: onValueChange
|
|
5670
|
+
});
|
|
5671
|
+
const [open, setOpen] = useState(false);
|
|
5672
|
+
const [query, setQuery] = useState("");
|
|
5673
|
+
const filtered = useMemo(() => {
|
|
5674
|
+
if (!query) return fonts;
|
|
5675
|
+
const q = query.toLowerCase();
|
|
5676
|
+
return fonts.filter((f) => f.name.toLowerCase().includes(q));
|
|
5677
|
+
}, [fonts, query]);
|
|
5678
|
+
const current = fonts.find((f) => f.family === value);
|
|
5679
|
+
return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-block", className), ...rest, children: [
|
|
5680
|
+
/* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
5681
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
5682
|
+
"button",
|
|
5683
|
+
{
|
|
5684
|
+
type: "button",
|
|
5685
|
+
disabled,
|
|
5686
|
+
"aria-haspopup": "listbox",
|
|
5687
|
+
"aria-expanded": open,
|
|
5688
|
+
className: cn(
|
|
5689
|
+
"inline-flex h-10 min-w-[14rem] items-center justify-between gap-2 rounded-md border border-input bg-background px-3 text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60"
|
|
5690
|
+
),
|
|
5691
|
+
children: [
|
|
5692
|
+
/* @__PURE__ */ jsx("span", { style: { fontFamily: value }, className: "truncate text-foreground", children: current?.name ?? placeholder }),
|
|
5693
|
+
/* @__PURE__ */ jsx(Icon, { icon: ChevronDown, size: 14, className: "text-muted-foreground" })
|
|
5694
|
+
]
|
|
5695
|
+
}
|
|
5696
|
+
) }),
|
|
5697
|
+
/* @__PURE__ */ jsxs(PopoverContent, { bare: true, className: "w-[20rem] p-2", children: [
|
|
5698
|
+
/* @__PURE__ */ jsx(
|
|
5699
|
+
"input",
|
|
5700
|
+
{
|
|
5701
|
+
type: "search",
|
|
5702
|
+
autoFocus: true,
|
|
5703
|
+
value: query,
|
|
5704
|
+
placeholder: "Search fonts\u2026",
|
|
5705
|
+
onChange: (e) => setQuery(e.target.value),
|
|
5706
|
+
className: "mb-2 h-8 w-full rounded-md border border-input bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
5707
|
+
}
|
|
5708
|
+
),
|
|
5709
|
+
/* @__PURE__ */ jsxs("div", { role: "listbox", "aria-label": "Fonts", className: "max-h-72 overflow-y-auto", children: [
|
|
5710
|
+
filtered.map((f) => {
|
|
5711
|
+
const selected = f.family === value;
|
|
5712
|
+
return /* @__PURE__ */ jsxs(
|
|
5713
|
+
"button",
|
|
5714
|
+
{
|
|
5715
|
+
type: "button",
|
|
5716
|
+
role: "option",
|
|
5717
|
+
"aria-selected": selected,
|
|
5718
|
+
onClick: () => {
|
|
5719
|
+
setValue(f.family);
|
|
5720
|
+
setOpen(false);
|
|
5721
|
+
},
|
|
5722
|
+
className: cn(
|
|
5723
|
+
"flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted",
|
|
5724
|
+
selected && "bg-primary-soft text-primary-soft-foreground"
|
|
5725
|
+
),
|
|
5726
|
+
children: [
|
|
5727
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium", children: f.name }),
|
|
5728
|
+
/* @__PURE__ */ jsx("span", { style: { fontFamily: f.family }, className: "ml-3 truncate text-xs text-muted-foreground", children: f.sample ?? previewText })
|
|
5729
|
+
]
|
|
5730
|
+
},
|
|
5731
|
+
f.name
|
|
5732
|
+
);
|
|
5733
|
+
}),
|
|
5734
|
+
filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2 py-6 text-center text-xs text-muted-foreground", children: "No fonts match." })
|
|
5735
|
+
] })
|
|
5736
|
+
] })
|
|
5737
|
+
] }),
|
|
5738
|
+
name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value })
|
|
5739
|
+
] });
|
|
5740
|
+
}
|
|
5741
|
+
);
|
|
5742
|
+
var WEEKDAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
5743
|
+
var MONTH_NAMES = [
|
|
5744
|
+
"January",
|
|
5745
|
+
"February",
|
|
5746
|
+
"March",
|
|
5747
|
+
"April",
|
|
5748
|
+
"May",
|
|
5749
|
+
"June",
|
|
5750
|
+
"July",
|
|
5751
|
+
"August",
|
|
5752
|
+
"September",
|
|
5753
|
+
"October",
|
|
5754
|
+
"November",
|
|
5755
|
+
"December"
|
|
5756
|
+
];
|
|
5757
|
+
function parseField(raw, min, max) {
|
|
5758
|
+
if (raw === "*") return { raw, kind: "every" };
|
|
5759
|
+
if (/^\*\/(\d+)$/.test(raw)) {
|
|
5760
|
+
const step = Number(raw.slice(2));
|
|
5761
|
+
if (step < 1 || step > max) return { raw, kind: "invalid" };
|
|
5762
|
+
return { raw, kind: "step", step };
|
|
5763
|
+
}
|
|
5764
|
+
if (/^(\d+)-(\d+)$/.test(raw)) {
|
|
5765
|
+
const [a, b] = raw.split("-").map(Number);
|
|
5766
|
+
if (a == null || b == null || a < min || b > max || a > b) return { raw, kind: "invalid" };
|
|
5767
|
+
return { raw, kind: "range", range: [a, b] };
|
|
5768
|
+
}
|
|
5769
|
+
if (/^\d+(,\d+)+$/.test(raw)) {
|
|
5770
|
+
const parts = raw.split(",").map(Number);
|
|
5771
|
+
if (parts.some((p) => p < min || p > max)) return { raw, kind: "invalid" };
|
|
5772
|
+
return { raw, kind: "list", value: parts };
|
|
5773
|
+
}
|
|
5774
|
+
if (/^\d+$/.test(raw)) {
|
|
5775
|
+
const n = Number(raw);
|
|
5776
|
+
if (n < min || n > max) return { raw, kind: "invalid" };
|
|
5777
|
+
return { raw, kind: "specific", value: n };
|
|
5778
|
+
}
|
|
5779
|
+
return { raw, kind: "invalid" };
|
|
5780
|
+
}
|
|
5781
|
+
function describeField(field, names, unit = "", plural = "") {
|
|
5782
|
+
if (field.kind === "every") return "*";
|
|
5783
|
+
if (field.kind === "invalid") return "?";
|
|
5784
|
+
if (field.kind === "step" && field.step != null) return `every ${field.step} ${plural || unit + "s"}`;
|
|
5785
|
+
if (field.kind === "range" && field.range) {
|
|
5786
|
+
const [a, b] = field.range;
|
|
5787
|
+
const aLabel = names?.[a] ?? a;
|
|
5788
|
+
const bLabel = names?.[b] ?? b;
|
|
5789
|
+
return `${aLabel} through ${bLabel}`;
|
|
5790
|
+
}
|
|
5791
|
+
if (field.kind === "list" && Array.isArray(field.value)) {
|
|
5792
|
+
return field.value.map((v) => names?.[v] ?? v).join(", ");
|
|
5793
|
+
}
|
|
5794
|
+
if (field.kind === "specific" && typeof field.value === "number") {
|
|
5795
|
+
return String(names?.[field.value] ?? field.value);
|
|
5796
|
+
}
|
|
5797
|
+
return field.raw;
|
|
5798
|
+
}
|
|
5799
|
+
function parseCron(value) {
|
|
5800
|
+
const parts = value.trim().split(/\s+/);
|
|
5801
|
+
if (parts.length !== 5) return "Cron expressions must have 5 fields (min hour dom month dow).";
|
|
5802
|
+
const [minRaw, hourRaw, domRaw, monRaw, dowRaw] = parts;
|
|
5803
|
+
const minute = parseField(minRaw, 0, 59);
|
|
5804
|
+
const hour = parseField(hourRaw, 0, 23);
|
|
5805
|
+
const dom = parseField(domRaw, 1, 31);
|
|
5806
|
+
const month = parseField(monRaw, 1, 12);
|
|
5807
|
+
const dow = parseField(dowRaw, 0, 6);
|
|
5808
|
+
if ([minute, hour, dom, month, dow].some((f) => f.kind === "invalid")) {
|
|
5809
|
+
return "Invalid cron expression.";
|
|
5810
|
+
}
|
|
5811
|
+
if (minute.kind === "step" && hour.kind === "every" && dom.kind === "every" && month.kind === "every" && dow.kind === "every") {
|
|
5812
|
+
return `Every ${minute.step} minutes`;
|
|
5813
|
+
}
|
|
5814
|
+
if (minute.kind === "every" && hour.kind === "step" && dom.kind === "every" && month.kind === "every" && dow.kind === "every") {
|
|
5815
|
+
return `Every ${hour.step} hours`;
|
|
5816
|
+
}
|
|
5817
|
+
if (minute.kind === "specific" && hour.kind === "specific" && dom.kind === "every" && month.kind === "every" && dow.kind === "every") {
|
|
5818
|
+
return `Every day at ${String(hour.value).padStart(2, "0")}:${String(minute.value).padStart(2, "0")}`;
|
|
5819
|
+
}
|
|
5820
|
+
if (minute.kind === "specific" && hour.kind === "specific" && dom.kind === "every" && month.kind === "every" && (dow.kind === "list" || dow.kind === "specific")) {
|
|
5821
|
+
return `At ${String(hour.value).padStart(2, "0")}:${String(minute.value).padStart(2, "0")} on ${describeField(dow, WEEKDAY_NAMES)}`;
|
|
5822
|
+
}
|
|
5823
|
+
if (minute.kind === "every" && hour.kind === "every" && dom.kind === "every" && month.kind === "every" && dow.kind === "every") {
|
|
5824
|
+
return "Every minute";
|
|
5825
|
+
}
|
|
5826
|
+
const parts2 = [];
|
|
5827
|
+
if (minute.kind !== "every") parts2.push(`minute: ${describeField(minute, void 0, "minute")}`);
|
|
5828
|
+
if (hour.kind !== "every") parts2.push(`hour: ${describeField(hour, void 0, "hour")}`);
|
|
5829
|
+
if (dom.kind !== "every") parts2.push(`day: ${describeField(dom)}`);
|
|
5830
|
+
if (month.kind !== "every") parts2.push(`month: ${describeField(month, ["", ...MONTH_NAMES])}`);
|
|
5831
|
+
if (dow.kind !== "every") parts2.push(`weekday: ${describeField(dow, WEEKDAY_NAMES)}`);
|
|
5832
|
+
return parts2.length === 0 ? "Every minute" : parts2.join(" \xB7 ");
|
|
5833
|
+
}
|
|
5834
|
+
var CronInput = forwardRef(
|
|
5835
|
+
function CronInput2({
|
|
5836
|
+
value: valueProp,
|
|
5837
|
+
defaultValue,
|
|
5838
|
+
onValueChange,
|
|
5839
|
+
placeholder = "* * * * *",
|
|
5840
|
+
invalid,
|
|
5841
|
+
size,
|
|
5842
|
+
state,
|
|
5843
|
+
showPreview = true,
|
|
5844
|
+
disabled,
|
|
5845
|
+
readOnly,
|
|
5846
|
+
name,
|
|
5847
|
+
className,
|
|
5848
|
+
...rest
|
|
5849
|
+
}, ref) {
|
|
5850
|
+
const [value, setValue] = useControlled({
|
|
5851
|
+
controlled: valueProp,
|
|
5852
|
+
default: defaultValue ?? "*/5 * * * *",
|
|
5853
|
+
onChange: onValueChange
|
|
5854
|
+
});
|
|
5855
|
+
const preview = useMemo(() => parseCron(value), [value]);
|
|
5856
|
+
const isError = invalid || preview.startsWith("Invalid") || preview.startsWith("Cron");
|
|
5857
|
+
const inputState = isError ? "invalid" : state ?? "default";
|
|
5858
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
|
|
5859
|
+
/* @__PURE__ */ jsx(
|
|
5860
|
+
"input",
|
|
5861
|
+
{
|
|
5862
|
+
...rest,
|
|
5863
|
+
ref,
|
|
5864
|
+
type: "text",
|
|
5865
|
+
value,
|
|
5866
|
+
placeholder,
|
|
5867
|
+
disabled,
|
|
5868
|
+
readOnly,
|
|
5869
|
+
"aria-invalid": isError || void 0,
|
|
5870
|
+
spellCheck: false,
|
|
5871
|
+
onChange: (e) => setValue(e.target.value),
|
|
5872
|
+
className: cn(inputBaseVariants({ size, state: inputState }), "font-mono")
|
|
5873
|
+
}
|
|
5874
|
+
),
|
|
5875
|
+
showPreview && /* @__PURE__ */ jsx(
|
|
5876
|
+
"div",
|
|
5877
|
+
{
|
|
5878
|
+
"aria-live": "polite",
|
|
5879
|
+
className: cn(
|
|
5880
|
+
"px-1 text-xs",
|
|
5881
|
+
isError ? "text-destructive" : "text-muted-foreground"
|
|
5882
|
+
),
|
|
5883
|
+
children: preview
|
|
5884
|
+
}
|
|
5885
|
+
),
|
|
5886
|
+
name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value })
|
|
5887
|
+
] });
|
|
5888
|
+
}
|
|
5889
|
+
);
|
|
5890
|
+
var DEFAULT_GRADIENT = {
|
|
5891
|
+
kind: "linear",
|
|
5892
|
+
angle: 90,
|
|
5893
|
+
stops: [
|
|
5894
|
+
{ color: "#3b82f6", position: 0 },
|
|
5895
|
+
{ color: "#a855f7", position: 100 }
|
|
5896
|
+
]
|
|
5897
|
+
};
|
|
5898
|
+
function gradientToCss(g) {
|
|
5899
|
+
const stops = [...g.stops].sort((a, b) => a.position - b.position);
|
|
5900
|
+
const stopsStr = stops.map((s) => `${s.color} ${s.position}%`).join(", ");
|
|
5901
|
+
if (g.kind === "linear") return `linear-gradient(${g.angle}deg, ${stopsStr})`;
|
|
5902
|
+
if (g.kind === "radial") return `radial-gradient(circle, ${stopsStr})`;
|
|
5903
|
+
return `conic-gradient(from ${g.angle}deg, ${stopsStr})`;
|
|
5904
|
+
}
|
|
5905
|
+
var GradientPicker = forwardRef(
|
|
5906
|
+
function GradientPicker2({ value: valueProp, defaultValue, onValueChange, disabled, name, className, ...rest }, ref) {
|
|
5907
|
+
const [gradient, setGradient] = useControlled({
|
|
5908
|
+
controlled: valueProp,
|
|
5909
|
+
default: defaultValue ?? DEFAULT_GRADIENT,
|
|
5910
|
+
onChange: onValueChange
|
|
5911
|
+
});
|
|
5912
|
+
const css = useMemo(() => gradientToCss(gradient), [gradient]);
|
|
5913
|
+
const update = (patch) => setGradient({ ...gradient, ...patch });
|
|
5914
|
+
const updateStop = (i, patch) => setGradient({
|
|
5915
|
+
...gradient,
|
|
5916
|
+
stops: gradient.stops.map((s, idx) => idx === i ? { ...s, ...patch } : s)
|
|
5917
|
+
});
|
|
5918
|
+
const addStop = () => {
|
|
5919
|
+
const last = gradient.stops[gradient.stops.length - 1];
|
|
5920
|
+
const newPos = last ? Math.min(100, last.position + 25) : 50;
|
|
5921
|
+
setGradient({
|
|
5922
|
+
...gradient,
|
|
5923
|
+
stops: [...gradient.stops, { color: "#ffffff", position: newPos }]
|
|
5924
|
+
});
|
|
5925
|
+
};
|
|
5926
|
+
const removeStop = (i) => {
|
|
5927
|
+
if (gradient.stops.length <= 2) return;
|
|
5928
|
+
setGradient({ ...gradient, stops: gradient.stops.filter((_, idx) => idx !== i) });
|
|
5929
|
+
};
|
|
5930
|
+
return /* @__PURE__ */ jsxs(
|
|
5931
|
+
"div",
|
|
5932
|
+
{
|
|
5933
|
+
ref,
|
|
5934
|
+
className: cn(
|
|
5935
|
+
"flex flex-col gap-3 rounded-md border border-border bg-card p-3 text-card-foreground shadow-sm",
|
|
5936
|
+
disabled && "opacity-60",
|
|
5937
|
+
className
|
|
5938
|
+
),
|
|
5939
|
+
...rest,
|
|
5940
|
+
children: [
|
|
5941
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
|
|
5942
|
+
/* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "Gradient kind", className: "flex items-center gap-0.5 rounded-md bg-muted/40 p-0.5 ring-1 ring-border", children: ["linear", "radial", "conic"].map((k) => /* @__PURE__ */ jsx(
|
|
5943
|
+
"button",
|
|
5944
|
+
{
|
|
5945
|
+
type: "button",
|
|
5946
|
+
role: "radio",
|
|
5947
|
+
"aria-checked": gradient.kind === k,
|
|
5948
|
+
disabled,
|
|
5949
|
+
onClick: () => update({ kind: k }),
|
|
5950
|
+
className: cn(
|
|
5951
|
+
"inline-flex h-6 items-center rounded px-2 text-xs font-medium transition-colors",
|
|
5952
|
+
gradient.kind === k ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
|
|
5953
|
+
),
|
|
5954
|
+
children: k
|
|
5955
|
+
},
|
|
5956
|
+
k
|
|
5957
|
+
)) }),
|
|
5958
|
+
gradient.kind !== "radial" && /* @__PURE__ */ jsxs("label", { className: "ml-auto flex items-center gap-2 text-xs text-muted-foreground", children: [
|
|
5959
|
+
"Angle",
|
|
5960
|
+
/* @__PURE__ */ jsx(
|
|
5961
|
+
"input",
|
|
5962
|
+
{
|
|
5963
|
+
type: "number",
|
|
5964
|
+
min: 0,
|
|
5965
|
+
max: 360,
|
|
5966
|
+
value: gradient.angle,
|
|
5967
|
+
disabled,
|
|
5968
|
+
onChange: (e) => update({ angle: Math.max(0, Math.min(360, Number(e.target.value) || 0)) }),
|
|
5969
|
+
className: cn(inputBaseVariants({ size: "sm" }), "w-20")
|
|
5970
|
+
}
|
|
5971
|
+
),
|
|
5972
|
+
"\xB0"
|
|
5973
|
+
] })
|
|
5974
|
+
] }),
|
|
5975
|
+
/* @__PURE__ */ jsx(
|
|
5976
|
+
"div",
|
|
5977
|
+
{
|
|
5978
|
+
"aria-hidden": "true",
|
|
5979
|
+
className: "h-12 rounded-md border border-border",
|
|
5980
|
+
style: { background: css }
|
|
5981
|
+
}
|
|
5982
|
+
),
|
|
5983
|
+
/* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: gradient.stops.map((stop, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
|
|
5984
|
+
/* @__PURE__ */ jsx(
|
|
5985
|
+
"input",
|
|
5986
|
+
{
|
|
5987
|
+
type: "color",
|
|
5988
|
+
value: stop.color,
|
|
5989
|
+
disabled,
|
|
5990
|
+
onChange: (e) => updateStop(i, { color: e.target.value }),
|
|
5991
|
+
className: "h-7 w-10 cursor-pointer rounded-sm border border-input bg-background"
|
|
5992
|
+
}
|
|
5993
|
+
),
|
|
5994
|
+
/* @__PURE__ */ jsx(
|
|
5995
|
+
"input",
|
|
5996
|
+
{
|
|
5997
|
+
type: "text",
|
|
5998
|
+
value: stop.color,
|
|
5999
|
+
disabled,
|
|
6000
|
+
onChange: (e) => updateStop(i, { color: e.target.value }),
|
|
6001
|
+
className: cn(inputBaseVariants({ size: "sm" }), "flex-1 font-mono")
|
|
6002
|
+
}
|
|
6003
|
+
),
|
|
6004
|
+
/* @__PURE__ */ jsx(
|
|
6005
|
+
"input",
|
|
6006
|
+
{
|
|
6007
|
+
type: "number",
|
|
6008
|
+
min: 0,
|
|
6009
|
+
max: 100,
|
|
6010
|
+
value: stop.position,
|
|
6011
|
+
disabled,
|
|
6012
|
+
onChange: (e) => updateStop(i, { position: Math.max(0, Math.min(100, Number(e.target.value) || 0)) }),
|
|
6013
|
+
className: cn(inputBaseVariants({ size: "sm" }), "w-16")
|
|
6014
|
+
}
|
|
6015
|
+
),
|
|
6016
|
+
/* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "%" }),
|
|
6017
|
+
/* @__PURE__ */ jsx(
|
|
6018
|
+
"button",
|
|
6019
|
+
{
|
|
6020
|
+
type: "button",
|
|
6021
|
+
"aria-label": "Remove stop",
|
|
6022
|
+
disabled: disabled || gradient.stops.length <= 2,
|
|
6023
|
+
onClick: () => removeStop(i),
|
|
6024
|
+
className: "inline-flex h-7 w-7 items-center justify-center rounded text-destructive hover:bg-destructive-soft disabled:pointer-events-none disabled:opacity-40",
|
|
6025
|
+
children: /* @__PURE__ */ jsx(Icon, { icon: Trash, size: 12 })
|
|
6026
|
+
}
|
|
6027
|
+
)
|
|
6028
|
+
] }, i)) }),
|
|
6029
|
+
/* @__PURE__ */ jsxs(
|
|
6030
|
+
"button",
|
|
6031
|
+
{
|
|
6032
|
+
type: "button",
|
|
6033
|
+
disabled,
|
|
6034
|
+
onClick: addStop,
|
|
6035
|
+
className: "inline-flex h-8 w-full items-center justify-center gap-1 rounded-md border border-dashed border-border text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
6036
|
+
children: [
|
|
6037
|
+
/* @__PURE__ */ jsx(Icon, { icon: Plus, size: 12 }),
|
|
6038
|
+
" Add stop"
|
|
6039
|
+
]
|
|
6040
|
+
}
|
|
6041
|
+
),
|
|
6042
|
+
/* @__PURE__ */ jsx("code", { className: "block break-all rounded-md bg-muted/40 px-2 py-1.5 text-[10px] text-muted-foreground", children: css }),
|
|
6043
|
+
name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: css })
|
|
6044
|
+
]
|
|
6045
|
+
}
|
|
6046
|
+
);
|
|
6047
|
+
}
|
|
6048
|
+
);
|
|
6049
|
+
var COUNTRIES = [
|
|
6050
|
+
{
|
|
6051
|
+
iso: "US",
|
|
6052
|
+
name: "United States",
|
|
6053
|
+
regionLabel: "State",
|
|
6054
|
+
postalLabel: "ZIP code",
|
|
6055
|
+
regionOptions: [
|
|
6056
|
+
"AL",
|
|
6057
|
+
"AK",
|
|
6058
|
+
"AZ",
|
|
6059
|
+
"AR",
|
|
6060
|
+
"CA",
|
|
6061
|
+
"CO",
|
|
6062
|
+
"CT",
|
|
6063
|
+
"DE",
|
|
6064
|
+
"FL",
|
|
6065
|
+
"GA",
|
|
6066
|
+
"HI",
|
|
6067
|
+
"ID",
|
|
6068
|
+
"IL",
|
|
6069
|
+
"IN",
|
|
6070
|
+
"IA",
|
|
6071
|
+
"KS",
|
|
6072
|
+
"KY",
|
|
6073
|
+
"LA",
|
|
6074
|
+
"ME",
|
|
6075
|
+
"MD",
|
|
6076
|
+
"MA",
|
|
6077
|
+
"MI",
|
|
6078
|
+
"MN",
|
|
6079
|
+
"MS",
|
|
6080
|
+
"MO",
|
|
6081
|
+
"MT",
|
|
6082
|
+
"NE",
|
|
6083
|
+
"NV",
|
|
6084
|
+
"NH",
|
|
6085
|
+
"NJ",
|
|
6086
|
+
"NM",
|
|
6087
|
+
"NY",
|
|
6088
|
+
"NC",
|
|
6089
|
+
"ND",
|
|
6090
|
+
"OH",
|
|
6091
|
+
"OK",
|
|
6092
|
+
"OR",
|
|
6093
|
+
"PA",
|
|
6094
|
+
"RI",
|
|
6095
|
+
"SC",
|
|
6096
|
+
"SD",
|
|
6097
|
+
"TN",
|
|
6098
|
+
"TX",
|
|
6099
|
+
"UT",
|
|
6100
|
+
"VT",
|
|
6101
|
+
"VA",
|
|
6102
|
+
"WA",
|
|
6103
|
+
"WV",
|
|
6104
|
+
"WI",
|
|
6105
|
+
"WY"
|
|
6106
|
+
].map((s) => ({ value: s, label: s }))
|
|
6107
|
+
},
|
|
6108
|
+
{
|
|
6109
|
+
iso: "CA",
|
|
6110
|
+
name: "Canada",
|
|
6111
|
+
regionLabel: "Province",
|
|
6112
|
+
postalLabel: "Postal code",
|
|
6113
|
+
regionOptions: ["AB", "BC", "MB", "NB", "NL", "NS", "NT", "NU", "ON", "PE", "QC", "SK", "YT"].map(
|
|
6114
|
+
(s) => ({ value: s, label: s })
|
|
6115
|
+
)
|
|
6116
|
+
},
|
|
6117
|
+
{ iso: "GB", name: "United Kingdom", regionLabel: "County", postalLabel: "Postcode" },
|
|
6118
|
+
{ iso: "DE", name: "Germany", regionLabel: "Bundesland", postalLabel: "PLZ" },
|
|
6119
|
+
{ iso: "FR", name: "France", regionLabel: "R\xE9gion", postalLabel: "Code postal" },
|
|
6120
|
+
{ iso: "AU", name: "Australia", regionLabel: "State", postalLabel: "Postcode" },
|
|
6121
|
+
{ iso: "JP", name: "Japan", regionLabel: "Prefecture", postalLabel: "\u3012" }
|
|
6122
|
+
];
|
|
6123
|
+
var FALLBACK = {
|
|
6124
|
+
iso: "XX",
|
|
6125
|
+
name: "Other",
|
|
6126
|
+
regionLabel: "Region",
|
|
6127
|
+
postalLabel: "Postal code"
|
|
6128
|
+
};
|
|
6129
|
+
function configFor(iso) {
|
|
6130
|
+
return COUNTRIES.find((c) => c.iso === iso) ?? FALLBACK;
|
|
6131
|
+
}
|
|
6132
|
+
var EMPTY = { country: "US", line1: "", city: "", region: "", postalCode: "" };
|
|
6133
|
+
var AddressForm = forwardRef(
|
|
6134
|
+
function AddressForm2({ value: valueProp, defaultValue, onValueChange, disabled, readOnly, compact, name, className, ...rest }, ref) {
|
|
6135
|
+
const [address, setAddress] = useControlled({
|
|
6136
|
+
controlled: valueProp,
|
|
6137
|
+
default: defaultValue ?? EMPTY,
|
|
6138
|
+
onChange: onValueChange
|
|
6139
|
+
});
|
|
6140
|
+
const config = configFor(address.country);
|
|
6141
|
+
const ids = {
|
|
6142
|
+
country: useId$1(),
|
|
6143
|
+
line1: useId$1(),
|
|
6144
|
+
line2: useId$1(),
|
|
6145
|
+
city: useId$1(),
|
|
6146
|
+
region: useId$1(),
|
|
6147
|
+
postal: useId$1()
|
|
6148
|
+
};
|
|
6149
|
+
const update = (patch) => setAddress({ ...address, ...patch });
|
|
6150
|
+
return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-3", className), ...rest, children: [
|
|
6151
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
6152
|
+
/* @__PURE__ */ jsx("label", { htmlFor: ids.country, className: "text-xs font-medium text-foreground", children: "Country" }),
|
|
6153
|
+
/* @__PURE__ */ jsxs(
|
|
6154
|
+
"select",
|
|
6155
|
+
{
|
|
6156
|
+
id: ids.country,
|
|
6157
|
+
value: address.country,
|
|
6158
|
+
disabled: disabled || readOnly,
|
|
6159
|
+
onChange: (e) => update({ country: e.target.value, region: "" }),
|
|
6160
|
+
className: cn(inputBaseVariants({ size: "md" })),
|
|
6161
|
+
children: [
|
|
6162
|
+
COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.iso, children: c.name }, c.iso)),
|
|
6163
|
+
/* @__PURE__ */ jsx("option", { value: "XX", children: "Other" })
|
|
6164
|
+
]
|
|
6165
|
+
}
|
|
6166
|
+
)
|
|
6167
|
+
] }),
|
|
6168
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
6169
|
+
/* @__PURE__ */ jsx("label", { htmlFor: ids.line1, className: "text-xs font-medium text-foreground", children: "Address line 1" }),
|
|
6170
|
+
/* @__PURE__ */ jsx(
|
|
6171
|
+
"input",
|
|
6172
|
+
{
|
|
6173
|
+
id: ids.line1,
|
|
6174
|
+
type: "text",
|
|
6175
|
+
autoComplete: "address-line1",
|
|
6176
|
+
value: address.line1,
|
|
6177
|
+
disabled,
|
|
6178
|
+
readOnly,
|
|
6179
|
+
onChange: (e) => update({ line1: e.target.value }),
|
|
6180
|
+
className: cn(inputBaseVariants({ size: "md" }))
|
|
6181
|
+
}
|
|
6182
|
+
)
|
|
6183
|
+
] }),
|
|
6184
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
6185
|
+
/* @__PURE__ */ jsxs("label", { htmlFor: ids.line2, className: "text-xs font-medium text-muted-foreground", children: [
|
|
6186
|
+
"Address line 2 ",
|
|
6187
|
+
/* @__PURE__ */ jsx("span", { className: "text-[10px]", children: "(optional)" })
|
|
6188
|
+
] }),
|
|
6189
|
+
/* @__PURE__ */ jsx(
|
|
6190
|
+
"input",
|
|
6191
|
+
{
|
|
6192
|
+
id: ids.line2,
|
|
6193
|
+
type: "text",
|
|
6194
|
+
autoComplete: "address-line2",
|
|
6195
|
+
value: address.line2 ?? "",
|
|
6196
|
+
disabled,
|
|
6197
|
+
readOnly,
|
|
6198
|
+
onChange: (e) => update({ line2: e.target.value }),
|
|
6199
|
+
className: cn(inputBaseVariants({ size: "md" }))
|
|
6200
|
+
}
|
|
6201
|
+
)
|
|
6202
|
+
] }),
|
|
6203
|
+
/* @__PURE__ */ jsxs("div", { className: cn("grid gap-3", compact ? "grid-cols-1" : "grid-cols-3"), children: [
|
|
6204
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
6205
|
+
/* @__PURE__ */ jsx("label", { htmlFor: ids.city, className: "text-xs font-medium text-foreground", children: "City" }),
|
|
6206
|
+
/* @__PURE__ */ jsx(
|
|
6207
|
+
"input",
|
|
6208
|
+
{
|
|
6209
|
+
id: ids.city,
|
|
6210
|
+
type: "text",
|
|
6211
|
+
autoComplete: "address-level2",
|
|
6212
|
+
value: address.city,
|
|
6213
|
+
disabled,
|
|
6214
|
+
readOnly,
|
|
6215
|
+
onChange: (e) => update({ city: e.target.value }),
|
|
6216
|
+
className: cn(inputBaseVariants({ size: "md" }))
|
|
6217
|
+
}
|
|
6218
|
+
)
|
|
6219
|
+
] }),
|
|
6220
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
6221
|
+
/* @__PURE__ */ jsx("label", { htmlFor: ids.region, className: "text-xs font-medium text-foreground", children: config.regionLabel }),
|
|
6222
|
+
config.regionOptions ? /* @__PURE__ */ jsxs(
|
|
6223
|
+
"select",
|
|
6224
|
+
{
|
|
6225
|
+
id: ids.region,
|
|
6226
|
+
value: address.region,
|
|
6227
|
+
disabled: disabled || readOnly,
|
|
6228
|
+
onChange: (e) => update({ region: e.target.value }),
|
|
6229
|
+
className: cn(inputBaseVariants({ size: "md" })),
|
|
6230
|
+
children: [
|
|
6231
|
+
/* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
|
|
6232
|
+
config.regionOptions.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
|
|
6233
|
+
]
|
|
6234
|
+
}
|
|
6235
|
+
) : /* @__PURE__ */ jsx(
|
|
6236
|
+
"input",
|
|
6237
|
+
{
|
|
6238
|
+
id: ids.region,
|
|
6239
|
+
type: "text",
|
|
6240
|
+
autoComplete: "address-level1",
|
|
6241
|
+
value: address.region,
|
|
6242
|
+
disabled,
|
|
6243
|
+
readOnly,
|
|
6244
|
+
onChange: (e) => update({ region: e.target.value }),
|
|
6245
|
+
className: cn(inputBaseVariants({ size: "md" }))
|
|
6246
|
+
}
|
|
6247
|
+
)
|
|
6248
|
+
] }),
|
|
6249
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
6250
|
+
/* @__PURE__ */ jsx("label", { htmlFor: ids.postal, className: "text-xs font-medium text-foreground", children: config.postalLabel }),
|
|
6251
|
+
/* @__PURE__ */ jsx(
|
|
6252
|
+
"input",
|
|
6253
|
+
{
|
|
6254
|
+
id: ids.postal,
|
|
6255
|
+
type: "text",
|
|
6256
|
+
autoComplete: "postal-code",
|
|
6257
|
+
value: address.postalCode,
|
|
6258
|
+
disabled,
|
|
6259
|
+
readOnly,
|
|
6260
|
+
onChange: (e) => update({ postalCode: e.target.value }),
|
|
6261
|
+
className: cn(inputBaseVariants({ size: "md" }))
|
|
6262
|
+
}
|
|
6263
|
+
)
|
|
6264
|
+
] })
|
|
6265
|
+
] }),
|
|
6266
|
+
name && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
6267
|
+
/* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}.country`, value: address.country }),
|
|
6268
|
+
/* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}.line1`, value: address.line1 }),
|
|
6269
|
+
/* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}.line2`, value: address.line2 ?? "" }),
|
|
6270
|
+
/* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}.city`, value: address.city }),
|
|
6271
|
+
/* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}.region`, value: address.region }),
|
|
6272
|
+
/* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}.postalCode`, value: address.postalCode })
|
|
6273
|
+
] })
|
|
6274
|
+
] });
|
|
6275
|
+
}
|
|
6276
|
+
);
|
|
6277
|
+
var ADDRESS_COUNTRIES = COUNTRIES;
|
|
6278
|
+
var PHONE_COUNTRIES = [
|
|
6279
|
+
{ iso: "US", name: "United States", dial: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
|
|
6280
|
+
{ iso: "CA", name: "Canada", dial: "+1", flag: "\u{1F1E8}\u{1F1E6}" },
|
|
6281
|
+
{ iso: "GB", name: "United Kingdom", dial: "+44", flag: "\u{1F1EC}\u{1F1E7}" },
|
|
6282
|
+
{ iso: "AU", name: "Australia", dial: "+61", flag: "\u{1F1E6}\u{1F1FA}" },
|
|
6283
|
+
{ iso: "DE", name: "Germany", dial: "+49", flag: "\u{1F1E9}\u{1F1EA}" },
|
|
6284
|
+
{ iso: "FR", name: "France", dial: "+33", flag: "\u{1F1EB}\u{1F1F7}" },
|
|
6285
|
+
{ iso: "ES", name: "Spain", dial: "+34", flag: "\u{1F1EA}\u{1F1F8}" },
|
|
6286
|
+
{ iso: "IT", name: "Italy", dial: "+39", flag: "\u{1F1EE}\u{1F1F9}" },
|
|
6287
|
+
{ iso: "NL", name: "Netherlands", dial: "+31", flag: "\u{1F1F3}\u{1F1F1}" },
|
|
6288
|
+
{ iso: "BE", name: "Belgium", dial: "+32", flag: "\u{1F1E7}\u{1F1EA}" },
|
|
6289
|
+
{ iso: "CH", name: "Switzerland", dial: "+41", flag: "\u{1F1E8}\u{1F1ED}" },
|
|
6290
|
+
{ iso: "AT", name: "Austria", dial: "+43", flag: "\u{1F1E6}\u{1F1F9}" },
|
|
6291
|
+
{ iso: "SE", name: "Sweden", dial: "+46", flag: "\u{1F1F8}\u{1F1EA}" },
|
|
6292
|
+
{ iso: "NO", name: "Norway", dial: "+47", flag: "\u{1F1F3}\u{1F1F4}" },
|
|
6293
|
+
{ iso: "DK", name: "Denmark", dial: "+45", flag: "\u{1F1E9}\u{1F1F0}" },
|
|
6294
|
+
{ iso: "FI", name: "Finland", dial: "+358", flag: "\u{1F1EB}\u{1F1EE}" },
|
|
6295
|
+
{ iso: "IE", name: "Ireland", dial: "+353", flag: "\u{1F1EE}\u{1F1EA}" },
|
|
6296
|
+
{ iso: "PT", name: "Portugal", dial: "+351", flag: "\u{1F1F5}\u{1F1F9}" },
|
|
6297
|
+
{ iso: "PL", name: "Poland", dial: "+48", flag: "\u{1F1F5}\u{1F1F1}" },
|
|
6298
|
+
{ iso: "CZ", name: "Czechia", dial: "+420", flag: "\u{1F1E8}\u{1F1FF}" },
|
|
6299
|
+
{ iso: "GR", name: "Greece", dial: "+30", flag: "\u{1F1EC}\u{1F1F7}" },
|
|
6300
|
+
{ iso: "TR", name: "T\xFCrkiye", dial: "+90", flag: "\u{1F1F9}\u{1F1F7}" },
|
|
6301
|
+
{ iso: "RU", name: "Russia", dial: "+7", flag: "\u{1F1F7}\u{1F1FA}" },
|
|
6302
|
+
{ iso: "UA", name: "Ukraine", dial: "+380", flag: "\u{1F1FA}\u{1F1E6}" },
|
|
6303
|
+
{ iso: "IL", name: "Israel", dial: "+972", flag: "\u{1F1EE}\u{1F1F1}" },
|
|
6304
|
+
{ iso: "AE", name: "UAE", dial: "+971", flag: "\u{1F1E6}\u{1F1EA}" },
|
|
6305
|
+
{ iso: "SA", name: "Saudi Arabia", dial: "+966", flag: "\u{1F1F8}\u{1F1E6}" },
|
|
6306
|
+
{ iso: "EG", name: "Egypt", dial: "+20", flag: "\u{1F1EA}\u{1F1EC}" },
|
|
6307
|
+
{ iso: "ZA", name: "South Africa", dial: "+27", flag: "\u{1F1FF}\u{1F1E6}" },
|
|
6308
|
+
{ iso: "NG", name: "Nigeria", dial: "+234", flag: "\u{1F1F3}\u{1F1EC}" },
|
|
6309
|
+
{ iso: "KE", name: "Kenya", dial: "+254", flag: "\u{1F1F0}\u{1F1EA}" },
|
|
6310
|
+
{ iso: "IN", name: "India", dial: "+91", flag: "\u{1F1EE}\u{1F1F3}" },
|
|
6311
|
+
{ iso: "PK", name: "Pakistan", dial: "+92", flag: "\u{1F1F5}\u{1F1F0}" },
|
|
6312
|
+
{ iso: "BD", name: "Bangladesh", dial: "+880", flag: "\u{1F1E7}\u{1F1E9}" },
|
|
6313
|
+
{ iso: "SG", name: "Singapore", dial: "+65", flag: "\u{1F1F8}\u{1F1EC}" },
|
|
6314
|
+
{ iso: "MY", name: "Malaysia", dial: "+60", flag: "\u{1F1F2}\u{1F1FE}" },
|
|
6315
|
+
{ iso: "TH", name: "Thailand", dial: "+66", flag: "\u{1F1F9}\u{1F1ED}" },
|
|
6316
|
+
{ iso: "VN", name: "Vietnam", dial: "+84", flag: "\u{1F1FB}\u{1F1F3}" },
|
|
6317
|
+
{ iso: "PH", name: "Philippines", dial: "+63", flag: "\u{1F1F5}\u{1F1ED}" },
|
|
6318
|
+
{ iso: "ID", name: "Indonesia", dial: "+62", flag: "\u{1F1EE}\u{1F1E9}" },
|
|
6319
|
+
{ iso: "JP", name: "Japan", dial: "+81", flag: "\u{1F1EF}\u{1F1F5}" },
|
|
6320
|
+
{ iso: "KR", name: "South Korea", dial: "+82", flag: "\u{1F1F0}\u{1F1F7}" },
|
|
6321
|
+
{ iso: "CN", name: "China", dial: "+86", flag: "\u{1F1E8}\u{1F1F3}" },
|
|
6322
|
+
{ iso: "HK", name: "Hong Kong", dial: "+852", flag: "\u{1F1ED}\u{1F1F0}" },
|
|
6323
|
+
{ iso: "TW", name: "Taiwan", dial: "+886", flag: "\u{1F1F9}\u{1F1FC}" },
|
|
6324
|
+
{ iso: "NZ", name: "New Zealand", dial: "+64", flag: "\u{1F1F3}\u{1F1FF}" },
|
|
6325
|
+
{ iso: "BR", name: "Brazil", dial: "+55", flag: "\u{1F1E7}\u{1F1F7}" },
|
|
6326
|
+
{ iso: "AR", name: "Argentina", dial: "+54", flag: "\u{1F1E6}\u{1F1F7}" },
|
|
6327
|
+
{ iso: "CL", name: "Chile", dial: "+56", flag: "\u{1F1E8}\u{1F1F1}" },
|
|
6328
|
+
{ iso: "CO", name: "Colombia", dial: "+57", flag: "\u{1F1E8}\u{1F1F4}" },
|
|
6329
|
+
{ iso: "MX", name: "Mexico", dial: "+52", flag: "\u{1F1F2}\u{1F1FD}" }
|
|
6330
|
+
];
|
|
6331
|
+
function splitE164(value, defaultIso) {
|
|
6332
|
+
if (!value) return { iso: defaultIso, national: "" };
|
|
6333
|
+
const sorted = [...PHONE_COUNTRIES].sort((a, b) => b.dial.length - a.dial.length);
|
|
6334
|
+
for (const c of sorted) {
|
|
6335
|
+
if (value.startsWith(c.dial)) {
|
|
6336
|
+
return { iso: c.iso, national: value.slice(c.dial.length).replace(/\D/g, "") };
|
|
6337
|
+
}
|
|
6338
|
+
}
|
|
6339
|
+
return { iso: defaultIso, national: value.replace(/\D/g, "") };
|
|
6340
|
+
}
|
|
6341
|
+
var PhoneInput = forwardRef(
|
|
6342
|
+
function PhoneInput2({
|
|
6343
|
+
value: valueProp,
|
|
6344
|
+
defaultValue,
|
|
6345
|
+
onValueChange,
|
|
6346
|
+
defaultCountry = "US",
|
|
6347
|
+
disabled,
|
|
6348
|
+
readOnly,
|
|
6349
|
+
invalid,
|
|
6350
|
+
placeholder = "(555) 555-5555",
|
|
6351
|
+
name,
|
|
6352
|
+
className,
|
|
6353
|
+
...rest
|
|
6354
|
+
}, ref) {
|
|
6355
|
+
const [value, setValue] = useControlled({
|
|
6356
|
+
controlled: valueProp,
|
|
6357
|
+
default: defaultValue ?? "",
|
|
6358
|
+
onChange: onValueChange
|
|
6359
|
+
});
|
|
6360
|
+
const { iso, national } = useMemo(() => splitE164(value, defaultCountry), [value, defaultCountry]);
|
|
6361
|
+
const country = PHONE_COUNTRIES.find((c) => c.iso === iso) ?? PHONE_COUNTRIES[0];
|
|
6362
|
+
const setCountry = (nextIso) => {
|
|
6363
|
+
const next = PHONE_COUNTRIES.find((c) => c.iso === nextIso) ?? country;
|
|
6364
|
+
setValue(`${next.dial}${national}`);
|
|
6365
|
+
};
|
|
6366
|
+
const setNational = (raw) => {
|
|
6367
|
+
const digits = raw.replace(/\D/g, "");
|
|
6368
|
+
setValue(`${country.dial}${digits}`);
|
|
6369
|
+
};
|
|
6370
|
+
return /* @__PURE__ */ jsxs(
|
|
6371
|
+
"div",
|
|
6372
|
+
{
|
|
6373
|
+
ref,
|
|
6374
|
+
className: cn(
|
|
6375
|
+
"inline-flex items-stretch overflow-hidden rounded-md border bg-background",
|
|
6376
|
+
invalid ? "border-destructive" : "border-input",
|
|
6377
|
+
disabled && "opacity-60",
|
|
6378
|
+
className
|
|
6379
|
+
),
|
|
6380
|
+
...rest,
|
|
6381
|
+
children: [
|
|
6382
|
+
/* @__PURE__ */ jsx(
|
|
6383
|
+
"select",
|
|
6384
|
+
{
|
|
6385
|
+
"aria-label": "Country",
|
|
6386
|
+
value: iso,
|
|
6387
|
+
disabled: disabled || readOnly,
|
|
6388
|
+
onChange: (e) => setCountry(e.target.value),
|
|
6389
|
+
className: cn(
|
|
6390
|
+
"h-10 cursor-pointer border-r border-input bg-card pl-2 pr-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
6391
|
+
),
|
|
6392
|
+
style: { minWidth: 90 },
|
|
6393
|
+
children: PHONE_COUNTRIES.map((c) => /* @__PURE__ */ jsxs("option", { value: c.iso, children: [
|
|
6394
|
+
c.flag,
|
|
6395
|
+
" ",
|
|
6396
|
+
c.dial
|
|
6397
|
+
] }, c.iso))
|
|
6398
|
+
}
|
|
6399
|
+
),
|
|
6400
|
+
/* @__PURE__ */ jsx(
|
|
6401
|
+
"input",
|
|
6402
|
+
{
|
|
6403
|
+
type: "tel",
|
|
6404
|
+
inputMode: "tel",
|
|
6405
|
+
autoComplete: "tel-national",
|
|
6406
|
+
value: national,
|
|
6407
|
+
placeholder,
|
|
6408
|
+
disabled,
|
|
6409
|
+
readOnly,
|
|
6410
|
+
"aria-invalid": invalid || void 0,
|
|
6411
|
+
onChange: (e) => setNational(e.target.value),
|
|
6412
|
+
className: cn(
|
|
6413
|
+
inputBaseVariants({ size: "md" }),
|
|
6414
|
+
"rounded-none border-0 focus-visible:ring-0"
|
|
6415
|
+
)
|
|
6416
|
+
}
|
|
6417
|
+
),
|
|
6418
|
+
name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value })
|
|
6419
|
+
]
|
|
6420
|
+
}
|
|
6421
|
+
);
|
|
6422
|
+
}
|
|
6423
|
+
);
|
|
6424
|
+
var EMOJI = [
|
|
6425
|
+
{
|
|
6426
|
+
id: "smileys",
|
|
6427
|
+
label: "Smileys",
|
|
6428
|
+
icon: "\u{1F600}",
|
|
6429
|
+
emojis: [
|
|
6430
|
+
{ emoji: "\u{1F600}", name: "grinning face" },
|
|
6431
|
+
{ emoji: "\u{1F603}", name: "grinning with big eyes" },
|
|
6432
|
+
{ emoji: "\u{1F604}", name: "grinning, smiling eyes" },
|
|
6433
|
+
{ emoji: "\u{1F601}", name: "beaming face" },
|
|
6434
|
+
{ emoji: "\u{1F606}", name: "squinting face" },
|
|
6435
|
+
{ emoji: "\u{1F605}", name: "sweat smile" },
|
|
6436
|
+
{ emoji: "\u{1F923}", name: "rolling on the floor laughing" },
|
|
6437
|
+
{ emoji: "\u{1F602}", name: "face with tears of joy" },
|
|
6438
|
+
{ emoji: "\u{1F642}", name: "slight smile" },
|
|
6439
|
+
{ emoji: "\u{1F643}", name: "upside-down face" },
|
|
6440
|
+
{ emoji: "\u{1F609}", name: "wink" },
|
|
6441
|
+
{ emoji: "\u{1F60A}", name: "blushing smile" },
|
|
6442
|
+
{ emoji: "\u{1F607}", name: "halo" },
|
|
6443
|
+
{ emoji: "\u{1F970}", name: "smile with hearts" },
|
|
6444
|
+
{ emoji: "\u{1F60D}", name: "heart eyes" },
|
|
6445
|
+
{ emoji: "\u{1F929}", name: "star eyes" },
|
|
6446
|
+
{ emoji: "\u{1F618}", name: "kiss" },
|
|
6447
|
+
{ emoji: "\u{1F617}", name: "kissing face" },
|
|
6448
|
+
{ emoji: "\u{1F914}", name: "thinking" },
|
|
6449
|
+
{ emoji: "\u{1F610}", name: "neutral" },
|
|
6450
|
+
{ emoji: "\u{1F611}", name: "expressionless" },
|
|
6451
|
+
{ emoji: "\u{1F636}", name: "no mouth" },
|
|
6452
|
+
{ emoji: "\u{1F644}", name: "eye roll" },
|
|
6453
|
+
{ emoji: "\u{1F60F}", name: "smirk" },
|
|
6454
|
+
{ emoji: "\u{1F612}", name: "unamused" },
|
|
6455
|
+
{ emoji: "\u{1F61E}", name: "disappointed" },
|
|
6456
|
+
{ emoji: "\u{1F614}", name: "pensive" },
|
|
6457
|
+
{ emoji: "\u{1F61F}", name: "worried" },
|
|
6458
|
+
{ emoji: "\u{1F615}", name: "confused" },
|
|
6459
|
+
{ emoji: "\u{1F641}", name: "slight frown" },
|
|
6460
|
+
{ emoji: "\u{1F623}", name: "persevering" },
|
|
6461
|
+
{ emoji: "\u{1F616}", name: "confounded" },
|
|
6462
|
+
{ emoji: "\u{1F62B}", name: "tired" },
|
|
6463
|
+
{ emoji: "\u{1F629}", name: "weary" },
|
|
6464
|
+
{ emoji: "\u{1F97A}", name: "pleading" },
|
|
6465
|
+
{ emoji: "\u{1F622}", name: "crying" },
|
|
6466
|
+
{ emoji: "\u{1F62D}", name: "loudly crying" },
|
|
6467
|
+
{ emoji: "\u{1F621}", name: "pouting" },
|
|
6468
|
+
{ emoji: "\u{1F620}", name: "angry" },
|
|
6469
|
+
{ emoji: "\u{1F92C}", name: "cursing" },
|
|
6470
|
+
{ emoji: "\u{1F976}", name: "cold" },
|
|
6471
|
+
{ emoji: "\u{1F975}", name: "hot" },
|
|
6472
|
+
{ emoji: "\u{1F633}", name: "flushed" },
|
|
6473
|
+
{ emoji: "\u{1F92F}", name: "mind blown" },
|
|
6474
|
+
{ emoji: "\u{1F631}", name: "screaming" },
|
|
6475
|
+
{ emoji: "\u{1F628}", name: "fearful" },
|
|
6476
|
+
{ emoji: "\u{1F630}", name: "anxious" },
|
|
6477
|
+
{ emoji: "\u{1F971}", name: "yawning" },
|
|
6478
|
+
{ emoji: "\u{1F634}", name: "sleeping" },
|
|
6479
|
+
{ emoji: "\u{1F924}", name: "drooling" }
|
|
6480
|
+
]
|
|
6481
|
+
},
|
|
6482
|
+
{
|
|
6483
|
+
id: "people",
|
|
6484
|
+
label: "People",
|
|
6485
|
+
icon: "\u{1F44D}",
|
|
6486
|
+
emojis: [
|
|
6487
|
+
{ emoji: "\u{1F44D}", name: "thumbs up" },
|
|
6488
|
+
{ emoji: "\u{1F44E}", name: "thumbs down" },
|
|
6489
|
+
{ emoji: "\u{1F44C}", name: "OK" },
|
|
6490
|
+
{ emoji: "\u270C\uFE0F", name: "victory" },
|
|
6491
|
+
{ emoji: "\u{1F91E}", name: "crossed fingers" },
|
|
6492
|
+
{ emoji: "\u{1F91F}", name: "love-you" },
|
|
6493
|
+
{ emoji: "\u{1F918}", name: "rock on" },
|
|
6494
|
+
{ emoji: "\u{1F919}", name: "call me" },
|
|
6495
|
+
{ emoji: "\u{1F448}", name: "point left" },
|
|
6496
|
+
{ emoji: "\u{1F449}", name: "point right" },
|
|
6497
|
+
{ emoji: "\u{1F446}", name: "point up" },
|
|
6498
|
+
{ emoji: "\u{1F447}", name: "point down" },
|
|
6499
|
+
{ emoji: "\u261D\uFE0F", name: "index up" },
|
|
6500
|
+
{ emoji: "\u270B", name: "raised hand" },
|
|
6501
|
+
{ emoji: "\u{1F590}\uFE0F", name: "hand fingers splayed" },
|
|
6502
|
+
{ emoji: "\u{1F596}", name: "vulcan" },
|
|
6503
|
+
{ emoji: "\u{1F44B}", name: "wave" },
|
|
6504
|
+
{ emoji: "\u{1F91A}", name: "back of hand" },
|
|
6505
|
+
{ emoji: "\u{1F44F}", name: "clap" },
|
|
6506
|
+
{ emoji: "\u{1F64C}", name: "raising hands" },
|
|
6507
|
+
{ emoji: "\u{1F91D}", name: "handshake" },
|
|
6508
|
+
{ emoji: "\u{1F64F}", name: "pray" },
|
|
6509
|
+
{ emoji: "\u{1F4AA}", name: "flexed bicep" },
|
|
6510
|
+
{ emoji: "\u{1F440}", name: "eyes" },
|
|
6511
|
+
{ emoji: "\u{1F464}", name: "silhouette" },
|
|
6512
|
+
{ emoji: "\u{1F465}", name: "silhouettes" },
|
|
6513
|
+
{ emoji: "\u{1F9D1}", name: "person" },
|
|
6514
|
+
{ emoji: "\u{1F476}", name: "baby" },
|
|
6515
|
+
{ emoji: "\u{1F9D2}", name: "child" },
|
|
6516
|
+
{ emoji: "\u{1F466}", name: "boy" },
|
|
6517
|
+
{ emoji: "\u{1F467}", name: "girl" },
|
|
6518
|
+
{ emoji: "\u{1F9D3}", name: "older person" }
|
|
6519
|
+
]
|
|
6520
|
+
},
|
|
6521
|
+
{
|
|
6522
|
+
id: "nature",
|
|
6523
|
+
label: "Nature",
|
|
6524
|
+
icon: "\u{1F333}",
|
|
6525
|
+
emojis: [
|
|
6526
|
+
{ emoji: "\u{1F436}", name: "dog" },
|
|
6527
|
+
{ emoji: "\u{1F431}", name: "cat" },
|
|
6528
|
+
{ emoji: "\u{1F42D}", name: "mouse" },
|
|
6529
|
+
{ emoji: "\u{1F439}", name: "hamster" },
|
|
6530
|
+
{ emoji: "\u{1F430}", name: "rabbit" },
|
|
6531
|
+
{ emoji: "\u{1F98A}", name: "fox" },
|
|
6532
|
+
{ emoji: "\u{1F43B}", name: "bear" },
|
|
6533
|
+
{ emoji: "\u{1F43C}", name: "panda" },
|
|
6534
|
+
{ emoji: "\u{1F428}", name: "koala" },
|
|
6535
|
+
{ emoji: "\u{1F42F}", name: "tiger" },
|
|
6536
|
+
{ emoji: "\u{1F981}", name: "lion" },
|
|
6537
|
+
{ emoji: "\u{1F42E}", name: "cow" },
|
|
6538
|
+
{ emoji: "\u{1F437}", name: "pig" },
|
|
6539
|
+
{ emoji: "\u{1F438}", name: "frog" },
|
|
6540
|
+
{ emoji: "\u{1F435}", name: "monkey" },
|
|
6541
|
+
{ emoji: "\u{1F414}", name: "chicken" },
|
|
6542
|
+
{ emoji: "\u{1F427}", name: "penguin" },
|
|
6543
|
+
{ emoji: "\u{1F426}", name: "bird" },
|
|
6544
|
+
{ emoji: "\u{1F424}", name: "baby chick" },
|
|
6545
|
+
{ emoji: "\u{1F986}", name: "duck" },
|
|
6546
|
+
{ emoji: "\u{1F985}", name: "eagle" },
|
|
6547
|
+
{ emoji: "\u{1F989}", name: "owl" },
|
|
6548
|
+
{ emoji: "\u{1F338}", name: "cherry blossom" },
|
|
6549
|
+
{ emoji: "\u{1F339}", name: "rose" },
|
|
6550
|
+
{ emoji: "\u{1F33B}", name: "sunflower" },
|
|
6551
|
+
{ emoji: "\u{1F337}", name: "tulip" },
|
|
6552
|
+
{ emoji: "\u{1F33C}", name: "daisy" },
|
|
6553
|
+
{ emoji: "\u{1F333}", name: "tree" },
|
|
6554
|
+
{ emoji: "\u{1F332}", name: "evergreen" },
|
|
6555
|
+
{ emoji: "\u{1F334}", name: "palm" },
|
|
6556
|
+
{ emoji: "\u{1F335}", name: "cactus" },
|
|
6557
|
+
{ emoji: "\u{1F340}", name: "four-leaf clover" },
|
|
6558
|
+
{ emoji: "\u2600\uFE0F", name: "sun" },
|
|
6559
|
+
{ emoji: "\u{1F319}", name: "moon" },
|
|
6560
|
+
{ emoji: "\u2B50", name: "star" },
|
|
6561
|
+
{ emoji: "\u26A1", name: "lightning" },
|
|
6562
|
+
{ emoji: "\u{1F525}", name: "fire" }
|
|
6563
|
+
]
|
|
6564
|
+
},
|
|
6565
|
+
{
|
|
6566
|
+
id: "food",
|
|
6567
|
+
label: "Food",
|
|
6568
|
+
icon: "\u{1F355}",
|
|
6569
|
+
emojis: [
|
|
6570
|
+
{ emoji: "\u{1F34E}", name: "apple" },
|
|
6571
|
+
{ emoji: "\u{1F34A}", name: "orange" },
|
|
6572
|
+
{ emoji: "\u{1F34C}", name: "banana" },
|
|
6573
|
+
{ emoji: "\u{1F347}", name: "grapes" },
|
|
6574
|
+
{ emoji: "\u{1F353}", name: "strawberry" },
|
|
6575
|
+
{ emoji: "\u{1F349}", name: "watermelon" },
|
|
6576
|
+
{ emoji: "\u{1F352}", name: "cherries" },
|
|
6577
|
+
{ emoji: "\u{1F351}", name: "peach" },
|
|
6578
|
+
{ emoji: "\u{1F34D}", name: "pineapple" },
|
|
6579
|
+
{ emoji: "\u{1F951}", name: "avocado" },
|
|
6580
|
+
{ emoji: "\u{1F345}", name: "tomato" },
|
|
6581
|
+
{ emoji: "\u{1F955}", name: "carrot" },
|
|
6582
|
+
{ emoji: "\u{1F33D}", name: "corn" },
|
|
6583
|
+
{ emoji: "\u{1F96C}", name: "leafy green" },
|
|
6584
|
+
{ emoji: "\u{1F35E}", name: "bread" },
|
|
6585
|
+
{ emoji: "\u{1F950}", name: "croissant" },
|
|
6586
|
+
{ emoji: "\u{1F96F}", name: "bagel" },
|
|
6587
|
+
{ emoji: "\u{1F956}", name: "baguette" },
|
|
6588
|
+
{ emoji: "\u{1F9C0}", name: "cheese" },
|
|
6589
|
+
{ emoji: "\u{1F95A}", name: "egg" },
|
|
6590
|
+
{ emoji: "\u{1F373}", name: "cooking" },
|
|
6591
|
+
{ emoji: "\u{1F95E}", name: "pancakes" },
|
|
6592
|
+
{ emoji: "\u{1F953}", name: "bacon" },
|
|
6593
|
+
{ emoji: "\u{1F354}", name: "burger" },
|
|
6594
|
+
{ emoji: "\u{1F35F}", name: "fries" },
|
|
6595
|
+
{ emoji: "\u{1F355}", name: "pizza" },
|
|
6596
|
+
{ emoji: "\u{1F32D}", name: "hotdog" },
|
|
6597
|
+
{ emoji: "\u{1F32E}", name: "taco" },
|
|
6598
|
+
{ emoji: "\u{1F32F}", name: "burrito" },
|
|
6599
|
+
{ emoji: "\u{1F363}", name: "sushi" },
|
|
6600
|
+
{ emoji: "\u{1F370}", name: "cake" },
|
|
6601
|
+
{ emoji: "\u{1F9C1}", name: "cupcake" },
|
|
6602
|
+
{ emoji: "\u{1F369}", name: "donut" },
|
|
6603
|
+
{ emoji: "\u{1F36A}", name: "cookie" },
|
|
6604
|
+
{ emoji: "\u{1F36B}", name: "chocolate" },
|
|
6605
|
+
{ emoji: "\u{1F36F}", name: "honey" },
|
|
6606
|
+
{ emoji: "\u2615", name: "coffee" },
|
|
6607
|
+
{ emoji: "\u{1F375}", name: "tea" },
|
|
6608
|
+
{ emoji: "\u{1F37A}", name: "beer" },
|
|
6609
|
+
{ emoji: "\u{1F377}", name: "wine" }
|
|
6610
|
+
]
|
|
6611
|
+
},
|
|
6612
|
+
{
|
|
6613
|
+
id: "objects",
|
|
6614
|
+
label: "Objects",
|
|
6615
|
+
icon: "\u{1F4A1}",
|
|
6616
|
+
emojis: [
|
|
6617
|
+
{ emoji: "\u{1F4A1}", name: "lightbulb" },
|
|
6618
|
+
{ emoji: "\u{1F50B}", name: "battery" },
|
|
6619
|
+
{ emoji: "\u{1F4F1}", name: "phone" },
|
|
6620
|
+
{ emoji: "\u{1F4BB}", name: "laptop" },
|
|
6621
|
+
{ emoji: "\u{1F5A5}\uFE0F", name: "desktop" },
|
|
6622
|
+
{ emoji: "\u2328\uFE0F", name: "keyboard" },
|
|
6623
|
+
{ emoji: "\u{1F5B1}\uFE0F", name: "mouse" },
|
|
6624
|
+
{ emoji: "\u{1F4F7}", name: "camera" },
|
|
6625
|
+
{ emoji: "\u{1F3A5}", name: "video camera" },
|
|
6626
|
+
{ emoji: "\u{1F4FA}", name: "tv" },
|
|
6627
|
+
{ emoji: "\u{1F4FB}", name: "radio" },
|
|
6628
|
+
{ emoji: "\u{1F399}\uFE0F", name: "microphone" },
|
|
6629
|
+
{ emoji: "\u{1F50A}", name: "speaker loud" },
|
|
6630
|
+
{ emoji: "\u{1F508}", name: "speaker" },
|
|
6631
|
+
{ emoji: "\u{1F4E2}", name: "megaphone" },
|
|
6632
|
+
{ emoji: "\u{1F514}", name: "bell" },
|
|
6633
|
+
{ emoji: "\u{1F507}", name: "muted" },
|
|
6634
|
+
{ emoji: "\u23F0", name: "alarm" },
|
|
6635
|
+
{ emoji: "\u231A", name: "watch" },
|
|
6636
|
+
{ emoji: "\u{1F4C5}", name: "calendar" },
|
|
6637
|
+
{ emoji: "\u{1F4CC}", name: "pin" },
|
|
6638
|
+
{ emoji: "\u2702\uFE0F", name: "scissors" },
|
|
6639
|
+
{ emoji: "\u{1F511}", name: "key" },
|
|
6640
|
+
{ emoji: "\u{1F512}", name: "locked" },
|
|
6641
|
+
{ emoji: "\u{1F513}", name: "unlocked" },
|
|
6642
|
+
{ emoji: "\u{1F4B0}", name: "money bag" },
|
|
6643
|
+
{ emoji: "\u{1F4B3}", name: "card" },
|
|
6644
|
+
{ emoji: "\u{1F4E6}", name: "package" },
|
|
6645
|
+
{ emoji: "\u2709\uFE0F", name: "envelope" },
|
|
6646
|
+
{ emoji: "\u{1F4E8}", name: "incoming envelope" },
|
|
6647
|
+
{ emoji: "\u270F\uFE0F", name: "pencil" },
|
|
6648
|
+
{ emoji: "\u{1F58A}\uFE0F", name: "pen" },
|
|
6649
|
+
{ emoji: "\u{1F4DD}", name: "memo" },
|
|
6650
|
+
{ emoji: "\u{1F4CE}", name: "paperclip" },
|
|
6651
|
+
{ emoji: "\u{1F4C1}", name: "folder" },
|
|
6652
|
+
{ emoji: "\u{1F4C2}", name: "open folder" },
|
|
6653
|
+
{ emoji: "\u{1F4CA}", name: "bar chart" },
|
|
6654
|
+
{ emoji: "\u{1F4C8}", name: "up chart" },
|
|
6655
|
+
{ emoji: "\u{1F4C9}", name: "down chart" }
|
|
6656
|
+
]
|
|
6657
|
+
},
|
|
6658
|
+
{
|
|
6659
|
+
id: "symbols",
|
|
6660
|
+
label: "Symbols",
|
|
6661
|
+
icon: "\u2705",
|
|
6662
|
+
emojis: [
|
|
6663
|
+
{ emoji: "\u2705", name: "check" },
|
|
6664
|
+
{ emoji: "\u274C", name: "cross" },
|
|
6665
|
+
{ emoji: "\u2757", name: "exclamation" },
|
|
6666
|
+
{ emoji: "\u2753", name: "question" },
|
|
6667
|
+
{ emoji: "\u26A0\uFE0F", name: "warning" },
|
|
6668
|
+
{ emoji: "\u2728", name: "sparkles" },
|
|
6669
|
+
{ emoji: "\u2B50", name: "star" },
|
|
6670
|
+
{ emoji: "\u{1F31F}", name: "glowing star" },
|
|
6671
|
+
{ emoji: "\u{1F4AB}", name: "dizzy" },
|
|
6672
|
+
{ emoji: "\u{1F4A2}", name: "anger" },
|
|
6673
|
+
{ emoji: "\u{1F4A5}", name: "collision" },
|
|
6674
|
+
{ emoji: "\u{1F4A6}", name: "sweat drops" },
|
|
6675
|
+
{ emoji: "\u{1F4A8}", name: "dash" },
|
|
6676
|
+
{ emoji: "\u{1F389}", name: "party" },
|
|
6677
|
+
{ emoji: "\u{1F38A}", name: "confetti ball" },
|
|
6678
|
+
{ emoji: "\u{1F381}", name: "gift" },
|
|
6679
|
+
{ emoji: "\u{1F3C6}", name: "trophy" },
|
|
6680
|
+
{ emoji: "\u{1F947}", name: "gold medal" },
|
|
6681
|
+
{ emoji: "\u{1F948}", name: "silver medal" },
|
|
6682
|
+
{ emoji: "\u{1F949}", name: "bronze medal" },
|
|
6683
|
+
{ emoji: "\u2764\uFE0F", name: "red heart" },
|
|
6684
|
+
{ emoji: "\u{1F9E1}", name: "orange heart" },
|
|
6685
|
+
{ emoji: "\u{1F49B}", name: "yellow heart" },
|
|
6686
|
+
{ emoji: "\u{1F49A}", name: "green heart" },
|
|
6687
|
+
{ emoji: "\u{1F499}", name: "blue heart" },
|
|
6688
|
+
{ emoji: "\u{1F49C}", name: "purple heart" },
|
|
6689
|
+
{ emoji: "\u{1F5A4}", name: "black heart" },
|
|
6690
|
+
{ emoji: "\u{1F90D}", name: "white heart" },
|
|
6691
|
+
{ emoji: "\u{1F494}", name: "broken heart" },
|
|
6692
|
+
{ emoji: "\u2795", name: "plus" },
|
|
6693
|
+
{ emoji: "\u2796", name: "minus" },
|
|
6694
|
+
{ emoji: "\u2797", name: "divide" },
|
|
6695
|
+
{ emoji: "\u2716\uFE0F", name: "multiply" },
|
|
6696
|
+
{ emoji: "\u267B\uFE0F", name: "recycle" },
|
|
6697
|
+
{ emoji: "\u26A1", name: "lightning" }
|
|
6698
|
+
]
|
|
6699
|
+
}
|
|
6700
|
+
];
|
|
6701
|
+
var EmojiPicker = forwardRef(
|
|
6702
|
+
function EmojiPicker2({
|
|
6703
|
+
onSelect,
|
|
6704
|
+
placeholder = "Search emoji\u2026",
|
|
6705
|
+
columns = 8,
|
|
6706
|
+
cellSize = 28,
|
|
6707
|
+
categories = EMOJI,
|
|
6708
|
+
disabled,
|
|
6709
|
+
className,
|
|
6710
|
+
...rest
|
|
6711
|
+
}, ref) {
|
|
6712
|
+
const [query, setQuery] = useState("");
|
|
6713
|
+
const containerRef = useRef(null);
|
|
6714
|
+
const matches = useMemo(() => {
|
|
6715
|
+
if (!query) return null;
|
|
6716
|
+
const q = query.toLowerCase();
|
|
6717
|
+
const found = [];
|
|
6718
|
+
for (const cat of categories) {
|
|
6719
|
+
for (const e of cat.emojis) {
|
|
6720
|
+
if (e.name.includes(q) || (e.keywords?.some((k) => k.includes(q)) ?? false)) {
|
|
6721
|
+
found.push(e);
|
|
6722
|
+
}
|
|
6723
|
+
}
|
|
6724
|
+
}
|
|
6725
|
+
return found;
|
|
6726
|
+
}, [query, categories]);
|
|
6727
|
+
const jumpTo = (id) => {
|
|
6728
|
+
const root = containerRef.current;
|
|
6729
|
+
if (!root) return;
|
|
6730
|
+
const target = root.querySelector(`[data-cat="${id}"]`);
|
|
6731
|
+
if (target instanceof HTMLElement) {
|
|
6732
|
+
target.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
6733
|
+
}
|
|
6734
|
+
};
|
|
6735
|
+
return /* @__PURE__ */ jsxs(
|
|
6736
|
+
"div",
|
|
6737
|
+
{
|
|
6738
|
+
ref: (el) => {
|
|
6739
|
+
containerRef.current = el;
|
|
6740
|
+
if (typeof ref === "function") ref(el);
|
|
6741
|
+
else if (ref) ref.current = el;
|
|
6742
|
+
},
|
|
6743
|
+
className: cn(
|
|
6744
|
+
"flex flex-col rounded-md border border-border bg-card text-card-foreground shadow-sm",
|
|
6745
|
+
disabled && "opacity-60",
|
|
6746
|
+
className
|
|
6747
|
+
),
|
|
6748
|
+
style: { width: columns * cellSize + 24 },
|
|
6749
|
+
...rest,
|
|
6750
|
+
children: [
|
|
6751
|
+
/* @__PURE__ */ jsx("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx(
|
|
6752
|
+
"input",
|
|
6753
|
+
{
|
|
6754
|
+
type: "search",
|
|
6755
|
+
value: query,
|
|
6756
|
+
placeholder,
|
|
6757
|
+
disabled,
|
|
6758
|
+
onChange: (e) => setQuery(e.target.value),
|
|
6759
|
+
className: cn(inputBaseVariants({ size: "sm" }))
|
|
6760
|
+
}
|
|
6761
|
+
) }),
|
|
6762
|
+
!matches && /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Emoji categories", className: "flex border-b border-border", children: categories.map((c) => /* @__PURE__ */ jsxs(
|
|
6763
|
+
"button",
|
|
6764
|
+
{
|
|
6765
|
+
type: "button",
|
|
6766
|
+
role: "tab",
|
|
6767
|
+
"aria-controls": `emoji-cat-${c.id}`,
|
|
6768
|
+
onClick: () => jumpTo(c.id),
|
|
6769
|
+
title: c.label,
|
|
6770
|
+
className: "flex flex-1 items-center justify-center py-1.5 text-base hover:bg-muted",
|
|
6771
|
+
children: [
|
|
6772
|
+
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: c.icon }),
|
|
6773
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: c.label })
|
|
6774
|
+
]
|
|
6775
|
+
},
|
|
6776
|
+
c.id
|
|
6777
|
+
)) }),
|
|
6778
|
+
/* @__PURE__ */ jsx(
|
|
6779
|
+
"div",
|
|
6780
|
+
{
|
|
6781
|
+
role: "grid",
|
|
6782
|
+
"aria-label": "Emoji",
|
|
6783
|
+
className: "overflow-y-auto p-2",
|
|
6784
|
+
style: { maxHeight: 280 },
|
|
6785
|
+
children: matches ? matches.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-6 text-center text-xs text-muted-foreground", children: "No emoji match." }) : /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: `repeat(${columns}, ${cellSize}px)` }, children: matches.map((e) => /* @__PURE__ */ jsx(EmojiCell, { entry: e, cellSize, disabled, onSelect }, e.emoji)) }) : categories.map((cat) => /* @__PURE__ */ jsxs("div", { "data-cat": cat.id, id: `emoji-cat-${cat.id}`, className: "mb-3", children: [
|
|
6786
|
+
/* @__PURE__ */ jsx("div", { className: "mb-1 px-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: cat.label }),
|
|
6787
|
+
/* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: `repeat(${columns}, ${cellSize}px)` }, children: cat.emojis.map((e) => /* @__PURE__ */ jsx(EmojiCell, { entry: e, cellSize, disabled, onSelect }, e.emoji)) })
|
|
6788
|
+
] }, cat.id))
|
|
6789
|
+
}
|
|
6790
|
+
)
|
|
6791
|
+
]
|
|
6792
|
+
}
|
|
6793
|
+
);
|
|
6794
|
+
}
|
|
6795
|
+
);
|
|
6796
|
+
function EmojiCell({ entry, cellSize, disabled, onSelect }) {
|
|
6797
|
+
return /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
|
|
6798
|
+
"button",
|
|
6799
|
+
{
|
|
6800
|
+
type: "button",
|
|
6801
|
+
"aria-label": entry.name,
|
|
6802
|
+
disabled,
|
|
6803
|
+
onClick: () => onSelect(entry.emoji),
|
|
6804
|
+
style: { width: cellSize, height: cellSize },
|
|
6805
|
+
className: "inline-flex items-center justify-center rounded-md text-lg transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
6806
|
+
children: entry.emoji
|
|
6807
|
+
}
|
|
6808
|
+
) });
|
|
6809
|
+
}
|
|
6810
|
+
var BUILT_IN_EMOJI = EMOJI;
|
|
5201
6811
|
|
|
5202
|
-
export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CodeEditor, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, Fieldset, FilePicker, FileUpload, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, JSONEditor, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MarkdownEditor, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, RecurrenceEditor, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, useWizard };
|
|
5203
|
-
//# sourceMappingURL=chunk-
|
|
5204
|
-
//# sourceMappingURL=chunk-
|
|
6812
|
+
export { ADDRESS_COUNTRIES, AddressForm, BUILT_IN_EMOJI, BUILT_IN_FONTS, Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CodeEditor, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CronInput, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, EmojiPicker, Fieldset, FilePicker, FileUpload, FontPicker, FormErrorMessage, FormField, FormHelperText, GradientPicker, IconPicker, InputAddon, InputGroup, JSONEditor, KeyboardShortcutPicker, Knob, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MarkdownEditor, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PHONE_COUNTRIES, PasswordInput, PasswordStrength, PercentInput, PhoneInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, RecurrenceEditor, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, gradientToCss, useWizard };
|
|
6813
|
+
//# sourceMappingURL=chunk-I4WUBNR6.js.map
|
|
6814
|
+
//# sourceMappingURL=chunk-I4WUBNR6.js.map
|