mal-ui 0.1.3

package/dist/spotlight/extensions.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/spotlight/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@mantine/spotlight';
+export * from './extensions';

package/dist/spotlight/index.js

@@ -0,0 +1,666 @@
+"use client";
+import {
+  createStore,
+  useStore
+} from "../chunks/index-6tm93gww.js";
+import {
+  Box,
+  Highlight,
+  Input,
+  Modal,
+  ScrollArea,
+  UnstyledButton,
+  createSafeContext,
+  factory,
+  getDefaultZIndex,
+  rem,
+  useProps,
+  useResolvedStylesApi,
+  useStyles
+} from "../chunks/index-3ffbn0gc.js";
+import {
+  clamp,
+  useDidUpdate,
+  useHotkeys,
+  useUncontrolled
+} from "../chunks/index-syjq3515.js";
+import"../chunks/index-mc01z7m9.js";
+
+// node_modules/@mantine/spotlight/esm/spotlight.store.mjs
+
+var createSpotlightStore = () => createStore({
+  opened: false,
+  empty: false,
+  selected: -1,
+  listId: "",
+  query: "",
+  registeredActions: /* @__PURE__ */ new Set
+});
+var useSpotlight = (store) => useStore(store);
+function updateSpotlightStateAction(update, store) {
+  const state = store.getState();
+  store.setState({
+    ...state,
+    ...update(store.getState())
+  });
+}
+function openSpotlightAction(store) {
+  updateSpotlightStateAction(() => ({
+    opened: true,
+    selected: -1
+  }), store);
+}
+function closeSpotlightAction(store) {
+  updateSpotlightStateAction(() => ({ opened: false }), store);
+}
+function toggleSpotlightAction(store) {
+  updateSpotlightStateAction((state) => ({
+    opened: !state.opened,
+    selected: state.opened ? state.selected : -1
+  }), store);
+}
+function setSelectedAction(index, store) {
+  store.updateState((state) => ({
+    ...state,
+    selected: index
+  }));
+}
+function setListId(id, store) {
+  store.updateState((state) => ({
+    ...state,
+    listId: id
+  }));
+}
+function findElementByQuerySelector(selector, root = document) {
+  const element = root.querySelector(selector);
+  if (element)
+    return element;
+  const children = root instanceof ShadowRoot ? root.host.children : root.children;
+  for (let i = 0;i < children.length; i += 1) {
+    const child = children[i];
+    if (child.shadowRoot) {
+      const shadowElement = findElementByQuerySelector(selector, child.shadowRoot);
+      if (shadowElement)
+        return shadowElement;
+    }
+    const nestedElement = findElementByQuerySelector(selector, child);
+    if (nestedElement)
+      return nestedElement;
+  }
+  return null;
+}
+function selectAction(index, store) {
+  const state = store.getState();
+  const actionsList = state.listId ? findElementByQuerySelector(`#${state.listId}`) : null;
+  const selected = actionsList?.querySelector("[data-selected]");
+  const actions = actionsList?.querySelectorAll("[data-action]") ?? [];
+  const selectedIndex = clamp(index === -1 ? actions.length - 1 : index === actions.length ? 0 : index, 0, actions.length - 1);
+  selected?.removeAttribute("data-selected");
+  actions[selectedIndex]?.scrollIntoView({ block: "nearest" });
+  actions[selectedIndex]?.setAttribute("data-selected", "true");
+  setSelectedAction(selectedIndex, store);
+  return selectedIndex;
+}
+function selectNextAction(store) {
+  return selectAction(store.getState().selected + 1, store);
+}
+function selectPreviousAction(store) {
+  return selectAction(store.getState().selected - 1, store);
+}
+function triggerSelectedAction(store) {
+  const state = store.getState();
+  (state.listId ? findElementByQuerySelector(`#${state.listId} [data-selected]`) : null)?.click();
+}
+function registerAction(id, store) {
+  const state = store.getState();
+  state.registeredActions.add(id);
+  return () => {
+    state.registeredActions.delete(id);
+  };
+}
+function setQuery(query, store) {
+  updateSpotlightStateAction(() => ({ query }), store);
+  Promise.resolve().then(() => {
+    selectAction(0, store);
+    updateSpotlightStateAction((state) => ({ empty: state.query.trim().length > 0 && state.registeredActions.size === 0 || false }), store);
+  });
+}
+function clearSpotlightState({ clearQuery }, store) {
+  store.updateState((state) => ({
+    ...state,
+    selected: -1,
+    query: clearQuery ? "" : state.query,
+    empty: clearQuery ? false : state.empty
+  }));
+}
+var spotlightActions = {
+  open: openSpotlightAction,
+  close: closeSpotlightAction,
+  toggle: toggleSpotlightAction,
+  updateState: updateSpotlightStateAction,
+  setSelectedAction,
+  setListId,
+  selectAction,
+  selectNextAction,
+  selectPreviousAction,
+  triggerSelectedAction,
+  registerAction,
+  setQuery,
+  clearSpotlightState
+};
+function createSpotlight() {
+  const store = createSpotlightStore();
+  return [store, {
+    open: () => openSpotlightAction(store),
+    close: () => closeSpotlightAction(store),
+    toggle: () => toggleSpotlightAction(store)
+  }];
+}
+var [spotlightStore, spotlight] = createSpotlight();
+var { open: openSpotlight, close: closeSpotlight, toggle: toggleSpotlight } = spotlight;
+
+// node_modules/@mantine/spotlight/esm/is-actions-group.mjs
+
+function isActionsGroup(item) {
+  const _item = item;
+  return _item.group !== undefined && Array.isArray(_item.actions);
+}
+
+// node_modules/@mantine/spotlight/esm/Spotlight.context.mjs
+
+var [SpotlightProvider, useSpotlightContext] = createSafeContext("Spotlight component was not found in tree");
+
+// node_modules/@mantine/spotlight/esm/Spotlight.module.mjs
+
+var Spotlight_module_default = {
+  root: "m_d2b315db",
+  content: "m_3cd250e0",
+  body: "m_d2abce9b",
+  search: "m_f366a061",
+  actionsList: "m_6e463822",
+  action: "m_d49bb8ef",
+  actionBody: "m_3d475731",
+  actionSection: "m_832642f6",
+  actionLabel: "m_6c2a1345",
+  actionDescription: "m_a6d9d78d",
+  empty: "m_82f78f74",
+  footer: "m_ddcaf054",
+  actionsGroup: "m_5a3e5f7b"
+};
+
+// node_modules/@mantine/spotlight/esm/SpotlightAction.mjs
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+var defaultProps = {
+  dimmedSections: true,
+  highlightQuery: false
+};
+var SpotlightAction = factory((_props) => {
+  const { className, style, classNames, styles, id, description, label, leftSection, rightSection, children, dimmedSections, highlightQuery, highlightColor, closeSpotlightOnTrigger, onClick, onMouseDown, keywords, vars, ...others } = useProps("SpotlightAction", defaultProps, _props);
+  const ctx = useSpotlightContext();
+  const stylesApi = {
+    classNames,
+    styles
+  };
+  const labelNode = highlightQuery && typeof label === "string" ? /* @__PURE__ */ jsx(Highlight, {
+    component: "span",
+    highlight: ctx.query,
+    color: highlightColor,
+    ...ctx.getStyles("actionLabel", stylesApi),
+    children: label
+  }) : /* @__PURE__ */ jsx("span", {
+    ...ctx.getStyles("actionLabel", stylesApi),
+    children: label
+  });
+  return /* @__PURE__ */ jsx(UnstyledButton, {
+    "data-action": true,
+    ...ctx.getStyles("action", {
+      className,
+      style,
+      ...stylesApi
+    }),
+    ...others,
+    onMouseDown: (event) => {
+      event.preventDefault();
+      onMouseDown?.(event);
+    },
+    onClick: (event) => {
+      onClick?.(event);
+      if (closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger)
+        spotlightActions.close(ctx.store);
+    },
+    tabIndex: -1,
+    children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftSection && /* @__PURE__ */ jsx(Box, {
+        component: "span",
+        mod: {
+          position: "left",
+          dimmed: dimmedSections
+        },
+        ...ctx.getStyles("actionSection", stylesApi),
+        children: leftSection
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        ...ctx.getStyles("actionBody", stylesApi),
+        children: [labelNode, /* @__PURE__ */ jsx("span", {
+          ...ctx.getStyles("actionDescription", stylesApi),
+          children: description
+        })]
+      }),
+      rightSection && /* @__PURE__ */ jsx(Box, {
+        component: "span",
+        mod: {
+          position: "right",
+          dimmed: dimmedSections
+        },
+        ...ctx.getStyles("actionSection", stylesApi),
+        children: rightSection
+      })
+    ] })
+  });
+});
+SpotlightAction.classes = Spotlight_module_default;
+SpotlightAction.displayName = "@mantine/spotlight/SpotlightAction";
+
+// node_modules/@mantine/spotlight/esm/SpotlightActionsGroup.mjs
+import { jsx as jsx2 } from "react/jsx-runtime";
+
+var SpotlightActionsGroup = factory((props) => {
+  const { className, style, styles, classNames, label, children, ...others } = useProps("SpotlightActionsGroup", null, props);
+  return /* @__PURE__ */ jsx2(Box, {
+    ...useSpotlightContext().getStyles("actionsGroup", {
+      className,
+      style,
+      classNames,
+      styles
+    }),
+    ...others,
+    __vars: { "--spotlight-label": `'${label?.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'` },
+    children
+  });
+});
+SpotlightActionsGroup.classes = Spotlight_module_default;
+SpotlightActionsGroup.displayName = "@mantine/core/SpotlightActionsGroup";
+
+// node_modules/@mantine/spotlight/esm/SpotlightActionsList.mjs
+import { jsx as jsx3 } from "react/jsx-runtime";
+import { useEffect, useId } from "react";
+
+var SpotlightActionsList = factory((props) => {
+  const { className, style, id, children, vars, classNames, styles, ...others } = useProps("SpotlightActionsList", null, props);
+  const ctx = useSpotlightContext();
+  const generatedId = `mantine-${useId().replace(/:/g, "")}`;
+  const listId = id || generatedId;
+  useEffect(() => {
+    spotlightActions.setListId(listId, ctx.store);
+    return () => spotlightActions.setListId("", ctx.store);
+  }, []);
+  return /* @__PURE__ */ jsx3(ScrollArea.Autosize, {
+    ...ctx.getStyles("actionsList", {
+      className,
+      style,
+      classNames,
+      styles
+    }),
+    type: "scroll",
+    scrollbarSize: "var(--spotlight-actions-list-padding)",
+    offsetScrollbars: "y",
+    id: listId,
+    ...others,
+    children
+  });
+});
+SpotlightActionsList.classes = Spotlight_module_default;
+SpotlightActionsList.displayName = "@mantine/spotlight/SpotlightActionsList";
+
+// node_modules/@mantine/spotlight/esm/SpotlightEmpty.mjs
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+var SpotlightEmpty = factory((props) => {
+  const { className, style, classNames, styles, ...others } = useProps("SpotlightEmpty", null, props);
+  return /* @__PURE__ */ jsx4(Box, {
+    ...useSpotlightContext().getStyles("empty", {
+      classNames,
+      styles,
+      className,
+      style
+    }),
+    ...others
+  });
+});
+SpotlightEmpty.classes = Spotlight_module_default;
+SpotlightEmpty.displayName = "@mantine/spotlight/SpotlightEmpty";
+
+// node_modules/@mantine/spotlight/esm/SpotlightFooter.mjs
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+var SpotlightFooter = factory((props) => {
+  const { className, style, classNames, styles, ...others } = useProps("SpotlightFooter", null, props);
+  return /* @__PURE__ */ jsx5(Box, {
+    ...useSpotlightContext().getStyles("footer", {
+      className,
+      classNames,
+      style,
+      styles
+    }),
+    ...others
+  });
+});
+SpotlightFooter.classes = Spotlight_module_default;
+SpotlightFooter.displayName = "@mantine/spotlight/SpotlightFooter";
+
+// node_modules/@mantine/spotlight/esm/get-hotkeys.mjs
+
+function getHotkeys(hotkeys, store) {
+  if (!hotkeys)
+    return [];
+  const open = () => spotlightActions.open(store);
+  if (Array.isArray(hotkeys))
+    return hotkeys.map((hotkey) => [hotkey, open]);
+  return [[hotkeys, open]];
+}
+
+// node_modules/@mantine/spotlight/esm/SpotlightRoot.mjs
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+var defaultProps2 = {
+  size: 600,
+  yOffset: 80,
+  zIndex: getDefaultZIndex("max"),
+  overlayProps: {
+    backgroundOpacity: 0.35,
+    blur: 7
+  },
+  transitionProps: {
+    duration: 200,
+    transition: "pop"
+  },
+  store: spotlightStore,
+  clearQueryOnClose: true,
+  closeOnActionTrigger: true,
+  shortcut: "mod + K",
+  maxHeight: 400
+};
+var SpotlightRoot = factory((_props) => {
+  const props = useProps("SpotlightRoot", defaultProps2, _props);
+  const { classNames, className, style, styles, unstyled, vars, store, children, query, onQueryChange, transitionProps, clearQueryOnClose, shortcut, tagsToIgnore, triggerOnContentEditable, disabled, onSpotlightOpen, onSpotlightClose, forceOpened, closeOnActionTrigger, maxHeight, scrollable, attributes, ...others } = props;
+  const { opened, query: storeQuery } = useSpotlight(store);
+  const _query = typeof query === "string" ? query : storeQuery;
+  const setQuery2 = (q) => {
+    onQueryChange?.(q);
+    spotlightActions.setQuery(q, store);
+  };
+  const getStyles = useStyles({
+    name: "Spotlight",
+    classes: Spotlight_module_default,
+    props,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    attributes
+  });
+  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+    classNames,
+    styles,
+    props
+  });
+  useHotkeys(getHotkeys(shortcut, store), tagsToIgnore, triggerOnContentEditable);
+  useDidUpdate(() => {
+    opened ? onSpotlightOpen?.() : onSpotlightClose?.();
+  }, [opened]);
+  if (disabled)
+    return null;
+  return /* @__PURE__ */ jsx6(SpotlightProvider, {
+    value: {
+      getStyles,
+      query: _query,
+      setQuery: setQuery2,
+      store,
+      closeOnActionTrigger
+    },
+    children: /* @__PURE__ */ jsx6(Modal, {
+      ...others,
+      withCloseButton: false,
+      opened: opened || !!forceOpened,
+      padding: 0,
+      onClose: () => spotlightActions.close(store),
+      className,
+      style,
+      classNames: resolvedClassNames,
+      styles: resolvedStyles,
+      attributes,
+      transitionProps: {
+        ...transitionProps,
+        onExited: () => {
+          clearQueryOnClose && setQuery2("");
+          spotlightActions.clearSpotlightState({ clearQuery: clearQueryOnClose }, store);
+          transitionProps?.onExited?.();
+        }
+      },
+      __vars: { "--spotlight-max-height": scrollable ? rem(maxHeight) : undefined },
+      __staticSelector: "Spotlight",
+      "data-scrollable": scrollable || undefined,
+      children
+    })
+  });
+});
+SpotlightRoot.classes = Spotlight_module_default;
+SpotlightRoot.displayName = "@mantine/spotlight/SpotlightRoot";
+
+// node_modules/@mantine/spotlight/esm/SpotlightSearch.mjs
+import { jsx as jsx7 } from "react/jsx-runtime";
+import { useState } from "react";
+
+var defaultProps3 = { size: "lg" };
+var SpotlightSearch = factory((props) => {
+  const { classNames, styles, onKeyDown, onChange, vars, value, attributes, ...others } = useProps("SpotlightSearch", defaultProps3, props);
+  const ctx = useSpotlightContext();
+  const inputStyles = ctx.getStyles("search");
+  const [isComposing, setIsComposing] = useState(false);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (isComposing)
+      return;
+    if (event.nativeEvent.code === "ArrowDown") {
+      event.preventDefault();
+      spotlightActions.selectNextAction(ctx.store);
+    }
+    if (event.nativeEvent.code === "ArrowUp") {
+      event.preventDefault();
+      spotlightActions.selectPreviousAction(ctx.store);
+    }
+    if (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "NumpadEnter") {
+      event.preventDefault();
+      spotlightActions.triggerSelectedAction(ctx.store);
+    }
+  };
+  return /* @__PURE__ */ jsx7(Input, {
+    ...inputStyles,
+    classNames: [{ input: inputStyles.className }, classNames],
+    styles: [{ input: inputStyles.style }, styles],
+    ...others,
+    value: value ?? ctx.query,
+    onChange: (event) => {
+      ctx.setQuery(event.currentTarget.value);
+      onChange?.(event);
+    },
+    onKeyDown: handleKeyDown,
+    onCompositionStart: () => setIsComposing(true),
+    onCompositionEnd: () => setIsComposing(false)
+  });
+});
+SpotlightSearch.classes = Spotlight_module_default;
+SpotlightSearch.displayName = "@mantine/spotlight/SpotlightSearch";
+
+// node_modules/@mantine/spotlight/esm/default-spotlight-filter.mjs
+
+function getKeywords(keywords) {
+  if (Array.isArray(keywords))
+    return keywords.map((keyword) => keyword.trim()).join(",").toLowerCase().trim();
+  if (typeof keywords === "string")
+    return keywords.toLowerCase().trim();
+  return "";
+}
+function getFlatActions(data) {
+  return data.reduce((acc, item) => {
+    if ("actions" in item)
+      return [...acc, ...item.actions.map((action) => ({
+        ...action,
+        group: item.group
+      }))];
+    return [...acc, item];
+  }, []);
+}
+function flatActionsToGroups(data) {
+  const groups = {};
+  const result = [];
+  data.forEach((action) => {
+    if (action.group) {
+      if (!groups[action.group])
+        groups[action.group] = {
+          pushed: false,
+          data: {
+            group: action.group,
+            actions: []
+          }
+        };
+      groups[action.group].data.actions.push(action);
+      if (!groups[action.group].pushed) {
+        groups[action.group].pushed = true;
+        result.push(groups[action.group].data);
+      }
+    } else
+      result.push(action);
+  });
+  return result;
+}
+var defaultSpotlightFilter = (_query, data) => {
+  const query = _query.trim().toLowerCase();
+  const priorityMatrix = [[], []];
+  getFlatActions(data).forEach((item) => {
+    if (item.label?.toLowerCase().includes(query))
+      priorityMatrix[0].push(item);
+    else if (item.description?.toLowerCase().includes(query) || getKeywords(item.keywords).includes(query))
+      priorityMatrix[1].push(item);
+  });
+  return flatActionsToGroups(priorityMatrix.flat());
+};
+
+// node_modules/@mantine/spotlight/esm/limit-actions.mjs
+
+function limitActions(actions, limit) {
+  if (!Array.isArray(actions))
+    return [];
+  let count = 0;
+  return actions.reduce((acc, item) => {
+    if (count >= limit)
+      return acc;
+    if (isActionsGroup(item)) {
+      const groupActions = limitActions(item.actions, limit - count);
+      acc.push({
+        group: item.group,
+        actions: groupActions
+      });
+      count += groupActions.length;
+    } else {
+      acc.push(item);
+      count += 1;
+    }
+    return acc;
+  }, []);
+}
+
+// node_modules/@mantine/spotlight/esm/Spotlight.mjs
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+
+var defaultProps4 = {
+  size: 600,
+  yOffset: 80,
+  limit: Infinity,
+  zIndex: getDefaultZIndex("max"),
+  overlayProps: {
+    backgroundOpacity: 0.35,
+    blur: 7
+  },
+  transitionProps: {
+    duration: 200,
+    transition: "pop"
+  },
+  store: spotlightStore,
+  filter: defaultSpotlightFilter,
+  clearQueryOnClose: true,
+  closeOnActionTrigger: true,
+  shortcut: "mod + K"
+};
+var Spotlight = factory((_props) => {
+  const { searchProps, filter, query, onQueryChange, actions, nothingFound, highlightQuery, limit, scrollAreaProps, ...others } = useProps("Spotlight", defaultProps4, _props);
+  const [_query, setQuery2] = useUncontrolled({
+    value: query,
+    defaultValue: "",
+    finalValue: "",
+    onChange: onQueryChange
+  });
+  const filteredActions = limitActions(filter(_query, actions), limit).map((item) => {
+    if (isActionsGroup(item)) {
+      const items = item.actions.map(({ id, ...actionData }) => /* @__PURE__ */ jsx8(SpotlightAction, {
+        highlightQuery,
+        ...actionData
+      }, id));
+      return /* @__PURE__ */ jsx8(SpotlightActionsGroup, {
+        label: item.group,
+        children: items
+      }, item.group);
+    }
+    return /* @__PURE__ */ jsx8(SpotlightAction, {
+      highlightQuery,
+      ...item
+    }, item.id);
+  });
+  return /* @__PURE__ */ jsxs2(SpotlightRoot, {
+    ...others,
+    query: _query,
+    onQueryChange: setQuery2,
+    children: [
+      /* @__PURE__ */ jsx8(SpotlightSearch, { ...searchProps }),
+      filteredActions.length > 0 && /* @__PURE__ */ jsx8(SpotlightActionsList, {
+        ...scrollAreaProps,
+        children: filteredActions
+      }),
+      filteredActions.length === 0 && nothingFound && /* @__PURE__ */ jsx8(SpotlightEmpty, { children: nothingFound })
+    ]
+  });
+});
+Spotlight.classes = Spotlight_module_default;
+Spotlight.displayName = "@mantine/spotlight/Spotlight";
+Spotlight.Search = SpotlightSearch;
+Spotlight.ActionsList = SpotlightActionsList;
+Spotlight.Action = SpotlightAction;
+Spotlight.Empty = SpotlightEmpty;
+Spotlight.ActionsGroup = SpotlightActionsGroup;
+Spotlight.Footer = SpotlightFooter;
+Spotlight.Root = SpotlightRoot;
+Spotlight.open = spotlight.open;
+Spotlight.close = spotlight.close;
+Spotlight.toggle = spotlight.toggle;
+export {
+  useSpotlight,
+  toggleSpotlight,
+  spotlight,
+  openSpotlight,
+  isActionsGroup,
+  createSpotlightStore,
+  createSpotlight,
+  closeSpotlight,
+  SpotlightSearch,
+  SpotlightRoot,
+  SpotlightFooter,
+  SpotlightEmpty,
+  SpotlightActionsList,
+  SpotlightActionsGroup,
+  SpotlightAction,
+  Spotlight
+};
+
+//# debugId=7666DF655BCFCA5564756E2164756E21