npm - @dxos/react-ui - Versions diffs - 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb - Mend

@dxos/react-ui 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

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 (183) hide show

package/src/components/Dialog/Dialog.tsx CHANGED Viewed

@@ -86,7 +86,7 @@ const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<
     return (
       <DialogOverlayPrimitive
         {...props}
-        className={tx('dialog.overlay', 'dialog__overlay', {}, classNames)}
+        className={tx('dialog.overlay', {}, classNames)}
         ref={forwardedRef}
         data-block-align={blockAlign}
       >
@@ -120,12 +120,7 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
         // https://www.radix-ui.com/primitives/docs/components/dialog#description
         aria-describedby={undefined}
         {...props}
-        className={tx(
-          'dialog.content',
-          'dialog',
-          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size },
-          classNames,
-        )}
+        className={tx('dialog.content', { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -144,18 +139,30 @@ type DialogHeaderProps = ThemedClassName<PropsWithChildren> & { srOnly?: boolean
 const DialogHeader: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return <div {...props} role='header' className={tx('dialog.header', { srOnly }, classNames)} ref={forwardedRef} />;
+  },
+);
+//
+// Body
+//
+type DialogBodyProps = PropsWithChildren;
+const DialogBody: ForwardRefExoticComponent<DialogBodyProps> = forwardRef<HTMLDivElement, DialogBodyProps>(
+  ({ children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <div
-        {...props}
-        role='header'
-        className={tx('dialog.header', 'dialog__header', { srOnly }, classNames)}
-        ref={forwardedRef}
-      />
+      <div {...props} className={tx('dialog.body')} ref={forwardedRef}>
+        {children}
+      </div>
     );
   },
 );
+// TODO(burdon): Add ActionBar.
 //
 // Title
 //
@@ -166,11 +173,7 @@ const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTML
   ({ classNames, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <DialogTitlePrimitive
-        {...props}
-        className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
-        ref={forwardedRef}
-      />
+      <DialogTitlePrimitive {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -189,12 +192,30 @@ const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRe
   return (
     <DialogDescriptionPrimitive
       {...props}
-      className={tx('dialog.description', 'dialog__description', { srOnly }, classNames)}
+      className={tx('dialog.description', { srOnly }, classNames)}
       ref={forwardedRef}
     />
   );
 });
+//
+// ActionBar
+//
+type DialogActionBarProps = ThemedClassName<PropsWithChildren>;
+const DialogActionBar: ForwardRefExoticComponent<DialogActionBarProps> = forwardRef<
+  HTMLDivElement,
+  DialogActionBarProps
+>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
 //
 // Close
 //
@@ -239,8 +260,10 @@ export const Dialog = {
   Overlay: DialogOverlay,
   Content: DialogContent,
   Header: DialogHeader,
+  Body: DialogBody,
   Title: DialogTitle,
   Description: DialogDescription,
+  ActionBar: DialogActionBar,
   Close: DialogClose,
   CloseIconButton: DialogCloseIconButton,
 };
@@ -252,8 +275,10 @@ export type {
   DialogOverlayProps,
   DialogContentProps,
   DialogHeaderProps,
+  DialogBodyProps,
   DialogTitleProps,
   DialogDescriptionProps,
+  DialogActionBarProps,
   DialogCloseProps,
   DialogCloseIconButtonProps,
 };

package/src/components/Icon/Icon.stories.tsx CHANGED Viewed

@@ -60,9 +60,9 @@ const DefaultStory = ({ CustomIcon }: { CustomIcon: FC<IconProps> }) => {
 };
 const meta = {
-  title: 'ui/react-ui-core/Icon',
+  title: 'ui/react-ui-core/components/Icon',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

package/src/components/Icon/Icon.tsx CHANGED Viewed

@@ -20,7 +20,7 @@ export const Icon = memo(
     const { tx } = useThemeContext();
     const href = useIconHref(icon);
     return (
-      <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
+      <svg {...props} className={tx('icon.root', { size }, classNames)} ref={forwardedRef}>
         <use href={href} />
       </svg>
     );

package/src/components/Input/Input.stories.tsx CHANGED Viewed

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/ui-theme';
+import { mx, surfaceShadow } from '@dxos/ui-theme';
 import { type MessageValence } from '@dxos/ui-types';
 import { withTheme } from '../../testing';
@@ -39,7 +39,7 @@ type BaseProps = Partial<{
   validationMessage: string;
 }>;
-const Wrapper = ({
+const InputWrapper = ({
   kind,
   label,
   description,
@@ -74,31 +74,31 @@ const Wrapper = ({
 const DefaultStory = (props: BaseProps) => {
   return (
     <div className='space-b-4'>
-      <div className={mx(baseSurface, 'p-4 rounded-md')}>
-        <Wrapper {...props} />
+      <div className={mx('bg-baseSurface', 'p-4 rounded-md')}>
+        <InputWrapper {...props} />
       </div>
       <div className={mx('bg-cardSurface', 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
-        <Wrapper {...props} />
+        <InputWrapper {...props} />
       </div>
-      <div className={mx(modalSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
-        <Wrapper {...props} />
+      <div className={mx('bg-modalSurface', 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
+        <InputWrapper {...props} />
       </div>
     </div>
   );
 };
 const meta = {
-  title: 'ui/react-ui-core/Input',
+  title: 'ui/react-ui-core/components/Input',
   component: Input.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 export default meta;
 type Story = StoryObj<BaseProps & Variant>;
-export const Default: Story = {
+export const DensityCoarse: Story = {
   args: {
     kind: 'text',
     label: 'Hello',
@@ -109,6 +109,7 @@ export const Default: Story = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
+    density: 'coarse',
   },
 };

package/src/components/Input/Input.tsx CHANGED Viewed

@@ -43,7 +43,7 @@ type LabelProps = ThemedClassName<LabelPrimitiveProps> & { srOnly?: boolean };
 const Label = forwardRef<HTMLLabelElement, LabelProps>(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <LabelPrimitive {...props} className={tx('input.label', 'input__label', { srOnly }, classNames)} ref={forwardedRef}>
+    <LabelPrimitive {...props} className={tx('input.label', { srOnly }, classNames)} ref={forwardedRef}>
       {children}
     </LabelPrimitive>
   );
@@ -55,11 +55,7 @@ const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
   ({ srOnly, classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <DescriptionPrimitive
-        {...props}
-        className={tx('input.description', 'input__description', { srOnly }, classNames)}
-        ref={forwardedRef}
-      >
+      <DescriptionPrimitive {...props} className={tx('input.description', { srOnly }, classNames)} ref={forwardedRef}>
         {children}
       </DescriptionPrimitive>
     );
@@ -75,12 +71,7 @@ const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>
     return (
       <ValidationPrimitive
         {...props}
-        className={tx(
-          'input.validation',
-          `input__validation-message input__validation-message--${validationValence}`,
-          { srOnly, validationValence },
-          classNames,
-        )}
+        className={tx('input.validation', { srOnly, validationValence }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -97,7 +88,7 @@ const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAnd
     return (
       <DescriptionAndValidationPrimitive
         {...props}
-        className={tx('input.descriptionAndValidation', 'input__description-and-validation', { srOnly }, classNames)}
+        className={tx('input.descriptionAndValidation', { srOnly }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -119,7 +110,6 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
       elevation: propsElevation,
       segmentClassName: propsSegmentClassName,
       inputClassName,
-      variant,
       ...props
     },
     forwardedRef,
@@ -128,12 +118,10 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
     const { tx } = useThemeContext();
     const density = useDensityContext(propsDensity);
     const elevation = useElevationContext(propsElevation);
     const segmentClassName = useCallback(
       ({ focused, validationValence }: Parameters<Exclude<PinInputPrimitiveProps['segmentClassName'], undefined>>[0]) =>
         tx(
           'input.input',
-          'input--pin-segment',
           {
             variant: 'static',
             focused,
@@ -143,9 +131,10 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
             validationValence,
           },
           propsSegmentClassName,
-        ),
+        ) || '',
       [tx, props.disabled, elevation, propsElevation, density],
     );
     return (
       <PinInputPrimitive
         {...{
@@ -153,7 +142,7 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
           segmentClassName,
           ...(props.autoFocus && !hasIosKeyboard && { autoFocus: true }),
         }}
-        inputClassName={tx('input.inputWithSegments', 'input input--pin', { disabled: props.disabled }, inputClassName)}
+        inputClassName={tx('input.inputWithSegments', { disabled: props.disabled }, inputClassName) || ''}
         ref={forwardedRef}
       />
     );
@@ -174,13 +163,11 @@ const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>
     forwardedRef,
   ) => {
     const { hasIosKeyboard } = useThemeContext();
-    const themeContextValue = useThemeContext();
+    const { tx } = useThemeContext();
     const density = useDensityContext(propsDensity);
     const elevation = useElevationContext(propsElevation);
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-    const { tx } = themeContextValue;
     return (
       <TextInputPrimitive
         {...props}
@@ -188,7 +175,6 @@ const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>
         {...{ 'data-1p-ignore': noAutoFill }}
         className={tx(
           'input.input',
-          'input',
           {
             variant,
             disabled: props.disabled,
@@ -220,7 +206,6 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
         {...props}
         className={tx(
           'input.input',
-          'input--text-area',
           {
             variant,
             disabled: props.disabled,
@@ -278,13 +263,13 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
             'aria-invalid': 'true' as const,
             'aria-errormessage': errorMessageId,
           }),
-          className: tx('input.checkbox', 'input--checkbox', { size }, 'shrink-0', classNames),
+          className: tx('input.checkbox', { size }, 'shrink-0', classNames),
         }}
         ref={forwardedRef}
       >
         <Icon
           icon={checked === 'indeterminate' ? 'ph--minus--regular' : 'ph--check--regular'}
-          classNames={tx('input.checkboxIndicator', 'input--checkbox__indicator', { size, checked })}
+          classNames={tx('input.checkboxIndicator', { size, checked })}
         />
       </CheckboxPrimitive>
     );

package/src/components/Link/Link.stories.tsx CHANGED Viewed

@@ -9,9 +9,9 @@ import { withTheme } from '../../testing';
 import { Link } from './Link';
 const meta = {
-  title: 'ui/react-ui-core/Link',
+  title: 'ui/react-ui-core/components/Link',
   component: Link,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof Link>;
 export default meta;

package/src/components/Link/Link.tsx CHANGED Viewed

@@ -19,6 +19,6 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ asChild, variant, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.a;
-    return <Root {...props} className={tx('link.root', 'link', { variant }, classNames)} ref={forwardedRef} />;
+    return <Root {...props} className={tx('link.root', { variant }, classNames)} ref={forwardedRef} />;
   },
 );

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

@@ -24,9 +24,9 @@ import { Icon } from '../Icon';
 import { List, ListItem, type ListScopedProps } from './List';
 const meta = {
-  title: 'ui/react-ui-core/List',
+  title: 'ui/react-ui-core/components/List',
   component: List,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof List>;
 export default meta;

package/src/components/List/List.tsx CHANGED Viewed

@@ -40,7 +40,7 @@ const List = forwardRef<HTMLOListElement, ListProps>(({ classNames, children, ..
   return (
     <DensityProvider density={density}>
-      <ListPrimitive {...props} className={tx('list.root', 'list', {}, classNames)} ref={forwardedRef}>
+      <ListPrimitive {...props} className={tx('list.root', {}, classNames)} ref={forwardedRef}>
         {children}
       </ListPrimitive>
     </DensityProvider>
@@ -58,7 +58,7 @@ const ListItemEndcap = forwardRef<HTMLDivElement, ListItemEndcapProps>(
       <Root
         {...(!asChild && { role: 'none' })}
         {...props}
-        className={tx('list.item.endcap', 'list__listItem__endcap', { density }, classNames)}
+        className={tx('list.item.endcap', { density }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -73,13 +73,7 @@ const MockListItemOpenTrigger = ({
 }: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return (
-    <div
-      role='none'
-      {...props}
-      className={tx('list.item.openTrigger', 'list__listItem__openTrigger--mock', { density }, classNames)}
-    />
-  );
+  return <div role='none' {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
 };
 type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;
@@ -91,7 +85,7 @@ const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
     return (
       <ListPrimitiveItemHeading
         {...props}
-        className={tx('list.item.heading', 'list__listItem__heading', { density }, classNames)}
+        className={tx('list.item.heading', { density }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -110,14 +104,14 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
     return (
       <ListPrimitiveItemOpenTrigger
         {...props}
-        className={tx('list.item.openTrigger', 'list__listItem__openTrigger', { density }, classNames)}
+        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', 'list__listItem__openTrigger__icon', {})}
+            classNames={tx('list.item.openTriggerIcon', {})}
           />
         )}
       </ListPrimitiveItemOpenTrigger>
@@ -134,7 +128,7 @@ const ListItemRoot = forwardRef<HTMLLIElement, ListItemRootProps>(
     return (
       <ListPrimitiveItem
         {...props}
-        className={tx('list.item.root', 'list__listItem', { density, collapsible: props.collapsible }, classNames)}
+        className={tx('list.item.root', { density, collapsible: props.collapsible }, classNames)}
         ref={forwardedRef}
       >
         {children}

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

@@ -56,10 +56,10 @@ const DefaultStory = ({ data }: StorybookTreeProps) => {
 };
 const meta = {
-  title: 'ui/react-ui-core/Tree',
+  title: 'ui/react-ui-core/components/Tree',
   component: Tree as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 export default meta;

package/src/components/List/Treegrid.stories.tsx CHANGED Viewed

@@ -144,10 +144,10 @@ const DefaultStory = () => {
 };
 const meta = {
-  title: 'ui/react-ui-core/Treegrid',
+  title: 'ui/react-ui-core/components/Treegrid',
   component: Treegrid.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 export default meta;

package/src/components/List/Treegrid.tsx CHANGED Viewed

@@ -97,10 +97,10 @@ const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
     return (
       <Root
         role='treegrid'
-        onKeyDown={handleKeyDown}
         {...props}
-        className={tx('treegrid.root', 'treegrid', {}, classNames)}
+        className={tx('treegrid.root', {}, classNames)}
         style={{ ...style, gridTemplateColumns }}
+        onKeyDown={handleKeyDown}
         ref={forwardedRef}
       >
         {children}
@@ -149,7 +149,7 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
         <Root
           role='row'
           aria-level={level}
-          className={tx('treegrid.row', 'treegrid__row', { level }, classNames)}
+          className={tx('treegrid.row', { level }, classNames)}
           {...(parentOf && { 'aria-expanded': open, 'aria-owns': parentOf })}
           {...props}
           id={id}
@@ -168,12 +168,7 @@ const TreegridCell = forwardRef<HTMLDivElement, TreegridCellProps>(
   ({ classNames, children, indent, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <div
-        role='gridcell'
-        className={tx('treegrid.cell', 'treegrid__cell', { indent }, classNames)}
-        {...props}
-        ref={forwardedRef}
-      >
+      <div role='gridcell' className={tx('treegrid.cell', { indent }, classNames)} {...props} ref={forwardedRef}>
         {children}
       </div>
     );

package/src/components/Main/Main.stories.tsx CHANGED Viewed

@@ -5,56 +5,74 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { withTheme } from '../../testing';
-import { Button } from '../Button';
+import { withLayout, withTheme } from '../../testing';
+import { IconButton } from '../Button';
+import { Toolbar } from '../Toolbar';
 import { Main, useSidebars } from './Main';
 type StoryMainArgs = {};
-const NavigationSidebarToggle = () => {
+const NavigationSidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleNavigationSidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleNavigationSidebar}>Toggle navigation sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-left--regular' : 'ph--caret-right--regular'}
+      iconOnly
+      label='Toggle navigation sidebar'
+      onClick={toggleNavigationSidebar}
+    />
+  );
 };
-const ComplementarySidebarToggle = () => {
+const ComplementarySidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleComplementarySidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-right--regular' : 'ph--caret-left--regular'}
+      iconOnly
+      label='Toggle complementary sidebar'
+      onClick={toggleComplementarySidebar}
+    />
+  );
 };
 const DefaultStory = (_args: StoryMainArgs) => {
   return (
-    <Main.Root>
+    <Main.Root defaultComplementarySidebarState='closed' defaultNavigationSidebarState='closed'>
       <Main.Overlay />
-      <Main.NavigationSidebar label='Navigation' classNames='p-4'>
-        <p>Navigation sidebar content, hi!</p>
-        <NavigationSidebarToggle />
+      <Main.NavigationSidebar label='Navigation'>
+        <Toolbar.Root>
+          <h1>Navigation</h1>
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <NavigationSidebarToggle close />
+        </Toolbar.Root>
       </Main.NavigationSidebar>
-      <Main.Content>
-        <div role='group' className='m-2 p-4 bg-neutral-50 dark:bg-neutral-950 rounded space-y-2'>
-          <ComplementarySidebarToggle />
-          <p>Main content, hello!</p>
+      <Main.Content classNames='is-full'>
+        <Toolbar.Root>
           <NavigationSidebarToggle />
-        </div>
+          <div className='flex items-center grow justify-center'>Main</div>
+          <ComplementarySidebarToggle />
+        </Toolbar.Root>
       </Main.Content>
-      <Main.ComplementarySidebar label='Complementary content' classNames='p-4'>
-        <p>Complementary sidebar content, hello!</p>
-        <ComplementarySidebarToggle />
+      <Main.ComplementarySidebar label='Complementary'>
+        <Toolbar.Root>
+          <ComplementarySidebarToggle close />
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <h1>Complementary</h1>
+        </Toolbar.Root>
       </Main.ComplementarySidebar>
     </Main.Root>
   );
 };
 const meta = {
-  title: 'ui/react-ui-core/Main',
+  title: 'ui/react-ui-core/components/Main',
   component: Main.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
-    chromatic: {
-      disableSnapshot: false,
-    },
   },
 } satisfies Meta<typeof DefaultStory>;