@akinon/ui-button 0.5.0 → 0.7.0

package/dist/cjs/index.d.ts

@@ -1,34 +1,16 @@
-import './index.css';
-import type { BaseButtonProps } from 'antd/lib/button/button';
-import type { ButtonHTMLType, ButtonType as AntButtonType } from 'antd/lib/button/buttonHelpers';
-import * as React from 'react';
-type ButtonType = Exclude<AntButtonType, 'dashed'> | 'secondary';
+import React from 'react';
+import type { IButtonProps } from './types';
 /**
- * The props of the Button component.
+ * Button component for Akinon UI.
+ *
+ * This versatile component provides a customizable button element with various types, sizes, icons, and states.
+ * It supports different visual styles and behaviors to fit a wide range of use cases within the Akinon design system.
+ *
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" target="_blank" rel="noopener noreferrer">HTMLButtonElement</a>
+ * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
+ * allowing for flexible usage as both a button and a link.
  */
-export type ButtonProps = Omit<BaseButtonProps, 'type' | 'classNames' | 'rootClassName' | 'styles' | 'prefixCls' | 'shape' | 'htmlType'> & {
-    /**
-     * The type of the button. Note that this is different from the html type.
-     */
-    type?: ButtonType;
-    /**
-     * The href of the button. If provided, the button will be rendered as an anchor tag.
-     */
-    href?: string;
-    /**
-     * The html type of the button. Note that this is different from the type.
-     */
-    htmlType?: ButtonHTMLType;
-    /**
-     * onClick handler.
-     * @param event
-     * @returns
-     */
-    onClick?: (event: React.MouseEvent) => void;
-};
-/**
- * Button component.
- */
-export declare const Button: ({ children, ...buttonProps }: ButtonProps) => React.JSX.Element;
-export {};
+export declare const Button: (buttonProps: IButtonProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,EACV,eAAe,EAEhB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EACV,cAAc,EACd,UAAU,IAAI,aAAa,EAC5B,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,UAAU,GAAG,OAAO,CAAC,aAAa,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,eAAe,EACb,MAAM,GACN,YAAY,GACZ,eAAe,GACf,QAAQ,GACR,WAAW,GACX,OAAO,GACP,UAAU,CACb,GAAG;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,iCAAkC,WAAW,sBAE/D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0G/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -1,25 +1,88 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-require("./index.css");
+const icons_1 = require("@akinon/icons");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
-const React = require("react");
+const react_1 = require("react");
 /**
- * Button component.
+ * Button component for Akinon UI.
+ *
+ * This versatile component provides a customizable button element with various types, sizes, icons, and states.
+ * It supports different visual styles and behaviors to fit a wide range of use cases within the Akinon design system.
+ *
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" target="_blank" rel="noopener noreferrer">HTMLButtonElement</a>
+ * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
+ * allowing for flexible usage as both a button and a link.
  */
-const Button = (_a) => {
-    var { children } = _a, buttonProps = __rest(_a, ["children"]);
-    return React.createElement(antd_1.Button, Object.assign({}, buttonProps), children);
+const Button = (buttonProps) => {
+    const { getPrefixCls, theme } = react_1.default.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const buttonToken = token.Button;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Button'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
+        // MARK: - Disabled
+        const disabledStyles = {
+            '&:disabled, &-disabled': {
+                backgroundColor: (_a = buttonToken.colorBgContainerDisabled) !== null && _a !== void 0 ? _a : token.colorBgContainerDisabled,
+                color: (_b = buttonToken.colorTextDisabled) !== null && _b !== void 0 ? _b : token.colorTextDisabled,
+                borderColor: buttonToken.borderColorDisabled,
+                cursor: 'not-allowed',
+                boxShadow: 'none'
+            }
+        };
+        // END: Disabled
+        return {
+            // MARK: - All
+            [`${prefixCls}`]: {
+                ['> *']: {
+                    verticalAlign: 'middle'
+                }
+            },
+            // END: All
+            // MARK: - Default SM
+            [`${prefixCls}-default`]: {
+                [`&:not(:disabled)${prefixCls}-sm`]: {
+                    backgroundColor: buttonToken.defaultBgSm,
+                    color: buttonToken.colorText,
+                    borderColor: 'transparent',
+                    '&:hover': {
+                        backgroundColor: buttonToken.defaultBgSmHover,
+                        borderColor: 'transparent',
+                        color: buttonToken.colorTextHover
+                    },
+                    [`&${prefixCls}-dangerous`]: {
+                        backgroundColor: buttonToken.colorErrorBgSM,
+                        '&:hover:not(:disabled)': {
+                            color: buttonToken.colorErrorSMHover,
+                            backgroundColor: buttonToken.colorErrorBgSMHover
+                        }
+                    }
+                }
+            },
+            // END: Default SM
+            // MARK: - Success
+            [`${prefixCls}-success`]: Object.assign({ backgroundColor: (_c = buttonToken.colorSuccessBg) !== null && _c !== void 0 ? _c : token.colorSuccessBg, '&:hover:not(:disabled)': {
+                    backgroundColor: (_d = buttonToken.colorSuccessHover) !== null && _d !== void 0 ? _d : token.colorSuccessHover
+                } }, disabledStyles),
+            // END: Success
+            // MARK: - Warning
+            [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
+                    backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
+                    borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
+                } }, disabledStyles)
+            // END: Warning
+        };
+    });
+    // MARK: - Render
+    return useStyle(react_1.default.createElement(antd_1.Button, Object.assign({}, buttonProps, { icon: react_1.default.createElement(icons_1.Icon, { icon: buttonProps.icon, size: 12, style: { lineHeight: 0 } }) }), buttonProps.children));
 };
 exports.Button = Button;

package/dist/cjs/types.d.ts

@@ -0,0 +1,102 @@
+import type { IconName } from '@akinon/icons';
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+
+// TODO: contribute antd to extend the types properly
+export type TButtonType =
+  | 'default'
+  | 'primary'
+  | 'text'
+  | 'link'
+  | 'success'
+  | 'warning';
+
+type TMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+// TODO: contribute antd to generate TS docgen with descriptions
+/**
+ * The props of the Button component.
+ */
+
+export interface IButtonProps extends TMergedHTMLAttributes {
+  /**
+   * The type of the button. Note that this is different from the html type.
+   * @default default
+   */
+  type?: TButtonType;
+  /**
+   * The href of the button. If provided, the button will be rendered as an anchor (`<a>`) tag.
+   */
+  href?: string;
+  /**
+   * The HTML type of the button. Note that this is different from the `type`.
+   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+   */
+  htmlType?: HTMLButtonElement['type'];
+  /**
+   * The size of the button. `middle` is strongly recommended due to the Akinon design system.
+   * Do not use this prop except for special cases.
+   * @default middle
+   */
+  size?: 'middle' | 'small';
+  /**
+   * onClick handler.
+   * @param event
+   * @returns
+   */
+  onClick?: (event: React.MouseEvent) => void;
+  /**
+   * The icon name of the button. Only icons from `akinon/icons` are supported.
+   * If there is no icon which you want to use, please open an issue.
+   */
+  icon?: IconName;
+  /**
+   * The position of the icon. Only applicable when icon is defined.
+   * @default start
+   */
+  iconPosition?: icon extends IconName ? 'start' | 'end' : never;
+  /**
+   * Whether the button is in disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Whether the button is in loading state. If delay is provided, the loading state will be shown after the delay in ms.
+   * @default false
+   */
+  loading?:
+    | boolean
+    | {
+        delay?: number;
+      };
+  /**
+   * Whether the button is ghost.
+   * Recommended for use with `icon` prop without text due to the Akinon design system.
+   * @default false
+   */
+  ghost?: boolean;
+  /**
+   * Whether the button is danger.
+   * @default false
+   */
+  danger?: boolean;
+  /**
+   * Whether the button is block which means it will take the full width of its container.
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * The children of the button. `string` is strongly recommended due to the Akinon design system.
+   */
+  children?: React.ReactNode;
+  /**
+   * The data attributes of the button.
+   */
+  [key: `data-${string}`]: string;
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}

package/dist/esm/index.d.ts

@@ -1,34 +1,16 @@
-import './index.css';
-import type { BaseButtonProps } from 'antd/lib/button/button';
-import type { ButtonHTMLType, ButtonType as AntButtonType } from 'antd/lib/button/buttonHelpers';
-import * as React from 'react';
-type ButtonType = Exclude<AntButtonType, 'dashed'> | 'secondary';
+import React from 'react';
+import type { IButtonProps } from './types';
 /**
- * The props of the Button component.
+ * Button component for Akinon UI.
+ *
+ * This versatile component provides a customizable button element with various types, sizes, icons, and states.
+ * It supports different visual styles and behaviors to fit a wide range of use cases within the Akinon design system.
+ *
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" target="_blank" rel="noopener noreferrer">HTMLButtonElement</a>
+ * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
+ * allowing for flexible usage as both a button and a link.
  */
-export type ButtonProps = Omit<BaseButtonProps, 'type' | 'classNames' | 'rootClassName' | 'styles' | 'prefixCls' | 'shape' | 'htmlType'> & {
-    /**
-     * The type of the button. Note that this is different from the html type.
-     */
-    type?: ButtonType;
-    /**
-     * The href of the button. If provided, the button will be rendered as an anchor tag.
-     */
-    href?: string;
-    /**
-     * The html type of the button. Note that this is different from the type.
-     */
-    htmlType?: ButtonHTMLType;
-    /**
-     * onClick handler.
-     * @param event
-     * @returns
-     */
-    onClick?: (event: React.MouseEvent) => void;
-};
-/**
- * Button component.
- */
-export declare const Button: ({ children, ...buttonProps }: ButtonProps) => React.JSX.Element;
-export {};
+export declare const Button: (buttonProps: IButtonProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,EACV,eAAe,EAEhB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EACV,cAAc,EACd,UAAU,IAAI,aAAa,EAC5B,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,UAAU,GAAG,OAAO,CAAC,aAAa,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,eAAe,EACb,MAAM,GACN,YAAY,GACZ,eAAe,GACf,QAAQ,GACR,WAAW,GACX,OAAO,GACP,UAAU,CACb,GAAG;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,iCAAkC,WAAW,sBAE/D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0G/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -1,21 +1,84 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import './index.css';
-import { Button as AntButton } from 'antd';
-import * as React from 'react';
+import { Icon } from '@akinon/icons';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { Button as AntButton, ConfigProvider } from 'antd';
+import React from 'react';
 /**
- * Button component.
+ * Button component for Akinon UI.
+ *
+ * This versatile component provides a customizable button element with various types, sizes, icons, and states.
+ * It supports different visual styles and behaviors to fit a wide range of use cases within the Akinon design system.
+ *
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" target="_blank" rel="noopener noreferrer">HTMLButtonElement</a>
+ * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
+ * allowing for flexible usage as both a button and a link.
  */
-export const Button = (_a) => {
-    var { children } = _a, buttonProps = __rest(_a, ["children"]);
-    return React.createElement(AntButton, Object.assign({}, buttonProps), children);
+export const Button = (buttonProps) => {
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const buttonToken = token.Button;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Button'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
+        // MARK: - Disabled
+        const disabledStyles = {
+            '&:disabled, &-disabled': {
+                backgroundColor: (_a = buttonToken.colorBgContainerDisabled) !== null && _a !== void 0 ? _a : token.colorBgContainerDisabled,
+                color: (_b = buttonToken.colorTextDisabled) !== null && _b !== void 0 ? _b : token.colorTextDisabled,
+                borderColor: buttonToken.borderColorDisabled,
+                cursor: 'not-allowed',
+                boxShadow: 'none'
+            }
+        };
+        // END: Disabled
+        return {
+            // MARK: - All
+            [`${prefixCls}`]: {
+                ['> *']: {
+                    verticalAlign: 'middle'
+                }
+            },
+            // END: All
+            // MARK: - Default SM
+            [`${prefixCls}-default`]: {
+                [`&:not(:disabled)${prefixCls}-sm`]: {
+                    backgroundColor: buttonToken.defaultBgSm,
+                    color: buttonToken.colorText,
+                    borderColor: 'transparent',
+                    '&:hover': {
+                        backgroundColor: buttonToken.defaultBgSmHover,
+                        borderColor: 'transparent',
+                        color: buttonToken.colorTextHover
+                    },
+                    [`&${prefixCls}-dangerous`]: {
+                        backgroundColor: buttonToken.colorErrorBgSM,
+                        '&:hover:not(:disabled)': {
+                            color: buttonToken.colorErrorSMHover,
+                            backgroundColor: buttonToken.colorErrorBgSMHover
+                        }
+                    }
+                }
+            },
+            // END: Default SM
+            // MARK: - Success
+            [`${prefixCls}-success`]: Object.assign({ backgroundColor: (_c = buttonToken.colorSuccessBg) !== null && _c !== void 0 ? _c : token.colorSuccessBg, '&:hover:not(:disabled)': {
+                    backgroundColor: (_d = buttonToken.colorSuccessHover) !== null && _d !== void 0 ? _d : token.colorSuccessHover
+                } }, disabledStyles),
+            // END: Success
+            // MARK: - Warning
+            [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
+                    backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
+                    borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
+                } }, disabledStyles)
+            // END: Warning
+        };
+    });
+    // MARK: - Render
+    return useStyle(React.createElement(AntButton, Object.assign({}, buttonProps, { icon: React.createElement(Icon, { icon: buttonProps.icon, size: 12, style: { lineHeight: 0 } }) }), buttonProps.children));
 };

package/dist/esm/types.d.ts

@@ -0,0 +1,102 @@
+import type { IconName } from '@akinon/icons';
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+
+// TODO: contribute antd to extend the types properly
+export type TButtonType =
+  | 'default'
+  | 'primary'
+  | 'text'
+  | 'link'
+  | 'success'
+  | 'warning';
+
+type TMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+// TODO: contribute antd to generate TS docgen with descriptions
+/**
+ * The props of the Button component.
+ */
+
+export interface IButtonProps extends TMergedHTMLAttributes {
+  /**
+   * The type of the button. Note that this is different from the html type.
+   * @default default
+   */
+  type?: TButtonType;
+  /**
+   * The href of the button. If provided, the button will be rendered as an anchor (`<a>`) tag.
+   */
+  href?: string;
+  /**
+   * The HTML type of the button. Note that this is different from the `type`.
+   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+   */
+  htmlType?: HTMLButtonElement['type'];
+  /**
+   * The size of the button. `middle` is strongly recommended due to the Akinon design system.
+   * Do not use this prop except for special cases.
+   * @default middle
+   */
+  size?: 'middle' | 'small';
+  /**
+   * onClick handler.
+   * @param event
+   * @returns
+   */
+  onClick?: (event: React.MouseEvent) => void;
+  /**
+   * The icon name of the button. Only icons from `akinon/icons` are supported.
+   * If there is no icon which you want to use, please open an issue.
+   */
+  icon?: IconName;
+  /**
+   * The position of the icon. Only applicable when icon is defined.
+   * @default start
+   */
+  iconPosition?: icon extends IconName ? 'start' | 'end' : never;
+  /**
+   * Whether the button is in disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Whether the button is in loading state. If delay is provided, the loading state will be shown after the delay in ms.
+   * @default false
+   */
+  loading?:
+    | boolean
+    | {
+        delay?: number;
+      };
+  /**
+   * Whether the button is ghost.
+   * Recommended for use with `icon` prop without text due to the Akinon design system.
+   * @default false
+   */
+  ghost?: boolean;
+  /**
+   * Whether the button is danger.
+   * @default false
+   */
+  danger?: boolean;
+  /**
+   * Whether the button is block which means it will take the full width of its container.
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * The children of the button. `string` is strongly recommended due to the Akinon design system.
+   */
+  children?: React.ReactNode;
+  /**
+   * The data attributes of the button.
+   */
+  [key: `data-${string}`]: string;
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-button",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "private": false,
   "description": "A basic button react component.",
   "type": "module",
@@ -10,16 +10,16 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0"
+    "antd": "5.17.0",
+    "@akinon/icons": "0.6.0",
+    "@akinon/ui-theme": "0.7.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/eslint-config": "0.1.0",
-    "@akinon/vite-config": "0.4.0",
-    "@akinon/typescript-config": "0.2.0"
+    "@akinon/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -39,12 +39,8 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
-    "lint": "eslint *.ts*",
-    "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/cjs/index.css

@@ -1,5 +0,0 @@
-.akinon-btn-secondary {
-  color: var(--color-neutral-50);
-  background-color: var(--color-green-500);
-  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
-}

package/dist/esm/index.css

@@ -1,5 +0,0 @@
-.akinon-btn-secondary {
-  color: var(--color-neutral-50);
-  background-color: var(--color-green-500);
-  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
-}