Feature Grid

1import * as React from 'react';
2 
3// @interlace/feature-grid v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/feature-grid
5// What changed since: https://ds.interlace.tools/c/feature-grid#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — FeatureGrid
10 *
11 * Grid of small "feature" cards: icon + title + 1-2 line description.
12 * The shape every landing page reaches for to spell out "what we do" in
13 * 3-6 cells. Server component, no hooks.
14 *
15 * ## Anatomy
16 *
17 *   <section data-slot="feature-grid" data-min-viewport="320">
18 *     <Container><Grid cols={3}>{features.map(...)}</Grid></Container>
19 *   </section>
20 *
21 * | Rule | Concept                          | Where in this file                                          |
22 * | ---- | -------------------------------- | ----------------------------------------------------------- |
23 * | R4   | Extends native el                | `React.ComponentProps<'section'>` + FeatureGrid props       |
24 * | R6   | data-slot on root                | `data-slot="feature-grid"` + `data-slot="feature"` per cell |
25 * | R7   | className merged + ...rest       | `cn(BASE, className)` + `{...props}`                        |
26 * | R10  | Composition seam (slots)         | `features` array of {icon, title, description}              |
27 * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |
28 * | R18  | Tailwind only                    | Zero inline `style`                                         |
29 * | R19  | Tokens only                      | spacing + radius + token colours                            |
30 * | R20  | AA contrast                      | foreground on background                                    |
31 * | R25  | Server component                 | No hooks                                                    |
32 * | R26  | A11y                             | `<section>` landmark; icons aria-hidden, titles as h3       |
33 */
34 
35import { cn } from '@/lib/utils';
36import { Container } from '@/components/ui/container';
37import { Grid } from '@/components/ui/grid';
38import { Skeleton } from '@/components/ui/skeleton';
39import { Stack } from '@/components/ui/stack';
40import { Typography } from '@/components/ui/typography';
41 
42export const MIN_VIEWPORT = 320 as const;
43 
44interface FeatureItem {
45  /** Decorative icon — typically a lucide icon, marked aria-hidden. */
46  icon?: React.ReactNode;
47// … truncated