@react-fabric/core 1.0.0-beta.18 → 1.0.0-beta.19
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/cjs/components/badge/Badge.js +1 -1
- package/dist/cjs/components/chip/Chip.js +1 -1
- package/dist/cjs/components/chip/Chip.module.css +1 -1
- package/dist/cjs/components/icon/Icon.module.css +1 -1
- package/dist/cjs/components/tabpanel/TabPanel.js +1 -1
- package/dist/cjs/components/tabpanel/TabPanel.module.css +1 -1
- package/dist/cjs/core/section/Section.module.css +1 -1
- package/dist/esm/components/badge/Badge.js +1 -1
- package/dist/esm/components/chip/Chip.js +1 -1
- package/dist/esm/components/chip/Chip.module.css +1 -1
- package/dist/esm/components/icon/Icon.module.css +1 -1
- package/dist/esm/components/tabpanel/TabPanel.js +1 -1
- package/dist/esm/components/tabpanel/TabPanel.module.css +1 -1
- package/dist/esm/core/section/Section.module.css +1 -1
- package/package.json +3 -3
- package/src/components/badge/Badge.tsx +1 -1
- package/src/components/chip/Chip.module.css +1 -1
- package/src/components/chip/Chip.tsx +1 -1
- package/src/components/icon/Icon.module.css +0 -1
- package/src/components/tabpanel/TabPanel.module.css +0 -4
- package/src/components/tabpanel/TabPanel.tsx +1 -0
- package/src/core/section/Section.module.css +1 -1
|
@@ -67,7 +67,7 @@ var Badge = function Badge(_ref) {
|
|
|
67
67
|
"data-ref": "badge",
|
|
68
68
|
"data-ping": ping,
|
|
69
69
|
"data-placement": placement,
|
|
70
|
-
className: classNames(Badge_module.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-
|
|
70
|
+
className: classNames(Badge_module.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
|
|
71
71
|
children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
72
72
|
className: "p-1",
|
|
73
73
|
children: label
|
|
@@ -66,7 +66,7 @@ var Chip = function Chip(_ref) {
|
|
|
66
66
|
return /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
|
|
67
67
|
ref: ref,
|
|
68
68
|
role: "term",
|
|
69
|
-
className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
|
|
69
|
+
className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
|
|
70
70
|
style: styles,
|
|
71
71
|
"data-variant": variant,
|
|
72
72
|
"data-inner-clickable": !!onClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.
|
|
1
|
+
@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.5;padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{
|
|
1
|
+
@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}
|
|
@@ -62,7 +62,7 @@ var TabPanel = function TabPanel(_ref) {
|
|
|
62
62
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
63
63
|
className: classNames(TabPanel_module.tabHeader, headerClassName, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-nowrap overflow-hidden items-center"),
|
|
64
64
|
children: [prepend, /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
65
|
-
className: classNames(TabPanel_module.tabList, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-1 flex-nowrap overflow-auto scroll-thin"),
|
|
65
|
+
className: classNames(TabPanel_module.tabList, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", ["bottom", "end"].includes(orientation) ? "self-start" : "self-end", "flex flex-1 flex-nowrap overflow-auto scroll-thin"),
|
|
66
66
|
style: {
|
|
67
67
|
gap: gap
|
|
68
68
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr
|
|
1
|
+
@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.section{grid-template:"head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
|
|
1
|
+
@layer comp{.section{grid-template:". loader ." auto "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
|
|
@@ -67,7 +67,7 @@ var Badge = function Badge(_ref) {
|
|
|
67
67
|
"data-ref": "badge",
|
|
68
68
|
"data-ping": ping,
|
|
69
69
|
"data-placement": placement,
|
|
70
|
-
className: classNames(classes.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-
|
|
70
|
+
className: classNames(classes.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
|
|
71
71
|
children: [label && /*#__PURE__*/jsx("span", {
|
|
72
72
|
className: "p-1",
|
|
73
73
|
children: label
|
|
@@ -66,7 +66,7 @@ var Chip = function Chip(_ref) {
|
|
|
66
66
|
return /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
|
|
67
67
|
ref: ref,
|
|
68
68
|
role: "term",
|
|
69
|
-
className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
|
|
69
|
+
className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
|
|
70
70
|
style: styles,
|
|
71
71
|
"data-variant": variant,
|
|
72
72
|
"data-inner-clickable": !!onClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.
|
|
1
|
+
@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.5;padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{
|
|
1
|
+
@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}
|
|
@@ -62,7 +62,7 @@ var TabPanel = function TabPanel(_ref) {
|
|
|
62
62
|
children: [/*#__PURE__*/jsxs("div", {
|
|
63
63
|
className: classNames(classes.tabHeader, headerClassName, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-nowrap overflow-hidden items-center"),
|
|
64
64
|
children: [prepend, /*#__PURE__*/jsx("div", {
|
|
65
|
-
className: classNames(classes.tabList, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-1 flex-nowrap overflow-auto scroll-thin"),
|
|
65
|
+
className: classNames(classes.tabList, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", ["bottom", "end"].includes(orientation) ? "self-start" : "self-end", "flex flex-1 flex-nowrap overflow-auto scroll-thin"),
|
|
66
66
|
style: {
|
|
67
67
|
gap: gap
|
|
68
68
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr
|
|
1
|
+
@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.section{grid-template:"head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
|
|
1
|
+
@layer comp{.section{grid-template:". loader ." auto "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-fabric/core",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.19",
|
|
4
4
|
"description": "RUF: Core package",
|
|
5
5
|
"author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@floating-ui/react": "^0.26.24",
|
|
39
|
-
"@react-fabric/utilities": "^1.0.0-beta.
|
|
39
|
+
"@react-fabric/utilities": "^1.0.0-beta.19",
|
|
40
40
|
"@tailwindcss/container-queries": "^0.1.1",
|
|
41
41
|
"@tailwindcss/forms": "^0.5.7",
|
|
42
42
|
"@tailwindcss/typography": "^0.5.13",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"node": ">=18.12.0",
|
|
57
57
|
"npm": ">=8.19.0"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "1757660f7f30590d1bf5c7f2bd3526f6052dccd5"
|
|
60
60
|
}
|
|
@@ -142,7 +142,7 @@ export const Badge = ({
|
|
|
142
142
|
className={classNames(
|
|
143
143
|
classes.badge,
|
|
144
144
|
className,
|
|
145
|
-
"inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-
|
|
145
|
+
"inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none",
|
|
146
146
|
(forButton && !placement) || inline ? "relative" : "absolute",
|
|
147
147
|
)}
|
|
148
148
|
>
|
|
@@ -156,7 +156,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
|
|
|
156
156
|
classes.chip,
|
|
157
157
|
className,
|
|
158
158
|
color && getColorClass(color),
|
|
159
|
-
"select-none inline-flex flex-nowrap items-center max-w-72 rounded",
|
|
159
|
+
"select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded",
|
|
160
160
|
rounded && "rounded-full",
|
|
161
161
|
!!onClick && classes.clickable,
|
|
162
162
|
disabled && classes.disabled,
|
|
@@ -87,7 +87,6 @@
|
|
|
87
87
|
|
|
88
88
|
&[data-orientation="top"] {
|
|
89
89
|
grid-template: "tablist" auto "content" 1fr / 1fr;
|
|
90
|
-
padding-inline: 2px;
|
|
91
90
|
|
|
92
91
|
.tabHeader {
|
|
93
92
|
box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
|
|
@@ -96,7 +95,6 @@
|
|
|
96
95
|
|
|
97
96
|
&[data-orientation="bottom"] {
|
|
98
97
|
grid-template: "content" 1fr "tablist" auto / 1fr;
|
|
99
|
-
padding-inline: 2px;
|
|
100
98
|
|
|
101
99
|
.tabHeader {
|
|
102
100
|
margin-top: 1px;
|
|
@@ -106,7 +104,6 @@
|
|
|
106
104
|
|
|
107
105
|
&[data-orientation="start"] {
|
|
108
106
|
grid-template: "tablist content" 1fr / auto 1fr;
|
|
109
|
-
padding-block: 2px;
|
|
110
107
|
|
|
111
108
|
.tabHeader {
|
|
112
109
|
box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
|
|
@@ -115,7 +112,6 @@
|
|
|
115
112
|
|
|
116
113
|
&[data-orientation="end"] {
|
|
117
114
|
grid-template: "content tablist" 1fr / 1fr auto;
|
|
118
|
-
padding-block: 2px;
|
|
119
115
|
|
|
120
116
|
.tabHeader {
|
|
121
117
|
box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
|
|
@@ -156,6 +156,7 @@ export const TabPanel = ({
|
|
|
156
156
|
classes.tabList,
|
|
157
157
|
justify && `justify-${justify}`,
|
|
158
158
|
["start", "end"].includes(orientation) && "flex-col",
|
|
159
|
+
["bottom", "end"].includes(orientation) ? "self-start" : "self-end",
|
|
159
160
|
"flex flex-1 flex-nowrap overflow-auto scroll-thin",
|
|
160
161
|
)}
|
|
161
162
|
style={{ gap }}
|
|
@@ -23,6 +23,6 @@
|
|
|
23
23
|
|
|
24
24
|
@layer comp {
|
|
25
25
|
.section {
|
|
26
|
-
grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
|
|
26
|
+
grid-template: ". loader ." auto "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
|
|
27
27
|
}
|
|
28
28
|
}
|