@xipkg/button 0.0.2 → 0.0.3

package/.turbo/turbo-build.log

@@ -0,0 +1,49 @@
+
+> @xipkg/button@0.0.2 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 

package/Button.tsx

@@ -1,24 +1,7 @@
-import 'pkg.config.muidts';
-
-import { Typography, Button as MuiButton, darken, useTheme } from '@mui/material';
-import React, { FC, MouseEvent } from 'react';
+import { Button as MuiButton } from '@mui/material';
 
 import { ButtonProps } from './types';
 
-import {
-  buttonVariantsColor,
-  buttonSizes,
-  getButtonPadding,
-  buttonDisabledStyle,
-  getActionButtonStyle,
-  typographyVariants,
-  clickedPadding,
-  buttonBorderStyle,
-} from './styles';
-import { ButtonSnackbar } from './ButtonSnackbar';
-import { IconContainer } from './IconContainer';
-import { Loading } from './Loading';
-
 declare module '@mui/material/Typography' {
   export interface TypographyPropsVariantOverrides {
     xl: true;
@@ -30,123 +13,6 @@ declare module '@mui/material/Typography' {
   }
 }
 
-export const Button: FC<ButtonProps> = ({
-  status = 'idle',
-  size = 'medium',
-  loadingPosition = 'center',
-  variant = 'contained',
-  color = 'primary',
-  children,
-  startIcon,
-  endIcon,
-  isSnackbar,
-  snackbarText,
-  isSnackbarIconStart,
-  isSnackbarIconEnd,
-  snackbarLoadingPosition,
-  snackbarPosition,
-  ...props
-}) => {
-  const { sx, onClick, ...otherButtonProps } = props;
-
-  const theme = useTheme();
-
-  const actionButtonStyle = getActionButtonStyle(
-    variant,
-    color === 'grayscale' ? 'grayscale' : darken(theme.palette[color].dark, 0.2),
-  );
-
-  const buttonPadding = getButtonPadding(!!children, !!startIcon, !!endIcon);
-
-  const buttonBorder = variant === 'outlined' ? buttonBorderStyle[size] : 'none';
-  const buttonDisabled = status !== 'completed' ? buttonDisabledStyle[variant] : actionButtonStyle;
-
-  const onButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
-    if (status === 'completed') return;
-
-    if (onClick) {
-      onClick(e);
-    }
-  };
-
-  return (
-    <MuiButton
-      onClick={onButtonClick}
-      disabled={status === 'pending' || status === 'completed'}
-      size={size}
-      disableRipple
-      disableElevation
-      sx={{
-        textTransform: 'none',
-        position: 'relative',
-        minWidth: 0,
-        border: buttonBorder,
-        '&:hover': {
-          ...actionButtonStyle,
-        },
-        '&:disabled': {
-          ...buttonDisabled,
-        },
-        '&:active': {
-          ...actionButtonStyle,
-          pt: clickedPadding[size].pt,
-          pb: clickedPadding[size].pb,
-        },
-        ...buttonSizes[size],
-        ...buttonVariantsColor[variant][color],
-        ...buttonPadding[size],
-        ...sx,
-      }}
-      {...otherButtonProps}
-    >
-      {startIcon && (
-        <IconContainer
-          Icon={startIcon}
-          size={size}
-          order={0}
-          status={status}
-          isLoadingIcon={loadingPosition !== 'center'}
-        />
-      )}
-      {endIcon && (
-        <IconContainer
-          Icon={endIcon}
-          size={size}
-          order={2}
-          status={status}
-          isLoadingIcon={loadingPosition !== 'center'}
-        />
-      )}
-
-      {children && (
-        <Typography
-          order={1}
-          variant={typographyVariants[size]}
-          sx={{
-            color: 'inherit',
-            opacity: loadingPosition === 'center' && status === 'pending' ? 0 : 1,
-          }}
-        >
-          {children}
-        </Typography>
-      )}
-
-      {status === 'pending' && loadingPosition === 'center' && (
-        <Loading top="50%" left="50%" transform="translate(-50%,-50%)" size={size} />
-      )}
-
-      {isSnackbar && status !== 'idle' && (
-        <ButtonSnackbar
-          size={size}
-          variant={variant}
-          status={status}
-          snackbarText={snackbarText}
-          isSnackbarIconStart={isSnackbarIconStart}
-          isSnackbarIconEnd={isSnackbarIconEnd}
-          snackbarLoadingPosition={snackbarLoadingPosition}
-          snackbarPosition={snackbarPosition}
-        />
-      )}
-    </MuiButton>
-  );
+export const Button = ({ children, ...props }: ButtonProps) => {
+  return <MuiButton {...props}>{children}</MuiButton>;
 };

package/ButtonSnackbar.tsx

@@ -1,104 +1,104 @@
-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;
-};
+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 +1,52 @@
-import { Stack } from '@mui/material';
-import { Check } from 'pkg.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;
-};
+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 +1,18 @@
-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;
+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/dist/index.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps as ButtonProps$1 } from '@mui/material';
+
+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 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 };

package/dist/index.js

@@ -0,0 +1,66 @@
+"use strict";
+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 __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;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var pkg_exports = {};
+__export(pkg_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(pkg_exports);
+
+// Button.tsx
+var import_material = require("@mui/material");
+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 }));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xipkg/button",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -14,14 +14,14 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.0",
-    "@xipkg/icons": "^0.4.3",
+    "@xipkg/icons": "^0.4.4",
     "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.2",
+    "@xipkg/eslint": "^0.0.3",
     "@xipkg/typescript": "^0.0.0",
     "eslint": "^7.32.0",
     "typescript": "^5.1.3"
@@ -30,5 +30,6 @@
     "access": "public"
   },
   "author": "xi.effect",
-  "description": ""
+  "description": "",
+  "gitHead": "0ee562e7c7723699c85daf61b493d6a57b7c1f08"
 }

package/styles.ts

@@ -21,60 +21,60 @@ export const buttonSizes = {
 export const buttonVariantsColor = {
   contained: {
     primary: {
-      bgcolor: 'brand.80',
-      color: 'petersburg.0',
+      bgcolor: 'var(--xi-brand-80)',
+      color: 'var(--xi-gray-0)',
     },
     success: {
-      bgcolor: 'ekaterinburg.80',
-      color: 'petersburg.0',
+      bgcolor: 'var(--xi-green-80)',
+      color: 'var(--xi-gray-0)',
     },
     error: {
-      bgcolor: 'moscow.80',
-      color: 'petersburg.0',
+      bgcolor: 'var(--xi-red-80)',
+      color: 'var(--xi-gray-0)',
     },
-    grayscale: {
-      bgcolor: 'petersburg.40',
-      color: 'petersburg.100',
+    gray: {
+      bgcolor: 'var(--xi-gray-40)',
+      color: 'var(--xi-gray-100)',
     },
   },
   outlined: {
     primary: {
-      borderColor: 'brand.80',
-      color: 'brand.80',
+      borderColor: 'var(--xi-brand-80)',
+      color: 'var(--xi-brand-80)',
     },
     success: {
-      borderColor: 'ekaterinburg.80',
-      color: 'ekaterinburg.80',
+      borderColor: 'var(--xi-green-80)',
+      color: 'var(--xi-green-80)',
     },
     error: {
-      borderColor: 'moscow.80',
-      color: 'moscow.80',
+      borderColor: 'var(--xi-red-80)',
+      color: 'var(--xi-red-80)',
     },
-    grayscale: {
-      color: 'petersburg.100',
-      borderColor: 'petersburg.40',
+    gray: {
+      color: 'var(--xi-gray-100)',
+      borderColor: 'var(--xi-gray-40)',
     },
   },
   text: {
-    primary: { color: 'brand.80' },
-    success: { color: 'ekaterinburg.80' },
-    error: { color: 'moscow.80' },
-    grayscale: { color: 'petersburg.100' },
+    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: 'petersburg.10',
-    color: 'petersburg.40',
+    backgroundColor: 'var(--xi-gray-10)',
+    color: 'var(--xi-gray-40)',
   },
   outlined: {
     border: '1px solid',
-    borderColor: 'petersburg.10',
-    color: 'petersburg.40',
+    borderColor: 'var(--xi-gray-10)',
+    color: 'var(--xi-gray-40)',
   },
   text: {
-    color: 'petersburg.40',
+    color: 'var(--xi-gray-40)',
   },
 };
 
@@ -117,22 +117,22 @@ export const spinnerSizes = {
   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);
 
-  const style = {
-    large: {
-      padding: '13px 32px',
-    },
-    medium: {
-      padding: '12px 24px',
-    },
-    small: {
-      padding: '8px 16px',
-    },
-  };
-
   if (isTextIconButton) {
     if (startIcon) {
       style.large.padding = '13px 24px 13px 12px';
@@ -173,18 +173,18 @@ export const getSnackbarCurrentPosition = (snackbarSize: number, position: Snack
 };
 
 export const getActionButtonStyle = (variant: Variant, color: string) => {
-  if (color === 'grayscale') {
-    return { bgcolor: 'petersburg.5', color: 'petersburg.100' };
+  if (color === 'gray') {
+    return { bgcolor: 'var(--xi-gray-5)', color: 'var(--xi-gray-100)' };
   }
 
   switch (variant) {
     case 'contained':
-      return { bgcolor: color, color: 'petersburg.0' };
+      return { bgcolor: color, color: 'var(--xi-gray-0)' };
     case 'outlined':
-      return { bgcolor: 'petersburg.5', borderColor: color, color };
+      return { bgcolor: 'var(--xi-gray-5)', borderColor: color, color };
     default:
       return {
-        bgcolor: 'petersburg.5',
+        bgcolor: 'var(--xi-gray-5)',
         color,
       };
   }

package/types.ts

@@ -1,38 +1,38 @@
-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' | 'grayscale';
-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'>;
+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'>;