@fabio.caffarello/react-design-system 3.8.0 → 3.10.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/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";

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";

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "3.8.0",
+  "version": "3.10.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/ui/index.d.ts",
   "style": "dist/react-design-system.css",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/ui/index.d.ts",
@@ -24,6 +27,10 @@
       "import": "./dist/hooks/index.js",
       "require": "./dist/hooks/index.cjs"
     },
+    "./granular": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/granular/index.js"
+    },
     "./styles": "./dist/react-design-system.css",
     "./styles.css": "./dist/react-design-system.css"
   },
@@ -36,7 +43,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "npx tsc --project tsconfig.app.json --declaration --emitDeclarationOnly --outDir dist && vite build && vite build --config vite.config.server.ts && vite build --config vite.config.hooks.ts && npm run build:validate",
+    "build": "npx tsc --project tsconfig.app.json --declaration --emitDeclarationOnly --outDir dist && vite build && vite build --config vite.config.server.ts && vite build --config vite.config.hooks.ts && vite build --config vite.config.granular.ts && npm run build:validate",
     "build:validate": "tsx scripts/validate-build-exports.ts && node scripts/validate-use-client-in-dist.mjs && node scripts/validate-server-entry.mjs",
     "lint": "eslint .",
     "typecheck": "tsc --build --force tsconfig.json",