@rovula/ui 0.0.20 → 0.0.22

package/src/icons/material-icon/solid/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/solid/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/solid/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/solid/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/solid/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/solid/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.098C3.635 18.93 3.27 18.043 3.27 17s.366-1.93 1.098-2.662c.733-.731 1.62-1.097 2.662-1.097 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.098Zm6.23-.903v-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-.644Zm3.178-9.627-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-.221Z"
+    />
+  </svg>
+);
+
+export default InterestsIcon;

package/src/icons/material-icon/solid/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/solid/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="M3.5 8.25V5.308c0-.497.177-.923.531-1.277A1.74 1.74 0 0 1 5.308 3.5h13.384c.497 0 .923.177 1.277.531.354.354.531.78.531 1.277V8.25h-17ZM5.308 20.5a1.74 1.74 0 0 1-1.277-.531 1.74 1.74 0 0 1-.531-1.277V9.75h4.192V20.5H5.308Zm11 0V9.75H20.5v8.942c0 .497-.177.923-.531 1.277a1.74 1.74 0 0 1-1.277.531h-2.384Zm-7.116 0V9.75h5.616V20.5H9.192Z"
+    />
+  </svg>
+);
+
+export default TableChartIcon;

package/src/icons/material-icon/solid/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/materialIconConfig.tsx

@@ -0,0 +1,23 @@
+import * as MaterialIconSolid from "./material-icon/solid";
+import * as MaterialIconOutline from "./material-icon/outline";
+
+import { registerIconSet } from "./iconRegistry";
+import { getIconKeyByNaming } from "./utils";
+import { IconRegistryMap, IconSet } from "./type";
+
+const materialIcons: IconRegistryMap = Object.keys(MaterialIconSolid).reduce(
+  (prev, key) => {
+    const iconKey = getIconKeyByNaming(key);
+
+    return {
+      ...prev,
+      [iconKey]: {
+        solid: (MaterialIconSolid as IconSet)[key] ?? null,
+        outline: (MaterialIconOutline as IconSet)[key] ?? null,
+      },
+    };
+  },
+  {} as IconRegistryMap
+);
+
+registerIconSet("material", materialIcons);

package/src/icons/type.ts

@@ -0,0 +1,11 @@
+export type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export type IconVariant = "solid" | "outline";
+
+export type IconVariantsMap = {
+  [K in IconVariant]?: IconComponent; // | (() => Promise<{ default: IconComponent }>) TODO
+};
+
+export type IconRegistryMap = Record<string, IconVariantsMap>;
+
+export type IconSet = Record<string, IconComponent>;

package/src/icons/utils.ts

@@ -0,0 +1,6 @@
+export function getIconKeyByNaming(camelCaseStr: string): string {
+  return camelCaseStr
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .toLowerCase()
+    .replace("-icon", "");
+}

package/src/index.ts

@@ -1,6 +1,8 @@
 // UI Components
 // import "./src/styles/style.css";
 import "./theme/global.css";
+import "./icons/iconConfig";
+
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
 export { default as Text } from "./components/Text/Text";
@@ -22,11 +24,14 @@ export {
 } from "./components/Popover/Popover";
 export { default as Loading } from "./components/Loading/Loading";
 export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
+export { default as Icon } from "./components/Icon/Icon";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 export * from "./components/Search/Search";
+export * from "./components/Slider/Slider";
+export * from "./components/Switch/Switch";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";

package/src/theme/presets/colors.js

@@ -36,7 +36,7 @@ module.exports = {
         ...generateColorConfig("primary", "primary-ramps-primary"),
         ...generateColorConfig("secondary", "secondary-ramps-secondary"),
         ...generateColorConfig("tertiary", "tertiary-ramps-tertiary"),
-        ...generateColorConfig("grey", "grey"),
+        ...generateColorConfig("grey", "grey-grey"),
 
         ...generateColorConfig("grey2", "grey2-grey2", secondaryRange),
         ...generateColorConfig("info", "info-info", secondaryRange),
@@ -56,19 +56,6 @@ module.exports = {
         ...generateTransparentColorConfig("black", "other"),
         ...generateTransparentColorConfig("white", "other"),
 
-        "black-transparent-8":
-          "color-mix(in srgb, var(--other-transparency-black-8) calc(100% * <alpha-value>), transparent)",
-        "black-transparent-12":
-          "color-mix(in srgb, var(--other-transparency-black-12) calc(100% * <alpha-value>), transparent)",
-        "black-transparent-16":
-          "color-mix(in srgb, var(--other-transparency-black-16) calc(100% * <alpha-value>), transparent)",
-        "black-transparent-24":
-          "color-mix(in srgb, var(--other-transparency-black-24) calc(100% * <alpha-value>), transparent)",
-        "black-transparent-32":
-          "color-mix(in srgb, var(--other-transparency-black-32) calc(100% * <alpha-value>), transparent)",
-        "black-transparent-48":
-          "color-mix(in srgb, var(--other-transparency-black-48) calc(100% * <alpha-value>), transparent)",
-
         "state-disable-solid": withColorMixin("--state-color-disable-solid"),
         "state-disable-outline": withColorMixin(
           "--state-color-disable-outline"
@@ -86,12 +73,14 @@ module.exports = {
 
         "base-bg": withColorMixin("--base-color-bg"),
         "base-bg2": withColorMixin("--base-color-bg2"),
+        "base-bg3": withColorMixin("--base-color-bg3"),
         "base-popup": withColorMixin("--base-color-popup"),
         "base-popup-highlight": withColorMixin("--base-color-popup-hightlight"),
         "base-popup-curtain": withColorMixin("--base-color-popup-curtain"),
         "base-popup-foreground": withColorMixin(
           "--base-color-popup-foreground"
         ),
+        "base-stroke": withColorMixin("--base-color-workspace-stroke"),
 
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

package/dist/cjs/types/components/ActionButton/ActionButton.styles copy.d.ts

@@ -1,6 +0,0 @@
-export declare const actionButtonVariants: (props?: ({
-    variant?: "solid" | "outline" | "icon" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-    disabled?: boolean | null | undefined;
-    active?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/cjs/types/components/Button/Button.styles copy.d.ts

@@ -1,7 +0,0 @@
-export declare const buttonVariants: (props?: ({
-    color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-    variant?: "solid" | "outline" | "flat" | "link" | null | undefined;
-    disabled?: boolean | null | undefined;
-    fullwidth?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/components/ActionButton/ActionButton.styles copy.js

@@ -1,90 +0,0 @@
-import { cva } from "class-variance-authority";
-export var actionButtonVariants = cva(["rounded box-border flex items-center justify-center"], {
-    variants: {
-        variant: {
-            solid: [
-                "bg-secondary-default border-secondary-default text-secondary-foreground fill-secondary-foreground",
-                "hover:bg-secondary-hover hover:border-secondary-hover",
-                "active:bg-secondary-pressed active:border-secondary-pressed",
-            ],
-            outline: [
-                "border bg-transparent disabled:bg-transparent disabled:border-disable-outline",
-                "text-secondary-default fill-secondary-default border-secondary-stroke",
-                "hover:bg-secondary-hover-bg hover:border-secondary-hover hover:text-secondary-hover hover:fill-secondary-hover",
-                "active:bg-secondary-hover-bg active:border-secondary-pressed active:text-secondary-pressed active:fill-secondary-pressed",
-            ],
-            icon: [
-                "bg-transparent disabled:bg-transparent rounded-full",
-                "text-secondary-default fill-secondary-default",
-                "hover:bg-secondary-hover-bg hover:text-secondary-hover hover:fill-secondary-hover",
-                "active:text-secondary-pressed active:fill-secondary-pressed",
-            ],
-        },
-        size: {
-            xs: "p-[2px] w-[18px] h-[18px]",
-            sm: "px-2 py-1 w-[38px] h-[30px]",
-            md: "px-3 py-2 w-[46px] h-[38px]",
-            lg: "px-4 py-3 w-[64px] h-[56px]",
-        },
-        disabled: {
-            false: "",
-        },
-        active: {
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            variant: "solid",
-            active: true,
-            className: [
-                "bg-primary-default border-primary-default text-primary-foreground fill-primary-foreground",
-                "hover:bg-primary-hover hover:border-primary-hover",
-                "active:bg-primary-pressed active:border-primary-pressed",
-            ],
-        },
-        {
-            variant: "outline",
-            active: true,
-            className: [
-                "text-primary-default fill-primary-default border-primary-stroke",
-                "hover:bg-primary-hover-bg hover:border-primary-hover hover:text-primary-hover hover:fill-primary-hover",
-                "active:bg-primary-hover-bg active:border-primary-pressed active:text-primary-pressed active:fill-primary-pressed",
-            ],
-        },
-        {
-            variant: "icon",
-            active: true,
-            className: [
-                "text-primary-default fill-primary-default",
-                "hover:bg-primary-hover-bg hover:text-primary-hover hover:fill-primary-hover",
-                "active:text-primary-pressed active:fill-primary-pressed",
-            ],
-        },
-        {
-            size: "lg",
-            variant: "icon",
-            className: "w-[56px] h-[56px]",
-        },
-        {
-            size: "md",
-            variant: "icon",
-            className: "w-[38px] h-[38px]",
-        },
-        {
-            size: "sm",
-            variant: "icon",
-            className: "w-[30px] h-[30px]",
-        },
-        {
-            disabled: true,
-            className: "pointer-events-none border-transparent bg-disable-solid text-disable-outline fill-disable-outline",
-        },
-    ],
-    defaultVariants: {
-        size: "md",
-        variant: "solid",
-        disabled: false,
-        active: false,
-    },
-});

package/dist/components/Button/Button.styles copy.js

@@ -1,210 +0,0 @@
-import { cva } from "class-variance-authority";
-export var buttonVariants = cva([
-    // "inline-flex items-center justify-center align-middle no-underline transition-colors ease-in-out duration-300",
-    // "font-sans appearance-none select-none rounded-sm border font-medium tracking-[.02857em]",
-    // "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
-    // "gap-2 font-bold text-white hover:bg-opacity-90 active:scale-[98%]",
-    "gap-2 font-bold text-white outline-none",
-    "transition ease-in-out duration-45",
-], {
-    variants: {
-        color: {
-            primary: [
-                "bg-primary-default border-primary-default text-primary-foreground fill-primary-foreground",
-                "hover:bg-primary-hover hover:border-primary-hover",
-                "active:bg-primary-pressed active:border-primary-pressed",
-            ],
-            secondary: [
-                "bg-secondary-default border-secondary-default text-secondary-foreground fill-secondary-foreground",
-                "hover:bg-secondary-hover hover:border-secondary-hover",
-                "active:bg-secondary-pressed active:border-secondary-pressed",
-            ],
-            tertiary: [
-                "bg-tertiary-default border-tertiary-default text-tertiary-foreground fill-tertiary-foreground",
-                "hover:bg-tertiary-hover hover:border-tertiary-hover",
-                "active:bg-tertiary-pressed active:border-tertiary-pressed",
-            ],
-            success: [
-                "bg-success-default border-success-default text-success-foreground fill-success-foreground",
-                "hover:bg-success-hover hover:border-success-hover",
-                "active:bg-success-pressed active:border-success-pressed",
-            ],
-            info: [
-                "bg-info-default border-info-default text-info-foreground fill-info-foreground",
-                "hover:bg-info-hover hover:border-info-hover",
-                "active:bg-info-pressed active:border-info-pressed",
-            ],
-            warning: [
-                "bg-warning-default border-warning-default text-warning-foreground fill-warning-foreground",
-                "hover:bg-warning-hover hover:border-warning-hover",
-                "active:bg-warning-pressed active:border-warning-pressed",
-            ],
-            error: [
-                "bg-error-default border-error-default text-error-foreground fill-error-foreground",
-                "hover:bg-error-hover hover:border-error-hover",
-                "active:bg-error-pressed active:border-error-pressed",
-            ],
-        },
-        size: {
-            sm: "px-3 py-1 text-sm rounded-sm",
-            md: "px-4 py-2 text-sm rounded-md",
-            lg: "px-6 py-4 text-base rounded-lg",
-        },
-        variant: {
-            solid: "border",
-            outline: "border bg-transparent disabled:border-disable-outline",
-            flat: "bg-transparent",
-            link: "bg-transparent underline underline-offset-4",
-        },
-        disabled: {
-            true: "pointer-events-none border-transparent bg-disable-solid text-disable-outline fill-disable-outline",
-        },
-        fullwidth: {
-            true: "w-full",
-        },
-    },
-    compoundVariants: [
-        // --- Outline ---
-        {
-            variant: "outline",
-            color: "primary",
-            className: [
-                "text-primary-default fill-primary-default border-primary-stroke",
-                "hover:bg-primary-hover-bg hover:border-primary-hover hover:text-primary-hover hover:fill-primary-hover",
-                "active:bg-primary-hover-bg active:border-primary-pressed active:text-primary-pressed active:fill-primary-pressed",
-            ],
-        },
-        {
-            variant: "outline",
-            color: "secondary",
-            className: [
-                "text-secondary-default fill-secondary-default border-secondary-stroke",
-                "hover:bg-secondary-hover-bg hover:border-secondary-hover hover:text-secondary-hover hover:fill-secondary-hover",
-                "active:bg-secondary-hover-bg active:border-secondary-pressed active:text-secondary-pressed active:fill-secondary-pressed",
-            ],
-        },
-        {
-            variant: "outline",
-            color: "tertiary",
-            className: [
-                "text-tertiary-default fill-tertiary-default border-tertiary-stroke",
-                "hover:bg-tertiary-hover-bg hover:border-tertiary-hover hover:text-tertiary-hover hover:fill-tertiary-hover",
-                "active:bg-tertiary-hover-bg active:border-tertiary-pressed active:text-tertiary-pressed active:fill-tertiary-pressed",
-            ],
-        },
-        {
-            variant: "outline",
-            color: "success",
-            className: [
-                "text-success-default fill-success-default border-success-stroke",
-                "hover:bg-success-hover-bg hover:border-success-hover hover:text-success-hover hover:fill-success-hover",
-                "active:bg-success-hover-bg active:border-success-pressed active:text-success-pressed active:fill-success-pressed",
-            ],
-        },
-        {
-            variant: "outline",
-            color: "info",
-            className: [
-                "text-info-default fill-info-default border-info-stroke",
-                "hover:bg-info-hover-bg hover:border-info-hover hover:text-info-hover hover:fill-info-hover",
-                "active:bg-info-hover-bg active:border-info-pressed active:text-info-pressed active:fill-info-pressed",
-            ],
-        },
-        {
-            variant: "outline",
-            color: "warning",
-            className: [
-                "text-warning-default fill-warning-default border-warning-stroke",
-                "hover:bg-warning-hover-bg hover:border-warning-hover hover:text-warning-hover hover:fill-warning-hover",
-                "active:bg-warning-hover-bg active:border-warning-pressed active:text-warning-pressed active:fill-warning-pressed",
-            ],
-        },
-        {
-            variant: "outline",
-            color: "error",
-            className: [
-                "text-error-default fill-error-default border-error-stroke",
-                "hover:bg-error-hover-bg hover:border-error-hover hover:text-error-hover hover:fill-error-hover",
-                "active:bg-error-hover-bg active:border-error-pressed active:text-error-pressed active:fill-error-pressed",
-            ],
-        },
-        // --- Flat, link ---
-        {
-            variant: ["flat", "link"],
-            color: "primary",
-            className: [
-                "text-primary-default fill-primary-default",
-                "hover:bg-primary-hover-bg hover:text-primary-hover hover:fill-primary-hover",
-                "active:bg-transparent active:text-primary-pressed active:fill-primary-pressed",
-            ],
-        },
-        {
-            variant: ["flat", "link"],
-            color: "secondary",
-            className: [
-                "text-secondary-default fill-secondary-default",
-                "hover:bg-secondary-hover-bg hover:text-secondary-hover hover:fill-secondary-hover",
-                "active:bg-transparent active:text-secondary-pressed active:fill-secondary-pressed",
-            ],
-        },
-        {
-            variant: ["flat", "link"],
-            color: "tertiary",
-            className: [
-                "text-tertiary-default fill-tertiary-default",
-                "hover:bg-tertiary-hover-bg hover:text-tertiary-hover hover:fill-tertiary-hover",
-                "active:bg-transparent active:text-tertiary-pressed active:fill-tertiary-pressed",
-            ],
-        },
-        {
-            variant: ["flat", "link"],
-            color: "success",
-            className: [
-                "text-success-default fill-success-default",
-                "hover:bg-success-hover-bg hover:text-success-hover hover:fill-success-hover",
-                "active:bg-transparent active:text-success-pressed active:fill-success-pressed",
-            ],
-        },
-        {
-            variant: ["flat", "link"],
-            color: "info",
-            className: [
-                "text-info-default fill-info-default",
-                "hover:bg-info-hover-bg hover:text-info-hover hover:fill-info-hover",
-                "active:bg-transparent active:text-info-pressed active:fill-info-pressed",
-            ],
-        },
-        {
-            variant: ["flat", "link"],
-            color: "warning",
-            className: [
-                "text-warning-default fill-warning-default",
-                "hover:bg-warning-hover-bg hover:text-warning-hover hover:fill-warning-hover",
-                "active:bg-transparent active:text-warning-pressed active:fill-warning-pressed",
-            ],
-        },
-        {
-            variant: ["flat", "link"],
-            color: "error",
-            className: [
-                "text-error-default fill-error-default",
-                "hover:bg-error-hover-bg hover:text-error-hover hover:fill-error-hover",
-                "active:bg-transparent active:text-error-pressed active:fill-error-pressed",
-            ],
-        },
-        // --- Disabled --
-        {
-            variant: ["outline", "flat", "link"],
-            disabled: true,
-            className: [
-                "bg-transtarent border-disabled-outline text-disable-outline fill-disable-outline",
-            ],
-        },
-    ],
-    defaultVariants: {
-        size: "md",
-        color: "primary",
-        variant: "solid",
-        fullwidth: true,
-    },
-});

package/dist/esm/types/components/ActionButton/ActionButton.styles copy.d.ts

@@ -1,6 +0,0 @@
-export declare const actionButtonVariants: (props?: ({
-    variant?: "solid" | "outline" | "icon" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-    disabled?: boolean | null | undefined;
-    active?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/esm/types/components/Button/Button.styles copy.d.ts

@@ -1,7 +0,0 @@
-export declare const buttonVariants: (props?: ({
-    color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-    variant?: "solid" | "outline" | "flat" | "link" | null | undefined;
-    disabled?: boolean | null | undefined;
-    fullwidth?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;