@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.5
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/chip/Chip.js +2 -2
- package/dist/cjs/components/chip/Chip.module.css +1 -1
- package/dist/esm/components/chip/Chip.js +2 -2
- package/dist/esm/components/chip/Chip.module.css +1 -1
- package/dist/types/overlays/modal/Modal.d.ts +1 -1
- package/package.json +3 -3
- package/src/components/chip/Chip.module.css +1 -1
- package/src/components/chip/Chip.tsx +2 -4
- package/src/overlays/modal/Modal.tsx +1 -1
|
@@ -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 text-sm
|
|
69
|
+
className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm 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,
|
|
@@ -80,7 +80,7 @@ var Chip = function Chip(_ref) {
|
|
|
80
80
|
color: iconColor,
|
|
81
81
|
rtlFlip: rtlFlip
|
|
82
82
|
}), children && /*#__PURE__*/jsxRuntime.jsx("label", {
|
|
83
|
-
className: classNames(Chip_module.chipLabel, "
|
|
83
|
+
className: classNames(Chip_module.chipLabel, "truncate"),
|
|
84
84
|
children: children
|
|
85
85
|
}), onRemove && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
86
86
|
role: "none",
|
|
@@ -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);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding
|
|
1
|
+
@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{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))}}}}}
|
|
@@ -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 text-sm
|
|
69
|
+
className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm 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,
|
|
@@ -80,7 +80,7 @@ var Chip = function Chip(_ref) {
|
|
|
80
80
|
color: iconColor,
|
|
81
81
|
rtlFlip: rtlFlip
|
|
82
82
|
}), children && /*#__PURE__*/jsx("label", {
|
|
83
|
-
className: classNames(classes.chipLabel, "
|
|
83
|
+
className: classNames(classes.chipLabel, "truncate"),
|
|
84
84
|
children: children
|
|
85
85
|
}), onRemove && /*#__PURE__*/jsx("span", {
|
|
86
86
|
role: "none",
|
|
@@ -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);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding
|
|
1
|
+
@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{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))}}}}}
|
|
@@ -44,7 +44,7 @@ export interface ModalProps extends AriaProps, TestProps, IconProps, ChildrenPro
|
|
|
44
44
|
/**
|
|
45
45
|
* close handler
|
|
46
46
|
*/
|
|
47
|
-
onClose
|
|
47
|
+
onClose?: (...args: AnyObject) => void;
|
|
48
48
|
/**
|
|
49
49
|
* before close handler, return false to prevent close
|
|
50
50
|
*/
|
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.5",
|
|
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.5",
|
|
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": "7d4a7ed1ea9890652826bef58d01c31280d761c8"
|
|
60
60
|
}
|
|
@@ -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 text-sm
|
|
159
|
+
"select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded",
|
|
160
160
|
rounded && "rounded-full",
|
|
161
161
|
!!onClick && classes.clickable,
|
|
162
162
|
disabled && classes.disabled,
|
|
@@ -178,9 +178,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
|
|
|
178
178
|
/>
|
|
179
179
|
)}
|
|
180
180
|
{children && (
|
|
181
|
-
<label
|
|
182
|
-
className={classNames(classes.chipLabel, "leading-none truncate")}
|
|
183
|
-
>
|
|
181
|
+
<label className={classNames(classes.chipLabel, "truncate")}>
|
|
184
182
|
{children}
|
|
185
183
|
</label>
|
|
186
184
|
)}
|