@solostylist/ui-kit-native 1.0.0 → 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 (247) hide show
  1. package/dist/hooks/index.d.ts +6 -0
  2. package/dist/hooks/index.d.ts.map +1 -0
  3. package/dist/hooks/index.js +5 -0
  4. package/dist/hooks/use-count-down.d.ts +72 -0
  5. package/dist/hooks/use-count-down.d.ts.map +1 -0
  6. package/dist/hooks/use-count-down.js +203 -0
  7. package/dist/hooks/use-is-passed-position.d.ts +20 -0
  8. package/dist/hooks/use-is-passed-position.d.ts.map +1 -0
  9. package/dist/hooks/use-is-passed-position.js +31 -0
  10. package/dist/index.d.ts +36 -0
  11. package/dist/index.d.ts.map +1 -1
  12. package/dist/index.js +37 -0
  13. package/dist/s-avatar/index.d.ts +3 -0
  14. package/dist/s-avatar/index.d.ts.map +1 -0
  15. package/dist/s-avatar/index.js +1 -0
  16. package/dist/s-avatar/s-avatar.d.ts +43 -0
  17. package/dist/s-avatar/s-avatar.d.ts.map +1 -0
  18. package/dist/s-avatar/s-avatar.js +119 -0
  19. package/dist/s-button/index.d.ts +3 -0
  20. package/dist/s-button/index.d.ts.map +1 -0
  21. package/dist/s-button/index.js +1 -0
  22. package/dist/s-button/s-button.d.ts +55 -0
  23. package/dist/s-button/s-button.d.ts.map +1 -0
  24. package/dist/s-button/s-button.js +161 -0
  25. package/dist/s-button-link/index.d.ts +2 -0
  26. package/dist/s-button-link/index.d.ts.map +1 -0
  27. package/dist/s-button-link/index.js +1 -0
  28. package/dist/s-button-link/s-button-link.d.ts +43 -0
  29. package/dist/s-button-link/s-button-link.d.ts.map +1 -0
  30. package/dist/s-button-link/s-button-link.js +59 -0
  31. package/dist/s-chat-input/index.d.ts +2 -0
  32. package/dist/s-chat-input/index.d.ts.map +1 -0
  33. package/dist/s-chat-input/index.js +1 -0
  34. package/dist/s-chat-input/s-chat-input.d.ts +52 -0
  35. package/dist/s-chat-input/s-chat-input.d.ts.map +1 -0
  36. package/dist/s-chat-input/s-chat-input.js +135 -0
  37. package/dist/s-chat-message/index.d.ts +3 -0
  38. package/dist/s-chat-message/index.d.ts.map +1 -0
  39. package/dist/s-chat-message/index.js +2 -0
  40. package/dist/s-chat-message/s-chat-message.d.ts +61 -0
  41. package/dist/s-chat-message/s-chat-message.d.ts.map +1 -0
  42. package/dist/s-chat-message/s-chat-message.js +132 -0
  43. package/dist/s-checkbox/index.d.ts +3 -0
  44. package/dist/s-checkbox/index.d.ts.map +1 -0
  45. package/dist/s-checkbox/index.js +1 -0
  46. package/dist/s-checkbox/s-checkbox.d.ts +32 -0
  47. package/dist/s-checkbox/s-checkbox.d.ts.map +1 -0
  48. package/dist/s-checkbox/s-checkbox.js +52 -0
  49. package/dist/s-chip/index.d.ts +3 -0
  50. package/dist/s-chip/index.d.ts.map +1 -0
  51. package/dist/s-chip/index.js +1 -0
  52. package/dist/s-chip/s-chip.d.ts +52 -0
  53. package/dist/s-chip/s-chip.d.ts.map +1 -0
  54. package/dist/s-chip/s-chip.js +151 -0
  55. package/dist/s-code-block/index.d.ts +3 -0
  56. package/dist/s-code-block/index.d.ts.map +1 -0
  57. package/dist/s-code-block/index.js +2 -0
  58. package/dist/s-code-block/s-code-block.d.ts +40 -0
  59. package/dist/s-code-block/s-code-block.d.ts.map +1 -0
  60. package/dist/s-code-block/s-code-block.js +69 -0
  61. package/dist/s-comment-message/index.d.ts +3 -0
  62. package/dist/s-comment-message/index.d.ts.map +1 -0
  63. package/dist/s-comment-message/index.js +2 -0
  64. package/dist/s-comment-message/s-comment-message.d.ts +54 -0
  65. package/dist/s-comment-message/s-comment-message.d.ts.map +1 -0
  66. package/dist/s-comment-message/s-comment-message.js +109 -0
  67. package/dist/s-copyable-text/index.d.ts +3 -0
  68. package/dist/s-copyable-text/index.d.ts.map +1 -0
  69. package/dist/s-copyable-text/index.js +1 -0
  70. package/dist/s-copyable-text/s-copyable-text.d.ts +24 -0
  71. package/dist/s-copyable-text/s-copyable-text.d.ts.map +1 -0
  72. package/dist/s-copyable-text/s-copyable-text.js +52 -0
  73. package/dist/s-countdown/index.d.ts +7 -0
  74. package/dist/s-countdown/index.d.ts.map +1 -0
  75. package/dist/s-countdown/index.js +6 -0
  76. package/dist/s-countdown/s-count-box.d.ts +44 -0
  77. package/dist/s-countdown/s-count-box.d.ts.map +1 -0
  78. package/dist/s-countdown/s-count-box.js +135 -0
  79. package/dist/s-countdown/s-countdown.d.ts +72 -0
  80. package/dist/s-countdown/s-countdown.d.ts.map +1 -0
  81. package/dist/s-countdown/s-countdown.js +94 -0
  82. package/dist/s-data-table/index.d.ts +3 -0
  83. package/dist/s-data-table/index.d.ts.map +1 -0
  84. package/dist/s-data-table/index.js +2 -0
  85. package/dist/s-data-table/s-data-table.d.ts +64 -0
  86. package/dist/s-data-table/s-data-table.d.ts.map +1 -0
  87. package/dist/s-data-table/s-data-table.js +75 -0
  88. package/dist/s-date-picker/index.d.ts +3 -0
  89. package/dist/s-date-picker/index.d.ts.map +1 -0
  90. package/dist/s-date-picker/index.js +2 -0
  91. package/dist/s-date-picker/s-date-picker.d.ts +41 -0
  92. package/dist/s-date-picker/s-date-picker.d.ts.map +1 -0
  93. package/dist/s-date-picker/s-date-picker.js +161 -0
  94. package/dist/s-date-time-picker/index.d.ts +3 -0
  95. package/dist/s-date-time-picker/index.d.ts.map +1 -0
  96. package/dist/s-date-time-picker/index.js +2 -0
  97. package/dist/s-date-time-picker/s-date-time-picker.d.ts +47 -0
  98. package/dist/s-date-time-picker/s-date-time-picker.d.ts.map +1 -0
  99. package/dist/s-date-time-picker/s-date-time-picker.js +298 -0
  100. package/dist/s-divider/index.d.ts +2 -0
  101. package/dist/s-divider/index.d.ts.map +1 -0
  102. package/dist/s-divider/index.js +1 -0
  103. package/dist/s-divider/s-divider.d.ts +24 -0
  104. package/dist/s-divider/s-divider.d.ts.map +1 -0
  105. package/dist/s-divider/s-divider.js +30 -0
  106. package/dist/s-file-dropzone/index.d.ts +3 -0
  107. package/dist/s-file-dropzone/index.d.ts.map +1 -0
  108. package/dist/s-file-dropzone/index.js +2 -0
  109. package/dist/s-file-dropzone/s-file-dropzone.d.ts +63 -0
  110. package/dist/s-file-dropzone/s-file-dropzone.d.ts.map +1 -0
  111. package/dist/s-file-dropzone/s-file-dropzone.js +115 -0
  112. package/dist/s-file-icon/index.d.ts +3 -0
  113. package/dist/s-file-icon/index.d.ts.map +1 -0
  114. package/dist/s-file-icon/index.js +2 -0
  115. package/dist/s-file-icon/s-file-icon.d.ts +23 -0
  116. package/dist/s-file-icon/s-file-icon.d.ts.map +1 -0
  117. package/dist/s-file-icon/s-file-icon.js +86 -0
  118. package/dist/s-form/s-form.d.ts +0 -1
  119. package/dist/s-form/s-form.d.ts.map +1 -1
  120. package/dist/s-form/s-form.js +0 -1
  121. package/dist/s-icon-button/s-icon-button.d.ts +9 -9
  122. package/dist/s-icon-button/s-icon-button.d.ts.map +1 -1
  123. package/dist/s-icon-button/s-icon-button.js +38 -4
  124. package/dist/s-image-comparison/index.d.ts +2 -0
  125. package/dist/s-image-comparison/index.d.ts.map +1 -0
  126. package/dist/s-image-comparison/index.js +1 -0
  127. package/dist/s-image-comparison/s-image-comparison.d.ts +35 -0
  128. package/dist/s-image-comparison/s-image-comparison.d.ts.map +1 -0
  129. package/dist/s-image-comparison/s-image-comparison.js +111 -0
  130. package/dist/s-label/index.d.ts +3 -0
  131. package/dist/s-label/index.d.ts.map +1 -0
  132. package/dist/s-label/index.js +1 -0
  133. package/dist/s-label/s-label.d.ts +24 -0
  134. package/dist/s-label/s-label.d.ts.map +1 -0
  135. package/dist/s-label/s-label.js +19 -0
  136. package/dist/s-language-switcher/index.d.ts +4 -0
  137. package/dist/s-language-switcher/index.d.ts.map +1 -0
  138. package/dist/s-language-switcher/index.js +2 -0
  139. package/dist/s-language-switcher/s-language-switcher.d.ts +53 -0
  140. package/dist/s-language-switcher/s-language-switcher.d.ts.map +1 -0
  141. package/dist/s-language-switcher/s-language-switcher.js +57 -0
  142. package/dist/s-lazy-image/index.d.ts +3 -0
  143. package/dist/s-lazy-image/index.d.ts.map +1 -0
  144. package/dist/s-lazy-image/index.js +1 -0
  145. package/dist/s-lazy-image/s-lazy-image.d.ts +43 -0
  146. package/dist/s-lazy-image/s-lazy-image.d.ts.map +1 -0
  147. package/dist/s-lazy-image/s-lazy-image.js +74 -0
  148. package/dist/s-moving-border/index.d.ts +2 -0
  149. package/dist/s-moving-border/index.d.ts.map +1 -0
  150. package/dist/s-moving-border/index.js +1 -0
  151. package/dist/s-moving-border/s-moving-border.d.ts +38 -0
  152. package/dist/s-moving-border/s-moving-border.d.ts.map +1 -0
  153. package/dist/s-moving-border/s-moving-border.js +153 -0
  154. package/dist/s-multi-select/index.d.ts +2 -0
  155. package/dist/s-multi-select/index.d.ts.map +1 -0
  156. package/dist/s-multi-select/index.js +1 -0
  157. package/dist/s-multi-select/s-multi-select.d.ts +53 -0
  158. package/dist/s-multi-select/s-multi-select.d.ts.map +1 -0
  159. package/dist/s-multi-select/s-multi-select.js +150 -0
  160. package/dist/s-pagination/index.d.ts +3 -0
  161. package/dist/s-pagination/index.d.ts.map +1 -0
  162. package/dist/s-pagination/index.js +2 -0
  163. package/dist/s-pagination/s-pagination.d.ts +49 -0
  164. package/dist/s-pagination/s-pagination.d.ts.map +1 -0
  165. package/dist/s-pagination/s-pagination.js +147 -0
  166. package/dist/s-rating/index.d.ts +3 -0
  167. package/dist/s-rating/index.d.ts.map +1 -0
  168. package/dist/s-rating/index.js +1 -0
  169. package/dist/s-rating/s-rating.d.ts +55 -0
  170. package/dist/s-rating/s-rating.d.ts.map +1 -0
  171. package/dist/s-rating/s-rating.js +157 -0
  172. package/dist/s-review/index.d.ts +3 -0
  173. package/dist/s-review/index.d.ts.map +1 -0
  174. package/dist/s-review/index.js +1 -0
  175. package/dist/s-review/s-review.d.ts +55 -0
  176. package/dist/s-review/s-review.d.ts.map +1 -0
  177. package/dist/s-review/s-review.js +148 -0
  178. package/dist/s-scroll-to-top/index.d.ts +3 -0
  179. package/dist/s-scroll-to-top/index.d.ts.map +1 -0
  180. package/dist/s-scroll-to-top/index.js +2 -0
  181. package/dist/s-scroll-to-top/s-scroll-to-top.d.ts +36 -0
  182. package/dist/s-scroll-to-top/s-scroll-to-top.d.ts.map +1 -0
  183. package/dist/s-scroll-to-top/s-scroll-to-top.js +61 -0
  184. package/dist/s-select/s-select.d.ts +1 -3
  185. package/dist/s-select/s-select.d.ts.map +1 -1
  186. package/dist/s-select/s-select.js +61 -101
  187. package/dist/s-select-list/index.d.ts +3 -0
  188. package/dist/s-select-list/index.d.ts.map +1 -0
  189. package/dist/s-select-list/index.js +2 -0
  190. package/dist/s-select-list/s-select-list.d.ts +34 -0
  191. package/dist/s-select-list/s-select-list.d.ts.map +1 -0
  192. package/dist/s-select-list/s-select-list.js +115 -0
  193. package/dist/s-skeleton/index.d.ts +3 -0
  194. package/dist/s-skeleton/index.d.ts.map +1 -0
  195. package/dist/s-skeleton/index.js +1 -0
  196. package/dist/s-skeleton/s-skeleton.d.ts +27 -0
  197. package/dist/s-skeleton/s-skeleton.d.ts.map +1 -0
  198. package/dist/s-skeleton/s-skeleton.js +126 -0
  199. package/dist/s-switch/index.d.ts +3 -0
  200. package/dist/s-switch/index.d.ts.map +1 -0
  201. package/dist/s-switch/index.js +1 -0
  202. package/dist/s-switch/s-switch.d.ts +30 -0
  203. package/dist/s-switch/s-switch.d.ts.map +1 -0
  204. package/dist/s-switch/s-switch.js +44 -0
  205. package/dist/s-text-field/s-text-field.d.ts +0 -2
  206. package/dist/s-text-field/s-text-field.d.ts.map +1 -1
  207. package/dist/s-text-field/s-text-field.js +10 -23
  208. package/dist/s-text-shimmer/index.d.ts +2 -0
  209. package/dist/s-text-shimmer/index.d.ts.map +1 -0
  210. package/dist/s-text-shimmer/index.js +1 -0
  211. package/dist/s-text-shimmer/s-text-shimmer.d.ts +22 -0
  212. package/dist/s-text-shimmer/s-text-shimmer.d.ts.map +1 -0
  213. package/dist/s-text-shimmer/s-text-shimmer.js +102 -0
  214. package/dist/s-text-truncation/index.d.ts +2 -0
  215. package/dist/s-text-truncation/index.d.ts.map +1 -0
  216. package/dist/s-text-truncation/index.js +1 -0
  217. package/dist/s-text-truncation/s-text-truncation.d.ts +42 -0
  218. package/dist/s-text-truncation/s-text-truncation.d.ts.map +1 -0
  219. package/dist/s-text-truncation/s-text-truncation.js +88 -0
  220. package/dist/s-tip/index.d.ts +3 -0
  221. package/dist/s-tip/index.d.ts.map +1 -0
  222. package/dist/s-tip/index.js +1 -0
  223. package/dist/s-tip/s-tip.d.ts +17 -0
  224. package/dist/s-tip/s-tip.d.ts.map +1 -0
  225. package/dist/s-tip/s-tip.js +25 -0
  226. package/dist/s-tooltip/index.d.ts +2 -0
  227. package/dist/s-tooltip/index.d.ts.map +1 -0
  228. package/dist/s-tooltip/index.js +1 -0
  229. package/dist/s-tooltip/s-tooltip.d.ts +23 -0
  230. package/dist/s-tooltip/s-tooltip.d.ts.map +1 -0
  231. package/dist/s-tooltip/s-tooltip.js +17 -0
  232. package/dist/s-zoom-image/index.d.ts +3 -0
  233. package/dist/s-zoom-image/index.d.ts.map +1 -0
  234. package/dist/s-zoom-image/index.js +1 -0
  235. package/dist/s-zoom-image/s-zoom-image.d.ts +38 -0
  236. package/dist/s-zoom-image/s-zoom-image.d.ts.map +1 -0
  237. package/dist/s-zoom-image/s-zoom-image.js +149 -0
  238. package/dist/theme/theme-primitives.d.ts +10 -0
  239. package/dist/theme/theme-primitives.d.ts.map +1 -1
  240. package/dist/theme/theme-primitives.js +11 -0
  241. package/dist/utils/bytes-to-size.d.ts +9 -0
  242. package/dist/utils/bytes-to-size.d.ts.map +1 -0
  243. package/dist/utils/bytes-to-size.js +17 -0
  244. package/dist/utils/index.d.ts +2 -0
  245. package/dist/utils/index.d.ts.map +1 -0
  246. package/dist/utils/index.js +1 -0
  247. package/package.json +175 -5
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Custom hooks for UI Kit Native
3
+ */
4
+ export { default as useCountDown, type UseCountDownProps, type UseCountDownReturn, type TimeLeft, } from './use-count-down';
5
+ export { useIsPassedPosition, checkIsPassedPosition } from './use-is-passed-position';
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,QAAQ,GACd,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Custom hooks for UI Kit Native
3
+ */
4
+ export { default as useCountDown, } from './use-count-down';
5
+ export { useIsPassedPosition, checkIsPassedPosition } from './use-is-passed-position';
@@ -0,0 +1,72 @@
1
+ /**
2
+ * Time left object structure
3
+ */
4
+ export interface TimeLeft {
5
+ days: number;
6
+ hours: number;
7
+ minutes: number;
8
+ seconds: number;
9
+ }
10
+ /**
11
+ * Props for useCountDown hook
12
+ */
13
+ export interface UseCountDownProps {
14
+ /** Target date timestamp in milliseconds */
15
+ expireDate: number;
16
+ /** Callback fired when countdown reaches zero */
17
+ onComplete?: () => void;
18
+ /** Callback fired on each tick (every second) */
19
+ onTick?: (timeLeft: TimeLeft) => void;
20
+ /** Callback fired when countdown starts */
21
+ onStart?: () => void;
22
+ /** Whether the countdown is paused */
23
+ paused?: boolean;
24
+ /** Custom interval in milliseconds (default: 1000) */
25
+ interval?: number;
26
+ /** Whether to automatically start the countdown */
27
+ autoStart?: boolean;
28
+ }
29
+ /**
30
+ * Return type for useCountDown hook
31
+ */
32
+ export interface UseCountDownReturn {
33
+ /** Current time left */
34
+ timeLeft: TimeLeft;
35
+ /** Whether the countdown has expired */
36
+ isExpired: boolean;
37
+ /** Whether the countdown is currently running */
38
+ isRunning: boolean;
39
+ /** Whether the countdown is paused */
40
+ isPaused: boolean;
41
+ /** Start the countdown */
42
+ start: () => void;
43
+ /** Pause the countdown */
44
+ pause: () => void;
45
+ /** Resume the countdown */
46
+ resume: () => void;
47
+ /** Reset the countdown to initial state */
48
+ reset: () => void;
49
+ /** Get the total duration in milliseconds */
50
+ totalDuration: number;
51
+ /** Get the elapsed time in milliseconds */
52
+ elapsedTime: number;
53
+ /** Get the progress as a percentage (0-100) */
54
+ progress: number;
55
+ }
56
+ /**
57
+ * Enhanced countdown hook with comprehensive features
58
+ *
59
+ * Features:
60
+ * - Pause/resume functionality
61
+ * - Event callbacks (onComplete, onTick, onStart)
62
+ * - Custom intervals
63
+ * - Progress tracking
64
+ * - Manual start/stop controls
65
+ * - Expiration detection
66
+ *
67
+ * @param props - UseCountDownProps
68
+ * @returns UseCountDownReturn - Hook return value with time data and controls
69
+ */
70
+ declare const useCountDown: ({ expireDate, onComplete, onTick, onStart, paused, interval, autoStart, }: UseCountDownProps) => UseCountDownReturn;
71
+ export default useCountDown;
72
+ //# sourceMappingURL=use-count-down.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-count-down.d.ts","sourceRoot":"","sources":["../../src/hooks/use-count-down.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAYD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wBAAwB;IACxB,QAAQ,EAAE,QAAQ,CAAC;IACnB,wCAAwC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,2BAA2B;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,6CAA6C;IAC7C,aAAa,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,YAAY,GAAI,2EAQnB,iBAAiB,KAAG,kBAuMtB,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,203 @@
1
+ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
+ /**
3
+ * Initial state for countdown
4
+ */
5
+ const initialState = {
6
+ days: 0,
7
+ hours: 0,
8
+ minutes: 0,
9
+ seconds: 0,
10
+ };
11
+ /**
12
+ * Enhanced countdown hook with comprehensive features
13
+ *
14
+ * Features:
15
+ * - Pause/resume functionality
16
+ * - Event callbacks (onComplete, onTick, onStart)
17
+ * - Custom intervals
18
+ * - Progress tracking
19
+ * - Manual start/stop controls
20
+ * - Expiration detection
21
+ *
22
+ * @param props - UseCountDownProps
23
+ * @returns UseCountDownReturn - Hook return value with time data and controls
24
+ */
25
+ const useCountDown = ({ expireDate, onComplete, onTick, onStart, paused = false, interval = 1000, autoStart = true, }) => {
26
+ const [timeLeft, setTimeLeft] = useState(initialState);
27
+ const [isExpired, setIsExpired] = useState(false);
28
+ const [isRunning, setIsRunning] = useState(autoStart && !paused);
29
+ const [isPaused, setIsPaused] = useState(paused);
30
+ const [startTime, setStartTime] = useState(null);
31
+ const timerRef = useRef(null);
32
+ const onCompleteRef = useRef(onComplete);
33
+ const onTickRef = useRef(onTick);
34
+ const onStartRef = useRef(onStart);
35
+ const hasStartedRef = useRef(false);
36
+ const hasCompletedRef = useRef(false);
37
+ // Update refs when callbacks change
38
+ useEffect(() => {
39
+ onCompleteRef.current = onComplete;
40
+ }, [onComplete]);
41
+ useEffect(() => {
42
+ onTickRef.current = onTick;
43
+ }, [onTick]);
44
+ useEffect(() => {
45
+ onStartRef.current = onStart;
46
+ }, [onStart]);
47
+ /**
48
+ * Calculate time remaining
49
+ */
50
+ const calculateTimeLeft = useCallback(() => {
51
+ const now = new Date().getTime();
52
+ const distance = expireDate - now;
53
+ if (distance < 0) {
54
+ return { timeLeft: initialState, expired: true };
55
+ }
56
+ return {
57
+ timeLeft: {
58
+ days: Math.floor(distance / (1000 * 60 * 60 * 24)),
59
+ hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
60
+ minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
61
+ seconds: Math.floor((distance % (1000 * 60)) / 1000),
62
+ },
63
+ expired: false,
64
+ };
65
+ }, [expireDate]);
66
+ /**
67
+ * Update timer state
68
+ */
69
+ const updateTimer = useCallback(() => {
70
+ const { timeLeft: newTimeLeft, expired } = calculateTimeLeft();
71
+ setTimeLeft(newTimeLeft);
72
+ setIsExpired(expired);
73
+ // Call onTick callback
74
+ if (onTickRef.current) {
75
+ onTickRef.current(newTimeLeft);
76
+ }
77
+ // Handle completion
78
+ if (expired && !hasCompletedRef.current) {
79
+ hasCompletedRef.current = true;
80
+ setIsRunning(false);
81
+ if (onCompleteRef.current) {
82
+ onCompleteRef.current();
83
+ }
84
+ }
85
+ }, [calculateTimeLeft]);
86
+ /**
87
+ * Start the countdown
88
+ */
89
+ const start = useCallback(() => {
90
+ if (!hasStartedRef.current && onStartRef.current) {
91
+ onStartRef.current();
92
+ hasStartedRef.current = true;
93
+ }
94
+ setIsRunning(true);
95
+ setIsPaused(false);
96
+ if (!startTime) {
97
+ setStartTime(new Date().getTime());
98
+ }
99
+ }, [startTime]);
100
+ /**
101
+ * Pause the countdown
102
+ */
103
+ const pause = useCallback(() => {
104
+ setIsRunning(false);
105
+ setIsPaused(true);
106
+ }, []);
107
+ /**
108
+ * Resume the countdown
109
+ */
110
+ const resume = useCallback(() => {
111
+ setIsRunning(true);
112
+ setIsPaused(false);
113
+ }, []);
114
+ /**
115
+ * Reset the countdown
116
+ */
117
+ const reset = useCallback(() => {
118
+ setIsRunning(autoStart && !paused);
119
+ setIsPaused(paused);
120
+ setIsExpired(false);
121
+ setStartTime(null);
122
+ hasStartedRef.current = false;
123
+ hasCompletedRef.current = false;
124
+ const { timeLeft: newTimeLeft } = calculateTimeLeft();
125
+ setTimeLeft(newTimeLeft);
126
+ }, [autoStart, paused, calculateTimeLeft]);
127
+ /**
128
+ * Handle pause prop changes
129
+ */
130
+ useEffect(() => {
131
+ if (paused) {
132
+ pause();
133
+ }
134
+ else if (isPaused && !paused) {
135
+ resume();
136
+ }
137
+ }, [paused, isPaused, pause, resume]);
138
+ /**
139
+ * Timer effect
140
+ */
141
+ useEffect(() => {
142
+ if (isRunning && !isExpired) {
143
+ timerRef.current = setInterval(updateTimer, interval);
144
+ }
145
+ else {
146
+ if (timerRef.current) {
147
+ clearInterval(timerRef.current);
148
+ timerRef.current = null;
149
+ }
150
+ }
151
+ return () => {
152
+ if (timerRef.current) {
153
+ clearInterval(timerRef.current);
154
+ timerRef.current = null;
155
+ }
156
+ };
157
+ }, [isRunning, isExpired, interval, updateTimer]);
158
+ /**
159
+ * Initial calculation
160
+ */
161
+ useEffect(() => {
162
+ updateTimer();
163
+ }, [updateTimer]);
164
+ /**
165
+ * Calculate total duration
166
+ */
167
+ const totalDuration = useMemo(() => {
168
+ if (!startTime)
169
+ return 0;
170
+ return Math.max(0, expireDate - startTime);
171
+ }, [expireDate, startTime]);
172
+ /**
173
+ * Calculate elapsed time
174
+ */
175
+ const elapsedTime = useMemo(() => {
176
+ if (!startTime)
177
+ return 0;
178
+ const now = new Date().getTime();
179
+ return Math.max(0, now - startTime);
180
+ }, [startTime]);
181
+ /**
182
+ * Calculate progress percentage
183
+ */
184
+ const progress = useMemo(() => {
185
+ if (totalDuration === 0)
186
+ return 0;
187
+ return Math.min(100, Math.max(0, (elapsedTime / totalDuration) * 100));
188
+ }, [elapsedTime, totalDuration]);
189
+ return {
190
+ timeLeft,
191
+ isExpired,
192
+ isRunning,
193
+ isPaused,
194
+ start,
195
+ pause,
196
+ resume,
197
+ reset,
198
+ totalDuration,
199
+ elapsedTime,
200
+ progress,
201
+ };
202
+ };
203
+ export default useCountDown;
@@ -0,0 +1,20 @@
1
+ import type { ScrollView } from 'react-native';
2
+ /**
3
+ * Hook to detect if a scroll position has been passed
4
+ * Native version of useIsPassedPosition from @solostylist/ui-kit
5
+ *
6
+ * @param scrollRef - Reference to the ScrollView component
7
+ * @param positionY - Y position threshold to detect
8
+ * @returns boolean indicating if the scroll position has been passed
9
+ */
10
+ export declare function useIsPassedPosition(scrollRef: React.RefObject<ScrollView> | null, positionY: number): boolean;
11
+ /**
12
+ * Helper function to check if scroll position is passed
13
+ * This should be called from the ScrollView's onScroll event
14
+ *
15
+ * @param scrollY - Current scroll Y position
16
+ * @param threshold - Threshold position
17
+ * @returns boolean indicating if threshold is passed
18
+ */
19
+ export declare function checkIsPassedPosition(scrollY: number, threshold: number): boolean;
20
+ //# sourceMappingURL=use-is-passed-position.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-is-passed-position.d.ts","sourceRoot":"","sources":["../../src/hooks/use-is-passed-position.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAa7G;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAEjF"}
@@ -0,0 +1,31 @@
1
+ import { useEffect, useState } from 'react';
2
+ /**
3
+ * Hook to detect if a scroll position has been passed
4
+ * Native version of useIsPassedPosition from @solostylist/ui-kit
5
+ *
6
+ * @param scrollRef - Reference to the ScrollView component
7
+ * @param positionY - Y position threshold to detect
8
+ * @returns boolean indicating if the scroll position has been passed
9
+ */
10
+ export function useIsPassedPosition(scrollRef, positionY) {
11
+ const [isPassed, setIsPassed] = useState(false);
12
+ useEffect(() => {
13
+ // For React Native, we can't directly attach scroll listeners like in web
14
+ // The scroll position tracking should be handled by the parent component
15
+ // This hook will be updated via the onScroll event in the ScrollView
16
+ // Initialize as not passed
17
+ setIsPassed(false);
18
+ }, [scrollRef, positionY]);
19
+ return isPassed;
20
+ }
21
+ /**
22
+ * Helper function to check if scroll position is passed
23
+ * This should be called from the ScrollView's onScroll event
24
+ *
25
+ * @param scrollY - Current scroll Y position
26
+ * @param threshold - Threshold position
27
+ * @returns boolean indicating if threshold is passed
28
+ */
29
+ export function checkIsPassedPosition(scrollY, threshold) {
30
+ return scrollY > threshold;
31
+ }
package/dist/index.d.ts CHANGED
@@ -5,10 +5,46 @@
5
5
  * Synced with web ui-kit and uses @solostylist/core for theming
6
6
  */
7
7
  export { SThemeProvider, useSTheme, darkTheme, lightTheme, type SThemeProviderProps, type ThemeMode, type NativeTheme, type NativeThemeColors, } from './theme';
8
+ export { SAvatar, type SAvatarProps, type SAvatarSize, type SAvatarColor } from './s-avatar';
9
+ export { SButton, type SButtonProps, type SButtonColor, type SButtonVariant, type SButtonSize } from './s-button';
10
+ export { SButtonLink, type SButtonLinkProps } from './s-button-link';
11
+ export { SChatInput, type SChatInputProps, type ChatFile } from './s-chat-input';
12
+ export { SChatMessage, type SChatMessageProps, type ChatAttachment } from './s-chat-message';
13
+ export { SCheckbox, type SCheckboxProps } from './s-checkbox';
14
+ export { SSwitch, type SSwitchProps } from './s-switch';
15
+ export { SCodeBlock, type SCodeBlockProps } from './s-code-block';
16
+ export { SCommentMessage, type SCommentMessageProps } from './s-comment-message';
17
+ export { SChip, type SChipProps, type SChipColor, type SChipVariant, type SChipSize } from './s-chip';
18
+ export { SCopyableText, type SCopyableTextProps } from './s-copyable-text';
19
+ export { SCountdown, SCountBox, type SCountdownProps, type SCountBoxProps } from './s-countdown';
20
+ export { SDataTable, type SDataTableProps, type ColumnDef } from './s-data-table';
21
+ export { SDatePicker, type SDatePickerProps } from './s-date-picker';
22
+ export { SDateTimePicker, type SDateTimePickerProps } from './s-date-time-picker';
23
+ export { SFileIcon, type SFileIconProps } from './s-file-icon';
24
+ export { SFileDropzone, type SFileDropzoneProps, type CustomFile } from './s-file-dropzone';
8
25
  export { SForm, type SFormProps } from './s-form';
9
26
  export { SIconButton, type SIconButtonProps } from './s-icon-button';
27
+ export { SImageComparison, type SImageComparisonProps } from './s-image-comparison';
28
+ export { SLanguageSwitcher, type SLanguageSwitcherProps, type SLanguageOption, defaultLanguageOptions, } from './s-language-switcher';
29
+ export { SDivider, type SDividerProps } from './s-divider';
30
+ export { SLabel, type SLabelProps } from './s-label';
31
+ export { SLazyImage, type SLazyImageProps, type SLazyImageVariant } from './s-lazy-image';
32
+ export { SMovingBorder, type SMovingBorderProps } from './s-moving-border';
33
+ export { SZoomImage, type SZoomImageProps } from './s-zoom-image';
34
+ export { SPagination, type SPaginationProps } from './s-pagination';
35
+ export { SRating, type SRatingProps, type SRatingSize, type SRatingColor } from './s-rating';
36
+ export { SReview, type SReviewProps } from './s-review';
37
+ export { SScrollToTop, type SScrollToTopProps } from './s-scroll-to-top';
10
38
  export { SSelect, type SSelectProps } from './s-select';
39
+ export { SSelectList, type SSelectListProps, type SSelectListItem } from './s-select-list';
40
+ export { SSkeleton, type SSkeletonProps } from './s-skeleton';
41
+ export { SMultiSelect, type SMultiSelectProps } from './s-multi-select';
11
42
  export { SText, type STextProps } from './s-text';
12
43
  export { STextField, type STextFieldProps } from './s-text-field';
44
+ export { STextShimmer, type STextShimmerProps } from './s-text-shimmer';
45
+ export { STextTruncation, type STextTruncationProps, type STextTruncationVariant } from './s-text-truncation';
46
+ export { STip, type STipProps } from './s-tip';
47
+ export { STooltip, type STooltipProps } from './s-tooltip';
48
+ export { useCountDown, type UseCountDownProps, type UseCountDownReturn, type TimeLeft, useIsPassedPosition, checkIsPassedPosition, } from './hooks';
13
49
  export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkPulse, lightPulse, } from './theme';
14
50
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,cAAc,EACd,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGlE,OAAO,EACL,KAAK,EACL,UAAU,EACV,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,WAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,EACH,QAAQ,EACR,MAAM,EACN,WAAW,EACX,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,UAAU,GACX,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,cAAc,EACd,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAClH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AACtG,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC5F,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,eAAe,EACpB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC9G,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAG3D,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EACb,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,KAAK,EACL,UAAU,EACV,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,WAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,EACH,QAAQ,EACR,MAAM,EACN,WAAW,EACX,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,UAAU,GACX,MAAM,SAAS,CAAC"}
package/dist/index.js CHANGED
@@ -7,10 +7,47 @@
7
7
  // Theme
8
8
  export { SThemeProvider, useSTheme, darkTheme, lightTheme, } from './theme';
9
9
  // Components
10
+ export { SAvatar } from './s-avatar';
11
+ export { SButton } from './s-button';
12
+ export { SButtonLink } from './s-button-link';
13
+ export { SChatInput } from './s-chat-input';
14
+ export { SChatMessage } from './s-chat-message';
15
+ export { SCheckbox } from './s-checkbox';
16
+ export { SSwitch } from './s-switch';
17
+ export { SCodeBlock } from './s-code-block';
18
+ export { SCommentMessage } from './s-comment-message';
19
+ export { SChip } from './s-chip';
20
+ export { SCopyableText } from './s-copyable-text';
21
+ export { SCountdown, SCountBox } from './s-countdown';
22
+ export { SDataTable } from './s-data-table';
23
+ export { SDatePicker } from './s-date-picker';
24
+ export { SDateTimePicker } from './s-date-time-picker';
25
+ export { SFileIcon } from './s-file-icon';
26
+ export { SFileDropzone } from './s-file-dropzone';
10
27
  export { SForm } from './s-form';
11
28
  export { SIconButton } from './s-icon-button';
29
+ export { SImageComparison } from './s-image-comparison';
30
+ export { SLanguageSwitcher, defaultLanguageOptions, } from './s-language-switcher';
31
+ export { SDivider } from './s-divider';
32
+ export { SLabel } from './s-label';
33
+ export { SLazyImage } from './s-lazy-image';
34
+ export { SMovingBorder } from './s-moving-border';
35
+ export { SZoomImage } from './s-zoom-image';
36
+ export { SPagination } from './s-pagination';
37
+ export { SRating } from './s-rating';
38
+ export { SReview } from './s-review';
39
+ export { SScrollToTop } from './s-scroll-to-top';
12
40
  export { SSelect } from './s-select';
41
+ export { SSelectList } from './s-select-list';
42
+ export { SSkeleton } from './s-skeleton';
43
+ export { SMultiSelect } from './s-multi-select';
13
44
  export { SText } from './s-text';
14
45
  export { STextField } from './s-text-field';
46
+ export { STextShimmer } from './s-text-shimmer';
47
+ export { STextTruncation } from './s-text-truncation';
48
+ export { STip } from './s-tip';
49
+ export { STooltip } from './s-tooltip';
50
+ // Hooks
51
+ export { useCountDown, useIsPassedPosition, checkIsPassedPosition, } from './hooks';
15
52
  // Re-export core colors for convenience
16
53
  export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkPulse, lightPulse, } from './theme';
@@ -0,0 +1,3 @@
1
+ export { SAvatar, default } from './s-avatar';
2
+ export type { SAvatarProps, SAvatarSize, SAvatarColor } from './s-avatar';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1 @@
1
+ export { SAvatar, default } from './s-avatar';
@@ -0,0 +1,43 @@
1
+ import React from 'react';
2
+ import { ImageSourcePropType, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
3
+ /**
4
+ * Avatar size variants - matches common sizing patterns
5
+ */
6
+ export type SAvatarSize = 'small' | 'medium' | 'large' | number;
7
+ /**
8
+ * Avatar color variants for background when showing initials
9
+ */
10
+ export type SAvatarColor = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
11
+ /**
12
+ * Props interface for SAvatar component
13
+ */
14
+ export interface SAvatarProps {
15
+ /** URL or local asset of the avatar image to display */
16
+ avatar?: string | ImageSourcePropType;
17
+ /** Name of the user, used for initials fallback and optional display */
18
+ name?: string;
19
+ /** Whether to display the name alongside the avatar */
20
+ showName?: boolean;
21
+ /** Size of the avatar in pixels (width and height) or preset size */
22
+ size?: SAvatarSize;
23
+ /** Background color for initials avatar */
24
+ color?: SAvatarColor;
25
+ /** Additional styles for the avatar container */
26
+ style?: StyleProp<ViewStyle>;
27
+ /** Additional styles for the avatar */
28
+ avatarStyle?: StyleProp<ViewStyle>;
29
+ /** Additional styles for the name text */
30
+ nameStyle?: StyleProp<TextStyle>;
31
+ /** Callback fired when avatar is pressed */
32
+ onPress?: () => void;
33
+ }
34
+ /**
35
+ * A flexible avatar component that displays user profile images with fallback to initials.
36
+ * Built on React Native Paper Avatar with optional name display and customizable sizing.
37
+ */
38
+ export declare const SAvatar: {
39
+ ({ avatar, name, showName, size, color, style, avatarStyle, nameStyle, onPress, }: SAvatarProps): React.JSX.Element;
40
+ displayName: string;
41
+ };
42
+ export default SAvatar;
43
+ //# sourceMappingURL=s-avatar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"s-avatar.d.ts","sourceRoot":"","sources":["../../src/s-avatar/s-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAoBzG;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAE9F;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACtC,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAiDD;;;GAGG;AACH,eAAO,MAAM,OAAO;uFAUjB,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAqFlC,CAAC;AAIF,eAAe,OAAO,CAAC"}
@@ -0,0 +1,119 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useMemo } from 'react';
3
+ import { View } from 'react-native';
4
+ import { Avatar } from 'react-native-paper';
5
+ import { blue, brand, green, lightBlue, lightBrand, lightGreen, lightOrange, lightPurple, lightRed, orange, purple, red, } from '@solostylist/core';
6
+ import { SText } from '../s-text';
7
+ import { useSTheme } from '../theme';
8
+ /**
9
+ * Get size in pixels from size prop
10
+ */
11
+ const getSizeInPixels = (size) => {
12
+ if (typeof size === 'number') {
13
+ return size;
14
+ }
15
+ switch (size) {
16
+ case 'small':
17
+ return 32;
18
+ case 'medium':
19
+ return 40;
20
+ case 'large':
21
+ return 56;
22
+ default:
23
+ return 40;
24
+ }
25
+ };
26
+ /**
27
+ * Get font size for initials based on avatar size
28
+ */
29
+ const getInitialsFontSize = (sizeInPixels) => {
30
+ if (sizeInPixels <= 32) {
31
+ return 12;
32
+ }
33
+ else if (sizeInPixels <= 40) {
34
+ return 14;
35
+ }
36
+ else if (sizeInPixels <= 56) {
37
+ return 18;
38
+ }
39
+ else {
40
+ return Math.round(sizeInPixels * 0.4);
41
+ }
42
+ };
43
+ /**
44
+ * Get initials from name (up to 2 characters)
45
+ */
46
+ const getInitials = (name) => {
47
+ if (!name)
48
+ return 'A';
49
+ const parts = name.trim().split(/\s+/);
50
+ if (parts.length === 1) {
51
+ return parts[0].charAt(0).toUpperCase();
52
+ }
53
+ return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
54
+ };
55
+ /**
56
+ * A flexible avatar component that displays user profile images with fallback to initials.
57
+ * Built on React Native Paper Avatar with optional name display and customizable sizing.
58
+ */
59
+ export const SAvatar = ({ avatar, name, showName = false, size = 'medium', color = 'primary', style, avatarStyle, nameStyle, onPress, }) => {
60
+ const { theme } = useSTheme();
61
+ const sizeInPixels = getSizeInPixels(size);
62
+ const initialsFontSize = getInitialsFontSize(sizeInPixels);
63
+ const initials = getInitials(name);
64
+ // Get color palettes - matches SButton logic
65
+ const getColorPalettes = (color) => {
66
+ switch (color) {
67
+ case 'primary':
68
+ return { light: lightBrand, dark: brand };
69
+ case 'secondary':
70
+ return { light: lightPurple, dark: purple };
71
+ case 'success':
72
+ return { light: lightGreen, dark: green };
73
+ case 'error':
74
+ return { light: lightRed, dark: red };
75
+ case 'info':
76
+ return { light: lightBlue, dark: blue };
77
+ case 'warning':
78
+ return { light: lightOrange, dark: orange };
79
+ default:
80
+ return { light: lightBrand, dark: brand };
81
+ }
82
+ };
83
+ const { light: lightColor, dark: darkColor } = getColorPalettes(color);
84
+ const colorPalette = theme.dark ? darkColor : lightColor;
85
+ // Get background color for initials avatar - matches SButton contained variant
86
+ const backgroundColor = useMemo(() => {
87
+ return theme.dark ? colorPalette[800] : colorPalette[700];
88
+ }, [theme.dark, colorPalette]);
89
+ // Get text color for initials
90
+ const textColor = useMemo(() => {
91
+ return theme.dark ? colorPalette[100] : colorPalette[50];
92
+ }, [theme.dark, colorPalette]);
93
+ const renderAvatar = () => {
94
+ if (avatar) {
95
+ const source = typeof avatar === 'string' ? { uri: avatar } : avatar;
96
+ return _jsx(Avatar.Image, { size: sizeInPixels, source: source, style: [avatarStyle], onTouchEnd: onPress });
97
+ }
98
+ return (_jsx(Avatar.Text, { size: sizeInPixels, label: initials, style: [
99
+ {
100
+ backgroundColor,
101
+ },
102
+ avatarStyle,
103
+ ], labelStyle: {
104
+ fontSize: initialsFontSize,
105
+ fontFamily: theme.typography.fontFamily,
106
+ color: textColor,
107
+ }, onTouchEnd: onPress }));
108
+ };
109
+ return (_jsxs(View, { style: [
110
+ {
111
+ flexDirection: 'row',
112
+ alignItems: 'center',
113
+ gap: theme.spacing.md,
114
+ },
115
+ style,
116
+ ], children: [renderAvatar(), showName && name && (_jsx(SText, { variant: "body1", style: [{ fontSize: 16 }, nameStyle], children: name }))] }));
117
+ };
118
+ SAvatar.displayName = 'SAvatar';
119
+ export default SAvatar;
@@ -0,0 +1,3 @@
1
+ export { SButton, default } from './s-button';
2
+ export type { SButtonProps, SButtonColor, SButtonVariant, SButtonSize } from './s-button';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1 @@
1
+ export { SButton, default } from './s-button';