@starasia/admin 12.39.0 → 12.40.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/EntityCard/index.d.ts +69 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/index.cjs.js +5 -5
- package/dist/index.es.js +1434 -1323
- package/dist/index.umd.js +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CardProps } from '@starasia/card';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* EntityCard — template kartu entitas/profil yang dirakit dari primitive `Card`
|
|
6
|
+
* + `Avatar` + primitive lain. BUKAN komponen kaku: pakai slot composable
|
|
7
|
+
* (`EntityCard.Media`, `EntityCard.Header`, `EntityCard.Footer`) + `CardBody`
|
|
8
|
+
* untuk isi. Satu shell melayani banyak "template" (profil, media, stat, dll)
|
|
9
|
+
* lewat kombinasi slot — bukan N komponen hardcoded.
|
|
10
|
+
*
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <EntityCard borderColor="brand" clickable>
|
|
13
|
+
* <EntityCard.Media src="/banner.jpg" avatar={<Avatar src="/u.jpg" size="lg" ring />} />
|
|
14
|
+
* <EntityCard.Header title="BeTheOne" subtitle="Dallas Texas, US"
|
|
15
|
+
* action={<Button size="sm" variant="secondary">Edit</Button>} />
|
|
16
|
+
* <CardBody>…deskripsi, badge, progress…</CardBody>
|
|
17
|
+
* <EntityCard.Footer left={<AvatarGroup max={3}>…</AvatarGroup>}
|
|
18
|
+
* right={<Button size="sm">Simpan</Button>} />
|
|
19
|
+
* </EntityCard>
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export interface EntityCardProps extends CardProps {
|
|
23
|
+
}
|
|
24
|
+
interface EntityCardComponent extends React.FC<EntityCardProps> {
|
|
25
|
+
Media: typeof EntityCardMedia;
|
|
26
|
+
Header: typeof EntityCardHeader;
|
|
27
|
+
Footer: typeof EntityCardFooter;
|
|
28
|
+
}
|
|
29
|
+
export declare const EntityCard: EntityCardComponent;
|
|
30
|
+
export interface EntityCardMediaProps {
|
|
31
|
+
/** URL gambar banner. Kalau kosong, pakai `bg` sebagai placeholder. */
|
|
32
|
+
src?: string;
|
|
33
|
+
alt?: string;
|
|
34
|
+
/** Tinggi banner. Default `140`. number → px. */
|
|
35
|
+
height?: number | string;
|
|
36
|
+
/** Warna/placeholder background saat tak ada `src` (token/CSS mentah). */
|
|
37
|
+
bg?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Avatar yang mengambang di kiri-bawah, straddle banner & konten. Biasanya
|
|
40
|
+
* `<Avatar size="lg" ring />`. Slot ini otomatis memberi jarak bawah supaya
|
|
41
|
+
* konten setelahnya tidak tertimpa.
|
|
42
|
+
*/
|
|
43
|
+
avatar?: React.ReactNode;
|
|
44
|
+
/** Overlay konten di atas banner (badge "Recommended", ikon aksi, dll). */
|
|
45
|
+
children?: React.ReactNode;
|
|
46
|
+
}
|
|
47
|
+
export declare const EntityCardMedia: React.FC<EntityCardMediaProps>;
|
|
48
|
+
export interface EntityCardHeaderProps {
|
|
49
|
+
avatar?: React.ReactNode;
|
|
50
|
+
title?: React.ReactNode;
|
|
51
|
+
subtitle?: React.ReactNode;
|
|
52
|
+
/** Slot kanan (tombol Edit, ikon link, value, badge, dll). */
|
|
53
|
+
action?: React.ReactNode;
|
|
54
|
+
/** Garis pemisah bawah header. Default `false`. */
|
|
55
|
+
divided?: boolean;
|
|
56
|
+
children?: React.ReactNode;
|
|
57
|
+
}
|
|
58
|
+
export declare const EntityCardHeader: React.FC<EntityCardHeaderProps>;
|
|
59
|
+
export interface EntityCardFooterProps {
|
|
60
|
+
/** Konten sisi kiri (avatar group, harga, meta). */
|
|
61
|
+
left?: React.ReactNode;
|
|
62
|
+
/** Konten sisi kanan (tombol aksi). */
|
|
63
|
+
right?: React.ReactNode;
|
|
64
|
+
/** Garis pemisah atas. Default `true`. */
|
|
65
|
+
divided?: boolean;
|
|
66
|
+
children?: React.ReactNode;
|
|
67
|
+
}
|
|
68
|
+
export declare const EntityCardFooter: React.FC<EntityCardFooterProps>;
|
|
69
|
+
export {};
|