@fabio.caffarello/react-design-system 3.10.0 → 3.11.0

package/dist/ui/components/TabsAsLinks/TabsAsLinks.d.ts

@@ -0,0 +1,80 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+/** Visual hierarchy: `default` = primary tab bar, `sub` = nested sub-tabs. */
+export type TabsAsLinksVariant = "default" | "sub";
+/** A single navigation tab. The active state is decided by the caller. */
+export interface TabAsLink {
+    /** Visible tab label. */
+    label: ReactNode;
+    /** Destination URL — pre-computed by the caller. */
+    href: string;
+    /**
+     * Whether this tab is the current one. The caller derives it (from
+     * `pathname` / `searchParams`); the component does no detection of its own.
+     * @default false
+     */
+    active?: boolean;
+    /** Optional leading icon (decorative — rendered `aria-hidden`). */
+    icon?: ReactNode;
+    /** Optional trailing count (e.g. number of items behind the tab). */
+    count?: number;
+}
+export interface TabsAsLinksProps extends HTMLAttributes<HTMLElement> {
+    /** The tabs to render, in order. */
+    items: TabAsLink[];
+    /**
+     * Visual hierarchy.
+     * @default 'default'
+     */
+    variant?: TabsAsLinksVariant;
+    /**
+     * Element/component each tab renders as. Defaults to a plain `<a>` (zero
+     * JS, works without hydration). Pass a router link — e.g. Next's `Link` —
+     * to keep client-side navigation/prefetch: `linkComponent={Link}`. It
+     * receives `href`, `className`, `aria-current`, and `children`.
+     * @default 'a'
+     */
+    linkComponent?: ElementType;
+    /** Additional CSS classes merged onto the root `<nav>`. */
+    className?: string;
+}
+/**
+ * `TabsAsLinks` — tabs rendered as **navigation links**, with the active tab
+ * decided by the caller (from the URL), not by interactive state.
+ *
+ * This is the server-safe counterpart to the interactive `Tabs` widget. Use
+ * it for tab bars whose selection lives in the URL (`?tab=`, `/section`) so
+ * they work without JavaScript and survive a shared link. Because each tab is
+ * a real link to a distinct destination, the component uses the **navigation**
+ * pattern — a named `<nav>` landmark with `aria-current="page"` on the active
+ * link — NOT the `role="tab"` widget pattern (which would promise arrow-key
+ * semantics that links don't have).
+ *
+ * ### Accessible name
+ *
+ * Renders a `<nav>` landmark, which must be named so screen-reader users can
+ * tell multiple tab bars apart. Pass `aria-label` (e.g. `"Painel"`) or
+ * `aria-labelledby`. With neither, a dev-only warning fires (the landmark
+ * still renders, just anonymously).
+ *
+ * ### Server-safe
+ *
+ * No hooks, no event handlers on the DOM — pure presentation. Ships in the
+ * `./server` entry. Defaults to a plain `<a>`; pass `linkComponent={Link}` to
+ * keep a router's client-side navigation, which crosses the RSC boundary as a
+ * client reference.
+ *
+ * @example
+ * ```tsx
+ * // Next App Router — active derived from searchParams in a Server Component
+ * <TabsAsLinks
+ *   aria-label="Painel"
+ *   linkComponent={Link}
+ *   items={[
+ *     { label: "Visão geral", href: "/painel?tab=overview", active: tab === "overview" },
+ *     { label: "Alertas", href: "/painel?tab=alerts", active: tab === "alerts", count: 3 },
+ *   ]}
+ * />
+ * ```
+ */
+declare const TabsAsLinks: import("react").ForwardRefExoticComponent<TabsAsLinksProps & import("react").RefAttributes<HTMLElement>>;
+export default TabsAsLinks;

package/dist/ui/components/TabsAsLinks/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TabsAsLinks";
+export type { TabsAsLinksProps, TabAsLink, TabsAsLinksVariant, } from "./TabsAsLinks";

package/dist/ui/components/index.d.ts

@@ -81,3 +81,5 @@ export { DataTablePattern, type DataTablePatternProps, type DataTableColumn, } f
 export { FormWizardPattern, type FormWizardPatternProps, type FormWizardStep, } from "./FormWizardPattern";
 export { SearchAndFilterPattern, type SearchAndFilterPatternProps, type FilterConfig, type FilterOption, } from "./SearchAndFilterPattern";
 export { DashboardLayout, type DashboardLayoutProps } from "./DashboardLayout";
+export { default as TabsAsLinks } from "./TabsAsLinks";
+export type { TabsAsLinksProps, TabAsLink, TabsAsLinksVariant, } from "./TabsAsLinks";

package/dist/ui/server.d.ts

@@ -61,5 +61,7 @@ export { StatGroup } from "./components/Stat/StatGroup";
 export type { StatGroupProps, StatGroupLayout, StatGroupCols, } from "./components/Stat/StatGroup";
 export { default as TableCell } from "./components/Table/TableCell";
 export type { TableCellProps } from "./components/Table/TableCell";
+export { default as TabsAsLinks } from "./components/TabsAsLinks/TabsAsLinks";
+export type { TabsAsLinksProps, TabAsLink, TabsAsLinksVariant, } from "./components/TabsAsLinks/TabsAsLinks";
 export { default as Timeline } from "./components/Timeline/Timeline";
 export type { TimelineItem, TimelineOrientation, TimelineProps, } from "./components/Timeline/Timeline";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "3.10.0",
+  "version": "3.11.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",