@dxos/react-ui-stack 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/dist/lib/browser/index.mjs +188 -416
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/browser/translations.mjs +23 -0
  5. package/dist/lib/browser/translations.mjs.map +7 -0
  6. package/dist/lib/node-esm/index.mjs +188 -416
  7. package/dist/lib/node-esm/index.mjs.map +4 -4
  8. package/dist/lib/node-esm/meta.json +1 -1
  9. package/dist/lib/node-esm/translations.mjs +25 -0
  10. package/dist/lib/node-esm/translations.mjs.map +7 -0
  11. package/dist/types/src/components/Stack/Stack.d.ts +4 -9
  12. package/dist/types/src/components/Stack/Stack.d.ts.map +1 -1
  13. package/dist/types/src/components/Stack/Stack.stories.d.ts.map +1 -1
  14. package/dist/types/src/components/StackItem/MenuSignifier.d.ts.map +1 -1
  15. package/dist/types/src/components/StackItem/StackItem.d.ts +5 -5
  16. package/dist/types/src/components/StackItem/StackItem.d.ts.map +1 -1
  17. package/dist/types/src/components/StackItem/StackItem.stories.d.ts.map +1 -1
  18. package/dist/types/src/components/StackItem/StackItemDragHandle.d.ts.map +1 -1
  19. package/dist/types/src/components/StackItem/StackItemHeading.d.ts +1 -1
  20. package/dist/types/src/components/StackItem/StackItemHeading.d.ts.map +1 -1
  21. package/dist/types/src/components/StackItem/StackItemResizeHandle.d.ts +1 -1
  22. package/dist/types/src/components/StackItem/StackItemResizeHandle.d.ts.map +1 -1
  23. package/dist/types/src/components/StackItem/StackItemSigil.d.ts.map +1 -1
  24. package/dist/types/src/components/index.d.ts +0 -1
  25. package/dist/types/src/components/index.d.ts.map +1 -1
  26. package/dist/types/src/hooks/useStackDropForElements.d.ts.map +1 -1
  27. package/dist/types/src/index.d.ts +0 -1
  28. package/dist/types/src/index.d.ts.map +1 -1
  29. package/dist/types/src/playwright/playwright.config.d.ts.map +1 -1
  30. package/dist/types/src/playwright/stack-manager.d.ts.map +1 -1
  31. package/dist/types/src/translations.d.ts +8 -8
  32. package/dist/types/src/translations.d.ts.map +1 -1
  33. package/dist/types/tsconfig.tsbuildinfo +1 -1
  34. package/package.json +34 -35
  35. package/src/components/Stack/Stack.stories.tsx +8 -10
  36. package/src/components/Stack/Stack.tsx +197 -210
  37. package/src/components/StackItem/MenuSignifier.tsx +2 -9
  38. package/src/components/StackItem/StackItem.stories.tsx +4 -4
  39. package/src/components/StackItem/StackItem.tsx +13 -15
  40. package/src/components/StackItem/StackItemContent.tsx +6 -6
  41. package/src/components/StackItem/StackItemDragHandle.tsx +4 -3
  42. package/src/components/StackItem/StackItemHeading.tsx +13 -12
  43. package/src/components/StackItem/StackItemResizeHandle.tsx +1 -2
  44. package/src/components/StackItem/StackItemSigil.tsx +8 -5
  45. package/src/components/index.ts +1 -1
  46. package/src/hooks/useStackDropForElements.ts +2 -2
  47. package/src/index.ts +0 -1
  48. package/src/playwright/playwright.config.ts +1 -1
  49. package/src/translations.ts +8 -8
  50. package/dist/types/src/components/CardStack/CardStack.d.ts +0 -47
  51. package/dist/types/src/components/CardStack/CardStack.d.ts.map +0 -1
  52. package/dist/types/src/components/CardStack/CardStack.stories.d.ts +0 -15
  53. package/dist/types/src/components/CardStack/CardStack.stories.d.ts.map +0 -1
  54. package/dist/types/src/components/CardStack/CardStackDragPreview.d.ts +0 -12
  55. package/dist/types/src/components/CardStack/CardStackDragPreview.d.ts.map +0 -1
  56. package/dist/types/src/components/CardStack/index.d.ts +0 -3
  57. package/dist/types/src/components/CardStack/index.d.ts.map +0 -1
  58. package/dist/types/src/components/deprecated/LayoutControls.d.ts +0 -22
  59. package/dist/types/src/components/deprecated/LayoutControls.d.ts.map +0 -1
  60. package/src/components/CardStack/CardStack.stories.tsx +0 -173
  61. package/src/components/CardStack/CardStack.tsx +0 -195
  62. package/src/components/CardStack/CardStackDragPreview.tsx +0 -64
  63. package/src/components/CardStack/index.ts +0 -6
  64. package/src/components/deprecated/LayoutControls.tsx +0 -112
@@ -5,14 +5,7 @@
5
5
  import React from 'react';
6
6
 
7
7
  export const MenuSignifierHorizontal = () => (
8
- <svg
9
- className='absolute block-end-[7px]'
10
- width={20}
11
- height={2}
12
- viewBox='0 0 20 2'
13
- stroke='currentColor'
14
- opacity={0.5}
15
- >
8
+ <svg className='absolute bottom-[7px]' width={20} height={2} viewBox='0 0 20 2' stroke='currentColor' opacity={0.5}>
16
9
  <line
17
10
  x1={0.5}
18
11
  y1={0.75}
@@ -27,7 +20,7 @@ export const MenuSignifierHorizontal = () => (
27
20
  );
28
21
 
29
22
  export const MenuSignifierVertical = () => (
30
- <svg className='absolute inline-start-1' width={2} height={18} viewBox='0 0 2 18' stroke='currentColor'>
23
+ <svg className='absolute left-1' width={2} height={18} viewBox='0 0 2 18' stroke='currentColor'>
31
24
  <line x1={1} y1={3} x2={1} y2={18} strokeWidth={1.5} strokeLinecap='round' strokeDasharray='0 6' />
32
25
  </svg>
33
26
  );
@@ -12,14 +12,14 @@ import { StackItem, type StackItemRootProps } from './StackItem';
12
12
 
13
13
  const DefaultStory = (props: StackItemRootProps) => {
14
14
  return (
15
- <StackItem.Root role='section' {...props} classNames='is-[20rem] border border-separator'>
16
- <StackItem.Heading classNames='is-full border-be border-separator'>
15
+ <StackItem.Root role='section' {...props} classNames='w-[20rem] border border-separator'>
16
+ <StackItem.Heading classNames='w-full border-b border-separator'>
17
17
  <span className='sr-only'>Title</span>
18
- <div role='none' className='sticky -block-start-px bg-[--sticky-bg] p-1 is-full'>
18
+ <div role='none' className='sticky -top-px bg-(--sticky-bg) p-1 w-full'>
19
19
  <DropdownMenu.Root>
20
20
  <DropdownMenu.Trigger asChild>
21
21
  <StackItem.SigilButton>
22
- <Icon icon='ph--dots-three--regular' size={5} />
22
+ <Icon icon='ph--dots-three--regular' />
23
23
  </StackItem.SigilButton>
24
24
  </DropdownMenu.Trigger>
25
25
  </DropdownMenu.Root>
@@ -2,15 +2,15 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
6
- import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
7
- import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
8
- import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
9
5
  import {
10
6
  type Edge,
11
7
  attachClosestEdge,
12
8
  extractClosestEdge,
13
9
  } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
10
+ import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
11
+ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
12
+ import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
13
+ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
14
14
  import { useFocusableGroup } from '@fluentui/react-tabster';
15
15
  import { composeRefs } from '@radix-ui/react-compose-refs';
16
16
  import React, {
@@ -30,7 +30,6 @@ import { mx } from '@dxos/ui-theme';
30
30
 
31
31
  import { type ItemDragState, StackItemContext, idle, useStack, useStackItem } from '../StackContext';
32
32
  import { type StackItemData, type StackItemSize } from '../types';
33
-
34
33
  import { StackItemContent, type StackItemContentProps } from './StackItemContent';
35
34
  import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
36
35
  import {
@@ -49,9 +48,8 @@ import {
49
48
  type StackItemSigilProps,
50
49
  } from './StackItemSigil';
51
50
 
52
- // NOTE: 48rem fills the screen on a MacbookPro with the sidebars closed.
53
- export const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;
54
51
  export const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;
52
+ export const DEFAULT_HORIZONTAL_SIZE = 50 satisfies StackItemSize;
55
53
  export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;
56
54
 
57
55
  //
@@ -59,13 +57,13 @@ export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackIte
59
57
  //
60
58
 
61
59
  type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
60
+ role?: 'article' | 'section';
62
61
  item: Omit<StackItemData, 'type'>;
63
62
  order?: number;
64
63
  prevSiblingId?: string;
65
64
  nextSiblingId?: string;
66
65
  size?: StackItemSize;
67
66
  onSizeChange?: (nextSize: StackItemSize) => void;
68
- role?: 'article' | 'section';
69
67
  disableRearrange?: boolean;
70
68
  focusIndicatorVariant?: 'over-all' | 'group' | 'over-all-always' | 'group-always';
71
69
  };
@@ -73,16 +71,16 @@ type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
73
71
  const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
74
72
  (
75
73
  {
76
- item,
77
- children,
78
74
  classNames,
79
- size: propsSize,
80
- onSizeChange,
75
+ children,
76
+ style,
81
77
  role,
78
+ item,
82
79
  order,
83
80
  prevSiblingId,
84
81
  nextSiblingId,
85
- style,
82
+ size: sizeProp,
83
+ onSizeChange,
86
84
  disableRearrange,
87
85
  focusIndicatorVariant = 'over-all',
88
86
  ...props
@@ -97,7 +95,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
97
95
  const [dragState, setDragState] = useState<ItemDragState>(idle);
98
96
  const { orientation, rail, onRearrange, size: stackSize, stackId } = useStack();
99
97
  const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =
100
- useState(propsSize);
98
+ useState(sizeProp);
101
99
 
102
100
  const Root = role ?? 'div';
103
101
 
@@ -247,7 +245,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
247
245
  : 'dx-focus-ring-group-y',
248
246
  orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',
249
247
  rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),
250
- role === 'section' && orientation !== 'horizontal' && 'border-be border-subduedSeparator',
248
+ role === 'section' && orientation !== 'horizontal' && 'border-b border-subdued-separator',
251
249
  classNames,
252
250
  )}
253
251
  data-dx-stack-item={stackId}
@@ -24,9 +24,9 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
24
24
  const style = useMemo(
25
25
  () => ({
26
26
  gridTemplateRows: [
27
- toolbar && role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)',
27
+ toolbar && role === 'section' ? 'calc(var(--dx-toolbar-size) - 1px)' : 'var(--dx-toolbar-size)',
28
28
  '1fr',
29
- statusbar && 'var(--statusbar-size)',
29
+ statusbar && 'var(--dx-statusbar-size)',
30
30
  ]
31
31
  .filter(Boolean)
32
32
  .join(' '),
@@ -40,12 +40,12 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
40
40
  role='none'
41
41
  style={style}
42
42
  className={mx(
43
- 'group grid grid-cols-[100%] density-coarse',
44
- stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
43
+ 'group grid grid-cols-[100%] dx-density-coarse',
44
+ stackItemSize === 'contain' && 'min-h-0 overflow-hidden',
45
45
  toolbar &&
46
46
  role === 'section' &&
47
- '[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0',
48
- toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',
47
+ '[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:top-0 [&_.dx-toolbar]:-mb-px [&_.dx-toolbar]:min-w-0',
48
+ toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-b [&>.dx-toolbar]:border-subdued-separator',
49
49
  classNames,
50
50
  )}
51
51
  data-popover-collision-boundary={true}
@@ -2,6 +2,7 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
+ import { Primitive } from '@radix-ui/react-primitive';
5
6
  import { Slot } from '@radix-ui/react-slot';
6
7
  import React, { type ComponentPropsWithoutRef } from 'react';
7
8
 
@@ -12,11 +13,11 @@ export type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { as
12
13
  export const StackItemDragHandle = ({ asChild, children }: StackItemDragHandleProps) => {
13
14
  const { selfDragHandleRef } = useStackItem();
14
15
 
15
- const Root = asChild ? Slot : 'div';
16
+ const Comp = asChild ? Slot : Primitive.div;
16
17
 
17
18
  return (
18
- <Root ref={selfDragHandleRef} role='button'>
19
+ <Comp ref={selfDragHandleRef} role='button'>
19
20
  {children}
20
- </Root>
21
+ </Comp>
21
22
  );
22
23
  };
@@ -2,6 +2,7 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
+ import { Primitive } from '@radix-ui/react-primitive';
5
6
  import { Slot } from '@radix-ui/react-slot';
6
7
  import React, {
7
8
  type ComponentPropsWithRef,
@@ -26,34 +27,34 @@ export const StackItemHeading = ({
26
27
  classNames,
27
28
  asChild,
28
29
  separateOnScroll,
30
+ role,
29
31
  ...props
30
32
  }: StackItemHeadingProps) => {
31
33
  const { orientation } = useStack();
32
-
33
- const Root = asChild ? Slot : 'div';
34
+ const Comp = asChild ? Slot : Primitive.div;
34
35
 
35
36
  return (
36
- <Root
37
- role='heading'
37
+ <Comp
38
38
  {...props}
39
+ role={role ?? 'heading'}
39
40
  className={mx(
40
- 'flex items-center !border-is-0 bg-headerSurface',
41
+ 'flex items-center border-x-0! bg-header-surface',
41
42
  separateOnScroll
42
- ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator'
43
- : 'border-subduedSeparator',
44
- orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',
45
- orientation === 'horizontal' ? 'border-be' : 'border-ie',
43
+ ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subdued-separator'
44
+ : 'border-subdued-separator',
45
+ orientation === 'horizontal' ? 'h-(--dx-rail-size)' : 'w-(--dx-rail-size) flex-col',
46
+ orientation === 'horizontal' ? 'border-b' : 'border-e',
46
47
  classNames,
47
48
  )}
48
49
  >
49
50
  {children}
50
- </Root>
51
+ </Comp>
51
52
  );
52
53
  };
53
54
 
54
55
  export const StackItemHeadingStickyContent = ({ children }: PropsWithChildren<{}>) => {
55
56
  return (
56
- <div role='none' className='sticky block-start-0 bg-[--sticky-bg] p-1 is-full'>
57
+ <div role='none' className='sticky top-0 bg-(--sticky-bg) p-1 w-full'>
57
58
  {children}
58
59
  </div>
59
60
  );
@@ -70,7 +71,7 @@ export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHea
70
71
  {...props}
71
72
  data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}
72
73
  className={mx(
73
- 'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center',
74
+ 'px-1 min-w-0 w-0 grow truncate font-medium text-base-surface-text data-[attention=true]:text-accent-text self-center',
74
75
  classNames,
75
76
  )}
76
77
  ref={forwardedRef}
@@ -7,7 +7,6 @@ import React from 'react';
7
7
  import { ResizeHandle } from '@dxos/react-ui-dnd';
8
8
 
9
9
  import { useStack, useStackItem } from '../StackContext';
10
-
11
10
  import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
12
11
 
13
12
  const MIN_WIDTH = 20;
@@ -15,7 +14,7 @@ const MIN_HEIGHT = 3;
15
14
 
16
15
  export type StackItemResizeHandleProps = {};
17
16
 
18
- export const StackItemResizeHandle = () => {
17
+ export const StackItemResizeHandle = (_: StackItemResizeHandleProps) => {
19
18
  const { orientation } = useStack();
20
19
  const { setSize, size } = useStackItem();
21
20
 
@@ -8,10 +8,10 @@ import { type Node } from '@dxos/app-graph';
8
8
  import { keySymbols } from '@dxos/keyboard';
9
9
  import { Button, type ButtonProps, DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
10
10
  import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
11
- import { descriptionText, mx } from '@dxos/ui-theme';
11
+ import { mx } from '@dxos/ui-theme';
12
12
  import { getHostPlatform } from '@dxos/util';
13
13
 
14
- import { translationKey } from '../../translations';
14
+ import { translationKey } from '#translations';
15
15
 
16
16
  import { MenuSignifierHorizontal } from './MenuSignifier';
17
17
 
@@ -40,7 +40,10 @@ export const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigil
40
40
  <Button
41
41
  {...props}
42
42
  variant={variant}
43
- classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag', classNames]}
43
+ classNames={[
44
+ 'shrink-0 px-0 min-h-0 w-(--dx-rail-action) h-(--dx-rail-action) relative dx-app-no-drag',
45
+ classNames,
46
+ ]}
44
47
  ref={forwardedRef}
45
48
  >
46
49
  {isMenu && <MenuSignifierHorizontal />}
@@ -78,7 +81,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
78
81
  classNames={!hasActions && 'cursor-default'}
79
82
  >
80
83
  <span className='sr-only'>{triggerLabel}</span>
81
- <Icon icon={icon} size={5} />
84
+ <Icon icon={icon} />
82
85
  </StackItemSigilButton>
83
86
  );
84
87
 
@@ -133,7 +136,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
133
136
  </DropdownMenu.ItemIndicator>
134
137
  )}
135
138
  {shortcut && (
136
- <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>
139
+ <span className={mx('shrink-0', 'text-description')}>{keySymbols(shortcut).join('')}</span>
137
140
  )}
138
141
  </Root>
139
142
  );
@@ -4,6 +4,6 @@
4
4
 
5
5
  export type * from './types';
6
6
 
7
- export * from './CardStack';
8
7
  export * from './Stack';
8
+
9
9
  export * from './StackItem';
@@ -2,10 +2,10 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
6
- import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
7
5
  import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
8
6
  import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
7
+ import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
8
+ import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
9
9
  import { useLayoutEffect, useState } from 'react';
10
10
 
11
11
  import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
package/src/index.ts CHANGED
@@ -3,4 +3,3 @@
3
3
  //
4
4
 
5
5
  export * from './components';
6
- export * from './translations';
@@ -10,7 +10,7 @@ export default defineConfig({
10
10
  ...e2ePreset(import.meta.dirname),
11
11
  // TODO(wittjosiah): Avoid hard-coding ports.
12
12
  webServer: {
13
- command: 'moon run storybook-react:serve-e2e -- --port=9003',
13
+ command: 'pnpm storybook dev --ci --quiet --port=9003 --config-dir=.storybook',
14
14
  port: 9003,
15
15
  reuseExistingServer: false,
16
16
  },
@@ -10,14 +10,14 @@ export const translations = [
10
10
  {
11
11
  'en-US': {
12
12
  [translationKey]: {
13
- 'resize label': 'Drag to resize',
14
- 'drag handle label': 'Drag to rearrange',
15
- 'pin start label': 'Pin to the left sidebar',
16
- 'pin end label': 'Pin to the right sidebar',
17
- 'increment start label': 'Move to the left',
18
- 'increment end label': 'Move to the right',
19
- 'close label': 'Close',
20
- 'minify label': 'Minify',
13
+ 'resize.label': 'Drag to resize',
14
+ 'drag-handle.label': 'Drag to rearrange',
15
+ 'pin-start.label': 'Pin to the left sidebar',
16
+ 'pin-end.label': 'Pin to the right sidebar',
17
+ 'increment-start.label': 'Move to the left',
18
+ 'increment-end.label': 'Move to the right',
19
+ 'close.label': 'Close',
20
+ 'minify.label': 'Minify',
21
21
  },
22
22
  },
23
23
  },
@@ -1,47 +0,0 @@
1
- import React from 'react';
2
- import { type StackProps } from '../Stack';
3
- /**
4
- * This is `cardDefaultInlineSize` plus 2 times the sum of the inner and outer spacing applied by CardStack on the inline axis.
5
- */
6
- declare const cardStackDefaultInlineSizeRem: number;
7
- declare const cardStackRoot = "flex flex-col";
8
- declare const cardStackContent = "shrink min-bs-0 grid dx-focus-ring-group-x-indicator bg-baseSurface";
9
- declare const cardStackItem = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
10
- declare const cardStackHeading = "mli-2 order-first bg-transparent rounded-bs-md flex items-center";
11
- declare const cardStackFooter = "plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end=\"true\"]_&]:border-subduedSeparator";
12
- /**
13
- * @deprecated Replace with Mosaic.Stack.
14
- */
15
- export declare const CardStack: {
16
- Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
17
- classNames?: import("@dxos/ui-types").ClassNameValue;
18
- } & {
19
- asChild?: boolean;
20
- } & React.RefAttributes<HTMLDivElement>>;
21
- Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
22
- classNames?: import("@dxos/ui-types").ClassNameValue;
23
- } & {
24
- asChild?: boolean;
25
- } & {
26
- footer?: boolean;
27
- } & React.RefAttributes<HTMLDivElement>>;
28
- Stack: React.ForwardRefExoticComponent<Omit<Omit<StackProps, "orientation" | "rail" | "size" | "separatorOnScroll">, "ref"> & React.RefAttributes<HTMLDivElement>>;
29
- Heading: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
30
- classNames?: import("@dxos/ui-types").ClassNameValue;
31
- } & {
32
- asChild?: boolean;
33
- } & React.RefAttributes<HTMLDivElement>>;
34
- Footer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
35
- classNames?: import("@dxos/ui-types").ClassNameValue;
36
- } & {
37
- asChild?: boolean;
38
- } & React.RefAttributes<HTMLDivElement>>;
39
- DragHandle: React.ForwardRefExoticComponent<React.RefAttributes<HTMLButtonElement>>;
40
- Item: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
41
- classNames?: import("@dxos/ui-types").ClassNameValue;
42
- } & {
43
- asChild?: boolean;
44
- } & React.RefAttributes<HTMLDivElement>>;
45
- };
46
- export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem, cardStackDefaultInlineSizeRem, };
47
- //# sourceMappingURL=CardStack.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/CardStack.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAMzE,OAAO,EAAS,KAAK,UAAU,EAAuC,MAAM,UAAU,CAAC;AAEvF;;GAEG;AACH,QAAA,MAAM,6BAA6B,QAAgC,CAAC;AAMpE,QAAA,MAAM,aAAa,kBAAkB,CAAC;AAsBtC,QAAA,MAAM,gBAAgB,wEAAwE,CAAC;AA4D/F,QAAA,MAAM,aAAa,sEAAsE,CAAC;AAqB1F,QAAA,MAAM,gBAAgB,qEAAqE,CAAC;AAqB5F,QAAA,MAAM,eAAe,8GACsF,CAAC;AA2B5G;;GAEG;AACH,eAAO,MAAM,SAAS;;;;kBAzGV,OAAO;;;;;kBAAP,OAAO;;iBAzBR,OAAO;;;;;;kBAyBN,OAAO;;;;;kBAAP,OAAO;;;;;;kBAAP,OAAO;;CAiHlB,CAAC;AAEF,OAAO,EACL,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,6BAA6B,GAC9B,CAAC"}
@@ -1,15 +0,0 @@
1
- import { type StoryObj } from '@storybook/react-vite';
2
- import React from 'react';
3
- declare const CardStackStory: () => React.JSX.Element;
4
- declare const meta: {
5
- title: string;
6
- component: () => React.JSX.Element;
7
- decorators: import("@storybook/react").Decorator[];
8
- parameters: {
9
- layout: string;
10
- };
11
- };
12
- export default meta;
13
- type Story = StoryObj<typeof CardStackStory>;
14
- export declare const Default: Story;
15
- //# sourceMappingURL=CardStack.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardStack.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/CardStack.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAgC,MAAM,OAAO,CAAC;AAyBrD,QAAA,MAAM,cAAc,yBA8HnB,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;;;CAO6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
@@ -1,12 +0,0 @@
1
- import React, { type PropsWithChildren } from 'react';
2
- import { type StackProps } from '../Stack';
3
- /**
4
- * @deprecated
5
- */
6
- export declare const CardStackDragPreview: {
7
- Root: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
8
- Heading: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
9
- Content: ({ children, itemsCount, }: PropsWithChildren<Pick<StackProps, "itemsCount">>) => React.JSX.Element;
10
- Footer: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
11
- };
12
- //# sourceMappingURL=CardStackDragPreview.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardStackDragPreview.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/CardStackDragPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AA6C3C;;GAEG;AACH,eAAO,MAAM,oBAAoB;yBA9Ce,iBAAiB,CAAC,EAAE,CAAC;4BAUlB,iBAAiB,CAAC,EAAE,CAAC;yCAmBrE,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;2BAUF,iBAAiB,CAAC,EAAE,CAAC;CAYtE,CAAC"}
@@ -1,3 +0,0 @@
1
- export * from './CardStack';
2
- export * from './CardStackDragPreview';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC"}
@@ -1,22 +0,0 @@
1
- import React from 'react';
2
- import { type ButtonGroupProps } from '@dxos/react-ui';
3
- export type LayoutControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;
4
- export type LayoutControlHandler = (event: LayoutControlEvent) => void;
5
- export type LayoutCapabilities = {
6
- incrementStart?: boolean;
7
- incrementEnd?: boolean;
8
- solo?: boolean;
9
- };
10
- export type LayoutControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
11
- onClick?: LayoutControlHandler;
12
- variant?: 'hide-disabled' | 'default';
13
- close?: boolean | 'minify-start' | 'minify-end';
14
- capabilities: LayoutCapabilities;
15
- isSolo?: boolean;
16
- pin?: 'start' | 'end' | 'both';
17
- };
18
- /**
19
- * @deprecated
20
- */
21
- export declare const LayoutControls: React.ForwardRefExoticComponent<Omit<LayoutControlsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
22
- //# sourceMappingURL=LayoutControls.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LayoutControls.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/LayoutControls.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAe,KAAK,gBAAgB,EAAgD,MAAM,gBAAgB,CAAC;AAIlH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,KAAK,GAAG,WAAW,IAAI,OAAO,GAAG,KAAK,EAAE,CAAC;AAChG,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,OAAO,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,YAAY,CAAC;IAChD,YAAY,EAAE,kBAAkB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;CAChC,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,cAAc,yGA4E1B,CAAC"}