@eightshift/ui-components 5.1.2 → 5.1.4
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 +3 -6
- package/dist/assets/style-admin.css +184 -69
- package/dist/assets/style-editor.css +184 -69
- package/dist/assets/style.css +184 -69
- package/dist/components/notice/notice.js +33 -33
- package/dist/components/repeater/repeater-item.js +2 -2
- package/dist/components/repeater/repeater.js +5 -2
- package/dist/components/select/v2/async-select.js +6 -4
- package/dist/components/select/v2/single-select.js +1 -0
- package/dist/components/tabs/tabs.js +12 -9
- package/dist/icons/icons.js +6 -6
- package/package.json +1 -1
|
@@ -443,7 +443,7 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
|
|
|
443
443
|
*
|
|
444
444
|
* @returns {JSX.Element} The Tabs component.
|
|
445
445
|
*
|
|
446
|
-
* @typedef {'underline' | 'pill' | 'pillInverse' | 'pillCompact' | 'pillCompactInverse'} TabsType
|
|
446
|
+
* @typedef {'underline' | 'pill' | 'pillInverse' | 'pillCompact' | 'pillCompactInverse' | 'pillOutline' | 'pillCompactOutline'} TabsType
|
|
447
447
|
*
|
|
448
448
|
* @example
|
|
449
449
|
* <Tabs>
|
|
@@ -592,8 +592,8 @@ const Tab = (props) => {
|
|
|
592
592
|
"es:group es:flex es:items-center es:gap-1.5 es:relative es:shrink-0",
|
|
593
593
|
"es:select-none es:text-sm es:transition es:not-disabled:cursor-pointer",
|
|
594
594
|
"es:any-focus:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
|
|
595
|
-
!(type === "pillCompact" || type === "pillCompactInverse") && "es:min-h-9.5",
|
|
596
|
-
isParentVertical && (type === "pillCompact" || type === "pillCompactInverse") && "es:min-h-8",
|
|
595
|
+
!(type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:min-h-9.5",
|
|
596
|
+
isParentVertical && (type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:min-h-8",
|
|
597
597
|
invisible && "es:hidden",
|
|
598
598
|
className
|
|
599
599
|
],
|
|
@@ -601,10 +601,12 @@ const Tab = (props) => {
|
|
|
601
601
|
variants: {
|
|
602
602
|
type: {
|
|
603
603
|
underline: "es:disabled:text-secondary-400 es:selected:text-accent-950",
|
|
604
|
-
pill: "es:font-[450] es:border es:border-transparent es:px-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
604
|
+
pill: "es:font-[450] es:border es:border-transparent es:px-2.5 es:py-0.25 es:rounded-10 es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-gradient-to-br es:selected:from-accent-400/10 es:selected:to-accent-400/20 es:selected:border-accent-400/10 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
|
|
605
|
+
pillOutline: "es:font-[450] es:border es:border-transparent es:selected:border-accent-500 es:px-2.5 es:py-0.25 es:rounded-10 es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-700 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
|
|
606
|
+
pillInverse: "es:font-[450] es:border es:border-transparent es:px-2.5 es:py-0.25 es:rounded-10 es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-gradient-to-br es:selected:from-accent-500 es:selected:to-accent-600 es:selected:border-accent-600 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
|
|
607
|
+
pillCompact: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-gradient-to-br es:selected:from-accent-400/15 es:selected:to-accent-400/20 es:selected:border-accent-400/10 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
|
|
608
|
+
pillCompactInverse: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-gradient-to-br es:selected:from-accent-500 es:selected:to-accent-600 es:selected:border-accent-600 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
|
|
609
|
+
pillCompactOutline: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:selected:border-accent-500 es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-700 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75"
|
|
608
610
|
}
|
|
609
611
|
},
|
|
610
612
|
compoundVariants: [
|
|
@@ -645,7 +647,7 @@ const Tab = (props) => {
|
|
|
645
647
|
label: label ?? children,
|
|
646
648
|
subtitle,
|
|
647
649
|
noColor: true,
|
|
648
|
-
iconClassName: clsx((type === "pillCompact" || type === "pillCompactInverse") && "es:icon:size-4!")
|
|
650
|
+
iconClassName: clsx((type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:icon:size-4!")
|
|
649
651
|
}
|
|
650
652
|
),
|
|
651
653
|
!(icon || subtitle) && (label ?? children),
|
|
@@ -659,7 +661,8 @@ const Tab = (props) => {
|
|
|
659
661
|
type === "pillInverse" && "es:bg-secondary-100 es:group-selected:bg-accent-50 es:group-selected:text-accent-900",
|
|
660
662
|
type === "pillCompact" && "es:bg-secondary-100 es:group-selected:bg-accent-600 es:group-selected:text-white",
|
|
661
663
|
type === "pillCompactInverse" && "es:bg-secondary-100 es:group-selected:bg-accent-50 es:group-selected:text-accent-900",
|
|
662
|
-
(type === "
|
|
664
|
+
(type === "pillOutline" || type === "pillCompactOutline") && "es:bg-secondary-100 es:text-secondary-900 es:group-selected:bg-accent-500 es:group-selected:text-white",
|
|
665
|
+
(type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:[&_svg]:size-4!"
|
|
663
666
|
),
|
|
664
667
|
children: badge
|
|
665
668
|
}
|
package/dist/icons/icons.js
CHANGED
|
@@ -4849,14 +4849,14 @@ const icons = {
|
|
|
4849
4849
|
cy: "8.5",
|
|
4850
4850
|
r: "8.5",
|
|
4851
4851
|
transform: "matrix(1 0 0 -1 1.5 18.5)",
|
|
4852
|
-
stroke: "
|
|
4852
|
+
stroke: "currentColor"
|
|
4853
4853
|
}
|
|
4854
4854
|
),
|
|
4855
4855
|
/* @__PURE__ */ jsx(
|
|
4856
4856
|
"path",
|
|
4857
4857
|
{
|
|
4858
4858
|
d: "M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5",
|
|
4859
|
-
stroke: "
|
|
4859
|
+
stroke: "currentColor",
|
|
4860
4860
|
"stroke-linecap": "round"
|
|
4861
4861
|
}
|
|
4862
4862
|
)
|
|
@@ -8639,7 +8639,7 @@ const icons = {
|
|
|
8639
8639
|
"path",
|
|
8640
8640
|
{
|
|
8641
8641
|
d: "M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19ZM10 14.75C9.58579 14.75 9.25 14.4142 9.25 14V10.75H6C5.58579 10.75 5.25 10.4142 5.25 10C5.25 9.58579 5.58579 9.25 6 9.25H9.25V6C9.25 5.58579 9.58579 5.25 10 5.25C10.4142 5.25 10.75 5.58579 10.75 6V9.25H14C14.4142 9.25 14.75 9.58579 14.75 10C14.75 10.4142 14.4142 10.75 14 10.75H10.75V14C10.75 14.4142 10.4142 14.75 10 14.75Z",
|
|
8642
|
-
fill: "
|
|
8642
|
+
fill: "currentColor"
|
|
8643
8643
|
}
|
|
8644
8644
|
)
|
|
8645
8645
|
}
|
|
@@ -19062,14 +19062,14 @@ const icons = {
|
|
|
19062
19062
|
{
|
|
19063
19063
|
opacity: "0.25",
|
|
19064
19064
|
d: "M8.65836 1.68328L1.08541 16.8292C0.586734 17.8265 1.31198 19 2.42705 19H17.573C18.688 19 19.4133 17.8265 18.9146 16.8292L11.3416 1.68328C10.7889 0.577709 9.21114 0.577712 8.65836 1.68328Z",
|
|
19065
|
-
fill: "
|
|
19065
|
+
fill: "currentColor"
|
|
19066
19066
|
}
|
|
19067
19067
|
),
|
|
19068
19068
|
/* @__PURE__ */ jsx(
|
|
19069
19069
|
"path",
|
|
19070
19070
|
{
|
|
19071
19071
|
d: "M11 7C11.0306 6.73478 10.952 6.48043 10.7639 6.29289C10.5769 6.10536 10.2958 6 10 6C9.70423 6 9.4231 6.10536 9.23608 6.29289C9.04803 6.48043 8.96944 6.73478 9 7C9.01042 7.09167 9.02083 7.18333 9.03125 7.275C9.21875 8.925 9.40625 10.575 9.59375 12.225C9.60417 12.3167 9.61458 12.4083 9.625 12.5C9.63523 12.5888 9.6837 12.674 9.75386 12.7367C9.82435 12.7995 9.91077 12.8348 10 12.8348C10.0892 12.8348 10.1756 12.7995 10.2461 12.7367C10.3163 12.674 10.3648 12.5888 10.375 12.5C10.3854 12.4083 10.3958 12.3167 10.4062 12.225C10.5937 10.575 10.7812 8.925 10.9687 7.275C10.9792 7.18333 10.9896 7.09167 11 7Z",
|
|
19072
|
-
fill: "
|
|
19072
|
+
fill: "currentColor"
|
|
19073
19073
|
}
|
|
19074
19074
|
),
|
|
19075
19075
|
/* @__PURE__ */ jsx(
|
|
@@ -19078,7 +19078,7 @@ const icons = {
|
|
|
19078
19078
|
cx: "10",
|
|
19079
19079
|
cy: "15.5",
|
|
19080
19080
|
r: "1",
|
|
19081
|
-
fill: "
|
|
19081
|
+
fill: "currentColor"
|
|
19082
19082
|
}
|
|
19083
19083
|
)
|
|
19084
19084
|
]
|