mayak-common-library 0.0.33 → 0.0.34

package/dist/index.d.mts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import React__default, { FC, PropsWithChildren, ReactElement } from 'react';
 import { IconButtonProps } from '@mui/material/IconButton/IconButton';
 import { SelectProps } from '@mui/material/Select/Select';
-import { ChipProps } from '@mui/material';
+import { ChipProps, ToggleButtonGroupProps } from '@mui/material';
 import { BadgeProps } from '@mui/material/Badge/Badge';
 import { AvatarProps } from '@mui/material/Avatar/Avatar';
 import { TypographyOwnProps } from '@mui/material/Typography';
@@ -201,4 +201,29 @@ interface ListItemProps {
 }
 declare const ListItem: FC<ListItemProps>;
 
-export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BigNumber, Button, CategoryCard, CustomChip as Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock };
+type Values = {
+    value: string | number[];
+    title: string;
+}[];
+
+type FormValues = {
+    type: string;
+    place: string;
+    room: [];
+    price: string;
+    districts: string[];
+    town: string[];
+    searchText: string;
+};
+
+interface ToggleButtonsMultipleProps extends ToggleButtonGroupProps {
+    values: Values;
+    textView?: boolean;
+    collapseOnClick?: boolean;
+    collapseParent?: () => void;
+    label?: string;
+    flexDirection?: "row" | "col";
+}
+declare const ToggleButtonsMultiple: FC<ToggleButtonsMultipleProps & UseControllerProps<FormValues>>;
+
+export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BigNumber, Button, CategoryCard, CustomChip as Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock, ToggleButtonsMultiple as ToggleButton };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import React__default, { FC, PropsWithChildren, ReactElement } from 'react';
 import { IconButtonProps } from '@mui/material/IconButton/IconButton';
 import { SelectProps } from '@mui/material/Select/Select';
-import { ChipProps } from '@mui/material';
+import { ChipProps, ToggleButtonGroupProps } from '@mui/material';
 import { BadgeProps } from '@mui/material/Badge/Badge';
 import { AvatarProps } from '@mui/material/Avatar/Avatar';
 import { TypographyOwnProps } from '@mui/material/Typography';
@@ -201,4 +201,29 @@ interface ListItemProps {
 }
 declare const ListItem: FC<ListItemProps>;
 
-export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BigNumber, Button, CategoryCard, CustomChip as Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock };
+type Values = {
+    value: string | number[];
+    title: string;
+}[];
+
+type FormValues = {
+    type: string;
+    place: string;
+    room: [];
+    price: string;
+    districts: string[];
+    town: string[];
+    searchText: string;
+};
+
+interface ToggleButtonsMultipleProps extends ToggleButtonGroupProps {
+    values: Values;
+    textView?: boolean;
+    collapseOnClick?: boolean;
+    collapseParent?: () => void;
+    label?: string;
+    flexDirection?: "row" | "col";
+}
+declare const ToggleButtonsMultiple: FC<ToggleButtonsMultipleProps & UseControllerProps<FormValues>>;
+
+export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BigNumber, Button, CategoryCard, CustomChip as Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock, ToggleButtonsMultiple as ToggleButton };

package/dist/index.js

@@ -91,7 +91,8 @@ __export(src_exports, {
   TeamPersonCard: () => TeamPersonCard_default,
   Text: () => Text_default,
   TextBlock: () => TextBlock_default,
-  TitleBlock: () => TitleBlock_default
+  TitleBlock: () => TitleBlock_default,
+  ToggleButton: () => ToggleButton_default
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -335,7 +336,7 @@ var SelectPro = ({
         disableRipple: true,
         fullWidth: true,
         sx: {
-          height: small ? "34px" : "49px",
+          height: small ? "34px" : "38px",
           padding: small ? "0 10px 0 6px" : "0 20px 0 19px"
         },
         className: `border rounded-none border-solid normal-case text-accent-dark hover:bg-white ${open ? "!border-transparent bg-white" : ""} ${colorBorder ? "border-accent-beige flex-row-reverse justify-end gap-x-2" : "justify-between border-accent-dark"}`,
@@ -1201,6 +1202,100 @@ var ListItem = ({ icon, title, bold, onClick }) => {
   ) });
 };
 var ListItem_default = ListItem;
+
+// src/components/ToggleButton/ToggleButton.tsx
+var import_ToggleButton = __toESM(require("@mui/material/ToggleButton"));
+var import_material27 = require("@mui/material");
+var import_react_hook_form2 = require("react-hook-form");
+var import_Typography8 = __toESM(require("@mui/material/Typography"));
+var import_ToggleButtonGroup = __toESM(require("@mui/material/ToggleButtonGroup"));
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var StyledToggleButtonGroup = (0, import_material27.styled)(
+  import_ToggleButtonGroup.default
+)(({ theme: theme2, flexDirection }) => ({
+  [`& .${import_ToggleButtonGroup.toggleButtonGroupClasses.grouped}`]: {
+    // marginRight: theme.spacing(1.3),
+    marginRight: flexDirection === "col" ? "unset" : theme2.spacing(1),
+    marginBottom: flexDirection === "col" ? theme2.spacing(1) : "unset",
+    // marginBottom: theme.spacing(1.3),
+    // spacing: theme.spacing(1.3),
+    width: "fit-content"
+    // border: 0,
+    // borderRadius: theme.shape.borderRadius,
+    // [`&.${toggleButtonGroupClasses.disabled}`]: {
+    //   border: 0,
+    // },
+  },
+  [`& .${import_ToggleButtonGroup.toggleButtonGroupClasses.lastButton}`]: {
+    marginBottom: "unset",
+    marginRight: "unset"
+  },
+  [`& .${import_ToggleButtonGroup.toggleButtonGroupClasses.middleButton},& .${import_ToggleButtonGroup.toggleButtonGroupClasses.lastButton}`]: {
+    // marginLeft: -1,
+    // borderLeft: "1px solid transparent",
+    marginLeft: "unset",
+    borderLeft: "unset"
+  }
+}));
+var ToggleButton = (0, import_material27.styled)(import_ToggleButton.default)(() => ({
+  "&.Mui-selected, &.Mui-selected:hover": {
+    backgroundColor: "#C8BCA1 !important"
+    // marginLeft: "-1px !important",
+    // borderLeft: "1px solid transparent !important",
+  }
+}));
+var CustomToggleButton = (props) => {
+  const _a = props, { children, textView } = _a, rest = __objRest(_a, ["children", "textView"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ToggleButton,
+    __spreadProps(__spreadValues({}, rest), {
+      disableRipple: true,
+      className: `rounded-none border-none min-w-10 h-9 normal-case py-1.5 px-2.5 ${textView ? "justify-start bg-transparent hover:bg-transparent h-6 p-0" : " bg-accent-silver "}`,
+      children
+    })
+  );
+};
+var ToggleButtonsMultiple = (props) => {
+  const {
+    values,
+    textView = false,
+    exclusive,
+    collapseOnClick = false,
+    label,
+    collapseParent,
+    flexDirection = "row"
+  } = props;
+  const { field } = (0, import_react_hook_form2.useController)(props);
+  const handleFormat = (_event, newFormats) => {
+    console.log(newFormats);
+    if (newFormats !== null) field.onChange(newFormats);
+    if (collapseOnClick && collapseParent) collapseParent();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material27.Stack, { children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Typography8.default, { className: "text-accent-silver-2 text-sm", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      StyledToggleButtonGroup,
+      __spreadProps(__spreadValues({}, field), {
+        flexDirection,
+        exclusive,
+        value: field.value,
+        onChange: handleFormat,
+        "aria-label": "text formatting",
+        className: `flex flex-${flexDirection} ${textView ? "gap-1 flex-nowrap flex-col" : " flex-wrap"}`,
+        children: values.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          CustomToggleButton,
+          {
+            value: option.value,
+            textView,
+            children: option.title
+          },
+          index
+        ))
+      })
+    )
+  ] });
+};
+var ToggleButton_default = ToggleButtonsMultiple;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppBar,
@@ -1235,5 +1330,6 @@ var ListItem_default = ListItem;
   TeamPersonCard,
   Text,
   TextBlock,
-  TitleBlock
+  TitleBlock,
+  ToggleButton
 });

package/dist/index.mjs

@@ -280,7 +280,7 @@ var SelectPro = ({
         disableRipple: true,
         fullWidth: true,
         sx: {
-          height: small ? "34px" : "49px",
+          height: small ? "34px" : "38px",
           padding: small ? "0 10px 0 6px" : "0 20px 0 19px"
         },
         className: `border rounded-none border-solid normal-case text-accent-dark hover:bg-white ${open ? "!border-transparent bg-white" : ""} ${colorBorder ? "border-accent-beige flex-row-reverse justify-end gap-x-2" : "justify-between border-accent-dark"}`,
@@ -1154,6 +1154,105 @@ var ListItem = ({ icon, title, bold, onClick }) => {
   ) });
 };
 var ListItem_default = ListItem;
+
+// src/components/ToggleButton/ToggleButton.tsx
+import MuiToggleButton from "@mui/material/ToggleButton";
+import {
+  Stack as Stack5,
+  styled as styled9
+} from "@mui/material";
+import { useController as useController2 } from "react-hook-form";
+import Typography17 from "@mui/material/Typography";
+import ToggleButtonGroup, {
+  toggleButtonGroupClasses
+} from "@mui/material/ToggleButtonGroup";
+import { jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
+var StyledToggleButtonGroup = styled9(
+  ToggleButtonGroup
+)(({ theme: theme2, flexDirection }) => ({
+  [`& .${toggleButtonGroupClasses.grouped}`]: {
+    // marginRight: theme.spacing(1.3),
+    marginRight: flexDirection === "col" ? "unset" : theme2.spacing(1),
+    marginBottom: flexDirection === "col" ? theme2.spacing(1) : "unset",
+    // marginBottom: theme.spacing(1.3),
+    // spacing: theme.spacing(1.3),
+    width: "fit-content"
+    // border: 0,
+    // borderRadius: theme.shape.borderRadius,
+    // [`&.${toggleButtonGroupClasses.disabled}`]: {
+    //   border: 0,
+    // },
+  },
+  [`& .${toggleButtonGroupClasses.lastButton}`]: {
+    marginBottom: "unset",
+    marginRight: "unset"
+  },
+  [`& .${toggleButtonGroupClasses.middleButton},& .${toggleButtonGroupClasses.lastButton}`]: {
+    // marginLeft: -1,
+    // borderLeft: "1px solid transparent",
+    marginLeft: "unset",
+    borderLeft: "unset"
+  }
+}));
+var ToggleButton = styled9(MuiToggleButton)(() => ({
+  "&.Mui-selected, &.Mui-selected:hover": {
+    backgroundColor: "#C8BCA1 !important"
+    // marginLeft: "-1px !important",
+    // borderLeft: "1px solid transparent !important",
+  }
+}));
+var CustomToggleButton = (props) => {
+  const _a = props, { children, textView } = _a, rest = __objRest(_a, ["children", "textView"]);
+  return /* @__PURE__ */ jsx43(
+    ToggleButton,
+    __spreadProps(__spreadValues({}, rest), {
+      disableRipple: true,
+      className: `rounded-none border-none min-w-10 h-9 normal-case py-1.5 px-2.5 ${textView ? "justify-start bg-transparent hover:bg-transparent h-6 p-0" : " bg-accent-silver "}`,
+      children
+    })
+  );
+};
+var ToggleButtonsMultiple = (props) => {
+  const {
+    values,
+    textView = false,
+    exclusive,
+    collapseOnClick = false,
+    label,
+    collapseParent,
+    flexDirection = "row"
+  } = props;
+  const { field } = useController2(props);
+  const handleFormat = (_event, newFormats) => {
+    console.log(newFormats);
+    if (newFormats !== null) field.onChange(newFormats);
+    if (collapseOnClick && collapseParent) collapseParent();
+  };
+  return /* @__PURE__ */ jsxs18(Stack5, { children: [
+    label ? /* @__PURE__ */ jsx43(Typography17, { className: "text-accent-silver-2 text-sm", children: label }) : null,
+    /* @__PURE__ */ jsx43(
+      StyledToggleButtonGroup,
+      __spreadProps(__spreadValues({}, field), {
+        flexDirection,
+        exclusive,
+        value: field.value,
+        onChange: handleFormat,
+        "aria-label": "text formatting",
+        className: `flex flex-${flexDirection} ${textView ? "gap-1 flex-nowrap flex-col" : " flex-wrap"}`,
+        children: values.map((option, index) => /* @__PURE__ */ jsx43(
+          CustomToggleButton,
+          {
+            value: option.value,
+            textView,
+            children: option.title
+          },
+          index
+        ))
+      })
+    )
+  ] });
+};
+var ToggleButton_default = ToggleButtonsMultiple;
 export {
   AppBar_default as AppBar,
   ArticleCard_default as ArticleCard,
@@ -1187,5 +1286,6 @@ export {
   TeamPersonCard_default as TeamPersonCard,
   Text_default as Text,
   TextBlock_default as TextBlock,
-  TitleBlock_default as TitleBlock
+  TitleBlock_default as TitleBlock,
+  ToggleButton_default as ToggleButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayak-common-library",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",