@hoosei/voxweave-react
Version:
A customizable and interactive voice UI component for React applications
226 lines (225 loc) • 6.32 kB
JavaScript
import { Root as m, Trigger as v, Portal as f, Content as h, Viewport as p, Item as b, ItemText as _, ItemIndicator as C } from "./index53.js";
import { Root as k, Viewport as N, Scrollbar as y, Thumb as w } from "./index54.js";
import { cn as t } from "./index8.js";
import { jsxs as l, jsx as a } from "react/jsx-runtime";
import I from "./index44.js";
import T from "./index43.js";
function S(o) {
if (!o) return "rgba(0, 0, 0, 0.9)";
const e = o.match(/\d+/g);
return !e || e.length < 3 || (parseInt(e[0]) * 299 + parseInt(e[1]) * 587 + parseInt(e[2]) * 114) / 1e3 > 128 ? "rgba(0, 0, 0, 0.9)" : "rgba(255, 255, 255, 0.9)";
}
const P = [{
language_id: "en",
name: "English",
flag: "🇺🇸"
}, {
language_id: "ja",
name: "Japanese",
flag: "🇯🇵"
}, {
language_id: "zh",
name: "Chinese",
flag: "🇨🇳"
}, {
language_id: "de",
name: "German",
flag: "🇩🇪"
}, {
language_id: "hi",
name: "Hindi",
flag: "🇮🇳"
}, {
language_id: "fr",
name: "French",
flag: "🇫🇷"
}, {
language_id: "ko",
name: "Korean",
flag: "🇰🇷"
}, {
language_id: "pt",
name: "Portuguese",
flag: "🇵🇹"
}, {
language_id: "it",
name: "Italian",
flag: "🇮🇹"
}, {
language_id: "es",
name: "Spanish",
flag: "🇪🇸"
}, {
language_id: "id",
name: "Indonesian",
flag: "🇮🇩"
}, {
language_id: "nl",
name: "Dutch",
flag: "🇳🇱"
}, {
language_id: "tr",
name: "Turkish",
flag: "🇹🇷"
}, {
language_id: "fil",
name: "Filipino",
flag: "🇵🇭"
}, {
language_id: "pl",
name: "Polish",
flag: "🇵🇱"
}, {
language_id: "sv",
name: "Swedish",
flag: "🇸🇪"
}, {
language_id: "bg",
name: "Bulgarian",
flag: "🇧🇬"
}, {
language_id: "ro",
name: "Romanian",
flag: "🇷🇴"
}, {
language_id: "ar",
name: "Arabic",
flag: "🇸🇦"
}, {
language_id: "cs",
name: "Czech",
flag: "🇨🇿"
}, {
language_id: "el",
name: "Greek",
flag: "🇬🇷"
}, {
language_id: "fi",
name: "Finnish",
flag: "🇫🇮"
}, {
language_id: "hr",
name: "Croatian",
flag: "🇭🇷"
}, {
language_id: "ms",
name: "Malay",
flag: "🇲🇾"
}, {
language_id: "sk",
name: "Slovak",
flag: "🇸🇰"
}, {
language_id: "da",
name: "Danish",
flag: "🇩🇰"
}, {
language_id: "ta",
name: "Tamil",
flag: "🇮🇳"
}, {
language_id: "uk",
name: "Ukrainian",
flag: "🇺🇦"
}, {
language_id: "ru",
name: "Russian",
flag: "🇷🇺"
}];
function V({
value: o,
onValueChange: e,
languages: g,
className: c,
darkMode: r,
backgroundColor: s
}) {
const d = g.find((n) => n.language_id === o), i = () => s || (r ? "rgba(23, 23, 23, 0.9)" : "rgba(255, 255, 255, 0.9)"), x = () => r ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)", u = () => S(i());
return /* @__PURE__ */ l(m, {
value: o,
onValueChange: e,
children: [/* @__PURE__ */ l(v, {
className: t("vox:flex vox:items-center vox:justify-between vox:gap-2 vox:rounded-full vox:px-3 vox:py-2 vox:text-sm", "vox:border vox:focus:vox:outline-none vox:focus:vox:ring-2 vox:focus:vox:ring-opacity-50", c),
style: {
backgroundColor: i(),
borderColor: x(),
color: u()
},
"aria-label": "Select language",
children: [/* @__PURE__ */ l("div", {
className: "vox:flex vox:items-center vox:gap-2",
children: [/* @__PURE__ */ a("span", {
className: "vox:text-lg",
role: "img",
"aria-hidden": "true",
children: d?.flag
}), /* @__PURE__ */ a("span", {
className: "vox:sr-only",
children: d?.name
})]
}), /* @__PURE__ */ a(I, {
className: "vox:h-4 vox:w-4 vox:opacity-50",
"aria-hidden": "true"
})]
}), /* @__PURE__ */ a(f, {
children: /* @__PURE__ */ a(h, {
className: t("vox:overflow-hidden vox:rounded-xl vox:border vox:shadow-md", "vox:animate-in vox:fade-in-80 vox:zoom-in-95"),
style: {
backgroundColor: i(),
borderColor: x()
},
position: "popper",
sideOffset: 5,
align: "start",
children: /* @__PURE__ */ l(k, {
className: "vox:h-[var(--radix-select-content-available-height)] vox:max-h-[300px]",
type: "auto",
children: [/* @__PURE__ */ a(p, {
asChild: !0,
children: /* @__PURE__ */ a(N, {
className: "vox:p-1",
children: g.map((n) => /* @__PURE__ */ l(b, {
value: n.language_id,
className: t("vox:relative vox:flex vox:items-center vox:gap-2 vox:px-3 vox:py-2 vox:text-sm vox:rounded-lg", "vox:select-none vox:cursor-pointer", "vox:focus:vox:outline-none", "hover:vox:bg-black/10 dark:hover:vox:bg-white/10", "focus:vox:bg-black/10 dark:focus:vox:bg-white/10"),
style: {
color: u(),
backgroundColor: "transparent"
},
children: [/* @__PURE__ */ a("span", {
className: "vox:text-lg",
"aria-hidden": "true",
children: n.flag
}), /* @__PURE__ */ a(_, {
children: n.name
}), /* @__PURE__ */ a(C, {
className: "vox:absolute vox:right-2",
children: /* @__PURE__ */ a(T, {
className: "vox:h-4 vox:w-4",
"aria-hidden": "true"
})
})]
}, n.language_id))
})
}), /* @__PURE__ */ a(y, {
className: "vox:flex vox:select-none vox:touch-none vox:p-0.5 vox:transition-colors vox:duration-150 vox:ease-out vox:rounded-r-md",
orientation: "vertical",
style: {
backgroundColor: r ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"
},
children: /* @__PURE__ */ a(w, {
className: "vox:relative vox:flex-1 vox:rounded-full",
style: {
backgroundColor: r ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"
}
})
})]
})
})
})]
});
}
export {
V as LanguageSelector,
P as languages
};
//# sourceMappingURL=index10.js.map