@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/cjs/components/badge/index.d.cts

@@ -0,0 +1,25 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { BadgePosition, BadgePositionProps } from "./badge-position.cjs";
+import { BadgeProps } from "./badge.cjs";
+import "../../index.cjs";
+//#region src/components/badge/index.d.ts
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ */
+declare const Badge: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").HTMLAttributes<HTMLSpanElement>, "children" | "variant" | "count" | "maxCount"> & {
+  count?: number;
+  maxCount?: number;
+  variant?: "base" | "tinted";
+  children?: never;
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+  Position: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").HTMLAttributes<HTMLSpanElement>, "overlap" | "placement"> & {
+    placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    overlap?: "circle" | "rectangle";
+  } & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Badge, BadgePosition, type BadgePositionProps, type BadgeProps };

package/dist/cjs/components/breadcrumbs/breadcrumbs-item.cjs

@@ -0,0 +1,12 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/breadcrumbs/breadcrumbs-item.tsx
+const BreadcrumbsItem = (0, react.forwardRef)(function BreadcrumbsItem({ className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.BreadcrumbsItem = BreadcrumbsItem;

package/dist/cjs/components/breadcrumbs/breadcrumbs-item.d.cts

@@ -0,0 +1,7 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/breadcrumbs/breadcrumbs-item.d.ts
+type BreadcrumbsItemProps = HTMLAttributes<HTMLLIElement>;
+declare const BreadcrumbsItem: import("react").ForwardRefExoticComponent<BreadcrumbsItemProps & import("react").RefAttributes<HTMLLIElement>>;
+//#endregion
+export { BreadcrumbsItem, BreadcrumbsItemProps };

package/dist/cjs/components/breadcrumbs/breadcrumbs-link.cjs

@@ -0,0 +1,14 @@
+'use client';
+const require_link = require("../link/link.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/breadcrumbs/breadcrumbs-link.tsx
+const BreadcrumbsLink = (0, react.forwardRef)(function BreadcrumbsLink(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_link.Link, {
+		suppressHydrationWarning: true,
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.BreadcrumbsLink = BreadcrumbsLink;

package/dist/cjs/components/breadcrumbs/breadcrumbs-link.d.cts

@@ -0,0 +1,12 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { LinkProps } from "../link/link.cjs";
+import "../../index.cjs";
+//#region src/components/breadcrumbs/breadcrumbs-link.d.ts
+type BreadcrumbsLinkProps = LinkProps;
+declare const BreadcrumbsLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "asChild"> & {
+  children: import("react").ReactNode;
+  asChild?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { BreadcrumbsLink, BreadcrumbsLinkProps };

package/dist/cjs/components/breadcrumbs/breadcrumbs-list.cjs

@@ -0,0 +1,12 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/breadcrumbs/breadcrumbs-list.tsx
+const BreadcrumbsList = (0, react.forwardRef)(function BreadcrumbsList(rest, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.BreadcrumbsList = BreadcrumbsList;

package/dist/cjs/components/breadcrumbs/breadcrumbs-list.d.cts

@@ -0,0 +1,7 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/breadcrumbs/breadcrumbs-list.d.ts
+type BreadcrumbsListProps = HTMLAttributes<HTMLOListElement>;
+declare const BreadcrumbsList: import("react").ForwardRefExoticComponent<BreadcrumbsListProps & import("react").RefAttributes<HTMLOListElement>>;
+//#endregion
+export { BreadcrumbsList, BreadcrumbsListProps };

package/dist/cjs/components/breadcrumbs/breadcrumbs.cjs

@@ -0,0 +1,34 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+require("@digdir/designsystemet-web");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/breadcrumbs/breadcrumbs.tsx
+/**
+* `Breadcrumbs` is a component that displays a list of breadcrumbs.
+*
+* @example
+* <Breadcrumbs aria-label='Du er her:' {...args}>
+*  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+*    Nivå 1
+*  </Breadcrumbs.Link>
+*  <Breadcrumbs.List>
+*    <Breadcrumbs.Item>
+*      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+*    </Breadcrumbs.Item>
+*    <Breadcrumbs.Item>
+*      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+*    </Breadcrumbs.Item>
+*  </Breadcrumbs.List>
+* </Breadcrumbs>
+*/
+const Breadcrumbs = (0, react.forwardRef)(({ className, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ds-breadcrumbs", {
+	suppressHydrationWarning: true,
+	class: (0, clsx_lite.default)("ds-breadcrumbs", className),
+	ref,
+	...rest
+}));
+//#endregion
+exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/breadcrumbs/breadcrumbs.d.cts

@@ -0,0 +1,41 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { DSBreadcrumbsElement } from "@digdir/designsystemet-web";
+import { HTMLAttributes } from "react";
+//#region src/components/breadcrumbs/breadcrumbs.d.ts
+type BreadcrumbsProps = MergeRight<DefaultProps & HTMLAttributes<DSBreadcrumbsElement>, {
+  /**
+   * Sets the screen reader label for the Breadcrumbs area
+   * @default 'Du er her'
+   */
+  'aria-label'?: string;
+}>;
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
+declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<DSBreadcrumbsElement>, "aria-label"> & {
+  /**
+   * Sets the screen reader label for the Breadcrumbs area
+   * @default 'Du er her'
+   */
+  'aria-label'?: string;
+} & import("react").RefAttributes<DSBreadcrumbsElement>>;
+//#endregion
+export { Breadcrumbs, BreadcrumbsProps };

package/dist/cjs/components/breadcrumbs/index.cjs

@@ -0,0 +1,37 @@
+'use client';
+const require_breadcrumbs = require("./breadcrumbs.cjs");
+const require_breadcrumbs_item = require("./breadcrumbs-item.cjs");
+const require_breadcrumbs_link = require("./breadcrumbs-link.cjs");
+const require_breadcrumbs_list = require("./breadcrumbs-list.cjs");
+//#region src/components/breadcrumbs/index.ts
+/**
+* `Breadcrumbs` is a component that displays a list of breadcrumbs.
+*
+* @example
+* <Breadcrumbs aria-label='Du er her:'>
+*  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+*    Nivå 1
+*  </Breadcrumbs.Link>
+*  <Breadcrumbs.List>
+*    <Breadcrumbs.Item>
+*      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+*    </Breadcrumbs.Item>
+*    <Breadcrumbs.Item>
+*      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+*    </Breadcrumbs.Item>
+*  </Breadcrumbs.List>
+* </Breadcrumbs>
+*/
+const BreadcrumbsComponent = Object.assign(require_breadcrumbs.Breadcrumbs, {
+	List: require_breadcrumbs_list.BreadcrumbsList,
+	Item: require_breadcrumbs_item.BreadcrumbsItem,
+	Link: require_breadcrumbs_link.BreadcrumbsLink
+});
+BreadcrumbsComponent.List.displayName = "Breadcrumbs.List";
+BreadcrumbsComponent.Item.displayName = "Breadcrumbs.Item";
+BreadcrumbsComponent.Link.displayName = "Breadcrumbs.Link";
+//#endregion
+exports.Breadcrumbs = BreadcrumbsComponent;
+exports.BreadcrumbsItem = require_breadcrumbs_item.BreadcrumbsItem;
+exports.BreadcrumbsLink = require_breadcrumbs_link.BreadcrumbsLink;
+exports.BreadcrumbsList = require_breadcrumbs_list.BreadcrumbsList;

package/dist/cjs/components/breadcrumbs/index.d.cts

@@ -0,0 +1,71 @@
+
+import { Breadcrumbs as Breadcrumbs$1, BreadcrumbsProps } from "./breadcrumbs.cjs";
+import { BreadcrumbsItem, BreadcrumbsItemProps } from "./breadcrumbs-item.cjs";
+import { BreadcrumbsLink, BreadcrumbsLinkProps } from "./breadcrumbs-link.cjs";
+import { BreadcrumbsList, BreadcrumbsListProps } from "./breadcrumbs-list.cjs";
+//#region src/components/breadcrumbs/index.d.ts
+type Breadcrumbs = typeof Breadcrumbs$1 & {
+  /**
+   * Component that provides a Breadcrumbs item.
+   *
+   * Place as a descendant of `Breadcrumbs.List`
+   *
+   * @example
+   * <Breadcrumbs.List>
+   *   <Breadcrumbs.Item>
+   *     <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+   *   </Breadcrumbs.Item>
+   * </Breadcrumbs.List>
+   */
+  Item: typeof BreadcrumbsItem;
+  /**
+   * Component that provides a link for the Breadcrumbs.
+   *
+   * Place as a descendant of `Breadcrumbs`
+   *
+   * @example
+   * <Breadcrumbs>
+   *   <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+   * </Breadcrumbs>
+   */
+  Link: typeof BreadcrumbsLink;
+  /**
+   * Component that provides a list of Breadcrumbs items.
+   *
+   * Place as a descendant of `Breadcrumbs`
+   *
+   * @example
+   * <Breadcrumbs>
+   *   <Breadcrumbs.List>
+   *     <Breadcrumbs.Item>
+   *       <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+   *     </Breadcrumbs.Item>
+   *     <Breadcrumbs.Item>
+   *       <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+   *     </Breadcrumbs.Item>
+   *   </Breadcrumbs.List>
+   * </Breadcrumbs>
+   */
+  List: typeof BreadcrumbsList;
+};
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:'>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
+declare const BreadcrumbsComponent: Breadcrumbs;
+//#endregion
+export { BreadcrumbsComponent as Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, BreadcrumbsLink, type BreadcrumbsLinkProps, BreadcrumbsList, type BreadcrumbsListProps, type BreadcrumbsProps };

package/dist/cjs/components/button/button.cjs

@@ -0,0 +1,36 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_spinner = require("../spinner/spinner.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/button/button.tsx
+/**
+* Button used for interaction
+*
+* @example
+* <Button>Click me</Button>
+*/
+const Button = (0, react.forwardRef)(function Button({ asChild, className, children, icon = false, loading = false, variant, popoverTarget, popovertarget, commandfor, commandFor, ...rest }, ref) {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "button";
+	const popoverVal = popoverTarget ?? popovertarget;
+	const popoverKey = react.version.startsWith("19") ? "popoverTarget" : "popovertarget";
+	const commandForVal = commandFor ?? commandfor;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		suppressHydrationWarning: true,
+		"aria-busy": Boolean(loading) || void 0,
+		className: (0, clsx_lite.default)("ds-button", className),
+		"data-icon": icon || void 0,
+		commandfor: commandForVal,
+		"data-variant": variant,
+		ref,
+		type: asChild ? void 0 : "button",
+		[popoverKey]: popoverVal,
+		...rest,
+		children: [loading === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_spinner.Spinner, { "aria-hidden": "true" }) : loading, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slottable, { children: icon && loading ? null : children })]
+	});
+});
+//#endregion
+exports.Button = Button;

package/dist/cjs/components/button/button.d.cts

@@ -0,0 +1,96 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { ButtonHTMLAttributes, ReactNode } from "react";
+//#region src/components/button/button.d.ts
+type ButtonProps = MergeRight<DefaultProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'command' | 'commandfor' | 'commandFor'>, {
+  /**
+   * Specify which variant to use
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  /**
+   * Toggle icon only styling, pass icon as children
+   * When combined with loading, the loading-icon will be shown instead of the icon.
+   * @default false
+   */
+  icon?: boolean;
+  /**
+   * Toggle loading state.
+   * Pass an element if you want to display a custom loader.
+   *
+   * @default false
+   */
+  loading?: boolean | ReactNode;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * Specify the type of button. Unset when `asChild` is true
+   * @default 'button'
+   */
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  /**
+   * Native invoker commands. Specifies actions to perform on an element specified by commandfor. Polyfilled by designsystemet-web and includes a custom --show-non-modal command.
+   * "show-modal", "close", "request-close", "show-popover", "hide-popover", "toggle-popover", "--show-non-modal"
+   */
+  command?: string;
+  /**
+   * Specifies the target element for "command".
+   * value is ID of target
+   */
+  commandfor?: string;
+  commandFor?: string;
+}>;
+/**
+ * Button used for interaction
+ *
+ * @example
+ * <Button>Click me</Button>
+ */
+declare const Button: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "command" | "commandfor" | "commandFor">, "asChild" | "command" | "commandfor" | "commandFor" | "type" | "variant" | "icon" | "loading"> & {
+  /**
+   * Specify which variant to use
+   * @default 'primary'
+   */
+  variant?: "primary" | "secondary" | "tertiary";
+  /**
+   * Toggle icon only styling, pass icon as children
+   * When combined with loading, the loading-icon will be shown instead of the icon.
+   * @default false
+   */
+  icon?: boolean;
+  /**
+   * Toggle loading state.
+   * Pass an element if you want to display a custom loader.
+   *
+   * @default false
+   */
+  loading?: boolean | ReactNode;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * Specify the type of button. Unset when `asChild` is true
+   * @default 'button'
+   */
+  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  /**
+   * Native invoker commands. Specifies actions to perform on an element specified by commandfor. Polyfilled by designsystemet-web and includes a custom --show-non-modal command.
+   * "show-modal", "close", "request-close", "show-popover", "hide-popover", "toggle-popover", "--show-non-modal"
+   */
+  command?: string;
+  /**
+   * Specifies the target element for "command".
+   * value is ID of target
+   */
+  commandfor?: string;
+  commandFor?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Button, ButtonProps };

package/dist/cjs/components/card/card-block.cjs

@@ -0,0 +1,17 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/card/card-block.tsx
+const CardBlock = (0, react.forwardRef)(function CardBlock({ asChild, className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "div", {
+		className: (0, clsx_lite.default)(`ds-card__block`, className),
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.CardBlock = CardBlock;

package/dist/cjs/components/card/card-block.d.cts

@@ -0,0 +1,19 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/card/card-block.d.ts
+type CardBlockProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CardBlock: import("react").ForwardRefExoticComponent<{
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CardBlock, CardBlockProps };

package/dist/cjs/components/card/card.cjs

@@ -0,0 +1,51 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_merge_refs = require("../../utilities/hooks/use-merge-refs/use-merge-refs.cjs");
+require("../../utilities/hooks/index.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/card/card.tsx
+const ATTR_CLICKDELEGATE = "data-clickdelegatefor";
+const SELECTOR_LINK = `:is(h1,h2,h3,h4,h5,h6) a`;
+const SELECTOR_SKIP = "a,button,label,details,dialog,[role=\"button\"],[popover],[contenteditable]";
+/**
+* Card component to present content in a structured way.
+*
+* @example
+* <Card>
+*  <Card.Block>Header</Card.Block>
+*  <Card.Block>Content</Card.Block>
+*  <Card.Block>Footer</Card.Block>
+* </Card>
+*/
+const Card = (0, react.forwardRef)(function Card({ asChild = false, variant, className, ...rest }, ref) {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "div";
+	const cardRef = (0, react.useRef)(null);
+	const linkGeneratedId = (0, react.useId)();
+	const mergedRefs = require_use_merge_refs.useMergeRefs([cardRef, ref]);
+	(0, react.useEffect)(() => {
+		const card = cardRef.current;
+		const link = card?.querySelector(SELECTOR_LINK);
+		const skip = !link || link.parentElement?.closest(SELECTOR_SKIP);
+		const id = link?.id;
+		if (card?.hasAttribute(ATTR_CLICKDELEGATE) || skip) return;
+		link.id = id || linkGeneratedId;
+		card?.setAttribute(ATTR_CLICKDELEGATE, link.id);
+		return () => {
+			if (id && link) link.id = id;
+			else link?.removeAttribute("id");
+			card?.removeAttribute(ATTR_CLICKDELEGATE);
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		className: (0, clsx_lite.default)(`ds-card`, className),
+		"data-variant": variant,
+		ref: mergedRefs,
+		...rest
+	});
+});
+//#endregion
+exports.Card = Card;

package/dist/cjs/components/card/card.d.cts

@@ -0,0 +1,48 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/card/card.d.ts
+type CardProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
+  /**
+   * Change the background color of the card.
+   *
+   * @default 'default'
+   */
+  variant?: 'default' | 'tinted';
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /** Instances of `Card.Block`, `Divider` or other React nodes */
+  children: ReactNode;
+}>;
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
+declare const Card: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "asChild" | "variant"> & {
+  /**
+   * Change the background color of the card.
+   *
+   * @default 'default'
+   */
+  variant?: "default" | "tinted";
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /** Instances of `Card.Block`, `Divider` or other React nodes */
+  children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Card, CardProps };

package/dist/cjs/components/card/index.cjs

@@ -0,0 +1,19 @@
+'use client';
+const require_card = require("./card.cjs");
+const require_card_block = require("./card-block.cjs");
+//#region src/components/card/index.ts
+/**
+* Card component to present content in a structured way.
+*
+* @example
+* <Card>
+*  <Card.Block>Header</Card.Block>
+*  <Card.Block>Content</Card.Block>
+*  <Card.Block>Footer</Card.Block>
+* </Card>
+*/
+const CardComponent = Object.assign(require_card.Card, { Block: require_card_block.CardBlock });
+CardComponent.Block.displayName = "Card.Block";
+//#endregion
+exports.Card = CardComponent;
+exports.CardBlock = require_card_block.CardBlock;

package/dist/cjs/components/card/index.d.cts

@@ -0,0 +1,32 @@
+
+import { Card as Card$1, CardProps } from "./card.cjs";
+import { CardBlock, CardBlockProps } from "./card-block.cjs";
+//#region src/components/card/index.d.ts
+type Card = typeof Card$1 & {
+  /**
+   * Use `Card.Block` to segment content with divider lines or to add full-bleed pictures/video
+   *
+   * Place as a descendant of `Card`
+   *
+   * @example
+   * <Card>
+   *   <Card.Block>Header</Card.Block>
+   *   <Card.Block>Content</Card.Block>
+   *   <Card.Block>Footer</Card.Block>
+   * </Card>
+   */
+  Block: typeof CardBlock;
+};
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
+declare const CardComponent: Card;
+//#endregion
+export { CardComponent as Card, CardBlock, type CardBlockProps, type CardProps };

package/dist/cjs/components/checkbox/checkbox.cjs

@@ -0,0 +1,41 @@
+'use client';
+const require_label = require("../label/label.cjs");
+const require_validation_message = require("../validation-message/validation-message.cjs");
+const require_input = require("../input/input.cjs");
+const require_index = require("../field/index.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/checkbox/checkbox.tsx
+/**
+* Checkbox used to select multiple options.
+*
+* @example
+* <Checkbox label="I agree" value="agree" />
+*/
+const Checkbox = (0, react.forwardRef)(function Checkbox({ "data-size": size, children, className, description, error, label, position, style, variant, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.Field, {
+		"data-size": size,
+		"data-variant": variant,
+		"data-position": position,
+		className,
+		style,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+				type: "checkbox",
+				ref,
+				...rest
+			}),
+			!!label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
+				weight: "regular",
+				children: label
+			}),
+			!!description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-field": "description",
+				children: description
+			}),
+			!!error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_validation_message.ValidationMessage, { children: error })
+		]
+	});
+});
+//#endregion
+exports.Checkbox = Checkbox;