azeriand-library 1.8.2 → 1.9.1

package/dist/components/dropdown/dropdown-button.d.ts

@@ -0,0 +1,7 @@
+type DropdownButtonProps = {
+    children: React.ReactNode;
+    open: boolean;
+    toggle: () => void;
+};
+export declare function DropdownButton({ children, open, toggle }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/dropdown/dropdown.d.ts

@@ -0,0 +1,7 @@
+type DropdownProps = {
+    buttonText?: string;
+    options?: string[];
+    onSelected?: (option: string) => void;
+};
+export declare function Dropdown({ buttonText, options, onSelected }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -7,3 +7,5 @@ export { SectionName } from './components/section-name/section-name';
 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';

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}"));
+      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}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -15892,6 +15892,12 @@ function IconBase(props) {
 function FaCheck(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" }, "child": [] }] })(props);
 }
+function FaChevronDown(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" }, "child": [] }] })(props);
+}
+function FaChevronUp(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" }, "child": [] }] })(props);
+}
 function Checkbox({ label, checkedDefault = false, onChange }) {
   const [checked, setChecked] = useState(checkedDefault);
   function checkboxClicked() {
@@ -15956,6 +15962,28 @@ function Calendar({ selectedDates, ...cardProps }) {
     }
   ) }) });
 }
+function DropdownButton({ children, open, toggle }) {
+  return /* @__PURE__ */ jsxs(Button, { onClick: toggle, className: `cursor-pointer ${open ? "button-open" : null}`, children: [
+    children,
+    /* @__PURE__ */ jsx$1("span", { className: "flex items-center content-center ml-[1rem]", children: open ? /* @__PURE__ */ jsx$1(FaChevronUp, {}) : /* @__PURE__ */ jsx$1(FaChevronDown, {}) })
+  ] });
+}
+function Dropdown({ buttonText, options = [], onSelected }) {
+  const [open, setOpen] = useState(false);
+  const [optionSelected, setOptionSelected] = useState(buttonText);
+  const toggleDropdown = () => {
+    setOpen((open2) => !open2);
+  };
+  const itemClicked = (option) => {
+    setOptionSelected(option);
+    onSelected == null ? void 0 : onSelected(option);
+    setOpen(false);
+  };
+  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)) })
+  ] });
+}
 export {
   Avatar,
   Badge,
@@ -15963,6 +15991,8 @@ export {
   Calendar,
   Card,
   Checkbox,
+  Dropdown,
+  DropdownButton,
   Input,
   SectionName,
   ThemeContext,