@stack-spot/portal-components 2.12.1 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.13.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.12.1...portal-components@v2.13.0) (2025-02-07)
+
+
+### Features
+
+* Add button loading component ([#711](https://github.com/stack-spot/portal-commons/issues/711)) ([684edc4](https://github.com/stack-spot/portal-commons/commit/684edc4d5a8498ef273d92bdba207cb5d7e2af93))
+
 ## [2.12.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.12.0...portal-components@v2.12.1) (2025-01-16)
 
 

package/dist/components/ButtonLoading.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from '@citric/core/dist/Button.js';
+import { ReactNode } from 'react';
+interface Props extends ButtonProps {
+    isLoading?: boolean;
+    loadingSize?: 'sm' | 'md' | 'lg';
+    children: ReactNode;
+    onClick?: () => void;
+}
+export declare const ButtonLoading: ({ isLoading, loadingSize, children, disabled, sx, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ButtonLoading.d.ts.map

package/dist/components/ButtonLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLoading.d.ts","sourceRoot":"","sources":["../../src/components/ButtonLoading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,UAAU,KAAM,SAAQ,WAAW;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,iEAAyE,KAAK,4CAgBvG,CAAA"}

package/dist/components/ButtonLoading.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Text } from '@citric/core';
+import { LoadingCircular } from '@citric/ui';
+export const ButtonLoading = ({ isLoading, loadingSize = 'sm', children, disabled, sx, ...props }) => (_jsxs(Button, { type: "submit", ...props, disabled: isLoading || disabled, sx: { ...sx, position: 'relative' }, children: [_jsx(Text, { as: "span", sx: { visibility: isLoading ? 'hidden' : 'visible' }, children: children }), _jsx(LoadingCircular, { colorScheme: props.colorScheme, size: loadingSize, sx: { visibility: isLoading ? 'visible' : 'hidden', position: 'absolute' } })] }));
+//# sourceMappingURL=ButtonLoading.js.map

package/dist/components/ButtonLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLoading.js","sourceRoot":"","sources":["../../src/components/ButtonLoading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAU5C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAS,EAAE,EAAE,CAAC,CAC3G,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,KACT,KAAK,EACT,QAAQ,EAAE,SAAS,IAAI,QAAQ,EAC/B,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAEnC,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,YACjE,QAAQ,GACJ,EACP,KAAC,eAAe,IACd,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,WAAW,EACjB,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAC1E,IACK,CACV,CAAA"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { AsyncContent } from './components/AsyncContent.js';
 export { BannerWarning } from './components/BannerWarning.js';
 export { ChatBot } from './components/ChatBot.js';
+export { ButtonLoading } from './components/ButtonLoading.js';
 export { useDateFormatter } from './hooks/date.js';
 export { useKeyboardControls } from './hooks/keyboard.js';
 export { useManualRender } from './hooks/manual-render.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -1,6 +1,7 @@
 export { AsyncContent } from './components/AsyncContent.js';
 export { BannerWarning } from './components/BannerWarning.js';
 export { ChatBot } from './components/ChatBot.js';
+export { ButtonLoading } from './components/ButtonLoading.js';
 export { useDateFormatter } from './hooks/date.js';
 export { useKeyboardControls } from './hooks/keyboard.js';
 export { useManualRender } from './hooks/manual-render.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ButtonLoading.tsx

@@ -0,0 +1,29 @@
+import { Button, Text } from '@citric/core'
+import { ButtonProps } from '@citric/core/dist/Button'
+import { LoadingCircular } from '@citric/ui'
+import { ReactNode } from 'react'
+
+interface Props extends ButtonProps {
+  isLoading?: boolean,
+  loadingSize?: 'sm' | 'md' | 'lg',
+  children: ReactNode,
+  onClick?: () => void,
+}
+
+export const ButtonLoading = ({ isLoading, loadingSize = 'sm', children, disabled, sx, ...props }: Props) => (
+  <Button
+    type="submit"
+    {...props}
+    disabled={isLoading || disabled}
+    sx={{ ...sx, position: 'relative' }}
+  >
+    <Text as="span" sx={{ visibility: isLoading ? 'hidden' : 'visible' }}>
+      {children}
+    </Text>
+    <LoadingCircular
+      colorScheme={props.colorScheme}
+      size={loadingSize}
+      sx={{ visibility: isLoading ? 'visible' : 'hidden', position: 'absolute' }}
+    />
+  </Button>
+)

package/src/index.ts

@@ -1,6 +1,7 @@
 export { AsyncContent } from './components/AsyncContent'
 export { BannerWarning } from './components/BannerWarning'
 export { ChatBot } from './components/ChatBot'
+export { ButtonLoading } from './components/ButtonLoading'
 export { useDateFormatter } from './hooks/date'
 export { useKeyboardControls } from './hooks/keyboard'
 export { useManualRender } from './hooks/manual-render'