@negative-space/button 2.3.0 → 2.3.1

package/dist/index.d.mts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FlexProps } from '@negative-space/flex';
+import { SpinnerProps } from '@negative-space/spinner';
+
+interface ButtonProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'className' | 'style'> {
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    classNames?: {
+        btn?: string;
+        content?: string;
+        prefix?: string;
+        suffix?: string;
+    };
+    styles?: {
+        btn?: React.CSSProperties;
+        content?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+    };
+    isRippleDisabled?: boolean;
+    isLoading?: boolean;
+    spinner?: React.ReactNode;
+    spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix';
+    spinnerProps?: SpinnerProps;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FlexProps } from '@negative-space/flex';
+import { SpinnerProps } from '@negative-space/spinner';
+
+interface ButtonProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'className' | 'style'> {
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    classNames?: {
+        btn?: string;
+        content?: string;
+        prefix?: string;
+        suffix?: string;
+    };
+    styles?: {
+        btn?: React.CSSProperties;
+        content?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+    };
+    isRippleDisabled?: boolean;
+    isLoading?: boolean;
+    spinner?: React.ReactNode;
+    spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix';
+    spinnerProps?: SpinnerProps;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };

package/dist/index.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var React = require('react');
+var system = require('@negative-space/system');
+var flex = require('@negative-space/flex');
+var spinner = require('@negative-space/spinner');
+var ripple = require('@negative-space/ripple');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/Button.tsx
+var Button = React__default.default.forwardRef(
+  ({
+    children,
+    prefix,
+    suffix,
+    classNames,
+    styles,
+    disabled = false,
+    isRippleDisabled,
+    onClick,
+    isLoading = false,
+    spinner: spinner$1,
+    spinnerPosition = "full",
+    spinnerProps,
+    alignItems = "center",
+    justify = "center",
+    ...props
+  }, ref) => {
+    const { global, components } = system.useNSUI();
+    const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled;
+    const { createRipple } = ripple.useRipple(`${global.prefixCls}-ripple`);
+    const isDisabled = disabled || isLoading;
+    const resolvedSpinner = spinner$1 ?? /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { ...spinnerProps });
+    const handleClick = (e) => {
+      if (isDisabled) return;
+      const isKeyboard = e.detail === 0;
+      if (!rippleDisabled) createRipple(e, { centered: isKeyboard });
+      onClick?.(e);
+    };
+    const showPrefix = prefix || isLoading && spinnerPosition === "prefix";
+    const showContent = children || isLoading && spinnerPosition === "content";
+    const showSuffix = suffix || isLoading && spinnerPosition === "suffix";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      flex.Flex,
+      {
+        ...props,
+        ref,
+        as: "button",
+        alignItems,
+        justify,
+        disabled: isDisabled,
+        "data-disabled": isDisabled,
+        onClick: handleClick,
+        className: system.cn(`${global.prefixCls}-btn`, classNames?.btn),
+        style: styles?.btn,
+        children: spinnerPosition === "full" && isLoading ? resolvedSpinner : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          showPrefix && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: system.cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix),
+              style: styles?.prefix,
+              children: spinnerPosition === "prefix" && isLoading ? resolvedSpinner : prefix
+            }
+          ),
+          showContent && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: system.cn(`${global.prefixCls}-btn-content`, classNames?.content),
+              style: styles?.content,
+              children: spinnerPosition === "content" && isLoading ? resolvedSpinner : children
+            }
+          ),
+          showSuffix && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: system.cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix),
+              style: styles?.suffix,
+              children: spinnerPosition === "suffix" && isLoading ? resolvedSpinner : suffix
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+exports.Button = Button;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button.tsx"],"names":["React","spinner","useNSUI","useRipple","jsx","Spinner","Flex","cn","jsxs","Fragment"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, FlexProps } from '@negative-space/flex'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { useRipple } from '@negative-space/ripple'\n\nexport interface ButtonProps extends Omit<\n  FlexProps<'button'>,\n  'as' | 'prefix' | 'className' | 'style'\n> {\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n  classNames?: {\n    btn?: string\n    content?: string\n    prefix?: string\n    suffix?: string\n  }\n  styles?: {\n    btn?: React.CSSProperties\n    content?: React.CSSProperties\n    prefix?: React.CSSProperties\n    suffix?: React.CSSProperties\n  }\n  isRippleDisabled?: boolean\n  isLoading?: boolean\n  spinner?: React.ReactNode\n  spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n  spinnerProps?: SpinnerProps\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      prefix,\n      suffix,\n      classNames,\n      styles,\n      disabled = false,\n      isRippleDisabled,\n      onClick,\n      isLoading = false,\n      spinner,\n      spinnerPosition = 'full',\n      spinnerProps,\n      alignItems = 'center',\n      justify = 'center',\n      ...props\n    },\n    ref\n  ) => {\n    const { global, components } = useNSUI()\n    const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled\n\n    const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n    const isDisabled = disabled || isLoading\n\n    const resolvedSpinner = spinner ?? <Spinner {...spinnerProps} />\n\n    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n      if (isDisabled) return\n      const isKeyboard = e.detail === 0\n      if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n      onClick?.(e)\n    }\n\n    const showPrefix = prefix || (isLoading && spinnerPosition === 'prefix')\n    const showContent = children || (isLoading && spinnerPosition === 'content')\n    const showSuffix = suffix || (isLoading && spinnerPosition === 'suffix')\n\n    return (\n      <Flex\n        {...props}\n        ref={ref}\n        as=\"button\"\n        alignItems={alignItems}\n        justify={justify}\n        disabled={isDisabled}\n        data-disabled={isDisabled}\n        onClick={handleClick}\n        className={cn(`${global.prefixCls}-btn`, classNames?.btn)}\n        style={styles?.btn}\n      >\n        {spinnerPosition === 'full' && isLoading ? (\n          resolvedSpinner\n        ) : (\n          <>\n            {showPrefix && (\n              <span\n                className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n                style={styles?.prefix}\n              >\n                {spinnerPosition === 'prefix' && isLoading ? resolvedSpinner : prefix}\n              </span>\n            )}\n\n            {showContent && (\n              <span\n                className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n                style={styles?.content}\n              >\n                {spinnerPosition === 'content' && isLoading ? resolvedSpinner : children}\n              </span>\n            )}\n\n            {showSuffix && (\n              <span\n                className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n                style={styles?.suffix}\n              >\n                {spinnerPosition === 'suffix' && isLoading ? resolvedSpinner : suffix}\n              </span>\n            )}\n          </>\n        )}\n      </Flex>\n    )\n  }\n)\n\nButton.displayName = 'Button'\n"]}

package/dist/index.mjs

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useNSUI, cn } from '@negative-space/system';
+import { Flex } from '@negative-space/flex';
+import { Spinner } from '@negative-space/spinner';
+import { useRipple } from '@negative-space/ripple';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/Button.tsx
+var Button = React.forwardRef(
+  ({
+    children,
+    prefix,
+    suffix,
+    classNames,
+    styles,
+    disabled = false,
+    isRippleDisabled,
+    onClick,
+    isLoading = false,
+    spinner,
+    spinnerPosition = "full",
+    spinnerProps,
+    alignItems = "center",
+    justify = "center",
+    ...props
+  }, ref) => {
+    const { global, components } = useNSUI();
+    const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled;
+    const { createRipple } = useRipple(`${global.prefixCls}-ripple`);
+    const isDisabled = disabled || isLoading;
+    const resolvedSpinner = spinner ?? /* @__PURE__ */ jsx(Spinner, { ...spinnerProps });
+    const handleClick = (e) => {
+      if (isDisabled) return;
+      const isKeyboard = e.detail === 0;
+      if (!rippleDisabled) createRipple(e, { centered: isKeyboard });
+      onClick?.(e);
+    };
+    const showPrefix = prefix || isLoading && spinnerPosition === "prefix";
+    const showContent = children || isLoading && spinnerPosition === "content";
+    const showSuffix = suffix || isLoading && spinnerPosition === "suffix";
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        ...props,
+        ref,
+        as: "button",
+        alignItems,
+        justify,
+        disabled: isDisabled,
+        "data-disabled": isDisabled,
+        onClick: handleClick,
+        className: cn(`${global.prefixCls}-btn`, classNames?.btn),
+        style: styles?.btn,
+        children: spinnerPosition === "full" && isLoading ? resolvedSpinner : /* @__PURE__ */ jsxs(Fragment, { children: [
+          showPrefix && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix),
+              style: styles?.prefix,
+              children: spinnerPosition === "prefix" && isLoading ? resolvedSpinner : prefix
+            }
+          ),
+          showContent && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(`${global.prefixCls}-btn-content`, classNames?.content),
+              style: styles?.content,
+              children: spinnerPosition === "content" && isLoading ? resolvedSpinner : children
+            }
+          ),
+          showSuffix && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix),
+              style: styles?.suffix,
+              children: spinnerPosition === "suffix" && isLoading ? resolvedSpinner : suffix
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, FlexProps } from '@negative-space/flex'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { useRipple } from '@negative-space/ripple'\n\nexport interface ButtonProps extends Omit<\n  FlexProps<'button'>,\n  'as' | 'prefix' | 'className' | 'style'\n> {\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n  classNames?: {\n    btn?: string\n    content?: string\n    prefix?: string\n    suffix?: string\n  }\n  styles?: {\n    btn?: React.CSSProperties\n    content?: React.CSSProperties\n    prefix?: React.CSSProperties\n    suffix?: React.CSSProperties\n  }\n  isRippleDisabled?: boolean\n  isLoading?: boolean\n  spinner?: React.ReactNode\n  spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n  spinnerProps?: SpinnerProps\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      prefix,\n      suffix,\n      classNames,\n      styles,\n      disabled = false,\n      isRippleDisabled,\n      onClick,\n      isLoading = false,\n      spinner,\n      spinnerPosition = 'full',\n      spinnerProps,\n      alignItems = 'center',\n      justify = 'center',\n      ...props\n    },\n    ref\n  ) => {\n    const { global, components } = useNSUI()\n    const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled\n\n    const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n    const isDisabled = disabled || isLoading\n\n    const resolvedSpinner = spinner ?? <Spinner {...spinnerProps} />\n\n    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n      if (isDisabled) return\n      const isKeyboard = e.detail === 0\n      if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n      onClick?.(e)\n    }\n\n    const showPrefix = prefix || (isLoading && spinnerPosition === 'prefix')\n    const showContent = children || (isLoading && spinnerPosition === 'content')\n    const showSuffix = suffix || (isLoading && spinnerPosition === 'suffix')\n\n    return (\n      <Flex\n        {...props}\n        ref={ref}\n        as=\"button\"\n        alignItems={alignItems}\n        justify={justify}\n        disabled={isDisabled}\n        data-disabled={isDisabled}\n        onClick={handleClick}\n        className={cn(`${global.prefixCls}-btn`, classNames?.btn)}\n        style={styles?.btn}\n      >\n        {spinnerPosition === 'full' && isLoading ? (\n          resolvedSpinner\n        ) : (\n          <>\n            {showPrefix && (\n              <span\n                className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n                style={styles?.prefix}\n              >\n                {spinnerPosition === 'prefix' && isLoading ? resolvedSpinner : prefix}\n              </span>\n            )}\n\n            {showContent && (\n              <span\n                className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n                style={styles?.content}\n              >\n                {spinnerPosition === 'content' && isLoading ? resolvedSpinner : children}\n              </span>\n            )}\n\n            {showSuffix && (\n              <span\n                className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n                style={styles?.suffix}\n              >\n                {spinnerPosition === 'suffix' && isLoading ? resolvedSpinner : suffix}\n              </span>\n            )}\n          </>\n        )}\n      </Flex>\n    )\n  }\n)\n\nButton.displayName = 'Button'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@negative-space/button",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -32,13 +32,13 @@
     "url": "https://github.com/negative-space-ui/nsui/issues"
   },
   "dependencies": {
-    "@negative-space/flex": "1.1.0",
+    "@negative-space/flex": "1.1.1",
     "@negative-space/ripple": "1.1.1",
-    "@negative-space/system": "1.0.0",
-    "@negative-space/spinner": "2.1.0"
+    "@negative-space/system": "1.0.1",
+    "@negative-space/spinner": "2.1.1"
   },
   "peerDependencies": {
-    "react": "^19.2.1"
+    "react": "^19.2.3"
   },
   "clean-package": "../../../../clean-package.config.json",
   "exports": {