azeriand-library 1.11.0 → 1.13.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.
@@ -1,6 +1,7 @@
1
1
  import { CardProps } from '../card/card';
2
2
  type BadgeProps = CardProps & {
3
3
  label: string;
4
+ size?: 'sm' | 'lg';
4
5
  };
5
- export declare function Badge({ label, ...cardProps }: BadgeProps): import("react/jsx-runtime").JSX.Element;
6
+ export declare function Badge({ label, size, ...cardProps }: BadgeProps): import("react/jsx-runtime").JSX.Element;
6
7
  export {};
@@ -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) {
@@ -15797,8 +15797,17 @@ function Button({ children, label, icon, position: position2 = "left", onClick,
15797
15797
  position2 === "right" && icon
15798
15798
  ] }) });
15799
15799
  }
15800
- function Badge({ label, ...cardProps }) {
15801
- return /* @__PURE__ */ jsx$1(Card, { noBlur: true, noPadding: true, className: "rounded-sm w-fit", ...cardProps, children: /* @__PURE__ */ jsx$1("div", { className: "px-0.5 py-0.10 text-[0.5rem] font-bold", children: label }) });
15800
+ function Badge({ label, size, ...cardProps }) {
15801
+ let cardClassNames = "rounded-md";
15802
+ let divClassNames = "px-1.5 py-0.5 text-[0.85rem]";
15803
+ if (size === "sm") {
15804
+ cardClassNames = "rounded-md";
15805
+ divClassNames = "px-1 py-0.5 text-[0.65rem]";
15806
+ } else if (size === "lg") {
15807
+ cardClassNames = "rounded-lg";
15808
+ divClassNames = "px-2 py-0.5 text-[1rem]";
15809
+ }
15810
+ return /* @__PURE__ */ jsx$1(Card, { noBlur: true, noPadding: true, className: `w-fit ${cardClassNames}`, ...cardProps, children: /* @__PURE__ */ jsx$1("div", { className: `font-bold ${divClassNames}`, children: label }) });
15802
15811
  }
15803
15812
  var DefaultContext = {
15804
15813
  color: void 0,
@@ -17830,6 +17839,20 @@ function Tab({ items, onTabSelected, defaultValue, ...cardProps }) {
17830
17839
  )) }) })
17831
17840
  ] });
17832
17841
  }
17842
+ function Timeline({ children, faded, ...cardProps }) {
17843
+ const timelineStyle = {
17844
+ overflowY: "visible",
17845
+ WebkitMaskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%)",
17846
+ maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%)"
17847
+ };
17848
+ 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 }) });
17849
+ }
17850
+ function TlListItem({ label, badge, ...cardProps }) {
17851
+ 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: [
17852
+ label,
17853
+ badge
17854
+ ] }) }) });
17855
+ }
17833
17856
  export {
17834
17857
  Avatar,
17835
17858
  Badge,
@@ -17844,6 +17867,8 @@ export {
17844
17867
  SectionName,
17845
17868
  Tab,
17846
17869
  ThemeContext,
17847
- ThemeContextComponent
17870
+ ThemeContextComponent,
17871
+ Timeline,
17872
+ TlListItem
17848
17873
  };
17849
17874
  //# sourceMappingURL=index.esm.js.map