@foodpilot/foods 2.11.5 → 2.11.7

package/dist/components/Tabs/FoodsTabs/FoodsTabTemplate.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { styled, Tab } from "@mui/material";
+const a11yProps = (index) => {
+  return {
+    id: `tab-${index}`,
+    "aria-controls": `tabpanel-${index}`
+  };
+};
+const SpecialTab = styled((props) => {
+  return /* @__PURE__ */ jsx(Tab, { disableRipple: true, ...a11yProps(props.value), ...props });
+})((props) => {
+  const { theme, variant, textVariant = "body-bold" } = props;
+  const typographyTheme = textVariant === "inherit" ? {} : theme.typography[textVariant];
+  const globalOverrides = {
+    textTransform: "unset",
+    ...typographyTheme
+  };
+  if (variant === "primary") {
+    return {
+      ...globalOverrides,
+      // This is applied on the base value if selected
+      "&.Mui-selected": {
+        color: theme.palette.primary[600],
+        background: theme.palette.background.paper
+      },
+      // This is applied on the value with Tags, like...
+      // <Typography>SomethingSomething</Typography>
+      "&.Mui-selected span": {
+        color: theme.palette.primary[600]
+      }
+    };
+  }
+  if (variant === "secondary") {
+    return {
+      ...globalOverrides,
+      borderRadius: 0,
+      borderRight: `1px solid ${theme.custom.grey[500]}`,
+      // This is applied on the base value if selected
+      "&.Mui-selected": {
+        color: theme.palette.primary[600],
+        background: theme.palette.background.paper
+      },
+      // This is applied on the value with Tags, like...
+      // <Typography>SomethingSomething</Typography>
+      "&.Mui-selected span": {
+        color: theme.palette.primary[600]
+      }
+    };
+  }
+  if (variant === "buttons") {
+    return {
+      minHeight: "40px",
+      margin: "4px",
+      background: "linear-gradient(180deg, #FFFFFF 0%, #F6F5F3 154.5%)",
+      border: `1px solid ${theme.custom.grey[600]}`,
+      // This is applied on the base value if selected
+      "&.Mui-selected": {
+        color: "white",
+        background: theme.custom.grey[2800],
+        border: `1px solid ${theme.custom.grey[2800]}`
+      },
+      // This is applied on the value with Tags, like...
+      // <Typography>SomethingSomething</Typography>
+      "&.Mui-selected span": {
+        color: "white"
+        // color: theme.palette.primary[600],
+      },
+      ...globalOverrides
+      // padding: theme.spacing(4),
+    };
+  }
+  return {};
+});
+export {
+  SpecialTab
+};

package/dist/components/Tabs/FoodsTabs/FoodsTabs.js

@@ -0,0 +1,130 @@
+import { jsx } from "react/jsx-runtime";
+import { styled, Box, Tabs } from "@mui/material";
+import { useState, useEffect } from "react";
+import { useResponsiveBreakpoints } from "../../../themes/responsive/useResponsiveBreakpoints.js";
+import { SpecialTab } from "./FoodsTabTemplate.js";
+import { FoodsIcon } from "../../Icons/FoodsIcon.js";
+const FoodsTabs = (props) => {
+  const {
+    forceScrollable,
+    selectedTabIndex,
+    tabs,
+    BoxProps: BoxProps2,
+    TabsProps: TabsProps2,
+    TabProps: TabProps2,
+    tabVariant,
+    textVariant = "body-bold"
+  } = props;
+  const [value, _setValue] = useState(selectedTabIndex);
+  const setValue = (_, newValue) => {
+    _setValue(newValue);
+  };
+  const { isMobile } = useResponsiveBreakpoints();
+  const isScrollable = forceScrollable === void 0 && isMobile === true ? true : forceScrollable;
+  useEffect(() => {
+    _setValue(selectedTabIndex);
+  }, [selectedTabIndex]);
+  return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, ...BoxProps2, children: /* @__PURE__ */ jsx(
+    SpecialTabs,
+    {
+      value,
+      onChange: (e, value2) => {
+        setValue(e, value2);
+      },
+      role: "navigation",
+      "aria-label": "section-tabs",
+      variant: isScrollable ? "scrollable" : "standard",
+      tabVariant,
+      ...TabsProps2,
+      children: tabs.map((tab, tabIndex) => {
+        const extraTabProps = {
+          // Global Override
+          ...TabProps2,
+          // Specific Override
+          ...tab.TabProps
+        };
+        const isSelected = tabIndex === value;
+        return /* @__PURE__ */ jsx(
+          SpecialTab,
+          {
+            value: tabIndex,
+            variant: tabVariant,
+            textVariant,
+            isSelected,
+            label: tab.name,
+            icon: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: /* @__PURE__ */ jsx(FoodsIcon, { icon: tab.icon, size: 2 }) }),
+            iconPosition: "start",
+            ...extraTabProps
+          }
+        );
+      })
+    }
+  ) });
+};
+const SpecialTabs = styled((props) => {
+  const { variant } = props;
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      scrollButtons: variant === "scrollable" ? "auto" : false,
+      allowScrollButtonsMobile: variant === "scrollable",
+      ...props
+    }
+  );
+})((props) => {
+  const { theme, variant, tabVariant } = props;
+  const scrollableStyle = variant !== "scrollable" ? {} : {
+    "& .MuiTabs-scrollButtons": {
+      "&.Mui-disabled": {
+        opacity: 0.3
+      }
+    }
+  };
+  if (tabVariant === "primary") {
+    return {
+      ...scrollableStyle
+    };
+  }
+  if (tabVariant === "secondary") {
+    return {
+      borderTopLeftRadius: "12px",
+      borderTopRightRadius: "12px",
+      borderColor: `${theme.custom.grey[500]}`,
+      borderWidth: `1px 1px 0px 1px`,
+      borderStyle: `solid`,
+      background: theme.custom.grey[200],
+      // This is the border that shows the selected item below it
+      // or on the side of it when it's horizontal
+      ".MuiTabs-indicator": {
+        backgroundColor: theme.palette.background.paper
+      },
+      ".MuiTabs-flexContainer::after": {
+        content: '" "',
+        background: theme.custom.grey[500],
+        bottom: 0,
+        left: 0,
+        right: 0,
+        width: "100%",
+        height: "1px",
+        position: "absolute"
+      },
+      ...scrollableStyle
+    };
+  }
+  if (tabVariant === "buttons") {
+    return {
+      backgroundColor: "white",
+      ".MuiTabs-indicator": {
+        backgroundColor: "white"
+      },
+      ...scrollableStyle
+    };
+  }
+  return {
+    ...scrollableStyle
+  };
+});
+export {
+  FoodsTabs,
+  SpecialTabs
+};

package/dist/components/Tabs/FoodsTabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FoodsTabs';
+export * from './FoodsTabTemplate';

package/dist/components/Tabs/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ButtonTabs';
 export * from './SectionTabs/SectionTabs';
 export * from './SecondaryTabs';
+export * from './FoodsTabs';

package/dist/main.js

@@ -126,6 +126,8 @@ import { SsqCard } from "./components/Ssq/SsqCard.js";
 import { ButtonTabs } from "./components/Tabs/ButtonTabs.js";
 import { SectionTabs } from "./components/Tabs/SectionTabs/SectionTabs.js";
 import { BoxStyled, SecondaryTabs } from "./components/Tabs/SecondaryTabs.js";
+import { FoodsTabs, SpecialTabs } from "./components/Tabs/FoodsTabs/FoodsTabs.js";
+import { SpecialTab } from "./components/Tabs/FoodsTabs/FoodsTabTemplate.js";
 import { FoodsTags } from "./components/Tags/FoodsTags.js";
 import { FoodsUserTags } from "./components/Tags/FoodsUserTags.js";
 import { TextArrowList } from "./components/Text/TextArrowList.js";
@@ -204,6 +206,7 @@ export {
   FoodsSearch,
   FoodsSelect,
   FoodsSelectServerPagination,
+  FoodsTabs,
   FoodsTags,
   FoodsTextInput,
   FoodsThemeOptionsProvider,
@@ -273,6 +276,8 @@ export {
   SelectBlock,
   Separator,
   SolidGreyBox,
+  SpecialTab,
+  SpecialTabs,
   SsqCard,
   SubMenu,
   SuggestionBlock,

package/dist/themes/common/components.js

@@ -102,17 +102,17 @@ const components = {
   MuiButton: {
     defaultProps: {
       // Changes default arguments for Buttons in the entire app.
-      disableRipple: true,
-      variant: "primary"
+      disableRipple: true
+      // variant: "primary",
     },
     styleOverrides: {
       // Modifications here affect all <Button /> in our app.
       root: ({ theme, ownerState }) => {
         var _a;
-        const variant = ownerState.variant ?? "primary";
+        const variant = ownerState.variant;
         const isDataviz = (_a = ownerState.variant) == null ? void 0 : _a.startsWith("dataviz");
         if (isDataviz) {
-          const colorIndex = parseInt(variant.split("-")[1]);
+          const colorIndex = parseInt((variant ?? "").split("-")[1]);
           const dataviz = theme.custom.dataviz.colorsWithExtra[colorIndex];
           if (dataviz !== void 0) {
             return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foodpilot/foods",
   "private": false,
-  "version": "2.11.5",
+  "version": "2.11.7",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",