@reshaped/headless 3.11.0-canary.3 → 3.11.0-canary.5

package/package.json

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

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

@@ -1,4 +0,0 @@
-import React from "react";
-import * as T from "./Accordion.types";
-declare const AccordionContext: React.Context<T.ContextProps>;
-export default AccordionContext;

package/dist/components/Accordion/Accordion.context.js

@@ -1,10 +0,0 @@
-"use client";
-import React from "react";
-const AccordionContext = React.createContext({
-    active: false,
-    disabled: false,
-    onToggle: () => { },
-    triggerId: "",
-    contentId: "",
-});
-export default AccordionContext;

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

@@ -1,4 +0,0 @@
-import React from "react";
-import * as T from "./Accordion.types";
-declare const Accordion: React.FC<T.Props>;
-export default Accordion;

package/dist/components/Accordion/Accordion.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import AccordionControlled from "./AccordionControlled.js";
-import AccordionUncontrolled from "./AccordionUncontrolled.js";
-const Accordion = (props) => {
-    const { active } = props;
-    if (active !== undefined)
-        return _jsx(AccordionControlled, { ...props });
-    return _jsx(AccordionUncontrolled, { ...props });
-};
-Accordion.displayName = "Headless.Accordion";
-export default Accordion;

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

@@ -1,87 +0,0 @@
-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;
-    /** Callback when the accordion is expanded or collapsed */
-    onToggle?: (active: boolean) => void;
-    /** Disable the accordion from user interaction */
-    disabled?: boolean;
-    /** Additional classname for the root element */
-    className?: ClassName;
-    /** Additional attributes for the root element */
-    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?: 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 */
-    active: boolean;
-    /** Control whether the accordion is expanded or collapsed by default, enables uncontrolled mode */
-    defaultActive?: never;
-};
-export type UncontrolledProps = BaseProps & {
-    /** Control whether the accordion is expanded or collapsed, enables controlled mode */
-    active?: never;
-    /** Control whether the accordion is expanded or collapsed by default, enables uncontrolled mode */
-    defaultActive?: boolean;
-};
-export type Props = ControlledProps | UncontrolledProps;

package/dist/components/Accordion/Accordion.types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,4 +0,0 @@
-import React from "react";
-import type * as T from "./Accordion.types";
-declare const AccordionContent: React.FC<T.ContentProps>;
-export default AccordionContent;

package/dist/components/Accordion/AccordionContent.js

@@ -1,25 +0,0 @@
-"use client";
-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, render, className, attributes } = props;
-    const { active, triggerId, contentId } = React.useContext(AccordionContext);
-    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/AccordionControlled.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import * as T from "./Accordion.types";
-declare const AccordionControlled: React.FC<T.ControlledProps>;
-export default AccordionControlled;

package/dist/components/Accordion/AccordionControlled.js

@@ -1,21 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
-import React from "react";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import AccordionContext from "./Accordion.context.js";
-const AccordionControlled = (props) => {
-    const { children, onToggle, active, disabled = false, className, attributes } = props;
-    const id = React.useId();
-    const onToggleRef = useHandlerRef(onToggle);
-    const value = React.useMemo(() => ({
-        triggerId: `${id}-trigger`,
-        contentId: `${id}-content`,
-        active,
-        disabled,
-        onToggle: onToggleRef.current,
-    }), [active, disabled, id, onToggleRef]);
-    return (_jsx("div", { ...attributes, className: classNames(className), children: _jsx(AccordionContext.Provider, { value: value, children: children }) }));
-};
-AccordionControlled.displayName = "Headless.AccordionControlled";
-export default AccordionControlled;

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

@@ -1,4 +0,0 @@
-import React from "react";
-import * as T from "./Accordion.types";
-declare const AccordionTrigger: React.FC<T.TriggerProps>;
-export default AccordionTrigger;

package/dist/components/Accordion/AccordionTrigger.js

@@ -1,31 +0,0 @@
-"use client";
-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, render, className, attributes } = props;
-    const { active, onToggle, triggerId, contentId, disabled } = React.useContext(AccordionContext);
-    const handleClick = () => {
-        if (disabled)
-            return;
-        onToggle?.(!active);
-    };
-    const triggerAttributes = {
-        ...attributes,
-        className: classNames(className),
-        "aria-expanded": active,
-        "aria-controls": contentId,
-        id: triggerId,
-        "data-active": active ? "true" : "false",
-        disabled: disabled ? true : undefined,
-        onClick: handleClick,
-    };
-    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/AccordionUncontrolled.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import * as T from "./Accordion.types";
-declare const AccordionUncontrolled: React.FC<T.UncontrolledProps>;
-export default AccordionUncontrolled;

package/dist/components/Accordion/AccordionUncontrolled.js

@@ -1,15 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import AccordionControlled from "./AccordionControlled.js";
-const AccordionUncontrolled = (props) => {
-    const { defaultActive, onToggle, ...controlledProps } = props;
-    const [active, setActive] = React.useState(defaultActive || false);
-    const handleToggle = (active) => {
-        setActive(active);
-        onToggle?.(active);
-    };
-    return _jsx(AccordionControlled, { ...controlledProps, onToggle: handleToggle, active: active });
-};
-AccordionUncontrolled.displayName = "Headless.AccordionUncontrolled";
-export default AccordionUncontrolled;

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

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

package/dist/components/Accordion/index.js

@@ -1,7 +0,0 @@
-import Accordion from "./Accordion.js";
-import AccordionContent from "./AccordionContent.js";
-import AccordionTrigger from "./AccordionTrigger.js";
-const AccordionRoot = Accordion;
-AccordionRoot.Trigger = AccordionTrigger;
-AccordionRoot.Content = AccordionContent;
-export default AccordionRoot;

package/dist/components/Accordion/tests/Accordion.stories.d.ts

@@ -1,11 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj;

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

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Accordion } from "../../../index.js";
-export default {
-    title: "Headless/Components/Accordion",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const base = {
-    name: "base",
-    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"] })),
-};