azeriand-library 1.10.0 → 1.12.0

package/dist/components/tab/tab.d.ts

@@ -0,0 +1,8 @@
+import { CardProps } from '../card/card';
+type TabProps = CardProps & {
+    items?: string[];
+    onTabSelected?: (item: string) => void;
+    defaultValue?: string;
+};
+export declare function Tab({ items, onTabSelected, defaultValue, ...cardProps }: TabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/timeline/timeline-list-item.d.ts

@@ -0,0 +1,7 @@
+import { CardProps } from '../card/card';
+type TlListItemProps = CardProps & {
+    label?: string;
+    badge?: React.ReactNode;
+};
+export declare function TlListItem({ label, badge, ...cardProps }: TlListItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/timeline/timeline.d.ts

@@ -0,0 +1,7 @@
+import { CardProps } from '../card/card';
+type TimelineProps = CardProps & {
+    children?: React.ReactNode;
+    faded?: boolean;
+};
+export declare function Timeline({ children, faded, ...cardProps }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -10,3 +10,6 @@ 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';
+export { TlListItem } from './components/timeline/timeline-list-item';

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}"));
+      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}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -13,7 +13,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsx as jsx$1, jsxs } from "react/jsx-runtime";
+import { jsx as jsx$1, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useContext, isValidElement, cloneElement, Children, createContext, useState, useEffect } from "react";
 import ReactDOM from "react-dom";
@@ -244,7 +244,7 @@ function requireReactIs_development$1() {
       var ContextProvider = REACT_PROVIDER_TYPE;
       var Element2 = REACT_ELEMENT_TYPE;
       var ForwardRef = REACT_FORWARD_REF_TYPE;
-      var Fragment = REACT_FRAGMENT_TYPE;
+      var Fragment2 = REACT_FRAGMENT_TYPE;
       var Lazy = REACT_LAZY_TYPE;
       var Memo = REACT_MEMO_TYPE;
       var Portal = REACT_PORTAL_TYPE;
@@ -303,7 +303,7 @@ function requireReactIs_development$1() {
       reactIs_development$1.ContextProvider = ContextProvider;
       reactIs_development$1.Element = Element2;
       reactIs_development$1.ForwardRef = ForwardRef;
-      reactIs_development$1.Fragment = Fragment;
+      reactIs_development$1.Fragment = Fragment2;
       reactIs_development$1.Lazy = Lazy;
       reactIs_development$1.Memo = Memo;
       reactIs_development$1.Portal = Portal;
@@ -17809,6 +17809,41 @@ process.env.NODE_ENV !== "production" ? Box.propTypes = {
 function NewSlider({ defaultValue, onChange }) {
   return /* @__PURE__ */ jsx$1(Card, { noPadding: true, appearance: "ghost", children: /* @__PURE__ */ jsx$1(Box, { sx: { width: 150 }, children: /* @__PURE__ */ jsx$1(Slider, { defaultValue, "aria-label": "Default", valueLabelDisplay: "auto", onChange }) }) });
 }
+function Tab({ items, onTabSelected, defaultValue, ...cardProps }) {
+  const [tabSelected, setTabSelected] = useState(defaultValue);
+  const selectTab = (item) => {
+    setTabSelected(item);
+    onTabSelected == null ? void 0 : onTabSelected(item);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx$1(SectionName, { section: "Filter by" }),
+    /* @__PURE__ */ jsx$1(Card, { className: "rounded-md w-fit", noBlur: true, noPadding: true, ...cardProps, color: "blue", children: /* @__PURE__ */ jsx$1("div", { className: "flex p-[0.4rem] gap-x-[0.5rem]", children: items && items.map((item) => /* @__PURE__ */ jsx$1(
+      Button,
+      {
+        onClick: () => selectTab(item),
+        color: "blue",
+        appearance: item === tabSelected ? "mate" : "ghost",
+        dark: item === tabSelected ? false : true,
+        label: item
+      },
+      item
+    )) }) })
+  ] });
+}
+function Timeline({ children, faded, ...cardProps }) {
+  const timelineStyle = {
+    overflowY: "visible",
+    WebkitMaskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%)",
+    maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%)"
+  };
+  return /* @__PURE__ */ jsx$1(Card, { className: "rounded-sm", noPadding: true, appearance: "ghost", ...cardProps, style: { ...cardProps.style, ...timelineStyle }, children: /* @__PURE__ */ jsx$1("ul", { className: "vertical-line list-disc font-bold text-start relative", style: { paddingInlineStart: 20 }, children }) });
+}
+function TlListItem({ label, badge, ...cardProps }) {
+  return /* @__PURE__ */ jsx$1("li", { children: /* @__PURE__ */ jsx$1(Card, { noBlur: true, appearance: "ghost", noPadding: true, ...cardProps, children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-x-[1rem] text-[1rem]", children: [
+    label,
+    badge
+  ] }) }) });
+}
 export {
   Avatar,
   Badge,
@@ -17821,7 +17856,10 @@ export {
   Input,
   NewSlider,
   SectionName,
+  Tab,
   ThemeContext,
-  ThemeContextComponent
+  ThemeContextComponent,
+  Timeline,
+  TlListItem
 };
 //# sourceMappingURL=index.esm.js.map