@rovula/ui 0.0.21 → 0.0.22

package/src/components/Table/Table.tsx

@@ -79,7 +79,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      " h-12 py-3 px-6 text-left align-middle typography-body2 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
+      " h-12 py-3 px-6 text-left align-middle typography-body2 text-text-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
       className
     )}
     {...props}
@@ -94,7 +94,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      " py-3 px-6 text-left align-middle  typography-body3 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
+      " py-3 px-6 text-left align-middle  typography-body3 text-text-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
       className
     )}
     {...props}

package/src/components/Tabs/Tabs.tsx

@@ -1,43 +1,123 @@
 "use client";
-
+import React, { useState, useRef, useEffect } from "react";
 import { cn } from "@/utils/cn";
-import React, { ReactElement, useState } from "react";
 
 type Tab = {
   label: string;
-  startTabContent?: ReactElement;
-  endTabContent?: ReactElement;
+  startTabContent?: React.ReactElement;
+  endTabContent?: React.ReactElement;
   content: React.ReactNode;
 };
 
 type TabsProps = {
   tabs: Tab[];
   initialTab?: number;
+  tabBarSize?: number;
+  tabMode?: "start" | "justify";
+  enableBorderLine?: boolean;
+  className?: string;
+  tabBarClassName?: string;
+  tabButtonClassName?: string;
+  tabButtonActiveClassName?: string;
+  tabContentClassName?: string;
+  borderSliderClassname?: string;
 };
 
-const Tabs: React.FC<TabsProps> = ({ tabs = [], initialTab = 0 }) => {
+const Tabs: React.FC<TabsProps> = ({
+  tabs = [],
+  initialTab = 0,
+  tabBarSize = 38,
+  enableBorderLine = true,
+  tabMode = "start",
+  className,
+  tabBarClassName,
+  tabButtonClassName,
+  tabButtonActiveClassName,
+  tabContentClassName,
+  borderSliderClassname,
+}) => {
   const [activeTab, setActiveTab] = useState(initialTab);
+  const [sliderStyle, setSliderStyle] = useState({
+    width: "0px",
+    transform: "translateX(0px)",
+  });
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const isInitialMount = useRef(true);
+
+  const updateSliderStyle = () => {
+    const activeTabElement = tabRefs.current[activeTab];
+    if (activeTabElement) {
+      setSliderStyle({
+        width: `${activeTabElement.offsetWidth}px`,
+        transform: `translateX(${activeTabElement.offsetLeft}px)`,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+
+      // Set initial position without animation
+      const activeTabElement = tabRefs.current[activeTab];
+      if (activeTabElement) {
+        setSliderStyle({
+          width: "0px",
+          transform: `translateX(${
+            activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2
+          }px)`,
+        });
+
+        // Trigger reflow
+        setTimeout(() => {
+          updateSliderStyle();
+        }, 50);
+      }
+    } else {
+      updateSliderStyle();
+    }
+
+    // const handleResize = () => {
+    //   updateSliderStyle();
+    // };
+
+    // window.addEventListener("resize", handleResize);
+    // return () => window.removeEventListener("resize", handleResize);
+  }, [activeTab, tabs, tabMode]);
 
   return (
-    <div className="w-full space-y-4">
+    <div className={cn("w-full", className)}>
       <div
-        className="flex border-b border-primary-10 gap-6 h-[54px] box-border"
+        className={cn(
+          `relative flex gap-6 h-[${tabBarSize}px] box-border`,
+          {
+            [`border-b-[1px] border-base-stroke`]: enableBorderLine,
+            "gap-0": tabMode === "justify",
+          },
+          tabBarClassName
+        )}
+        style={{
+          justifyContent: tabMode === "justify" ? "stretch" : tabMode,
+        }}
         role="tablist"
       >
         {tabs.map((tab, index) => (
           <button
             key={index}
+            ref={(el) => (tabRefs.current[index] = el)}
             role="tab"
             aria-selected={index === activeTab}
             aria-controls={`tab-content-${index}`}
             id={`tab-${index}`}
             className={cn(
-              "flex flex-row items-center py-4 px-1 cursor-pointer transition-colors duration-300 box-border gap-3",
+              "flex justify-center flex-row items-center py-4 px-1 cursor-pointer transition-colors duration-300 box-border gap-3",
               {
-                "typography-body2 text-textcolor-dark border-b-[3px] border-textcolor-dark":
-                  index === activeTab,
-                "typography-body1 text-textcolor-grey-light border-b-[3px] border-transparent hover:text-textcolor-dark ":
+                "typography-small3 text-text-dark": index === activeTab,
+                "typography-small1 text-text-grey-light hover:text-text-grey-dark active:text-text-dark":
                   index !== activeTab,
+                [tabButtonClassName ?? ""]: true,
+                [tabButtonActiveClassName ?? ""]: index === activeTab,
+                "flex-1": tabMode === "justify",
               }
             )}
             onClick={() => setActiveTab(index)}
@@ -47,9 +127,16 @@ const Tabs: React.FC<TabsProps> = ({ tabs = [], initialTab = 0 }) => {
             {tab.endTabContent}
           </button>
         ))}
+        <div
+          className={cn(
+            `absolute -bottom-[1px] h-[1px] bg-primary transition-all duration-300 ease-in-out`,
+            borderSliderClassname
+          )}
+          style={sliderStyle}
+        />
       </div>
       <div
-        className=""
+        className={cn("mt-4", tabContentClassName)}
         role="tabpanel"
         id={`tab-content-${activeTab}`}
         aria-labelledby={`tab-${activeTab}`}

package/src/icons/heroIconConfig.ts

@@ -0,0 +1,23 @@
+import * as HeroIconSolid from "@heroicons/react/16/solid";
+import * as HeroIconOutline from "@heroicons/react/24/outline";
+
+import { registerIconSet } from "./iconRegistry";
+import { getIconKeyByNaming } from "./utils";
+import { IconRegistryMap, IconSet } from "./type";
+
+const heroiconIcons: IconRegistryMap = Object.keys(HeroIconSolid).reduce(
+  (prev, key) => {
+    const iconKey = getIconKeyByNaming(key);
+
+    return {
+      ...prev,
+      [iconKey]: {
+        solid: (HeroIconSolid as IconSet)[key] ?? null,
+        outline: (HeroIconOutline as IconSet)[key] ?? null,
+      },
+    };
+  },
+  {} as IconRegistryMap
+);
+
+registerIconSet("heroicons", heroiconIcons);

package/src/icons/iconConfig.ts

@@ -0,0 +1,2 @@
+import "./heroIconConfig";
+import "./materialIconConfig";

package/src/icons/iconRegistry.ts

@@ -0,0 +1,76 @@
+import React from "react";
+import {
+  IconRegistryMap,
+  IconVariantsMap,
+  IconVariant,
+  IconComponent,
+} from "./type";
+
+// Interface for the icon registry
+export interface IconRegistry {
+  [setName: string]: IconRegistryMap;
+}
+
+// The global icon registry object
+export const iconRegistry: IconRegistry = {};
+
+/**
+ * Register an icon set with dynamic or direct imports.
+ * @param setName - The name of the icon set.
+ * @param icons - A record of icon names to their respective import paths with variants.
+ */
+export const registerIconSet = async (
+  setName: string,
+  icons: IconRegistryMap
+) => {
+  const loadedIcons: IconRegistryMap = {};
+
+  for (const [iconName, variants] of Object.entries(icons)) {
+    const loadedVariants: IconVariantsMap = {};
+
+    for (const [variant, importFn] of Object.entries(variants)) {
+      if (importFn) {
+        try {
+          let IconComponent: IconComponent;
+
+          // TODO: support dynamic import.
+          // if (typeof importFn === "function") {
+          //   const module = await (
+          //     importFn as () => Promise<{ default: IconComponent }>
+          //   )();
+          //   IconComponent = module.default;
+          // } else {
+          //   IconComponent = importFn as IconComponent;
+          // }
+          IconComponent = importFn as IconComponent;
+
+          loadedVariants[variant as IconVariant] = IconComponent;
+        } catch (error) {
+          console.warn(
+            `Failed to load ${variant} icon "${iconName}" in set "${setName}":`,
+            error
+          );
+        }
+      }
+    }
+
+    loadedIcons[iconName] = loadedVariants;
+  }
+
+  iconRegistry[setName] = { ...iconRegistry[setName], ...loadedIcons };
+};
+
+/**
+ * Retrieve an icon component by set name, icon name, and variant.
+ * @param setName - The name of the icon set.
+ * @param iconName - The name of the icon.
+ * @param variant - The variant of the icon (solid or outline).
+ * @returns The icon component if found, otherwise undefined.
+ */
+export const getIcon = (
+  setName: string,
+  iconName: string,
+  variant: IconVariant
+): IconComponent | undefined => {
+  return iconRegistry[setName]?.[iconName]?.[variant];
+};

package/src/icons/index.ts

@@ -0,0 +1 @@
+export * from "./iconRegistry";

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ChevronDownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 18 18"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M4.747 6.997a.844.844 0 0 1 1.193 0L9 10.057l3.06-3.06a.844.844 0 0 1 1.193 1.193l-3.656 3.657a.844.844 0 0 1-1.194 0L4.747 8.19a.844.844 0 0 1 0-1.193Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default ChevronDownIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const CollapseContentIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8.923 15.077h-4a.892.892 0 0 1-.657-.266.893.893 0 0 1-.266-.658c0-.261.089-.48.266-.657a.893.893 0 0 1 .657-.265h4.734c.315 0 .58.106.793.32.213.213.32.477.32.792v4.734c0 .261-.09.48-.266.657a.893.893 0 0 1-.658.266.892.892 0 0 1-.658-.265.893.893 0 0 1-.265-.658v-4Zm6.154-6.154h4c.261 0 .48.089.657.266a.893.893 0 0 1 .266.657c0 .262-.088.481-.265.658a.893.893 0 0 1-.658.265h-4.734c-.315 0-.58-.106-.793-.32a1.077 1.077 0 0 1-.32-.792V4.923c0-.261.09-.48.266-.657A.893.893 0 0 1 14.154 4c.262 0 .481.089.658.266a.893.893 0 0 1 .265.657v4Z"
+    />
+  </svg>
+);
+
+export default CollapseContentIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ContentCopyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M9.308 18c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V4.808c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525h8.384c.505 0 .933.175 1.283.525.35.35.525.778.525 1.283v11.384c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H9.308Zm0-1.5h8.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V4.808a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H9.308a.294.294 0 0 0-.212.096.294.294 0 0 0-.096.212v11.384c0 .077.032.148.096.212a.294.294 0 0 0 .212.096Zm-3.5 5c-.505 0-.933-.175-1.283-.525A1.745 1.745 0 0 1 4 19.692V7.558c0-.213.072-.391.215-.535a.726.726 0 0 1 .535-.215c.213 0 .391.072.535.215a.727.727 0 0 1 .215.535v12.134c0 .077.032.148.096.212a.294.294 0 0 0 .212.096h9.134c.213 0 .391.072.535.215a.726.726 0 0 1 .215.535.726.726 0 0 1-.215.535.726.726 0 0 1-.535.215H5.808Z"
+    />
+  </svg>
+);
+
+export default ContentCopyIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ContentPasteIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.308 21.492a1.74 1.74 0 0 1-1.277-.53 1.74 1.74 0 0 1-.531-1.277V6.3c0-.497.177-.923.531-1.277a1.74 1.74 0 0 1 1.277-.53h4.405c.139-.488.422-.892.85-1.212.427-.32.906-.481 1.437-.481.551 0 1.038.16 1.46.48.423.321.704.725.842 1.212h4.39c.497 0 .923.177 1.277.531.354.354.531.78.531 1.277v13.384c0 .498-.177.923-.531 1.277a1.74 1.74 0 0 1-1.277.531H5.308Zm0-1.5h13.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V6.3a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H16.5v1.712c0 .256-.086.47-.259.644a.87.87 0 0 1-.641.26H8.4a.868.868 0 0 1-.641-.26.876.876 0 0 1-.259-.644V5.992H5.308a.294.294 0 0 0-.212.096A.294.294 0 0 0 5 6.3v13.384c0 .078.032.148.096.212a.293.293 0 0 0 .212.096Zm6.694-13.884a.87.87 0 0 0 .643-.26.88.88 0 0 0 .259-.646.871.871 0 0 0-.26-.644.88.88 0 0 0-.646-.258.87.87 0 0 0-.643.26.88.88 0 0 0-.259.645.87.87 0 0 0 .26.644.879.879 0 0 0 .646.259Z"
+    />
+  </svg>
+);
+
+export default ContentPasteIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const DataTableICon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.308 20.5c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V5.308c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525h13.384c.505 0 .933.175 1.283.525.35.35.525.778.525 1.283v13.384c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H5.308ZM5 8.662h14V5.308a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H5.308a.294.294 0 0 0-.212.096.294.294 0 0 0-.096.212v3.354Zm0 5.176h14v-3.676H5v3.676ZM5.308 19h13.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212v-3.354H5v3.354c0 .077.032.148.096.212a.294.294 0 0 0 .212.096ZM7.287 7.727a.87.87 0 0 1-.644-.26.879.879 0 0 1-.258-.645.87.87 0 0 1 .26-.644.879.879 0 0 1 .645-.259.87.87 0 0 1 .644.26.88.88 0 0 1 .258.646.87.87 0 0 1-.26.643.879.879 0 0 1-.645.259Zm0 5.177a.871.871 0 0 1-.644-.26.88.88 0 0 1-.258-.646.87.87 0 0 1 .26-.643.88.88 0 0 1 .645-.259c.257 0 .471.087.644.26a.88.88 0 0 1 .258.646.871.871 0 0 1-.26.643.88.88 0 0 1-.645.259Zm0 5.177a.87.87 0 0 1-.644-.26.88.88 0 0 1-.258-.646.87.87 0 0 1 .26-.643.879.879 0 0 1 .645-.259.87.87 0 0 1 .644.26.879.879 0 0 1 .258.645.87.87 0 0 1-.26.644.879.879 0 0 1-.645.259Z"
+    />
+  </svg>
+);
+
+export default DataTableICon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandCircleDownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m12 13.03-2.558-2.557a.693.693 0 0 0-.513-.208.754.754 0 0 0-.531.208.7.7 0 0 0-.228.535c.003.207.08.386.228.534l2.97 2.97c.18.18.391.27.632.27s.452-.09.633-.27l2.984-2.985a.712.712 0 0 0 .22-.527.717.717 0 0 0-.235-.527.76.76 0 0 0-.527-.21.712.712 0 0 0-.527.22L12 13.03Zm.002 8.47a9.254 9.254 0 0 1-3.706-.748 9.596 9.596 0 0 1-3.016-2.03 9.595 9.595 0 0 1-2.032-3.016 9.246 9.246 0 0 1-.748-3.704c0-1.314.25-2.55.748-3.706a9.596 9.596 0 0 1 2.03-3.016 9.594 9.594 0 0 1 3.016-2.032 9.246 9.246 0 0 1 3.704-.748c1.314 0 2.55.25 3.706.748a9.596 9.596 0 0 1 3.017 2.03 9.594 9.594 0 0 1 2.03 3.016 9.247 9.247 0 0 1 .749 3.704c0 1.314-.25 2.55-.748 3.706a9.596 9.596 0 0 1-2.03 3.017 9.595 9.595 0 0 1-3.016 2.03 9.247 9.247 0 0 1-3.704.749Z"
+    />
+  </svg>
+);
+
+export default ExpandCircleDownIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandCircleRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m13.03 12-2.557 2.558a.693.693 0 0 0-.208.513c0 .205.07.382.208.531a.7.7 0 0 0 .535.228.746.746 0 0 0 .534-.228l2.97-2.97a.868.868 0 0 0 .27-.632.867.867 0 0 0-.27-.633l-2.985-2.984a.711.711 0 0 0-.527-.22.717.717 0 0 0-.527.235.76.76 0 0 0-.21.527.712.712 0 0 0 .22.527L13.03 12Zm-1.028 9.5a9.254 9.254 0 0 1-3.706-.748 9.596 9.596 0 0 1-3.016-2.03 9.595 9.595 0 0 1-2.032-3.016 9.246 9.246 0 0 1-.748-3.704c0-1.314.25-2.55.748-3.706a9.596 9.596 0 0 1 2.03-3.016 9.594 9.594 0 0 1 3.016-2.032 9.246 9.246 0 0 1 3.704-.748c1.314 0 2.55.25 3.706.748a9.596 9.596 0 0 1 3.017 2.03 9.594 9.594 0 0 1 2.03 3.016 9.247 9.247 0 0 1 .749 3.704c0 1.314-.25 2.55-.748 3.706a9.596 9.596 0 0 1-2.03 3.017 9.595 9.595 0 0 1-3.016 2.03 9.247 9.247 0 0 1-3.704.749Z"
+    />
+  </svg>
+);
+
+export default ExpandCircleRightIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandCircleUpIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m12 10.97 2.558 2.557a.693.693 0 0 0 .513.208c.205 0 .382-.07.531-.208a.7.7 0 0 0 .228-.535.746.746 0 0 0-.228-.534l-2.97-2.97a.867.867 0 0 0-.632-.27.867.867 0 0 0-.633.27l-2.984 2.985a.711.711 0 0 0-.22.527c.002.203.08.378.235.527a.76.76 0 0 0 .527.21.712.712 0 0 0 .527-.22L12 10.97Zm.002 10.53a9.254 9.254 0 0 1-3.706-.748 9.596 9.596 0 0 1-3.016-2.03 9.595 9.595 0 0 1-2.032-3.016 9.246 9.246 0 0 1-.748-3.704c0-1.314.25-2.55.748-3.706a9.596 9.596 0 0 1 2.03-3.016 9.594 9.594 0 0 1 3.016-2.032 9.246 9.246 0 0 1 3.704-.748c1.314 0 2.55.25 3.706.748a9.596 9.596 0 0 1 3.017 2.03 9.594 9.594 0 0 1 2.03 3.016 9.247 9.247 0 0 1 .749 3.704c0 1.314-.25 2.55-.748 3.706a9.596 9.596 0 0 1-2.03 3.017 9.595 9.595 0 0 1-3.016 2.03 9.247 9.247 0 0 1-3.704.749Z"
+    />
+  </svg>
+);
+
+export default ExpandCircleUpIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandContentIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.846 18.154h4c.262 0 .481.088.658.265a.894.894 0 0 1 .265.658.892.892 0 0 1-.265.658.894.894 0 0 1-.658.265H5.113c-.316 0-.58-.107-.793-.32a1.076 1.076 0 0 1-.32-.793v-4.733c0-.262.089-.481.266-.658a.894.894 0 0 1 .657-.265c.262 0 .481.088.658.265a.894.894 0 0 1 .265.658v4ZM18.154 5.846h-4a.893.893 0 0 1-.658-.265.894.894 0 0 1-.265-.658c0-.262.088-.481.265-.658A.894.894 0 0 1 14.154 4h4.733c.316 0 .58.107.793.32.213.213.32.477.32.793v4.733c0 .262-.088.481-.265.658a.894.894 0 0 1-.658.265.892.892 0 0 1-.658-.265.894.894 0 0 1-.265-.658v-4Z"
+    />
+  </svg>
+);
+
+export default ExpandContentIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const InterestsIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m3.142 9.371 3.089-5.479a.903.903 0 0 1 .341-.357.914.914 0 0 1 .448-.11.91.91 0 0 1 .446.11.903.903 0 0 1 .342.357l3.088 5.48a.84.84 0 0 1 .113.455.98.98 0 0 1-.128.432.878.878 0 0 1-.775.452H3.932a.862.862 0 0 1-.774-.452.981.981 0 0 1-.128-.432.84.84 0 0 1 .112-.456ZM7.03 20.76c-1.042 0-1.93-.366-2.662-1.098-.732-.732-1.098-1.617-1.098-2.657 0-1.055.366-1.946 1.098-2.673.733-.727 1.62-1.09 2.662-1.09 1.042 0 1.93.366 2.661 1.098.733.731 1.099 1.619 1.099 2.661s-.366 1.93-1.099 2.662c-.732.732-1.619 1.098-2.661 1.098Zm0-1.5c.627 0 1.16-.22 1.6-.659.44-.44.66-.973.66-1.6 0-.627-.22-1.16-.66-1.6-.44-.44-.973-.66-1.6-.66-.627 0-1.16.22-1.6.66-.44.44-.66.973-.66 1.6 0 .627.22 1.16.66 1.6.44.44.973.66 1.6.66ZM4.949 9.213H9.1L7.02 5.567 4.947 9.212Zm8.31 10.644v-5.712c0-.256.088-.47.26-.644a.874.874 0 0 1 .645-.26h5.711c.256 0 .47.087.644.26.173.173.26.388.26.644v5.712c0 .256-.087.47-.26.644a.875.875 0 0 1-.644.26h-5.711a.875.875 0 0 1-.644-.26.875.875 0 0 1-.26-.644Zm1.5-.596h4.52v-4.52h-4.52v4.52Zm1.678-9.031-1.095-.913c-1.008-.833-1.747-1.54-2.216-2.12-.468-.58-.703-1.216-.703-1.905 0-.674.23-1.237.687-1.689.458-.453 1.033-.679 1.727-.679.424 0 .82.101 1.19.303.37.202.7.493.992.872a3.26 3.26 0 0 1 1.002-.867 2.447 2.447 0 0 1 1.19-.308c.685 0 1.257.231 1.716.694.459.463.688 1.03.688 1.702 0 .684-.234 1.312-.702 1.887-.469.574-1.208 1.277-2.217 2.11l-1.094.913a.845.845 0 0 1-.583.221.843.843 0 0 1-.582-.221Zm.582-1.479c1.181-.949 1.993-1.667 2.434-2.154.442-.487.663-.905.663-1.256a.918.918 0 0 0-.246-.66.84.84 0 0 0-.637-.257c-.191 0-.377.056-.559.167-.181.11-.42.315-.718.612l-.937.906-.936-.906c-.304-.304-.545-.51-.722-.617a1.055 1.055 0 0 0-.555-.162c-.268 0-.482.081-.642.243-.16.162-.24.38-.24.655 0 .363.22.788.662 1.275.441.487 1.253 1.205 2.433 2.154Z"
+    />
+  </svg>
+);
+
+export default InterestsIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SaveIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.308 20.5c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V5.308c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525H16.04c.241 0 .473.047.695.14.223.094.416.223.58.387l2.658 2.658c.164.164.293.357.387.58.093.222.14.454.14.695v10.732c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H5.308ZM19 7.85 16.15 5H5.308a.3.3 0 0 0-.221.087.3.3 0 0 0-.087.22v13.385a.3.3 0 0 0 .087.221.3.3 0 0 0 .22.087h13.385a.3.3 0 0 0 .221-.087.3.3 0 0 0 .087-.22V7.85Zm-7 9.42a2.41 2.41 0 0 0 1.77-.732 2.41 2.41 0 0 0 .73-1.769A2.41 2.41 0 0 0 13.77 13a2.41 2.41 0 0 0-1.77-.73 2.41 2.41 0 0 0-1.77.73 2.41 2.41 0 0 0-.73 1.77c0 .692.244 1.281.73 1.768a2.41 2.41 0 0 0 1.77.731ZM7.288 9.883h6.404a.876.876 0 0 0 .646-.258.876.876 0 0 0 .258-.645V7.289a.876.876 0 0 0-.258-.646.876.876 0 0 0-.646-.258H7.288a.876.876 0 0 0-.645.258.876.876 0 0 0-.258.646V8.98c0 .257.086.473.258.645a.876.876 0 0 0 .646.258Z"
+    />
+  </svg>
+);
+
+export default SaveIcon;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const TableChartIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M18.692 20.5H5.308c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V5.308c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525h13.384c.505 0 .933.175 1.283.525.35.35.525.778.525 1.283v13.384c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525ZM5 8.25h14V5.308a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H5.308a.294.294 0 0 0-.212.096.294.294 0 0 0-.096.212V8.25Zm2.692 1.5H5v8.942c0 .077.032.148.096.212a.294.294 0 0 0 .212.096h2.384V9.75Zm8.616 0V19h2.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V9.75h-2.692Zm-1.5 0H9.192V19h5.616V9.75Z"
+    />
+  </svg>
+);
+
+export default TableChartIcon;

package/src/icons/material-icon/outline/index.ts

@@ -0,0 +1,12 @@
+export { default as SaveIcon } from "./SaveIcon";
+export { default as DataTableIcon } from "./DataTableIcon";
+export { default as TableChartIcon } from "./TableChartIcon";
+export { default as InterestsIcon } from "./InterestsIcon";
+export { default as CollapseContentIcon } from "./CollapseContentIcon";
+export { default as ExpandContentIcon } from "./ExpandContentIcon";
+export { default as ExpandCircleRightIcon } from "./ExpandCircleRightIcon";
+export { default as ExpandCircleDownIcon } from "./ExpandCircleDownIcon";
+export { default as ExpandCircleUpIcon } from "./ExpandCircleUpIcon";
+export { default as ContentCopyIcon } from "./ContentCopyIcon";
+export { default as ContentPasteIcon } from "./ContentPasteIcon";
+export { default as ChevronDownIcon } from "./ChevronDownIcon";

package/src/icons/material-icon/solid/ChevronDownIcon.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ChevronDownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 18 18"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M4.747 6.997a.844.844 0 0 1 1.193 0L9 10.057l3.06-3.06a.844.844 0 0 1 1.193 1.193l-3.656 3.657a.844.844 0 0 1-1.194 0L4.747 8.19a.844.844 0 0 1 0-1.193Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default ChevronDownIcon;

package/src/icons/material-icon/solid/CollapseContentIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const CollapseContentIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8.923 15.077h-4a.892.892 0 0 1-.657-.266.893.893 0 0 1-.266-.658c0-.261.089-.48.266-.657a.893.893 0 0 1 .657-.265h4.734c.315 0 .58.106.793.32.213.213.32.477.32.792v4.734c0 .261-.09.48-.266.657a.893.893 0 0 1-.658.266.892.892 0 0 1-.658-.265.893.893 0 0 1-.265-.658v-4Zm6.154-6.154h4c.261 0 .48.089.657.266a.893.893 0 0 1 .266.657c0 .262-.088.481-.265.658a.893.893 0 0 1-.658.265h-4.734c-.315 0-.58-.106-.793-.32a1.077 1.077 0 0 1-.32-.792V4.923c0-.261.09-.48.266-.657A.893.893 0 0 1 14.154 4c.262 0 .481.089.658.266a.893.893 0 0 1 .265.657v4Z"
+    />
+  </svg>
+);
+
+export default CollapseContentIcon;

package/src/icons/material-icon/solid/ContentCopyIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ContentCopyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M9.308 18c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V4.808c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525h8.384c.505 0 .933.175 1.283.525.35.35.525.778.525 1.283v11.384c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H9.308Zm0-1.5h8.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V4.808a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H9.308a.294.294 0 0 0-.212.096.294.294 0 0 0-.096.212v11.384c0 .077.032.148.096.212a.294.294 0 0 0 .212.096Zm-3.5 5c-.505 0-.933-.175-1.283-.525A1.745 1.745 0 0 1 4 19.692V7.558c0-.213.072-.391.215-.535a.726.726 0 0 1 .535-.215c.213 0 .391.072.535.215a.727.727 0 0 1 .215.535v12.134c0 .077.032.148.096.212a.294.294 0 0 0 .212.096h9.134c.213 0 .391.072.535.215a.726.726 0 0 1 .215.535.726.726 0 0 1-.215.535.726.726 0 0 1-.535.215H5.808Z"
+    />
+  </svg>
+);
+
+export default ContentCopyIcon;

package/src/icons/material-icon/solid/ContentPasteIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ContentPasteIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.308 21.492a1.74 1.74 0 0 1-1.277-.53 1.74 1.74 0 0 1-.531-1.277V6.3c0-.497.177-.923.531-1.277a1.74 1.74 0 0 1 1.277-.53h4.405c.139-.488.422-.892.85-1.212.427-.32.906-.481 1.437-.481.551 0 1.038.16 1.46.48.423.321.704.725.842 1.212h4.39c.497 0 .923.177 1.277.531.354.354.531.78.531 1.277v13.384c0 .498-.177.923-.531 1.277a1.74 1.74 0 0 1-1.277.531H5.308Zm0-1.5h13.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V6.3a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H16.5v1.712c0 .256-.086.47-.259.644a.87.87 0 0 1-.641.26H8.4a.868.868 0 0 1-.641-.26.876.876 0 0 1-.259-.644V5.992H5.308a.294.294 0 0 0-.212.096A.294.294 0 0 0 5 6.3v13.384c0 .078.032.148.096.212a.293.293 0 0 0 .212.096Zm6.694-13.884a.87.87 0 0 0 .643-.26.88.88 0 0 0 .259-.646.871.871 0 0 0-.26-.644.88.88 0 0 0-.646-.258.87.87 0 0 0-.643.26.88.88 0 0 0-.259.645.87.87 0 0 0 .26.644.879.879 0 0 0 .646.259Z"
+    />
+  </svg>
+);
+
+export default ContentPasteIcon;