@dxos/react-ui 0.3.10-next.ef70620 → 0.3.11-main.008b7c6

package/src/components/Select/Select.stories.tsx

@@ -59,7 +59,7 @@ const StorybookSelect = ({ items = [] }: PropsWithChildren<{ items: ItemProps[]
 };
 
 export default {
-  title: 'DXOS UI/Select',
+  title: 'react-ui/Select',
   component: createDensityTest(StorybookSelect),
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/components/Status/Status.stories.tsx

@@ -10,7 +10,7 @@ import { Status } from './Status';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'DXOS UI/Status',
+  title: 'react-ui/Status',
   component: Status,
   actions: { argTypesRegex: '^on.*' },
   decorators: [withTheme],

package/src/components/Tag/Tag.stories.tsx

@@ -8,7 +8,7 @@ import { Tag } from './Tag';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'DXOS UI/Tag',
+  title: 'react-ui/Tag',
   component: Tag,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -29,7 +29,7 @@ export type ThemeProviderProps = Omit<TranslationsProviderProps, 'children'> &
 
 export const ThemeContext = createContext<ThemeContextValue>({
   tx: (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
-  themeMode: 'dark',
+  themeMode: 'dark', // TODO(burdon): Reconsider default.
   hasIosKeyboard: false,
 });
 

package/src/components/Toast/Toast.stories.tsx

@@ -45,7 +45,7 @@ const StorybookToast = (props: StorybookToastProps) => {
 };
 
 export default {
-  title: 'DXOS UI/Toast',
+  title: 'react-ui/Toast',
   component: StorybookToast,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -70,7 +70,7 @@ const StorybookToolbar = (props: StorybookToolbarProps) => {
 };
 
 export default {
-  title: 'DXOS UI/Toolbar',
+  title: 'react-ui/Toolbar',
   component: StorybookToolbar,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -29,7 +29,7 @@ const StoryTooltip = ({ content }: StoryTooltipProps) => (
 );
 
 export default {
-  title: 'DXOS UI/Tooltip',
+  title: 'react-ui/Tooltip',
   component: StoryTooltip,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/components/index.ts

@@ -7,7 +7,7 @@ export * from './Avatars';
 export * from './Breadcrumb';
 export * from './Buttons';
 export * from './Dialogs';
-export * from './DropdownMenu';
+export * from './Menus';
 export * from './Input';
 export * from './Link';
 export * from './Lists';

package/src/playground/Controls.stories.tsx

@@ -83,7 +83,7 @@ const Story = () => {
 };
 
 export default {
-  title: 'DXOS UI/Scenarios/Controls',
+  title: 'react-ui/Scenarios/Controls',
   component: Story,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/playground/Surfaces.stories.tsx

@@ -58,7 +58,7 @@ const SurfacesStory = () => {
 };
 
 export default {
-  title: 'DXOS UI/Scenarios/Surfaces',
+  title: 'react-ui/Scenarios/Surfaces',
   component: SurfacesStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/playground/Typography.stories.tsx

@@ -0,0 +1,55 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { withTheme } from '../testing';
+
+const TypographyStory = () => {
+  return (
+    <div className='mli-auto p-8 max-is-[60rem] space-b-4'>
+      <h1 className='text-4xl font-medium'>
+        Việc <span className='italic'>thừa</span> nhận{' '}
+        <span className='font-mono bg-neutral-500/10'>
+          nhân <span className='italic'>phẩm ~~&gt;</span> vốn
+        </span>{' '}
+        có, các quyền
+      </h1>
+      <p>
+        Không ai bị bắt, giam giữ hay đày đi nơi khác một cách độc đoán. Mọi người, với tư cách bình đẳng về mọi phương
+        diện, đều có quyền được một toà án độc lập và vô tư phân xử công bằng và công khai để xác định quyền, nghĩa vụ
+        hoặc bất cứ một lời buộc tội nào đối với người đó.
+      </p>
+      <h2 className='text-xl font-semibold'>
+        Mọi <span className='font-mono'>Mọi</span> người đều có quyền nghỉ ngơi và giải trí, kể cả quyền được hạn chế
+        hợp lý về số giờ làm việc và hưởng những ngày nghỉ định kỳ được trả lương.
+      </h2>
+      <p className='font-mono bg-neutral-500/10'>
+        Mọi người đều có quyền được hưởng trật tự xã hội và trật tự quốc tế trong đó các quyền và tự do nêu trong Bản
+        tuyên ngôn này có thể được thực hiện đầy đủ.
+      </p>
+      <p className='italic'>
+        Không được phép diễn giải bất kỳ điều khoản nào trong Bản tuyên ngôn này theo hướng ngầm ý cho phép bất kỳ quốc
+        gia,{' '}
+        <span className='not-italic'>
+          nhóm người hay cá nhân nào được quyền tham gia vào bất kỳ hoạt động nào hay thực hiện bất kỳ hành vi nào nhằm
+          phá hoại bất kỳ quyền và tự do nào nêu trong Bản tuyên ngôn này.
+        </span>
+      </p>
+    </div>
+  );
+};
+
+export default {
+  title: 'DXOS UI/Scenarios/Typography',
+  component: TypographyStory,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const Default = {
+  args: {},
+};

package/dist/types/src/components/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,IAAI,8BAA8B,EAExD,KAAK,wBAAwB,IAAI,iCAAiC,EAElE,KAAK,uBAAuB,IAAI,gCAAgC,EAEhE,KAAK,wBAAwB,IAAI,iCAAiC,EAElE,KAAK,sBAAsB,IAAI,+BAA+B,EAE9D,KAAK,sBAAsB,IAAI,+BAA+B,EAE9D,KAAK,qBAAqB,IAAI,8BAA8B,EAE5D,KAAK,6BAA6B,IAAI,sCAAsC,EAE5E,KAAK,8BAA8B,IAAI,uCAAuC,EAE9E,KAAK,0BAA0B,IAAI,mCAAmC,EAEtE,KAAK,sBAAsB,IAAI,+BAA+B,EAC/D,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,KAAK,qBAAqB,GAAG,8BAA8B,CAAC;AAI5D,KAAK,wBAAwB,GAAG,iCAAiC,CAAC;AAIlE,KAAK,uBAAuB,GAAG,gCAAgC,CAAC;AAIhE,KAAK,wBAAwB,GAAG,eAAe,CAAC,iCAAiC,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAmBtH,KAAK,yBAAyB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkBF,KAAK,sBAAsB,GAAG,eAAe,CAAC,+BAA+B,CAAC,CAAC;AAe/E,KAAK,sBAAsB,GAAG,+BAA+B,CAAC;AAI9D,KAAK,8BAA8B,GAAG,uCAAuC,CAAC;AAI9E,KAAK,qBAAqB,GAAG,eAAe,CAAC,8BAA8B,CAAC,CAAC;AAe7E,KAAK,6BAA6B,GAAG,eAAe,CAAC,sCAAsC,CAAC,CAAC;AAe7F,KAAK,0BAA0B,GAAG,eAAe,CAAC,mCAAmC,CAAC,CAAC;AAevF,KAAK,2BAA2B,GAAG,eAAe,CAAC,+BAA+B,CAAC,CAAC;AAepF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;CAaxB,CAAC;AAEF,YAAY,EACV,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,8BAA8B,EAC9B,0BAA0B,EAC1B,2BAA2B,GAC5B,CAAC"}

package/dist/types/src/components/DropdownMenu/DropdownMenu.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;;;;;;;;AAyFpB,wBAKE;AAEF,eAAO,MAAM,OAAO;;;;;;;CAKnB,CAAC"}

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

@@ -1,2 +0,0 @@
-export * from './DropdownMenu';
-//# sourceMappingURL=index.d.ts.map

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

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

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,198 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-import {
-  Root as DropdownMenuRootPrimitive,
-  type DropdownMenuProps as DropdownMenuRootPrimitiveProps,
-  DropdownMenuTrigger as DropdownMenuTriggerPrimitive,
-  type DropdownMenuTriggerProps as DropdownMenuTriggerPrimitiveProps,
-  DropdownMenuPortal as DropdownMenuPortalPrimitive,
-  type DropdownMenuPortalProps as DropdownMenuPortalPrimitiveProps,
-  DropdownMenuContent as DropdownMenuContentPrimitive,
-  type DropdownMenuContentProps as DropdownMenuContentPrimitiveProps,
-  DropdownMenuArrow as DropdownMenuArrowPrimitive,
-  type DropdownMenuArrowProps as DropdownMenuArrowPrimitiveProps,
-  DropdownMenuGroup as DropdownMenuGroupPrimitive,
-  type DropdownMenuGroupProps as DropdownMenuGroupPrimitiveProps,
-  DropdownMenuItem as DropdownMenuItemPrimitive,
-  type DropdownMenuItemProps as DropdownMenuItemPrimitiveProps,
-  DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,
-  type DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps,
-  DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,
-  type DropdownMenuItemIndicatorProps as DropdownMenuItemIndicatorPrimitiveProps,
-  DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,
-  type DropdownMenuSeparatorProps as DropdownMenuSeparatorPrimitiveProps,
-  DropdownMenuLabel as DropdownMenuLabelPrimitive,
-  type DropdownMenuLabelProps as DropdownMenuLabelPrimitiveProps,
-} from '@radix-ui/react-dropdown-menu';
-import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
-
-import { useThemeContext } from '../../hooks';
-import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
-
-type DropdownMenuRootProps = DropdownMenuRootPrimitiveProps;
-
-const DropdownMenuRoot = DropdownMenuRootPrimitive;
-
-type DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;
-
-const DropdownMenuTrigger = DropdownMenuTriggerPrimitive;
-
-type DropdownMenuPortalProps = DropdownMenuPortalPrimitiveProps;
-
-const DropdownMenuPortal = DropdownMenuPortalPrimitive;
-
-type DropdownMenuContentProps = ThemedClassName<DropdownMenuContentPrimitiveProps> & { constrainBlockSize?: boolean };
-
-const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuContentPrimitive
-        sideOffset={4}
-        collisionPadding={8}
-        {...props}
-        className={tx('dropdownMenu.content', 'dropdown-menu', {}, classNames)}
-        ref={forwardedRef}
-      >
-        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
-      </DropdownMenuContentPrimitive>
-    );
-  },
-);
-
-type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  asChild?: boolean;
-};
-
-const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProps>(
-  ({ classNames, asChild, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    return (
-      <Root
-        {...props}
-        className={tx('dropdownMenu.viewport', 'dropdown-menu__viewport', {}, classNames)}
-        ref={forwardedRef}
-      >
-        {children}
-      </Root>
-    );
-  },
-);
-
-type DropdownMenuArrowProps = ThemedClassName<DropdownMenuArrowPrimitiveProps>;
-
-const DropdownMenuArrow = forwardRef<SVGSVGElement, DropdownMenuArrowProps>(
-  ({ classNames, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuArrowPrimitive
-        {...props}
-        className={tx('dropdownMenu.arrow', 'dropdown-menu__arrow', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;
-
-const DropdownMenuGroup = DropdownMenuGroupPrimitive;
-
-type DropdownMenuItemIndicatorProps = DropdownMenuItemIndicatorPrimitiveProps;
-
-const DropdownMenuItemIndicator = DropdownMenuItemIndicatorPrimitive;
-
-type DropdownMenuItemProps = ThemedClassName<DropdownMenuItemPrimitiveProps>;
-
-const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
-  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuItemPrimitive
-        {...props}
-        className={tx('dropdownMenu.item', 'dropdown-menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DropdownMenuCheckboxItemProps = ThemedClassName<DropdownMenuCheckboxItemPrimitiveProps>;
-
-const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
-  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuCheckboxItemPrimitive
-        {...props}
-        className={tx('dropdownMenu.item', 'dropdown-menu__item--checkbox', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DropdownMenuSeparatorProps = ThemedClassName<DropdownMenuSeparatorPrimitiveProps>;
-
-const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
-  ({ classNames, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuSeparatorPrimitive
-        {...props}
-        className={tx('dropdownMenu.separator', 'dropdown-menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DropdownMenuGroupLabelProps = ThemedClassName<DropdownMenuLabelPrimitiveProps>;
-
-const DropdownMenuGroupLabel = forwardRef<HTMLDivElement, DropdownMenuGroupLabelProps>(
-  ({ classNames, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuLabelPrimitive
-        {...props}
-        className={tx('dropdownMenu.groupLabel', 'dropdown-menu__group__label', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-export const DropdownMenu = {
-  Root: DropdownMenuRoot,
-  Trigger: DropdownMenuTrigger,
-  Portal: DropdownMenuPortal,
-  Content: DropdownMenuContent,
-  Viewport: DropdownMenuViewport,
-  Arrow: DropdownMenuArrow,
-  Group: DropdownMenuGroup,
-  Item: DropdownMenuItem,
-  CheckboxItem: DropdownMenuCheckboxItem,
-  ItemIndicator: DropdownMenuItemIndicator,
-  Separator: DropdownMenuSeparator,
-  GroupLabel: DropdownMenuGroupLabel,
-};
-
-export type {
-  DropdownMenuRootProps,
-  DropdownMenuTriggerProps,
-  DropdownMenuPortalProps,
-  DropdownMenuContentProps,
-  DropdownMenuViewportProps,
-  DropdownMenuArrowProps,
-  DropdownMenuGroupProps,
-  DropdownMenuItemProps,
-  DropdownMenuCheckboxItemProps,
-  DropdownMenuItemIndicatorProps,
-  DropdownMenuSeparatorProps,
-  DropdownMenuGroupLabelProps,
-};