@appcorp/kismaa-web-ui 0.2.33 → 0.2.35

package/app/page.js

@@ -8,6 +8,6 @@ exports.default = Home;
 var react_1 = __importDefault(require("react"));
 var theme_switch_1 = __importDefault(require("../molecules/theme-switch/theme-switch"));
 function Home() {
-    return (react_1.default.createElement("div", { className: "grid min-h-screen grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 bg-white p-8 pb-20 font-[family-name:var(--font-geist-sans)] dark:bg-black sm:p-20" },
+    return (react_1.default.createElement("div", { className: "grid min-h-screen grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 bg-white p-8 pb-20 font-[family-name:var(--font-geist-sans)] sm:p-20 dark:bg-black" },
         react_1.default.createElement(theme_switch_1.default, null)));
 }

package/molecules/badge/badge.js

@@ -5,10 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
 var react_1 = __importDefault(require("react"));
-var util_functions_1 = require("@react-pakistan/util-functions");
+// import { PSYCHIC_SPECIALITY } from '@appcorp/kismaa-utils';
+// import { textToEnum } from '@react-pakistan/util-functions';
 var type_1 = require("./type");
 var outline_1 = require("@heroicons/react/24/outline");
-var classNameMap = function (type) {
+var classNameMap = function () {
     var _a;
     return (_a = {},
         _a[type_1.BADGE_TYPE.CARD_BADGE] = "py-1.5 px-2.5 text-xs rounded-full bg-primary/30 text-primary",
@@ -16,9 +17,9 @@ var classNameMap = function (type) {
         _a);
 };
 var Badge = function (_a) {
+    // const specialityType = textToEnum(label) as PSYCHIC_SPECIALITY;
     var handleOnCrossClick = _a.handleOnCrossClick, label = _a.label, type = _a.type;
-    var specialityType = (0, util_functions_1.textToEnum)(label);
-    return (react_1.default.createElement("div", { className: "flex w-fit flex-row items-center justify-center gap-2 font-primary ".concat(classNameMap(specialityType)[type]) },
+    return (react_1.default.createElement("div", { className: "font-primary flex w-fit flex-row items-center justify-center gap-2 ".concat(classNameMap()[type]) },
         label,
         handleOnCrossClick && (react_1.default.createElement("button", { onClick: function () { return handleOnCrossClick(label); } },
             react_1.default.createElement(outline_1.XMarkIcon, { className: "size-4" })))));

package/molecules/breadcrumbs/breadcrumbs.js

@@ -16,7 +16,7 @@ var BreadCrumbs = function (_a) {
             react_1.default.createElement("li", { className: "flex items-center" },
                 react_1.default.createElement(link_1.default, { href: "/", className: "flex items-center gap-2 text-gray-500 hover:text-gray-700 hover:underline" },
                     react_1.default.createElement(home_icon_1.HomeIcon, { className: "size-6", "aria-hidden": "true" }),
-                    react_1.default.createElement("span", { className: "text-xs text-primary lg:text-sm" }, "Home"))), items === null || items === void 0 ? void 0 :
+                    react_1.default.createElement("span", { className: "text-primary text-xs lg:text-sm" }, "Home"))), items === null || items === void 0 ? void 0 :
             items.map(function (_a, index) {
                 var label = _a.label, route = _a.route, isActive = _a.isActive;
                 var isLast = index === items.length - 1;

package/molecules/button-group/button-group.js

@@ -26,7 +26,7 @@ var ButtonGroup = function (_a) {
         handleOnClick: function () { return onFilterBtnClick(); },
         borderColor: numberOfFilters !== 0 ? '#B880F1' : '#D9D9D9',
         iconPrefix: react_1.default.createElement(filter_icon_1.FilterIcon, { className: "size-4" }),
-        iconSuffix: numberOfFilters === 0 ? (react_1.default.createElement(react_1.default.Fragment, null)) : (react_1.default.createElement("div", { className: "flex size-9 items-center justify-center rounded-full bg-primary/80 text-white" },
+        iconSuffix: numberOfFilters === 0 ? (react_1.default.createElement(react_1.default.Fragment, null)) : (react_1.default.createElement("div", { className: "bg-primary/80 flex size-9 items-center justify-center rounded-full text-white" },
             react_1.default.createElement(typography_1.Typography, { variant: typography_1.TYPOGRAPHY_VARIANTS.P1 }, numberOfFilters))),
     };
     var visibleButtons = buttonsList.slice(0, maxButtonsLimit - 1);
@@ -36,7 +36,7 @@ var ButtonGroup = function (_a) {
     var extendedButtonsList = __spreadArray(__spreadArray([], visibleButtons, true), [filterButton], false);
     return (react_1.default.createElement("div", { className: "flex w-fit flex-wrap gap-3" }, extendedButtonsList.slice(0, maxButtonsLimit).map(function (button, index) {
         var isActive = index === activeIndex;
-        return (react_1.default.createElement("button", { key: index, onClick: function () { return button.handleOnClick(index); }, className: "flex max-h-16 items-center justify-center gap-3 rounded-full px-5 py-3 text-base font-medium transition-all duration-300 ease-in-out hover:text-primary lg:px-10 lg:py-5 ".concat(isActive ? activeStyles : nonActiveStyles), style: {
+        return (react_1.default.createElement("button", { key: index, onClick: function () { return button.handleOnClick(index); }, className: "hover:text-primary flex max-h-16 items-center justify-center gap-3 rounded-full px-5 py-3 text-base font-medium transition-all duration-300 ease-in-out lg:px-10 lg:py-5 ".concat(isActive ? activeStyles : nonActiveStyles), style: {
                 border: "1px solid ".concat(isActive ? '#B880F1' : button.borderColor || '#D9D9D9'),
             } },
             button.iconPrefix,

package/molecules/core-values-card/core-values-card.js

@@ -10,7 +10,7 @@ var CoreValuesCard = function (_a) {
     var icon = _a.icon, heading = _a.heading, description = _a.description;
     return (react_1.default.createElement("div", { className: "w-fit rounded-sm bg-white p-12 transition-all duration-300 ease-in-out hover:scale-105" },
         react_1.default.createElement("div", { className: "relative" },
-            react_1.default.createElement("div", { className: "absolute -left-2 -top-4 size-10 rounded-full bg-[#B689E51A]" }),
+            react_1.default.createElement("div", { className: "absolute -top-4 -left-2 size-10 rounded-full bg-[#B689E51A]" }),
             react_1.default.createElement("div", { className: "ml-1" }, icon)),
         react_1.default.createElement("div", { className: "mt-7" },
             react_1.default.createElement("div", { className: "" },

package/molecules/horoscope-shimmer-card/horoscope-shimmer-card.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ShimmerCardProps } from './type';
+export declare const HoroscopeShimmerCard: FC<ShimmerCardProps>;

package/molecules/horoscope-shimmer-card/horoscope-shimmer-card.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoroscopeShimmerCard = void 0;
+// molecules/horoscope-card/HoroscopeCardShimmer.tsx
+var react_1 = __importDefault(require("react"));
+var shimmer_1 = require("../shimmer");
+var horoscope_card_1 = require("../horoscope-card");
+var sizeMap = (_a = {},
+    _a[horoscope_card_1.HOROSCOPE_CARD_SIZES.MD] = 'mb-8 mt-5',
+    _a[horoscope_card_1.HOROSCOPE_CARD_SIZES.SM] = 'my-3',
+    _a);
+var HoroscopeShimmerCard = function (_a) {
+    var _b = _a.cardSize, cardSize = _b === void 0 ? horoscope_card_1.HOROSCOPE_CARD_SIZES.MD : _b;
+    return (react_1.default.createElement("div", { className: "group w-full overflow-hidden rounded-xl" },
+        react_1.default.createElement("div", { className: "h-60 w-full p-8" },
+            react_1.default.createElement(shimmer_1.Shimmer, { className: "h-full w-full rounded-xl" })),
+        react_1.default.createElement("div", { className: "text-center ".concat(sizeMap[cardSize]) },
+            react_1.default.createElement(shimmer_1.Shimmer, { className: "mx-auto h-5 w-24 rounded-md" }))));
+};
+exports.HoroscopeShimmerCard = HoroscopeShimmerCard;

package/molecules/horoscope-shimmer-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './horoscope-shimmer-card';
+export * from './type';

package/molecules/horoscope-shimmer-card/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./horoscope-shimmer-card"), exports);
+__exportStar(require("./type"), exports);

package/molecules/horoscope-shimmer-card/type.d.ts

@@ -0,0 +1,4 @@
+import { HOROSCOPE_CARD_SIZES } from '../horoscope-card';
+export interface ShimmerCardProps {
+    cardSize?: HOROSCOPE_CARD_SIZES;
+}

package/molecules/horoscope-shimmer-card/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/molecules/index.d.ts

@@ -11,3 +11,6 @@ export * from './stat-card';
 export * from './theme-switch/theme-switch';
 export * from './typography';
 export * from './user-card';
+export * from './shimmer';
+export * from './horoscope-shimmer-card';
+export * from './user-card-shimmer';

package/molecules/index.js

@@ -27,3 +27,6 @@ __exportStar(require("./stat-card"), exports);
 __exportStar(require("./theme-switch/theme-switch"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./user-card"), exports);
+__exportStar(require("./shimmer"), exports);
+__exportStar(require("./horoscope-shimmer-card"), exports);
+__exportStar(require("./user-card-shimmer"), exports);

package/molecules/shimmer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './shimmer';
+export * from './type';

package/molecules/shimmer/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./shimmer"), exports);
+__exportStar(require("./type"), exports);

package/molecules/shimmer/shimmer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ShimmerProps } from './type';
+export declare const Shimmer: React.FC<ShimmerProps>;

package/molecules/shimmer/shimmer.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Shimmer = void 0;
+var react_1 = __importDefault(require("react"));
+var Shimmer = function (_a) {
+    var className = _a.className;
+    return (react_1.default.createElement("div", { className: "animate-pulse rounded-md bg-gray-200 ".concat(className) }));
+};
+exports.Shimmer = Shimmer;

package/molecules/shimmer/type.d.ts

@@ -0,0 +1,3 @@
+export interface ShimmerProps {
+    className?: string;
+}

package/molecules/shimmer/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/molecules/user-card/user-card.js

@@ -15,7 +15,9 @@ var badge_1 = require("../badge");
 var type_1 = require("../badge/type");
 var ratings_1 = require("../ratings");
 var UserCard = function (_a) {
-    var badges = _a.badges, description = _a.description, handleButtonClick = _a.handleButtonClick, handleCardClick = _a.handleCardClick, id = _a.id, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, isHovered = _a.isHovered, name = _a.name, onlineStatus = _a.onlineStatus, originalPrice = _a.originalPrice, price = _a.price, rating = _a.rating, setIsHovered = _a.setIsHovered, username = _a.username;
+    var badges = _a.badges, description = _a.description, handleButtonClick = _a.handleButtonClick, handleCardClick = _a.handleCardClick, id = _a.id, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, isHovered = _a.isHovered, name = _a.name, onlineStatus = _a.onlineStatus, 
+    // originalPrice,
+    price = _a.price, rating = _a.rating, setIsHovered = _a.setIsHovered, username = _a.username;
     return (react_1.default.createElement("div", { className: "w-full overflow-hidden rounded-xl shadow-[0px_5px_16px_0px_#0000001A] hover:cursor-pointer lg:max-w-[415px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function (e) {
             e.stopPropagation();
             handleCardClick(username);

package/molecules/user-card-shimmer/index.d.ts

@@ -0,0 +1 @@
+export * from './user-card-shimmer';

package/molecules/user-card-shimmer/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./user-card-shimmer"), exports);

package/molecules/user-card-shimmer/user-card-shimmer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const UserCardShimmer: FC;

package/molecules/user-card-shimmer/user-card-shimmer.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserCardShimmer = void 0;
+var react_1 = __importDefault(require("react"));
+var shimmer_1 = require("../shimmer");
+var UserCardShimmer = function () {
+    return (react_1.default.createElement("div", { className: "w-full overflow-hidden rounded-xl shadow-[0px_5px_16px_0px_#0000001A] lg:max-w-[415px]" },
+        react_1.default.createElement("div", { className: "relative overflow-hidden rounded-xl" },
+            react_1.default.createElement("div", { className: "relative pb-[76%]" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "absolute inset-0 h-full w-full" }))),
+        react_1.default.createElement("div", { className: "p-4 text-center" },
+            react_1.default.createElement("div", { className: "mb-2 flex justify-center" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-6 w-32" })),
+            react_1.default.createElement("div", { className: "mb-2 flex justify-center" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-4 w-48" })),
+            react_1.default.createElement("div", { className: "mt-2 flex w-full flex-wrap justify-center gap-1.5" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-6 w-16 rounded-full" }),
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-6 w-16 rounded-full" })),
+            react_1.default.createElement("div", { className: "my-5 flex justify-center" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-5 w-24" })),
+            react_1.default.createElement("div", { className: "flex justify-center gap-2.5" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-6 w-32" })))));
+};
+exports.UserCardShimmer = UserCardShimmer;

package/organisms/advisors-section/advisors-section.js

@@ -8,10 +8,10 @@ var react_1 = __importDefault(require("react"));
 var section_header_1 = require("../section-header");
 var user_cards_grid_1 = require("../user-cards-grid");
 var AdvisorsSection = function (_a) {
-    var buttonLabel = _a.buttonLabel, cardItems = _a.cardItems, cardsLimit = _a.cardsLimit, heading = _a.heading, handleOnClick = _a.handleOnClick, subheading = _a.subheading;
+    var buttonLabel = _a.buttonLabel, cardItems = _a.cardItems, cardsLimit = _a.cardsLimit, heading = _a.heading, handleOnClick = _a.handleOnClick, subheading = _a.subheading, _b = _a.loading, loading = _b === void 0 ? false : _b;
     return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { btnText: buttonLabel, handleButtonClick: handleOnClick, heading: heading, renderCtaButton: cardItems.length > cardsLimit, subheading: subheading }),
-            react_1.default.createElement(user_cards_grid_1.UserCardsGrid, { cardItems: cardItems, cardsLimit: cardsLimit }))));
+            react_1.default.createElement(user_cards_grid_1.UserCardsGrid, { cardItems: cardItems, cardsLimit: cardsLimit, loading: loading }))));
 };
 exports.AdvisorsSection = AdvisorsSection;

package/organisms/advisors-section/props.js

@@ -9,4 +9,5 @@ exports.advisorsSectionData = {
     cardItems: props_1.userCardGridData,
     cardsLimit: 6,
     handleOnClick: function () { return console.log('Button clicked!'); },
+    loading: false,
 };

package/organisms/advisors-section/type.d.ts

@@ -6,4 +6,5 @@ export interface AdvisorsSectionProps {
     handleOnClick: () => void;
     heading: string;
     subheading: string;
+    loading: boolean;
 }

package/organisms/banner-slider/banner-slider.js

@@ -29,9 +29,9 @@ var BannerSlider = function (_a) {
                     }, loop: true, className: "h-full w-full" }, bannerSlides.map(function (slide) { return (react_1.default.createElement(react_2.SwiperSlide, { key: slide.id },
                     react_1.default.createElement("div", { className: "relative h-fit" },
                         react_1.default.createElement(banner_slider_card_1.BannerSliderCard, { cardBgImage: slide.imageUrl, heading: slide.title })))); })),
-                react_1.default.createElement("button", { className: "custom-swiper-button-prev absolute left-10 top-1/2 z-10 -translate-y-1/2 transform rounded-full border-[1px] border-primary bg-white p-2 text-primary transition-all duration-200 hover:bg-opacity-75" },
+                react_1.default.createElement("button", { className: "custom-swiper-button-prev border-primary text-primary hover:bg-opacity-75 absolute top-1/2 left-10 z-10 -translate-y-1/2 transform rounded-full border-[1px] bg-white p-2 transition-all duration-200" },
                     react_1.default.createElement(arrow_left_icon_1.ArrowLeftIcon, { fill: "currentColor", className: "size-4" })),
-                react_1.default.createElement("button", { className: "custom-swiper-button-next absolute right-10 top-1/2 z-10 -translate-y-1/2 transform rounded-full border-[1px] border-primary bg-white p-2 text-primary transition-all duration-200 hover:bg-opacity-75" },
+                react_1.default.createElement("button", { className: "custom-swiper-button-next border-primary text-primary hover:bg-opacity-75 absolute top-1/2 right-10 z-10 -translate-y-1/2 transform rounded-full border-[1px] bg-white p-2 transition-all duration-200" },
                     react_1.default.createElement(arrow_right_icon_1.ArrowRightIcon, { fill: "currentColor", className: "size-4" }))))));
 };
 exports.BannerSlider = BannerSlider;

package/organisms/highlight-banner/highlight-banner.js

@@ -16,7 +16,7 @@ var HighlightBanner = function (_a) {
             backgroundRepeat: 'no-repeat',
         } },
         react_1.default.createElement("div", { className: "kismaa-container rounded-md" },
-            react_1.default.createElement("div", { className: "mx-auto flex flex-col items-center justify-center px-4 pb-4 pt-5 text-center text-quaternary lg:px-32 lg:pb-5 lg:pt-7" },
+            react_1.default.createElement("div", { className: "text-quaternary mx-auto flex flex-col items-center justify-center px-4 pt-5 pb-4 text-center lg:px-32 lg:pt-7 lg:pb-5" },
                 react_1.default.createElement(typography_1.Typography, { variant: typography_1.TYPOGRAPHY_VARIANTS.H1 }, bannerTitle),
                 react_1.default.createElement("div", { className: "mt-3 flex flex-col items-center gap-4 text-gray-600" },
                     react_1.default.createElement(typography_1.Typography, { variant: typography_1.TYPOGRAPHY_VARIANTS.P1 }, bannerDescription),

package/organisms/horoscope-cards-grid/horoscope-cards-grid.js

@@ -38,8 +38,8 @@ var react_1 = __importStar(require("react"));
 var molecules_1 = require("../../molecules");
 var type_1 = require("./type");
 var HoroscopeCardsGrid = function (_a) {
-    var cardItems = _a.cardItems, _b = _a.cardLimit, cardLimit = _b === void 0 ? type_1.HOROSCOPE_CARDS_LIMITS.FIVE : _b, cardSize = _a.cardSize;
-    var _c = (0, react_1.useState)(false), isSmallDesktop = _c[0], setIsSmallDesktop = _c[1];
+    var cardItems = _a.cardItems, _b = _a.cardLimit, cardLimit = _b === void 0 ? type_1.HOROSCOPE_CARDS_LIMITS.FIVE : _b, cardSize = _a.cardSize, _c = _a.loading, loading = _c === void 0 ? false : _c;
+    var _d = (0, react_1.useState)(false), isSmallDesktop = _d[0], setIsSmallDesktop = _d[1];
     (0, react_1.useEffect)(function () {
         var handleResize = function () {
             setIsSmallDesktop(window.innerWidth >= 1020 && window.innerWidth < 1400);
@@ -61,6 +61,9 @@ var HoroscopeCardsGrid = function (_a) {
     var slicedCardItems = (0, react_1.useMemo)(function () {
         return cardItems === null || cardItems === void 0 ? void 0 : cardItems.slice(0, cardLimit);
     }, [cardItems, cardLimit]);
+    if (loading)
+        return (react_1.default.createElement("div", { className: gridClassName }, Array.from({ length: cardLimit }).map(function (_, index) { return (react_1.default.createElement("div", { key: index, className: cardClassName },
+            react_1.default.createElement(molecules_1.HoroscopeShimmerCard, { cardSize: cardSize }))); })));
     return (react_1.default.createElement("div", { className: gridClassName }, slicedCardItems === null || slicedCardItems === void 0 ? void 0 : slicedCardItems.map(function (card, index) { return (react_1.default.createElement("div", { key: index, className: cardClassName },
         react_1.default.createElement(molecules_1.HoroscopeCard, { cardHeading: card.cardHeading, cardIcon: card.cardIcon, handleCardOnClick: card.handleCardOnClick, cardSize: cardSize }))); })));
 };

package/organisms/horoscope-cards-grid/props.js

@@ -67,4 +67,5 @@ exports.horoscopeCardsGridData = {
     ],
     cardLimit: 5,
     cardSize: molecules_1.HOROSCOPE_CARD_SIZES.MD,
+    loading: false,
 };

package/organisms/horoscope-cards-grid/type.d.ts

@@ -8,4 +8,5 @@ export interface HoroscopeCardsGridProps {
     cardItems: HoroscopeCardProps[];
     cardLimit: HOROSCOPE_CARDS_LIMITS;
     cardSize: HOROSCOPE_CARD_SIZES;
+    loading: boolean;
 }

package/organisms/horoscope-section/horoscope-section.js

@@ -8,11 +8,11 @@ var react_1 = __importDefault(require("react"));
 var section_header_1 = require("../section-header");
 var horoscope_cards_grid_1 = require("../horoscope-cards-grid");
 var HoroscopeSection = function (_a) {
-    var breadcrumbs = _a.breadcrumbs, cardItems = _a.cardItems, cardLimit = _a.cardLimit, cardSize = _a.cardSize, sectionHeading = _a.sectionHeading;
+    var breadcrumbs = _a.breadcrumbs, cardItems = _a.cardItems, cardLimit = _a.cardLimit, cardSize = _a.cardSize, sectionHeading = _a.sectionHeading, loading = _a.loading;
     return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { heading: sectionHeading, subheading: "", renderCtaButton: false, handleButtonClick: function () { return null; }, btnText: "", breadcrumbs: breadcrumbs }),
             react_1.default.createElement("div", { className: "mt-9" },
-                react_1.default.createElement(horoscope_cards_grid_1.HoroscopeCardsGrid, { cardItems: cardItems, cardLimit: cardLimit, cardSize: cardSize })))));
+                react_1.default.createElement(horoscope_cards_grid_1.HoroscopeCardsGrid, { cardItems: cardItems, cardLimit: cardLimit, cardSize: cardSize, loading: loading })))));
 };
 exports.HoroscopeSection = HoroscopeSection;

package/organisms/horoscope-section/props.js

@@ -10,4 +10,5 @@ exports.horoscopeSectionData = {
     breadcrumbs: {
         items: [{ label: 'Hororscope', route: '/horoscope', isActive: false }],
     },
+    loading: false,
 };

package/organisms/horoscope-section/type.d.ts

@@ -7,4 +7,5 @@ export interface HoroscopeSectionProps {
     cardItems: HoroscopeCardProps[];
     cardLimit: HOROSCOPE_CARDS_LIMITS;
     cardSize: HOROSCOPE_CARD_SIZES;
+    loading: boolean;
 }

package/organisms/time-line/time-line.js

@@ -20,13 +20,13 @@ var TimeLine = function (_a) {
     return (react_1.default.createElement("ul", { role: "list", className: "space-y-6" }, timelines.map(function (activityItem, activityItemIdx) {
         var activeState = activityItem.id === isActive;
         return (react_1.default.createElement("li", { key: activityItem.id, className: "relative flex items-start gap-x-4" },
-            react_1.default.createElement("div", { className: classNames(activityItemIdx === timelines.length - 1 ? 'h-4' : '-bottom-6', 'absolute left-0 top-0 flex w-6 justify-center') },
+            react_1.default.createElement("div", { className: classNames(activityItemIdx === timelines.length - 1 ? 'h-4' : '-bottom-6', 'absolute top-0 left-0 flex w-6 justify-center') },
                 react_1.default.createElement("div", { className: classNames('w-px', 'bg-primary') })),
             react_1.default.createElement("div", { className: "relative flex w-6 flex-none items-center justify-center bg-white" },
                 react_1.default.createElement("div", { className: classNames('size-4 rounded-full ring-1', activeState
                         ? 'bg-primary ring-primary'
-                        : 'bg-none ring-primary') })),
-            react_1.default.createElement("div", { className: classNames('-mt-2.5 flex-auto py-1 text-xs/5', activeState ? 'font-semibold text-primary' : 'text-gray-500') },
+                        : 'ring-primary bg-none') })),
+            react_1.default.createElement("div", { className: classNames('-mt-2.5 flex-auto py-1 text-xs/5', activeState ? 'text-primary font-semibold' : 'text-gray-500') },
                 react_1.default.createElement("span", { className: classNames(activeState ? '-mt-2.5 text-black' : '-mt-2.5 text-[#555555]') },
                     react_1.default.createElement(molecules_1.Typography, { variant: activeState
                             ? molecules_1.TYPOGRAPHY_VARIANTS.SUBH3

package/organisms/user-cards-grid/props.js

@@ -256,4 +256,5 @@ exports.userCardGridData = [
 exports.userGridData = {
     cardItems: exports.userCardGridData,
     cardsLimit: 6,
+    loading: false,
 };

package/organisms/user-cards-grid/type.d.ts

@@ -7,4 +7,5 @@ export declare enum USER_CARD_LIMITS {
 export interface UserGridProps {
     cardItems: UserCardProps[];
     cardsLimit: USER_CARD_LIMITS;
+    loading: boolean;
 }

package/organisms/user-cards-grid/user-cards-grid.js

@@ -47,9 +47,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserCardsGrid = void 0;
 var react_1 = __importStar(require("react"));
 var user_card_1 = require("../../molecules/user-card/user-card");
+var user_card_shimmer_1 = require("../../molecules/user-card-shimmer");
 var UserCardsGrid = function (_a) {
     var _b;
-    var cardItems = _a.cardItems, _c = _a.cardsLimit, cardsLimit = _c === void 0 ? 6 : _c;
+    var cardItems = _a.cardItems, _c = _a.cardsLimit, cardsLimit = _c === void 0 ? 6 : _c, loading = _a.loading;
     var _d = (0, react_1.useState)(false), isTablet = _d[0], setIsTablet = _d[1];
     (0, react_1.useEffect)(function () {
         var handleResize = function () {
@@ -62,6 +63,9 @@ var UserCardsGrid = function (_a) {
     var filteredCardItems = isTablet && cardsLimit === 3
         ? (_b = cardItems === null || cardItems === void 0 ? void 0 : cardItems.slice(0, cardsLimit)) === null || _b === void 0 ? void 0 : _b.filter(function (_, index) { return index !== 2; })
         : cardItems === null || cardItems === void 0 ? void 0 : cardItems.slice(0, cardsLimit);
+    if (loading)
+        return (react_1.default.createElement("div", { className: "mt-10" },
+            react_1.default.createElement("div", { className: "grid gap-10 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3" }, Array.from({ length: cardsLimit }).map(function (_, index) { return (react_1.default.createElement(user_card_shimmer_1.UserCardShimmer, { key: index })); }))));
     return (react_1.default.createElement("div", { className: "mt-10" },
         react_1.default.createElement("div", { className: "grid gap-10 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3" }, filteredCardItems === null || filteredCardItems === void 0 ? void 0 : filteredCardItems.map(function (userData) { return (react_1.default.createElement(user_card_1.UserCard, __assign({ key: userData.id }, userData))); }))));
 };

package/organisms/user-detail-banner/user-detail-banner.js

@@ -7,7 +7,7 @@ exports.UserDetailBanner = void 0;
 var molecules_1 = require("../../molecules");
 var react_1 = __importDefault(require("react"));
 var UserDetailBanner = function (_a) {
-    var userName = _a.userName, bannerImageSrc = _a.bannerImageSrc;
+    var userName = _a.userName;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "text-gray-800" },
             react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H2 },

package/organisms/users-list-explore/props.js

@@ -27,4 +27,5 @@ exports.userListExploreData = {
     onPrevious: function () { return void 0; },
     subheading: 'Getting started with Kismaa is quick, easy, and free. Start with a 14 day free trial, and end with countless happy patients.',
     totalPages: 3,
+    loading: false,
 };

package/organisms/users-list-explore/type.d.ts

@@ -19,4 +19,5 @@ export type UsersListExploreProps = {
     onPrevious: () => void;
     subheading: string;
     totalPages: number;
+    loading: boolean;
 };

package/organisms/users-list-explore/users-list-explore.js

@@ -9,11 +9,11 @@ var section_header_1 = require("../section-header");
 var user_cards_grid_1 = require("../user-cards-grid");
 var pagination_1 = require("../pagination/pagination");
 var UsersListExplore = function (_a) {
-    var badgeText = _a.badgeText, breadcrumbs = _a.breadcrumbs, btnIcon = _a.btnIcon, btnOutlined = _a.btnOutlined, btnText = _a.btnText, btnType = _a.btnType, cardItems = _a.cardItems, cardsLimit = _a.cardsLimit, currentPage = _a.currentPage, handleButtonClick = _a.handleButtonClick, heading = _a.heading, numberOfFilters = _a.numberOfFilters, onNext = _a.onNext, onPageChange = _a.onPageChange, onPrevious = _a.onPrevious, subheading = _a.subheading, totalPages = _a.totalPages;
+    var badgeText = _a.badgeText, breadcrumbs = _a.breadcrumbs, btnIcon = _a.btnIcon, btnOutlined = _a.btnOutlined, btnText = _a.btnText, btnType = _a.btnType, cardItems = _a.cardItems, cardsLimit = _a.cardsLimit, currentPage = _a.currentPage, handleButtonClick = _a.handleButtonClick, heading = _a.heading, numberOfFilters = _a.numberOfFilters, onNext = _a.onNext, onPageChange = _a.onPageChange, onPrevious = _a.onPrevious, subheading = _a.subheading, totalPages = _a.totalPages, loading = _a.loading;
     return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { badgeText: badgeText, breadcrumbs: breadcrumbs, btnIcon: btnIcon, btnOutlined: btnOutlined, btnText: btnText, btnType: btnType, handleButtonClick: handleButtonClick, heading: heading, numberOfFilters: numberOfFilters, renderCtaButton: true, subheading: subheading }),
-            react_1.default.createElement(user_cards_grid_1.UserCardsGrid, { cardItems: cardItems, cardsLimit: cardsLimit }),
+            react_1.default.createElement(user_cards_grid_1.UserCardsGrid, { cardItems: cardItems, cardsLimit: cardsLimit, loading: loading }),
             react_1.default.createElement("div", { className: "mt-12" },
                 react_1.default.createElement(pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, onPrevious: onPrevious, onNext: onNext })))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/kismaa-web-ui",
-  "version": "0.2.33",
+  "version": "0.2.35",
   "source": "src/index.ts",
   "main": "lib/main.js",
   "module": "lib/module.js",
@@ -13,8 +13,9 @@
     "clean": "yarn rimraf ./lib",
     "deploy:storybook": "concurrently \"yarn storybook:ghpages\" \"sleep 15 && rm ./*out*/favicon.ico && yarn copy:deploy:files\"",
     "dev": "next dev",
-    "lint": "next lint",
-    "lint:fix": "next lint --fix",
+    "format": "prettier --write src/",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix .",
     "major": "npm version major",
     "minor": "npm version minor",
     "patch": "npm version patch",
@@ -43,11 +44,10 @@
     }
   },
   "devDependencies": {
-    "@appcorp/app-corp-designs": "^0.4.90",
-    "@appcorp/app-corp-vista": "^0.2.83",
-    "@appcorp/kismaa-utils": "^0.2.24",
+    "@appcorp/app-corp-designs": "^0.4.91",
+    "@appcorp/app-corp-vista": "^0.3.0",
+    "@appcorp/kismaa-utils": "^0.2.36",
     "@chromatic-com/storybook": "3.2.6",
-    "@eslint/compat": "^1.2.8",
     "@headlessui/react": "^2",
     "@headlessui/tailwindcss": "^0",
     "@heroicons/react": "^2",
@@ -55,7 +55,7 @@
     "@mdx-js/react": "^3",
     "@next/eslint-plugin-next": "^15",
     "@next/mdx": "^15",
-    "@react-pakistan/util-functions": "^1.24.38",
+    "@react-pakistan/util-functions": "^1.24.41",
     "@storybook/addon-essentials": "^8",
     "@storybook/addon-interactions": "^8",
     "@storybook/addon-links": "^8",
@@ -77,17 +77,20 @@
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@typescript-eslint/eslint-plugin": "^8",
+    "@typescript-eslint/parser": "^8",
     "concurrently": "^9",
     "dayjs": "^1",
     "eslint": "^9",
     "eslint-config-next": "^15",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-config-prettier": "^10",
+    "eslint-plugin-prettier": "^5",
+    "eslint-plugin-storybook": "^9",
     "globals": "^15",
     "husky": "^9",
     "jest": "^29",
     "jest-environment-jsdom": "^29",
+    "libphonenumber-js": "^1",
     "lint-staged": "15",
     "next": "^15",
     "next-mdx-remote": "^5",