@uniformdev/design-system 19.179.1-alpha.1 → 19.180.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/esm/index.js +88 -21
- package/dist/index.d.mts +326 -323
- package/dist/index.d.ts +326 -323
- package/dist/index.js +92 -21
- package/package.json +18 -18
package/dist/index.js
CHANGED
|
@@ -1593,12 +1593,16 @@ __export(src_exports, {
|
|
|
1593
1593
|
supports: () => supports,
|
|
1594
1594
|
textInput: () => textInput,
|
|
1595
1595
|
toast: () => import_react_toastify.toast,
|
|
1596
|
+
uniformAiIcon: () => uniformAiIcon,
|
|
1596
1597
|
uniformComponentIcon: () => uniformComponentIcon,
|
|
1597
1598
|
uniformComponentPatternIcon: () => uniformComponentPatternIcon,
|
|
1598
1599
|
uniformCompositionPatternIcon: () => uniformCompositionPatternIcon,
|
|
1600
|
+
uniformConditionalValuesIcon: () => uniformConditionalValuesIcon,
|
|
1599
1601
|
uniformContentTypeIcon: () => uniformContentTypeIcon,
|
|
1600
1602
|
uniformEntryIcon: () => uniformEntryIcon,
|
|
1601
1603
|
uniformEntryPatternIcon: () => uniformEntryPatternIcon,
|
|
1604
|
+
uniformLocaleDisabledIcon: () => uniformLocaleDisabledIcon,
|
|
1605
|
+
uniformLocaleIcon: () => uniformLocaleIcon,
|
|
1602
1606
|
useBreakpoint: () => useBreakpoint,
|
|
1603
1607
|
useCloseCurrentDrawer: () => useCloseCurrentDrawer,
|
|
1604
1608
|
useCurrentDrawer: () => useCurrentDrawer,
|
|
@@ -2512,7 +2516,8 @@ var button = import_react10.css`
|
|
|
2512
2516
|
cursor: pointer;
|
|
2513
2517
|
display: inline-flex;
|
|
2514
2518
|
font-weight: var(--fw-medium);
|
|
2515
|
-
transition:
|
|
2519
|
+
transition:
|
|
2520
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
2516
2521
|
border-color var(--duration-fast) var(--timing-ease-out);
|
|
2517
2522
|
max-width: max-content;
|
|
2518
2523
|
gap: var(--spacing-sm);
|
|
@@ -3299,9 +3304,11 @@ var input = (whiteSpaceWrap) => import_react17.css`
|
|
|
3299
3304
|
width: 100%;
|
|
3300
3305
|
position: relative;
|
|
3301
3306
|
white-space: ${whiteSpaceWrap};
|
|
3302
|
-
transition:
|
|
3307
|
+
transition:
|
|
3308
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
3303
3309
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
3304
|
-
color var(--duration-fast) var(--timing-ease-out),
|
|
3310
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
3311
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
3305
3312
|
|
|
3306
3313
|
&::placeholder {
|
|
3307
3314
|
color: var(--gray-400);
|
|
@@ -3421,7 +3428,8 @@ var toggleInput = import_react17.css`
|
|
|
3421
3428
|
background: var(--white);
|
|
3422
3429
|
width: var(--spacing-md);
|
|
3423
3430
|
height: var(--spacing-md);
|
|
3424
|
-
transition:
|
|
3431
|
+
transition:
|
|
3432
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
3425
3433
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
3426
3434
|
color var(--duration-fast) var(--timing-ease-out);
|
|
3427
3435
|
|
|
@@ -3665,7 +3673,9 @@ var addButton = import_react21.css`
|
|
|
3665
3673
|
cursor: pointer;
|
|
3666
3674
|
display: inline-flex;
|
|
3667
3675
|
padding: 0;
|
|
3668
|
-
transition:
|
|
3676
|
+
transition:
|
|
3677
|
+
transform var(--duration-fast) var(--timing-ease-out),
|
|
3678
|
+
background var(--duration-slow);
|
|
3669
3679
|
transform: scale(0.95);
|
|
3670
3680
|
width: var(--max-size);
|
|
3671
3681
|
height: var(--max-size);
|
|
@@ -4788,10 +4798,37 @@ var customIcons = {
|
|
|
4788
4798
|
// src/components/Icons/systemIcons.tsx
|
|
4789
4799
|
init_emotion_jsx_shim();
|
|
4790
4800
|
var import_all_files2 = require("@react-icons/all-files");
|
|
4801
|
+
var import_CgGlobeAlt2 = require("@react-icons/all-files/cg/CgGlobeAlt");
|
|
4791
4802
|
var import_CgList2 = require("@react-icons/all-files/cg/CgList");
|
|
4792
4803
|
var import_CgPen2 = require("@react-icons/all-files/cg/CgPen");
|
|
4804
|
+
var import_TbBinaryTree2 = require("@react-icons/all-files/tb/TbBinaryTree2");
|
|
4793
4805
|
var import_TbBox = require("@react-icons/all-files/tb/TbBox");
|
|
4794
4806
|
var uniformComponentIcon = import_TbBox.TbBox;
|
|
4807
|
+
var uniformConditionalValuesIcon = import_TbBinaryTree2.TbBinaryTree2;
|
|
4808
|
+
var uniformAiIcon = customIcons["magic-wand"];
|
|
4809
|
+
var uniformLocaleIcon = import_CgGlobeAlt2.CgGlobeAlt;
|
|
4810
|
+
var uniformLocaleDisabledIcon = (0, import_all_files2.GenIcon)({
|
|
4811
|
+
tag: "svg",
|
|
4812
|
+
attr: { fill: "currentColor", viewBox: "0 0 24 24", role: "img" },
|
|
4813
|
+
child: [
|
|
4814
|
+
{
|
|
4815
|
+
tag: "path",
|
|
4816
|
+
attr: {
|
|
4817
|
+
fillRule: "evenodd",
|
|
4818
|
+
d: "M20.123 15.88A9 9 0 0 0 8.12 3.877l2.787 2.787c.03-.073.06-.145.092-.216.294-.661.592-1.073.823-1.292a.988.988 0 0 1 .178-.14.991.991 0 0 1 .178.14c.23.22.528.63.823 1.292.366.825.665 1.901.838 3.148l3.593 3.594a9.739 9.739 0 0 0 1.548-.665 6.968 6.968 0 0 1-.385 1.827l1.528 1.528ZM14.805 5.585c.691 1.53 1.136 3.62 1.19 5.945a9.939 9.939 0 0 0 1.557-.53c.6-.266.994-.536 1.226-.756a7.016 7.016 0 0 0-3.973-4.66ZM3.877 8.12A9 9 0 0 0 15.88 20.123l-2.787-2.787a7.89 7.89 0 0 1-.092.216c-.294.661-.593 1.073-.823 1.292a.996.996 0 0 1-.178.14.99.99 0 0 1-.178-.14c-.23-.22-.529-.63-.823-1.292-.367-.825-.666-1.901-.838-3.148L6.967 11.21a8.334 8.334 0 0 1-.519-.21c-.6-.266-.995-.536-1.226-.756a6.95 6.95 0 0 1 .183-.596L3.877 8.12Zm5.317 10.295c-.577-1.278-.982-2.947-1.131-4.817-1.183-.256-2.22-.624-3.044-1.073a7.004 7.004 0 0 0 4.175 5.89Z",
|
|
4819
|
+
clipRule: "evenodd"
|
|
4820
|
+
},
|
|
4821
|
+
child: []
|
|
4822
|
+
},
|
|
4823
|
+
{
|
|
4824
|
+
tag: "path",
|
|
4825
|
+
attr: {
|
|
4826
|
+
d: "M20.031 20.031a1.5 1.5 0 0 1-2.121 0L3.06 5.182a1.5 1.5 0 0 1 2.122-2.121L20.03 17.91a1.5 1.5 0 0 1 0 2.121Z"
|
|
4827
|
+
},
|
|
4828
|
+
child: []
|
|
4829
|
+
}
|
|
4830
|
+
]
|
|
4831
|
+
});
|
|
4795
4832
|
var uniformComponentPatternIcon = (0, import_all_files2.GenIcon)({
|
|
4796
4833
|
tag: "svg",
|
|
4797
4834
|
attr: {
|
|
@@ -13907,7 +13944,8 @@ var buttonStyle = (bgColor) => import_react32.css`
|
|
|
13907
13944
|
display: block;
|
|
13908
13945
|
font-size: var(--fs-sm);
|
|
13909
13946
|
line-height: 1.5;
|
|
13910
|
-
transition:
|
|
13947
|
+
transition:
|
|
13948
|
+
background-color var(--duration-fast) var(--timing-ease-out),
|
|
13911
13949
|
outline var(--duration-fast) var(--timing-ease-out);
|
|
13912
13950
|
outline: 1px solid transparent;
|
|
13913
13951
|
|
|
@@ -14334,7 +14372,8 @@ var CheckboxWithInfoInput = import_react41.css`
|
|
|
14334
14372
|
border-radius: var(--rounded-sm);
|
|
14335
14373
|
width: calc(var(--spacing-base) - 2px);
|
|
14336
14374
|
height: calc(var(--spacing-base) - 2px);
|
|
14337
|
-
transition:
|
|
14375
|
+
transition:
|
|
14376
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
14338
14377
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
14339
14378
|
color var(--duration-fast) var(--timing-ease-out);
|
|
14340
14379
|
|
|
@@ -15592,7 +15631,8 @@ var ButtonWithMenuContainer = import_react57.css`
|
|
|
15592
15631
|
display: inline-flex;
|
|
15593
15632
|
position: relative;
|
|
15594
15633
|
min-height: 24px;
|
|
15595
|
-
transition:
|
|
15634
|
+
transition:
|
|
15635
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
15596
15636
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
15597
15637
|
background-color var(--duration-fast) var(--timing-ease-out);
|
|
15598
15638
|
|
|
@@ -16596,7 +16636,8 @@ var import_react69 = require("@emotion/react");
|
|
|
16596
16636
|
var ChipContainer = import_react69.css`
|
|
16597
16637
|
border-radius: var(--rounded-full);
|
|
16598
16638
|
display: inline-flex;
|
|
16599
|
-
transition:
|
|
16639
|
+
transition:
|
|
16640
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
16600
16641
|
color var(--duration-fast) var(--timing-ease-out);
|
|
16601
16642
|
position: relative;
|
|
16602
16643
|
|
|
@@ -16876,7 +16917,8 @@ var MultilineChipContainer = import_react70.css`
|
|
|
16876
16917
|
--gradient-rgb: var(--accent-primary-dark-rgb);
|
|
16877
16918
|
--gradient-rgb-hover: var(--accent-primary-dark-hover-rgb);
|
|
16878
16919
|
border-radius: var(--rounded-full);
|
|
16879
|
-
background:
|
|
16920
|
+
background:
|
|
16921
|
+
radial-gradient(
|
|
16880
16922
|
farthest-side at 100%,
|
|
16881
16923
|
rgba(var(--gradient-rgb), 0) 0%,
|
|
16882
16924
|
rgba(var(--gradient-rgb), 0.2) 80%,
|
|
@@ -16909,7 +16951,8 @@ var MultilineChipContainer = import_react70.css`
|
|
|
16909
16951
|
border: none;
|
|
16910
16952
|
&:hover,
|
|
16911
16953
|
&:focus {
|
|
16912
|
-
background:
|
|
16954
|
+
background:
|
|
16955
|
+
radial-gradient(
|
|
16913
16956
|
farthest-side at 100%,
|
|
16914
16957
|
rgba(var(--gradient-rgb-hover), 0) 0%,
|
|
16915
16958
|
rgba(var(--gradient-rgb-hover), 0.2) 80%,
|
|
@@ -16966,17 +17009,19 @@ init_emotion_jsx_shim();
|
|
|
16966
17009
|
// src/components/Counter/Counter.styles.ts
|
|
16967
17010
|
init_emotion_jsx_shim();
|
|
16968
17011
|
var import_react71 = require("@emotion/react");
|
|
16969
|
-
var counterContainer = (bgColor) => import_react71.css`
|
|
17012
|
+
var counterContainer = (bgColor, hasIcon) => import_react71.css`
|
|
16970
17013
|
align-items: center;
|
|
16971
17014
|
border-radius: var(--rounded-full);
|
|
16972
17015
|
border: 1px solid var(--gray-300);
|
|
16973
17016
|
background: ${bgColor};
|
|
16974
|
-
color: var(--typography-base);
|
|
17017
|
+
color: ${bgColor === "var(--accent-dark)" ? "white" : "var(--typography-base)"};
|
|
16975
17018
|
display: inline-flex;
|
|
16976
|
-
|
|
17019
|
+
gap: var(--spacing-xs);
|
|
17020
|
+
font-size: var(--fs-xs);
|
|
16977
17021
|
font-weight: var(--fw-regular);
|
|
16978
17022
|
justify-content: center;
|
|
16979
|
-
|
|
17023
|
+
padding: 4px;
|
|
17024
|
+
width: ${hasIcon ? "auto" : "var(--spacing-base)"};
|
|
16980
17025
|
height: var(--spacing-base);
|
|
16981
17026
|
`;
|
|
16982
17027
|
var counterZeroValue = import_react71.css`
|
|
@@ -17000,7 +17045,13 @@ var counterIcon = import_react71.css`
|
|
|
17000
17045
|
|
|
17001
17046
|
// src/components/Counter/Counter.tsx
|
|
17002
17047
|
var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
|
|
17003
|
-
var Counter = ({
|
|
17048
|
+
var Counter = ({
|
|
17049
|
+
count,
|
|
17050
|
+
bgColor = "transparent",
|
|
17051
|
+
icon,
|
|
17052
|
+
iconColor = "auto",
|
|
17053
|
+
...props
|
|
17054
|
+
}) => {
|
|
17004
17055
|
if (typeof count === "undefined") {
|
|
17005
17056
|
return null;
|
|
17006
17057
|
}
|
|
@@ -17009,7 +17060,19 @@ var Counter = ({ count, bgColor = "transparent", ...props }) => {
|
|
|
17009
17060
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
|
|
17010
17061
|
] }) : count;
|
|
17011
17062
|
const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
|
|
17012
|
-
return /* @__PURE__ */ (0, import_jsx_runtime63.
|
|
17063
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { css: counterContainer(bgColor, Boolean(icon)), ...props, children: [
|
|
17064
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
17065
|
+
"span",
|
|
17066
|
+
{
|
|
17067
|
+
css: [
|
|
17068
|
+
iconColor ? functionalColors : void 0,
|
|
17069
|
+
{ color: iconColor ? iconColor === "red" ? "var(--brand-secondary-5)" : iconColor : "inherit" }
|
|
17070
|
+
],
|
|
17071
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { icon, iconColor: "currentColor", size: "0.6rem" })
|
|
17072
|
+
}
|
|
17073
|
+
) : null,
|
|
17074
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: formatCount })
|
|
17075
|
+
] });
|
|
17013
17076
|
};
|
|
17014
17077
|
|
|
17015
17078
|
// src/components/DashedBox/DashedBox.tsx
|
|
@@ -21150,7 +21213,8 @@ var inputIconBtn = import_react130.css`
|
|
|
21150
21213
|
color: var(--gray-500);
|
|
21151
21214
|
background: none;
|
|
21152
21215
|
display: flex;
|
|
21153
|
-
transition:
|
|
21216
|
+
transition:
|
|
21217
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
21154
21218
|
color var(--duration-fast) var(--timing-ease-out);
|
|
21155
21219
|
|
|
21156
21220
|
&:hover,
|
|
@@ -21328,7 +21392,8 @@ var toggleInput2 = import_react131.css`
|
|
|
21328
21392
|
background: var(--white);
|
|
21329
21393
|
width: var(--spacing-base);
|
|
21330
21394
|
height: var(--spacing-base);
|
|
21331
|
-
transition:
|
|
21395
|
+
transition:
|
|
21396
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
21332
21397
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
21333
21398
|
color var(--duration-fast) var(--timing-ease-out);
|
|
21334
21399
|
font-size: var(--fs-sm);
|
|
@@ -21428,7 +21493,8 @@ var dataConnectButton = import_react131.css`
|
|
|
21428
21493
|
display: flex;
|
|
21429
21494
|
padding: var(--spacing-sm);
|
|
21430
21495
|
position: relative;
|
|
21431
|
-
transition:
|
|
21496
|
+
transition:
|
|
21497
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
21432
21498
|
outline-color var(--duration-fast) var(--timing-ease-out),
|
|
21433
21499
|
color var(--duration-fast) var(--timing-ease-out);
|
|
21434
21500
|
width: 100%;
|
|
@@ -24382,7 +24448,8 @@ var SwitchInput = (size) => import_react163.css`
|
|
|
24382
24448
|
width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
24383
24449
|
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
24384
24450
|
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
24385
|
-
transition:
|
|
24451
|
+
transition:
|
|
24452
|
+
transform var(--duration-fast) var(--timing-ease-out),
|
|
24386
24453
|
background-color var(--duration-fast) var(--timing-ease-out),
|
|
24387
24454
|
background-image var(--duration-fast) var(--timing-ease-out);
|
|
24388
24455
|
z-index: var(--z-10);
|
|
@@ -25001,12 +25068,16 @@ var StatusBullet = ({
|
|
|
25001
25068
|
supports,
|
|
25002
25069
|
textInput,
|
|
25003
25070
|
toast,
|
|
25071
|
+
uniformAiIcon,
|
|
25004
25072
|
uniformComponentIcon,
|
|
25005
25073
|
uniformComponentPatternIcon,
|
|
25006
25074
|
uniformCompositionPatternIcon,
|
|
25075
|
+
uniformConditionalValuesIcon,
|
|
25007
25076
|
uniformContentTypeIcon,
|
|
25008
25077
|
uniformEntryIcon,
|
|
25009
25078
|
uniformEntryPatternIcon,
|
|
25079
|
+
uniformLocaleDisabledIcon,
|
|
25080
|
+
uniformLocaleIcon,
|
|
25010
25081
|
useBreakpoint,
|
|
25011
25082
|
useCloseCurrentDrawer,
|
|
25012
25083
|
useCurrentDrawer,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/design-system",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.180.0",
|
|
4
4
|
"description": "Uniform design system components",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
"@emotion/jest": "11.11.0",
|
|
23
23
|
"@storybook/preview-api": "^8.0.10",
|
|
24
24
|
"@storybook/react": "8.0.10",
|
|
25
|
-
"@types/react": "18.
|
|
26
|
-
"@types/react-dom": "18.
|
|
27
|
-
"@uniformdev/canvas": "^19.
|
|
28
|
-
"@uniformdev/richtext": "^19.
|
|
25
|
+
"@types/react": "18.3.3",
|
|
26
|
+
"@types/react-dom": "18.3.0",
|
|
27
|
+
"@uniformdev/canvas": "^19.180.0",
|
|
28
|
+
"@uniformdev/richtext": "^19.180.0",
|
|
29
29
|
"autoprefixer": "10.4.16",
|
|
30
30
|
"hygen": "6.2.11",
|
|
31
31
|
"postcss": "8.4.38",
|
|
32
|
-
"react": "18.
|
|
33
|
-
"react-dom": "18.
|
|
32
|
+
"react": "18.3.1",
|
|
33
|
+
"react-dom": "18.3.1",
|
|
34
34
|
"react-select-event": "^5.5.1",
|
|
35
35
|
"tsup": "8.1.0"
|
|
36
36
|
},
|
|
@@ -43,20 +43,20 @@
|
|
|
43
43
|
"@emotion/css": "^11.11.0",
|
|
44
44
|
"@emotion/react": "11.11.3",
|
|
45
45
|
"@internationalized/date": "^3.5.2",
|
|
46
|
-
"@lexical/code": "0.
|
|
47
|
-
"@lexical/link": "0.
|
|
48
|
-
"@lexical/list": "0.
|
|
49
|
-
"@lexical/markdown": "0.
|
|
50
|
-
"@lexical/react": "0.
|
|
51
|
-
"@lexical/rich-text": "0.
|
|
52
|
-
"@lexical/selection": "0.
|
|
53
|
-
"@lexical/utils": "0.
|
|
46
|
+
"@lexical/code": "0.17.0",
|
|
47
|
+
"@lexical/link": "0.17.0",
|
|
48
|
+
"@lexical/list": "0.17.0",
|
|
49
|
+
"@lexical/markdown": "0.17.0",
|
|
50
|
+
"@lexical/react": "0.17.0",
|
|
51
|
+
"@lexical/rich-text": "0.17.0",
|
|
52
|
+
"@lexical/selection": "0.17.0",
|
|
53
|
+
"@lexical/utils": "0.17.0",
|
|
54
54
|
"@monaco-editor/react": "4.6.0",
|
|
55
55
|
"@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.2.1/react-icons-all-files-5.2.1.tgz",
|
|
56
56
|
"fast-equals": "^5.0.1",
|
|
57
|
-
"lexical": "0.
|
|
57
|
+
"lexical": "0.17.0",
|
|
58
58
|
"lottie-react": "^2.3.1",
|
|
59
|
-
"monaco-editor": "0.
|
|
59
|
+
"monaco-editor": "0.50.0",
|
|
60
60
|
"react-aria-components": "^1.1.1",
|
|
61
61
|
"react-hotkeys-hook": "4.5.0",
|
|
62
62
|
"react-paginate": "8.2.0",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "309600b88571d0ffb2b80d7d2c27b7aa3e5ae72b"
|
|
80
80
|
}
|