@mailstep/design-system 0.8.26 → 0.8.27-beta.0

package/ui/Elements/Toggle/Toggle.js

@@ -0,0 +1,124 @@
+import { FieldLabel } from "../Label/Label.js";
+import "../Label/index.js";
+import SpaceAroundWrap from "../SpaceAround/SpaceAround.js";
+import "../SpaceAround/index.js";
+import "react";
+import styled$1, { css } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Toggle/Toggle.tsx
+const isHorizontal = (position) => position && ["left", "right"].includes(position);
+const StyledSpaceAroundWrap = styled$1(SpaceAroundWrap)`
+  display: flex;
+  flex-direction: ${({ labelPosition }) => labelPosition === "left" ? "row" : labelPosition === "right" ? "row-reverse" : "column"};
+  justify-content: ${({ labelPosition, labelJustify }) => labelPosition === "right" ? "flex-end" : labelJustify === "between" ? "space-between" : "flex-start"};
+  ${({ labelPosition }) => isHorizontal(labelPosition) ? "margin-top: 1rem" : ""}
+`;
+const StyledFieldLabel = styled$1(FieldLabel)`
+  cursor: pointer;
+  ${({ labelPosition }) => isHorizontal(labelPosition) ? "margin-bottom: 0;" : ""}
+  ${({ labelPosition }) => labelPosition === "left" ? "margin-right: 1rem;" : labelPosition === "right" ? "margin-left: 1rem;" : ""}
+`;
+const disabledStyles = css`
+  opacity: 0.4;
+`;
+const StyledToggle = styled$1.div`
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  height: 100%;
+  border-radius: 7px;
+  background-color: lightGray5;
+  border: 3px solid;
+  border-color: lightGray5;
+  position: relative;
+  transition: all 100ms ease-out;
+
+  ${(props) => props.disabled ? disabledStyles : ""}
+
+  input:checked + & {
+    background-color: red1;
+    border-color: red1;
+
+    & > span {
+      transform: translate(75%, -50%);
+      background-color: white;
+    }
+  }
+`;
+const StyledDot = styled$1.span`
+  aspect-ratio: 1 / 1;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 10%;
+  transform: translate(-20%, -50%);
+  transition: all 100ms ease-out;
+`;
+const HiddenInput = styled$1.input`
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 7px;
+  z-index: 1;
+  margin: 0;
+
+  ${({ $enabled }) => $enabled ? "cursor: pointer;" : ""}
+`;
+const Wrapper = styled$1.div`
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  &[data-appearance='primary'] {
+    width: 24px;
+    height: 14px;
+    ${StyledDot} {
+      height: 10px;
+    }
+  }
+  &[data-appearance='grid'] {
+    width: 28px;
+    height: 16px;
+    ${StyledDot} {
+      height: 12px;
+    }
+  }
+`;
+const Toggle = ({ onChange, label, name, checked, defaultChecked, spaceAround = false, disabled = false, labelPosition = "default", labelJustify, variant = "primary", spaceBetween = false, readOnly, ...rest }) => {
+	return /* @__PURE__ */ jsxs(StyledSpaceAroundWrap, {
+		spaceBetween,
+		spaceAround,
+		labelPosition,
+		labelJustify,
+		children: [label && /* @__PURE__ */ jsx(StyledFieldLabel, {
+			htmlFor: name,
+			labelPosition,
+			children: label
+		}), /* @__PURE__ */ jsxs(Wrapper, {
+			"data-appearance": variant,
+			children: [/* @__PURE__ */ jsx(HiddenInput, {
+				id: name,
+				name,
+				type: "checkbox",
+				checked,
+				$enabled: !disabled,
+				defaultChecked,
+				onChange: !disabled ? onChange : void 0,
+				disabled,
+				"data-cy": name ? `${name}Switch` : void 0,
+				"data-testid": name ? `toggle-${name}` : void 0,
+				readOnly
+			}), /* @__PURE__ */ jsx(StyledToggle, {
+				active: !!checked,
+				disabled,
+				...rest,
+				children: /* @__PURE__ */ jsx(StyledDot, {})
+			})]
+		})]
+	});
+};
+//#endregion
+export { Toggle as default };

package/ui/Elements/Toggle/index.d.js

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

package/ui/Elements/Toggle/index.d.ts

@@ -1,4 +1,3 @@
-import { default as Toggle } from './Toggle';
-
+import Toggle from './Toggle';
 export { Toggle };
 export default Toggle;

package/ui/Elements/Toggle/index.js

@@ -0,0 +1,5 @@
+import Toggle from "./Toggle.js";
+//#region packages/ui/Elements/Toggle/index.ts
+var Toggle_default = Toggle;
+//#endregion
+export { Toggle, Toggle_default as default };

package/ui/Elements/Toggle/stories/Toggle.stories.d.ts

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').Props>;
+    component: import("react").FC<import("../types").Props>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Toggle/types.d.ts

@@ -1,5 +1,4 @@
 import { ChangeEvent } from 'react';
-
 type SpaceAroundProps = {
     marginTop?: number;
     marginRight?: number;

package/ui/Elements/Toggle/types.js

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

package/ui/Elements/Tooltip/Tooltip.d.ts

@@ -1,6 +1,5 @@
-import { default as React, ReactNode, FC } from 'react';
-import { Placement } from '@popperjs/core';
-
+import React, { type ReactNode, type FC } from 'react';
+import { type Placement } from '@popperjs/core';
 export type Props = {
     children?: React.ReactNode;
     placement?: Placement;

package/ui/Elements/Tooltip/Tooltip.js

@@ -0,0 +1,51 @@
+import { Paragraph4 } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import Popover from "../../Blocks/Popover/index.js";
+import { useRef, useState } from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Tooltip/Tooltip.tsx
+const Container = styled$1.div`
+  width: fit-content;
+`;
+const TooltipWrapper = styled$1.div`
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  padding: 8px 10px;
+  margin-top: 4px;
+  border-radius: 8px;
+  box-shadow: tooltipShadow;
+  gap: 2px;
+`;
+const Tooltip = ({ children, placement, title, subtitle }) => {
+	const [visible, setVisible] = useState(false);
+	const ref = useRef(null);
+	const handleMouseEnter = () => {
+		setVisible(true);
+	};
+	const handleMouseLeave = () => {
+		setVisible(false);
+	};
+	return /* @__PURE__ */ jsxs(Container, {
+		ref,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [children, visible && /* @__PURE__ */ jsx(Popover, {
+			parentRef: ref,
+			placement: placement ?? "bottom",
+			children: /* @__PURE__ */ jsxs(TooltipWrapper, { children: [title && /* @__PURE__ */ jsx(Paragraph4, {
+				mt: 1,
+				mb: 1,
+				variant: "bold",
+				children: title
+			}), subtitle && /* @__PURE__ */ jsx(Paragraph4, {
+				mt: 1,
+				mb: 1,
+				children: subtitle
+			})] })
+		})]
+	});
+};
+//#endregion
+export { Tooltip as default };

package/ui/Elements/Tooltip/index.d.js

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

package/ui/Elements/Tooltip/index.d.ts

@@ -1,4 +1,3 @@
-import { default as Tooltip } from './Tooltip';
-
+import Tooltip from './Tooltip';
 export { Tooltip };
 export default Tooltip;

package/ui/Elements/Tooltip/index.js

@@ -0,0 +1,5 @@
+import Tooltip from "./Tooltip.js";
+//#region packages/ui/Elements/Tooltip/index.ts
+var Tooltip_default = Tooltip;
+//#endregion
+export { Tooltip, Tooltip_default as default };

package/ui/Elements/Tooltip/stories/Tooltip.stories.d.ts

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../Tooltip').Props>;
+    component: import("react").FC<import("../Tooltip").Props>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Typography/Typography.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { TextProps as BaseTextProps } from '../Text';
-
+import { type FC } from 'react';
+import { type TextProps as BaseTextProps } from '../Text';
 export declare const Text: FC<BaseTextProps>;
 export declare const Paragraph1: FC<BaseTextProps>;
 export declare const Paragraph2: FC<BaseTextProps>;

package/ui/Elements/Typography/Typography.js

@@ -0,0 +1,75 @@
+import Text$1 from "../Text/Text.js";
+import "../Text/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Typography/Typography.tsx
+const Text = ({ as = "p", fontFamily = "primary", fontSize = "10px", variant, ...props }) => /* @__PURE__ */ jsx(Text$1, {
+	as,
+	fontFamily,
+	fontSize,
+	fontWeight: variant,
+	...props
+});
+const BaseHeading = ({ fontFamily = "heading", mb = 2, mt = 2, ...props }) => /* @__PURE__ */ jsx(Text, {
+	fontFamily,
+	mt,
+	mb,
+	...props
+});
+const Paragraph1 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "18px",
+	...props
+});
+const Paragraph2 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "16px",
+	...props
+});
+const Paragraph3 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "14px",
+	...props
+});
+const Paragraph4 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "12px",
+	...props
+});
+const Paragraph5 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "10px",
+	...props
+});
+const H1 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "32px",
+	as: "h1",
+	...props
+});
+const H2 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "24px",
+	as: "h2",
+	...props
+});
+const H3 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "21px",
+	as: "h3",
+	...props
+});
+const H4 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "18px",
+	as: "h4",
+	...props
+});
+const H5 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "16px",
+	as: "h5",
+	...props
+});
+const H6 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "14px",
+	as: "h6",
+	...props
+});
+const H7 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "12px",
+	as: "h6",
+	...props
+});
+//#endregion
+export { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text };

package/ui/Elements/Typography/index.d.js

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

package/ui/Elements/Typography/index.d.ts

@@ -1,4 +1,3 @@
 import { Text } from './Typography';
-
 export * from './Typography';
 export default Text;

package/ui/Elements/Typography/index.js

@@ -0,0 +1,5 @@
+import { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text } from "./Typography.js";
+//#region packages/ui/Elements/Typography/index.ts
+var Typography_default = Text;
+//#endregion
+export { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text, Typography_default as default };

package/ui/Elements/Typography/stories/Typography.stories.d.ts

@@ -1,5 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
     tags: string[];

package/ui/Forms/Checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-import { CheckboxProps } from './types';
-
+import React from 'react';
+import { type CheckboxProps } from './types';
 declare const _default: React.NamedExoticComponent<CheckboxProps>;
 export default _default;

package/ui/Forms/Checkbox/Checkbox.js

@@ -0,0 +1,44 @@
+import { CheckIcon, CheckboxWrap, FakeInput, Label } from "./styles.js";
+import { memo, useId } from "react";
+import { th, useTheme } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Forms/Checkbox/Checkbox.tsx
+const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = 4, className, disabled, inputRef, readOnly, minusIcon = false }) => {
+	const theme = useTheme();
+	const themeSize = th.fontSize(size)({ theme });
+	const id = useId();
+	return /* @__PURE__ */ jsxs(CheckboxWrap, {
+		size: themeSize,
+		className,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				ref: inputRef,
+				name,
+				checked,
+				defaultChecked,
+				disabled,
+				onChange,
+				value: "",
+				readOnly,
+				"data-cy": name ? `${name}Checkbox` : void 0,
+				"data-testid": name ? `checkbox-${name}` : void 0,
+				id
+			}),
+			/* @__PURE__ */ jsx(FakeInput, {
+				size: themeSize,
+				children: /* @__PURE__ */ jsx(CheckIcon, {
+					icon: minusIcon ? "minus" : "check",
+					size: themeSize
+				})
+			}),
+			label && /* @__PURE__ */ jsx(Label, {
+				htmlFor: id,
+				children: label
+			})
+		]
+	});
+};
+var Checkbox_default = memo(Checkbox);
+//#endregion
+export { Checkbox_default as default };

package/ui/Forms/Checkbox/index.d.js

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

package/ui/Forms/Checkbox/index.d.ts

@@ -1,4 +1,3 @@
-import { default as Checkbox } from './Checkbox';
-
+import Checkbox from './Checkbox';
 export { Checkbox };
 export default Checkbox;

package/ui/Forms/Checkbox/index.js

@@ -0,0 +1,5 @@
+import Checkbox_default from "./Checkbox.js";
+//#region packages/ui/Forms/Checkbox/index.ts
+var Checkbox_default$1 = Checkbox_default;
+//#endregion
+export { Checkbox_default as Checkbox, Checkbox_default$1 as default };

package/ui/Forms/Checkbox/stories/Checkbox.stories.d.ts

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react-webpack5';
-
 declare const meta: {
     title: string;
-    component: import('react').NamedExoticComponent<import('../types').CheckboxProps>;
+    component: import("react").NamedExoticComponent<import("../types").CheckboxProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Forms/Checkbox/styles.d.ts

@@ -1,10 +1,10 @@
-export declare const FakeInput: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
-export declare const CheckIcon: import('styled-components').StyledComponent<import('react').FC<import('../..').IconProps>, import('@xstyled/system').Theme, {
+export declare const CheckIcon: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
-export declare const CheckboxWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
-export declare const Label: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/Checkbox/styles.js

@@ -0,0 +1,94 @@
+import Icon from "../../Elements/Icon/Icon.js";
+import "../../Elements/Icon/index.js";
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Forms/Checkbox/styles.ts
+const FakeInput = styled$1.div`
+  width: ${({ size }) => size};
+  min-width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border-radius: md;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  transform: rotate(0);
+  overflow: hidden;
+  border: slim;
+  border-color: lightGray5;
+
+  input[type='checkbox']:not(:disabled):hover + & {
+    border-color: gray1;
+  }
+
+  input[type='checkbox']:disabled + & {
+    background-color: white;
+    border-color: lightGray7;
+  }
+
+  input[type='checkbox']:checked:disabled + & {
+    background-color: bgLightGray1;
+    border-color: bgLightGray1;
+  }
+
+  input[type='checkbox']:checked:not(:disabled) + & {
+    transform: rotate(0deg);
+    background-color: red1;
+    border-color: red1;
+  }
+
+  input[type='checkbox']:not(:checked):not(:disabled) + & {
+    transform: rotate(90deg);
+    background-color: white;
+    border-color: lightGray5;
+  }
+`;
+const CheckIcon = styled$1(Icon)`
+  border-radius: lg;
+  transition: all 200ms ease;
+  & svg {
+    width: 70% !important;
+  }
+  & path {
+    fill: none;
+    stroke: none;
+  }
+
+  input[type='checkbox']:not(:disabled):checked + ${FakeInput} & {
+    & path {
+      stroke: white;
+      fill: white;
+    }
+  }
+
+  input[type='checkbox']:disabled:checked + ${FakeInput} & {
+    & path {
+      fill: ${th.color("lightGray5")} !important;
+    }
+  }
+`;
+const CheckboxWrap = styled$1.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  input {
+    margin: 0;
+    width: ${({ size }) => size};
+    height: ${({ size }) => size};
+    z-index: 1;
+    position: absolute;
+    opacity: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    cursor: pointer;
+  }
+`;
+const Label = styled$1.label`
+  margin: 0;
+  margin-left: 8px;
+  font-size: 14px;
+`;
+//#endregion
+export { CheckIcon, CheckboxWrap, FakeInput, Label };

package/ui/Forms/Checkbox/types.d.ts

@@ -1,5 +1,4 @@
-import { ChangeEvent, RefObject, ReactNode } from 'react';
-
+import { type ChangeEvent, type RefObject, type ReactNode } from 'react';
 export type CheckboxProps = {
     name?: string;
     label?: string | ReactNode;

package/ui/Forms/Checkbox/types.js

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

package/ui/Forms/Input/Input.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { InputProps } from './types';
-
+import { type FC } from 'react';
+import { type InputProps } from './types';
 export declare const Input: FC<InputProps>;