@dxos/react-ui 0.1.20 → 0.1.22

package/dist/types/src/plugin.d.ts

@@ -1,9 +0,0 @@
-import { Plugin } from 'vite';
-export interface VitePluginTailwindOptions {
-    jit?: boolean;
-    cssPath?: string;
-    virtualFileId?: string;
-    content: string[];
-}
-export declare const ThemePlugin: (options: Pick<VitePluginTailwindOptions, 'content'>) => Plugin;
-//# sourceMappingURL=plugin.d.ts.map

package/dist/types/src/plugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/plugin.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAI9B,MAAM,WAAW,yBAAyB;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,YAAa,KAAK,yBAAyB,EAAE,SAAS,CAAC,WAyB9E,CAAC"}

package/dist/types/src/props/Elevation.d.ts

@@ -1,2 +0,0 @@
-export declare type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-//# sourceMappingURL=Elevation.d.ts.map

package/dist/types/src/props/Elevation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Elevation.d.ts","sourceRoot":"","sources":["../../../../src/props/Elevation.ts"],"names":[],"mappings":"AAIA,oBAAY,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC"}

package/dist/types/src/props/MessageValence.d.ts

@@ -1,2 +0,0 @@
-export declare type MessageValence = 'success' | 'info' | 'warning' | 'error' | 'neutral';
-//# sourceMappingURL=MessageValence.d.ts.map

package/dist/types/src/props/MessageValence.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageValence.d.ts","sourceRoot":"","sources":["../../../../src/props/MessageValence.ts"],"names":[],"mappings":"AAIA,oBAAY,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC"}

package/dist/types/src/props/Size.d.ts

@@ -1,2 +0,0 @@
-export declare type Size = 0 | 'px' | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-//# sourceMappingURL=Size.d.ts.map

package/dist/types/src/props/Size.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../../../src/props/Size.ts"],"names":[],"mappings":"AAIA,oBAAY,IAAI,GACZ,CAAC,GACD,IAAI,GACJ,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,CAAC"}

package/dist/types/src/props/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Elevation';
-export * from './MessageValence';
-export * from './Size';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/props/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/props/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC"}

package/dist/types/src/styles/active.d.ts

@@ -1,2 +0,0 @@
-export declare const defaultActive: string;
-//# sourceMappingURL=active.d.ts.map

package/dist/types/src/styles/active.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"active.d.ts","sourceRoot":"","sources":["../../../../src/styles/active.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,QAIzB,CAAC"}

package/dist/types/src/styles/disabled.d.ts

@@ -1,2 +0,0 @@
-export declare const defaultDisabled = "opacity-50 cursor-not-allowed shadow-none";
-//# sourceMappingURL=disabled.d.ts.map

package/dist/types/src/styles/disabled.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"disabled.d.ts","sourceRoot":"","sources":["../../../../src/styles/disabled.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,8CAA8C,CAAC"}

package/dist/types/src/styles/focus.d.ts

@@ -1,3 +0,0 @@
-export declare const defaultFocus = "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 declare const staticFocus = "ring ring-offset-1 ring-primary-500 ring-offset-white dark:ring-primary-200 dark:ring-offset-black";
-//# sourceMappingURL=focus.d.ts.map

package/dist/types/src/styles/focus.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../../src/styles/focus.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,ySAC+Q,CAAC;AAEzS,eAAO,MAAM,WAAW,uGAC8E,CAAC"}

package/dist/types/src/styles/group.d.ts

@@ -1,7 +0,0 @@
-import { Elevation } from '../props';
-export declare const defaultGroup: ({ elevation, rounding, spacing }: {
-    elevation: Elevation;
-    rounding?: string | undefined;
-    spacing?: string | undefined;
-}) => string;
-//# sourceMappingURL=group.d.ts.map

package/dist/types/src/styles/group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../../src/styles/group.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAarC,eAAO,MAAM,YAAY;eAKZ,SAAS;;;YAYrB,CAAC"}

package/dist/types/src/styles/hover.d.ts

@@ -1,4 +0,0 @@
-export declare const defaultHover: ({ disabled }: {
-    disabled?: boolean | undefined;
-}) => false | "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";
-//# sourceMappingURL=hover.d.ts.map

package/dist/types/src/styles/hover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hover.d.ts","sourceRoot":"","sources":["../../../../src/styles/hover.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;+LAKxB,CAAC"}

package/dist/types/src/styles/input.d.ts

@@ -1,11 +0,0 @@
-import { MessageValence } from '../props';
-export declare const defaultInput: ({ disabled, validationValence }: {
-    disabled?: boolean | undefined;
-    validationValence?: MessageValence | undefined;
-}) => string;
-export declare const staticInput: ({ disabled, focused, validationValence }: {
-    disabled?: boolean | undefined;
-    focused?: boolean | undefined;
-    validationValence?: MessageValence | undefined;
-}) => string;
-//# sourceMappingURL=input.d.ts.map

package/dist/types/src/styles/input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/styles/input.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAQ1C,eAAO,MAAM,YAAY;;;YAexB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;YAgBvB,CAAC"}

package/dist/types/src/styles/ornament.d.ts

@@ -1,3 +0,0 @@
-export declare const defaultInlineSeparator = "border-is border-neutral-300 dark:border-neutral-700";
-export declare const defaultBlockSeparator = "border-bs border-neutral-300 dark:border-neutral-700";
-//# sourceMappingURL=ornament.d.ts.map

package/dist/types/src/styles/ornament.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ornament.d.ts","sourceRoot":"","sources":["../../../../src/styles/ornament.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,yDAAyD,CAAC;AAC7F,eAAO,MAAM,qBAAqB,yDAAyD,CAAC"}

package/dist/types/src/styles/shimmer.d.ts

@@ -1,3 +0,0 @@
-export declare 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/10 before:to-transparent isolate overflow-hidden";
-export declare 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";
-//# sourceMappingURL=shimmer.d.ts.map

package/dist/types/src/styles/shimmer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../../src/styles/shimmer.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oNACwL,CAAC;AAEpN,eAAO,MAAM,aAAa,oNACyL,CAAC"}

package/dist/types/src/styles/size.d.ts

@@ -1,7 +0,0 @@
-import { Size } from '../props';
-export declare const sizeWidthMap: Map<Size, string>;
-export declare const sizeHeightMap: Map<Size, string>;
-export declare const getSizeHeight: (key: Size) => string | undefined;
-export declare const getSizeWidth: (key: Size) => string | undefined;
-export declare const getSize: (size: Size) => string;
-//# sourceMappingURL=size.d.ts.map

package/dist/types/src/styles/size.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../../src/styles/size.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,eAAO,MAAM,YAAY,mBAoCvB,CAAC;AAEH,eAAO,MAAM,aAAa,mBAoCxB,CAAC;AAEH,eAAO,MAAM,aAAa,mCAAwC,CAAC;AACnE,eAAO,MAAM,YAAY,mCAAsC,CAAC;AAChE,eAAO,MAAM,OAAO,SAAU,IAAI,WAAgD,CAAC"}

package/dist/types/src/styles/text.d.ts

@@ -1,5 +0,0 @@
-export declare const defaultPlaceholder = "placeholder-neutral-500 dark:placeholder-neutral-400";
-export declare const defaultDescription = "text-xs font-normal text-neutral-650 dark:text-neutral-300";
-export declare const primaryDescription = "text-xs font-normal text-white/90";
-export declare const defaultTooltip = "text-xs font-normal text-neutral-900 dark:text-neutral-50";
-//# sourceMappingURL=text.d.ts.map

package/dist/types/src/styles/text.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/styles/text.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,yDAAyD,CAAC;AAEzF,eAAO,MAAM,kBAAkB,+DAA+D,CAAC;AAC/F,eAAO,MAAM,kBAAkB,sCAAsC,CAAC;AAEtE,eAAO,MAAM,cAAc,8DAA8D,CAAC"}

package/dist/types/src/styles/valence.d.ts

@@ -1,19 +0,0 @@
-import { MessageValence } from '../props';
-export declare const successText = "text-xs font-medium text-success-700 dark:text-success-300";
-export declare const infoText = "text-xs font-medium text-info-700 dark:text-info-300";
-export declare const warningText = "text-xs font-medium text-warning-700 dark:text-warning-300";
-export declare const errorText = "text-xs font-medium text-error-700 dark:text-error-300";
-export declare const valenceColorText: (valence?: MessageValence) => "text-xs font-medium text-success-700 dark:text-success-300" | "text-xs font-medium text-info-700 dark:text-info-300" | "text-xs font-medium text-warning-700 dark:text-warning-300" | "text-xs font-medium text-error-700 dark:text-error-300" | undefined;
-export declare const neutralInputBorder = "border-neutral-500 dark:border-neutral-600";
-export declare const successInputBorder = "border-success-500 dark:border-success-600";
-export declare const infoInputBorder = "border-info-500 dark:border-info-600";
-export declare const warningInputBorder = "border-warning-500 dark:border-warning-600";
-export declare const errorInputBorder = "border-error-500 dark:border-error-600";
-export declare const valenceInputBorder: (valence?: MessageValence) => "border-neutral-500 dark:border-neutral-600" | "border-success-500 dark:border-success-600" | "border-info-500 dark:border-info-600" | "border-warning-500 dark:border-warning-600" | "border-error-500 dark:border-error-600";
-export declare const neutralAlertColors = "border-neutral-500 dark:border-neutral-600";
-export declare const successAlertColors = "border-success-500 dark:border-success-600 text-success-700 dark:text-success-100 bg-success-50 dark:bg-success-900";
-export declare const infoAlertColors = "border-info-500 dark:border-info-600 text-info-700 dark:text-info-100 bg-info-50 dark:bg-info-900";
-export declare const warningAlertColors = "border-warning-500 dark:border-warning-600 text-warning-700 dark:text-warning-100 bg-warning-50 dark:bg-warning-900";
-export declare const errorAlertColors = "border-error-500 dark:border-error-600 text-error-700 dark:text-error-100 bg-error-50 dark:bg-error-900";
-export declare const valenceAlertColors: (valence?: MessageValence) => "border-neutral-500 dark:border-neutral-600" | "border-success-500 dark:border-success-600 text-success-700 dark:text-success-100 bg-success-50 dark:bg-success-900" | "border-info-500 dark:border-info-600 text-info-700 dark:text-info-100 bg-info-50 dark:bg-info-900" | "border-warning-500 dark:border-warning-600 text-warning-700 dark:text-warning-100 bg-warning-50 dark:bg-warning-900" | "border-error-500 dark:border-error-600 text-error-700 dark:text-error-100 bg-error-50 dark:bg-error-900";
-//# sourceMappingURL=valence.d.ts.map

package/dist/types/src/styles/valence.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"valence.d.ts","sourceRoot":"","sources":["../../../../src/styles/valence.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,WAAW,+DAA+D,CAAC;AACxF,eAAO,MAAM,QAAQ,yDAAyD,CAAC;AAC/E,eAAO,MAAM,WAAW,+DAA+D,CAAC;AACxF,eAAO,MAAM,SAAS,2DAA2D,CAAC;AAElF,eAAO,MAAM,gBAAgB,aAAc,cAAc,gQAaxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAA+C,CAAC;AAC/E,eAAO,MAAM,kBAAkB,+CAA+C,CAAC;AAC/E,eAAO,MAAM,eAAe,yCAAyC,CAAC;AACtE,eAAO,MAAM,kBAAkB,+CAA+C,CAAC;AAC/E,eAAO,MAAM,gBAAgB,2CAA2C,CAAC;AAEzE,eAAO,MAAM,kBAAkB,aAAc,cAAc,mOAa1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAA+C,CAAC;AAC/E,eAAO,MAAM,kBAAkB,wHACwF,CAAC;AACxH,eAAO,MAAM,eAAe,sGACyE,CAAC;AACtG,eAAO,MAAM,kBAAkB,wHACwF,CAAC;AACxH,eAAO,MAAM,gBAAgB,4GAC8E,CAAC;AAE5G,eAAO,MAAM,kBAAkB,aAAc,cAAc,mfAa1D,CAAC"}

package/dist/types/src/testing/templateForComponent.d.ts

@@ -1,4 +0,0 @@
-import { Story } from '@storybook/react';
-import React, { FC } from 'react';
-export declare const templateForComponent: <P extends {}>(Component: React.FC<P>) => (props: P) => Story<P>;
-//# sourceMappingURL=templateForComponent.d.ts.map

package/dist/types/src/testing/templateForComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"templateForComponent.d.ts","sourceRoot":"","sources":["../../../../src/testing/templateForComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,oBAAoB,kEAQ9B,CAAC"}

package/dist/types/src/util/index.d.ts

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

package/dist/types/src/util/index.d.ts.map

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

package/dist/types/src/util/mx.d.ts

@@ -1,2 +0,0 @@
-export declare const mx: (...classLists: import("tailwind-merge/dist/lib/tw-join").ClassNameValue[]) => string;
-//# sourceMappingURL=mx.d.ts.map

package/dist/types/src/util/mx.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mx.d.ts","sourceRoot":"","sources":["../../../../src/util/mx.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,EAAE,uFAmBd,CAAC"}

package/dist/types/src/util/withLogical.d.ts

@@ -1,3 +0,0 @@
-import { Config } from 'tailwind-merge';
-export declare const withLogical: (prevConfig: Config) => Config;
-//# sourceMappingURL=withLogical.d.ts.map

package/dist/types/src/util/withLogical.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"withLogical.d.ts","sourceRoot":"","sources":["../../../../src/util/withLogical.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAA4B,MAAM,gBAAgB,CAAC;AAElE,eAAO,MAAM,WAAW,eAAgB,MAAM,KAAG,MA8FhD,CAAC"}

package/plugin.d.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './dist/types/src/plugin';

package/plugin.js

@@ -1,8 +0,0 @@
-//
-// Copyright 2021 DXOS.org
-//
-
-// Not included in the main `index.ts` so that the apps are not bundled with it.
-// It contains native Node functionality so must not be included in the final app bundle, only during compilation/bundling.
-
-module.exports = require('./dist/plugin/node/plugin.cjs');

package/src/components/Alert/Alert.stories.tsx

@@ -1,31 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxosTheme';
-import { Info } from 'phosphor-react';
-import React from 'react';
-
-import { templateForComponent } from '../../testing';
-import { Alert, AlertProps } from './Alert';
-
-export default {
-  title: 'react-ui/Alert',
-  component: Alert
-};
-
-const Template = ({ children, ...props }: AlertProps) => {
-  return <Alert {...props}>{children}</Alert>;
-};
-
-export const Default = templateForComponent(Template)({ title: '' });
-Default.args = {
-  title: (
-    <>
-      <Info className='inline w-5 h-5 mb-1' weight='duotone' />
-      {' Alert title'}
-    </>
-  ),
-  valence: 'error',
-  children: 'Alert content'
-};

package/src/components/Alert/Alert.tsx

@@ -1,40 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import React, { ComponentProps, ReactNode } from 'react';
-
-import { useId } from '../../hooks';
-import { MessageValence } from '../../props';
-import { valenceAlertColors } from '../../styles';
-import { mx } from '../../util';
-
-export interface AlertSlots {
-  root?: Omit<ComponentProps<'div'>, 'children'>;
-  title?: Omit<ComponentProps<'p'>, 'children'>;
-}
-
-export interface AlertProps {
-  title: ReactNode;
-  assertive?: boolean;
-  valence?: MessageValence;
-  children?: ReactNode;
-  slots?: AlertSlots;
-}
-
-export const Alert = ({ title, children, assertive, valence, slots = {} }: AlertProps) => {
-  const labelId = useId('alertLabel');
-  return (
-    <div
-      {...slots.root}
-      role={assertive ? 'alert' : 'group'}
-      aria-labelledby={labelId}
-      className={mx('p-3 border rounded-md', valenceAlertColors(valence), slots.root?.className)}
-    >
-      <p {...slots.title} id={labelId} className={mx('font-medium mb-2', slots.title?.className)}>
-        {title}
-      </p>
-      {children}
-    </div>
-  );
-};

package/src/components/Alert/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './Alert';

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -1,35 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxosTheme';
-import React from 'react';
-
-import { templateForComponent } from '../../testing';
-import { Button } from '../Button';
-import { AlertDialog, AlertDialogProps } from './AlertDialog';
-
-export default {
-  title: 'react-ui/AlertDialog',
-  component: AlertDialog
-};
-
-const Template = ({ children, ...props }: AlertDialogProps) => {
-  return <AlertDialog {...props}>{children}</AlertDialog>;
-};
-
-export const Default = templateForComponent(Template)({
-  openTrigger: '',
-  title: '',
-  confirmTrigger: <span />
-});
-Default.args = {
-  openTrigger: <Button>Reset device</Button>,
-  cancelTrigger: <Button>Cancel</Button>,
-  confirmTrigger: <Button variant='primary'>GO</Button>,
-  destructiveConfirmString: "I've definitely had my coffee",
-  destructiveConfirmInputProps: {
-    label: "Type “I've definitely had my coffee” to confirm"
-  },
-  title: 'Reset your device'
-};

package/src/components/AlertDialog/AlertDialog.tsx

@@ -1,147 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { Transition } from '@headlessui/react';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import React, { cloneElement, ComponentProps, Fragment, ReactHTMLElement, ReactNode, useEffect, useState } from 'react';
-
-import { defaultDescription, defaultFocus } from '../../styles';
-import { mx } from '../../util';
-import { Input, InputProps } from '../Input';
-
-export interface AlertDialogSlots {
-  overlay?: Pick<ComponentProps<typeof AlertDialogPrimitive.Overlay>, 'className'>;
-  content?: Omit<ComponentProps<typeof AlertDialogPrimitive.Content>, 'children'>;
-  title?: Omit<ComponentProps<typeof AlertDialogPrimitive.Content>, 'children'>;
-  description?: Omit<ComponentProps<typeof AlertDialogPrimitive.Description>, 'children'>;
-  actions?: Omit<ComponentProps<'div'>, 'children'>;
-}
-
-export interface AlertDialogProps {
-  title: ReactNode;
-  openTrigger?: ReactNode;
-  cancelTrigger?: ReactNode;
-  confirmTrigger: Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
-  destructiveConfirmString?: string;
-  destructiveConfirmInputProps?: Omit<InputProps, 'onChange' | 'initialValue'>;
-  titleVisuallyHidden?: boolean;
-  description?: ReactNode;
-  children?: ReactNode;
-  initiallyOpen?: boolean;
-  mountAsSibling?: boolean;
-  slots?: AlertDialogSlots;
-}
-
-export const AlertDialog = ({
-  title,
-  titleVisuallyHidden,
-  description,
-  openTrigger,
-  cancelTrigger,
-  confirmTrigger,
-  destructiveConfirmString,
-  destructiveConfirmInputProps,
-  children,
-  initiallyOpen,
-  mountAsSibling,
-  slots = {}
-}: AlertDialogProps) => {
-  const [isOpen, setIsOpen] = useState(!!initiallyOpen);
-  const [confirmDisabled, setConfirmDisabled] = useState(!!destructiveConfirmString);
-  const [confirmStringValue, setConfirmStringValue] = useState('');
-
-  useEffect(() => {
-    if (destructiveConfirmString) {
-      setConfirmDisabled(confirmStringValue !== destructiveConfirmString);
-    }
-  }, [confirmStringValue]);
-
-  const dialogOverlayAndContent = (
-    <Transition.Root show={isOpen}>
-      <Transition.Child
-        as={Fragment}
-        enter='ease-out duration-300'
-        enterFrom='opacity-0'
-        enterTo='opacity-100'
-        leave='ease-in duration-200'
-        leaveFrom='opacity-100'
-        leaveTo='opacity-0'
-      >
-        <AlertDialogPrimitive.Overlay
-          forceMount
-          className={mx('fixed inset-0 z-20 bg-black/50', slots.overlay?.className)}
-        />
-      </Transition.Child>
-      <Transition.Child
-        as={Fragment}
-        enter='ease-out duration-300'
-        enterFrom='opacity-0 scale-95'
-        enterTo='opacity-100 scale-100'
-        leave='ease-in duration-200'
-        leaveFrom='opacity-100 scale-100'
-        leaveTo='opacity-0 scale-95'
-      >
-        <AlertDialogPrimitive.Content
-          forceMount
-          {...slots.content}
-          className={mx(
-            'fixed z-50',
-            'w-[95vw] max-w-md rounded-xl p-4 md:w-full',
-            'top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
-            'shadow-2xl bg-white dark:bg-neutral-800 elevated-buttons',
-            defaultFocus,
-            slots.content?.className
-          )}
-        >
-          <AlertDialogPrimitive.Title
-            tabIndex={0}
-            {...slots.title}
-            className={mx(
-              'text-2xl font-display font-medium text-neutral-900 dark:text-neutral-100 rounded-md',
-              titleVisuallyHidden && 'sr-only',
-              defaultFocus,
-              slots.title?.className
-            )}
-          >
-            {title}
-          </AlertDialogPrimitive.Title>
-          {description && (
-            <AlertDialogPrimitive.Description
-              {...slots.description}
-              className={mx('my-2', defaultDescription, slots.description?.className)}
-            >
-              {description}
-            </AlertDialogPrimitive.Description>
-          )}
-
-          {children}
-
-          {destructiveConfirmInputProps && <Input {...destructiveConfirmInputProps} onChange={setConfirmStringValue} />}
-
-          <div {...slots.actions} className={mx('flex flex-wrap justify-end gap-4', slots.actions?.className)}>
-            {cancelTrigger && (
-              <AlertDialogPrimitive.Cancel asChild={typeof cancelTrigger !== 'string'}>
-                {cancelTrigger}
-              </AlertDialogPrimitive.Cancel>
-            )}
-            <AlertDialogPrimitive.Action asChild>
-              {cloneElement(confirmTrigger, { disabled: confirmDisabled })}
-            </AlertDialogPrimitive.Action>
-          </div>
-        </AlertDialogPrimitive.Content>
-      </Transition.Child>
-    </Transition.Root>
-  );
-
-  return (
-    <AlertDialogPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
-      {openTrigger && <AlertDialogPrimitive.Trigger asChild>{openTrigger}</AlertDialogPrimitive.Trigger>}
-      {mountAsSibling ? (
-        dialogOverlayAndContent
-      ) : (
-        <AlertDialogPrimitive.Portal>{dialogOverlayAndContent}</AlertDialogPrimitive.Portal>
-      )}
-    </AlertDialogPrimitive.Root>
-  );
-};

package/src/components/AlertDialog/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './AlertDialog';

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,29 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxosTheme';
-import React from 'react';
-
-import { templateForComponent } from '../../testing';
-import { Avatar, AvatarProps } from './Avatar';
-
-export default {
-  title: 'react-ui/Avatar',
-  component: Avatar
-};
-
-const Template = ({ children, ...props }: AvatarProps) => {
-  return <Avatar {...props} />;
-};
-
-const defaultProps = {
-  fallbackValue: '',
-  label: <span />
-};
-
-export const Default = templateForComponent(Template)(defaultProps);
-Default.args = {
-  fallbackValue: '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
-  label: <span className='sr-only'>Hello</span>
-};

package/src/components/Avatar/Avatar.tsx

@@ -1,104 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as PortalPrimitive from '@radix-ui/react-portal';
-import { toSvg } from 'jdenticon';
-import React, {
-  cloneElement,
-  ComponentProps,
-  ForwardedRef,
-  forwardRef,
-  PropsWithChildren,
-  ReactHTMLElement,
-  ReactNode,
-  useMemo
-} from 'react';
-
-import { useId } from '../../hooks';
-import { Size } from '../../props';
-import { getSize } from '../../styles';
-import { mx } from '../../util';
-
-export interface AvatarSlots {
-  root?: Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'>;
-  image?: Omit<ComponentProps<typeof AvatarPrimitive.Image>, 'children'>;
-  fallback?: Omit<ComponentProps<typeof AvatarPrimitive.Fallback>, 'children'>;
-}
-
-export interface AvatarProps {
-  fallbackValue: string;
-  label: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
-  size?: Size;
-  variant?: 'square' | 'circle';
-  mediaSrc?: string;
-  mediaAlt?: string;
-  children?: ReactNode;
-  slots?: AvatarSlots;
-}
-
-const shapeStyles = {
-  circle: 'rounded-full',
-  square: 'rounded'
-};
-
-export const Avatar = forwardRef(
-  (
-    {
-      mediaSrc,
-      mediaAlt,
-      fallbackValue,
-      label,
-      variant = 'square',
-      size = 10,
-      slots = {}
-    }: PropsWithChildren<AvatarProps>,
-    ref: ForwardedRef<HTMLSpanElement>
-  ) => {
-    const labelId = useId('avatarLabel');
-    const imgSrc = useMemo(
-      () => `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(fallbackValue, size === 'px' ? 1 : size * 4))}`,
-      [fallbackValue]
-    );
-    return (
-      <>
-        <AvatarPrimitive.Root
-          {...slots.root}
-          className={mx('relative inline-flex', getSize(size), slots.root?.className)}
-          aria-labelledby={labelId}
-          ref={ref}
-        >
-          {mediaSrc && (
-            <AvatarPrimitive.Image
-              {...slots.image}
-              src={mediaSrc}
-              alt={mediaAlt ?? 'Avatar'}
-              className={mx('h-full w-full object-cover overflow-hidden', shapeStyles[variant], slots.image?.className)}
-            />
-          )}
-          <AvatarPrimitive.Fallback
-            delayMs={0}
-            {...slots.fallback}
-            className={mx(
-              'shrink-0 flex h-full w-full items-center justify-center bg-white dark:bg-neutral-800 overflow-hidden',
-              shapeStyles[variant],
-              slots.fallback?.className
-            )}
-          >
-            <img role='none' alt={fallbackValue} src={imgSrc} className='h-full w-full' />
-          </AvatarPrimitive.Fallback>
-        </AvatarPrimitive.Root>
-        {typeof label === 'string' ? (
-          <PortalPrimitive.Root asChild>
-            <span id={labelId} className='sr-only'>
-              {label}
-            </span>
-          </PortalPrimitive.Root>
-        ) : (
-          cloneElement(label, { id: labelId })
-        )}
-      </>
-    );
-  }
-);