@navikt/ds-react 6.6.0 → 6.6.1

package/cjs/collapsible/Collapsible.context.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { CollapsibleBaseProps } from "./Collapsible.types";
+export type CollapsibleContextProps = Pick<CollapsibleBaseProps, "open"> & {
+    /**
+     * Allows connecting trigger to content
+     */
+    contentId: string;
+    /**
+     * Allows connecting content to trigger
+     */
+    triggerId: string;
+    /**
+     * Callback for toggling open state
+     */
+    onOpenToggle: () => void;
+    /**
+     * Allows always rendering children in content when closed
+     */
+    lazy: boolean;
+    /**
+     * Utility for getting state as string. Usefull for data-attributes.
+     */
+    state: "open" | "closed";
+};
+export declare const CollapsibleContextProvider: import("react").ForwardRefExoticComponent<Pick<CollapsibleBaseProps, "open"> & {
+    /**
+     * Allows connecting trigger to content
+     */
+    contentId: string;
+    /**
+     * Allows connecting content to trigger
+     */
+    triggerId: string;
+    /**
+     * Callback for toggling open state
+     */
+    onOpenToggle: () => void;
+    /**
+     * Allows always rendering children in content when closed
+     */
+    lazy: boolean;
+    /**
+     * Utility for getting state as string. Usefull for data-attributes.
+     */
+    state: "open" | "closed";
+} & {
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<unknown>>, useCollapsibleContext: <S extends boolean = true>(strict?: S) => S extends true ? CollapsibleContextProps : CollapsibleContextProps | undefined;

package/cjs/collapsible/Collapsible.context.js

@@ -0,0 +1,10 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCollapsibleContext = exports.CollapsibleContextProvider = void 0;
+const create_context_1 = require("../util/create-context");
+_a = (0, create_context_1.createContext)({
+    name: "CollapsibleContext",
+    errorMessage: "<Collapsible.Trigger> and <Collapsible.Content> must be used within a <Collapsible>",
+}), exports.CollapsibleContextProvider = _a[0], exports.useCollapsibleContext = _a[1];
+//# sourceMappingURL=Collapsible.context.js.map

package/cjs/collapsible/Collapsible.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.context.js","sourceRoot":"","sources":["../../src/collapsible/Collapsible.context.tsx"],"names":[],"mappings":";;;;AAAA,2DAAuD;AA0B1C,KACX,IAAA,8BAAa,EAA0B;IACrC,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EACV,qFAAqF;CACxF,CAAC,EALU,kCAA0B,UAAE,6BAAqB,SAK1D"}

package/cjs/collapsible/Collapsible.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { CollapsibleBaseProps } from "./Collapsible.types";
+import CollapsibleContent from "./parts/Collapsible.Content";
+import CollapsibleTrigger from "./parts/Collapsible.Trigger";
+export interface CollapsibleProps extends CollapsibleBaseProps, React.HTMLAttributes<HTMLDivElement> {
+}
+interface CollapsibleComponent extends React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>> {
+    /**
+     * @see 🏷️ {@link CollapsibleTriggerProps}
+     */
+    Trigger: typeof CollapsibleTrigger;
+    /**
+     * @see 🏷️ {@link CollapsibleContentProps}
+     */
+    Content: typeof CollapsibleContent;
+}
+/**
+ * Collapsible is a component that allows you to toggle visibility of content.
+ *
+ * @example
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+ *     corporis maxime aliquam, voluptates nobis numquam, non odit optio
+ *     architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
+ *     tempore optio aliquid!
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ *
+ * @example With asChild
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger asChild>
+ *     <Button>Button</Button>
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Content asChild>
+ *     <Box padding="4" background="surface-alt-3-subtle">
+ *       <div>lorem ipsum</div>
+ *     </Box>
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ */
+export declare const Collapsible: CollapsibleComponent;
+export default Collapsible;

package/cjs/collapsible/Collapsible.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapsible = void 0;
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../util/hooks");
+const Collapsible_context_1 = require("./Collapsible.context");
+const Collapsible_Content_1 = __importDefault(require("./parts/Collapsible.Content"));
+const Collapsible_Trigger_1 = __importDefault(require("./parts/Collapsible.Trigger"));
+/**
+ * Collapsible is a component that allows you to toggle visibility of content.
+ *
+ * @example
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+ *     corporis maxime aliquam, voluptates nobis numquam, non odit optio
+ *     architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
+ *     tempore optio aliquid!
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ *
+ * @example With asChild
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger asChild>
+ *     <Button>Button</Button>
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Content asChild>
+ *     <Box padding="4" background="surface-alt-3-subtle">
+ *       <div>lorem ipsum</div>
+ *     </Box>
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ */
+exports.Collapsible = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, open, defaultOpen = false, onOpenChange, lazy = false } = _a, rest = __rest(_a, ["children", "open", "defaultOpen", "onOpenChange", "lazy"]);
+    const [_open, setOpen] = (0, hooks_1.useControllableState)({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const internalId = (0, hooks_1.useId)();
+    const state = _open ? "open" : "closed";
+    return (react_1.default.createElement(Collapsible_context_1.CollapsibleContextProvider, { open: _open, onOpenToggle: (0, react_1.useCallback)(() => setOpen((prevOpen) => !prevOpen), [setOpen]), contentId: `collapsible-content-${internalId}`, triggerId: `collapsible-trigger-${internalId}`, lazy: lazy, state: state },
+        react_1.default.createElement("div", Object.assign({ ref: ref, "data-state": state }, rest), children)));
+});
+exports.Collapsible.Trigger = Collapsible_Trigger_1.default;
+exports.Collapsible.Content = Collapsible_Content_1.default;
+exports.default = exports.Collapsible;
+//# sourceMappingURL=Collapsible.js.map

package/cjs/collapsible/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../../src/collapsible/Collapsible.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuD;AACvD,yCAA4D;AAC5D,+DAAmE;AAEnE,sFAA6D;AAC7D,sFAA6D;AAoB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACU,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,IAAI,GAAG,KAAK,OAEb,EADI,IAAI,cANT,2DAOC,CADQ;IAIT,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,IAAA,4BAAoB,EAAC;QAC5C,KAAK,EAAE,IAAI;QACX,YAAY,EAAE,WAAW;QACzB,QAAQ,EAAE,YAAY;KACvB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,IAAA,aAAK,GAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAExC,OAAO,CACL,8BAAC,gDAA0B,IACzB,IAAI,EAAE,KAAK,EACX,YAAY,EAAE,IAAA,mBAAW,EACvB,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtC,CAAC,OAAO,CAAC,CACV,EACD,SAAS,EAAE,uBAAuB,UAAU,EAAE,EAC9C,SAAS,EAAE,uBAAuB,UAAU,EAAE,EAC9C,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK;QAEZ,qDAAK,GAAG,EAAE,GAAG,gBAAc,KAAK,IAAM,IAAI,GACvC,QAAQ,CACL,CACqB,CAC9B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,mBAAW,CAAC,OAAO,GAAG,6BAAkB,CAAC;AACzC,mBAAW,CAAC,OAAO,GAAG,6BAAkB,CAAC;AAEzC,kBAAe,mBAAW,CAAC"}

package/cjs/collapsible/Collapsible.types.d.ts

@@ -0,0 +1,19 @@
+export interface CollapsibleBaseProps {
+    /**
+     * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled open state of the collapsible. Must be used in conjunction with onOpenChange.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the collapsible changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Render the collapsible content lazily. This means that the content will not be rendered until the collapsible is open.
+     * @default false
+     */
+    lazy?: boolean;
+}

package/cjs/collapsible/Collapsible.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Collapsible.types.js.map

package/cjs/collapsible/Collapsible.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.types.js","sourceRoot":"","sources":["../../src/collapsible/Collapsible.types.ts"],"names":[],"mappings":""}

package/cjs/collapsible/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible, type CollapsibleProps } from "./Collapsible";
+export { default as CollapsibleTrigger, type CollapsibleTriggerProps, } from "./parts/Collapsible.Trigger";
+export { default as CollapsibleContent, type CollapsibleContentProps, } from "./parts/Collapsible.Content";

package/cjs/collapsible/index.js

@@ -0,0 +1,14 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = void 0;
+var Collapsible_1 = require("./Collapsible");
+Object.defineProperty(exports, "Collapsible", { enumerable: true, get: function () { return __importDefault(Collapsible_1).default; } });
+var Collapsible_Trigger_1 = require("./parts/Collapsible.Trigger");
+Object.defineProperty(exports, "CollapsibleTrigger", { enumerable: true, get: function () { return __importDefault(Collapsible_Trigger_1).default; } });
+var Collapsible_Content_1 = require("./parts/Collapsible.Content");
+Object.defineProperty(exports, "CollapsibleContent", { enumerable: true, get: function () { return __importDefault(Collapsible_Content_1).default; } });
+//# sourceMappingURL=index.js.map

package/cjs/collapsible/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AACb,6CAA8E;AAArE,2HAAA,OAAO,OAAe;AAC/B,mEAGqC;AAFnC,0IAAA,OAAO,OAAsB;AAG/B,mEAGqC;AAFnC,0IAAA,OAAO,OAAsB"}

package/cjs/collapsible/parts/Collapsible.Content.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface CollapsibleContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "hidden" | "aria-controls" | "id"> {
+    /**
+     * When true, will render element as its child. This merges classes, styles and event handlers.
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
+export default CollapsibleContent;

package/cjs/collapsible/parts/Collapsible.Content.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleContent = void 0;
+const react_1 = __importStar(require("react"));
+const Slot_1 = require("../../util/Slot");
+const Collapsible_context_1 = require("../Collapsible.context");
+exports.CollapsibleContent = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, asChild } = _a, rest = __rest(_a, ["children", "asChild"]);
+    const ctx = (0, Collapsible_context_1.useCollapsibleContext)();
+    const Comp = asChild ? Slot_1.Slot : "div";
+    return (react_1.default.createElement(Comp, Object.assign({ ref: ref }, rest, { "data-state": ctx.state, hidden: !ctx.open, "aria-controls": ctx.open ? ctx.triggerId : undefined, id: ctx.contentId }), ctx.lazy || ctx.open ? children : null));
+});
+exports.default = exports.CollapsibleContent;
+//# sourceMappingURL=Collapsible.Content.js.map

package/cjs/collapsible/parts/Collapsible.Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.Content.js","sourceRoot":"","sources":["../../../src/collapsible/parts/Collapsible.Content.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,gEAA+D;AAclD,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EAG1C,CAAC,EAA8B,EAAE,GAAG,EAAE,EAAE;QAAvC,EAAE,QAAQ,EAAE,OAAO,OAAW,EAAN,IAAI,cAA5B,uBAA8B,CAAF;IAC7B,MAAM,GAAG,GAAG,IAAA,2CAAqB,GAAE,CAAC;IAEpC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,8BAAC,IAAI,kBACH,GAAG,EAAE,GAAG,IACJ,IAAI,kBACI,GAAG,CAAC,KAAK,EACrB,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,mBACF,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACnD,EAAE,EAAE,GAAG,CAAC,SAAS,KAEhB,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAClC,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,0BAAkB,CAAC"}

package/cjs/collapsible/parts/Collapsible.Trigger.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface CollapsibleTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "aria-controls" | "aria-expanded"> {
+    /**
+     * When true, will render element as its child. This merges classes, styles and event handlers.
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default CollapsibleTrigger;

package/cjs/collapsible/parts/Collapsible.Trigger.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleTrigger = void 0;
+const react_1 = __importStar(require("react"));
+const Slot_1 = require("../../util/Slot");
+const composeEventHandlers_1 = require("../../util/composeEventHandlers");
+const Collapsible_context_1 = require("../Collapsible.context");
+exports.CollapsibleTrigger = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, asChild, onClick } = _a, rest = __rest(_a, ["children", "asChild", "onClick"]);
+    const ctx = (0, Collapsible_context_1.useCollapsibleContext)();
+    const Comp = asChild ? Slot_1.Slot : "button";
+    return (react_1.default.createElement(Comp, Object.assign({ ref: ref, type: "button", "data-state": ctx.state, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, ctx.onOpenToggle) }, rest, { id: ctx.triggerId, "aria-controls": ctx.open ? ctx.contentId : undefined, "aria-expanded": ctx.open }), children));
+});
+exports.default = exports.CollapsibleTrigger;
+//# sourceMappingURL=Collapsible.Trigger.js.map

package/cjs/collapsible/parts/Collapsible.Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.Trigger.js","sourceRoot":"","sources":["../../../src/collapsible/parts/Collapsible.Trigger.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,0EAAuE;AACvE,gEAA+D;AAclD,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EAG1C,CAAC,EAAuC,EAAE,GAAG,EAAE,EAAE;QAAhD,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACtC,MAAM,GAAG,GAAG,IAAA,2CAAqB,GAAE,CAAC;IAEpC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEvC,OAAO,CACL,8BAAC,IAAI,kBACH,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,gBACD,GAAG,CAAC,KAAK,EACrB,OAAO,EAAE,IAAA,2CAAoB,EAAC,OAAO,EAAE,GAAG,CAAC,YAAY,CAAC,IACpD,IAAI,IACR,EAAE,EAAE,GAAG,CAAC,SAAS,mBACF,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBACpC,GAAG,CAAC,IAAI,KAEtB,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,0BAAkB,CAAC"}

package/cjs/layout/stack/Spacer.js

@@ -17,7 +17,7 @@ const react_1 = __importDefault(require("react"));
  *  <MyComponent />
  * </HStack>
  */
-const Spacer = () => react_1.default.createElement("div", { className: "navds-stack__spacer" });
+const Spacer = () => react_1.default.createElement("span", { className: "navds-stack__spacer" });
 exports.Spacer = Spacer;
 exports.default = exports.Spacer;
 //# sourceMappingURL=Spacer.js.map

package/cjs/layout/stack/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/layout/stack/Spacer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B;;;;;;;;;;;GAWG;AACI,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,uCAAK,SAAS,EAAC,qBAAqB,GAAG,CAAC;AAAvD,QAAA,MAAM,UAAiD;AAEpE,kBAAe,cAAM,CAAC"}
+{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/layout/stack/Spacer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B;;;;;;;;;;;GAWG;AACI,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,wCAAM,SAAS,EAAC,qBAAqB,GAAG,CAAC;AAAxD,QAAA,MAAM,UAAkD;AAErE,kBAAe,cAAM,CAAC"}

package/esm/collapsible/Collapsible.context.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { CollapsibleBaseProps } from "./Collapsible.types.js";
+export type CollapsibleContextProps = Pick<CollapsibleBaseProps, "open"> & {
+    /**
+     * Allows connecting trigger to content
+     */
+    contentId: string;
+    /**
+     * Allows connecting content to trigger
+     */
+    triggerId: string;
+    /**
+     * Callback for toggling open state
+     */
+    onOpenToggle: () => void;
+    /**
+     * Allows always rendering children in content when closed
+     */
+    lazy: boolean;
+    /**
+     * Utility for getting state as string. Usefull for data-attributes.
+     */
+    state: "open" | "closed";
+};
+export declare const CollapsibleContextProvider: import("react").ForwardRefExoticComponent<Pick<CollapsibleBaseProps, "open"> & {
+    /**
+     * Allows connecting trigger to content
+     */
+    contentId: string;
+    /**
+     * Allows connecting content to trigger
+     */
+    triggerId: string;
+    /**
+     * Callback for toggling open state
+     */
+    onOpenToggle: () => void;
+    /**
+     * Allows always rendering children in content when closed
+     */
+    lazy: boolean;
+    /**
+     * Utility for getting state as string. Usefull for data-attributes.
+     */
+    state: "open" | "closed";
+} & {
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<unknown>>, useCollapsibleContext: <S extends boolean = true>(strict?: S) => S extends true ? CollapsibleContextProps : CollapsibleContextProps | undefined;

package/esm/collapsible/Collapsible.context.js

@@ -0,0 +1,6 @@
+import { createContext } from "../util/create-context.js";
+export const [CollapsibleContextProvider, useCollapsibleContext] = createContext({
+    name: "CollapsibleContext",
+    errorMessage: "<Collapsible.Trigger> and <Collapsible.Content> must be used within a <Collapsible>",
+});
+//# sourceMappingURL=Collapsible.context.js.map

package/esm/collapsible/Collapsible.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.context.js","sourceRoot":"","sources":["../../src/collapsible/Collapsible.context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AA0BvD,MAAM,CAAC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,GAC9D,aAAa,CAA0B;IACrC,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EACV,qFAAqF;CACxF,CAAC,CAAC"}

package/esm/collapsible/Collapsible.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { CollapsibleBaseProps } from "./Collapsible.types.js";
+import CollapsibleContent from "./parts/Collapsible.Content.js";
+import CollapsibleTrigger from "./parts/Collapsible.Trigger.js";
+export interface CollapsibleProps extends CollapsibleBaseProps, React.HTMLAttributes<HTMLDivElement> {
+}
+interface CollapsibleComponent extends React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>> {
+    /**
+     * @see 🏷️ {@link CollapsibleTriggerProps}
+     */
+    Trigger: typeof CollapsibleTrigger;
+    /**
+     * @see 🏷️ {@link CollapsibleContentProps}
+     */
+    Content: typeof CollapsibleContent;
+}
+/**
+ * Collapsible is a component that allows you to toggle visibility of content.
+ *
+ * @example
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+ *     corporis maxime aliquam, voluptates nobis numquam, non odit optio
+ *     architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
+ *     tempore optio aliquid!
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ *
+ * @example With asChild
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger asChild>
+ *     <Button>Button</Button>
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Content asChild>
+ *     <Box padding="4" background="surface-alt-3-subtle">
+ *       <div>lorem ipsum</div>
+ *     </Box>
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ */
+export declare const Collapsible: CollapsibleComponent;
+export default Collapsible;

package/esm/collapsible/Collapsible.js

@@ -0,0 +1,62 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useCallback } from "react";
+import { useControllableState, useId } from "../util/hooks/index.js";
+import { CollapsibleContextProvider } from "./Collapsible.context.js";
+import CollapsibleContent from "./parts/Collapsible.Content.js";
+import CollapsibleTrigger from "./parts/Collapsible.Trigger.js";
+/**
+ * Collapsible is a component that allows you to toggle visibility of content.
+ *
+ * @example
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+ *     corporis maxime aliquam, voluptates nobis numquam, non odit optio
+ *     architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
+ *     tempore optio aliquid!
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ *
+ * @example With asChild
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger asChild>
+ *     <Button>Button</Button>
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Content asChild>
+ *     <Box padding="4" background="surface-alt-3-subtle">
+ *       <div>lorem ipsum</div>
+ *     </Box>
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ */
+export const Collapsible = forwardRef((_a, ref) => {
+    var { children, open, defaultOpen = false, onOpenChange, lazy = false } = _a, rest = __rest(_a, ["children", "open", "defaultOpen", "onOpenChange", "lazy"]);
+    const [_open, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const internalId = useId();
+    const state = _open ? "open" : "closed";
+    return (React.createElement(CollapsibleContextProvider, { open: _open, onOpenToggle: useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]), contentId: `collapsible-content-${internalId}`, triggerId: `collapsible-trigger-${internalId}`, lazy: lazy, state: state },
+        React.createElement("div", Object.assign({ ref: ref, "data-state": state }, rest), children)));
+});
+Collapsible.Trigger = CollapsibleTrigger;
+Collapsible.Content = CollapsibleContent;
+export default Collapsible;
+//# sourceMappingURL=Collapsible.js.map

package/esm/collapsible/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../../src/collapsible/Collapsible.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,kBAAkB,MAAM,6BAA6B,CAAC;AAC7D,OAAO,kBAAkB,MAAM,6BAA6B,CAAC;AAoB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,IAAI,GAAG,KAAK,OAEb,EADI,IAAI,cANT,2DAOC,CADQ;IAIT,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,oBAAoB,CAAC;QAC5C,KAAK,EAAE,IAAI;QACX,YAAY,EAAE,WAAW;QACzB,QAAQ,EAAE,YAAY;KACvB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAExC,OAAO,CACL,oBAAC,0BAA0B,IACzB,IAAI,EAAE,KAAK,EACX,YAAY,EAAE,WAAW,CACvB,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtC,CAAC,OAAO,CAAC,CACV,EACD,SAAS,EAAE,uBAAuB,UAAU,EAAE,EAC9C,SAAS,EAAE,uBAAuB,UAAU,EAAE,EAC9C,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK;QAEZ,2CAAK,GAAG,EAAE,GAAG,gBAAc,KAAK,IAAM,IAAI,GACvC,QAAQ,CACL,CACqB,CAC9B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,OAAO,GAAG,kBAAkB,CAAC;AACzC,WAAW,CAAC,OAAO,GAAG,kBAAkB,CAAC;AAEzC,eAAe,WAAW,CAAC"}

package/esm/collapsible/Collapsible.types.d.ts

@@ -0,0 +1,19 @@
+export interface CollapsibleBaseProps {
+    /**
+     * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled open state of the collapsible. Must be used in conjunction with onOpenChange.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the collapsible changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Render the collapsible content lazily. This means that the content will not be rendered until the collapsible is open.
+     * @default false
+     */
+    lazy?: boolean;
+}

package/esm/collapsible/Collapsible.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Collapsible.types.js.map

package/esm/collapsible/Collapsible.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.types.js","sourceRoot":"","sources":["../../src/collapsible/Collapsible.types.ts"],"names":[],"mappings":""}

package/esm/collapsible/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible, type CollapsibleProps } from "./Collapsible.js";
+export { default as CollapsibleTrigger, type CollapsibleTriggerProps, } from "./parts/Collapsible.Trigger.js";
+export { default as CollapsibleContent, type CollapsibleContentProps, } from "./parts/Collapsible.Content.js";

package/esm/collapsible/index.js

@@ -0,0 +1,5 @@
+"use client";
+export { default as Collapsible } from "./Collapsible.js";
+export { default as CollapsibleTrigger, } from "./parts/Collapsible.Trigger.js";
+export { default as CollapsibleContent, } from "./parts/Collapsible.Content.js";
+//# sourceMappingURL=index.js.map

package/esm/collapsible/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,WAAW,EAAyB,MAAM,eAAe,CAAC;AAC9E,OAAO,EACL,OAAO,IAAI,kBAAkB,GAE9B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,OAAO,IAAI,kBAAkB,GAE9B,MAAM,6BAA6B,CAAC"}

package/esm/collapsible/parts/Collapsible.Content.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface CollapsibleContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "hidden" | "aria-controls" | "id"> {
+    /**
+     * When true, will render element as its child. This merges classes, styles and event handlers.
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
+export default CollapsibleContent;

package/esm/collapsible/parts/Collapsible.Content.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot.js";
+import { useCollapsibleContext } from "../Collapsible.context.js";
+export const CollapsibleContent = forwardRef((_a, ref) => {
+    var { children, asChild } = _a, rest = __rest(_a, ["children", "asChild"]);
+    const ctx = useCollapsibleContext();
+    const Comp = asChild ? Slot : "div";
+    return (React.createElement(Comp, Object.assign({ ref: ref }, rest, { "data-state": ctx.state, hidden: !ctx.open, "aria-controls": ctx.open ? ctx.triggerId : undefined, id: ctx.contentId }), ctx.lazy || ctx.open ? children : null));
+});
+export default CollapsibleContent;
+//# sourceMappingURL=Collapsible.Content.js.map

package/esm/collapsible/parts/Collapsible.Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.Content.js","sourceRoot":"","sources":["../../../src/collapsible/parts/Collapsible.Content.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAc/D,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,EAA8B,EAAE,GAAG,EAAE,EAAE;QAAvC,EAAE,QAAQ,EAAE,OAAO,OAAW,EAAN,IAAI,cAA5B,uBAA8B,CAAF;IAC7B,MAAM,GAAG,GAAG,qBAAqB,EAAE,CAAC;IAEpC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,oBAAC,IAAI,kBACH,GAAG,EAAE,GAAG,IACJ,IAAI,kBACI,GAAG,CAAC,KAAK,EACrB,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,mBACF,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACnD,EAAE,EAAE,GAAG,CAAC,SAAS,KAEhB,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAClC,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,kBAAkB,CAAC"}

package/esm/collapsible/parts/Collapsible.Trigger.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface CollapsibleTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "aria-controls" | "aria-expanded"> {
+    /**
+     * When true, will render element as its child. This merges classes, styles and event handlers.
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default CollapsibleTrigger;

package/esm/collapsible/parts/Collapsible.Trigger.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot.js";
+import { composeEventHandlers } from "../../util/composeEventHandlers.js";
+import { useCollapsibleContext } from "../Collapsible.context.js";
+export const CollapsibleTrigger = forwardRef((_a, ref) => {
+    var { children, asChild, onClick } = _a, rest = __rest(_a, ["children", "asChild", "onClick"]);
+    const ctx = useCollapsibleContext();
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, Object.assign({ ref: ref, type: "button", "data-state": ctx.state, onClick: composeEventHandlers(onClick, ctx.onOpenToggle) }, rest, { id: ctx.triggerId, "aria-controls": ctx.open ? ctx.contentId : undefined, "aria-expanded": ctx.open }), children));
+});
+export default CollapsibleTrigger;
+//# sourceMappingURL=Collapsible.Trigger.js.map

package/esm/collapsible/parts/Collapsible.Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.Trigger.js","sourceRoot":"","sources":["../../../src/collapsible/parts/Collapsible.Trigger.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAc/D,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,EAAuC,EAAE,GAAG,EAAE,EAAE;QAAhD,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACtC,MAAM,GAAG,GAAG,qBAAqB,EAAE,CAAC;IAEpC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEvC,OAAO,CACL,oBAAC,IAAI,kBACH,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,gBACD,GAAG,CAAC,KAAK,EACrB,OAAO,EAAE,oBAAoB,CAAC,OAAO,EAAE,GAAG,CAAC,YAAY,CAAC,IACpD,IAAI,IACR,EAAE,EAAE,GAAG,CAAC,SAAS,mBACF,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBACpC,GAAG,CAAC,IAAI,KAEtB,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,kBAAkB,CAAC"}

package/esm/layout/stack/Spacer.js

@@ -11,6 +11,6 @@ import React from "react";
  *  <MyComponent />
  * </HStack>
  */
-export const Spacer = () => React.createElement("div", { className: "navds-stack__spacer" });
+export const Spacer = () => React.createElement("span", { className: "navds-stack__spacer" });
 export default Spacer;
 //# sourceMappingURL=Spacer.js.map

package/esm/layout/stack/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/layout/stack/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CAAC;AAEpE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/layout/stack/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,8BAAM,SAAS,EAAC,qBAAqB,GAAG,CAAC;AAErE,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.6.0",
+  "version": "6.6.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -573,8 +573,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.6.0",
-    "@navikt/ds-tokens": "^6.6.0",
+    "@navikt/aksel-icons": "^6.6.1",
+    "@navikt/ds-tokens": "^6.6.1",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

package/src/collapsible/Collapsible.context.tsx

@@ -0,0 +1,32 @@
+import { createContext } from "../util/create-context";
+import { CollapsibleBaseProps } from "./Collapsible.types";
+
+export type CollapsibleContextProps = Pick<CollapsibleBaseProps, "open"> & {
+  /**
+   * Allows connecting trigger to content
+   */
+  contentId: string;
+  /**
+   * Allows connecting content to trigger
+   */
+  triggerId: string;
+  /**
+   * Callback for toggling open state
+   */
+  onOpenToggle: () => void;
+  /**
+   * Allows always rendering children in content when closed
+   */
+  lazy: boolean;
+  /**
+   * Utility for getting state as string. Usefull for data-attributes.
+   */
+  state: "open" | "closed";
+};
+
+export const [CollapsibleContextProvider, useCollapsibleContext] =
+  createContext<CollapsibleContextProps>({
+    name: "CollapsibleContext",
+    errorMessage:
+      "<Collapsible.Trigger> and <Collapsible.Content> must be used within a <Collapsible>",
+  });

package/src/collapsible/Collapsible.tsx

@@ -0,0 +1,100 @@
+import React, { forwardRef, useCallback } from "react";
+import { useControllableState, useId } from "../util/hooks";
+import { CollapsibleContextProvider } from "./Collapsible.context";
+import { CollapsibleBaseProps } from "./Collapsible.types";
+import CollapsibleContent from "./parts/Collapsible.Content";
+import CollapsibleTrigger from "./parts/Collapsible.Trigger";
+
+export interface CollapsibleProps
+  extends CollapsibleBaseProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+interface CollapsibleComponent
+  extends React.ForwardRefExoticComponent<
+    CollapsibleProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * @see 🏷️ {@link CollapsibleTriggerProps}
+   */
+  Trigger: typeof CollapsibleTrigger;
+  /**
+   * @see 🏷️ {@link CollapsibleContentProps}
+   */
+  Content: typeof CollapsibleContent;
+}
+
+/**
+ * Collapsible is a component that allows you to toggle visibility of content.
+ *
+ * @example
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+ *     corporis maxime aliquam, voluptates nobis numquam, non odit optio
+ *     architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
+ *     tempore optio aliquid!
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ *
+ * @example With asChild
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger asChild>
+ *     <Button>Button</Button>
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Content asChild>
+ *     <Box padding="4" background="surface-alt-3-subtle">
+ *       <div>lorem ipsum</div>
+ *     </Box>
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ */
+export const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
+  (
+    {
+      children,
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      lazy = false,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_open, setOpen] = useControllableState({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const internalId = useId();
+    const state = _open ? "open" : "closed";
+
+    return (
+      <CollapsibleContextProvider
+        open={_open}
+        onOpenToggle={useCallback(
+          () => setOpen((prevOpen) => !prevOpen),
+          [setOpen],
+        )}
+        contentId={`collapsible-content-${internalId}`}
+        triggerId={`collapsible-trigger-${internalId}`}
+        lazy={lazy}
+        state={state}
+      >
+        <div ref={ref} data-state={state} {...rest}>
+          {children}
+        </div>
+      </CollapsibleContextProvider>
+    );
+  },
+) as CollapsibleComponent;
+
+Collapsible.Trigger = CollapsibleTrigger;
+Collapsible.Content = CollapsibleContent;
+
+export default Collapsible;

package/src/collapsible/Collapsible.types.ts

@@ -0,0 +1,19 @@
+export interface CollapsibleBaseProps {
+  /**
+   * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
+   */
+  defaultOpen?: boolean;
+  /**
+   * The controlled open state of the collapsible. Must be used in conjunction with onOpenChange.
+   */
+  open?: boolean;
+  /**
+   * Event handler called when the open state of the collapsible changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Render the collapsible content lazily. This means that the content will not be rendered until the collapsible is open.
+   * @default false
+   */
+  lazy?: boolean;
+}

package/src/collapsible/index.ts

@@ -0,0 +1,10 @@
+"use client";
+export { default as Collapsible, type CollapsibleProps } from "./Collapsible";
+export {
+  default as CollapsibleTrigger,
+  type CollapsibleTriggerProps,
+} from "./parts/Collapsible.Trigger";
+export {
+  default as CollapsibleContent,
+  type CollapsibleContentProps,
+} from "./parts/Collapsible.Content";

package/src/collapsible/parts/Collapsible.Content.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot";
+import { useCollapsibleContext } from "../Collapsible.context";
+
+export interface CollapsibleContentProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "hidden" | "aria-controls" | "id"
+  > {
+  /**
+   * When true, will render element as its child. This merges classes, styles and event handlers.
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const CollapsibleContent = forwardRef<
+  HTMLDivElement,
+  CollapsibleContentProps
+>(({ children, asChild, ...rest }, ref) => {
+  const ctx = useCollapsibleContext();
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      {...rest}
+      data-state={ctx.state}
+      hidden={!ctx.open}
+      aria-controls={ctx.open ? ctx.triggerId : undefined}
+      id={ctx.contentId}
+    >
+      {ctx.lazy || ctx.open ? children : null}
+    </Comp>
+  );
+});
+
+export default CollapsibleContent;

package/src/collapsible/parts/Collapsible.Trigger.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useCollapsibleContext } from "../Collapsible.context";
+
+export interface CollapsibleTriggerProps
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "id" | "aria-controls" | "aria-expanded"
+  > {
+  /**
+   * When true, will render element as its child. This merges classes, styles and event handlers.
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const CollapsibleTrigger = forwardRef<
+  HTMLButtonElement,
+  CollapsibleTriggerProps
+>(({ children, asChild, onClick, ...rest }, ref) => {
+  const ctx = useCollapsibleContext();
+
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      type="button"
+      data-state={ctx.state}
+      onClick={composeEventHandlers(onClick, ctx.onOpenToggle)}
+      {...rest}
+      id={ctx.triggerId}
+      aria-controls={ctx.open ? ctx.contentId : undefined}
+      aria-expanded={ctx.open}
+    >
+      {children}
+    </Comp>
+  );
+});
+
+export default CollapsibleTrigger;

package/src/layout/stack/Spacer.tsx

@@ -12,6 +12,6 @@ import React from "react";
  *  <MyComponent />
  * </HStack>
  */
-export const Spacer = () => <div className="navds-stack__spacer" />;
+export const Spacer = () => <span className="navds-stack__spacer" />;
 
 export default Spacer;