@cube-dev/ui-kit 0.93.0 → 0.94.0

package/es/components/content/Disclosure/Disclosure.js

@@ -0,0 +1,296 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.94.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo, useRef, } from 'react';
+import { mergeProps, useDisclosure, useId } from 'react-aria';
+import { useDisclosureGroupState, useDisclosureState, } from 'react-stately';
+import { RightIcon } from '../../../icons';
+import { extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { mergeRefs } from '../../../utils/react';
+import { ItemButton } from '../../actions/ItemButton';
+import { DisplayTransition } from '../../helpers';
+// ============================================================================
+// Contexts
+// ============================================================================
+const DisclosureContext = createContext(null);
+const DisclosureGroupContext = createContext(null);
+function useDisclosureContext() {
+    const context = useContext(DisclosureContext);
+    if (!context) {
+        throw new Error('Disclosure.Trigger and Disclosure.Content must be used within a Disclosure');
+    }
+    return context;
+}
+function useDisclosureGroupContext() {
+    return useContext(DisclosureGroupContext);
+}
+// ============================================================================
+// Styled Components
+// ============================================================================
+const DisclosureRoot = tasty({
+    qa: 'Disclosure',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        gap: 0,
+        position: 'relative',
+        border: {
+            '': 'none',
+            'shape=card': '1bw solid #border',
+        },
+        radius: {
+            '': '1r',
+            'shape=card': '1cr',
+            'shape=sharp': '0',
+        },
+        fill: '#white',
+    },
+});
+const ContentWrapperElement = tasty({
+    styles: {
+        display: 'block',
+        overflow: 'hidden',
+        interpolateSize: 'allow-keywords',
+        height: {
+            '': '0',
+            shown: 'max-content',
+        },
+        transition: 'height $disclosure-transition',
+    },
+});
+const ContentElement = tasty({
+    qa: 'DisclosureContent',
+    styles: {
+        contentVisibility: 'auto',
+        padding: '1x',
+    },
+});
+const GroupRoot = tasty({
+    qa: 'DisclosureGroup',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        gap: '0',
+    },
+});
+const TriggerIcon = tasty(RightIcon, {
+    styles: {
+        transition: 'rotate',
+        rotate: {
+            '': '0deg',
+            expanded: '90deg',
+        },
+    },
+});
+const StyledTrigger = tasty(ItemButton, {
+    styles: {
+        radius: {
+            '': '1r',
+            'expanded & shape=card': '(1cr - 1bw) (1cr - 1bw) 0 0',
+            'shape=sharp': '0',
+        },
+        border: '#clear',
+    },
+});
+// ============================================================================
+// Disclosure Component
+// ============================================================================
+const DisclosureComponent = forwardRef(function Disclosure(props, ref) {
+    const { isExpanded: controlledIsExpanded, defaultExpanded, onExpandedChange, isDisabled = false, children, shape = 'default', transitionDuration, qa, mods, ...otherProps } = props;
+    const groupContext = useDisclosureGroupContext();
+    const panelRef = useRef(null);
+    // When disabled, force expanded to false
+    const effectiveIsExpanded = isDisabled ? false : controlledIsExpanded;
+    const state = useDisclosureState({
+        isExpanded: effectiveIsExpanded,
+        defaultExpanded: isDisabled ? false : defaultExpanded,
+        onExpandedChange: isDisabled ? undefined : onExpandedChange,
+    });
+    // When disabled, override state.isExpanded to false
+    const isExpanded = isDisabled ? false : state.isExpanded;
+    const { buttonProps, panelProps } = useDisclosure({
+        isExpanded,
+        isDisabled,
+    }, state, panelRef);
+    const contextValue = useMemo(() => ({
+        state,
+        buttonProps,
+        panelProps,
+        panelRef,
+        isDisabled,
+        isExpanded,
+        shape,
+        transitionDuration,
+        triggerProps: groupContext?.triggerProps,
+        contentStyles: groupContext?.contentStyles,
+    }), [
+        state,
+        buttonProps,
+        panelProps,
+        isDisabled,
+        isExpanded,
+        shape,
+        transitionDuration,
+        groupContext?.triggerProps,
+        groupContext?.contentStyles,
+    ]);
+    const stateContext = useMemo(() => ({
+        isExpanded,
+        toggle: state.toggle,
+        expand: state.expand,
+        collapse: state.collapse,
+    }), [isExpanded, state.toggle, state.expand, state.collapse]);
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES);
+    const finalMods = useMemo(() => ({
+        expanded: isExpanded,
+        disabled: isDisabled,
+        shape,
+        ...mods,
+    }), [isExpanded, isDisabled, shape, mods]);
+    const content = typeof children === 'function' ? children(stateContext) : children;
+    return (_jsx(DisclosureContext.Provider, { value: contextValue, children: _jsx(DisclosureRoot, { ref: ref, qa: qa, mods: finalMods, styles: outerStyles, children: content }) }));
+});
+// ============================================================================
+// Disclosure.Trigger Component
+// ============================================================================
+const DisclosureTrigger = forwardRef(function DisclosureTrigger(props, ref) {
+    const { children, icon, mods, ...otherProps } = props;
+    const context = useDisclosureContext();
+    const { buttonProps, isDisabled, isExpanded, shape, triggerProps } = context;
+    const finalMods = useMemo(() => ({
+        expanded: isExpanded,
+        disabled: isDisabled,
+        shape,
+        ...mods,
+    }), [isExpanded, isDisabled, shape, mods]);
+    // Default icon is a rotating chevron
+    const defaultIcon = _jsx(TriggerIcon, { mods: { expanded: isExpanded } });
+    return (_jsx(StyledTrigger, { ref: ref, icon: icon ?? defaultIcon, isDisabled: isDisabled, isSelected: isExpanded, ...triggerProps, ...mergeProps(otherProps, buttonProps), mods: finalMods, children: children }));
+});
+// ============================================================================
+// Disclosure.Content Component
+// ============================================================================
+const DisclosureContent = forwardRef(function DisclosureContent(props, ref) {
+    const { children, styles, mods, ...otherProps } = props;
+    const context = useDisclosureContext();
+    const { panelProps, panelRef, isExpanded, transitionDuration, contentStyles, } = context;
+    const mergedStyles = useMemo(() => ({
+        ...contentStyles,
+        ...styles,
+    }), [contentStyles, styles]);
+    // Filter out hidden attribute from panelProps since we manage visibility via CSS height animation
+    const { hidden, ...filteredPanelProps } = panelProps;
+    return (_jsx(DisplayTransition, { isShown: isExpanded, duration: transitionDuration, animateOnMount: false, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(ContentWrapperElement, { ref: transitionRef, mods: { shown: isShown, phase }, children: _jsx(ContentElement, { ref: mergeRefs(ref, panelRef), mods: mods, styles: mergedStyles, ...filteredPanelProps, ...otherProps, children: children }) })) }));
+});
+// ============================================================================
+// Disclosure.Group Component
+// ============================================================================
+const DisclosureGroup = forwardRef(function DisclosureGroup(props, ref) {
+    const { allowsMultipleExpanded = false, expandedKeys, defaultExpandedKeys, onExpandedChange, isDisabled = false, triggerProps, contentStyles, children, qa, mods, styles, ...otherProps } = props;
+    const groupState = useDisclosureGroupState({
+        allowsMultipleExpanded,
+        expandedKeys,
+        defaultExpandedKeys,
+        onExpandedChange,
+        isDisabled,
+    });
+    const contextValue = useMemo(() => ({
+        groupState,
+        triggerProps,
+        contentStyles,
+    }), [groupState, triggerProps, contentStyles]);
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES);
+    const finalStyles = useMemo(() => ({
+        ...outerStyles,
+        ...styles,
+    }), [outerStyles, styles]);
+    return (_jsx(DisclosureGroupContext.Provider, { value: contextValue, children: _jsx(GroupRoot, { ref: ref, qa: qa, mods: mods, styles: finalStyles, children: children }) }));
+});
+// ============================================================================
+// Disclosure.Item Component
+// ============================================================================
+const DisclosureItem = forwardRef(function DisclosureItem(props, ref) {
+    const { id: providedId, children, isDisabled: itemDisabled = false, isExpanded: controlledIsExpanded, defaultExpanded, onExpandedChange, shape = 'default', qa, mods, styles, ...otherProps } = props;
+    const defaultId = useId();
+    const id = providedId ?? defaultId;
+    const groupContext = useDisclosureGroupContext();
+    const panelRef = useRef(null);
+    // Determine if disabled from group or item
+    const isDisabled = itemDisabled || groupContext?.groupState?.isDisabled || false;
+    // Determine expanded state from group or local props
+    const groupIsExpanded = groupContext
+        ? groupContext.groupState.expandedKeys.has(id)
+        : undefined;
+    // When disabled, force expanded to false
+    const effectiveIsExpanded = isDisabled
+        ? false
+        : groupIsExpanded ?? controlledIsExpanded;
+    const state = useDisclosureState({
+        isExpanded: effectiveIsExpanded,
+        defaultExpanded: isDisabled ? false : defaultExpanded,
+        onExpandedChange(expanded) {
+            if (isDisabled)
+                return;
+            if (groupContext) {
+                groupContext.groupState.toggleKey(id);
+            }
+            onExpandedChange?.(expanded);
+        },
+    });
+    // When disabled, override state.isExpanded to false
+    const isExpanded = isDisabled ? false : state.isExpanded;
+    const { buttonProps, panelProps } = useDisclosure({
+        isExpanded,
+        isDisabled,
+    }, state, panelRef);
+    const contextValue = useMemo(() => ({
+        state,
+        buttonProps,
+        panelProps,
+        panelRef,
+        isDisabled,
+        isExpanded,
+        shape,
+        transitionDuration: undefined,
+        triggerProps: groupContext?.triggerProps,
+        contentStyles: groupContext?.contentStyles,
+    }), [
+        state,
+        buttonProps,
+        panelProps,
+        isDisabled,
+        isExpanded,
+        shape,
+        groupContext?.triggerProps,
+        groupContext?.contentStyles,
+    ]);
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES);
+    const finalStyles = useMemo(() => ({
+        ...outerStyles,
+        ...styles,
+    }), [outerStyles, styles]);
+    const finalMods = useMemo(() => ({
+        expanded: isExpanded,
+        disabled: isDisabled,
+        shape,
+        ...mods,
+    }), [isExpanded, isDisabled, shape, mods]);
+    return (_jsx(DisclosureContext.Provider, { value: contextValue, children: _jsx(DisclosureRoot, { ref: ref, qa: qa, mods: finalMods, styles: finalStyles, "data-key": id, children: children }) }));
+});
+// ============================================================================
+// Compound Component Export
+// ============================================================================
+const _Disclosure = Object.assign(DisclosureComponent, {
+    Trigger: DisclosureTrigger,
+    Content: DisclosureContent,
+    Group: DisclosureGroup,
+    Item: DisclosureItem,
+});
+export { _Disclosure as Disclosure };
+
+        

package/es/components/content/Disclosure/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.94.0
+ * Released under the MIT license.
+ */
+
+export * from './Disclosure';
+
+        

package/es/components/content/Divider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Footer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/HotKeys/HotKeys.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/HotKeys/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Item/Item.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Item/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/ItemBadge/ItemBadge.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/ItemBadge/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/List/SectionHeading.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/List/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Paragraph.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Placeholder/Placeholder.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/PrismCode/PrismCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/PrismCode/prismSetup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Result/Result.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/ComboBox/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DateInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DateInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePickerButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePickerElement.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePickerInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePickerSegment.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DateRangePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.93.0
+ * @cube-dev/ui-kit v0.94.0
  * Released under the MIT license.
  */