@cube-dev/ui-kit 0.98.9 → 0.99.0

package/es/index.js

@@ -1,97 +1,96 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { Paragraph } from './components/content/Paragraph';
-import { Text } from './components/content/Text';
-import { TextItem } from './components/content/TextItem';
-import { Title } from './components/content/Title';
-import './version';
+import { Paragraph } from './components/content/Paragraph.js';
+import { Text } from './components/content/Text.js';
+import { TextItem } from './components/content/TextItem/index.js';
+import { Title } from './components/content/Title.js';
+import './version.js';
 export { Section } from 'react-stately';
 export * from '@internationalized/date';
 // generic components
-export { CollectionItem } from './components/CollectionItem';
-export { Block } from './components/Block';
-export { Item } from './components/content/Item/Item';
+export { CollectionItem } from './components/CollectionItem.js';
+export { Block } from './components/Block.js';
+export { Item } from './components/content/Item/Item.js';
 // @deprecated Use `Item` instead
-export { ItemBase } from './components/content/Item/Item';
-export { ItemBadge } from './components/content/ItemBadge/ItemBadge';
-export { ActiveZone } from './components/content/ActiveZone/ActiveZone';
-export * from './components/content/CopySnippet';
-export * from './components/content/CopyPasteBlock';
-export { Grid } from './components/layout/Grid';
-export { Flex } from './components/layout/Flex';
-export { Link } from './components/actions/Link/Link';
-export { Space } from './components/layout/Space';
-export { Flow } from './components/layout/Flow';
-export { Panel } from './components/layout/Panel';
-export { ResizablePanel } from './components/layout/ResizablePanel';
-export { Root } from './components/Root';
-export { DisplayTransition } from './components/helpers/DisplayTransition/DisplayTransition';
-export { defaultNavigationAdapter } from './providers/navigationAdapter.default';
-export { PrismCode } from './components/content/PrismCode/PrismCode';
-export { PrismDiffCode } from './components/content/PrismDiffCode/PrismDiffCode';
-export { Prefix } from './components/layout/Prefix';
-export { Suffix } from './components/layout/Suffix';
-export { Divider } from './components/content/Divider';
-export { Disclosure } from './components/content/Disclosure';
-export { GridProvider } from './components/GridProvider';
-export { Content } from './components/content/Content';
-export { Header } from './components/content/Header';
-export { Footer } from './components/content/Footer';
-export { Result } from './components/content/Result/Result';
-export { Layout, GridLayout } from './components/content/Layout';
+export { ItemBase } from './components/content/Item/Item.js';
+export { ItemBadge } from './components/content/ItemBadge/ItemBadge.js';
+export { ActiveZone } from './components/content/ActiveZone/ActiveZone.js';
+export * from './components/content/CopySnippet/index.js';
+export * from './components/content/CopyPasteBlock/index.js';
+export { Grid } from './components/layout/Grid.js';
+export { Flex } from './components/layout/Flex.js';
+export { Link } from './components/actions/Link/Link.js';
+export { Space } from './components/layout/Space.js';
+export { Flow } from './components/layout/Flow.js';
+export { Panel } from './components/layout/Panel.js';
+export { ResizablePanel } from './components/layout/ResizablePanel.js';
+export { Root } from './components/Root.js';
+export { DisplayTransition } from './components/helpers/DisplayTransition/DisplayTransition.js';
+export { defaultNavigationAdapter } from './providers/navigationAdapter.default.js';
+export { PrismCode } from './components/content/PrismCode/PrismCode.js';
+export { PrismDiffCode } from './components/content/PrismDiffCode/PrismDiffCode.js';
+export { Prefix } from './components/layout/Prefix.js';
+export { Suffix } from './components/layout/Suffix.js';
+export { Divider } from './components/content/Divider.js';
+export { Disclosure } from './components/content/Disclosure/index.js';
+export { GridProvider } from './components/GridProvider.js';
+export { Content } from './components/content/Content.js';
+export { Header } from './components/content/Header.js';
+export { Footer } from './components/content/Footer.js';
+export { Result } from './components/content/Result/Result.js';
+export { Layout, GridLayout } from './components/content/Layout/index.js';
 // atoms
-export * from './components/status';
-export { Base64Upload } from './components/other/Base64Upload/Base64Upload';
-export { Card } from './components/content/Card/Card';
-export * from './components/actions';
-export { Placeholder } from './components/content/Placeholder/Placeholder';
-export { Skeleton } from './components/content/Skeleton/Skeleton';
-export { CloudLogo } from './components/other/CloudLogo/CloudLogo';
-export { Badge } from './components/content/Badge/Badge';
-export { Tag } from './components/content/Tag/Tag';
-export * from './components/content/HotKeys';
-export { ListBox } from './components/fields/ListBox';
-export { Menu } from './components/actions/Menu/Menu';
-export { MenuTrigger } from './components/actions/Menu/MenuTrigger';
-export { SubMenuTrigger } from './components/actions/Menu/SubMenuTrigger';
-export { CommandMenu } from './components/actions/CommandMenu';
-export { Select, ListBoxPopup } from './components/fields/Select/Select';
-export { Avatar } from './components/content/Avatar/Avatar';
-export { Dialog, DialogTrigger, DialogContainer, DialogForm, useDialogContainer, } from './components/overlays/Dialog';
-export { Tooltip } from './components/overlays/Tooltip/Tooltip';
-export { TooltipTrigger } from './components/overlays/Tooltip/TooltipTrigger';
-export { TooltipProvider } from './components/overlays/Tooltip/TooltipProvider';
-export * from './components/content/Alert';
+export * from './components/status/index.js';
+export { Card } from './components/content/Card/Card.js';
+export * from './components/actions/index.js';
+export { Placeholder } from './components/content/Placeholder/Placeholder.js';
+export { Skeleton } from './components/content/Skeleton/Skeleton.js';
+export { CloudLogo } from './components/other/CloudLogo/CloudLogo.js';
+export { Badge } from './components/content/Badge/Badge.js';
+export { Tag } from './components/content/Tag/Tag.js';
+export * from './components/content/HotKeys/index.js';
+export { ListBox } from './components/fields/ListBox/index.js';
+export { Menu } from './components/actions/Menu/Menu.js';
+export { MenuTrigger } from './components/actions/Menu/MenuTrigger.js';
+export { SubMenuTrigger } from './components/actions/Menu/SubMenuTrigger.js';
+export { CommandMenu } from './components/actions/CommandMenu/index.js';
+export { Select, ListBoxPopup } from './components/fields/Select/Select.js';
+export { Avatar } from './components/content/Avatar/Avatar.js';
+export { Dialog, DialogTrigger, DialogContainer, DialogForm, useDialogContainer, } from './components/overlays/Dialog/index.js';
+export { Tooltip } from './components/overlays/Tooltip/Tooltip.js';
+export { TooltipTrigger } from './components/overlays/Tooltip/TooltipTrigger.js';
+export { TooltipProvider } from './components/overlays/Tooltip/TooltipProvider.js';
+export * from './components/content/Alert/index.js';
 // molecules
-export { LegacyTabs } from './components/navigation/LegacyTabs/LegacyTabs';
-export { FileTabs } from './components/organisms/FileTabs/FileTabs';
-export { StatsCard } from './components/organisms/StatsCard/StatsCard';
-export { AlertDialog, useAlertDialogAPI, } from './components/overlays/AlertDialog';
+export { FileTabs } from './components/organisms/FileTabs/FileTabs.js';
+export { StatsCard } from './components/organisms/StatsCard/StatsCard.js';
+export { AlertDialog, useAlertDialogAPI, } from './components/overlays/AlertDialog/index.js';
 // services
-export { notification } from './services/notification';
-export * from './tasty';
+export { notification } from './services/notification.js';
+export * from './tasty/index.js';
 export const Typography = {
     Text: Text,
     Title,
     Paragraph,
 };
 export { Text, TextItem, Title, Paragraph };
-export { Provider, useProviderProps } from './provider';
-export { Portal } from './components/portal';
-export * from './components/fields';
-export * from './utils';
-export * from './tasty';
+export { Provider, useProviderProps } from './provider.js';
+export { Portal } from './components/portal/index.js';
+export * from './components/fields/index.js';
+export * from './utils/index.js';
+export * from './tasty/index.js';
 export { default as copy } from 'clipboard-copy';
 export * from '@react-aria/ssr';
-export * from './components/overlays/NewNotifications';
-export * from './components/overlays/Toasts';
-export * from './shared';
-export * from './icons';
-export * from './components/form';
+export * from './components/overlays/NewNotifications/index.js';
+export * from './components/overlays/Toasts/index.js';
+export * from './shared/index.js';
+export * from './icons/index.js';
+export * from './components/form/index.js';
+export * from './tokens/index.js';
 
         

package/es/provider.js

@@ -1,29 +1,24 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, } from 'react';
-import { defaultNavigationAdapter } from './providers/navigationAdapter.default';
-import { BreakpointsProvider } from './tasty';
-import { EventBusProvider } from './utils/react/useEventBus';
+import { defaultNavigationAdapter } from './providers/navigationAdapter.default.js';
+import { EventBusProvider } from './utils/react/useEventBus.js';
 export const UIKitContext = createContext({
     navigation: defaultNavigationAdapter,
 });
 export function Provider(allProps) {
-    let { breakpoints, children, insideForm, isDisabled, isReadOnly, isRequired, validationState, navigation, root, ref, } = allProps;
+    let { children, insideForm, isDisabled, isReadOnly, isRequired, validationState, navigation, root, ref, } = allProps;
     const parentContext = useContext(UIKitContext);
-    if (breakpoints) {
-        children = (_jsx(BreakpointsProvider, { value: breakpoints, children: children }));
-    }
     // Wrap with EventBusProvider for menu synchronization
     children = _jsx(EventBusProvider, { children: children });
     const props = useMemo(() => ({
         ref,
-        breakpoints,
         insideForm,
         isDisabled,
         isReadOnly,
@@ -33,7 +28,6 @@ export function Provider(allProps) {
         root,
     }), [
         ref,
-        breakpoints,
         insideForm,
         isDisabled,
         isReadOnly,

package/es/providers/TrackingProvider.js

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

package/es/providers/navigation.types.js

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

package/es/providers/navigationAdapter.default.js

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

package/es/services/notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import { Notification, } from '../components/overlays/Notification/Notification';
+import { Notification, } from '../components/overlays/Notification/Notification.js';
 let ID = 0;
 /**
  * @deprecated consider using `useNotificationsApi` instead

package/es/shared/form.js

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

package/es/shared/index.js

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

package/es/stories/Form.legacy-stories.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Field, Form, Input, ResetButton, Space, SubmitButton, SubmitError, TextInput, } from '../index';
-import { DialogFormApp } from './components/DialogFormApp';
-import { DISABLE_BASE_ARGS } from './FormFieldArgs';
+import { Field, Form, Input, ResetButton, Space, SubmitButton, SubmitError, TextInput, } from '../index.js';
+import { DialogFormApp } from './components/DialogFormApp.js';
+import { DISABLE_BASE_ARGS } from './FormFieldArgs.js';
 export default {
     title: 'Forms/Form',
     component: Form,

package/es/stories/FormFieldArgs.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { baseProps } from './lists/baseProps';
+import { baseProps } from './lists/baseProps.js';
 export const DISABLE_BASE_ARGS = baseProps.reduce((map, prop) => {
     map[prop] = { table: { disable: true } };
     return map;

package/es/stories/SimpleLayout.stories.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Block, Button, Card, Space, Flex as UIKitFlex, Flow as UIKitFlow, Grid as UIKitGrid, } from '../index';
+import { Block, Button, Card, Space, Flex as UIKitFlex, Flow as UIKitFlow, Grid as UIKitGrid, } from '../index.js';
 export default {
     title: 'Content/SimpleLayout',
 };

package/es/stories/Tasty.stories.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { GlobalStyledHeading, StyledButton as StyledButtonComponent, } from './components/StyledButton';
+import { GlobalStyledHeading, StyledButton as StyledButtonComponent, } from './components/StyledButton.js';
 export default {
     title: 'Styling/Global Styles',
 };

package/es/stories/components/ConfirmDeletionDialogForm.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DialogForm, Field, Input, Paragraph, Text, } from '../../index';
+import { DialogForm, Field, Input, Paragraph, Text, } from '../../index.js';
 export function ConfirmDeletionDialogForm(props) {
     let { name, onSubmit, onDismiss } = props;
     return (_jsxs(DialogForm, { title: "Delete Deployment", submitProps: {

package/es/stories/components/DialogFormApp.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DialogTrigger } from '../../index';
-import { ConfirmDeletionDialogForm } from './ConfirmDeletionDialogForm';
+import { Button, DialogTrigger } from '../../index.js';
+import { ConfirmDeletionDialogForm } from './ConfirmDeletionDialogForm.js';
 export function DialogFormApp() {
     return (_jsxs(DialogTrigger, { children: [_jsx(Button, { children: "Delete the instance" }), _jsx(ConfirmDeletionDialogForm, { name: "instanceName" })] }));
 }

package/es/stories/components/StyledButton.js

@@ -1,31 +1,35 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../components/actions';
-import { tasty } from '../../tasty';
+import { Button } from '../../components/actions/index.js';
+import { tasty, useGlobalStyles } from '../../tasty/index.js';
 export const StyledButton = tasty(Button, {
     styles: {
         padding: '3x 6x',
         preset: 't1',
+        fill: 'okhsl(200 40% 80%)',
     },
 });
-export const GlobalStyledHeading = tasty('.myButton', {
-    display: 'inline-block',
-    padding: '1x 2x',
-    preset: 't2',
-    border: true,
-    radius: true,
-    fill: {
-        '': '#white',
-        ':hover': '#purple.20',
-    },
-    color: '#dark',
-});
+export function GlobalStyledHeading() {
+    useGlobalStyles('.myButton', {
+        display: 'inline-block',
+        padding: '1x 2x',
+        preset: 't2',
+        border: true,
+        radius: true,
+        fill: {
+            '': '#white',
+            ':hover': '#purple.20',
+        },
+        color: '#dark',
+    });
+    return null;
+}
 export function Block() {
     return (_jsxs(_Fragment, { children: [_jsx(StyledButton, { children: "123" }), _jsx(GlobalStyledHeading, {})] }));
 }

package/es/stories/lists/baseProps.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES, } from '../../tasty';
+import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES, } from '../../tasty/index.js';
 const allStyles = Array.from(new Set([
     ...BASE_STYLES,
     ...POSITION_STYLES,

package/es/stories/playground/PlaygroundEditor.js

@@ -0,0 +1,89 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { json } from '@codemirror/lang-json';
+import CodeMirror from '@uiw/react-codemirror';
+import { parse } from 'best-effort-json-parser';
+import { useCallback, useRef, useState } from 'react';
+import { Layout } from '../../components/content/Layout/index.js';
+import { tasty } from '../../tasty/index.js';
+const ErrorDisplay = tasty({
+    styles: {
+        padding: '1x 2x',
+        fill: '#danger.10',
+        color: '#danger-text',
+        preset: 't4',
+        borderTop: '#danger.20',
+    },
+});
+export function PlaygroundEditor({ value, onChange }) {
+    const [error, setError] = useState(null);
+    const [editorValue, setEditorValue] = useState(() => JSON.stringify(value, null, 2));
+    const isFocusedRef = useRef(false);
+    const handleChange = useCallback((val) => {
+        setEditorValue(val);
+        try {
+            // Use best-effort parser for lenient parsing (handles JS-like syntax)
+            const parsed = parse(val);
+            if (parsed && typeof parsed === 'object') {
+                setError(null);
+                onChange(parsed);
+            }
+        }
+        catch (e) {
+            setError(e.message);
+        }
+    }, [onChange]);
+    const handleFocus = useCallback(() => {
+        isFocusedRef.current = true;
+    }, []);
+    // Normalize JSON on blur - format it properly
+    const handleBlur = useCallback(() => {
+        isFocusedRef.current = false;
+        try {
+            const parsed = parse(editorValue);
+            if (parsed && typeof parsed === 'object') {
+                const normalized = JSON.stringify(parsed, null, 2);
+                setEditorValue(normalized);
+                setError(null);
+            }
+        }
+        catch {
+            // Keep current value if parsing fails
+        }
+    }, [editorValue]);
+    // Normalize on paste
+    const handlePaste = useCallback(() => {
+        // Use setTimeout to let the paste complete first
+        setTimeout(() => {
+            try {
+                const parsed = parse(editorValue);
+                if (parsed && typeof parsed === 'object') {
+                    const normalized = JSON.stringify(parsed, null, 2);
+                    setEditorValue(normalized);
+                    setError(null);
+                }
+            }
+            catch {
+                // Keep current value if parsing fails
+            }
+        }, 0);
+    }, [editorValue]);
+    // Sync external value changes only when not focused
+    const currentJson = JSON.stringify(value, null, 2);
+    if (currentJson !== editorValue && !error && !isFocusedRef.current) {
+        setEditorValue(currentJson);
+    }
+    return (_jsxs(Layout, { height: "100%", children: [_jsx(Layout.Toolbar, { children: "Styles (JSON)" }), _jsx(Layout.Content, { padding: 0, children: _jsxs(Layout.Grid, { rows: "1sf max-content", flexGrow: 1, children: [_jsx(CodeMirror, { value: editorValue, height: "100%", extensions: [json()], theme: "light", basicSetup: {
+                                lineNumbers: true,
+                                foldGutter: true,
+                                highlightActiveLine: true,
+                            }, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste }), error && _jsxs(ErrorDisplay, { children: ["JSON Error: ", error] })] }) })] }));
+}
+
+        

package/es/stories/playground/PlaygroundLayout.js

@@ -0,0 +1,16 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Layout } from '../../components/content/Layout/index.js';
+export function PlaygroundLayout({ toolbar, editor, preview, output, }) {
+    return (_jsxs(Layout, { height: "100vh", children: [_jsx(Layout.Toolbar, { children: toolbar }), _jsx(Layout.Panel, { isResizable: true, side: "bottom", defaultSize: 250, minSize: 150, maxSize: 400, contentPadding: 0, sizeStorageKey: "tasty-playground-output-size", children: output }), preview ? (_jsxs(Layout, { children: [_jsx(Layout.Panel, { isResizable: true, side: "left", defaultSize: 450, minSize: 300, maxSize: 700, contentPadding: 0, sizeStorageKey: "tasty-playground-editor-size", children: editor }), _jsx(Layout.Content, { padding: 0, children: preview })] })) : (
+            /* No preview - editor takes full width */
+            _jsx(Layout.Content, { padding: 0, children: editor }))] }));
+}
+
+