@dsn-starter-kit/components-react 1.0.0

package/dist/Grid/Grid.css

@@ -0,0 +1,573 @@
+/**
+ * Grid Component Styles for React
+ * Re-exports the base Grid styles from components-html
+ */
+
+/**
+ * Grid Layout Component
+ * 12-column CSS Grid layout system met gutter, margin en optionele max-width.
+ *
+ * Breakpoints (zie ook --dsn-breakpoint-* tokens):
+ *   sm: 36em (~576px)
+ *   md: 44em (~704px)
+ *   lg: 64em (~1024px)
+ *   xl: 74em (~1184px) — contained grid bereikt max-width
+ *
+ * Usage:
+ * <!-- Standaard grid -->
+ * <div class="dsn-grid">
+ *   <div class="dsn-col-8">Hoofdinhoud</div>
+ *   <div class="dsn-col-4">Sidebar</div>
+ * </div>
+ *
+ * <!-- Contained grid met max-width -->
+ * <div class="dsn-grid dsn-grid--contained">
+ *   <div class="dsn-col-12">Full-width inhoud</div>
+ * </div>
+ *
+ * <!-- Full-bleed item dat uitbreekt tot de container-rand -->
+ * <div class="dsn-grid dsn-grid--contained">
+ *   <div class="dsn-col-8">Normale content</div>
+ *   <div class="dsn-full-bleed">Breekt uit tot randen</div>
+ * </div>
+ *
+ * <!-- Responsive kolommen -->
+ * <div class="dsn-grid dsn-grid--contained">
+ *   <div class="dsn-col-12 dsn-col-md-6 dsn-col-lg-4">Item</div>
+ * </div>
+ */
+
+/* ============================================================
+   GRID CONTAINER
+   ============================================================ */
+
+.dsn-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--dsn-grid-gutter);
+  row-gap: var(--dsn-grid-row-gap);
+  padding-inline: var(--dsn-grid-margin);
+}
+
+/* Max-width variant — gecentreerd met margin-inline: auto */
+.dsn-grid--contained {
+  max-inline-size: var(--dsn-grid-max-width);
+  margin-inline: auto;
+}
+
+/* Default: directe children beslaan de volledige breedte.
+   :where() heeft nul-specificiteit zodat dsn-col-* klassen altijd winnen. */
+:where(.dsn-grid) > * {
+  grid-column: 1 / -1;
+}
+
+/* ============================================================
+   FULL-BLEED
+   Breekt visueel uit tot de buitenrand van de grid container.
+   Werkt alleen als directe child van .dsn-grid.
+   ============================================================ */
+
+.dsn-full-bleed {
+  grid-column: 1 / -1;
+  margin-inline: calc(-1 * var(--dsn-grid-margin));
+}
+
+/* ============================================================
+   COLUMN SPAN UTILITIES — dsn-col-{1-12}
+   Standaard (geen breakpoint-prefix): altijd van toepassing.
+   ============================================================ */
+
+.dsn-col-1 {
+  grid-column: span 1;
+}
+.dsn-col-2 {
+  grid-column: span 2;
+}
+.dsn-col-3 {
+  grid-column: span 3;
+}
+.dsn-col-4 {
+  grid-column: span 4;
+}
+.dsn-col-5 {
+  grid-column: span 5;
+}
+.dsn-col-6 {
+  grid-column: span 6;
+}
+.dsn-col-7 {
+  grid-column: span 7;
+}
+.dsn-col-8 {
+  grid-column: span 8;
+}
+.dsn-col-9 {
+  grid-column: span 9;
+}
+.dsn-col-10 {
+  grid-column: span 10;
+}
+.dsn-col-11 {
+  grid-column: span 11;
+}
+.dsn-col-12 {
+  grid-column: span 12;
+}
+
+/* ============================================================
+   COLUMN START UTILITIES — dsn-col-start-{1-13}
+   ============================================================ */
+
+.dsn-col-start-1 {
+  grid-column-start: 1;
+}
+.dsn-col-start-2 {
+  grid-column-start: 2;
+}
+.dsn-col-start-3 {
+  grid-column-start: 3;
+}
+.dsn-col-start-4 {
+  grid-column-start: 4;
+}
+.dsn-col-start-5 {
+  grid-column-start: 5;
+}
+.dsn-col-start-6 {
+  grid-column-start: 6;
+}
+.dsn-col-start-7 {
+  grid-column-start: 7;
+}
+.dsn-col-start-8 {
+  grid-column-start: 8;
+}
+.dsn-col-start-9 {
+  grid-column-start: 9;
+}
+.dsn-col-start-10 {
+  grid-column-start: 10;
+}
+.dsn-col-start-11 {
+  grid-column-start: 11;
+}
+.dsn-col-start-12 {
+  grid-column-start: 12;
+}
+.dsn-col-start-13 {
+  grid-column-start: 13;
+}
+
+/* ============================================================
+   COLUMN END UTILITIES — dsn-col-end-{1-13}
+   ============================================================ */
+
+.dsn-col-end-1 {
+  grid-column-end: 1;
+}
+.dsn-col-end-2 {
+  grid-column-end: 2;
+}
+.dsn-col-end-3 {
+  grid-column-end: 3;
+}
+.dsn-col-end-4 {
+  grid-column-end: 4;
+}
+.dsn-col-end-5 {
+  grid-column-end: 5;
+}
+.dsn-col-end-6 {
+  grid-column-end: 6;
+}
+.dsn-col-end-7 {
+  grid-column-end: 7;
+}
+.dsn-col-end-8 {
+  grid-column-end: 8;
+}
+.dsn-col-end-9 {
+  grid-column-end: 9;
+}
+.dsn-col-end-10 {
+  grid-column-end: 10;
+}
+.dsn-col-end-11 {
+  grid-column-end: 11;
+}
+.dsn-col-end-12 {
+  grid-column-end: 12;
+}
+.dsn-col-end-13 {
+  grid-column-end: 13;
+}
+
+/* ============================================================
+   RESPONSIVE COLUMN VARIANTS — sm (36em ~576px)
+   ============================================================ */
+
+@media (min-width: 36em) {
+  .dsn-col-start-sm-1 {
+    grid-column-start: 1;
+  }
+  .dsn-col-start-sm-2 {
+    grid-column-start: 2;
+  }
+  .dsn-col-start-sm-3 {
+    grid-column-start: 3;
+  }
+  .dsn-col-start-sm-4 {
+    grid-column-start: 4;
+  }
+  .dsn-col-start-sm-5 {
+    grid-column-start: 5;
+  }
+  .dsn-col-start-sm-6 {
+    grid-column-start: 6;
+  }
+  .dsn-col-start-sm-7 {
+    grid-column-start: 7;
+  }
+  .dsn-col-start-sm-8 {
+    grid-column-start: 8;
+  }
+  .dsn-col-start-sm-9 {
+    grid-column-start: 9;
+  }
+  .dsn-col-start-sm-10 {
+    grid-column-start: 10;
+  }
+  .dsn-col-start-sm-11 {
+    grid-column-start: 11;
+  }
+  .dsn-col-start-sm-12 {
+    grid-column-start: 12;
+  }
+  .dsn-col-start-sm-13 {
+    grid-column-start: 13;
+  }
+
+  .dsn-col-end-sm-1 {
+    grid-column-end: 1;
+  }
+  .dsn-col-end-sm-2 {
+    grid-column-end: 2;
+  }
+  .dsn-col-end-sm-3 {
+    grid-column-end: 3;
+  }
+  .dsn-col-end-sm-4 {
+    grid-column-end: 4;
+  }
+  .dsn-col-end-sm-5 {
+    grid-column-end: 5;
+  }
+  .dsn-col-end-sm-6 {
+    grid-column-end: 6;
+  }
+  .dsn-col-end-sm-7 {
+    grid-column-end: 7;
+  }
+  .dsn-col-end-sm-8 {
+    grid-column-end: 8;
+  }
+  .dsn-col-end-sm-9 {
+    grid-column-end: 9;
+  }
+  .dsn-col-end-sm-10 {
+    grid-column-end: 10;
+  }
+  .dsn-col-end-sm-11 {
+    grid-column-end: 11;
+  }
+  .dsn-col-end-sm-12 {
+    grid-column-end: 12;
+  }
+  .dsn-col-end-sm-13 {
+    grid-column-end: 13;
+  }
+
+  .dsn-col-sm-1 {
+    grid-column: span 1;
+  }
+  .dsn-col-sm-2 {
+    grid-column: span 2;
+  }
+  .dsn-col-sm-3 {
+    grid-column: span 3;
+  }
+  .dsn-col-sm-4 {
+    grid-column: span 4;
+  }
+  .dsn-col-sm-5 {
+    grid-column: span 5;
+  }
+  .dsn-col-sm-6 {
+    grid-column: span 6;
+  }
+  .dsn-col-sm-7 {
+    grid-column: span 7;
+  }
+  .dsn-col-sm-8 {
+    grid-column: span 8;
+  }
+  .dsn-col-sm-9 {
+    grid-column: span 9;
+  }
+  .dsn-col-sm-10 {
+    grid-column: span 10;
+  }
+  .dsn-col-sm-11 {
+    grid-column: span 11;
+  }
+  .dsn-col-sm-12 {
+    grid-column: span 12;
+  }
+}
+
+/* ============================================================
+   RESPONSIVE COLUMN VARIANTS — md (44em ~704px)
+   ============================================================ */
+
+@media (min-width: 44em) {
+  .dsn-col-start-md-1 {
+    grid-column-start: 1;
+  }
+  .dsn-col-start-md-2 {
+    grid-column-start: 2;
+  }
+  .dsn-col-start-md-3 {
+    grid-column-start: 3;
+  }
+  .dsn-col-start-md-4 {
+    grid-column-start: 4;
+  }
+  .dsn-col-start-md-5 {
+    grid-column-start: 5;
+  }
+  .dsn-col-start-md-6 {
+    grid-column-start: 6;
+  }
+  .dsn-col-start-md-7 {
+    grid-column-start: 7;
+  }
+  .dsn-col-start-md-8 {
+    grid-column-start: 8;
+  }
+  .dsn-col-start-md-9 {
+    grid-column-start: 9;
+  }
+  .dsn-col-start-md-10 {
+    grid-column-start: 10;
+  }
+  .dsn-col-start-md-11 {
+    grid-column-start: 11;
+  }
+  .dsn-col-start-md-12 {
+    grid-column-start: 12;
+  }
+  .dsn-col-start-md-13 {
+    grid-column-start: 13;
+  }
+
+  .dsn-col-end-md-1 {
+    grid-column-end: 1;
+  }
+  .dsn-col-end-md-2 {
+    grid-column-end: 2;
+  }
+  .dsn-col-end-md-3 {
+    grid-column-end: 3;
+  }
+  .dsn-col-end-md-4 {
+    grid-column-end: 4;
+  }
+  .dsn-col-end-md-5 {
+    grid-column-end: 5;
+  }
+  .dsn-col-end-md-6 {
+    grid-column-end: 6;
+  }
+  .dsn-col-end-md-7 {
+    grid-column-end: 7;
+  }
+  .dsn-col-end-md-8 {
+    grid-column-end: 8;
+  }
+  .dsn-col-end-md-9 {
+    grid-column-end: 9;
+  }
+  .dsn-col-end-md-10 {
+    grid-column-end: 10;
+  }
+  .dsn-col-end-md-11 {
+    grid-column-end: 11;
+  }
+  .dsn-col-end-md-12 {
+    grid-column-end: 12;
+  }
+  .dsn-col-end-md-13 {
+    grid-column-end: 13;
+  }
+
+  .dsn-col-md-1 {
+    grid-column: span 1;
+  }
+  .dsn-col-md-2 {
+    grid-column: span 2;
+  }
+  .dsn-col-md-3 {
+    grid-column: span 3;
+  }
+  .dsn-col-md-4 {
+    grid-column: span 4;
+  }
+  .dsn-col-md-5 {
+    grid-column: span 5;
+  }
+  .dsn-col-md-6 {
+    grid-column: span 6;
+  }
+  .dsn-col-md-7 {
+    grid-column: span 7;
+  }
+  .dsn-col-md-8 {
+    grid-column: span 8;
+  }
+  .dsn-col-md-9 {
+    grid-column: span 9;
+  }
+  .dsn-col-md-10 {
+    grid-column: span 10;
+  }
+  .dsn-col-md-11 {
+    grid-column: span 11;
+  }
+  .dsn-col-md-12 {
+    grid-column: span 12;
+  }
+}
+
+/* ============================================================
+   RESPONSIVE COLUMN VARIANTS — lg (64em ~1024px)
+   ============================================================ */
+
+@media (min-width: 64em) {
+  .dsn-col-start-lg-1 {
+    grid-column-start: 1;
+  }
+  .dsn-col-start-lg-2 {
+    grid-column-start: 2;
+  }
+  .dsn-col-start-lg-3 {
+    grid-column-start: 3;
+  }
+  .dsn-col-start-lg-4 {
+    grid-column-start: 4;
+  }
+  .dsn-col-start-lg-5 {
+    grid-column-start: 5;
+  }
+  .dsn-col-start-lg-6 {
+    grid-column-start: 6;
+  }
+  .dsn-col-start-lg-7 {
+    grid-column-start: 7;
+  }
+  .dsn-col-start-lg-8 {
+    grid-column-start: 8;
+  }
+  .dsn-col-start-lg-9 {
+    grid-column-start: 9;
+  }
+  .dsn-col-start-lg-10 {
+    grid-column-start: 10;
+  }
+  .dsn-col-start-lg-11 {
+    grid-column-start: 11;
+  }
+  .dsn-col-start-lg-12 {
+    grid-column-start: 12;
+  }
+  .dsn-col-start-lg-13 {
+    grid-column-start: 13;
+  }
+
+  .dsn-col-end-lg-1 {
+    grid-column-end: 1;
+  }
+  .dsn-col-end-lg-2 {
+    grid-column-end: 2;
+  }
+  .dsn-col-end-lg-3 {
+    grid-column-end: 3;
+  }
+  .dsn-col-end-lg-4 {
+    grid-column-end: 4;
+  }
+  .dsn-col-end-lg-5 {
+    grid-column-end: 5;
+  }
+  .dsn-col-end-lg-6 {
+    grid-column-end: 6;
+  }
+  .dsn-col-end-lg-7 {
+    grid-column-end: 7;
+  }
+  .dsn-col-end-lg-8 {
+    grid-column-end: 8;
+  }
+  .dsn-col-end-lg-9 {
+    grid-column-end: 9;
+  }
+  .dsn-col-end-lg-10 {
+    grid-column-end: 10;
+  }
+  .dsn-col-end-lg-11 {
+    grid-column-end: 11;
+  }
+  .dsn-col-end-lg-12 {
+    grid-column-end: 12;
+  }
+  .dsn-col-end-lg-13 {
+    grid-column-end: 13;
+  }
+
+  .dsn-col-lg-1 {
+    grid-column: span 1;
+  }
+  .dsn-col-lg-2 {
+    grid-column: span 2;
+  }
+  .dsn-col-lg-3 {
+    grid-column: span 3;
+  }
+  .dsn-col-lg-4 {
+    grid-column: span 4;
+  }
+  .dsn-col-lg-5 {
+    grid-column: span 5;
+  }
+  .dsn-col-lg-6 {
+    grid-column: span 6;
+  }
+  .dsn-col-lg-7 {
+    grid-column: span 7;
+  }
+  .dsn-col-lg-8 {
+    grid-column: span 8;
+  }
+  .dsn-col-lg-9 {
+    grid-column: span 9;
+  }
+  .dsn-col-lg-10 {
+    grid-column: span 10;
+  }
+  .dsn-col-lg-11 {
+    grid-column: span 11;
+  }
+  .dsn-col-lg-12 {
+    grid-column: span 12;
+  }
+}
+

package/dist/Grid/Grid.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import './Grid.css';
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Voegt een maximale breedte toe (--dsn-grid-max-width) en centreert de grid horizontaal.
+     * Gebruik dit voor pagina-brede layouts met een vaste breedte.
+     * @default false
+     */
+    contained?: boolean;
+    /**
+     * Child-elementen van de grid.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Grid layout component
+ * 12-koloms CSS Grid container met gutter en optionele max-width.
+ * Gebruik GridItem voor kolomspanning van directe children.
+ *
+ * @example
+ * ```tsx
+ * // Standaard grid (volledige breedte)
+ * <Grid>
+ *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>
+ *   <GridItem colSpan={4}>Sidebar</GridItem>
+ * </Grid>
+ *
+ * // Contained grid met max-width
+ * <Grid contained>
+ *   <GridItem colSpan={12}>Full-width sectie</GridItem>
+ * </Grid>
+ * ```
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Grid.d.ts.map

package/dist/Grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,IAAI,kFAchB,CAAC"}

package/dist/Grid/Grid.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Grid.css';
+/**
+ * Grid layout component
+ * 12-koloms CSS Grid container met gutter en optionele max-width.
+ * Gebruik GridItem voor kolomspanning van directe children.
+ *
+ * @example
+ * ```tsx
+ * // Standaard grid (volledige breedte)
+ * <Grid>
+ *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>
+ *   <GridItem colSpan={4}>Sidebar</GridItem>
+ * </Grid>
+ *
+ * // Contained grid met max-width
+ * <Grid contained>
+ *   <GridItem colSpan={12}>Full-width sectie</GridItem>
+ * </Grid>
+ * ```
+ */
+export const Grid = React.forwardRef(({ className, contained, children, ...props }, ref) => {
+    const classes = classNames('dsn-grid', contained && 'dsn-grid--contained', className);
+    return (_jsx("div", { ref: ref, className: classes, ...props, children: children }));
+});
+Grid.displayName = 'Grid';
+//# sourceMappingURL=Grid.js.map

package/dist/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,YAAY,CAAC;AAgBpB;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpD,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,SAAS,IAAI,qBAAqB,EAClC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Grid/GridItem.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+export type GridColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type GridColPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Aantal kolommen dat dit item beslaat (1–12).
+     * Zonder colSpan beslaat het item de volledige breedte (12 kolommen).
+     */
+    colSpan?: GridColSpan;
+    /**
+     * Kolomspanning vanaf sm-breakpoint (36em ~576px).
+     * Overschrijft colSpan op dit breekpunt.
+     */
+    colSpanSm?: GridColSpan;
+    /**
+     * Kolomspanning vanaf md-breakpoint (44em ~704px).
+     * Overschrijft colSpan op dit breekpunt.
+     */
+    colSpanMd?: GridColSpan;
+    /**
+     * Kolomspanning vanaf lg-breakpoint (64em ~1024px).
+     * Overschrijft colSpan op dit breekpunt.
+     */
+    colSpanLg?: GridColSpan;
+    /** Startkolom (grid-column-start, 1–13). */
+    colStart?: GridColPosition;
+    /** Startkolom vanaf sm-breakpoint. */
+    colStartSm?: GridColPosition;
+    /** Startkolom vanaf md-breakpoint. */
+    colStartMd?: GridColPosition;
+    /** Startkolom vanaf lg-breakpoint. */
+    colStartLg?: GridColPosition;
+    /** Eindkolom (grid-column-end, 1–13). */
+    colEnd?: GridColPosition;
+    /** Eindkolom vanaf sm-breakpoint. */
+    colEndSm?: GridColPosition;
+    /** Eindkolom vanaf md-breakpoint. */
+    colEndMd?: GridColPosition;
+    /** Eindkolom vanaf lg-breakpoint. */
+    colEndLg?: GridColPosition;
+    /**
+     * Breekt visueel uit tot de buitenrand van de grid container.
+     * Het item beslaat de volledige breedte inclusief de grid margin.
+     * Gebruik dit voor achtergrondvlakken die edge-to-edge lopen.
+     * @default false
+     */
+    fullBleed?: boolean;
+    /**
+     * Child-elementen van het grid item.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * GridItem component
+ * Directe child van Grid met kolomspanning en optionele responsive varianten.
+ *
+ * @example
+ * ```tsx
+ * // Vaste kolomverdeling
+ * <Grid>
+ *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>
+ *   <GridItem colSpan={4}>Sidebar</GridItem>
+ * </Grid>
+ *
+ * // Responsive: 12 kolommen op mobiel, 6 op md, 4 op lg
+ * <Grid contained>
+ *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
+ *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
+ *   <GridItem colSpan={12} colSpanMd={12} colSpanLg={4}>Item</GridItem>
+ * </Grid>
+ *
+ * // Full-bleed: breekt uit tot de container-randen
+ * <Grid contained>
+ *   <GridItem colSpan={8}>Normale content</GridItem>
+ *   <GridItem fullBleed>
+ *     <div style={{ background: 'var(--dsn-color-brand-bg)', padding: '2rem' }}>
+ *       Edge-to-edge sectie
+ *     </div>
+ *   </GridItem>
+ * </Grid>
+ * ```
+ */
+export declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=GridItem.d.ts.map