@icomponents/react 0.1.0

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@icomponents/react/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-accent", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/ui/sonner.tsx

@@ -0,0 +1,26 @@
+import { useTheme } from "@icomponents/react/context/theme-provider";
+import { Toaster as Sonner } from "sonner";
+import type { ToasterProps } from "sonner";
+
+// Re-export the imperative toast API so consumers can fire toasts through the ui package they already
+// depend on, without adding a direct sonner dependency.
+export { toast } from "sonner";
+
+export function Toaster({ ...props }: ToasterProps) {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group [&_div[data-content]]:w-full"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+}

package/src/components/ui/switch.tsx

@@ -0,0 +1,25 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "@icomponents/react/lib/utils";
+import * as React from "react";
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0 rtl:data-checked:-translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/src/components/ui/table.tsx

@@ -0,0 +1,89 @@
+import { cn } from "@icomponents/react/lib/utils";
+import * as React from "react";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground *:[[role=checkbox]]:translate-y-0.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap *:[[role=checkbox]]:translate-y-0.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,51 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cn } from "@icomponents/react/lib/utils";
+import * as React from "react";
+
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-0.75 text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Tab>) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-active:bg-background data-active:shadow-sm dark:text-muted-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@icomponents/react/lib/utils";
+import * as React from "react";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cn } from "@icomponents/react/lib/utils";
+import * as React from "react";
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  side,
+  align,
+  alignOffset,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Popup> &
+  Pick<
+    React.ComponentProps<typeof TooltipPrimitive.Positioner>,
+    "side" | "align" | "sideOffset" | "alignOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      {/* Radix Content → Portal > Positioner > Popup; positioning moves to Positioner. */}
+      <TooltipPrimitive.Positioner
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 w-fit origin-(--transform-origin) animate-in rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-primary fill-primary" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/config/fonts.ts

@@ -0,0 +1,2 @@
+/** Реэкспорт: список шрифтов платформо-независим и живёт в `@icomponents/tokens`. */
+export * from "@icomponents/tokens/fonts";

package/src/context/direction-provider.tsx

@@ -0,0 +1,61 @@
+import { DirectionProvider as BaseDirProvider } from "@base-ui/react/direction-provider";
+import { getCookie, setCookie, removeCookie } from "@icomponents/react/lib/cookies";
+import { createContext, useContext, useEffect, useState } from "react";
+
+export type Direction = "ltr" | "rtl";
+
+const DEFAULT_DIRECTION = "ltr";
+const DIRECTION_COOKIE_NAME = "dir";
+const DIRECTION_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+
+type DirectionContextType = {
+  defaultDir: Direction;
+  dir: Direction;
+  setDir: (dir: Direction) => void;
+  resetDir: () => void;
+};
+
+const DirectionContext = createContext<DirectionContextType | null>(null);
+
+export function DirectionProvider({ children }: { children: React.ReactNode }) {
+  const [dir, _setDir] = useState<Direction>(
+    () => (getCookie(DIRECTION_COOKIE_NAME) as Direction) || DEFAULT_DIRECTION
+  );
+
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+    htmlElement.setAttribute("dir", dir);
+  }, [dir]);
+
+  const setDir = (dir: Direction) => {
+    _setDir(dir);
+    setCookie(DIRECTION_COOKIE_NAME, dir, DIRECTION_COOKIE_MAX_AGE);
+  };
+
+  const resetDir = () => {
+    _setDir(DEFAULT_DIRECTION);
+    removeCookie(DIRECTION_COOKIE_NAME);
+  };
+
+  return (
+    <DirectionContext
+      value={{
+        defaultDir: DEFAULT_DIRECTION,
+        dir,
+        setDir,
+        resetDir,
+      }}
+    >
+      <BaseDirProvider direction={dir}>{children}</BaseDirProvider>
+    </DirectionContext>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useDirection() {
+  const context = useContext(DirectionContext);
+  if (!context) {
+    throw new Error("useDirection must be used within a DirectionProvider");
+  }
+  return context;
+}

package/src/context/font-provider.tsx

@@ -0,0 +1,70 @@
+import { fonts as defaultFonts } from "@icomponents/react/config/fonts";
+import { getCookie, setCookie, removeCookie } from "@icomponents/react/lib/cookies";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Font = string;
+
+const FONT_COOKIE_NAME = "font";
+const FONT_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+
+type FontContextType = {
+  font: Font;
+  /** The list this deployment offers — the appearance screen renders THESE, not core's defaults. */
+  fonts: readonly Font[];
+  setFont: (font: Font) => void;
+  resetFont: () => void;
+};
+
+const FontContext = createContext<FontContextType | null>(null);
+
+/**
+ * `fonts` is the PRODUCT's type set: a derived project re-themed from a design prototype ships its
+ * own faces (see docs/theming-from-lynx.md) and must be able to say so WITHOUT editing
+ * `config/fonts.ts` — that file is core, and the next `sync-core.sh` would overwrite the edit.
+ * Omitted → core's default set. `fonts[0]` is the default face.
+ */
+export function FontProvider({
+  children,
+  fonts = defaultFonts,
+}: {
+  children: React.ReactNode;
+  fonts?: readonly Font[];
+}) {
+  const [font, _setFont] = useState<Font>(() => {
+    const savedFont = getCookie(FONT_COOKIE_NAME);
+    return savedFont && fonts.includes(savedFont) ? savedFont : (fonts[0] as Font);
+  });
+
+  useEffect(() => {
+    const applyFont = (font: string) => {
+      const root = document.documentElement;
+      root.classList.forEach((cls) => {
+        if (cls.startsWith("font-")) root.classList.remove(cls);
+      });
+      root.classList.add(`font-${font}`);
+    };
+
+    applyFont(font);
+  }, [font]);
+
+  const setFont = (font: Font) => {
+    setCookie(FONT_COOKIE_NAME, font, FONT_COOKIE_MAX_AGE);
+    _setFont(font);
+  };
+
+  const resetFont = () => {
+    removeCookie(FONT_COOKIE_NAME);
+    _setFont(fonts[0] as Font);
+  };
+
+  return <FontContext value={{ font, fonts, setFont, resetFont }}>{children}</FontContext>;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFont = () => {
+  const context = useContext(FontContext);
+  if (!context) {
+    throw new Error("useFont must be used within a FontProvider");
+  }
+  return context;
+};

package/src/context/language-provider.tsx

@@ -0,0 +1,73 @@
+import { LOCALES, type Locale } from "@icomponents/react/i18n/types";
+import { getCookie, removeCookie, setCookie } from "@icomponents/react/lib/cookies";
+import type { i18n as I18n } from "i18next";
+import { createContext, useContext, useEffect, useState } from "react";
+import { I18nextProvider } from "react-i18next";
+
+/**
+ * Провайдер языка — по образцу DirectionProvider (кука + атрибут на <html> + контекст).
+ *
+ * Инстанс i18next создаётся в composition root (там собраны бандлы всех фич) и передаётся сюда: сам
+ * провайдер механизмом сборки словарей не занимается, он лишь хранит выбранный язык, синхронизирует
+ * его с i18next и `<html lang>`, и раздаёт переключатель через контекст.
+ */
+const DEFAULT_LOCALE: Locale = "ru"; // основной язык проекта; en доступен переключателем
+const LANG_COOKIE_NAME = "lang";
+const LANG_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+
+export function readInitialLocale(): Locale {
+  const saved = getCookie(LANG_COOKIE_NAME) as Locale | undefined;
+  return saved && (LOCALES as readonly string[]).includes(saved) ? saved : DEFAULT_LOCALE;
+}
+
+type LanguageContextType = {
+  defaultLang: Locale;
+  lang: Locale;
+  langs: readonly Locale[];
+  setLang: (lang: Locale) => void;
+  resetLang: () => void;
+};
+
+const LanguageContext = createContext<LanguageContextType | null>(null);
+
+export function LanguageProvider({ i18n, children }: { i18n: I18n; children: React.ReactNode }) {
+  const [lang, _setLang] = useState<Locale>(() => (i18n.language as Locale) || DEFAULT_LOCALE);
+
+  useEffect(() => {
+    document.documentElement.setAttribute("lang", lang);
+    if (i18n.language !== lang) void i18n.changeLanguage(lang);
+  }, [lang, i18n]);
+
+  const setLang = (next: Locale) => {
+    _setLang(next);
+    setCookie(LANG_COOKIE_NAME, next, LANG_COOKIE_MAX_AGE);
+  };
+  const resetLang = () => {
+    _setLang(DEFAULT_LOCALE);
+    removeCookie(LANG_COOKIE_NAME);
+  };
+
+  return (
+    <LanguageContext.Provider
+      value={{ defaultLang: DEFAULT_LOCALE, lang, langs: LOCALES, setLang, resetLang }}
+    >
+      <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+    </LanguageContext.Provider>
+  );
+}
+
+export function useLanguage(): LanguageContextType {
+  const ctx = useContext(LanguageContext);
+  if (!ctx) throw new Error("useLanguage must be used within a LanguageProvider");
+  return ctx;
+}
+
+/**
+ * Как `useLanguage`, но НЕ бросает без провайдера — возвращает `null`.
+ *
+ * Нужен core-компонентам (config-drawer), которые синкаются в продукт РАНЬШЕ, чем продукт успел
+ * обернуть приложение в LanguageProvider: они просто прячут секцию языка, а не падают.
+ */
+export function useOptionalLanguage(): LanguageContextType | null {
+  return useContext(LanguageContext);
+}

package/src/context/layout-provider.tsx

@@ -0,0 +1,81 @@
+import { getCookie, setCookie } from "@icomponents/react/lib/cookies";
+import { createContext, useContext, useState } from "react";
+
+export type Collapsible = "offcanvas" | "icon" | "none";
+type Variant = "inset" | "sidebar" | "floating";
+
+// Cookie constants following the pattern from sidebar.tsx
+const LAYOUT_COLLAPSIBLE_COOKIE_NAME = "layout_collapsible";
+const LAYOUT_VARIANT_COOKIE_NAME = "layout_variant";
+const LAYOUT_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; // 7 days
+
+// Default values
+const DEFAULT_VARIANT = "inset";
+const DEFAULT_COLLAPSIBLE = "icon";
+
+type LayoutContextType = {
+  resetLayout: () => void;
+
+  defaultCollapsible: Collapsible;
+  collapsible: Collapsible;
+  setCollapsible: (collapsible: Collapsible) => void;
+
+  defaultVariant: Variant;
+  variant: Variant;
+  setVariant: (variant: Variant) => void;
+};
+
+const LayoutContext = createContext<LayoutContextType | null>(null);
+
+type LayoutProviderProps = {
+  children: React.ReactNode;
+};
+
+export function LayoutProvider({ children }: LayoutProviderProps) {
+  const [collapsible, _setCollapsible] = useState<Collapsible>(() => {
+    const saved = getCookie(LAYOUT_COLLAPSIBLE_COOKIE_NAME);
+    return (saved as Collapsible) || DEFAULT_COLLAPSIBLE;
+  });
+
+  const [variant, _setVariant] = useState<Variant>(() => {
+    const saved = getCookie(LAYOUT_VARIANT_COOKIE_NAME);
+    return (saved as Variant) || DEFAULT_VARIANT;
+  });
+
+  const setCollapsible = (newCollapsible: Collapsible) => {
+    _setCollapsible(newCollapsible);
+    setCookie(LAYOUT_COLLAPSIBLE_COOKIE_NAME, newCollapsible, LAYOUT_COOKIE_MAX_AGE);
+  };
+
+  const setVariant = (newVariant: Variant) => {
+    _setVariant(newVariant);
+    setCookie(LAYOUT_VARIANT_COOKIE_NAME, newVariant, LAYOUT_COOKIE_MAX_AGE);
+  };
+
+  const resetLayout = () => {
+    setCollapsible(DEFAULT_COLLAPSIBLE);
+    setVariant(DEFAULT_VARIANT);
+  };
+
+  const contextValue: LayoutContextType = {
+    resetLayout,
+    defaultCollapsible: DEFAULT_COLLAPSIBLE,
+    collapsible,
+    setCollapsible,
+    defaultVariant: DEFAULT_VARIANT,
+    variant,
+    setVariant,
+  };
+
+  return <LayoutContext value={contextValue}>{children}</LayoutContext>;
+}
+
+// Define the hook for the provider
+// eslint-disable-next-line react-refresh/only-export-components
+export function useLayout() {
+  const context = useContext(LayoutContext);
+  if (!context) {
+    throw new Error("useLayout must be used within a LayoutProvider");
+  }
+  return context;
+}

package/src/context/search-provider.tsx

@@ -0,0 +1,48 @@
+import { CommandMenu } from "@icomponents/react/components/command-menu";
+import { type NavGroup } from "@icomponents/react/components/layout/types";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type SearchContextType = {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const SearchContext = createContext<SearchContextType | null>(null);
+
+type SearchProviderProps = {
+  children: React.ReactNode;
+  navGroups: NavGroup[];
+};
+
+export function SearchProvider({ children, navGroups }: SearchProviderProps) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((open) => !open);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  return (
+    <SearchContext value={{ open, setOpen }}>
+      {children}
+      <CommandMenu navGroups={navGroups} />
+    </SearchContext>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useSearch = () => {
+  const searchContext = useContext(SearchContext);
+
+  if (!searchContext) {
+    throw new Error("useSearch has to be used within SearchProvider");
+  }
+
+  return searchContext;
+};