@reshaped/headless 3.10.0-canary.12 → 3.10.0-canary.13

package/dist/components/Accordion/Accordion.types.d.ts

@@ -1,6 +1,45 @@
 import type { Attributes } from "../../types/global";
 import type { ClassName } from "@reshaped/utilities";
 import type React from "react";
+/**
+ * Render attributes and props
+ */
+export type TriggerRenderProps = {
+    active: boolean;
+    disabled: boolean;
+};
+export type TriggerAttributes = Attributes<"button"> & {
+    className?: ClassName;
+    "aria-expanded": boolean;
+    "aria-controls": string;
+    id: string;
+    "data-active": string;
+    disabled?: boolean;
+    onClick: () => void;
+};
+export type ContentRenderProps = {
+    active: boolean;
+};
+export type ContentAttributes = Attributes<"div"> & {
+    "data-active": string;
+    "aria-labelledby": string;
+    id: string;
+    role: "region";
+    hidden: boolean;
+};
+/**
+ * Context
+ */
+export type ContextProps = {
+    triggerId: string;
+    contentId: string;
+    active: boolean;
+    disabled: boolean;
+    onToggle?: (active: boolean) => void;
+};
+/**
+ * Props
+ */
 export type BaseProps = {
     /** Node for inserting the trigger and the content */
     children?: React.ReactNode;
@@ -14,22 +53,24 @@ export type BaseProps = {
     attributes?: Attributes<"div">;
 };
 export type TriggerProps = {
+    /** Additional classname for the root element */
+    className?: ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes<"button">;
     /** Node or render function for inserting the trigger */
-    children?: ((attributes: {
-        "aria-expanded": boolean;
-        "aria-controls": string;
-        id: string;
-        "data-active": string;
-        disabled?: boolean;
-        onClick: () => void;
-    }, props: {
-        active: boolean;
-        disabled: boolean;
-    }) => React.ReactNode) | React.ReactNode;
+    children?: React.ReactNode;
+    /** Render function for custom trigger rendering */
+    render?: (attributes: TriggerAttributes, props: TriggerRenderProps) => React.ReactNode;
 };
 export type ContentProps = {
+    /** Additional classname for the root element */
+    className?: ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes<"div">;
     /** Node for inserting the expandable content */
     children?: React.ReactNode;
+    /** Render function for custom content rendering */
+    render?: (attributes: ContentAttributes, props: ContentRenderProps) => React.ReactNode;
 };
 export type ControlledProps = BaseProps & {
     /** Control whether the accordion is expanded or collapsed, enables controlled mode */
@@ -44,10 +85,3 @@ export type UncontrolledProps = BaseProps & {
     defaultActive?: boolean;
 };
 export type Props = ControlledProps | UncontrolledProps;
-export type ContextProps = {
-    triggerId: string;
-    contentId: string;
-    active: boolean;
-    disabled: boolean;
-    onToggle?: (active: boolean) => void;
-};

package/dist/components/Accordion/AccordionContent.js

@@ -1,11 +1,25 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import AccordionContext from "./Accordion.context.js";
 const AccordionContent = (props) => {
-    const { children } = props;
+    const { children, render, className, attributes } = props;
     const { active, triggerId, contentId } = React.useContext(AccordionContext);
-    return (_jsx("div", { "data-active": active ? "true" : "false", "aria-labelledby": triggerId, id: contentId, role: "region", hidden: !active, children: children }));
+    const contentAttributes = {
+        ...attributes,
+        className: classNames(className),
+        "data-active": active ? "true" : "false",
+        "aria-labelledby": triggerId,
+        id: contentId,
+        role: "region",
+        hidden: !active,
+    };
+    const renderProps = { active };
+    if (render) {
+        return _jsx(_Fragment, { children: render(contentAttributes, renderProps) });
+    }
+    return _jsx("div", { ...contentAttributes, children: children });
 };
 AccordionContent.displayName = "Headless.Accordion.Content";
 export default AccordionContent;

package/dist/components/Accordion/AccordionTrigger.js

@@ -1,18 +1,20 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import AccordionContext from "./Accordion.context.js";
 const AccordionTrigger = (props) => {
-    const { children } = props;
+    const { children, render, className, attributes } = props;
     const { active, onToggle, triggerId, contentId, disabled } = React.useContext(AccordionContext);
     const handleClick = () => {
-        console.log("handleClick", active, disabled);
         if (disabled)
             return;
         onToggle?.(!active);
     };
-    const attributes = {
+    const triggerAttributes = {
+        ...attributes,
+        className: classNames(className),
         "aria-expanded": active,
         "aria-controls": contentId,
         id: triggerId,
@@ -20,10 +22,10 @@ const AccordionTrigger = (props) => {
         disabled: disabled ? true : undefined,
         onClick: handleClick,
     };
-    if (typeof children === "function") {
-        return _jsx(_Fragment, { children: children(attributes, { active, disabled }) });
-    }
-    return (_jsx(Actionable, { onClick: handleClick, attributes: attributes, children: children }));
+    const renderProps = { active, disabled };
+    if (render)
+        return render(triggerAttributes, renderProps);
+    return (_jsx(Actionable, { onClick: handleClick, attributes: triggerAttributes, render: render, children: children }));
 };
 AccordionTrigger.displayName = "Headless.Accordion.Trigger";
 export default AccordionTrigger;

package/dist/components/Accordion/index.d.ts

@@ -6,4 +6,4 @@ declare const AccordionRoot: typeof Accordion & {
     Content: typeof AccordionContent;
 };
 export default AccordionRoot;
-export type { Props as AccordionProps, TriggerProps as AccordionTriggerProps, ContentProps as AccordionContentProps, } from "./Accordion.types";
+export type { Props as AccordionProps, TriggerProps as AccordionTriggerProps, TriggerAttributes as AccordionTriggerAttributes, ContentProps as AccordionContentProps, ContentAttributes as AccordionContentAttributes, } from "./Accordion.types";

package/dist/components/Accordion/tests/Accordion.stories.js

@@ -8,5 +8,23 @@ export default {
 };
 export const base = {
     name: "base",
-    render: () => (_jsxs(Accordion, { children: [_jsx(Accordion.Trigger, { children: "Trigger" }), _jsx(Accordion.Content, { children: "Content" })] })),
+    render: () => (_jsxs(Accordion, { attributes: {
+            style: {
+                padding: 16,
+                border: "1px solid rgba(255, 255, 255, 0.08)",
+                borderRadius: 8,
+                display: "flex",
+                flexDirection: "column",
+                gap: 16,
+            },
+        }, children: [_jsx(Accordion.Trigger, { attributes: {
+                    style: {
+                        background: "none",
+                        border: "none",
+                        width: "100%",
+                        textAlign: "start",
+                        cursor: "pointer",
+                        padding: 0,
+                    },
+                }, children: "Trigger" }), _jsx(Accordion.Content, { attributes: { style: { padding: 0, transition: "height 0.3s ease-in-out" } }, children: "Content" }), "r"] })),
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@reshaped/headless",
   "description": "Headless components and utilities for React",
-  "version": "3.10.0-canary.12",
+  "version": "3.10.0-canary.13",
   "license": "MIT",
   "homepage": "https://reshaped.so",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@reshaped/utilities": "3.10.0-canary.12"
+    "@reshaped/utilities": "3.10.0-canary.13"
   },
   "scripts": {
     "clean": "rm -rf dist",