@idealyst/mcp-server 1.0.86 → 1.0.88

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 (205) hide show
  1. package/ARCHITECTURE.md +313 -0
  2. package/README.md +292 -104
  3. package/TYPE-SYSTEM.md +397 -0
  4. package/dist/index.js +170 -1
  5. package/examples/components/Accordion.examples.tsx +147 -0
  6. package/examples/components/ActivityIndicator.examples.tsx +350 -0
  7. package/examples/components/Alert.examples.tsx +335 -0
  8. package/examples/components/Avatar.examples.tsx +188 -0
  9. package/examples/components/Badge.examples.tsx +242 -0
  10. package/examples/components/Breadcrumb.examples.tsx +303 -0
  11. package/examples/components/Button.examples.tsx +113 -0
  12. package/examples/components/Card.examples.tsx +131 -0
  13. package/examples/components/Checkbox.examples.tsx +195 -0
  14. package/examples/components/Chip.examples.tsx +87 -0
  15. package/examples/components/Dialog.examples.tsx +344 -0
  16. package/examples/components/Divider.examples.tsx +258 -0
  17. package/examples/components/Icon.examples.tsx +202 -0
  18. package/examples/components/Input.examples.tsx +205 -0
  19. package/examples/components/Menu.examples.tsx +321 -0
  20. package/examples/components/Popover.examples.tsx +439 -0
  21. package/examples/components/Progress.examples.tsx +340 -0
  22. package/examples/components/RadioButton.examples.tsx +443 -0
  23. package/examples/components/Screen.examples.tsx +347 -0
  24. package/examples/components/Select.examples.tsx +279 -0
  25. package/examples/components/Skeleton.examples.tsx +278 -0
  26. package/examples/components/Slider.examples.tsx +249 -0
  27. package/examples/components/Switch.examples.tsx +94 -0
  28. package/examples/components/TabBar.examples.tsx +356 -0
  29. package/examples/components/Text.examples.tsx +177 -0
  30. package/examples/components/TextArea.examples.tsx +203 -0
  31. package/examples/components/Tooltip.examples.tsx +318 -0
  32. package/examples/components/View.examples.tsx +307 -0
  33. package/package.json +15 -2
  34. package/scripts/extract-types.ts +71 -0
  35. package/scripts/type-extractor.ts +286 -0
  36. package/scripts/validate-examples.ts +142 -0
  37. package/src/data/components/Icon.ts +1 -1
  38. package/src/data/components/index.ts +2 -0
  39. package/src/index.ts +181 -1
  40. package/src/tools/get-types.ts +169 -0
  41. package/tsconfig.examples.json +14 -0
  42. package/dist/data/cli-commands.d.ts +0 -2
  43. package/dist/data/cli-commands.d.ts.map +0 -1
  44. package/dist/data/cli-commands.js +0 -100
  45. package/dist/data/cli-commands.js.map +0 -1
  46. package/dist/data/components/Accordion.d.ts +0 -15
  47. package/dist/data/components/Accordion.d.ts.map +0 -1
  48. package/dist/data/components/Accordion.js +0 -112
  49. package/dist/data/components/Accordion.js.map +0 -1
  50. package/dist/data/components/ActivityIndicator.d.ts +0 -15
  51. package/dist/data/components/ActivityIndicator.d.ts.map +0 -1
  52. package/dist/data/components/ActivityIndicator.js +0 -82
  53. package/dist/data/components/ActivityIndicator.js.map +0 -1
  54. package/dist/data/components/Alert.d.ts +0 -15
  55. package/dist/data/components/Alert.d.ts.map +0 -1
  56. package/dist/data/components/Alert.js +0 -132
  57. package/dist/data/components/Alert.js.map +0 -1
  58. package/dist/data/components/Avatar.d.ts +0 -15
  59. package/dist/data/components/Avatar.d.ts.map +0 -1
  60. package/dist/data/components/Avatar.js +0 -93
  61. package/dist/data/components/Avatar.js.map +0 -1
  62. package/dist/data/components/Badge.d.ts +0 -15
  63. package/dist/data/components/Badge.d.ts.map +0 -1
  64. package/dist/data/components/Badge.js +0 -64
  65. package/dist/data/components/Badge.js.map +0 -1
  66. package/dist/data/components/Breadcrumb.d.ts +0 -15
  67. package/dist/data/components/Breadcrumb.d.ts.map +0 -1
  68. package/dist/data/components/Breadcrumb.js +0 -96
  69. package/dist/data/components/Breadcrumb.js.map +0 -1
  70. package/dist/data/components/Button.d.ts +0 -15
  71. package/dist/data/components/Button.d.ts.map +0 -1
  72. package/dist/data/components/Button.js +0 -87
  73. package/dist/data/components/Button.js.map +0 -1
  74. package/dist/data/components/Card.d.ts +0 -15
  75. package/dist/data/components/Card.d.ts.map +0 -1
  76. package/dist/data/components/Card.js +0 -67
  77. package/dist/data/components/Card.js.map +0 -1
  78. package/dist/data/components/Checkbox.d.ts +0 -15
  79. package/dist/data/components/Checkbox.d.ts.map +0 -1
  80. package/dist/data/components/Checkbox.js +0 -118
  81. package/dist/data/components/Checkbox.js.map +0 -1
  82. package/dist/data/components/Chip.d.ts +0 -15
  83. package/dist/data/components/Chip.d.ts.map +0 -1
  84. package/dist/data/components/Chip.js +0 -76
  85. package/dist/data/components/Chip.js.map +0 -1
  86. package/dist/data/components/Dialog.d.ts +0 -15
  87. package/dist/data/components/Dialog.d.ts.map +0 -1
  88. package/dist/data/components/Dialog.js +0 -137
  89. package/dist/data/components/Dialog.js.map +0 -1
  90. package/dist/data/components/Divider.d.ts +0 -15
  91. package/dist/data/components/Divider.d.ts.map +0 -1
  92. package/dist/data/components/Divider.js +0 -71
  93. package/dist/data/components/Divider.js.map +0 -1
  94. package/dist/data/components/Icon.d.ts +0 -15
  95. package/dist/data/components/Icon.d.ts.map +0 -1
  96. package/dist/data/components/Icon.js +0 -70
  97. package/dist/data/components/Icon.js.map +0 -1
  98. package/dist/data/components/Image.d.ts +0 -15
  99. package/dist/data/components/Image.d.ts.map +0 -1
  100. package/dist/data/components/Image.js +0 -122
  101. package/dist/data/components/Image.js.map +0 -1
  102. package/dist/data/components/Input.d.ts +0 -15
  103. package/dist/data/components/Input.d.ts.map +0 -1
  104. package/dist/data/components/Input.js +0 -109
  105. package/dist/data/components/Input.js.map +0 -1
  106. package/dist/data/components/List.d.ts +0 -15
  107. package/dist/data/components/List.d.ts.map +0 -1
  108. package/dist/data/components/List.js +0 -113
  109. package/dist/data/components/List.js.map +0 -1
  110. package/dist/data/components/Menu.d.ts +0 -15
  111. package/dist/data/components/Menu.d.ts.map +0 -1
  112. package/dist/data/components/Menu.js +0 -132
  113. package/dist/data/components/Menu.js.map +0 -1
  114. package/dist/data/components/Popover.d.ts +0 -15
  115. package/dist/data/components/Popover.d.ts.map +0 -1
  116. package/dist/data/components/Popover.js +0 -159
  117. package/dist/data/components/Popover.js.map +0 -1
  118. package/dist/data/components/Pressable.d.ts +0 -15
  119. package/dist/data/components/Pressable.d.ts.map +0 -1
  120. package/dist/data/components/Pressable.js +0 -125
  121. package/dist/data/components/Pressable.js.map +0 -1
  122. package/dist/data/components/Progress.d.ts +0 -15
  123. package/dist/data/components/Progress.d.ts.map +0 -1
  124. package/dist/data/components/Progress.js +0 -95
  125. package/dist/data/components/Progress.js.map +0 -1
  126. package/dist/data/components/RadioButton.d.ts +0 -15
  127. package/dist/data/components/RadioButton.d.ts.map +0 -1
  128. package/dist/data/components/RadioButton.js +0 -140
  129. package/dist/data/components/RadioButton.js.map +0 -1
  130. package/dist/data/components/SVGImage.d.ts +0 -15
  131. package/dist/data/components/SVGImage.d.ts.map +0 -1
  132. package/dist/data/components/SVGImage.js +0 -112
  133. package/dist/data/components/SVGImage.js.map +0 -1
  134. package/dist/data/components/Screen.d.ts +0 -15
  135. package/dist/data/components/Screen.d.ts.map +0 -1
  136. package/dist/data/components/Screen.js +0 -99
  137. package/dist/data/components/Screen.js.map +0 -1
  138. package/dist/data/components/Select.d.ts +0 -15
  139. package/dist/data/components/Select.d.ts.map +0 -1
  140. package/dist/data/components/Select.js +0 -146
  141. package/dist/data/components/Select.js.map +0 -1
  142. package/dist/data/components/Skeleton.d.ts +0 -15
  143. package/dist/data/components/Skeleton.d.ts.map +0 -1
  144. package/dist/data/components/Skeleton.js +0 -110
  145. package/dist/data/components/Skeleton.js.map +0 -1
  146. package/dist/data/components/Slider.d.ts +0 -15
  147. package/dist/data/components/Slider.d.ts.map +0 -1
  148. package/dist/data/components/Slider.js +0 -129
  149. package/dist/data/components/Slider.js.map +0 -1
  150. package/dist/data/components/Switch.d.ts +0 -15
  151. package/dist/data/components/Switch.d.ts.map +0 -1
  152. package/dist/data/components/Switch.js +0 -127
  153. package/dist/data/components/Switch.js.map +0 -1
  154. package/dist/data/components/TabBar.d.ts +0 -15
  155. package/dist/data/components/TabBar.d.ts.map +0 -1
  156. package/dist/data/components/TabBar.js +0 -145
  157. package/dist/data/components/TabBar.js.map +0 -1
  158. package/dist/data/components/Table.d.ts +0 -15
  159. package/dist/data/components/Table.d.ts.map +0 -1
  160. package/dist/data/components/Table.js +0 -151
  161. package/dist/data/components/Table.js.map +0 -1
  162. package/dist/data/components/Tabs.d.ts +0 -15
  163. package/dist/data/components/Tabs.d.ts.map +0 -1
  164. package/dist/data/components/Tabs.js +0 -150
  165. package/dist/data/components/Tabs.js.map +0 -1
  166. package/dist/data/components/Text.d.ts +0 -15
  167. package/dist/data/components/Text.d.ts.map +0 -1
  168. package/dist/data/components/Text.js +0 -85
  169. package/dist/data/components/Text.js.map +0 -1
  170. package/dist/data/components/TextArea.d.ts +0 -15
  171. package/dist/data/components/TextArea.d.ts.map +0 -1
  172. package/dist/data/components/TextArea.js +0 -155
  173. package/dist/data/components/TextArea.js.map +0 -1
  174. package/dist/data/components/Tooltip.d.ts +0 -15
  175. package/dist/data/components/Tooltip.d.ts.map +0 -1
  176. package/dist/data/components/Tooltip.js +0 -105
  177. package/dist/data/components/Tooltip.js.map +0 -1
  178. package/dist/data/components/Video.d.ts +0 -15
  179. package/dist/data/components/Video.d.ts.map +0 -1
  180. package/dist/data/components/Video.js +0 -168
  181. package/dist/data/components/Video.js.map +0 -1
  182. package/dist/data/components/View.d.ts +0 -15
  183. package/dist/data/components/View.d.ts.map +0 -1
  184. package/dist/data/components/View.js +0 -126
  185. package/dist/data/components/View.js.map +0 -1
  186. package/dist/data/components/index.d.ts +0 -37
  187. package/dist/data/components/index.d.ts.map +0 -1
  188. package/dist/data/components/index.js +0 -110
  189. package/dist/data/components/index.js.map +0 -1
  190. package/dist/data/framework-guides.d.ts +0 -2
  191. package/dist/data/framework-guides.d.ts.map +0 -1
  192. package/dist/data/framework-guides.js +0 -589
  193. package/dist/data/framework-guides.js.map +0 -1
  194. package/dist/data/icon-guide.d.ts +0 -2
  195. package/dist/data/icon-guide.d.ts.map +0 -1
  196. package/dist/data/icon-guide.js +0 -285
  197. package/dist/data/icon-guide.js.map +0 -1
  198. package/dist/data/icons.json +0 -7452
  199. package/dist/data/navigation-guides.d.ts +0 -2
  200. package/dist/data/navigation-guides.d.ts.map +0 -1
  201. package/dist/data/navigation-guides.js +0 -1196
  202. package/dist/data/navigation-guides.js.map +0 -1
  203. package/dist/index.d.ts +0 -3
  204. package/dist/index.d.ts.map +0 -1
  205. package/dist/index.js.map +0 -1
@@ -1,113 +0,0 @@
1
- export const List = {
2
- category: "display",
3
- description: "Vertical list container with support for sections, icons, and interactive items",
4
- props: `
5
- List Props:
6
- - \`variant\`: 'default' | 'bordered' | 'divided' - Visual style
7
- - \`size\`: 'small' | 'medium' | 'large' - Item size
8
- - \`children\`: ListItem | ListSection - List content
9
-
10
- ListItem Props:
11
- - \`label\`: string - Item label text
12
- - \`leading\`: string | ReactNode - Leading icon or element
13
- - \`trailing\`: string | ReactNode - Trailing icon or element
14
- - \`selected\`: boolean - Selected state
15
- - \`active\`: boolean - Active state
16
- - \`disabled\`: boolean - Disabled state
17
- - \`indent\`: number - Indentation level
18
- - \`onPress\`: () => void - Press handler
19
- `,
20
- features: [
21
- "Three visual variants",
22
- "Configurable item sizes",
23
- "Leading and trailing elements (icons, badges, etc.)",
24
- "Selected and active states",
25
- "Section grouping with titles",
26
- "Indentation for hierarchy",
27
- "Icon support via string names",
28
- ],
29
- bestPractices: [
30
- "Use sections to organize related items",
31
- "Use leading icons for visual categorization",
32
- "Use trailing elements for metadata or actions",
33
- "Keep list items concise and scannable",
34
- ],
35
- usage: `
36
- import { List, ListItem, ListSection } from '@idealyst/components';
37
-
38
- <List variant="bordered">
39
- <ListSection title="Main">
40
- <ListItem
41
- label="Dashboard"
42
- leading="home"
43
- onPress={() => navigate('/dashboard')}
44
- />
45
- <ListItem
46
- label="Settings"
47
- leading="cog"
48
- onPress={() => navigate('/settings')}
49
- />
50
- </ListSection>
51
- </List>
52
- `,
53
- examples: {
54
- basic: `import { List, ListItem } from '@idealyst/components';
55
-
56
- <List variant="divided">
57
- <ListItem label="Item 1" />
58
- <ListItem label="Item 2" />
59
- <ListItem label="Item 3" />
60
- </List>`,
61
- variants: `import { List, ListItem } from '@idealyst/components';
62
-
63
- <List variant="default">
64
- <ListItem label="Default" />
65
- </List>
66
-
67
- <List variant="bordered">
68
- <ListItem label="Bordered" />
69
- </List>
70
-
71
- <List variant="divided">
72
- <ListItem label="Divided" />
73
- </List>`,
74
- "with-icons": `import { List, ListItem, Badge } from '@idealyst/components';
75
-
76
- <List variant="bordered">
77
- <ListItem
78
- label="Notifications"
79
- leading="bell"
80
- trailing={<Badge>3</Badge>}
81
- />
82
- <ListItem
83
- label="Messages"
84
- leading="email"
85
- trailing={<Badge>12</Badge>}
86
- />
87
- </List>`,
88
- interactive: `import { List, ListItem } from '@idealyst/components';
89
- import { useState } from 'react';
90
-
91
- function Example() {
92
- const [selected, setSelected] = useState('home');
93
-
94
- return (
95
- <List variant="bordered">
96
- <ListItem
97
- label="Home"
98
- leading="home"
99
- selected={selected === 'home'}
100
- onPress={() => setSelected('home')}
101
- />
102
- <ListItem
103
- label="Profile"
104
- leading="account"
105
- selected={selected === 'profile'}
106
- onPress={() => setSelected('profile')}
107
- />
108
- </List>
109
- );
110
- }`,
111
- }
112
- };
113
- //# sourceMappingURL=List.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/data/components/List.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IACpB,QAAQ,EAAE,SAAS;IACf,WAAW,EAAE,iFAAiF;IAC9F,KAAK,EAAE;;;;;;;;;;;;;;;CAeV;IACG,QAAQ,EAAE;QACR,uBAAuB;QACvB,yBAAyB;QACzB,qDAAqD;QACrD,4BAA4B;QAC5B,8BAA8B;QAC9B,2BAA2B;QAC3B,+BAA+B;KAChC;IACD,aAAa,EAAE;QACb,wCAAwC;QACxC,6CAA6C;QAC7C,+CAA+C;QAC/C,uCAAuC;KACxC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;QAML;QACF,QAAQ,EAAE;;;;;;;;;;;;QAYR;QACF,YAAY,EAAE;;;;;;;;;;;;;QAaZ;QACF,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBjB;KACG;CACJ,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Menu: {
2
- category: string;
3
- description: string;
4
- props: string;
5
- features: string[];
6
- bestPractices: string[];
7
- usage: string;
8
- examples: {
9
- basic: string;
10
- variants: string;
11
- "with-icons": string;
12
- interactive: string;
13
- };
14
- };
15
- //# sourceMappingURL=Menu.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/data/components/Menu.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAqIhB,CAAC"}
@@ -1,132 +0,0 @@
1
- export const Menu = {
2
- category: "overlay",
3
- description: "Contextual menu with list of actions, typically triggered by a button or other element",
4
- props: `
5
- - \`items\`: MenuItem[] - Array of menu items
6
- - \`id\`: string - Unique identifier
7
- - \`label\`: string - Menu item label
8
- - \`onClick\`: () => void - Click handler
9
- - \`disabled\`: boolean - Whether item is disabled
10
- - \`icon\`: IconName | ReactNode - Icon (string name or custom element)
11
- - \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
12
- - \`separator\`: boolean - Show separator after this item
13
- - \`open\`: boolean - Whether menu is open
14
- - \`onOpenChange\`: (open: boolean) => void - Open state change handler
15
- - \`anchor\`: React.RefObject<HTMLElement> - Anchor element to position menu
16
- - \`placement\`: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right' - Menu placement
17
- - \`closeOnSelection\`: boolean - Close menu when item selected (default: true)
18
- - \`size\`: 'small' | 'medium' | 'large' - Menu item size
19
- - \`style\`: ViewStyle - Additional custom styles
20
- - \`testID\`: string - Test identifier
21
- `,
22
- features: [
23
- "Icon support for menu items",
24
- "Intent colors for items",
25
- "Separators between items",
26
- "Disabled items",
27
- "Multiple placement options",
28
- "Auto-close on selection",
29
- "Three size options",
30
- ],
31
- bestPractices: [
32
- "Use separators to group related actions",
33
- "Place destructive actions at the bottom with error intent",
34
- "Keep menu items concise (1-3 words)",
35
- "Use icons for visual scanning",
36
- "Close menu after action unless multi-select",
37
- ],
38
- usage: `
39
- import { Menu, Button } from '@idealyst/components';
40
- import { useState, useRef } from 'react';
41
-
42
- function Example() {
43
- const [open, setOpen] = useState(false);
44
- const buttonRef = useRef(null);
45
-
46
- const items = [
47
- { id: '1', label: 'Edit', icon: 'pencil', onClick: () => handleEdit() },
48
- { id: '2', label: 'Duplicate', icon: 'content-copy', onClick: () => handleDuplicate() },
49
- { id: '3', label: 'Delete', icon: 'delete', intent: 'error', onClick: () => handleDelete(), separator: true },
50
- ];
51
-
52
- return (
53
- <>
54
- <div ref={buttonRef}>
55
- <Button onPress={() => setOpen(true)}>Actions</Button>
56
- </div>
57
- <Menu
58
- items={items}
59
- open={open}
60
- onOpenChange={setOpen}
61
- anchor={buttonRef}
62
- placement="bottom-start"
63
- />
64
- </>
65
- );
66
- }
67
- `,
68
- examples: {
69
- basic: `import { Menu, Button } from '@idealyst/components';
70
- import { useRef, useState } from 'react';
71
-
72
- const buttonRef = useRef(null);
73
- const [open, setOpen] = useState(false);
74
-
75
- const items = [
76
- { id: '1', label: 'Option 1', onClick: () => console.log('1') },
77
- { id: '2', label: 'Option 2', onClick: () => console.log('2') },
78
- ];
79
-
80
- <div ref={buttonRef}>
81
- <Button onPress={() => setOpen(true)}>Menu</Button>
82
- </div>
83
- <Menu items={items} open={open} onOpenChange={setOpen} anchor={buttonRef} />`,
84
- variants: `import { Menu } from '@idealyst/components';
85
-
86
- // Different sizes
87
- <Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="small" />
88
- <Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="medium" />
89
- <Menu items={items} open={open} onOpenChange={setOpen} anchor={ref} size="large" />`,
90
- "with-icons": `import { Menu, Button } from '@idealyst/components';
91
- import { useRef, useState } from 'react';
92
-
93
- const items = [
94
- { id: '1', label: 'Profile', icon: 'account', onClick: () => navigate('/profile') },
95
- { id: '2', label: 'Settings', icon: 'cog', onClick: () => navigate('/settings') },
96
- { id: '3', label: 'Logout', icon: 'logout', intent: 'error', onClick: () => logout(), separator: true },
97
- ];
98
-
99
- <Menu items={items} open={open} onOpenChange={setOpen} anchor={buttonRef} />`,
100
- interactive: `import { Menu, Button, Text, View } from '@idealyst/components';
101
- import { useRef, useState } from 'react';
102
-
103
- function Example() {
104
- const [open, setOpen] = useState(false);
105
- const [selected, setSelected] = useState('');
106
- const buttonRef = useRef(null);
107
-
108
- const items = [
109
- { id: 'edit', label: 'Edit', icon: 'pencil', onClick: () => setSelected('edit') },
110
- { id: 'share', label: 'Share', icon: 'share', onClick: () => setSelected('share') },
111
- { id: 'delete', label: 'Delete', icon: 'delete', intent: 'error', onClick: () => setSelected('delete') },
112
- ];
113
-
114
- return (
115
- <View spacing="md">
116
- <div ref={buttonRef}>
117
- <Button onPress={() => setOpen(true)}>Actions</Button>
118
- </div>
119
- <Menu
120
- items={items}
121
- open={open}
122
- onOpenChange={setOpen}
123
- anchor={buttonRef}
124
- placement="bottom-start"
125
- />
126
- {selected && <Text>Selected: {selected}</Text>}
127
- </View>
128
- );
129
- }`,
130
- },
131
- };
132
- //# sourceMappingURL=Menu.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/data/components/Menu.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,wFAAwF;IACrG,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBR;IACC,QAAQ,EAAE;QACR,6BAA6B;QAC7B,yBAAyB;QACzB,0BAA0B;QAC1B,gBAAgB;QAChB,4BAA4B;QAC5B,yBAAyB;QACzB,oBAAoB;KACrB;IACD,aAAa,EAAE;QACb,yCAAyC;QACzC,2DAA2D;QAC3D,qCAAqC;QACrC,+BAA+B;QAC/B,6CAA6C;KAC9C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;;;;;;;6EAckE;QAEzE,QAAQ,EAAE;;;;;oFAKsE;QAEhF,YAAY,EAAE;;;;;;;;;6EAS2D;QAEzE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Bf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Popover: {
2
- category: string;
3
- description: string;
4
- props: string;
5
- features: string[];
6
- bestPractices: string[];
7
- usage: string;
8
- examples: {
9
- basic: string;
10
- variants: string;
11
- "with-icons": string;
12
- interactive: string;
13
- };
14
- };
15
- //# sourceMappingURL=Popover.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/data/components/Popover.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAgKnB,CAAC"}
@@ -1,159 +0,0 @@
1
- export const Popover = {
2
- category: "overlay",
3
- description: "Floating overlay that displays content anchored to an element, useful for tooltips, menus, and contextual information",
4
- props: `
5
- - \`open\`: boolean - Whether the popover is open/visible
6
- - \`onOpenChange\`: (open: boolean) => void - Called when popover should open/close
7
- - \`anchor\`: ReactNode | React.RefObject<Element> - Anchor element to position relative to
8
- - \`children\`: ReactNode - Content to display inside popover
9
- - \`placement\`: PopoverPlacement - Preferred placement (top, bottom, left, right with -start, -end modifiers)
10
- - \`offset\`: number - Distance from anchor element in pixels
11
- - \`closeOnClickOutside\`: boolean - Close when clicking outside (default: true)
12
- - \`closeOnEscapeKey\`: boolean - Close on Escape key press (web only, default: true)
13
- - \`showArrow\`: boolean - Show arrow pointing to anchor
14
- - \`style\`: any - Additional custom styles
15
- - \`testID\`: string - Test identifier
16
- `,
17
- features: [
18
- "12 placement options with smart positioning",
19
- "Automatic repositioning on scroll/resize",
20
- "Click outside to close",
21
- "Escape key to close (web)",
22
- "Optional arrow indicator",
23
- "Offset control",
24
- "Accessible with focus management",
25
- ],
26
- bestPractices: [
27
- "Use for contextual information that doesn't require immediate action",
28
- "Keep popover content focused and concise",
29
- "Use arrow to clearly indicate relationship to anchor",
30
- "Allow closing via click outside and Escape key",
31
- "Don't nest popovers",
32
- "Consider using Dialog for critical content",
33
- ],
34
- usage: `
35
- import { Popover, Button, View, Text } from '@idealyst/components';
36
- import { useState, useRef } from 'react';
37
-
38
- function Example() {
39
- const [open, setOpen] = useState(false);
40
- const buttonRef = useRef(null);
41
-
42
- return (
43
- <>
44
- <div ref={buttonRef}>
45
- <Button onPress={() => setOpen(true)}>Show Info</Button>
46
- </div>
47
- <Popover
48
- open={open}
49
- onOpenChange={setOpen}
50
- anchor={buttonRef}
51
- placement="bottom"
52
- showArrow
53
- >
54
- <View spacing="sm" style={{ padding: 16 }}>
55
- <Text weight="bold">Information</Text>
56
- <Text>Additional context or help text</Text>
57
- </View>
58
- </Popover>
59
- </>
60
- );
61
- }
62
- `,
63
- examples: {
64
- basic: `import { Popover, Button, Text } from '@idealyst/components';
65
- import { useState, useRef } from 'react';
66
-
67
- const [open, setOpen] = useState(false);
68
- const buttonRef = useRef(null);
69
-
70
- <div ref={buttonRef}>
71
- <Button onPress={() => setOpen(true)}>Open</Button>
72
- </div>
73
- <Popover open={open} onOpenChange={setOpen} anchor={buttonRef}>
74
- <Text>Popover content</Text>
75
- </Popover>`,
76
- variants: `import { Popover, Button, View } from '@idealyst/components';
77
-
78
- // Different placements
79
- <Popover open={open} onOpenChange={setOpen} anchor={ref} placement="top">
80
- <View>Top</View>
81
- </Popover>
82
- <Popover open={open} onOpenChange={setOpen} anchor={ref} placement="bottom-start">
83
- <View>Bottom Start</View>
84
- </Popover>
85
- <Popover open={open} onOpenChange={setOpen} anchor={ref} placement="right-end">
86
- <View>Right End</View>
87
- </Popover>`,
88
- "with-icons": `import { Popover, Button, View, Icon, Text } from '@idealyst/components';
89
- import { useState, useRef } from 'react';
90
-
91
- const buttonRef = useRef(null);
92
- const [open, setOpen] = useState(false);
93
-
94
- <div ref={buttonRef}>
95
- <Button icon="help-circle" variant="text" onPress={() => setOpen(true)} />
96
- </div>
97
- <Popover open={open} onOpenChange={setOpen} anchor={buttonRef} showArrow>
98
- <View spacing="sm" style={{ padding: 12, maxWidth: 250 }}>
99
- <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
100
- <Icon name="information" size="md" color="primary" />
101
- <Text weight="bold">Help</Text>
102
- </View>
103
- <Text size="small">This feature allows you to...</Text>
104
- </View>
105
- </Popover>`,
106
- interactive: `import { Popover, Button, View, Text, Input } from '@idealyst/components';
107
- import { useState, useRef } from 'react';
108
-
109
- function Example() {
110
- const [open, setOpen] = useState(false);
111
- const [value, setValue] = useState('');
112
- const buttonRef = useRef(null);
113
-
114
- return (
115
- <View spacing="md">
116
- <div ref={buttonRef}>
117
- <Button onPress={() => setOpen(true)}>Edit Name</Button>
118
- </div>
119
-
120
- <Popover
121
- open={open}
122
- onOpenChange={setOpen}
123
- anchor={buttonRef}
124
- placement="bottom-start"
125
- closeOnClickOutside={false}
126
- >
127
- <View spacing="md" style={{ padding: 16, minWidth: 250 }}>
128
- <Text weight="bold">Edit Name</Text>
129
- <Input
130
- value={value}
131
- onChangeText={setValue}
132
- placeholder="Enter name"
133
- />
134
- <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
135
- <Button
136
- variant="outlined"
137
- size="small"
138
- onPress={() => setOpen(false)}
139
- >
140
- Cancel
141
- </Button>
142
- <Button
143
- size="small"
144
- onPress={() => {
145
- handleSave(value);
146
- setOpen(false);
147
- }}
148
- >
149
- Save
150
- </Button>
151
- </View>
152
- </View>
153
- </Popover>
154
- </View>
155
- );
156
- }`,
157
- },
158
- };
159
- //# sourceMappingURL=Popover.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/data/components/Popover.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,uHAAuH;IACpI,KAAK,EAAE;;;;;;;;;;;;CAYR;IACC,QAAQ,EAAE;QACR,6CAA6C;QAC7C,0CAA0C;QAC1C,wBAAwB;QACxB,2BAA2B;QAC3B,0BAA0B;QAC1B,gBAAgB;QAChB,kCAAkC;KACnC;IACD,aAAa,EAAE;QACb,sEAAsE;QACtE,0CAA0C;QAC1C,sDAAsD;QACtD,gDAAgD;QAChD,qBAAqB;QACrB,4CAA4C;KAC7C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;;;;WAWA;QAEP,QAAQ,EAAE;;;;;;;;;;;WAWH;QAEP,YAAY,EAAE;;;;;;;;;;;;;;;;;WAiBP;QAEP,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Pressable: {
2
- category: string;
3
- description: string;
4
- props: string;
5
- features: string[];
6
- bestPractices: string[];
7
- usage: string;
8
- examples: {
9
- basic: string;
10
- variants: string;
11
- "with-icons": string;
12
- interactive: string;
13
- };
14
- };
15
- //# sourceMappingURL=Pressable.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../src/data/components/Pressable.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;CA8HrB,CAAC"}
@@ -1,125 +0,0 @@
1
- export const Pressable = {
2
- category: "utility",
3
- description: "Wrapper component that detects various press interactions on children",
4
- props: `
5
- - \`children\`: ReactNode - Content to render inside pressable area
6
- - \`onPress\`: () => void - Called when press gesture is activated
7
- - \`onPressIn\`: () => void - Called when press gesture starts
8
- - \`onPressOut\`: () => void - Called when press gesture ends
9
- - \`disabled\`: boolean - Whether the pressable is disabled
10
- - \`style\`: any - Additional styles to apply
11
- - \`testID\`: string - Test identifier
12
- - \`accessibilityLabel\`: string - Accessibility label for screen readers
13
- - \`accessibilityRole\`: string - Accessibility role (web)
14
- `,
15
- features: [
16
- "Press, press-in, press-out callbacks",
17
- "Disabled state",
18
- "Accessibility support",
19
- "Custom styling",
20
- "Cross-platform support",
21
- "Touch feedback",
22
- ],
23
- bestPractices: [
24
- "Use for custom interactive elements",
25
- "Prefer Button for standard button interactions",
26
- "Provide accessibilityLabel for screen readers",
27
- "Use accessibilityRole for semantic meaning",
28
- "Add visual feedback on press",
29
- "Ensure minimum 44x44px touch target",
30
- ],
31
- usage: `
32
- import { Pressable, Text, View } from '@idealyst/components';
33
-
34
- <Pressable onPress={() => console.log('Pressed')}>
35
- <View style={{ padding: 16, backgroundColor: '#f0f0f0' }}>
36
- <Text>Press me</Text>
37
- </View>
38
- </Pressable>
39
- `,
40
- examples: {
41
- basic: `import { Pressable, Text } from '@idealyst/components';
42
-
43
- <Pressable onPress={() => console.log('Pressed')}>
44
- <Text>Tap here</Text>
45
- </Pressable>`,
46
- variants: `import { Pressable, View, Text } from '@idealyst/components';
47
- import { useState } from 'react';
48
-
49
- function Example() {
50
- const [pressed, setPressed] = useState(false);
51
-
52
- return (
53
- <Pressable
54
- onPressIn={() => setPressed(true)}
55
- onPressOut={() => setPressed(false)}
56
- >
57
- <View
58
- style={{
59
- padding: 16,
60
- backgroundColor: pressed ? '#e0e0e0' : '#f5f5f5',
61
- borderRadius: 8,
62
- }}
63
- >
64
- <Text>{pressed ? 'Pressing...' : 'Press me'}</Text>
65
- </View>
66
- </Pressable>
67
- );
68
- }`,
69
- "with-icons": `import { Pressable, View, Icon, Text } from '@idealyst/components';
70
-
71
- <Pressable
72
- onPress={() => handleAction()}
73
- accessibilityLabel="Perform action"
74
- accessibilityRole="button"
75
- >
76
- <View
77
- style={{
78
- flexDirection: 'row',
79
- alignItems: 'center',
80
- gap: 8,
81
- padding: 12,
82
- backgroundColor: '#f0f0f0',
83
- borderRadius: 8,
84
- }}
85
- >
86
- <Icon name="star" size="md" color="primary" />
87
- <Text>Custom Button</Text>
88
- </View>
89
- </Pressable>`,
90
- interactive: `import { Pressable, View, Text, Icon } from '@idealyst/components';
91
- import { useState } from 'react';
92
-
93
- function CustomCard() {
94
- const [selected, setSelected] = useState(false);
95
-
96
- return (
97
- <Pressable
98
- onPress={() => setSelected(!selected)}
99
- accessibilityLabel="Toggle selection"
100
- >
101
- <View
102
- style={{
103
- padding: 16,
104
- backgroundColor: selected ? '#e3f2fd' : '#fff',
105
- borderWidth: 2,
106
- borderColor: selected ? '#2196f3' : '#e0e0e0',
107
- borderRadius: 8,
108
- }}
109
- >
110
- <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
111
- <View spacing="xs">
112
- <Text weight="bold">Custom Card</Text>
113
- <Text size="small">Tap to {selected ? 'deselect' : 'select'}</Text>
114
- </View>
115
- {selected && (
116
- <Icon name="check-circle" size="lg" color="primary" />
117
- )}
118
- </View>
119
- </View>
120
- </Pressable>
121
- );
122
- }`,
123
- },
124
- };
125
- //# sourceMappingURL=Pressable.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Pressable.js","sourceRoot":"","sources":["../../../src/data/components/Pressable.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,uEAAuE;IACpF,KAAK,EAAE;;;;;;;;;;CAUR;IACC,QAAQ,EAAE;QACR,sCAAsC;QACtC,gBAAgB;QAChB,uBAAuB;QACvB,gBAAgB;QAChB,wBAAwB;QACxB,gBAAgB;KACjB;IACD,aAAa,EAAE;QACb,qCAAqC;QACrC,gDAAgD;QAChD,+CAA+C;QAC/C,4CAA4C;QAC5C,8BAA8B;QAC9B,qCAAqC;KACtC;IACD,KAAK,EAAE;;;;;;;;CAQR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;aAIE;QAET,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBZ;QAEE,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;aAoBL;QAET,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Progress: {
2
- category: string;
3
- description: string;
4
- props: string;
5
- features: string[];
6
- bestPractices: string[];
7
- usage: string;
8
- examples: {
9
- basic: string;
10
- variants: string;
11
- "with-icons": string;
12
- interactive: string;
13
- };
14
- };
15
- //# sourceMappingURL=Progress.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/data/components/Progress.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAgGpB,CAAC"}