@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/components/navigation/Tabs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { BaseProps, OuterStyleProps, Styles } from '../../../tasty';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * Radio type uses smaller sizes similar to RadioGroup tabs mode.\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Tab has its own TabType\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'icon' // Tabs don't support icons\n  | 'rightIcon'\n  | 'prefix' // Tabs don't support prefix/suffix\n  | 'suffix'\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'tooltip' // Tabs don't typically use tooltips\n  | 'defaultTooltipPlacement'\n  | 'hotkeys' // Tabs don't use hotkeys\n  | 'keyboardShortcutProps'\n  | 'loadingSlot' // Tabs don't use loading state\n  | 'isLoading'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions'; // Tab has its own autoHideActions\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n   */\n  size?: TabSize;\n  /** Visual appearance type. */\n  type?: TabType;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps,\n    OuterStyleProps,\n    PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Whether to show context menu on right-click for all tabs.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: boolean;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Content displayed in the tab button. */\n  title: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Whether to show context menu on right-click.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: boolean;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n  extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;AA0BA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}

package/dist/components/navigation/Tabs/use-tab-editing.js

@@ -0,0 +1,46 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { chainRaf } from "../../../utils/raf.js";
+import { useCallback, useState } from "react";
+
+//#region src/components/navigation/Tabs/use-tab-editing.ts
+/**
+* Hook to manage tab title editing state.
+*
+* Provides state and callbacks for inline title editing with support for:
+* - Starting edit mode (selecting the tab and focusing input)
+* - Submitting changes (with tab-level or parent-level callback)
+* - Canceling edits
+*/
+function useTabEditing({ onChange, onTitleChange } = {}) {
+	const [editingKey, setEditingKey] = useState(null);
+	const [editValue, setEditValue] = useState("");
+	return {
+		editingKey,
+		editValue,
+		setEditValue,
+		startEditing: useCallback((key, currentTitle) => {
+			onChange?.(key);
+			chainRaf(() => {
+				setEditingKey(key);
+				setEditValue(currentTitle);
+			}, 2);
+		}, [onChange]),
+		cancelEditing: useCallback(() => {
+			setEditingKey(null);
+			setEditValue("");
+		}, []),
+		submitEditing: useCallback((key, newTitle, tabOnTitleChange) => {
+			const trimmed = newTitle.trim();
+			if (trimmed) {
+				if (tabOnTitleChange) tabOnTitleChange(trimmed);
+				else if (onTitleChange) onTitleChange(key, trimmed);
+			}
+			setEditingKey(null);
+			setEditValue("");
+		}, [onTitleChange])
+	};
+}
+
+//#endregion
+export { useTabEditing };
+//# sourceMappingURL=use-tab-editing.js.map

package/dist/components/navigation/Tabs/use-tab-editing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tab-editing.js","names":[],"sources":["../../../../src/components/navigation/Tabs/use-tab-editing.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport { chainRaf } from '../../../utils/raf';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface UseTabEditingOptions {\n  /** Callback when tab selection changes (used to select tab when editing starts) */\n  onChange?: (key: string) => void;\n  /** Callback when a tab title is changed */\n  onTitleChange?: (key: string, newTitle: string) => void;\n}\n\nexport interface UseTabEditingResult {\n  /** Currently editing tab key (null if not editing) */\n  editingKey: string | null;\n  /** Current edit input value */\n  editValue: string;\n  /** Set the edit value */\n  setEditValue: (value: string) => void;\n  /** Start editing a tab with the given title */\n  startEditing: (key: string, currentTitle: string) => void;\n  /** Submit the current edit */\n  submitEditing: (\n    key: string,\n    newTitle: string,\n    tabOnTitleChange?: (title: string) => void,\n  ) => void;\n  /** Cancel the current edit */\n  cancelEditing: () => void;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Hook to manage tab title editing state.\n *\n * Provides state and callbacks for inline title editing with support for:\n * - Starting edit mode (selecting the tab and focusing input)\n * - Submitting changes (with tab-level or parent-level callback)\n * - Canceling edits\n */\nexport function useTabEditing({\n  onChange,\n  onTitleChange,\n}: UseTabEditingOptions = {}): UseTabEditingResult {\n  const [editingKey, setEditingKey] = useState<string | null>(null);\n  const [editValue, setEditValue] = useState('');\n\n  const startEditing = useCallback(\n    (key: string, currentTitle: string) => {\n      // Also select the tab being edited\n      onChange?.(key);\n      // Use chainRaf to ensure DOM is ready before entering edit mode\n      chainRaf(() => {\n        setEditingKey(key);\n        setEditValue(currentTitle);\n      }, 2);\n    },\n    [onChange],\n  );\n\n  const cancelEditing = useCallback(() => {\n    setEditingKey(null);\n    setEditValue('');\n  }, []);\n\n  const submitEditing = useCallback(\n    (\n      key: string,\n      newTitle: string,\n      tabOnTitleChange?: (title: string) => void,\n    ) => {\n      const trimmed = newTitle.trim();\n\n      if (trimmed) {\n        // Tab-level callback takes precedence\n        if (tabOnTitleChange) {\n          tabOnTitleChange(trimmed);\n        } else if (onTitleChange) {\n          onTitleChange(key, trimmed);\n        }\n      }\n\n      setEditingKey(null);\n      setEditValue('');\n    },\n    [onTitleChange],\n  );\n\n  return {\n    editingKey,\n    editValue,\n    setEditValue,\n    startEditing,\n    cancelEditing,\n    submitEditing,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA8CA,SAAgB,cAAc,EAC5B,UACA,kBACwB,EAAE,EAAuB;CACjD,MAAM,CAAC,YAAY,iBAAiB,SAAwB,KAAK;CACjE,MAAM,CAAC,WAAW,gBAAgB,SAAS,GAAG;AA2C9C,QAAO;EACL;EACA;EACA;EACA,cA7CmB,aAClB,KAAa,iBAAyB;AAErC,cAAW,IAAI;AAEf,kBAAe;AACb,kBAAc,IAAI;AAClB,iBAAa,aAAa;MACzB,EAAE;KAEP,CAAC,SAAS,CACX;EAmCC,eAjCoB,kBAAkB;AACtC,iBAAc,KAAK;AACnB,gBAAa,GAAG;KACf,EAAE,CAAC;EA+BJ,eA7BoB,aAElB,KACA,UACA,qBACG;GACH,MAAM,UAAU,SAAS,MAAM;AAE/B,OAAI,SAEF;QAAI,iBACF,kBAAiB,QAAQ;aAChB,cACT,eAAc,KAAK,QAAQ;;AAI/B,iBAAc,KAAK;AACnB,gBAAa,GAAG;KAElB,CAAC,cAAc,CAChB;EASA"}

package/dist/components/navigation/Tabs/use-tab-indicator.js

@@ -0,0 +1,64 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { chainRaf } from "../../../utils/raf.js";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+
+//#region src/components/navigation/Tabs/use-tab-indicator.ts
+/**
+* Hook to track and animate tab indicator position.
+*
+* Calculates the position and width of the selection indicator
+* based on the currently selected tab. Returns null if disabled
+* (e.g., for non-default tab types).
+*
+* @param containerRef - Ref to the tab container element
+* @param selectedKey - Currently selected tab key
+* @param enabled - Whether the indicator should be shown
+* @param orderToken - Optional token that changes when tab order changes (triggers recalculation)
+* @returns Indicator style (left, width) or null if disabled/not ready
+*/
+function useTabIndicator(containerRef, selectedKey, enabled, orderToken) {
+	const [style, setStyle] = useState(null);
+	const cancelRef = useRef(null);
+	const updateIndicator = useCallback(() => {
+		if (!enabled || !containerRef.current || selectedKey == null) {
+			setStyle(null);
+			return;
+		}
+		const selectedTab = containerRef.current.querySelector("[aria-selected=\"true\"]");
+		if (!selectedTab) {
+			setStyle(null);
+			return;
+		}
+		const containerRect = containerRef.current.getBoundingClientRect();
+		const tabRect = selectedTab.getBoundingClientRect();
+		if (tabRect.width > 0) setStyle({
+			left: tabRect.left - containerRect.left + containerRef.current.scrollLeft,
+			width: tabRect.width
+		});
+	}, [
+		containerRef,
+		selectedKey,
+		enabled,
+		orderToken
+	]);
+	useLayoutEffect(() => {
+		if (cancelRef.current) cancelRef.current();
+		cancelRef.current = chainRaf(() => {
+			updateIndicator();
+		}, 2);
+		return () => {
+			if (cancelRef.current) cancelRef.current();
+		};
+	}, [updateIndicator]);
+	useEffect(() => {
+		if (!enabled) return;
+		const handleResize = () => updateIndicator();
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, [enabled, updateIndicator]);
+	return enabled ? style : null;
+}
+
+//#endregion
+export { useTabIndicator };
+//# sourceMappingURL=use-tab-indicator.js.map

package/dist/components/navigation/Tabs/use-tab-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tab-indicator.js","names":[],"sources":["../../../../src/components/navigation/Tabs/use-tab-indicator.ts"],"sourcesContent":["import {\n  RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { chainRaf } from '../../../utils/raf';\n\nimport type { Key } from '@react-types/shared';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface IndicatorStyle {\n  left: number;\n  width: number;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Hook to track and animate tab indicator position.\n *\n * Calculates the position and width of the selection indicator\n * based on the currently selected tab. Returns null if disabled\n * (e.g., for non-default tab types).\n *\n * @param containerRef - Ref to the tab container element\n * @param selectedKey - Currently selected tab key\n * @param enabled - Whether the indicator should be shown\n * @param orderToken - Optional token that changes when tab order changes (triggers recalculation)\n * @returns Indicator style (left, width) or null if disabled/not ready\n */\nexport function useTabIndicator(\n  containerRef: RefObject<HTMLElement | null>,\n  selectedKey: Key | null,\n  enabled: boolean,\n  orderToken?: string,\n): IndicatorStyle | null {\n  const [style, setStyle] = useState<IndicatorStyle | null>(null);\n  const cancelRef = useRef<(() => void) | null>(null);\n\n  const updateIndicator = useCallback(() => {\n    if (!enabled || !containerRef.current || selectedKey == null) {\n      setStyle(null);\n      return;\n    }\n\n    // Find the selected tab button within the container\n    const selectedTab = containerRef.current.querySelector(\n      '[aria-selected=\"true\"]',\n    ) as HTMLElement | null;\n\n    if (!selectedTab) {\n      setStyle(null);\n      return;\n    }\n\n    const containerRect = containerRef.current.getBoundingClientRect();\n    const tabRect = selectedTab.getBoundingClientRect();\n\n    // Only update if dimensions are valid (element has been painted)\n    if (tabRect.width > 0) {\n      setStyle({\n        left:\n          tabRect.left - containerRect.left + containerRef.current.scrollLeft,\n        width: tabRect.width,\n      });\n    }\n  }, [containerRef, selectedKey, enabled, orderToken]);\n\n  // Update on selectedKey change - use chainRaf to ensure DOM is fully painted\n  useLayoutEffect(() => {\n    // Cancel any pending RAF chain\n    if (cancelRef.current) {\n      cancelRef.current();\n    }\n\n    // Schedule update after 2 frames to ensure layout is complete\n    cancelRef.current = chainRaf(() => {\n      updateIndicator();\n    }, 2);\n\n    return () => {\n      if (cancelRef.current) {\n        cancelRef.current();\n      }\n    };\n  }, [updateIndicator]);\n\n  // Update on window resize\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleResize = () => updateIndicator();\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, [enabled, updateIndicator]);\n\n  return enabled ? style : null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuCA,SAAgB,gBACd,cACA,aACA,SACA,YACuB;CACvB,MAAM,CAAC,OAAO,YAAY,SAAgC,KAAK;CAC/D,MAAM,YAAY,OAA4B,KAAK;CAEnD,MAAM,kBAAkB,kBAAkB;AACxC,MAAI,CAAC,WAAW,CAAC,aAAa,WAAW,eAAe,MAAM;AAC5D,YAAS,KAAK;AACd;;EAIF,MAAM,cAAc,aAAa,QAAQ,cACvC,2BACD;AAED,MAAI,CAAC,aAAa;AAChB,YAAS,KAAK;AACd;;EAGF,MAAM,gBAAgB,aAAa,QAAQ,uBAAuB;EAClE,MAAM,UAAU,YAAY,uBAAuB;AAGnD,MAAI,QAAQ,QAAQ,EAClB,UAAS;GACP,MACE,QAAQ,OAAO,cAAc,OAAO,aAAa,QAAQ;GAC3D,OAAO,QAAQ;GAChB,CAAC;IAEH;EAAC;EAAc;EAAa;EAAS;EAAW,CAAC;AAGpD,uBAAsB;AAEpB,MAAI,UAAU,QACZ,WAAU,SAAS;AAIrB,YAAU,UAAU,eAAe;AACjC,oBAAiB;KAChB,EAAE;AAEL,eAAa;AACX,OAAI,UAAU,QACZ,WAAU,SAAS;;IAGtB,CAAC,gBAAgB,CAAC;AAGrB,iBAAgB;AACd,MAAI,CAAC,QAAS;EAEd,MAAM,qBAAqB,iBAAiB;AAE5C,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa,OAAO,oBAAoB,UAAU,aAAa;IAC9D,CAAC,SAAS,gBAAgB,CAAC;AAE9B,QAAO,UAAU,QAAQ"}

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

@@ -0,0 +1,5 @@
+
+import { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabSize, TabType, TabsActionPosition } from "./Tabs/types.js";
+import { CubeTabsActionProps, TabsAction } from "./Tabs/TabsAction.js";
+import { Tab, Tabs } from "./Tabs/Tabs.js";
+import "./Tabs/index.js";

package/dist/components/organisms/FileTabs/FileTabs.d.ts

@@ -0,0 +1,55 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import "../../../tasty/index.js";
+import { CubeActionProps } from "../../actions/Action/Action.js";
+import "../../actions/index.js";
+import { CubeFlexProps } from "../../layout/Flex.js";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/organisms/FileTabs/FileTabs.d.ts
+/**
+ * @deprecated consider using <Tabs /> instead
+ */
+interface FileTabProps extends Omit<CubeActionProps, 'id'> {
+  isDirty?: boolean;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  isClosable?: boolean;
+  onClose?: () => void;
+}
+interface CubeFileTabsProps extends CubeFlexProps {
+  /** The initial active key in the tabs (uncontrolled). */
+  defaultActiveKey?: string;
+  /** The currently active key in the tabs (controlled). */
+  activeKey?: string | number;
+  /** Handler that is called when the tab is clicked. */
+  onTabClick?: (string: any) => void;
+  /** Handler that is called when the tab is closed. */
+  onTabClose?: (string: any) => void;
+  /** Styles for each tab pane */
+  paneStyles?: Styles;
+  /** Whether the tabs are closable */
+  isClosable?: boolean;
+  children?: ReactNode;
+}
+declare function FileTabs({
+  defaultActiveKey,
+  activeKey: activeKeyProp,
+  onTabClick,
+  onTabClose,
+  paneStyles,
+  isClosable,
+  children,
+  ...props
+}: CubeFileTabsProps): react_jsx_runtime0.JSX.Element;
+declare namespace FileTabs {
+  var TabPane: (allProps: CubeFileTabProps) => react_jsx_runtime0.JSX.Element;
+}
+interface CubeFileTabProps extends FileTabProps {
+  id: string | number;
+  title: string;
+}
+//#endregion
+export { CubeFileTabProps, FileTabs };
+//# sourceMappingURL=FileTabs.d.ts.map

package/dist/components/organisms/FileTabs/FileTabs.js

@@ -0,0 +1,282 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { Block } from "../../Block.js";
+import { Space } from "../../layout/Space.js";
+import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { Action } from "../../actions/Action/Action.js";
+import { Button } from "../../actions/index.js";
+import { Flex } from "../../layout/Flex.js";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/organisms/FileTabs/FileTabs.tsx
+const FileTabsContext = createContext({
+	addTab() {},
+	removeTab() {},
+	setTab() {},
+	setDirtyTab() {}
+});
+const TabsPanelElement = tasty(Space, {
+	qa: "TabsPanel",
+	styles: {
+		position: "relative",
+		overflow: "auto hidden",
+		top: "1bw",
+		gap: ".5x",
+		flexShrink: 0,
+		whiteSpace: "nowrap",
+		scrollbar: "styled",
+		padding: "1ow 1ow 0 1ow",
+		fade: {
+			"": false,
+			"left-fade": "3x left",
+			"right-fade": "3x right",
+			"right-fade & left-fade": "3x left right"
+		},
+		transition: "fade",
+		"--scrollbar-radius": "1ow",
+		"--scrollbar-width": ".75x",
+		"--scrollbar-outline-width": "1px"
+	}
+});
+const TabsContainerElement = tasty(Flex, {
+	qa: "TabsContainer",
+	styles: {
+		flow: "column",
+		height: "max 100%",
+		width: "max 100%",
+		position: "relative"
+	}
+});
+const DirtyBadge = tasty({
+	element: "DirtyBadge",
+	styles: {
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		transform: "translate(-50%, -50%)",
+		width: "1x",
+		height: "1x",
+		fill: "#dark.30",
+		radius: "round"
+	}
+});
+const TabElement = tasty(Action, { styles: {
+	radius: "1r 1r 0 0",
+	padding: "1x 1.5x",
+	border: {
+		"": "left top right #clear",
+		disabled: "left top right #border"
+	},
+	fill: {
+		"": "#dark.04",
+		hovered: "#dark.08",
+		"disabled, disabled & hover": "#white"
+	},
+	color: {
+		"": "#dark-02",
+		"disabled, hovered, hovered & disabled": "#dark"
+	},
+	cursor: {
+		"": "$pointer",
+		disabled: "default"
+	},
+	fontWeight: 500,
+	opacity: 1,
+	preset: "default",
+	transform: {
+		"": "translate(0, 0)",
+		disabled: "translate(0, 1bw)"
+	},
+	transition: "theme 0.2s",
+	margin: "1bw bottom",
+	DirtyBadge: {
+		opacity: {
+			"": 1,
+			"dirty & :hover": 0
+		},
+		pointerEvents: {
+			"": "auto",
+			"dirty & :hover": "none"
+		}
+	},
+	CloseButton: { opacity: {
+		"": 0,
+		"!dirty | :hover": 1
+	} }
+} });
+const CloseButton = tasty(Button, {
+	element: "CloseButton",
+	type: "neutral",
+	icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+	label: "Close Tab",
+	styles: {
+		width: "3x",
+		height: "3x",
+		padding: 0
+	}
+});
+function Tab({ isDirty, isDisabled, children, isClosable, onClose, ...props }) {
+	return /* @__PURE__ */ jsx(TabElement, {
+		mods: { dirty: isDirty },
+		isDisabled,
+		...props,
+		children: /* @__PURE__ */ jsxs(Space, {
+			gap: ".75x",
+			children: [/* @__PURE__ */ jsx(Block, { children }), (isClosable || isDirty) && /* @__PURE__ */ jsxs(Flex, {
+				placeItems: "center",
+				style: { position: "relative" },
+				children: [isClosable ? /* @__PURE__ */ jsx(CloseButton, { onPress: onClose }) : /* @__PURE__ */ jsx("div", {}), isDirty ? /* @__PURE__ */ jsx(DirtyBadge, {}) : null]
+			})]
+		})
+	});
+}
+function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, isClosable = true, children, ...props }) {
+	const tabsRef = useRef(null);
+	const [tabs, setTabs] = useState([]);
+	const [activeKey, setActiveKey] = useState(activeKeyProp || defaultActiveKey);
+	const [leftFade, setLeftFade] = useState(false);
+	const [rightFade, setRightFade] = useState(false);
+	function updateScroll() {
+		const el = tabsRef && tabsRef.current;
+		if (!el) return;
+		setLeftFade(!!el.scrollLeft);
+		setRightFade(el.scrollWidth !== el.offsetWidth && !!(el.scrollWidth - el.offsetWidth - el.scrollLeft));
+	}
+	useLayoutEffect$1(updateScroll, [tabs]);
+	function scrollCurrentIntoView() {
+		const el = tabsRef && tabsRef.current;
+		if (!el) return;
+		const current = el.querySelector("button[disabled]");
+		if (!current) return;
+		current.scrollIntoView({
+			behavior: "smooth",
+			inline: "end",
+			block: "end"
+		});
+	}
+	useEffect(() => {
+		function update() {
+			updateScroll();
+		}
+		if (tabsRef && tabsRef.current) {
+			tabsRef.current.addEventListener("scroll", update);
+			tabsRef.current.addEventListener("mousewheel", update);
+			window.addEventListener("resize", update);
+		}
+		return () => {
+			if (tabsRef && tabsRef.current) {
+				tabsRef.current.removeEventListener("scroll", update);
+				tabsRef.current.removeEventListener("mousewheel", update);
+			}
+			window.removeEventListener("resize", update);
+		};
+	}, [tabsRef]);
+	useEffect(scrollCurrentIntoView, [activeKey]);
+	useEffect(() => {
+		setActiveKey(activeKeyProp);
+	}, [activeKeyProp]);
+	function getTab(tabs, key) {
+		return tabs.find((tab) => tab.id === key);
+	}
+	function setTab(key) {
+		if (getTab(tabs, key)) setActiveKey(key);
+	}
+	function addTab(tab) {
+		setTabs((tabs) => {
+			if (!getTab(tabs, tab.id)) return [...tabs, tab];
+			return tabs;
+		});
+	}
+	function setDirtyTab(id, isDirty) {
+		setTabs((tabs) => {
+			const tab = getTab(tabs, id);
+			if (tab) {
+				tab.isDirty = isDirty;
+				return [...tabs];
+			}
+			return tabs;
+		});
+	}
+	function handleClose(tab) {
+		if (getTab(tabs, tab.id)) onTabClose && onTabClose(tab.id);
+	}
+	function removeTab(tab) {
+		setTabs((tabs) => {
+			const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);
+			setActiveKey((prevActiveKey) => {
+				if (prevActiveKey === tab.id) return _tabs[0] && _tabs[0].id;
+				return prevActiveKey;
+			});
+			return _tabs;
+		});
+	}
+	function onPress(tab) {
+		setTab(tab.id);
+		onTabClick && onTabClick(tab.id);
+	}
+	return /* @__PURE__ */ jsx(TabsContainerElement, {
+		...props,
+		children: /* @__PURE__ */ jsxs(FileTabsContext.Provider, {
+			value: {
+				addTab,
+				setTab,
+				removeTab,
+				setDirtyTab,
+				currentTab: activeKey
+			},
+			children: [/* @__PURE__ */ jsx(TabsPanelElement, {
+				ref: tabsRef,
+				"data-left-fade": leftFade || null,
+				"data-right-fade": rightFade || null,
+				children: tabs.map((tab) => {
+					return /* @__PURE__ */ jsx(Tab, {
+						isClosable,
+						isDisabled: tab.id === activeKey || false,
+						isDirty: tab.isDirty,
+						onPress: () => onPress(tab),
+						onClose: () => isClosable && handleClose(tab),
+						children: tab.title
+					}, tab.id);
+				})
+			}), /* @__PURE__ */ jsx(Flex, {
+				flexGrow: 1,
+				border: "top",
+				...paneStyles || {},
+				children
+			})]
+		})
+	});
+}
+FileTabs.TabPane = function FileTabPane(allProps) {
+	let { id, title, isDirty, children, ...props } = allProps;
+	const { addTab, removeTab, currentTab, setDirtyTab } = useContext(FileTabsContext);
+	useEffect(() => {
+		const tabData = {
+			id,
+			title,
+			isDirty
+		};
+		addTab(tabData);
+		return () => {
+			removeTab(tabData);
+		};
+	}, [id, title]);
+	useEffect(() => {
+		setDirtyTab(id, isDirty || false);
+	}, [isDirty]);
+	return /* @__PURE__ */ jsx(Block, {
+		style: {
+			display: id === currentTab ? "block" : "none",
+			maxWidth: "100%"
+		},
+		flexGrow: 1,
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { FileTabs };
+//# sourceMappingURL=FileTabs.js.map

package/dist/components/organisms/FileTabs/FileTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTabs.js","names":[],"sources":["../../../../src/components/organisms/FileTabs/FileTabs.tsx"],"sourcesContent":["import {\n  createContext,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CloseIcon } from '../../../icons';\nimport { Styles, tasty } from '../../../tasty';\nimport { useLayoutEffect } from '../../../utils/react';\nimport { Action, Button, CubeActionProps } from '../../actions';\nimport { Block } from '../../Block';\nimport { CubeFlexProps, Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\n\ninterface TabData {\n  id: string | number;\n  title?: string;\n  isDirty?: boolean;\n}\n\ninterface FileTabContextValue {\n  addTab: (tab: TabData) => void;\n  setTab: (id: string | number) => void;\n  removeTab: (tab: TabData) => void;\n  currentTab?: string | number;\n  setDirtyTab: (id: string | number, isDirty: boolean) => void;\n}\n\nconst FileTabsContext = createContext<FileTabContextValue>({\n  addTab() {},\n  removeTab() {},\n  setTab() {},\n  setDirtyTab() {},\n});\n\nconst TabsPanelElement = tasty(Space, {\n  qa: 'TabsPanel',\n  styles: {\n    position: 'relative',\n    overflow: 'auto hidden',\n    top: '1bw',\n    gap: '.5x',\n    flexShrink: 0,\n    whiteSpace: 'nowrap',\n    scrollbar: 'styled',\n    padding: '1ow 1ow 0 1ow',\n    fade: {\n      '': false,\n      'left-fade': '3x left',\n      'right-fade': '3x right',\n      'right-fade & left-fade': '3x left right',\n    },\n    transition: 'fade',\n    '--scrollbar-radius': '1ow',\n    '--scrollbar-width': '.75x',\n    '--scrollbar-outline-width': '1px',\n  },\n});\n\nconst TabsContainerElement = tasty(Flex, {\n  qa: 'TabsContainer',\n  styles: {\n    flow: 'column',\n    height: 'max 100%',\n    width: 'max 100%',\n    position: 'relative',\n  },\n});\n\nconst DirtyBadge = tasty({\n  element: 'DirtyBadge',\n  styles: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '1x',\n    height: '1x',\n    fill: '#dark.30',\n    radius: 'round',\n  },\n});\n\nconst TabElement = tasty(Action, {\n  styles: {\n    radius: '1r 1r 0 0',\n    padding: '1x 1.5x',\n    border: {\n      '': 'left top right #clear',\n      disabled: 'left top right #border',\n    },\n    fill: {\n      '': '#dark.04',\n      hovered: '#dark.08',\n      'disabled, disabled & hover': '#white',\n    },\n    color: {\n      '': '#dark-02',\n      'disabled, hovered, hovered & disabled': '#dark',\n    },\n    cursor: {\n      '': '$pointer',\n      disabled: 'default',\n    },\n    fontWeight: 500,\n    opacity: 1,\n    preset: 'default',\n    transform: {\n      '': 'translate(0, 0)',\n      disabled: 'translate(0, 1bw)',\n    },\n    transition: 'theme 0.2s',\n    margin: '1bw bottom',\n\n    DirtyBadge: {\n      opacity: {\n        '': 1,\n        'dirty & :hover': 0,\n      },\n      pointerEvents: {\n        '': 'auto',\n        'dirty & :hover': 'none',\n      },\n    },\n\n    CloseButton: {\n      opacity: {\n        '': 0,\n        '!dirty | :hover': 1,\n      },\n    },\n  },\n});\n\nconst CloseButton = tasty(Button, {\n  element: 'CloseButton',\n  type: 'neutral',\n  icon: <CloseIcon />,\n  label: 'Close Tab',\n  styles: {\n    width: '3x',\n    height: '3x',\n    padding: 0,\n  },\n});\n\n/**\n * @deprecated consider using <Tabs /> instead\n */\nexport interface FileTabProps extends Omit<CubeActionProps, 'id'> {\n  isDirty?: boolean;\n  isDisabled?: boolean;\n  children?: ReactNode;\n  isClosable?: boolean;\n  onClose?: () => void;\n}\n\nfunction Tab({\n  isDirty,\n  isDisabled,\n  children,\n  isClosable,\n  onClose,\n  ...props\n}: FileTabProps) {\n  return (\n    <TabElement\n      mods={{\n        dirty: isDirty,\n      }}\n      isDisabled={isDisabled}\n      {...props}\n    >\n      <Space gap=\".75x\">\n        <Block>{children}</Block>\n        {(isClosable || isDirty) && (\n          <Flex placeItems=\"center\" style={{ position: 'relative' }}>\n            {isClosable ? <CloseButton onPress={onClose} /> : <div></div>}\n            {isDirty ? <DirtyBadge /> : null}\n          </Flex>\n        )}\n      </Space>\n    </TabElement>\n  );\n}\n\nexport interface CubeFileTabsProps extends CubeFlexProps {\n  /** The initial active key in the tabs (uncontrolled). */\n  defaultActiveKey?: string;\n  /** The currently active key in the tabs (controlled). */\n  activeKey?: string | number;\n  /** Handler that is called when the tab is clicked. */\n  onTabClick?: (string) => void;\n  /** Handler that is called when the tab is closed. */\n  onTabClose?: (string) => void;\n  /** Styles for each tab pane */\n  paneStyles?: Styles;\n  /** Whether the tabs are closable */\n  isClosable?: boolean;\n  children?: ReactNode;\n}\n\nexport function FileTabs({\n  defaultActiveKey,\n  activeKey: activeKeyProp,\n  onTabClick,\n  onTabClose,\n  paneStyles,\n  isClosable = true,\n  children,\n  ...props\n}: CubeFileTabsProps) {\n  const tabsRef = useRef<HTMLButtonElement>(null);\n  const [tabs, setTabs] = useState<TabData[]>([]);\n  const [activeKey, setActiveKey] = useState<string | number | undefined>(\n    activeKeyProp || defaultActiveKey,\n  );\n\n  const [leftFade, setLeftFade] = useState(false);\n  const [rightFade, setRightFade] = useState(false);\n\n  function updateScroll() {\n    const el = tabsRef && tabsRef.current;\n\n    if (!el) return;\n\n    setLeftFade(!!el.scrollLeft);\n    setRightFade(\n      el.scrollWidth !== el.offsetWidth &&\n        !!(el.scrollWidth - el.offsetWidth - el.scrollLeft),\n    );\n  }\n\n  useLayoutEffect(updateScroll, [tabs]);\n\n  function scrollCurrentIntoView() {\n    const el = tabsRef && tabsRef.current;\n\n    if (!el) return;\n\n    const current = el.querySelector('button[disabled]');\n\n    if (!current) return;\n\n    current.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });\n  }\n\n  useEffect(() => {\n    function update() {\n      updateScroll();\n    }\n\n    if (tabsRef && tabsRef.current) {\n      tabsRef.current.addEventListener('scroll', update);\n      tabsRef.current.addEventListener('mousewheel', update);\n      window.addEventListener('resize', update);\n    }\n\n    return () => {\n      if (tabsRef && tabsRef.current) {\n        tabsRef.current.removeEventListener('scroll', update);\n        tabsRef.current.removeEventListener('mousewheel', update);\n      }\n\n      window.removeEventListener('resize', update);\n    };\n  }, [tabsRef]);\n\n  useEffect(scrollCurrentIntoView, [activeKey]);\n\n  useEffect(() => {\n    setActiveKey(activeKeyProp);\n  }, [activeKeyProp]);\n\n  function getTab(tabs: TabData[], key: string | number): TabData | undefined {\n    return tabs.find((tab) => tab.id === key);\n  }\n\n  function setTab(key: string | number) {\n    if (getTab(tabs, key)) {\n      setActiveKey(key);\n    }\n  }\n\n  function addTab(tab: TabData) {\n    setTabs((tabs) => {\n      if (!getTab(tabs, tab.id)) {\n        return [...tabs, tab];\n      }\n\n      return tabs;\n    });\n  }\n\n  function setDirtyTab(id: string | number, isDirty: boolean) {\n    setTabs((tabs) => {\n      const tab = getTab(tabs, id);\n\n      if (tab) {\n        tab.isDirty = isDirty;\n\n        return [...tabs];\n      }\n\n      return tabs;\n    });\n  }\n\n  function handleClose(tab) {\n    if (getTab(tabs, tab.id)) {\n      onTabClose && onTabClose(tab.id);\n    }\n  }\n\n  function removeTab(tab) {\n    setTabs((tabs) => {\n      const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);\n\n      setActiveKey((prevActiveKey) => {\n        if (prevActiveKey === tab.id) {\n          return _tabs[0] && _tabs[0].id;\n        }\n\n        return prevActiveKey;\n      });\n\n      return _tabs;\n    });\n  }\n\n  function onPress(tab) {\n    setTab(tab.id);\n    onTabClick && onTabClick(tab.id);\n  }\n\n  return (\n    <TabsContainerElement {...props}>\n      <FileTabsContext.Provider\n        value={{\n          addTab,\n          setTab,\n          removeTab,\n          setDirtyTab,\n          currentTab: activeKey,\n        }}\n      >\n        <TabsPanelElement\n          ref={tabsRef}\n          data-left-fade={leftFade || null}\n          data-right-fade={rightFade || null}\n        >\n          {tabs.map((tab) => {\n            return (\n              <Tab\n                key={tab.id}\n                isClosable={isClosable}\n                isDisabled={tab.id === activeKey || false}\n                isDirty={tab.isDirty}\n                onPress={() => onPress(tab)}\n                onClose={() => isClosable && handleClose(tab)}\n              >\n                {tab.title}\n              </Tab>\n            );\n          })}\n        </TabsPanelElement>\n        <Flex flexGrow={1} border=\"top\" {...(paneStyles || {})}>\n          {children}\n        </Flex>\n      </FileTabsContext.Provider>\n    </TabsContainerElement>\n  );\n}\n\nexport interface CubeFileTabProps extends FileTabProps {\n  id: string | number;\n  title: string;\n}\n\nFileTabs.TabPane = function FileTabPane(allProps: CubeFileTabProps) {\n  let { id, title, isDirty, children, ...props } = allProps;\n  const { addTab, removeTab, currentTab, setDirtyTab } =\n    useContext(FileTabsContext);\n\n  useEffect(() => {\n    const tabData = {\n      id,\n      title,\n      isDirty,\n    };\n\n    addTab(tabData);\n\n    return () => {\n      removeTab(tabData);\n    };\n  }, [id, title]);\n\n  useEffect(() => {\n    setDirtyTab(id, isDirty || false);\n  }, [isDirty]);\n\n  const isCurrent = id === currentTab;\n\n  return (\n    <Block\n      style={{ display: isCurrent ? 'block' : 'none', maxWidth: '100%' }}\n      flexGrow={1}\n      {...props}\n    >\n      {children}\n    </Block>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,kBAAkB,cAAmC;CACzD,SAAS;CACT,YAAY;CACZ,SAAS;CACT,cAAc;CACf,CAAC;AAEF,MAAM,mBAAmB,MAAM,OAAO;CACpC,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,UAAU;EACV,KAAK;EACL,KAAK;EACL,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,SAAS;EACT,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,cAAc;GACd,0BAA0B;GAC3B;EACD,YAAY;EACZ,sBAAsB;EACtB,qBAAqB;EACrB,6BAA6B;EAC9B;CACF,CAAC;AAEF,MAAM,uBAAuB,MAAM,MAAM;CACvC,IAAI;CACJ,QAAQ;EACN,MAAM;EACN,QAAQ;EACR,OAAO;EACP,UAAU;EACX;CACF,CAAC;AAEF,MAAM,aAAa,MAAM;CACvB,SAAS;CACT,QAAQ;EACN,UAAU;EACV,KAAK;EACL,MAAM;EACN,WAAW;EACX,OAAO;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,aAAa,MAAM,QAAQ,EAC/B,QAAQ;CACN,QAAQ;CACR,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,UAAU;EACX;CACD,MAAM;EACJ,IAAI;EACJ,SAAS;EACT,8BAA8B;EAC/B;CACD,OAAO;EACL,IAAI;EACJ,yCAAyC;EAC1C;CACD,QAAQ;EACN,IAAI;EACJ,UAAU;EACX;CACD,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,WAAW;EACT,IAAI;EACJ,UAAU;EACX;CACD,YAAY;CACZ,QAAQ;CAER,YAAY;EACV,SAAS;GACP,IAAI;GACJ,kBAAkB;GACnB;EACD,eAAe;GACb,IAAI;GACJ,kBAAkB;GACnB;EACF;CAED,aAAa,EACX,SAAS;EACP,IAAI;EACJ,mBAAmB;EACpB,EACF;CACF,EACF,CAAC;AAEF,MAAM,cAAc,MAAM,QAAQ;CAChC,SAAS;CACT,MAAM;CACN,MAAM,oBAAC,cAAY;CACnB,OAAO;CACP,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CACF,CAAC;AAaF,SAAS,IAAI,EACX,SACA,YACA,UACA,YACA,SACA,GAAG,SACY;AACf,QACE,oBAAC;EACC,MAAM,EACJ,OAAO,SACR;EACW;EACZ,GAAI;YAEJ,qBAAC;GAAM,KAAI;cACT,oBAAC,SAAO,WAAiB,GACvB,cAAc,YACd,qBAAC;IAAK,YAAW;IAAS,OAAO,EAAE,UAAU,YAAY;eACtD,aAAa,oBAAC,eAAY,SAAS,UAAW,GAAG,oBAAC,UAAU,EAC5D,UAAU,oBAAC,eAAa,GAAG;KACvB;IAEH;GACG;;AAoBjB,SAAgB,SAAS,EACvB,kBACA,WAAW,eACX,YACA,YACA,YACA,aAAa,MACb,UACA,GAAG,SACiB;CACpB,MAAM,UAAU,OAA0B,KAAK;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAoB,EAAE,CAAC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAChC,iBAAiB,iBAClB;CAED,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,SAAS,eAAe;EACtB,MAAM,KAAK,WAAW,QAAQ;AAE9B,MAAI,CAAC,GAAI;AAET,cAAY,CAAC,CAAC,GAAG,WAAW;AAC5B,eACE,GAAG,gBAAgB,GAAG,eACpB,CAAC,EAAE,GAAG,cAAc,GAAG,cAAc,GAAG,YAC3C;;AAGH,mBAAgB,cAAc,CAAC,KAAK,CAAC;CAErC,SAAS,wBAAwB;EAC/B,MAAM,KAAK,WAAW,QAAQ;AAE9B,MAAI,CAAC,GAAI;EAET,MAAM,UAAU,GAAG,cAAc,mBAAmB;AAEpD,MAAI,CAAC,QAAS;AAEd,UAAQ,eAAe;GAAE,UAAU;GAAU,QAAQ;GAAO,OAAO;GAAO,CAAC;;AAG7E,iBAAgB;EACd,SAAS,SAAS;AAChB,iBAAc;;AAGhB,MAAI,WAAW,QAAQ,SAAS;AAC9B,WAAQ,QAAQ,iBAAiB,UAAU,OAAO;AAClD,WAAQ,QAAQ,iBAAiB,cAAc,OAAO;AACtD,UAAO,iBAAiB,UAAU,OAAO;;AAG3C,eAAa;AACX,OAAI,WAAW,QAAQ,SAAS;AAC9B,YAAQ,QAAQ,oBAAoB,UAAU,OAAO;AACrD,YAAQ,QAAQ,oBAAoB,cAAc,OAAO;;AAG3D,UAAO,oBAAoB,UAAU,OAAO;;IAE7C,CAAC,QAAQ,CAAC;AAEb,WAAU,uBAAuB,CAAC,UAAU,CAAC;AAE7C,iBAAgB;AACd,eAAa,cAAc;IAC1B,CAAC,cAAc,CAAC;CAEnB,SAAS,OAAO,MAAiB,KAA2C;AAC1E,SAAO,KAAK,MAAM,QAAQ,IAAI,OAAO,IAAI;;CAG3C,SAAS,OAAO,KAAsB;AACpC,MAAI,OAAO,MAAM,IAAI,CACnB,cAAa,IAAI;;CAIrB,SAAS,OAAO,KAAc;AAC5B,WAAS,SAAS;AAChB,OAAI,CAAC,OAAO,MAAM,IAAI,GAAG,CACvB,QAAO,CAAC,GAAG,MAAM,IAAI;AAGvB,UAAO;IACP;;CAGJ,SAAS,YAAY,IAAqB,SAAkB;AAC1D,WAAS,SAAS;GAChB,MAAM,MAAM,OAAO,MAAM,GAAG;AAE5B,OAAI,KAAK;AACP,QAAI,UAAU;AAEd,WAAO,CAAC,GAAG,KAAK;;AAGlB,UAAO;IACP;;CAGJ,SAAS,YAAY,KAAK;AACxB,MAAI,OAAO,MAAM,IAAI,GAAG,CACtB,eAAc,WAAW,IAAI,GAAG;;CAIpC,SAAS,UAAU,KAAK;AACtB,WAAS,SAAS;GAChB,MAAM,QAAQ,KAAK,QAAQ,SAAS,KAAK,OAAO,IAAI,GAAG;AAEvD,iBAAc,kBAAkB;AAC9B,QAAI,kBAAkB,IAAI,GACxB,QAAO,MAAM,MAAM,MAAM,GAAG;AAG9B,WAAO;KACP;AAEF,UAAO;IACP;;CAGJ,SAAS,QAAQ,KAAK;AACpB,SAAO,IAAI,GAAG;AACd,gBAAc,WAAW,IAAI,GAAG;;AAGlC,QACE,oBAAC;EAAqB,GAAI;YACxB,qBAAC,gBAAgB;GACf,OAAO;IACL;IACA;IACA;IACA;IACA,YAAY;IACb;cAED,oBAAC;IACC,KAAK;IACL,kBAAgB,YAAY;IAC5B,mBAAiB,aAAa;cAE7B,KAAK,KAAK,QAAQ;AACjB,YACE,oBAAC;MAEa;MACZ,YAAY,IAAI,OAAO,aAAa;MACpC,SAAS,IAAI;MACb,eAAe,QAAQ,IAAI;MAC3B,eAAe,cAAc,YAAY,IAAI;gBAE5C,IAAI;QAPA,IAAI,GAQL;MAER;KACe,EACnB,oBAAC;IAAK,UAAU;IAAG,QAAO;IAAM,GAAK,cAAc,EAAE;IAClD;KACI;IACkB;GACN;;AAS3B,SAAS,UAAU,SAAS,YAAY,UAA4B;CAClE,IAAI,EAAE,IAAI,OAAO,SAAS,UAAU,GAAG,UAAU;CACjD,MAAM,EAAE,QAAQ,WAAW,YAAY,gBACrC,WAAW,gBAAgB;AAE7B,iBAAgB;EACd,MAAM,UAAU;GACd;GACA;GACA;GACD;AAED,SAAO,QAAQ;AAEf,eAAa;AACX,aAAU,QAAQ;;IAEnB,CAAC,IAAI,MAAM,CAAC;AAEf,iBAAgB;AACd,cAAY,IAAI,WAAW,MAAM;IAChC,CAAC,QAAQ,CAAC;AAIb,QACE,oBAAC;EACC,OAAO;GAAE,SAJK,OAAO,aAIS,UAAU;GAAQ,UAAU;GAAQ;EAClE,UAAU;EACV,GAAI;EAEH;GACK"}

package/dist/components/organisms/StatsCard/StatsCard.d.ts

@@ -0,0 +1,20 @@
+
+import { CubeCardProps } from "../../content/Card/Card.js";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/organisms/StatsCard/StatsCard.d.ts
+interface CubeStatsCard extends CubeCardProps {
+  title?: string | ReactNode;
+  value?: string | number | ReactNode;
+  suffix?: string | number | ReactNode;
+}
+declare function StatsCard({
+  title,
+  value,
+  suffix,
+  ...props
+}: CubeStatsCard): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CubeStatsCard, StatsCard };
+//# sourceMappingURL=StatsCard.d.ts.map

package/dist/components/organisms/StatsCard/StatsCard.js

@@ -0,0 +1,36 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { _Text } from "../../content/Text.js";
+import { _Title } from "../../content/Title.js";
+import { Card } from "../../content/Card/Card.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/organisms/StatsCard/StatsCard.tsx
+function StatsCard({ title, value, suffix, ...props }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		display: "flex",
+		placeContent: "space-between",
+		gap: "1x",
+		border: false,
+		shadow: "0 2px 6px #dark.10",
+		padding: "2.5x",
+		...props,
+		children: [/* @__PURE__ */ jsx(_Title, {
+			nowrap: true,
+			level: 4,
+			color: "#minor",
+			preset: "default",
+			children: title
+		}), /* @__PURE__ */ jsxs(_Text.Strong, {
+			preset: "h3",
+			children: [
+				value,
+				" ",
+				suffix
+			]
+		})]
+	});
+}
+
+//#endregion
+export { StatsCard };
+//# sourceMappingURL=StatsCard.js.map

package/dist/components/organisms/StatsCard/StatsCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatsCard.js","names":["Title","Text"],"sources":["../../../../src/components/organisms/StatsCard/StatsCard.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { Card, CubeCardProps } from '../../content/Card/Card';\nimport { Text } from '../../content/Text';\nimport { Title } from '../../content/Title';\n\nexport interface CubeStatsCard extends CubeCardProps {\n  title?: string | ReactNode;\n  value?: string | number | ReactNode;\n  suffix?: string | number | ReactNode;\n}\n\nexport function StatsCard({ title, value, suffix, ...props }: CubeStatsCard) {\n  return (\n    <Card\n      display=\"flex\"\n      placeContent=\"space-between\"\n      gap=\"1x\"\n      border={false}\n      shadow=\"0 2px 6px #dark.10\"\n      padding=\"2.5x\"\n      {...props}\n    >\n      <Title nowrap level={4} color=\"#minor\" preset=\"default\">\n        {title}\n      </Title>\n      <Text.Strong preset=\"h3\">\n        {value} {suffix}\n      </Text.Strong>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,UAAU,EAAE,OAAO,OAAO,QAAQ,GAAG,SAAwB;AAC3E,QACE,qBAAC;EACC,SAAQ;EACR,cAAa;EACb,KAAI;EACJ,QAAQ;EACR,QAAO;EACP,SAAQ;EACR,GAAI;aAEJ,oBAACA;GAAM;GAAO,OAAO;GAAG,OAAM;GAAS,QAAO;aAC3C;IACK,EACR,qBAACC,MAAK;GAAO,QAAO;;IACjB;IAAM;IAAE;;IACG;GACT"}