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

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

@@ -0,0 +1,83 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface FilterChipsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional group label rendered as neutral text at the left of the
+     * chips (e.g. "Filtros"). Deliberately NOT a `<legend>`/`<fieldset>`
+     * pair — FilterChips groups navigation/selection chips, not form
+     * controls, and fieldset semantics would imply a form that isn't
+     * there. When `label` is a plain string it doubles as the group's
+     * accessible name (see the aria-label contract in the component
+     * JSDoc).
+     */
+    label?: ReactNode;
+    /**
+     * The chips. Typically `<Chip>` elements — including the
+     * `<Chip asChild><Link/></Chip>` navigation form — but any inline
+     * content composes.
+     */
+    children: ReactNode;
+    /**
+     * Whether chips wrap to new lines when they overflow the container
+     * width. `true` (default) applies `flex-wrap` — the responsive
+     * filter-bar behavior; `false` applies `flex-nowrap` and keeps
+     * everything on one line (consumer owns overflow handling).
+     * @default true
+     */
+    wrap?: boolean;
+}
+/**
+ * `FilterChips` — groups `Chip`s into a labeled filter bar.
+ *
+ * The shell of every chip-based filter row: a `role="group"` container
+ * with an optional neutral text label at the left and a flex run of
+ * chips that wraps responsively by default. Purely presentational — the
+ * interactive identity (select, navigate, remove) lives in each `Chip`
+ * (`onClick`/`onRemove`, or `asChild` with a consumer `<Link>`), never
+ * in this wrapper.
+ *
+ * ### Accessible name contract
+ *
+ * The container carries `role="group"` so assistive technology can
+ * announce the chips as one named unit. The accessible name resolves in
+ * this order:
+ *
+ * 1. An explicit `aria-label` OR `aria-labelledby` passed by the
+ *    consumer always wins — when either is present, no name is derived
+ *    from `label`, so the consumer's attribute is the only naming on the
+ *    element (no redundant `aria-label` is left alongside an
+ *    `aria-labelledby`).
+ * 2. Otherwise, when `label` is a non-empty plain string, it is reused
+ *    as the group's `aria-label` automatically.
+ * 3. When `label` is a non-string `ReactNode` (or absent), no
+ *    `aria-label` is derived — supply `aria-label`/`aria-labelledby`
+ *    yourself if the group needs a name AT users can identify it by.
+ *
+ * ### Server-safe
+ *
+ * Pure presentation — no hooks, no event handlers on the DOM. Ships in
+ * the `./server` entry. Consumer-supplied chips may themselves be
+ * client components (`<Chip onRemove>`); React's RSC boundary handles
+ * that normally, and the zero-JS path (`<Chip asChild><Link/></Chip>`)
+ * stays fully server-rendered.
+ *
+ * @example
+ * ```tsx
+ * // Navigation filter bar — server-rendered, zero-JS-friendly.
+ * <FilterChips label="Filtros">
+ *   <Chip asChild selected>
+ *     <Link href="?uf=SP" aria-current="page">UF: SP</Link>
+ *   </Chip>
+ *   <Chip asChild>
+ *     <Link href="?partido=PT">Partido: PT</Link>
+ *   </Chip>
+ * </FilterChips>
+ *
+ * // Single-line variant (consumer owns horizontal overflow).
+ * <FilterChips label="Período" wrap={false}>
+ *   <Chip>2024</Chip>
+ *   <Chip>2025</Chip>
+ * </FilterChips>
+ * ```
+ */
+export declare function FilterChips({ label, children, wrap, className, ...props }: FilterChipsProps): import("react").JSX.Element;
+export default FilterChips;

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

@@ -0,0 +1,2 @@
+export { FilterChips, default } from "./FilterChips";
+export type { FilterChipsProps } from "./FilterChips";

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

@@ -1,6 +1,8 @@
 export { default as Card } from "./Card";
 export { Stat, StatGroup } from "./Stat";
 export type { StatProps, StatTone, StatAlign, StatGroupProps, StatGroupLayout, StatGroupCols, } from "./Stat";
+export { default as FilterChips } from "./FilterChips";
+export type { FilterChipsProps } from "./FilterChips";
 export * from "./Form";
 export { default as Breadcrumb } from "./Breadcrumb";
 export type { BreadcrumbItem } from "./Breadcrumb";
@@ -79,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

@@ -43,6 +43,8 @@ export { default as DrawerHeader } from "./components/Drawer/DrawerHeader";
 export type { DrawerHeaderProps } from "./components/Drawer/DrawerHeader";
 export { default as DrawerFooter } from "./components/Drawer/DrawerFooter";
 export type { DrawerFooterProps } from "./components/Drawer/DrawerFooter";
+export { FilterChips } from "./components/FilterChips/FilterChips";
+export type { FilterChipsProps } from "./components/FilterChips/FilterChips";
 export { HeaderActions } from "./components/Header/components/HeaderActions";
 export type { HeaderActionsProps } from "./components/Header/components/HeaderActions";
 export { HeaderNavigation } from "./components/Header/components/HeaderNavigation";
@@ -59,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.9.0",
+  "version": "3.11.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",