@rovula/ui 0.0.26 → 0.0.28

package/src/components/Toast/useToast.ts

@@ -0,0 +1,222 @@
+"use client";
+
+// Inspired by react-hot-toast library
+import * as React from "react";
+import { ToastActionElement, ToastProps } from "./Toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 6000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+  contentMode?: "vertical" | "horizontal";
+};
+
+type ToasterPosition =
+  | "top-center"
+  | "top-left"
+  | "top-right"
+  | "bottom-center"
+  | "bottom-left"
+  | "bottom-right"
+  | undefined;
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+  ADD_POSITION: "ADD_POSITION",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["ADD_POSITION"];
+      position?: ToasterPosition;
+    };
+
+interface State {
+  toasts: ToasterToast[];
+  position?: ToasterPosition;
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+    case "ADD_POSITION":
+      return {
+        ...state,
+        position: action.position,
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [], position: undefined };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+type ToastOptions = {
+  position?: State["position"];
+};
+
+function useToast(options?: ToastOptions) {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  React.useEffect(() => {
+    dispatch({
+      type: "ADD_POSITION",
+      position: options?.position,
+    });
+  }, [options?.position]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };

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

@@ -0,0 +1,152 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./Tooltip";
+import Button from "../Button/Button";
+import { TooltipSimple } from "./TooltipSimple";
+
+const meta = {
+  title: "Components/Tooltip",
+  // component: TooltipProvider,
+  tags: ["react-docgen-typescript"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    delayDuration: 700,
+    skipDelayDuration: 300,
+    disableHoverableContent: false,
+  },
+  render: (args: any) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <TooltipProvider
+            delayDuration={props.delayDuration}
+            skipDelayDuration={props.skipDelayDuration}
+            disableHoverableContent={props.disableHoverableContent}
+          >
+            <Tooltip>
+              <TooltipTrigger>Hover</TooltipTrigger>
+              <TooltipContent>
+                <p>Add to library</p>
+                <TooltipArrow className="m-0" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Position = {
+  argTypes: {
+    side: { control: "select", options: ["top", "right", "bottom", "left"] },
+    align: { control: "select", options: ["start", "center", "end"] },
+  },
+  args: {
+    side: "top",
+    align: "center",
+    sideOffset: 4,
+  },
+  render: function Render(args) {
+    return (
+      <div className="flex flex-row gap-4 h-full w-full">
+        <div className="flex flex-1 h-60 justify-center items-center space-x-2">
+          <TooltipProvider>
+            <Tooltip open>
+              <TooltipTrigger>Hover</TooltipTrigger>
+              <TooltipContent
+                side={args.side}
+                align={args.align}
+                sideOffset={args.sideOffset}
+              >
+                <p>Add to library</p>
+                <TooltipArrow className="m-0" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj<{
+  side: "top" | "right" | "bottom" | "left";
+  align: "start" | "center" | "end";
+  sideOffset: number;
+}>;
+
+export const Controlled = {
+  args: {
+    open: false,
+  },
+  render: function Render(args) {
+    const [{ open }, updateArgs] = useArgs();
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <TooltipProvider>
+            <Tooltip defaultOpen open={open}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  onMouseOver={() => updateArgs({ open: true })}
+                  onMouseLeave={() => updateArgs({ open: false })}
+                >
+                  Hover
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Add to library</p>
+                <TooltipArrow className="m-0" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Simple = {
+  args: {
+    open: false,
+  },
+  render: function Render(args) {
+    const [{ open }, updateArgs] = useArgs();
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <TooltipSimple content="Tooltip content">
+            <button>Tooltip trigger</button>
+          </TooltipSimple>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/utils/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipArrow = TooltipPrimitive.Arrow;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-common-black px-3 py-1.5 typography-buttonMS text-common-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+};

package/src/components/Tooltip/TooltipSimple.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipArrow,
+  TooltipProvider,
+} from "./Tooltip";
+
+interface TooltipProps {
+  children: ReactNode;
+  content: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  className?: string;
+}
+
+export function TooltipSimple({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}: TooltipProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+      >
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side="top" align="center" {...props}>
+          {content}
+          <TooltipArrow width={11} height={5} />
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/icons/material-icon/outline/AllOutIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AllOutIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M7 21H5c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19v-2c0-.283.096-.52.288-.712A.967.967 0 0 1 4 16c.283 0 .52.096.713.288.191.191.287.429.287.712v2h2c.283 0 .52.096.713.288.191.191.287.429.287.712s-.096.52-.287.712A.967.967 0 0 1 7 21Zm12 0h-2a.968.968 0 0 1-.712-.288A.968.968 0 0 1 16 20c0-.283.096-.52.288-.712A.968.968 0 0 1 17 19h2v-2c0-.283.096-.52.288-.712A.968.968 0 0 1 20 16c.283 0 .52.096.712.288.192.191.288.429.288.712v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21Zm-7-2c-1.933 0-3.583-.683-4.95-2.05C5.683 15.583 5 13.933 5 12c0-1.933.683-3.583 2.05-4.95C8.417 5.683 10.067 5 12 5c1.933 0 3.583.683 4.95 2.05C18.317 8.417 19 10.067 19 12c0 1.933-.683 3.583-2.05 4.95C15.583 18.317 13.933 19 12 19ZM3 5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h2c.283 0 .52.096.713.288.191.191.287.429.287.712s-.096.52-.287.713A.968.968 0 0 1 7 5H5v2c0 .283-.096.52-.287.713A.968.968 0 0 1 4 8a.968.968 0 0 1-.712-.287A.968.968 0 0 1 3 7V5Zm17 3a.968.968 0 0 1-.712-.287A.967.967 0 0 1 19 7V5h-2a.968.968 0 0 1-.712-.287A.967.967 0 0 1 16 4c0-.283.096-.52.288-.712A.968.968 0 0 1 17 3h2c.55 0 1.02.196 1.413.587C20.803 3.98 21 4.45 21 5v2c0 .283-.096.52-.288.713A.968.968 0 0 1 20 8Z"
+    />
+  </svg>
+);
+
+export default AllOutIcon;

package/src/icons/material-icon/outline/FormatAlignCenterIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const FormatAlignCenterIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.618 19a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.175.06-.322.178-.44a.598.598 0 0 1 .44-.177h12.764c.175 0 .322.059.44.177a.598.598 0 0 1 .178.44c0 .176-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Zm3.294-3.191a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.175.06-.322.178-.44a.598.598 0 0 1 .44-.178h6.176c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.598.598 0 0 1-.44.178H8.912Zm-3.294-3.191a.597.597 0 0 1-.44-.178A.598.598 0 0 1 5 12c0-.175.06-.322.178-.44a.597.597 0 0 1 .44-.178h12.764c.175 0 .322.06.44.178A.598.598 0 0 1 19 12c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Zm3.294-3.192a.597.597 0 0 1-.44-.177.598.598 0 0 1-.178-.44c0-.176.06-.322.178-.44a.597.597 0 0 1 .44-.178h6.176c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.598.598 0 0 1-.44.177H8.912Zm-3.294-3.19a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.176.06-.322.178-.44A.597.597 0 0 1 5.618 5h12.764c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.177H5.618Z"
+    />
+  </svg>
+);
+
+export default FormatAlignCenterIcon;

package/src/icons/material-icon/outline/FormatAlignJustifyIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const FormatAlignJustifyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.618 19a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.175.06-.322.178-.44a.598.598 0 0 1 .44-.177h12.764c.175 0 .322.059.44.177a.598.598 0 0 1 .178.44c0 .176-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Zm0-3.191a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.175.06-.322.178-.44a.598.598 0 0 1 .44-.178h12.764c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Zm0-3.191a.597.597 0 0 1-.44-.178A.598.598 0 0 1 5 12c0-.175.06-.322.178-.44a.597.597 0 0 1 .44-.178h12.764c.175 0 .322.06.44.178A.598.598 0 0 1 19 12c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Zm0-3.192a.597.597 0 0 1-.44-.177.598.598 0 0 1-.178-.44c0-.176.06-.322.178-.44a.597.597 0 0 1 .44-.178h12.764c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.177H5.618Zm0-3.19a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.176.06-.322.178-.44A.597.597 0 0 1 5.618 5h12.764c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.177H5.618Z"
+    />
+  </svg>
+);
+
+export default FormatAlignJustifyIcon;

package/src/icons/material-icon/outline/FormatAlignLeftIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const FormatAlignLeftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.618 19a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.175.06-.322.178-.44a.598.598 0 0 1 .44-.177h12.764c.175 0 .322.059.44.177a.598.598 0 0 1 .178.44c0 .176-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Zm0-3.191a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.175.06-.322.178-.44a.598.598 0 0 1 .44-.178h7.823c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Zm0-3.191a.597.597 0 0 1-.44-.178A.598.598 0 0 1 5 12c0-.175.06-.322.178-.44a.597.597 0 0 1 .44-.178h12.764c.175 0 .322.06.44.178A.598.598 0 0 1 19 12c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Zm0-3.192a.597.597 0 0 1-.44-.177.598.598 0 0 1-.178-.44c0-.176.06-.322.178-.44a.597.597 0 0 1 .44-.178h7.823c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.177H5.618Zm0-3.19a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.176.06-.322.178-.44A.597.597 0 0 1 5.618 5h12.764c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.177H5.618Z"
+    />
+  </svg>
+);
+
+export default FormatAlignLeftIcon;

package/src/icons/material-icon/outline/FormatAlignRightIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const FormatAlignRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.618 6.235a.597.597 0 0 1-.44-.177.598.598 0 0 1-.178-.44c0-.176.06-.322.178-.44A.597.597 0 0 1 5.618 5h12.764c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.177H5.618Zm4.94 3.191a.597.597 0 0 1-.44-.177.598.598 0 0 1-.177-.44c0-.176.06-.322.178-.44a.597.597 0 0 1 .44-.178h7.823c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.177H10.56Zm-4.94 3.192a.597.597 0 0 1-.44-.178A.598.598 0 0 1 5 12c0-.175.06-.322.178-.44a.597.597 0 0 1 .44-.178h12.764c.175 0 .322.06.44.178A.598.598 0 0 1 19 12c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Zm4.94 3.19a.597.597 0 0 1-.44-.177.597.597 0 0 1-.177-.44c0-.175.06-.322.178-.44a.597.597 0 0 1 .44-.178h7.823c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H10.56ZM5.619 19a.597.597 0 0 1-.44-.178.598.598 0 0 1-.178-.44c0-.175.06-.322.178-.44a.598.598 0 0 1 .44-.177h12.764c.175 0 .322.059.44.177a.598.598 0 0 1 .178.44c0 .176-.06.322-.178.44a.597.597 0 0 1-.44.178H5.618Z"
+    />
+  </svg>
+);
+
+export default FormatAlignRightIcon;

package/src/icons/material-icon/outline/FormatBoldIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const FormatBoldIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8.63 19.133c-.453 0-.838-.158-1.155-.475A1.571 1.571 0 0 1 7 17.504V6.55c0-.453.158-.837.475-1.154A1.571 1.571 0 0 1 8.63 4.92h3.584c1.094 0 2.082.34 2.966 1.021.883.68 1.325 1.597 1.325 2.75 0 .802-.194 1.455-.58 1.96-.388.506-.805.873-1.252 1.101.55.19 1.076.565 1.576 1.125S17 14.193 17 15.142c0 1.37-.505 2.379-1.516 3.024-1.01.645-2.03.967-3.055.967h-3.8Zm.676-2.137h3.036c.845 0 1.442-.234 1.79-.703.35-.469.525-.918.525-1.349 0-.43-.175-.88-.524-1.35-.35-.468-.963-.702-1.84-.702H9.306v4.104Zm0-6.175h2.783c.652 0 1.168-.187 1.55-.56.382-.372.572-.818.572-1.338 0-.553-.202-1.005-.605-1.355-.404-.35-.898-.526-1.484-.526H9.306v3.779Z"
+    />
+  </svg>
+);
+
+export default FormatBoldIcon;

package/src/icons/material-icon/outline/FormatItalicIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const FormatItalicIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M6.875 18.54a.845.845 0 0 1-.621-.255.847.847 0 0 1-.254-.622c0-.245.085-.452.254-.62a.846.846 0 0 1 .621-.254h2.82l3.138-9.328h-2.82a.845.845 0 0 1-.622-.254.846.846 0 0 1-.254-.622c0-.245.085-.452.254-.621a.846.846 0 0 1 .621-.253h7.113c.245 0 .452.084.621.254.17.17.254.376.254.622a.844.844 0 0 1-.254.62.845.845 0 0 1-.621.254h-2.523l-3.137 9.328h2.523c.245 0 .452.085.62.254.17.17.255.377.255.622a.844.844 0 0 1-.254.621.846.846 0 0 1-.621.253H6.875Z"
+    />
+  </svg>
+);
+
+export default FormatItalicIcon;

package/src/icons/material-icon/outline/FormatListBulletedIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const FormatListBulletedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M10.4 17.559a.598.598 0 0 1-.44-.178.598.598 0 0 1-.177-.44c0-.175.059-.322.177-.44a.598.598 0 0 1 .44-.178h7.982c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H10.4Zm0-4.941a.598.598 0 0 1-.44-.178.598.598 0 0 1-.177-.44c0-.175.059-.322.177-.44a.598.598 0 0 1 .44-.178h7.982c.175 0 .322.06.44.178A.598.598 0 0 1 19 12c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H10.4Zm0-4.942a.598.598 0 0 1-.44-.177.598.598 0 0 1-.177-.44c0-.176.059-.322.177-.44a.598.598 0 0 1 .44-.178h7.982c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.177H10.4ZM6.37 18.311c-.377 0-.7-.134-.968-.402A1.319 1.319 0 0 1 5 16.94c0-.377.134-.7.402-.967.269-.269.591-.403.968-.403s.7.134.967.403c.269.268.403.59.403.967s-.134.7-.403.968c-.268.268-.59.402-.967.402Zm0-4.941c-.377 0-.7-.134-.968-.403A1.319 1.319 0 0 1 5 12c0-.377.134-.7.402-.967.269-.269.591-.403.968-.403s.7.134.967.402c.269.269.403.591.403.968s-.134.7-.403.967c-.268.269-.59.403-.967.403Zm0-4.941c-.377 0-.7-.134-.968-.403A1.319 1.319 0 0 1 5 7.06c0-.377.134-.7.402-.968.269-.268.591-.402.968-.402s.7.134.967.402c.269.269.403.591.403.968s-.134.7-.403.967c-.268.269-.59.403-.967.403Z"
+    />
+  </svg>
+);
+
+export default FormatListBulletedIcon;

package/src/icons/material-icon/outline/FormatListNumberedIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const FormatListNumberedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.491 19.823a.477.477 0 0 1-.491-.49.477.477 0 0 1 .491-.491h1.568v-.871h-.744a.477.477 0 0 1-.491-.491.477.477 0 0 1 .49-.491h.745v-.871H5.49A.477.477 0 0 1 5 15.627a.477.477 0 0 1 .491-.491h1.853c.197 0 .363.067.496.2.134.134.2.3.2.496v.983a.674.674 0 0 1-.2.496.674.674 0 0 1-.496.2c.197 0 .363.067.496.2.134.134.2.3.2.497v.919a.674.674 0 0 1-.2.496.674.674 0 0 1-.496.2H5.491Zm.071-5.479a.543.543 0 0 1-.399-.163.543.543 0 0 1-.163-.4v-1.575c0-.197.067-.363.2-.497.134-.133.3-.2.497-.2h1.362v-.87H5.49A.476.476 0 0 1 5 10.147a.478.478 0 0 1 .491-.492h1.853c.197 0 .363.067.496.2.134.134.2.3.2.497v1.441a.675.675 0 0 1-.2.497.674.674 0 0 1-.496.2H5.982v.87H7.55a.477.477 0 0 1 .49.491.478.478 0 0 1-.49.492H5.562Zm1.165-5.48a.478.478 0 0 1-.492-.49V5.157h-.744A.477.477 0 0 1 5 4.668a.478.478 0 0 1 .491-.492h1.172c.157 0 .289.054.395.16.106.106.16.237.16.395v3.642a.477.477 0 0 1-.491.491ZM10.4 17.56a.598.598 0 0 1-.44-.178.598.598 0 0 1-.177-.44c0-.175.059-.322.177-.44a.598.598 0 0 1 .44-.178h7.982c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H10.4Zm0-4.941a.598.598 0 0 1-.44-.178.598.598 0 0 1-.177-.44c0-.175.059-.322.177-.44a.598.598 0 0 1 .44-.178h7.982c.175 0 .322.06.44.178A.598.598 0 0 1 19 12c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.178H10.4Zm0-4.942a.598.598 0 0 1-.44-.177.598.598 0 0 1-.177-.44c0-.176.059-.322.177-.44a.598.598 0 0 1 .44-.178h7.982c.175 0 .322.06.44.178a.598.598 0 0 1 .178.44c0 .175-.06.322-.178.44a.597.597 0 0 1-.44.177H10.4Z"
+    />
+  </svg>
+);
+
+export default FormatListNumberedIcon;

package/src/icons/material-icon/outline/FormatUnderlinedIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const FormatUnderlinedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M6.676 19.442a.655.655 0 0 1-.482-.195.655.655 0 0 1-.194-.482c0-.192.065-.352.194-.482.13-.13.29-.194.482-.194h10.648c.191 0 .352.065.482.195s.194.29.194.482a.654.654 0 0 1-.194.481.655.655 0 0 1-.482.195H6.676ZM12 16.199c-1.402 0-2.497-.426-3.283-1.277-.787-.852-1.18-1.992-1.18-3.423V5.201c0-.228.083-.423.251-.585a.825.825 0 0 1 .593-.244c.228 0 .422.081.584.244a.8.8 0 0 1 .243.585v6.381c0 .911.242 1.642.727 2.19.484.55 1.172.825 2.065.825s1.581-.275 2.066-.824c.484-.55.726-1.28.726-2.19V5.2c0-.228.084-.423.252-.585a.825.825 0 0 1 .593-.244c.227 0 .422.081.584.244a.8.8 0 0 1 .243.585v6.298c0 1.43-.394 2.571-1.18 3.423-.787.851-1.882 1.277-3.284 1.277Z"
+    />
+  </svg>
+);
+
+export default FormatUnderlinedIcon;