@usableapp/cardds 0.1.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 (170) hide show
  1. package/README.md +562 -0
  2. package/cardds.css +18 -0
  3. package/cardds.js +473 -0
  4. package/css/actions.css +292 -0
  5. package/css/base.css +128 -0
  6. package/css/card.css +283 -0
  7. package/css/choice.css +297 -0
  8. package/css/fonts.css +37 -0
  9. package/css/forms.css +64 -0
  10. package/css/journey.css +61 -0
  11. package/css/layover.css +243 -0
  12. package/css/lists.css +142 -0
  13. package/css/media.css +232 -0
  14. package/css/numbers.css +258 -0
  15. package/css/palette.css +112 -0
  16. package/css/people.css +79 -0
  17. package/css/sheet.css +295 -0
  18. package/css/stack.css +262 -0
  19. package/css/step.css +71 -0
  20. package/css/tokens.css +177 -0
  21. package/dist/actions/Btn.d.ts +311 -0
  22. package/dist/actions/Btn.js +14 -0
  23. package/dist/actions/BtnRow.d.ts +5 -0
  24. package/dist/actions/BtnRow.js +6 -0
  25. package/dist/actions/Chip.d.ts +328 -0
  26. package/dist/actions/Chip.js +25 -0
  27. package/dist/actions/Dot.d.ts +7 -0
  28. package/dist/actions/Dot.js +6 -0
  29. package/dist/actions/Dropdown.d.ts +34 -0
  30. package/dist/actions/Dropdown.js +19 -0
  31. package/dist/actions/Fab.d.ts +9 -0
  32. package/dist/actions/Fab.js +7 -0
  33. package/dist/actions/IconBtn.d.ts +308 -0
  34. package/dist/actions/IconBtn.js +8 -0
  35. package/dist/actions/Link.d.ts +301 -0
  36. package/dist/actions/Link.js +8 -0
  37. package/dist/actions/Segment.d.ts +11 -0
  38. package/dist/actions/Segment.js +10 -0
  39. package/dist/cardds.css +3068 -0
  40. package/dist/cards/Card.d.ts +310 -0
  41. package/dist/cards/Card.js +14 -0
  42. package/dist/cards/CardFoot.d.ts +5 -0
  43. package/dist/cards/CardFoot.js +6 -0
  44. package/dist/cards/CardHead.d.ts +21 -0
  45. package/dist/cards/CardHead.js +11 -0
  46. package/dist/cards/CardParts.d.ts +25 -0
  47. package/dist/cards/CardParts.js +26 -0
  48. package/dist/cards/Placeholder.d.ts +9 -0
  49. package/dist/cards/Placeholder.js +6 -0
  50. package/dist/cards/Stat.d.ts +17 -0
  51. package/dist/cards/Stat.js +14 -0
  52. package/dist/choice/Calendar.d.ts +23 -0
  53. package/dist/choice/Calendar.js +7 -0
  54. package/dist/choice/Check.d.ts +14 -0
  55. package/dist/choice/Check.js +10 -0
  56. package/dist/choice/DayStrip.d.ts +16 -0
  57. package/dist/choice/DayStrip.js +10 -0
  58. package/dist/choice/Mood.d.ts +11 -0
  59. package/dist/choice/Mood.js +6 -0
  60. package/dist/choice/Slider.d.ts +11 -0
  61. package/dist/choice/Slider.js +14 -0
  62. package/dist/cx.d.ts +2 -0
  63. package/dist/cx.js +2 -0
  64. package/dist/forms/AddRow.d.ts +5 -0
  65. package/dist/forms/AddRow.js +7 -0
  66. package/dist/forms/Composer.d.ts +13 -0
  67. package/dist/forms/Composer.js +6 -0
  68. package/dist/forms/Field.d.ts +17 -0
  69. package/dist/forms/Field.js +10 -0
  70. package/dist/forms/FileBtn.d.ts +18 -0
  71. package/dist/forms/FileBtn.js +10 -0
  72. package/dist/forms/Pin.d.ts +19 -0
  73. package/dist/forms/Pin.js +27 -0
  74. package/dist/index.d.ts +72 -0
  75. package/dist/index.js +75 -0
  76. package/dist/journey/NoteRow.d.ts +7 -0
  77. package/dist/journey/NoteRow.js +7 -0
  78. package/dist/journey/Route.d.ts +18 -0
  79. package/dist/journey/Route.js +8 -0
  80. package/dist/journey/TileBadge.d.ts +15 -0
  81. package/dist/journey/TileBadge.js +6 -0
  82. package/dist/layover/Banner.d.ts +9 -0
  83. package/dist/layover/Banner.js +6 -0
  84. package/dist/layover/Callout.d.ts +10 -0
  85. package/dist/layover/Callout.js +6 -0
  86. package/dist/layover/Deck.d.ts +9 -0
  87. package/dist/layover/Deck.js +10 -0
  88. package/dist/lists/Kv.d.ts +27 -0
  89. package/dist/lists/Kv.js +19 -0
  90. package/dist/lists/Legend.d.ts +11 -0
  91. package/dist/lists/Legend.js +11 -0
  92. package/dist/lists/Row.d.ts +319 -0
  93. package/dist/lists/Row.js +17 -0
  94. package/dist/lists/Timeline.d.ts +11 -0
  95. package/dist/lists/Timeline.js +10 -0
  96. package/dist/media/MapArea.d.ts +20 -0
  97. package/dist/media/MapArea.js +11 -0
  98. package/dist/media/Mosaic.d.ts +11 -0
  99. package/dist/media/Mosaic.js +10 -0
  100. package/dist/media/Postcard.d.ts +20 -0
  101. package/dist/media/Postcard.js +10 -0
  102. package/dist/media/Quote.d.ts +11 -0
  103. package/dist/media/Quote.js +6 -0
  104. package/dist/media/Tile.d.ts +320 -0
  105. package/dist/media/Tile.js +16 -0
  106. package/dist/numbers/Badge.d.ts +7 -0
  107. package/dist/numbers/Badge.js +6 -0
  108. package/dist/numbers/Band.d.ts +16 -0
  109. package/dist/numbers/Band.js +10 -0
  110. package/dist/numbers/Bars.d.ts +14 -0
  111. package/dist/numbers/Bars.js +10 -0
  112. package/dist/numbers/DotGrid.d.ts +12 -0
  113. package/dist/numbers/DotGrid.js +6 -0
  114. package/dist/numbers/Picker.d.ts +13 -0
  115. package/dist/numbers/Picker.js +18 -0
  116. package/dist/numbers/Ring.d.ts +15 -0
  117. package/dist/numbers/Ring.js +6 -0
  118. package/dist/numbers/Track.d.ts +12 -0
  119. package/dist/numbers/Track.js +10 -0
  120. package/dist/people/Avatar.d.ts +314 -0
  121. package/dist/people/Avatar.js +13 -0
  122. package/dist/people/AvatarPick.d.ts +18 -0
  123. package/dist/people/AvatarPick.js +10 -0
  124. package/dist/scaffold/ActionBar.d.ts +21 -0
  125. package/dist/scaffold/ActionBar.js +16 -0
  126. package/dist/scaffold/AppBar.d.ts +18 -0
  127. package/dist/scaffold/AppBar.js +10 -0
  128. package/dist/scaffold/Centre.d.ts +30 -0
  129. package/dist/scaffold/Centre.js +41 -0
  130. package/dist/scaffold/EmptyState.d.ts +14 -0
  131. package/dist/scaffold/EmptyState.js +8 -0
  132. package/dist/scaffold/FilterRow.d.ts +5 -0
  133. package/dist/scaffold/FilterRow.js +6 -0
  134. package/dist/scaffold/FloatBar.d.ts +310 -0
  135. package/dist/scaffold/FloatBar.js +15 -0
  136. package/dist/scaffold/PagerAt.d.ts +11 -0
  137. package/dist/scaffold/PagerAt.js +6 -0
  138. package/dist/scaffold/Screen.d.ts +299 -0
  139. package/dist/scaffold/Screen.js +11 -0
  140. package/dist/scaffold/Section.d.ts +12 -0
  141. package/dist/scaffold/Section.js +13 -0
  142. package/dist/scaffold/TopBar.d.ts +15 -0
  143. package/dist/scaffold/TopBar.js +9 -0
  144. package/dist/sheets/CardBack.d.ts +7 -0
  145. package/dist/sheets/CardBack.js +7 -0
  146. package/dist/sheets/Drawer.d.ts +17 -0
  147. package/dist/sheets/Drawer.js +16 -0
  148. package/dist/sheets/Sheet.d.ts +21 -0
  149. package/dist/sheets/Sheet.js +13 -0
  150. package/dist/sheets/SheetBody.d.ts +5 -0
  151. package/dist/sheets/SheetBody.js +6 -0
  152. package/dist/sheets/SheetHead.d.ts +13 -0
  153. package/dist/sheets/SheetHead.js +6 -0
  154. package/dist/sheets/SheetStack.d.ts +21 -0
  155. package/dist/sheets/SheetStack.js +14 -0
  156. package/dist/sheets/SheetStage.d.ts +20 -0
  157. package/dist/sheets/SheetStage.js +11 -0
  158. package/dist/sheets/Step.d.ts +15 -0
  159. package/dist/sheets/Step.js +15 -0
  160. package/dist/type/Icon.d.ts +16 -0
  161. package/dist/type/Icon.js +12 -0
  162. package/dist/type/Text.d.ts +302 -0
  163. package/dist/type/Text.js +16 -0
  164. package/dist/type/icons.d.ts +6 -0
  165. package/dist/type/icons.js +2 -0
  166. package/fonts/LICENSES.md +44 -0
  167. package/fonts/fc-pride-medium.otf +0 -0
  168. package/fonts/pk-nonthaburi-demo.ttf +0 -0
  169. package/icons.svg +61 -0
  170. package/package.json +62 -0
@@ -0,0 +1,319 @@
1
+ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
+ import { type IconName } from '../type/Icon';
3
+ export interface RowProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
4
+ /** the leading visual: an Avatar, an AvatarStack, an Icon */
5
+ lead?: ReactNode;
6
+ /** an icon in the outlined 48px lead box (menu rows) */
7
+ leadIcon?: IconName;
8
+ /** the title line */
9
+ title?: ReactNode;
10
+ /** the caption under it (may hold a Dot) */
11
+ meta?: ReactNode;
12
+ /** custom body content instead of (or under) title/meta — a Wave for a voice note */
13
+ body?: ReactNode;
14
+ /** the trailing control: an IconBtn, a Chip, a Check, a Toggle, a caption */
15
+ end?: ReactNode;
16
+ /** a trailing value + caption, right-aligned */
17
+ endValue?: ReactNode;
18
+ endCaption?: ReactNode;
19
+ /** menu row: more air, a bigger title */
20
+ lg?: boolean;
21
+ /** no vertical padding — a single row as card content */
22
+ flush?: boolean;
23
+ /** a finished checklist item: muted words, a filled tick at the end, no longer a tap target (aria-disabled) — pass no `end` */
24
+ done?: boolean;
25
+ /** div (default), a link, a label wrapping a Check/Toggle, li */
26
+ as?: 'div' | 'a' | 'label' | 'li';
27
+ href?: string;
28
+ }
29
+ /**
30
+ * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
31
+ * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
32
+ * `done` is the checklist's finished line: ticked, muted, not tappable any more.
33
+ */
34
+ export declare function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, flush, done, as, href, className, children, ...rest }: RowProps): import("react").DetailedReactHTMLElement<{
35
+ slot?: string | undefined | undefined;
36
+ style?: import("react").CSSProperties | undefined;
37
+ suppressHydrationWarning?: boolean | undefined | undefined;
38
+ color?: string | undefined | undefined;
39
+ id?: string | undefined | undefined;
40
+ lang?: string | undefined | undefined;
41
+ nonce?: string | undefined | undefined;
42
+ part?: string | undefined | undefined;
43
+ role?: import("react").AriaRole | undefined;
44
+ tabIndex?: number | undefined | undefined;
45
+ "aria-activedescendant"?: string | undefined | undefined;
46
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
47
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
48
+ "aria-braillelabel"?: string | undefined | undefined;
49
+ "aria-brailleroledescription"?: string | undefined | undefined;
50
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
51
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
52
+ "aria-colcount"?: number | undefined | undefined;
53
+ "aria-colindex"?: number | undefined | undefined;
54
+ "aria-colindextext"?: string | undefined | undefined;
55
+ "aria-colspan"?: number | undefined | undefined;
56
+ "aria-controls"?: string | undefined | undefined;
57
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
58
+ "aria-describedby"?: string | undefined | undefined;
59
+ "aria-description"?: string | undefined | undefined;
60
+ "aria-details"?: string | undefined | undefined;
61
+ "aria-disabled": (boolean | "true" | "false") | undefined;
62
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
63
+ "aria-errormessage"?: string | undefined | undefined;
64
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
65
+ "aria-flowto"?: string | undefined | undefined;
66
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
67
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
68
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
69
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
70
+ "aria-keyshortcuts"?: string | undefined | undefined;
71
+ "aria-label"?: string | undefined | undefined;
72
+ "aria-labelledby"?: string | undefined | undefined;
73
+ "aria-level"?: number | undefined | undefined;
74
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
75
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
76
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
77
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
78
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
79
+ "aria-owns"?: string | undefined | undefined;
80
+ "aria-placeholder"?: string | undefined | undefined;
81
+ "aria-posinset"?: number | undefined | undefined;
82
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
83
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
84
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
85
+ "aria-required"?: (boolean | "true" | "false") | undefined;
86
+ "aria-roledescription"?: string | undefined | undefined;
87
+ "aria-rowcount"?: number | undefined | undefined;
88
+ "aria-rowindex"?: number | undefined | undefined;
89
+ "aria-rowindextext"?: string | undefined | undefined;
90
+ "aria-rowspan"?: number | undefined | undefined;
91
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
92
+ "aria-setsize"?: number | undefined | undefined;
93
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
94
+ "aria-valuemax"?: number | undefined | undefined;
95
+ "aria-valuemin"?: number | undefined | undefined;
96
+ "aria-valuenow"?: number | undefined | undefined;
97
+ "aria-valuetext"?: string | undefined | undefined;
98
+ dangerouslySetInnerHTML?: {
99
+ __html: string | TrustedHTML;
100
+ } | undefined | undefined;
101
+ onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
102
+ onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
103
+ onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
104
+ onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
105
+ onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
106
+ onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
107
+ onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
108
+ onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
109
+ onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
110
+ onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
111
+ onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
112
+ onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
113
+ onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
114
+ onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
115
+ onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
116
+ onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
117
+ onChange?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
118
+ onChangeCapture?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
119
+ onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
120
+ onBeforeInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
121
+ onInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
122
+ onInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
123
+ onReset?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
124
+ onResetCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
125
+ onSubmit?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
126
+ onSubmitCapture?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
127
+ onInvalid?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
128
+ onInvalidCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
129
+ onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
130
+ onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
131
+ onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
132
+ onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
133
+ onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
134
+ onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
135
+ onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
136
+ onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
137
+ onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
138
+ onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
139
+ onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
140
+ onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
141
+ onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
142
+ onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
143
+ onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
144
+ onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
145
+ onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
146
+ onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
147
+ onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
148
+ onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
149
+ onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
150
+ onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
151
+ onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
152
+ onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
153
+ onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
154
+ onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
155
+ onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
156
+ onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
157
+ onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
158
+ onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
159
+ onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
160
+ onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
161
+ onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
162
+ onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
163
+ onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
164
+ onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
165
+ onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
166
+ onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
167
+ onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
168
+ onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
169
+ onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
170
+ onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
171
+ onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
172
+ onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
173
+ onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
174
+ onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
175
+ onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
176
+ onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
177
+ onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
178
+ onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
179
+ onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
180
+ onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
181
+ onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
182
+ onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
183
+ onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
184
+ onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
185
+ onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
186
+ onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
187
+ onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
188
+ onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
189
+ onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
190
+ onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
191
+ onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
192
+ onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
193
+ onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
194
+ onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
195
+ onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
196
+ onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
197
+ onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
198
+ onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
199
+ onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
200
+ onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
201
+ onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
202
+ onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
203
+ onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
204
+ onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
205
+ onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
206
+ onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
207
+ onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
208
+ onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
209
+ onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
210
+ onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
211
+ onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
212
+ onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
213
+ onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
214
+ onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
215
+ onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
216
+ onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
217
+ onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
218
+ onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
219
+ onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
220
+ onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
221
+ onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
222
+ onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
223
+ onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
224
+ onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
225
+ onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
226
+ onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
227
+ onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
228
+ onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
229
+ onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
230
+ onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
231
+ onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
232
+ onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
233
+ onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
234
+ onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
235
+ onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
236
+ onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
237
+ onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
238
+ onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
239
+ onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
240
+ onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
241
+ onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
242
+ onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
243
+ onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
244
+ onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
245
+ onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
246
+ onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
247
+ onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
248
+ onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
249
+ onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
250
+ onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
251
+ onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
252
+ onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
253
+ onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
254
+ onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
255
+ onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
256
+ onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
257
+ onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
258
+ onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
259
+ onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
260
+ onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
261
+ onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
262
+ onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
263
+ onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
264
+ onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
265
+ onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
266
+ onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
267
+ onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
268
+ onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
269
+ key?: import("react").Key | null | undefined;
270
+ defaultChecked?: boolean | undefined | undefined;
271
+ defaultValue?: string | number | readonly string[] | undefined;
272
+ suppressContentEditableWarning?: boolean | undefined | undefined;
273
+ accessKey?: string | undefined | undefined;
274
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
275
+ autoFocus?: boolean | undefined | undefined;
276
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
277
+ contextMenu?: string | undefined | undefined;
278
+ dir?: string | undefined | undefined;
279
+ draggable?: (boolean | "true" | "false") | undefined;
280
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
281
+ hidden?: boolean | undefined | undefined;
282
+ spellCheck?: (boolean | "true" | "false") | undefined;
283
+ translate?: "yes" | "no" | undefined | undefined;
284
+ radioGroup?: string | undefined | undefined;
285
+ about?: string | undefined | undefined;
286
+ content?: string | undefined | undefined;
287
+ datatype?: string | undefined | undefined;
288
+ inlist?: any;
289
+ prefix?: string | undefined | undefined;
290
+ property?: string | undefined | undefined;
291
+ rel?: string | undefined | undefined;
292
+ resource?: string | undefined | undefined;
293
+ rev?: string | undefined | undefined;
294
+ typeof?: string | undefined | undefined;
295
+ vocab?: string | undefined | undefined;
296
+ autoCorrect?: string | undefined | undefined;
297
+ autoSave?: string | undefined | undefined;
298
+ itemProp?: string | undefined | undefined;
299
+ itemScope?: boolean | undefined | undefined;
300
+ itemType?: string | undefined | undefined;
301
+ itemID?: string | undefined | undefined;
302
+ itemRef?: string | undefined | undefined;
303
+ results?: number | undefined | undefined;
304
+ security?: string | undefined | undefined;
305
+ unselectable?: "on" | "off" | undefined | undefined;
306
+ popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
307
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
308
+ popoverTarget?: string | undefined | undefined;
309
+ inert?: boolean | undefined | undefined;
310
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
311
+ is?: string | undefined | undefined;
312
+ exportparts?: string | undefined | undefined;
313
+ href: string | undefined;
314
+ className: string;
315
+ }, HTMLElement>;
316
+ export interface RowsProps extends ComponentPropsWithoutRef<'div'> {
317
+ }
318
+ /** Rows — a list of Rows separated by hairlines. */
319
+ export declare function Rows({ className, ...rest }: RowsProps): import("react").JSX.Element;
@@ -0,0 +1,17 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { createElement } from 'react';
3
+ import { cx } from '../cx';
4
+ import { Icon } from '../type/Icon';
5
+ /**
6
+ * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
7
+ * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
8
+ * `done` is the checklist's finished line: ticked, muted, not tappable any more.
9
+ */
10
+ export function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, flush, done, as, href, className, children, ...rest }) {
11
+ const el = as ?? (href ? 'a' : 'div');
12
+ return createElement(el, { href, className: cx('row', lg && 'row--lg', flush && 'row--flush', done && 'row--done', className), 'aria-disabled': done || undefined, ...rest }, leadIcon ? _jsx("span", { className: "row__lead", children: _jsx(Icon, { name: leadIcon }) }) : lead, (title != null || meta != null || body != null) && (_jsxs("div", { className: "row__body", children: [title != null && _jsx("span", { className: "row__title", children: title }), meta != null && _jsx("span", { className: "row__meta", children: meta }), body] })), children, (endValue != null || endCaption != null) && (_jsxs("span", { className: "row__end", children: [endValue != null && _jsx("span", { className: "t-title", children: endValue }), endCaption != null && _jsx("span", { className: "t-caption t-muted", children: endCaption })] })), end, done && _jsx("span", { className: "row__done", children: _jsx(Icon, { name: "check", size: "sm" }) }));
13
+ }
14
+ /** Rows — a list of Rows separated by hairlines. */
15
+ export function Rows({ className, ...rest }) {
16
+ return _jsx("div", { className: cx('rows', className), ...rest });
17
+ }
@@ -0,0 +1,11 @@
1
+ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ export interface TimelineProps extends ComponentPropsWithoutRef<'ol'> {
3
+ }
4
+ /** Timeline — a hairline with accent dots, date marks and entries to the right; children are TimelineItems. */
5
+ export declare function Timeline({ className, ...rest }: TimelineProps): import("react").JSX.Element;
6
+ export interface TimelineItemProps extends ComponentPropsWithoutRef<'li'> {
7
+ /** the date chip ("Wed 14") */
8
+ mark: ReactNode;
9
+ }
10
+ /** TimelineItem — a mark and its entry (body text, a Row, a `Card sm`). */
11
+ export declare function TimelineItem({ mark, className, children, ...rest }: TimelineItemProps): import("react").JSX.Element;
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { cx } from '../cx';
3
+ /** Timeline — a hairline with accent dots, date marks and entries to the right; children are TimelineItems. */
4
+ export function Timeline({ className, ...rest }) {
5
+ return _jsx("ol", { className: cx('timeline', className), ...rest });
6
+ }
7
+ /** TimelineItem — a mark and its entry (body text, a Row, a `Card sm`). */
8
+ export function TimelineItem({ mark, className, children, ...rest }) {
9
+ return (_jsxs("li", { className: cx('timeline__item', className), ...rest, children: [_jsx("span", { className: "timeline__mark", children: mark }), children] }));
10
+ }
@@ -0,0 +1,20 @@
1
+ import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
2
+ export interface MapAreaProps extends ComponentPropsWithoutRef<'div'> {
3
+ /** the words over the map, under the bar's line */
4
+ hint?: ReactNode;
5
+ /** the tile provider's credit, bottom right (OSM requires it) — a caption, never the engine's own control */
6
+ credit?: ReactNode;
7
+ /** the accessible name of the ring (what the centre means) */
8
+ ringLabel?: string;
9
+ /** the ring element — the engine reads its position to know which point is the choice */
10
+ ringRef?: Ref<HTMLSpanElement>;
11
+ /** the map engine's mount — ONE element, filled to the box (the app hands it to Leaflet or the like) */
12
+ children?: ReactNode;
13
+ }
14
+ /**
15
+ * MapArea — the box a map engine draws in, behind a stage sheet: the child is the engine's mount and fills it;
16
+ * before tiles arrive (or offline) the box shows the wireframe street pattern, never a hole. The ring marks the
17
+ * rough area being chosen and stays where the CSS puts it (centred in the band a half sheet leaves open) —
18
+ * dragging the map underneath is the choice, never a pin; `ringRef` is how the engine learns where that is.
19
+ */
20
+ export declare function MapArea({ hint, credit, ringLabel, ringRef, className, children, ...rest }: MapAreaProps): import("react").JSX.Element;
@@ -0,0 +1,11 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { cx } from '../cx';
3
+ /**
4
+ * MapArea — the box a map engine draws in, behind a stage sheet: the child is the engine's mount and fills it;
5
+ * before tiles arrive (or offline) the box shows the wireframe street pattern, never a hole. The ring marks the
6
+ * rough area being chosen and stays where the CSS puts it (centred in the band a half sheet leaves open) —
7
+ * dragging the map underneath is the choice, never a pin; `ringRef` is how the engine learns where that is.
8
+ */
9
+ export function MapArea({ hint, credit, ringLabel = 'ย่านของคุณโดยประมาณ', ringRef, className, children, ...rest }) {
10
+ return (_jsxs("div", { className: cx('map', className), ...rest, children: [children, _jsx("span", { ref: ringRef, className: "map__ring", role: "img", "aria-label": ringLabel }), hint != null && _jsx("span", { className: "map__hint", children: hint }), credit != null && _jsx("span", { className: "map__credit", children: credit })] }));
11
+ }
@@ -0,0 +1,11 @@
1
+ import type { ComponentPropsWithoutRef } from 'react';
2
+ export interface MosaicProps extends ComponentPropsWithoutRef<'div'> {
3
+ label?: string;
4
+ }
5
+ /** Mosaic — one big photo + two small in a card (three Placeholders or imgs). */
6
+ export declare function Mosaic({ label, className, ...rest }: MosaicProps): import("react").JSX.Element;
7
+ export interface WaveProps extends ComponentPropsWithoutRef<'span'> {
8
+ label?: string;
9
+ }
10
+ /** Wave — the waveform stand-in for a voice note, filling a Row's body. */
11
+ export declare function Wave({ label, className, ...rest }: WaveProps): import("react").JSX.Element;
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cx } from '../cx';
3
+ /** Mosaic — one big photo + two small in a card (three Placeholders or imgs). */
4
+ export function Mosaic({ label = 'Photos', className, ...rest }) {
5
+ return _jsx("div", { className: cx('mosaic', className), role: "img", "aria-label": label, ...rest });
6
+ }
7
+ /** Wave — the waveform stand-in for a voice note, filling a Row's body. */
8
+ export function Wave({ label = 'Voice note', className, ...rest }) {
9
+ return _jsx("span", { className: cx('wave', className), role: "img", "aria-label": label, ...rest });
10
+ }
@@ -0,0 +1,20 @@
1
+ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ export interface PostcardProps extends ComponentPropsWithoutRef<'div'> {
3
+ /** the photo on the front; none = the wireframe box */
4
+ photo?: string | null;
5
+ alt?: string;
6
+ /** whose card it is — printed on both faces */
7
+ name: ReactNode;
8
+ /** the words on the back */
9
+ caption?: ReactNode;
10
+ /** start turned over */
11
+ flipped?: boolean;
12
+ frontLabel?: string;
13
+ backLabel?: string;
14
+ }
15
+ /**
16
+ * Postcard — a member's introduction as a card in the hand: the photo (or the wireframe box) with the name in front,
17
+ * the caption on the back; a tap on either face turns it over (cardds.js toggles `is-flipped`, `--motion-flip`).
18
+ * A voice note, a like, a reply go OUTSIDE it, in a Row under it — a face is a button and holds no button.
19
+ */
20
+ export declare function Postcard({ photo, alt, name, caption, flipped, frontLabel, backLabel, className, ...rest }: PostcardProps): import("react").JSX.Element;
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { cx } from '../cx';
3
+ /**
4
+ * Postcard — a member's introduction as a card in the hand: the photo (or the wireframe box) with the name in front,
5
+ * the caption on the back; a tap on either face turns it over (cardds.js toggles `is-flipped`, `--motion-flip`).
6
+ * A voice note, a like, a reply go OUTSIDE it, in a Row under it — a face is a button and holds no button.
7
+ */
8
+ export function Postcard({ photo, alt = '', name, caption, flipped, frontLabel = 'พลิกดูด้านหลัง', backLabel = 'พลิกดูด้านหน้า', className, ...rest }) {
9
+ return (_jsxs("div", { className: cx('postcard', flipped && 'is-flipped', className), ...rest, children: [_jsxs("button", { className: "postcard__face postcard__front", type: "button", "aria-label": frontLabel, children: [photo ? _jsx("img", { src: photo, alt: alt }) : alt ? _jsx("div", { className: "ph", role: "img", "aria-label": alt }) : _jsx("div", { className: "ph" }), _jsx("span", { className: "postcard__label", children: name })] }), _jsxs("button", { className: "postcard__face postcard__back", type: "button", "aria-label": backLabel, children: [caption != null && _jsx("p", { className: "postcard__caption", children: caption }), _jsx("span", { className: "postcard__label", children: name })] })] }));
10
+ }
@@ -0,0 +1,11 @@
1
+ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ export interface QuoteProps extends ComponentPropsWithoutRef<'blockquote'> {
3
+ /** the words */
4
+ text: ReactNode;
5
+ /** the attribution */
6
+ by?: ReactNode;
7
+ /** h2-size text instead of h1 */
8
+ sm?: boolean;
9
+ }
10
+ /** Quote — a giant opening mark, big text, an overline attribution. */
11
+ export declare function Quote({ text, by, sm, className, ...rest }: QuoteProps): import("react").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { cx } from '../cx';
3
+ /** Quote — a giant opening mark, big text, an overline attribution. */
4
+ export function Quote({ text, by, sm, className, ...rest }) {
5
+ return (_jsxs("blockquote", { className: cx('quote', sm && 'quote--sm', className), ...rest, children: [_jsx("p", { className: "quote__text", children: text }), by != null && _jsx("footer", { className: "quote__by", children: by })] }));
6
+ }