@vectramindnpm/unified-design-system 0.2.2 → 0.2.4

package/dist/index.cjs

@@ -850,7 +850,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 : "",
@@ -861,15 +861,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__ */ (0, import_jsx_runtime4.jsx)("button", { className: cn(composed), ref, style: mergedStyle, ...props, children });
+      ...accessibleProps
+    }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: cn(composed), ref, style: mergedStyle, ...accessibleProps, children });
     if (!tooltipText) {
       return element;
     }
@@ -992,13 +996,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",
@@ -1009,12 +1014,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__ */ (0, import_jsx_runtime5.jsx)(
       "button",
@@ -1253,77 +1259,24 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/ui/delete-action.tsx
 var import_react = require("react");
+var import_react_i18next = require("react-i18next");
 
-// src/components/ui/icon.tsx
-var React8 = __toESM(require("react"), 1);
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsx)(
-      "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__ */ (0, import_jsx_runtime8.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipTrigger, { asChild: true, children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("small", { children: tooltipText || name }) })
-    ] });
-  }
-);
-Icon.displayName = "Icon";
+// src/helpers/helpersIndex.ts
+var getTranslationKey = () => "translations";
 
 // src/components/ui/delete-action.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DeleteAction = ({ onClick, tooltipText, showTooltip = true, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Icon,
+  const translationKey = getTranslationKey();
+  const { t } = (0, import_react_i18next.useTranslation)(translationKey);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ButtonIcon,
     {
       name: "icon-neo-trash",
       hoverColor: "danger",
       onClick,
       showTooltip,
-      tooltipText: tooltipText || "Delete",
+      tooltipText: tooltipText || t("ActionNames.delete"),
       className
     }
   );
@@ -1331,25 +1284,28 @@ var DeleteAction = ({ onClick, tooltipText, showTooltip = true, className }) =>
 var delete_action_default = DeleteAction;
 
 // src/components/ui/dialog.tsx
-var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var DialogContext = React10.createContext(void 0);
+var React9 = __toESM(require("react"), 1);
+var import_react_i18next2 = require("react-i18next");
+var import_jsx_runtime9 = require("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__ */ (0, import_jsx_runtime10.jsx)(DialogContext.Provider, { value: { open, onOpenChange: setOpen }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Button,
     {
       ref,
@@ -1367,11 +1323,11 @@ DialogTrigger.displayName = "DialogTrigger";
 var DialogPortal = ({ children }) => {
   const { open } = useDialog();
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
 };
-var DialogClose = React10.forwardRef(({ onClick, ...props }, ref) => {
+var DialogClose = React9.forwardRef(({ onClick, ...props }, ref) => {
   const { onOpenChange } = useDialog();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Button,
     {
       ref,
@@ -1386,9 +1342,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__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       ref,
@@ -1405,9 +1361,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 } = (0, import_react_i18next2.useTranslation)("translations");
+  React9.useEffect(() => {
     if (!closeOnEscape) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -1417,12 +1374,16 @@ var DialogContent = React10.forwardRef(({ className, children, showCloseButton =
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [onOpenChange, closeOnEscape]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogOverlay, { closeOnClick: closeOnOverlayClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogOverlay, { closeOnClick: closeOnOverlayClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "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
@@ -1431,14 +1392,15 @@ var DialogContent = React10.forwardRef(({ className, children, showCloseButton =
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             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")
             }
           )
         ]
@@ -1450,7 +1412,7 @@ DialogContent.displayName = "DialogContent";
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "div",
   {
     className: cn(
@@ -1464,7 +1426,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "div",
   {
     className: cn(
@@ -1475,52 +1437,72 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-  "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__ */ (0, import_jsx_runtime9.jsx)(
+    "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__ */ (0, import_jsx_runtime10.jsx)(
-  "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__ */ (0, import_jsx_runtime9.jsx)(
+    "p",
+    {
+      ref,
+      id: resolvedId,
+      className: cn("text-body text-muted-foreground", className),
+      ...props
+    }
+  );
+});
 DialogDescription.displayName = "DialogDescription";
 
 // src/components/ui/dropdown-menu.tsx
-var React11 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 var import_lucide_react = require("lucide-react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var DropdownMenuContext = React11.createContext(void 0);
+var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuContext.Provider, { value: { open, setOpen, triggerRef }, children });
+  const triggerRef = React10.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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) {
@@ -1539,7 +1521,7 @@ var DropdownMenuTrigger = React11.forwardRef(({ onClick, children, asChild, ...p
       }
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Button,
     {
       ref: (node) => {
@@ -1564,19 +1546,19 @@ var DropdownMenuTrigger = React11.forwardRef(({ onClick, children, asChild, ...p
 });
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 var DropdownMenuGroup = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "group", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "group", children });
 };
 var DropdownMenuPortal = ({ children }) => {
   const portalRoot = document.getElementById("fpneo") || document.body;
   return (0, import_react_dom2.createPortal)(children, portalRoot);
 };
 var DropdownMenuSub = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children });
 };
 var DropdownMenuRadioGroup = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "radiogroup", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "radiogroup", children });
 };
-var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
   "div",
   {
     ref,
@@ -1588,12 +1570,12 @@ var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react.ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.ChevronRight, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "div",
   {
     ref,
@@ -1605,13 +1587,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;
@@ -1666,7 +1648,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)) {
@@ -1686,7 +1668,7 @@ var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align
     };
   }, [open, setOpen, triggerRef]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       ref: contentRef,
@@ -1704,9 +1686,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__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       ref,
@@ -1724,7 +1706,7 @@ var DropdownMenuItem = React11.forwardRef(({ className, inset, onClick, ...props
   );
 });
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
   "div",
   {
     ref,
@@ -1734,13 +1716,13 @@ var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checke
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react.Check, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: checked && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.Check, { className: "h-4 w-4" }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
   "div",
   {
     ref,
@@ -1750,13 +1732,13 @@ var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react.Circle, { className: "h-2 w-2 fill-current" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.Circle, { className: "h-2 w-2 fill-current" }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "div",
   {
     ref,
@@ -1769,7 +1751,7 @@ var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "div",
   {
     ref,
@@ -1782,7 +1764,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "span",
     {
       className: cn("ml-auto text-label tracking-widest opacity-60", className),
@@ -1796,9 +1778,9 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 var import_react2 = require("react");
 
 // src/components/ui/input.tsx
-var React12 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var import_formik = require("formik");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("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)]",
@@ -1815,7 +1797,7 @@ var baseClasses = [
   "disabled:cursor-not-allowed",
   "disabled:opacity-50"
 ].join(" ");
-var Input = React12.forwardRef(
+var Input = React11.forwardRef(
   ({
     as = "input",
     className,
@@ -1826,10 +1808,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();
       }
@@ -1840,7 +1822,7 @@ var Input = React12.forwardRef(
       className
     );
     if (as === "field") {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_formik.Field,
         {
           innerRef: internalRef,
@@ -1852,7 +1834,7 @@ var Input = React12.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "input",
       {
         ref: internalRef,
@@ -1868,7 +1850,7 @@ var Input = React12.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/expandable-search.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var ExpandableSearch = ({ onSearch, placeholder = "Search...", className = "" }) => {
   const [isExpanded, setIsExpanded] = (0, import_react2.useState)(false);
   const [searchValue, setSearchValue] = (0, import_react2.useState)("");
@@ -1897,9 +1879,9 @@ var ExpandableSearch = ({ onSearch, placeholder = "Search...", className = "" })
       inputRef.current.focus();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `flex items-center ${className}`, children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 transition-all duration-300 ease-in-out", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex justify-center items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `flex items-center ${className}`, children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 transition-all duration-300 ease-in-out", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative flex justify-center items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Input,
         {
           ref: inputRef,
@@ -1910,25 +1892,25 @@ var ExpandableSearch = ({ onSearch, placeholder = "Search...", className = "" })
           className: "formfield__search"
         }
       ),
-      searchValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      searchValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         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__ */ (0, import_jsx_runtime13.jsx)("i", { className: "icon-neo-close text-[0.875rem]" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("i", { className: "icon-neo-close text-[0.875rem]" })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "icon", onClick: handleToggle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "icon-neo-close text-[0.875rem]" }) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "icon", onClick: handleToggle, className: "header__round-btn", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "icon-neo-search" }) }) });
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "ghost", size: "icon", onClick: handleToggle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("i", { className: "icon-neo-close text-[0.875rem]" }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "ghost", size: "icon", onClick: handleToggle, className: "header__round-btn", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("i", { className: "icon-neo-search" }) }) });
 };
 
 // src/components/ui/file-input.tsx
-var React14 = __toESM(require("react"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var FileInput = React14.forwardRef(
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var FileInput = React13.forwardRef(
   ({
     id,
     className,
@@ -1940,10 +1922,10 @@ var FileInput = React14.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const generatedId = React14.useId();
+    const generatedId = React13.useId();
     const inputId = id ?? generatedId;
-    const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "input",
         {
           ref,
@@ -1954,17 +1936,18 @@ var FileInput = React14.forwardRef(
           ...props
         }
       ),
-      children && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: inputId, className: labelClassName, style: labelStyle, ...labelProps, children })
+      children && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: inputId, className: labelClassName, style: labelStyle, ...labelProps, children })
     ] });
-    return wrapperClassName ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: wrapperClassName, children: content }) : content;
+    return wrapperClassName ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: wrapperClassName, children: content }) : content;
   }
 );
 FileInput.displayName = "FileInput";
 
 // src/components/ui/form-field.tsx
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"), 1);
 var import_formik2 = require("formik");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var LABELABLE_TAGS = /* @__PURE__ */ new Set(["input", "select", "textarea"]);
 var FormField = ({
   label,
   required,
@@ -1972,19 +1955,87 @@ var FormField = ({
   error,
   hint,
   children,
-  className
-}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("form__field", className), children: [
-  label && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "formfield__label", children: [
-    label,
-    required && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "required-field", children: "*" })
-  ] }),
-  children,
-  hint && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-[0.75rem] text-neutral-600 mt-1", children: hint }),
-  errorName && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_formik2.ErrorMessage, { name: errorName, component: "p", className: "form-error" }),
-  !errorName && error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "form-error", children: error })
-] });
+  className,
+  id
+}) => {
+  const generatedId = import_react3.default.useId();
+  const fieldId = id ?? generatedId;
+  let renderedChildren = children;
+  if (label && import_react3.default.isValidElement(children) && (children.type === import_formik2.Field || typeof children.type === "string" && LABELABLE_TAGS.has(children.type)) && !children.props.id) {
+    renderedChildren = import_react3.default.cloneElement(children, { id: fieldId });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("form__field", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "formfield__label", htmlFor: fieldId, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "required-field", children: "*" })
+    ] }),
+    renderedChildren,
+    hint && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-[0.75rem] text-neutral-600 mt-1", children: hint }),
+    errorName && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_formik2.ErrorMessage, { name: errorName, component: "p", className: "form-error" }),
+    !errorName && error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "form-error", children: error })
+  ] });
+};
 var form_field_default = FormField;
 
+// src/components/ui/icon.tsx
+var React15 = __toESM(require("react"), 1);
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime15 = require("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__ */ (0, import_jsx_runtime15.jsx)(
+      "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__ */ (0, import_jsx_runtime15.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipTrigger, { asChild: true, children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("small", { children: tooltipText || name }) })
+    ] });
+  }
+);
+Icon.displayName = "Icon";
+
 // src/components/ui/list.tsx
 var React16 = __toESM(require("react"), 1);
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -2283,6 +2334,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]",
@@ -2456,8 +2508,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 === " ") {
@@ -2469,9 +2525,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,
@@ -2843,7 +2901,8 @@ var TimePicker = ({
                 },
                 name: "icon-neo-close",
                 color: "muted",
-                size: "xs"
+                size: "xs",
+                tooltipText: "Clear time"
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { className: "icon-neo-time-four shared-time-picker__icon" })
@@ -3011,6 +3070,7 @@ var TruncatedTextByWidth = ({ text, className }) => {
 
 // src/components/ui/view-toggle.tsx
 var React28 = __toESM(require("react"), 1);
+var import_react_i18next3 = require("react-i18next");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var VIEW_MODE_KEY = "fp_view_mode";
 var useViewMode = () => {
@@ -3026,6 +3086,8 @@ var useViewMode = () => {
   return [viewMode, setAndPersist];
 };
 var ViewToggle = ({ viewMode = "grid" /* GRID */, onViewModeChange }) => {
+  const translationKey = getTranslationKey();
+  const { t } = (0, import_react_i18next3.useTranslation)(translationKey);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "view-toggle", children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -3036,10 +3098,11 @@ var ViewToggle = ({ viewMode = "grid" /* GRID */, onViewModeChange }) => {
           className: `view-toggle__btn${viewMode === "grid" /* GRID */ ? " view-toggle__btn--active" : ""}`,
           variant: "ghost",
           size: "icon",
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { className: "icon-neo-grid" })
+          "aria-label": t("ActionNames.gridView") || "Grid view",
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { className: "icon-neo-grid", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipContent, { children: "Grid view" })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipContent, { children: t("ActionNames.gridView") || "Grid view" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -3050,10 +3113,11 @@ var ViewToggle = ({ viewMode = "grid" /* GRID */, onViewModeChange }) => {
           className: `view-toggle__btn${viewMode === "list" /* LIST */ ? " view-toggle__btn--active" : ""}`,
           variant: "ghost",
           size: "icon",
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { className: "icon-neo-list" })
+          "aria-label": t("ActionNames.listView") || "List view",
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { className: "icon-neo-list", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipContent, { children: "List view" })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipContent, { children: t("ActionNames.listView") || "List view" })
     ] })
   ] });
 };