@leonardaustin/ui 0.10.0 → 0.12.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/ui/Dialog.d.ts +28 -10
- package/dist/components/ui/Dialog.d.ts.map +1 -1
- package/dist/components/ui/MetadataGrid.d.ts +19 -3
- package/dist/components/ui/MetadataGrid.d.ts.map +1 -1
- package/dist/index.js +1536 -1296
- package/dist/lib/dialogDrag.d.ts +10 -0
- package/dist/lib/dialogDrag.d.ts.map +1 -1
- package/dist/lib/dialogResize.d.ts +44 -0
- package/dist/lib/dialogResize.d.ts.map +1 -0
- package/dist/styles.css +56 -1
- package/package.json +1 -1
|
@@ -30,18 +30,36 @@ export interface DialogProps {
|
|
|
30
30
|
footer?: ReactNode;
|
|
31
31
|
className?: string;
|
|
32
32
|
/**
|
|
33
|
-
* Let the user move the dialog by dragging its title bar
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
33
|
+
* Let the user move the dialog by dragging its title bar or the grip
|
|
34
|
+
* handle shown at its bottom-left corner (mouse, touch or pen). The grip is
|
|
35
|
+
* focusable ("Move dialog"): the arrow keys nudge the dialog 10px, or 50px
|
|
36
|
+
* with Shift. It keeps a theme-spacing margin from the viewport edges and
|
|
37
|
+
* reopens in its default position unless `rememberPosition` is set. Off
|
|
38
|
+
* below the `md` breakpoint, where the grip is hidden.
|
|
37
39
|
*/
|
|
38
40
|
draggable?: boolean;
|
|
39
41
|
/**
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
42
|
+
* Let the user resize the dialog from the handle shown at its bottom-right
|
|
43
|
+
* corner (mouse, touch or pen). The top-left corner stays put while it
|
|
44
|
+
* resizes, and the body scrolls when it's shorter than its content. The
|
|
45
|
+
* handle is focusable ("Resize dialog"): the arrow keys resize the dialog
|
|
46
|
+
* 10px, or 50px with Shift (Right/Down grow it, Left/Up shrink it). It
|
|
47
|
+
* can't get narrower than 280px or shorter than its title bar, footer and a
|
|
48
|
+
* little body, and keeps a theme-spacing margin from the viewport edges.
|
|
49
|
+
* `size` and `className` set the opening size; a resize overrides them
|
|
50
|
+
* until the dialog closes. It reopens at that natural size unless
|
|
51
|
+
* `rememberPosition` is set. Off below the `md` breakpoint, where the
|
|
52
|
+
* handle is hidden.
|
|
53
|
+
*/
|
|
54
|
+
resizable?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* With `draggable` or `resizable`, reopen the dialog as the user left it:
|
|
57
|
+
* at the screen position they last moved it to (by drag or keyboard), and
|
|
58
|
+
* at the size they last resized it to, instead of its default (or
|
|
59
|
+
* anchored) position and natural size. Kept in memory for this Dialog
|
|
60
|
+
* instance only (not persisted), pulled back inside the viewport if the
|
|
61
|
+
* window has shrunk, and cleared below the `md` breakpoint. Ignored
|
|
62
|
+
* without `draggable` or `resizable`.
|
|
45
63
|
*/
|
|
46
64
|
rememberPosition?: boolean;
|
|
47
65
|
/**
|
|
@@ -75,5 +93,5 @@ export interface DialogProps {
|
|
|
75
93
|
closeOnOverlayClick?: boolean;
|
|
76
94
|
hideCloseButton?: boolean;
|
|
77
95
|
}
|
|
78
|
-
export declare function Dialog({ open, onClose, title, children, footer, className, size, draggable, rememberPosition, placement, anchorRef, role, description, "aria-label": ariaLabel, "aria-describedby": describedBy, initialFocusRef, returnFocusRef, busy, closeOnEscape, closeOnOverlayClick, hideCloseButton, }: DialogProps): import("react").ReactPortal | null;
|
|
96
|
+
export declare function Dialog({ open, onClose, title, children, footer, className, size, draggable, resizable, rememberPosition, placement, anchorRef, role, description, "aria-label": ariaLabel, "aria-describedby": describedBy, initialFocusRef, returnFocusRef, busy, closeOnEscape, closeOnOverlayClick, hideCloseButton, }: DialogProps): import("react").ReactPortal | null;
|
|
79
97
|
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,EAEL,KAAK,eAAe,EAErB,MAAM,2BAA2B,CAAC;AAsBnC,sEAAsE;AACtE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEzD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AASnD,MAAM,WAAW,WAAW;IAC1B,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,yEAAyE;IACzE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6oBD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,IAAW,EACX,SAAiB,EACjB,SAAiB,EACjB,gBAAwB,EACxB,SAAoB,EACpB,SAAS,EACT,IAAe,EACf,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,WAAW,EAC/B,eAAe,EACf,cAAc,EACd,IAAY,EACZ,aAAoB,EACpB,mBAA0B,EAC1B,eAAuB,GACxB,EAAE,WAAW,sCAyLb"}
|
|
@@ -20,6 +20,11 @@
|
|
|
20
20
|
* ```tsx
|
|
21
21
|
* <MetadataGrid labelWidth="120px" items={items} />
|
|
22
22
|
* ```
|
|
23
|
+
*
|
|
24
|
+
* @example Striped rows
|
|
25
|
+
* ```tsx
|
|
26
|
+
* <MetadataGrid striped items={items} />
|
|
27
|
+
* ```
|
|
23
28
|
*/
|
|
24
29
|
import { type ReactNode } from "react";
|
|
25
30
|
import { type LayoutGap, type LayoutResponsive } from "../../lib/layout";
|
|
@@ -30,11 +35,14 @@ interface MetadataItem {
|
|
|
30
35
|
value: ReactNode;
|
|
31
36
|
}
|
|
32
37
|
interface MetadataGridProps {
|
|
33
|
-
/** Inline preserves the original two-column markup; stacked places labels above values. */
|
|
38
|
+
/** Inline preserves the original two-column markup (unless `striped`); stacked places labels above values. */
|
|
34
39
|
layout?: "inline" | "stacked";
|
|
35
40
|
/** Stacked layout columns at mobile-first breakpoints. */
|
|
36
41
|
columns?: LayoutResponsive<number>;
|
|
37
|
-
/**
|
|
42
|
+
/**
|
|
43
|
+
* Stacked layout spacing units; ignored for inline. With `striped`, only
|
|
44
|
+
* the column gap applies and rows touch.
|
|
45
|
+
*/
|
|
38
46
|
gap?: LayoutGap;
|
|
39
47
|
/** The list of label/value pairs to display. */
|
|
40
48
|
items: MetadataItem[];
|
|
@@ -44,9 +52,17 @@ interface MetadataGridProps {
|
|
|
44
52
|
* The overlay sheet panels use "80px" for tighter layouts.
|
|
45
53
|
*/
|
|
46
54
|
labelWidth?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Shade every other row (the 1st, 3rd, …) with a subtle background, and
|
|
57
|
+
* give every row padding and rounded corners so the shaded and unshaded
|
|
58
|
+
* rows stay aligned. In the stacked layout the stripes follow the visual
|
|
59
|
+
* rows at each breakpoint of `columns`. Set `--ui-metadata-stripe-color`
|
|
60
|
+
* on the grid to change the stripe colour (defaults to `--bg-tertiary`).
|
|
61
|
+
*/
|
|
62
|
+
striped?: boolean;
|
|
47
63
|
/** Additional utility classes for the root container. */
|
|
48
64
|
className?: string;
|
|
49
65
|
}
|
|
50
|
-
export declare function MetadataGrid({ items, labelWidth, layout, columns, gap, className, }: MetadataGridProps): import("react/jsx-runtime").JSX.Element;
|
|
66
|
+
export declare function MetadataGrid({ items, labelWidth, layout, columns, gap, striped, className, }: MetadataGridProps): import("react/jsx-runtime").JSX.Element;
|
|
51
67
|
export {};
|
|
52
68
|
//# sourceMappingURL=MetadataGrid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetadataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MetadataGrid.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"MetadataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MetadataGrid.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,gBAAgB,EAEtB,MAAM,kBAAkB,CAAC;AAE1B,UAAU,YAAY;IACpB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,iBAAiB;IACzB,8GAA8G;IAC9G,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACnC;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAoB,EACpB,MAAiB,EACjB,OAAW,EACX,GAAO,EACP,OAAe,EACf,SAAS,GACV,EAAE,iBAAiB,2CAwFnB"}
|