@r2digisolutions/components 0.9.6 → 0.10.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/dist/components/atoms/Button/Button.svelte +1 -1
- package/dist/components/atoms/StepMark/StepMark.svelte +1 -2
- package/dist/components/molecules/FormActions/FormActions.svelte +23 -19
- package/dist/components/molecules/FormActions/FormActions.svelte.d.ts +2 -0
- package/dist/components/molecules/Stepper/Stepper.svelte +1 -1
- package/package.json +1 -1
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
const variantClasses: Record<ButtonVariant, string> = {
|
|
42
42
|
primary:
|
|
43
|
-
'bg-brand-
|
|
43
|
+
'bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800 focus-visible:ring-brand-500 shadow-sm hover:shadow-md active:scale-[0.98]',
|
|
44
44
|
secondary:
|
|
45
45
|
'bg-surface-elevated text-primary border border-border hover:bg-surface-overlay hover:border-border-strong focus-visible:ring-brand-500 shadow-sm active:scale-[0.98]',
|
|
46
46
|
ghost:
|
|
@@ -26,8 +26,7 @@
|
|
|
26
26
|
'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',
|
|
27
27
|
dims,
|
|
28
28
|
state === 'complete' && 'bg-brand-500 text-white',
|
|
29
|
-
state === 'current' &&
|
|
30
|
-
'bg-brand-500/15 text-brand-700 ring-2 ring-brand-500/40 dark:text-brand-300',
|
|
29
|
+
state === 'current' && 'bg-brand-500 text-white',
|
|
31
30
|
state === 'upcoming' && 'bg-surface-overlay text-muted ring-1 ring-border'
|
|
32
31
|
]}
|
|
33
32
|
aria-current={state === 'current' ? 'step' : undefined}
|
|
@@ -18,6 +18,8 @@
|
|
|
18
18
|
fullWidth?: boolean;
|
|
19
19
|
align?: 'start' | 'end' | 'between';
|
|
20
20
|
showCancel?: boolean;
|
|
21
|
+
/** Hide the primary submit control (e.g. file-upload step that auto-advances). */
|
|
22
|
+
showSubmit?: boolean;
|
|
21
23
|
/**
|
|
22
24
|
* plain = bare row
|
|
23
25
|
* bar = bordered footer chrome inside a card
|
|
@@ -44,6 +46,7 @@
|
|
|
44
46
|
fullWidth = true,
|
|
45
47
|
align = 'end',
|
|
46
48
|
showCancel = true,
|
|
49
|
+
showSubmit = true,
|
|
47
50
|
variant = 'bar',
|
|
48
51
|
size = 'md',
|
|
49
52
|
hint = '',
|
|
@@ -69,12 +72,11 @@
|
|
|
69
72
|
|
|
70
73
|
<div
|
|
71
74
|
class={[
|
|
72
|
-
'
|
|
75
|
+
'gap-3 sm:flex-row sm:items-center flex w-full flex-col',
|
|
73
76
|
alignClasses[align],
|
|
74
|
-
variant === 'bar' &&
|
|
75
|
-
'rounded-b-2xl border-t border-border bg-surface/50 px-4 py-3 sm:px-5',
|
|
77
|
+
variant === 'bar' && 'rounded-b-2xl border-border bg-surface/50 px-4 py-3 sm:px-5 border-t',
|
|
76
78
|
variant === 'sticky' &&
|
|
77
|
-
'
|
|
79
|
+
'border-border bg-surface-elevated/95 px-4 py-3 backdrop-blur-md dark:shadow-black/30 sm:px-5 shrink-0 border-t shadow-[0_-8px_24px_rgb(0,0,0,0.06)]',
|
|
78
80
|
variant === 'plain' && 'gap-2',
|
|
79
81
|
className
|
|
80
82
|
]}
|
|
@@ -82,7 +84,7 @@
|
|
|
82
84
|
aria-label="Form actions"
|
|
83
85
|
>
|
|
84
86
|
{#if hint || extra || dangerLabel}
|
|
85
|
-
<div class="
|
|
87
|
+
<div class="min-w-0 gap-2 flex flex-1 flex-wrap items-center">
|
|
86
88
|
{#if dangerLabel}
|
|
87
89
|
<Button
|
|
88
90
|
type="button"
|
|
@@ -103,13 +105,13 @@
|
|
|
103
105
|
{/if}
|
|
104
106
|
</div>
|
|
105
107
|
{:else if align === 'between'}
|
|
106
|
-
<div class="hidden flex-1
|
|
108
|
+
<div class="sm:block hidden flex-1" aria-hidden="true"></div>
|
|
107
109
|
{/if}
|
|
108
110
|
|
|
109
111
|
<div
|
|
110
112
|
class={[
|
|
111
|
-
'flex items-center
|
|
112
|
-
fullWidth && 'w-
|
|
113
|
+
'gap-2 flex items-center',
|
|
114
|
+
fullWidth && 'sm:w-auto sm:flex-row w-full flex-col-reverse'
|
|
113
115
|
]}
|
|
114
116
|
>
|
|
115
117
|
{#if showCancel}
|
|
@@ -118,21 +120,23 @@
|
|
|
118
120
|
variant="secondary"
|
|
119
121
|
{size}
|
|
120
122
|
disabled={busy}
|
|
121
|
-
class={fullWidth ? 'w-
|
|
123
|
+
class={fullWidth ? 'sm:w-auto w-full' : ''}
|
|
122
124
|
onclick={() => oncancel?.()}
|
|
123
125
|
>
|
|
124
126
|
{resolvedCancelLabel}
|
|
125
127
|
</Button>
|
|
126
128
|
{/if}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
129
|
+
{#if showSubmit}
|
|
130
|
+
<Button
|
|
131
|
+
type="submit"
|
|
132
|
+
{size}
|
|
133
|
+
loading={resolvedLoading}
|
|
134
|
+
disabled={busy || submitDisabled}
|
|
135
|
+
class={fullWidth ? 'sm:w-auto w-full' : ''}
|
|
136
|
+
onclick={() => onsubmit?.()}
|
|
137
|
+
>
|
|
138
|
+
{resolvedSubmitLabel}
|
|
139
|
+
</Button>
|
|
140
|
+
{/if}
|
|
137
141
|
</div>
|
|
138
142
|
</div>
|
|
@@ -13,6 +13,8 @@ interface FormActionsProps {
|
|
|
13
13
|
fullWidth?: boolean;
|
|
14
14
|
align?: 'start' | 'end' | 'between';
|
|
15
15
|
showCancel?: boolean;
|
|
16
|
+
/** Hide the primary submit control (e.g. file-upload step that auto-advances). */
|
|
17
|
+
showSubmit?: boolean;
|
|
16
18
|
/**
|
|
17
19
|
* plain = bare row
|
|
18
20
|
* bar = bordered footer chrome inside a card
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
variant === 'dots' ? circleSize.dot : circleSize.box,
|
|
104
104
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
|
|
105
105
|
state === 'complete' && 'border-brand-500 bg-brand-500 text-white',
|
|
106
|
-
state === 'current' && 'border-brand-500 bg-
|
|
106
|
+
state === 'current' && 'border-brand-500 bg-brand-500 text-white',
|
|
107
107
|
state === 'error' && 'border-red-500 bg-red-50 text-red-600 dark:bg-red-950/40 dark:text-red-400',
|
|
108
108
|
state === 'upcoming' && 'border-border bg-surface-elevated text-muted'
|
|
109
109
|
];
|