@tecsinapse/react-web-kit 1.22.1-beta.3 → 1.22.1-beta.5

package/dist/esm/components/molecules/Menubar/Menubar.js

@@ -0,0 +1,127 @@
+import React, { useRef } from 'react';
+import { useDebouncedState, Icon, Text } from '@tecsinapse/react-core';
+import { Transition } from 'react-transition-group';
+import { StyledMenuBar, StyledMenuButton, StyledInputContainer, StyledInput, StyledIconInput, StyledContainerOpenMenu, StyledSearchResultsContainer, StyledSearchTextContainer } from './styled.js';
+import MostUsed from './MostUsed/MostUsed.js';
+import MenuBlock from './MenuBlock/MenuBlock.js';
+import SearchResultItem from './SearchResultItem/SearchResultItem.js';
+import { filterAndTransform } from './utils.js';
+import { getInputContainerStyles, getContainerOpenMenuStyles } from './animations.js';
+import { useClickAwayListener } from '../../../hooks/useClickAwayListener.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Menubar = (_a) => {
+  var _b = _a, {
+    leftComponents,
+    rightComponents,
+    searchPlaceholder = "O qu\xEA voc\xEA deseja buscar?",
+    options,
+    mostUsed,
+    mostUsedLabel = "Mais acessados",
+    searchResultsLabel = "Resultados da busca",
+    searchable = true
+  } = _b, rest = __objRest(_b, [
+    "leftComponents",
+    "rightComponents",
+    "searchPlaceholder",
+    "options",
+    "mostUsed",
+    "mostUsedLabel",
+    "searchResultsLabel",
+    "searchable"
+  ]);
+  const [search, setSearch] = React.useState("");
+  const [results, setResults] = React.useState([]);
+  const [input, setInput] = useDebouncedState("", setSearch);
+  const [open, setOpen] = React.useState(false);
+  const menuRef = useRef(null);
+  useClickAwayListener(menuRef, setOpen, "mouseup");
+  const toggleOpen = React.useCallback(
+    () => setOpen((state) => !state),
+    [setOpen]
+  );
+  React.useEffect(() => {
+    if (search === "")
+      return;
+    setResults(filterAndTransform(options, search));
+  }, [search]);
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    ref: (ref) => menuRef.current = ref
+  }, rest), /* @__PURE__ */ React.createElement(StyledMenuBar, null, /* @__PURE__ */ React.createElement(StyledMenuButton, {
+    variant: "filled",
+    color: "primary",
+    onPress: toggleOpen
+  }, !open ? /* @__PURE__ */ React.createElement(Icon, {
+    size: "deca",
+    name: "menu",
+    type: "material-community",
+    fontColor: "light"
+  }) : /* @__PURE__ */ React.createElement(Icon, {
+    size: "deca",
+    name: "close",
+    type: "material-community",
+    fontColor: "light"
+  })), leftComponents, /* @__PURE__ */ React.createElement(Transition, {
+    in: open,
+    timeout: 250
+  }, (state) => /* @__PURE__ */ React.createElement(StyledInputContainer, {
+    style: getInputContainerStyles(state)
+  }, searchable && /* @__PURE__ */ React.createElement(StyledInput, {
+    placeholder: searchPlaceholder,
+    leftComponent: /* @__PURE__ */ React.createElement(StyledIconInput, null, /* @__PURE__ */ React.createElement(Icon, {
+      name: "magnify",
+      type: "material-community"
+    })),
+    value: input,
+    onChange: setInput
+  }))), rightComponents), /* @__PURE__ */ React.createElement(Transition, {
+    in: open,
+    timeout: 250
+  }, (state) => /* @__PURE__ */ React.createElement(StyledContainerOpenMenu, {
+    style: getContainerOpenMenuStyles(state)
+  }, !search ? /* @__PURE__ */ React.createElement(React.Fragment, null, mostUsed && /* @__PURE__ */ React.createElement(MostUsed, {
+    label: mostUsedLabel,
+    data: mostUsed,
+    toggle: toggleOpen
+  }), /* @__PURE__ */ React.createElement(MenuBlock, {
+    options,
+    toggle: toggleOpen
+  })) : /* @__PURE__ */ React.createElement(StyledSearchResultsContainer, null, /* @__PURE__ */ React.createElement(StyledSearchTextContainer, null, /* @__PURE__ */ React.createElement(Text, {
+    fontWeight: "bold"
+  }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React.createElement(SearchResultItem, {
+    key: `${result.title}-${result.category}`,
+    data: result,
+    searchTerm: search,
+    toggle: toggleOpen
+  }))))));
+};
+
+export { Menubar as default };
+//# sourceMappingURL=Menubar.js.map

package/dist/esm/components/molecules/Menubar/Menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.js","sources":["../../../../../src/components/molecules/Menubar/Menubar.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport {\n  StyledIconInput,\n  StyledMenuBar,\n  StyledMenuButton,\n  StyledContainerOpenMenu,\n  StyledInput,\n  StyledInputContainer,\n  StyledSearchResultsContainer,\n  StyledSearchTextContainer,\n} from './styled';\nimport { MostUsedType, OptionsType } from './types';\nimport { MostUsed } from './MostUsed';\nimport { MenuBlock } from './MenuBlock';\nimport { SearchResultItem } from './SearchResultItem';\nimport { filterAndTransform } from './utils';\nimport {\n  getContainerOpenMenuStyles,\n  getInputContainerStyles,\n} from './animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {\n  options: OptionsType[];\n  leftComponents?: React.ReactNode;\n  rightComponents?: React.ReactNode;\n  /** Limited to first 4 elements */\n  mostUsed?: MostUsedType[];\n  mostUsedLabel?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchResultsLabel?: string;\n}\n\nconst Menubar: React.FC<MenubarProps> = ({\n  leftComponents,\n  rightComponents,\n  searchPlaceholder = 'O quê você deseja buscar?',\n  options,\n  mostUsed,\n  mostUsedLabel = 'Mais acessados',\n  searchResultsLabel = 'Resultados da busca',\n  searchable = true,\n  ...rest\n}) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [results, setResults] = React.useState<MostUsedType[]>([]);\n  const [input, setInput] = useDebouncedState<string>('', setSearch);\n  const [open, setOpen] = React.useState<boolean>(false);\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  useClickAwayListener(menuRef, setOpen, 'mouseup');\n\n  const toggleOpen = React.useCallback(\n    () => setOpen(state => !state),\n    [setOpen]\n  );\n\n  React.useEffect(() => {\n    if (search === '') return;\n    setResults(filterAndTransform(options, search));\n  }, [search]);\n\n  return (\n    <div ref={ref => (menuRef.current = ref)} {...rest}>\n      <StyledMenuBar>\n        <StyledMenuButton variant=\"filled\" color=\"primary\" onPress={toggleOpen}>\n          {!open ? (\n            <Icon\n              size=\"deca\"\n              name=\"menu\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          ) : (\n            <Icon\n              size=\"deca\"\n              name=\"close\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          )}\n        </StyledMenuButton>\n        {leftComponents}\n        <Transition in={open} timeout={250}>\n          {state => (\n            <StyledInputContainer style={getInputContainerStyles(state)}>\n              {searchable && (\n                <StyledInput\n                  placeholder={searchPlaceholder}\n                  leftComponent={\n                    <StyledIconInput>\n                      <Icon name=\"magnify\" type=\"material-community\" />\n                    </StyledIconInput>\n                  }\n                  value={input}\n                  onChange={setInput}\n                />\n              )}\n            </StyledInputContainer>\n          )}\n        </Transition>\n        {rightComponents}\n      </StyledMenuBar>\n      <Transition in={open} timeout={250}>\n        {state => (\n          <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>\n            {!search ? (\n              <>\n                {mostUsed && (\n                  <MostUsed\n                    label={mostUsedLabel}\n                    data={mostUsed}\n                    toggle={toggleOpen}\n                  />\n                )}\n                <MenuBlock options={options} toggle={toggleOpen} />\n              </>\n            ) : (\n              <StyledSearchResultsContainer>\n                <StyledSearchTextContainer>\n                  <Text fontWeight=\"bold\">{searchResultsLabel}</Text>\n                </StyledSearchTextContainer>\n                {results.map(result => (\n                  <SearchResultItem\n                    key={`${result.title}-${result.category}`}\n                    data={result}\n                    searchTerm={search}\n                    toggle={toggleOpen}\n                  />\n                ))}\n              </StyledSearchResultsContainer>\n            )}\n          </StyledContainerOpenMenu>\n        )}\n      </Transition>\n    </div>\n  );\n};\n\nexport default Menubar;\n"],"names":[],"mappings":"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"}

package/dist/esm/components/molecules/Menubar/MostUsed/MostUsed.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MostUsedType } from '../types';
+interface MostUsedProps {
+    data: MostUsedType[];
+    label: string;
+    toggle: () => void;
+}
+declare const _default: React.NamedExoticComponent<MostUsedProps>;
+export default _default;

package/dist/esm/components/molecules/Menubar/MostUsed/MostUsed.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Text } from '@tecsinapse/react-core';
+import { StyledCardContainer, StyledCard } from './styled.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const MostUsed = ({ data, label, toggle }) => {
+  const noTextDecoration = { textDecoration: "none" };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, {
+    fontWeight: "bold"
+  }, label), /* @__PURE__ */ React.createElement(StyledCardContainer, null, data.slice(0, 4).map(
+    ({
+      title,
+      category,
+      Component = "a",
+      props = {}
+    }) => /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, props), {
+      style: noTextDecoration,
+      key: `${title}-${category}`,
+      onClick: toggle
+    }), /* @__PURE__ */ React.createElement(StyledCard, {
+      elevated: true,
+      key: `${title}-${category}`
+    }, /* @__PURE__ */ React.createElement(Text, {
+      fontWeight: "bold",
+      colorVariant: "primary"
+    }, title), /* @__PURE__ */ React.createElement(Text, {
+      fontWeight: "bold",
+      colorVariant: "secondary",
+      typography: "label"
+    }, category)))
+  )));
+};
+var MostUsed$1 = React.memo(MostUsed);
+
+export { MostUsed$1 as default };
+//# sourceMappingURL=MostUsed.js.map

package/dist/esm/components/molecules/Menubar/MostUsed/MostUsed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MostUsed.js","sources":["../../../../../../src/components/molecules/Menubar/MostUsed/MostUsed.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledCard, StyledCardContainer } from './styled';\nimport { MostUsedType } from '../types';\n\ninterface MostUsedProps {\n  data: MostUsedType[];\n  label: string;\n  toggle: () => void;\n}\n\nconst MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {\n  const noTextDecoration = { textDecoration: 'none' };\n\n  return (\n    <>\n      <Text fontWeight=\"bold\">{label}</Text>\n      <StyledCardContainer>\n        {data\n          .slice(0, 4)\n          .map(\n            ({\n              title,\n              category,\n              Component = 'a',\n              props = {},\n            }: MostUsedType) => (\n              <Component\n                {...props}\n                style={noTextDecoration}\n                key={`${title}-${category}`}\n                onClick={toggle}\n              >\n                <StyledCard elevated key={`${title}-${category}`}>\n                  <Text fontWeight=\"bold\" colorVariant=\"primary\">\n                    {title}\n                  </Text>\n                  <Text\n                    fontWeight=\"bold\"\n                    colorVariant=\"secondary\"\n                    typography=\"label\"\n                  >\n                    {category}\n                  </Text>\n                </StyledCard>\n              </Component>\n            )\n          )}\n      </StyledCardContainer>\n    </>\n  );\n};\n\nexport default React.memo(MostUsed);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,WAAoC,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,QAAa,KAAA;AACrE,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,UAAW,EAAA,MAAA;AAAA,GAAQ,EAAA,KAAM,mBAC9B,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EACE,KACE,KAAM,CAAA,CAAA,EAAG,CAAC,CACV,CAAA,GAAA;AAAA,IACC,CAAC;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,GAAA;AAAA,MACZ,QAAQ,EAAC;AAAA,KACX,qBACG,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACK,KADL,CAAA,EAAA;AAAA,MAEC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA,EAAK,GAAG,KAAS,CAAA,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MACjB,OAAS,EAAA,MAAA;AAAA,KAAA,CAAA,kBAER,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,MAAW,QAAQ,EAAA,IAAA;AAAA,MAAC,GAAA,EAAK,GAAG,KAAS,CAAA,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,KAAA,kBACnC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,UAAW,EAAA,MAAA;AAAA,MAAO,YAAa,EAAA,SAAA;AAAA,KAClC,EAAA,KACH,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MACC,UAAW,EAAA,MAAA;AAAA,MACX,YAAa,EAAA,WAAA;AAAA,MACb,UAAW,EAAA,OAAA;AAAA,KAEV,EAAA,QACH,CACF,CACF,CAAA;AAAA,GAGR,CACF,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,iBAAe,KAAA,CAAM,KAAK,QAAQ,CAAA;;;;"}

package/dist/esm/components/molecules/Menubar/MostUsed/index.d.ts

@@ -0,0 +1 @@
+export { default as MostUsed } from './MostUsed';

package/dist/esm/components/molecules/Menubar/MostUsed/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledCardContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCard: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<any> | undefined;
+}>;

package/dist/esm/components/molecules/Menubar/MostUsed/styled.js

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { Card } from '@tecsinapse/react-core';
+import nativeStyled from '@emotion/native';
+
+const StyledCardContainer = styled("div")`
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-column-gap: ${({ theme }) => theme.spacing.mega};
+    margin-bottom: ${({ theme }) => theme.spacing.kilo};
+    margin-top: ${({ theme }) => theme.spacing.centi};
+`;
+const StyledCard = nativeStyled(Card)`
+    padding-top: ${({ theme }) => theme.spacing.mili};
+    padding-bottom: ${({ theme }) => theme.spacing.mili};
+    padding-left: ${({ theme }) => theme.spacing.deca};
+    padding-right: ${({ theme }) => theme.spacing.deca};
+`;
+
+export { StyledCard, StyledCardContainer };
+//# sourceMappingURL=styled.js.map

package/dist/esm/components/molecules/Menubar/MostUsed/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/components/molecules/Menubar/MostUsed/styled.ts"],"sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { Card, StyleProps } from '@tecsinapse/react-core';\nimport { default as nativeStyled } from '@emotion/native';\n\nexport const StyledCardContainer = webStyled('div')<Partial<StyleProps>>`\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-column-gap: ${({ theme }) => theme.spacing.mega};\n    margin-bottom: ${({ theme }) => theme.spacing.kilo};\n    margin-top: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledCard = nativeStyled(Card)<Partial<StyleProps>>`\n    padding-top: ${({ theme }) => theme.spacing.mili};\n    padding-bottom: ${({ theme }) => theme.spacing.mili};\n    padding-left: ${({ theme }) => theme.spacing.deca};\n    padding-right: ${({ theme }) => theme.spacing.deca};\n`;\n"],"names":["webStyled"],"mappings":";;;;AAIa,MAAA,mBAAA,GAAsBA,OAAU,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,qBAAA,EAG3B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,mBAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,gBAAA,EAChC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,UAAA,GAAa,aAAa,IAAI,CAAA,CAAA;AAAA,iBAAA,EACxB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,oBAAA,EAC1B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,kBAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,mBAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;;;;"}

package/dist/esm/components/molecules/Menubar/SearchResultItem/SearchResultItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MostUsedType } from '../types';
+interface SearchResultItem {
+    data: MostUsedType;
+    searchTerm: string;
+    toggle: () => void;
+}
+declare const SearchResultItem: React.FC<SearchResultItem>;
+export default SearchResultItem;

package/dist/esm/components/molecules/Menubar/SearchResultItem/SearchResultItem.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Text } from '@tecsinapse/react-core';
+import { StyledSearchItemContainer, HighlightText } from './styled.js';
+import { highlight } from './utils.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const SearchResultItem = ({
+  data,
+  searchTerm,
+  toggle
+}) => {
+  const { title, category, Component, props } = data;
+  const noTextDecoration = { textDecoration: "none" };
+  const textProps = { fontColor: "orange", fontWeight: "bold" };
+  return /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, props), {
+    style: noTextDecoration,
+    onClick: toggle
+  }), /* @__PURE__ */ React.createElement(StyledSearchItemContainer, null, /* @__PURE__ */ React.createElement(Text, {
+    typography: "base",
+    colorVariant: "secondary",
+    colorTone: "dark"
+  }, highlight(searchTerm, title, HighlightText, textProps)), /* @__PURE__ */ React.createElement(Text, {
+    typography: "sub",
+    fontWeight: "bold",
+    colorVariant: "secondary",
+    colorTone: "medium"
+  }, category)));
+};
+
+export { SearchResultItem as default };
+//# sourceMappingURL=SearchResultItem.js.map

package/dist/esm/components/molecules/Menubar/SearchResultItem/SearchResultItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResultItem.js","sources":["../../../../../../src/components/molecules/Menubar/SearchResultItem/SearchResultItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, TextProps } from '@tecsinapse/react-core';\nimport { MostUsedType } from '../types';\nimport { StyledSearchItemContainer, HighlightText } from './styled';\nimport { highlight } from './utils';\n\ninterface SearchResultItem {\n  data: MostUsedType;\n  searchTerm: string;\n  toggle: () => void;\n}\n\nconst SearchResultItem: React.FC<SearchResultItem> = ({\n  data,\n  searchTerm,\n  toggle,\n}) => {\n  const { title, category, Component, props } = data;\n  const noTextDecoration = { textDecoration: 'none' };\n\n  const textProps: TextProps = { fontColor: 'orange', fontWeight: 'bold' };\n\n  return (\n    <Component {...props} style={noTextDecoration} onClick={toggle}>\n      <StyledSearchItemContainer>\n        <Text typography=\"base\" colorVariant=\"secondary\" colorTone=\"dark\">\n          {highlight(searchTerm, title, HighlightText, textProps)}\n        </Text>\n        <Text\n          typography=\"sub\"\n          fontWeight=\"bold\"\n          colorVariant=\"secondary\"\n          colorTone=\"medium\"\n        >\n          {category}\n        </Text>\n      </StyledSearchItemContainer>\n    </Component>\n  );\n};\n\nexport default SearchResultItem;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,mBAA+C,CAAC;AAAA,EACpD,IAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,IAAA,CAAA;AAC9C,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,MAAM,SAAuB,GAAA,EAAE,SAAW,EAAA,QAAA,EAAU,YAAY,MAAO,EAAA,CAAA;AAEvE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,4CAAc,KAAd,CAAA,EAAA;AAAA,IAAqB,KAAO,EAAA,gBAAA;AAAA,IAAkB,OAAS,EAAA,MAAA;AAAA,GACtD,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iDACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,UAAW,EAAA,MAAA;AAAA,IAAO,YAAa,EAAA,WAAA;AAAA,IAAY,SAAU,EAAA,MAAA;AAAA,GAAA,EACxD,UAAU,UAAY,EAAA,KAAA,EAAO,eAAe,SAAS,CACxD,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,UAAW,EAAA,KAAA;AAAA,IACX,UAAW,EAAA,MAAA;AAAA,IACX,YAAa,EAAA,WAAA;AAAA,IACb,SAAU,EAAA,QAAA;AAAA,GAET,EAAA,QACH,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/components/molecules/Menubar/SearchResultItem/index.d.ts

@@ -0,0 +1 @@
+export { default as SearchResultItem } from './SearchResultItem';

package/dist/esm/components/molecules/Menubar/SearchResultItem/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledSearchItemContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HighlightText: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<any> | undefined;
+}>;

package/dist/esm/components/molecules/Menubar/SearchResultItem/styled.js

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import nativeStyled from '@emotion/native';
+import { hex2rgba, Text } from '@tecsinapse/react-core';
+
+const StyledSearchItemContainer = styled("div")`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};
+  border-top: ${({ theme }) => `${theme.borderWidth.pico} solid ${hex2rgba(
+  theme.miscellaneous.shadow,
+  0.05
+)}`};
+`;
+const HighlightText = nativeStyled(Text)`
+  text-decoration: underline;
+  text-decoration-color: ${({ theme }) => theme.font.color.orange};
+`;
+
+export { HighlightText, StyledSearchItemContainer };
+//# sourceMappingURL=styled.js.map

package/dist/esm/components/molecules/Menubar/SearchResultItem/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../src/components/molecules/Menubar/SearchResultItem/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps, Text } from '@tecsinapse/react-core';\n\nexport const StyledSearchItemContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};\n  border-top: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.05\n    )}`};\n`;\n\nexport const HighlightText = nativeStyled(Text)<Partial<StyleProps>>`\n  text-decoration: underline;\n  text-decoration-color: ${({ theme }) => theme.font.color.orange};\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,yBAAA,GAA4B,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,WAGxC,EAAA,CAAC,EAAE,KAAM,EAAA,KAAM,GAAG,KAAM,CAAA,OAAA,CAAQ,IAAU,CAAA,GAAA,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,CAAA,EAAA,CAAA,CAAA;AAAA,cAAA,EACrD,CAAC,EAAE,KAAA,OACf,CAAG,EAAA,KAAA,CAAM,YAAY,IAAc,CAAA,OAAA,EAAA,QAAA;AAAA,EACjC,MAAM,aAAc,CAAA,MAAA;AAAA,EACpB,IAAA;AACF,CAAA,CAAA,CAAA,CAAA;AAAA,EAAA;AAGS,MAAA,aAAA,GAAgB,aAAa,IAAI,CAAA,CAAA;AAAA;AAAA,yBAAA,EAEnB,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,KAAK,KAAM,CAAA,MAAA,CAAA;AAAA;;;;"}

package/dist/esm/components/molecules/Menubar/SearchResultItem/utils.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const stringMatcher: (searchTerm: string, textToReplace: string) => RegExpMatchArray[];
+export declare const highlight: <T>(searchTerm: string, textToReplace: string, Component: React.ElementType, props: T) => React.ReactNode;

package/dist/esm/components/molecules/Menubar/SearchResultItem/utils.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const normalize = (str) => {
+  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[-[\]{}()*+?.,\\^$|#]/g, " ").toLowerCase();
+};
+const matchSpliter = (str, indexes, size) => {
+  const result = [];
+  let currentIndex = 0;
+  indexes.forEach((index) => {
+    result.push(str.substring(currentIndex, index));
+    result.push(str.substring(index, index + size));
+    currentIndex = index + size;
+  });
+  result.push(str.substring(currentIndex, str.length));
+  return result.filter((e) => e);
+};
+const stringMatcher = (searchTerm, textToReplace) => {
+  const s = normalize(searchTerm);
+  const tx = normalize(textToReplace);
+  const r = new RegExp(`(${s})`, "g");
+  return Array.from(tx.matchAll(r));
+};
+const highlightReplacer = (searchTerm, textToReplace, Component, props) => {
+  const search = normalize(searchTerm);
+  const matches = stringMatcher(searchTerm, textToReplace);
+  if (matches.length <= 0) {
+    return textToReplace;
+  }
+  const indexes = matches.map((match) => match.index);
+  const splited = matchSpliter(textToReplace, indexes, searchTerm.length);
+  return splited.map((value, idx) => {
+    return normalize(value) === search ? /* @__PURE__ */ React.createElement(Component, __spreadValues({
+      key: `highlight-${value}${idx}`
+    }, props), value) : /* @__PURE__ */ React.createElement(React.Fragment, null, value);
+  });
+};
+const highlight = (searchTerm, textToReplace, Component, props) => {
+  if (textToReplace && searchTerm) {
+    return highlightReplacer(searchTerm, textToReplace, Component, props);
+  }
+  return textToReplace;
+};
+
+export { highlight, stringMatcher };
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/molecules/Menubar/SearchResultItem/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/molecules/Menubar/SearchResultItem/utils.tsx"],"sourcesContent":["import React from 'react';\n\nconst normalize = (str: string): string => {\n  return str\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    .replace(/[-[\\]{}()*+?.,\\\\^$|#]/g, ' ')\n    .toLowerCase();\n};\n\nconst matchSpliter = (\n  str: string,\n  indexes: number[],\n  size: number\n): string[] => {\n  const result: string[] = [];\n  let currentIndex = 0;\n\n  indexes.forEach((index: number) => {\n    result.push(str.substring(currentIndex, index));\n    result.push(str.substring(index, index + size));\n    currentIndex = index + size;\n  });\n\n  result.push(str.substring(currentIndex, str.length));\n\n  return result.filter(e => e);\n};\n\nexport const stringMatcher = (\n  searchTerm: string,\n  textToReplace: string\n): RegExpMatchArray[] => {\n  const s = normalize(searchTerm);\n  const tx = normalize(textToReplace);\n\n  const r = new RegExp(`(${s})`, 'g');\n\n  return Array.from(tx.matchAll(r));\n};\n\nconst highlightReplacer = <T,>(\n  searchTerm: string,\n  textToReplace: string,\n  Component: React.ElementType,\n  props: T\n): React.ReactNode => {\n  const search = normalize(searchTerm);\n  const matches = stringMatcher(searchTerm, textToReplace);\n\n  if (matches.length <= 0) {\n    return textToReplace;\n  }\n\n  const indexes: number[] = matches.map(match => match.index) as number[];\n  const splited = matchSpliter(textToReplace, indexes, searchTerm.length);\n\n  return splited.map((value, idx) => {\n    return normalize(value) === search ? (\n      <Component key={`highlight-${value}${idx}`} {...props}>\n        {value}\n      </Component>\n    ) : (\n      <>{value}</>\n    );\n  });\n};\n\nexport const highlight = <T,>(\n  searchTerm: string,\n  textToReplace: string,\n  Component: React.ElementType,\n  props: T\n): React.ReactNode => {\n  if (textToReplace && searchTerm) {\n    return highlightReplacer(searchTerm, textToReplace, Component, props);\n  }\n\n  return textToReplace;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAEA,MAAM,SAAA,GAAY,CAAC,GAAwB,KAAA;AACzC,EAAA,OAAO,GACJ,CAAA,SAAA,CAAU,KAAK,CAAA,CACf,OAAQ,CAAA,kBAAA,EAAoB,EAAE,CAAA,CAC9B,OAAQ,CAAA,wBAAA,EAA0B,GAAG,CAAA,CACrC,WAAY,EAAA,CAAA;AACjB,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA,CACnB,GACA,EAAA,OAAA,EACA,IACa,KAAA;AACb,EAAA,MAAM,SAAmB,EAAC,CAAA;AAC1B,EAAA,IAAI,YAAe,GAAA,CAAA,CAAA;AAEnB,EAAQ,OAAA,CAAA,OAAA,CAAQ,CAAC,KAAkB,KAAA;AACjC,IAAA,MAAA,CAAO,IAAK,CAAA,GAAA,CAAI,SAAU,CAAA,YAAA,EAAc,KAAK,CAAC,CAAA,CAAA;AAC9C,IAAA,MAAA,CAAO,KAAK,GAAI,CAAA,SAAA,CAAU,KAAO,EAAA,KAAA,GAAQ,IAAI,CAAC,CAAA,CAAA;AAC9C,IAAA,YAAA,GAAe,KAAQ,GAAA,IAAA,CAAA;AAAA,GACxB,CAAA,CAAA;AAED,EAAA,MAAA,CAAO,KAAK,GAAI,CAAA,SAAA,CAAU,YAAc,EAAA,GAAA,CAAI,MAAM,CAAC,CAAA,CAAA;AAEnD,EAAO,OAAA,MAAA,CAAO,MAAO,CAAA,CAAA,CAAA,KAAK,CAAC,CAAA,CAAA;AAC7B,CAAA,CAAA;AAEa,MAAA,aAAA,GAAgB,CAC3B,UAAA,EACA,aACuB,KAAA;AACvB,EAAM,MAAA,CAAA,GAAI,UAAU,UAAU,CAAA,CAAA;AAC9B,EAAM,MAAA,EAAA,GAAK,UAAU,aAAa,CAAA,CAAA;AAElC,EAAA,MAAM,CAAI,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAI,MAAM,GAAG,CAAA,CAAA;AAElC,EAAA,OAAO,KAAM,CAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,CAAC,CAAC,CAAA,CAAA;AAClC,EAAA;AAEA,MAAM,iBAAoB,GAAA,CACxB,UACA,EAAA,aAAA,EACA,WACA,KACoB,KAAA;AACpB,EAAM,MAAA,MAAA,GAAS,UAAU,UAAU,CAAA,CAAA;AACnC,EAAM,MAAA,OAAA,GAAU,aAAc,CAAA,UAAA,EAAY,aAAa,CAAA,CAAA;AAEvD,EAAI,IAAA,OAAA,CAAQ,UAAU,CAAG,EAAA;AACvB,IAAO,OAAA,aAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,OAAoB,GAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,KAAA,KAAS,MAAM,KAAK,CAAA,CAAA;AAC1D,EAAA,MAAM,OAAU,GAAA,YAAA,CAAa,aAAe,EAAA,OAAA,EAAS,WAAW,MAAM,CAAA,CAAA;AAEtE,EAAA,OAAO,OAAQ,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,GAAQ,KAAA;AACjC,IAAA,OAAO,SAAU,CAAA,KAAK,CAAM,KAAA,MAAA,mBACzB,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,cAAA,CAAA;AAAA,MAAU,GAAA,EAAK,aAAa,KAAQ,CAAA,EAAA,GAAA,CAAA,CAAA;AAAA,KAAA,EAAW,KAC7C,CAAA,EAAA,KACH,CAEA,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAG,KAAM,CAAA,CAAA;AAAA,GAEZ,CAAA,CAAA;AACH,CAAA,CAAA;AAEO,MAAM,SAAY,GAAA,CACvB,UACA,EAAA,aAAA,EACA,WACA,KACoB,KAAA;AACpB,EAAA,IAAI,iBAAiB,UAAY,EAAA;AAC/B,IAAA,OAAO,iBAAkB,CAAA,UAAA,EAAY,aAAe,EAAA,SAAA,EAAW,KAAK,CAAA,CAAA;AAAA,GACtE;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}

package/dist/esm/components/molecules/Menubar/animations.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { TransitionStatus } from 'react-transition-group';
+export declare const getInputContainerStyles: (state: TransitionStatus) => CSSProperties;
+export declare const getContainerOpenMenuStyles: (state: TransitionStatus) => CSSProperties;

package/dist/esm/components/molecules/Menubar/animations.js

@@ -0,0 +1,65 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const getDefaultInputContainerStyles = {
+  transitionDuration: "250ms",
+  transitionProperty: "opacity scale transform",
+  transitionTimingFunction: "ease-in-out"
+};
+const getDefaultContainerOpenMenuStyles = {
+  transitionDuration: "250ms",
+  transitionProperty: "opacity scale transform",
+  transitionTimingFunction: "ease-in-out"
+};
+const getInputContainerTransform = {
+  entered: {
+    transform: "scale(1, 1) translateY(0px)"
+  },
+  entering: {
+    opacity: 0.5,
+    transform: "scale(0.99, 0.99) translateY(-5px)"
+  },
+  exited: {
+    opacity: 0,
+    transform: "scale(0.99, 0.99) translateY(-50px)"
+  },
+  exiting: {
+    opacity: 0.5,
+    transform: "scale(0.99, 0.99) translateY(-5px)"
+  }
+};
+const getContainerOpenMenuTransform = {
+  entered: {
+    transform: "scale(1, 1) translateY(0px) "
+  },
+  entering: {
+    opacity: 0.95,
+    transform: "scale(0.99, 0.99) translateY(0px)"
+  },
+  exited: {
+    opacity: 0,
+    transform: "scale(0.99, 0.99) translateY(-600px)"
+  },
+  exiting: {
+    opacity: 0.95,
+    transform: "scale(0.99, 0.99) translateY(0px)"
+  }
+};
+const getInputContainerStyles = (state) => __spreadValues(__spreadValues({}, getDefaultInputContainerStyles), getInputContainerTransform[state]);
+const getContainerOpenMenuStyles = (state) => __spreadValues(__spreadValues({}, getDefaultContainerOpenMenuStyles), getContainerOpenMenuTransform[state]);
+
+export { getContainerOpenMenuStyles, getInputContainerStyles };
+//# sourceMappingURL=animations.js.map

package/dist/esm/components/molecules/Menubar/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sources":["../../../../../src/components/molecules/Menubar/animations.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\nconst getDefaultInputContainerStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getDefaultContainerOpenMenuStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getInputContainerTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px)',\n  },\n  entering: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-50px)',\n  },\n  exiting: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n};\n\nconst getContainerOpenMenuTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px) ',\n  },\n  entering: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-600px)',\n  },\n  exiting: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n};\n\nexport const getInputContainerStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultInputContainerStyles,\n  ...getInputContainerTransform[state],\n});\n\nexport const getContainerOpenMenuStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultContainerOpenMenuStyles,\n  ...getContainerOpenMenuTransform[state],\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAGA,MAAM,8BAAiC,GAAA;AAAA,EACrC,kBAAoB,EAAA,OAAA;AAAA,EACpB,kBAAoB,EAAA,yBAAA;AAAA,EACpB,wBAA0B,EAAA,aAAA;AAC5B,CAAA,CAAA;AAEA,MAAM,iCAAoC,GAAA;AAAA,EACxC,kBAAoB,EAAA,OAAA;AAAA,EACpB,kBAAoB,EAAA,yBAAA;AAAA,EACpB,wBAA0B,EAAA,aAAA;AAC5B,CAAA,CAAA;AAEA,MAAM,0BAA6B,GAAA;AAAA,EACjC,OAAS,EAAA;AAAA,IACP,SAAW,EAAA,6BAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,GAAA;AAAA,IACT,SAAW,EAAA,oCAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,CAAA;AAAA,IACT,SAAW,EAAA,qCAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,GAAA;AAAA,IACT,SAAW,EAAA,oCAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEA,MAAM,6BAAgC,GAAA;AAAA,EACpC,OAAS,EAAA;AAAA,IACP,SAAW,EAAA,8BAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,IAAA;AAAA,IACT,SAAW,EAAA,mCAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,CAAA;AAAA,IACT,SAAW,EAAA,sCAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,IAAA;AAAA,IACT,SAAW,EAAA,mCAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,MAAM,uBAA0B,GAAA,CACrC,KACmB,KAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EAChB,iCACA,0BAA2B,CAAA,KAAA,CAAA,EAAA;AAGzB,MAAM,0BAA6B,GAAA,CACxC,KACmB,KAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EAChB,oCACA,6BAA8B,CAAA,KAAA,CAAA;;;;"}

package/dist/esm/components/molecules/Menubar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Menubar } from './Menubar';
+export type { OptionsType as MenubarOptionsType, MostUsedType as MenubarMostUsedType, ItemsOptions as MenubarItemsOptions, } from './types';
+export * from './Menubar';

package/dist/esm/components/molecules/Menubar/styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const StyledIconInput: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledMenuBar: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledMenuButton: import("@emotion/native").StyledComponent<any, {}, {}>;
+export declare const StyledContainerOpenMenu: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledInput: import("@emotion/native").StyledComponent<any, {}, {}>;
+export declare const StyledInputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSearchResultsContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSearchTextContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/molecules/Menubar/styled.js

@@ -0,0 +1,67 @@
+import styled from '@emotion/styled';
+import nativeStyled from '@emotion/native';
+import { hex2rgba } from '@tecsinapse/react-core';
+import Button from '../../atoms/Button/Button.js';
+import 'react';
+import Input from '../../atoms/Input/Input.js';
+
+const StyledIconInput = styled("div")`
+  padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);
+  padding-left: ${({ theme }) => theme.spacing.centi};
+  padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);
+  padding-right: ${({ theme }) => theme.spacing.centi};
+`;
+const StyledMenuBar = styled("div")`
+    position: relative;
+    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};
+    box-shadow: 0px 2px 8px ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
+`;
+const StyledMenuButton = nativeStyled(Button)`
+    padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);
+    padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);
+    padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);
+    padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);
+    margin-right: ${({ theme }) => theme.spacing.kilo};
+    & * {
+      user-select: none;
+    }
+`;
+const StyledContainerOpenMenu = styled("div")`
+    border-top: ${({ theme }) => `${theme.borderWidth.pico} solid ${hex2rgba(
+  theme.miscellaneous.shadow,
+  0.05
+)}`};
+    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; 
+    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; 
+    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};
+    box-shadow: 0px 2px 8px ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
+    padding-right: 8vw;
+    padding-left: 8vw;
+    padding-top: ${({ theme }) => theme.spacing.kilo};
+    padding-bottom: ${({ theme }) => theme.spacing.mega};
+    position: absolute;
+    z-index: ${({ theme }) => theme.zIndex.header + 1};
+    width: -webkit-fill-available;
+    width: -moz-available;
+`;
+const StyledInput = nativeStyled(Input)`
+     width: 100%;
+`;
+const StyledInputContainer = styled("div")`
+    display: flex;
+    flex: 1;
+`;
+const StyledSearchResultsContainer = styled("div")`
+    display: flex;
+    flex-direction: column;
+`;
+const StyledSearchTextContainer = styled("div")`
+    margin-bottom: ${({ theme }) => theme.spacing.mili};
+`;
+
+export { StyledContainerOpenMenu, StyledIconInput, StyledInput, StyledInputContainer, StyledMenuBar, StyledMenuButton, StyledSearchResultsContainer, StyledSearchTextContainer };
+//# sourceMappingURL=styled.js.map

package/dist/esm/components/molecules/Menubar/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/Menubar/styled.ts"],"sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { Button } from '../../atoms/Button';\nimport { Input } from '../../atoms/Input';\n\nexport const StyledIconInput = webStyled('div')<Partial<StyleProps>>`\n  padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n  padding-left: ${({ theme }) => theme.spacing.centi};\n  padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);\n  padding-right: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`\n    position: relative;\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.05)};\n`;\n\nexport const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`\n    padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    margin-right: ${({ theme }) => theme.spacing.kilo};\n    & * {\n      user-select: none;\n    }\n`;\n\nexport const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`\n    border-top: ${({ theme }) =>\n      `${theme.borderWidth.pico} solid ${hex2rgba(\n        theme.miscellaneous.shadow,\n        0.05\n      )}`};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; \n    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; \n    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.05)};\n    padding-right: 8vw;\n    padding-left: 8vw;\n    padding-top: ${({ theme }) => theme.spacing.kilo};\n    padding-bottom: ${({ theme }) => theme.spacing.mega};\n    position: absolute;\n    z-index: ${({ theme }) => theme.zIndex.header + 1};\n    width: -webkit-fill-available;\n    width: -moz-available;\n`;\n\nexport const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`\n     width: 100%;\n`;\n\nexport const StyledInputContainer = webStyled('div')`\n    display: flex;\n    flex: 1;\n`;\n\nexport const StyledSearchResultsContainer = webStyled('div')`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`\n    margin-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n"],"names":["webStyled"],"mappings":"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"}