@coveord/plasma-mantine 55.3.4-next.0 → 55.4.0

package/dist/esm/components/table/use-url-synced-state.js

@@ -0,0 +1,41 @@
+import { useMemo, useState } from 'react';
+const setSearchParam = (key, value, initial)=>{
+    const url = new URL(window.location.href);
+    if (value === '' || value === initial) {
+        url.searchParams.delete(key);
+    } else {
+        url.searchParams.set(key, value);
+    }
+    window.history.replaceState(null, '', url.toString());
+};
+const getSearchParams = ()=>{
+    const url = new URL(window.location.href);
+    return url.searchParams;
+};
+export const useUrlSyncedState = ({ initialState, serializer, deserializer, sync })=>{
+    const [state, setState] = useState(sync ? deserializer(getSearchParams()) : initialState);
+    const enhancedSetState = useMemo(()=>{
+        if (sync) {
+            const initialSerialized = serializer(initialState).reduce((acc, [key, value])=>{
+                acc[key] = value;
+                return acc;
+            }, {});
+            return (updater)=>{
+                setState((old)=>{
+                    const newValue = updater instanceof Function ? updater(old) : updater;
+                    serializer(newValue).forEach(([key, value])=>setSearchParam(key, value, initialSerialized[key]));
+                    return newValue;
+                });
+            };
+        }
+        return setState;
+    }, [
+        sync
+    ]);
+    return [
+        state,
+        enhancedSetState
+    ];
+};
+
+//# sourceMappingURL=use-url-synced-state.js.map

package/dist/esm/components/table/use-url-synced-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/use-url-synced-state.ts"],"sourcesContent":["import {useMemo, useState} from 'react';\n\nconst setSearchParam = (key: string, value: string, initial: string) => {\n    const url = new URL(window.location.href);\n    if (value === '' || value === initial) {\n        url.searchParams.delete(key);\n    } else {\n        url.searchParams.set(key, value);\n    }\n    window.history.replaceState(null, '', url.toString());\n};\n\nconst getSearchParams = (): URLSearchParams => {\n    const url = new URL(window.location.href);\n    return url.searchParams;\n};\n\nexport interface UseUrlSyncedStateOptions<T> {\n    /**\n     * The initial state\n     */\n    initialState: T;\n    /**\n     * The serializer function is used to determine how the state is translated to url search parameters.\n     * Called each time the state changes.\n     * @param stateValue The new state value to serialize.\n     * @returns A list of [key, value] to set as url search parameters.\n     * @example (filterValue) => [['filter', filterValue]] // ?filter=filterValue\n     */\n    serializer: (stateValue: T) => Array<[string, string]>;\n    /**\n     * The deserializer function is used to determine how the url parameters influence the initial state.\n     * Called only once when initializing the state.\n     * @param params All the search parameters of the current url.\n     * @returns The initial state based on the current url.\n     * @example (params) => params.get('filter') ?? '',\n     */\n    deserializer: (params: URLSearchParams) => T;\n    /**\n     * Whether the state should be synced with the url.\n     * When set to false, the hook behaves just like a regular useState hook from react.\n     */\n    sync?: boolean;\n}\n\nexport const useUrlSyncedState = <T>({initialState, serializer, deserializer, sync}: UseUrlSyncedStateOptions<T>) => {\n    const [state, setState] = useState<T>(sync ? deserializer(getSearchParams()) : initialState);\n    const enhancedSetState = useMemo(() => {\n        if (sync) {\n            const initialSerialized = serializer(initialState).reduce(\n                (acc, [key, value]) => {\n                    acc[key] = value;\n                    return acc;\n                },\n                {} as Record<string, string>,\n            );\n            return (updater: T | ((old: T) => T)) => {\n                setState((old) => {\n                    const newValue = updater instanceof Function ? updater(old) : updater;\n                    serializer(newValue).forEach(([key, value]) => setSearchParam(key, value, initialSerialized[key]));\n                    return newValue;\n                });\n            };\n        }\n\n        return setState;\n    }, [sync]);\n\n    return [state, enhancedSetState] as const;\n};\n"],"names":["useMemo","useState","setSearchParam","key","value","initial","url","URL","window","location","href","searchParams","delete","set","history","replaceState","toString","getSearchParams","useUrlSyncedState","initialState","serializer","deserializer","sync","state","setState","enhancedSetState","initialSerialized","reduce","acc","updater","old","newValue","Function","forEach"],"mappings":"AAAA,SAAQA,OAAO,EAAEC,QAAQ,QAAO,QAAQ;AAExC,MAAMC,iBAAiB,CAACC,KAAaC,OAAeC;IAChD,MAAMC,MAAM,IAAIC,IAAIC,OAAOC,QAAQ,CAACC,IAAI;IACxC,IAAIN,UAAU,MAAMA,UAAUC,SAAS;QACnCC,IAAIK,YAAY,CAACC,MAAM,CAACT;IAC5B,OAAO;QACHG,IAAIK,YAAY,CAACE,GAAG,CAACV,KAAKC;IAC9B;IACAI,OAAOM,OAAO,CAACC,YAAY,CAAC,MAAM,IAAIT,IAAIU,QAAQ;AACtD;AAEA,MAAMC,kBAAkB;IACpB,MAAMX,MAAM,IAAIC,IAAIC,OAAOC,QAAQ,CAACC,IAAI;IACxC,OAAOJ,IAAIK,YAAY;AAC3B;AA8BA,OAAO,MAAMO,oBAAoB,CAAI,EAACC,YAAY,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAA8B;IAC5G,MAAM,CAACC,OAAOC,SAAS,GAAGvB,SAAYqB,OAAOD,aAAaJ,qBAAqBE;IAC/E,MAAMM,mBAAmBzB,QAAQ;QAC7B,IAAIsB,MAAM;YACN,MAAMI,oBAAoBN,WAAWD,cAAcQ,MAAM,CACrD,CAACC,KAAK,CAACzB,KAAKC,MAAM;gBACdwB,GAAG,CAACzB,IAAI,GAAGC;gBACX,OAAOwB;YACX,GACA,CAAC;YAEL,OAAO,CAACC;gBACJL,SAAS,CAACM;oBACN,MAAMC,WAAWF,mBAAmBG,WAAWH,QAAQC,OAAOD;oBAC9DT,WAAWW,UAAUE,OAAO,CAAC,CAAC,CAAC9B,KAAKC,MAAM,GAAKF,eAAeC,KAAKC,OAAOsB,iBAAiB,CAACvB,IAAI;oBAChG,OAAO4B;gBACX;YACJ;QACJ;QAEA,OAAOP;IACX,GAAG;QAACF;KAAK;IAET,OAAO;QAACC;QAAOE;KAAiB;AACpC,EAAE"}

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

@@ -0,0 +1,6 @@
+.root {
+    &[data-disabled] {
+        color: var(--mantine-color-gray-4);
+        background-color: var(--mantine-color-gray-1);
+    }
+}

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

@@ -1,10 +1,35 @@
 .root {
+    padding: var(--mantine-spacing-sm);
+
     &:not(&[data-variant]) {
-        /* TODO: Plasma Reset, validate if we need the border */
         border-color: color-mix(in srgb, var(--alert-color), var(--alert-bg) 85%);
     }
 }
 
+.wrapper {
+    gap: var(--mantine-spacing-sm);
+}
+
 .title {
     font-weight: 500;
 }
+
+.icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 0;
+}
+
+.message {
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+
+        &:where([data-variant='filled']) {
+            color: var(--alert-color);
+        }
+    }
+
+    &:where([data-variant='white']) {
+        color: var(--mantine-color-black);
+    }
+}

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

@@ -0,0 +1,6 @@
+.root {
+    @mixin hover {
+        text-decoration: underline;
+        color: var(--mantine-color-action-8);
+    }
+}

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

@@ -0,0 +1,3 @@
+.navbar {
+    border-color: var(--mantine-color-gray-3);
+}

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

@@ -1,3 +1,5 @@
 .root {
+    text-transform: none;
+    padding: var(--mantine-spacing-xxs) var(--mantine-spacing-xs);
     font-weight: 500;
 }

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

@@ -1,3 +1,20 @@
 .label {
+    font-size: var(--mantine-font-size-sm);
     font-weight: 300;
 }
+
+.input {
+    &[data-indeterminate] {
+        background-color: var(--mantine-color-pureWhite);
+        border-color: var(--mantine-color-gray-4);
+
+        & + svg {
+            color: var(--mantine-color-gray-6);
+        }
+    }
+
+    &[readonly] {
+        background-color: var(--mantine-color-gray-2);
+        border-color: var(--mantine-color-gray-2);
+    }
+}

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

@@ -1,10 +1,9 @@
-/* TODO: Plasma Reset, validate if we need the custom style for the search */
 .search {
     margin: 0 0 var(--mantine-spacing-xs);
-    border-radius: var(--mantine-radius-default);
+    border-radius: var(--mantine-radius-md);
     border: 1px solid;
     width: 100%;
-    border-color: var(--mantine-color-default-border);
+    border-color: var(--mantine-color-gray-4);
 
     &:focus {
         border-color: var(--mantine-primary-color-filled);

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

@@ -0,0 +1,3 @@
+.monthCell {
+    text-align: center;
+}

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

@@ -0,0 +1,3 @@
+.input {
+    --input-color: var(--mantine-color-gray-7);
+}

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

@@ -1,7 +1,16 @@
+.label {
+    margin-bottom: var(--mantine-spacing-xs);
+}
+
 .description {
+    font-size: var(--mantine-font-size-sm);
+    color: var(--mantine-color-gray-7);
+    margin-bottom: var(--mantine-spacing-xs);
+    line-height: var(--mantine-line-height);
     font-weight: 300;
 }
 
 .error {
+    line-height: var(--mantine-line-height);
     font-weight: 300;
 }

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

@@ -1,3 +1,65 @@
+.root {
+    &[data-full-screen] {
+        .content {
+            flex: 0 0 100%;
+        }
+    }
+
+    &[data-size='xs'] {
+        .content {
+            flex: 0 0 rem(432px);
+        }
+    }
+
+    &[data-size='sm'] {
+        .content {
+            flex: 0 0 rem(664px);
+        }
+    }
+
+    &[data-size='md'] {
+        .content {
+            flex: 0 0 rem(896px);
+        }
+    }
+
+    &[data-size='lg'] {
+        .content {
+            flex: 0 0 rem(1120px);
+        }
+    }
+
+    &[data-size='xl'] {
+        .content {
+            flex: 0 0 rem(88%);
+        }
+    }
+
+    &:not([data-size]) {
+        .content {
+            flex: 0 0 rem(896px);
+        }
+    }
+}
+
+.content {
+    overflow: auto;
+}
+
+.header {
+    border-bottom: 1px solid var(--mantine-color-gray-3);
+    align-items: flex-start;
+}
+
 .title {
+    width: 100%;
+    font-size: var(--mantine-h3-font-size);
+    line-height: var(--mantine-h3-line-height);
     font-weight: 500;
 }
+
+.body {
+    &:where(:not(:only-child)) {
+        padding-top: var(--mb-padding, var(--mantine-spacing-md));
+    }
+}

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

@@ -1,3 +1,21 @@
+.root {
+    color: var(--mantine-color-gray-6);
+    line-height: var(--mantine-line-height);
+    border-radius: var(--mantine-radius-default) 0 0 var(--mantine-radius-default);
+
+    &[data-active] {
+        color: var(--mantine-primary-color-6);
+    }
+
+    @mixin hover {
+        @mixin light {
+            &:where(:not([data-active])) {
+                background-color: var(--mantine-color-gray-1);
+            }
+        }
+    }
+}
+
 .label {
     font-weight: 500;
 }

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

@@ -0,0 +1,20 @@
+.root {
+    border-color: var(--mantine-color-gray-3);
+    background-color: var(--mantine-color-gray-0);
+    box-shadow: var(--mantine-shadow-lg);
+    padding: var(--mantine-spacing-sm);
+
+    &[data-with-icon] {
+        padding-left: var(--mantine-spacing-sm);
+    }
+}
+
+.icon {
+    background-color: transparent;
+    margin-right: var(--mantine-spacing-sm);
+}
+
+.closeButton {
+    margin: var(--mantine-spacing-xs);
+    color: var(--mantine-color-gray-5);
+}

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

@@ -0,0 +1,30 @@
+.root {
+    --pagination-control-fz: var(--mantine-font-size-sm);
+
+    color: var(--mantine-color-gray-6);
+}
+
+.control {
+    color: var(--mantine-color-gray-6);
+
+    @mixin light {
+        border-color: var(--mantine-color-gray-3);
+
+        @mixin hover {
+            &:where(:not(:disabled, [data-disabled])) {
+                background-color: var(--mantine-primary-color-1);
+            }
+        }
+    }
+
+    &:where([data-active]) {
+        @mixin light {
+            border-color: var(--pagination-active-bg);
+            color: var(--pagination-active-color, var(--mantine-color-white));
+
+            @mixin hover {
+                background-color: var(--pagination-active-bg);
+            }
+        }
+    }
+}

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

@@ -1,4 +1,10 @@
 .labelWrapper {
     display: flex;
     align-items: flex-start;
+
+    &:not([data-disabled]) {
+        .label {
+            color: var(--mantine-color-gray-7);
+        }
+    }
 }

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

@@ -2,7 +2,7 @@
     cursor: text;
 
     --input-bd: transparent;
-    --input-bg: var(--mantine-color-dark-light);
-    --input-color: var(--mantine-color-dimmed);
-    --input-placeholder-color: var(--mantine-color-dimmed);
+    --input-bg: var(--mantine-color-gray-2);
+    --input-color: var(--mantine-color-gray-7);
+    --input-placeholder-color: var(--mantine-color-gray-7);
 }

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

@@ -1,3 +1,35 @@
+.root {
+    background-color: var(--mantine-color-gray-2);
+}
+
+.indicator {
+    border-radius: var(--sc-radius, var(--mantine-radius-sm));
+}
+
 .label {
     font-weight: 300;
+
+    @mixin light {
+        color: var(--mantine-color-gray-6);
+    }
+
+    &:where([data-disabled]) {
+        @mixin light {
+            color: var(--mantine-color-gray-5);
+        }
+    }
+
+    &:where([data-active]) {
+        @mixin light {
+            color: var(--sc-label-color, var(--mantine-color-black));
+        }
+    }
+
+    &:where(:not([data-disabled], [data-active], [data-read-only])) {
+        @mixin hover {
+            @mixin light {
+                color: var(--mantine-color-black);
+            }
+        }
+    }
 }

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

@@ -0,0 +1,39 @@
+.input {
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+    }
+
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+    }
+}
+
+.option {
+    padding: 12px 16px;
+
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+
+        @mixin hover {
+            background-color: var(--mantine-color-gray-1);
+        }
+    }
+
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+
+        @mixin hover {
+            background-color: var(--mantine-color-dark-4);
+        }
+    }
+
+    &[aria-selected='true'] {
+        background-color: var(--mantine-color-action-1);
+        color: var(--mantine-color-action-6);
+
+        @mixin hover {
+            color: var(--mantine-color-action-6);
+            background-color: rgb(237 246 255 / 65%);
+        }
+    }
+}

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

@@ -1,3 +1,69 @@
+.step {
+    &[disabled] {
+        color: var(--mantine-color-gray-5);
+
+        & .mantine-Stepper-stepDescription {
+            color: var(--mantine-color-gray-5);
+        }
+
+        & .mantine-Stepper-stepIcon {
+            border-color: var(--mantine-color-gray-1);
+        }
+    }
+}
+
 .stepIcon {
     font-weight: 500;
+    background-color: var(--mantine-color-gray-1);
+    color: inherit;
+    border: rem(1) solid var(--mantine-color-gray-3);
+
+    &[data-progress] {
+        background-color: var(--mantine-color-white);
+        border-color: var(--step-color);
+    }
+
+    &[data-completed] {
+        background-color: var(--mantine-color-white);
+        border-color: var(--mantine-color-lime-6);
+        color: var(--mantine-color-lime-6);
+    }
+}
+
+.stepCompletedIcon {
+    color: var(--mantine-color-lime-6);
+    font-size: rem(16);
+}
+
+.stepDescription {
+    color: var(--mantine-color-gray-7);
+
+    &[data-size='xs'] {
+        font-size: var(--mantine-font-size-xs);
+    }
+
+    &[data-size='sm'] {
+        font-size: var(--mantine-font-size-sm);
+    }
+
+    &[data-size='md'] {
+        font-size: var(--mantine-font-size-md);
+    }
+
+    &[data-size='lg'] {
+        font-size: var(--mantine-font-size-lg);
+    }
+
+    &[data-size='xl'] {
+        font-size: var(--mantine-font-size-xl);
+    }
+}
+
+.separator {
+    height: rem(1);
+    background-color: var(--mantine-color-gray-3);
+}
+
+.verticalSeparator {
+    border-left: rem(1) solid var(--mantine-color-gray-3);
 }

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

@@ -1,5 +1,9 @@
 .root {
     &[data-variant='default'] {
+        @mixin light {
+            --tab-hover-color: var(--mantine-color-gray-1);
+        }
+
         --tabs-list-border-width: 1px;
 
         &[data-orientation='horizontal'] {

package/dist/esm/theme/PlasmaColors.d.ts

@@ -1,22 +1,18 @@
 import { MantineColorsTuple } from '@mantine/core';
 export declare const PlasmaColors: {
-    blue: MantineColorsTuple;
-    red: MantineColorsTuple;
     gray: MantineColorsTuple;
-    dark: MantineColorsTuple;
-    teal: MantineColorsTuple;
-    yellow: MantineColorsTuple;
-    violet: MantineColorsTuple;
-    grape: MantineColorsTuple;
-    'cyan (Not used)': MantineColorsTuple;
-    orange: MantineColorsTuple;
-    indigo: MantineColorsTuple;
-    green: MantineColorsTuple;
+    action: MantineColorsTuple;
     navy: MantineColorsTuple;
     info: MantineColorsTuple;
+    blue: MantineColorsTuple;
+    red: MantineColorsTuple;
     critical: MantineColorsTuple;
+    teal: MantineColorsTuple;
     new: MantineColorsTuple;
+    yellow: MantineColorsTuple;
     warning: MantineColorsTuple;
+    green: MantineColorsTuple;
+    indigo: MantineColorsTuple;
     lime: MantineColorsTuple;
     success: MantineColorsTuple;
     purple: MantineColorsTuple;

package/dist/esm/theme/PlasmaColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlasmaColors.d.ts","sourceRoot":"","sources":["../../../src/theme/PlasmaColors.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAsBjD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CA4JxB,CAAC"}
+{"version":3,"file":"PlasmaColors.d.ts","sourceRoot":"","sources":["../../../src/theme/PlasmaColors.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAsBjD,eAAO,MAAM,YAAY;;YAchB,kBAAkB;;;;;;;;;;;;;;;CAiB1B,CAAC"}