@xipkg/button 0.0.3 → 1.0.1

package/.turbo/turbo-build.log

@@ -1,49 +1,14 @@
 
-> @xipkg/button@0.0.2 build
+> @xipkg/button@1.0.0 build
 > tsup index.ts --format cjs --dts
 
-CLI Building entry: index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v6.7.0
-CLI Target: es6
-CJS Build start
-CJS dist\index.js 2.50 KB
-CJS ⚡️ Build success in 37ms
-DTS Build start
-Button.tsx(17,11): error TS2769: No overload matches this call.
-  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | "success" | "error" | "inherit" | "secondary" | "info" | "warning" | undefined; ... 9 more ...; variant?: "contained" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.
-    Type '{ children: ReactNode; status?: Status | undefined; size?: "small" | "medium" | "large" | undefined; loadingPosition?: LoadingPosition | undefined; ... 302 more ...; component?: ElementType<...> | undefined; }' is not assignable to type '{ href: string; }'.
-      Types of property 'href' are incompatible.
-        Type 'string | undefined' is not assignable to type 'string'.
-          Type 'undefined' is not assignable to type 'string'.
-  Overload 2 of 3, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | ... 6 more ... | undefined; ... 9 more ...; variant?: "contained" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>): Element | null', gave the following error.
-    Type '{ children: ReactNode; status?: Status | undefined; size?: "small" | "medium" | "large" | undefined; loadingPosition?: LoadingPosition | undefined; ... 302 more ...; component?: ElementType<...> | undefined; }' is not assignable to type '{ component: ElementType<any>; }'.
-      Types of property 'component' are incompatible.
-        Type 'ElementType<any> | undefined' is not assignable to type 'ElementType<any>'.
-          Type 'undefined' is not assignable to type 'ElementType<any>'.
-  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element | null', gave the following error.
-    Type '{ children: ReactNode; status?: Status | undefined; size?: "small" | "medium" | "large" | undefined; loadingPosition?: LoadingPosition | undefined; ... 302 more ...; component?: ElementType<...> | undefined; }' is not assignable to type '{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | "success" | "error" | "inherit" | "secondary" | "info" | "warning" | undefined; ... 9 more ...; variant?: "contained" | ... 2 more ... | undefined; }'.
-      Types of property 'color' are incompatible.
-        Type 'Color | undefined' is not assignable to type '"primary" | "success" | "error" | "inherit" | "secondary" | "info" | "warning" | undefined'.
-          Type '"gray"' is not assignable to type '"primary" | "success" | "error" | "inherit" | "secondary" | "info" | "warning" | undefined'.
-
-Error: error occured in dts build
-    at Worker.<anonymous> (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\index.js:2281:26)
-    at Worker.emit (node:events:513:28)
-    at MessagePort.<anonymous> (node:internal/worker:243:53)
-    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:737:20)
-    at exports.emitMessage (node:internal/per_context/messageport:23:28)
-DTS Build error
-RollupError: Failed to compile. Check the logs above.
-    at error (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\rollup\dist\shared\rollup.js:349:30)
-    at Object.error (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\rollup\dist\shared\rollup.js:1716:20)
-    at Object.error (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\rollup\dist\shared\rollup.js:25501:42)
-    at generateDtsFromTs (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\rollup.js:7498:22)
-    at C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\rollup.js:7505:59
-    at _nullishCoalesce (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\rollup.js:1:198)
-    at Object.transform (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\rollup.js:7505:18)
-    at C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\rollup\dist\shared\rollup.js:1909:40
-npm ERR! Lifecycle script `build` failed with error: 
-npm ERR! Error: command failed 
-npm ERR!   in workspace: @xipkg/button@0.0.2 
-npm ERR!   at location: C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\packages\pkg.button 
+CLI Building entry: index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v6.7.0
+CLI Target: es6
+CJS Build start
+CJS dist/index.js 4.66 KB
+CJS ⚡️ Build success in 28ms
+DTS Build start
+DTS ⚡️ Build success in 2936ms
+DTS dist/index.d.ts 734.00 B

package/Button.tsx

@@ -1,18 +1,48 @@
-import { Button as MuiButton } from '@mui/material';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { ButtonProps } from './types';
+import { cn } from '@xipkg/utils';
 
-declare module '@mui/material/Typography' {
-  export interface TypographyPropsVariantOverrides {
-    xl: true;
-    l: true;
-    m: true;
-    s: true;
-    xs: true;
-    xxs: true;
-  }
+export const buttonVariants = cva(
+  'inline-flex items-center w-fit justify-center ring-offset-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'text-gray-0 dark:text-gray-100 bg-brand-80 hover:bg-brand-100 active:bg-brand-100 focus:bg-brand-100',
+        secondary: 'bg-gray-0 text-gray-100 border-gray-30 border-2 hover:bg-gray-5 active:bg-gray-5 focus:bg-gray-5',
+        ghost: 'text-gray-100 bg-gray-0 border-0 hover:bg-gray-5 active:bg-gray-5 focus:bg-gray-5',
+        error: 'bg-red-80 text-gray-0 hover:bg-red-100 active:bg-red-100 focus:bg-red-100',
+        success: 'bg-green-80 text-gray-0 hover:bg-green-100 active:bg-green-100 focus:bg-green-100'
+      },
+      size: {
+        l: 'h-14 px-8 rounded-xl text-[20px]',
+        m: 'h-12 px-6 rounded-lg text-[16px]',
+        s: 'h-8 px-4 rounded-md text-[14px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'l',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
-export const Button = ({ children, ...props }: ButtonProps) => {
-  return <MuiButton {...props}>{children}</MuiButton>;
-};
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/dist/index.d.ts

@@ -1,39 +1,14 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps as ButtonProps$1 } from '@mui/material';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
 
-type Status = 'idle' | 'pending' | 'completed';
-type Size = 'small' | 'medium' | 'large';
-type Variant = 'contained' | 'outlined' | 'text';
-type Color = 'primary' | 'success' | 'error' | 'gray';
-type LoadingPosition = 'icon' | 'center';
-type SnackbarPosition = 'left' | 'right' | 'top' | 'bottom';
-type ButtonProps = {
-    status?: Status;
-    size?: Size;
-    loadingPosition?: LoadingPosition;
-    variant?: Variant;
-    color?: Color;
-    startIcon?: any;
-    endIcon?: any;
-    isSnackbar?: boolean;
-    snackbarText?: string;
-    isSnackbarIconStart?: boolean;
-    isSnackbarIconEnd?: boolean;
-    snackbarLoadingPosition?: LoadingPosition;
-    snackbarPosition?: SnackbarPosition;
-    sx?: any;
-} & Omit<ButtonProps$1, 'startIcon' | 'endIcon' | 'color'>;
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "secondary" | "ghost" | "error" | "success" | null | undefined;
+    size?: "l" | "m" | "s" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-declare module '@mui/material/Typography' {
-    interface TypographyPropsVariantOverrides {
-        xl: true;
-        l: true;
-        m: true;
-        s: true;
-        xs: true;
-        xxs: true;
-    }
-}
-declare const Button: ({ children, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
-
-export { Button, ButtonProps };
+export { Button, ButtonProps, buttonVariants };

package/dist/index.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,23 +46,63 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // index.ts
 var pkg_exports = {};
 __export(pkg_exports, {
-  Button: () => Button
+  Button: () => Button,
+  buttonVariants: () => buttonVariants
 });
 module.exports = __toCommonJS(pkg_exports);
 
 // Button.tsx
-var import_material = require("@mui/material");
+var React = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("@xipkg/utils");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = (_a) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, __spreadProps(__spreadValues({}, props), { children }));
-};
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center w-fit justify-center ring-offset-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "text-gray-0 dark:text-gray-100 bg-brand-80 hover:bg-brand-100 active:bg-brand-100 focus:bg-brand-100",
+        secondary: "bg-gray-0 text-gray-100 border-gray-30 border-2 hover:bg-gray-5 active:bg-gray-5 focus:bg-gray-5",
+        ghost: "text-gray-100 bg-gray-0 border-0 hover:bg-gray-5 active:bg-gray-5 focus:bg-gray-5",
+        error: "bg-red-80 text-gray-0 hover:bg-red-100 active:bg-red-100 focus:bg-red-100",
+        success: "bg-green-80 text-gray-0 hover:bg-green-100 active:bg-green-100 focus:bg-green-100"
+      },
+      size: {
+        l: "h-14 px-8 rounded-xl text-[20px]",
+        m: "h-12 px-6 rounded-lg text-[16px]",
+        s: "h-8 px-4 rounded-md text-[14px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "l"
+    }
+  }
+);
+var Button = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, asChild = false, children } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild", "children"]);
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, __spreadProps(__spreadValues({ className: (0, import_utils.cn)(buttonVariants({ variant, size, className })), ref }, props), { children }));
+  }
+);
+Button.displayName = "Button";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  Button,
+  buttonVariants
 });

package/index.ts

@@ -1,2 +1,2 @@
-export { Button } from './Button';
-export type { ButtonProps } from './types';
+export { Button, buttonVariants } from './Button';
+export type { ButtonProps } from './Button';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xipkg/button",
-  "version": "0.0.3",
+  "version": "1.0.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -11,19 +11,19 @@
     "lint": "eslint \"**/*.ts*\""
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.0",
-    "@xipkg/icons": "^0.4.4",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@xipkg/utils": "^1.0.1",
+    "class-variance-authority": "^0.7.0",
     "react": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "^17.0.12",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@xipkg/eslint": "^0.0.3",
+    "@xipkg/eslint": "^0.0.4",
     "@xipkg/typescript": "^0.0.0",
     "eslint": "^7.32.0",
+    "tailwindcss": "^3.3.2",
     "typescript": "^5.1.3"
   },
   "publishConfig": {
@@ -31,5 +31,5 @@
   },
   "author": "xi.effect",
   "description": "",
-  "gitHead": "0ee562e7c7723699c85daf61b493d6a57b7c1f08"
+  "gitHead": "33022d3bd6e72a5ccc9097b187742f9139f7d905"
 }

package/ButtonSnackbar.tsx

@@ -1,104 +0,0 @@
-import { Typography, Stack } from '@mui/material';
-import React, { FC } from 'react';
-
-import {
-  buttonSizes,
-  typographyVariants,
-  buttonDisabledStyle,
-  getButtonPadding,
-  getSnackbarCurrentPosition,
-  buttonBorderStyle,
-} from './styles';
-import { LoadingPosition, Size, SnackbarPosition, Status, Variant } from './types';
-import { IconContainer } from './IconContainer';
-import { Loading } from './Loading';
-
-export const ButtonSnackbar: FC<ButtonSnackbarProps> = ({
-  size,
-  variant,
-  status,
-  snackbarText,
-  isSnackbarIconStart,
-  isSnackbarIconEnd,
-  snackbarLoadingPosition = 'center',
-  snackbarPosition = 'right',
-}) => {
-  const snackbarRef = React.useRef<HTMLDivElement | null>(null);
-  const [snackbarSize, setSnackbarSize] = React.useState(0);
-  const snackbarCurrentPosition = getSnackbarCurrentPosition(snackbarSize, snackbarPosition);
-
-  const buttonBorder = variant === 'outlined' ? buttonBorderStyle[size] : 'none';
-
-  const snackbarPadding = getButtonPadding(
-    !!snackbarText,
-    !!isSnackbarIconStart,
-    !!isSnackbarIconEnd,
-  );
-
-  React.useLayoutEffect(() => {
-    if (!snackbarRef?.current) return;
-    if (snackbarPosition === 'left' || snackbarPosition === 'right') {
-      setSnackbarSize(snackbarRef.current.clientWidth);
-    }
-    if (snackbarPosition === 'top' || snackbarPosition === 'bottom') {
-      setSnackbarSize(snackbarRef.current.clientHeight);
-    }
-  }, [snackbarPosition, size, snackbarText]);
-
-  return (
-    <Stack
-      ref={snackbarRef}
-      direction="row"
-      alignItems="center"
-      sx={{
-        position: 'absolute',
-        border: buttonBorder,
-        ...snackbarCurrentPosition,
-        ...buttonSizes[size],
-        ...snackbarPadding[size],
-        ...buttonDisabledStyle[variant],
-      }}
-    >
-      {status === 'pending' && snackbarLoadingPosition === 'center' && (
-        <Loading top="50%" left="50%" transform="translate(-50%,-50%)" size={size} />
-      )}
-      {isSnackbarIconStart && (
-        <IconContainer
-          size={size}
-          order={0}
-          status={status}
-          isLoadingIcon={snackbarLoadingPosition !== 'center'}
-        />
-      )}
-      {isSnackbarIconEnd && (
-        <IconContainer
-          size={size}
-          order={2}
-          status={status}
-          isLoadingIcon={snackbarLoadingPosition !== 'center'}
-        />
-      )}
-
-      {snackbarText && (
-        <Typography
-          color="inherit"
-          sx={{ opacity: snackbarLoadingPosition === 'center' && status === 'pending' ? 0 : 1 }}
-          variant={typographyVariants[size]}
-        >
-          {snackbarText}
-        </Typography>
-      )}
-    </Stack>
-  );
-};
-
-type ButtonSnackbarProps = {
-  size: Size;
-  variant: Variant;
-  status: Status;
-  snackbarText?: string;
-  isSnackbarIconStart?: boolean;
-  isSnackbarIconEnd?: boolean;
-  snackbarLoadingPosition?: LoadingPosition;
-  snackbarPosition?: SnackbarPosition;
-};

package/IconContainer.tsx

@@ -1,52 +0,0 @@
-import { Stack } from '@mui/material';
-import { Check } from '@xipkg/icons';
-import { FC } from 'react';
-import { Loading } from './Loading';
-import { iconSizes } from './styles';
-import { Size, Status } from './types';
-
-export const IconContainer: FC<IconComponentProps> = ({
-  order,
-  Icon,
-  size,
-  status,
-  isLoadingIcon,
-}) => (
-  <Stack order={order} sx={{ position: 'relative', ...iconSizes[size] }}>
-    {!!Icon && (
-      <Icon
-        sx={{
-          opacity: status === 'idle' ? 1 : 0,
-          color: 'inherit',
-          ...iconSizes[size],
-        }}
-      />
-    )}
-    <Check
-      sx={{
-        opacity: status === 'completed' ? 1 : 0,
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        color: 'inherit',
-        ...iconSizes[size],
-      }}
-    />
-    {isLoadingIcon && (
-      <Loading
-        size={size}
-        top="50%"
-        transform="translateY(-50%)"
-        opacity={status === 'pending' ? 1 : 0}
-      />
-    )}
-  </Stack>
-);
-
-type IconComponentProps = {
-  Icon?: any;
-  order: number;
-  size: Size;
-  status: Status;
-  isLoadingIcon: boolean;
-};

package/Loading.tsx

@@ -1,18 +0,0 @@
-import { FC } from 'react';
-import { CircularProgress, Stack, SxProps } from '@mui/material';
-import { iconSizes, spinnerSizes } from './styles';
-import { Size } from './types';
-
-export const Loading: FC<LoadingProps> = ({ size, ...props }) => (
-  <Stack
-    sx={{
-      position: 'absolute',
-      ...iconSizes[size],
-      ...props,
-    }}
-  >
-    <CircularProgress size={spinnerSizes[size]} color="inherit" />
-  </Stack>
-);
-
-type LoadingProps = { size: Size } & SxProps;

package/styles.ts

@@ -1,191 +0,0 @@
-import { SnackbarPosition, Variant } from './types';
-
-export const buttonSizes = {
-  large: {
-    height: '56px',
-    borderRadius: '12px',
-    gap: '16px',
-  },
-  medium: {
-    height: '48px',
-    borderRadius: '8px',
-    gap: '8px',
-  },
-  small: {
-    height: '32px',
-    borderRadius: '6px',
-    gap: '6px',
-  },
-};
-
-export const buttonVariantsColor = {
-  contained: {
-    primary: {
-      bgcolor: 'var(--xi-brand-80)',
-      color: 'var(--xi-gray-0)',
-    },
-    success: {
-      bgcolor: 'var(--xi-green-80)',
-      color: 'var(--xi-gray-0)',
-    },
-    error: {
-      bgcolor: 'var(--xi-red-80)',
-      color: 'var(--xi-gray-0)',
-    },
-    gray: {
-      bgcolor: 'var(--xi-gray-40)',
-      color: 'var(--xi-gray-100)',
-    },
-  },
-  outlined: {
-    primary: {
-      borderColor: 'var(--xi-brand-80)',
-      color: 'var(--xi-brand-80)',
-    },
-    success: {
-      borderColor: 'var(--xi-green-80)',
-      color: 'var(--xi-green-80)',
-    },
-    error: {
-      borderColor: 'var(--xi-red-80)',
-      color: 'var(--xi-red-80)',
-    },
-    gray: {
-      color: 'var(--xi-gray-100)',
-      borderColor: 'var(--xi-gray-40)',
-    },
-  },
-  text: {
-    primary: { color: 'var(--xi-brand-80)' },
-    success: { color: 'var(--xi-green-80)' },
-    error: { color: 'var(--xi-red-80)' },
-    gray: { color: 'var(--xi-gray-100)' },
-  },
-};
-
-export const buttonDisabledStyle = {
-  contained: {
-    backgroundColor: 'var(--xi-gray-10)',
-    color: 'var(--xi-gray-40)',
-  },
-  outlined: {
-    border: '1px solid',
-    borderColor: 'var(--xi-gray-10)',
-    color: 'var(--xi-gray-40)',
-  },
-  text: {
-    color: 'var(--xi-gray-40)',
-  },
-};
-
-export const buttonBorderStyle = {
-  large: '2px solid',
-  medium: '2px solid',
-  small: '1px solid',
-};
-
-export const clickedPadding = {
-  large: { pt: '14px', pb: '12px' },
-  medium: { pt: '13px', pb: '11px' },
-  small: { pt: '9px', pb: '7px' },
-};
-
-export const typographyVariants = {
-  large: 'l' as 'l',
-  medium: 'm' as 'm',
-  small: 's' as 's',
-};
-
-export const iconSizes = {
-  large: {
-    width: '32px',
-    height: '32px',
-  },
-  medium: {
-    width: '24px',
-    height: '24px',
-  },
-  small: {
-    width: '16px',
-    height: '16px',
-  },
-};
-
-export const spinnerSizes = {
-  large: 32,
-  medium: 24,
-  small: 16,
-};
-
-const style = {
-  large: {
-    padding: '13px 32px',
-  },
-  medium: {
-    padding: '12px 24px',
-  },
-  small: {
-    padding: '8px 16px',
-  },
-};
-
-export const getButtonPadding = (isText: boolean, startIcon: boolean, endIcon: boolean) => {
-  const isTextIconButton = isText && (startIcon || endIcon);
-  const isIconButton = !isText && (startIcon || endIcon);
-
-  if (isTextIconButton) {
-    if (startIcon) {
-      style.large.padding = '13px 24px 13px 12px';
-      style.medium.padding = '12px 16px 12px 12px';
-      style.small.padding = '8px 12px 8px 8px';
-      return style;
-    }
-    if (endIcon) {
-      style.large.padding = '13px 12px 13px 24px';
-      style.medium.padding = '12px 12px 12px 16px';
-      style.small.padding = '8px 8px 8px 12px';
-      return style;
-    }
-  }
-
-  if (isIconButton) {
-    style.large.padding = '13px 12px';
-    style.medium.padding = '12px 12px';
-    style.small.padding = '8px 8px';
-    return style;
-  }
-
-  return style;
-};
-
-export const getSnackbarCurrentPosition = (snackbarSize: number, position: SnackbarPosition) => {
-  switch (position) {
-    case 'top':
-      return { top: `-${snackbarSize + 8}px`, right: '50%', transform: 'translateX(50%)' };
-    case 'bottom':
-      return { bottom: `-${snackbarSize + 8}px`, right: '50%', transform: 'translateX(50%)' };
-    case 'left':
-      return { left: `-${snackbarSize + 16}px`, top: 0 };
-    default: {
-      return { right: `-${snackbarSize + 16}px` };
-    }
-  }
-};
-
-export const getActionButtonStyle = (variant: Variant, color: string) => {
-  if (color === 'gray') {
-    return { bgcolor: 'var(--xi-gray-5)', color: 'var(--xi-gray-100)' };
-  }
-
-  switch (variant) {
-    case 'contained':
-      return { bgcolor: color, color: 'var(--xi-gray-0)' };
-    case 'outlined':
-      return { bgcolor: 'var(--xi-gray-5)', borderColor: color, color };
-    default:
-      return {
-        bgcolor: 'var(--xi-gray-5)',
-        color,
-      };
-  }
-};

package/types.ts

@@ -1,38 +0,0 @@
-import { ButtonProps as MuiButtonProps } from '@mui/material';
-
-export type Status = 'idle' | 'pending' | 'completed';
-export type Size = 'small' | 'medium' | 'large';
-export type Variant = 'contained' | 'outlined' | 'text';
-export type Color = 'primary' | 'success' | 'error' | 'gray';
-export type LoadingPosition = 'icon' | 'center';
-export type SnackbarPosition = 'left' | 'right' | 'top' | 'bottom';
-
-export type ButtonProps = {
-  // button status: pending = spinner appears, completed button disabled with active color
-  // completed and startIcon or endIcon or only icon without text appears check
-  status?: Status;
-  size?: Size; // button size
-  // button spinner position: icon above icon and center
-  loadingPosition?: LoadingPosition;
-  // button variant
-  variant?: Variant;
-  // button color
-  color?: Color;
-  // start or end button icon if icon without text, icon position will be center
-  startIcon?: any;
-  endIcon?: any;
-  // whether to display snackbar
-  isSnackbar?: boolean;
-  // snackbar text
-  snackbarText?: string;
-  // start or end snackbar icon if icon without text, icon position will be center
-  isSnackbarIconStart?: boolean;
-  isSnackbarIconEnd?: boolean;
-  // snackbar spinner position: icon above icon and center
-  snackbarLoadingPosition?: LoadingPosition;
-  // snackbar position: default right
-  snackbarPosition?: SnackbarPosition;
-  // styles
-  sx?: any;
-  // you can also pass default mui button attributes
-} & Omit<MuiButtonProps, 'startIcon' | 'endIcon' | 'color'>;