azeriand-library 1.11.0 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,7 @@
1
+ import { CardProps } from '../card/card';
2
+ type TlListItemProps = CardProps & {
3
+ label?: string;
4
+ badge?: React.ReactNode;
5
+ };
6
+ export declare function TlListItem({ label, badge, ...cardProps }: TlListItemProps): import("react/jsx-runtime").JSX.Element;
7
+ export {};
@@ -0,0 +1,7 @@
1
+ import { CardProps } from '../card/card';
2
+ type TimelineProps = CardProps & {
3
+ children?: React.ReactNode;
4
+ faded?: boolean;
5
+ };
6
+ export declare function Timeline({ children, faded, ...cardProps }: TimelineProps): import("react/jsx-runtime").JSX.Element;
7
+ export {};
package/dist/index.d.ts CHANGED
@@ -11,3 +11,5 @@ export { Dropdown } from './components/dropdown/dropdown';
11
11
  export { DropdownButton } from './components/dropdown/dropdown-button';
12
12
  export { NewSlider } from './components/slider/slider';
13
13
  export { Tab } from './components/tab/tab';
14
+ export { Timeline } from './components/timeline/timeline';
15
+ export { TlListItem } from './components/timeline/timeline-list-item';
package/dist/index.esm.js CHANGED
@@ -3,7 +3,7 @@
3
3
  try {
4
4
  if (typeof document != "undefined") {
5
5
  var elementStyle = document.createElement("style");
6
- 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}"));
6
+ 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}'));
7
7
  document.head.appendChild(elementStyle);
8
8
  }
9
9
  } catch (e) {
@@ -17830,6 +17830,20 @@ function Tab({ items, onTabSelected, defaultValue, ...cardProps }) {
17830
17830
  )) }) })
17831
17831
  ] });
17832
17832
  }
17833
+ function Timeline({ children, faded, ...cardProps }) {
17834
+ const timelineStyle = {
17835
+ overflowY: "visible",
17836
+ WebkitMaskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%)",
17837
+ maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%)"
17838
+ };
17839
+ 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 }) });
17840
+ }
17841
+ function TlListItem({ label, badge, ...cardProps }) {
17842
+ 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: [
17843
+ label,
17844
+ badge
17845
+ ] }) }) });
17846
+ }
17833
17847
  export {
17834
17848
  Avatar,
17835
17849
  Badge,
@@ -17844,6 +17858,8 @@ export {
17844
17858
  SectionName,
17845
17859
  Tab,
17846
17860
  ThemeContext,
17847
- ThemeContextComponent
17861
+ ThemeContextComponent,
17862
+ Timeline,
17863
+ TlListItem
17848
17864
  };
17849
17865
  //# sourceMappingURL=index.esm.js.map