@cratis/components 1.5.0 → 1.6.6

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

@@ -1 +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;;;;"}
+{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAuBA;;;;;;;;;;AAUG;AACI,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;AACvC,IAAA,CAAC,EAAE,EAAE,CAAC,CAAC;;;IAIP,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/ToolbarSeparator.js

@@ -1,5 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 
+/**
+ * A visual divider for use inside a {@link Toolbar}.
+ *
+ * In a vertical toolbar (default) the separator renders as a horizontal rule.
+ * In a horizontal toolbar it renders as a vertical rule.
+ */
 const ToolbarSeparator = ({ orientation = 'vertical' }) => (jsx("div", { role: 'separator', "aria-orientation": orientation === 'horizontal' ? 'vertical' : 'horizontal', className: orientation === 'horizontal' ? 'toolbar-separator toolbar-separator--in-horizontal' : 'toolbar-separator toolbar-separator--in-vertical' }));
 
 export { ToolbarSeparator };

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSeparator.js","sources":["../../../Toolbar/ToolbarSeparator.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\n/** Props for the {@link ToolbarSeparator} component. */\nexport interface ToolbarSeparatorProps {\n    /** Layout direction matching the parent {@link Toolbar} (default: 'vertical'). */\n    orientation?: 'vertical' | 'horizontal';\n}\n\n/**\n * A visual divider for use inside a {@link Toolbar}.\n *\n * In a vertical toolbar (default) the separator renders as a horizontal rule.\n * In a horizontal toolbar it renders as a vertical rule.\n */\nexport const ToolbarSeparator = ({ orientation = 'vertical' }: ToolbarSeparatorProps) => (\n    <div\n        role='separator'\n        aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n        className={orientation === 'horizontal' ? 'toolbar-separator toolbar-separator--in-horizontal' : 'toolbar-separator toolbar-separator--in-vertical'}\n    />\n);\n"],"names":["_jsx"],"mappings":";;MAea,gBAAgB,GAAG,CAAC,EAAE,WAAW,GAAG,UAAU,EAAyB,MAChFA,GAAA,CAAA,KAAA,EAAA,EACI,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,YAAY,EAC1E,SAAS,EAAE,WAAW,KAAK,YAAY,GAAG,oDAAoD,GAAG,kDAAkD,EAAA,CACrJ;;;;"}
+{"version":3,"file":"ToolbarSeparator.js","sources":["../../../Toolbar/ToolbarSeparator.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;AASA;;;;;AAKG;MACU,gBAAgB,GAAG,CAAC,EAAE,WAAW,GAAG,UAAU,EAAyB,MAChFA,GAAA,CAAA,KAAA,EAAA,EACI,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,YAAY,EAC1E,SAAS,EAAE,WAAW,KAAK,YAAY,GAAG,oDAAoD,GAAG,kDAAkD,EAAA,CACrJ;;;;"}

package/dist/esm/Toolbar/index.js

@@ -4,4 +4,7 @@ export { ToolbarContext } from './ToolbarContext.js';
 export { ToolbarSection } from './ToolbarSection.js';
 export { ToolbarSeparator } from './ToolbarSeparator.js';
 export { ToolbarFanOutItem } from './ToolbarFanOutItem.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.js","sources":["../../../Toolbar/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;AACA"}

package/dist/esm/tailwind-utilities.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -33,6 +33,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -402,6 +403,9 @@
   .items-center {
     align-items: center;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-center {
     justify-content: center;
   }
@@ -439,10 +443,21 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }