@coveord/plasma-mantine 56.13.0 → 56.14.0

package/dist/esm/styles/RadioCard.module.css

@@ -17,6 +17,7 @@
 
     &[disabled] {
         pointer-events: none;
+        border-color: var(--mantine-color-default-border);
 
         .title {
             color: var(--mantine-color-disabled-color);
@@ -26,6 +27,24 @@
             color: var(--mantine-color-disabled-color);
         }
     }
+
+    &[readonly] {
+        pointer-events: none;
+        border-color: var(--mantine-color-default-border);
+
+        & .indicator {
+            border-color: var(--mantine-color-default-border);
+
+            &[data-checked] {
+                background-color: var(--coveo-color-bg-readonly);
+                color: var(--coveo-color-text-readonly);
+
+                & > svg {
+                    color: var(--coveo-color-text-readonly);
+                }
+            }
+        }
+    }
 }
 
 .container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "56.13.0",
+  "version": "56.14.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

package/src/components/Anchor/Anchor.ts

@@ -1,8 +1,12 @@
+import {Anchor} from '@mantine/core';
+
+Anchor.displayName = 'Anchor';
+
 export {
     Anchor,
-    type AnchorStylesNames,
+    type AnchorCssVariables,
     type AnchorFactory,
     type AnchorProps,
-    type AnchorCssVariables,
+    type AnchorStylesNames,
     type AnchorVariant,
 } from '@mantine/core';

package/src/components/Breadcrumbs/Breadcrumbs.ts

@@ -1 +1,5 @@
+import {Breadcrumbs} from '@mantine/core';
+
+Breadcrumbs.displayName = 'Breadcrumbs';
+
 export {Breadcrumbs, type BreadcrumbsFactory, type BreadcrumbsProps} from '@mantine/core';

package/src/components/Checkbox/Checkbox.ts

@@ -1 +1,4 @@
+import {Checkbox} from '@mantine/core';
+Checkbox.displayName = 'Checkbox';
+
 export {Checkbox, type CheckboxFactory, type CheckboxProps} from '@mantine/core';

package/src/components/CloseButton/CloseButton.ts

@@ -1 +1,4 @@
+import {CloseButton} from '@mantine/core';
+CloseButton.displayName = 'CloseButton';
+
 export {CloseButton, type CloseButtonFactory, type CloseButtonProps} from '@mantine/core';

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -34,7 +34,8 @@ const DATE_RANGE_SERIALIZATION = serialization({
 export type DateRangePickerStylesNames = 'input';
 
 export interface DateRangePickerProps
-    extends BoxProps,
+    extends
+        BoxProps,
         Pick<DateRangePickerInlineCalendarProps, 'presets' | 'rangeCalendarProps' | 'startProps' | 'endProps'>,
         Pick<PopoverProps, 'opened' | 'defaultOpened'>,
         StylesApiProps<DateRangePickerFactory> {
@@ -86,7 +87,7 @@ export interface DateRangePickerProps
 
 export type DateRangePickerFactory = Factory<{
     props: DateRangePickerProps;
-    ref: HTMLDivElement;
+    ref: HTMLButtonElement;
     stylesNames: DateRangePickerStylesNames;
 }>;
 
@@ -95,7 +96,7 @@ const defaultProps: Partial<DateRangePickerProps> = {
     formatter: (time) => dayjs(time).format('MMM D, YYYY'),
 };
 
-export const DateRangePicker = factory<DateRangePickerFactory>((props: DateRangePickerProps) => {
+export const DateRangePicker = factory<DateRangePickerFactory>((props: DateRangePickerProps, ref) => {
     const {
         defaultValue,
         value,
@@ -174,6 +175,7 @@ export const DateRangePicker = factory<DateRangePickerFactory>((props: DateRange
         <Popover opened={_opened} onChange={setOpened}>
             <Popover.Target>
                 <InputBase
+                    ref={ref}
                     component="button"
                     leftSection={<IconCalendar height={16} />}
                     onClick={handleClick}

package/src/components/Flex/Flex.ts

@@ -1 +1,5 @@
+import {Flex} from '@mantine/core';
+
+Flex.displayName = 'Flex';
+
 export {Flex, type FlexFactory, type FlexProps} from '@mantine/core';

package/src/components/Group/Group.ts

@@ -1 +1,5 @@
+import {Group} from '@mantine/core';
+
+Group.displayName = 'Group';
+
 export {Group, type GroupFactory, type GroupProps} from '@mantine/core';

package/src/components/Header/Header.tsx

@@ -41,7 +41,8 @@ export type HeaderStyleNames =
     | HeaderRightStyleNames;
 
 export interface HeaderProps
-    extends StylesApiProps<HeaderFactory>,
+    extends
+        StylesApiProps<HeaderFactory>,
         Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'variant' | 'attributes'> {
     /**
      * The description text displayed inside the header underneath the title
@@ -142,7 +143,11 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
                         {otherChildren}
                         {docAnchor}
                     </Title>
-                    <Text {...getStyles('description', stylesApiProps)} size={variant === 'primary' ? 'md' : 'sm'}>
+                    <Text
+                        component="div"
+                        {...getStyles('description', stylesApiProps)}
+                        size={variant === 'primary' ? 'md' : 'sm'}
+                    >
                         {description}
                     </Text>
                 </Stack>

package/src/components/Kbd/Kbd.ts

@@ -1 +1,5 @@
+import {Kbd} from '@mantine/core';
+
+Kbd.displayName = 'Kbd';
+
 export {Kbd, type KbdFactory, type KbdProps} from '@mantine/core';

package/src/components/Loader/Loader.ts

@@ -1 +1,5 @@
+import {Loader} from '@mantine/core';
+
+Loader.displayName = 'Loader';
+
 export {Loader, type LoaderFactory, type LoaderProps} from '@mantine/core';

package/src/components/Notification/Notification.ts

@@ -1 +1,5 @@
+import {Notification} from '@mantine/core';
+
+Notification.displayName = 'Notification';
+
 export {Notification, type NotificationFactory, type NotificationProps} from '@mantine/core';

package/src/components/Pagination/Pagination.ts

@@ -1 +1,5 @@
+import {Pagination} from '@mantine/core';
+
+Pagination.displayName = 'Pagination';
+
 export {Pagination, type PaginationFactory, type PaginationProps} from '@mantine/core';

package/src/components/Pill/Pill.ts

@@ -1 +1,5 @@
+import {Pill} from '@mantine/core';
+
+Pill.displayName = 'Pill';
+
 export {Pill, type PillFactory, type PillProps} from '@mantine/core';

package/src/components/Progress/Progress.ts

@@ -1 +1,5 @@
+import {Progress} from '@mantine/core';
+
+Progress.displayName = 'Progress';
+
 export {Progress, type ProgressFactory, type ProgressProps} from '@mantine/core';

package/src/components/Radio/Radio.ts

@@ -1 +1,6 @@
+import {Radio} from '@mantine/core';
+
+Radio.displayName = 'Radio';
+Radio.Group.displayName = 'Radio.Group';
+
 export {Radio, type RadioFactory, type RadioProps} from '@mantine/core';

package/src/components/RadioCard/RadioCard.tsx

@@ -33,6 +33,10 @@ export type RadioCardProps = MantineRadioCardProps &
          * The description of the card. Appears under the title.
          */
         description?: ReactNode;
+        /**
+         * If true, the radio card will be displayed in a read-only state.
+         */
+        readOnly?: boolean;
     };
 
 const defaultProps: Partial<RadioCardProps> = {};
@@ -58,6 +62,7 @@ export const RadioCard = factory<RadioCardFactory>((_props, ref) => {
         <Radio.Card
             ref={ref}
             disabled={disabled}
+            readOnly={_props.readOnly}
             {...getStyles('card', {className, style, classNames, styles})}
             {...others}
         >
@@ -71,3 +76,4 @@ export const RadioCard = factory<RadioCardFactory>((_props, ref) => {
         </Radio.Card>
     );
 });
+RadioCard.displayName = 'RadioCard';

package/src/components/Slider/Slider.ts

@@ -1 +1,5 @@
+import {Slider} from '@mantine/core';
+
+Slider.displayName = 'Slider';
+
 export {Slider, type SliderFactory, type SliderProps} from '@mantine/core';

package/src/components/Stack/Stack.ts

@@ -1 +1,5 @@
+import {Stack} from '@mantine/core';
+
+Stack.displayName = 'Stack';
+
 export {Stack, type StackFactory, type StackProps} from '@mantine/core';

package/src/components/Switch/Switch.ts

@@ -1 +1,6 @@
+import {Switch} from '@mantine/core';
+
+Switch.displayName = 'Switch';
+Switch.Group.displayName = 'Switch.Group';
+
 export {Switch, type SwitchFactory, type SwitchProps} from '@mantine/core';

package/src/components/Text/Text.ts

@@ -1 +1,5 @@
+import {Text} from '@mantine/core';
+
+Text.displayName = 'Text';
+
 export {Text, type TextFactory, type TextProps} from '@mantine/core';

package/src/styles/RadioCard.module.css

@@ -17,6 +17,7 @@
 
     &[disabled] {
         pointer-events: none;
+        border-color: var(--mantine-color-default-border);
 
         .title {
             color: var(--mantine-color-disabled-color);
@@ -26,6 +27,24 @@
             color: var(--mantine-color-disabled-color);
         }
     }
+
+    &[readonly] {
+        pointer-events: none;
+        border-color: var(--mantine-color-default-border);
+
+        & .indicator {
+            border-color: var(--mantine-color-default-border);
+
+            &[data-checked] {
+                background-color: var(--coveo-color-bg-readonly);
+                color: var(--coveo-color-text-readonly);
+
+                & > svg {
+                    color: var(--coveo-color-text-readonly);
+                }
+            }
+        }
+    }
 }
 
 .container {