@dxos/react-ui 0.9.0 → 0.9.1-staging.ee54ba693a

package/dist/types/src/components/List/Treegrid.stories.d.ts

@@ -1,12 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-declare const meta: {
-    title: string;
-    component: any;
-    render: () => React.JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-//# sourceMappingURL=Treegrid.stories.d.ts.map

package/dist/types/src/components/List/Treegrid.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Treegrid.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/Treegrid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AA2I1B,QAAA,MAAM,IAAI;;eAEoB,GAAG;;;CAGI,CAAC;eAEvB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/types/src/components/List/Treegrid.theme.d.ts

@@ -1,7 +0,0 @@
-import type { Theme } from '@dxos/ui-types';
-export type TreegridStyleProps = Partial<{
-    level: number;
-    indent: boolean;
-}>;
-export declare const treegridTheme: Theme<TreegridStyleProps>;
-//# sourceMappingURL=Treegrid.theme.d.ts.map

package/dist/types/src/components/List/Treegrid.theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Treegrid.theme.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/Treegrid.theme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAqB,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC,CAAC;AAoBH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,kBAAkB,CAInD,CAAC"}

package/dist/types/src/components/List/index.d.ts

@@ -1,4 +0,0 @@
-export * from './List';
-export * from './Tree';
-export * from './Treegrid';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/List/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC"}

package/src/components/Input/constants.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export const inputTextLabel = 'py-1 text-sm text-description';

package/src/components/List/List.stories.tsx

@@ -1,234 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
-import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type ReactNode, useCallback, useState } from 'react';
-
-import { getSize, ghostHover, mx, surfaceShadow } from '@dxos/ui-theme';
-
-import { withTheme } from '../../testing';
-import { Icon } from '../Icon';
-import { List, ListItem, type ListScopedProps } from './List';
-
-const meta = {
-  title: 'ui/react-ui-core/components/List',
-  component: List,
-  decorators: [withTheme()],
-} satisfies Meta<typeof List>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const UniformListItem = ({ id, text }: { id: string; text: string }) => {
-  const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
-  return (
-    <ListItem.Root
-      id={id}
-      ref={setNodeRef}
-      {...attributes}
-      {...listeners}
-      style={{ transform: CSS.Transform.toString(transform) }}
-    >
-      <ListItem.Endcap>
-        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mt-2.5')} />
-      </ListItem.Endcap>
-      <ListItem.Heading classNames='grow pt-2'>{text}</ListItem.Heading>
-      <ListItem.Endcap>
-        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mt-2.5')} />
-      </ListItem.Endcap>
-    </ListItem.Root>
-  );
-};
-
-export const UniformSizeDraggable: Story = {
-  render: ({ ...args }) => {
-    const [items, setItems] = useState(
-      [...Array(12)].map((_, index) => ({
-        id: `listItem-${index}`,
-        text: `List item ${index + 1}`,
-      })),
-    );
-
-    const handleDragEnd = useCallback(
-      (event: DragEndEvent) => {
-        const { active, over } = event;
-        if (active.id !== over?.id) {
-          setItems((items) => {
-            const oldIndex = items.findIndex((item) => item.id === active.id);
-            const newIndex = items.findIndex((item) => item.id === over?.id);
-            return arrayMove(items, oldIndex, newIndex);
-          });
-        }
-      },
-      [items],
-    );
-
-    return (
-      <DndContext onDragEnd={handleDragEnd}>
-        <SortableContext items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
-          <List {...args} itemSizes='one'>
-            {items.map((item) => (
-              <UniformListItem key={item.id} {...item} />
-            ))}
-          </List>
-        </SortableContext>
-      </DndContext>
-    );
-  },
-  args: {},
-};
-
-const ManySizesDraggableListItem = ({
-  id,
-  text,
-  className,
-  dragging,
-  __listScope,
-}: ListScopedProps<{ id: string; text: ReactNode; className?: string; dragging?: boolean }>) => {
-  const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
-  return (
-    <ListItem.Root
-      id={id}
-      classNames={[dragging && 'relative z-10', className]}
-      ref={setNodeRef}
-      {...attributes}
-      {...listeners}
-      style={{ transform: CSS.Translate.toString(transform) }}
-    >
-      <ListItem.Endcap>
-        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mt-2.5')} />
-      </ListItem.Endcap>
-      <ListItem.Heading classNames='grow pt-2' asChild>
-        {text}
-      </ListItem.Heading>
-      <ListItem.Endcap>
-        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mt-2.5')} />
-      </ListItem.Endcap>
-    </ListItem.Root>
-  );
-};
-
-export const ManySizesDraggable: Story = {
-  render: ({ ...args }) => {
-    const [items, setItems] = useState(
-      [...Array(12)].map((_, index) => ({
-        id: `listItem-${index}`,
-        text: (
-          <p
-            className={mx(
-              index % 3 === 0 ? 'h-20' : index % 2 === 0 ? 'h-12' : 'h-8',
-              surfaceShadow({ elevation: 'positioned' }),
-              'mb-2 p-2 bg-white dark:bg-neutral-800 rounded-sm',
-            )}
-          >{`List item ${index + 1}`}</p>
-        ),
-      })),
-    );
-
-    const [activeId, setActiveId] = useState<string | null>(null);
-
-    const handleDragStart = ({ active: { id } }: DragStartEvent) => setActiveId(id.toString());
-
-    const handleDragEnd = (event: DragEndEvent) => {
-      const { active, over } = event;
-
-      if (active.id !== over?.id) {
-        setItems((items) => {
-          const oldIndex = items.findIndex((item) => item.id === active.id);
-          const newIndex = items.findIndex((item) => item.id === over?.id);
-          return arrayMove(items, oldIndex, newIndex);
-        });
-      }
-    };
-
-    return (
-      <DndContext onDragEnd={handleDragEnd} onDragStart={handleDragStart}>
-        <SortableContext items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
-          <List {...args}>
-            {items.map(({ id, text }) => (
-              <ManySizesDraggableListItem key={id} {...{ id, text }} dragging={activeId === id} />
-            ))}
-          </List>
-        </SortableContext>
-      </DndContext>
-    );
-  },
-  args: {},
-};
-
-export const Collapsible: Story = {
-  render: ({ ...args }) => {
-    const [items, _setItems] = useState(
-      [...Array(12)].map((_, index) => ({
-        id: `listItem-${index}`,
-        text: `List item ${index + 1}`,
-        body: `Collapsible content for item ${index + 1}`,
-      })),
-    );
-
-    return (
-      <List {...args}>
-        {items.map(({ id, text, body }, index) => (
-          <ListItem.Root key={id} id={id} collapsible={index !== 2} defaultOpen={index % 2 === 0}>
-            <div className='grow flex'>
-              {index !== 2 ? <ListItem.OpenTrigger /> : <ListItem.MockOpenTrigger />}
-              <ListItem.Heading classNames='grow pt-2'>{text}</ListItem.Heading>
-              <ListItem.Endcap>
-                <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mt-2.5')} />
-              </ListItem.Endcap>
-            </div>
-            {index !== 2 && <ListItem.CollapsibleContent>{body}</ListItem.CollapsibleContent>}
-          </ListItem.Root>
-        ))}
-      </List>
-    );
-  },
-  args: {
-    variant: 'unordered',
-  },
-};
-
-export const SelectableListbox: Story = {
-  render: () => {
-    const [selectedId, setSelectedId] = useState<string>();
-    const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical' });
-    const [items, _setItems] = useState(
-      [...Array(12)].map((_, index) => ({
-        id: `listItem-${index}`,
-        text: `List item ${index + 1}`,
-      })),
-    );
-
-    const handleKeyUp = (event: any, id: string) => {
-      switch (event.key) {
-        case ' ':
-        case 'Enter': {
-          setSelectedId(id);
-        }
-      }
-    };
-
-    return (
-      <List selectable {...arrowNavigationAttrs}>
-        {items.map(({ id, text }) => (
-          <ListItem.Root
-            key={id}
-            tabIndex={0}
-            selected={selectedId === id}
-            classNames={mx(ghostHover, 'dx-selected')}
-            onClick={() => setSelectedId(id)}
-            onKeyUp={(event) => handleKeyUp(event, id)}
-          >
-            <ListItem.Heading classNames='flex px-1 items-center grow truncate'>{text}</ListItem.Heading>
-          </ListItem.Root>
-        ))}
-      </List>
-    );
-  },
-};

package/src/components/List/List.theme.ts

@@ -1,47 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { densityBlockSize, ghostHover } from '@dxos/ui-theme';
-import { getSize, mx } from '@dxos/ui-theme';
-import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
-
-export type ListStyleProps = Partial<{
-  density: Density;
-  collapsible: boolean;
-}>;
-
-const root: ComponentFunction<ListStyleProps> = (_, ...etc) => mx(...etc);
-
-const item: ComponentFunction<ListStyleProps> = ({ collapsible }, ...etc) => mx(!collapsible && 'flex', ...etc);
-
-const itemEndcap: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx(
-    density === 'lg' ? getSize(10) : density === 'sm' ? getSize(7) : density === 'xs' ? getSize(6) : getSize(8),
-    'shrink-0 flex items-center justify-center',
-    ...etc,
-  );
-
-const itemHeading: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx(densityBlockSize(density), 'flex items-center overflow-hidden [&>span]:truncate', ...etc);
-
-const itemDragHandleIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) => mx(getSize(5), 'mt-2.5', ...etc);
-
-const itemOpenTrigger: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx('w-5 rounded-sm flex justify-center items-center', densityBlockSize(density), ghostHover, 'dx-focus-ring', ...etc);
-
-const itemOpenTriggerIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) => {
-  return mx(getSize(5), ...etc);
-};
-
-export const listTheme: Theme<ListStyleProps> = {
-  root,
-  item: {
-    root: item,
-    endcap: itemEndcap,
-    heading: itemHeading,
-    dragHandleIcon: itemDragHandleIcon,
-    openTrigger: itemOpenTrigger,
-    openTriggerIcon: itemOpenTriggerIcon,
-  },
-};

package/src/components/List/List.tsx

@@ -1,171 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
-
-import {
-  LIST_ITEM_NAME,
-  LIST_NAME,
-  ListItemCollapsibleContent,
-  type ListItemCollapsibleContentProps,
-  type ListItemScopedProps,
-  List as ListPrimitive,
-  ListItem as ListPrimitiveItem,
-  ListItemHeading as ListPrimitiveItemHeading,
-  type ListItemHeadingProps as ListPrimitiveItemHeadingProps,
-  ListItemOpenTrigger as ListPrimitiveItemOpenTrigger,
-  type ListItemOpenTriggerProps as ListPrimitiveItemOpenTriggerProps,
-  type ListItemProps as ListPrimitiveItemProps,
-  type ListProps as ListPrimitiveProps,
-  type ListScopedProps,
-  useListContext,
-  useListItemContext,
-} from '@dxos/react-list';
-import { type Density } from '@dxos/ui-types';
-
-import { useDensityContext, useThemeContext } from '../../hooks';
-import { DensityProvider } from '../../primitives';
-import { composable, composableProps } from '../../util';
-import { type ThemedClassName } from '../../util';
-import { Icon } from '../Icon';
-import { ListDropIndicator } from './ListDropIndicator';
-
-type ListProps = ThemedClassName<ListPrimitiveProps & { density?: Density }>;
-
-const List = composable<HTMLOListElement, ListProps>(({ children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const density = useDensityContext(props.density);
-  const { className, ...rest } = composableProps(props);
-
-  return (
-    <DensityProvider density={density}>
-      <ListPrimitive {...rest} className={tx('list.root', {}, className)} ref={forwardedRef}>
-        {children}
-      </ListPrimitive>
-    </DensityProvider>
-  );
-});
-
-type ListItemEndcapProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
-
-const ListItemEndcap = forwardRef<HTMLDivElement, ListItemEndcapProps>(
-  ({ children, classNames, asChild, ...props }, forwardedRef) => {
-    const Comp = asChild ? Slot : Primitive.div;
-    const density = useDensityContext();
-    const { tx } = useThemeContext();
-    return (
-      <Comp
-        {...(!asChild && { role: 'none' })}
-        {...props}
-        className={tx('list.item.endcap', { density }, classNames)}
-        ref={forwardedRef}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
-
-const MockListItemOpenTrigger = ({
-  classNames,
-  ...props
-}: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
-  const density = useDensityContext();
-  const { tx } = useThemeContext();
-  return <div {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
-};
-
-type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;
-
-const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
-  ({ children, classNames, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const density = useDensityContext();
-    return (
-      <ListPrimitiveItemHeading
-        {...props}
-        className={tx('list.item.heading', { density }, classNames)}
-        ref={forwardedRef}
-      >
-        <span>{children}</span>
-      </ListPrimitiveItemHeading>
-    );
-  },
-);
-
-type ListItemOpenTriggerProps = ThemedClassName<ListPrimitiveItemOpenTriggerProps>;
-
-const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerProps>(
-  ({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const density = useDensityContext();
-    const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-    return (
-      <ListPrimitiveItemOpenTrigger
-        {...props}
-        className={tx('list.item.openTrigger', { density }, classNames)}
-        ref={forwardedRef}
-      >
-        {children || (
-          <Icon
-            size={3}
-            icon={open ? 'ph--caret-down--bold' : 'ph--caret-right--bold'}
-            classNames={tx('list.item.openTriggerIcon', {})}
-          />
-        )}
-      </ListPrimitiveItemOpenTrigger>
-    );
-  },
-);
-
-type ListItemRootProps = ThemedClassName<ListPrimitiveItemProps>;
-
-const ListItemRoot = forwardRef<HTMLLIElement, ListItemRootProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const density = useDensityContext();
-    return (
-      <ListPrimitiveItem
-        {...props}
-        className={tx('list.item.root', { density, collapsible: props.collapsible }, classNames)}
-        ref={forwardedRef}
-      >
-        {children}
-      </ListPrimitiveItem>
-    );
-  },
-);
-
-export const ListItem: {
-  Root: ForwardRefExoticComponent<ListItemRootProps>;
-  Endcap: ForwardRefExoticComponent<ListItemEndcapProps>;
-  Heading: ForwardRefExoticComponent<ListItemHeadingProps>;
-  OpenTrigger: ForwardRefExoticComponent<ListItemOpenTriggerProps>;
-  CollapsibleContent: ForwardRefExoticComponent<ListItemCollapsibleContentProps>;
-  MockOpenTrigger: FC<ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>>;
-  DropIndicator: typeof ListDropIndicator;
-} = {
-  Root: ListItemRoot,
-  Endcap: ListItemEndcap,
-  Heading: ListItemHeading,
-  OpenTrigger: ListItemOpenTrigger,
-  CollapsibleContent: ListItemCollapsibleContent,
-  MockOpenTrigger: MockListItemOpenTrigger,
-  DropIndicator: ListDropIndicator,
-};
-
-export { List, useListContext, useListItemContext, LIST_NAME, LIST_ITEM_NAME };
-
-export type {
-  ListProps,
-  ListScopedProps,
-  ListItemRootProps,
-  ListItemScopedProps,
-  ListItemEndcapProps,
-  ListItemHeadingProps,
-  ListItemOpenTriggerProps,
-  ListItemCollapsibleContentProps,
-};

package/src/components/List/ListDropIndicator.tsx

@@ -1,69 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
-import React, { type CSSProperties, type HTMLAttributes } from 'react';
-
-type Orientation = 'horizontal' | 'vertical';
-
-const edgeToOrientationMap: Record<Edge, Orientation> = {
-  top: 'horizontal',
-  bottom: 'horizontal',
-  left: 'vertical',
-  right: 'vertical',
-};
-
-const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  horizontal:
-    'h-(--line-thickness) left-[calc(var(--line-inset)+var(--terminal-radius))] right-(--line-inset) before:left-(--terminal-inset)',
-  vertical:
-    'w-(--line-thickness) top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-(--line-inset) before:top-(--terminal-inset)',
-};
-
-const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
-  top: 'top-(--line-offset) before:top-(--offset-terminal)',
-  right: 'right-(--line-offset) before:right-(--offset-terminal)',
-  bottom: 'bottom-(--line-offset) before:bottom-(--offset-terminal)',
-  left: 'left-(--line-offset) before:left-(--offset-terminal)',
-};
-
-const strokeSize = 2;
-const terminalSize = 8;
-const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-
-export type DropIndicatorProps = {
-  edge: Edge;
-  gap?: number;
-  terminalInset?: number;
-  lineInset?: number;
-};
-
-/**
- * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
- */
-export const ListDropIndicator = ({
-  edge,
-  gap = 0,
-  lineInset = 0,
-  terminalInset = lineInset - terminalSize,
-}: DropIndicatorProps) => {
-  const orientation = edgeToOrientationMap[edge];
-
-  return (
-    <div
-      style={
-        {
-          '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
-          '--line-inset': `${lineInset}px`,
-          '--terminal-size': `${terminalSize}px`,
-          '--terminal-radius': `${terminalSize / 2}px`,
-          '--terminal-inset': `${terminalInset}px`,
-          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
-        } as CSSProperties
-      }
-      className={`absolute z-10 pointer-events-none bg-accent-bg before:content-[''] before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-bg before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`}
-    />
-  );
-};

package/src/components/List/Tree.stories.tsx

@@ -1,87 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { withTheme } from '../../testing';
-import { Tree, TreeItem } from './Tree';
-
-type StorybookTreeProps = {
-  data: any;
-};
-
-type StorybookTreeItemProps = {
-  data: any;
-  prefix?: string;
-};
-
-const isScalar = (data: any) => !(typeof data === 'object' || Array.isArray(data));
-
-const createKey = (key: string, prefix?: string) => (prefix === undefined ? key : `${prefix}.${key}`);
-
-const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
-  const keys = Array.isArray(data) ? Array.from(data.keys()) : Object.keys(data);
-  return (
-    <Tree.Root>
-      {keys.map((key) => {
-        const id = createKey(String(key), prefix);
-        const value = data[key as keyof typeof data];
-        const valueIsScalar = isScalar(value);
-
-        return (
-          <TreeItem.Root key={id} id={id} collapsible={!valueIsScalar} defaultOpen>
-            <div className='grow flex'>
-              {valueIsScalar ? <TreeItem.MockOpenTrigger /> : <TreeItem.OpenTrigger />}
-              <TreeItem.Heading classNames='grow pt-1'>{valueIsScalar ? String(value) : key}</TreeItem.Heading>
-            </div>
-            {!valueIsScalar && (
-              <TreeItem.Body className='ps-2'>
-                <Tree.Branch>
-                  <StorybookTreeItem data={value} prefix={id} />
-                </Tree.Branch>
-              </TreeItem.Body>
-            )}
-          </TreeItem.Root>
-        );
-      })}
-    </Tree.Root>
-  );
-};
-
-const DefaultStory = ({ data }: StorybookTreeProps) => {
-  return <StorybookTreeItem data={data} />;
-};
-
-const meta = {
-  title: 'ui/react-ui-core/components/Tree',
-  component: Tree as any,
-  render: DefaultStory,
-  decorators: [withTheme()],
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    data: {
-      foo: 100,
-      bar: {
-        zoo: 200,
-      },
-      tags: ['a', 'b', 'c'],
-      items: [
-        {
-          a: true,
-          b: 100,
-        },
-        {
-          c: 200,
-        },
-      ],
-    },
-  },
-};