@net-advantage/jo-ui-button 1.1.7 → 1.2.0
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 +4 -1
- package/dist/button.types.d.ts +1 -1
- package/dist/jo-ui-button.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,7 +33,9 @@ flowchart TD
|
|
|
33
33
|
Props --> ViewModel
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
- `ButtonVariant` is `primary`, `secondary`, `ghost`, `primary-modal`, `text-muted`, or `
|
|
36
|
+
- `ButtonVariant` is `primary`, `secondary`, `ghost`, `primary-modal`, `text-muted`, `destructive`, or `overlay`. A missing variant becomes `secondary`.
|
|
37
|
+
- Corner radius comes from `--jo-radius-control` (12px). `text-muted` stays square.
|
|
38
|
+
- `overlay` is for controls on top of media. It uses `--jo-color-scrim` and `--jo-color-on-scrim`.
|
|
37
39
|
- `ButtonSize` is `sm`, `md`, or `lg`. A missing size becomes `md`.
|
|
38
40
|
- `loading` disables the button and shows the loading mark. A disabled or loading button does not call `onClick`.
|
|
39
41
|
|
|
@@ -45,6 +47,7 @@ flowchart TD
|
|
|
45
47
|
- `primary-modal` (matches New Journey Type "Next" styling)
|
|
46
48
|
- `text-muted` (matches New Journey Type "Cancel" styling)
|
|
47
49
|
- `destructive` (reddish emphasis action)
|
|
50
|
+
- `overlay` (translucent scrim with light text, for controls on media)
|
|
48
51
|
|
|
49
52
|
## Structure
|
|
50
53
|
|
package/dist/button.types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'primary-modal' | 'text-muted' | 'destructive';
|
|
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 {
|
|
5
5
|
readonly children: ReactNode;
|
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;--jo-ui-button-focus-color:var(--jo-color-focus,#5f7fe3);--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);font-size:.875rem;font-weight:500;line-height:1;font-family:var(--jo-ui-button-font-family);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);
|
|
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;--jo-ui-button-focus-color:var(--jo-color-focus,#5f7fe3);--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-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-offset:2px;--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);--tw-ring-offset-width:2px;--tw-ring-color:var(--jo-ui-button-focus-color);outline:2px solid #0000}.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}.relative{position:relative}.inline-flex{display:inline-flex}.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}.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}.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*/
|