premium-react-loaders 1.0.1 → 1.0.2

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 (68) hide show
  1. package/dist/components/progress/ProgressBar.d.ts +2 -0
  2. package/dist/components/progress/ProgressBar.d.ts.map +1 -1
  3. package/dist/components/progress/ProgressCircle.d.ts +2 -1
  4. package/dist/components/progress/ProgressCircle.d.ts.map +1 -1
  5. package/dist/components/progress/ProgressRing.d.ts +2 -1
  6. package/dist/components/progress/ProgressRing.d.ts.map +1 -1
  7. package/dist/components/skeleton/SkeletonText.d.ts +1 -1
  8. package/dist/components/skeleton/SkeletonText.d.ts.map +1 -1
  9. package/dist/components/spinner/SpinnerDots.d.ts.map +1 -1
  10. package/dist/components/spinner/SpinnerRing.d.ts +1 -0
  11. package/dist/components/spinner/SpinnerRing.d.ts.map +1 -1
  12. package/dist/index.cjs +1 -1
  13. package/dist/index.cjs.map +1 -1
  14. package/dist/index.d.ts +1 -1
  15. package/dist/index.js +1 -1
  16. package/dist/index.js.map +1 -1
  17. package/dist/index14.cjs +2 -1
  18. package/dist/index14.cjs.map +1 -1
  19. package/dist/index14.js +2 -1
  20. package/dist/index14.js.map +1 -1
  21. package/dist/index15.cjs +4 -3
  22. package/dist/index15.cjs.map +1 -1
  23. package/dist/index15.js +4 -3
  24. package/dist/index15.js.map +1 -1
  25. package/dist/index16.cjs +1 -1
  26. package/dist/index16.cjs.map +1 -1
  27. package/dist/index16.js +2 -2
  28. package/dist/index16.js.map +1 -1
  29. package/dist/index17.cjs +1 -1
  30. package/dist/index17.cjs.map +1 -1
  31. package/dist/index17.js +2 -2
  32. package/dist/index17.js.map +1 -1
  33. package/dist/index18.cjs +26 -4
  34. package/dist/index18.cjs.map +1 -1
  35. package/dist/index18.js +28 -6
  36. package/dist/index18.js.map +1 -1
  37. package/dist/index19.cjs +24 -2
  38. package/dist/index19.cjs.map +1 -1
  39. package/dist/index19.js +25 -3
  40. package/dist/index19.js.map +1 -1
  41. package/dist/index20.cjs +26 -4
  42. package/dist/index20.cjs.map +1 -1
  43. package/dist/index20.js +28 -6
  44. package/dist/index20.js.map +1 -1
  45. package/dist/index22.cjs +1 -1
  46. package/dist/index22.cjs.map +1 -1
  47. package/dist/index22.js +2 -2
  48. package/dist/index22.js.map +1 -1
  49. package/dist/index23.cjs +1 -1
  50. package/dist/index23.cjs.map +1 -1
  51. package/dist/index23.js +2 -2
  52. package/dist/index23.js.map +1 -1
  53. package/dist/index4.cjs +63 -3
  54. package/dist/index4.cjs.map +1 -1
  55. package/dist/index4.js +64 -4
  56. package/dist/index4.js.map +1 -1
  57. package/dist/index6.cjs +2 -1
  58. package/dist/index6.cjs.map +1 -1
  59. package/dist/index6.js +2 -1
  60. package/dist/index6.js.map +1 -1
  61. package/dist/premium-react-loaders.css +3 -0
  62. package/dist/types/progress.d.ts +8 -0
  63. package/dist/types/progress.d.ts.map +1 -1
  64. package/dist/types/skeleton.d.ts +2 -0
  65. package/dist/types/skeleton.d.ts.map +1 -1
  66. package/dist/utils/colors.d.ts +14 -1
  67. package/dist/utils/colors.d.ts.map +1 -1
  68. package/package.json +1 -1
package/dist/index4.cjs CHANGED
@@ -1,15 +1,30 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- function getAnimationDuration(speed) {
3
+ function isHexColor(color) {
4
+ return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
5
+ }
6
+ function isRgbColor(color) {
7
+ return /^rgba?\([\d\s,./]+\)$/.test(color);
8
+ }
9
+ function hexToRgb(hex) {
10
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
11
+ return result ? {
12
+ r: parseInt(result[1], 16),
13
+ g: parseInt(result[2], 16),
14
+ b: parseInt(result[3], 16)
15
+ } : null;
16
+ }
17
+ function getAnimationDuration(speed = "normal") {
4
18
  if (typeof speed === "number") {
5
- return `${speed}ms`;
19
+ const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
20
+ return `${validSpeed}ms`;
6
21
  }
7
22
  const speedMap = {
8
23
  slow: "2s",
9
24
  normal: "1s",
10
25
  fast: "0.5s"
11
26
  };
12
- return speedMap[speed];
27
+ return speedMap[speed] || speedMap.normal;
13
28
  }
14
29
  function normalizeSize(size) {
15
30
  if (typeof size === "number") {
@@ -17,6 +32,51 @@ function normalizeSize(size) {
17
32
  }
18
33
  return size || "auto";
19
34
  }
35
+ function parseSizeToNumber(size, fallback) {
36
+ if (typeof size === "number") {
37
+ return !isNaN(size) && size > 0 ? size : fallback;
38
+ }
39
+ if (typeof size === "string") {
40
+ const parsed = parseInt(size, 10);
41
+ return !isNaN(parsed) && parsed > 0 ? parsed : fallback;
42
+ }
43
+ return fallback;
44
+ }
45
+ function getColorLuminance(color) {
46
+ if (isHexColor(color)) {
47
+ const rgb = hexToRgb(color);
48
+ if (rgb) {
49
+ const { r, g, b } = rgb;
50
+ const [rs, gs, bs] = [r, g, b].map((c) => {
51
+ const val = c / 255;
52
+ return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
53
+ });
54
+ return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
55
+ }
56
+ }
57
+ if (isRgbColor(color)) {
58
+ const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
59
+ if (match) {
60
+ const [, r, g, b] = match.map(Number);
61
+ const [rs, gs, bs] = [r, g, b].map((c) => {
62
+ const val = c / 255;
63
+ return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
64
+ });
65
+ return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
66
+ }
67
+ }
68
+ return 0.5;
69
+ }
70
+ function getContrastColor(backgroundColor) {
71
+ const luminance = getColorLuminance(backgroundColor);
72
+ return luminance < 0.5 ? "#ffffff" : "#000000";
73
+ }
20
74
  exports.getAnimationDuration = getAnimationDuration;
75
+ exports.getColorLuminance = getColorLuminance;
76
+ exports.getContrastColor = getContrastColor;
77
+ exports.hexToRgb = hexToRgb;
78
+ exports.isHexColor = isHexColor;
79
+ exports.isRgbColor = isRgbColor;
21
80
  exports.normalizeSize = normalizeSize;
81
+ exports.parseSizeToNumber = parseSizeToNumber;
22
82
  //# sourceMappingURL=index4.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index4.cjs","sources":["../src/utils/colors.ts"],"sourcesContent":["/**\n * Check if a color is a valid hex color\n */\nexport function isHexColor(color: string): boolean {\n return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Check if a color is a valid RGB/RGBA color\n */\nexport function isRgbColor(color: string): boolean {\n return /^rgba?\\([\\d\\s,./]+\\)$/.test(color);\n}\n\n/**\n * Convert hex color to RGB\n */\nexport function hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : null;\n}\n\n/**\n * Get animation duration in CSS format\n */\nexport function getAnimationDuration(speed: 'slow' | 'normal' | 'fast' | number): string {\n if (typeof speed === 'number') {\n return `${speed}ms`;\n }\n\n const speedMap = {\n slow: '2s',\n normal: '1s',\n fast: '0.5s',\n };\n\n return speedMap[speed];\n}\n\n/**\n * Normalize size value to CSS string\n */\nexport function normalizeSize(size?: number | string): string {\n if (typeof size === 'number') {\n return `${size}px`;\n }\n return size || 'auto';\n}\n"],"names":[],"mappings":";;AA+BO,SAAS,qBAAqB,OAAoD;AACvF,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,GAAG,KAAK;AAAA,EACjB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK;AACvB;AAKO,SAAS,cAAc,MAAgC;AAC5D,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,GAAG,IAAI;AAAA,EAChB;AACA,SAAO,QAAQ;AACjB;;;"}
1
+ {"version":3,"file":"index4.cjs","sources":["../src/utils/colors.ts"],"sourcesContent":["/**\n * Check if a color is a valid hex color\n */\nexport function isHexColor(color: string): boolean {\n return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Check if a color is a valid RGB/RGBA color\n */\nexport function isRgbColor(color: string): boolean {\n return /^rgba?\\([\\d\\s,./]+\\)$/.test(color);\n}\n\n/**\n * Convert hex color to RGB\n */\nexport function hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : null;\n}\n\n/**\n * Get animation duration in CSS format\n */\nexport function getAnimationDuration(speed: 'slow' | 'normal' | 'fast' | number = 'normal'): string {\n if (typeof speed === 'number') {\n // Validate number is valid and positive, clamp to reasonable range (50ms - 10000ms)\n const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n return `${validSpeed}ms`;\n }\n\n const speedMap = {\n slow: '2s',\n normal: '1s',\n fast: '0.5s',\n };\n\n return speedMap[speed] || speedMap.normal;\n}\n\n/**\n * Normalize size value to CSS string\n */\nexport function normalizeSize(size?: number | string): string {\n if (typeof size === 'number') {\n return `${size}px`;\n }\n return size || 'auto';\n}\n\n/**\n * Safely parse size to number with fallback\n */\nexport function parseSizeToNumber(size: number | string | undefined, fallback: number): number {\n if (typeof size === 'number') {\n return !isNaN(size) && size > 0 ? size : fallback;\n }\n\n if (typeof size === 'string') {\n const parsed = parseInt(size, 10);\n return !isNaN(parsed) && parsed > 0 ? parsed : fallback;\n }\n\n return fallback;\n}\n\n/**\n * Calculate relative luminance of a color (0-1 scale)\n * Used for determining if text should be light or dark for contrast\n */\nexport function getColorLuminance(color: string): number {\n // Try to parse hex color\n if (isHexColor(color)) {\n const rgb = hexToRgb(color);\n if (rgb) {\n // Convert RGB to relative luminance using WCAG formula\n const { r, g, b } = rgb;\n const [rs, gs, bs] = [r, g, b].map((c) => {\n const val = c / 255;\n return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n });\n return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n }\n }\n\n // Try to parse RGB/RGBA color\n if (isRgbColor(color)) {\n const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n if (match) {\n const [, r, g, b] = match.map(Number);\n const [rs, gs, bs] = [r, g, b].map((c) => {\n const val = c / 255;\n return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n });\n return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n }\n }\n\n // Default to 0.5 (medium luminance) if unable to parse\n return 0.5;\n}\n\n/**\n * Get contrast color (black or white) based on background luminance\n */\nexport function getContrastColor(backgroundColor: string): string {\n const luminance = getColorLuminance(backgroundColor);\n // WCAG standard: use white text on dark backgrounds (luminance < 0.5)\n return luminance < 0.5 ? '#ffffff' : '#000000';\n}\n"],"names":[],"mappings":";;AAGO,SAAS,WAAW,OAAwB;AACjD,SAAO,qCAAqC,KAAK,KAAK;AACxD;AAKO,SAAS,WAAW,OAAwB;AACjD,SAAO,wBAAwB,KAAK,KAAK;AAC3C;AAKO,SAAS,SAAS,KAAyD;AAChF,QAAM,SAAS,4CAA4C,KAAK,GAAG;AACnE,SAAO,SACH;AAAA,IACE,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,EAAA,IAE3B;AACN;AAKO,SAAS,qBAAqB,QAA6C,UAAkB;AAClG,MAAI,OAAO,UAAU,UAAU;AAE7B,UAAM,aAAa,CAAC,MAAM,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,KAAO,KAAK,CAAC,IAAI;AACvF,WAAO,GAAG,UAAU;AAAA,EACtB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK,KAAK,SAAS;AACrC;AAKO,SAAS,cAAc,MAAgC;AAC5D,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,GAAG,IAAI;AAAA,EAChB;AACA,SAAO,QAAQ;AACjB;AAKO,SAAS,kBAAkB,MAAmC,UAA0B;AAC7F,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,CAAC,MAAM,IAAI,KAAK,OAAO,IAAI,OAAO;AAAA,EAC3C;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,UAAM,SAAS,SAAS,MAAM,EAAE;AAChC,WAAO,CAAC,MAAM,MAAM,KAAK,SAAS,IAAI,SAAS;AAAA,EACjD;AAEA,SAAO;AACT;AAMO,SAAS,kBAAkB,OAAuB;AAEvD,MAAI,WAAW,KAAK,GAAG;AACrB,UAAM,MAAM,SAAS,KAAK;AAC1B,QAAI,KAAK;AAEP,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM;AACpB,YAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,cAAM,MAAM,IAAI;AAChB,eAAO,OAAO,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,OAAO,GAAG;AAAA,MAC3E,CAAC;AACD,aAAO,SAAS,KAAK,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,EACF;AAGA,MAAI,WAAW,KAAK,GAAG;AACrB,UAAM,QAAQ,MAAM,MAAM,gCAAgC;AAC1D,QAAI,OAAO;AACT,YAAM,CAAA,EAAG,GAAG,GAAG,CAAC,IAAI,MAAM,IAAI,MAAM;AACpC,YAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,cAAM,MAAM,IAAI;AAChB,eAAO,OAAO,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,OAAO,GAAG;AAAA,MAC3E,CAAC;AACD,aAAO,SAAS,KAAK,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,EACF;AAGA,SAAO;AACT;AAKO,SAAS,iBAAiB,iBAAiC;AAChE,QAAM,YAAY,kBAAkB,eAAe;AAEnD,SAAO,YAAY,MAAM,YAAY;AACvC;;;;;;;;;"}
package/dist/index4.js CHANGED
@@ -1,13 +1,28 @@
1
- function getAnimationDuration(speed) {
1
+ function isHexColor(color) {
2
+ return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
3
+ }
4
+ function isRgbColor(color) {
5
+ return /^rgba?\([\d\s,./]+\)$/.test(color);
6
+ }
7
+ function hexToRgb(hex) {
8
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
9
+ return result ? {
10
+ r: parseInt(result[1], 16),
11
+ g: parseInt(result[2], 16),
12
+ b: parseInt(result[3], 16)
13
+ } : null;
14
+ }
15
+ function getAnimationDuration(speed = "normal") {
2
16
  if (typeof speed === "number") {
3
- return `${speed}ms`;
17
+ const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
18
+ return `${validSpeed}ms`;
4
19
  }
5
20
  const speedMap = {
6
21
  slow: "2s",
7
22
  normal: "1s",
8
23
  fast: "0.5s"
9
24
  };
10
- return speedMap[speed];
25
+ return speedMap[speed] || speedMap.normal;
11
26
  }
12
27
  function normalizeSize(size) {
13
28
  if (typeof size === "number") {
@@ -15,8 +30,53 @@ function normalizeSize(size) {
15
30
  }
16
31
  return size || "auto";
17
32
  }
33
+ function parseSizeToNumber(size, fallback) {
34
+ if (typeof size === "number") {
35
+ return !isNaN(size) && size > 0 ? size : fallback;
36
+ }
37
+ if (typeof size === "string") {
38
+ const parsed = parseInt(size, 10);
39
+ return !isNaN(parsed) && parsed > 0 ? parsed : fallback;
40
+ }
41
+ return fallback;
42
+ }
43
+ function getColorLuminance(color) {
44
+ if (isHexColor(color)) {
45
+ const rgb = hexToRgb(color);
46
+ if (rgb) {
47
+ const { r, g, b } = rgb;
48
+ const [rs, gs, bs] = [r, g, b].map((c) => {
49
+ const val = c / 255;
50
+ return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
51
+ });
52
+ return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
53
+ }
54
+ }
55
+ if (isRgbColor(color)) {
56
+ const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
57
+ if (match) {
58
+ const [, r, g, b] = match.map(Number);
59
+ const [rs, gs, bs] = [r, g, b].map((c) => {
60
+ const val = c / 255;
61
+ return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
62
+ });
63
+ return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
64
+ }
65
+ }
66
+ return 0.5;
67
+ }
68
+ function getContrastColor(backgroundColor) {
69
+ const luminance = getColorLuminance(backgroundColor);
70
+ return luminance < 0.5 ? "#ffffff" : "#000000";
71
+ }
18
72
  export {
19
73
  getAnimationDuration,
20
- normalizeSize
74
+ getColorLuminance,
75
+ getContrastColor,
76
+ hexToRgb,
77
+ isHexColor,
78
+ isRgbColor,
79
+ normalizeSize,
80
+ parseSizeToNumber
21
81
  };
22
82
  //# sourceMappingURL=index4.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index4.js","sources":["../src/utils/colors.ts"],"sourcesContent":["/**\n * Check if a color is a valid hex color\n */\nexport function isHexColor(color: string): boolean {\n return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Check if a color is a valid RGB/RGBA color\n */\nexport function isRgbColor(color: string): boolean {\n return /^rgba?\\([\\d\\s,./]+\\)$/.test(color);\n}\n\n/**\n * Convert hex color to RGB\n */\nexport function hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : null;\n}\n\n/**\n * Get animation duration in CSS format\n */\nexport function getAnimationDuration(speed: 'slow' | 'normal' | 'fast' | number): string {\n if (typeof speed === 'number') {\n return `${speed}ms`;\n }\n\n const speedMap = {\n slow: '2s',\n normal: '1s',\n fast: '0.5s',\n };\n\n return speedMap[speed];\n}\n\n/**\n * Normalize size value to CSS string\n */\nexport function normalizeSize(size?: number | string): string {\n if (typeof size === 'number') {\n return `${size}px`;\n }\n return size || 'auto';\n}\n"],"names":[],"mappings":"AA+BO,SAAS,qBAAqB,OAAoD;AACvF,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,GAAG,KAAK;AAAA,EACjB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK;AACvB;AAKO,SAAS,cAAc,MAAgC;AAC5D,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,GAAG,IAAI;AAAA,EAChB;AACA,SAAO,QAAQ;AACjB;"}
1
+ {"version":3,"file":"index4.js","sources":["../src/utils/colors.ts"],"sourcesContent":["/**\n * Check if a color is a valid hex color\n */\nexport function isHexColor(color: string): boolean {\n return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Check if a color is a valid RGB/RGBA color\n */\nexport function isRgbColor(color: string): boolean {\n return /^rgba?\\([\\d\\s,./]+\\)$/.test(color);\n}\n\n/**\n * Convert hex color to RGB\n */\nexport function hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : null;\n}\n\n/**\n * Get animation duration in CSS format\n */\nexport function getAnimationDuration(speed: 'slow' | 'normal' | 'fast' | number = 'normal'): string {\n if (typeof speed === 'number') {\n // Validate number is valid and positive, clamp to reasonable range (50ms - 10000ms)\n const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n return `${validSpeed}ms`;\n }\n\n const speedMap = {\n slow: '2s',\n normal: '1s',\n fast: '0.5s',\n };\n\n return speedMap[speed] || speedMap.normal;\n}\n\n/**\n * Normalize size value to CSS string\n */\nexport function normalizeSize(size?: number | string): string {\n if (typeof size === 'number') {\n return `${size}px`;\n }\n return size || 'auto';\n}\n\n/**\n * Safely parse size to number with fallback\n */\nexport function parseSizeToNumber(size: number | string | undefined, fallback: number): number {\n if (typeof size === 'number') {\n return !isNaN(size) && size > 0 ? size : fallback;\n }\n\n if (typeof size === 'string') {\n const parsed = parseInt(size, 10);\n return !isNaN(parsed) && parsed > 0 ? parsed : fallback;\n }\n\n return fallback;\n}\n\n/**\n * Calculate relative luminance of a color (0-1 scale)\n * Used for determining if text should be light or dark for contrast\n */\nexport function getColorLuminance(color: string): number {\n // Try to parse hex color\n if (isHexColor(color)) {\n const rgb = hexToRgb(color);\n if (rgb) {\n // Convert RGB to relative luminance using WCAG formula\n const { r, g, b } = rgb;\n const [rs, gs, bs] = [r, g, b].map((c) => {\n const val = c / 255;\n return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n });\n return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n }\n }\n\n // Try to parse RGB/RGBA color\n if (isRgbColor(color)) {\n const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n if (match) {\n const [, r, g, b] = match.map(Number);\n const [rs, gs, bs] = [r, g, b].map((c) => {\n const val = c / 255;\n return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n });\n return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n }\n }\n\n // Default to 0.5 (medium luminance) if unable to parse\n return 0.5;\n}\n\n/**\n * Get contrast color (black or white) based on background luminance\n */\nexport function getContrastColor(backgroundColor: string): string {\n const luminance = getColorLuminance(backgroundColor);\n // WCAG standard: use white text on dark backgrounds (luminance < 0.5)\n return luminance < 0.5 ? '#ffffff' : '#000000';\n}\n"],"names":[],"mappings":"AAGO,SAAS,WAAW,OAAwB;AACjD,SAAO,qCAAqC,KAAK,KAAK;AACxD;AAKO,SAAS,WAAW,OAAwB;AACjD,SAAO,wBAAwB,KAAK,KAAK;AAC3C;AAKO,SAAS,SAAS,KAAyD;AAChF,QAAM,SAAS,4CAA4C,KAAK,GAAG;AACnE,SAAO,SACH;AAAA,IACE,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,EAAA,IAE3B;AACN;AAKO,SAAS,qBAAqB,QAA6C,UAAkB;AAClG,MAAI,OAAO,UAAU,UAAU;AAE7B,UAAM,aAAa,CAAC,MAAM,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,KAAO,KAAK,CAAC,IAAI;AACvF,WAAO,GAAG,UAAU;AAAA,EACtB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK,KAAK,SAAS;AACrC;AAKO,SAAS,cAAc,MAAgC;AAC5D,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,GAAG,IAAI;AAAA,EAChB;AACA,SAAO,QAAQ;AACjB;AAKO,SAAS,kBAAkB,MAAmC,UAA0B;AAC7F,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,CAAC,MAAM,IAAI,KAAK,OAAO,IAAI,OAAO;AAAA,EAC3C;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,UAAM,SAAS,SAAS,MAAM,EAAE;AAChC,WAAO,CAAC,MAAM,MAAM,KAAK,SAAS,IAAI,SAAS;AAAA,EACjD;AAEA,SAAO;AACT;AAMO,SAAS,kBAAkB,OAAuB;AAEvD,MAAI,WAAW,KAAK,GAAG;AACrB,UAAM,MAAM,SAAS,KAAK;AAC1B,QAAI,KAAK;AAEP,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM;AACpB,YAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,cAAM,MAAM,IAAI;AAChB,eAAO,OAAO,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,OAAO,GAAG;AAAA,MAC3E,CAAC;AACD,aAAO,SAAS,KAAK,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,EACF;AAGA,MAAI,WAAW,KAAK,GAAG;AACrB,UAAM,QAAQ,MAAM,MAAM,gCAAgC;AAC1D,QAAI,OAAO;AACT,YAAM,CAAA,EAAG,GAAG,GAAG,CAAC,IAAI,MAAM,IAAI,MAAM;AACpC,YAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,cAAM,MAAM,IAAI;AAChB,eAAO,OAAO,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,OAAO,GAAG;AAAA,MAC3E,CAAC;AACD,aAAO,SAAS,KAAK,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,EACF;AAGA,SAAO;AACT;AAKO,SAAS,iBAAiB,iBAAiC;AAChE,QAAM,YAAY,kBAAkB,eAAe;AAEnD,SAAO,YAAY,MAAM,YAAY;AACvC;"}
package/dist/index6.cjs CHANGED
@@ -11,6 +11,7 @@ const SkeletonText = react.forwardRef(
11
11
  width = "100%",
12
12
  height = "1rem",
13
13
  gap = "0.5rem",
14
+ lastLineWidth = "80%",
14
15
  animate = true,
15
16
  baseColor,
16
17
  highlightColor,
@@ -36,7 +37,7 @@ const SkeletonText = react.forwardRef(
36
37
  "aria-busy": "true",
37
38
  ...rest,
38
39
  children: Array.from({ length: lines }).map((_, index) => {
39
- const lineWidth = index === lines - 1 ? "80%" : width;
40
+ const lineWidth = index === lines - 1 ? lastLineWidth : width;
40
41
  return /* @__PURE__ */ jsxRuntime.jsx(
41
42
  Skeleton.Skeleton,
42
43
  {
@@ -1 +1 @@
1
- {"version":3,"file":"index6.cjs","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n (\n {\n lines = 3,\n width = '100%',\n height = '1rem',\n gap = '0.5rem',\n animate = true,\n baseColor,\n highlightColor,\n className,\n style,\n testId = 'skeleton-text',\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 text...\"\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: lines }).map((_, index) => {\n // Last line is typically shorter (80% width)\n const lineWidth = index === lines - 1 ? '80%' : width;\n\n return (\n <Skeleton\n key={index}\n width={lineWidth}\n height={height}\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n variant=\"text\"\n />\n );\n })}\n </div>\n );\n }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":["forwardRef","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,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,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,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,QAAQ;AAEhD,iBACEF,2BAAAA;AAAAA,YAACG,SAAAA;AAAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}
1
+ {"version":3,"file":"index6.cjs","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} lastLineWidth=\"60%\" />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n (\n {\n lines = 3,\n width = '100%',\n height = '1rem',\n gap = '0.5rem',\n lastLineWidth = '80%',\n animate = true,\n baseColor,\n highlightColor,\n className,\n style,\n testId = 'skeleton-text',\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 text...\"\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: lines }).map((_, index) => {\n // Last line uses custom width or default (80%)\n const lineWidth = index === lines - 1 ? lastLineWidth : width;\n\n return (\n <Skeleton\n key={index}\n width={lineWidth}\n height={height}\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n variant=\"text\"\n />\n );\n })}\n </div>\n );\n }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":["forwardRef","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,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,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,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,gBAAgB;AAExD,iBACEF,2BAAAA;AAAAA,YAACG,SAAAA;AAAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}
package/dist/index6.js CHANGED
@@ -9,6 +9,7 @@ const SkeletonText = forwardRef(
9
9
  width = "100%",
10
10
  height = "1rem",
11
11
  gap = "0.5rem",
12
+ lastLineWidth = "80%",
12
13
  animate = true,
13
14
  baseColor,
14
15
  highlightColor,
@@ -34,7 +35,7 @@ const SkeletonText = forwardRef(
34
35
  "aria-busy": "true",
35
36
  ...rest,
36
37
  children: Array.from({ length: lines }).map((_, index) => {
37
- const lineWidth = index === lines - 1 ? "80%" : width;
38
+ const lineWidth = index === lines - 1 ? lastLineWidth : width;
38
39
  return /* @__PURE__ */ jsx(
39
40
  Skeleton,
40
41
  {
@@ -1 +1 @@
1
- {"version":3,"file":"index6.js","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n (\n {\n lines = 3,\n width = '100%',\n height = '1rem',\n gap = '0.5rem',\n animate = true,\n baseColor,\n highlightColor,\n className,\n style,\n testId = 'skeleton-text',\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 text...\"\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: lines }).map((_, index) => {\n // Last line is typically shorter (80% width)\n const lineWidth = index === lines - 1 ? '80%' : width;\n\n return (\n <Skeleton\n key={index}\n width={lineWidth}\n height={height}\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n variant=\"text\"\n />\n );\n })}\n </div>\n );\n }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,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,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,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,QAAQ;AAEhD,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}
1
+ {"version":3,"file":"index6.js","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} lastLineWidth=\"60%\" />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n (\n {\n lines = 3,\n width = '100%',\n height = '1rem',\n gap = '0.5rem',\n lastLineWidth = '80%',\n animate = true,\n baseColor,\n highlightColor,\n className,\n style,\n testId = 'skeleton-text',\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 text...\"\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: lines }).map((_, index) => {\n // Last line uses custom width or default (80%)\n const lineWidth = index === lines - 1 ? lastLineWidth : width;\n\n return (\n <Skeleton\n key={index}\n width={lineWidth}\n height={height}\n animate={animate}\n baseColor={baseColor}\n highlightColor={highlightColor}\n variant=\"text\"\n />\n );\n })}\n </div>\n );\n }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,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,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,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,gBAAgB;AAExD,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}
@@ -756,6 +756,9 @@ video {
756
756
  --tw-text-opacity: 1;
757
757
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
758
758
  }
759
+ .opacity-30 {
760
+ opacity: 0.3;
761
+ }
759
762
  .shadow-lg {
760
763
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
761
764
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -5,6 +5,10 @@ import { ProgressLoaderProps } from './common';
5
5
  export interface ProgressBarProps extends ProgressLoaderProps {
6
6
  /** Height of the progress bar */
7
7
  height?: number | string;
8
+ /** Enable gradient */
9
+ gradient?: boolean;
10
+ /** Buffer value (0-100) for showing partial loading */
11
+ buffer?: number;
8
12
  }
9
13
  /**
10
14
  * ProgressCircle component props
@@ -12,6 +16,8 @@ export interface ProgressBarProps extends ProgressLoaderProps {
12
16
  export interface ProgressCircleProps extends ProgressLoaderProps {
13
17
  /** Size of the circle */
14
18
  size?: number | string;
19
+ /** Buffer value (0-100) for showing partial loading */
20
+ buffer?: number;
15
21
  }
16
22
  /**
17
23
  * ProgressRing component props
@@ -21,5 +27,7 @@ export interface ProgressRingProps extends ProgressLoaderProps {
21
27
  size?: number | string;
22
28
  /** Enable gradient */
23
29
  gradient?: boolean;
30
+ /** Buffer value (0-100) for showing partial loading */
31
+ buffer?: number;
24
32
  }
25
33
  //# sourceMappingURL=progress.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/types/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,mBAAmB;IAC3D,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
1
+ {"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/types/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,mBAAmB;IAC3D,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
@@ -18,6 +18,8 @@ export interface SkeletonTextProps extends SkeletonBaseProps {
18
18
  lines?: number;
19
19
  /** Gap between lines */
20
20
  gap?: number | string;
21
+ /** Width of the last line (defaults to '80%') */
22
+ lastLineWidth?: number | string;
21
23
  }
22
24
  /**
23
25
  * SkeletonAvatar component props
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/types/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;AAE9E;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,oBAAoB;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,mBAAmB;IACnB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,kBAAkB;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;CAC3D"}
1
+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/types/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;AAE9E;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,oBAAoB;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,mBAAmB;IACnB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,kBAAkB;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;CAC3D"}
@@ -17,9 +17,22 @@ export declare function hexToRgb(hex: string): {
17
17
  /**
18
18
  * Get animation duration in CSS format
19
19
  */
20
- export declare function getAnimationDuration(speed: 'slow' | 'normal' | 'fast' | number): string;
20
+ export declare function getAnimationDuration(speed?: 'slow' | 'normal' | 'fast' | number): string;
21
21
  /**
22
22
  * Normalize size value to CSS string
23
23
  */
24
24
  export declare function normalizeSize(size?: number | string): string;
25
+ /**
26
+ * Safely parse size to number with fallback
27
+ */
28
+ export declare function parseSizeToNumber(size: number | string | undefined, fallback: number): number;
29
+ /**
30
+ * Calculate relative luminance of a color (0-1 scale)
31
+ * Used for determining if text should be light or dark for contrast
32
+ */
33
+ export declare function getColorLuminance(color: string): number;
34
+ /**
35
+ * Get contrast color (black or white) based on background luminance
36
+ */
37
+ export declare function getContrastColor(backgroundColor: string): string;
25
38
  //# sourceMappingURL=colors.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAShF;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAYvF;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAK5D"}
1
+ {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAShF;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,GAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAiB,GAAG,MAAM,CAclG;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAK5D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAW7F;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CA8BvD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,eAAe,EAAE,MAAM,GAAG,MAAM,CAIhE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "premium-react-loaders",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Premium, production-ready loading components for React with TypeScript and Tailwind CSS",
5
5
  "author": "Ishan Karunaratne",
6
6
  "license": "MIT",