@makolabs/ripple 1.1.1 → 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/dist/index.d.ts +3 -0
- package/dist/index.js +2 -0
- package/dist/layout/card/RankedCard.svelte +56 -0
- package/dist/layout/card/RankedCard.svelte.d.ts +4 -0
- package/dist/layout/card/ranked-card.d.ts +104 -0
- package/dist/layout/card/ranked-card.js +28 -0
- package/dist/pipeline/Pipeline.svelte +11 -2
- package/dist/pipeline/Pipeline.svelte.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -159,6 +159,7 @@ export type MetricCardProps = {
|
|
|
159
159
|
segments?: ProgressSegment[];
|
|
160
160
|
class?: ClassValue;
|
|
161
161
|
};
|
|
162
|
+
export type { RankedCardProps, RankedCardItem, RankedCardMetric } from './layout/card/ranked-card.js';
|
|
162
163
|
export type DataRow = Record<string, any>;
|
|
163
164
|
export type KeyType = keyof DataRow;
|
|
164
165
|
export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
|
|
@@ -327,6 +328,7 @@ export { default as Dropdown } from './elements/dropdown/Dropdown.svelte';
|
|
|
327
328
|
export { default as Select } from './elements/dropdown/Select.svelte';
|
|
328
329
|
export { default as Card } from './layout/card/Card.svelte';
|
|
329
330
|
export { default as MetricCard } from './layout/card/MetricCard.svelte';
|
|
331
|
+
export { default as RankedCard } from './layout/card/RankedCard.svelte';
|
|
330
332
|
export { default as Alert } from './elements/alert/Alert.svelte';
|
|
331
333
|
export type TabProps = {
|
|
332
334
|
value: string;
|
|
@@ -376,6 +378,7 @@ export { drawer } from './drawer/drawer.js';
|
|
|
376
378
|
export { selectTV } from './elements/dropdown/select.js';
|
|
377
379
|
export { breadcrumbs } from './header/breadcrumbs.js';
|
|
378
380
|
export { metricCard } from './layout/card/metric-card.js';
|
|
381
|
+
export { rankedCard } from './layout/card/ranked-card.js';
|
|
379
382
|
export { activityList } from './layout/activity-list/activity-list.js';
|
|
380
383
|
export type ChartColorKey = keyof typeof ChartColor;
|
|
381
384
|
export type ChartColorValue = (typeof ChartColor)[ChartColorKey];
|
package/dist/index.js
CHANGED
|
@@ -30,6 +30,7 @@ export { default as Select } from './elements/dropdown/Select.svelte';
|
|
|
30
30
|
// Elements - Card
|
|
31
31
|
export { default as Card } from './layout/card/Card.svelte';
|
|
32
32
|
export { default as MetricCard } from './layout/card/MetricCard.svelte';
|
|
33
|
+
export { default as RankedCard } from './layout/card/RankedCard.svelte';
|
|
33
34
|
// Elements - Alert
|
|
34
35
|
export { default as Alert } from './elements/alert/Alert.svelte';
|
|
35
36
|
export { default as Tab } from './layout/tabs/Tab.svelte';
|
|
@@ -55,6 +56,7 @@ export { drawer } from './drawer/drawer.js';
|
|
|
55
56
|
export { selectTV } from './elements/dropdown/select.js';
|
|
56
57
|
export { breadcrumbs } from './header/breadcrumbs.js';
|
|
57
58
|
export { metricCard } from './layout/card/metric-card.js';
|
|
59
|
+
export { rankedCard } from './layout/card/ranked-card.js';
|
|
58
60
|
export { activityList } from './layout/activity-list/activity-list.js';
|
|
59
61
|
export { default as Chart } from './charts/Chart.svelte';
|
|
60
62
|
export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn } from '../../helper/cls.js';
|
|
3
|
+
import { rankedCard, type RankedCardProps } from './ranked-card.js';
|
|
4
|
+
|
|
5
|
+
let { items, columns = 3, class: className = '' }: RankedCardProps = $props();
|
|
6
|
+
|
|
7
|
+
const {
|
|
8
|
+
container,
|
|
9
|
+
card,
|
|
10
|
+
header,
|
|
11
|
+
rank,
|
|
12
|
+
title,
|
|
13
|
+
metricsContainer,
|
|
14
|
+
metricRow,
|
|
15
|
+
metricLabel,
|
|
16
|
+
metricValue,
|
|
17
|
+
actionContainer,
|
|
18
|
+
actionText,
|
|
19
|
+
actionLabel
|
|
20
|
+
} = $derived(rankedCard({ columns }));
|
|
21
|
+
|
|
22
|
+
const containerClass = $derived(cn(container(), className));
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<div class={containerClass}>
|
|
26
|
+
{#each items as item}
|
|
27
|
+
<div class={card()}>
|
|
28
|
+
<!-- Header with Rank and Title -->
|
|
29
|
+
<div class={header()}>
|
|
30
|
+
<span class={rank()}>#{item.rank}</span>
|
|
31
|
+
<h4 class={title()}>{item.title}</h4>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<!-- Metrics -->
|
|
35
|
+
<div class={metricsContainer()}>
|
|
36
|
+
{#each item.metrics as metric}
|
|
37
|
+
<div class={metricRow()}>
|
|
38
|
+
<span class={metricLabel()}>{metric.label}:</span>
|
|
39
|
+
<span class={cn(metricValue(), metric.color || '')}>{metric.value}</span>
|
|
40
|
+
</div>
|
|
41
|
+
{/each}
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<!-- Action/Recommendation -->
|
|
45
|
+
{#if item.action}
|
|
46
|
+
<div class={actionContainer()}>
|
|
47
|
+
<p class={actionText()}>
|
|
48
|
+
<span class={actionLabel()}>Action:</span>
|
|
49
|
+
<span class={item.action.color || ''}>{item.action.text}</span>
|
|
50
|
+
</p>
|
|
51
|
+
</div>
|
|
52
|
+
{/if}
|
|
53
|
+
</div>
|
|
54
|
+
{/each}
|
|
55
|
+
</div>
|
|
56
|
+
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
export declare const rankedCard: import("tailwind-variants").TVReturnType<{
|
|
2
|
+
columns: {
|
|
3
|
+
1: {
|
|
4
|
+
container: string;
|
|
5
|
+
};
|
|
6
|
+
2: {
|
|
7
|
+
container: string;
|
|
8
|
+
};
|
|
9
|
+
3: {
|
|
10
|
+
container: string;
|
|
11
|
+
};
|
|
12
|
+
4: {
|
|
13
|
+
container: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
}, {
|
|
17
|
+
container: string;
|
|
18
|
+
card: string;
|
|
19
|
+
header: string;
|
|
20
|
+
rank: string;
|
|
21
|
+
title: string;
|
|
22
|
+
metricsContainer: string;
|
|
23
|
+
metricRow: string;
|
|
24
|
+
metricLabel: string;
|
|
25
|
+
metricValue: string;
|
|
26
|
+
actionContainer: string;
|
|
27
|
+
actionText: string;
|
|
28
|
+
actionLabel: string;
|
|
29
|
+
}, undefined, {
|
|
30
|
+
columns: {
|
|
31
|
+
1: {
|
|
32
|
+
container: string;
|
|
33
|
+
};
|
|
34
|
+
2: {
|
|
35
|
+
container: string;
|
|
36
|
+
};
|
|
37
|
+
3: {
|
|
38
|
+
container: string;
|
|
39
|
+
};
|
|
40
|
+
4: {
|
|
41
|
+
container: string;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
}, {
|
|
45
|
+
container: string;
|
|
46
|
+
card: string;
|
|
47
|
+
header: string;
|
|
48
|
+
rank: string;
|
|
49
|
+
title: string;
|
|
50
|
+
metricsContainer: string;
|
|
51
|
+
metricRow: string;
|
|
52
|
+
metricLabel: string;
|
|
53
|
+
metricValue: string;
|
|
54
|
+
actionContainer: string;
|
|
55
|
+
actionText: string;
|
|
56
|
+
actionLabel: string;
|
|
57
|
+
}, import("tailwind-variants").TVReturnType<{
|
|
58
|
+
columns: {
|
|
59
|
+
1: {
|
|
60
|
+
container: string;
|
|
61
|
+
};
|
|
62
|
+
2: {
|
|
63
|
+
container: string;
|
|
64
|
+
};
|
|
65
|
+
3: {
|
|
66
|
+
container: string;
|
|
67
|
+
};
|
|
68
|
+
4: {
|
|
69
|
+
container: string;
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
}, {
|
|
73
|
+
container: string;
|
|
74
|
+
card: string;
|
|
75
|
+
header: string;
|
|
76
|
+
rank: string;
|
|
77
|
+
title: string;
|
|
78
|
+
metricsContainer: string;
|
|
79
|
+
metricRow: string;
|
|
80
|
+
metricLabel: string;
|
|
81
|
+
metricValue: string;
|
|
82
|
+
actionContainer: string;
|
|
83
|
+
actionText: string;
|
|
84
|
+
actionLabel: string;
|
|
85
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
86
|
+
export type RankedCardMetric = {
|
|
87
|
+
label: string;
|
|
88
|
+
value: string;
|
|
89
|
+
color?: string;
|
|
90
|
+
};
|
|
91
|
+
export type RankedCardItem = {
|
|
92
|
+
rank: number;
|
|
93
|
+
title: string;
|
|
94
|
+
metrics: RankedCardMetric[];
|
|
95
|
+
action?: {
|
|
96
|
+
text: string;
|
|
97
|
+
color?: string;
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
export type RankedCardProps = {
|
|
101
|
+
items: RankedCardItem[];
|
|
102
|
+
columns?: 1 | 2 | 3 | 4;
|
|
103
|
+
class?: string;
|
|
104
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { tv } from 'tailwind-variants';
|
|
2
|
+
export const rankedCard = tv({
|
|
3
|
+
slots: {
|
|
4
|
+
container: 'grid gap-4',
|
|
5
|
+
card: 'border border-default-200 rounded-lg p-4',
|
|
6
|
+
header: 'flex items-center gap-2 mb-3',
|
|
7
|
+
rank: 'text-base font-bold text-default-400',
|
|
8
|
+
title: 'text-sm font-semibold text-default-900',
|
|
9
|
+
metricsContainer: 'space-y-2 mb-3',
|
|
10
|
+
metricRow: 'flex items-center justify-between text-sm',
|
|
11
|
+
metricLabel: 'text-default-600',
|
|
12
|
+
metricValue: 'font-medium text-default-900',
|
|
13
|
+
actionContainer: 'pt-3 border-t border-default-200',
|
|
14
|
+
actionText: 'text-xs text-default-600',
|
|
15
|
+
actionLabel: 'font-semibold text-default-700'
|
|
16
|
+
},
|
|
17
|
+
variants: {
|
|
18
|
+
columns: {
|
|
19
|
+
1: { container: 'grid-cols-1' },
|
|
20
|
+
2: { container: 'grid-cols-1 md:grid-cols-2' },
|
|
21
|
+
3: { container: 'grid-cols-1 md:grid-cols-3' },
|
|
22
|
+
4: { container: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4' }
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
defaultVariants: {
|
|
26
|
+
columns: 3
|
|
27
|
+
}
|
|
28
|
+
});
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
size?: 'sm' | 'base' | 'lg';
|
|
16
16
|
equalWidth?: boolean;
|
|
17
17
|
children?: Snippet<[PipelineStage, number]>;
|
|
18
|
+
beneathChildren?: Snippet<[PipelineStage, number]>;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
let {
|
|
@@ -22,7 +23,8 @@
|
|
|
22
23
|
class: className = '',
|
|
23
24
|
size = 'base',
|
|
24
25
|
equalWidth = true,
|
|
25
|
-
children
|
|
26
|
+
children,
|
|
27
|
+
beneathChildren
|
|
26
28
|
}: Props = $props();
|
|
27
29
|
|
|
28
30
|
const pipeline = tv({
|
|
@@ -126,7 +128,7 @@
|
|
|
126
128
|
{@const isLast = index === stages.length - 1}
|
|
127
129
|
{@const chevronWidth = 20}
|
|
128
130
|
|
|
129
|
-
<div class={getStageStyles(stage).stage()} style="{!isFirst ? `margin-left: -${chevronWidth}px; z-index: ${stages.length - index}` : `z-index: ${stages.length - index}`}">
|
|
131
|
+
<div class="flex flex-col {getStageStyles(stage).stage()}" style="{!isFirst ? `margin-left: -${chevronWidth}px; z-index: ${stages.length - index}` : `z-index: ${stages.length - index}`}">
|
|
130
132
|
<!-- BACKGROUND LAYER (Border color - larger) -->
|
|
131
133
|
<div
|
|
132
134
|
class="{getStageStyles(stage).borderLayer()}"
|
|
@@ -153,6 +155,13 @@
|
|
|
153
155
|
{/if}
|
|
154
156
|
</div>
|
|
155
157
|
</div>
|
|
158
|
+
|
|
159
|
+
<!-- Beneath Children - Rendered directly below this stage -->
|
|
160
|
+
{#if beneathChildren}
|
|
161
|
+
<div class="mt-4">
|
|
162
|
+
{@render beneathChildren(stage, index)}
|
|
163
|
+
</div>
|
|
164
|
+
{/if}
|
|
156
165
|
</div>
|
|
157
166
|
{/each}
|
|
158
167
|
</div>
|
|
@@ -11,6 +11,7 @@ interface Props {
|
|
|
11
11
|
size?: 'sm' | 'base' | 'lg';
|
|
12
12
|
equalWidth?: boolean;
|
|
13
13
|
children?: Snippet<[PipelineStage, number]>;
|
|
14
|
+
beneathChildren?: Snippet<[PipelineStage, number]>;
|
|
14
15
|
}
|
|
15
16
|
declare const Pipeline: import("svelte").Component<Props, {}, "">;
|
|
16
17
|
type Pipeline = ReturnType<typeof Pipeline>;
|