@underverse-ui/underverse 0.1.11 → 0.1.13

package/dist/index.d.cts

@@ -888,6 +888,36 @@ interface AccessDeniedProps {
 }
 declare function AccessDenied({ title, description, variant, icon: Icon, className, children, }: AccessDeniedProps): react_jsx_runtime.JSX.Element;
 
+type ThemeMode = "light" | "dark" | "system";
+interface ThemeToggleHeadlessProps {
+    theme: ThemeMode;
+    onChange: (theme: ThemeMode) => void;
+    labels?: {
+        heading?: string;
+        light?: string;
+        dark?: string;
+        system?: string;
+    };
+    className?: string;
+}
+declare function ThemeToggleHeadless({ theme, onChange, labels, className, }: ThemeToggleHeadlessProps): react_jsx_runtime.JSX.Element;
+
+interface LanguageOption {
+    code: string;
+    name: string;
+    flag?: string;
+}
+interface LanguageSwitcherHeadlessProps {
+    locales: LanguageOption[];
+    currentLocale: string;
+    onSwitch: (code: string) => void;
+    labels?: {
+        heading?: string;
+    };
+    className?: string;
+}
+declare function LanguageSwitcherHeadless({ locales, currentLocale, onSwitch, labels, className, }: LanguageSwitcherHeadlessProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
 /**
@@ -1241,4 +1271,4 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
     };
 };
 
-export { AccessDenied, Alert, Avatar, Badge, Badge as BadgeBase, BottomSheet, Breadcrumb, Button, ButtonLoading, type ButtonProps, Card, Carousel, CategoryTreeSelect, Checkbox, type CheckboxProps, ClientOnly, Combobox, type ComboboxProps, CompactPagination, type CompactPaginationProps, DataTable, type DataTableColumn, type DataTableQuery, DatePicker, type DatePickerProps, DateRangePicker, date as DateUtils, Drawer, DropdownMenu, FloatingContacts, Form, FormActions, FormCheckbox, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, FormSubmitButton, GlobalLoading, GradientBadge, ImageUpload, InlineLoading, Input, type InputProps, InteractiveBadge, Label, LoadingBar, LoadingDots, LoadingSpinner, Modal, MultiCombobox, type MultiComboboxProps, NotificationBadge, NotificationModal, NumberInput, PageLoading, Pagination, type PaginationProps, PasswordInput, PillTabs, Popover, Progress, PulseBadge, RadioGroup, SIZE_STYLES_BTN, ScrollArea, Section, Sheet, SidebarSheet, SimplePagination, type SimplePaginationProps, SimpleTabs, Skeleton, SlideOver, Slider, SmartImage, type Sorter, StatusBadge, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TagBadge, Textarea, ToastProvider, Tooltip, type UnderverseLocale, VARIANT_STYLES_ALERT, VARIANT_STYLES_BTN, VerticalTabs, cn, getUnderverseMessages, underverseMessages, useFormField, useToast };
+export { AccessDenied, Alert, Avatar, Badge, Badge as BadgeBase, BottomSheet, Breadcrumb, Button, ButtonLoading, type ButtonProps, Card, Carousel, CategoryTreeSelect, Checkbox, type CheckboxProps, ClientOnly, Combobox, type ComboboxProps, CompactPagination, type CompactPaginationProps, DataTable, type DataTableColumn, type DataTableQuery, DatePicker, type DatePickerProps, DateRangePicker, date as DateUtils, Drawer, DropdownMenu, FloatingContacts, Form, FormActions, FormCheckbox, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, FormSubmitButton, GlobalLoading, GradientBadge, ImageUpload, InlineLoading, Input, type InputProps, InteractiveBadge, Label, type LanguageOption, LanguageSwitcherHeadless as LanguageSwitcher, LanguageSwitcherHeadless, type LanguageSwitcherHeadlessProps, type LanguageSwitcherHeadlessProps as LanguageSwitcherProps, LoadingBar, LoadingDots, LoadingSpinner, Modal, MultiCombobox, type MultiComboboxProps, NotificationBadge, NotificationModal, NumberInput, PageLoading, Pagination, type PaginationProps, PasswordInput, PillTabs, Popover, Progress, PulseBadge, RadioGroup, SIZE_STYLES_BTN, ScrollArea, Section, Sheet, SidebarSheet, SimplePagination, type SimplePaginationProps, SimpleTabs, Skeleton, SlideOver, Slider, SmartImage, type Sorter, StatusBadge, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TagBadge, Textarea, type ThemeMode, ThemeToggleHeadless as ThemeToggle, ThemeToggleHeadless, type ThemeToggleHeadlessProps, type ThemeToggleHeadlessProps as ThemeToggleProps, ToastProvider, Tooltip, type UnderverseLocale, VARIANT_STYLES_ALERT, VARIANT_STYLES_BTN, VerticalTabs, cn, getUnderverseMessages, underverseMessages, useFormField, useToast };

package/dist/index.d.ts

@@ -888,6 +888,36 @@ interface AccessDeniedProps {
 }
 declare function AccessDenied({ title, description, variant, icon: Icon, className, children, }: AccessDeniedProps): react_jsx_runtime.JSX.Element;
 
+type ThemeMode = "light" | "dark" | "system";
+interface ThemeToggleHeadlessProps {
+    theme: ThemeMode;
+    onChange: (theme: ThemeMode) => void;
+    labels?: {
+        heading?: string;
+        light?: string;
+        dark?: string;
+        system?: string;
+    };
+    className?: string;
+}
+declare function ThemeToggleHeadless({ theme, onChange, labels, className, }: ThemeToggleHeadlessProps): react_jsx_runtime.JSX.Element;
+
+interface LanguageOption {
+    code: string;
+    name: string;
+    flag?: string;
+}
+interface LanguageSwitcherHeadlessProps {
+    locales: LanguageOption[];
+    currentLocale: string;
+    onSwitch: (code: string) => void;
+    labels?: {
+        heading?: string;
+    };
+    className?: string;
+}
+declare function LanguageSwitcherHeadless({ locales, currentLocale, onSwitch, labels, className, }: LanguageSwitcherHeadlessProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
 /**
@@ -1241,4 +1271,4 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
     };
 };
 
-export { AccessDenied, Alert, Avatar, Badge, Badge as BadgeBase, BottomSheet, Breadcrumb, Button, ButtonLoading, type ButtonProps, Card, Carousel, CategoryTreeSelect, Checkbox, type CheckboxProps, ClientOnly, Combobox, type ComboboxProps, CompactPagination, type CompactPaginationProps, DataTable, type DataTableColumn, type DataTableQuery, DatePicker, type DatePickerProps, DateRangePicker, date as DateUtils, Drawer, DropdownMenu, FloatingContacts, Form, FormActions, FormCheckbox, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, FormSubmitButton, GlobalLoading, GradientBadge, ImageUpload, InlineLoading, Input, type InputProps, InteractiveBadge, Label, LoadingBar, LoadingDots, LoadingSpinner, Modal, MultiCombobox, type MultiComboboxProps, NotificationBadge, NotificationModal, NumberInput, PageLoading, Pagination, type PaginationProps, PasswordInput, PillTabs, Popover, Progress, PulseBadge, RadioGroup, SIZE_STYLES_BTN, ScrollArea, Section, Sheet, SidebarSheet, SimplePagination, type SimplePaginationProps, SimpleTabs, Skeleton, SlideOver, Slider, SmartImage, type Sorter, StatusBadge, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TagBadge, Textarea, ToastProvider, Tooltip, type UnderverseLocale, VARIANT_STYLES_ALERT, VARIANT_STYLES_BTN, VerticalTabs, cn, getUnderverseMessages, underverseMessages, useFormField, useToast };
+export { AccessDenied, Alert, Avatar, Badge, Badge as BadgeBase, BottomSheet, Breadcrumb, Button, ButtonLoading, type ButtonProps, Card, Carousel, CategoryTreeSelect, Checkbox, type CheckboxProps, ClientOnly, Combobox, type ComboboxProps, CompactPagination, type CompactPaginationProps, DataTable, type DataTableColumn, type DataTableQuery, DatePicker, type DatePickerProps, DateRangePicker, date as DateUtils, Drawer, DropdownMenu, FloatingContacts, Form, FormActions, FormCheckbox, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, FormSubmitButton, GlobalLoading, GradientBadge, ImageUpload, InlineLoading, Input, type InputProps, InteractiveBadge, Label, type LanguageOption, LanguageSwitcherHeadless as LanguageSwitcher, LanguageSwitcherHeadless, type LanguageSwitcherHeadlessProps, type LanguageSwitcherHeadlessProps as LanguageSwitcherProps, LoadingBar, LoadingDots, LoadingSpinner, Modal, MultiCombobox, type MultiComboboxProps, NotificationBadge, NotificationModal, NumberInput, PageLoading, Pagination, type PaginationProps, PasswordInput, PillTabs, Popover, Progress, PulseBadge, RadioGroup, SIZE_STYLES_BTN, ScrollArea, Section, Sheet, SidebarSheet, SimplePagination, type SimplePaginationProps, SimpleTabs, Skeleton, SlideOver, Slider, SmartImage, type Sorter, StatusBadge, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TagBadge, Textarea, type ThemeMode, ThemeToggleHeadless as ThemeToggle, ThemeToggleHeadless, type ThemeToggleHeadlessProps, type ThemeToggleHeadlessProps as ThemeToggleProps, ToastProvider, Tooltip, type UnderverseLocale, VARIANT_STYLES_ALERT, VARIANT_STYLES_BTN, VerticalTabs, cn, getUnderverseMessages, underverseMessages, useFormField, useToast };

package/dist/index.js

@@ -8485,6 +8485,199 @@ function AccessDenied({
   ] }) });
 }
 
+// ../../components/ui/ThemeToggleHeadless.tsx
+import { Moon, Sun, Monitor } from "lucide-react";
+import { useEffect as useEffect17, useRef as useRef10, useState as useState27 } from "react";
+import { createPortal as createPortal9 } from "react-dom";
+import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+function ThemeToggleHeadless({
+  theme,
+  onChange,
+  labels,
+  className
+}) {
+  const [isOpen, setIsOpen] = useState27(false);
+  const [mounted, setMounted] = useState27(false);
+  const triggerRef = useRef10(null);
+  const [dropdownPosition, setDropdownPosition] = useState27(null);
+  useEffect17(() => setMounted(true), []);
+  const themes = [
+    { value: "light", label: labels?.light ?? "Light", icon: Sun },
+    { value: "dark", label: labels?.dark ?? "Dark", icon: Moon },
+    { value: "system", label: labels?.system ?? "System", icon: Monitor }
+  ];
+  const current = mounted ? themes.find((t) => t.value === theme) || themes[2] : themes[2];
+  const CurrentIcon = current.icon;
+  const calculatePosition = () => {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const width = 192;
+    const left = rect.right + scrollLeft - width;
+    const top = rect.bottom + scrollTop + 8;
+    return { top, left, width };
+  };
+  return /* @__PURE__ */ jsxs37("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx43(
+      Button_default,
+      {
+        variant: "ghost",
+        size: "icon",
+        ref: triggerRef,
+        onClick: () => {
+          const next = !isOpen;
+          if (next) {
+            const pos = calculatePosition();
+            if (pos) setDropdownPosition(pos);
+          }
+          setIsOpen(next);
+        },
+        className: "bg-muted hover:bg-accent",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-label": labels?.heading ?? "Theme",
+        children: /* @__PURE__ */ jsx43(CurrentIcon, { className: "h-5 w-5" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs37(Fragment10, { children: [
+      typeof window !== "undefined" && createPortal9(/* @__PURE__ */ jsx43("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && createPortal9(
+        /* @__PURE__ */ jsx43(
+          "div",
+          {
+            className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
+            style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
+            onMouseDown: (e) => e.stopPropagation(),
+            role: "menu",
+            children: /* @__PURE__ */ jsxs37("div", { className: "p-2", children: [
+              /* @__PURE__ */ jsx43("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
+              themes.map((opt) => {
+                const Icon = opt.icon;
+                const active = theme === opt.value;
+                return /* @__PURE__ */ jsxs37(
+                  Button_default,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: () => {
+                      onChange(opt.value);
+                      setIsOpen(false);
+                    },
+                    className: cn(
+                      "w-full justify-start gap-3 h-auto py-2 px-3",
+                      active && "bg-primary/10 text-primary"
+                    ),
+                    role: "menuitemradio",
+                    "aria-checked": active,
+                    children: [
+                      /* @__PURE__ */ jsx43(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx43("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ jsx43("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    ]
+                  },
+                  opt.value
+                );
+              })
+            ] })
+          }
+        ),
+        document.body
+      )
+    ] })
+  ] });
+}
+
+// ../../components/ui/LanguageSwitcherHeadless.tsx
+import { useRef as useRef11, useState as useState28 } from "react";
+import { createPortal as createPortal10 } from "react-dom";
+import { Globe } from "lucide-react";
+import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
+function LanguageSwitcherHeadless({
+  locales,
+  currentLocale,
+  onSwitch,
+  labels,
+  className
+}) {
+  const [isOpen, setIsOpen] = useState28(false);
+  const [dropdownPosition, setDropdownPosition] = useState28(null);
+  const triggerButtonRef = useRef11(null);
+  const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
+  const calculatePosition = () => {
+    const rect = triggerButtonRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const width = 192;
+    const left = rect.right + scrollLeft - width;
+    const top = rect.bottom + scrollTop + 8;
+    return { top, left, width };
+  };
+  return /* @__PURE__ */ jsxs38("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx44(
+      Button_default,
+      {
+        variant: "ghost",
+        size: "icon",
+        ref: triggerButtonRef,
+        onClick: () => {
+          const next = !isOpen;
+          if (next) {
+            const pos = calculatePosition();
+            if (pos) setDropdownPosition(pos);
+          }
+          setIsOpen(next);
+        },
+        className: "bg-muted hover:bg-accent",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-label": labels?.heading ?? "Language",
+        title: labels?.heading ?? "Language",
+        children: /* @__PURE__ */ jsx44(Globe, { className: "h-5 w-5" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs38(Fragment11, { children: [
+      typeof window !== "undefined" && createPortal10(/* @__PURE__ */ jsx44("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && createPortal10(
+        /* @__PURE__ */ jsx44(
+          "div",
+          {
+            className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
+            style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
+            onMouseDown: (e) => e.stopPropagation(),
+            role: "menu",
+            children: /* @__PURE__ */ jsxs38("div", { className: "p-2", children: [
+              /* @__PURE__ */ jsx44("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
+              locales.map((language) => /* @__PURE__ */ jsxs38(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => {
+                    onSwitch(language.code);
+                    setIsOpen(false);
+                  },
+                  className: cn("w-full justify-start gap-3 h-auto py-2 px-3", currentLocale === language.code && "bg-primary/10 text-primary"),
+                  role: "menuitemradio",
+                  "aria-checked": currentLocale === language.code,
+                  children: [
+                    language.flag && /* @__PURE__ */ jsx44("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ jsx44("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ jsx44("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                  ]
+                },
+                language.code
+              ))
+            ] })
+          }
+        ),
+        document.body
+      )
+    ] })
+  ] });
+}
+
 // locales/en.json
 var en_default = {
   Common: {
@@ -8658,6 +8851,8 @@ export {
   Input_default as Input,
   InteractiveBadge,
   Label,
+  LanguageSwitcherHeadless as LanguageSwitcher,
+  LanguageSwitcherHeadless,
   LoadingBar,
   LoadingDots,
   LoadingSpinner,
@@ -8698,6 +8893,8 @@ export {
   Tabs,
   TagBadge,
   Textarea_default as Textarea,
+  ThemeToggleHeadless as ThemeToggle,
+  ThemeToggleHeadless,
   Toast_default as ToastProvider,
   Tooltip,
   VARIANT_STYLES_ALERT,