@cratis/components 1.0.5 → 1.1.0

package/dist/esm/Toolbar/Toolbar.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Toolbar } from './Toolbar';
+import { ToolbarButton } from './ToolbarButton';
+import { ToolbarContext } from './ToolbarContext';
+import { ToolbarFanOutItem } from './ToolbarFanOutItem';
+import { ToolbarSection } from './ToolbarSection';
+const meta = {
+    title: 'Components/Toolbar',
+    component: Toolbar,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select' }), _jsx(ToolbarButton, { icon: 'pi pi-clone', tooltip: 'Layers' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', tooltip: 'Shapes' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-file', tooltip: 'Sticky note' })] })),
+};
+export const MultipleGroups = {
+    render: () => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select' }), _jsx(ToolbarButton, { icon: 'pi pi-clone', tooltip: 'Layers' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', tooltip: 'Shapes' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-file', tooltip: 'Sticky note' })] }), _jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-undo', tooltip: 'Undo' }), _jsx(ToolbarButton, { icon: 'pi pi-refresh', tooltip: 'Redo' })] })] })),
+};
+export const WithActiveButton = {
+    render: () => {
+        const ActiveDemo = () => {
+            const [active, setActive] = useState('select');
+            return (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select', active: active === 'select', onClick: () => setActive('select') }), _jsx(ToolbarButton, { icon: 'pi pi-clone', tooltip: 'Layers', active: active === 'layers', onClick: () => setActive('layers') }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle', active: active === 'rectangle', onClick: () => setActive('rectangle') }), _jsx(ToolbarButton, { icon: 'pi pi-file', tooltip: 'Sticky note', active: active === 'sticky', onClick: () => setActive('sticky') })] }));
+        };
+        return _jsx(ActiveDemo, {});
+    },
+};
+export const WithContexts = {
+    render: () => {
+        const WithContextsDemo = () => {
+            const [currentContext, setCurrentContext] = useState('drawing');
+            return (_jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select' }), _jsxs(ToolbarSection, { activeContext: currentContext, children: [_jsxs(ToolbarContext, { name: 'drawing', children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', tooltip: 'Draw' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', tooltip: 'Circle' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', tooltip: 'Line' })] }), _jsxs(ToolbarContext, { name: 'text', children: [_jsx(ToolbarButton, { icon: 'pi pi-align-center', tooltip: 'Align Center' }), _jsx(ToolbarButton, { icon: 'pi pi-align-left', tooltip: 'Align Left' })] })] }), _jsx(ToolbarButton, { icon: 'pi pi-undo', tooltip: 'Undo' })] }), _jsxs("div", { className: 'flex gap-2', children: [_jsx("button", { type: 'button', onClick: () => setCurrentContext('drawing'), className: `px-3 py-1 rounded text-sm transition-colors ${currentContext === 'drawing'
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: "Drawing tools" }), _jsx("button", { type: 'button', onClick: () => setCurrentContext('text'), className: `px-3 py-1 rounded text-sm transition-colors ${currentContext === 'text'
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: "Text tools" })] })] }));
+        };
+        return _jsx(WithContextsDemo, {});
+    },
+};
+export const WithFanOut = {
+    render: () => {
+        const WithFanOutDemo = () => {
+            const [activeTool, setActiveTool] = useState('select');
+            return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', tooltip: 'Select', active: activeTool === 'select', onClick: () => setActiveTool('select') }), _jsxs(ToolbarFanOutItem, { icon: 'pi pi-th-large', tooltip: 'Shapes', children: [_jsx(ToolbarButton, { icon: 'pi pi-th-large', tooltip: 'Shapes', onClick: () => setActiveTool('shapes') }), _jsx(ToolbarButton, { icon: 'pi pi-exclamation-circle', tooltip: 'Info', onClick: () => setActiveTool('info') }), _jsx(ToolbarButton, { icon: 'pi pi-eye', tooltip: 'Preview', onClick: () => setActiveTool('preview') }), _jsx(ToolbarButton, { icon: 'pi pi-cog', tooltip: 'Settings', onClick: () => setActiveTool('settings') }), _jsx(ToolbarButton, { icon: 'pi pi-external-link', tooltip: 'Open', onClick: () => setActiveTool('open') })] }), _jsx(ToolbarButton, { icon: 'pi pi-stop', tooltip: 'Rectangle', active: activeTool === 'rectangle', onClick: () => setActiveTool('rectangle') }), _jsx(ToolbarButton, { icon: 'pi pi-file', tooltip: 'Sticky note', active: activeTool === 'sticky', onClick: () => setActiveTool('sticky') })] }), _jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-undo', tooltip: 'Undo' }), _jsx(ToolbarButton, { icon: 'pi pi-refresh', tooltip: 'Redo' })] })] }));
+        };
+        return _jsx(WithFanOutDemo, {});
+    },
+};
+//# sourceMappingURL=Toolbar.stories.js.map

package/dist/esm/Toolbar/Toolbar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.stories.js","sourceRoot":"","sources":["../../../Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Toolbar/ToolbarButton.d.ts

@@ -0,0 +1,10 @@
+import type { TooltipPosition } from '../Common/Tooltip';
+export interface ToolbarButtonProps {
+    icon: string;
+    tooltip: string;
+    active?: boolean;
+    onClick?: () => void;
+    tooltipPosition?: TooltipPosition;
+}
+export declare const ToolbarButton: ({ icon, tooltip, active, onClick, tooltipPosition }: ToolbarButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarButton.d.ts.map

package/dist/esm/Toolbar/ToolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGzD,MAAM,WAAW,kBAAkB;IAE/B,IAAI,EAAE,MAAM,CAAC;IAGb,OAAO,EAAE,MAAM,CAAC;IAGhB,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAGrB,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC;AAMD,eAAO,MAAM,aAAa,GAAI,qDAAuE,kBAAkB,4CAetH,CAAC"}

package/dist/esm/Toolbar/ToolbarButton.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from '../Common/Tooltip.js';
+
+const ToolbarButton = ({ icon, tooltip, active = false, onClick, tooltipPosition = 'right' }) => {
+    const activeClass = active ? 'toolbar-button--active' : '';
+    return (jsx(Tooltip, { content: tooltip, position: tooltipPosition, children: jsx("button", { type: 'button', "aria-label": tooltip, onClick: onClick, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsx("i", { className: `${icon} text-lg` }) }) }));
+};
+
+export { ToolbarButton };
+//# sourceMappingURL=ToolbarButton.js.map

package/dist/esm/Toolbar/ToolbarButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.js","sources":["../../../Toolbar/ToolbarButton.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Tooltip } from '../Common/Tooltip';\nimport type { TooltipPosition } from '../Common/Tooltip';\n\n/** Props for the {@link ToolbarButton} component. */\nexport interface ToolbarButtonProps {\n    /** The PrimeIcons CSS class to use as the icon (e.g. 'pi pi-home'). */\n    icon: string;\n\n    /** Tooltip text shown when the user hovers over the button. */\n    tooltip: string;\n\n    /** Whether the button is currently in the active/selected state. */\n    active?: boolean;\n\n    /** Callback invoked when the button is clicked. */\n    onClick?: () => void;\n\n    /** Position of the tooltip relative to the button (default: 'right'). */\n    tooltipPosition?: TooltipPosition;\n}\n\n/**\n * An icon button with a tooltip, intended to be placed inside a {@link Toolbar}.\n * Uses the shared {@link Tooltip} component for consistent hover labels.\n */\nexport const ToolbarButton = ({ icon, tooltip, active = false, onClick, tooltipPosition = 'right' }: ToolbarButtonProps) => {\n    const activeClass = active ? 'toolbar-button--active' : '';\n\n    return (\n        <Tooltip content={tooltip} position={tooltipPosition}>\n            <button\n                type='button'\n                aria-label={tooltip}\n                onClick={onClick}\n                className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}\n            >\n                <i className={`${icon} text-lg`} />\n            </button>\n        </Tooltip>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;MA4Ba,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,EAAsB,KAAI;IACvH,MAAM,WAAW,GAAG,MAAM,GAAG,wBAAwB,GAAG,EAAE;AAE1D,IAAA,QACIA,GAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAA,QAAA,EAChDA,GAAA,CAAA,QAAA,EAAA,EACI,IAAI,EAAC,QAAQ,gBACD,OAAO,EACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAA,oFAAA,EAAuF,WAAW,EAAE,EAAA,QAAA,EAE/GA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,GAAG,IAAI,CAAA,QAAA,CAAU,GAAI,EAAA,CAC9B,EAAA,CACH;AAElB;;;;"}

package/dist/esm/Toolbar/ToolbarContext.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+export interface ToolbarContextProps {
+    name: string;
+    children: ReactNode;
+}
+export declare const ToolbarContext: FC<ToolbarContextProps>;
+//# sourceMappingURL=ToolbarContext.d.ts.map

package/dist/esm/Toolbar/ToolbarContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarContext.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,WAAW,mBAAmB;IAEhC,IAAI,EAAE,MAAM,CAAC;IAEb,QAAQ,EAAE,SAAS,CAAC;CACvB;AAQD,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAAc,CAAC"}

package/dist/esm/Toolbar/ToolbarContext.js

@@ -0,0 +1,4 @@
+const ToolbarContext = () => null;
+
+export { ToolbarContext };
+//# sourceMappingURL=ToolbarContext.js.map

package/dist/esm/Toolbar/ToolbarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarContext.js","sources":["../../../Toolbar/ToolbarContext.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { FC, ReactNode } from 'react';\n\n/** Props for the {@link ToolbarContext} component. */\nexport interface ToolbarContextProps {\n    /** Unique name identifying this context within a {@link ToolbarSection}. */\n    name: string;\n    /** The toolbar items to render when this context is active. */\n    children: ReactNode;\n}\n\n/**\n * Defines a named context (a set of toolbar items) within a {@link ToolbarSection}.\n * The section renders only the active context at a time and animates between them.\n *\n * This is a data-only component; its rendering is fully managed by {@link ToolbarSection}.\n */\nexport const ToolbarContext: FC<ToolbarContextProps> = () => null;\n"],"names":[],"mappings":"MAmBa,cAAc,GAA4B,MAAM;;;;"}

package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import type { TooltipPosition } from '../Common/Tooltip';
+export interface ToolbarFanOutItemProps {
+    icon: string;
+    tooltip: string;
+    tooltipPosition?: TooltipPosition;
+    fanOutDirection?: 'right' | 'left';
+    children: ReactNode;
+}
+export declare const ToolbarFanOutItem: ({ icon, tooltip, tooltipPosition, fanOutDirection, children, }: ToolbarFanOutItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarFanOutItem.d.ts.map

package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFanOutItem.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGzD,MAAM,WAAW,sBAAsB;IAEnC,IAAI,EAAE,MAAM,CAAC;IAGb,OAAO,EAAE,MAAM,CAAC;IAGhB,eAAe,CAAC,EAAE,eAAe,CAAC;IAGlC,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAGnC,QAAQ,EAAE,SAAS,CAAC;CACvB;AAYD,eAAO,MAAM,iBAAiB,GAAI,gEAM/B,sBAAsB,4CA8CxB,CAAC"}

package/dist/esm/Toolbar/ToolbarFanOutItem.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { Tooltip } from '../Common/Tooltip.js';
+
+const ToolbarFanOutItem = ({ icon, tooltip, tooltipPosition = 'right', fanOutDirection = 'right', children, }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const containerRef = useRef(null);
+    const handleToggle = () => {
+        setIsExpanded(!isExpanded);
+    };
+    useEffect(() => {
+        if (!isExpanded)
+            return;
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsExpanded(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isExpanded]);
+    const activeClass = isExpanded ? 'toolbar-button--active' : '';
+    const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';
+    const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;
+    return (jsxs("div", { className: 'toolbar-fanout-item', ref: containerRef, children: [jsx(Tooltip, { content: tooltip, position: tooltipPosition, children: jsx("button", { type: 'button', "aria-label": tooltip, "aria-expanded": isExpanded, onClick: handleToggle, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsx("i", { className: `${icon} text-lg` }) }) }), jsx("div", { className: `toolbar-fanout-panel ${directionClass} ${panelVisibleClass}`, children: children })] }));
+};
+
+export { ToolbarFanOutItem };
+//# sourceMappingURL=ToolbarFanOutItem.js.map

package/dist/esm/Toolbar/ToolbarFanOutItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFanOutItem.js","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from '../Common/Tooltip';\nimport type { TooltipPosition } from '../Common/Tooltip';\n\n/** Props for the {@link ToolbarFanOutItem} component. */\nexport interface ToolbarFanOutItemProps {\n    /** The PrimeIcons CSS class to use as the trigger icon (e.g. 'pi pi-home'). */\n    icon: string;\n\n    /** Tooltip text shown when hovering over the trigger button. */\n    tooltip: string;\n\n    /** Position of the tooltip relative to the trigger button (default: 'right'). */\n    tooltipPosition?: TooltipPosition;\n\n    /** Direction the panel fans out from the trigger button (default: 'right'). */\n    fanOutDirection?: 'right' | 'left';\n\n    /** The toolbar items to render inside the fan-out panel. */\n    children: ReactNode;\n}\n\n/**\n * A toolbar button that fans out a horizontal panel of sub-tool buttons when clicked.\n *\n * Place this inside a vertical {@link Toolbar}. When the button is clicked, a pill-shaped\n * panel slides out to the side (right by default) containing the provided children.\n * The panel animates in/out using a clip-path reveal transition.\n *\n * - Clicking the button again closes the panel\n * - Clicking anywhere outside the panel also closes it\n */\nexport const ToolbarFanOutItem = ({\n    icon,\n    tooltip,\n    tooltipPosition = 'right',\n    fanOutDirection = 'right',\n    children,\n}: ToolbarFanOutItemProps) => {\n    const [isExpanded, setIsExpanded] = useState(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleToggle = () => {\n        setIsExpanded(!isExpanded);\n    };\n\n    // Close the fan-out when clicking outside\n    useEffect(() => {\n        if (!isExpanded) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n                setIsExpanded(false);\n            }\n        };\n\n        document.addEventListener('mousedown', handleClickOutside);\n        return () => {\n            document.removeEventListener('mousedown', handleClickOutside);\n        };\n    }, [isExpanded]);\n\n    const activeClass = isExpanded ? 'toolbar-button--active' : '';\n    const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';\n    const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;\n\n    return (\n        <div className='toolbar-fanout-item' ref={containerRef}>\n            <Tooltip content={tooltip} position={tooltipPosition}>\n                <button\n                    type='button'\n                    aria-label={tooltip}\n                    aria-expanded={isExpanded}\n                    onClick={handleToggle}\n                    className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}\n                >\n                    <i className={`${icon} text-lg`} />\n                </button>\n            </Tooltip>\n            <div className={`toolbar-fanout-panel ${directionClass} ${panelVisibleClass}`}>\n                {children}\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;MAmCa,iBAAiB,GAAG,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,eAAe,GAAG,OAAO,EACzB,eAAe,GAAG,OAAO,EACzB,QAAQ,GACa,KAAI;IACzB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACnD,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;IAEjD,MAAM,YAAY,GAAG,MAAK;AACtB,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;AAC9B,IAAA,CAAC;IAGD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,UAAU;YAAE;AAEjB,QAAA,MAAM,kBAAkB,GAAG,CAAC,KAAiB,KAAI;AAC7C,YAAA,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC9E,aAAa,CAAC,KAAK,CAAC;YACxB;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC;AAC1D,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC;AACjE,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,MAAM,WAAW,GAAG,UAAU,GAAG,wBAAwB,GAAG,EAAE;IAC9D,MAAM,iBAAiB,GAAG,UAAU,GAAG,+BAA+B,GAAG,EAAE;AAC3E,IAAA,MAAM,cAAc,GAAG,CAAA,sBAAA,EAAyB,eAAe,EAAE;AAEjE,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAC,GAAG,EAAE,YAAY,EAAA,QAAA,EAAA,CAClDC,GAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAA,QAAA,EAChDA,GAAA,CAAA,QAAA,EAAA,EACI,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,OAAO,EAAA,eAAA,EACJ,UAAU,EACzB,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,CAAA,oFAAA,EAAuF,WAAW,CAAA,CAAE,EAAA,QAAA,EAE/GA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,CAAA,EAAG,IAAI,UAAU,EAAA,CAAI,EAAA,CAC9B,EAAA,CACH,EACVA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,qBAAA,EAAwB,cAAc,CAAA,CAAA,EAAI,iBAAiB,CAAA,CAAE,EAAA,QAAA,EACxE,QAAQ,EAAA,CACP,CAAA,EAAA,CACJ;AAEd;;;;"}

package/dist/esm/Toolbar/ToolbarSection.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface ToolbarSectionProps {
+    activeContext?: string;
+    children: ReactNode;
+    orientation?: 'vertical' | 'horizontal';
+}
+export declare const ToolbarSection: ({ activeContext, children, orientation }: ToolbarSectionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarSection.d.ts.map

package/dist/esm/Toolbar/ToolbarSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSection.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0B,SAAS,EAA6E,MAAM,OAAO,CAAC;AAKrI,MAAM,WAAW,mBAAmB;IAMhC,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,QAAQ,EAAE,SAAS,CAAC;IAGpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAaD,eAAO,MAAM,cAAc,GAAI,0CAAuD,mBAAmB,4CAyDxG,CAAC"}

package/dist/esm/Toolbar/ToolbarSection.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, Children, isValidElement, useCallback, useLayoutEffect, useEffect } from 'react';
+
+const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) => {
+    const contextRefs = useRef({});
+    const [size, setSize] = useState(null);
+    const contexts = Children.toArray(children).filter((child) => isValidElement(child) && typeof child.props.name === 'string');
+    const effectiveContext = activeContext ?? contexts[0]?.props?.name ?? '';
+    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
+    const measureAndSetSize = useCallback((contextName) => {
+        const ref = contextRefs.current[contextName];
+        if (ref) {
+            setSize({ width: ref.offsetWidth, height: ref.offsetHeight });
+        }
+    }, []);
+    useLayoutEffect(() => {
+        measureAndSetSize(effectiveContext);
+    }, []);
+    useEffect(() => {
+        measureAndSetSize(effectiveContext);
+    }, [effectiveContext, measureAndSetSize]);
+    return (jsx("div", { className: 'toolbar-section', style: size ? { width: size.width, height: size.height } : undefined, children: contexts.map((child) => {
+            const { name, children: contextChildren } = child.props;
+            const isActive = name === effectiveContext;
+            return (jsx("div", { ref: (element) => { contextRefs.current[name] = element; }, className: `toolbar-context inline-flex ${flexClass} items-center gap-1 ${isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'}`, children: contextChildren }, name));
+        }) }));
+};
+
+export { ToolbarSection };
+//# sourceMappingURL=ToolbarSection.js.map

package/dist/esm/Toolbar/ToolbarSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Children, ReactElement, ReactNode, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport type { ToolbarContextProps } from './ToolbarContext';\n\n/** Props for the {@link ToolbarSection} component. */\nexport interface ToolbarSectionProps {\n    /**\n     * The name of the currently active context.\n     * Change this to trigger the fade-out / morph / fade-in animation.\n     * Defaults to the first context if not specified.\n     */\n    activeContext?: string;\n\n    /** {@link ToolbarContext} elements that define each context's toolbar items. */\n    children: ReactNode;\n\n    /** Layout direction matching the parent {@link Toolbar} (default: 'vertical'). */\n    orientation?: 'vertical' | 'horizontal';\n}\n\n/**\n * A section within a {@link Toolbar} that supports multiple named contexts.\n *\n * When {@link activeContext} changes:\n * - The current items fade out.\n * - The section smoothly morphs to the dimensions required by the new context.\n * - The new items fade in.\n *\n * Contexts are defined by placing {@link ToolbarContext} children inside this section.\n * Switching contexts only affects this section; other sections are unaffected.\n */\nexport const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }: ToolbarSectionProps) => {\n    const contextRefs = useRef<Record<string, HTMLDivElement | null>>({});\n    const [size, setSize] = useState<{ width: number; height: number } | null>(null);\n\n    const contexts = Children.toArray(children).filter(\n        (child): child is ReactElement<ToolbarContextProps> =>\n            isValidElement(child) && typeof (child.props as ToolbarContextProps).name === 'string'\n    );\n\n    // Default to the first context if activeContext is not provided\n    const effectiveContext = activeContext ?? (contexts[0]?.props as ToolbarContextProps)?.name ?? '';\n\n    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';\n\n    /** Measure the given context's natural dimensions and update the section size. */\n    const measureAndSetSize = useCallback((contextName: string) => {\n        const ref = contextRefs.current[contextName];\n        if (ref) {\n            setSize({ width: ref.offsetWidth, height: ref.offsetHeight });\n        }\n    }, []);\n\n    // Set the initial size synchronously before the first browser paint so there is no layout flash.\n    // Empty dependency array is intentional: ongoing context changes are handled by the useEffect below.\n    useLayoutEffect(() => {\n        measureAndSetSize(effectiveContext);\n    }, []); // run only on mount\n\n    // After a context switch, let the browser paint the opacity transition first,\n    // then update the explicit size so the CSS width/height transition kicks in.\n    useEffect(() => {\n        measureAndSetSize(effectiveContext);\n    }, [effectiveContext, measureAndSetSize]);\n\n    return (\n        <div\n            className='toolbar-section'\n            style={size ? { width: size.width, height: size.height } : undefined}\n        >\n            {contexts.map((child) => {\n                const { name, children: contextChildren } = child.props as ToolbarContextProps;\n                const isActive = name === effectiveContext;\n\n                return (\n                    <div\n                        key={name}\n                        ref={(element) => { contextRefs.current[name] = element; }}\n                        className={`toolbar-context inline-flex ${flexClass} items-center gap-1 ${\n                            isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'\n                        }`}\n                    >\n                        {contextChildren}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;AAkCO,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAuB,KAAI;AACzG,IAAA,MAAM,WAAW,GAAG,MAAM,CAAwC,EAAE,CAAC;IACrE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2C,IAAI,CAAC;AAEhF,IAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC9C,CAAC,KAAK,KACF,cAAc,CAAC,KAAK,CAAC,IAAI,OAAQ,KAAK,CAAC,KAA6B,CAAC,IAAI,KAAK,QAAQ,CAC7F;AAGD,IAAA,MAAM,gBAAgB,GAAG,aAAa,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAA6B,EAAE,IAAI,IAAI,EAAE;AAEjG,IAAA,MAAM,SAAS,GAAG,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,UAAU;AAGxE,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,WAAmB,KAAI;QAC1D,MAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC;QAC5C,IAAI,GAAG,EAAE;AACL,YAAA,OAAO,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC;QACjE;IACJ,CAAC,EAAE,EAAE,CAAC;IAIN,eAAe,CAAC,MAAK;QACjB,iBAAiB,CAAC,gBAAgB,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC;IAIN,SAAS,CAAC,MAAK;QACX,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AAEzC,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE,IAAI,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAAA,QAAA,EAEnE,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;YACpB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,KAA4B;AAC9E,YAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,gBAAgB;AAE1C,YAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAEI,GAAG,EAAE,CAAC,OAAO,KAAI,EAAG,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAC1D,SAAS,EAAE,+BAA+B,SAAS,CAAA,oBAAA,EAC/C,QAAQ,GAAG,yBAAyB,GAAG,2BAC3C,EAAE,EAAA,QAAA,EAED,eAAe,IANX,IAAI,CAOP;QAEd,CAAC,CAAC,EAAA,CACA;AAEd;;;;"}

package/dist/esm/Toolbar/index.d.ts

@@ -0,0 +1,11 @@
+export { Toolbar } from './Toolbar';
+export type { ToolbarProps } from './Toolbar';
+export { ToolbarButton } from './ToolbarButton';
+export type { ToolbarButtonProps } from './ToolbarButton';
+export { ToolbarContext } from './ToolbarContext';
+export type { ToolbarContextProps } from './ToolbarContext';
+export { ToolbarSection } from './ToolbarSection';
+export type { ToolbarSectionProps } from './ToolbarSection';
+export { ToolbarFanOutItem } from './ToolbarFanOutItem';
+export type { ToolbarFanOutItemProps } from './ToolbarFanOutItem';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Toolbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/Toolbar/index.js

@@ -0,0 +1,6 @@
+export { Toolbar } from './Toolbar.js';
+export { ToolbarButton } from './ToolbarButton.js';
+export { ToolbarContext } from './ToolbarContext.js';
+export { ToolbarSection } from './ToolbarSection.js';
+export { ToolbarFanOutItem } from './ToolbarFanOutItem.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/Toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/index.d.ts

@@ -10,5 +10,6 @@ import * as ObjectNavigationalBar from './ObjectNavigationalBar';
 import * as PivotViewer from './PivotViewer';
 import * as SchemaEditor from './SchemaEditor';
 import * as TimeMachine from './TimeMachine';
-export { CommandDialog, CommandForm, Common, DataPage, DataTables, Dialogs, Dropdown, ObjectContentEditor, ObjectNavigationalBar, PivotViewer, SchemaEditor, TimeMachine, };
+import * as Toolbar from './Toolbar';
+export { CommandDialog, CommandForm, Common, DataPage, DataTables, Dialogs, Dropdown, ObjectContentEditor, ObjectNavigationalBar, PivotViewer, SchemaEditor, TimeMachine, Toolbar, };
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,aAAa,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,mBAAmB,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,yBAAyB,CAAC;AACjE,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAE7C,OAAO,EACH,aAAa,EACb,WAAW,EACX,MAAM,EACN,QAAQ,EACR,UAAU,EACV,OAAO,EACP,QAAQ,EACR,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,YAAY,EACZ,WAAW,GACd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,aAAa,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,mBAAmB,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,yBAAyB,CAAC;AACjE,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAErC,OAAO,EACH,aAAa,EACb,WAAW,EACX,MAAM,EACN,QAAQ,EACR,UAAU,EACV,OAAO,EACP,QAAQ,EACR,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,YAAY,EACZ,WAAW,EACX,OAAO,GACV,CAAC"}

package/dist/esm/index.js

@@ -22,4 +22,6 @@ import * as index$a from './SchemaEditor/index.js';
 export { index$a as SchemaEditor };
 import * as index$b from './TimeMachine/index.js';
 export { index$b as TimeMachine };
+import * as index$c from './Toolbar/index.js';
+export { index$c as Toolbar };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}