@umami/react-zen 0.100.0 → 0.102.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.css +21 -22
- package/dist/index.d.ts +7 -3
- package/dist/index.js +15 -12
- package/dist/index.mjs +15 -12
- package/package.json +1 -1
- package/styles.css +21 -22
package/dist/index.css
CHANGED
|
@@ -3955,25 +3955,24 @@ body a.Button_button__NDYwM {
|
|
|
3955
3955
|
}
|
|
3956
3956
|
|
|
3957
3957
|
/* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
|
|
3958
|
-
.
|
|
3958
|
+
.List_list__ZDQ2Z {
|
|
3959
3959
|
display: grid;
|
|
3960
|
-
min-width: 100px;
|
|
3961
3960
|
outline: none;
|
|
3962
3961
|
overflow: auto;
|
|
3963
3962
|
gap: var(--spacing-1);
|
|
3964
3963
|
}
|
|
3965
|
-
.
|
|
3964
|
+
.List_separator__ZTZiM {
|
|
3966
3965
|
border-bottom: var(--border);
|
|
3967
3966
|
}
|
|
3968
|
-
.
|
|
3967
|
+
.List_section__ZTliN:not(:last-child) {
|
|
3969
3968
|
margin-bottom: var(--spacing-4);
|
|
3970
3969
|
}
|
|
3971
|
-
.
|
|
3970
|
+
.List_header__YWIzN {
|
|
3972
3971
|
font-size: var(--font-size-2);
|
|
3973
3972
|
font-weight: var(--font-weight-bold);
|
|
3974
3973
|
padding: var(--padding);
|
|
3975
3974
|
}
|
|
3976
|
-
.
|
|
3975
|
+
.List_item__YmJhM {
|
|
3977
3976
|
display: flex;
|
|
3978
3977
|
align-items: center;
|
|
3979
3978
|
justify-content: space-between;
|
|
@@ -3986,43 +3985,43 @@ body a.Button_button__NDYwM {
|
|
|
3986
3985
|
outline: none;
|
|
3987
3986
|
border-radius: var(--border-radius);
|
|
3988
3987
|
}
|
|
3989
|
-
.
|
|
3988
|
+
.List_item__YmJhM[data-disabled] {
|
|
3990
3989
|
color: var(--font-color-disabled);
|
|
3991
3990
|
}
|
|
3992
|
-
.
|
|
3993
|
-
.
|
|
3991
|
+
.List_item__YmJhM[data-focus],
|
|
3992
|
+
.List_item__YmJhM[data-focus-visible] {
|
|
3994
3993
|
background: var(--highlight-color);
|
|
3995
3994
|
}
|
|
3996
|
-
.
|
|
3995
|
+
.List_item__YmJhM:hover {
|
|
3997
3996
|
background: var(--highlight-color);
|
|
3998
3997
|
}
|
|
3999
|
-
.
|
|
3998
|
+
.List_item__YmJhM[data-selected] {
|
|
4000
3999
|
font-weight: bold;
|
|
4001
|
-
& .
|
|
4000
|
+
& .List_check__ZTc4Z {
|
|
4002
4001
|
display: flex;
|
|
4003
4002
|
justify-content: flex-end;
|
|
4004
4003
|
flex: 1;
|
|
4005
4004
|
}
|
|
4006
4005
|
}
|
|
4007
|
-
.List_variant-
|
|
4008
|
-
& .
|
|
4009
|
-
.
|
|
4006
|
+
.List_variant-1__NWM2N {
|
|
4007
|
+
& .List_item__YmJhM:hover,
|
|
4008
|
+
.List_item__YmJhM[data-selected] {
|
|
4010
4009
|
background: var(--base-color-2);
|
|
4011
4010
|
}
|
|
4012
4011
|
}
|
|
4013
|
-
.List_variant-
|
|
4014
|
-
& .
|
|
4015
|
-
.
|
|
4012
|
+
.List_variant-2__MGZhY {
|
|
4013
|
+
& .List_item__YmJhM:hover,
|
|
4014
|
+
.List_item__YmJhM[data-selected] {
|
|
4016
4015
|
background: var(--base-color-3);
|
|
4017
4016
|
}
|
|
4018
4017
|
}
|
|
4019
|
-
.List_variant-
|
|
4020
|
-
& .
|
|
4021
|
-
.
|
|
4018
|
+
.List_variant-3__MmJkZ {
|
|
4019
|
+
& .List_item__YmJhM:hover,
|
|
4020
|
+
.List_item__YmJhM[data-selected] {
|
|
4022
4021
|
background: var(--base-color-4);
|
|
4023
4022
|
}
|
|
4024
4023
|
}
|
|
4025
|
-
.
|
|
4024
|
+
.List_check__ZTc4Z {
|
|
4026
4025
|
display: none;
|
|
4027
4026
|
}
|
|
4028
4027
|
|
package/dist/index.d.ts
CHANGED
|
@@ -617,11 +617,15 @@ declare module '@umami/react-zen/List' {
|
|
|
617
617
|
variant?: '1' | '2' | '3';
|
|
618
618
|
}
|
|
619
619
|
export function List({ items, idProperty, labelProperty, separatorProperty, variant, className, children, ...props }: ListProps): import("react").JSX.Element;
|
|
620
|
-
export
|
|
620
|
+
export interface ListItemProps extends ListBoxItemProps<any> {
|
|
621
|
+
showCheckmark?: boolean;
|
|
622
|
+
}
|
|
623
|
+
export function ListItem({ id, children, className, showCheckmark, ...props }: ListItemProps): import("react").JSX.Element;
|
|
621
624
|
export function ListSeparator({ className, ...props }: SeparatorProps): import("react").JSX.Element;
|
|
622
|
-
export
|
|
625
|
+
export interface ListSectionProps extends ListBoxSectionProps<any> {
|
|
623
626
|
title?: string;
|
|
624
|
-
}
|
|
627
|
+
}
|
|
628
|
+
export function ListSection({ title, className, children, ...props }: ListSectionProps): import("react").JSX.Element;
|
|
625
629
|
}
|
|
626
630
|
|
|
627
631
|
declare module '@umami/react-zen/Loading' {
|
package/dist/index.js
CHANGED
|
@@ -25714,9 +25714,6 @@ function Box({
|
|
|
25714
25714
|
marginRight,
|
|
25715
25715
|
marginBottom,
|
|
25716
25716
|
marginLeft,
|
|
25717
|
-
overflow,
|
|
25718
|
-
overflowX,
|
|
25719
|
-
overflowY,
|
|
25720
25717
|
width,
|
|
25721
25718
|
minWidth,
|
|
25722
25719
|
maxWidth,
|
|
@@ -25729,6 +25726,11 @@ function Box({
|
|
|
25729
25726
|
right,
|
|
25730
25727
|
bottom,
|
|
25731
25728
|
left,
|
|
25729
|
+
overflow,
|
|
25730
|
+
overflowX,
|
|
25731
|
+
overflowY,
|
|
25732
|
+
alignSelf,
|
|
25733
|
+
justifySelf,
|
|
25732
25734
|
flexBasis,
|
|
25733
25735
|
flexGrow,
|
|
25734
25736
|
flexShrink,
|
|
@@ -30717,7 +30719,7 @@ var import_react184 = require("react");
|
|
|
30717
30719
|
var import_classnames32 = __toESM(require_classnames());
|
|
30718
30720
|
|
|
30719
30721
|
// css-modules:E:\dev\umami-react-zen\src\components\List.module.css
|
|
30720
|
-
var List_default = { "list": "
|
|
30722
|
+
var List_default = { "list": "List_list__ZDQ2Z", "separator": "List_separator__ZTZiM", "section": "List_section__ZTliN", "header": "List_header__YWIzN", "item": "List_item__YmJhM", "check": "List_check__ZTc4Z", "variant-1": "List_variant-1__NWM2N", "variant-2": "List_variant-2__MGZhY", "variant-3": "List_variant-3__MmJkZ" };
|
|
30721
30723
|
|
|
30722
30724
|
// src/components/List.tsx
|
|
30723
30725
|
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
@@ -30749,7 +30751,13 @@ function List({
|
|
|
30749
30751
|
}
|
|
30750
30752
|
);
|
|
30751
30753
|
}
|
|
30752
|
-
function ListItem({
|
|
30754
|
+
function ListItem({
|
|
30755
|
+
id,
|
|
30756
|
+
children,
|
|
30757
|
+
className,
|
|
30758
|
+
showCheckmark = true,
|
|
30759
|
+
...props
|
|
30760
|
+
}) {
|
|
30753
30761
|
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
30754
30762
|
$eed445e0843c11d0$export$a11e76429ed99b4,
|
|
30755
30763
|
{
|
|
@@ -30759,7 +30767,7 @@ function ListItem({ id, children, className, ...props }) {
|
|
|
30759
30767
|
textValue: typeof children === "string" ? children : id?.toString(),
|
|
30760
30768
|
children: [
|
|
30761
30769
|
children,
|
|
30762
|
-
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { "aria-hidden": "true", className: List_default.check, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icons.Check, {}) }) })
|
|
30770
|
+
showCheckmark && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { "aria-hidden": "true", className: List_default.check, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icons.Check, {}) }) })
|
|
30763
30771
|
]
|
|
30764
30772
|
}
|
|
30765
30773
|
);
|
|
@@ -30767,12 +30775,7 @@ function ListItem({ id, children, className, ...props }) {
|
|
|
30767
30775
|
function ListSeparator({ className, ...props }) {
|
|
30768
30776
|
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames32.default)(List_default.separator, className) });
|
|
30769
30777
|
}
|
|
30770
|
-
function ListSection({
|
|
30771
|
-
title,
|
|
30772
|
-
className,
|
|
30773
|
-
children,
|
|
30774
|
-
...props
|
|
30775
|
-
}) {
|
|
30778
|
+
function ListSection({ title, className, children, ...props }) {
|
|
30776
30779
|
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)($eed445e0843c11d0$export$dca12b0bb56e4fc, { ...props, className: (0, import_classnames32.default)(List_default.section, className), children: [
|
|
30777
30780
|
title && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($72a5793c14baf454$export$8b251419efc915eb, { className: List_default.header, children: title }),
|
|
30778
30781
|
children
|
package/dist/index.mjs
CHANGED
|
@@ -25603,9 +25603,6 @@ function Box({
|
|
|
25603
25603
|
marginRight,
|
|
25604
25604
|
marginBottom,
|
|
25605
25605
|
marginLeft,
|
|
25606
|
-
overflow,
|
|
25607
|
-
overflowX,
|
|
25608
|
-
overflowY,
|
|
25609
25606
|
width,
|
|
25610
25607
|
minWidth,
|
|
25611
25608
|
maxWidth,
|
|
@@ -25618,6 +25615,11 @@ function Box({
|
|
|
25618
25615
|
right,
|
|
25619
25616
|
bottom,
|
|
25620
25617
|
left,
|
|
25618
|
+
overflow,
|
|
25619
|
+
overflowX,
|
|
25620
|
+
overflowY,
|
|
25621
|
+
alignSelf,
|
|
25622
|
+
justifySelf,
|
|
25621
25623
|
flexBasis,
|
|
25622
25624
|
flexGrow,
|
|
25623
25625
|
flexShrink,
|
|
@@ -30606,7 +30608,7 @@ import { Fragment as Fragment6 } from "react";
|
|
|
30606
30608
|
var import_classnames32 = __toESM(require_classnames());
|
|
30607
30609
|
|
|
30608
30610
|
// css-modules:E:\dev\umami-react-zen\src\components\List.module.css
|
|
30609
|
-
var List_default = { "list": "
|
|
30611
|
+
var List_default = { "list": "List_list__ZDQ2Z", "separator": "List_separator__ZTZiM", "section": "List_section__ZTliN", "header": "List_header__YWIzN", "item": "List_item__YmJhM", "check": "List_check__ZTc4Z", "variant-1": "List_variant-1__NWM2N", "variant-2": "List_variant-2__MGZhY", "variant-3": "List_variant-3__MmJkZ" };
|
|
30610
30612
|
|
|
30611
30613
|
// src/components/List.tsx
|
|
30612
30614
|
import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
@@ -30638,7 +30640,13 @@ function List({
|
|
|
30638
30640
|
}
|
|
30639
30641
|
);
|
|
30640
30642
|
}
|
|
30641
|
-
function ListItem({
|
|
30643
|
+
function ListItem({
|
|
30644
|
+
id,
|
|
30645
|
+
children,
|
|
30646
|
+
className,
|
|
30647
|
+
showCheckmark = true,
|
|
30648
|
+
...props
|
|
30649
|
+
}) {
|
|
30642
30650
|
return /* @__PURE__ */ jsxs21(
|
|
30643
30651
|
$eed445e0843c11d0$export$a11e76429ed99b4,
|
|
30644
30652
|
{
|
|
@@ -30648,7 +30656,7 @@ function ListItem({ id, children, className, ...props }) {
|
|
|
30648
30656
|
textValue: typeof children === "string" ? children : id?.toString(),
|
|
30649
30657
|
children: [
|
|
30650
30658
|
children,
|
|
30651
|
-
/* @__PURE__ */ jsx42("div", { "aria-hidden": "true", className: List_default.check, children: /* @__PURE__ */ jsx42(Icon, { children: /* @__PURE__ */ jsx42(Icons.Check, {}) }) })
|
|
30659
|
+
showCheckmark && /* @__PURE__ */ jsx42("div", { "aria-hidden": "true", className: List_default.check, children: /* @__PURE__ */ jsx42(Icon, { children: /* @__PURE__ */ jsx42(Icons.Check, {}) }) })
|
|
30652
30660
|
]
|
|
30653
30661
|
}
|
|
30654
30662
|
);
|
|
@@ -30656,12 +30664,7 @@ function ListItem({ id, children, className, ...props }) {
|
|
|
30656
30664
|
function ListSeparator({ className, ...props }) {
|
|
30657
30665
|
return /* @__PURE__ */ jsx42($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames32.default)(List_default.separator, className) });
|
|
30658
30666
|
}
|
|
30659
|
-
function ListSection({
|
|
30660
|
-
title,
|
|
30661
|
-
className,
|
|
30662
|
-
children,
|
|
30663
|
-
...props
|
|
30664
|
-
}) {
|
|
30667
|
+
function ListSection({ title, className, children, ...props }) {
|
|
30665
30668
|
return /* @__PURE__ */ jsxs21($eed445e0843c11d0$export$dca12b0bb56e4fc, { ...props, className: (0, import_classnames32.default)(List_default.section, className), children: [
|
|
30666
30669
|
title && /* @__PURE__ */ jsx42($72a5793c14baf454$export$8b251419efc915eb, { className: List_default.header, children: title }),
|
|
30667
30670
|
children
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -4271,25 +4271,24 @@ body a.Button_button__NDYwM {
|
|
|
4271
4271
|
}
|
|
4272
4272
|
|
|
4273
4273
|
/* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
|
|
4274
|
-
.
|
|
4274
|
+
.List_list__ZDQ2Z {
|
|
4275
4275
|
display: grid;
|
|
4276
|
-
min-width: 100px;
|
|
4277
4276
|
outline: none;
|
|
4278
4277
|
overflow: auto;
|
|
4279
4278
|
gap: var(--spacing-1);
|
|
4280
4279
|
}
|
|
4281
|
-
.
|
|
4280
|
+
.List_separator__ZTZiM {
|
|
4282
4281
|
border-bottom: var(--border);
|
|
4283
4282
|
}
|
|
4284
|
-
.
|
|
4283
|
+
.List_section__ZTliN:not(:last-child) {
|
|
4285
4284
|
margin-bottom: var(--spacing-4);
|
|
4286
4285
|
}
|
|
4287
|
-
.
|
|
4286
|
+
.List_header__YWIzN {
|
|
4288
4287
|
font-size: var(--font-size-2);
|
|
4289
4288
|
font-weight: var(--font-weight-bold);
|
|
4290
4289
|
padding: var(--padding);
|
|
4291
4290
|
}
|
|
4292
|
-
.
|
|
4291
|
+
.List_item__YmJhM {
|
|
4293
4292
|
display: flex;
|
|
4294
4293
|
align-items: center;
|
|
4295
4294
|
justify-content: space-between;
|
|
@@ -4302,43 +4301,43 @@ body a.Button_button__NDYwM {
|
|
|
4302
4301
|
outline: none;
|
|
4303
4302
|
border-radius: var(--border-radius);
|
|
4304
4303
|
}
|
|
4305
|
-
.
|
|
4304
|
+
.List_item__YmJhM[data-disabled] {
|
|
4306
4305
|
color: var(--font-color-disabled);
|
|
4307
4306
|
}
|
|
4308
|
-
.
|
|
4309
|
-
.
|
|
4307
|
+
.List_item__YmJhM[data-focus],
|
|
4308
|
+
.List_item__YmJhM[data-focus-visible] {
|
|
4310
4309
|
background: var(--highlight-color);
|
|
4311
4310
|
}
|
|
4312
|
-
.
|
|
4311
|
+
.List_item__YmJhM:hover {
|
|
4313
4312
|
background: var(--highlight-color);
|
|
4314
4313
|
}
|
|
4315
|
-
.
|
|
4314
|
+
.List_item__YmJhM[data-selected] {
|
|
4316
4315
|
font-weight: bold;
|
|
4317
|
-
& .
|
|
4316
|
+
& .List_check__ZTc4Z {
|
|
4318
4317
|
display: flex;
|
|
4319
4318
|
justify-content: flex-end;
|
|
4320
4319
|
flex: 1;
|
|
4321
4320
|
}
|
|
4322
4321
|
}
|
|
4323
|
-
.List_variant-
|
|
4324
|
-
& .
|
|
4325
|
-
.
|
|
4322
|
+
.List_variant-1__NWM2N {
|
|
4323
|
+
& .List_item__YmJhM:hover,
|
|
4324
|
+
.List_item__YmJhM[data-selected] {
|
|
4326
4325
|
background: var(--base-color-2);
|
|
4327
4326
|
}
|
|
4328
4327
|
}
|
|
4329
|
-
.List_variant-
|
|
4330
|
-
& .
|
|
4331
|
-
.
|
|
4328
|
+
.List_variant-2__MGZhY {
|
|
4329
|
+
& .List_item__YmJhM:hover,
|
|
4330
|
+
.List_item__YmJhM[data-selected] {
|
|
4332
4331
|
background: var(--base-color-3);
|
|
4333
4332
|
}
|
|
4334
4333
|
}
|
|
4335
|
-
.List_variant-
|
|
4336
|
-
& .
|
|
4337
|
-
.
|
|
4334
|
+
.List_variant-3__MmJkZ {
|
|
4335
|
+
& .List_item__YmJhM:hover,
|
|
4336
|
+
.List_item__YmJhM[data-selected] {
|
|
4338
4337
|
background: var(--base-color-4);
|
|
4339
4338
|
}
|
|
4340
4339
|
}
|
|
4341
|
-
.
|
|
4340
|
+
.List_check__ZTc4Z {
|
|
4342
4341
|
display: none;
|
|
4343
4342
|
}
|
|
4344
4343
|
|