@navikt/ds-react 6.6.0 → 6.7.0

package/esm/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,60 @@
+import React, { HTMLAttributes } from "react";
+interface ProgressBarPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    /**
+     * Changes height.
+     * @default "medium"
+     */
+    size?: "large" | "medium" | "small";
+    /**
+     * Current progress. When duration is set, value is ignored.
+     */
+    value?: number;
+    /**
+     * Maximum progress.
+     * @default 100
+     */
+    valueMax?: number;
+    /**
+     * Expected task duration in seconds.
+     * ProgressBar grows with a preset animation for {duration} seconds.
+     * After a 4 sec delay, it then shows an indeterminate animation.
+     * A duration of 0 will show an indeterminate animation immediately.
+     * Temporary removed to avoid conflicts when updating API
+     */
+    /**
+     * String ID of the element that labels the progress bar.
+     * Not needed if `aria-label` is used.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * String value that labels the progress bar.
+     * Not needed if `aria-labelledby` is used.
+     */
+    "aria-label"?: string;
+}
+export type ProgressBarProps = ProgressBarPropsBase & ({
+    "aria-hidden": string;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: never;
+} | {
+    "aria-label": string;
+    "aria-labelledby"?: never;
+});
+/**
+ * ProgressBar
+ * A component for visualizing progression in a process.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
+ * @see 🏷️ {@link ProgressBarProps}
+ *
+ * @example
+ * // For loading content with an approximate duration in sec.
+ * <ProgressBar duration={30} />
+ *
+ * @example
+ * // As a step indicator for forms, questionnaires, etc.
+ * <ProgressBar value={2} valueMax={7} />
+ */
+export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export default ProgressBar;

package/esm/progress-bar/ProgressBar.js

@@ -0,0 +1,47 @@
+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 cl from "clsx";
+import React, { forwardRef } from "react";
+/**
+ * ProgressBar
+ * A component for visualizing progression in a process.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
+ * @see 🏷️ {@link ProgressBarProps}
+ *
+ * @example
+ * // For loading content with an approximate duration in sec.
+ * <ProgressBar duration={30} />
+ *
+ * @example
+ * // As a step indicator for forms, questionnaires, etc.
+ * <ProgressBar value={2} valueMax={7} />
+ */
+export const ProgressBar = forwardRef((_a, ref) => {
+    var { size = "medium", value = 0, valueMax = 100, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, className } = _a, rest = __rest(_a, ["size", "value", "valueMax", "aria-labelledby", "aria-label", "className"]);
+    const translate = 100 - (Math.round(value) / valueMax) * 100;
+    const duration = undefined;
+    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-progress-bar", `navds-progress-bar--${size}`, className), "aria-valuemax": duration ? 0 : Math.round(valueMax), "aria-valuenow": duration ? 0 : Math.round(value), "aria-valuetext": duration
+            ? "Fremdrift kan ikke beregnes"
+            : `${Math.round(value)} av ${Math.round(valueMax)}`, role: "progressbar", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel }, rest),
+        React.createElement("div", { className: cl("navds-progress-bar__foreground", {
+                "navds-progress-bar__foreground--indeterminate": Number.isInteger(duration),
+            }), style: {
+                "--__ac-progress-bar-duration": Number.isInteger(duration)
+                    ? `${duration}s`
+                    : undefined,
+                "--__ac-progress-bar-delay": `${duration === 0 ? 0 : 4}s`,
+                "--__ac-progress-bar-translate": `-${translate}%`,
+            } })));
+});
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

package/esm/progress-bar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/progress-bar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAqD1D;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,GAAG,EACd,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,SAAS,OAEV,EADI,IAAI,cAPT,2EAQC,CADQ;IAIT,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAC7D,MAAM,QAAQ,GAAG,SAAS,CAAC;IAE3B,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,SAAS,CACV,mBACc,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,mBACnC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,oBAE7C,QAAQ;YACN,CAAC,CAAC,6BAA6B;YAC/B,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,EAEvD,IAAI,EAAC,aAAa,qBACD,cAAc,gBACnB,SAAS,IACjB,IAAI;QAER,6BACE,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE;gBAC9C,+CAA+C,EAC7C,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;aAC7B,CAAC,EACF,KAAK,EAAE;gBACL,8BAA8B,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;oBACxD,CAAC,CAAC,GAAG,QAAQ,GAAG;oBAChB,CAAC,CAAC,SAAS;gBACb,2BAA2B,EAAE,GAAG,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;gBACzD,+BAA+B,EAAE,IAAI,SAAS,GAAG;aAClD,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export { default as ProgressBar, type ProgressBarProps } from "./ProgressBar.js";

package/esm/progress-bar/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { default as ProgressBar } from "./ProgressBar.js";
+//# sourceMappingURL=index.js.map

package/esm/progress-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/progress-bar/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,WAAW,EAAyB,MAAM,eAAe,CAAC"}

package/esm/typography/BodyLong.d.ts

@@ -3,12 +3,12 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface BodyLongProps extends TypoProps, React.HTMLAttributes<HTMLParagraphElement> {
     /**
-     * large: 20px, medium: 18px, small: 16px
+     * large: 20px, medium: 18px, small: 16px.
      * @default "medium"
      */
     size?: "large" | "medium" | "small";
     /**
-     * Text
+     * Text.
      */
     children: React.ReactNode;
 }
@@ -21,11 +21,11 @@ export interface BodyLongProps extends TypoProps, React.HTMLAttributes<HTMLParag
  *
  * @example
  * ```jsx
- *     <BodyLong>
- *       Hvis du ikke bor sammen med begge foreldrene dine,
- *       kan du ha rett til barnebidrag fra en eller begge foreldre mens du
- *       fullfører videregående skole eller tilsvarende.
- *     </BodyLong>
+ * <BodyLong>
+ *   Hvis du ikke bor sammen med begge foreldrene dine,
+ *   kan du ha rett til barnebidrag fra en eller begge foreldre mens du
+ *   fullfører videregående skole eller tilsvarende.
+ * </BodyLong>
  * ```
  */
 export declare const BodyLong: OverridableComponent<BodyLongProps, HTMLParagraphElement>;

package/esm/typography/BodyLong.js

@@ -21,11 +21,11 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <BodyLong>
- *       Hvis du ikke bor sammen med begge foreldrene dine,
- *       kan du ha rett til barnebidrag fra en eller begge foreldre mens du
- *       fullfører videregående skole eller tilsvarende.
- *     </BodyLong>
+ * <BodyLong>
+ *   Hvis du ikke bor sammen med begge foreldrene dine,
+ *   kan du ha rett til barnebidrag fra en eller begge foreldre mens du
+ *   fullfører videregående skole eller tilsvarende.
+ * </BodyLong>
  * ```
  */
 export const BodyLong = forwardRef((_a, ref) => {

package/esm/typography/BodyShort.d.ts

@@ -3,12 +3,12 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface BodyShortProps extends TypoProps, React.HTMLAttributes<HTMLParagraphElement> {
     /**
-     * large: 20px, medium: 18px, small: 16px
+     * large: 20px, medium: 18px, small: 16px.
      * @default "medium"
      */
     size?: "large" | "medium" | "small";
     /**
-     * Paragraph text
+     * Paragraph text.
      */
     children: React.ReactNode;
 }
@@ -21,9 +21,9 @@ export interface BodyShortProps extends TypoProps, React.HTMLAttributes<HTMLPara
  *
  * @example
  * ```jsx
- *     <BodyShort>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </BodyShort>
+ * <BodyShort>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </BodyShort>
  * ```
  */
 export declare const BodyShort: OverridableComponent<BodyShortProps, HTMLParagraphElement>;

package/esm/typography/BodyShort.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <BodyShort>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </BodyShort>
+ * <BodyShort>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </BodyShort>
  * ```
  */
 export const BodyShort = forwardRef((_a, ref) => {

package/esm/typography/Detail.d.ts

@@ -7,11 +7,11 @@ export interface DetailProps extends TypoProps, React.HTMLAttributes<HTMLParagra
      */
     size?: "medium" | "small";
     /**
-     * Paragraph text
+     * Text.
      */
     children: React.ReactNode;
     /**
-     * All caps
+     * ALL CAPS.
      */
     uppercase?: boolean;
 }
@@ -24,9 +24,9 @@ export interface DetailProps extends TypoProps, React.HTMLAttributes<HTMLParagra
  *
  * @example
  * ```jsx
- *     <Detail>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </Detail>
+ * <Detail>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </Detail>
  * ```
  */
 export declare const Detail: OverridableComponent<DetailProps, HTMLParagraphElement>;

package/esm/typography/Detail.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <Detail>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </Detail>
+ * <Detail>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </Detail>
  * ```
  */
 export const Detail = forwardRef((_a, ref) => {

package/esm/typography/ErrorMessage.d.ts

@@ -3,12 +3,12 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface ErrorMessageProps extends Pick<TypoProps, "spacing">, React.HTMLAttributes<HTMLParagraphElement> {
     /**
-     * medium: 18px, small: 16px
+     * medium: 18px, small: 16px.
      * @default "medium"
      */
     size?: "medium" | "small";
     /**
-     * Error text
+     * Error text.
      */
     children: React.ReactNode;
 }
@@ -21,9 +21,9 @@ export interface ErrorMessageProps extends Pick<TypoProps, "spacing">, React.HTM
  *
  * @example
  * ```jsx
- *     <ErrorMessage>
- *       Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </ErrorMessage>
+ * <ErrorMessage>
+ *   Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </ErrorMessage>
  * ```
  */
 export declare const ErrorMessage: OverridableComponent<ErrorMessageProps, HTMLParagraphElement>;

package/esm/typography/ErrorMessage.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <ErrorMessage>
- *       Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </ErrorMessage>
+ * <ErrorMessage>
+ *   Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </ErrorMessage>
  * ```
  */
 export const ErrorMessage = forwardRef((_a, ref) => {

package/esm/typography/Heading.d.ts

@@ -3,16 +3,16 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface HeadingProps extends Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">, React.HTMLAttributes<HTMLHeadingElement> {
     /**
-     * Heading level
+     * Heading level.
      * @default "1"
      */
     level?: "1" | "2" | "3" | "4" | "5" | "6";
     /**
-     * Changes text-sizing
+     * xlarge: 40px, large: 32px, medium: 24px, small: 20px, xsmall: 18px.
      */
     size: "xlarge" | "large" | "medium" | "small" | "xsmall";
     /**
-     * Heading text
+     * Heading text.
      */
     children: React.ReactNode;
 }
@@ -25,9 +25,9 @@ export interface HeadingProps extends Pick<TypoProps, "spacing" | "visuallyHidde
  *
  * @example
  * ```jsx
- *     <Heading level="1" size="xlarge">
- *       Hva kan vi hjelpe deg med?
- *     </Heading>
+ * <Heading level="1" size="xlarge">
+ *   Hva kan vi hjelpe deg med?
+ * </Heading>
  * ```
  */
 export declare const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement>;

package/esm/typography/Heading.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <Heading level="1" size="xlarge">
- *       Hva kan vi hjelpe deg med?
- *     </Heading>
+ * <Heading level="1" size="xlarge">
+ *   Hva kan vi hjelpe deg med?
+ * </Heading>
  * ```
  */
 export const Heading = forwardRef((_a, ref) => {

package/esm/typography/Label.d.ts

@@ -3,12 +3,12 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface LabelProps extends Omit<TypoProps, "weight" | "align" | "truncate">, React.LabelHTMLAttributes<HTMLLabelElement> {
     /**
-     * medium: 18px, small: 16px
+     * medium: 18px, small: 16px.
      * @default "medium"
      */
     size?: "medium" | "small";
     /**
-     * Paragraph text
+     * Label text.
      */
     children: React.ReactNode;
 }
@@ -21,9 +21,9 @@ export interface LabelProps extends Omit<TypoProps, "weight" | "align" | "trunca
  *
  * @example
  * ```jsx
- *     <Label>
- *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </Label>
+ * <Label>
+ *   Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </Label>
  * ```
  */
 export declare const Label: OverridableComponent<LabelProps, HTMLLabelElement>;

package/esm/typography/Label.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <Label>
- *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </Label>
+ * <Label>
+ *   Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </Label>
  * ```
  */
 export const Label = forwardRef((_a, ref) => {

package/esm/typography/types.d.ts

@@ -12,15 +12,15 @@ export type TypoProps = {
      */
     align?: "start" | "center" | "end";
     /**
-     * Visually hide text. Text will still be accessible for screenreaders
+     * Visually hide text. Text will still be accessible for screenreaders.
      */
     visuallyHidden?: boolean;
     /**
-     * Adds spacing below text
+     * Adds spacing below text.
      */
     spacing?: boolean;
     /**
-     * Adjusts color
+     * Adjusts color.
      */
     textColor?: "default" | "subtle";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.6.0",
+  "version": "6.7.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -310,6 +310,16 @@
         "default": "./cjs/popover/index.js"
       }
     },
+    "./ProgressBar": {
+      "import": {
+        "types": "./esm/progress-bar/index.d.ts",
+        "default": "./esm/progress-bar/index.js"
+      },
+      "require": {
+        "types": "./cjs/progress-bar/index.d.ts",
+        "default": "./cjs/progress-bar/index.js"
+      }
+    },
     "./Provider": {
       "import": {
         "types": "./esm/provider/index.d.ts",
@@ -573,8 +583,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.6.0",
-    "@navikt/ds-tokens": "^6.6.0",
+    "@navikt/aksel-icons": "^6.7.0",
+    "@navikt/ds-tokens": "^6.7.0",
     "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;