reshaped 1.0.1 → 2.2.0

package/cli/theming/utilities/css.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mediaTemplate = exports.variablesTemplate = exports.createMedia = exports.createVariable = exports.getVariableName = void 0;
+const string_1 = require("../../utilities/string");
+const getVariableName = (tokenName, tokenType) => {
+    const value = ["rs", tokenType && (0, string_1.camelToKebab)(tokenType), (0, string_1.camelToKebab)(tokenName)]
+        .filter(Boolean)
+        .join("-");
+    return `--${value}`;
+};
+exports.getVariableName = getVariableName;
+const createVariable = (token) => {
+    const variableName = (0, exports.getVariableName)(token.name, token.tokenType);
+    return `${variableName}: ${token.value};`;
+};
+exports.createVariable = createVariable;
+const createMedia = (token) => `@custom-media ${(0, exports.getVariableName)(token.name, token.tokenType)} ${token.value};`;
+exports.createMedia = createMedia;
+const variablesTemplate = (themeName, tokens) => {
+    const filteredTokens = {
+        root: [],
+        light: [],
+        dark: [],
+    };
+    tokens.forEach((token) => {
+        if (token.mode === "light")
+            filteredTokens.light.push(token);
+        if (token.mode === "dark")
+            filteredTokens.dark.push(token);
+        if (!token.mode)
+            filteredTokens.root.push(token);
+    });
+    let code = "";
+    Object.entries(filteredTokens).forEach(([type, tokens]) => {
+        const selector = type === "root"
+            ? `[data-rs-theme="${themeName}"][data-rs-color-mode="light"], [data-rs-theme="${themeName}"][data-rs-color-mode="dark"]`
+            : `[data-rs-theme="${themeName}"][data-rs-color-mode="${type}"]`;
+        code += `
+			${selector} {
+					${tokens.map((token) => (0, exports.createVariable)(token)).join("\n")}
+			}
+		`;
+    });
+    return code;
+};
+exports.variablesTemplate = variablesTemplate;
+const mediaTemplate = (tokens) => `
+	${tokens.map((token) => (0, exports.createMedia)(token)).join("\n")}
+`;
+exports.mediaTemplate = mediaTemplate;

package/cli/theming/utilities/mergeDeep.d.ts

@@ -0,0 +1,5 @@
+type Obj = {
+    [key: string]: unknown;
+};
+declare const mergeDeep: (target: Obj, ...sources: Obj[]) => Obj;
+export default mergeDeep;

package/cli/theming/utilities/mergeDeep.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const isObject = (item) => {
+    return item && typeof item === "object" && !Array.isArray(item);
+};
+const mergeDeep = (target, ...sources) => {
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach((key) => {
+            if (isObject(source[key]) && isObject(target[key])) {
+                if (!target[key])
+                    Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        });
+    }
+    return mergeDeep(target, ...sources);
+};
+exports.default = mergeDeep;

package/cli/theming/utilities/mergeDefinitions.d.ts

@@ -0,0 +1,5 @@
+type Obj = {
+    [key: string]: unknown;
+};
+declare const mergeDefinitions: (originalDefinition: Obj, newDefinition: Obj, currentLevel?: number) => Obj;
+export default mergeDefinitions;

package/cli/theming/utilities/mergeDefinitions.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Level 1 is token types, level 2 is token values
+// { color: { foreground: {} } }
+// We don't merge token values
+const MAX_LEVEL = 2;
+const mergeDefinitions = (originalDefinition, newDefinition, currentLevel = 1) => {
+    // Overwrite the token value
+    if (currentLevel > MAX_LEVEL)
+        return newDefinition;
+    const mergedDefinition = Object.assign({}, originalDefinition);
+    Object.keys(newDefinition).forEach((key) => {
+        mergedDefinition[key] = mergeDefinitions(mergedDefinition[key], newDefinition[key], currentLevel + 1);
+    });
+    return mergedDefinition;
+};
+exports.default = mergeDefinitions;

package/cli/theming/utilities/resolveTokenReference.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "../tokens/types";
+declare const resolveTokenReference: <ReferencedToken>(theme: T.ThemeDefinition, tokenType: T.TokenType, ref: string) => ReferencedToken;
+export default resolveTokenReference;

package/cli/theming/utilities/resolveTokenReference.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const resolveTokenReference = (theme, tokenType, ref) => {
+    const tokenGroup = theme[tokenType];
+    let referencedToken = null;
+    Object.keys(tokenGroup).forEach((tokenName) => {
+        if (referencedToken)
+            return;
+        if (tokenName === ref)
+            referencedToken = tokenGroup[tokenName];
+    });
+    if (!referencedToken)
+        throw new Error(`Referenced token not found for: ${ref}`);
+    return referencedToken;
+};
+exports.default = resolveTokenReference;

package/cli/utilities/color.d.ts

@@ -0,0 +1,15 @@
+import { Name } from "../theming/tokens/color/color.types";
+export declare const bgWithDynamicForeground: Name[];
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare const hexToRgbString: (hex: string) => string;
+export declare const getOnColor: (args: {
+    bgHexColor: string;
+    mode: "light" | "dark";
+    lightHexColor?: string;
+    darkHexColor?: string;
+}) => string;

package/cli/utilities/color.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOnColor = exports.hexToRgbString = exports.hexToRgb = exports.bgWithDynamicForeground = void 0;
+exports.bgWithDynamicForeground = [
+    "backgroundNeutral",
+    "backgroundPrimary",
+    "backgroundCritical",
+    "backgroundPositive",
+];
+const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
+    if (!result)
+        throw new Error(`Invalid hex value: ${hex}`);
+    const alpha = result[4] ? Number((parseInt(result[4], 16) / 255).toFixed(2)) : 1;
+    return {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+        a: alpha,
+    };
+};
+exports.hexToRgb = hexToRgb;
+const hexToRgbString = (hex) => {
+    const rgb = (0, exports.hexToRgb)(hex);
+    return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
+};
+exports.hexToRgbString = hexToRgbString;
+const getOnColor = (args) => {
+    const { bgHexColor, mode, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
+    const bgColor = (0, exports.hexToRgb)(bgHexColor);
+    const baseColor = mode === "light" ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 };
+    const { r, g, b } = {
+        r: (1 - bgColor.a) * baseColor.r + bgColor.a * bgColor.r,
+        g: (1 - bgColor.a) * baseColor.g + bgColor.a * bgColor.g,
+        b: (1 - bgColor.a) * baseColor.b + bgColor.a * bgColor.b,
+    };
+    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? darkHexColor : lightHexColor;
+};
+exports.getOnColor = getOnColor;

package/cli/utilities/string.d.ts

@@ -0,0 +1,2 @@
+export declare const camelToKebab: (s: string) => string;
+export declare const capitalize: (s: string) => string;

package/cli/utilities/string.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = exports.camelToKebab = void 0;
+const camelToKebab = (s) => {
+    return s.replace(/([a-z][a-z])([A-Z]|[0-9])/g, "$1-$2").toLowerCase();
+};
+exports.camelToKebab = camelToKebab;
+const capitalize = (s) => {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+};
+exports.capitalize = capitalize;

package/cli/utilities/tests/color.test.d.ts

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

package/cli/utilities/tests/color.test.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const color_1 = require("../color");
+describe("cli/utilities/color", () => {
+    test("returns white for black background", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light" })).toBe("#ffffff");
+    });
+    test("returns white for dark colored background", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light" })).toBe("#ffffff");
+    });
+    test("returns black for white background", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light" })).toBe("#000000");
+    });
+    test("returns white for light colored background", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light" })).toBe("#000000");
+    });
+    /**
+     * 8-digit hex
+     */
+    test("returns black for dark background with alpha: 0", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#00000000", mode: "light" })).toBe("#000000");
+    });
+    test("returns black for light background with alpha: 0", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff00", mode: "light" })).toBe("#000000");
+    });
+    test("returns black for dark background with alpha: 25%", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#00000040", mode: "light" })).toBe("#000000");
+    });
+    test("returns white for dark background with alpha: 30%", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#0000004D", mode: "light" })).toBe("#ffffff");
+    });
+    /**
+     * Dark mode
+     */
+    test("returns black for white background in dark mode", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "dark" })).toBe("#000000");
+    });
+    test("returns white for dark background with alpha: 25% in dark mode", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#00000040", mode: "dark" })).toBe("#ffffff");
+    });
+    test("returns white for dark background with alpha: 0 in dark mode", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#00000000", mode: "dark" })).toBe("#ffffff");
+    });
+    /**
+     * Custom resolved color
+     */
+    test("returns #999 for white background in dark mode", () => {
+        expect((0, color_1.getOnColor)({
+            bgHexColor: "#ffffff",
+            mode: "dark",
+            lightHexColor: "#eeeeee",
+            darkHexColor: "#999999",
+        })).toBe("#999999");
+    });
+    test("returns #eee for black background in dark mode", () => {
+        expect((0, color_1.getOnColor)({
+            bgHexColor: "#000000",
+            mode: "dark",
+            lightHexColor: "#eeeeee",
+            darkHexColor: "#999999",
+        })).toBe("#eeeeee");
+    });
+});

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

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

package/components/Accordion/Accordion.context.js

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

package/components/Accordion/Accordion.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const Accordion: {
+    (props: T.Props): React.JSX.Element;
+    Trigger: (props: T.TriggerProps) => React.JSX.Element;
+    Content: (props: T.ContentProps) => React.JSX.Element;
+};
+export default Accordion;

package/components/Accordion/Accordion.js

@@ -0,0 +1,14 @@
+import React from "react";
+import AccordionControlled from "./AccordionControlled.js";
+import AccordionUncontrolled from "./AccordionUncontrolled.js";
+import AccordionTrigger from "./AccordionTrigger.js";
+import AccordionContent from "./AccordionContent.js";
+const Accordion = (props) => {
+    const { active } = props;
+    if (active !== undefined)
+        return React.createElement(AccordionControlled, Object.assign({}, props));
+    return React.createElement(AccordionUncontrolled, Object.assign({}, props));
+};
+Accordion.Trigger = AccordionTrigger;
+Accordion.Content = AccordionContent;
+export default Accordion;

package/components/Accordion/Accordion.module.css

@@ -0,0 +1 @@
+.content{height:0;overflow:hidden}.content--animated{transition:height var(--rs-duration-slow) var(--rs-easing-standard)}.icon{transition:transform var(--rs-duration-fast) var(--rs-easing-standard)}.icon--active{transform:rotate(180deg)}

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

@@ -0,0 +1,39 @@
+import React from "react";
+import type { IconProps } from "../Icon";
+import * as G from "../../types/global";
+export type BaseProps = {
+    iconSize?: IconProps["size"];
+    iconPosition?: "start" | "end";
+    children?: React.ReactNode;
+    onToggle?: (active: boolean) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export type TriggerProps = {
+    children?: ((attributes: {
+        "aria-expanded": boolean;
+        "aria-controls": string;
+        id: string;
+        onClick: () => void;
+    }, props: {
+        active: boolean;
+    }) => React.ReactNode) | React.ReactNode;
+};
+export type ContentProps = {
+    children?: React.ReactNode;
+};
+export type ControlledProps = BaseProps & {
+    active: boolean;
+    defaultActive?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    active?: never;
+    defaultActive?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type ContextProps = Pick<BaseProps, "iconSize" | "iconPosition"> & {
+    triggerId: string;
+    contentId: string;
+    active: boolean;
+    onToggle?: (active: boolean) => void;
+};

package/components/Accordion/Accordion.types.js

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

package/components/Accordion/AccordionContent.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const AccordionContent: (props: T.ContentProps) => React.JSX.Element;
+export default AccordionContent;

package/components/Accordion/AccordionContent.js

@@ -0,0 +1,43 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import AccordionContext from "./Accordion.context.js";
+import s from "./Accordion.module.css";
+const AccordionContent = (props) => {
+    const { children } = props;
+    const { active, triggerId, contentId } = React.useContext(AccordionContext);
+    const contentRef = React.useRef(null);
+    const mountedRef = React.useRef(false);
+    const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
+    const contentClassNames = classNames(s.content, mountedRef.current && animatedHeight !== "auto" && s["content--animated"], active && s["content--active"]);
+    const handleTransitionEnd = (e) => {
+        if (e.propertyName !== "height")
+            return;
+        setAnimatedHeight(active ? "auto" : null);
+    };
+    // Avoid animations happening if component is active by default
+    // onNextFrame lets us wait for the component to render first
+    React.useEffect(() => {
+        onNextFrame(() => {
+            mountedRef.current = true;
+        });
+    }, []);
+    React.useEffect(() => {
+        const contentEl = contentRef.current;
+        if (!contentEl || !mountedRef.current)
+            return;
+        let targetHeight = 0;
+        if (active) {
+            contentEl.style.height = "auto";
+            targetHeight = contentEl.clientHeight;
+            contentEl.style.height = "0";
+        }
+        if (!active) {
+            contentEl.style.height = `${contentEl.clientHeight}px`;
+        }
+        setAnimatedHeight(targetHeight);
+    }, [active]);
+    return (React.createElement("div", { className: contentClassNames, ref: contentRef, style: animatedHeight !== null ? { height: animatedHeight } : undefined, onTransitionEnd: handleTransitionEnd, "aria-labelledby": triggerId, id: contentId, role: "region", hidden: !active && animatedHeight === null }, children));
+};
+export default AccordionContent;

package/components/Accordion/AccordionControlled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const AccordionControlled: (props: T.ControlledProps) => React.JSX.Element;
+export default AccordionControlled;

package/components/Accordion/AccordionControlled.js

@@ -0,0 +1,23 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useElementId from "../../hooks/useElementId.js";
+import AccordionContext from "./Accordion.context.js";
+const AccordionControlled = (props) => {
+    const { children, onToggle, active, iconPosition, iconSize, className, attributes } = props;
+    const rootClassNames = classNames(className);
+    const id = useElementId();
+    const value = React.useMemo(() => ({
+        triggerId: `${id}-trigger`,
+        contentId: `${id}-content`,
+        active,
+        onToggle,
+        iconPosition,
+        iconSize,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [active]);
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }),
+        React.createElement(AccordionContext.Provider, { value: value }, children)));
+};
+export default AccordionControlled;

package/components/Accordion/AccordionTrigger.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const AccordionTrigger: (props: T.TriggerProps) => React.JSX.Element;
+export default AccordionTrigger;

package/components/Accordion/AccordionTrigger.js

@@ -0,0 +1,26 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Actionable from "../Actionable/index.js";
+import View from "../View/index.js";
+import Icon from "../Icon/index.js";
+import IconChevronDown from "../../icons/ChevronDown.js";
+import AccordionContext from "./Accordion.context.js";
+import s from "./Accordion.module.css";
+const AccordionTrigger = (props) => {
+    const { children } = props;
+    const { active, onToggle, triggerId, contentId, iconPosition = "end", iconSize, } = React.useContext(AccordionContext);
+    const iconClassNames = classNames(s.icon, active && s["icon--active"]);
+    const handleClick = () => {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!active);
+    };
+    const attributes = { "aria-expanded": active, "aria-controls": contentId, id: triggerId };
+    if (typeof children === "function") {
+        return React.createElement(React.Fragment, null, children(Object.assign(Object.assign({}, attributes), { onClick: handleClick }), { active }));
+    }
+    return (React.createElement(Actionable, { onClick: handleClick, fullWidth: true, attributes: attributes },
+        React.createElement(View, { gap: 2, direction: iconPosition === "start" ? "row-reverse" : "row", align: "center" },
+            React.createElement(View.Item, { grow: true }, children),
+            React.createElement(Icon, { size: iconSize || 4, svg: IconChevronDown, className: iconClassNames }))));
+};
+export default AccordionTrigger;

package/components/Accordion/AccordionUncontrolled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const AccordionUncontrolled: (props: T.UncontrolledProps) => React.JSX.Element;
+export default AccordionUncontrolled;

package/components/Accordion/AccordionUncontrolled.js

@@ -0,0 +1,24 @@
+"use client";
+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 from "react";
+import AccordionControlled from "./AccordionControlled.js";
+const AccordionUncontrolled = (props) => {
+    const { defaultActive, onToggle } = props, controlledProps = __rest(props, ["defaultActive", "onToggle"]);
+    const [active, setActive] = React.useState(defaultActive || false);
+    const handleToggle = (active) => {
+        setActive(active);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(active);
+    };
+    return React.createElement(AccordionControlled, Object.assign({}, controlledProps, { onToggle: handleToggle, active: active }));
+};
+export default AccordionUncontrolled;

package/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Accordion";
+export type { Props as AccordionProps } from "./Accordion.types";

package/components/Accordion/index.js

@@ -0,0 +1 @@
+export { default } from "./Accordion.js";

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

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const behavior: () => React.JSX.Element;
+export declare const icon: () => React.JSX.Element;
+export declare const renderProps: () => React.JSX.Element;
+export declare const composition: () => React.JSX.Element;

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

@@ -0,0 +1,119 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Accordion from "../index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+export default { title: "Utilities/Accordion" };
+export const behavior = () => (<Example>
+		<Example.Item title="uncontrolled">
+			<Accordion>
+				<Accordion.Trigger>Uncontrolled accordion</Accordion.Trigger>
+				<Accordion.Content>
+					<View paddingTop={2}>
+						<Placeholder />
+						<button>Heeloo</button>
+					</View>
+				</Accordion.Content>
+			</Accordion>
+		</Example.Item>
+		<Example.Item title="active, uncontrolled">
+			<Accordion defaultActive>
+				<Accordion.Trigger>Action uncontrolled</Accordion.Trigger>
+				<Accordion.Content>
+					<View paddingTop={2}>
+						<Placeholder />
+					</View>
+				</Accordion.Content>
+			</Accordion>
+		</Example.Item>
+		<Example.Item title="active, controlled">
+			<Accordion active>
+				<Accordion.Trigger>Active controlled</Accordion.Trigger>
+				<Accordion.Content>
+					<View paddingTop={2}>
+						<Placeholder />
+					</View>
+				</Accordion.Content>
+			</Accordion>
+		</Example.Item>
+	</Example>);
+export const icon = () => (<Example>
+		<Example.Item title="iconSize">
+			<Accordion iconSize={6}>
+				<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
+				<Accordion.Content>
+					<View paddingTop={2}>
+						<Placeholder />
+					</View>
+				</Accordion.Content>
+			</Accordion>
+		</Example.Item>
+		<Example.Item title="iconPosition">
+			<Accordion iconPosition="start">
+				<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
+				<Accordion.Content>
+					<View paddingTop={2}>
+						<Placeholder />
+					</View>
+				</Accordion.Content>
+			</Accordion>
+		</Example.Item>
+	</Example>);
+export const renderProps = () => (<Example>
+		<Example.Item title="button controlling accordion content">
+			<Accordion>
+				<Accordion.Trigger>
+					{(attributes, { active }) => (<Button attributes={attributes} highlighted={active}>
+							Toggle2
+						</Button>)}
+				</Accordion.Trigger>
+				<Accordion.Content>
+					<View paddingTop={2}>
+						<Placeholder />
+					</View>
+				</Accordion.Content>
+			</Accordion>
+		</Example.Item>
+	</Example>);
+const DemoMultiple = () => {
+    const [activeValue, setActiveValue] = React.useState(null);
+    return (<View gap={2}>
+			{[1, 2, 3].map((i) => (<View key={i} backgroundColor={activeValue === i ? "elevation-base" : undefined} animated borderRadius="medium" borderColor={activeValue === i ? "neutral-faded" : "transparent"} shadow={activeValue === i ? "raised" : undefined} padding={2}>
+					<Accordion active={activeValue === i} onToggle={(active) => setActiveValue(active ? i : null)}>
+						<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
+						<Accordion.Content>
+							<View paddingTop={2}>
+								<Placeholder />
+							</View>
+						</Accordion.Content>
+					</Accordion>
+				</View>))}
+		</View>);
+};
+export const composition = () => (<Example>
+		<Example.Item title="custom content size">
+			<Accordion>
+				<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
+				<Accordion.Content>
+					<View paddingTop={2}>
+						<Placeholder h={200}/>
+					</View>
+				</Accordion.Content>
+			</Accordion>
+		</Example.Item>
+		<Example.Item title="inside View">
+			<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+				<Accordion>
+					<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
+					<Accordion.Content>
+						<View paddingTop={2}>
+							<Placeholder />
+						</View>
+					</Accordion.Content>
+				</Accordion>
+			</View>
+		</Example.Item>
+		<Example.Item title="multiple items, depending on state">
+			<DemoMultiple />
+		</Example.Item>
+	</Example>);

package/components/ActionBar/ActionBar.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./ActionBar.types";
+declare const ActionBar: (props: T.Props) => React.JSX.Element;
+export default ActionBar;