@obosbbl/grunnmuren-react 3.0.1 → 3.0.2
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.mjs +28 -12
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -174,7 +174,7 @@ function AccordionItem(props) {
|
|
|
174
174
|
_innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
|
|
175
175
|
"aria-controls": contentId,
|
|
176
176
|
"aria-expanded": isOpen,
|
|
177
|
-
// Use outline with offset as focus indicator, this does not cover the left
|
|
177
|
+
// Use outline with offset as focus indicator, this does not cover the left sky border on the expanded content and works with or without a background color on the accordion container
|
|
178
178
|
className: "flex min-h-[44px] w-full cursor-pointer items-center justify-between gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus focus-visible:outline-focus-inset",
|
|
179
179
|
id: buttonId,
|
|
180
180
|
onClick: handleOpenChange,
|
|
@@ -192,7 +192,7 @@ function AccordionItem(props) {
|
|
|
192
192
|
ContentContext,
|
|
193
193
|
{
|
|
194
194
|
className: // Uses pseudo element for vertical padding, since that doesn't affect the height when the accordion is closed
|
|
195
|
-
'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-
|
|
195
|
+
'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-sky border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
|
|
196
196
|
role: 'region',
|
|
197
197
|
inert: !isOpen,
|
|
198
198
|
'aria-labelledby': buttonId,
|
|
@@ -481,17 +481,22 @@ function CheckmarkBox() {
|
|
|
481
481
|
// TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
|
|
482
482
|
'mt-[calc((1em_*_1.75_-_24px)_/_2)] h-[24px] w-[24px]',
|
|
483
483
|
// selected
|
|
484
|
-
'group-data-selected
|
|
484
|
+
'group-data-selected:group-not-data-hovered:group-not-data-invalid:border-blue group-data-selected:group-not-data-hovered:group-not-data-invalid:bg-blue',
|
|
485
|
+
'group-data-selected:group-not-data-hovered:group-data-invalid:border-red group-data-selected:group-not-data-hovered:group-data-invalid:bg-red',
|
|
485
486
|
// focus
|
|
486
487
|
'group-data-focus-visible:outline-focus-offset',
|
|
487
488
|
// hovered
|
|
488
|
-
'group-data-hovered:group-data-invalid:
|
|
489
|
+
'group-data-hovered:group-data-invalid:bg-red-light',
|
|
490
|
+
'group-data-hovered:border-blue',
|
|
491
|
+
'group-data-hovered:bg-sky',
|
|
492
|
+
'group-data-hovered:group-data-selected:group-not-data-invalid:border-blue-dark',
|
|
493
|
+
'group-data-hovered:group-data-selected:group-not-data-invalid:bg-blue-dark',
|
|
489
494
|
// invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
|
|
490
495
|
// so we use an inner shadow of 1 px instead to pad the actual border
|
|
491
|
-
'group-data-invalid:
|
|
496
|
+
'group-data-invalid:border-red group-data-invalid:shadow-[inset_0_0_0_1px] group-data-invalid:shadow-red'
|
|
492
497
|
]),
|
|
493
498
|
children: /*#__PURE__*/ jsx(Check, {
|
|
494
|
-
className: "h-full w-full opacity-0 group-data-selected:opacity-100"
|
|
499
|
+
className: "h-full w-full opacity-0 group-data-invalid:group-data-hovered:group-data-selected:text-red group-data-selected:opacity-100"
|
|
495
500
|
})
|
|
496
501
|
});
|
|
497
502
|
}
|
|
@@ -725,9 +730,9 @@ const defaultClasses = cx([
|
|
|
725
730
|
// TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
|
|
726
731
|
'before:mt-[calc((1em_*_1.75_-_24px)_/_2)] before:h-[24px] before:w-[24px]',
|
|
727
732
|
// selected
|
|
728
|
-
'data-selected:before:border-black data-selected:before:bg-
|
|
733
|
+
'data-selected:before:border-black data-selected:before:bg-blue data-selected:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
|
|
729
734
|
// hover
|
|
730
|
-
'data-hovered:data-invalid:before:bg-red-light data-hovered:before:border-
|
|
735
|
+
'data-hovered:data-selected:before:border-blue-dark data-hovered:data-invalid:before:bg-red-light data-hovered:data-selected:before:bg-blue-dark data-hovered:before:border-blue data-hovered:before:bg-sky',
|
|
731
736
|
// focus
|
|
732
737
|
'data-focus-visible:before:ring-focus-offset',
|
|
733
738
|
// invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
|
|
@@ -1947,12 +1952,23 @@ const Dialog = ({ className, children, ...restProps })=>{
|
|
|
1947
1952
|
const tagVariants = cva({
|
|
1948
1953
|
base: [
|
|
1949
1954
|
'relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 font-medium text-sm transition-colors duration-200',
|
|
1955
|
+
// Resting
|
|
1956
|
+
'border-2 border-black bg-white text-black',
|
|
1950
1957
|
//Focus
|
|
1951
1958
|
'focus-visible:outline-focus-offset',
|
|
1952
|
-
//
|
|
1953
|
-
'
|
|
1954
|
-
//
|
|
1955
|
-
|
|
1959
|
+
// Hover
|
|
1960
|
+
' data-hovered:bg-sky',
|
|
1961
|
+
// Selected
|
|
1962
|
+
// Allows removing
|
|
1963
|
+
'data-allows-removing:border-transparent',
|
|
1964
|
+
'data-allows-removing:bg-blue',
|
|
1965
|
+
'data-allows-removing:data-hovered:bg-blue-dark',
|
|
1966
|
+
'data-allows-removing:text-white',
|
|
1967
|
+
// Selected
|
|
1968
|
+
'aria-selected:border-transparent',
|
|
1969
|
+
'aria-selected:bg-blue',
|
|
1970
|
+
'aria-selected:data-hovered:bg-blue-dark',
|
|
1971
|
+
'aria-selected:text-white',
|
|
1956
1972
|
//Icons
|
|
1957
1973
|
'[&_svg]:h-4 [&_svg]:w-4'
|
|
1958
1974
|
]
|