@mantine/spotlight 9.2.2 → 9.3.1

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Spotlight.module.cjs","names":[],"sources":["../src/Spotlight.module.css"],"sourcesContent":[".root {\n &[data-scrollable] {\n --spotlight-content-height: 100%;\n }\n}\n\n.content {\n overflow: hidden;\n height: var(--spotlight-content-height, auto);\n max-height: var(--spotlight-max-height);\n}\n\n.body {\n display: flex;\n flex-direction: column;\n height: var(--spotlight-content-height, auto);\n}\n\n.search {\n border: 0;\n background-color: transparent;\n}\n\n.actionsList {\n /* Used in child ScrollArea */\n --spotlight-actions-list-padding: 4px;\n\n border-top: 1px solid;\n flex: 1;\n padding: var(--spotlight-actions-list-padding);\n max-height: calc(100vh - 15rem);\n margin-inline-end: calc(var(--spotlight-actions-list-padding) * -1);\n width: 100%;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.action {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 7px var(--mantine-spacing-md);\n border-radius: var(--mantine-radius-default);\n background-color: transparent;\n color: inherit;\n text-align: left;\n\n @mixin where-rtl {\n text-align: right;\n }\n\n &:where(:not([data-selected])) {\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n }\n }\n }\n\n &:where([data-selected]) {\n background-color: var(--mantine-primary-color-filled);\n color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n --action-description-color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n --action-description-opacity: 0.7;\n }\n}\n\n.actionBody {\n flex: 1;\n}\n\n.actionSection {\n opacity: 1;\n color: inherit;\n\n &:where([data-dimmed]) {\n opacity: var(--action-description-opacity, 1);\n color: var(--action-description-color, var(--mantine-color-dimmed));\n }\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-md);\n }\n\n &:where([data-position='right']) {\n margin-inline-start: var(--mantine-spacing-md);\n }\n\n & > svg {\n display: block;\n }\n}\n\n.actionLabel {\n display: block;\n}\n\n.actionDescription {\n display: block;\n font-size: var(--mantine-font-size-xs);\n opacity: var(--action-description-opacity, 1);\n color: var(--action-description-color, var(--mantine-color-dimmed));\n}\n\n.empty {\n color: var(--mantine-color-dimmed);\n padding: var(--mantine-spacing-md);\n text-align: center;\n}\n\n.footer {\n padding: var(--mantine-spacing-xs) calc(var(--mantine-spacing-md) + rem(4px));\n border-top: 1px solid;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.actionsGroup {\n display: flex;\n flex-direction: column;\n margin-top: var(--mantine-spacing-md);\n\n &::before {\n content: var(--spotlight-label);\n text-transform: uppercase;\n font-size: var(--mantine-font-size-xs);\n font-weight: var(--mantine-font-weight-bold);\n color: var(--mantine-color-dimmed);\n padding-inline-start: var(--mantine-spacing-md);\n }\n\n &:empty {\n display: none;\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Spotlight.module.cjs","names":[],"sources":["../src/Spotlight.module.css"],"sourcesContent":[".root {\n &[data-scrollable] {\n --spotlight-content-height: 100%;\n }\n}\n\n.content {\n overflow: hidden;\n height: var(--spotlight-content-height, auto);\n max-height: var(--spotlight-max-height);\n}\n\n.body {\n display: flex;\n flex-direction: column;\n height: var(--spotlight-content-height, auto);\n}\n\n.search {\n border: 0;\n background-color: transparent;\n}\n\n.actionsList {\n /* Used in child ScrollArea */\n --spotlight-actions-list-padding: 4px;\n\n border-top: 1px solid;\n flex: 1;\n padding: var(--spotlight-actions-list-padding);\n max-height: calc(100vh - 15rem);\n margin-inline-end: calc(var(--spotlight-actions-list-padding) * -1);\n width: 100%;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.action {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 7px var(--mantine-spacing-md);\n border-radius: var(--mantine-radius-default);\n background-color: transparent;\n color: inherit;\n text-align: start;\n\n &:where(:not([data-selected])) {\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n }\n }\n }\n\n &:where([data-selected]) {\n background-color: var(--mantine-primary-color-filled);\n color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n --action-description-color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n --action-description-opacity: 0.7;\n }\n}\n\n.actionBody {\n flex: 1;\n}\n\n.actionSection {\n opacity: 1;\n color: inherit;\n\n &:where([data-dimmed]) {\n opacity: var(--action-description-opacity, 1);\n color: var(--action-description-color, var(--mantine-color-dimmed));\n }\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-md);\n }\n\n &:where([data-position='right']) {\n margin-inline-start: var(--mantine-spacing-md);\n }\n\n & > svg {\n display: block;\n }\n}\n\n.actionLabel {\n display: block;\n}\n\n.actionDescription {\n display: block;\n font-size: var(--mantine-font-size-xs);\n opacity: var(--action-description-opacity, 1);\n color: var(--action-description-color, var(--mantine-color-dimmed));\n}\n\n.empty {\n color: var(--mantine-color-dimmed);\n padding: var(--mantine-spacing-md);\n text-align: center;\n}\n\n.footer {\n padding: var(--mantine-spacing-xs) calc(var(--mantine-spacing-md) + rem(4px));\n border-top: 1px solid;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.actionsGroup {\n display: flex;\n flex-direction: column;\n margin-top: var(--mantine-spacing-md);\n\n &::before {\n content: var(--spotlight-label);\n text-transform: uppercase;\n font-size: var(--mantine-font-size-xs);\n font-weight: var(--mantine-font-weight-bold);\n color: var(--mantine-color-dimmed);\n padding-inline-start: var(--mantine-spacing-md);\n }\n\n &:empty {\n display: none;\n }\n}\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"file":"Spotlight.module.mjs","names":[],"sources":["../src/Spotlight.module.css"],"sourcesContent":[".root {\n &[data-scrollable] {\n --spotlight-content-height: 100%;\n }\n}\n\n.content {\n overflow: hidden;\n height: var(--spotlight-content-height, auto);\n max-height: var(--spotlight-max-height);\n}\n\n.body {\n display: flex;\n flex-direction: column;\n height: var(--spotlight-content-height, auto);\n}\n\n.search {\n border: 0;\n background-color: transparent;\n}\n\n.actionsList {\n /* Used in child ScrollArea */\n --spotlight-actions-list-padding: 4px;\n\n border-top: 1px solid;\n flex: 1;\n padding: var(--spotlight-actions-list-padding);\n max-height: calc(100vh - 15rem);\n margin-inline-end: calc(var(--spotlight-actions-list-padding) * -1);\n width: 100%;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.action {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 7px var(--mantine-spacing-md);\n border-radius: var(--mantine-radius-default);\n background-color: transparent;\n color: inherit;\n text-align: left;\n\n @mixin where-rtl {\n text-align: right;\n }\n\n &:where(:not([data-selected])) {\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n }\n }\n }\n\n &:where([data-selected]) {\n background-color: var(--mantine-primary-color-filled);\n color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n --action-description-color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n --action-description-opacity: 0.7;\n }\n}\n\n.actionBody {\n flex: 1;\n}\n\n.actionSection {\n opacity: 1;\n color: inherit;\n\n &:where([data-dimmed]) {\n opacity: var(--action-description-opacity, 1);\n color: var(--action-description-color, var(--mantine-color-dimmed));\n }\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-md);\n }\n\n &:where([data-position='right']) {\n margin-inline-start: var(--mantine-spacing-md);\n }\n\n & > svg {\n display: block;\n }\n}\n\n.actionLabel {\n display: block;\n}\n\n.actionDescription {\n display: block;\n font-size: var(--mantine-font-size-xs);\n opacity: var(--action-description-opacity, 1);\n color: var(--action-description-color, var(--mantine-color-dimmed));\n}\n\n.empty {\n color: var(--mantine-color-dimmed);\n padding: var(--mantine-spacing-md);\n text-align: center;\n}\n\n.footer {\n padding: var(--mantine-spacing-xs) calc(var(--mantine-spacing-md) + rem(4px));\n border-top: 1px solid;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.actionsGroup {\n display: flex;\n flex-direction: column;\n margin-top: var(--mantine-spacing-md);\n\n &::before {\n content: var(--spotlight-label);\n text-transform: uppercase;\n font-size: var(--mantine-font-size-xs);\n font-weight: var(--mantine-font-weight-bold);\n color: var(--mantine-color-dimmed);\n padding-inline-start: var(--mantine-spacing-md);\n }\n\n &:empty {\n display: none;\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Spotlight.module.mjs","names":[],"sources":["../src/Spotlight.module.css"],"sourcesContent":[".root {\n &[data-scrollable] {\n --spotlight-content-height: 100%;\n }\n}\n\n.content {\n overflow: hidden;\n height: var(--spotlight-content-height, auto);\n max-height: var(--spotlight-max-height);\n}\n\n.body {\n display: flex;\n flex-direction: column;\n height: var(--spotlight-content-height, auto);\n}\n\n.search {\n border: 0;\n background-color: transparent;\n}\n\n.actionsList {\n /* Used in child ScrollArea */\n --spotlight-actions-list-padding: 4px;\n\n border-top: 1px solid;\n flex: 1;\n padding: var(--spotlight-actions-list-padding);\n max-height: calc(100vh - 15rem);\n margin-inline-end: calc(var(--spotlight-actions-list-padding) * -1);\n width: 100%;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.action {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 7px var(--mantine-spacing-md);\n border-radius: var(--mantine-radius-default);\n background-color: transparent;\n color: inherit;\n text-align: start;\n\n &:where(:not([data-selected])) {\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n }\n }\n }\n\n &:where([data-selected]) {\n background-color: var(--mantine-primary-color-filled);\n color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n --action-description-color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n --action-description-opacity: 0.7;\n }\n}\n\n.actionBody {\n flex: 1;\n}\n\n.actionSection {\n opacity: 1;\n color: inherit;\n\n &:where([data-dimmed]) {\n opacity: var(--action-description-opacity, 1);\n color: var(--action-description-color, var(--mantine-color-dimmed));\n }\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-md);\n }\n\n &:where([data-position='right']) {\n margin-inline-start: var(--mantine-spacing-md);\n }\n\n & > svg {\n display: block;\n }\n}\n\n.actionLabel {\n display: block;\n}\n\n.actionDescription {\n display: block;\n font-size: var(--mantine-font-size-xs);\n opacity: var(--action-description-opacity, 1);\n color: var(--action-description-color, var(--mantine-color-dimmed));\n}\n\n.empty {\n color: var(--mantine-color-dimmed);\n padding: var(--mantine-spacing-md);\n text-align: center;\n}\n\n.footer {\n padding: var(--mantine-spacing-xs) calc(var(--mantine-spacing-md) + rem(4px));\n border-top: 1px solid;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.actionsGroup {\n display: flex;\n flex-direction: column;\n margin-top: var(--mantine-spacing-md);\n\n &::before {\n content: var(--spotlight-label);\n text-transform: uppercase;\n font-size: var(--mantine-font-size-xs);\n font-weight: var(--mantine-font-weight-bold);\n color: var(--mantine-color-dimmed);\n padding-inline-start: var(--mantine-spacing-md);\n }\n\n &:empty {\n display: none;\n }\n}\n"],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/spotlight",
3
- "version": "9.2.2",
3
+ "version": "9.3.1",
4
4
  "description": "Command center components for react and Mantine",
5
5
  "homepage": "https://mantine.dev",
6
6
  "license": "MIT",
@@ -41,13 +41,13 @@
41
41
  "directory": "packages/@mantine/spotlight"
42
42
  },
43
43
  "peerDependencies": {
44
- "@mantine/core": "9.2.2",
45
- "@mantine/hooks": "9.2.2",
44
+ "@mantine/core": "9.3.1",
45
+ "@mantine/hooks": "9.3.1",
46
46
  "react": "^19.2.0",
47
47
  "react-dom": "^19.2.0"
48
48
  },
49
49
  "dependencies": {
50
- "@mantine/store": "9.2.2"
50
+ "@mantine/store": "9.3.1"
51
51
  },
52
52
  "devDependencies": {
53
53
  "@mantine-tests/core": "workspace:*",
package/styles.css CHANGED
@@ -47,11 +47,7 @@
47
47
  border-radius: var(--mantine-radius-default);
48
48
  background-color: transparent;
49
49
  color: inherit;
50
- text-align: left;
51
- }
52
-
53
- :where([dir="rtl"]) .m_d49bb8ef {
54
- text-align: right;
50
+ text-align: start;
55
51
  }
56
52
 
57
53
  @media (hover: hover) {
package/styles.layer.css CHANGED
@@ -47,11 +47,7 @@
47
47
  border-radius: var(--mantine-radius-default);
48
48
  background-color: transparent;
49
49
  color: inherit;
50
- text-align: left;
51
- }
52
-
53
- :where([dir="rtl"]) .m_d49bb8ef {
54
- text-align: right;
50
+ text-align: start;
55
51
  }
56
52
 
57
53
  @media (hover: hover) {