@dsn-starter-kit/components-react 2.0.0 → 3.1.0

package/dist/Grid/Grid.css

@@ -1,573 +0,0 @@
-/**
- * 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-padding-inline);
-}
-
-/* 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-padding-inline));
-}
-
-/* ============================================================
-   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

@@ -1,35 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,29 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,84 +0,0 @@
-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