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

package/dist/BreadcrumbNavigation/BreadcrumbNavigation2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigation2.mjs","names":[],"sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigation.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { BreadcrumbNavigationItemProps } from './BreadcrumbNavigationItem';\nimport './BreadcrumbNavigation.css';\n\nexport interface BreadcrumbNavigationProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Toegankelijke naam van het `<nav>` landmark\n   * @default \"Broodkruimelpad\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * `\"compact\"` activeert container-query responsief gedrag:\n   * bij weinig ruimte wordt enkel het ouder-item met terug-pijl getoond\n   * @default \"default\"\n   */\n  variant?: 'default' | 'compact';\n\n  /**\n   * `BreadcrumbNavigationItem` elementen\n   */\n  children: React.ReactNode;\n}\n\n/**\n * BreadcrumbNavigation component\n * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.\n * Plaatsen vóór `<main>`, na de primaire navigatie.\n *\n * @example\n * ```tsx\n * // Standaard\n * <BreadcrumbNavigation aria-label=\"Broodkruimelpad\">\n *   <BreadcrumbNavigationItem href=\"/home\">Home</BreadcrumbNavigationItem>\n *   <BreadcrumbNavigationItem href=\"/categorie\">Categorie</BreadcrumbNavigationItem>\n *   <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>\n * </BreadcrumbNavigation>\n *\n * // Compact variant\n * <BreadcrumbNavigation aria-label=\"Broodkruimelpad\" variant=\"compact\">\n *   <BreadcrumbNavigationItem href=\"/home\">Home</BreadcrumbNavigationItem>\n *   <BreadcrumbNavigationItem href=\"/categorie\">Categorie</BreadcrumbNavigationItem>\n *   <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>\n * </BreadcrumbNavigation>\n * ```\n */\nexport const BreadcrumbNavigation = React.forwardRef<\n  HTMLElement,\n  BreadcrumbNavigationProps\n>(\n  (\n    {\n      className,\n      'aria-label': ariaLabel = 'Broodkruimelpad',\n      variant = 'default',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-breadcrumb-navigation',\n      variant === 'compact' && 'dsn-breadcrumb-navigation--compact',\n      className\n    );\n\n    const childArray = React.Children.toArray(children);\n\n    const processedChildren = childArray.map((child, index) => {\n      if (!React.isValidElement(child)) return child;\n\n      const isParentOfCurrent =\n        variant === 'compact' && index === childArray.length - 2;\n\n      if (isParentOfCurrent) {\n        return React.cloneElement(\n          child as React.ReactElement<BreadcrumbNavigationItemProps>,\n          { showBackIcon: true }\n        );\n      }\n\n      return child;\n    });\n\n    return (\n      <nav ref={ref} className={classes} aria-label={ariaLabel} {...props}>\n        <ol className=\"dsn-breadcrumb-navigation__list\">{processedChildren}</ol>\n      </nav>\n    );\n  }\n);\n\nBreadcrumbNavigation.displayName = 'BreadcrumbNavigation';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,uBAAuB,MAAM,YAKtC,EACE,WACA,cAAc,YAAY,mBAC1B,UAAU,WACV,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,6BACA,YAAY,aAAa,sCACzB,SACF;CAEA,MAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;CAElD,MAAM,oBAAoB,WAAW,KAAK,OAAO,UAAU;EACzD,IAAI,CAAC,MAAM,eAAe,KAAK,GAAG,OAAO;EAKzC,IAFE,YAAY,aAAa,UAAU,WAAW,SAAS,GAGvD,OAAO,MAAM,aACX,OACA,EAAE,cAAc,KAAK,CACvB;EAGF,OAAO;CACT,CAAC;CAED,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW;EAAS,cAAY;EAAW,GAAI;EAC5D,UAAA,oBAAC,MAAD;GAAI,WAAU;GAAmC,UAAA;EAAsB,CAAA;CACpE,CAAA;AAET,CACF;AAEA,qBAAqB,cAAc"}

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.mts

@@ -0,0 +1,41 @@
+import React from "react";
+//#region src/BreadcrumbNavigation/BreadcrumbNavigationItem.d.ts
+interface BreadcrumbNavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * URL van de pagina. Laat weg bij het huidige pagina-item: dat wordt
+   * als platte tekst gerenderd en niet als link
+   */
+  href?: string;
+  /**
+   * Markeert het huidige pagina-item. Rendert de tekst zonder link en
+   * zet `aria-current="page"` op de `<li>`
+   * @default false
+   */
+  current?: boolean;
+  /**
+   * Zichtbare link- of paginatekst
+   */
+  children: React.ReactNode;
+  /**
+   * @internal — wordt gezet door BreadcrumbNavigation (compact variant)
+   */
+  showBackIcon?: boolean;
+}
+/**
+ * BreadcrumbNavigationItem component
+ * Enkel item in een BreadcrumbNavigation. Gebruik altijd binnen een `<BreadcrumbNavigation>`.
+ *
+ * Het huidige pagina-item is bewust géén link: een link naar de pagina waar je
+ * al bent doet niets, terwijl hij er wel uitziet als de andere items. Zie
+ * WCAG 3.2.4 Consistent Identification.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+ * <BreadcrumbNavigationItem current>Categorie</BreadcrumbNavigationItem>
+ * ```
+ */
+declare const BreadcrumbNavigationItem: React.ForwardRefExoticComponent<BreadcrumbNavigationItemProps & React.RefAttributes<HTMLLIElement>>;
+//#endregion
+export { BreadcrumbNavigationItem, BreadcrumbNavigationItemProps };
+//# sourceMappingURL=BreadcrumbNavigationItem.d.mts.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigationItem.d.mts","names":[],"sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigationItem.tsx"],"mappings":";;UAIiB,sCAAsC,MAAM,qBAAqB;;;;;EAKhF;;;;;;EAOA;;;;EAKA,UAAU,MAAM;;;;EAKhB;;;;;;;;;;;;;;;;cAiBW,0BAAwB,MAAA,0BAAA,gCAAA,MAAA,cAAA"}

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.mjs

@@ -0,0 +1,48 @@
+import { Icon } from "../Icon/Icon2.mjs";
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/BreadcrumbNavigation/BreadcrumbNavigationItem.tsx
+/**
+* BreadcrumbNavigationItem component
+* Enkel item in een BreadcrumbNavigation. Gebruik altijd binnen een `<BreadcrumbNavigation>`.
+*
+* Het huidige pagina-item is bewust géén link: een link naar de pagina waar je
+* al bent doet niets, terwijl hij er wel uitziet als de andere items. Zie
+* WCAG 3.2.4 Consistent Identification.
+*
+* @example
+* ```tsx
+* <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+* <BreadcrumbNavigationItem current>Categorie</BreadcrumbNavigationItem>
+* ```
+*/
+const BreadcrumbNavigationItem = React.forwardRef(({ className, href, current = false, showBackIcon = false, children, ...props }, ref) => {
+	const itemClasses = classNames("dsn-breadcrumb-navigation__item", current && "dsn-breadcrumb-navigation__item--current", className);
+	const renderAsLink = !current && href !== void 0;
+	return /* @__PURE__ */ jsxs("li", {
+		ref,
+		className: itemClasses,
+		"aria-current": current ? "page" : void 0,
+		...renderAsLink ? {} : props,
+		children: [renderAsLink ? /* @__PURE__ */ jsxs("a", {
+			href,
+			className: "dsn-breadcrumb-navigation__link",
+			...props,
+			children: [showBackIcon && /* @__PURE__ */ jsx(Icon, {
+				name: "arrow-left",
+				className: "dsn-breadcrumb-navigation__back-icon",
+				"aria-hidden": true
+			}), children]
+		}) : children, /* @__PURE__ */ jsx(Icon, {
+			name: "chevron-right",
+			className: "dsn-breadcrumb-navigation__separator",
+			"aria-hidden": true
+		})]
+	});
+});
+BreadcrumbNavigationItem.displayName = "BreadcrumbNavigationItem";
+//#endregion
+export { BreadcrumbNavigationItem };
+
+//# sourceMappingURL=BreadcrumbNavigationItem.mjs.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigationItem.mjs","names":[],"sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigationItem.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\n\nexport interface BreadcrumbNavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * URL van de pagina. Laat weg bij het huidige pagina-item: dat wordt\n   * als platte tekst gerenderd en niet als link\n   */\n  href?: string;\n\n  /**\n   * Markeert het huidige pagina-item. Rendert de tekst zonder link en\n   * zet `aria-current=\"page\"` op de `<li>`\n   * @default false\n   */\n  current?: boolean;\n\n  /**\n   * Zichtbare link- of paginatekst\n   */\n  children: React.ReactNode;\n\n  /**\n   * @internal — wordt gezet door BreadcrumbNavigation (compact variant)\n   */\n  showBackIcon?: boolean;\n}\n\n/**\n * BreadcrumbNavigationItem component\n * Enkel item in een BreadcrumbNavigation. Gebruik altijd binnen een `<BreadcrumbNavigation>`.\n *\n * Het huidige pagina-item is bewust géén link: een link naar de pagina waar je\n * al bent doet niets, terwijl hij er wel uitziet als de andere items. Zie\n * WCAG 3.2.4 Consistent Identification.\n *\n * @example\n * ```tsx\n * <BreadcrumbNavigationItem href=\"/home\">Home</BreadcrumbNavigationItem>\n * <BreadcrumbNavigationItem current>Categorie</BreadcrumbNavigationItem>\n * ```\n */\nexport const BreadcrumbNavigationItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbNavigationItemProps\n>(\n  (\n    {\n      className,\n      href,\n      current = false,\n      showBackIcon = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const itemClasses = classNames(\n      'dsn-breadcrumb-navigation__item',\n      current && 'dsn-breadcrumb-navigation__item--current',\n      className\n    );\n\n    // Het huidige item krijgt geen link; zonder href valt een item daar ook op terug\n    const renderAsLink = !current && href !== undefined;\n\n    return (\n      <li\n        ref={ref}\n        className={itemClasses}\n        aria-current={current ? 'page' : undefined}\n        {...(renderAsLink\n          ? {}\n          : (props as React.LiHTMLAttributes<HTMLLIElement>))}\n      >\n        {renderAsLink ? (\n          <a href={href} className=\"dsn-breadcrumb-navigation__link\" {...props}>\n            {showBackIcon && (\n              <Icon\n                name=\"arrow-left\"\n                className=\"dsn-breadcrumb-navigation__back-icon\"\n                aria-hidden\n              />\n            )}\n            {children}\n          </a>\n        ) : (\n          children\n        )}\n        <Icon\n          name=\"chevron-right\"\n          className=\"dsn-breadcrumb-navigation__separator\"\n          aria-hidden\n        />\n      </li>\n    );\n  }\n);\n\nBreadcrumbNavigationItem.displayName = 'BreadcrumbNavigationItem';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2CA,MAAa,2BAA2B,MAAM,YAK1C,EACE,WACA,MACA,UAAU,OACV,eAAe,OACf,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAc,WAClB,mCACA,WAAW,4CACX,SACF;CAGA,MAAM,eAAe,CAAC,WAAW,SAAS,KAAA;CAE1C,OACE,qBAAC,MAAD;EACO;EACL,WAAW;EACX,gBAAc,UAAU,SAAS,KAAA;EACjC,GAAK,eACD,CAAC,IACA;EANP,UAAA,CAQG,eACC,qBAAC,KAAD;GAAS;GAAM,WAAU;GAAkC,GAAI;GAA/D,UAAA,CACG,gBACC,oBAAC,MAAD;IACE,MAAK;IACL,WAAU;IACV,eAAA;GACD,CAAA,GAEF,QACA;EAEH,CAAA,IAAA,UAEF,oBAAC,MAAD;GACE,MAAK;GACL,WAAU;GACV,eAAA;EACD,CAAA,CACC;;AAER,CACF;AAEA,yBAAyB,cAAc"}

package/dist/BreadcrumbNavigation/index.d.mts

@@ -0,0 +1,3 @@
+import { BreadcrumbNavigation, BreadcrumbNavigationProps } from "./BreadcrumbNavigation.mjs";
+import { BreadcrumbNavigationItem, BreadcrumbNavigationItemProps } from "./BreadcrumbNavigationItem.mjs";
+export { BreadcrumbNavigation, BreadcrumbNavigationItem, BreadcrumbNavigationItemProps, BreadcrumbNavigationProps };

package/dist/BreakoutSection/BreakoutSection.d.mts

@@ -0,0 +1,32 @@
+import React from "react";
+//#region src/BreakoutSection/BreakoutSection.d.ts
+type BreakoutSectionAs = 'div' | 'section' | 'article' | 'aside';
+interface BreakoutSectionProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * HTML-element — ontkoppelt semantiek van visuele stijl
+   * @default 'section'
+   */
+  as?: BreakoutSectionAs;
+  children?: React.ReactNode;
+}
+/**
+ * BreakoutSection layout component
+ * Laat een sectie "uitslaan" buiten een beperkte paginabreedte om de volledige
+ * viewportbreedte te beslaan via `margin-inline: calc(50% - 50vw)`.
+ *
+ * Vereiste: de parent (.dsn-page-body) heeft `overflow-x: clip` zodat er geen
+ * horizontale scrolbalk verschijnt.
+ *
+ * @example
+ * ```tsx
+ * <BreakoutSection style={{ backgroundColor: 'var(--dsn-color-accent-1-inverse-bg-default)' }}>
+ *   <div style={{ maxInlineSize: 'var(--dsn-page-max-inline-size)', marginInline: 'auto', paddingInline: 'var(--dsn-page-body-padding-inline)' }}>
+ *     <Heading level={2}>Uitgeslagen sectie</Heading>
+ *   </div>
+ * </BreakoutSection>
+ * ```
+ */
+declare const BreakoutSection: React.ForwardRefExoticComponent<BreakoutSectionProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { BreakoutSection, BreakoutSectionAs, BreakoutSectionProps };
+//# sourceMappingURL=BreakoutSection.d.mts.map

package/dist/BreakoutSection/BreakoutSection.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreakoutSection.d.mts","names":[],"sources":["../../src/BreakoutSection/BreakoutSection.tsx"],"mappings":";;KAIY;UAEK,6BAA6B,MAAM,eAAe;;;;;EAKjE,KAAK;EAEL,WAAW,MAAM;;;;;;;;;;;;;;;;;;;cAoBN,iBAAe,MAAA,0BAAA,uBAAA,MAAA,cAAA"}

package/dist/BreakoutSection/BreakoutSection2.mjs

@@ -0,0 +1,36 @@
+/* empty css                 */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/BreakoutSection/BreakoutSection.tsx
+/**
+* BreakoutSection layout component
+* Laat een sectie "uitslaan" buiten een beperkte paginabreedte om de volledige
+* viewportbreedte te beslaan via `margin-inline: calc(50% - 50vw)`.
+*
+* Vereiste: de parent (.dsn-page-body) heeft `overflow-x: clip` zodat er geen
+* horizontale scrolbalk verschijnt.
+*
+* @example
+* ```tsx
+* <BreakoutSection style={{ backgroundColor: 'var(--dsn-color-accent-1-inverse-bg-default)' }}>
+*   <div style={{ maxInlineSize: 'var(--dsn-page-max-inline-size)', marginInline: 'auto', paddingInline: 'var(--dsn-page-body-padding-inline)' }}>
+*     <Heading level={2}>Uitgeslagen sectie</Heading>
+*   </div>
+* </BreakoutSection>
+* ```
+*/
+const BreakoutSection = React.forwardRef(({ as: As = "section", className, children, ...props }, ref) => {
+	const classes = classNames("dsn-breakout-section", className);
+	return /* @__PURE__ */ jsx(As, {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+BreakoutSection.displayName = "BreakoutSection";
+//#endregion
+export { BreakoutSection };
+
+//# sourceMappingURL=BreakoutSection2.mjs.map

package/dist/BreakoutSection/BreakoutSection2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreakoutSection2.mjs","names":[],"sources":["../../src/BreakoutSection/BreakoutSection.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './BreakoutSection.css';\n\nexport type BreakoutSectionAs = 'div' | 'section' | 'article' | 'aside';\n\nexport interface BreakoutSectionProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * HTML-element — ontkoppelt semantiek van visuele stijl\n   * @default 'section'\n   */\n  as?: BreakoutSectionAs;\n\n  children?: React.ReactNode;\n}\n\n/**\n * BreakoutSection layout component\n * Laat een sectie \"uitslaan\" buiten een beperkte paginabreedte om de volledige\n * viewportbreedte te beslaan via `margin-inline: calc(50% - 50vw)`.\n *\n * Vereiste: de parent (.dsn-page-body) heeft `overflow-x: clip` zodat er geen\n * horizontale scrolbalk verschijnt.\n *\n * @example\n * ```tsx\n * <BreakoutSection style={{ backgroundColor: 'var(--dsn-color-accent-1-inverse-bg-default)' }}>\n *   <div style={{ maxInlineSize: 'var(--dsn-page-max-inline-size)', marginInline: 'auto', paddingInline: 'var(--dsn-page-body-padding-inline)' }}>\n *     <Heading level={2}>Uitgeslagen sectie</Heading>\n *   </div>\n * </BreakoutSection>\n * ```\n */\nexport const BreakoutSection = React.forwardRef<\n  HTMLElement,\n  BreakoutSectionProps\n>(({ as: As = 'section', className, children, ...props }, ref) => {\n  const classes = classNames('dsn-breakout-section', className);\n\n  return (\n    <As ref={ref as React.Ref<HTMLDivElement>} className={classes} {...props}>\n      {children}\n    </As>\n  );\n});\n\nBreakoutSection.displayName = 'BreakoutSection';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,kBAAkB,MAAM,YAGlC,EAAE,IAAI,KAAK,WAAW,WAAW,UAAU,GAAG,SAAS,QAAQ;CAChE,MAAM,UAAU,WAAW,wBAAwB,SAAS;CAE5D,OACE,oBAAC,IAAD;EAAS;EAAkC,WAAW;EAAS,GAAI;EAChE;CACC,CAAA;AAER,CAAC;AAED,gBAAgB,cAAc"}

package/dist/BreakoutSection/index.d.mts

@@ -0,0 +1,2 @@
+import { BreakoutSection, BreakoutSectionAs, BreakoutSectionProps } from "./BreakoutSection.mjs";
+export { BreakoutSection, type BreakoutSectionAs, type BreakoutSectionProps };

package/dist/Button/Button.d.mts

@@ -0,0 +1,92 @@
+import React from "react";
+//#region src/Button/Button.d.ts
+type ButtonVariant = 'strong' | 'strong-negative' | 'strong-positive' | 'default' | 'default-negative' | 'default-positive' | 'subtle' | 'subtle-negative' | 'subtle-positive';
+type ButtonSize = 'small' | 'default' | 'large';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Button visual style
+   * @default 'strong'
+   */
+  variant?: ButtonVariant;
+  /**
+   * Button size
+   * @default 'default'
+   */
+  size?: ButtonSize;
+  /**
+   * Whether button shows loading state
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Whether button takes full width of container
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Whether button contains only an icon (adjusts padding)
+   * @default false
+   */
+  iconOnly?: boolean;
+  /**
+   * Icon element rendered before the button text
+   */
+  iconStart?: React.ReactNode;
+  /**
+   * Icon element rendered after the button text
+   */
+  iconEnd?: React.ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Button content
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Button component with multiple variants and sizes
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button variant="strong">Save</Button>
+ *
+ * // With icon before text
+ * <Button variant="default" iconStart={<Icon name="plus" />}>
+ *   Add item
+ * </Button>
+ *
+ * // With icon after text
+ * <Button variant="default" iconEnd={<Icon name="arrow-right" />}>
+ *   Next
+ * </Button>
+ *
+ * // With icons on both sides
+ * <Button iconStart={<Icon name="check" />} iconEnd={<Icon name="arrow-right" />}>
+ *   Confirm
+ * </Button>
+ *
+ * // Icon only — children is the accessible text label, icon via iconStart
+ * <Button variant="subtle" iconOnly iconStart={<Icon name="x" />}>
+ *   Sluiten
+ * </Button>
+ *
+ * // Loading state
+ * <Button loading disabled>Saving...</Button>
+ *
+ * // Different sizes
+ * <Button size="small">Small</Button>
+ * <Button size="default">Default</Button>
+ * <Button size="large">Large</Button>
+ *
+ * // Sentiment variants
+ * <Button variant="strong-negative">Delete</Button>
+ * <Button variant="strong-positive">Confirm</Button>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Button, ButtonProps, ButtonSize, ButtonVariant };
+//# sourceMappingURL=Button.d.mts.map

package/dist/Button/Button.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../../src/Button/Button.tsx"],"mappings":";;KAKY;KAUA;UAEK,oBAAoB,MAAM,qBAAqB;;;;;EAK9D,UAAU;;;;;EAMV,OAAO;;;;;EAMP;;;;;EAMA;;;;;EAMA;;;;EAKA,YAAY,MAAM;;;;EAKlB,UAAU,MAAM;;;;EAKhB;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4CN,QAAM,MAAA,0BAAA,cAAA,MAAA,cAAA"}

package/dist/Button/Button2.mjs

@@ -0,0 +1,76 @@
+import { Icon } from "../Icon/Icon2.mjs";
+/* empty css        */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Button/Button.tsx
+/**
+* Button component with multiple variants and sizes
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Button variant="strong">Save</Button>
+*
+* // With icon before text
+* <Button variant="default" iconStart={<Icon name="plus" />}>
+*   Add item
+* </Button>
+*
+* // With icon after text
+* <Button variant="default" iconEnd={<Icon name="arrow-right" />}>
+*   Next
+* </Button>
+*
+* // With icons on both sides
+* <Button iconStart={<Icon name="check" />} iconEnd={<Icon name="arrow-right" />}>
+*   Confirm
+* </Button>
+*
+* // Icon only — children is the accessible text label, icon via iconStart
+* <Button variant="subtle" iconOnly iconStart={<Icon name="x" />}>
+*   Sluiten
+* </Button>
+*
+* // Loading state
+* <Button loading disabled>Saving...</Button>
+*
+* // Different sizes
+* <Button size="small">Small</Button>
+* <Button size="default">Default</Button>
+* <Button size="large">Large</Button>
+*
+* // Sentiment variants
+* <Button variant="strong-negative">Delete</Button>
+* <Button variant="strong-positive">Confirm</Button>
+* ```
+*/
+const Button = React.forwardRef(({ variant = "strong", size = "default", loading = false, fullWidth = false, iconOnly = false, iconStart, iconEnd, className, disabled, children, type = "button", ...props }, ref) => {
+	const classes = classNames("dsn-button", `dsn-button--${variant}`, `dsn-button--size-${size}`, loading && "dsn-button--loading", fullWidth && "dsn-button--full-width", iconOnly && "dsn-button--icon-only", className);
+	const loaderIcon = loading ? /* @__PURE__ */ jsx(Icon, {
+		name: "loader",
+		className: "dsn-button__loader",
+		"aria-hidden": true
+	}) : null;
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type,
+		className: classes,
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		...props,
+		children: [
+			loading ? loaderIcon : iconStart,
+			children !== void 0 && children !== null && /* @__PURE__ */ jsx("span", {
+				className: "dsn-button__label",
+				children
+			}),
+			iconEnd
+		]
+	});
+});
+Button.displayName = "Button";
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button2.mjs.map

package/dist/Button/Button2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button2.mjs","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './Button.css';\n\nexport type ButtonVariant =\n  | 'strong'\n  | 'strong-negative'\n  | 'strong-positive'\n  | 'default'\n  | 'default-negative'\n  | 'default-positive'\n  | 'subtle'\n  | 'subtle-negative'\n  | 'subtle-positive';\nexport type ButtonSize = 'small' | 'default' | 'large';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Button visual style\n   * @default 'strong'\n   */\n  variant?: ButtonVariant;\n\n  /**\n   * Button size\n   * @default 'default'\n   */\n  size?: ButtonSize;\n\n  /**\n   * Whether button shows loading state\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Whether button takes full width of container\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Whether button contains only an icon (adjusts padding)\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Icon element rendered before the button text\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Icon element rendered after the button text\n   */\n  iconEnd?: React.ReactNode;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Button content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Button component with multiple variants and sizes\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Button variant=\"strong\">Save</Button>\n *\n * // With icon before text\n * <Button variant=\"default\" iconStart={<Icon name=\"plus\" />}>\n *   Add item\n * </Button>\n *\n * // With icon after text\n * <Button variant=\"default\" iconEnd={<Icon name=\"arrow-right\" />}>\n *   Next\n * </Button>\n *\n * // With icons on both sides\n * <Button iconStart={<Icon name=\"check\" />} iconEnd={<Icon name=\"arrow-right\" />}>\n *   Confirm\n * </Button>\n *\n * // Icon only — children is the accessible text label, icon via iconStart\n * <Button variant=\"subtle\" iconOnly iconStart={<Icon name=\"x\" />}>\n *   Sluiten\n * </Button>\n *\n * // Loading state\n * <Button loading disabled>Saving...</Button>\n *\n * // Different sizes\n * <Button size=\"small\">Small</Button>\n * <Button size=\"default\">Default</Button>\n * <Button size=\"large\">Large</Button>\n *\n * // Sentiment variants\n * <Button variant=\"strong-negative\">Delete</Button>\n * <Button variant=\"strong-positive\">Confirm</Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'strong',\n      size = 'default',\n      loading = false,\n      fullWidth = false,\n      iconOnly = false,\n      iconStart,\n      iconEnd,\n      className,\n      disabled,\n      children,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-button',\n      `dsn-button--${variant}`,\n      `dsn-button--size-${size}`,\n      loading && 'dsn-button--loading',\n      fullWidth && 'dsn-button--full-width',\n      iconOnly && 'dsn-button--icon-only',\n      className\n    );\n\n    const loaderIcon = loading ? (\n      <Icon name=\"loader\" className=\"dsn-button__loader\" aria-hidden />\n    ) : null;\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        className={classes}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {loading ? loaderIcon : iconStart}\n        {children !== undefined && children !== null && (\n          <span className=\"dsn-button__label\">{children}</span>\n        )}\n        {iconEnd}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,MAAa,SAAS,MAAM,YAExB,EACE,UAAU,UACV,OAAO,WACP,UAAU,OACV,YAAY,OACZ,WAAW,OACX,WACA,SACA,WACA,UACA,UACA,OAAO,UACP,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,cACA,eAAe,WACf,oBAAoB,QACpB,WAAW,uBACX,aAAa,0BACb,YAAY,yBACZ,SACF;CAEA,MAAM,aAAa,UACjB,oBAAC,MAAD;EAAM,MAAK;EAAS,WAAU;EAAqB,eAAA;CAAa,CAAA,IAC9D;CAEJ,OACE,qBAAC,UAAD;EACO;EACC;EACN,WAAW;EACX,UAAU,YAAY;EACtB,aAAW,WAAW,KAAA;EACtB,GAAI;EANN,UAAA;GAQG,UAAU,aAAa;GACvB,aAAa,KAAA,KAAa,aAAa,QACtC,oBAAC,QAAD;IAAM,WAAU;IAAqB;GAAe,CAAA;GAErD;EACK;;AAEZ,CACF;AAEA,OAAO,cAAc"}

package/dist/Button/index.d.mts

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, ButtonSize, ButtonVariant } from "./Button.mjs";
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/ButtonLink/ButtonLink.d.mts

@@ -0,0 +1,94 @@
+import React from "react";
+//#region src/ButtonLink/ButtonLink.d.ts
+type ButtonLinkVariant = 'strong' | 'strong-negative' | 'strong-positive' | 'default' | 'default-negative' | 'default-positive' | 'subtle' | 'subtle-negative' | 'subtle-positive';
+type ButtonLinkSize = 'small' | 'default' | 'large';
+interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Navigation URL
+   */
+  href?: string;
+  /**
+   * Visual style — same variants as Button (excl. 'link')
+   * @default 'strong'
+   */
+  variant?: ButtonLinkVariant;
+  /**
+   * Button size
+   * @default 'default'
+   */
+  size?: ButtonLinkSize;
+  /**
+   * Whether the button-link takes full width of container
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Whether button-link contains only an icon (hides label text visually)
+   * @default false
+   */
+  iconOnly?: boolean;
+  /**
+   * Icon element rendered before the label text
+   */
+  iconStart?: React.ReactNode;
+  /**
+   * Icon element rendered after the label text
+   */
+  iconEnd?: React.ReactNode;
+  /**
+   * Whether the link is disabled.
+   * Maps to aria-disabled="true" + tabIndex={-1} + prevents navigation.
+   * <a> has no native disabled attribute.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Whether the link opens in a new tab.
+   * Automatically adds target="_blank", rel="noopener noreferrer",
+   * and an inline "(opent nieuw tabblad)" hint — same behaviour as Link.
+   * @default false
+   */
+  external?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Link content (wrapped in dsn-button__label, same as Button)
+   */
+  children?: React.ReactNode;
+}
+/**
+ * ButtonLink — semantically an <a>, visually styled as a Button.
+ *
+ * Use when an action navigates to a URL but needs the visual prominence of a Button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (strong, default size)
+ * <ButtonLink href="/volgende">Volgende stap</ButtonLink>
+ *
+ * // Subtle variant
+ * <ButtonLink href="/" variant="subtle">Terug naar overzicht</ButtonLink>
+ *
+ * // With icon
+ * <ButtonLink href="/download" iconStart={<Icon name="download" aria-hidden />}>
+ *   Download rapport
+ * </ButtonLink>
+ *
+ * // Icon-only
+ * <ButtonLink href="/info" iconOnly iconStart={<Icon name="info-circle" aria-hidden />}>
+ *   Meer informatie
+ * </ButtonLink>
+ *
+ * // Disabled
+ * <ButtonLink href="/dashboard" disabled>Niet beschikbaar</ButtonLink>
+ *
+ * // Opens in new tab with visible hint
+ * <ButtonLink href="https://example.com" external>Externe pagina</ButtonLink>
+ * ```
+ */
+declare const ButtonLink: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { ButtonLink, ButtonLinkProps, ButtonLinkSize, ButtonLinkVariant };
+//# sourceMappingURL=ButtonLink.d.mts.map

package/dist/ButtonLink/ButtonLink.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.d.mts","names":[],"sources":["../../src/ButtonLink/ButtonLink.tsx"],"mappings":";;KAIY;KAWA;UAEK,wBAAwB,MAAM,qBAAqB;;;;EAIlE;;;;;EAMA,UAAU;;;;;EAMV,OAAO;;;;;EAMP;;;;;EAMA;;;;EAKA,YAAY,MAAM;;;;EAKlB,UAAU,MAAM;;;;;;;EAQhB;;;;;;;EAQA;;;;EAKA;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCN,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/ButtonLink/ButtonLink2.mjs

@@ -0,0 +1,70 @@
+/* empty css            */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ButtonLink/ButtonLink.tsx
+/**
+* ButtonLink — semantically an <a>, visually styled as a Button.
+*
+* Use when an action navigates to a URL but needs the visual prominence of a Button.
+*
+* @example
+* ```tsx
+* // Basic usage (strong, default size)
+* <ButtonLink href="/volgende">Volgende stap</ButtonLink>
+*
+* // Subtle variant
+* <ButtonLink href="/" variant="subtle">Terug naar overzicht</ButtonLink>
+*
+* // With icon
+* <ButtonLink href="/download" iconStart={<Icon name="download" aria-hidden />}>
+*   Download rapport
+* </ButtonLink>
+*
+* // Icon-only
+* <ButtonLink href="/info" iconOnly iconStart={<Icon name="info-circle" aria-hidden />}>
+*   Meer informatie
+* </ButtonLink>
+*
+* // Disabled
+* <ButtonLink href="/dashboard" disabled>Niet beschikbaar</ButtonLink>
+*
+* // Opens in new tab with visible hint
+* <ButtonLink href="https://example.com" external>Externe pagina</ButtonLink>
+* ```
+*/
+const ButtonLink = React.forwardRef(({ href, variant = "strong", size = "default", fullWidth = false, iconOnly = false, iconStart, iconEnd, disabled = false, external = false, className, target, rel, tabIndex, children, onClick, ...props }, ref) => {
+	const classes = classNames("dsn-button", `dsn-button--${variant}`, `dsn-button--size-${size}`, fullWidth && "dsn-button--full-width", iconOnly && "dsn-button--icon-only", "dsn-button-link", className);
+	const handleClick = (e) => {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		onClick?.(e);
+	};
+	return /* @__PURE__ */ jsxs("a", {
+		ref,
+		className: classes,
+		href: disabled ? void 0 : href,
+		target: external ? target ?? "_blank" : target,
+		rel: external ? rel ?? "noopener noreferrer" : rel,
+		tabIndex: disabled ? -1 : tabIndex,
+		"aria-disabled": disabled || void 0,
+		onClick: handleClick,
+		...props,
+		children: [
+			iconStart,
+			children !== void 0 && children !== null && /* @__PURE__ */ jsx("span", {
+				className: "dsn-button__label",
+				children
+			}),
+			external && " (opent nieuw tabblad)",
+			iconEnd
+		]
+	});
+});
+ButtonLink.displayName = "ButtonLink";
+//#endregion
+export { ButtonLink };
+
+//# sourceMappingURL=ButtonLink2.mjs.map

package/dist/ButtonLink/ButtonLink2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink2.mjs","names":[],"sources":["../../src/ButtonLink/ButtonLink.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './ButtonLink.css';\n\nexport type ButtonLinkVariant =\n  | 'strong'\n  | 'strong-negative'\n  | 'strong-positive'\n  | 'default'\n  | 'default-negative'\n  | 'default-positive'\n  | 'subtle'\n  | 'subtle-negative'\n  | 'subtle-positive';\n\nexport type ButtonLinkSize = 'small' | 'default' | 'large';\n\nexport interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * Navigation URL\n   */\n  href?: string;\n\n  /**\n   * Visual style — same variants as Button (excl. 'link')\n   * @default 'strong'\n   */\n  variant?: ButtonLinkVariant;\n\n  /**\n   * Button size\n   * @default 'default'\n   */\n  size?: ButtonLinkSize;\n\n  /**\n   * Whether the button-link takes full width of container\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Whether button-link contains only an icon (hides label text visually)\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Icon element rendered before the label text\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Icon element rendered after the label text\n   */\n  iconEnd?: React.ReactNode;\n\n  /**\n   * Whether the link is disabled.\n   * Maps to aria-disabled=\"true\" + tabIndex={-1} + prevents navigation.\n   * <a> has no native disabled attribute.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the link opens in a new tab.\n   * Automatically adds target=\"_blank\", rel=\"noopener noreferrer\",\n   * and an inline \"(opent nieuw tabblad)\" hint — same behaviour as Link.\n   * @default false\n   */\n  external?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Link content (wrapped in dsn-button__label, same as Button)\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ButtonLink — semantically an <a>, visually styled as a Button.\n *\n * Use when an action navigates to a URL but needs the visual prominence of a Button.\n *\n * @example\n * ```tsx\n * // Basic usage (strong, default size)\n * <ButtonLink href=\"/volgende\">Volgende stap</ButtonLink>\n *\n * // Subtle variant\n * <ButtonLink href=\"/\" variant=\"subtle\">Terug naar overzicht</ButtonLink>\n *\n * // With icon\n * <ButtonLink href=\"/download\" iconStart={<Icon name=\"download\" aria-hidden />}>\n *   Download rapport\n * </ButtonLink>\n *\n * // Icon-only\n * <ButtonLink href=\"/info\" iconOnly iconStart={<Icon name=\"info-circle\" aria-hidden />}>\n *   Meer informatie\n * </ButtonLink>\n *\n * // Disabled\n * <ButtonLink href=\"/dashboard\" disabled>Niet beschikbaar</ButtonLink>\n *\n * // Opens in new tab with visible hint\n * <ButtonLink href=\"https://example.com\" external>Externe pagina</ButtonLink>\n * ```\n */\nexport const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n  (\n    {\n      href,\n      variant = 'strong',\n      size = 'default',\n      fullWidth = false,\n      iconOnly = false,\n      iconStart,\n      iconEnd,\n      disabled = false,\n      external = false,\n      className,\n      target,\n      rel,\n      tabIndex,\n      children,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-button',\n      `dsn-button--${variant}`,\n      `dsn-button--size-${size}`,\n      fullWidth && 'dsn-button--full-width',\n      iconOnly && 'dsn-button--icon-only',\n      'dsn-button-link',\n      className\n    );\n\n    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n      if (disabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e);\n    };\n\n    // External links: set target and rel automatically, unless explicitly overridden\n    const resolvedTarget = external ? (target ?? '_blank') : target;\n    const resolvedRel = external ? (rel ?? 'noopener noreferrer') : rel;\n\n    return (\n      <a\n        ref={ref}\n        className={classes}\n        href={disabled ? undefined : href}\n        target={resolvedTarget}\n        rel={resolvedRel}\n        tabIndex={disabled ? -1 : tabIndex}\n        aria-disabled={disabled || undefined}\n        onClick={handleClick}\n        {...props}\n      >\n        {iconStart}\n        {children !== undefined && children !== null && (\n          <span className=\"dsn-button__label\">{children}</span>\n        )}\n        {external && ' (opent nieuw tabblad)'}\n        {iconEnd}\n      </a>\n    );\n  }\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAa,aAAa,MAAM,YAE5B,EACE,MACA,UAAU,UACV,OAAO,WACP,YAAY,OACZ,WAAW,OACX,WACA,SACA,WAAW,OACX,WAAW,OACX,WACA,QACA,KACA,UACA,UACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,cACA,eAAe,WACf,oBAAoB,QACpB,aAAa,0BACb,YAAY,yBACZ,mBACA,SACF;CAEA,MAAM,eAAe,MAA2C;EAC9D,IAAI,UAAU;GACZ,EAAE,eAAe;GACjB;EACF;EACA,UAAU,CAAC;CACb;CAMA,OACE,qBAAC,KAAD;EACO;EACL,WAAW;EACX,MAAM,WAAW,KAAA,IAAY;EAC7B,QARmB,WAAY,UAAU,WAAY;EASrD,KARgB,WAAY,OAAO,wBAAyB;EAS5D,UAAU,WAAW,KAAK;EAC1B,iBAAe,YAAY,KAAA;EAC3B,SAAS;EACT,GAAI;EATN,UAAA;GAWG;GACA,aAAa,KAAA,KAAa,aAAa,QACtC,oBAAC,QAAD;IAAM,WAAU;IAAqB;GAAe,CAAA;GAErD,YAAY;GACZ;EACA;;AAEP,CACF;AAEA,WAAW,cAAc"}

package/dist/ButtonLink/index.d.mts

@@ -0,0 +1,2 @@
+import { ButtonLink, ButtonLinkProps, ButtonLinkSize, ButtonLinkVariant } from "./ButtonLink.mjs";
+export { ButtonLink, type ButtonLinkProps, type ButtonLinkSize, type ButtonLinkVariant };