@dxos/react-ui 0.1.5 → 0.1.7

package/src/components/QrCode/QrCode.tsx

@@ -3,24 +3,45 @@
 //
 
 import cx from 'classnames';
+import { QrCode as QrCodeIcon, CopySimple } from 'phosphor-react';
 import { QRCodeSVG } from 'qrcode.react';
 import React, { useCallback, ReactHTMLElement } from 'react';
 
 import { useId } from '../../hooks';
 import { Size } from '../../props';
 import { getSize } from '../../styles';
-import { Button, ButtonProps } from '../Button';
+import { Button, ButtonGroup, ButtonProps } from '../Button';
 import { Tooltip, TooltipProps } from '../Tooltip';
 
-export interface QrCodeProps
-  extends Omit<ButtonProps, 'onClick' | 'ref'>,
+interface SharedQrCodeProps
+  extends Omit<ButtonProps, 'onClick' | 'ref' | 'variant'>,
     Pick<TooltipProps, 'side' | 'sideOffset' | 'collisionPadding'> {
   value: string;
+  buttonCompact?: boolean;
+}
+
+export interface FullQrCodeProps extends SharedQrCodeProps {
   label: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
   size?: Size;
 }
 
-export const QrCode = ({ value, label, size, side, sideOffset, collisionPadding, ...buttonProps }: QrCodeProps) => {
+export type QrCodeProps = FullQrCodeProps;
+
+export interface CompactQrCodeProps extends SharedQrCodeProps {
+  displayQrLabel: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
+  copyLabel: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
+}
+
+export const FullQrCode = ({
+  value,
+  label,
+  size,
+  side,
+  sideOffset,
+  collisionPadding,
+  buttonCompact = true,
+  ...buttonProps
+}: FullQrCodeProps) => {
   const labelId = useId('qr-label');
   const copyValue = useCallback(() => {
     void navigator.clipboard.writeText(value);
@@ -28,7 +49,7 @@ export const QrCode = ({ value, label, size, side, sideOffset, collisionPadding,
   return (
     <Tooltip content={label} {...{ side, sideOffset, collisionPadding }}>
       <Button
-        compact
+        compact={buttonCompact}
         {...buttonProps}
         className={cx('overflow-hidden p-0', getSize(size ?? 32), buttonProps.className)}
         onClick={copyValue}
@@ -41,3 +62,92 @@ export const QrCode = ({ value, label, size, side, sideOffset, collisionPadding,
     </Tooltip>
   );
 };
+
+export const CompactQrCode = ({
+  value,
+  displayQrLabel,
+  copyLabel,
+  side,
+  sideOffset,
+  collisionPadding,
+  compact,
+  buttonCompact,
+  ...buttonProps
+}: CompactQrCodeProps) => {
+  const labelId = useId('qr-label');
+  const copyValue = useCallback(() => {
+    void navigator.clipboard.writeText(value);
+  }, [value]);
+  return (
+    <>
+      <ButtonGroup className='inline-flex grow md:hidden'>
+        <span className='sr-only' id={labelId}>
+          {displayQrLabel}
+        </span>
+        <Tooltip
+          compact
+          content={
+            <div role='none' className='overflow-hidden rounded-md'>
+              <QRCodeSVG value={value} includeMargin role='none' className={getSize(32)} />
+            </div>
+          }
+          {...{ side: side ?? 'left', sideOffset, collisionPadding }}
+        >
+          <Button
+            rounding='rounded-is-md'
+            compact={buttonCompact}
+            {...buttonProps}
+            className={cx('border-ie-0 grow', buttonProps.className)}
+            aria-labelledby={labelId}
+          >
+            <QrCodeIcon className={getSize(5)} />
+          </Button>
+        </Tooltip>
+        <Tooltip content={copyLabel} tooltipLabelsTrigger {...{ side, sideOffset, collisionPadding }}>
+          <Button
+            rounding='rounded-ie-md grow'
+            compact={buttonCompact}
+            {...buttonProps}
+            className={buttonProps.className}
+            onClick={copyValue}
+          >
+            <CopySimple className={getSize(5)} />
+          </Button>
+        </Tooltip>
+      </ButtonGroup>
+      <ButtonGroup className='hidden md:inline-flex'>
+        <Tooltip
+          compact
+          content={
+            <div role='none' className='overflow-hidden rounded-md'>
+              <QRCodeSVG value={value} includeMargin role='none' className={getSize(32)} />
+            </div>
+          }
+          {...{ side: side ?? 'left', sideOffset, collisionPadding }}
+        >
+          <Button
+            rounding='rounded-is-md'
+            compact={buttonCompact}
+            {...buttonProps}
+            className={cx('border-ie-0 flex gap-1', buttonProps.className)}
+          >
+            <QrCodeIcon className={getSize(5)} />
+            {displayQrLabel}
+          </Button>
+        </Tooltip>
+        <Button
+          rounding='rounded-ie-md'
+          compact={buttonCompact}
+          {...buttonProps}
+          className={cx('flex gap-1', buttonProps.className)}
+          onClick={copyValue}
+        >
+          <CopySimple className={getSize(5)} />
+          {copyLabel}
+        </Button>
+      </ButtonGroup>
+    </>
+  );
+};
+
+export const QrCode = FullQrCode;

package/src/components/Tooltip/Tooltip.tsx

@@ -12,11 +12,21 @@ import { defaultTooltip } from '../../styles';
 export interface TooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'children'> {
   content: ReactNode;
   children: ReactNode;
+  compact?: boolean;
   tooltipLabelsTrigger?: boolean;
   mountAsSibling?: boolean;
+  zIndex?: string;
 }
 
-export const Tooltip = ({ content, children, tooltipLabelsTrigger, mountAsSibling, ...contentProps }: TooltipProps) => {
+export const Tooltip = ({
+  content,
+  children,
+  compact,
+  tooltipLabelsTrigger,
+  mountAsSibling,
+  zIndex = 'z-[2]',
+  ...contentProps
+}: TooltipProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const labelId = useId('tooltipLabel');
 
@@ -29,7 +39,9 @@ export const Tooltip = ({ content, children, tooltipLabelsTrigger, mountAsSiblin
         'radix-side-right:animate-slide-left-fade',
         'radix-side-bottom:animate-slide-up-fade',
         'radix-side-left:animate-slide-right-fade',
-        'inline-flex items-center rounded-md px-4 py-2.5',
+        'inline-flex items-center rounded-md',
+        zIndex,
+        !compact && 'px-4 py-2.5',
         'shadow-lg bg-white dark:bg-neutral-800',
         !isOpen && 'sr-only',
         defaultTooltip,

package/src/hooks/useId.ts

@@ -13,7 +13,7 @@ const Alea: PrngFactory = alea as unknown as PrngFactory;
 
 const prng = new Alea('@dxos/react-ui');
 
-const randomString = (n = 4) =>
+export const randomString = (n = 4) =>
   prng()
     .toString(16)
     .slice(2, n + 2);

package/src/styles/focus.ts

@@ -3,7 +3,7 @@
 //
 
 export const defaultFocus =
-  'focus:outline-none focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black';
+  'focus:outline-none focus-visible:z-[1] focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black';
 
 export const staticFocus =
   'ring ring-offset-1 ring-primary-500 ring-offset-white dark:ring-primary-200 dark:ring-offset-black';

package/src/styles/group.ts

@@ -16,9 +16,18 @@ const elevationClassNameMap = new Map<number, string>([
   [6, 'shadow-2xl']
 ]);
 
-export const defaultGroup = ({ elevation }: { elevation: Elevation }) => {
+export const defaultGroup = ({
+  elevation,
+  rounding,
+  spacing
+}: {
+  elevation: Elevation;
+  rounding?: string;
+  spacing?: string;
+}) => {
   return cx(
-    'rounded-lg p-4',
+    rounding ?? 'rounded-lg',
+    spacing ?? 'p-4',
     elevation === 0
       ? 'bg-transparent border border-neutral-200 dark:border-neutral-700'
       : 'bg-white dark:bg-neutral-800 elevated-buttons',

package/src/styles/hover.ts

@@ -5,6 +5,6 @@
 export const defaultHover = ({ disabled }: { disabled?: boolean }) => {
   return (
     !disabled &&
-    'outline outline-3 outline-transparent hover:outline-primary-300 dark:hover:outline-primary-400 hover:focus:outline-primary-300 dark:hover:focus:outline-primary-400'
+    'outline outline-3 outline-transparent hover:z-[1] hover:outline-primary-300 dark:hover:outline-primary-400 hover:focus:outline-primary-300 dark:hover:focus:outline-primary-400'
   );
 };

package/src/styles/shimmer.ts

@@ -3,4 +3,7 @@
 //
 
 export const defaultShimmer =
-  'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/20 before:to-transparent isolate overflow-hidden before:border-t before:border-neutral-100/20';
+  'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden';
+
+export const strongShimmer =
+  'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden';

package/src/theme.css

@@ -42,6 +42,9 @@
   .elevated-buttons {
     --button-elevation: theme(boxShadow.sm);
   }
+  .grouped-buttons {
+    --button-elevation: theme(boxShadow.none);
+  }
 }
 
 :root {