material-you-react
Version:
Material You: Material You (M3) Design system and its components for simple integration with Next.Js or other react-based frameworks
991 lines (974 loc) • 69 kB
JavaScript
import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useLayoutEffect, cloneElement, createRef } from 'react';
/**
* @params backgroundColor: string - sets Background color
* @params items: string[] - An array of icon names to display. Example: `['home', 'search']`.
* @params floatingActionButton: Displays the FAB when `true`. Example: `true`. |
* @returns React.ReactNode-
* @description
* This component is a BottomAppBar component.
*/
function BottomAppBar({ innerRef, ...props }) {
var _a;
const [isHovered, setIsHovered] = useState(false);
const [isActive, setIsActive] = useState(false);
return (React.createElement("div", { ref: innerRef, id: "bottomAppBar", className: "bottom-app-bar", style: {
backgroundColor: `${(_a = props.backgroundColor) !== null && _a !== void 0 ? _a : "rgb(var(--md-sys-color-surface-container))"}`,
width: "100vw",
height: "80px",
padding: props.floatingActionButton ? "16px" : "12px 16px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
position: "fixed",
bottom: 0,
left: 0,
} },
React.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "16px",
} }, props.items.map((element, index) => (React.createElement("span", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: () => setIsActive(true), onMouseUp: () => setIsActive(false), key: index, className: `md-elevation
${!isHovered ? "md-elevation-0" : "md-elevation-1"}
label-large material-symbols-rounded`, style: {
width: "24px",
height: "24px",
cursor: "pointer",
color: `${isActive
? "rgb(var(--md-sys-color-on-tertiary-container))"
: "rgb(var(--md-sys-color-on-secondary-container))"}`,
} }, element || "add")))),
props.floatingActionButton));
}
function TopAppBarCenterAligned(props) {
var _a;
const [isScrolled, setScrollState] = useState(false);
window.onscroll = function () {
if (window.scrollY > 0) {
setScrollState(true);
}
else {
setScrollState(false);
}
};
return (React.createElement("div", { className: `md-elevation $isScrolled ? "md-elevation-2" : "md-elevation-0"}`, style: {
zIndex: 1,
backgroundColor: `${(_a = props.containerBackgroundColor) !== null && _a !== void 0 ? _a : (isScrolled
? "rgb(var(--md-sys-color-surface-container))"
: "rgb(var(--md-sys-color-surface))")}`,
position: "sticky",
width: "100vw",
height: "64px",
borderRadius: "0px",
padding: "0px 16px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "24px",
top: "0",
left: "0",
color: "rgb(var(--md-sys-color-on-surface))",
} },
React.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "48px",
height: "48px",
cursor: "pointer",
} }, props.leadingIcon && (React.createElement("div", { style: {
width: "24px",
height: "24px",
} },
React.createElement("span", { className: "material-symbols-rounded" }, props.leadingIcon || "arrow_back")))),
React.createElement("p", { className: "title-large", style: {
width: "fit-content",
color: "rgb(var(--md-sys-color-on-surface))",
} }, props.headline),
props.avatar || props.avatarImage ? (React.createElement("div", { key: "avatar", style: {
width: "48px",
fontSize: "30px",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "48px",
cursor: "pointer",
color: "rgb(var(--md-sys-color-on-surface-variant))",
} }, props.avatarImage ? (React.createElement("img", { src: props.avatarImage, style: {
width: "30px",
height: "30px",
objectFit: "cover",
borderRadius: "15px",
} })) : (React.createElement("span", { className: "material-symbols-rounded", style: {
fontSize: "30px",
} }, "account_circle")))) : (React.createElement("div", { style: {
width: "48px",
fontSize: "30px",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "48px",
cursor: "pointer",
color: "rgb(var(--md-sys-color-on-surface-variant))",
} }))));
}
function TopAppBarCenterSmall(props) {
var _a;
const [isScrolled, setScrollState] = useState(false);
window.onscroll = function () {
if (window.scrollY > 0) {
setScrollState(true);
}
else {
setScrollState(false);
}
};
return (React.createElement("div", { className: `${isScrolled ? "md-elevation-2" : "md-elevation-0"} md-elevation`, style: {
zIndex: 1,
backgroundColor: `${(_a = props.containerBackgroundColor) !== null && _a !== void 0 ? _a : (isScrolled
? "rgb(var(--md-sys-color-surface-container))"
: "rgb(var(--md-sys-color-surface))")}`,
position: "sticky",
width: "100vw",
height: "64px",
borderRadius: "0px",
padding: "0px 16px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "24px",
top: "0",
left: "0",
color: "rgb(var(--md-sys-color-on-surface))",
} },
React.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "16px",
} },
props.leadingIcon && (React.createElement("div", { style: {
width: "24px",
height: "24px",
cursor: "pointer",
} },
React.createElement("span", { className: "material-symbols-rounded" }, props.leadingIcon || "arrow_back"))),
React.createElement("p", { className: "title-large", style: {
color: "rgb(var(--md-sys-color-on-surface))",
} }, props.headline)),
(props.trailingIcons || props.avatar || props.avatarImage) && (React.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "24px",
} },
props.trailingIcons &&
props.trailingIcons.map((icon, index) => (React.createElement("div", { key: index, style: {
width: "24px",
height: "24px",
cursor: "pointer",
color: "rgb(var(--md-sys-color-on-surface-variant))",
} },
React.createElement("span", { className: "material-symbols-rounded" }, icon)))),
(props.avatar || props.avatarImage) && (React.createElement("div", { key: "avatar", style: {
width: "48px",
fontSize: "30px",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "48px",
cursor: "pointer",
color: "rgb(var(--md-sys-color-on-surface-variant))",
} }, props.avatarImage ? (React.createElement("img", { src: props.avatarImage, style: {
width: "30px",
height: "30px",
objectFit: "cover",
borderRadius: "15px",
} })) : (React.createElement("span", { className: "material-symbols-rounded", style: {
fontSize: "30px",
} }, "account_circle"))))))));
}
function TopAppBarCenterMedium(props) {
var _a;
const [isScrolled, setScrollState] = useState(false);
const [scrollY, setScrollY] = useState(0);
window.onscroll = function () {
if (window.scrollY > 0) {
setScrollY(window.scrollY);
setScrollState(true);
}
else {
setScrollY(0);
setScrollState(false);
}
};
return (React.createElement("div", { className: "md-elevation-0 md-elevation", style: {
zIndex: 1,
backgroundColor: `${((_a = props.containerBackgroundColor) !== null && _a !== void 0 ? _a : isScrolled)
? "rgb(var(--md-sys-color-surface-container))"
: "rgb(var(--md-sys-color-surface))"}`,
width: "100vw",
height: isScrolled ? `${112 - Math.min(96, scrollY) / 2}px` : "112px",
borderRadius: "0px",
padding: isScrolled ? "0px 16px" : "20px 16px 24px 24px",
display: "flex",
justifyContent: "space-between",
alignItems: isScrolled ? "center" : "start",
gap: "24px",
position: "sticky",
top: "0",
left: "0",
transition: "all 0.3s ease",
} },
React.createElement("div", { style: {
transition: "all 0.3s ease",
display: "flex",
flexDirection: isScrolled ? "row" : "column",
justifyContent: isScrolled ? "space-between" : "start",
alignItems: "start",
gap: "16px",
width: isScrolled ? `100%` : "auto",
} },
React.createElement("div", { style: {
width: "24px",
height: "24px",
color: "rgb(var(--md-sys-color-on-surface))",
cursor: "pointer",
} },
React.createElement("span", { className: "material-symbols-rounded" }, props.leadingIcon || "arrow_back")),
React.createElement("p", { className: isScrolled ? "title-large" : "headline-small", style: {
width: isScrolled ? "100%" : "auto",
transition: "all 0.3s ease",
textAlign: isScrolled ? "center" : "start",
color: "rgb(var(--md-sys-color-on-surface))",
} }, props.headline)),
props.trailingIcons && (React.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "24px",
} }, props.trailingIcons.map((icon, index) => (React.createElement("div", { key: index, style: {
width: "24px",
height: "24px",
color: "rgb(var(--md-sys-color-on-surface-variant))",
cursor: "pointer",
} },
React.createElement("span", { className: "material-symbols-rounded" }, icon))))))));
}
function TopAppBarCenterLarge(props) {
var _a;
const [isScrolled, setScrollState] = useState(false);
const [scrollY, setScrollY] = useState(0);
window.onscroll = function () {
if (window.scrollY > 0) {
setScrollState(true);
setScrollY(window.scrollY);
}
else {
setScrollState(false);
setScrollY(0);
}
};
return (React.createElement("div", { style: {
zIndex: 1,
backgroundColor: `${((_a = props.containerBackgroundColor) !== null && _a !== void 0 ? _a : isScrolled)
? "rgb(var(--md-sys-color-surface-container))"
: "rgb(var(--md-sys-color-surface))"}`,
width: "100vw",
height: isScrolled ? `${152 - Math.min(64, scrollY) / 2}px` : "152px",
borderRadius: "0px",
padding: isScrolled ? "16px" : "20px 16px 28px",
display: "flex",
justifyContent: "space-between",
alignItems: "start",
gap: "24px",
position: "sticky",
top: "0",
left: "0",
} },
React.createElement("div", { style: {
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "start",
gap: "16px",
} },
React.createElement("div", { style: {
width: "24px",
height: "24px",
color: "rgb(var(--md-sys-color-on-surface))",
cursor: "pointer",
} },
React.createElement("span", { className: "material-symbols-rounded" }, props.leadingIcon || "arrow_back")),
React.createElement("p", { className: "headline-medium", style: {
whiteSpace: "pre-line",
color: "rgb(var(--md-sys-color-on-surface))",
} }, props.headline)),
props.trailingIcons && (React.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "24px",
} }, props.trailingIcons.map((icon, index) => (React.createElement("div", { key: index, style: {
width: "24px",
height: "24px",
color: "rgb(var(--md-sys-color-on-surface-variant))",
cursor: "pointer",
} },
React.createElement("span", { className: "material-symbols-rounded" }, icon))))))));
}
const ElevatedButton = (props) => {
const [isHovered, setIsHovered] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const [isFocusedWithKeyboard, setIsFocusedWithKeyboard] = useState(true);
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
const params = {};
props.onClick(params);
};
return (React.createElement("button", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => {
setIsFocused(false);
setIsFocusedWithKeyboard(true);
}, onMouseDown: () => {
setIsActive(true);
setIsFocusedWithKeyboard(false);
}, onTouchStart: () => setIsFocusedWithKeyboard(false), onMouseUp: () => setIsActive(false), disabled: props.disabled, onClick: props.disabled ? undefined : handleClick, className: ` md-elevation ${props.disabled
? "md-elevation-0"
: isActive || isFocused || !isHovered
? "md-elevation-1"
: "md-elevation-2"} label-large`, style: {
width: props.width || "fit-content",
outlineOffset: isFocused && isFocusedWithKeyboard ? "2px" : undefined,
outline: isFocused && isFocusedWithKeyboard
? "3px solid rgb(var(--md-sys-color-secondary))"
: "",
cursor: props.disabled ? "not-allowed" : "pointer",
display: "flex",
height: "40px",
backgroundColor: props.disabled
? "rgba(var(--md-sys-color-on-surface), 12%)"
: isFocused || isActive
? `color-mix(in srgb, ${props.containerColor ||
"rgb(var(--md-sys-color-surface-container-low))"},rgb(var(--md-sys-color-primary)) 10%)`
: isHovered
? `color-mix(in srgb, ${props.containerColor ||
"rgb(var(--md-sys-color-surface-container-low))"},rgb(var(--md-sys-color-primary)) 8%)`
: `${props.containerColor ||
"rgb(var(--md-sys-color-surface-container-low))"}`,
borderRadius: "20px",
padding: props.icon != null ? "0px 24px 0px 16px" : "0px 24px",
alignItems: "center",
justifyContent: "center",
color: props.disabled
? "rgba(var(--md-sys-color-on-surface), 38%)"
: props.contentColor || "rgb(var(--md-sys-color-primary))",
} },
props.icon && (React.createElement("span", { className: "material-symbols-rounded", style: {
fontSize: "18px !important",
marginRight: "8px",
} }, props.icon)),
props.children));
};
const FilledButton = (props) => {
var _a;
const [isHovered, setIsHovered] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const [isActive, setIsActive] = useState(false);
const [isFocusedWithKeyboard, setIsFocusedWithKeyboard] = useState(true);
const [isDragged, setIsDragged] = useState(false);
const handleClick = () => {
const params = {};
props.onClick(params);
};
return (React.createElement("button", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => {
setIsFocused(false);
setIsFocusedWithKeyboard(true);
}, onMouseDown: () => {
setIsActive(true);
setIsFocusedWithKeyboard(false);
}, onTouchStart: () => setIsFocusedWithKeyboard(false), onMouseUp: () => setIsActive(false), onDragStart: () => setIsDragged(true), onDragEnd: () => setIsDragged(false), draggable: (_a = props.draggable) !== null && _a !== void 0 ? _a : true, disabled: props.disabled, onClick: props.disabled ? undefined : handleClick, className: ` md-elevation
${isDragged
? "md-elevation-3"
: !isHovered
? "md-elevation-0"
: "md-elevation-1"}
label-large`, style: {
width: props.width || "fit-content",
outlineOffset: isFocusedWithKeyboard ? "2px" : undefined,
outline: isFocused && !isDragged && isFocusedWithKeyboard
? "3px solid rgb(var(--md-sys-color-secondary))"
: "",
cursor: props.disabled ? "not-allowed" : "pointer",
display: "flex",
height: "40px",
backgroundColor: props.disabled
? "rgba(var(--md-sys-color-on-surface), 12%)"
: isDragged
? `color-mix(in srgb, ${props.containerColor || "rgb(var(--md-sys-color-primary))"},rgb(var(--md-sys-color-on-primary)) 16%)`
: isFocused || isActive
? `color-mix(in srgb, ${props.containerColor || "rgb(var(--md-sys-color-primary))"},rgb(var(--md-sys-color-on-primary)) 10%)`
: isHovered
? `color-mix(in srgb, ${props.containerColor || "rgb(var(--md-sys-color-primary))"},rgb(var(--md-sys-color-on-primary)) 8%)`
: `${props.containerColor || "rgb(var(--md-sys-color-primary))"}`,
borderRadius: "20px",
padding: props.icon != null ? "0px 24px 0px 16px" : "0px 24px",
alignItems: "center",
justifyContent: "center",
color: props.disabled
? "rgba(var(--md-sys-color-on-surface), 38%)"
: props.contentColor || "rgb(var(--md-sys-color-on-primary))",
} },
props.icon && (React.createElement("span", { className: "material-symbols-rounded", style: {
fontSize: "18px !important",
marginRight: "8px",
} }, props.icon)),
props.children));
};
const FilledTonalButton = (props) => {
return (React.createElement(FilledButton, { onClick: props.onClick, children: props.children, icon: props.icon, disabled: props.disabled, containerColor: "rgb(var(--md-sys-color-secondary-container))", contentColor: "rgb(var(--md-sys-color-on-secondary-container))", width: props.width, draggable: false }));
};
const OutlinedButton = (props) => {
const [isHovered, setIsHovered] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const [isActive, setIsActive] = useState(false);
const [isFocusedWithKeyboard, setIsFocusedWithKeyboard] = useState(true);
const handleClick = () => {
const params = {};
props.onClick(params);
};
return (React.createElement("button", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => {
setIsFocused(false);
setIsFocusedWithKeyboard(true);
}, onMouseDown: () => {
setIsActive(true);
setIsFocusedWithKeyboard(false);
}, onTouchStart: () => setIsFocusedWithKeyboard(false), onMouseUp: () => setIsActive(false), onClick: props.disabled ? undefined : handleClick, disabled: props.disabled, className: `md-elevation-0
label-large`, style: {
width: props.width || "fit-content",
outlineOffset: isFocused && isFocusedWithKeyboard ? "2px" : undefined,
outline: isFocused && isFocusedWithKeyboard
? "3px solid rgb(var(--md-sys-color-secondary))"
: "",
border: props.disabled
? "rgba(var(--md-sys-color-on-surface), 12%)"
: isFocused
? "1px solid rgb(var(--md-sys-color-primary))"
: "1px solid rgb(var(--md-sys-color-outline))",
cursor: props.disabled ? "not-allowed" : "pointer",
display: "flex",
height: "40px",
backgroundColor: props.disabled
? "transparent"
: //
isFocused || isActive
? `rgba(var(--md-sys-color-primary), 10%)`
: isHovered
? `rgba(var(--md-sys-color-primary), 8%)`
: "transparent",
// : `${props.containerColor || "rgb(var(--md-sys-color-primary))"}`,
borderRadius: "20px",
padding: props.icon != null ? "0px 24px 0px 16px" : "0px 24px",
alignItems: "center",
justifyContent: "center",
color: props.disabled
? "rgba(var(--md-sys-color-on-surface), 38%)"
: props.contentColor || "rgb(var(--md-sys-color-primary))",
} },
props.icon && (React.createElement("span", { className: "material-symbols-rounded", style: {
fontSize: "18px !important",
marginRight: "8px",
} }, props.icon)),
props.children));
};
const TextButton = (props) => {
const [isHovered, setIsHovered] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const [isActive, setIsActive] = useState(false);
const [isFocusedWithKeyboard, setIsFocusedWithKeyboard] = useState(true);
const handleClick = () => {
const params = {};
props.onClick(params);
};
return (React.createElement("button", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => {
setIsFocused(false);
setIsFocusedWithKeyboard(true);
}, onMouseDown: () => {
setIsActive(true);
setIsFocusedWithKeyboard(false);
}, onTouchStart: () => setIsFocusedWithKeyboard(false), onMouseUp: () => setIsActive(false), disabled: props.disabled, className: `md-elevation-0
label-large`, onClick: props.disabled ? undefined : handleClick, style: {
width: props.width || "fit-content",
outlineOffset: isFocused && isFocusedWithKeyboard ? "2px" : undefined,
outline: isFocused && isFocusedWithKeyboard
? "3px solid rgb(var(--md-sys-color-secondary))"
: "",
cursor: props.disabled ? "not-allowed" : "pointer",
display: "flex",
height: "40px",
backgroundColor: props.disabled
? "transparent"
: //
isFocused || isActive
? `rgba(var(--md-sys-color-primary), 10%)`
: isHovered
? `rgba(var(--md-sys-color-primary), 8%)`
: "transparent",
// : `${props.containerColor || "rgb(var(--md-sys-color-primary))"}`,
borderRadius: "20px",
padding: props.icon != null ? "0px 16px 0px 12px" : "0px 12px",
alignItems: "center",
justifyContent: "center",
color: props.disabled
? "rgba(var(--md-sys-color-on-surface), 38%)"
: props.contentColor || "rgb(var(--md-sys-color-primary))",
} },
props.icon && (React.createElement("span", { className: "material-symbols-rounded", style: {
fontSize: "18px !important",
marginRight: "8px",
} }, props.icon)),
props.children));
};
const FloatingActionButton = (props) => {
const ref = useRef(null);
const [parentClass, setParentClass] = useState("");
useEffect(() => {
var _a;
const domNode = ref.current;
if (domNode !== undefined && domNode !== null && domNode.parentNode) {
setParentClass(((_a = domNode.parentElement) === null || _a === void 0 ? void 0 : _a.className) || "ID");
}
}, [ref.current]);
const handleClick = () => {
const params = {};
props.onClick(params);
};
return (React.createElement("button", { onClick: handleClick, ref: ref, className: parentClass.includes("bottom-app-bar")
? "md-elevation-0"
: "md-elevation-3", style: {
backgroundColor: "rgb(var(--md-sys-color-primary-container))",
width: "56px",
height: "56px",
borderRadius: "16px",
display: "flex",
justifyContent: "center",
alignItems: "center",
} },
React.createElement("span", { className: "material-symbols-rounded", style: {
width: "24px",
height: "24px",
color: "rgb(var(--md-sys-color-on-primary-container))",
} }, "add")));
};
function FilledTextField(props) {
var _a;
const [givenInputType, setGivenInputType] = useState("");
const [isFocused, setIsFocused] = useState(false);
const textareaRef = useRef(null);
const handleInputChange = (e) => {
props.onValueChange(e.target.value);
};
const handleTrailingIconClick = (e) => {
console.log("trailing button is clicked");
if (props.inputType === "password") {
setGivenInputType(givenInputType === "text" ? "password" : "text");
}
else {
props.onValueChange("");
}
};
useEffect(() => {
var _a;
if (props.type === "textarea" && textareaRef.current) {
const textarea = textareaRef.current;
textarea.style.height = "auto";
textarea.style.height = `${textarea.scrollHeight}px`;
}
if (givenInputType === "") {
setGivenInputType((_a = props.inputType) !== null && _a !== void 0 ? _a : "text");
}
}, [props.value, props.type]);
return (React.createElement("div", { style: {
width: (_a = props.containerWidth) !== null && _a !== void 0 ? _a : "",
display: "flex",
flexDirection: "column",
justifyContent: "start",
alignItems: "center",
gap: "4px",
opacity: props.disabled ? 0.4 : 1,
pointerEvents: props.disabled ? "none" : "auto",
cursor: "pointer",
transition: "all 0.3s ease",
} },
React.createElement("div", { className: `filled-text-field-inner-container ${isFocused ? "focused" : ""} ${props.error ? "error" : ""}`, style: {
width: "100%",
minHeight: "56px",
height: "auto",
padding: `${props.leadingIcon && props.trailingIcon
? "8px 12px"
: props.leadingIcon
? "8px 16px 8px 12px"
: "8px 16px"}`,
borderTopLeftRadius: "4px",
borderTopRightRadius: "4px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: `${props.leadingIcon || props.trailingIcon ? "16px" : "0px"}`,
}, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) },
props.leadingIcon && (React.createElement("div", { className: `filled-text-field-leading-icon ${props.error && "error"}`, style: {
width: "24px",
height: "24px",
color: "rgb(var(--md-sys-color-on-surface-variant))",
cursor: "none",
} },
React.createElement("span", { className: "material-symbols-rounded" }, props.leadingIcon || ""))),
React.createElement("div", { className: "filled-text-field-input-box", style: { position: "relative" } },
props.type === "textarea" ? (React.createElement("textarea", { ref: textareaRef, value: props.value, required: props.required, disabled: props.disabled, maxLength: props.maxLength, onChange: handleInputChange, placeholder: "", className: `filled-text-field-input ${props.error ? "error" : ""}`, style: {
color: "rgb(var(--md-sys-color-on-surface))",
font: "var(--md-sys-typescale-body-large-font)",
lineHeight: "var(--md-sys-typescale-body-large-line-height)",
fontSize: "var(--md-sys-typescale-body-large-size)",
fontWeight: "var(--md-sys-typescale-body-large-weight)",
letterSpacing: "var(--md-sys-typescale-body-large-tracking)",
caretColor: props.error
? "rgb(var(--md-sys-color-error))"
: "rgb(var(--md-sys-color-primary))",
resize: "none",
overflow: "hidden",
} })) : (React.createElement("input", { type: givenInputType, value: props.value, required: props.required, disabled: props.disabled, maxLength: props.maxLength, onChange: handleInputChange, placeholder: "", className: `filled-text-field-input ${props.error ? "error" : ""}`, style: {
color: "rgb(var(--md-sys-color-on-surface))",
font: "var(--md-sys-typescale-body-large-font)",
lineHeight: "var(--md-sys-typescale-body-large-line-height)",
fontSize: "var(--md-sys-typescale-body-large-size)",
fontWeight: "var(--md-sys-typescale-body-large-weight)",
letterSpacing: "var(--md-sys-typescale-body-large-tracking)",
caretColor: props.error
? "rgb(var(--md-sys-color-error))"
: "rgb(var(--md-sys-color-primary))",
} })),
React.createElement("label", { className: `filled-text-field-label ${props.error ? "error" : ""}` },
props.labelText,
props.required && "*")),
props.trailingIcon && props.value.length > 0 && (React.createElement("div", { onClick: (e) => handleTrailingIconClick(), className: `filled-text-field-trailing-icon ${props.error && "error"}`, style: {
width: "24px",
height: "24px",
cursor: "pointer",
userSelect: "none",
} },
" ",
props.inputType === "password" ? (React.createElement("span", { className: "material-symbols-rounded" }, givenInputType === "text" ? "visibility_off" : "visibility")) : (React.createElement("span", { className: "material-symbols-rounded" }, props.trailingIcon || ""))))),
React.createElement("div", { style: {
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "start",
padding: "0px 16px",
gap: "16px",
color: `${props.error
? "rgb(var(--md-sys-color-error))"
: "rgb(var(--md-sys-color-on-surface-variant))"}`,
font: "var(--md-sys-typescale-body-small-font)",
fontWeight: "var(--md-sys-typescale-body-small-weight)",
fontSize: "var(--md-sys-typescale-body-small-size)",
lineHeight: "var(--md-sys-typescale-body-small-line-height)",
letterSpacing: "var(--md-sys-typescale-body-small-tracking)",
} },
React.createElement("p", null, props.supportingText),
props.maxLength && (React.createElement("p", null,
props.value.length,
"/",
props.maxLength)))));
}
function OutlinedTextField(props) {
var _a;
const [givenInputType, setGivenInputType] = useState("");
const [isFocused, setIsFocused] = useState(false);
const [parentBGColor, setParentBGColor] = useState("");
const textareaRef = useRef(null);
const childRef = useRef(null);
const handleInputChange = (e) => {
props.onValueChange(e.target.value);
};
// Recursively gets the background color of the parent, which uses this component.
const getParentBackgroundColor = (element) => {
if (!element)
return null;
const computedStyle = window.getComputedStyle(element);
const bgColor = computedStyle.backgroundColor;
if (bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)") {
return bgColor;
}
return getParentBackgroundColor(element.parentElement);
};
const handleTrailingIconClick = (e) => {
console.log("trailing button is clicked");
if (props.inputType === "password") {
setGivenInputType(givenInputType === "text" ? "password" : "text");
}
else {
props.onValueChange("");
}
};
useEffect(() => {
var _a;
if (props.type === "textarea" && textareaRef.current) {
const textarea = textareaRef.current;
textarea.style.height = "auto";
textarea.style.height = `${textarea.scrollHeight}px`;
}
if (parentBGColor === "") {
if (childRef.current) {
let parentBackgroundColor = getParentBackgroundColor(childRef.current);
setParentBGColor(parentBackgroundColor);
}
}
if (givenInputType === "") {
setGivenInputType((_a = props.inputType) !== null && _a !== void 0 ? _a : "text");
}
}, [props.value, props.type]);
return (React.createElement("div", { ref: childRef, style: {
width: (_a = props.containerWidth) !== null && _a !== void 0 ? _a : "",
display: "flex",
flexDirection: "column",
justifyContent: "start",
alignItems: "center",
gap: "4px",
opacity: props.disabled ? 0.4 : 1,
pointerEvents: props.disabled ? "none" : "auto",
cursor: "pointer",
transition: "all 0.3s ease",
} },
React.createElement("div", { className: `outlined-text-field-inner-container ${isFocused ? "focused" : ""} ${props.error ? "error" : ""}`, style: {
minHeight: "56px",
height: "auto",
padding: `${props.leadingIcon && props.trailingIcon
? "8px 12px"
: props.leadingIcon
? "8px 16px 8px 12px"
: "8px 16px"}`,
borderRadius: "var(--md-sys-shape-corner-extra-small-default-size)",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: `${props.leadingIcon || props.trailingIcon ? "16px" : "0px"}`,
}, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) },
props.leadingIcon && (React.createElement("div", { className: `outlined-text-field-leading-icon ${props.error && "error"}`, style: {
width: "24px",
height: "24px",
cursor: "none",
userSelect: "none",
} },
React.createElement("span", { className: "material-symbols-rounded" }, props.leadingIcon || ""))),
React.createElement("div", { className: "filled-text-field-input-box", style: { position: "relative" } },
props.type === "textarea" ? (React.createElement("textarea", { ref: textareaRef, value: props.value, required: props.required, disabled: props.disabled, maxLength: props.maxLength, onChange: handleInputChange, placeholder: "", className: `outlined-text-field-input ${props.error ? "error" : ""}`, style: {
color: "rgb(var(--md-sys-color-on-surface))",
font: "var(--md-sys-typescale-body-large-font)",
lineHeight: "var(--md-sys-typescale-body-large-line-height)",
fontSize: "var(--md-sys-typescale-body-large-size)",
fontWeight: "var(--md-sys-typescale-body-large-weight)",
letterSpacing: "var(--md-sys-typescale-body-large-tracking)",
caretColor: props.error
? "rgb(var(--md-sys-color-error))"
: "rgb(var(--md-sys-color-primary))",
resize: "none",
overflow: "hidden",
} })) : (React.createElement("input", { type: givenInputType, value: props.value, required: props.required, disabled: props.disabled, maxLength: props.maxLength, onChange: handleInputChange, placeholder: "", className: `outlined-text-field-input ${props.error ? "error" : ""}`, style: {
color: "rgb(var(--md-sys-color-on-surface))",
font: "var(--md-sys-typescale-body-large-font)",
lineHeight: "var(--md-sys-typescale-body-large-line-height)",
fontSize: "var(--md-sys-typescale-body-large-size)",
fontWeight: "var(--md-sys-typescale-body-large-weight)",
letterSpacing: "var(--md-sys-typescale-body-large-tracking)",
caretColor: props.error
? "rgb(var(--md-sys-color-error))"
: "rgb(var(--md-sys-color-primary))",
overflow: "hidden",
} })),
React.createElement("label", { className: `outlined-text-field-label ${props.error ? "error" : ""}`, style: {
backgroundColor: `${isFocused && parentBGColor}`,
left: `${isFocused ? (props.leadingIcon ? "-38px" : "-2px") : ""}`,
} },
props.labelText,
props.required && "*")),
props.trailingIcon && props.value.length > 0 && (React.createElement("div", { onClick: (e) => handleTrailingIconClick(), className: `outlined-text-field-trailing-icon ${props.error && "error"}`, style: {
width: "24px",
height: "24px",
cursor: "pointer",
userSelect: "none",
} },
" ",
props.inputType === "password" ? (React.createElement("span", { className: "material-symbols-rounded" }, givenInputType === "text" ? "visibility_off" : "visibility")) : (React.createElement("span", { className: "material-symbols-rounded" }, props.trailingIcon || ""))))),
React.createElement("div", { style: {
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "start",
padding: "0px 16px",
gap: "16px",
color: `${props.error
? "rgb(var(--md-sys-color-error))"
: "rgb(var(--md-sys-color-on-surface-variant))"}`,
font: "var(--md-sys-typescale-body-small-font)",
fontWeight: "var(--md-sys-typescale-body-small-weight)",
fontSize: "var(--md-sys-typescale-body-small-size)",
lineHeight: "var(--md-sys-typescale-body-small-line-height)",
letterSpacing: "var(--md-sys-typescale-body-small-tracking)",
} },
React.createElement("p", null, props.supportingText),
props.maxLength && (React.createElement("p", null,
props.value.length,
"/",
props.maxLength)))));
}
/**
* @description A Divider Component - Used to differentiate items.
* @params type : string ( `horizontal` | `vertical` )
* @params variant: string ( *Allowed Inputs ( 🔴 NOTE: only if type : horizontal )* = `fullWidth` | `inset` | `middleInset` | `rightMargin` )
*/
function Divider(props) {
return (React.createElement("div", { className: `divider ${props.type}`, style: {
width: `${props.type === "horizontal"
? `calc(100% - ${props.variant === "fullWidth"
? "0px"
: props.variant === "inset"
? "16px"
: props.variant === "rightMargin"
? "8px"
: "32px"})`
: "1px"}`,
height: `${props.type === "horizontal" ? "1px" : "100%"}`,
marginLeft: props.type === "horizontal"
? props.variant === "inset" || props.variant === "middleInset"
? "16px"
: ""
: "",
backgroundColor: "rgb(var(--md-sys-color-outline-variant))",
marginBottom: props.type === "horizontal" ? "8px" : "",
} }));
}
const formatDate = (date) => {
const month = ("0" + (date.getMonth() + 1)).slice(-2);
const day = ("0" + date.getDate()).slice(-2);
const year = date.getFullYear();
return `${month}/${day}/${year}`;
};
const DatePicker = () => {
const [selectedDate, setSelectedDate] = useState(new Date());
const [currentMonth, setCurrentMonth] = useState(selectedDate.getMonth());
const [currentYear, setCurrentYear] = useState(selectedDate.getFullYear());
const [showPicker, setShowPicker] = useState(false);
const getDaysInMonth = (year, month) => {
return new Date(year, month + 1, 0).getDate();
};
const handleDateClick = (day) => {
const newDate = new Date(currentYear, currentMonth, day);
setSelectedDate(newDate);
setShowPicker(false);
};
const goToPreviousMonth = () => {
if (currentMonth === 0) {
setCurrentMonth(11);
setCurrentYear(currentYear - 1);
}
else {
setCurrentMonth(currentMonth - 1);
}
};
const goToNextMonth = () => {
if (currentMonth === 11) {
setCurrentMonth(0);
setCurrentYear(currentYear + 1);
}
else {
setCurrentMonth(currentMonth + 1);
}
};
const goToPreviousYear = () => {
setCurrentYear(currentYear - 1);
};
const goToNextYear = () => {
setCurrentYear(currentYear + 1);
};
return (React.createElement("div", { className: "date-picker-container" },
React.createElement("div", { className: "date-input", onClick: () => setShowPicker(!showPicker) },
React.createElement("input", { title: "Date", type: "text", value: formatDate(selectedDate), readOnly: true }),
React.createElement("button", null,
React.createElement("span", { role: "img", "aria-label": "calendar" }, "\uD83D\uDCC5"))),
showPicker && (React.createElement("div", { className: "date-picker" },
React.createElement("div", { className: "month-year-parent" },
React.createElement("div", { className: "month-year-selector" },
React.createElement("span", { onClick: goToPreviousYear, className: "material-symbols-outlined" }, "chevron_left"),
React.createElement("select", { title: "currenYear", value: currentYear, onChange: (e) => setCurrentYear(Number(e.target.value)) }, Array.from({ length: 20 }, (_, i) => currentYear - 10 + i).map((year) => (React.createElement("option", { key: year, value: year }, year)))),
React.createElement("span", { onClick: goToNextYear, className: "material-symbols-outlined" }, "chevron_right")),
React.createElement("div", { className: "month-year-selector" },
React.createElement("span", { onClick: goToPreviousMonth, className: "material-symbols-outlined" }, "chevron_left"),
React.createElement("select", { title: "currenMonth", value: currentMonth, onChange: (e) => setCurrentMonth(Number(e.target.value)) }, Array.from({ length: 12 }).map((_, idx) => (React.createElement("option", { key: idx, value: idx }, new Date(0, idx).toLocaleString("default", {
month: "short",
}))))),
React.createElement("span", { onClick: goToNextMonth, className: "material-symbols-outlined" }, "chevron_right"))),
React.createElement("div", { className: "calendar-grid" },
["S", "M", "T", "W", "T", "F", "S"].map((day) => (React.createElement("div", { key: day, className: "day-header" }, day))),
Array.from({
length: new Date(currentYear, currentMonth, 1).getDay(),
}).map((_, idx) => (React.createElement("div", { key: idx, className: "empty-cell" }))),
Array.from({
length: getDaysInMonth(currentYear, currentMonth),
}).map((_, day) => (React.createElement("div", { key: day, className: `day-cell ${selectedDate.getDate() === day + 1 &&
selectedDate.getMonth() === currentMonth &&
selectedDate.getFullYear() === currentYear
? "selected"
: ""}`, onClick: () => handleDateClick(day + 1) }, day + 1)))),
React.createElement("div", { className: "picker-footer" },
React.createElement("button", { onClick: () => setShowPicker(false) }, "Cancel"),
React.createElement("button", { onClick: () => setShowPicker(false) }, "OK"))))));
};
const Checkbox = (props) => {
const [isHovered, setIsHovered] = useState(false);
const [isActive, setIsActive] = useState(false);
//TODO: Add ripple effect
return (React.createElement("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: () => {
setIsActive(true);
}, onMouseUp: () => setIsActive(false), style: {
position: "relative",
display: "flex",
alignItems: "center",
width: "48px",
height: "48px",
justifyContent: "center",
} },
React.createElement("input", { type: "checkbox", className: props.value == null ? "null" : "", checked: props.value != false, disabled: props.disabled, onChange: props.disabled
? undefined
: (e) => {
var _a;
return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.value === false
? null
: props.value === null
? true
: false);
}, style: {
width: "18px",
height: "18px",
borderRadius: "2px",
display: "flex",
cursor: props.disabled ? "" : "pointer",
alignItems: "center",
justifyContent: "center",
border: props.value != false
? "none"
: props.disabled
? "2px solid rgba(var(--md-sys-color-on-surface), 38%)"
: props.isError
? "2px solid rgb(var(--md-sys-color-error))"
: "2px solid rgb(var(--md-sys-color-on-surface-variant))",
backgroundColor: props.value != false
? props.disabled
? "rgba(var(--md-sys-color-on-surface), 38%)"
: props.isError
? "rgb(var(--md-sys-color-error))"
: "rgb(var(--md-sys-color-primary))"
: "",
MozAppearance: "none",
color: "rgb(var(--md-sys-color-on-primary))",
WebkitAppearance: "none",
appearance: "none",