@algenium/blocks 1.14.1 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import * as React7 from 'react';
3
3
  import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo, useId } from 'react';
4
- import { Loader2, AlertTriangle, Inbox, CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Building2, ChevronsUpDown, Check, Plus, Languages, FlaskConical, X, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, XIcon, User, Pencil, Bell, CheckCheck, XCircle, CheckCircle, Info, Trash2, Clock, MapPin, Link, CalendarDays, ExternalLink, ChevronLeft, ChevronRight, HelpCircle, MessageSquare, Wifi, WifiOff, FileIcon, Download, Paperclip, Send, ArrowLeft, Search, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Smile, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, Settings, PictureInPicture2, Minimize, Maximize, CreditCard, CheckCircle2, BadgeCheck } from 'lucide-react';
5
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
4
+ import { ChevronsUpDown, CheckIcon, SearchIcon, Loader2, AlertTriangle, Inbox, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Building2, Check, Plus, Languages, FlaskConical, X, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, XIcon, User, Pencil, Bell, CheckCheck, XCircle, CheckCircle, Info, Trash2, Clock, MapPin, Link, CalendarDays, ExternalLink, ChevronLeft, ChevronRight, HelpCircle, MessageSquare, Wifi, WifiOff, FileIcon, Download, Paperclip, Send, ArrowLeft, Search, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Smile, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, Settings, PictureInPicture2, Minimize, Maximize, CreditCard, CheckCircle2, BadgeCheck } from 'lucide-react';
5
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
6
6
  import { useTheme } from 'next-themes';
7
7
  import { AnimatePresence, motion } from 'framer-motion';
8
8
  import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -16,7 +16,10 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
16
16
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
17
17
  import { startOfMonth, endOfMonth, eachDayOfInterval, endOfWeek, startOfWeek, format, isSameDay, subMonths, addMonths } from 'date-fns';
18
18
  import { DayPicker } from 'react-day-picker';
19
+ import { Command as Command$1 } from 'cmdk';
19
20
  import valid from 'card-validator';
21
+ import * as RPNInput from 'react-phone-number-input';
22
+ import flags from 'react-phone-number-input/flags';
20
23
 
21
24
  var CalendarContext = createContext(null);
22
25
  function useCalendarContext() {
@@ -3871,7 +3874,7 @@ function LanguageSwitcher({
3871
3874
  const onLanguageChange = propOnLanguageChange ?? context?.setLanguage;
3872
3875
  const sizes = sizeClasses2[size];
3873
3876
  const shapeClass = shapeClasses2[shape];
3874
- const defaultLabels5 = {
3877
+ const defaultLabels6 = {
3875
3878
  language: labels.language ?? "Language"
3876
3879
  };
3877
3880
  if (variant === "mini") {
@@ -3881,7 +3884,7 @@ function LanguageSwitcher({
3881
3884
  {
3882
3885
  variant: "ghost",
3883
3886
  size: "icon",
3884
- "aria-label": defaultLabels5.language,
3887
+ "aria-label": defaultLabels6.language,
3885
3888
  className: cn(sizes.buttonMini, shapeClass, className),
3886
3889
  children: /* @__PURE__ */ jsx(Languages, { className: sizes.iconMini })
3887
3890
  }
@@ -9161,6 +9164,342 @@ function useDebouncedValueStrict(value, delayMs) {
9161
9164
  }, [value, delayMs]);
9162
9165
  return debounced;
9163
9166
  }
9167
+ function Command({
9168
+ className,
9169
+ ...props
9170
+ }) {
9171
+ return /* @__PURE__ */ jsx(
9172
+ Command$1,
9173
+ {
9174
+ "data-slot": "command",
9175
+ className: cn(
9176
+ "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
9177
+ className
9178
+ ),
9179
+ ...props
9180
+ }
9181
+ );
9182
+ }
9183
+ function CommandDialog({
9184
+ title = "Command Palette",
9185
+ description = "Search for a command to run...",
9186
+ children,
9187
+ className,
9188
+ showCloseButton = true,
9189
+ commandProps,
9190
+ ...props
9191
+ }) {
9192
+ return /* @__PURE__ */ jsxs(Dialog, { ...props, children: [
9193
+ /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
9194
+ /* @__PURE__ */ jsx(DialogTitle, { children: title }),
9195
+ /* @__PURE__ */ jsx(DialogDescription, { children: description })
9196
+ ] }),
9197
+ /* @__PURE__ */ jsx(
9198
+ DialogContent,
9199
+ {
9200
+ className: cn("overflow-hidden p-0", className),
9201
+ showCloseButton,
9202
+ children: /* @__PURE__ */ jsx(
9203
+ Command,
9204
+ {
9205
+ className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
9206
+ ...commandProps,
9207
+ children
9208
+ }
9209
+ )
9210
+ }
9211
+ )
9212
+ ] });
9213
+ }
9214
+ function CommandInput({
9215
+ className,
9216
+ ...props
9217
+ }) {
9218
+ return /* @__PURE__ */ jsxs(
9219
+ "div",
9220
+ {
9221
+ "data-slot": "command-input-wrapper",
9222
+ className: "flex h-9 items-center gap-2 border-b px-3",
9223
+ children: [
9224
+ /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
9225
+ /* @__PURE__ */ jsx(
9226
+ Command$1.Input,
9227
+ {
9228
+ "data-slot": "command-input",
9229
+ className: cn(
9230
+ "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
9231
+ className
9232
+ ),
9233
+ ...props
9234
+ }
9235
+ )
9236
+ ]
9237
+ }
9238
+ );
9239
+ }
9240
+ function CommandList({
9241
+ className,
9242
+ ...props
9243
+ }) {
9244
+ return /* @__PURE__ */ jsx(
9245
+ Command$1.List,
9246
+ {
9247
+ "data-slot": "command-list",
9248
+ className: cn(
9249
+ "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
9250
+ className
9251
+ ),
9252
+ ...props
9253
+ }
9254
+ );
9255
+ }
9256
+ function CommandEmpty({
9257
+ ...props
9258
+ }) {
9259
+ return /* @__PURE__ */ jsx(
9260
+ Command$1.Empty,
9261
+ {
9262
+ "data-slot": "command-empty",
9263
+ className: "py-6 text-center text-sm",
9264
+ ...props
9265
+ }
9266
+ );
9267
+ }
9268
+ function CommandGroup({
9269
+ className,
9270
+ ...props
9271
+ }) {
9272
+ return /* @__PURE__ */ jsx(
9273
+ Command$1.Group,
9274
+ {
9275
+ "data-slot": "command-group",
9276
+ className: cn(
9277
+ "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
9278
+ className
9279
+ ),
9280
+ ...props
9281
+ }
9282
+ );
9283
+ }
9284
+ function CommandSeparator({
9285
+ className,
9286
+ ...props
9287
+ }) {
9288
+ return /* @__PURE__ */ jsx(
9289
+ Command$1.Separator,
9290
+ {
9291
+ "data-slot": "command-separator",
9292
+ className: cn("-mx-1 h-px bg-border", className),
9293
+ ...props
9294
+ }
9295
+ );
9296
+ }
9297
+ function CommandItem({
9298
+ className,
9299
+ ...props
9300
+ }) {
9301
+ return /* @__PURE__ */ jsx(
9302
+ Command$1.Item,
9303
+ {
9304
+ "data-slot": "command-item",
9305
+ className: cn(
9306
+ "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
9307
+ className
9308
+ ),
9309
+ ...props
9310
+ }
9311
+ );
9312
+ }
9313
+ function CommandShortcut({
9314
+ className,
9315
+ ...props
9316
+ }) {
9317
+ return /* @__PURE__ */ jsx(
9318
+ "span",
9319
+ {
9320
+ "data-slot": "command-shortcut",
9321
+ className: cn(
9322
+ "ml-auto text-xs tracking-widest text-muted-foreground",
9323
+ className
9324
+ ),
9325
+ ...props
9326
+ }
9327
+ );
9328
+ }
9329
+
9330
+ // src/components/search/fuzzy.ts
9331
+ function normalize(value) {
9332
+ return value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
9333
+ }
9334
+ function fuzzyMatch(query, target) {
9335
+ const q = normalize(query.trim());
9336
+ if (!q) return true;
9337
+ const t = normalize(target);
9338
+ if (t.includes(q)) return true;
9339
+ let qi = 0;
9340
+ for (let ti = 0; ti < t.length && qi < q.length; ti++) {
9341
+ if (t[ti] === q[qi]) qi++;
9342
+ }
9343
+ return qi === q.length;
9344
+ }
9345
+ var defaultLabels5 = {
9346
+ placeholder: "Buscar en toda la plataforma\u2026",
9347
+ dialogTitle: "Buscar",
9348
+ dialogDescription: "Busca funcionalidades, eventos, documentos y m\xE1s",
9349
+ loading: "Buscando\u2026",
9350
+ empty: "No se encontraron resultados",
9351
+ error: "No se pudo completar la b\xFAsqueda",
9352
+ featuresGroup: "Funcionalidades",
9353
+ defaultResultsGroup: "Resultados"
9354
+ };
9355
+ function groupHitsByType(hits) {
9356
+ const order = [];
9357
+ const byType = /* @__PURE__ */ new Map();
9358
+ for (const hit of hits) {
9359
+ if (!byType.has(hit.type)) {
9360
+ byType.set(hit.type, []);
9361
+ order.push(hit.type);
9362
+ }
9363
+ byType.get(hit.type)?.push(hit);
9364
+ }
9365
+ return order.map((type) => [type, byType.get(type) ?? []]);
9366
+ }
9367
+ function SearchCommand({
9368
+ open,
9369
+ onOpenChange,
9370
+ fetchResults,
9371
+ onSelect,
9372
+ features = [],
9373
+ typeLabels,
9374
+ labels: userLabels,
9375
+ minQueryLength = 2,
9376
+ debounceMs = 200,
9377
+ className
9378
+ }) {
9379
+ const labels = { ...defaultLabels5, ...userLabels };
9380
+ const [query, setQuery] = useState("");
9381
+ const [hits, setHits] = useState([]);
9382
+ const [isLoading, setIsLoading] = useState(false);
9383
+ const [hasError, setHasError] = useState(false);
9384
+ const debouncedQuery = useDebouncedValue(query, debounceMs);
9385
+ const requestIdRef = useRef(0);
9386
+ useEffect(() => {
9387
+ if (!open) {
9388
+ setQuery("");
9389
+ setHits([]);
9390
+ setHasError(false);
9391
+ }
9392
+ }, [open]);
9393
+ useEffect(() => {
9394
+ const trimmed = debouncedQuery.trim();
9395
+ if (trimmed.length < minQueryLength) {
9396
+ setHits([]);
9397
+ setHasError(false);
9398
+ setIsLoading(false);
9399
+ return;
9400
+ }
9401
+ const requestId = ++requestIdRef.current;
9402
+ setIsLoading(true);
9403
+ setHasError(false);
9404
+ fetchResults(trimmed).then((result) => {
9405
+ if (requestIdRef.current !== requestId) return;
9406
+ setHits(result);
9407
+ }).catch(() => {
9408
+ if (requestIdRef.current !== requestId) return;
9409
+ setHits([]);
9410
+ setHasError(true);
9411
+ }).finally(() => {
9412
+ if (requestIdRef.current !== requestId) return;
9413
+ setIsLoading(false);
9414
+ });
9415
+ }, [debouncedQuery, minQueryLength, fetchResults]);
9416
+ const filteredFeatures = useMemo(() => {
9417
+ if (!query.trim()) return features;
9418
+ return features.filter(
9419
+ (feature) => fuzzyMatch(query, feature.label) || feature.keywords?.some((keyword) => fuzzyMatch(query, keyword))
9420
+ );
9421
+ }, [features, query]);
9422
+ const groupedHits = useMemo(() => groupHitsByType(hits), [hits]);
9423
+ function handleSelect(selection) {
9424
+ onSelect(selection);
9425
+ onOpenChange(false);
9426
+ }
9427
+ const hasAnyResults = filteredFeatures.length > 0 || hits.length > 0;
9428
+ return /* @__PURE__ */ jsxs(
9429
+ CommandDialog,
9430
+ {
9431
+ open,
9432
+ onOpenChange,
9433
+ title: labels.dialogTitle,
9434
+ description: labels.dialogDescription,
9435
+ className,
9436
+ commandProps: { shouldFilter: false },
9437
+ children: [
9438
+ /* @__PURE__ */ jsx(
9439
+ CommandInput,
9440
+ {
9441
+ placeholder: labels.placeholder,
9442
+ value: query,
9443
+ onValueChange: setQuery
9444
+ }
9445
+ ),
9446
+ /* @__PURE__ */ jsxs(CommandList, { children: [
9447
+ isLoading ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: labels.loading }) : null,
9448
+ hasError && !isLoading ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-destructive", children: labels.error }) : null,
9449
+ !isLoading && !hasError && !hasAnyResults ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : null,
9450
+ filteredFeatures.length > 0 ? /* @__PURE__ */ jsx(CommandGroup, { heading: labels.featuresGroup, children: filteredFeatures.map((feature) => /* @__PURE__ */ jsxs(
9451
+ CommandItem,
9452
+ {
9453
+ value: feature.id,
9454
+ onSelect: () => handleSelect({ kind: "feature", feature }),
9455
+ children: [
9456
+ feature.icon,
9457
+ /* @__PURE__ */ jsx("span", { children: feature.label })
9458
+ ]
9459
+ },
9460
+ feature.id
9461
+ )) }) : null,
9462
+ !isLoading && groupedHits.map(([type, typeHits]) => /* @__PURE__ */ jsx(
9463
+ CommandGroup,
9464
+ {
9465
+ heading: typeLabels?.[type] ?? labels.defaultResultsGroup,
9466
+ children: typeHits.map((hit) => /* @__PURE__ */ jsx(
9467
+ CommandItem,
9468
+ {
9469
+ value: hit.id,
9470
+ onSelect: () => handleSelect({ kind: "hit", hit }),
9471
+ children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
9472
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: hit.title }),
9473
+ hit.snippet ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: hit.snippet }) : null
9474
+ ] })
9475
+ },
9476
+ hit.id
9477
+ ))
9478
+ },
9479
+ type
9480
+ ))
9481
+ ] })
9482
+ ]
9483
+ }
9484
+ );
9485
+ }
9486
+ function useSearchHotkey(options = {}) {
9487
+ const { defaultOpen = false, disabled = false } = options;
9488
+ const [open, setOpen] = useState(defaultOpen);
9489
+ const toggle = useCallback(() => setOpen((prev) => !prev), []);
9490
+ useEffect(() => {
9491
+ if (disabled) return;
9492
+ function handleKeyDown(event) {
9493
+ if (event.key.toLowerCase() !== "k") return;
9494
+ if (!event.metaKey && !event.ctrlKey) return;
9495
+ event.preventDefault();
9496
+ setOpen((prev) => !prev);
9497
+ }
9498
+ window.addEventListener("keydown", handleKeyDown);
9499
+ return () => window.removeEventListener("keydown", handleKeyDown);
9500
+ }, [disabled]);
9501
+ return { open, setOpen, toggle };
9502
+ }
9164
9503
  function onlyDigits(s, max) {
9165
9504
  return s.replace(/\D/g, "").slice(0, max);
9166
9505
  }
@@ -9921,6 +10260,166 @@ function USAddressInput({
9921
10260
  ] })
9922
10261
  ] });
9923
10262
  }
10263
+ function Input({ className, type, ...props }) {
10264
+ return /* @__PURE__ */ jsx(
10265
+ "input",
10266
+ {
10267
+ type,
10268
+ "data-slot": "input",
10269
+ className: cn(
10270
+ "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
10271
+ "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
10272
+ "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
10273
+ className
10274
+ ),
10275
+ ...props
10276
+ }
10277
+ );
10278
+ }
10279
+ var PhoneInput = React7.forwardRef(
10280
+ ({ className, onChange, value, defaultCountry = "MX", ...props }, ref) => {
10281
+ return /* @__PURE__ */ jsx(
10282
+ RPNInput.default,
10283
+ {
10284
+ ref,
10285
+ className: cn("flex", className),
10286
+ flagComponent: FlagComponent,
10287
+ countrySelectComponent: CountrySelect,
10288
+ inputComponent: InputComponent,
10289
+ smartCaret: false,
10290
+ defaultCountry,
10291
+ value: value || void 0,
10292
+ onChange: (nextValue) => onChange?.(nextValue || ""),
10293
+ ...props
10294
+ }
10295
+ );
10296
+ }
10297
+ );
10298
+ PhoneInput.displayName = "PhoneInput";
10299
+ var InputComponent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
10300
+ Input,
10301
+ {
10302
+ className: cn("rounded-e-lg rounded-s-none", className),
10303
+ ...props,
10304
+ ref
10305
+ }
10306
+ ));
10307
+ InputComponent.displayName = "InputComponent";
10308
+ var CountrySelect = ({
10309
+ disabled,
10310
+ value: selectedCountry,
10311
+ options: countryList,
10312
+ onChange
10313
+ }) => {
10314
+ const scrollAreaRef = React7.useRef(null);
10315
+ const [searchValue, setSearchValue] = React7.useState("");
10316
+ const [isOpen, setIsOpen] = React7.useState(false);
10317
+ return /* @__PURE__ */ jsxs(
10318
+ Popover,
10319
+ {
10320
+ open: isOpen,
10321
+ modal: true,
10322
+ onOpenChange: (open) => {
10323
+ setIsOpen(open);
10324
+ if (open) setSearchValue("");
10325
+ },
10326
+ children: [
10327
+ /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
10328
+ Button,
10329
+ {
10330
+ type: "button",
10331
+ variant: "outline",
10332
+ className: "flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10",
10333
+ disabled,
10334
+ children: [
10335
+ /* @__PURE__ */ jsx(
10336
+ FlagComponent,
10337
+ {
10338
+ country: selectedCountry,
10339
+ countryName: selectedCountry
10340
+ }
10341
+ ),
10342
+ /* @__PURE__ */ jsx(
10343
+ ChevronsUpDown,
10344
+ {
10345
+ className: cn(
10346
+ "-mr-2 size-4 opacity-50",
10347
+ disabled ? "hidden" : "opacity-100"
10348
+ )
10349
+ }
10350
+ )
10351
+ ]
10352
+ }
10353
+ ) }),
10354
+ /* @__PURE__ */ jsx(PopoverContent, { className: "w-[300px] p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
10355
+ /* @__PURE__ */ jsx(
10356
+ CommandInput,
10357
+ {
10358
+ value: searchValue,
10359
+ onValueChange: (value) => {
10360
+ setSearchValue(value);
10361
+ setTimeout(() => {
10362
+ if (scrollAreaRef.current) {
10363
+ const viewportElement = scrollAreaRef.current.querySelector(
10364
+ "[data-radix-scroll-area-viewport]"
10365
+ );
10366
+ if (viewportElement) {
10367
+ viewportElement.scrollTop = 0;
10368
+ }
10369
+ }
10370
+ }, 0);
10371
+ },
10372
+ placeholder: "Search country..."
10373
+ }
10374
+ ),
10375
+ /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsxs(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
10376
+ /* @__PURE__ */ jsx(CommandEmpty, { children: "No country found." }),
10377
+ /* @__PURE__ */ jsx(CommandGroup, { children: countryList.map(
10378
+ ({ value, label }) => value ? /* @__PURE__ */ jsx(
10379
+ CountrySelectOption,
10380
+ {
10381
+ country: value,
10382
+ countryName: label,
10383
+ selectedCountry,
10384
+ onChange,
10385
+ onSelectComplete: () => setIsOpen(false)
10386
+ },
10387
+ value
10388
+ ) : null
10389
+ ) })
10390
+ ] }) })
10391
+ ] }) })
10392
+ ]
10393
+ }
10394
+ );
10395
+ };
10396
+ var CountrySelectOption = ({
10397
+ country,
10398
+ countryName,
10399
+ selectedCountry,
10400
+ onChange,
10401
+ onSelectComplete
10402
+ }) => {
10403
+ const handleSelect = () => {
10404
+ onChange(country);
10405
+ onSelectComplete();
10406
+ };
10407
+ return /* @__PURE__ */ jsxs(CommandItem, { className: "gap-2", onSelect: handleSelect, children: [
10408
+ /* @__PURE__ */ jsx(FlagComponent, { country, countryName }),
10409
+ /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: countryName }),
10410
+ /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground/50", children: `+${RPNInput.getCountryCallingCode(country)}` }),
10411
+ /* @__PURE__ */ jsx(
10412
+ CheckIcon,
10413
+ {
10414
+ className: `ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`
10415
+ }
10416
+ )
10417
+ ] });
10418
+ };
10419
+ var FlagComponent = ({ country, countryName }) => {
10420
+ const Flag2 = flags[country];
10421
+ return /* @__PURE__ */ jsx("span", { className: "flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg:not([class*='size-'])]:size-full", children: Flag2 && /* @__PURE__ */ jsx(Flag2, { title: countryName }) });
10422
+ };
9924
10423
 
9925
10424
  // src/data/mexicoStates.ts
9926
10425
  var MEXICO_STATES = [
@@ -10101,6 +10600,6 @@ function VerifiedProfessionalBadge({
10101
10600
  );
10102
10601
  }
10103
10602
 
10104
- export { AvatarEditor, AvatarEditorDialog, BLOCKS_DATA_ENVIRONMENTS, Button, CalendarContext, CalendarSubscribeButton, CalendarView, CalendarWidget, CardInput, ChatRoomView, ChatSidebar, ChatSidebarContext, ChatSidebarProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmojiPicker, EmojiPickerPopover, EmptyState, EnvironmentBanner, EnvironmentContext, EnvironmentDot, EnvironmentMiniBadge, EnvironmentSwitcher, ErrorState, EventDialog, EventRsvpBadge, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, MexicoMap, MiniCalendar, NotificationsContext, NotificationsWidget, OrgSwitcher, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, USAddressInput, UpcomingEvents, VerifiedProfessionalBadge, VideoPlayer, buttonVariants, cn, createLiveHlsConfig, createVodHlsConfig, defaultLanguages, describePlaybackError, getEnvironmentDotClass, getEnvironmentLabel, isBlocksDataEnvironment, normalizeEmojiQuery, shouldRetryLiveEdge404, toggleVariants, useCalendarContext, useChatRoom, useChatSidebar, useDebouncedValue, useDebouncedValueStrict, useEnvironmentContext, useHlsPlayback, useLanguageContext, useNotificationsContext, usePlaybackStats };
10603
+ export { AvatarEditor, AvatarEditorDialog, BLOCKS_DATA_ENVIRONMENTS, Button, CalendarContext, CalendarSubscribeButton, CalendarView, CalendarWidget, CardInput, ChatRoomView, ChatSidebar, ChatSidebarContext, ChatSidebarProvider, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmojiPicker, EmojiPickerPopover, EmptyState, EnvironmentBanner, EnvironmentContext, EnvironmentDot, EnvironmentMiniBadge, EnvironmentSwitcher, ErrorState, EventDialog, EventRsvpBadge, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, MexicoMap, MiniCalendar, NotificationsContext, NotificationsWidget, OrgSwitcher, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, SearchCommand, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, USAddressInput, UpcomingEvents, VerifiedProfessionalBadge, VideoPlayer, buttonVariants, cn, createLiveHlsConfig, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getEnvironmentDotClass, getEnvironmentLabel, isBlocksDataEnvironment, normalizeEmojiQuery, shouldRetryLiveEdge404, toggleVariants, useCalendarContext, useChatRoom, useChatSidebar, useDebouncedValue, useDebouncedValueStrict, useEnvironmentContext, useHlsPlayback, useLanguageContext, useNotificationsContext, usePlaybackStats, useSearchHotkey };
10105
10604
  //# sourceMappingURL=index.js.map
10106
10605
  //# sourceMappingURL=index.js.map