@phpsoftbox/react-softbox 1.2.1 → 1.3.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.
|
@@ -6,8 +6,12 @@ type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
6
6
|
right?: React.ReactNode;
|
|
7
7
|
};
|
|
8
8
|
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
9
|
+
type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
10
|
+
align?: 'left' | 'right' | 'between';
|
|
11
|
+
};
|
|
9
12
|
type CardComponent = React.FC<CardProps> & {
|
|
10
13
|
Header: React.FC<CardHeaderProps>;
|
|
14
|
+
Toolbar: React.FC<CardToolbarProps>;
|
|
11
15
|
Body: React.FC<CardSectionProps>;
|
|
12
16
|
Footer: React.FC<CardSectionProps>;
|
|
13
17
|
};
|
|
@@ -17,8 +17,18 @@ function CardFooter({ className, ...props }) {
|
|
|
17
17
|
const classes = [styles.footer, className].filter(Boolean).join(' ');
|
|
18
18
|
return _jsx("div", { className: classes, ...props });
|
|
19
19
|
}
|
|
20
|
+
function CardToolbar({ align = 'left', className, ...props }) {
|
|
21
|
+
const alignClass = align === 'right'
|
|
22
|
+
? styles.toolbarAlignRight
|
|
23
|
+
: align === 'between'
|
|
24
|
+
? styles.toolbarAlignBetween
|
|
25
|
+
: styles.toolbarAlignLeft;
|
|
26
|
+
const classes = [styles.toolbar, alignClass, className].filter(Boolean).join(' ');
|
|
27
|
+
return _jsx("div", { className: classes, ...props });
|
|
28
|
+
}
|
|
20
29
|
const Card = Object.assign(CardBase, {
|
|
21
30
|
Header: CardHeader,
|
|
31
|
+
Toolbar: CardToolbar,
|
|
22
32
|
Body: CardBody,
|
|
23
33
|
Footer: CardFooter,
|
|
24
34
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAsBvC,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa;IAClD,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnE,OAAO,kBAAS,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAC5F,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrE,MAAM,IAAI,GAAG,QAAQ,IAAI,CACvB,8BACG,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EACxD,QAAQ,CAAC,CAAC,CAAC,YAAG,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAK,CAAC,CAAC,CAAC,IAAI,IAC/D,CACJ,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,KAAM,KAAK,aAChC,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,YAAG,IAAI,GAAO,EAC9C,KAAK,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,KAAK,GAAO,CAAC,CAAC,CAAC,IAAI,IAC7D,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IACzD,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnE,OAAO,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AAChD,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IAC3D,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrE,OAAO,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AAChD,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IAC5E,MAAM,UAAU,GAAG,KAAK,KAAK,OAAO;QAClC,CAAC,CAAC,MAAM,CAAC,iBAAiB;QAC1B,CAAC,CAAC,KAAK,KAAK,SAAS;YACnB,CAAC,CAAC,MAAM,CAAC,mBAAmB;YAC5B,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC;IAC9B,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAElF,OAAO,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AAChD,CAAC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACnC,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,WAAW;IACpB,IAAI,EAAE,QAAQ;IACd,MAAM,EAAE,UAAU;CACnB,CAAkB,CAAC;AAEpB,eAAe,IAAI,CAAC"}
|
|
@@ -17,6 +17,28 @@
|
|
|
17
17
|
flex-wrap: wrap;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
.toolbar {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: var(--spacing-2);
|
|
24
|
+
padding: var(--spacing-2) var(--spacing-3);
|
|
25
|
+
border-radius: var(--radius-md);
|
|
26
|
+
border: 1px solid var(--color-line);
|
|
27
|
+
background: var(--surface-panel-soft);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.toolbarAlignLeft {
|
|
31
|
+
justify-content: flex-start;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.toolbarAlignRight {
|
|
35
|
+
justify-content: flex-end;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.toolbarAlignBetween {
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
}
|
|
41
|
+
|
|
20
42
|
.headerMain {
|
|
21
43
|
display: flex;
|
|
22
44
|
flex-direction: column;
|
|
@@ -16,7 +16,7 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
|
|
|
16
16
|
gap?: number | string;
|
|
17
17
|
labelWidth?: number | string;
|
|
18
18
|
align?: "center" | "end" | "start";
|
|
19
|
-
labelAlign?: "
|
|
19
|
+
labelAlign?: "left" | "right" | "center";
|
|
20
20
|
}> & {
|
|
21
21
|
Label: React.FC<import("react").LabelHTMLAttributes<HTMLLabelElement> & {
|
|
22
22
|
hint?: React.ReactNode;
|
|
@@ -63,7 +63,7 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
|
|
|
63
63
|
gap?: number | string;
|
|
64
64
|
labelWidth?: number | string;
|
|
65
65
|
align?: "center" | "end" | "start";
|
|
66
|
-
labelAlign?: "
|
|
66
|
+
labelAlign?: "left" | "right" | "center";
|
|
67
67
|
}> & {
|
|
68
68
|
Label: React.FC<import("react").LabelHTMLAttributes<HTMLLabelElement> & {
|
|
69
69
|
hint?: React.ReactNode;
|