@net-advantage/jo-ui-button 1.2.0 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -7
- package/dist/button.model.d.ts +18 -0
- package/dist/button.types.d.ts +19 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +120 -40
- package/dist/jo-ui-button.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Publishable single-button primitive package.
|
|
4
4
|
|
|
5
|
-
The button follows a strict MVVM split. The model normalizes variant and
|
|
5
|
+
The button follows a strict MVVM split. The model normalizes variant, size, loading label, and min width. The view-model owns the click guard and the stable loading width. The view renders the view-model.
|
|
6
6
|
|
|
7
7
|
## MVVM
|
|
8
8
|
|
|
9
9
|
```mermaid
|
|
10
10
|
flowchart LR
|
|
11
11
|
Props["ButtonProps"] --> ViewModel["useButtonViewModel"]
|
|
12
|
-
Model["button.model.ts<br/>normalize variant and
|
|
12
|
+
Model["button.model.ts<br/>normalize variant, size, loading label, and min width"] --> ViewModel
|
|
13
13
|
ViewModel --> View["Button.tsx"]
|
|
14
14
|
View -->|"onClick"| ViewModel
|
|
15
15
|
ViewModel -->|"onClick"| Host["Host application"]
|
|
@@ -17,10 +17,10 @@ flowchart LR
|
|
|
17
17
|
|
|
18
18
|
| Layer | File | Responsibility |
|
|
19
19
|
| --- | --- | --- |
|
|
20
|
-
| Contract | [button.types.ts](src/button.types.ts) | Props, variant, size, and view-model |
|
|
21
|
-
| Model | [button.model.ts](src/button.model.ts) | Default missing variant to secondary and size to md |
|
|
22
|
-
| View-model | [button.view-model.ts](src/button.view-model.ts) | Map props into render-ready state and guard clicks |
|
|
23
|
-
| View | [Button.tsx](src/Button.tsx) | Render the button from the view-model |
|
|
20
|
+
| Contract | [button.types.ts](src/button.types.ts) | Props, variant, size, loading label, min width, and view-model |
|
|
21
|
+
| Model | [button.model.ts](src/button.model.ts) | Default missing variant to secondary and size to md. Normalize `loadingLabel` and `minWidth`, and derive the stable label state |
|
|
22
|
+
| View-model | [button.view-model.ts](src/button.view-model.ts) | Map props into render-ready state, including loading width, and guard clicks |
|
|
23
|
+
| View | [Button.tsx](src/Button.tsx) | Render the button from the view-model, including the stacked labels |
|
|
24
24
|
|
|
25
25
|
## Models
|
|
26
26
|
|
|
@@ -28,8 +28,12 @@ flowchart LR
|
|
|
28
28
|
flowchart TD
|
|
29
29
|
Props["ButtonProps"] --> Variant["ButtonVariant"]
|
|
30
30
|
Props --> Size["ButtonSize"]
|
|
31
|
+
Props --> LoadingLabel["loadingLabel"]
|
|
32
|
+
Props --> MinWidth["minWidth"]
|
|
31
33
|
Variant --> ViewModel["ButtonViewModel"]
|
|
32
34
|
Size --> ViewModel
|
|
35
|
+
LoadingLabel --> ViewModel
|
|
36
|
+
MinWidth --> ViewModel
|
|
33
37
|
Props --> ViewModel
|
|
34
38
|
```
|
|
35
39
|
|
|
@@ -37,7 +41,10 @@ flowchart TD
|
|
|
37
41
|
- Corner radius comes from `--jo-radius-control` (12px). `text-muted` stays square.
|
|
38
42
|
- `overlay` is for controls on top of media. It uses `--jo-color-scrim` and `--jo-color-on-scrim`.
|
|
39
43
|
- `ButtonSize` is `sm`, `md`, or `lg`. A missing size becomes `md`.
|
|
40
|
-
- `
|
|
44
|
+
- `disabled` blocks interaction.
|
|
45
|
+
- `loading` keeps the button's width. The resting label stays in the layout with `visibility: hidden`, and a spinner is overlaid in that box. The button sets `aria-busy` and `aria-live="polite"`.
|
|
46
|
+
- `loadingLabel` is optional. The resting label and the loading label share one grid cell, so the button is as wide as the wider label in both states. While loading, the loading label is the visible text. At rest, the loading label is hidden but still reserves its width.
|
|
47
|
+
- `minWidth` is an optional CSS length, such as `12rem` or `var(--jo-size-button)`, for buttons whose label changes outside the loading state.
|
|
41
48
|
|
|
42
49
|
## Variants
|
|
43
50
|
|
package/dist/button.model.d.ts
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode } from 'react';
|
|
1
2
|
import type { ButtonSize, ButtonVariant } from './button.types';
|
|
2
3
|
export declare function normalizeVariant(variant?: ButtonVariant): ButtonVariant;
|
|
3
4
|
export declare function normalizeSize(size?: ButtonSize): ButtonSize;
|
|
5
|
+
export declare function normalizeLoadingLabel(loadingLabel?: ReactNode): ReactNode | undefined;
|
|
6
|
+
export declare function normalizeMinWidth(minWidth?: string): string | undefined;
|
|
7
|
+
export declare function buttonClassName(variant: ButtonVariant, size: ButtonSize, loading: boolean, className?: string): string;
|
|
8
|
+
export declare function labelClassName(kind: 'resting' | 'loading', reserved: boolean): string;
|
|
9
|
+
export interface ButtonLabelPresentation {
|
|
10
|
+
readonly showLoadingLabel: boolean;
|
|
11
|
+
readonly restingLabelHidden: boolean;
|
|
12
|
+
readonly loadingLabelHidden: boolean;
|
|
13
|
+
readonly restingAriaHidden: true | undefined;
|
|
14
|
+
readonly loadingAriaHidden: true | undefined;
|
|
15
|
+
readonly showOverlaySpinner: boolean;
|
|
16
|
+
readonly ariaBusy: boolean;
|
|
17
|
+
readonly ariaLive: 'polite';
|
|
18
|
+
readonly ariaLabel?: string;
|
|
19
|
+
}
|
|
20
|
+
export declare function resolveButtonLabelPresentation(loading: boolean, children: ReactNode, loadingLabel: ReactNode | undefined, ariaLabel?: string): ButtonLabelPresentation;
|
|
21
|
+
export declare function resolveButtonStyle(style: CSSProperties | undefined, minWidth: string | undefined): CSSProperties | undefined;
|
package/dist/button.types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
1
|
+
import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
|
|
2
2
|
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'primary-modal' | 'text-muted' | 'destructive' | 'overlay';
|
|
3
3
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
4
4
|
export interface ButtonProps {
|
|
@@ -7,6 +7,10 @@ export interface ButtonProps {
|
|
|
7
7
|
readonly size?: ButtonSize;
|
|
8
8
|
readonly disabled?: boolean;
|
|
9
9
|
readonly loading?: boolean;
|
|
10
|
+
/** Shown in place of `children` while `loading`. The button stays as wide as the wider label. */
|
|
11
|
+
readonly loadingLabel?: ReactNode;
|
|
12
|
+
/** CSS length, including a token such as `var(--jo-size-button)`, used as `min-width`. */
|
|
13
|
+
readonly minWidth?: string;
|
|
10
14
|
readonly leadingIcon?: ReactNode;
|
|
11
15
|
readonly trailingIcon?: ReactNode;
|
|
12
16
|
readonly className?: string;
|
|
@@ -20,6 +24,20 @@ export interface ButtonViewModel {
|
|
|
20
24
|
readonly leadingIcon?: ReactNode;
|
|
21
25
|
readonly trailingIcon?: ReactNode;
|
|
22
26
|
readonly children?: ReactNode;
|
|
27
|
+
readonly loadingLabel?: ReactNode;
|
|
28
|
+
readonly showLoadingLabel: boolean;
|
|
29
|
+
readonly showOverlaySpinner: boolean;
|
|
30
|
+
readonly restingLabelClassName: string;
|
|
31
|
+
readonly loadingLabelClassName: string;
|
|
32
|
+
readonly restingLabelHidden: boolean;
|
|
33
|
+
readonly loadingLabelHidden: boolean;
|
|
34
|
+
readonly restingAriaHidden: true | undefined;
|
|
35
|
+
readonly loadingAriaHidden: true | undefined;
|
|
36
|
+
readonly minWidth?: string;
|
|
37
|
+
readonly ariaBusy: boolean;
|
|
38
|
+
readonly ariaLive: 'polite';
|
|
39
|
+
readonly ariaLabel?: string;
|
|
40
|
+
readonly style?: CSSProperties;
|
|
23
41
|
readonly buttonProps?: ButtonProps['buttonProps'];
|
|
24
42
|
readonly onClick: () => void;
|
|
25
43
|
}
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");function n(e){return e??`secondary`}function r(e){return e??`md`}function i(e){
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");function n(e){return e??`secondary`}function r(e){return e??`md`}function i(e){if(e!=null&&typeof e!=`boolean`){if(typeof e==`string`){let t=e.trim();return t.length>0?t:void 0}return e}}function a(e){if(typeof e!=`string`)return;let t=e.trim();return t.length>0?t:void 0}function o(e,t,n,r){return[`jo-ui-button`,`jo-ui-button--${e}`,`jo-ui-button--${t}`,n?`jo-ui-button--loading`:``,r??``].filter(Boolean).join(` `)}function s(e,t){let n=[`jo-ui-button__label`];return e===`loading`&&n.push(`jo-ui-button__label--loading`),t&&n.push(`jo-ui-button__label--reserved`),n.join(` `)}function c(e,t,n,r){let i=n!=null,a=e,o=!e;return{showLoadingLabel:i,restingLabelHidden:a,loadingLabelHidden:o,restingAriaHidden:a&&i?!0:void 0,loadingAriaHidden:i&&o?!0:void 0,showOverlaySpinner:e&&!i,ariaBusy:e,ariaLive:`polite`,ariaLabel:r??l(e,t,i)}}function l(e,t,n){if(!e||n||typeof t!=`string`)return;let r=t.trim();return r.length>0?r:void 0}function u(e,t){return t===void 0?e:{...e,minWidth:t}}function d(e){let l=e.onClick,d=(0,t.useCallback)(()=>{l?.()},[l]);return(0,t.useMemo)(()=>{let t=n(e.variant),l=r(e.size),f=e.disabled??!1,p=e.loading??!1,m=i(e.loadingLabel),h=a(e.minWidth),g=c(p,e.children,m,e.buttonProps?.[`aria-label`]);return{className:o(t,l,p,e.className),disabled:f,loading:p,leadingIcon:e.leadingIcon,trailingIcon:e.trailingIcon,children:e.children,loadingLabel:m,showLoadingLabel:g.showLoadingLabel,showOverlaySpinner:g.showOverlaySpinner,restingLabelClassName:s(`resting`,g.restingLabelHidden),loadingLabelClassName:s(`loading`,g.loadingLabelHidden),restingLabelHidden:g.restingLabelHidden,loadingLabelHidden:g.loadingLabelHidden,restingAriaHidden:g.restingAriaHidden,loadingAriaHidden:g.loadingAriaHidden,minWidth:h,ariaBusy:g.ariaBusy,ariaLive:g.ariaLive,ariaLabel:g.ariaLabel,style:u(e.buttonProps?.style,h),buttonProps:e.buttonProps,onClick:d}},[d,e.buttonProps,e.children,e.className,e.disabled,e.leadingIcon,e.loading,e.loadingLabel,e.minWidth,e.size,e.trailingIcon,e.variant])}var f=e((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),p=e((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===k?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`;case O:return`ViewTransition`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=A.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(j.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){P||(P=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function l(){var e=t(this.type);return F[e]||(F[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,"ref",{enumerable:!1,value:null}):Object.defineProperty(e,"ref",{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0){if(o){if(M(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`)}else f(p)}if(j.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,R[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,o,p,m,p),R[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.view_transition`),k=Symbol.for(`react.client.reference`),A=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,M=Array.isArray,N=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var P,F={},I=m.react_stack_bottom_frame.bind(m,o)(),L=N(i(o)),R={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!1,o,r?N(i(e)):L)},e.jsxs=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!0,o,r?N(i(e)):L)}})()})),
|
|
6
|
+
<%s key={someKey} {...props} />`,o,p,m,p),R[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.view_transition`),k=Symbol.for(`react.client.reference`),A=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,M=Array.isArray,N=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var P,F={},I=m.react_stack_bottom_frame.bind(m,o)(),L=N(i(o)),R={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!1,o,r?N(i(e)):L)},e.jsxs=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!0,o,r?N(i(e)):L)}})()})),m=e(((e,t)=>{t.exports=process.env.NODE_ENV===`production`?f():p()}))();function h(e){let t=d(e);return(0,m.jsxs)(`button`,{...t.buttonProps,type:`button`,className:t.className,style:t.style,disabled:t.disabled,"aria-busy":t.ariaBusy,"aria-live":t.ariaLive,"aria-label":t.ariaLabel,onClick:t.onClick,children:[t.leadingIcon?(0,m.jsx)(`span`,{className:`jo-ui-button__icon`,children:t.leadingIcon}):null,(0,m.jsxs)(`span`,{className:`jo-ui-button__labels`,children:[(0,m.jsx)(`span`,{className:t.restingLabelClassName,"aria-hidden":t.restingAriaHidden,children:t.children}),t.showLoadingLabel?(0,m.jsxs)(`span`,{className:t.loadingLabelClassName,"aria-hidden":t.loadingAriaHidden,children:[(0,m.jsx)(`span`,{className:`jo-ui-button__spinner`,"aria-hidden":`true`}),t.loadingLabel]}):null]}),t.trailingIcon?(0,m.jsx)(`span`,{className:`jo-ui-button__icon`,children:t.trailingIcon}):null,t.showOverlaySpinner?(0,m.jsx)(`span`,{className:`jo-ui-button__spinner jo-ui-button__spinner--overlay`,"aria-hidden":`true`}):null]})}exports.Button=h;
|
package/dist/index.js
CHANGED
|
@@ -13,43 +13,108 @@ function i(e) {
|
|
|
13
13
|
function a(e) {
|
|
14
14
|
return e ?? "md";
|
|
15
15
|
}
|
|
16
|
+
function o(e) {
|
|
17
|
+
if (e != null && typeof e != "boolean") {
|
|
18
|
+
if (typeof e == "string") {
|
|
19
|
+
let t = e.trim();
|
|
20
|
+
return t.length > 0 ? t : void 0;
|
|
21
|
+
}
|
|
22
|
+
return e;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
function s(e) {
|
|
26
|
+
if (typeof e != "string") return;
|
|
27
|
+
let t = e.trim();
|
|
28
|
+
return t.length > 0 ? t : void 0;
|
|
29
|
+
}
|
|
30
|
+
function c(e, t, n, r) {
|
|
31
|
+
return [
|
|
32
|
+
"jo-ui-button",
|
|
33
|
+
`jo-ui-button--${e}`,
|
|
34
|
+
`jo-ui-button--${t}`,
|
|
35
|
+
n ? "jo-ui-button--loading" : "",
|
|
36
|
+
r ?? ""
|
|
37
|
+
].filter(Boolean).join(" ");
|
|
38
|
+
}
|
|
39
|
+
function l(e, t) {
|
|
40
|
+
let n = ["jo-ui-button__label"];
|
|
41
|
+
return e === "loading" && n.push("jo-ui-button__label--loading"), t && n.push("jo-ui-button__label--reserved"), n.join(" ");
|
|
42
|
+
}
|
|
43
|
+
function u(e, t, n, r) {
|
|
44
|
+
let i = n != null, a = e, o = !e;
|
|
45
|
+
return {
|
|
46
|
+
showLoadingLabel: i,
|
|
47
|
+
restingLabelHidden: a,
|
|
48
|
+
loadingLabelHidden: o,
|
|
49
|
+
restingAriaHidden: a && i ? !0 : void 0,
|
|
50
|
+
loadingAriaHidden: i && o ? !0 : void 0,
|
|
51
|
+
showOverlaySpinner: e && !i,
|
|
52
|
+
ariaBusy: e,
|
|
53
|
+
ariaLive: "polite",
|
|
54
|
+
ariaLabel: r ?? d(e, t, i)
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
function d(e, t, n) {
|
|
58
|
+
if (!e || n || typeof t != "string") return;
|
|
59
|
+
let r = t.trim();
|
|
60
|
+
return r.length > 0 ? r : void 0;
|
|
61
|
+
}
|
|
62
|
+
function f(e, t) {
|
|
63
|
+
return t === void 0 ? e : {
|
|
64
|
+
...e,
|
|
65
|
+
minWidth: t
|
|
66
|
+
};
|
|
67
|
+
}
|
|
16
68
|
//#endregion
|
|
17
69
|
//#region src/button.view-model.ts
|
|
18
|
-
function
|
|
19
|
-
let r =
|
|
20
|
-
|
|
21
|
-
}, [
|
|
22
|
-
return t(() =>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
n.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
70
|
+
function p(n) {
|
|
71
|
+
let r = n.onClick, d = e(() => {
|
|
72
|
+
r?.();
|
|
73
|
+
}, [r]);
|
|
74
|
+
return t(() => {
|
|
75
|
+
let e = i(n.variant), t = a(n.size), r = n.disabled ?? !1, p = n.loading ?? !1, m = o(n.loadingLabel), h = s(n.minWidth), g = u(p, n.children, m, n.buttonProps?.["aria-label"]);
|
|
76
|
+
return {
|
|
77
|
+
className: c(e, t, p, n.className),
|
|
78
|
+
disabled: r,
|
|
79
|
+
loading: p,
|
|
80
|
+
leadingIcon: n.leadingIcon,
|
|
81
|
+
trailingIcon: n.trailingIcon,
|
|
82
|
+
children: n.children,
|
|
83
|
+
loadingLabel: m,
|
|
84
|
+
showLoadingLabel: g.showLoadingLabel,
|
|
85
|
+
showOverlaySpinner: g.showOverlaySpinner,
|
|
86
|
+
restingLabelClassName: l("resting", g.restingLabelHidden),
|
|
87
|
+
loadingLabelClassName: l("loading", g.loadingLabelHidden),
|
|
88
|
+
restingLabelHidden: g.restingLabelHidden,
|
|
89
|
+
loadingLabelHidden: g.loadingLabelHidden,
|
|
90
|
+
restingAriaHidden: g.restingAriaHidden,
|
|
91
|
+
loadingAriaHidden: g.loadingAriaHidden,
|
|
92
|
+
minWidth: h,
|
|
93
|
+
ariaBusy: g.ariaBusy,
|
|
94
|
+
ariaLive: g.ariaLive,
|
|
95
|
+
ariaLabel: g.ariaLabel,
|
|
96
|
+
style: f(n.buttonProps?.style, h),
|
|
97
|
+
buttonProps: n.buttonProps,
|
|
98
|
+
onClick: d
|
|
99
|
+
};
|
|
100
|
+
}, [
|
|
101
|
+
d,
|
|
41
102
|
n.buttonProps,
|
|
42
103
|
n.children,
|
|
43
104
|
n.className,
|
|
105
|
+
n.disabled,
|
|
44
106
|
n.leadingIcon,
|
|
107
|
+
n.loading,
|
|
108
|
+
n.loadingLabel,
|
|
109
|
+
n.minWidth,
|
|
110
|
+
n.size,
|
|
45
111
|
n.trailingIcon,
|
|
46
|
-
|
|
47
|
-
r
|
|
112
|
+
n.variant
|
|
48
113
|
]);
|
|
49
114
|
}
|
|
50
115
|
//#endregion
|
|
51
116
|
//#region ../../node_modules/.pnpm/react@19.3.0/node_modules/react/cjs/react-jsx-runtime.production.js
|
|
52
|
-
var
|
|
117
|
+
var m = /* @__PURE__ */ n(((e) => {
|
|
53
118
|
var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
|
|
54
119
|
function r(e, n, r) {
|
|
55
120
|
var i = null;
|
|
@@ -64,7 +129,7 @@ var s = /* @__PURE__ */ n(((e) => {
|
|
|
64
129
|
};
|
|
65
130
|
}
|
|
66
131
|
e.Fragment = n, e.jsx = r, e.jsxs = r;
|
|
67
|
-
})),
|
|
132
|
+
})), h = /* @__PURE__ */ n(((e) => {
|
|
68
133
|
process.env.NODE_ENV !== "production" && (function() {
|
|
69
134
|
function t(e) {
|
|
70
135
|
if (e == null) return null;
|
|
@@ -238,36 +303,51 @@ var s = /* @__PURE__ */ n(((e) => {
|
|
|
238
303
|
return f(e, t, n, !0, o, r ? P(a(e)) : R);
|
|
239
304
|
};
|
|
240
305
|
})();
|
|
241
|
-
})),
|
|
242
|
-
t.exports = process.env.NODE_ENV === "production" ?
|
|
306
|
+
})), g = (/* @__PURE__ */ n(((e, t) => {
|
|
307
|
+
t.exports = process.env.NODE_ENV === "production" ? m() : h();
|
|
243
308
|
})))();
|
|
244
|
-
function
|
|
245
|
-
let t =
|
|
246
|
-
return /* @__PURE__ */ (0,
|
|
309
|
+
function _(e) {
|
|
310
|
+
let t = p(e);
|
|
311
|
+
return /* @__PURE__ */ (0, g.jsxs)("button", {
|
|
247
312
|
...t.buttonProps,
|
|
248
313
|
type: "button",
|
|
249
314
|
className: t.className,
|
|
315
|
+
style: t.style,
|
|
250
316
|
disabled: t.disabled,
|
|
317
|
+
"aria-busy": t.ariaBusy,
|
|
318
|
+
"aria-live": t.ariaLive,
|
|
319
|
+
"aria-label": t.ariaLabel,
|
|
251
320
|
onClick: t.onClick,
|
|
252
321
|
children: [
|
|
253
|
-
t.leadingIcon ? /* @__PURE__ */ (0,
|
|
322
|
+
t.leadingIcon ? /* @__PURE__ */ (0, g.jsx)("span", {
|
|
254
323
|
className: "jo-ui-button__icon",
|
|
255
324
|
children: t.leadingIcon
|
|
256
325
|
}) : null,
|
|
257
|
-
/* @__PURE__ */ (0,
|
|
258
|
-
className: "jo-ui-
|
|
259
|
-
children:
|
|
326
|
+
/* @__PURE__ */ (0, g.jsxs)("span", {
|
|
327
|
+
className: "jo-ui-button__labels",
|
|
328
|
+
children: [/* @__PURE__ */ (0, g.jsx)("span", {
|
|
329
|
+
className: t.restingLabelClassName,
|
|
330
|
+
"aria-hidden": t.restingAriaHidden,
|
|
331
|
+
children: t.children
|
|
332
|
+
}), t.showLoadingLabel ? /* @__PURE__ */ (0, g.jsxs)("span", {
|
|
333
|
+
className: t.loadingLabelClassName,
|
|
334
|
+
"aria-hidden": t.loadingAriaHidden,
|
|
335
|
+
children: [/* @__PURE__ */ (0, g.jsx)("span", {
|
|
336
|
+
className: "jo-ui-button__spinner",
|
|
337
|
+
"aria-hidden": "true"
|
|
338
|
+
}), t.loadingLabel]
|
|
339
|
+
}) : null]
|
|
260
340
|
}),
|
|
261
|
-
t.trailingIcon ? /* @__PURE__ */ (0,
|
|
341
|
+
t.trailingIcon ? /* @__PURE__ */ (0, g.jsx)("span", {
|
|
262
342
|
className: "jo-ui-button__icon",
|
|
263
343
|
children: t.trailingIcon
|
|
264
344
|
}) : null,
|
|
265
|
-
t.
|
|
266
|
-
className: "jo-ui-button__spinner",
|
|
345
|
+
t.showOverlaySpinner ? /* @__PURE__ */ (0, g.jsx)("span", {
|
|
346
|
+
className: "jo-ui-button__spinner jo-ui-button__spinner--overlay",
|
|
267
347
|
"aria-hidden": "true"
|
|
268
348
|
}) : null
|
|
269
349
|
]
|
|
270
350
|
});
|
|
271
351
|
}
|
|
272
352
|
//#endregion
|
|
273
|
-
export {
|
|
353
|
+
export { _ as Button };
|
package/dist/jo-ui-button.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.jo-ui-button{--jo-ui-button-font-family:Inter,"Segoe UI",system-ui,sans-serif;--jo-ui-button-primary-bg:var(--jo-color-accent,#1f2f5f);--jo-ui-button-primary-text:var(--jo-color-accent-contrast,#fff);--jo-ui-button-primary-border:var(--jo-color-accent,#1f2f5f);--jo-ui-button-primary-hover-bg:#162448;--jo-ui-button-primary-hover-border:#162448;--jo-ui-button-secondary-bg:var(--jo-color-surface-alt,#f7f9fc);--jo-ui-button-secondary-text:var(--jo-color-text,#1f2a44);--jo-ui-button-secondary-border:var(--jo-color-border,#d8dfeb);--jo-ui-button-secondary-hover-bg:#eef3fa;--jo-ui-button-secondary-hover-border:#c8d2e3;--jo-ui-button-ghost-bg:transparent;--jo-ui-button-ghost-text:var(--jo-color-text,#1f2a44);--jo-ui-button-ghost-border:transparent;--jo-ui-button-modal-primary-bg:#14224a;--jo-ui-button-modal-primary-text:#fff;--jo-ui-button-modal-text:oklch(55.1% .027 264.364);--jo-ui-button-destructive-bg:#d94a5a;--jo-ui-button-destructive-border:#d94a5a;--jo-ui-button-destructive-text:#fff;--jo-ui-button-destructive-hover:#c43f4e;--
|
|
1
|
+
.container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.jo-ui-button{--jo-ui-button-font-family:Inter,"Segoe UI",system-ui,sans-serif;--jo-ui-button-primary-bg:var(--jo-color-accent,#1f2f5f);--jo-ui-button-primary-text:var(--jo-color-accent-contrast,#fff);--jo-ui-button-primary-border:var(--jo-color-accent,#1f2f5f);--jo-ui-button-primary-hover-bg:#162448;--jo-ui-button-primary-hover-border:#162448;--jo-ui-button-secondary-bg:var(--jo-color-surface-alt,#f7f9fc);--jo-ui-button-secondary-text:var(--jo-color-text,#1f2a44);--jo-ui-button-secondary-border:var(--jo-color-border,#d8dfeb);--jo-ui-button-secondary-hover-bg:#eef3fa;--jo-ui-button-secondary-hover-border:#c8d2e3;--jo-ui-button-ghost-bg:transparent;--jo-ui-button-ghost-text:var(--jo-color-text,#1f2a44);--jo-ui-button-ghost-border:transparent;--jo-ui-button-modal-primary-bg:#14224a;--jo-ui-button-modal-primary-text:#fff;--jo-ui-button-modal-text:oklch(55.1% .027 264.364);--jo-ui-button-destructive-bg:#d94a5a;--jo-ui-button-destructive-border:#d94a5a;--jo-ui-button-destructive-text:#fff;--jo-ui-button-destructive-hover:#c43f4e;--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);min-height:2.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:var(--jo-radius-control,12px);font-size:.875rem;font-weight:500;line-height:1;font-family:var(--jo-ui-button-font-family);border-style:solid;border-width:1px;border-color:var(--jo-ui-button-primary-border);color:var(--jo-ui-button-primary-text);background:var(--jo-ui-button-primary-bg);justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:inline-flex}.jo-ui-button:disabled{cursor:not-allowed;opacity:.65}.jo-ui-button:focus-visible{outline:2px solid var(--jo-color-focus);outline-offset:2px}.jo-ui-button--sm{min-height:2rem;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem}.jo-ui-button--md{font-size:.95rem}.jo-ui-button--lg{min-height:2.75rem;padding:.75rem 1.125rem;font-size:1rem;line-height:1.5rem}.jo-ui-button--primary{border-color:var(--jo-ui-button-primary-border);color:var(--jo-ui-button-primary-text);background:var(--jo-ui-button-primary-bg)}.jo-ui-button--primary:hover:not(:disabled){border-color:var(--jo-ui-button-primary-hover-border);background:var(--jo-ui-button-primary-hover-bg)}.jo-ui-button--secondary{border-color:var(--jo-ui-button-secondary-border);color:var(--jo-ui-button-secondary-text);background:var(--jo-ui-button-secondary-bg)}.jo-ui-button--secondary:hover:not(:disabled){border-color:var(--jo-ui-button-secondary-hover-border);background:var(--jo-ui-button-secondary-hover-bg)}.theme-dark .jo-ui-button{--jo-ui-button-primary-hover-bg:#b3c6ff;--jo-ui-button-primary-hover-border:#b3c6ff;--jo-ui-button-secondary-hover-bg:#223552;--jo-ui-button-secondary-hover-border:#3a507a}.jo-ui-button--ghost{border-color:var(--jo-ui-button-ghost-border);color:var(--jo-ui-button-ghost-text);background:var(--jo-ui-button-ghost-bg)}.jo-ui-button--ghost:hover:not(:disabled){--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.jo-ui-button--primary-modal{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;min-height:0;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:var(--jo-radius-control,12px);color:var(--jo-ui-button-modal-primary-text);background:var(--jo-ui-button-modal-primary-bg);border-width:0;border-color:#0000;padding:.5rem 1rem;font-size:12.5px;font-weight:700;line-height:18.75px}.jo-ui-button--primary-modal:hover:not(:disabled){background:#0f1a38}.jo-ui-button--text-muted{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;min-height:0;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--jo-ui-button-modal-text);background:0 0;border-width:0;border-color:#0000;border-radius:0;padding:0;font-size:12px;font-weight:600;line-height:18px}.jo-ui-button--text-muted:hover:not(:disabled){color:#1c2333;background:0 0}.theme-dark .jo-ui-button.jo-ui-button--ghost,.theme-dark .jo-ui-button.jo-ui-button--ghost .jo-ui-button__icon,.theme-dark .jo-ui-button.jo-ui-button--ghost .jo-ui-button__label{color:#e7ecf8!important}.theme-dark .jo-ui-button.jo-ui-button--ghost:hover:not(:disabled){background:#23314d!important}.theme-dark .jo-ui-button.jo-ui-button--text-muted,.theme-dark .jo-ui-button.jo-ui-button--text-muted .jo-ui-button__icon,.theme-dark .jo-ui-button.jo-ui-button--text-muted .jo-ui-button__label{color:#b9c4da!important}.theme-dark .jo-ui-button.jo-ui-button--text-muted:hover:not(:disabled),.theme-dark .jo-ui-button.jo-ui-button--text-muted:hover:not(:disabled) .jo-ui-button__icon,.theme-dark .jo-ui-button.jo-ui-button--text-muted:hover:not(:disabled) .jo-ui-button__label{color:#e7ecf8!important;background:0 0!important}.jo-ui-button--destructive{border-color:var(--jo-ui-button-destructive-border);color:var(--jo-ui-button-destructive-text);background:var(--jo-ui-button-destructive-bg)}.jo-ui-button--destructive:hover:not(:disabled){border-color:var(--jo-ui-button-destructive-hover);background:var(--jo-ui-button-destructive-hover)}.jo-ui-button--overlay{color:var(--jo-color-on-scrim,#fff);background:var(--jo-color-scrim,#0f172ab8);box-shadow:none;border-color:#0000}.jo-ui-button--overlay:hover:not(:disabled){background:var(--jo-color-scrim,#0f172ad6);border-color:#0000}.jo-ui-button--loading{position:relative}.jo-ui-button__icon,.jo-ui-button__label{align-items:center;display:inline-flex}.jo-ui-button__labels{place-items:center;display:grid}.jo-ui-button__label{white-space:nowrap;grid-area:1/1;gap:.5rem}.jo-ui-button__label--reserved{visibility:hidden}.jo-ui-button__spinner{box-sizing:border-box;border:2px solid;border-inline-end-color:#0000;border-radius:999px;flex:none;width:.9em;height:.9em;animation:.7s linear infinite jo-ui-button-spin}.jo-ui-button__spinner--overlay{margin:auto;position:absolute;inset:0}@keyframes jo-ui-button-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.jo-ui-button__spinner{animation:none}}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.min-h-0{min-height:0}.min-h-10{min-height:2.5rem}.min-h-11{min-height:2.75rem}.min-h-8{min-height:2rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-blue-700{--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity,1))}.px-0{padding-left:0;padding-right:0}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-\[1\.125rem\]{padding-left:1.125rem;padding-right:1.125rem}.py-0{padding-top:0;padding-bottom:0}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-\[0\.95rem\]{font-size:.95rem}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-\[18\.75px\]{line-height:18.75px}.leading-\[18px\]{line-height:18px}.leading-none{line-height:1}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline-offset:2px;outline:2px solid #0000}.outline{outline-style:solid}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
|
|
2
2
|
/*$vite$:1*/
|