@vectramindnpm/unified-design-system 0.2.3 → 0.2.4

package/dist/index.js

@@ -620,7 +620,6 @@ TooltipContent.displayName = "TooltipContent";
 // src/components/ui/button.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var { color: color3 } = semanticTokens_default;
-var DEFAULT_VARIANT = "ghost";
 var buttonVariants = cva2(
   "",
   {
@@ -660,7 +659,7 @@ var buttonVariants = cva2(
       }
     },
     defaultVariants: {
-      variant: DEFAULT_VARIANT,
+      variant: "primary",
       size: "default",
       shape: "default"
     }
@@ -719,7 +718,7 @@ var pillDisabled = "opacity-50 cursor-not-allowed";
 var selectedGradient = "border border-interactive-brand bg-gradient-to-r from-[var(--color-button-selected-gradient-start)] via-[var(--color-button-selected-gradient-mid)] to-interactive-brand text-white font-extrabold";
 var Button = React4.forwardRef(
   ({ className, variant, size, shape, asChild = false, children, style, selected, tooltipText, ...props }, ref) => {
-    const finalVariant = variant ?? DEFAULT_VARIANT;
+    const finalVariant = variant ?? "primary";
     const finalSize = size ?? "default";
     const isPill = shape === "pill";
     const isLink = finalVariant === "link";
@@ -733,7 +732,7 @@ var Button = React4.forwardRef(
     const composed = cn(
       baseClasses2,
       isPill ? "rounded-full" : "",
-      variantClasses[colorBase],
+      variant ? variantClasses[colorBase] : "",
       // Link never carries the size scale's own padding/height — it reads as inline text.
       isLink ? "h-auto p-0" : isPill ? pillSizeClasses[finalSize] : sizeClasses[finalSize],
       isPill ? selected ? pillSelected : pillUnselected : selected ? selectedGradient : "",
@@ -744,15 +743,19 @@ var Button = React4.forwardRef(
       buttonVariants({ variant: finalVariant, size: finalSize, shape, className })
     );
     const mergedStyle = {
-      ...variantStyles[colorBase],
+      ...variant ? variantStyles[colorBase] : void 0,
       ...isPill && selected ? { ["--pill-selected-bg"]: `${color3.text.blue}24` } : void 0,
       ...style
     };
+    const accessibleProps = {
+      "aria-label": props["aria-label"] ?? tooltipText,
+      ...props
+    };
     const element = asChild && React4.isValidElement(children) ? React4.cloneElement(children, {
       className: cn(composed, children.props?.className),
       ref,
-      ...props
-    }) : /* @__PURE__ */ jsx4("button", { className: cn(composed), ref, style: mergedStyle, ...props, children });
+      ...accessibleProps
+    }) : /* @__PURE__ */ jsx4("button", { className: cn(composed), ref, style: mergedStyle, ...accessibleProps, children });
     if (!tooltipText) {
       return element;
     }
@@ -875,13 +878,14 @@ var ButtonIcon = React5.forwardRef(
     name,
     variant,
     size,
-    color: color6 = "primary",
+    color: color6,
     hoverColor,
     bgColor,
     bgHoverColor,
     actionColor,
     tooltipText,
     showTooltip = false,
+    label,
     disabled,
     className,
     type = "button",
@@ -892,12 +896,13 @@ var ButtonIcon = React5.forwardRef(
   }, ref) => {
     const isModalClose = variant === "modalClose";
     const isRefresh = variant === "refresh";
+    const isFilled = variant === "filled";
     const resolvedBg = bgColor ? { base: bgColor, hover: bgHoverColor } : actionColor ? actionColorTokens[actionColor] : void 0;
     const effectiveSize = isRefresh ? "sm" : size;
-    const effectiveColor = isRefresh ? "primary" : color6;
+    const effectiveColor = isRefresh ? "primary" : color6 ?? (isFilled ? "white" : "primary");
     const effectiveHoverColor = isRefresh ? "primary" : isModalClose ? "danger" : hoverColor;
     const effectiveShowTooltip = isRefresh ? true : showTooltip;
-    const effectiveTooltipText = tooltipText;
+    const effectiveTooltipText = tooltipText ?? label ?? props["aria-label"];
     const colorProps = getIconColorProps(effectiveColor, effectiveHoverColor, resolvedBg);
     const icon = /* @__PURE__ */ jsx5(
       "button",
@@ -1136,77 +1141,24 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/ui/delete-action.tsx
 import "react";
+import { useTranslation } from "react-i18next";
 
-// src/components/ui/icon.tsx
-import * as React8 from "react";
-import "class-variance-authority";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var Icon = React8.forwardRef(
-  ({
-    name,
-    variant,
-    size,
-    color: color6 = "primary",
-    hoverColor,
-    tooltipText,
-    showTooltip = false,
-    disabled,
-    className,
-    onClick,
-    style,
-    ...props
-  }, ref) => {
-    const colorProps = getIconColorProps(color6, hoverColor);
-    const icon = /* @__PURE__ */ jsx8(
-      "i",
-      {
-        ref,
-        className: cn(
-          `${name}`,
-          iconVariants({ variant, size }),
-          colorProps.className,
-          onClick && !disabled && "cursor-pointer",
-          className
-        ),
-        onClick,
-        style: { ...colorProps.style, ...style },
-        role: onClick ? "button" : void 0,
-        tabIndex: onClick ? 0 : void 0,
-        "aria-label": tooltipText || name,
-        onKeyDown: (e) => {
-          if (!onClick) return;
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onClick(
-              e
-            );
-          }
-        },
-        ...props
-      }
-    );
-    if (!showTooltip) {
-      return icon;
-    }
-    return /* @__PURE__ */ jsxs5(Tooltip, { children: [
-      /* @__PURE__ */ jsx8(TooltipTrigger, { asChild: true, children: icon }),
-      /* @__PURE__ */ jsx8(TooltipContent, { children: /* @__PURE__ */ jsx8("small", { children: tooltipText || name }) })
-    ] });
-  }
-);
-Icon.displayName = "Icon";
+// src/helpers/helpersIndex.ts
+var getTranslationKey = () => "translations";
 
 // src/components/ui/delete-action.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var DeleteAction = ({ onClick, tooltipText, showTooltip = true, className }) => {
-  return /* @__PURE__ */ jsx9(
-    Icon,
+  const translationKey = getTranslationKey();
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ jsx8(
+    ButtonIcon,
     {
       name: "icon-neo-trash",
       hoverColor: "danger",
       onClick,
       showTooltip,
-      tooltipText: tooltipText || "Delete",
+      tooltipText: tooltipText || t("ActionNames.delete"),
       className
     }
   );
@@ -1214,25 +1166,28 @@ var DeleteAction = ({ onClick, tooltipText, showTooltip = true, className }) =>
 var delete_action_default = DeleteAction;
 
 // src/components/ui/dialog.tsx
-import * as React10 from "react";
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var DialogContext = React10.createContext(void 0);
+import * as React9 from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var DialogContext = React9.createContext(void 0);
 function useDialog() {
-  const context = React10.useContext(DialogContext);
+  const context = React9.useContext(DialogContext);
   if (!context) {
     throw new Error("Dialog components must be used within Dialog");
   }
   return context;
 }
 var Dialog = ({ open: controlledOpen, onOpenChange, children }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React10.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React9.useState(false);
+  const [titleId, setTitleId] = React9.useState(void 0);
+  const [descriptionId, setDescriptionId] = React9.useState(void 0);
   const open = controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen;
   const setOpen = onOpenChange || setUncontrolledOpen;
-  return /* @__PURE__ */ jsx10(DialogContext.Provider, { value: { open, onOpenChange: setOpen }, children });
+  return /* @__PURE__ */ jsx9(DialogContext.Provider, { value: { open, onOpenChange: setOpen, titleId, descriptionId, setTitleId, setDescriptionId }, children });
 };
-var DialogTrigger = React10.forwardRef(({ onClick, ...props }, ref) => {
+var DialogTrigger = React9.forwardRef(({ onClick, ...props }, ref) => {
   const { onOpenChange } = useDialog();
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     Button,
     {
       ref,
@@ -1250,11 +1205,11 @@ DialogTrigger.displayName = "DialogTrigger";
 var DialogPortal = ({ children }) => {
   const { open } = useDialog();
   if (!open) return null;
-  return /* @__PURE__ */ jsx10(Fragment2, { children });
+  return /* @__PURE__ */ jsx9(Fragment2, { children });
 };
-var DialogClose = React10.forwardRef(({ onClick, ...props }, ref) => {
+var DialogClose = React9.forwardRef(({ onClick, ...props }, ref) => {
   const { onOpenChange } = useDialog();
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     Button,
     {
       ref,
@@ -1269,9 +1224,9 @@ var DialogClose = React10.forwardRef(({ onClick, ...props }, ref) => {
   );
 });
 DialogClose.displayName = "DialogClose";
-var DialogOverlay = React10.forwardRef(({ className, onClick, closeOnClick = true, ...props }, ref) => {
+var DialogOverlay = React9.forwardRef(({ className, onClick, closeOnClick = true, ...props }, ref) => {
   const { onOpenChange } = useDialog();
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       ref,
@@ -1288,9 +1243,10 @@ var DialogOverlay = React10.forwardRef(({ className, onClick, closeOnClick = tru
   );
 });
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React10.forwardRef(({ className, children, showCloseButton = true, closeOnEscape = true, closeOnOverlayClick = true, ...props }, ref) => {
-  const { onOpenChange } = useDialog();
-  React10.useEffect(() => {
+var DialogContent = React9.forwardRef(({ className, children, showCloseButton = true, closeOnEscape = true, closeOnOverlayClick = true, ...props }, ref) => {
+  const { onOpenChange, titleId, descriptionId } = useDialog();
+  const { t } = useTranslation2("translations");
+  React9.useEffect(() => {
     if (!closeOnEscape) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -1300,12 +1256,16 @@ var DialogContent = React10.forwardRef(({ className, children, showCloseButton =
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [onOpenChange, closeOnEscape]);
-  return /* @__PURE__ */ jsxs6(DialogPortal, { children: [
-    /* @__PURE__ */ jsx10(DialogOverlay, { closeOnClick: closeOnOverlayClick }),
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs5(DialogPortal, { children: [
+    /* @__PURE__ */ jsx9(DialogOverlay, { closeOnClick: closeOnOverlayClick }),
+    /* @__PURE__ */ jsxs5(
       "div",
       {
         ref,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
         className: cn(
           "fixed left-[50%] top-[50%] z-[var(--zindex-modal)] grid w-full max-w-6xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 animate-in fade-in-0 zoom-in-95 rounded-lg",
           className
@@ -1314,14 +1274,15 @@ var DialogContent = React10.forwardRef(({ className, children, showCloseButton =
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsx10(
+          showCloseButton && /* @__PURE__ */ jsx9(
             ButtonIcon,
             {
               type: "button",
               name: "icon-neo-close",
               variant: "modalClose",
               className: "absolute right-4 top-4",
-              onClick: () => onOpenChange(false)
+              onClick: () => onOpenChange(false),
+              tooltipText: t("ActionNames.close")
             }
           )
         ]
@@ -1333,7 +1294,7 @@ DialogContent.displayName = "DialogContent";
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx10(
+}) => /* @__PURE__ */ jsx9(
   "div",
   {
     className: cn(
@@ -1347,7 +1308,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx10(
+}) => /* @__PURE__ */ jsx9(
   "div",
   {
     className: cn(
@@ -1358,52 +1319,72 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
-  "h2",
-  {
-    ref,
-    className: cn(
-      "text-heading font-semibold leading-none tracking-tight",
-      className
-    ),
-    ...props
-  }
-));
+var DialogTitle = React9.forwardRef(({ className, id, ...props }, ref) => {
+  const generatedId = React9.useId();
+  const resolvedId = id ?? generatedId;
+  const { setTitleId } = useDialog();
+  React9.useEffect(() => {
+    setTitleId(resolvedId);
+    return () => setTitleId(void 0);
+  }, [resolvedId, setTitleId]);
+  return /* @__PURE__ */ jsx9(
+    "h2",
+    {
+      ref,
+      id: resolvedId,
+      className: cn(
+        "text-heading font-semibold leading-none tracking-tight",
+        className
+      ),
+      ...props
+    }
+  );
+});
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
-  "p",
-  {
-    ref,
-    className: cn("text-body text-muted-foreground", className),
-    ...props
-  }
-));
+var DialogDescription = React9.forwardRef(({ className, id, ...props }, ref) => {
+  const generatedId = React9.useId();
+  const resolvedId = id ?? generatedId;
+  const { setDescriptionId } = useDialog();
+  React9.useEffect(() => {
+    setDescriptionId(resolvedId);
+    return () => setDescriptionId(void 0);
+  }, [resolvedId, setDescriptionId]);
+  return /* @__PURE__ */ jsx9(
+    "p",
+    {
+      ref,
+      id: resolvedId,
+      className: cn("text-body text-muted-foreground", className),
+      ...props
+    }
+  );
+});
 DialogDescription.displayName = "DialogDescription";
 
 // src/components/ui/dropdown-menu.tsx
-import * as React11 from "react";
+import * as React10 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { Check, ChevronRight, Circle } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var DropdownMenuContext = React11.createContext(void 0);
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var DropdownMenuContext = React10.createContext(void 0);
 function useDropdownMenu() {
-  const context = React11.useContext(DropdownMenuContext);
+  const context = React10.useContext(DropdownMenuContext);
   if (!context) {
     throw new Error("DropdownMenu components must be used within DropdownMenu");
   }
   return context;
 }
 var DropdownMenu = ({ open: controlledOpen, onOpenChange, children }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React11.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React10.useState(false);
   const open = controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen;
   const setOpen = onOpenChange || setUncontrolledOpen;
-  const triggerRef = React11.useRef(null);
-  return /* @__PURE__ */ jsx11(DropdownMenuContext.Provider, { value: { open, setOpen, triggerRef }, children });
+  const triggerRef = React10.useRef(null);
+  return /* @__PURE__ */ jsx10(DropdownMenuContext.Provider, { value: { open, setOpen, triggerRef }, children });
 };
-var DropdownMenuTrigger = React11.forwardRef(({ onClick, children, asChild, ...props }, ref) => {
+var DropdownMenuTrigger = React10.forwardRef(({ onClick, children, asChild, ...props }, ref) => {
   const { setOpen, open, triggerRef } = useDropdownMenu();
-  if (asChild && React11.isValidElement(children)) {
-    return React11.cloneElement(children, {
+  if (asChild && React10.isValidElement(children)) {
+    return React10.cloneElement(children, {
       ref: (node) => {
         triggerRef.current = node;
         if (ref) {
@@ -1422,7 +1403,7 @@ var DropdownMenuTrigger = React11.forwardRef(({ onClick, children, asChild, ...p
       }
     });
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     Button,
     {
       ref: (node) => {
@@ -1447,19 +1428,19 @@ var DropdownMenuTrigger = React11.forwardRef(({ onClick, children, asChild, ...p
 });
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 var DropdownMenuGroup = ({ children }) => {
-  return /* @__PURE__ */ jsx11("div", { role: "group", children });
+  return /* @__PURE__ */ jsx10("div", { role: "group", children });
 };
 var DropdownMenuPortal = ({ children }) => {
   const portalRoot = document.getElementById("fpneo") || document.body;
   return createPortal2(children, portalRoot);
 };
 var DropdownMenuSub = ({ children }) => {
-  return /* @__PURE__ */ jsx11(Fragment3, { children });
+  return /* @__PURE__ */ jsx10(Fragment3, { children });
 };
 var DropdownMenuRadioGroup = ({ children }) => {
-  return /* @__PURE__ */ jsx11("div", { role: "radiogroup", children });
+  return /* @__PURE__ */ jsx10("div", { role: "radiogroup", children });
 };
-var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
   "div",
   {
     ref,
@@ -1471,12 +1452,12 @@ var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx11(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx10(ChevronRight, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   "div",
   {
     ref,
@@ -1488,13 +1469,13 @@ var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => {
+var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => {
   const { open, setOpen, triggerRef } = useDropdownMenu();
-  const contentRef = React11.useRef(null);
-  const [position, setPosition] = React11.useState({ top: 0, left: 0 });
-  const [isPositioned, setIsPositioned] = React11.useState(false);
-  React11.useImperativeHandle(ref, () => contentRef.current);
-  React11.useEffect(() => {
+  const contentRef = React10.useRef(null);
+  const [position, setPosition] = React10.useState({ top: 0, left: 0 });
+  const [isPositioned, setIsPositioned] = React10.useState(false);
+  React10.useImperativeHandle(ref, () => contentRef.current);
+  React10.useEffect(() => {
     if (!open || !triggerRef.current) {
       setIsPositioned(false);
       return;
@@ -1549,7 +1530,7 @@ var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align
       window.removeEventListener("resize", updatePosition);
     };
   }, [open, sideOffset, align, triggerRef]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
       if (contentRef.current && !contentRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
@@ -1569,7 +1550,7 @@ var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align
     };
   }, [open, setOpen, triggerRef]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx11(DropdownMenuPortal, { children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(DropdownMenuPortal, { children: /* @__PURE__ */ jsx10(
     "div",
     {
       ref: contentRef,
@@ -1587,9 +1568,9 @@ var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align
   ) });
 });
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React11.forwardRef(({ className, inset, onClick, ...props }, ref) => {
+var DropdownMenuItem = React10.forwardRef(({ className, inset, onClick, ...props }, ref) => {
   const { setOpen } = useDropdownMenu();
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       ref,
@@ -1607,7 +1588,7 @@ var DropdownMenuItem = React11.forwardRef(({ className, inset, onClick, ...props
   );
 });
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs6(
   "div",
   {
     ref,
@@ -1617,13 +1598,13 @@ var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checke
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: checked && /* @__PURE__ */ jsx11(Check, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx10("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: checked && /* @__PURE__ */ jsx10(Check, { className: "h-4 w-4" }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
   "div",
   {
     ref,
@@ -1633,13 +1614,13 @@ var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(Circle, { className: "h-2 w-2 fill-current" }) }),
+      /* @__PURE__ */ jsx10("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx10(Circle, { className: "h-2 w-2 fill-current" }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx10(
   "div",
   {
     ref,
@@ -1652,7 +1633,7 @@ var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   "div",
   {
     ref,
@@ -1665,7 +1646,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       className: cn("ml-auto text-label tracking-widest opacity-60", className),
@@ -1679,9 +1660,9 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 import { useEffect as useEffect6, useRef as useRef5, useState as useState4 } from "react";
 
 // src/components/ui/input.tsx
-import * as React12 from "react";
+import * as React11 from "react";
 import { Field } from "formik";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var baseClasses = [
   "flex h-[2.571rem] w-full items-center rounded-[0.65rem] px-4 py-0",
   "text-[0.8125rem] text-[var(--color-neutral-800)]",
@@ -1698,7 +1679,7 @@ var baseClasses = [
   "disabled:cursor-not-allowed",
   "disabled:opacity-50"
 ].join(" ");
-var Input = React12.forwardRef(
+var Input = React11.forwardRef(
   ({
     as = "input",
     className,
@@ -1709,10 +1690,10 @@ var Input = React12.forwardRef(
     innerRef,
     ...props
   }, ref) => {
-    const internalRef = React12.useRef(null);
-    React12.useImperativeHandle(ref, () => internalRef.current);
-    React12.useImperativeHandle(innerRef, () => internalRef.current);
-    React12.useEffect(() => {
+    const internalRef = React11.useRef(null);
+    React11.useImperativeHandle(ref, () => internalRef.current);
+    React11.useImperativeHandle(innerRef, () => internalRef.current);
+    React11.useEffect(() => {
       if (autoFocus) {
         internalRef.current?.focus();
       }
@@ -1723,7 +1704,7 @@ var Input = React12.forwardRef(
       className
     );
     if (as === "field") {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx11(
         Field,
         {
           innerRef: internalRef,
@@ -1735,7 +1716,7 @@ var Input = React12.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx11(
       "input",
       {
         ref: internalRef,
@@ -1751,7 +1732,7 @@ var Input = React12.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/expandable-search.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var ExpandableSearch = ({ onSearch, placeholder = "Search...", className = "" }) => {
   const [isExpanded, setIsExpanded] = useState4(false);
   const [searchValue, setSearchValue] = useState4("");
@@ -1780,9 +1761,9 @@ var ExpandableSearch = ({ onSearch, placeholder = "Search...", className = "" })
       inputRef.current.focus();
     }
   };
-  return /* @__PURE__ */ jsx13("div", { className: `flex items-center ${className}`, children: isExpanded ? /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 transition-all duration-300 ease-in-out", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "relative flex justify-center items-center", children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx12("div", { className: `flex items-center ${className}`, children: isExpanded ? /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 transition-all duration-300 ease-in-out", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "relative flex justify-center items-center", children: [
+      /* @__PURE__ */ jsx12(
         Input,
         {
           ref: inputRef,
@@ -1793,25 +1774,25 @@ var ExpandableSearch = ({ onSearch, placeholder = "Search...", className = "" })
           className: "formfield__search"
         }
       ),
-      searchValue && /* @__PURE__ */ jsx13(
+      searchValue && /* @__PURE__ */ jsx12(
         Button,
         {
           onClick: handleClear,
           variant: "ghost",
           size: "icon",
           className: "absolute right-3 top-1/2 -translate-y-1/2 text-neutral-600 hover:text-[var(--color-ext-4b5563)] transition-colors",
-          children: /* @__PURE__ */ jsx13("i", { className: "icon-neo-close text-[0.875rem]" })
+          children: /* @__PURE__ */ jsx12("i", { className: "icon-neo-close text-[0.875rem]" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx13(Button, { variant: "ghost", size: "icon", onClick: handleToggle, children: /* @__PURE__ */ jsx13("i", { className: "icon-neo-close text-[0.875rem]" }) })
-  ] }) : /* @__PURE__ */ jsx13(Button, { variant: "ghost", size: "icon", onClick: handleToggle, className: "header__round-btn", children: /* @__PURE__ */ jsx13("i", { className: "icon-neo-search" }) }) });
+    /* @__PURE__ */ jsx12(Button, { variant: "ghost", size: "icon", onClick: handleToggle, children: /* @__PURE__ */ jsx12("i", { className: "icon-neo-close text-[0.875rem]" }) })
+  ] }) : /* @__PURE__ */ jsx12(Button, { variant: "ghost", size: "icon", onClick: handleToggle, className: "header__round-btn", children: /* @__PURE__ */ jsx12("i", { className: "icon-neo-search" }) }) });
 };
 
 // src/components/ui/file-input.tsx
-import * as React14 from "react";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-var FileInput = React14.forwardRef(
+import * as React13 from "react";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var FileInput = React13.forwardRef(
   ({
     id,
     className,
@@ -1823,10 +1804,10 @@ var FileInput = React14.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const generatedId = React14.useId();
+    const generatedId = React13.useId();
     const inputId = id ?? generatedId;
-    const content = /* @__PURE__ */ jsxs9(Fragment4, { children: [
-      /* @__PURE__ */ jsx14(
+    const content = /* @__PURE__ */ jsxs8(Fragment4, { children: [
+      /* @__PURE__ */ jsx13(
         "input",
         {
           ref,
@@ -1837,17 +1818,18 @@ var FileInput = React14.forwardRef(
           ...props
         }
       ),
-      children && /* @__PURE__ */ jsx14("label", { htmlFor: inputId, className: labelClassName, style: labelStyle, ...labelProps, children })
+      children && /* @__PURE__ */ jsx13("label", { htmlFor: inputId, className: labelClassName, style: labelStyle, ...labelProps, children })
     ] });
-    return wrapperClassName ? /* @__PURE__ */ jsx14("div", { className: wrapperClassName, children: content }) : content;
+    return wrapperClassName ? /* @__PURE__ */ jsx13("div", { className: wrapperClassName, children: content }) : content;
   }
 );
 FileInput.displayName = "FileInput";
 
 // src/components/ui/form-field.tsx
-import "react";
-import { ErrorMessage } from "formik";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import React14 from "react";
+import { ErrorMessage, Field as Field2 } from "formik";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var LABELABLE_TAGS = /* @__PURE__ */ new Set(["input", "select", "textarea"]);
 var FormField = ({
   label,
   required,
@@ -1855,19 +1837,87 @@ var FormField = ({
   error,
   hint,
   children,
-  className
-}) => /* @__PURE__ */ jsxs10("div", { className: cn("form__field", className), children: [
-  label && /* @__PURE__ */ jsxs10("label", { className: "formfield__label", children: [
-    label,
-    required && /* @__PURE__ */ jsx15("span", { className: "required-field", children: "*" })
-  ] }),
-  children,
-  hint && /* @__PURE__ */ jsx15("p", { className: "text-[0.75rem] text-neutral-600 mt-1", children: hint }),
-  errorName && /* @__PURE__ */ jsx15(ErrorMessage, { name: errorName, component: "p", className: "form-error" }),
-  !errorName && error && /* @__PURE__ */ jsx15("p", { className: "form-error", children: error })
-] });
+  className,
+  id
+}) => {
+  const generatedId = React14.useId();
+  const fieldId = id ?? generatedId;
+  let renderedChildren = children;
+  if (label && React14.isValidElement(children) && (children.type === Field2 || typeof children.type === "string" && LABELABLE_TAGS.has(children.type)) && !children.props.id) {
+    renderedChildren = React14.cloneElement(children, { id: fieldId });
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: cn("form__field", className), children: [
+    label && /* @__PURE__ */ jsxs9("label", { className: "formfield__label", htmlFor: fieldId, children: [
+      label,
+      required && /* @__PURE__ */ jsx14("span", { className: "required-field", children: "*" })
+    ] }),
+    renderedChildren,
+    hint && /* @__PURE__ */ jsx14("p", { className: "text-[0.75rem] text-neutral-600 mt-1", children: hint }),
+    errorName && /* @__PURE__ */ jsx14(ErrorMessage, { name: errorName, component: "p", className: "form-error" }),
+    !errorName && error && /* @__PURE__ */ jsx14("p", { className: "form-error", children: error })
+  ] });
+};
 var form_field_default = FormField;
 
+// src/components/ui/icon.tsx
+import * as React15 from "react";
+import "class-variance-authority";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var Icon = React15.forwardRef(
+  ({
+    name,
+    variant,
+    size,
+    color: color6 = "primary",
+    hoverColor,
+    tooltipText,
+    showTooltip = false,
+    disabled,
+    className,
+    onClick,
+    style,
+    ...props
+  }, ref) => {
+    const colorProps = getIconColorProps(color6, hoverColor);
+    const icon = /* @__PURE__ */ jsx15(
+      "i",
+      {
+        ref,
+        className: cn(
+          `${name}`,
+          iconVariants({ variant, size }),
+          colorProps.className,
+          onClick && !disabled && "cursor-pointer",
+          className
+        ),
+        onClick,
+        style: { ...colorProps.style, ...style },
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick ? 0 : void 0,
+        "aria-hidden": onClick ? "true" : "false",
+        onKeyDown: (e) => {
+          if (!onClick) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick(
+              e
+            );
+          }
+        },
+        ...props
+      }
+    );
+    if (!showTooltip) {
+      return icon;
+    }
+    return /* @__PURE__ */ jsxs10(Tooltip, { children: [
+      /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: icon }),
+      /* @__PURE__ */ jsx15(TooltipContent, { children: /* @__PURE__ */ jsx15("small", { children: tooltipText || name }) })
+    ] });
+  }
+);
+Icon.displayName = "Icon";
+
 // src/components/ui/list.tsx
 import * as React16 from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
@@ -2166,6 +2216,7 @@ var ScrollArea = React20.forwardRef(({ className, children, ...props }, ref) =>
   "div",
   {
     ref,
+    tabIndex: 0,
     className: cn(
       "relative overflow-y-auto overflow-x-hidden",
       "[&::-webkit-scrollbar]:w-[0.375rem]",
@@ -2339,8 +2390,12 @@ var Tab = React22.forwardRef(
     variant,
     size,
     disabled,
-    onClick
+    onClick,
+    id,
+    panelId
   }, ref) => {
+    const generatedId = React22.useId();
+    const resolvedId = id ?? generatedId;
     const handleKeyDown = (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -2352,9 +2407,11 @@ var Tab = React22.forwardRef(
       "div",
       {
         ref,
+        id: resolvedId,
         role: "tab",
         "aria-selected": active,
         "aria-disabled": disabled,
+        "aria-controls": panelId,
         tabIndex: disabled ? -1 : active ? 0 : -1,
         onClick: !disabled ? onClick : void 0,
         onKeyDown: handleKeyDown,
@@ -2569,7 +2626,7 @@ Table.displayName = "Table";
 
 // src/components/ui/textarea.tsx
 import * as React24 from "react";
-import { Field as Field2 } from "formik";
+import { Field as Field3 } from "formik";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var Textarea = React24.forwardRef(
   ({
@@ -2609,7 +2666,7 @@ var Textarea = React24.forwardRef(
     );
     if (as === "field") {
       return /* @__PURE__ */ jsx24(
-        Field2,
+        Field3,
         {
           as: "textarea",
           innerRef: ref,
@@ -2726,7 +2783,8 @@ var TimePicker = ({
                 },
                 name: "icon-neo-close",
                 color: "muted",
-                size: "xs"
+                size: "xs",
+                tooltipText: "Clear time"
               }
             ),
             /* @__PURE__ */ jsx25("i", { className: "icon-neo-time-four shared-time-picker__icon" })
@@ -2894,6 +2952,7 @@ var TruncatedTextByWidth = ({ text, className }) => {
 
 // src/components/ui/view-toggle.tsx
 import * as React28 from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
 import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var VIEW_MODE_KEY = "fp_view_mode";
 var useViewMode = () => {
@@ -2909,6 +2968,8 @@ var useViewMode = () => {
   return [viewMode, setAndPersist];
 };
 var ViewToggle = ({ viewMode = "grid" /* GRID */, onViewModeChange }) => {
+  const translationKey = getTranslationKey();
+  const { t } = useTranslation3(translationKey);
   return /* @__PURE__ */ jsxs18("div", { className: "view-toggle", children: [
     /* @__PURE__ */ jsxs18(Tooltip, { children: [
       /* @__PURE__ */ jsx28(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(
@@ -2919,10 +2980,11 @@ var ViewToggle = ({ viewMode = "grid" /* GRID */, onViewModeChange }) => {
           className: `view-toggle__btn${viewMode === "grid" /* GRID */ ? " view-toggle__btn--active" : ""}`,
           variant: "ghost",
           size: "icon",
-          children: /* @__PURE__ */ jsx28("i", { className: "icon-neo-grid" })
+          "aria-label": t("ActionNames.gridView") || "Grid view",
+          children: /* @__PURE__ */ jsx28("i", { className: "icon-neo-grid", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx28(TooltipContent, { children: "Grid view" })
+      /* @__PURE__ */ jsx28(TooltipContent, { children: t("ActionNames.gridView") || "Grid view" })
     ] }),
     /* @__PURE__ */ jsxs18(Tooltip, { children: [
       /* @__PURE__ */ jsx28(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(
@@ -2933,10 +2995,11 @@ var ViewToggle = ({ viewMode = "grid" /* GRID */, onViewModeChange }) => {
           className: `view-toggle__btn${viewMode === "list" /* LIST */ ? " view-toggle__btn--active" : ""}`,
           variant: "ghost",
           size: "icon",
-          children: /* @__PURE__ */ jsx28("i", { className: "icon-neo-list" })
+          "aria-label": t("ActionNames.listView") || "List view",
+          children: /* @__PURE__ */ jsx28("i", { className: "icon-neo-list", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx28(TooltipContent, { children: "List view" })
+      /* @__PURE__ */ jsx28(TooltipContent, { children: t("ActionNames.listView") || "List view" })
     ] })
   ] });
 };