@icomponents/react 0.1.0

package/src/components/long-text.tsx

@@ -0,0 +1,80 @@
+import { Popover, PopoverContent, PopoverTrigger } from "@icomponents/react/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@icomponents/react/components/ui/tooltip";
+import { cn } from "@icomponents/react/lib/utils";
+import { useRef, useState } from "react";
+
+type LongTextProps = {
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+
+export function LongText({ children, className = "", contentClassName = "" }: LongTextProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isOverflown, setIsOverflown] = useState(false);
+
+  // Use ref callback to check overflow when element is mounted
+  const refCallback = (node: HTMLDivElement | null) => {
+    ref.current = node;
+    if (node && checkOverflow(node)) {
+      queueMicrotask(() => setIsOverflown(true));
+    }
+  };
+
+  if (!isOverflown)
+    return (
+      <div ref={refCallback} className={cn("truncate", className)}>
+        {children}
+      </div>
+    );
+
+  return (
+    <>
+      <div className="hidden sm:block">
+        <TooltipProvider delay={0}>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <div ref={refCallback} className={cn("truncate", className)}>
+                  {children}
+                </div>
+              }
+            />
+            <TooltipContent>
+              <p className={contentClassName}>{children}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div className="sm:hidden">
+        <Popover>
+          <PopoverTrigger
+            render={
+              <div ref={refCallback} className={cn("truncate", className)}>
+                {children}
+              </div>
+            }
+          />
+          <PopoverContent className={cn("w-fit", contentClassName)}>
+            <p>{children}</p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </>
+  );
+}
+
+const checkOverflow = (textContainer: HTMLDivElement | null) => {
+  if (textContainer) {
+    return (
+      textContainer.offsetHeight < textContainer.scrollHeight ||
+      textContainer.offsetWidth < textContainer.scrollWidth
+    );
+  }
+  return false;
+};

package/src/components/navigation-progress.tsx

@@ -0,0 +1,18 @@
+import { useRouterState } from "@tanstack/react-router";
+import { useEffect, useRef } from "react";
+import LoadingBar, { type LoadingBarRef } from "react-top-loading-bar";
+
+export function NavigationProgress() {
+  const ref = useRef<LoadingBarRef>(null);
+  const state = useRouterState();
+
+  useEffect(() => {
+    if (state.status === "pending") {
+      ref.current?.continuousStart();
+    } else {
+      ref.current?.complete();
+    }
+  }, [state.status]);
+
+  return <LoadingBar color="var(--muted-foreground)" ref={ref} shadow={true} height={2} />;
+}

package/src/components/password-input.tsx

@@ -0,0 +1,36 @@
+import { cn } from "@icomponents/react/lib/utils";
+import { Eye, EyeOff } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "./ui/button";
+
+type PasswordInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  ref?: React.Ref<HTMLInputElement>;
+};
+
+export function PasswordInput({ className, disabled, ref, ...props }: PasswordInputProps) {
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  return (
+    <div className={cn("relative rounded-md", className)}>
+      <input
+        type={showPassword ? "text" : "password"}
+        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+        ref={ref}
+        disabled={disabled}
+        {...props}
+      />
+      <Button
+        type="button"
+        size="icon"
+        variant="ghost"
+        disabled={disabled}
+        className="absolute inset-e-1 top-1/2 h-6 w-6 -translate-y-1/2 rounded-md text-muted-foreground"
+        onClick={() => setShowPassword((prev) => !prev)}
+      >
+        {showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
+        <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
+      </Button>
+    </div>
+  );
+}

package/src/components/profile-dropdown.tsx

@@ -0,0 +1,106 @@
+import { SignOutDialog } from "@icomponents/react/components/sign-out-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@icomponents/react/components/ui/avatar";
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@icomponents/react/components/ui/dropdown-menu";
+import useDialogState from "@icomponents/react/hooks/use-dialog-state";
+import { Link, type LinkProps } from "@tanstack/react-router";
+import { type ElementType } from "react";
+
+export type ProfileMenuItem = {
+  title: string;
+  url: LinkProps["to"] | (string & {});
+  icon?: ElementType;
+  shortcut?: string;
+};
+
+/** The signed-in identity to show; comes from the live session, never hard-coded. */
+export type ProfileUser = {
+  name: string;
+  email: string;
+  avatar?: string | null;
+};
+
+type ProfileDropdownProps = {
+  items: ProfileMenuItem[];
+  onSignOut: () => void;
+  user?: ProfileUser | null;
+};
+
+function initialsOf(name: string): string {
+  const letters = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((w) => w[0])
+    .slice(0, 2)
+    .join("")
+    .toUpperCase();
+  return letters || "U";
+}
+
+export function ProfileDropdown({ items, onSignOut, user }: ProfileDropdownProps) {
+  const [open, setOpen] = useDialogState();
+  const name = user?.name?.trim() || "Account";
+  const email = user?.email?.trim() ?? "";
+
+  return (
+    <>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger
+          render={
+            <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+              <Avatar className="h-8 w-8">
+                {user?.avatar ? <AvatarImage src={user.avatar} alt={name} /> : null}
+                <AvatarFallback>{initialsOf(name)}</AvatarFallback>
+              </Avatar>
+            </Button>
+          }
+        />
+        <DropdownMenuContent className="w-56" align="end">
+          <DropdownMenuLabel className="font-normal">
+            <div className="flex flex-col gap-1.5">
+              <p className="text-sm leading-none font-medium">{name}</p>
+              {email ? <p className="text-xs leading-none text-muted-foreground">{email}</p> : null}
+            </div>
+          </DropdownMenuLabel>
+          {items.length > 0 ? (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                {items.map((item) => (
+                  <DropdownMenuItem
+                    key={item.title}
+                    render={
+                      <Link to={item.url}>
+                        {item.icon && <item.icon />}
+                        {item.title}
+                        {item.shortcut && (
+                          <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>
+                        )}
+                      </Link>
+                    }
+                  />
+                ))}
+              </DropdownMenuGroup>
+            </>
+          ) : null}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive" onClick={() => setOpen(true)}>
+            Sign out
+            <DropdownMenuShortcut className="text-current">⇧⌘Q</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <SignOutDialog open={!!open} onOpenChange={setOpen} onSignOut={onSignOut} />
+    </>
+  );
+}

package/src/components/search.tsx

@@ -0,0 +1,38 @@
+import { useSearch } from "@icomponents/react/context/search-provider";
+import { useTranslation } from "@icomponents/react/i18n/use-translation";
+import { cn } from "@icomponents/react/lib/utils";
+import { SearchIcon } from "lucide-react";
+
+import { Button } from "./ui/button";
+
+export function Search({
+  className = "",
+  placeholder,
+  ...props
+}: React.ComponentProps<"button"> & { placeholder?: string }) {
+  const { setOpen } = useSearch();
+  const { t } = useTranslation("common");
+  const label = placeholder ?? t("search.button");
+  return (
+    <Button
+      {...props}
+      variant="outline"
+      className={cn(
+        "group relative h-8 w-full flex-1 justify-start rounded-md bg-muted/25 text-sm font-normal text-muted-foreground shadow-none hover:bg-accent sm:w-40 sm:pe-12 md:flex-none lg:w-52 xl:w-64",
+        className
+      )}
+      aria-keyshortcuts="Meta+K Control+K"
+      onClick={() => setOpen(true)}
+    >
+      <SearchIcon
+        aria-hidden="true"
+        className="absolute inset-s-1.5 top-1/2 -translate-y-1/2"
+        size={16}
+      />
+      <span className="ms-4">{label}</span>
+      <kbd className="pointer-events-none absolute inset-e-[0.3rem] top-[0.3rem] hidden h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 select-none group-hover:bg-accent sm:flex">
+        <span className="text-xs">⌘</span>K
+      </kbd>
+    </Button>
+  );
+}

package/src/components/select-dropdown.tsx

@@ -0,0 +1,62 @@
+import { FormControl } from "@icomponents/react/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@icomponents/react/components/ui/select";
+import { cn } from "@icomponents/react/lib/utils";
+import { Loader } from "lucide-react";
+
+type SelectDropdownProps = {
+  onValueChange?: (value: string) => void;
+  defaultValue: string | undefined;
+  placeholder?: string;
+  isPending?: boolean;
+  items: { label: string; value: string }[] | undefined;
+  disabled?: boolean;
+  className?: string;
+  isControlled?: boolean;
+};
+
+export function SelectDropdown({
+  defaultValue,
+  onValueChange,
+  isPending,
+  items,
+  placeholder,
+  disabled,
+  className = "",
+  isControlled = false,
+}: SelectDropdownProps) {
+  const defaultState = isControlled
+    ? { value: defaultValue, onValueChange }
+    : { defaultValue, onValueChange };
+  return (
+    <Select {...defaultState}>
+      <FormControl>
+        <SelectTrigger disabled={disabled} className={cn(className)}>
+          <SelectValue placeholder={placeholder ?? "Select"} />
+        </SelectTrigger>
+      </FormControl>
+      <SelectContent>
+        {isPending ? (
+          <SelectItem disabled value="loading" className="h-14">
+            <div className="flex items-center justify-center gap-2">
+              <Loader className="h-5 w-5 animate-spin" />
+              {"  "}
+              Loading...
+            </div>
+          </SelectItem>
+        ) : (
+          items?.map(({ label, value }) => (
+            <SelectItem key={value} value={value}>
+              {label}
+            </SelectItem>
+          ))
+        )}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/sign-out-dialog.tsx

@@ -0,0 +1,31 @@
+import { ConfirmDialog } from "@icomponents/react/components/confirm-dialog";
+import { useTranslation } from "@icomponents/react/i18n/use-translation";
+
+interface SignOutDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSignOut: () => void;
+}
+
+/**
+ * Подтверждение выхода. Подписи — из неймспейса "common" (бандл лежит рядом, в `../i18n/common.ts`):
+ * у компонента нет слайса-владельца, он стоит в шапке на всех экранах.
+ *
+ * Раньше строки были литералами по-английски, и в русском интерфейсе диалог выхода отвечал не на
+ * языке остальной консоли — на самом резком шаге, где человек и так торопится.
+ */
+export function SignOutDialog({ open, onOpenChange, onSignOut }: SignOutDialogProps) {
+  const { t } = useTranslation("common");
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("signOut.title")}
+      desc={t("signOut.desc")}
+      confirmText={t("signOut.confirm")}
+      destructive
+      handleConfirm={onSignOut}
+      className="sm:max-w-sm"
+    />
+  );
+}

package/src/components/skip-to-main.tsx

@@ -0,0 +1,10 @@
+export function SkipToMain() {
+  return (
+    <a
+      className={`fixed inset-s-44 z-999 -translate-y-52 bg-primary px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground opacity-95 shadow-sm transition hover:bg-primary/90 focus:translate-y-3 focus:transform focus-visible:ring-1 focus-visible:ring-ring`}
+      href="#content"
+    >
+      Skip to Main
+    </a>
+  );
+}

package/src/components/stat-tile.tsx

@@ -0,0 +1,56 @@
+import type { StatusTone } from "@icomponents/react/components/status-badge";
+import { cn } from "@icomponents/react/lib/utils";
+import * as React from "react";
+
+const TONE_DOT: Record<StatusTone, string> = {
+  success: "bg-success",
+  info: "bg-primary",
+  neutral: "bg-secondary-foreground",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+  muted: "bg-muted-foreground",
+};
+
+// KPI / stat tile in the Evoca design language: a white soft-shadow card with a muted uppercase
+// micro-label (optionally led by a status-hue dot) and a big condensed display number. Clickable
+// (as a filter) when onClick is given — with an active highlight and a subtle hover lift. Reused by
+// the companies registry (status pool filters) and the dashboard (overview KPIs).
+export function StatTile({
+  label,
+  value,
+  tone,
+  active,
+  onClick,
+  className,
+}: {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  tone?: StatusTone;
+  active?: boolean;
+  onClick?: () => void;
+  className?: string;
+}) {
+  const cls = cn(
+    "flex min-w-28 flex-col gap-1 rounded border bg-card px-4 py-3 text-left soft-shadow transition-transform",
+    onClick && "cursor-pointer hover:-translate-y-0.5",
+    active ? "border-primary ring-1 ring-primary/30" : "border-border",
+    className
+  );
+  const body = (
+    <>
+      <span className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+        {tone ? <span className={cn("size-1.5 rounded-full", TONE_DOT[tone])} /> : null}
+        {label}
+      </span>
+      <span className="font-display text-3xl font-bold tabular-nums text-foreground">{value}</span>
+    </>
+  );
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} data-active={active ? "" : undefined} className={cls}>
+        {body}
+      </button>
+    );
+  }
+  return <div className={cls}>{body}</div>;
+}

package/src/components/status-badge.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "bun:test";
+
+import { statusBadgeVariants, type StatusTone } from "./status-badge";
+
+describe("statusBadgeVariants — soft-tinted, one hue per state (semantic color-coding)", () => {
+  const cases: Record<StatusTone, string> = {
+    success: "success",
+    info: "primary",
+    neutral: "secondary-foreground",
+    warning: "warning",
+    danger: "destructive",
+    muted: "muted-foreground",
+  };
+
+  it("renders each tone as a same-hue tinted background + text (never solid-filled, never a hex literal)", () => {
+    for (const [tone, token] of Object.entries(cases) as [StatusTone, string][]) {
+      const cls = statusBadgeVariants({ tone });
+      expect(cls).toContain(`bg-${token}/10`);
+      expect(cls).toContain(`text-${token}`);
+      expect(cls).not.toMatch(/#[0-9a-fA-F]{3,6}/);
+    }
+  });
+});

package/src/components/status-badge.tsx

@@ -0,0 +1,49 @@
+import { cn } from "@icomponents/react/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+// Soft-tinted status pill (Evoca design language): background at ~10% of the status hue + same-hue
+// text + a small leading dot. ONE hue per state, applied consistently across companies / tenant
+// users / audit — this disciplined semantic color-coding is what makes the console read as
+// "colorful" rather than a single flat grey badge. Tones map onto existing theme tokens only
+// (no raw color literals — RE-THEME): success/primary/secondary-foreground/warning/destructive/
+// muted-foreground.
+const statusBadgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap",
+  {
+    variants: {
+      tone: {
+        success: "bg-success/10 text-success",
+        info: "bg-primary/10 text-primary",
+        neutral: "bg-secondary-foreground/10 text-secondary-foreground",
+        warning: "bg-warning/10 text-warning",
+        danger: "bg-destructive/10 text-destructive",
+        muted: "bg-muted-foreground/10 text-muted-foreground",
+      },
+    },
+    defaultVariants: { tone: "muted" },
+  }
+);
+
+export type StatusTone = NonNullable<VariantProps<typeof statusBadgeVariants>["tone"]>;
+
+export function StatusBadge({
+  tone,
+  children,
+  dot = true,
+  className,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof statusBadgeVariants> & { dot?: boolean }) {
+  return (
+    <span
+      data-slot="status-badge"
+      className={cn(statusBadgeVariants({ tone }), className)}
+      {...props}
+    >
+      {dot ? <span className="size-1.5 shrink-0 rounded-full bg-current" aria-hidden /> : null}
+      {children}
+    </span>
+  );
+}
+
+export { statusBadgeVariants };

package/src/components/theme-switch.tsx

@@ -0,0 +1,61 @@
+import { Button } from "@icomponents/react/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@icomponents/react/components/ui/dropdown-menu";
+import { useTheme } from "@icomponents/react/context/theme-provider";
+import { useTranslation } from "@icomponents/react/i18n/use-translation";
+import { cn } from "@icomponents/react/lib/utils";
+import { Check, Moon, Sun } from "lucide-react";
+import { useEffect } from "react";
+
+export function ThemeSwitch() {
+  const { theme, setTheme } = useTheme();
+  const { t } = useTranslation("common");
+
+  /**
+   * Цвет адресной строки (meta theme-color) берём из ТОКЕНА темы, а не зашиваем.
+   *
+   * Здесь стояли литералы `#020817` / `#fff`. При перекраске тема меняется в theme.css, а этот кусок
+   * остаётся прежним — и на телефоне поверх новой темы висит адресная строка от старой. Такое не
+   * читается как баг: выглядит как «дизайнер так решил».
+   */
+  useEffect(() => {
+    const meta = document.querySelector("meta[name='theme-color']");
+    if (!meta) return;
+    const background = getComputedStyle(document.documentElement)
+      .getPropertyValue("--background")
+      .trim();
+    if (background) meta.setAttribute("content", background);
+  }, [theme]);
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="icon" className="scale-95 rounded-full">
+            <Sun className="size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+            <Moon className="absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+            <span className="sr-only">{t("theme.toggle")}</span>
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          {t("theme.light")}{" "}
+          <Check size={14} className={cn("ms-auto", theme !== "light" && "hidden")} />
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          {t("theme.dark")}
+          <Check size={14} className={cn("ms-auto", theme !== "dark" && "hidden")} />
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          {t("theme.system")}
+          <Check size={14} className={cn("ms-auto", theme !== "system" && "hidden")} />
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}