@crystallize/design-system 0.0.0

package/src/dialog/config.tsx

@@ -0,0 +1,134 @@
+import { unmountComponentAtNode, render as DOMRender } from 'react-dom';
+import { ConfirmDialog } from './confirm-dialog';
+
+import { destroyFns } from './destroyFns';
+import type { ConfigUpdate, DialogFuncProps } from './types';
+
+export function confirm(config: DialogFuncProps) {
+  const container = document.createDocumentFragment();
+  let currentConfig = { ...config, close, open: true };
+  let timeoutId: NodeJS.Timeout;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function close(...args: any[]) {
+    currentConfig = {
+      ...currentConfig,
+      open: false,
+      afterClose: () => {
+        if (typeof config.afterClose === 'function') {
+          config.afterClose();
+        }
+
+        destroy.apply(this, args);
+      },
+    };
+
+    render(currentConfig);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function destroy(...args: any[]) {
+    const triggerCancel = args.some(param => param && param.triggerCancel);
+
+    if (config.onCancel && triggerCancel) {
+      config.onCancel(() => {}, ...args.slice(1));
+    }
+
+    for (let i = 0; i < destroyFns.length; i++) {
+      const fn = destroyFns[i];
+
+      if (fn === close) {
+        destroyFns.splice(i, 1);
+        break;
+      }
+    }
+
+    unmountComponentAtNode(container);
+  }
+
+  function render({ okText, cancelText, ...delegated }: any) {
+    clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => {
+      DOMRender(<ConfirmDialog {...delegated} okText={okText} cancelText={cancelText} />, container);
+    });
+  }
+
+  function update(configUpdate: ConfigUpdate) {
+    if (typeof configUpdate === 'function') {
+      currentConfig = configUpdate(currentConfig);
+    } else {
+      currentConfig = {
+        ...currentConfig,
+        ...configUpdate,
+      };
+    }
+
+    render(currentConfig);
+  }
+
+  render(currentConfig);
+
+  destroyFns.push(close);
+
+  return {
+    destroy: close,
+    update,
+  };
+}
+
+const dumbFn = (event: Event) => {
+  event.preventDefault();
+};
+
+export function withDialog(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    ...delegated,
+    open: true,
+    okCancel: true,
+  };
+}
+
+export function withWarning(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    ...delegated,
+    open: true,
+    okCancel: false,
+    type: 'warning',
+    onInteractOutside: dumbFn,
+    onPointerDownOutside: dumbFn,
+  };
+}
+
+export function withError(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    ...delegated,
+    open: true,
+    okCancel: false,
+    type: 'error',
+    onInteractOutside: dumbFn,
+    onPointerDownOutside: dumbFn,
+  };
+}
+
+export function withInfo(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    ...delegated,
+    open: true,
+    okCancel: false,
+    type: 'info',
+    onInteractOutside: dumbFn,
+    onPointerDownOutside: dumbFn,
+  };
+}
+
+export function withConfirm(delegated: DialogFuncProps): DialogFuncProps {
+  return {
+    ...delegated,
+    open: true,
+    okCancel: true,
+    type: 'info',
+    onInteractOutside: dumbFn,
+    onPointerDownOutside: dumbFn,
+  };
+}

package/src/dialog/confirm-dialog.tsx

@@ -0,0 +1,59 @@
+import { Dialog } from '.';
+import { Button } from '../button';
+import { DialogRoot } from './dialog';
+import type { ConfirmDialogProps } from './types';
+
+export function ConfirmDialog({
+  open,
+  close,
+  title,
+  description,
+  content,
+  okCancel,
+  okText = 'OK',
+  onOk,
+  onCancel,
+  cancelText = 'cancel',
+  onEscapeKeyDown,
+  onInteractOutside,
+  onPointerDownOutside,
+  type,
+}: ConfirmDialogProps) {
+  const cancelButton = okCancel && (
+    <Button
+      variant="secondary"
+      onClick={() => {
+        onCancel?.();
+        close();
+      }}
+    >
+      {cancelText}
+    </Button>
+  );
+
+  return (
+    <DialogRoot open={open} onOpenChange={() => close()}>
+      <Dialog.Content
+        onEscapeKeyDown={onEscapeKeyDown}
+        onInteractOutside={onInteractOutside}
+        onPointerDownOutside={onPointerDownOutside}
+        type={type}
+      >
+        {title && <Dialog.Title>{title}</Dialog.Title>}
+        {description && <Dialog.Description>{description}</Dialog.Description>}
+        {content}
+        <div className="flex items-center gap-4 mt-4 justify-end">
+          {cancelButton}
+          <Button
+            onClick={() => {
+              onOk?.();
+              close();
+            }}
+          >
+            {okText}
+          </Button>
+        </div>
+      </Dialog.Content>
+    </DialogRoot>
+  );
+}

package/src/dialog/destroyFns.ts

@@ -0,0 +1 @@
+export const destroyFns: Array<() => void> = [];

package/src/dialog/dialog.tsx

@@ -0,0 +1,85 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { ReactNode, RefAttributes } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { Button } from '../button';
+import { Icon } from '../icons';
+import type { DialogFuncProps } from './types';
+
+const IconMap = {
+  error: Icon.Error,
+  info: Icon.Info,
+  warning: Icon.Warning,
+};
+
+type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>;
+const dialogContentStyles = cva(
+  'bg-white rounded shadow fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-xl w-auto p-6',
+  {
+    variants: {
+      withIcon: {
+        true: 'flex gap-4 items-start',
+      },
+    },
+  },
+);
+
+type DialogContentProps = DialogContentStylesProps & {
+  children: ReactNode;
+} & Pick<DialogFuncProps, 'onEscapeKeyDown' | 'onInteractOutside' | 'onPointerDownOutside' | 'closable' | 'type'>;
+
+function DialogContent({ children, closable = true, type, ...delegated }: DialogContentProps) {
+  const withIcon = typeof type !== 'undefined';
+
+  const IconComponent = type && IconMap[type];
+
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay className="bg-black/30 fixed inset-0" />
+      <DialogPrimitive.Content className={dialogContentStyles({ withIcon })} {...delegated}>
+        {IconComponent && <IconComponent className="my-1 shrink-0" width={32} height={32} />}
+        {closable && (
+          <DialogClose asChild>
+            <Button className="absolute top-2.5 right-2.5 !rounded-full !p-0 h-6 w-6 inline-flex items-center justify-center !bg-transparent hover:!bg-gray-200 focus:!bg-gray-200 !drop-shadow-none">
+              <Icon.Cancel color="density" aria-label="Close" height={18} width={18} />
+            </Button>
+          </DialogClose>
+        )}
+        <div>{children}</div>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}
+
+type DialogTitleProps = JSX.IntrinsicAttributes & DialogPrimitive.DialogTitleProps & RefAttributes<HTMLHeadingElement>;
+
+function DialogTitle(delegated: DialogTitleProps) {
+  return <DialogPrimitive.Title className="m-0 font-semibold text-2xl font-sans text-black-text" {...delegated} />;
+}
+
+type DialogDescriptionProps = JSX.IntrinsicAttributes &
+  DialogPrimitive.DialogDescriptionProps &
+  RefAttributes<HTMLParagraphElement>;
+
+function DialogDescription(delegated: DialogDescriptionProps) {
+  return <DialogPrimitive.Description className="mt-2 mb-5 text-gray-600" {...delegated} />;
+}
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogClose = DialogPrimitive.Close;
+
+export const DialogRoot = DialogPrimitive.Root;
+
+type DialogBaseProps = {
+  children: ReactNode;
+};
+
+export function DialogBase({ children }: DialogBaseProps) {
+  return <DialogRoot>{children}</DialogRoot>;
+}
+
+DialogBase.Title = DialogTitle;
+DialogBase.Trigger = DialogTrigger;
+DialogBase.Description = DialogDescription;
+DialogBase.Content = DialogContent;

package/src/dialog/index.tsx

@@ -0,0 +1,40 @@
+import { destroyFns } from './destroyFns';
+import { DialogBase } from './dialog';
+import type { DialogFuncProps } from './types';
+import { confirm, withWarning, withConfirm, withDialog, withError, withInfo } from './config';
+
+type DialogType = typeof DialogBase & DialogFuncProps;
+
+const Dialog = DialogBase as DialogType;
+
+function showDialog(delegated: DialogFuncProps) {
+  return confirm(withDialog(delegated));
+}
+
+function showWarning(delegated: DialogFuncProps) {
+  return confirm(withWarning(delegated));
+}
+
+function showConfirm(delegated: DialogFuncProps) {
+  return confirm(withConfirm(delegated));
+}
+
+function showError(delegated: DialogFuncProps) {
+  return confirm(withError(delegated));
+}
+
+function showInfo(delegated: DialogFuncProps) {
+  return confirm(withInfo(delegated));
+}
+
+function destroyAll() {
+  while (destroyFns.length) {
+    const close = destroyFns.pop();
+
+    if (close) {
+      close();
+    }
+  }
+}
+
+export { Dialog, destroyAll, showWarning, showConfirm, showDialog, showError, showInfo };

package/src/dialog/types.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+
+export type DialogFuncProps = {
+  afterClose?: () => void;
+  cancelText?: ReactNode;
+  className?: string;
+  closable?: boolean;
+  content?: ReactNode;
+  description?: ReactNode;
+  okCancel?: boolean;
+  okText?: ReactNode;
+  onCancel?: (...args: unknown[]) => void;
+  onEscapeKeyDown?: (event: Event) => void;
+  onInteractOutside?: (event: Event) => void;
+  onOk?: (...args: unknown[]) => void;
+  onPointerDownOutside?: (event: Event) => void;
+  open?: boolean;
+  prefixCls?: string;
+  title?: ReactNode;
+  type?: 'info' | 'error' | 'warning';
+};
+
+export type ConfigUpdate = DialogFuncProps | ((prevConfig: DialogFuncProps) => DialogFuncProps);
+
+export type DialogFunc = (props: DialogFuncProps) => {
+  destroy: () => void;
+  update: (configUpdate: ConfigUpdate) => void;
+};
+
+export type ModalStaticFunctions = Record<NonNullable<DialogFuncProps['type']>, DialogFunc>;
+
+export interface ConfirmDialogProps extends DialogFuncProps {
+  afterClose?: () => void;
+  close: (...args: unknown[]) => void;
+  autoFocusButton?: null | 'ok' | 'cancel';
+  rootPrefixCls: string;
+  iconPrefixCls?: string;
+}

package/src/dropdown-menu/DropdownMenu.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta } from '@storybook/react';
+import clsx from 'clsx';
+import { useState } from 'react';
+
+import { DropdownMenu } from '.';
+import { Button } from '../button';
+import { Icon } from '../icons';
+
+export default {
+  title: 'Components/DropdownMenu',
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+} as Meta<any>;
+
+function ContentWithIcon() {
+  return (
+    <>
+      <DropdownMenu.Label>View</DropdownMenu.Label>
+      <DropdownMenu.Item>
+        <div className="flex items-center">
+          <Icon.Glasses width={24} height={24} />
+          <span className="px-4">Nerdy</span>
+        </div>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        <div className="flex items-center">
+          <Icon.GraphQL width={24} height={24} />
+          <span className="px-4">Developer</span>
+        </div>
+      </DropdownMenu.Item>
+    </>
+  );
+}
+
+export const WithOpenState = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <DropdownMenu.Root content={<ContentWithIcon />} onOpenChange={setIsOpen}>
+      <Button>
+        <div className="flex items-center">
+          <Icon.NailPolish width={20} height={20} /> <span className="pl-4 pr-8">Pretty</span>
+          <Icon.Arrow className={clsx({ 'rotate-180': isOpen })} />
+        </div>
+      </Button>
+    </DropdownMenu.Root>
+  );
+};

package/src/dropdown-menu/dropdown-menu-item.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+
+type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
+  children: ReactNode;
+};
+
+export function DropdownMenuItem({ children, className, ...delegated }: DropdownMenuItemProps) {
+  return (
+    <DropdownMenuPrimitive.Item
+      {...delegated}
+      className={clsx(
+        'text-xs font-medium text-black-text',
+        'flex h-10 cursor-pointer items-center bg-white px-4 outline-asteroid',
+        'hover:bg-[#F8F8F9] hover:outline-none hover:focus-visible:outline-none',
+        'first:rounded-tr first:rounded-tl last:rounded-br last:rounded-bl',
+        className,
+      )}
+    >
+      {children}
+    </DropdownMenuPrimitive.Item>
+  );
+}

package/src/dropdown-menu/dropdown-menu-label.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+type DropdownMenuLabelProps = {
+  children: ReactNode;
+};
+
+export function DropdownMenuLabel({ children }: DropdownMenuLabelProps) {
+  return (
+    <DropdownMenuPrimitive.Label
+      className={clsx('bg-white px-4 py-2 text-xs text-label', 'first:rounded-tl first:rounded-tr')}
+    >
+      {children}
+    </DropdownMenuPrimitive.Label>
+  );
+}

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+type DropdownMenuRootProps = {
+  children: ReactNode;
+  content: ReactNode;
+  alignContent?: 'start' | 'center' | 'end';
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+export function DropdownMenuRoot({ children, content, onOpenChange, alignContent = 'start' }: DropdownMenuRootProps) {
+  return (
+    <DropdownMenuPrimitive.Root onOpenChange={onOpenChange}>
+      <DropdownMenuPrimitive.Trigger asChild>{children}</DropdownMenuPrimitive.Trigger>
+      <DropdownMenuPrimitive.Content align={alignContent} sideOffset={5} className="shadow">
+        {content}
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Root>
+  );
+}

package/src/dropdown-menu/index.ts

@@ -0,0 +1,9 @@
+import { DropdownMenuRoot } from './dropdown-menu-root';
+import { DropdownMenuItem } from './dropdown-menu-item';
+import { DropdownMenuLabel } from './dropdown-menu-label';
+
+export const DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Item: DropdownMenuItem,
+  Label: DropdownMenuLabel,
+};

package/src/icon-button/IconButton.stories.tsx

@@ -0,0 +1,35 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { IconButton } from '.';
+import { Icon } from '../icons';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+export const AllButton: Story = {
+  name: 'All Buttons',
+  render: () => {
+    return (
+      <div className="grid grid-cols-5 gap-6 justify-items-center">
+        {sizes.map(size => (
+          <IconButton size={size}>
+            <Icon.Cancel width={16} height={16} />
+          </IconButton>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Default: Story = {
+  args: {
+    children: <Icon.Cancel width={16} height={16} />,
+  },
+};

package/src/icon-button/icon-button.tsx

@@ -0,0 +1,42 @@
+import { ComponentPropsWithRef, forwardRef } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+type IconButtonStylesProps = VariantProps<typeof buttonStyles>;
+const buttonStyles = cva(
+  [
+    'flex items-center justify-center rounded-full font-medium cursor-pointer',
+    'disabled:cursor-default disabled:scale-100 disabled:shadow-none',
+    'active:scale-95',
+    'focus:shadow focus:bg-slate-200',
+    'hover:shadow hover:bg-slate-200',
+    'focus-visible:outline-inherit focus-visible:outline-offset-1 focus-visible:outline focus-visible:outline-1',
+  ],
+  {
+    variants: {
+      size: {
+        xs: 'h-8 w-8',
+        sm: 'h-9 w-9',
+        md: 'h-10 w-10',
+        lg: 'h-10 w-10',
+        xl: 'h-11 w-11',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+    },
+  },
+);
+
+export type IconButtonProps = ComponentPropsWithRef<'button'> & IconButtonStylesProps;
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ children, className, type = 'button', size, ...delegated }, ref) => {
+    return (
+      <button ref={ref} type={type} className={buttonStyles({ size, className })} {...delegated}>
+        {children}
+      </button>
+    );
+  },
+);
+
+IconButton.displayName = 'Button';

package/src/icon-button/index.ts

@@ -0,0 +1,3 @@
+export { IconButton } from './icon-button';
+
+export type { IconButtonProps } from './icon-button';

package/src/icons/Iconography.stories.mdx

@@ -0,0 +1,45 @@
+import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/';
+
+import { Icon as IconExample } from '.';
+
+<Meta title="Iconography" />
+
+# Iconography
+
+<IconGallery>
+  <IconItem name="Arrow"  >
+    <IconExample.Arrow />
+  </IconItem>
+
+  <IconItem name="Cancel"  >
+    <IconExample.Cancel />
+  </IconItem>
+
+  <IconItem name="Dots">
+    <IconExample.Dots />
+  </IconItem>
+
+  <IconItem name="Glasses"  >
+    <IconExample.Glasses />
+  </IconItem>
+
+  <IconItem name="GraphQL"  >
+    <IconExample.GraphQL />
+  </IconItem>
+
+  <IconItem name="NailPolish"  >
+    <IconExample.NailPolish />
+  </IconItem>
+
+  <IconItem name="Error"  >
+    <IconExample.Error />
+  </IconItem>
+
+  <IconItem name="Info"  >
+    <IconExample.Info />
+  </IconItem>
+
+  <IconItem name="Warning"  >
+    <IconExample.Warning />
+  </IconItem>
+</IconGallery>

package/src/icons/arrow.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, SVGProps } from 'react';
+
+type ArrowProps = SVGProps<SVGSVGElement>;
+
+type ArrowRef = SVGSVGElement;
+
+export const Arrow = forwardRef<ArrowRef, ArrowProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="10" height="10" viewBox="0 0 10 10" fill="currentColor" {...delegated}>
+      <path d="M4.14995 9.85C4.24341 9.94161 4.36907 9.99293 4.49995 9.99293C4.63083 9.99293 4.75649 9.94161 4.84995 9.85L8.03995 6.67C8.09195 6.6248 8.13404 6.56934 8.16359 6.5071C8.19314 6.44486 8.20951 6.37719 8.21167 6.30832C8.21383 6.23946 8.20173 6.17089 8.17614 6.10693C8.15055 6.04296 8.11201 5.98497 8.06295 5.9366C8.01389 5.88823 7.95536 5.85052 7.89104 5.82584C7.82671 5.80116 7.75798 5.79003 7.68915 5.79317C7.62033 5.79631 7.55289 5.81363 7.49108 5.84406C7.42927 5.87449 7.37441 5.91737 7.32995 5.97L4.49995 8.78L1.66995 5.96C1.62475 5.908 1.56929 5.86591 1.50705 5.83636C1.44481 5.80681 1.37714 5.79044 1.30827 5.78828C1.23941 5.78612 1.17084 5.79822 1.10688 5.82381C1.04291 5.8494 0.98492 5.88794 0.936549 5.937C0.888179 5.98606 0.850469 6.04459 0.825787 6.10892C0.801105 6.17324 0.789983 6.24197 0.79312 6.3108C0.796256 6.37962 0.813582 6.44706 0.844012 6.50887C0.874442 6.57068 0.917318 6.62554 0.96995 6.67L4.14995 9.85ZM4.49995 -2.18557e-08C4.22381 -3.39261e-08 3.99995 0.223858 3.99995 0.5L3.99995 9.5L4.99995 9.5L4.99995 0.5C4.99995 0.223857 4.77609 -9.78527e-09 4.49995 -2.18557e-08Z" />
+    </svg>
+  );
+});
+
+Arrow.displayName = 'ArrowIcon';

package/src/icons/cancel.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, SVGProps } from 'react';
+
+type CancelProps = SVGProps<SVGSVGElement>;
+
+type CancelRef = SVGSVGElement;
+
+export const Cancel = forwardRef<CancelRef, CancelProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      width="34"
+      height="34"
+      viewBox="0 0 34 34"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...delegated}
+    >
+      <path
+        d="m27.4301 24.4325-.1299.1299c-.17.15-.6497.5798-1.1695 1.0595l-1.7392 1.5993-.1499.05a.2783.2783 0 0 1-.2299-.14l-3.6183-3.7182-2.6088-2.6388a1.0488 1.0488 0 0 0-.7926-.3838 1.006 1.006 0 0 0-.7096.2899l-5.6474 5.6773-.7696.7496-.07.18h-.2599l-2.6987-2.7088a.3813.3813 0 0 1-.18-.2598l.02-.14 5.6674-5.6173 1.2394-1.2395a.2995.2995 0 0 0 .1-.2398.2903.2903 0 0 0-.1-.2299l-1.8591-1.8692-2.8487-2.8786-1.5692-1.5992-.6197-.6597-.1-.09v-.12a.3689.3689 0 0 1 .12-.2398l2.7786-2.6588.11-.09h.14l.1099.06 5.7273 5.9272.8696.8796a.6998.6998 0 0 0 .9995 0l5.9672-6.0071.1799-.18a4.5467 4.5467 0 0 1 .5597-.5197.5585.5585 0 0 1 .19-.1c.1099 0 .2099.13.2998.22l.08.0899 2.039 2.109s.1899.2.2299.2499a.864.864 0 0 0 .1399.13.7704.7704 0 0 1 .13.1199c.0899.1499 0 .2598-.1799.4298l-6.1172 6.0871a1.3994 1.3994 0 0 0-.5197.7696.9287.9287 0 0 0 .2899.7997l3.0185 2.9786 3.4284 3.1785a2.001 2.001 0 0 1 .1999.2398.2564.2564 0 0 1 .0853.1524.2564.2564 0 0 1-.0323.1715Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+});
+
+Cancel.displayName = 'CancelIcon';

package/src/icons/dots.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, SVGProps } from 'react';
+
+type DotsProps = SVGProps<SVGSVGElement>;
+type DotsRef = SVGSVGElement;
+
+export const Dots = forwardRef<DotsRef, DotsProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...delegated}
+    >
+      <circle cx="10" cy="5" r="1.7857" fill="#9095A8" />
+      <circle cx="10" cy="10" r="1.7857" fill="#9095A8" />
+      <circle cx="10" cy="15" r="1.7857" fill="#9095A8" />
+    </svg>
+  );
+});
+
+Dots.displayName = 'DotsIcon';