@foodpilot/foods 2.11.6 → 2.11.8

package/dist/components/Button/FoodsToggleButton.d.ts

@@ -10,6 +10,7 @@ export type FoodsToggleButtonType = {
     startIcon?: keyof IconMapping;
     onClick?: () => void;
     disabled?: boolean;
+    color?: string;
     nav?: {
         url: string;
         isExternal?: boolean;

package/dist/components/Button/FoodsToggleButton.js

@@ -97,7 +97,10 @@ const _ToggleButton = (props) => {
         setSelectedId(button.id);
       },
       selected: isSelected,
-      disabled: button.disabled
+      disabled: button.disabled,
+      sx: {
+        color: button.color
+      }
     },
     /* @__PURE__ */ jsxs(
       Stack,

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/package.json

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