@roadlittledawn/docs-design-system-react 0.12.3 → 0.13.0

package/USAGE.md

@@ -36,6 +36,7 @@ Before diving into individual components, here's guidance on common decision poi
 
 - **`Grid`/`Column`** — for asymmetric or varied multi-column layouts (tutorial + code panel, image + annotation, side-by-side comparison)
 - **`CardGrid`** — specifically for grids of uniform `Card` items; simpler API than `Grid`
+- **`TileGrid`** — for dense grids of `Tile` items (integrations, frameworks, skills); supports 3–6 columns
 
 ### Headings and text
 
@@ -114,6 +115,10 @@ A contained, elevated box for grouping related content. Becomes a fully-clickabl
 - **Alerts, warnings, or notices** — use `Callout`
 - **Very long content** — cards are best for summaries; long content belongs in page sections
 
+### When to Use `Card` vs `Tile`
+
+Use `Card` for a small number of items (2–12) with substantial content (descriptions, icons, links). Use `Tile` for large lists of compact items (integrations, frameworks, skills) where 10–100+ items fit on a page.
+
 ### When to Use `Card` vs `Callout`
 
 Use `Card` for content that is part of the normal page structure (navigation, feature highlights). Use `Callout` when you need to interrupt the reading flow to highlight something important, warn users, or provide tips.
@@ -136,6 +141,8 @@ import { Card } from "@roadlittledawn/docs-design-system-react";
 | `iconPlacement` | `"left" \| "top-left" \| "top-center"` | `"top-left"` | Where to place the icon: vertically centered on the left, above content flush left, or above content centered |
 | `iconSize` | `string` | — | Override the icon container size (width and height). Accepts any valid CSS length (e.g. `"2rem"`, `"48px"`). Defaults to `--dds-card-icon-size` (`1.5rem`). |
 | `showArrow` | `boolean` | `false` | Show an animated arrow in the lower-right corner to signal the card is navigable. Best used with `href`. |
+| `maxWidth` | `string` | — | Constrain the card's maximum width (e.g. `"400px"`, `"32rem"`). Useful when a card fills a wide column but looks better smaller. |
+| `centered` | `boolean` | `false` | Horizontally center the card within its container. Most useful combined with `maxWidth`. |
 | `children` | `ReactNode` | — | Card content |
 | `className` | `string` | `""` | Additional CSS classes |
 
@@ -171,6 +178,11 @@ import { Card } from "@roadlittledawn/docs-design-system-react";
 <Card title="New Feature" titleColor="blue" backgroundColor="blue">
   Check out our latest component additions.
 </Card>
+
+{/* Custom width, centered in column */}
+<Card title="Centered Card" maxWidth="400px" centered>
+  This card is constrained to 400px and centered.
+</Card>
 ```
 
 ### Icon usage in MDX
@@ -258,6 +270,134 @@ import { CardGrid } from "@roadlittledawn/docs-design-system-react";
 
 ---
 
+## Tile
+
+A compact, clickable item designed for dense listing patterns — integrations, frameworks, plugins, skills, etc. Unlike `Card`, Tile has a fixed layout (icon left, title right) and a simpler, more opinionated API.
+
+### When to Use
+
+- Large lists of similar items (10–100+): integrations, frameworks, plugins, skills
+- Navigation to many destinations where individual items are brief
+- When `Card` would feel too spacious for the number of items
+
+### When Not to Use
+
+- **Fewer than ~6 items with significant content** — use `Card` instead
+- **Items that need rich content** (paragraphs, code, images) — use `Card`
+- **Feature highlights** — use `Card` with colored backgrounds
+
+### `Tile` vs `Card`
+
+| | Tile | Card |
+|---|---|---|
+| Layout | Fixed (icon-left) | Flexible (icon top/left/center) |
+| Title | Required | Optional |
+| Description | String prop | `children` (ReactNode) |
+| Use case | Dense lists (10–100+ items) | Content groups (2–12 items) |
+| Padding | Compact (0.875rem) | Spacious (1.5rem) |
+
+### Import
+
+```tsx
+import { Tile } from "@roadlittledawn/docs-design-system-react";
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | — | **Required.** Tile heading text |
+| `icon` | `ReactNode` | — | Optional icon displayed on the left. Pass a rendered icon component. |
+| `description` | `string` | — | Optional short description below the title |
+| `href` | `string` | — | Optional link URL. Makes the entire tile clickable. |
+| `showArrow` | `boolean` | `false` | Show an animated arrow in the lower-right corner. Best used with `href`. |
+| `className` | `string` | `""` | Additional CSS classes |
+
+### Examples
+
+```tsx
+{/* Basic tile */}
+<Tile title="React" icon={<ReactIcon />} href="/integrations/react" />
+
+{/* With description */}
+<Tile title="React" icon={<ReactIcon />} description="Build UIs with components" href="/integrations/react" />
+
+{/* With arrow indicator */}
+<Tile title="TypeScript" icon={<TsIcon />} description="Typed JavaScript" href="/skills/typescript" showArrow />
+```
+
+### Icon usage in MDX
+
+Same pattern as `Card` — the consuming site resolves icon name strings to rendered components in the MDX component map:
+
+```tsx
+Tile: ({ icon, ...props }) => {
+  const IconComp = typeof icon === 'string' ? iconMap[icon] : null;
+  return <DdsTile icon={IconComp ? <IconComp /> : icon} {...props} />;
+}
+```
+
+---
+
+## TileGrid
+
+A responsive CSS grid container designed for `Tile` components. Supports 3–6 columns and automatically adjusts to fewer columns on smaller screens.
+
+### When to Use
+
+- Laying out 6 or more `Tile` components in a grid
+- Displaying integrations, plugins, or skills lists
+
+### When Not to Use
+
+- **Mixed content types** — use `Grid`
+- **Fewer than 6 tiles** — `CardGrid` may be more appropriate
+- **Tiles that need equal height** — TileGrid tiles size to their content; for equal-height use `CardGrid` with Card
+
+### Responsive behavior
+
+| columns | Mobile (< 640px) | Tablet (≥ 640px) | Desktop (≥ 1024px) |
+|---------|-----------------|-----------------|-------------------|
+| 3       | 1 col           | 2 col           | 3 col             |
+| 4       | 2 col           | 2 col           | 4 col             |
+| 5       | 2 col           | 3 col           | 5 col             |
+| 6       | 2 col           | 3 col           | 6 col             |
+
+### Import
+
+```tsx
+import { TileGrid } from "@roadlittledawn/docs-design-system-react";
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `columns` | `3 \| 4 \| 5 \| 6` | `4` | Number of columns at full width |
+| `children` | `ReactNode` | — | Grid content (typically Tile components) |
+| `className` | `string` | `""` | Additional CSS classes |
+
+### Examples
+
+```tsx
+{/* Integration list */}
+<TileGrid columns={4}>
+  <Tile title="React" icon={<ReactIcon />} href="/integrations/react" />
+  <Tile title="Vue" icon={<VueIcon />} href="/integrations/vue" />
+  <Tile title="Angular" icon={<AngularIcon />} href="/integrations/angular" />
+  {/* …more tiles */}
+</TileGrid>
+
+{/* Skills with descriptions */}
+<TileGrid columns={3}>
+  <Tile title="TypeScript" icon={<TsIcon />} description="Typed JavaScript" href="/skills/typescript" showArrow />
+  <Tile title="GraphQL" icon={<GqlIcon />} description="Query language for APIs" href="/skills/graphql" showArrow />
+  {/* …more tiles */}
+</TileGrid>
+```
+
+---
+
 ## Callout
 
 Interrupts reading flow to highlight important information. Each variant has a specific semantic meaning — choose the right one.

package/dist/components/Card.d.ts

@@ -39,9 +39,20 @@ export interface CardProps {
      * @default false
      */
     showArrow?: boolean;
+    /**
+     * Constrain the card's maximum width. Accepts any valid CSS length value (e.g. `"400px"`, `"32rem"`).
+     * Useful when a card fills a wide column but its content looks better at a smaller size.
+     */
+    maxWidth?: string;
+    /**
+     * When true, horizontally centers the card within its container.
+     * Most useful in combination with `maxWidth`.
+     * @default false
+     */
+    centered?: boolean;
     /** Card content */
     children: ReactNode;
     /** Additional CSS classes */
     className?: string;
 }
-export declare function Card({ title, titleColor, backgroundColor, href, icon, iconPlacement, iconSize, showArrow, children, className, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ title, titleColor, backgroundColor, href, icon, iconPlacement, iconSize, showArrow, maxWidth, centered, children, className, }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function Card(_a) {
-    var title = _a.title, _b = _a.titleColor, titleColor = _b === void 0 ? "gray" : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? "white" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPlacement, iconPlacement = _d === void 0 ? "top-left" : _d, iconSize = _a.iconSize, _e = _a.showArrow, showArrow = _e === void 0 ? false : _e, children = _a.children, _f = _a.className, className = _f === void 0 ? "" : _f;
+    var title = _a.title, _b = _a.titleColor, titleColor = _b === void 0 ? "gray" : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? "white" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPlacement, iconPlacement = _d === void 0 ? "top-left" : _d, iconSize = _a.iconSize, _e = _a.showArrow, showArrow = _e === void 0 ? false : _e, maxWidth = _a.maxWidth, _f = _a.centered, centered = _f === void 0 ? false : _f, children = _a.children, _g = _a.className, className = _g === void 0 ? "" : _g;
     var cardClasses = [
         "dds-card",
         "dds-card-bg-".concat(backgroundColor),
@@ -33,9 +33,10 @@ export function Card(_a) {
             .join(" "), style: __assign({}, (iconSize && { width: iconSize, height: iconSize })), "aria-hidden": "true", children: icon })) : null;
     var arrowEl = showArrow ? (_jsx("span", { className: "dds-card-arrow", "aria-hidden": "true", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 8H14M10 4L14 8L10 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : null;
     var bodyContent = icon && iconPlacement === "left" ? (_jsxs("div", { className: "dds-card-icon-row", children: [iconEl, _jsxs("div", { className: "dds-card-icon-content", children: [title && _jsx("h3", { className: titleClasses, children: title }), _jsx("div", { className: textClasses, children: children })] })] })) : (_jsxs(_Fragment, { children: [iconEl, title && _jsx("h3", { className: titleClasses, children: title }), _jsx("div", { className: textClasses, children: children })] }));
-    var content = (_jsxs("div", { className: cardClasses, children: [bodyContent, arrowEl] }));
+    var outerStyle = __assign(__assign({}, (maxWidth && { maxWidth: maxWidth })), (centered && { marginLeft: "auto", marginRight: "auto" }));
+    var content = (_jsxs("div", { className: cardClasses, style: !href ? outerStyle : undefined, children: [bodyContent, arrowEl] }));
     if (href) {
-        return (_jsx("a", { href: href, className: "no-text-decoration", children: content }));
+        return (_jsx("a", { href: href, className: "no-text-decoration", style: Object.keys(outerStyle).length > 0 ? outerStyle : undefined, children: content }));
     }
     return content;
 }

package/dist/components/Card.stories.d.ts

@@ -55,6 +55,11 @@ export declare const WithCustomIconSize: Story;
  * All title color variants.
  */
 export declare const TitleColors: Story;
+/**
+ * Card constrained to a custom width and centered. Useful when a card fills a wide column but
+ * looks better at a smaller size.
+ */
+export declare const CustomWidth: Story;
 /**
  * All background color variants.
  */

package/dist/components/Card.stories.js

@@ -51,6 +51,15 @@ var meta = {
             control: 'text',
             description: 'Card content.',
         },
+        maxWidth: {
+            control: 'text',
+            description: 'Constrain the card\'s maximum width (e.g. "400px", "32rem").',
+        },
+        centered: {
+            control: 'boolean',
+            description: 'Horizontally center the card within its container. Most useful with maxWidth.',
+            table: { defaultValue: { summary: 'false' } },
+        },
         className: {
             control: 'text',
             description: 'Additional CSS classes.',
@@ -266,6 +275,25 @@ export var TitleColors = {
     },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Card, { title: "Blue Title", titleColor: "blue", children: "Content with blue title" }), _jsx(Card, { title: "Green Title", titleColor: "green", children: "Content with green title" }), _jsx(Card, { title: "Purple Title", titleColor: "purple", children: "Content with purple title" }), _jsx(Card, { title: "Red Title", titleColor: "red", children: "Content with red title" }), _jsx(Card, { title: "Yellow Title", titleColor: "yellow", children: "Content with yellow title" }), _jsx(Card, { title: "Gray Title", titleColor: "gray", children: "Content with gray title" })] })); },
 };
+/**
+ * Card constrained to a custom width and centered. Useful when a card fills a wide column but
+ * looks better at a smaller size.
+ */
+export var CustomWidth = {
+    args: {
+        title: 'Custom Width',
+        maxWidth: '400px',
+        centered: true,
+        children: 'This card is constrained to 400px and centered in its container.',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Card title=\"Custom Width\" maxWidth=\"400px\" centered>\n  This card is constrained to 400px and centered in its container.\n</Card>",
+            },
+        },
+    },
+};
 /**
  * All background color variants.
  */

package/dist/components/Tile.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import "./Tile.css";
+export interface TileProps {
+    /** Tile heading text (required) */
+    title: string;
+    /**
+     * Optional icon to display on the left side.
+     * Pass a rendered icon component (e.g. `<YourIcon />`).
+     */
+    icon?: ReactNode;
+    /** Optional short description displayed below the title */
+    description?: string;
+    /** Optional link URL. When provided, the entire tile becomes clickable. */
+    href?: string;
+    /**
+     * Show an animated arrow in the lower-right corner to signal the tile is navigable.
+     * Best used together with `href`.
+     * @default false
+     */
+    showArrow?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Tile({ title, icon, description, href, showArrow, className, }: TileProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tile.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Tile.css";
+export function Tile(_a) {
+    var title = _a.title, icon = _a.icon, description = _a.description, href = _a.href, _b = _a.showArrow, showArrow = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
+    var tileClasses = [
+        "dds-tile",
+        href ? "dds-tile-clickable" : "",
+        showArrow ? "dds-tile-has-arrow" : "",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    var arrowEl = showArrow ? (_jsx("span", { className: "dds-tile-arrow", "aria-hidden": "true", children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 8H14M10 4L14 8L10 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : null;
+    var content = (_jsxs("div", { className: tileClasses, children: [_jsxs("div", { className: "dds-tile-body", children: [icon && (_jsx("span", { className: "dds-tile-icon", "aria-hidden": "true", children: icon })), _jsxs("div", { className: "dds-tile-text", children: [_jsx("span", { className: "dds-tile-title", children: title }), description && (_jsx("span", { className: "dds-tile-desc", children: description }))] })] }), arrowEl] }));
+    if (href) {
+        return (_jsx("a", { href: href, className: "dds-tile-link", children: content }));
+    }
+    return content;
+}

package/dist/components/Tile.stories.d.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tile } from './Tile';
+/**
+ * The Tile component is a compact, clickable card designed for dense lists of items
+ * such as integrations, frameworks, plugins, or skills.
+ *
+ * Unlike Card, Tile has a fixed layout (icon left, title right) and a simpler API
+ * focused on the list-item use case.
+ */
+declare const meta: Meta<typeof Tile>;
+export default meta;
+type Story = StoryObj<typeof Tile>;
+/**
+ * Basic tile with title only.
+ */
+export declare const Basic: Story;
+/**
+ * Tile with an icon on the left.
+ */
+export declare const WithIcon: Story;
+/**
+ * Tile with icon and a short description below the title.
+ */
+export declare const WithDescription: Story;
+/**
+ * Clickable tile with a link. Hover to see the border and shadow change.
+ */
+export declare const Clickable: Story;
+/**
+ * Clickable tile with the animated arrow indicator. Hover to see it animate.
+ */
+export declare const WithArrow: Story;
+/**
+ * A realistic grid of integration tiles. Use TileGrid to lay out multiple Tiles.
+ */
+export declare const IntegrationGrid: Story;
+/**
+ * A larger grid with descriptions and arrows, using 3 columns.
+ */
+export declare const SkillsGrid: Story;

package/dist/components/Tile.stories.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tile } from './Tile';
+import { TileGrid } from './TileGrid';
+/**
+ * The Tile component is a compact, clickable card designed for dense lists of items
+ * such as integrations, frameworks, plugins, or skills.
+ *
+ * Unlike Card, Tile has a fixed layout (icon left, title right) and a simpler API
+ * focused on the list-item use case.
+ */
+var meta = {
+    title: 'Components/Tile',
+    component: Tile,
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Tile heading text (required).',
+        },
+        icon: {
+            control: false,
+            description: 'Optional icon to display on the left. Pass a rendered icon component.',
+        },
+        description: {
+            control: 'text',
+            description: 'Optional short description displayed below the title.',
+        },
+        href: {
+            control: 'text',
+            description: 'Optional link URL. Makes the entire tile clickable.',
+        },
+        showArrow: {
+            control: 'boolean',
+            description: 'Show an animated arrow in the lower-right corner.',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "\nThe Tile component is a compact, clickable item designed for dense listing patterns.\n\n## When to Use\n\n- Long lists of integrations, frameworks, plugins, or skills\n- Navigation to many similar destinations (e.g., 20+ items)\n- When Card would feel too spacious for the number of items\n\n## When Not to Use\n\n- For fewer than ~6 items with significant content \u2014 use Card instead\n- When items need rich content (paragraphs, code, images) \u2014 use Card\n- For feature highlights \u2014 use Card with colored backgrounds\n\n## Vs. Card\n\n| | Tile | Card |\n|---|---|---|\n| Layout | Fixed (icon-left) | Flexible (icon top/left/center) |\n| Title | Required | Optional |\n| Description | String prop | children (ReactNode) |\n| Use case | Dense lists (10\u2013100+ items) | Content groups (2\u201312 items) |\n| Padding | Compact (0.875rem) | Spacious (1.5rem) |\n\n## Accessibility\n\n- Clickable tiles use proper link semantics (`<a>`)\n- Icon is decorative (`aria-hidden`) and does not affect screen reader output\n        ",
+            },
+        },
+    },
+};
+export default meta;
+var DemoIcon = function () { return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" }) })); };
+/**
+ * Basic tile with title only.
+ */
+export var Basic = {
+    args: {
+        title: 'React',
+    },
+    parameters: {
+        docs: {
+            source: { code: "<Tile title=\"React\" />" },
+        },
+    },
+};
+/**
+ * Tile with an icon on the left.
+ */
+export var WithIcon = {
+    args: {
+        title: 'React',
+        icon: _jsx(DemoIcon, {}),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Tile title=\"React\" icon={<ReactIcon />} />",
+            },
+        },
+    },
+};
+/**
+ * Tile with icon and a short description below the title.
+ */
+export var WithDescription = {
+    args: {
+        title: 'React',
+        icon: _jsx(DemoIcon, {}),
+        description: 'Build UIs with components',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Tile title=\"React\" icon={<ReactIcon />} description=\"Build UIs with components\" />",
+            },
+        },
+    },
+};
+/**
+ * Clickable tile with a link. Hover to see the border and shadow change.
+ */
+export var Clickable = {
+    args: {
+        title: 'React',
+        icon: _jsx(DemoIcon, {}),
+        description: 'Build UIs with components',
+        href: '/integrations/react',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Tile title=\"React\" icon={<ReactIcon />} description=\"Build UIs with components\" href=\"/integrations/react\" />",
+            },
+        },
+    },
+};
+/**
+ * Clickable tile with the animated arrow indicator. Hover to see it animate.
+ */
+export var WithArrow = {
+    args: {
+        title: 'React',
+        icon: _jsx(DemoIcon, {}),
+        description: 'Build UIs with components',
+        href: '/integrations/react',
+        showArrow: true,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Tile title=\"React\" icon={<ReactIcon />} description=\"Build UIs with components\" href=\"/integrations/react\" showArrow />",
+            },
+        },
+    },
+};
+/**
+ * A realistic grid of integration tiles. Use TileGrid to lay out multiple Tiles.
+ */
+export var IntegrationGrid = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<TileGrid columns={4}>\n  <Tile title=\"React\" icon={<ReactIcon />} description=\"UI components\" href=\"/integrations/react\" />\n  <Tile title=\"Vue\" icon={<VueIcon />} description=\"Progressive framework\" href=\"/integrations/vue\" />\n  {/* \u2026more tiles */}\n</TileGrid>",
+            },
+        },
+    },
+    render: function () {
+        var integrations = [
+            'React', 'Vue', 'Angular', 'Svelte',
+            'Next.js', 'Nuxt', 'Astro', 'Remix',
+            'Node.js', 'Deno', 'Bun', 'Express',
+        ];
+        return (_jsx(TileGrid, { columns: 4, children: integrations.map(function (name) { return (_jsx(Tile, { title: name, icon: _jsx(DemoIcon, {}), href: "/integrations/".concat(name.toLowerCase()) }, name)); }) }));
+    },
+};
+/**
+ * A larger grid with descriptions and arrows, using 3 columns.
+ */
+export var SkillsGrid = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<TileGrid columns={3}>\n  <Tile title=\"TypeScript\" icon={<TsIcon />} description=\"Typed JavaScript\" href=\"/skills/typescript\" showArrow />\n  {/* \u2026more tiles */}\n</TileGrid>",
+            },
+        },
+    },
+    render: function () {
+        var skills = [
+            { name: 'TypeScript', desc: 'Typed JavaScript at scale' },
+            { name: 'GraphQL', desc: 'Query language for APIs' },
+            { name: 'Docker', desc: 'Container platform' },
+            { name: 'Kubernetes', desc: 'Container orchestration' },
+            { name: 'Terraform', desc: 'Infrastructure as code' },
+            { name: 'Postgres', desc: 'Relational database' },
+        ];
+        return (_jsx(TileGrid, { columns: 3, children: skills.map(function (_a) {
+                var name = _a.name, desc = _a.desc;
+                return (_jsx(Tile, { title: name, icon: _jsx(DemoIcon, {}), description: desc, href: "/skills/".concat(name.toLowerCase()), showArrow: true }, name));
+            }) }));
+    },
+};

package/dist/components/TileGrid.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import "./TileGrid.css";
+export interface TileGridProps {
+    /**
+     * Number of columns in the grid at full width.
+     * Responsive breakpoints apply automatically.
+     * @default 4
+     */
+    columns?: 3 | 4 | 5 | 6;
+    /** Grid content (typically Tile components) */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function TileGrid({ columns, children, className, }: TileGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TileGrid.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./TileGrid.css";
+export function TileGrid(_a) {
+    var _b = _a.columns, columns = _b === void 0 ? 4 : _b, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c;
+    var classNames = [
+        "dds-tile-grid",
+        "dds-tile-grid-".concat(columns),
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return _jsx("div", { className: classNames, children: children });
+}

package/dist/components/TileGrid.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TileGrid } from './TileGrid';
+/**
+ * TileGrid lays out Tile components in a responsive CSS grid.
+ * It supports 3–6 columns and automatically adjusts to fewer columns on smaller screens.
+ */
+declare const meta: Meta<typeof TileGrid>;
+export default meta;
+type Story = StoryObj<typeof TileGrid>;
+export declare const ThreeColumns: Story;
+export declare const FourColumns: Story;
+export declare const SixColumns: Story;
+export declare const WithDescriptions: Story;

package/dist/components/TileGrid.stories.js

@@ -0,0 +1,96 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TileGrid } from './TileGrid';
+import { Tile } from './Tile';
+/**
+ * TileGrid lays out Tile components in a responsive CSS grid.
+ * It supports 3–6 columns and automatically adjusts to fewer columns on smaller screens.
+ */
+var meta = {
+    title: 'Components/TileGrid',
+    component: TileGrid,
+    tags: ['autodocs'],
+    argTypes: {
+        columns: {
+            control: { type: 'select' },
+            options: [3, 4, 5, 6],
+            description: 'Number of columns at full width.',
+            table: { defaultValue: { summary: '4' } },
+        },
+        children: {
+            control: false,
+            description: 'Grid content (typically Tile components).',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "\nTileGrid is a responsive CSS grid container designed specifically for Tile components.\n\n## Responsive behavior\n\n| columns | Mobile (< 640px) | Tablet (\u2265 640px) | Desktop (\u2265 1024px) |\n|---------|-----------------|-----------------|-------------------|\n| 3       | 1 col           | 2 col           | 3 col             |\n| 4       | 2 col           | 2 col           | 4 col             |\n| 5       | 2 col           | 3 col           | 5 col             |\n| 6       | 2 col           | 3 col           | 6 col             |\n\n## Usage\n\n```tsx\n<TileGrid columns={4}>\n  <Tile title=\"React\" icon={<ReactIcon />} href=\"/integrations/react\" />\n  <Tile title=\"Vue\" icon={<VueIcon />} href=\"/integrations/vue\" />\n  {/* \u2026more tiles */}\n</TileGrid>\n```\n        ",
+            },
+        },
+    },
+};
+export default meta;
+var DemoIcon = function () { return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" }) })); };
+var names8 = ['React', 'Vue', 'Angular', 'Svelte', 'Next.js', 'Nuxt', 'Astro', 'Remix'];
+var names12 = __spreadArray(__spreadArray([], names8, true), ['Node.js', 'Deno', 'Bun', 'Express'], false);
+export var ThreeColumns = {
+    render: function () { return (_jsx(TileGrid, { columns: 3, children: names8.map(function (name) { return (_jsx(Tile, { title: name, icon: _jsx(DemoIcon, {}), href: "/integrations/".concat(name.toLowerCase()) }, name)); }) })); },
+    parameters: {
+        docs: {
+            source: {
+                code: "<TileGrid columns={3}>\n  {integrations.map((name) => (\n    <Tile key={name} title={name} icon={<Icon />} href={`/integrations/${name}`} />\n  ))}\n</TileGrid>",
+            },
+        },
+    },
+};
+export var FourColumns = {
+    render: function () { return (_jsx(TileGrid, { columns: 4, children: names12.map(function (name) { return (_jsx(Tile, { title: name, icon: _jsx(DemoIcon, {}), href: "/integrations/".concat(name.toLowerCase()) }, name)); }) })); },
+    parameters: {
+        docs: {
+            source: {
+                code: "<TileGrid columns={4}>\n  {integrations.map((name) => (\n    <Tile key={name} title={name} icon={<Icon />} href={`/integrations/${name}`} />\n  ))}\n</TileGrid>",
+            },
+        },
+    },
+};
+export var SixColumns = {
+    render: function () { return (_jsx(TileGrid, { columns: 6, children: __spreadArray(__spreadArray([], names12, true), ['Postgres', 'MySQL', 'Redis', 'MongoDB', 'Kafka', 'RabbitMQ'], false).map(function (name) { return (_jsx(Tile, { title: name, icon: _jsx(DemoIcon, {}), href: "/integrations/".concat(name.toLowerCase()) }, name)); }) })); },
+    parameters: {
+        docs: {
+            source: {
+                code: "<TileGrid columns={6}>\n  {integrations.map((name) => (\n    <Tile key={name} title={name} icon={<Icon />} href={`/integrations/${name}`} />\n  ))}\n</TileGrid>",
+            },
+        },
+    },
+};
+export var WithDescriptions = {
+    render: function () {
+        var skills = [
+            { name: 'TypeScript', desc: 'Typed JavaScript' },
+            { name: 'GraphQL', desc: 'Query language for APIs' },
+            { name: 'Docker', desc: 'Container platform' },
+            { name: 'Kubernetes', desc: 'Orchestration' },
+            { name: 'Terraform', desc: 'Infrastructure as code' },
+            { name: 'Postgres', desc: 'Relational database' },
+            { name: 'Redis', desc: 'In-memory data store' },
+            { name: 'Kafka', desc: 'Event streaming' },
+        ];
+        return (_jsx(TileGrid, { columns: 4, children: skills.map(function (_a) {
+                var name = _a.name, desc = _a.desc;
+                return (_jsx(Tile, { title: name, icon: _jsx(DemoIcon, {}), description: desc, href: "/skills/".concat(name.toLowerCase()) }, name));
+            }) }));
+    },
+};

package/dist/index.d.ts

@@ -15,4 +15,6 @@ export * from './components/Table';
 export * from './components/Grid';
 export * from './components/Breadcrumb';
 export * from './components/Icon';
+export * from './components/Tile';
+export * from './components/TileGrid';
 export * from './hooks/useKeyPress';

package/dist/index.js

@@ -16,5 +16,7 @@ export * from './components/Table';
 export * from './components/Grid';
 export * from './components/Breadcrumb';
 export * from './components/Icon';
+export * from './components/Tile';
+export * from './components/TileGrid';
 // Export hooks
 export * from './hooks/useKeyPress';

package/dist/styles.css

@@ -287,6 +287,27 @@
   --dds-table-cell-padding: 0.75rem 1rem;
   --dds-table-focus-ring: #3b82f6; /* blue-500 */
 
+  /* Tile */
+  --dds-tile-padding: 0.875rem;
+  --dds-tile-radius: 0.375rem;
+  --dds-tile-border: #e5e7eb; /* gray-200 */
+  --dds-tile-border-hover: #d1d5db; /* gray-300 */
+  --dds-tile-bg: #ffffff;
+  --dds-tile-shadow-hover:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --dds-tile-icon-size: 1.25rem; /* 20px */
+  --dds-tile-icon-color: #6b7280; /* gray-500 */
+  --dds-tile-icon-gap: 0.75rem;
+  --dds-tile-title-size: 0.9375rem; /* 15px */
+  --dds-tile-title-color: #111827; /* gray-900 */
+  --dds-tile-desc-size: 0.8125rem; /* 13px */
+  --dds-tile-desc-color: #6b7280; /* gray-500 */
+  --dds-tile-arrow-color: #9ca3af; /* gray-400 */
+  --dds-tile-arrow-inset: 0.625rem;
+
+  /* TileGrid */
+  --dds-tile-grid-gap: 0.75rem;
+
   /* Grid */
   --dds-grid-gap-sm: 1rem; /* gap-4 */
   --dds-grid-gap-md: 1.5rem; /* gap-6 */
@@ -486,6 +507,16 @@
   --dds-table-header-active-text: #93c5fd; /* blue-300 */
   --dds-table-focus-ring: #60a5fa; /* blue-400 */
 
+  /* Tile */
+  --dds-tile-border: #4b5563; /* gray-600 */
+  --dds-tile-border-hover: #9ca3af; /* gray-400 */
+  --dds-tile-bg: transparent;
+  --dds-tile-shadow-hover: none;
+  --dds-tile-icon-color: #9ca3af; /* gray-400 */
+  --dds-tile-title-color: #e5e7eb; /* gray-200 */
+  --dds-tile-desc-color: #9ca3af; /* gray-400 */
+  --dds-tile-arrow-color: #6b7280; /* gray-500 */
+
   /* Grid */
   --dds-grid-divider-color: #4b5563; /* gray-600 */
 
@@ -671,6 +702,16 @@
     --dds-table-header-active-text: #93c5fd;
     --dds-table-focus-ring: #60a5fa;
 
+    /* Tile */
+    --dds-tile-border: #4b5563; /* gray-600 */
+    --dds-tile-border-hover: #9ca3af; /* gray-400 */
+    --dds-tile-bg: transparent;
+    --dds-tile-shadow-hover: none;
+    --dds-tile-icon-color: #9ca3af; /* gray-400 */
+    --dds-tile-title-color: #e5e7eb; /* gray-200 */
+    --dds-tile-desc-color: #9ca3af; /* gray-400 */
+    --dds-tile-arrow-color: #6b7280; /* gray-500 */
+
     /* Grid */
     --dds-grid-divider-color: #4b5563; /* gray-600 */
 
@@ -838,6 +879,16 @@
   --dds-table-header-active-text: #93c5fd;
   --dds-table-focus-ring: #60a5fa;
 
+  /* Tile */
+  --dds-tile-border: #4b5563; /* gray-600 */
+  --dds-tile-border-hover: #9ca3af; /* gray-400 */
+  --dds-tile-bg: transparent;
+  --dds-tile-shadow-hover: none;
+  --dds-tile-icon-color: #9ca3af; /* gray-400 */
+  --dds-tile-title-color: #e5e7eb; /* gray-200 */
+  --dds-tile-desc-color: #9ca3af; /* gray-400 */
+  --dds-tile-arrow-color: #6b7280; /* gray-500 */
+
   /* Breadcrumb */
   --dds-breadcrumb-link-color: #9ca3af; /* gray-400 */
   --dds-breadcrumb-link-color-hover: #f9fafb; /* gray-50 */
@@ -1095,6 +1146,7 @@ pre[class*="language-"] {
   color: var(--dds-callout-course-title);
 }
 a.no-text-decoration {
+  display: block;
   text-decoration: none;
 }
 .dds-card {
@@ -2428,4 +2480,170 @@ a.dds-breadcrumb-link:hover {
   width: 100%;
   height: 100%;
 }
+a.dds-tile-link {
+  display: block;
+  text-decoration: none;
+}
+.dds-tile {
+  padding: var(--dds-tile-padding);
+  border-radius: var(--dds-tile-radius);
+  border: 1px solid var(--dds-tile-border);
+  background-color: var(--dds-tile-bg);
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+}
+.dds-tile-clickable {
+  cursor: pointer;
+  transition: var(--dds-transition-shadow), border-color 150ms ease-in-out;
+}
+.dds-tile-clickable:hover {
+  box-shadow: var(--dds-tile-shadow-hover);
+  border-color: var(--dds-tile-border-hover);
+}
+/* Layout: icon on left, text on right */
+.dds-tile-body {
+  display: flex;
+  align-items: center;
+  gap: var(--dds-tile-icon-gap);
+}
+.dds-tile-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--dds-tile-icon-size);
+  height: var(--dds-tile-icon-size);
+  color: var(--dds-tile-icon-color);
+}
+.dds-tile-icon > * {
+  width: 100%;
+  height: 100%;
+}
+/* Text stack */
+.dds-tile-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.dds-tile-title {
+  font-size: var(--dds-tile-title-size);
+  font-weight: var(--dds-font-semibold);
+  color: var(--dds-tile-title-color);
+  line-height: var(--dds-line-height-tight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dds-tile-desc {
+  display: block;
+  font-size: var(--dds-tile-desc-size);
+  color: var(--dds-tile-desc-color);
+  line-height: var(--dds-line-height-relaxed);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* Arrow */
+.dds-tile-has-arrow {
+  padding-right: calc(var(--dds-tile-padding) + 1.125rem);
+}
+[dir="rtl"] .dds-tile-has-arrow {
+  padding-right: var(--dds-tile-padding);
+  padding-left: calc(var(--dds-tile-padding) + 1.125rem);
+}
+.dds-tile-arrow {
+  position: absolute;
+  bottom: var(--dds-tile-arrow-inset);
+  right: var(--dds-tile-arrow-inset);
+  color: var(--dds-tile-arrow-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+[dir="rtl"] .dds-tile-arrow {
+  right: auto;
+  left: var(--dds-tile-arrow-inset);
+  transform: scaleX(-1);
+}
+@keyframes dds-tile-arrow-nudge {
+  0%   { transform: translateX(0); }
+  40%  { transform: translateX(4px); }
+  70%  { transform: translateX(-2px); }
+  100% { transform: translateX(0); }
+}
+@keyframes dds-tile-arrow-nudge-rtl {
+  0%   { transform: scaleX(-1) translateX(0); }
+  40%  { transform: scaleX(-1) translateX(4px); }
+  70%  { transform: scaleX(-1) translateX(-2px); }
+  100% { transform: scaleX(-1) translateX(0); }
+}
+.dds-tile-clickable:hover .dds-tile-arrow {
+  animation: dds-tile-arrow-nudge 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+[dir="rtl"] .dds-tile-clickable:hover .dds-tile-arrow {
+  animation: dds-tile-arrow-nudge-rtl 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+.dds-tile-grid {
+  display: grid;
+  gap: var(--dds-tile-grid-gap);
+}
+/* 3 columns: 1 → 2 → 3 */
+.dds-tile-grid-3 {
+  grid-template-columns: 1fr;
+}
+@media (min-width: 640px) {
+  .dds-tile-grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .dds-tile-grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+/* 4 columns: 2 → 2 → 4 */
+.dds-tile-grid-4 {
+  grid-template-columns: repeat(2, 1fr);
+}
+@media (min-width: 768px) {
+  .dds-tile-grid-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .dds-tile-grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+/* 5 columns: 2 → 3 → 5 */
+.dds-tile-grid-5 {
+  grid-template-columns: repeat(2, 1fr);
+}
+@media (min-width: 640px) {
+  .dds-tile-grid-5 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .dds-tile-grid-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+/* 6 columns: 2 → 3 → 6 */
+.dds-tile-grid-6 {
+  grid-template-columns: repeat(2, 1fr);
+}
+@media (min-width: 640px) {
+  .dds-tile-grid-6 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .dds-tile-grid-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {