premium-react-loaders 1.2.0 → 1.3.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.
Files changed (135) hide show
  1. package/dist/components/overlay/LoaderOverlay.d.ts.map +1 -1
  2. package/dist/components/progress/ProgressBar.d.ts.map +1 -1
  3. package/dist/components/progress/ProgressCircle.d.ts.map +1 -1
  4. package/dist/components/progress/ProgressRing.d.ts.map +1 -1
  5. package/dist/components/progress/ProgressSteps.d.ts.map +1 -1
  6. package/dist/components/pulse/PulseBars.d.ts.map +1 -1
  7. package/dist/components/pulse/PulseDots.d.ts.map +1 -1
  8. package/dist/components/pulse/PulseWave.d.ts.map +1 -1
  9. package/dist/components/pulse/TypingIndicator.d.ts.map +1 -1
  10. package/dist/components/skeleton/Skeleton.d.ts.map +1 -1
  11. package/dist/components/skeleton/SkeletonAvatar.d.ts.map +1 -1
  12. package/dist/components/skeleton/SkeletonCard.d.ts.map +1 -1
  13. package/dist/components/skeleton/SkeletonForm.d.ts.map +1 -1
  14. package/dist/components/skeleton/SkeletonImage.d.ts.map +1 -1
  15. package/dist/components/skeleton/SkeletonList.d.ts.map +1 -1
  16. package/dist/components/skeleton/SkeletonPage.d.ts.map +1 -1
  17. package/dist/components/skeleton/SkeletonTable.d.ts.map +1 -1
  18. package/dist/components/skeleton/SkeletonText.d.ts.map +1 -1
  19. package/dist/components/spinner/SpinnerBars.d.ts.map +1 -1
  20. package/dist/components/spinner/SpinnerCircle.d.ts.map +1 -1
  21. package/dist/components/spinner/SpinnerDots.d.ts.map +1 -1
  22. package/dist/components/spinner/SpinnerGrid.d.ts.map +1 -1
  23. package/dist/components/spinner/SpinnerPulse.d.ts.map +1 -1
  24. package/dist/components/spinner/SpinnerRing.d.ts.map +1 -1
  25. package/dist/components/spinner/SpinnerWave.d.ts.map +1 -1
  26. package/dist/index10.cjs +14 -2
  27. package/dist/index10.cjs.map +1 -1
  28. package/dist/index10.js +14 -2
  29. package/dist/index10.js.map +1 -1
  30. package/dist/index11.cjs +16 -2
  31. package/dist/index11.cjs.map +1 -1
  32. package/dist/index11.js +16 -2
  33. package/dist/index11.js.map +1 -1
  34. package/dist/index12.cjs +16 -2
  35. package/dist/index12.cjs.map +1 -1
  36. package/dist/index12.js +16 -2
  37. package/dist/index12.js.map +1 -1
  38. package/dist/index13.cjs +12 -2
  39. package/dist/index13.cjs.map +1 -1
  40. package/dist/index13.js +12 -2
  41. package/dist/index13.js.map +1 -1
  42. package/dist/index14.cjs +15 -2
  43. package/dist/index14.cjs.map +1 -1
  44. package/dist/index14.js +16 -3
  45. package/dist/index14.js.map +1 -1
  46. package/dist/index15.cjs +15 -2
  47. package/dist/index15.cjs.map +1 -1
  48. package/dist/index15.js +16 -3
  49. package/dist/index15.js.map +1 -1
  50. package/dist/index16.cjs +15 -2
  51. package/dist/index16.cjs.map +1 -1
  52. package/dist/index16.js +16 -3
  53. package/dist/index16.js.map +1 -1
  54. package/dist/index17.cjs +13 -2
  55. package/dist/index17.cjs.map +1 -1
  56. package/dist/index17.js +14 -3
  57. package/dist/index17.js.map +1 -1
  58. package/dist/index18.cjs +17 -4
  59. package/dist/index18.cjs.map +1 -1
  60. package/dist/index18.js +18 -5
  61. package/dist/index18.js.map +1 -1
  62. package/dist/index19.cjs +15 -2
  63. package/dist/index19.cjs.map +1 -1
  64. package/dist/index19.js +16 -3
  65. package/dist/index19.js.map +1 -1
  66. package/dist/index20.cjs +15 -2
  67. package/dist/index20.cjs.map +1 -1
  68. package/dist/index20.js +16 -3
  69. package/dist/index20.js.map +1 -1
  70. package/dist/index21.cjs +14 -3
  71. package/dist/index21.cjs.map +1 -1
  72. package/dist/index21.js +15 -4
  73. package/dist/index21.js.map +1 -1
  74. package/dist/index22.cjs +13 -2
  75. package/dist/index22.cjs.map +1 -1
  76. package/dist/index22.js +14 -3
  77. package/dist/index22.js.map +1 -1
  78. package/dist/index23.cjs +14 -3
  79. package/dist/index23.cjs.map +1 -1
  80. package/dist/index23.js +15 -4
  81. package/dist/index23.js.map +1 -1
  82. package/dist/index24.cjs +16 -2
  83. package/dist/index24.cjs.map +1 -1
  84. package/dist/index24.js +16 -2
  85. package/dist/index24.js.map +1 -1
  86. package/dist/index25.cjs +13 -2
  87. package/dist/index25.cjs.map +1 -1
  88. package/dist/index25.js +14 -3
  89. package/dist/index25.js.map +1 -1
  90. package/dist/index26.cjs +15 -4
  91. package/dist/index26.cjs.map +1 -1
  92. package/dist/index26.js +16 -5
  93. package/dist/index26.js.map +1 -1
  94. package/dist/index27.cjs +15 -4
  95. package/dist/index27.cjs.map +1 -1
  96. package/dist/index27.js +16 -5
  97. package/dist/index27.js.map +1 -1
  98. package/dist/index28.cjs +13 -2
  99. package/dist/index28.cjs.map +1 -1
  100. package/dist/index28.js +14 -3
  101. package/dist/index28.js.map +1 -1
  102. package/dist/index29.cjs +14 -2
  103. package/dist/index29.cjs.map +1 -1
  104. package/dist/index29.js +14 -2
  105. package/dist/index29.js.map +1 -1
  106. package/dist/index31.cjs +84 -0
  107. package/dist/index31.cjs.map +1 -1
  108. package/dist/index31.js +85 -1
  109. package/dist/index31.js.map +1 -1
  110. package/dist/index5.cjs +14 -2
  111. package/dist/index5.cjs.map +1 -1
  112. package/dist/index5.js +14 -2
  113. package/dist/index5.js.map +1 -1
  114. package/dist/index6.cjs +14 -2
  115. package/dist/index6.cjs.map +1 -1
  116. package/dist/index6.js +14 -2
  117. package/dist/index6.js.map +1 -1
  118. package/dist/index7.cjs +16 -2
  119. package/dist/index7.cjs.map +1 -1
  120. package/dist/index7.js +16 -2
  121. package/dist/index7.js.map +1 -1
  122. package/dist/index8.cjs +14 -2
  123. package/dist/index8.cjs.map +1 -1
  124. package/dist/index8.js +14 -2
  125. package/dist/index8.js.map +1 -1
  126. package/dist/index9.cjs +16 -2
  127. package/dist/index9.cjs.map +1 -1
  128. package/dist/index9.js +16 -2
  129. package/dist/index9.js.map +1 -1
  130. package/dist/premium-react-loaders.css +136 -4
  131. package/dist/types/common.d.ts +6 -0
  132. package/dist/types/common.d.ts.map +1 -1
  133. package/dist/utils/hooks.d.ts +9 -0
  134. package/dist/utils/hooks.d.ts.map +1 -1
  135. package/package.json +1 -1
package/dist/components/overlay/LoaderOverlay.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LoaderOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/LoaderOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,+GA+DzB,CAAC"}
1
+ {"version":3,"file":"LoaderOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/LoaderOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,+GA2EzB,CAAC"}
package/dist/components/progress/ProgressBar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,6GA4GvB,CAAC"}
1
+ {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,6GAwHvB,CAAC"}
package/dist/components/progress/ProgressCircle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,gHAsH1B,CAAC"}
1
+ {"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,gHAiI1B,CAAC"}
package/dist/components/progress/ProgressRing.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GAgIxB,CAAC"}
1
+ {"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GA8IxB,CAAC"}
package/dist/components/progress/ProgressSteps.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressSteps.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressSteps.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,+GAuIzB,CAAC"}
1
+ {"version":3,"file":"ProgressSteps.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressSteps.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,+GAqJzB,CAAC"}
package/dist/components/pulse/PulseBars.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PulseBars.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAiErB,CAAC"}
1
+ {"version":3,"file":"PulseBars.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GA4ErB,CAAC"}
package/dist/components/pulse/PulseDots.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PulseDots.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAsDrB,CAAC"}
1
+ {"version":3,"file":"PulseDots.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAiErB,CAAC"}
package/dist/components/pulse/PulseWave.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PulseWave.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GA6DrB,CAAC"}
1
+ {"version":3,"file":"PulseWave.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAwErB,CAAC"}
package/dist/components/pulse/TypingIndicator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/TypingIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,iHA0D3B,CAAC"}
1
+ {"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/TypingIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,iHAqE3B,CAAC"}
package/dist/components/skeleton/Skeleton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sFA4DpB,CAAC"}
1
+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sFAwEpB,CAAC"}
package/dist/components/skeleton/SkeletonAvatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,gHAqC1B,CAAC"}
1
+ {"version":3,"file":"SkeletonAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,gHAmD1B,CAAC"}
package/dist/components/skeleton/SkeletonCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonCard.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAKhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GAiExB,CAAC"}
1
+ {"version":3,"file":"SkeletonCard.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAKhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GA+ExB,CAAC"}
package/dist/components/skeleton/SkeletonForm.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonForm.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GAmFxB,CAAC"}
1
+ {"version":3,"file":"SkeletonForm.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GA6FxB,CAAC"}
package/dist/components/skeleton/SkeletonImage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonImage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAyCzB,CAAC"}
1
+ {"version":3,"file":"SkeletonImage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAqDzB,CAAC"}
package/dist/components/skeleton/SkeletonList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonList.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAkDxB,CAAC"}
1
+ {"version":3,"file":"SkeletonList.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GA8DxB,CAAC"}
package/dist/components/skeleton/SkeletonPage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonPage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAMhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GA+LxB,CAAC"}
1
+ {"version":3,"file":"SkeletonPage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAMhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GA6MxB,CAAC"}
package/dist/components/skeleton/SkeletonTable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonTable.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAgEzB,CAAC"}
1
+ {"version":3,"file":"SkeletonTable.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GA8EzB,CAAC"}
package/dist/components/skeleton/SkeletonText.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAsDxB,CAAC"}
1
+ {"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAkExB,CAAC"}
package/dist/components/spinner/SpinnerBars.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpinnerBars.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAwDvB,CAAC"}
1
+ {"version":3,"file":"SpinnerBars.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAU/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAmEvB,CAAC"}
package/dist/components/spinner/SpinnerCircle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpinnerCircle.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,+GA0DzB,CAAC"}
1
+ {"version":3,"file":"SpinnerCircle.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AASjD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,+GAuEzB,CAAC"}
package/dist/components/spinner/SpinnerDots.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpinnerDots.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAyEvB,CAAC"}
1
+ {"version":3,"file":"SpinnerDots.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAU/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAsFvB,CAAC"}
package/dist/components/spinner/SpinnerGrid.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpinnerGrid.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAqEvB,CAAC"}
1
+ {"version":3,"file":"SpinnerGrid.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAkFvB,CAAC"}
package/dist/components/spinner/SpinnerPulse.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpinnerPulse.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerPulse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GA0ExB,CAAC"}
1
+ {"version":3,"file":"SpinnerPulse.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerPulse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GAuFxB,CAAC"}
package/dist/components/spinner/SpinnerRing.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpinnerRing.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GAiDvB,CAAC"}
1
+ {"version":3,"file":"SpinnerRing.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA8DvB,CAAC"}
package/dist/components/spinner/SpinnerWave.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpinnerWave.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA8DvB,CAAC"}
1
+ {"version":3,"file":"SpinnerWave.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA2EvB,CAAC"}
package/dist/index10.cjs CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
5
  const Skeleton = require("./index5.cjs");
6
+ const hooks = require("./index31.cjs");
6
7
  const colors = require("./index4.cjs");
7
8
  const classNames = require("./index3.cjs");
8
9
  const SkeletonList = react.forwardRef(
@@ -15,13 +16,22 @@ const SkeletonList = react.forwardRef(
15
16
  baseColor,
16
17
  highlightColor,
17
18
  borderRadius = "0.5rem",
19
+ delay = 0,
20
+ minDuration = 0,
21
+ transition,
18
22
  className,
19
23
  style,
20
24
  testId = "skeleton-list",
21
25
  visible = true,
22
26
  ...rest
23
27
  }, ref) => {
24
- if (!visible) return null;
28
+ const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
29
+ visible,
30
+ delay,
31
+ minDuration,
32
+ transition
33
+ );
34
+ if (!shouldRender) return null;
25
35
  return /* @__PURE__ */ jsxRuntime.jsx(
26
36
  "div",
27
37
  {
@@ -30,7 +40,9 @@ const SkeletonList = react.forwardRef(
30
40
  className: classNames.cn("flex flex-col", className),
31
41
  style: {
32
42
  gap: colors.normalizeSize(gap),
33
- ...style
43
+ ...style,
44
+ opacity,
45
+ transition: transitionStyle
34
46
  },
35
47
  role: "status",
36
48
  "aria-label": "Loading list...",
package/dist/index10.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index10.cjs","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n (\n {\n items = 3,\n itemHeight = '3rem',\n gap = '0.75rem',\n width = '100%',\n animate = true,\n baseColor,\n highlightColor,\n borderRadius = '0.5rem',\n className,\n style,\n testId = 'skeleton-list',\n visible = true,\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('flex flex-col', className)}\n style={{\n gap: normalizeSize(gap),\n ...style,\n }}\n role=\"status\"\n aria-label=\"Loading list...\"\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: items }).map((_, index) => (\n <Skeleton\n key={index}\n width={width}\n height={itemHeight}\n variant=\"rounded\"\n borderRadius={borderRadius}\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":["forwardRef","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAKC,OAAAA,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrCF,2BAAAA;AAAAA,UAACG,SAAAA;AAAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}
1
+ {"version":3,"file":"index10.cjs","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n (\n {\n items = 3,\n itemHeight = '3rem',\n gap = '0.75rem',\n width = '100%',\n animate = true,\n baseColor,\n highlightColor,\n borderRadius = '0.5rem',\n delay = 0,\n minDuration = 0,\n transition,\n className,\n style,\n testId = 'skeleton-list',\n visible = true,\n ...rest\n },\n ref\n ) => {\n const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n visible,\n delay,\n minDuration,\n transition\n );\n\n if (!shouldRender) return null;\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('flex flex-col', className)}\n style={{\n gap: normalizeSize(gap),\n ...style,\n opacity,\n transition: transitionStyle,\n }}\n role=\"status\"\n aria-label=\"Loading list...\"\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: items }).map((_, index) => (\n <Skeleton\n key={index}\n width={width}\n height={itemHeight}\n variant=\"rounded\"\n borderRadius={borderRadius}\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":["forwardRef","useLoaderVisibility","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAKC,OAAAA,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrCF,2BAAAA;AAAAA,UAACG,SAAAA;AAAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}
package/dist/index10.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { forwardRef } from "react";
3
3
  import { Skeleton } from "./index5.js";
4
+ import { useLoaderVisibility } from "./index31.js";
4
5
  import { normalizeSize } from "./index4.js";
5
6
  import { cn } from "./index3.js";
6
7
  const SkeletonList = forwardRef(
@@ -13,13 +14,22 @@ const SkeletonList = forwardRef(
13
14
  baseColor,
14
15
  highlightColor,
15
16
  borderRadius = "0.5rem",
17
+ delay = 0,
18
+ minDuration = 0,
19
+ transition,
16
20
  className,
17
21
  style,
18
22
  testId = "skeleton-list",
19
23
  visible = true,
20
24
  ...rest
21
25
  }, ref) => {
22
- if (!visible) return null;
26
+ const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
27
+ visible,
28
+ delay,
29
+ minDuration,
30
+ transition
31
+ );
32
+ if (!shouldRender) return null;
23
33
  return /* @__PURE__ */ jsx(
24
34
  "div",
25
35
  {
@@ -28,7 +38,9 @@ const SkeletonList = forwardRef(
28
38
  className: cn("flex flex-col", className),
29
39
  style: {
30
40
  gap: normalizeSize(gap),
31
- ...style
41
+ ...style,
42
+ opacity,
43
+ transition: transitionStyle
32
44
  },
33
45
  role: "status",
34
46
  "aria-label": "Loading list...",
package/dist/index10.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index10.js","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n (\n {\n items = 3,\n itemHeight = '3rem',\n gap = '0.75rem',\n width = '100%',\n animate = true,\n baseColor,\n highlightColor,\n borderRadius = '0.5rem',\n className,\n style,\n testId = 'skeleton-list',\n visible = true,\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('flex flex-col', className)}\n style={{\n gap: normalizeSize(gap),\n ...style,\n }}\n role=\"status\"\n aria-label=\"Loading list...\"\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: items }).map((_, index) => (\n <Skeleton\n key={index}\n width={width}\n height={itemHeight}\n variant=\"rounded\"\n borderRadius={borderRadius}\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAK,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}
1
+ {"version":3,"file":"index10.js","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n (\n {\n items = 3,\n itemHeight = '3rem',\n gap = '0.75rem',\n width = '100%',\n animate = true,\n baseColor,\n highlightColor,\n borderRadius = '0.5rem',\n delay = 0,\n minDuration = 0,\n transition,\n className,\n style,\n testId = 'skeleton-list',\n visible = true,\n ...rest\n },\n ref\n ) => {\n const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n visible,\n delay,\n minDuration,\n transition\n );\n\n if (!shouldRender) return null;\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('flex flex-col', className)}\n style={{\n gap: normalizeSize(gap),\n ...style,\n opacity,\n transition: transitionStyle,\n }}\n role=\"status\"\n aria-label=\"Loading list...\"\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: items }).map((_, index) => (\n <Skeleton\n key={index}\n width={width}\n height={itemHeight}\n variant=\"rounded\"\n borderRadius={borderRadius}\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAK,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}
package/dist/index11.cjs CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
5
  const Skeleton = require("./index5.cjs");
6
+ const hooks = require("./index31.cjs");
6
7
  const classNames = require("./index3.cjs");
7
8
  const SkeletonTable = react.forwardRef(
8
9
  ({
@@ -12,13 +13,22 @@ const SkeletonTable = react.forwardRef(
12
13
  animate = true,
13
14
  baseColor,
14
15
  highlightColor,
16
+ delay = 0,
17
+ minDuration = 0,
18
+ transition,
15
19
  className,
16
20
  style,
17
21
  testId = "skeleton-table",
18
22
  visible = true,
19
23
  ...rest
20
24
  }, ref) => {
21
- if (!visible) return null;
25
+ const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
26
+ visible,
27
+ delay,
28
+ minDuration,
29
+ transition
30
+ );
31
+ if (!shouldRender) return null;
22
32
  const renderRow = (isHeader = false) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
23
33
  Skeleton.Skeleton,
24
34
  {
@@ -37,7 +47,11 @@ const SkeletonTable = react.forwardRef(
37
47
  ref,
38
48
  "data-testid": testId,
39
49
  className: classNames.cn("flex flex-col gap-3", className),
40
- style,
50
+ style: {
51
+ ...style,
52
+ opacity,
53
+ transition: transitionStyle
54
+ },
41
55
  role: "status",
42
56
  "aria-label": "Loading table...",
43
57
  "aria-busy": "true",
package/dist/index11.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index11.cjs","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n (\n {\n rows = 5,\n columns = 3,\n showHeader = true,\n animate = true,\n baseColor,\n highlightColor,\n className,\n style,\n testId = 'skeleton-table',\n visible = true,\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n const renderRow = (isHeader: boolean = false) => (\n <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n {Array.from({ length: columns }).map((_, colIndex) => (\n <Skeleton\n key={colIndex}\n width=\"100%\"\n height={isHeader ? '1.5rem' : '1.25rem'}\n variant=\"text\"\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('flex flex-col gap-3', className)}\n style={style}\n role=\"status\"\n aria-label=\"Loading table...\"\n aria-busy=\"true\"\n {...rest}\n >\n {/* Header */}\n {showHeader && (\n <div className=\"border-b border-gray-200 pb-2\">\n {renderRow(true)}\n </div>\n )}\n\n {/* Rows */}\n <div className=\"space-y-3\">\n {Array.from({ length: rows }).map((_, rowIndex) => (\n <div key={rowIndex}>\n {renderRow(false)}\n </div>\n ))}\n </div>\n </div>\n );\n }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":["forwardRef","jsx","Skeleton","jsxs","cn"],"mappings":";;;;;;AAgBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,CAAC,WAAoB,UACrCC,2BAAAA,IAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvCA,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,6CACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIFH,2BAAAA,IAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpCA,2BAAAA,IAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}
1
+ {"version":3,"file":"index11.cjs","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n (\n {\n rows = 5,\n columns = 3,\n showHeader = true,\n animate = true,\n baseColor,\n highlightColor,\n delay = 0,\n minDuration = 0,\n transition,\n className,\n style,\n testId = 'skeleton-table',\n visible = true,\n ...rest\n },\n ref\n ) => {\n const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n visible,\n delay,\n minDuration,\n transition\n );\n\n if (!shouldRender) return null;\n\n const renderRow = (isHeader: boolean = false) => (\n <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n {Array.from({ length: columns }).map((_, colIndex) => (\n <Skeleton\n key={colIndex}\n width=\"100%\"\n height={isHeader ? '1.5rem' : '1.25rem'}\n variant=\"text\"\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('flex flex-col gap-3', className)}\n style={{\n ...style,\n opacity,\n transition: transitionStyle,\n }}\n role=\"status\"\n aria-label=\"Loading table...\"\n aria-busy=\"true\"\n {...rest}\n >\n {/* Header */}\n {showHeader && (\n <div className=\"border-b border-gray-200 pb-2\">\n {renderRow(true)}\n </div>\n )}\n\n {/* Rows */}\n <div className=\"space-y-3\">\n {Array.from({ length: rows }).map((_, rowIndex) => (\n <div key={rowIndex}>\n {renderRow(false)}\n </div>\n ))}\n </div>\n </div>\n );\n }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":["forwardRef","useLoaderVisibility","jsx","Skeleton","jsxs","cn"],"mappings":";;;;;;;AAgBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAY,CAAC,WAAoB,UACrCC,2BAAAA,IAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvCA,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,6CACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIFH,2BAAAA,IAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpCA,2BAAAA,IAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}
package/dist/index11.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { forwardRef } from "react";
3
3
  import { Skeleton } from "./index5.js";
4
+ import { useLoaderVisibility } from "./index31.js";
4
5
  import { cn } from "./index3.js";
5
6
  const SkeletonTable = forwardRef(
6
7
  ({
@@ -10,13 +11,22 @@ const SkeletonTable = forwardRef(
10
11
  animate = true,
11
12
  baseColor,
12
13
  highlightColor,
14
+ delay = 0,
15
+ minDuration = 0,
16
+ transition,
13
17
  className,
14
18
  style,
15
19
  testId = "skeleton-table",
16
20
  visible = true,
17
21
  ...rest
18
22
  }, ref) => {
19
- if (!visible) return null;
23
+ const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
24
+ visible,
25
+ delay,
26
+ minDuration,
27
+ transition
28
+ );
29
+ if (!shouldRender) return null;
20
30
  const renderRow = (isHeader = false) => /* @__PURE__ */ jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(
21
31
  Skeleton,
22
32
  {
@@ -35,7 +45,11 @@ const SkeletonTable = forwardRef(
35
45
  ref,
36
46
  "data-testid": testId,
37
47
  className: cn("flex flex-col gap-3", className),
38
- style,
48
+ style: {
49
+ ...style,
50
+ opacity,
51
+ transition: transitionStyle
52
+ },
39
53
  role: "status",
40
54
  "aria-label": "Loading table...",
41
55
  "aria-busy": "true",
package/dist/index11.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index11.js","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n (\n {\n rows = 5,\n columns = 3,\n showHeader = true,\n animate = true,\n baseColor,\n highlightColor,\n className,\n style,\n testId = 'skeleton-table',\n visible = true,\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n const renderRow = (isHeader: boolean = false) => (\n <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n {Array.from({ length: columns }).map((_, colIndex) => (\n <Skeleton\n key={colIndex}\n width=\"100%\"\n height={isHeader ? '1.5rem' : '1.25rem'}\n variant=\"text\"\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('flex flex-col gap-3', className)}\n style={style}\n role=\"status\"\n aria-label=\"Loading table...\"\n aria-busy=\"true\"\n {...rest}\n >\n {/* Header */}\n {showHeader && (\n <div className=\"border-b border-gray-200 pb-2\">\n {renderRow(true)}\n </div>\n )}\n\n {/* Rows */}\n <div className=\"space-y-3\">\n {Array.from({ length: rows }).map((_, rowIndex) => (\n <div key={rowIndex}>\n {renderRow(false)}\n </div>\n ))}\n </div>\n </div>\n );\n }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,CAAC,WAAoB,UACrC,oBAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,kCACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIF,oBAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpC,oBAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}
1
+ {"version":3,"file":"index11.js","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n (\n {\n rows = 5,\n columns = 3,\n showHeader = true,\n animate = true,\n baseColor,\n highlightColor,\n delay = 0,\n minDuration = 0,\n transition,\n className,\n style,\n testId = 'skeleton-table',\n visible = true,\n ...rest\n },\n ref\n ) => {\n const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n visible,\n delay,\n minDuration,\n transition\n );\n\n if (!shouldRender) return null;\n\n const renderRow = (isHeader: boolean = false) => (\n <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n {Array.from({ length: columns }).map((_, colIndex) => (\n <Skeleton\n key={colIndex}\n width=\"100%\"\n height={isHeader ? '1.5rem' : '1.25rem'}\n variant=\"text\"\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('flex flex-col gap-3', className)}\n style={{\n ...style,\n opacity,\n transition: transitionStyle,\n }}\n role=\"status\"\n aria-label=\"Loading table...\"\n aria-busy=\"true\"\n {...rest}\n >\n {/* Header */}\n {showHeader && (\n <div className=\"border-b border-gray-200 pb-2\">\n {renderRow(true)}\n </div>\n )}\n\n {/* Rows */}\n <div className=\"space-y-3\">\n {Array.from({ length: rows }).map((_, rowIndex) => (\n <div key={rowIndex}>\n {renderRow(false)}\n </div>\n ))}\n </div>\n </div>\n );\n }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAY,CAAC,WAAoB,UACrC,oBAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,kCACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIF,oBAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpC,oBAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}
package/dist/index12.cjs CHANGED
@@ -5,6 +5,7 @@ const react = require("react");
5
5
  const Skeleton = require("./index5.cjs");
6
6
  const SkeletonText = require("./index6.cjs");
7
7
  const SkeletonAvatar = require("./index7.cjs");
8
+ const hooks = require("./index31.cjs");
8
9
  const classNames = require("./index3.cjs");
9
10
  const SkeletonPage = react.forwardRef(
10
11
  ({
@@ -12,13 +13,22 @@ const SkeletonPage = react.forwardRef(
12
13
  animate = true,
13
14
  baseColor = "#e0e0e0",
14
15
  highlightColor = "#f5f5f5",
16
+ delay = 0,
17
+ minDuration = 0,
18
+ transition,
15
19
  className,
16
20
  style,
17
21
  testId = "skeleton-page",
18
22
  visible = true,
19
23
  ...rest
20
24
  }, ref) => {
21
- if (!visible) return null;
25
+ const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
26
+ visible,
27
+ delay,
28
+ minDuration,
29
+ transition
30
+ );
31
+ if (!shouldRender) return null;
22
32
  const commonProps = {
23
33
  animate,
24
34
  baseColor,
@@ -137,7 +147,11 @@ const SkeletonPage = react.forwardRef(
137
147
  ref,
138
148
  "data-testid": testId,
139
149
  className: classNames.cn("w-full p-6", className),
140
- style,
150
+ style: {
151
+ ...style,
152
+ opacity,
153
+ transition: transitionStyle
154
+ },
141
155
  role: "status",
142
156
  "aria-label": "Loading page...",
143
157
  "aria-busy": "true",
package/dist/index12.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index12.cjs","sources":["../src/components/skeleton/SkeletonPage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonPageProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonText } from './SkeletonText';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonPage - Pre-built page loading skeleton\n *\n * A ready-to-use skeleton layout for full page loading states.\n * Displays a common page structure with header, navigation, and content sections.\n *\n * @example\n * ```tsx\n * <SkeletonPage />\n * <SkeletonPage variant=\"dashboard\" />\n * <SkeletonPage variant=\"article\" animate={false} />\n * ```\n */\nexport const SkeletonPage = forwardRef<HTMLDivElement, SkeletonPageProps>(\n (\n {\n variant = 'default',\n animate = true,\n baseColor = '#e0e0e0',\n highlightColor = '#f5f5f5',\n className,\n style,\n testId = 'skeleton-page',\n visible = true,\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n const commonProps = {\n animate,\n baseColor,\n highlightColor,\n };\n\n const renderDefault = () => (\n <div className=\"space-y-6\">\n {/* Header */}\n <div className=\"flex items-center justify-between border-b pb-4\">\n <Skeleton width={200} height={32} {...commonProps} />\n <div className=\"flex items-center gap-4\">\n <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n <SkeletonAvatar size={40} {...commonProps} />\n </div>\n </div>\n\n {/* Content */}\n <div className=\"space-y-4\">\n <SkeletonText lines={3} {...commonProps} />\n <div className=\"grid grid-cols-3 gap-4\">\n <Skeleton height={120} borderRadius={8} {...commonProps} />\n <Skeleton height={120} borderRadius={8} {...commonProps} />\n <Skeleton height={120} borderRadius={8} {...commonProps} />\n </div>\n <SkeletonText lines={5} {...commonProps} />\n </div>\n </div>\n );\n\n const renderDashboard = () => (\n <div className=\"space-y-6\">\n {/* Header with stats */}\n <div className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <Skeleton width={180} height={28} {...commonProps} />\n <Skeleton width={120} height={36} borderRadius={6} {...commonProps} />\n </div>\n <div className=\"grid grid-cols-4 gap-4\">\n {[...Array(4)].map((_, i) => (\n <div key={i} className=\"p-4 border rounded-lg space-y-2\">\n <Skeleton width={100} height={16} {...commonProps} />\n <Skeleton width={80} height={32} {...commonProps} />\n <Skeleton width={60} height={12} {...commonProps} />\n </div>\n ))}\n </div>\n </div>\n\n {/* Chart area */}\n <Skeleton height={300} borderRadius={8} {...commonProps} />\n\n {/* Table */}\n <div className=\"space-y-3\">\n <div className=\"flex gap-4\">\n <Skeleton width={150} height={20} {...commonProps} />\n <Skeleton width={150} height={20} {...commonProps} />\n <Skeleton width={150} height={20} {...commonProps} />\n </div>\n {[...Array(5)].map((_, i) => (\n <div key={i} className=\"flex gap-4\">\n <Skeleton width={150} height={16} {...commonProps} />\n <Skeleton width={150} height={16} {...commonProps} />\n <Skeleton width={150} height={16} {...commonProps} />\n </div>\n ))}\n </div>\n </div>\n );\n\n const renderArticle = () => (\n <div className=\"max-w-3xl mx-auto space-y-6\">\n {/* Article header */}\n <div className=\"space-y-4\">\n <Skeleton width=\"80%\" height={40} {...commonProps} />\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={48} {...commonProps} />\n <div className=\"space-y-2 flex-1\">\n <Skeleton width={120} height={16} {...commonProps} />\n <Skeleton width={180} height={14} {...commonProps} />\n </div>\n </div>\n </div>\n\n {/* Featured image */}\n <Skeleton height={400} borderRadius={8} {...commonProps} />\n\n {/* Article content */}\n <div className=\"space-y-4\">\n <SkeletonText lines={4} {...commonProps} />\n <Skeleton height={200} borderRadius={8} {...commonProps} />\n <SkeletonText lines={6} {...commonProps} />\n <Skeleton height={250} borderRadius={8} {...commonProps} />\n <SkeletonText lines={4} {...commonProps} />\n </div>\n </div>\n );\n\n const renderProfile = () => (\n <div className=\"space-y-6\">\n {/* Profile header */}\n <div className=\"flex items-start gap-6 border-b pb-6\">\n <SkeletonAvatar size={120} {...commonProps} />\n <div className=\"flex-1 space-y-3\">\n <Skeleton width={200} height={32} {...commonProps} />\n <Skeleton width={150} height={20} {...commonProps} />\n <SkeletonText lines={2} {...commonProps} />\n <div className=\"flex gap-3\">\n <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n </div>\n </div>\n </div>\n\n {/* Profile content grid */}\n <div className=\"grid grid-cols-3 gap-6\">\n {/* Left sidebar */}\n <div className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Skeleton width={100} height={20} {...commonProps} />\n {[...Array(4)].map((_, i) => (\n <Skeleton key={i} height={16} {...commonProps} />\n ))}\n </div>\n </div>\n\n {/* Main content */}\n <div className=\"col-span-2 space-y-4\">\n {[...Array(3)].map((_, i) => (\n <div key={i} className=\"p-4 border rounded-lg space-y-3\">\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={40} {...commonProps} />\n <div className=\"flex-1 space-y-2\">\n <Skeleton width={150} height={16} {...commonProps} />\n <Skeleton width={100} height={12} {...commonProps} />\n </div>\n </div>\n <SkeletonText lines={2} {...commonProps} />\n <Skeleton height={200} borderRadius={6} {...commonProps} />\n </div>\n ))}\n </div>\n </div>\n </div>\n );\n\n const renderContent = () => {\n switch (variant) {\n case 'dashboard':\n return renderDashboard();\n case 'article':\n return renderArticle();\n case 'profile':\n return renderProfile();\n default:\n return renderDefault();\n }\n };\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('w-full p-6', className)}\n style={style}\n role=\"status\"\n aria-label=\"Loading page...\"\n aria-busy=\"true\"\n {...rest}\n >\n {renderContent()}\n </div>\n );\n }\n);\n\nSkeletonPage.displayName = 'SkeletonPage';\n"],"names":["forwardRef","jsxs","jsx","Skeleton","SkeletonAvatar","SkeletonText","cn"],"mappings":";;;;;;;;AAoBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,gBAAgB,MACpBC,gCAAC,OAAA,EAAI,WAAU,aAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,mDACb,UAAA;AAAA,QAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,QACnDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,aAAa;AAAA,UACpED,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,CAC7C;AAAA,MAAA,GACF;AAAA,MAGAH,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAC,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,QACzCJ,2BAAAA,KAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,yCACxDA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,yCACxDA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,QAAA,GAC3D;AAAA,QACAD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,MAAA,EAAA,CAC3C;AAAA,IAAA,GACF;AAGF,UAAM,kBAAkB,MACtBJ,gCAAC,OAAA,EAAI,WAAU,aAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,UACnDD,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,QAAA,GACtE;AAAA,uCACC,OAAA,EAAI,WAAU,0BACZ,UAAA,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrBF,2BAAAA,KAAC,OAAA,EAAY,WAAU,mCACrB,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,IAAI,QAAQ,IAAK,GAAG,aAAa;AAAA,yCACjDA,SAAAA,UAAA,EAAS,OAAO,IAAI,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,GAH1C,CAIV,CACD,EAAA,CACH;AAAA,MAAA,GACF;AAAA,qCAGCA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,MAGzDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,GACrD;AAAA,QACC,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrBF,2BAAAA,KAAC,OAAA,EAAY,WAAU,cACrB,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,GAH3C,CAIV,CACD;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GACF;AAGF,UAAM,gBAAgB,MACpBF,gCAAC,OAAA,EAAI,WAAU,+BAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAC,+BAACC,SAAAA,YAAS,OAAM,OAAM,QAAQ,IAAK,GAAG,aAAa;AAAA,QACnDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAC,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,IAAK,GAAG,YAAA,CAAa;AAAA,UAC3CH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,YAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,2CAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,UAAA,EAAA,CACrD;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,qCAGCA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,MAGzDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAC,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,uCACxCF,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,QACzDD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,uCACxCF,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,QACzDD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,MAAA,EAAA,CAC3C;AAAA,IAAA,GACF;AAGF,UAAM,gBAAgB,MACpBJ,gCAAC,OAAA,EAAI,WAAU,aAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,QAAAC,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,KAAM,GAAG,YAAA,CAAa;AAAA,QAC5CH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,UACnDD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,UACzCJ,2BAAAA,KAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,YAAAC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,aAAa;AAAA,YACpED,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,UAAA,EAAA,CACtE;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,MAGAF,2BAAAA,KAAC,OAAA,EAAI,WAAU,0BAEb,UAAA;AAAA,QAAAC,2BAAAA,IAAC,SAAI,WAAU,aACb,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,UAClD,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,qCACpBA,SAAAA,UAAA,EAAiB,QAAQ,IAAK,GAAG,YAAA,GAAnB,CAAgC,CAChD;AAAA,QAAA,EAAA,CACH,EAAA,CACF;AAAA,uCAGC,OAAA,EAAI,WAAU,wBACZ,UAAA,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrBF,2BAAAA,KAAC,OAAA,EAAY,WAAU,mCACrB,UAAA;AAAA,UAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAAC,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,IAAK,GAAG,YAAA,CAAa;AAAA,YAC3CH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,cAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,6CAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,YAAA,EAAA,CACrD;AAAA,UAAA,GACF;AAAA,UACAD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,yCACxCF,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,GATjD,CAUV,CACD,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAGF,UAAM,gBAAgB,MAAM;AAC1B,cAAQ,SAAA;AAAA,QACN,KAAK;AACH,iBAAO,gBAAA;AAAA,QACT,KAAK;AACH,iBAAO,cAAA;AAAA,QACT,KAAK;AACH,iBAAO,cAAA;AAAA,QACT;AACE,iBAAO,cAAA;AAAA,MAAc;AAAA,IAE3B;AAEA,WACED,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWI,WAAAA,GAAG,cAAc,SAAS;AAAA,QACrC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,cAAA;AAAA,MAAc;AAAA,IAAA;AAAA,EAGrB;AACF;AAEA,aAAa,cAAc;;"}
1
+ {"version":3,"file":"index12.cjs","sources":["../src/components/skeleton/SkeletonPage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonPageProps } from '../../types';\nimport { cn, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonText } from './SkeletonText';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonPage - Pre-built page loading skeleton\n *\n * A ready-to-use skeleton layout for full page loading states.\n * Displays a common page structure with header, navigation, and content sections.\n *\n * @example\n * ```tsx\n * <SkeletonPage />\n * <SkeletonPage variant=\"dashboard\" />\n * <SkeletonPage variant=\"article\" animate={false} />\n * ```\n */\nexport const SkeletonPage = forwardRef<HTMLDivElement, SkeletonPageProps>(\n (\n {\n variant = 'default',\n animate = true,\n baseColor = '#e0e0e0',\n highlightColor = '#f5f5f5',\n delay = 0,\n minDuration = 0,\n transition,\n className,\n style,\n testId = 'skeleton-page',\n visible = true,\n ...rest\n },\n ref\n ) => {\n const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n visible,\n delay,\n minDuration,\n transition\n );\n\n if (!shouldRender) return null;\n\n const commonProps = {\n animate,\n baseColor,\n highlightColor,\n };\n\n const renderDefault = () => (\n <div className=\"space-y-6\">\n {/* Header */}\n <div className=\"flex items-center justify-between border-b pb-4\">\n <Skeleton width={200} height={32} {...commonProps} />\n <div className=\"flex items-center gap-4\">\n <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n <SkeletonAvatar size={40} {...commonProps} />\n </div>\n </div>\n\n {/* Content */}\n <div className=\"space-y-4\">\n <SkeletonText lines={3} {...commonProps} />\n <div className=\"grid grid-cols-3 gap-4\">\n <Skeleton height={120} borderRadius={8} {...commonProps} />\n <Skeleton height={120} borderRadius={8} {...commonProps} />\n <Skeleton height={120} borderRadius={8} {...commonProps} />\n </div>\n <SkeletonText lines={5} {...commonProps} />\n </div>\n </div>\n );\n\n const renderDashboard = () => (\n <div className=\"space-y-6\">\n {/* Header with stats */}\n <div className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <Skeleton width={180} height={28} {...commonProps} />\n <Skeleton width={120} height={36} borderRadius={6} {...commonProps} />\n </div>\n <div className=\"grid grid-cols-4 gap-4\">\n {[...Array(4)].map((_, i) => (\n <div key={i} className=\"p-4 border rounded-lg space-y-2\">\n <Skeleton width={100} height={16} {...commonProps} />\n <Skeleton width={80} height={32} {...commonProps} />\n <Skeleton width={60} height={12} {...commonProps} />\n </div>\n ))}\n </div>\n </div>\n\n {/* Chart area */}\n <Skeleton height={300} borderRadius={8} {...commonProps} />\n\n {/* Table */}\n <div className=\"space-y-3\">\n <div className=\"flex gap-4\">\n <Skeleton width={150} height={20} {...commonProps} />\n <Skeleton width={150} height={20} {...commonProps} />\n <Skeleton width={150} height={20} {...commonProps} />\n </div>\n {[...Array(5)].map((_, i) => (\n <div key={i} className=\"flex gap-4\">\n <Skeleton width={150} height={16} {...commonProps} />\n <Skeleton width={150} height={16} {...commonProps} />\n <Skeleton width={150} height={16} {...commonProps} />\n </div>\n ))}\n </div>\n </div>\n );\n\n const renderArticle = () => (\n <div className=\"max-w-3xl mx-auto space-y-6\">\n {/* Article header */}\n <div className=\"space-y-4\">\n <Skeleton width=\"80%\" height={40} {...commonProps} />\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={48} {...commonProps} />\n <div className=\"space-y-2 flex-1\">\n <Skeleton width={120} height={16} {...commonProps} />\n <Skeleton width={180} height={14} {...commonProps} />\n </div>\n </div>\n </div>\n\n {/* Featured image */}\n <Skeleton height={400} borderRadius={8} {...commonProps} />\n\n {/* Article content */}\n <div className=\"space-y-4\">\n <SkeletonText lines={4} {...commonProps} />\n <Skeleton height={200} borderRadius={8} {...commonProps} />\n <SkeletonText lines={6} {...commonProps} />\n <Skeleton height={250} borderRadius={8} {...commonProps} />\n <SkeletonText lines={4} {...commonProps} />\n </div>\n </div>\n );\n\n const renderProfile = () => (\n <div className=\"space-y-6\">\n {/* Profile header */}\n <div className=\"flex items-start gap-6 border-b pb-6\">\n <SkeletonAvatar size={120} {...commonProps} />\n <div className=\"flex-1 space-y-3\">\n <Skeleton width={200} height={32} {...commonProps} />\n <Skeleton width={150} height={20} {...commonProps} />\n <SkeletonText lines={2} {...commonProps} />\n <div className=\"flex gap-3\">\n <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n </div>\n </div>\n </div>\n\n {/* Profile content grid */}\n <div className=\"grid grid-cols-3 gap-6\">\n {/* Left sidebar */}\n <div className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Skeleton width={100} height={20} {...commonProps} />\n {[...Array(4)].map((_, i) => (\n <Skeleton key={i} height={16} {...commonProps} />\n ))}\n </div>\n </div>\n\n {/* Main content */}\n <div className=\"col-span-2 space-y-4\">\n {[...Array(3)].map((_, i) => (\n <div key={i} className=\"p-4 border rounded-lg space-y-3\">\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={40} {...commonProps} />\n <div className=\"flex-1 space-y-2\">\n <Skeleton width={150} height={16} {...commonProps} />\n <Skeleton width={100} height={12} {...commonProps} />\n </div>\n </div>\n <SkeletonText lines={2} {...commonProps} />\n <Skeleton height={200} borderRadius={6} {...commonProps} />\n </div>\n ))}\n </div>\n </div>\n </div>\n );\n\n const renderContent = () => {\n switch (variant) {\n case 'dashboard':\n return renderDashboard();\n case 'article':\n return renderArticle();\n case 'profile':\n return renderProfile();\n default:\n return renderDefault();\n }\n };\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('w-full p-6', className)}\n style={{\n ...style,\n opacity,\n transition: transitionStyle,\n }}\n role=\"status\"\n aria-label=\"Loading page...\"\n aria-busy=\"true\"\n {...rest}\n >\n {renderContent()}\n </div>\n );\n }\n);\n\nSkeletonPage.displayName = 'SkeletonPage';\n"],"names":["forwardRef","useLoaderVisibility","jsxs","jsx","Skeleton","SkeletonAvatar","SkeletonText","cn"],"mappings":";;;;;;;;;AAoBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,gBAAgB,MACpBC,gCAAC,OAAA,EAAI,WAAU,aAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,mDACb,UAAA;AAAA,QAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,QACnDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,aAAa;AAAA,UACpED,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,CAC7C;AAAA,MAAA,GACF;AAAA,MAGAH,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAC,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,QACzCJ,2BAAAA,KAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,yCACxDA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,yCACxDA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,QAAA,GAC3D;AAAA,QACAD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,MAAA,EAAA,CAC3C;AAAA,IAAA,GACF;AAGF,UAAM,kBAAkB,MACtBJ,gCAAC,OAAA,EAAI,WAAU,aAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,UACnDD,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,QAAA,GACtE;AAAA,uCACC,OAAA,EAAI,WAAU,0BACZ,UAAA,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrBF,2BAAAA,KAAC,OAAA,EAAY,WAAU,mCACrB,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,IAAI,QAAQ,IAAK,GAAG,aAAa;AAAA,yCACjDA,SAAAA,UAAA,EAAS,OAAO,IAAI,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,GAH1C,CAIV,CACD,EAAA,CACH;AAAA,MAAA,GACF;AAAA,qCAGCA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,MAGzDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,GACrD;AAAA,QACC,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrBF,2BAAAA,KAAC,OAAA,EAAY,WAAU,cACrB,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,GAH3C,CAIV,CACD;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GACF;AAGF,UAAM,gBAAgB,MACpBF,gCAAC,OAAA,EAAI,WAAU,+BAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAC,+BAACC,SAAAA,YAAS,OAAM,OAAM,QAAQ,IAAK,GAAG,aAAa;AAAA,QACnDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAC,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,IAAK,GAAG,YAAA,CAAa;AAAA,UAC3CH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,YAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,2CAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,UAAA,EAAA,CACrD;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,qCAGCA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,MAGzDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAC,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,uCACxCF,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,QACzDD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,uCACxCF,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,QACzDD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,MAAA,EAAA,CAC3C;AAAA,IAAA,GACF;AAGF,UAAM,gBAAgB,MACpBJ,gCAAC,OAAA,EAAI,WAAU,aAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,QAAAC,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,KAAM,GAAG,YAAA,CAAa;AAAA,QAC5CH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,UACnDD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,UACzCJ,2BAAAA,KAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,YAAAC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,aAAa;AAAA,YACpED,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,UAAA,EAAA,CACtE;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,MAGAF,2BAAAA,KAAC,OAAA,EAAI,WAAU,0BAEb,UAAA;AAAA,QAAAC,2BAAAA,IAAC,SAAI,WAAU,aACb,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,UAClD,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,qCACpBA,SAAAA,UAAA,EAAiB,QAAQ,IAAK,GAAG,YAAA,GAAnB,CAAgC,CAChD;AAAA,QAAA,EAAA,CACH,EAAA,CACF;AAAA,uCAGC,OAAA,EAAI,WAAU,wBACZ,UAAA,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrBF,2BAAAA,KAAC,OAAA,EAAY,WAAU,mCACrB,UAAA;AAAA,UAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAAC,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,IAAK,GAAG,YAAA,CAAa;AAAA,YAC3CH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,cAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,6CAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,YAAA,EAAA,CACrD;AAAA,UAAA,GACF;AAAA,UACAD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,yCACxCF,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,GATjD,CAUV,CACD,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAGF,UAAM,gBAAgB,MAAM;AAC1B,cAAQ,SAAA;AAAA,QACN,KAAK;AACH,iBAAO,gBAAA;AAAA,QACT,KAAK;AACH,iBAAO,cAAA;AAAA,QACT,KAAK;AACH,iBAAO,cAAA;AAAA,QACT;AACE,iBAAO,cAAA;AAAA,MAAc;AAAA,IAE3B;AAEA,WACED,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWI,WAAAA,GAAG,cAAc,SAAS;AAAA,QACrC,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,cAAA;AAAA,MAAc;AAAA,IAAA;AAAA,EAGrB;AACF;AAEA,aAAa,cAAc;;"}
package/dist/index12.js CHANGED
@@ -3,6 +3,7 @@ import { forwardRef } from "react";
3
3
  import { Skeleton } from "./index5.js";
4
4
  import { SkeletonText } from "./index6.js";
5
5
  import { SkeletonAvatar } from "./index7.js";
6
+ import { useLoaderVisibility } from "./index31.js";
6
7
  import { cn } from "./index3.js";
7
8
  const SkeletonPage = forwardRef(
8
9
  ({
@@ -10,13 +11,22 @@ const SkeletonPage = forwardRef(
10
11
  animate = true,
11
12
  baseColor = "#e0e0e0",
12
13
  highlightColor = "#f5f5f5",
14
+ delay = 0,
15
+ minDuration = 0,
16
+ transition,
13
17
  className,
14
18
  style,
15
19
  testId = "skeleton-page",
16
20
  visible = true,
17
21
  ...rest
18
22
  }, ref) => {
19
- if (!visible) return null;
23
+ const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
24
+ visible,
25
+ delay,
26
+ minDuration,
27
+ transition
28
+ );
29
+ if (!shouldRender) return null;
20
30
  const commonProps = {
21
31
  animate,
22
32
  baseColor,
@@ -135,7 +145,11 @@ const SkeletonPage = forwardRef(
135
145
  ref,
136
146
  "data-testid": testId,
137
147
  className: cn("w-full p-6", className),
138
- style,
148
+ style: {
149
+ ...style,
150
+ opacity,
151
+ transition: transitionStyle
152
+ },
139
153
  role: "status",
140
154
  "aria-label": "Loading page...",
141
155
  "aria-busy": "true",