@vertesia/ui 1.0.0-dev.20260305.083323Z → 1.0.0

package/src/core/components/shadcn/radioGroup.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import * as React from "react"
+
+import { cn } from "../libs/utils"
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center"
+      >
+        <span className="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+interface RadioGroupOption {
+  id: string
+  label: string
+  description?: React.ReactNode
+}
+
+export abstract class RadioGroupAdapter<T> {
+  abstract idOf(item: T): string
+  abstract labelOf(item: T): string
+  descriptionOf(_item: T): React.ReactNode { return undefined }
+  selectedClassName(_item: T): string { return 'border-accent-foreground' }
+}
+
+interface RadioGroupProps<T = RadioGroupOption> {
+  options: T[]
+  selected?: T
+  onSelect: (option: T) => void
+  adapter?: RadioGroupAdapter<T>
+}
+
+function RadioGroup<T = RadioGroupOption>({ onSelect, selected, options, adapter }: RadioGroupProps<T>) {
+  const getId = (o: T) => adapter ? adapter.idOf(o) : (o as unknown as RadioGroupOption).id
+  const getLabel = (o: T) => adapter ? adapter.labelOf(o) : (o as unknown as RadioGroupOption).label
+  const getDescription = (o: T) => adapter ? adapter.descriptionOf(o) : (o as unknown as RadioGroupOption).description
+  const getSelectedClass = (o: T) => adapter ? adapter.selectedClassName(o) : 'border-accent-foreground'
+
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      value={selected ? getId(selected) : undefined}
+      onValueChange={(id: string) => {
+        const option = options.find((o) => getId(o) === id)
+        if (option) onSelect(option)
+      }}
+      className="space-y-4"
+    >
+      {options.map((option) => {
+        const isSelected = selected ? getId(selected) === getId(option) : false
+        return (
+          <RadioGroupPrimitive.Item
+            key={getId(option)}
+            value={getId(option)}
+            className={cn(
+              'relative block w-full cursor-pointer rounded-lg border border-border bg-accent px-6 py-4 shadow-2xs text-left',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'sm:flex sm:justify-between',
+              isSelected && getSelectedClass(option),
+            )}
+          >
+            <span className="flex items-center">
+              <span className="flex flex-col text-sm">
+                <span className="font-medium text-text">{getLabel(option)}</span>
+                {getDescription(option) && (
+                  <span className="text-muted-foreground">{getDescription(option)}</span>
+                )}
+              </span>
+            </span>
+          </RadioGroupPrimitive.Item>
+        )
+      })}
+    </RadioGroupPrimitive.Root>
+  )
+}
+
+/** @deprecated use RadioGroupAdapter */
+export const RadioOptionAdapter = RadioGroupAdapter
+
+export { RadioGroup, RadioGroupItem }
+export type { RadioGroupOption, RadioGroupProps }
+

package/src/core/components/shadcn/switch.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as React from "react"
+
+import { cn } from "../libs/utils"
+
+const sizes = {
+  'sm': ['h-5 w-8', 'size-3', 'translate-x-4'],
+  'md': ['h-6 w-11', 'size-4', 'translate-x-6'],
+  'lg': ['h-8 w-16', 'size-6', 'translate-x-9'],
+}
+
+interface SwitchProps {
+  size?: 'sm' | 'md' | 'lg'
+  value: boolean
+  onChange: (value: boolean) => void
+  children?: React.ReactNode
+  className?: string
+  disabled?: boolean
+}
+
+function Switch({ className, size = 'md', value, onChange, children, disabled }: SwitchProps) {
+  const [trackSize, thumbSize, thumbTranslate] = sizes[size]
+  const switchEl = (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      checked={value}
+      onCheckedChange={onChange}
+      disabled={disabled}
+      className={cn(
+        "data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-full border focus-visible:ring-3 aria-invalid:ring-3 peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        trackSize,
+        !children && className
+      )}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-white rounded-full pointer-events-none block ring-0 transition-transform",
+          thumbSize,
+          value ? thumbTranslate : 'translate-x-1',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+
+  if (children) {
+    return (
+      <div className={cn("flex items-center", className)}>
+        {switchEl}
+        <span className="px-2">{children}</span>
+      </div>
+    )
+  }
+
+  return switchEl
+}
+
+export { Switch }

package/src/core/components/shadcn/tabs.tsx

@@ -6,13 +6,13 @@ import { cn } from "../libs/utils";
 import { SelectBox } from "./selectBox";
 
 export interface Tab {
-    name: string;
-    current?: boolean;
-    href?: string;
-    label: ReactNode;
-    content: ReactNode;
-    disabled?: boolean;
-    is_allowed?: boolean;
+  name: string;
+  current?: boolean;
+  href?: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+  is_allowed?: boolean;
 }
 
 const TabsContext = React.createContext<{
@@ -39,6 +39,7 @@ interface TabsProps {
   defaultValue?: string;
   className?: string;
   fullWidth?: boolean;
+  fullHeight?: boolean;
   children?: React.ReactNode;
   onTabChange?: (tabName: string) => void;
   responsive?: boolean;
@@ -52,6 +53,7 @@ const Tabs = ({
   current,
   className,
   fullWidth,
+  fullHeight,
   children,
   onTabChange,
   responsive = false,
@@ -119,7 +121,7 @@ const Tabs = ({
 
   const handleValueChange = (newValue: string) => {
     setValue(newValue);
-    
+
     // Update the URL hash when tab changes (only if updateHash is true and not controlled by parent)
     if (updateHash && !current) {
       // Preserve existing history state when changing hash
@@ -127,7 +129,7 @@ const Tabs = ({
       const newUrl = window.location.pathname + window.location.search + '#' + newValue;
       window.history.pushState(currentState, '', newUrl);
     }
-    
+
     if (onTabChange) {
       onTabChange(newValue);
     }
@@ -143,7 +145,7 @@ const Tabs = ({
         defaultValue={value || visibleTabs[0]?.name}
         value={value}
         onValueChange={handleValueChange}
-        className={className}
+        className={cn("flex-1 flex flex-col min-h-0 px-2", fullHeight && "h-full", className)}
       >
         {children}
       </TabsPrimitive.Root>
@@ -151,7 +153,7 @@ const Tabs = ({
   );
 };
 
-const TabsBar = ({ className }: { className?: string }) => {
+const TabsBar = ({ className, sticky }: { className?: string; sticky?: boolean }) => {
   const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
 
   const fullWidth = size !== 0;
@@ -182,7 +184,7 @@ const TabsBar = ({ className }: { className?: string }) => {
         <div className="px-2 block lg:hidden">
           <SelectBox
             label="Tab"
-            className={(className)}
+            className={cn(sticky && "sticky top-0 bg-background z-10", className)}
             options={tabs}
             optionLabel={(tab: Tab) => typeof tab.label === 'string' ? tab.label : String(tab.label)}
             value={tabs.find(tab => tab.name === current)}
@@ -192,9 +194,9 @@ const TabsBar = ({ className }: { className?: string }) => {
           />
         </div>
       )}
-      <TabsList size={size} variant={variant} className={cn((fullWidth ? "w-full" : ""), className, (responsive ? "hidden lg:flex" : ""))}>
+      <TabsList size={size} variant={variant} className={cn((fullWidth ? "w-full" : ""), sticky && "sticky top-0 bg-background z-10", className, (responsive ? "hidden lg:flex" : ""))}>
         {tabs.map((tab) => (
-          
+
           <TabsTrigger
             key={tab.name}
             value={tab.name}
@@ -237,7 +239,7 @@ const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttribu
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        variant === "tabs" 
+        variant === "tabs"
           ? "border-b -mb-px flex space-x-4"
           : "flex space-x-2 p-1 rounded-md",
         className
@@ -275,19 +277,19 @@ const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefA
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        variant === "tabs" 
+        variant === "tabs"
           ? cn(
-              "border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer",
-              "border-transparent text-muted-foreground hover:border-border hover:text-foreground",
-              "data-[state=active]:border-primary data-[state=active]:text-primary",
-              "disabled:pointer-events-none disabled:opacity-50"
-            )
+            "border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer",
+            "border-transparent text-muted-foreground hover:border-border hover:text-foreground",
+            "data-[state=active]:border-primary data-[state=active]:text-primary",
+            "disabled:pointer-events-none disabled:opacity-50"
+          )
           : cn(
-              "px-3 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer rounded-sm transition-colors",
-              "tborder border-input bg-muted shadow-xs hover:bg-muted ring-inset",
-              "data-[state=active]:bg-primary data-[state=active]:text-white data-[state=active]:shadow-sm",
-              "disabled:pointer-events-none disabled:opacity-50"
-            ),
+            "px-3 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer rounded-sm transition-colors",
+            "tborder border-input bg-muted shadow-xs hover:bg-muted ring-inset",
+            "data-[state=active]:bg-primary data-[state=active]:text-white data-[state=active]:shadow-sm",
+            "disabled:pointer-events-none disabled:opacity-50"
+          ),
         className,
         size ? `w-1/${size}` : ""
       )}
@@ -308,7 +310,7 @@ const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefA
     ref={ref}
     className={cn(
       "focus-visible:outline-none",
-      "flex-1 overflow-y-auto min-h-0 pt-2",
+      "flex-1 overflow-y-auto min-h-0 pt-2 pb-4",
       className
     )}
     {...props}

package/src/core/components/shadcn/theme/ThemeSwitcher.tsx

@@ -2,38 +2,42 @@ import { Computer, Moon, Sun } from "lucide-react"
 
 import { Button } from "../button"
 import { useTheme } from "./ThemeProvider"
+import { useUITranslation } from "../../../../i18n/index.js"
 
 interface ModeOptionProps {
   current: string;
   option: ("system" | "light" | "dark");
   setTheme: (theme: "system" | "light" | "dark") => void;
   icon: React.ReactNode;
+  alt: string;
 }
 
-export function ModeOption({ option, current, setTheme, icon }: ModeOptionProps) {
+export function ModeOption({ option, current, setTheme, icon, alt }: ModeOptionProps) {
   return (
-    <Button variant={current === option ? "secondary" : "outline"} size="sm" onClick={() => setTheme(option)} alt={option}>
+    <Button variant={current === option ? "secondary" : "outline"} size="sm" onClick={() => setTheme(option)} alt={alt}>
       {icon}
     </Button>
   );
 }
 
 interface ModeToggleProps {
-  /** Label shown to the left of the buttons. Defaults to "Theme". Pass `false` to hide. */
+  /** Label shown to the left of the buttons. Defaults to translated "Theme". Pass `false` to hide. */
   label?: string | false;
   className?: string;
 }
 
-export function ModeToggle({ label = "Theme", className }: ModeToggleProps = {}) {
+export function ModeToggle({ label, className }: ModeToggleProps = {}) {
   const { setTheme, theme } = useTheme()
+  const { t } = useUITranslation()
+  const resolvedLabel = label === false ? false : (label ?? t('theme.label'))
 
   return (
-    <div className={className ?? (label ? "flex justify-between px-2 items-center" : "flex items-center gap-1")}>
-      {label && <p className="text-sm font-semibold">{label}</p>}
+    <div className={className ?? (resolvedLabel ? "flex justify-between px-2 items-center" : "flex items-center gap-1")}>
+      {resolvedLabel && <p className="text-sm font-semibold">{resolvedLabel}</p>}
       <div className="flex gap-2">
-        <ModeOption current={theme} option="system" setTheme={setTheme} icon={<Computer />} />
-        <ModeOption current={theme} option="light" setTheme={setTheme} icon={<Sun />} />
-        <ModeOption current={theme} option="dark" setTheme={setTheme} icon={<Moon />} />
+        <ModeOption current={theme} option="system" setTheme={setTheme} icon={<Computer />} alt={t('theme.system')} />
+        <ModeOption current={theme} option="light" setTheme={setTheme} icon={<Sun />} alt={t('theme.light')} />
+        <ModeOption current={theme} option="dark" setTheme={setTheme} icon={<Moon />} alt={t('theme.dark')} />
       </div>
     </div>
   )

package/src/core/components/toast/NotificationPanel.tsx

@@ -1,6 +1,6 @@
-import { Transition } from "@headlessui/react"
+import { AnimatePresence, motion } from "framer-motion"
 import { CircleCheck, AlertTriangle, Info, CircleX, X } from "lucide-react"
-import { Fragment, useEffect, useState, useRef } from "react"
+import { useEffect, useState, useRef } from "react"
 import { ToastProps } from "./ToastProps.js"
 
 const icons = {
@@ -57,50 +57,44 @@ export function NotificationPanel({ data, onClose }: NotificationPanelProps) {
         >
             <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
                 {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
-                <Transition
-                    appear={true}
-                    show={show}
-                    as={Fragment}
-                    afterLeave={onClose}
-                    enter="transform ease-out duration-700 transition"
-                    enterFrom="translate-y-0 opacity-0 sm:translate-y-0 sm:translate-x-2"
-                    enterTo="translate-y-2 opacity-100 sm:translate-x-0"
-                    leave="transition ease-in duration-300"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                >
-                    <div
-                        className="pointer-events-auto w-full max-w-md overflow-hidden rounded-lg bg-muted shadow-lg ring-1 ring-border"
-                        onMouseEnter={clearCurrentTimeout}
-                        onMouseLeave={resetTimeout}
-                    >
-                        <div className="p-5">
-                            <div className="flex items-start">
-                                <div className="shrink-0">
-                                    <Icon className={`size-6 ${color}`} aria-hidden="true" />
-                                </div>
-                                <div className="ml-3 flex-1 pt-0.5 min-w-0">
-                                    <p className="text-sm font-semibold text-foreground break-words">{data.title}</p>
-                                    {data.description && (
-                                        <p className="mt-2 text-sm text-muted break-words whitespace-pre-wrap leading-relaxed">
-                                            {data.description}
-                                        </p>
-                                    )}
-                                </div>
-                                <div className="ml-4 flex shrink-0">
-                                    <button
-                                        type="button"
-                                        className="inline-flex rounded-md bg-muted text-muted hover:text-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
-                                        onClick={() => setShow(false)}
-                                    >
-                                        <span className="sr-only">Close</span>
-                                        <X className="size-5" aria-hidden="true" />
-                                    </button>
+                <AnimatePresence onExitComplete={onClose}>
+                    {show && (
+                        <motion.div
+                            className="pointer-events-auto w-full max-w-md overflow-hidden rounded-lg bg-muted shadow-lg ring-1 ring-border"
+                            initial={{ opacity: 0, x: 8 }}
+                            animate={{ opacity: 1, x: 0, transition: { ease: 'easeOut', duration: 0.7 } }}
+                            exit={{ opacity: 0, transition: { ease: 'easeIn', duration: 0.3 } }}
+                            onMouseEnter={clearCurrentTimeout}
+                            onMouseLeave={resetTimeout}
+                        >
+                            <div className="p-5">
+                                <div className="flex items-start">
+                                    <div className="shrink-0">
+                                        <Icon className={`size-6 ${color}`} aria-hidden="true" />
+                                    </div>
+                                    <div className="ml-3 flex-1 pt-0.5 min-w-0">
+                                        <p className="text-sm font-semibold text-foreground break-words">{data.title}</p>
+                                        {data.description && (
+                                            <p className="mt-2 text-sm text-muted break-words whitespace-pre-wrap leading-relaxed">
+                                                {data.description}
+                                            </p>
+                                        )}
+                                    </div>
+                                    <div className="ml-4 flex shrink-0">
+                                        <button
+                                            type="button"
+                                            className="inline-flex rounded-md bg-muted text-muted hover:text-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+                                            onClick={() => setShow(false)}
+                                        >
+                                            <span className="sr-only">Close</span>
+                                            <X className="size-5" aria-hidden="true" />
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                </Transition>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
             </div>
         </div>
     )

package/src/env/index.ts

@@ -23,7 +23,8 @@ export interface EnvProps {
         providerType?: string,
     },
     region?: string,
-    datadog?: boolean,
+    datadogRum?: boolean,
+    datadogLogs?: boolean,
     logger?: {
         info: (msg: string, ...args: any) => void,
         warn: (msg: string, ...args: any) => void,
@@ -102,9 +103,21 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
     get region() {
         return this._props?.region;
     }
-
+    
+    /**
+     * @deprecated Use datadogRum and datadogLogs instead for more granular control. This will be removed in a future release. Is an alias for DatadogRUM
+     * 
+     */
     get datadog() {
-        return this._props?.datadog ?? false;
+        return this.datadogRum;
+    }
+
+    get datadogRum() {
+        return this._props?.datadogRum ?? false;
+    }
+
+    get datadogLogs() {
+        return this._props?.datadogLogs ?? false;
     }
 
     get logger() {