@siyahi/ui 0.1.9-next.10 → 0.1.9-next.12
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
CHANGED
|
@@ -198,6 +198,10 @@ surface.
|
|
|
198
198
|
</SiyahiProvider>
|
|
199
199
|
```
|
|
200
200
|
|
|
201
|
+
Pages are dense. A `PageSection` sits 24px under its rule with 16px to its
|
|
202
|
+
content, so stack sections 24px apart (`flex flex-col gap-6`) and the rule sits
|
|
203
|
+
midway. Stat tiles are 12px in from each edge with a 24px figure.
|
|
204
|
+
|
|
201
205
|
## Dark mode
|
|
202
206
|
|
|
203
207
|
The colour scheme follows the device (`prefers-color-scheme`). There is no
|
|
@@ -23,7 +23,7 @@ function SectionCards({ items, selected, onSelect }) {
|
|
|
23
23
|
"data-slot": "section-card",
|
|
24
24
|
className: cn("min-w-0", ruled && "border-t border-l"),
|
|
25
25
|
children: /* @__PURE__ */ jsxs(Card, {
|
|
26
|
-
className: cn("@container/card h-full", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
|
|
26
|
+
className: cn("@container/card h-full [--card-spacing:--spacing(3)]", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
|
|
27
27
|
children: [
|
|
28
28
|
onSelect && /* @__PURE__ */ jsx("button", {
|
|
29
29
|
type: "button",
|
|
@@ -36,7 +36,7 @@ function SectionCards({ items, selected, onSelect }) {
|
|
|
36
36
|
/* @__PURE__ */ jsxs(CardHeader, { children: [
|
|
37
37
|
/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
|
|
38
38
|
/* @__PURE__ */ jsx(CardTitle, {
|
|
39
|
-
className: "text-2xl font-semibold tabular-nums
|
|
39
|
+
className: "text-2xl font-semibold tabular-nums",
|
|
40
40
|
children: item.value
|
|
41
41
|
}),
|
|
42
42
|
item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
|
|
@@ -46,7 +46,7 @@ function SectionCards({ items, selected, onSelect }) {
|
|
|
46
46
|
] }),
|
|
47
47
|
item.trend && /* @__PURE__ */ jsx(CardContent, { children: item.trend }),
|
|
48
48
|
(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
|
|
49
|
-
className: "flex-col items-start gap-1
|
|
49
|
+
className: "flex-col items-start gap-1 text-sm",
|
|
50
50
|
children: [item.headline && /* @__PURE__ */ jsx("div", {
|
|
51
51
|
className: "flex flex-wrap gap-2 font-medium",
|
|
52
52
|
children: item.headline
|
|
@@ -12,7 +12,10 @@ export interface PageSectionProps {
|
|
|
12
12
|
action?: ReactNode;
|
|
13
13
|
children?: ReactNode;
|
|
14
14
|
}
|
|
15
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* One part of a long page: a rule above, then the heading and lead on the canvas, then its content. Spaced for
|
|
17
|
+
* density, 24px under the rule and 16px to the content, so sections stacked 24px apart sit 24px either side of it.
|
|
18
|
+
*/
|
|
16
19
|
export declare function PageSection({ id, eyebrow, title, lead, action, children }: PageSectionProps): import("react").JSX.Element;
|
|
17
20
|
/** A heading inside a PageSection, one level under its title. */
|
|
18
21
|
export declare function PageSubheading({ children }: {
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
//#region src/components/siyahi/page-section.tsx
|
|
3
|
-
/**
|
|
3
|
+
/**
|
|
4
|
+
* One part of a long page: a rule above, then the heading and lead on the canvas, then its content. Spaced for
|
|
5
|
+
* density, 24px under the rule and 16px to the content, so sections stacked 24px apart sit 24px either side of it.
|
|
6
|
+
*/
|
|
4
7
|
function PageSection({ id, eyebrow, title, lead, action, children }) {
|
|
5
8
|
return /* @__PURE__ */ jsxs("section", {
|
|
6
9
|
id,
|
|
7
10
|
"data-slot": "page-section",
|
|
8
|
-
className: "flex scroll-mt-6 flex-col gap-
|
|
11
|
+
className: "flex scroll-mt-6 flex-col gap-4 border-t pt-6",
|
|
9
12
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
10
13
|
className: "flex flex-wrap items-end justify-between gap-4",
|
|
11
14
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
@@ -16,7 +19,7 @@ function PageSection({ id, eyebrow, title, lead, action, children }) {
|
|
|
16
19
|
children: eyebrow
|
|
17
20
|
}),
|
|
18
21
|
/* @__PURE__ */ jsx("h2", {
|
|
19
|
-
className: "text-
|
|
22
|
+
className: "text-xl font-semibold tracking-tight",
|
|
20
23
|
children: title
|
|
21
24
|
}),
|
|
22
25
|
lead && /* @__PURE__ */ jsx("div", {
|
|
@@ -21,7 +21,7 @@ function PanelGrid({ columns = 2, children, className }) {
|
|
|
21
21
|
"data-slot": "panel-grid",
|
|
22
22
|
className: cn("@container/panels", ruled && "overflow-hidden border-y", className),
|
|
23
23
|
children: /* @__PURE__ */ jsx("div", {
|
|
24
|
-
className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-mt-px -ml-px" : surface === "open" ? "gap-x-
|
|
24
|
+
className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-mt-px -ml-px" : surface === "open" ? "gap-x-8 gap-y-6" : "gap-4"),
|
|
25
25
|
children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
|
|
26
26
|
"data-slot": "panel",
|
|
27
27
|
className: cn("min-w-0", ruled && "border-t border-l"),
|