shad-m 1.0.0

package/dist/assets/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/assets/Image/index.mjs

@@ -0,0 +1,150 @@
+export { ReactComponent as AndroidRadioButtonImage40 } from './40_Color/im_40color_android_radio_button.svg';
+export { ReactComponent as AndroidSystemCalendarImage40 } from './40_Color/im_40color_android_system_calendar.svg';
+export { ReactComponent as AndroidSystemCameraImage40 } from './40_Color/im_40color_android_system_camera.svg';
+export { ReactComponent as AndroidSystemContactImage40 } from './40_Color/im_40color_android_system_contact.svg';
+export { ReactComponent as AndroidSystemImageImage40 } from './40_Color/im_40color_android_system_image.svg';
+export { ReactComponent as AndroidSystemLocationImage40 } from './40_Color/im_40color_android_system_location.svg';
+export { ReactComponent as AndroidSystemMicrophoneImage40 } from './40_Color/im_40color_android_system_microphone.svg';
+export { ReactComponent as AndroidSystemNotificationsImage40 } from './40_Color/im_40color_android_system_notifications.svg';
+export { ReactComponent as AndroidSystemPermissionImage40 } from './40_Color/im_40color_android_system_permission.svg';
+export { ReactComponent as AndroidSystemSettingsImage40 } from './40_Color/im_40color_android_system_settings.svg';
+export { ReactComponent as AndroidSystemStorageImage40 } from './40_Color/im_40color_android_system_storage.svg';
+export { ReactComponent as AndroidSystemToggleImage40 } from './40_Color/im_40color_android_system_toggle.svg';
+export { ReactComponent as IosSystemCalendarImage40 } from './40_Color/im_40color_ios_system_calendar.svg';
+export { ReactComponent as IosSystemCameraImage40 } from './40_Color/im_40color_ios_system_camera.svg';
+export { ReactComponent as IosSystemContactImage40 } from './40_Color/im_40color_ios_system_contact.svg';
+export { ReactComponent as IosSystemFaceidImage40 } from './40_Color/im_40color_ios_system_faceid.svg';
+export { ReactComponent as IosSystemLocationImage40 } from './40_Color/im_40color_ios_system_location.svg';
+export { ReactComponent as IosSystemMicrophoneImage40 } from './40_Color/im_40color_ios_system_microphone.svg';
+export { ReactComponent as IosSystemNotificationsImage40 } from './40_Color/im_40color_ios_system_notifications.svg';
+export { ReactComponent as IosSystemPhotosImage40 } from './40_Color/im_40color_ios_system_photos.svg';
+export { ReactComponent as IosSystemSettingsImage40 } from './40_Color/im_40color_ios_system_settings.svg';
+export { ReactComponent as IosSystemToggleImage40 } from './40_Color/im_40color_ios_system_toggle.svg';
+export { ReactComponent as IosSystemTouchidImage40 } from './40_Color/im_40color_ios_system_touchid.svg';
+export { ReactComponent as Logo1sealImage40 } from './40_Color/im_40color_logo_1seal.svg';
+export { ReactComponent as LogoAgentImage40 } from './40_Color/im_40color_logo_agent.svg';
+export { ReactComponent as LogoOnehousingImage40 } from './40_Color/im_40color_logo_onehousing.svg';
+export { ReactComponent as LogoVinidImage40 } from './40_Color/im_40color_logo_vinid.svg';
+export { ReactComponent as LogoVinshopImage40 } from './40_Color/im_40color_logo_vinshop.svg';
+export { ReactComponent as MapDotBlueImage40 } from './40_Color/im_40color_map_dot_blue.svg';
+export { ReactComponent as MapDotInkImage40 } from './40_Color/im_40color_map_dot_ink.svg';
+export { ReactComponent as MapDotRedImage40 } from './40_Color/im_40color_map_dot_red.svg';
+export { ReactComponent as MapHouseImage40 } from './40_Color/im_40color_map_house.svg';
+export { ReactComponent as OnehousingStarImage40 } from './40_Color/im_40color_onehousing_star.svg';
+export { ReactComponent as OnehousingStarHoverImage40 } from './40_Color/im_40color_onehousing_star_hover.svg';
+export { ReactComponent as OnehousingStarUnselectedImage40 } from './40_Color/im_40color_onehousing_star_unselected.svg';
+export { ReactComponent as AvatarDefaultImage64 } from './64_Color/im_64color_avatar_default.svg';
+export { ReactComponent as AccuracyHouseImage80 } from './80_Color/im_80color_accuracy_house.svg';
+export { ReactComponent as AichatbotFloatingbubbleImage80 } from './80_Color/im_80color_aichatbot_floatingbubble.svg';
+export { ReactComponent as AnalysisImage80 } from './80_Color/im_80color_analysis.svg';
+export { ReactComponent as BuyhousePackageImage80 } from './80_Color/im_80color_buyhouse_package.svg';
+export { ReactComponent as CustomerServiceImage80 } from './80_Color/im_80color_customer_service.svg';
+export { ReactComponent as CustomerSupportServiceManImage80 } from './80_Color/im_80color_customer_support_service_man.svg';
+export { ReactComponent as CustomerSupportServiceWomanImage80 } from './80_Color/im_80color_customer_support_service_woman.svg';
+export { ReactComponent as FileImage80 } from './80_Color/im_80color_file.svg';
+export { ReactComponent as IdentityFastImage80 } from './80_Color/im_80color_identity_fast.svg';
+export { ReactComponent as IdentitySuccessImage80 } from './80_Color/im_80color_identity_success.svg';
+export { ReactComponent as IdentityVerifyfailedImage80 } from './80_Color/im_80color_identity_verifyfailed.svg';
+export { ReactComponent as IdentityVerifyingImage80 } from './80_Color/im_80color_identity_verifying.svg';
+export { ReactComponent as InspiredIdeaImage80 } from './80_Color/im_80color_inspired_idea.svg';
+export { ReactComponent as MailNotificationImage80 } from './80_Color/im_80color_mail_notification.svg';
+export { ReactComponent as MicrophoneImage80 } from './80_Color/im_80color_microphone.svg';
+export { ReactComponent as MobileAddinfoImage80 } from './80_Color/im_80color_mobile_addinfo.svg';
+export { ReactComponent as MobileChecklistImage80 } from './80_Color/im_80color_mobile_checklist.svg';
+export { ReactComponent as MobileCqrMaintenanceImage80 } from './80_Color/im_80color_mobile_cqr_maintenance.svg';
+export { ReactComponent as MobileLinkbankImage80 } from './80_Color/im_80color_mobile_linkbank.svg';
+export { ReactComponent as MobileMessageImage80 } from './80_Color/im_80color_mobile_message.svg';
+export { ReactComponent as MobileSecurityImage80 } from './80_Color/im_80color_mobile_security.svg';
+export { ReactComponent as MobileSmartOtpImage, ReactComponent as MobileSmartOtpImage80 } from './80_Color/im_80color_mobile_smart_otp.svg';
+export { ReactComponent as NoPromotionImage80 } from './80_Color/im_80color_no_promotion.svg';
+export { ReactComponent as OwnershipVerifyfailedImage80 } from './80_Color/im_80color_ownership_verifyfailed.svg';
+export { ReactComponent as OwnershipVerifyinprogressImage80 } from './80_Color/im_80color_ownership_verifyinprogress.svg';
+export { ReactComponent as OwnershipVerifysuccessImage80 } from './80_Color/im_80color_ownership_verifysuccess.svg';
+export { ReactComponent as PriceLocationImage80 } from './80_Color/im_80color_price_location.svg';
+export { ReactComponent as PriceLocationCircleImage80 } from './80_Color/im_80color_price_location_circle.svg';
+export { ReactComponent as PromotionImage80 } from './80_Color/im_80color_promotion.svg';
+export { ReactComponent as PromotionGiftImage80 } from './80_Color/im_80color_promotion_gift.svg';
+export { ReactComponent as QuickResultsImage80 } from './80_Color/im_80color_quick_results.svg';
+export { ReactComponent as RealestateQuestionImage80 } from './80_Color/im_80color_realestate_question.svg';
+export { ReactComponent as SendPromoImage80 } from './80_Color/im_80color_send_promo.svg';
+export { ReactComponent as SharingKnowledgeRealestateImage80 } from './80_Color/im_80color_sharing_knowledge_realestate.svg';
+export { ReactComponent as SuggestionRentImage80 } from './80_Color/im_80color_suggestion_rent.svg';
+export { ReactComponent as TcbFailImage80 } from './80_Color/im_80color_tcb_fail.svg';
+export { ReactComponent as TcbProgessImage80 } from './80_Color/im_80color_tcb_progess.svg';
+export { ReactComponent as TcbSuccessImage80 } from './80_Color/im_80color_tcb_success.svg';
+export { ReactComponent as UnitPriceImage80 } from './80_Color/im_80color_unit_price.svg';
+export { ReactComponent as ValuateAlotofmoneyImage80 } from './80_Color/im_80color_valuate_alotofmoney.svg';
+export { ReactComponent as ValuateHouseImage80 } from './80_Color/im_80color_valuate_house.svg';
+export { ReactComponent as ValuateMoneyImage80 } from './80_Color/im_80color_valuate_money.svg';
+export { ReactComponent as ValuationResultsImage80 } from './80_Color/im_80color_valuation_results.svg';
+export { ReactComponent as VerifyPriceImage80 } from './80_Color/im_80color_verify_price.svg';
+export { ReactComponent as AgentContractImage128 } from './128_Color/im_128color_agent_contract.svg';
+export { ReactComponent as AgentNoDeadlineImage128 } from './128_Color/im_128color_agent_no_deadline.svg';
+export { ReactComponent as OhAreaLocationImage128 } from './128_Color/im_128color_oh_area_location.svg';
+export { ReactComponent as OhBedroomImage128 } from './128_Color/im_128color_oh_bedroom.svg';
+export { ReactComponent as OhContractImage128 } from './128_Color/im_128color_oh_contract.svg';
+export { ReactComponent as OhInforLoadingImage128 } from './128_Color/im_128color_oh_infor_loading.svg';
+export { ReactComponent as OhLocationImage128 } from './128_Color/im_128color_oh_location.svg';
+export { ReactComponent as OhProjectImage128 } from './128_Color/im_128color_oh_project.svg';
+export { ReactComponent as OhSearchImage128 } from './128_Color/im_128color_oh_search.svg';
+export { ReactComponent as OhSearchRealestateImage128 } from './128_Color/im_128color_oh_search_realestate.svg';
+export { ReactComponent as OhThanksImage128 } from './128_Color/im_128color_oh_thanks.svg';
+export { ReactComponent as OhValuateHouseImage128 } from './128_Color/im_128color_oh_valuate_house.svg';
+export { ReactComponent as OhValuateMoneyImage128 } from './128_Color/im_128color_oh_valuate_money.svg';
+export { ReactComponent as StatusErrorImage128 } from './128_Color/im_128color_status_error.svg';
+export { ReactComponent as StatusInprogressImage128 } from './128_Color/im_128color_status_inprogress.svg';
+export { ReactComponent as StatusSuccessImage128 } from './128_Color/im_128color_status_success.svg';
+export { ReactComponent as StatusWarningImage128 } from './128_Color/im_128color_status_warning.svg';
+export { ReactComponent as UnitPriceImage128 } from './128_Color/im_128color_unit_price.svg';
+export { ReactComponent as CamnangCategorySalesmanImage192 } from './192_Color/im_192color_camnang_category_salesman.svg';
+export { ReactComponent as CamnangCategorySalesmanOnImage192 } from './192_Color/im_192color_camnang_category_salesman_on.svg';
+export { ReactComponent as ConsumerFailImage192 } from './192_Color/im_192color_consumer_fail.svg';
+export { ReactComponent as ConsumerSuccessImage192 } from './192_Color/im_192color_consumer_success.svg';
+export { ReactComponent as ConsumerVerifyingImage192 } from './192_Color/im_192color_consumer_verifying.svg';
+export { ReactComponent as ContractImage192 } from './192_Color/im_192color_contract.svg';
+export { ReactComponent as HouseSoldoutImage192 } from './192_Color/im_192color_house_soldout.svg';
+export { ReactComponent as LockBoardImage192 } from './192_Color/im_192color_lock_board.svg';
+export { ReactComponent as ThanksImage192 } from './192_Color/im_192color_thanks.svg';
+export { ReactComponent as ValuationPointImage192 } from './192_Color/im_192color_valuation_point.svg';
+export { ReactComponent as Empty404NotfoundImage192 } from './192_Color/im_192empty_404_notfound.svg';
+export { ReactComponent as EmptyCallImage192 } from './192_Color/im_192empty_call.svg';
+export { ReactComponent as EmptyComingSoonImage192 } from './192_Color/im_192empty_coming_soon.svg';
+export { ReactComponent as EmptyContractImage192 } from './192_Color/im_192empty_contract.svg';
+export { ReactComponent as EmptyCustomerImage192 } from './192_Color/im_192empty_customer.svg';
+export { ReactComponent as EmptyDeadlineImage192 } from './192_Color/im_192empty_deadline.svg';
+export { ReactComponent as EmptyInforChartImage192 } from './192_Color/im_192empty_infor_chart.svg';
+export { ReactComponent as EmptyMaintenanceImage192 } from './192_Color/im_192empty_maintenance.svg';
+export { ReactComponent as EmptyNoInternetImage192 } from './192_Color/im_192empty_no_internet.svg';
+export { ReactComponent as EmptyNothingOtherImage192 } from './192_Color/im_192empty_nothing_other.svg';
+export { ReactComponent as EmptyNotificationImage192 } from './192_Color/im_192empty_notification.svg';
+export { ReactComponent as EmptyProjectImage192 } from './192_Color/im_192empty_project.svg';
+export { ReactComponent as EmptyUnknownErrorImage192 } from './192_Color/im_192empty_unknown_error.svg';
+export { ReactComponent as EmptyUpdateVersionImage192 } from './192_Color/im_192empty_update_version.svg';
+export { ReactComponent as EmptyWorkNotiImage192 } from './192_Color/im_192empty_work_noti.svg';
+export { ReactComponent as OnboardingBonusImage327 } from './327_Color/im_327_onboarding_bonus.svg';
+export { ReactComponent as OnboardingIncomeImage327 } from './327_Color/im_327_onboarding_income.svg';
+export { ReactComponent as OnboardingProagentImage327 } from './327_Color/im_327_onboarding_proagent.svg';
+export { ReactComponent as OnboardingSourceImage327 } from './327_Color/im_327_onboarding_source.svg';
+export { ReactComponent as AgentTeamImage327 } from './327_Color/im_327color_agent_team.svg';
+export { ReactComponent as ApprovalDefaultImage327 } from './327_Color/im_327color_approval_default.svg';
+export { ReactComponent as ApprovalFailImage327 } from './327_Color/im_327color_approval_fail.svg';
+export { ReactComponent as ApprovalSuccessImage327 } from './327_Color/im_327color_approval_success.svg';
+export { ReactComponent as AutoRefundImage327 } from './327_Color/im_327color_auto_refund.svg';
+export { ReactComponent as CongratDoneImage327 } from './327_Color/im_327color_congrat_done.svg';
+export { ReactComponent as EkybFailImage327 } from './327_Color/im_327color_ekyb_fail.svg';
+export { ReactComponent as EkybFailfaceImage327 } from './327_Color/im_327color_ekyb_failface.svg';
+export { ReactComponent as EkybFailidcardImage327 } from './327_Color/im_327color_ekyb_failidcard.svg';
+export { ReactComponent as EkybFailsystemImage327 } from './327_Color/im_327color_ekyb_failsystem.svg';
+export { ReactComponent as EkybLoadingImage327 } from './327_Color/im_327color_ekyb_loading.svg';
+export { ReactComponent as EkybSuccessImage327 } from './327_Color/im_327color_ekyb_success.svg';
+export { ReactComponent as EmlanZalochatImage327 } from './327_Color/im_327color_emlan_zalochat.svg';
+export { ReactComponent as IncomeBuyhouseImage327 } from './327_Color/im_327color_income_buyhouse.svg';
+export { ReactComponent as IncomeBuysellImage327 } from './327_Color/im_327color_income_buysell.svg';
+export { ReactComponent as InfoSendsuccessImage327 } from './327_Color/im_327color_info_sendsuccess.svg';
+export { ReactComponent as LinkedSuccessImage327 } from './327_Color/im_327color_linked_success.svg';
+export { ReactComponent as PriceAdviceImage327 } from './327_Color/im_327color_price_advice.svg';
+export { ReactComponent as UnitPriceImage, ReactComponent as UnitPriceImage327 } from './327_Color/im_327color_unit_price.svg';
+export { ReactComponent as ValuationPointImage327 } from './327_Color/im_327color_valuation_point.svg';
+export { ReactComponent as FilePdfIcon } from '../Logo/file-pdf-icon.svg';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/assets/Image/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs","sourcesContent":[]}

package/dist/common/display/countdown.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+interface CountdownProps {
+    /**
+     * Countdown duration in seconds (default: 300 seconds = 5 minutes)
+     */
+    duration?: number;
+    /**
+     * Callback when countdown reaches zero
+     */
+    onComplete?: () => void;
+    /**
+     * Whether countdown is active
+     */
+    active?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Format function for display
+     */
+    formatTime?: (minutes: number, seconds: number) => string;
+}
+declare const Countdown: React.FunctionComponent<CountdownProps>;
+export { Countdown, type CountdownProps };
+//# sourceMappingURL=countdown.d.ts.map

package/dist/common/display/countdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown.d.ts","sourceRoot":"","sources":["../../../src/common/display/countdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,cAAc;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CA6CtD,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}

package/dist/common/display/countdown.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@/lib/utils');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const Countdown = ({
+  duration = 300,
+  // 5 minutes default
+  onComplete,
+  active = true,
+  className,
+  formatTime
+}) => {
+  const [timeLeft, setTimeLeft] = React__namespace.useState(duration);
+  React__namespace.useEffect(() => {
+    if (!active || timeLeft <= 0) {
+      if (timeLeft <= 0 && onComplete) {
+        onComplete();
+      }
+      return;
+    }
+    const interval = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(interval);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [active, timeLeft, onComplete]);
+  React__namespace.useEffect(() => {
+    setTimeLeft(duration);
+  }, [duration]);
+  const minutes = Math.floor(timeLeft / 60);
+  const seconds = timeLeft % 60;
+  const defaultFormat = (minutes2, seconds2) => {
+    return `${minutes2.toString().padStart(2, "0")}:${seconds2.toString().padStart(2, "0")}`;
+  };
+  const displayTime = formatTime ? formatTime(minutes, seconds) : defaultFormat(minutes, seconds);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("text-ink-500s font-medium", className), children: displayTime });
+};
+
+exports.Countdown = Countdown;
+//# sourceMappingURL=countdown.js.map
+//# sourceMappingURL=countdown.js.map

package/dist/common/display/countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/countdown.tsx"],"names":["React","minutes","seconds","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,YAAqD,CAAC;AAAA,EAC1D,QAAA,GAAW,GAAA;AAAA;AAAA,EACX,UAAA;AAAA,EACA,MAAA,GAAS,IAAA;AAAA,EACT,SAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,gBAAA,CAAM,SAAS,QAAQ,CAAA;AAEvD,EAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,CAAC,MAAA,IAAU,QAAA,IAAY,CAAA,EAAG;AAC5B,MAAA,IAAI,QAAA,IAAY,KAAK,UAAA,EAAY;AAC/B,QAAA,UAAA,EAAW;AAAA,MACb;AACA,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,QAAA,GAAW,YAAY,MAAM;AACjC,MAAA,WAAA,CAAY,CAAC,IAAA,KAAS;AACpB,QAAA,IAAI,QAAQ,CAAA,EAAG;AACb,UAAA,aAAA,CAAc,QAAQ,CAAA;AACtB,UAAA,OAAO,CAAA;AAAA,QACT;AACA,QAAA,OAAO,IAAA,GAAO,CAAA;AAAA,MAChB,CAAC,CAAA;AAAA,IACH,GAAG,GAAI,CAAA;AAEP,IAAA,OAAO,MAAM,cAAc,QAAQ,CAAA;AAAA,EACrC,CAAA,EAAG,CAAC,MAAA,EAAQ,QAAA,EAAU,UAAU,CAAC,CAAA;AAGjC,EAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,WAAA,CAAY,QAAQ,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,KAAA,CAAM,QAAA,GAAW,EAAE,CAAA;AACxC,EAAA,MAAM,UAAU,QAAA,GAAW,EAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,CAACC,QAAAA,EAAiBC,QAAAA,KAAoB;AAC1D,IAAA,OAAO,CAAA,EAAGD,QAAAA,CAAQ,QAAA,EAAS,CAAE,SAAS,CAAA,EAAG,GAAG,CAAC,CAAA,CAAA,EAAIC,SAAQ,QAAA,EAAS,CAAE,QAAA,CAAS,CAAA,EAAG,GAAG,CAAC,CAAA,CAAA;AAAA,EACtF,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,aAAa,UAAA,CAAW,OAAA,EAAS,OAAO,CAAA,GAAI,aAAA,CAAc,SAAS,OAAO,CAAA;AAE9F,EAAA,sCAAQ,MAAA,EAAA,EAAK,SAAA,EAAWC,SAAG,2BAAA,EAA6B,SAAS,GAAI,QAAA,EAAA,WAAA,EAAY,CAAA;AACnF","file":"countdown.js","sourcesContent":["'use client';\n\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\n\ninterface CountdownProps {\n  /**\n   * Countdown duration in seconds (default: 300 seconds = 5 minutes)\n   */\n  duration?: number;\n  /**\n   * Callback when countdown reaches zero\n   */\n  onComplete?: () => void;\n  /**\n   * Whether countdown is active\n   */\n  active?: boolean;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Format function for display\n   */\n  formatTime?: (minutes: number, seconds: number) => string;\n}\n\nconst Countdown: React.FunctionComponent<CountdownProps> = ({\n  duration = 300, // 5 minutes default\n  onComplete,\n  active = true,\n  className,\n  formatTime,\n}) => {\n  const [timeLeft, setTimeLeft] = React.useState(duration);\n\n  React.useEffect(() => {\n    if (!active || timeLeft <= 0) {\n      if (timeLeft <= 0 && onComplete) {\n        onComplete();\n      }\n      return;\n    }\n\n    const interval = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev <= 1) {\n          clearInterval(interval);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [active, timeLeft, onComplete]);\n\n  // Reset countdown when duration changes\n  React.useEffect(() => {\n    setTimeLeft(duration);\n  }, [duration]);\n\n  const minutes = Math.floor(timeLeft / 60);\n  const seconds = timeLeft % 60;\n\n  const defaultFormat = (minutes: number, seconds: number) => {\n    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n  };\n\n  const displayTime = formatTime ? formatTime(minutes, seconds) : defaultFormat(minutes, seconds);\n\n  return <span className={cn('text-ink-500s font-medium', className)}>{displayTime}</span>;\n};\n\nexport { Countdown, type CountdownProps };\n"]}

package/dist/common/display/countdown.mjs

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+
+const Countdown = ({
+  duration = 300,
+  // 5 minutes default
+  onComplete,
+  active = true,
+  className,
+  formatTime
+}) => {
+  const [timeLeft, setTimeLeft] = React.useState(duration);
+  React.useEffect(() => {
+    if (!active || timeLeft <= 0) {
+      if (timeLeft <= 0 && onComplete) {
+        onComplete();
+      }
+      return;
+    }
+    const interval = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(interval);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [active, timeLeft, onComplete]);
+  React.useEffect(() => {
+    setTimeLeft(duration);
+  }, [duration]);
+  const minutes = Math.floor(timeLeft / 60);
+  const seconds = timeLeft % 60;
+  const defaultFormat = (minutes2, seconds2) => {
+    return `${minutes2.toString().padStart(2, "0")}:${seconds2.toString().padStart(2, "0")}`;
+  };
+  const displayTime = formatTime ? formatTime(minutes, seconds) : defaultFormat(minutes, seconds);
+  return /* @__PURE__ */ jsx("span", { className: cn("text-ink-500s font-medium", className), children: displayTime });
+};
+
+export { Countdown };
+//# sourceMappingURL=countdown.mjs.map
+//# sourceMappingURL=countdown.mjs.map

package/dist/common/display/countdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/countdown.tsx"],"names":["minutes","seconds"],"mappings":";;;;AA4BA,MAAM,YAAqD,CAAC;AAAA,EAC1D,QAAA,GAAW,GAAA;AAAA;AAAA,EACX,UAAA;AAAA,EACA,MAAA,GAAS,IAAA;AAAA,EACT,SAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,KAAA,CAAM,SAAS,QAAQ,CAAA;AAEvD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,CAAC,MAAA,IAAU,QAAA,IAAY,CAAA,EAAG;AAC5B,MAAA,IAAI,QAAA,IAAY,KAAK,UAAA,EAAY;AAC/B,QAAA,UAAA,EAAW;AAAA,MACb;AACA,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,QAAA,GAAW,YAAY,MAAM;AACjC,MAAA,WAAA,CAAY,CAAC,IAAA,KAAS;AACpB,QAAA,IAAI,QAAQ,CAAA,EAAG;AACb,UAAA,aAAA,CAAc,QAAQ,CAAA;AACtB,UAAA,OAAO,CAAA;AAAA,QACT;AACA,QAAA,OAAO,IAAA,GAAO,CAAA;AAAA,MAChB,CAAC,CAAA;AAAA,IACH,GAAG,GAAI,CAAA;AAEP,IAAA,OAAO,MAAM,cAAc,QAAQ,CAAA;AAAA,EACrC,CAAA,EAAG,CAAC,MAAA,EAAQ,QAAA,EAAU,UAAU,CAAC,CAAA;AAGjC,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,WAAA,CAAY,QAAQ,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,KAAA,CAAM,QAAA,GAAW,EAAE,CAAA;AACxC,EAAA,MAAM,UAAU,QAAA,GAAW,EAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,CAACA,QAAAA,EAAiBC,QAAAA,KAAoB;AAC1D,IAAA,OAAO,CAAA,EAAGD,QAAAA,CAAQ,QAAA,EAAS,CAAE,SAAS,CAAA,EAAG,GAAG,CAAC,CAAA,CAAA,EAAIC,SAAQ,QAAA,EAAS,CAAE,QAAA,CAAS,CAAA,EAAG,GAAG,CAAC,CAAA,CAAA;AAAA,EACtF,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,aAAa,UAAA,CAAW,OAAA,EAAS,OAAO,CAAA,GAAI,aAAA,CAAc,SAAS,OAAO,CAAA;AAE9F,EAAA,2BAAQ,MAAA,EAAA,EAAK,SAAA,EAAW,GAAG,2BAAA,EAA6B,SAAS,GAAI,QAAA,EAAA,WAAA,EAAY,CAAA;AACnF","file":"countdown.mjs","sourcesContent":["'use client';\n\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\n\ninterface CountdownProps {\n  /**\n   * Countdown duration in seconds (default: 300 seconds = 5 minutes)\n   */\n  duration?: number;\n  /**\n   * Callback when countdown reaches zero\n   */\n  onComplete?: () => void;\n  /**\n   * Whether countdown is active\n   */\n  active?: boolean;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Format function for display\n   */\n  formatTime?: (minutes: number, seconds: number) => string;\n}\n\nconst Countdown: React.FunctionComponent<CountdownProps> = ({\n  duration = 300, // 5 minutes default\n  onComplete,\n  active = true,\n  className,\n  formatTime,\n}) => {\n  const [timeLeft, setTimeLeft] = React.useState(duration);\n\n  React.useEffect(() => {\n    if (!active || timeLeft <= 0) {\n      if (timeLeft <= 0 && onComplete) {\n        onComplete();\n      }\n      return;\n    }\n\n    const interval = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev <= 1) {\n          clearInterval(interval);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [active, timeLeft, onComplete]);\n\n  // Reset countdown when duration changes\n  React.useEffect(() => {\n    setTimeLeft(duration);\n  }, [duration]);\n\n  const minutes = Math.floor(timeLeft / 60);\n  const seconds = timeLeft % 60;\n\n  const defaultFormat = (minutes: number, seconds: number) => {\n    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n  };\n\n  const displayTime = formatTime ? formatTime(minutes, seconds) : defaultFormat(minutes, seconds);\n\n  return <span className={cn('text-ink-500s font-medium', className)}>{displayTime}</span>;\n};\n\nexport { Countdown, type CountdownProps };\n"]}

package/dist/common/display/display-field-group.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+interface DisplayFieldItem {
+    label: string | React.ReactNode;
+    value: string | React.ReactNode;
+    placeholder?: string;
+}
+export interface DisplayFieldGroupProps {
+    /**
+     * Array of field items to display
+     */
+    items: DisplayFieldItem[];
+    /**
+     * Layout direction - vertical (default) for stacked layout, horizontal for side-by-side label:value pairs
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Number of columns for the grid layout
+     */
+    columns?: 1 | 2 | 3;
+    /**
+     * Gap between items - supports predefined gaps, dynamic spacing, or custom Tailwind gap classes
+     */
+    gap?: 'sm' | 'md' | 'lg' | 'between' | 'around' | 'evenly' | string;
+    /**
+     * Label width strategy - 'auto' for dynamic flexible width, or custom CSS value (e.g., '150px', '10rem')
+     */
+    labelWidth?: 'auto' | string;
+    /**
+     * Show bottom border for each field item (table-like styling)
+     */
+    showBorder?: boolean;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for each item container
+     */
+    itemClassName?: string;
+    /**
+     * Additional CSS classes for labels
+     */
+    labelClassName?: string;
+    /**
+     * Additional CSS classes for values
+     */
+    valueClassName?: string;
+    /**
+     * Default placeholder text when value is empty
+     */
+    defaultPlaceholder?: string;
+}
+/**
+ * A group component for displaying multiple label-value pairs in a consistent layout.
+ * Supports both vertical (stacked - default) and horizontal (side-by-side) layouts with proper alignment.
+ */
+export declare const DisplayFieldGroup: React.FC<DisplayFieldGroupProps>;
+export {};
+//# sourceMappingURL=display-field-group.d.ts.map

package/dist/common/display/display-field-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-group.d.ts","sourceRoot":"","sources":["../../../src/common/display/display-field-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiG9D,CAAC"}

package/dist/common/display/display-field-group.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@/lib/utils');
+var displayField = require('./display-field');
+
+const DisplayFieldGroup = ({
+  items,
+  layout = "vertical",
+  columns = 1,
+  gap = "md",
+  labelWidth = "auto",
+  showBorder = false,
+  className,
+  itemClassName,
+  labelClassName,
+  valueClassName,
+  defaultPlaceholder = "Ch\u01B0a c\u1EADp nh\u1EADt"
+}) => {
+  const gapClasses = {
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly"
+  };
+  const columnClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-3"
+  };
+  const getGapClass = () => {
+    if (gap in gapClasses) {
+      return gapClasses[gap];
+    }
+    return gap;
+  };
+  const getLabelWidthClass = () => {
+    return "flex-shrink-0 max-w-[240px] min-w-[120px] pr-3 break-words leading-tight";
+  };
+  const getLabelStyle = () => {
+    if (labelWidth && labelWidth !== "auto") {
+      return { width: labelWidth };
+    }
+    return void 0;
+  };
+  const renderItem = (item, index) => {
+    if (layout === "horizontal") {
+      const customLabelClassName = utils.cn(
+        getLabelWidthClass(),
+        "font-medium text-ink-400s",
+        labelClassName
+      );
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        displayField.DisplayField,
+        {
+          label: item.label,
+          value: item.value,
+          align: "horizontal",
+          placeholder: item.placeholder || defaultPlaceholder,
+          className: utils.cn("items-start", itemClassName),
+          labelClassName: customLabelClassName,
+          labelStyle: getLabelStyle(),
+          valueClassName: utils.cn("flex-1 font-medium text-ink-500s", valueClassName),
+          showBorder
+        },
+        index
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      displayField.DisplayField,
+      {
+        label: item.label,
+        value: item.value,
+        align: "vertical",
+        placeholder: item.placeholder || defaultPlaceholder,
+        className: itemClassName,
+        labelClassName,
+        valueClassName,
+        showBorder
+      },
+      index
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("grid", columnClasses[columns], getGapClass(), className), children: items.map(renderItem) });
+};
+
+exports.DisplayFieldGroup = DisplayFieldGroup;
+//# sourceMappingURL=display-field-group.js.map
+//# sourceMappingURL=display-field-group.js.map

package/dist/common/display/display-field-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/display-field-group.tsx"],"names":["cn","jsx","DisplayField"],"mappings":";;;;;;AA6DO,MAAM,oBAAsD,CAAC;AAAA,EAClE,KAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT,OAAA,GAAU,CAAA;AAAA,EACV,GAAA,GAAM,IAAA;AAAA,EACN,UAAA,GAAa,MAAA;AAAA,EACb,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA,GAAqB;AACvB,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,OAAA,EAAS,iBAAA;AAAA,IACT,MAAA,EAAQ,gBAAA;AAAA,IACR,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,CAAA,EAAG,aAAA;AAAA,IACH,CAAA,EAAG,4BAAA;AAAA,IACH,CAAA,EAAG;AAAA,GACL;AAGA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,OAAO,UAAA,EAAY;AACrB,MAAA,OAAO,WAAW,GAA8B,CAAA;AAAA,IAClD;AAEA,IAAA,OAAO,GAAA;AAAA,EACT,CAAA;AAGA,EAAA,MAAM,qBAAqB,MAAM;AAE/B,IAAA,OAAO,0EAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAE1B,IAAA,IAAI,UAAA,IAAc,eAAe,MAAA,EAAQ;AACvC,MAAA,OAAO,EAAE,OAAO,UAAA,EAAW;AAAA,IAC7B;AACA,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,IAAA,EAAwB,KAAA,KAAkB;AAE5D,IAAA,IAAI,WAAW,YAAA,EAAc;AAC3B,MAAA,MAAM,oBAAA,GAAuBA,QAAA;AAAA,QAC3B,kBAAA,EAAmB;AAAA,QACnB,2BAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAA,uBACEC,cAAA;AAAA,QAACC,yBAAA;AAAA,QAAA;AAAA,UAEC,OAAO,IAAA,CAAK,KAAA;AAAA,UACZ,OAAO,IAAA,CAAK,KAAA;AAAA,UACZ,KAAA,EAAM,YAAA;AAAA,UACN,WAAA,EAAa,KAAK,WAAA,IAAe,kBAAA;AAAA,UACjC,SAAA,EAAWF,QAAA,CAAG,aAAA,EAAe,aAAa,CAAA;AAAA,UAC1C,cAAA,EAAgB,oBAAA;AAAA,UAChB,YAAY,aAAA,EAAc;AAAA,UAC1B,cAAA,EAAgBA,QAAA,CAAG,kCAAA,EAAoC,cAAc,CAAA;AAAA,UACrE;AAAA,SAAA;AAAA,QATK;AAAA,OAUP;AAAA,IAEJ;AAGA,IAAA,uBACEC,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QAEC,OAAO,IAAA,CAAK,KAAA;AAAA,QACZ,OAAO,IAAA,CAAK,KAAA;AAAA,QACZ,KAAA,EAAM,UAAA;AAAA,QACN,WAAA,EAAa,KAAK,WAAA,IAAe,kBAAA;AAAA,QACjC,SAAA,EAAW,aAAA;AAAA,QACX,cAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OAAA;AAAA,MARK;AAAA,KASP;AAAA,EAEJ,CAAA;AAEA,EAAA,uBACED,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,QAAA,CAAG,QAAQ,aAAA,CAAc,OAAO,CAAA,EAAG,WAAA,IAAe,SAAS,CAAA,EACxE,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,UAAU,CAAA,EACvB,CAAA;AAEJ","file":"display-field-group.js","sourcesContent":["import { cn } from '@/lib/utils';\nimport React from 'react';\nimport { DisplayField } from './display-field';\n\ninterface DisplayFieldItem {\n  label: string | React.ReactNode;\n  value: string | React.ReactNode;\n  placeholder?: string;\n}\n\nexport interface DisplayFieldGroupProps {\n  /**\n   * Array of field items to display\n   */\n  items: DisplayFieldItem[];\n  /**\n   * Layout direction - vertical (default) for stacked layout, horizontal for side-by-side label:value pairs\n   */\n  layout?: 'horizontal' | 'vertical';\n  /**\n   * Number of columns for the grid layout\n   */\n  columns?: 1 | 2 | 3;\n  /**\n   * Gap between items - supports predefined gaps, dynamic spacing, or custom Tailwind gap classes\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'between' | 'around' | 'evenly' | string;\n  /**\n   * Label width strategy - 'auto' for dynamic flexible width, or custom CSS value (e.g., '150px', '10rem')\n   */\n  labelWidth?: 'auto' | string;\n  /**\n   * Show bottom border for each field item (table-like styling)\n   */\n  showBorder?: boolean;\n  /**\n   * Additional CSS classes for the container\n   */\n  className?: string;\n  /**\n   * Additional CSS classes for each item container\n   */\n  itemClassName?: string;\n  /**\n   * Additional CSS classes for labels\n   */\n  labelClassName?: string;\n  /**\n   * Additional CSS classes for values\n   */\n  valueClassName?: string;\n  /**\n   * Default placeholder text when value is empty\n   */\n  defaultPlaceholder?: string;\n}\n\n/**\n * A group component for displaying multiple label-value pairs in a consistent layout.\n * Supports both vertical (stacked - default) and horizontal (side-by-side) layouts with proper alignment.\n */\nexport const DisplayFieldGroup: React.FC<DisplayFieldGroupProps> = ({\n  items,\n  layout = 'vertical',\n  columns = 1,\n  gap = 'md',\n  labelWidth = 'auto',\n  showBorder = false,\n  className,\n  itemClassName,\n  labelClassName,\n  valueClassName,\n  defaultPlaceholder = 'Chưa cập nhật',\n}) => {\n  const gapClasses = {\n    sm: 'gap-2',\n    md: 'gap-4',\n    lg: 'gap-6',\n    between: 'justify-between',\n    around: 'justify-around',\n    evenly: 'justify-evenly',\n  };\n\n  const columnClasses = {\n    1: 'grid-cols-1',\n    2: 'grid-cols-1 md:grid-cols-2',\n    3: 'grid-cols-1 md:grid-cols-3',\n  };\n\n  // Get gap class - use predefined or pass through custom Tailwind class\n  const getGapClass = () => {\n    if (gap in gapClasses) {\n      return gapClasses[gap as keyof typeof gapClasses];\n    }\n    // Return custom gap class as-is (e.g., \"gap-8\", \"gap-[40px]\", etc.)\n    return gap;\n  };\n\n  // Calculate label width classes - always use dynamic auto width\n  const getLabelWidthClass = () => {\n    // Always use auto width for dynamic label sizing\n    return 'flex-shrink-0 max-w-[240px] min-w-[120px] pr-3 break-words leading-tight';\n  };\n\n  const getLabelStyle = () => {\n    // Only apply custom width if it's a custom CSS value (not 'auto')\n    if (labelWidth && labelWidth !== 'auto') {\n      return { width: labelWidth };\n    }\n    return undefined;\n  };\n\n  const renderItem = (item: DisplayFieldItem, index: number) => {\n    // For horizontal layout, we need to override some styles\n    if (layout === 'horizontal') {\n      const customLabelClassName = cn(\n        getLabelWidthClass(),\n        'font-medium text-ink-400s',\n        labelClassName,\n      );\n\n      return (\n        <DisplayField\n          key={index}\n          label={item.label}\n          value={item.value}\n          align=\"horizontal\"\n          placeholder={item.placeholder || defaultPlaceholder}\n          className={cn('items-start', itemClassName)}\n          labelClassName={customLabelClassName}\n          labelStyle={getLabelStyle()}\n          valueClassName={cn('flex-1 font-medium text-ink-500s', valueClassName)}\n          showBorder={showBorder}\n        />\n      );\n    }\n\n    // For vertical layout, use DisplayField as-is\n    return (\n      <DisplayField\n        key={index}\n        label={item.label}\n        value={item.value}\n        align=\"vertical\"\n        placeholder={item.placeholder || defaultPlaceholder}\n        className={itemClassName}\n        labelClassName={labelClassName}\n        valueClassName={valueClassName}\n        showBorder={showBorder}\n      />\n    );\n  };\n\n  return (\n    <div className={cn('grid', columnClasses[columns], getGapClass(), className)}>\n      {items.map(renderItem)}\n    </div>\n  );\n};\n"]}

package/dist/common/display/display-field-group.mjs

@@ -0,0 +1,89 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '@/lib/utils';
+import { DisplayField } from './display-field';
+
+const DisplayFieldGroup = ({
+  items,
+  layout = "vertical",
+  columns = 1,
+  gap = "md",
+  labelWidth = "auto",
+  showBorder = false,
+  className,
+  itemClassName,
+  labelClassName,
+  valueClassName,
+  defaultPlaceholder = "Ch\u01B0a c\u1EADp nh\u1EADt"
+}) => {
+  const gapClasses = {
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly"
+  };
+  const columnClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-3"
+  };
+  const getGapClass = () => {
+    if (gap in gapClasses) {
+      return gapClasses[gap];
+    }
+    return gap;
+  };
+  const getLabelWidthClass = () => {
+    return "flex-shrink-0 max-w-[240px] min-w-[120px] pr-3 break-words leading-tight";
+  };
+  const getLabelStyle = () => {
+    if (labelWidth && labelWidth !== "auto") {
+      return { width: labelWidth };
+    }
+    return void 0;
+  };
+  const renderItem = (item, index) => {
+    if (layout === "horizontal") {
+      const customLabelClassName = cn(
+        getLabelWidthClass(),
+        "font-medium text-ink-400s",
+        labelClassName
+      );
+      return /* @__PURE__ */ jsx(
+        DisplayField,
+        {
+          label: item.label,
+          value: item.value,
+          align: "horizontal",
+          placeholder: item.placeholder || defaultPlaceholder,
+          className: cn("items-start", itemClassName),
+          labelClassName: customLabelClassName,
+          labelStyle: getLabelStyle(),
+          valueClassName: cn("flex-1 font-medium text-ink-500s", valueClassName),
+          showBorder
+        },
+        index
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      DisplayField,
+      {
+        label: item.label,
+        value: item.value,
+        align: "vertical",
+        placeholder: item.placeholder || defaultPlaceholder,
+        className: itemClassName,
+        labelClassName,
+        valueClassName,
+        showBorder
+      },
+      index
+    );
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("grid", columnClasses[columns], getGapClass(), className), children: items.map(renderItem) });
+};
+
+export { DisplayFieldGroup };
+//# sourceMappingURL=display-field-group.mjs.map
+//# sourceMappingURL=display-field-group.mjs.map

package/dist/common/display/display-field-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/display-field-group.tsx"],"names":[],"mappings":";;;;AA6DO,MAAM,oBAAsD,CAAC;AAAA,EAClE,KAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT,OAAA,GAAU,CAAA;AAAA,EACV,GAAA,GAAM,IAAA;AAAA,EACN,UAAA,GAAa,MAAA;AAAA,EACb,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA,GAAqB;AACvB,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,OAAA,EAAS,iBAAA;AAAA,IACT,MAAA,EAAQ,gBAAA;AAAA,IACR,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,CAAA,EAAG,aAAA;AAAA,IACH,CAAA,EAAG,4BAAA;AAAA,IACH,CAAA,EAAG;AAAA,GACL;AAGA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,OAAO,UAAA,EAAY;AACrB,MAAA,OAAO,WAAW,GAA8B,CAAA;AAAA,IAClD;AAEA,IAAA,OAAO,GAAA;AAAA,EACT,CAAA;AAGA,EAAA,MAAM,qBAAqB,MAAM;AAE/B,IAAA,OAAO,0EAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAE1B,IAAA,IAAI,UAAA,IAAc,eAAe,MAAA,EAAQ;AACvC,MAAA,OAAO,EAAE,OAAO,UAAA,EAAW;AAAA,IAC7B;AACA,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,IAAA,EAAwB,KAAA,KAAkB;AAE5D,IAAA,IAAI,WAAW,YAAA,EAAc;AAC3B,MAAA,MAAM,oBAAA,GAAuB,EAAA;AAAA,QAC3B,kBAAA,EAAmB;AAAA,QACnB,2BAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAA,uBACE,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UAEC,OAAO,IAAA,CAAK,KAAA;AAAA,UACZ,OAAO,IAAA,CAAK,KAAA;AAAA,UACZ,KAAA,EAAM,YAAA;AAAA,UACN,WAAA,EAAa,KAAK,WAAA,IAAe,kBAAA;AAAA,UACjC,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,aAAa,CAAA;AAAA,UAC1C,cAAA,EAAgB,oBAAA;AAAA,UAChB,YAAY,aAAA,EAAc;AAAA,UAC1B,cAAA,EAAgB,EAAA,CAAG,kCAAA,EAAoC,cAAc,CAAA;AAAA,UACrE;AAAA,SAAA;AAAA,QATK;AAAA,OAUP;AAAA,IAEJ;AAGA,IAAA,uBACE,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QAEC,OAAO,IAAA,CAAK,KAAA;AAAA,QACZ,OAAO,IAAA,CAAK,KAAA;AAAA,QACZ,KAAA,EAAM,UAAA;AAAA,QACN,WAAA,EAAa,KAAK,WAAA,IAAe,kBAAA;AAAA,QACjC,SAAA,EAAW,aAAA;AAAA,QACX,cAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OAAA;AAAA,MARK;AAAA,KASP;AAAA,EAEJ,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,QAAQ,aAAA,CAAc,OAAO,CAAA,EAAG,WAAA,IAAe,SAAS,CAAA,EACxE,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,UAAU,CAAA,EACvB,CAAA;AAEJ","file":"display-field-group.mjs","sourcesContent":["import { cn } from '@/lib/utils';\nimport React from 'react';\nimport { DisplayField } from './display-field';\n\ninterface DisplayFieldItem {\n  label: string | React.ReactNode;\n  value: string | React.ReactNode;\n  placeholder?: string;\n}\n\nexport interface DisplayFieldGroupProps {\n  /**\n   * Array of field items to display\n   */\n  items: DisplayFieldItem[];\n  /**\n   * Layout direction - vertical (default) for stacked layout, horizontal for side-by-side label:value pairs\n   */\n  layout?: 'horizontal' | 'vertical';\n  /**\n   * Number of columns for the grid layout\n   */\n  columns?: 1 | 2 | 3;\n  /**\n   * Gap between items - supports predefined gaps, dynamic spacing, or custom Tailwind gap classes\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'between' | 'around' | 'evenly' | string;\n  /**\n   * Label width strategy - 'auto' for dynamic flexible width, or custom CSS value (e.g., '150px', '10rem')\n   */\n  labelWidth?: 'auto' | string;\n  /**\n   * Show bottom border for each field item (table-like styling)\n   */\n  showBorder?: boolean;\n  /**\n   * Additional CSS classes for the container\n   */\n  className?: string;\n  /**\n   * Additional CSS classes for each item container\n   */\n  itemClassName?: string;\n  /**\n   * Additional CSS classes for labels\n   */\n  labelClassName?: string;\n  /**\n   * Additional CSS classes for values\n   */\n  valueClassName?: string;\n  /**\n   * Default placeholder text when value is empty\n   */\n  defaultPlaceholder?: string;\n}\n\n/**\n * A group component for displaying multiple label-value pairs in a consistent layout.\n * Supports both vertical (stacked - default) and horizontal (side-by-side) layouts with proper alignment.\n */\nexport const DisplayFieldGroup: React.FC<DisplayFieldGroupProps> = ({\n  items,\n  layout = 'vertical',\n  columns = 1,\n  gap = 'md',\n  labelWidth = 'auto',\n  showBorder = false,\n  className,\n  itemClassName,\n  labelClassName,\n  valueClassName,\n  defaultPlaceholder = 'Chưa cập nhật',\n}) => {\n  const gapClasses = {\n    sm: 'gap-2',\n    md: 'gap-4',\n    lg: 'gap-6',\n    between: 'justify-between',\n    around: 'justify-around',\n    evenly: 'justify-evenly',\n  };\n\n  const columnClasses = {\n    1: 'grid-cols-1',\n    2: 'grid-cols-1 md:grid-cols-2',\n    3: 'grid-cols-1 md:grid-cols-3',\n  };\n\n  // Get gap class - use predefined or pass through custom Tailwind class\n  const getGapClass = () => {\n    if (gap in gapClasses) {\n      return gapClasses[gap as keyof typeof gapClasses];\n    }\n    // Return custom gap class as-is (e.g., \"gap-8\", \"gap-[40px]\", etc.)\n    return gap;\n  };\n\n  // Calculate label width classes - always use dynamic auto width\n  const getLabelWidthClass = () => {\n    // Always use auto width for dynamic label sizing\n    return 'flex-shrink-0 max-w-[240px] min-w-[120px] pr-3 break-words leading-tight';\n  };\n\n  const getLabelStyle = () => {\n    // Only apply custom width if it's a custom CSS value (not 'auto')\n    if (labelWidth && labelWidth !== 'auto') {\n      return { width: labelWidth };\n    }\n    return undefined;\n  };\n\n  const renderItem = (item: DisplayFieldItem, index: number) => {\n    // For horizontal layout, we need to override some styles\n    if (layout === 'horizontal') {\n      const customLabelClassName = cn(\n        getLabelWidthClass(),\n        'font-medium text-ink-400s',\n        labelClassName,\n      );\n\n      return (\n        <DisplayField\n          key={index}\n          label={item.label}\n          value={item.value}\n          align=\"horizontal\"\n          placeholder={item.placeholder || defaultPlaceholder}\n          className={cn('items-start', itemClassName)}\n          labelClassName={customLabelClassName}\n          labelStyle={getLabelStyle()}\n          valueClassName={cn('flex-1 font-medium text-ink-500s', valueClassName)}\n          showBorder={showBorder}\n        />\n      );\n    }\n\n    // For vertical layout, use DisplayField as-is\n    return (\n      <DisplayField\n        key={index}\n        label={item.label}\n        value={item.value}\n        align=\"vertical\"\n        placeholder={item.placeholder || defaultPlaceholder}\n        className={itemClassName}\n        labelClassName={labelClassName}\n        valueClassName={valueClassName}\n        showBorder={showBorder}\n      />\n    );\n  };\n\n  return (\n    <div className={cn('grid', columnClasses[columns], getGapClass(), className)}>\n      {items.map(renderItem)}\n    </div>\n  );\n};\n"]}