azeriand-library 1.13.4 → 1.14.1

package/dist/components/card/card.d.ts

@@ -1,5 +1,6 @@
-import { MouseEventHandler, ReactNode } from 'react';
-export type CardProps = {
+import { MouseEventHandler, ReactNode, ElementType } from 'react';
+export type CardProps<T extends ElementType = 'article'> = {
+    as?: T;
     children?: ReactNode;
     noPadding?: boolean;
     noBlur?: boolean;
@@ -10,5 +11,5 @@ export type CardProps = {
     onClick?: MouseEventHandler<HTMLElement>;
     className?: string;
     style?: React.CSSProperties;
-};
-export declare function Card({ children, noPadding, noBlur, appearance, color, intensity, dark, onClick, className, style }: CardProps): import("react/jsx-runtime").JSX.Element;
+} & React.ComponentPropsWithoutRef<T>;
+export declare function Card<T extends ElementType = 'article'>({ as, children, noPadding, noBlur, appearance, color, intensity, dark, onClick, className, style, ...rest }: CardProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/input/input.d.ts

@@ -13,4 +13,4 @@ export type InputProps = CardProps & {
     className?: string;
     style?: React.CSSProperties;
 };
-export declare function Input({ type, value, disabled, placeholder, size, maxLength, onChange, iconPosition, centerText, icon, className, ...cardProps }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ type, value, disabled, placeholder, maxLength, onChange, iconPosition, centerText, icon, className, ...cardProps }: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -8,7 +8,6 @@ export { Input } from './components/input/input';
 export { Calendar } from './components/calendar/calendar';
 export { ThemeContext, ThemeContextComponent } from './components/theme-context';
 export { Dropdown } from './components/dropdown/dropdown';
-export { DropdownButton } from './components/dropdown/dropdown-button';
 export { NewSlider } from './components/slider/slider';
 export { Tab } from './components/tab/tab';
 export { Timeline } from './components/timeline/timeline';

package/dist/index.esm.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode('.card{\n    /* border-radius: 20px; */\n    color: var(--card-text-color, white);\n}\n\n.card.glass{\n    background-color: color-mix(in oklch, var(--glass-color), transparent 80%);\n    border: 1px solid color-mix(in oklch, var(--glass-color), transparent 40%);\n    -webkit-backface-visibility: hidden;\n    -webkit-perspective: 1000;\n    -webkit-transform: translate3d(0,0,0);\n    -webkit-transform: translateZ(0);\n    backface-visibility: hidden;\n    perspective: 1000;\n    transform: translate3d(0,0,0);\n    transform: translateZ(0);\n}\n\n.card.mate{\n    background-color: var(--glass-color);\n}\n\n.card.outlined{\n    border: solid white 2px;\n}\n\nbutton .card.ghost:hover, button .card.outlined:hover{\n    background: color-mix(in oklch, var(--glass-color), transparent 80%);\n}\n\nbutton .card.glass:hover{\n    box-shadow: 0 4px 10px color-mix(in oklch, var(--glass-color), transparent 85%);\n}\n\nbutton .card.mate:hover{\n    background-color: color-mix(in oklch, var(--glass-color), white 10%) \n}\nbutton{\n    background: none;\n	color: inherit;\n	border: none;\n	padding: 0;\n	font: inherit;\n	cursor: pointer;\n	outline: inherit;\n    font-weight: bold;\n}\n\nbutton:focus {\n    outline: revert;\n}\n.section-name{\n    color: hsla(0, 0%, 100%, 0.7);\n}input:disabled{\n    color: hsla(0, 0%, 100%, 0.5);\n    font-weight: bold;\n}\n\ninput::-moz-placeholder{\n    color: hsla(0, 0%, 100%, 0.5);\n    \n}\n\ninput::placeholder{\n    color: hsla(0, 0%, 100%, 0.5);\n    \n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput:focus{\n    outline: none;\n}.MuiDateCalendar-root{\n    color: white;\n}.dropdown-content{\n    box-shadow: rgba(149, 157, 165, 0.2)\n    0px 8px 24px;\n    max-height: 40%vh;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    z-index: 10;\n}\n\n.dropdown-content::-webkit-scrollbar{\n    width: 0;\n    height: 0;\n}\n\n.dropdown-item:hover{\n    background-color: rgb(240, 249, 255);\n}.button-open{\n    border: rgb(147, 197, 253) 2px solid;\n}.vertical-line::before {\n    content: "";\n    position: absolute;\n    width: 1.5px;\n    height: 100%;\n    background-color: white;\n    left: 0;\n    top: 0;\n    transform: translateX(5.1px);\n}'));
+      elementStyle.appendChild(document.createTextNode('.card{\n    /* border-radius: 20px; */\n    color: var(--card-text-color, white);\n}\n\n.card.glass{\n    background-color: color-mix(in oklch, var(--glass-color), transparent 80%);\n    border: 1px solid color-mix(in oklch, var(--glass-color), transparent 40%);\n    -webkit-backface-visibility: hidden;\n    -webkit-perspective: 1000;\n    -webkit-transform: translate3d(0,0,0);\n    -webkit-transform: translateZ(0);\n    backface-visibility: hidden;\n    perspective: 1000;\n    transform: translate3d(0,0,0);\n    transform: translateZ(0);\n}\n\n.card.mate{\n    background-color: var(--glass-color);\n}\n\n.card.outlined{\n    border: solid white 2px;\n}\n\nbutton .card.ghost:hover, button .card.outlined:hover{\n    background: color-mix(in oklch, var(--glass-color), transparent 80%);\n}\n\nbutton .card.glass:hover{\n    box-shadow: 0 4px 10px color-mix(in oklch, var(--glass-color), transparent 85%);\n}\n\nbutton .card.mate:hover{\n    background-color: color-mix(in oklch, var(--glass-color), white 10%) \n}\nbutton{\n    background: none;\n	color: inherit;\n	border: none;\n	padding: 0;\n	font: inherit;\n	cursor: pointer;\n	outline: inherit;\n    font-weight: bold;\n}\n\nbutton:focus {\n    outline: revert;\n}\n.section-name{\n    color: hsla(0, 0%, 100%, 0.7);\n}input:disabled{\n    color: hsla(0, 0%, 100%, 0.5);\n    font-weight: bold;\n}\n\ninput::-moz-placeholder{\n    color: hsla(0, 0%, 100%, 0.5);\n    \n}\n\ninput::placeholder{\n    color: hsla(0, 0%, 100%, 0.5);\n    \n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput:focus{\n    outline: none;\n}.MuiDateCalendar-root{\n    color: white;\n}.dropdown-content{\n    box-shadow: rgba(149, 157, 165, 0.2)\n    0px 8px 24px;\n    max-height: 40%vh;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    z-index: 10;\n}\n\n.dropdown-content::-webkit-scrollbar{\n    width: 0;\n    height: 0;\n}\n\n.dropdown-item:hover{\n    background-color: rgb(240, 249, 255);\n}.button-open{\n    border: rgb(147, 197, 253) 2px solid;\n    border-radius: 7px;\n}.vertical-line::before {\n    content: "";\n    position: absolute;\n    width: 1.5px;\n    height: 100%;\n    background-color: white;\n    left: 0;\n    top: 0;\n    transform: translateX(5.1px);\n}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -15745,7 +15745,21 @@ function ThemeContextComponent({ children }) {
   const [theme, setTheme] = useState(DEFAULT_THEME);
   return /* @__PURE__ */ jsx$1(ThemeContext.Provider, { value: { theme, setTheme }, children: /* @__PURE__ */ jsx$1(LocalizationProvider, { dateAdapter: AdapterDayjs, children }) });
 }
-function Card({ children, noPadding, noBlur = false, appearance = "glass", color: color2 = "neutral", intensity, dark: dark2 = true, onClick, className, style: style2 }) {
+function Card({
+  as,
+  children,
+  noPadding,
+  noBlur = false,
+  appearance = "glass",
+  color: color2 = "neutral",
+  intensity,
+  dark: dark2 = true,
+  onClick,
+  className,
+  style: style2,
+  ...rest
+}) {
+  const Component = as || "article";
   let [classNames, setClassNames] = useState("");
   let [cardStyle, setCardStyle] = useState({});
   const { theme } = useContext(ThemeContext);
@@ -15769,14 +15783,14 @@ function Card({ children, noPadding, noBlur = false, appearance = "glass", color
     }
     setClassNames(`card ${rounded} ${appearance} ${className} ${noPadding ? "" : "p-[2rem]"}`);
   }, [color2, intensity, dark2, appearance, noBlur, className, theme]);
-  return /* @__PURE__ */ jsx$1("article", { className: classNames, style: cardStyle, onClick, children });
+  return /* @__PURE__ */ jsx$1(Component, { className: classNames, style: cardStyle, onClick, ...rest, children });
 }
 function Button({ children, label, icon, position: position2 = "left", onClick, size, className, ...cardProps }) {
-  let defaultCardClassNames = "flex justify-center items-center gap-x-[0.40rem] box-border cursor-pointer";
+  let defaultCardClassNames = "flex justify-center items-center gap-x-[0.40rem] box-border cursor-pointer w-fit ";
   let specificCardClassNames = "min-w-[2.5rem] px-[1rem] py-1";
   if (size === "sm") {
     specificCardClassNames = "min-w-auto text-xs px-[0.5rem] py-1";
-    className = `w-fit ${className}`;
+    className = `${className}`;
   }
   if (icon && !label) {
     specificCardClassNames = "square-8 p-2";
@@ -15793,12 +15807,12 @@ function Button({ children, label, icon, position: position2 = "left", onClick,
       onClick(ev);
     }
   };
-  return /* @__PURE__ */ jsx$1("button", { className, onClick: buttonClick, children: /* @__PURE__ */ jsxs(Card, { noBlur: true, noPadding: true, className: cardClassNames, ...cardProps, children: [
+  return /* @__PURE__ */ jsxs(Card, { as: "button", noBlur: true, noPadding: true, className: cardClassNames + className, onClick: buttonClick, ...cardProps, children: [
     position2 === "left" && icon,
     label,
     children,
     position2 === "right" && icon
-  ] }) });
+  ] });
 }
 function Badge({ label, size, ...cardProps }) {
   let cardClassNames = "rounded-md";
@@ -15966,16 +15980,16 @@ function Checkbox({ label, checkedDefault = false, onChange }) {
 function SectionName({ section, className }) {
   return /* @__PURE__ */ jsx$1("div", { className: `uppercase font-bold tracking-[0.15rem] w-fit section-name ${className}`, children: section });
 }
-function Input({ type, value, disabled, placeholder, size, maxLength, onChange, iconPosition = "left", centerText = false, icon, className, ...cardProps }) {
+function Input({ type, value, disabled, placeholder, maxLength, onChange, iconPosition = "left", centerText = false, icon, className, ...cardProps }) {
   function inputUpdated(ev) {
     onChange == null ? void 0 : onChange(ev.target.value);
   }
   const classnames = `flex`;
-  const inputClassName = `flex justify-center items-center border-none bg-none py-[0.5rem] px-[1rem] m-0 w-full ${centerText ? "text-center" : ""}`;
+  const inputClassName = `flex justify-center items-center border-none bg-transparent py-[0.5rem] px-[1rem] m-0 w-full ${centerText ? "text-center" : ""}`;
   const directionClassName = iconPosition === "left" ? "pl-2" : "flex-row-reverse pr-2";
   return /* @__PURE__ */ jsx$1("div", { className: classnames, children: /* @__PURE__ */ jsxs(Card, { className: `flex justify-center items-center rounded-md ${className} ${icon ? directionClassName : ""}`, noBlur: true, noPadding: true, ...cardProps, style: cardProps.style, children: [
     icon && /* @__PURE__ */ jsx$1("div", { className: "flex items-center", children: icon }),
-    /* @__PURE__ */ jsx$1("input", { className: inputClassName, onChange: inputUpdated, placeholder, value, disabled, type, size, maxLength, style: cardProps.style })
+    /* @__PURE__ */ jsx$1("input", { className: inputClassName, onChange: inputUpdated, placeholder, value, disabled, type, maxLength, style: cardProps.style })
   ] }) });
 }
 function CustomDay(props) {
@@ -16034,7 +16048,7 @@ function Dropdown({ buttonText, options = [], onSelected }) {
   };
   return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: "relative w-fit", onBlur: () => setOpen(false), children: [
     /* @__PURE__ */ jsx$1(DropdownButton, { toggle: toggleDropdown, open, children: optionSelected }),
-    open && /* @__PURE__ */ jsx$1(Card, { noBlur: true, appearance: "mate", className: "absolute flex flex-col items-center p-[1rem] mt-[0.5rem] bg-white rounded-lg overflow-y-scroll dropdown-content", children: options.map((option) => /* @__PURE__ */ jsx$1("div", { className: "p-[0.5rem] m-[0.1rem] w-full rounded-lg cursor-pointer", onMouseDown: () => itemClicked(option), children: option }, option)) })
+    open && /* @__PURE__ */ jsx$1(Card, { noPadding: true, noBlur: true, appearance: "outlined", className: "absolute flex flex-col items-center p-[0.5rem] mt-[0.5rem] w-full text-center rounded-lg overflow-y-scroll dropdown-content", children: options.map((option) => /* @__PURE__ */ jsx$1("div", { className: "p-[0.5rem] m-[0.1rem] w-full rounded-lg cursor-pointer", onMouseDown: () => itemClicked(option), children: option }, option)) })
   ] });
 }
 function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
@@ -17864,7 +17878,6 @@ export {
   Card,
   Checkbox,
   Dropdown,
-  DropdownButton,
   Input,
   NewSlider,
   SectionName,