@react-native-reusables/cli 0.0.18 → 0.1.1

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 (139) hide show
  1. package/README.md +2 -37
  2. package/__generated/components/ui/accordion.tsx +30 -32
  3. package/__generated/components/ui/alert-dialog.tsx +19 -26
  4. package/__generated/components/ui/aspect-ratio.tsx +1 -1
  5. package/__generated/components/ui/avatar.tsx +31 -34
  6. package/__generated/components/ui/badge.tsx +2 -2
  7. package/__generated/components/ui/button.tsx +2 -5
  8. package/__generated/components/ui/card.tsx +39 -51
  9. package/__generated/components/ui/checkbox.tsx +25 -27
  10. package/__generated/components/ui/collapsible.tsx +1 -1
  11. package/__generated/components/ui/context-menu.tsx +28 -31
  12. package/__generated/components/ui/dialog.tsx +40 -43
  13. package/__generated/components/ui/dropdown-menu.tsx +27 -22
  14. package/__generated/components/ui/hover-card.tsx +3 -3
  15. package/__generated/components/ui/input.tsx +17 -18
  16. package/__generated/components/ui/label.tsx +21 -22
  17. package/__generated/components/ui/menubar.tsx +45 -47
  18. package/__generated/components/ui/navigation-menu.tsx +19 -17
  19. package/__generated/components/ui/popover.tsx +4 -4
  20. package/__generated/components/ui/progress.tsx +15 -11
  21. package/__generated/components/ui/radio-group.tsx +27 -29
  22. package/__generated/components/ui/select.tsx +55 -65
  23. package/__generated/components/ui/separator.tsx +16 -17
  24. package/__generated/components/ui/switch.tsx +59 -61
  25. package/__generated/components/ui/table.tsx +69 -76
  26. package/__generated/components/ui/tabs.tsx +49 -52
  27. package/__generated/components/ui/text.tsx +2 -2
  28. package/__generated/components/ui/textarea.tsx +20 -21
  29. package/__generated/components/ui/toggle-group.tsx +5 -7
  30. package/__generated/components/ui/toggle.tsx +4 -4
  31. package/__generated/components/ui/tooltip.tsx +4 -5
  32. package/__generated/components/ui/typography.tsx +2 -2
  33. package/dist/index.js +3 -3
  34. package/dist/index.js.map +1 -1
  35. package/package.json +2 -34
  36. package/__generated/components/primitives/accordion/accordion.tsx +0 -216
  37. package/__generated/components/primitives/accordion/accordion.web.tsx +0 -295
  38. package/__generated/components/primitives/accordion/index.ts +0 -1
  39. package/__generated/components/primitives/accordion/types.ts +0 -45
  40. package/__generated/components/primitives/alert-dialog/alert-dialog.tsx +0 -237
  41. package/__generated/components/primitives/alert-dialog/alert-dialog.web.tsx +0 -256
  42. package/__generated/components/primitives/alert-dialog/index.ts +0 -1
  43. package/__generated/components/primitives/alert-dialog/types.ts +0 -48
  44. package/__generated/components/primitives/aspect-ratio.tsx +0 -23
  45. package/__generated/components/primitives/avatar/index.tsx +0 -95
  46. package/__generated/components/primitives/avatar/types.ts +0 -10
  47. package/__generated/components/primitives/checkbox/checkbox.tsx +0 -101
  48. package/__generated/components/primitives/checkbox/checkbox.web.tsx +0 -114
  49. package/__generated/components/primitives/checkbox/index.ts +0 -1
  50. package/__generated/components/primitives/checkbox/types.ts +0 -11
  51. package/__generated/components/primitives/collapsible/collapsible.tsx +0 -119
  52. package/__generated/components/primitives/collapsible/collapsible.web.tsx +0 -157
  53. package/__generated/components/primitives/collapsible/index.ts +0 -1
  54. package/__generated/components/primitives/collapsible/types.ts +0 -18
  55. package/__generated/components/primitives/context-menu/context-menu.tsx +0 -648
  56. package/__generated/components/primitives/context-menu/context-menu.web.tsx +0 -533
  57. package/__generated/components/primitives/context-menu/index.ts +0 -1
  58. package/__generated/components/primitives/context-menu/types.ts +0 -90
  59. package/__generated/components/primitives/dialog/dialog.tsx +0 -211
  60. package/__generated/components/primitives/dialog/dialog.web.tsx +0 -197
  61. package/__generated/components/primitives/dialog/index.ts +0 -1
  62. package/__generated/components/primitives/dialog/types.ts +0 -60
  63. package/__generated/components/primitives/dropdown-menu/dropdown-menu.tsx +0 -608
  64. package/__generated/components/primitives/dropdown-menu/dropdown-menu.web.tsx +0 -550
  65. package/__generated/components/primitives/dropdown-menu/index.ts +0 -1
  66. package/__generated/components/primitives/dropdown-menu/types.ts +0 -72
  67. package/__generated/components/primitives/hooks/index.ts +0 -3
  68. package/__generated/components/primitives/hooks/useAugmentedRef.tsx +0 -29
  69. package/__generated/components/primitives/hooks/useControllableState.tsx +0 -75
  70. package/__generated/components/primitives/hooks/useRelativePosition.tsx +0 -227
  71. package/__generated/components/primitives/hover-card/hover-card.tsx +0 -279
  72. package/__generated/components/primitives/hover-card/hover-card.web.tsx +0 -150
  73. package/__generated/components/primitives/hover-card/index.ts +0 -1
  74. package/__generated/components/primitives/hover-card/types.ts +0 -51
  75. package/__generated/components/primitives/label/index.ts +0 -1
  76. package/__generated/components/primitives/label/label.tsx +0 -31
  77. package/__generated/components/primitives/label/label.web.tsx +0 -36
  78. package/__generated/components/primitives/label/types.ts +0 -15
  79. package/__generated/components/primitives/menubar/index.ts +0 -1
  80. package/__generated/components/primitives/menubar/menubar.tsx +0 -622
  81. package/__generated/components/primitives/menubar/menubar.web.tsx +0 -548
  82. package/__generated/components/primitives/menubar/types.ts +0 -77
  83. package/__generated/components/primitives/navigation-menu/index.ts +0 -1
  84. package/__generated/components/primitives/navigation-menu/navigation-menu.tsx +0 -315
  85. package/__generated/components/primitives/navigation-menu/navigation-menu.web.tsx +0 -264
  86. package/__generated/components/primitives/navigation-menu/types.ts +0 -49
  87. package/__generated/components/primitives/popover/index.ts +0 -1
  88. package/__generated/components/primitives/popover/popover.tsx +0 -290
  89. package/__generated/components/primitives/popover/popover.web.tsx +0 -191
  90. package/__generated/components/primitives/popover/types.ts +0 -24
  91. package/__generated/components/primitives/portal.tsx +0 -82
  92. package/__generated/components/primitives/progress/index.ts +0 -1
  93. package/__generated/components/primitives/progress/progress.tsx +0 -59
  94. package/__generated/components/primitives/progress/progress.web.tsx +0 -36
  95. package/__generated/components/primitives/progress/types.ts +0 -7
  96. package/__generated/components/primitives/radio-group/index.ts +0 -1
  97. package/__generated/components/primitives/radio-group/radio-group.tsx +0 -116
  98. package/__generated/components/primitives/radio-group/radio-group.web.tsx +0 -78
  99. package/__generated/components/primitives/radio-group/types.ts +0 -15
  100. package/__generated/components/primitives/select/index.ts +0 -1
  101. package/__generated/components/primitives/select/select.tsx +0 -466
  102. package/__generated/components/primitives/select/select.web.tsx +0 -332
  103. package/__generated/components/primitives/select/types.ts +0 -89
  104. package/__generated/components/primitives/separator/index.tsx +0 -23
  105. package/__generated/components/primitives/separator/types.ts +0 -6
  106. package/__generated/components/primitives/slider/index.ts +0 -1
  107. package/__generated/components/primitives/slider/slider.tsx +0 -89
  108. package/__generated/components/primitives/slider/slider.web.tsx +0 -67
  109. package/__generated/components/primitives/slider/types.ts +0 -24
  110. package/__generated/components/primitives/slot.tsx +0 -187
  111. package/__generated/components/primitives/switch/index.ts +0 -1
  112. package/__generated/components/primitives/switch/switch.tsx +0 -65
  113. package/__generated/components/primitives/switch/switch.web.tsx +0 -67
  114. package/__generated/components/primitives/switch/types.ts +0 -11
  115. package/__generated/components/primitives/table.tsx +0 -55
  116. package/__generated/components/primitives/tabs/index.ts +0 -1
  117. package/__generated/components/primitives/tabs/tabs.tsx +0 -133
  118. package/__generated/components/primitives/tabs/tabs.web.tsx +0 -97
  119. package/__generated/components/primitives/tabs/types.ts +0 -24
  120. package/__generated/components/primitives/toast/index.tsx +0 -128
  121. package/__generated/components/primitives/toast/types.ts +0 -7
  122. package/__generated/components/primitives/toggle/index.ts +0 -1
  123. package/__generated/components/primitives/toggle/toggle.tsx +0 -37
  124. package/__generated/components/primitives/toggle/toggle.web.tsx +0 -26
  125. package/__generated/components/primitives/toggle/types.ts +0 -7
  126. package/__generated/components/primitives/toggle-group/index.ts +0 -1
  127. package/__generated/components/primitives/toggle-group/toggle-group.tsx +0 -125
  128. package/__generated/components/primitives/toggle-group/toggle-group.web.tsx +0 -124
  129. package/__generated/components/primitives/toggle-group/types.ts +0 -37
  130. package/__generated/components/primitives/toolbar/index.ts +0 -1
  131. package/__generated/components/primitives/toolbar/toolbar.tsx +0 -125
  132. package/__generated/components/primitives/toolbar/toolbar.web.tsx +0 -129
  133. package/__generated/components/primitives/toolbar/types.ts +0 -39
  134. package/__generated/components/primitives/tooltip/index.ts +0 -1
  135. package/__generated/components/primitives/tooltip/tooltip.tsx +0 -277
  136. package/__generated/components/primitives/tooltip/tooltip.web.tsx +0 -181
  137. package/__generated/components/primitives/tooltip/types.ts +0 -42
  138. package/__generated/components/primitives/types.ts +0 -105
  139. package/__generated/components/primitives/utils.ts +0 -61
@@ -1,332 +0,0 @@
1
- import * as Select from '@radix-ui/react-select';
2
- import { useAugmentedRef, useControllableState } from '@rnr/hooks';
3
- import * as Slot from '@rnr/slot';
4
- import type {
5
- ForceMountable,
6
- PositionedContentProps,
7
- PressableRef,
8
- SlottablePressableProps,
9
- SlottableTextProps,
10
- SlottableViewProps,
11
- TextRef,
12
- ViewRef,
13
- } from '@rnr/types';
14
- import * as React from 'react';
15
- import { Pressable, Text, View } from 'react-native';
16
- import type {
17
- RootContext,
18
- SelectContentProps,
19
- SelectItemProps,
20
- SelectOverlayProps,
21
- SelectPortalProps,
22
- SelectRootProps,
23
- SelectSeparatorProps,
24
- SelectValueProps,
25
- } from './types';
26
-
27
- const SelectContext = React.createContext<
28
- | (RootContext & {
29
- open: boolean;
30
- onOpenChange: (open: boolean) => void;
31
- })
32
- | null
33
- >(null);
34
-
35
- /**
36
- * @web Parameter of `onValueChange` has the value of `value` for the `value` and the `label` of the selected Option
37
- * @ex When an Option with a label of Green Apple, the parameter passed to `onValueChange` is { value: 'green-apple', label: 'green-apple' }
38
- */
39
- const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
40
- (
41
- {
42
- asChild,
43
- value: valueProp,
44
- defaultValue,
45
- onValueChange: onValueChangeProp,
46
- onOpenChange: onOpenChangeProp,
47
- ...viewProps
48
- },
49
- ref
50
- ) => {
51
- const [value, onValueChange] = useControllableState({
52
- prop: valueProp,
53
- defaultProp: defaultValue,
54
- onChange: onValueChangeProp,
55
- });
56
- const [open, setOpen] = React.useState(false);
57
-
58
- function onOpenChange(value: boolean) {
59
- setOpen(value);
60
- onOpenChangeProp?.(value);
61
- }
62
-
63
- function onStrValueChange(val: string) {
64
- onValueChange({ value: val, label: val });
65
- }
66
-
67
- const Component = asChild ? Slot.View : View;
68
- return (
69
- <SelectContext.Provider
70
- value={{
71
- value,
72
- onValueChange,
73
- open,
74
- onOpenChange,
75
- }}
76
- >
77
- <Select.Root
78
- value={value?.value}
79
- defaultValue={defaultValue?.value}
80
- onValueChange={onStrValueChange}
81
- open={open}
82
- onOpenChange={onOpenChange}
83
- >
84
- <Component ref={ref} {...viewProps} />
85
- </Select.Root>
86
- </SelectContext.Provider>
87
- );
88
- }
89
- );
90
-
91
- Root.displayName = 'RootWebSelect';
92
-
93
- function useRootContext() {
94
- const context = React.useContext(SelectContext);
95
- if (!context) {
96
- throw new Error('Select compound components cannot be rendered outside the Select component');
97
- }
98
- return context;
99
- }
100
-
101
- const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
102
- ({ asChild, role: _role, disabled, ...props }, ref) => {
103
- const { open, onOpenChange } = useRootContext();
104
- const augmentedRef = useAugmentedRef({
105
- ref,
106
- methods: {
107
- open() {
108
- onOpenChange(true);
109
- },
110
- close() {
111
- onOpenChange(false);
112
- },
113
- },
114
- });
115
-
116
- React.useLayoutEffect(() => {
117
- if (augmentedRef.current) {
118
- const augRef = augmentedRef.current as unknown as HTMLButtonElement;
119
- augRef.dataset.state = open ? 'open' : 'closed';
120
- augRef.type = 'button';
121
- }
122
- }, [open]);
123
-
124
- const Component = asChild ? Slot.Pressable : Pressable;
125
- return (
126
- <Select.Trigger disabled={disabled ?? undefined} asChild>
127
- <Component ref={augmentedRef} role='button' disabled={disabled} {...props} />
128
- </Select.Trigger>
129
- );
130
- }
131
- );
132
-
133
- Trigger.displayName = 'TriggerWebSelect';
134
-
135
- const Value = React.forwardRef<TextRef, SlottableTextProps & SelectValueProps>(
136
- ({ asChild, placeholder, children, ...props }, ref) => {
137
- return (
138
- <Slot.Text ref={ref} {...props}>
139
- <Select.Value placeholder={placeholder}>{children}</Select.Value>
140
- </Slot.Text>
141
- );
142
- }
143
- );
144
-
145
- Value.displayName = 'ValueWebSelect';
146
-
147
- function Portal({ container, children }: SelectPortalProps) {
148
- return <Select.Portal children={children} container={container} />;
149
- }
150
-
151
- const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & SelectOverlayProps>(
152
- ({ asChild, forceMount, ...props }, ref) => {
153
- const Component = asChild ? Slot.Pressable : Pressable;
154
- return <Component ref={ref} {...props} />;
155
- }
156
- );
157
-
158
- Overlay.displayName = 'OverlayWebSelect';
159
-
160
- const Content = React.forwardRef<
161
- ViewRef,
162
- SlottableViewProps & PositionedContentProps & SelectContentProps
163
- >(
164
- (
165
- {
166
- asChild = false,
167
- forceMount: _forceMount,
168
- align = 'start',
169
- side = 'bottom',
170
- position = 'popper',
171
- sideOffset = 0,
172
- alignOffset = 0,
173
- avoidCollisions = true,
174
- disablePositioningStyle: _disablePositioningStyle,
175
- onCloseAutoFocus,
176
- onEscapeKeyDown,
177
- onInteractOutside: _onInteractOutside,
178
- onPointerDownOutside,
179
- ...props
180
- },
181
- ref
182
- ) => {
183
- const Component = asChild ? Slot.View : View;
184
- return (
185
- <Select.Content
186
- onCloseAutoFocus={onCloseAutoFocus}
187
- onEscapeKeyDown={onEscapeKeyDown}
188
- onPointerDownOutside={onPointerDownOutside}
189
- align={align}
190
- side={side}
191
- sideOffset={sideOffset}
192
- alignOffset={alignOffset}
193
- avoidCollisions={avoidCollisions}
194
- position={position}
195
- >
196
- <Component ref={ref} {...props} />
197
- </Select.Content>
198
- );
199
- }
200
- );
201
-
202
- Content.displayName = 'ContentWebSelect';
203
-
204
- const ItemContext = React.createContext<{
205
- itemValue: string;
206
- label: string;
207
- } | null>(null);
208
-
209
- const Item = React.forwardRef<PressableRef, SlottablePressableProps & SelectItemProps>(
210
- ({ asChild, closeOnPress = true, label, value, children, ...props }, ref) => {
211
- return (
212
- <ItemContext.Provider value={{ itemValue: value, label: label }}>
213
- <Slot.Pressable ref={ref} {...props}>
214
- <Select.Item textValue={label} value={value} disabled={props.disabled ?? undefined}>
215
- <>{children}</>
216
- </Select.Item>
217
- </Slot.Pressable>
218
- </ItemContext.Provider>
219
- );
220
- }
221
- );
222
-
223
- Item.displayName = 'ItemWebSelect';
224
-
225
- function useItemContext() {
226
- const context = React.useContext(ItemContext);
227
- if (!context) {
228
- throw new Error('Item compound components cannot be rendered outside of an Item component');
229
- }
230
- return context;
231
- }
232
-
233
- const ItemText = React.forwardRef<TextRef, Omit<SlottableTextProps, 'children'>>(
234
- ({ asChild, ...props }, ref) => {
235
- const { label } = useItemContext();
236
-
237
- const Component = asChild ? Slot.Text : Text;
238
- return (
239
- <Select.ItemText asChild>
240
- <Component ref={ref} {...props}>
241
- {label}
242
- </Component>
243
- </Select.ItemText>
244
- );
245
- }
246
- );
247
-
248
- ItemText.displayName = 'ItemTextWebSelect';
249
-
250
- const ItemIndicator = React.forwardRef<ViewRef, SlottableViewProps & ForceMountable>(
251
- ({ asChild, forceMount: _forceMount, ...props }, ref) => {
252
- const Component = asChild ? Slot.View : View;
253
- return (
254
- <Select.ItemIndicator asChild>
255
- <Component ref={ref} {...props} />
256
- </Select.ItemIndicator>
257
- );
258
- }
259
- );
260
-
261
- ItemIndicator.displayName = 'ItemIndicatorWebSelect';
262
-
263
- const Group = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
264
- const Component = asChild ? Slot.View : View;
265
- return (
266
- <Select.Group asChild>
267
- <Component ref={ref} {...props} />
268
- </Select.Group>
269
- );
270
- });
271
-
272
- Group.displayName = 'GroupWebSelect';
273
-
274
- const Label = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
275
- const Component = asChild ? Slot.Text : Text;
276
- return (
277
- <Select.Label asChild>
278
- <Component ref={ref} {...props} />
279
- </Select.Label>
280
- );
281
- });
282
-
283
- Label.displayName = 'LabelWebSelect';
284
-
285
- const Separator = React.forwardRef<ViewRef, SlottableViewProps & SelectSeparatorProps>(
286
- ({ asChild, decorative, ...props }, ref) => {
287
- const Component = asChild ? Slot.View : View;
288
- return (
289
- <Select.Separator asChild>
290
- <Component ref={ref} {...props} />
291
- </Select.Separator>
292
- );
293
- }
294
- );
295
-
296
- Separator.displayName = 'SeparatorWebSelect';
297
-
298
- const ScrollUpButton = (props: React.ComponentPropsWithoutRef<typeof Select.ScrollUpButton>) => {
299
- return <Select.ScrollUpButton {...props} />;
300
- };
301
-
302
- const ScrollDownButton = (
303
- props: React.ComponentPropsWithoutRef<typeof Select.ScrollDownButton>
304
- ) => {
305
- return <Select.ScrollDownButton {...props} />;
306
- };
307
-
308
- const Viewport = (props: React.ComponentPropsWithoutRef<typeof Select.Viewport>) => {
309
- return <Select.Viewport {...props} />;
310
- };
311
-
312
- export {
313
- Content,
314
- Group,
315
- Item,
316
- ItemIndicator,
317
- ItemText,
318
- Label,
319
- Overlay,
320
- Portal,
321
- Root,
322
- ScrollDownButton,
323
- ScrollUpButton,
324
- Separator,
325
- Trigger,
326
- Value,
327
- Viewport,
328
- useItemContext,
329
- useRootContext,
330
- };
331
-
332
- export type { Option, SelectTriggerRef } from './types';
@@ -1,89 +0,0 @@
1
- import type { ForceMountable, PressableRef } from '@rnr/types';
2
-
3
- type Option =
4
- | {
5
- value: string;
6
- label: string;
7
- }
8
- | undefined;
9
-
10
- interface RootContext {
11
- value: Option;
12
- onValueChange: (option: Option) => void;
13
- disabled?: boolean;
14
- }
15
-
16
- interface SelectRootProps {
17
- value?: Option;
18
- defaultValue?: Option;
19
- onValueChange?: (option: Option) => void;
20
- onOpenChange?: (open: boolean) => void;
21
- disabled?: boolean;
22
- /**
23
- * Platform: WEB ONLY
24
- */
25
- dir?: 'ltr' | 'rtl';
26
- /**
27
- * Platform: WEB ONLY
28
- */
29
- name?: string;
30
- /**
31
- * Platform: WEB ONLY
32
- */
33
- required?: boolean;
34
- }
35
-
36
- interface SelectValueProps {
37
- placeholder: string;
38
- }
39
-
40
- interface SelectPortalProps extends ForceMountable {
41
- children: React.ReactNode;
42
- /**
43
- * Platform: NATIVE ONLY
44
- */
45
- hostName?: string;
46
- /**
47
- * Platform: WEB ONLY
48
- */
49
- container?: HTMLElement | null | undefined;
50
- }
51
-
52
- interface SelectOverlayProps extends ForceMountable {
53
- closeOnPress?: boolean;
54
- }
55
-
56
- interface SelectContentProps {
57
- /**
58
- * Platform: WEB ONLY
59
- */
60
- position?: 'popper' | 'item-aligned' | undefined;
61
- }
62
-
63
- interface SelectItemProps {
64
- value: string;
65
- label: string;
66
- closeOnPress?: boolean;
67
- }
68
-
69
- interface SelectSeparatorProps {
70
- decorative?: boolean;
71
- }
72
-
73
- interface SelectTriggerRef extends PressableRef {
74
- open: () => void;
75
- close: () => void;
76
- }
77
-
78
- export type {
79
- Option,
80
- RootContext,
81
- SelectContentProps,
82
- SelectItemProps,
83
- SelectOverlayProps,
84
- SelectPortalProps,
85
- SelectRootProps,
86
- SelectSeparatorProps,
87
- SelectTriggerRef,
88
- SelectValueProps,
89
- };
@@ -1,23 +0,0 @@
1
- import * as React from 'react';
2
- import { View } from 'react-native';
3
- import * as Slot from '@rnr/slot';
4
- import type { SlottableViewProps, ViewRef } from '@rnr/types';
5
- import type { SeparatorRootProps } from './types';
6
-
7
- const Root = React.forwardRef<ViewRef, SlottableViewProps & SeparatorRootProps>(
8
- ({ asChild, decorative, orientation = 'horizontal', ...props }, ref) => {
9
- const Component = asChild ? Slot.View : View;
10
- return (
11
- <Component
12
- role={decorative ? 'presentation' : 'separator'}
13
- aria-orientation={orientation}
14
- ref={ref}
15
- {...props}
16
- />
17
- );
18
- }
19
- );
20
-
21
- Root.displayName = 'RootSeparator';
22
-
23
- export { Root };
@@ -1,6 +0,0 @@
1
- interface SeparatorRootProps {
2
- orientation?: 'horizontal' | 'vertical';
3
- decorative?: boolean;
4
- }
5
-
6
- export type { SeparatorRootProps };
@@ -1 +0,0 @@
1
- export * from './slider';
@@ -1,89 +0,0 @@
1
- import * as React from 'react';
2
- import { View } from 'react-native';
3
- import * as Slot from '@rnr/slot';
4
- import type {
5
- SlottableViewProps,
6
- ViewRef,
7
- } from '@rnr/types';
8
- import type { SliderRootProps } from './types';
9
-
10
- const RootContext = React.createContext<SliderRootProps | null>(null);
11
-
12
- const Root = React.forwardRef<ViewRef, SlottableViewProps & SliderRootProps>(
13
- (
14
- {
15
- asChild,
16
- value,
17
- disabled,
18
- min,
19
- max,
20
- dir: _dir,
21
- inverted: _inverted,
22
- step: _step,
23
- onValueChange: _onValueChange,
24
- ...props
25
- },
26
- ref
27
- ) => {
28
- const Component = asChild ? Slot.View : View;
29
- return (
30
- <RootContext.Provider value={{ value, disabled, min, max }}>
31
- <Component ref={ref} role='group' {...props} />
32
- </RootContext.Provider>
33
- );
34
- }
35
- );
36
-
37
- Root.displayName = 'RootNativeSlider';
38
-
39
- function useSliderContext() {
40
- const context = React.useContext(RootContext);
41
- if (context === null) {
42
- throw new Error(
43
- 'Slider compound components cannot be rendered outside the Slider component'
44
- );
45
- }
46
- return context;
47
- }
48
-
49
- const Track = React.forwardRef<ViewRef, SlottableViewProps>(
50
- ({ asChild, ...props }, ref) => {
51
- const { value, min, max, disabled } = useSliderContext();
52
-
53
- const Component = asChild ? Slot.View : View;
54
- return (
55
- <Component
56
- ref={ref}
57
- aria-disabled={disabled}
58
- role='slider'
59
- aria-valuemin={min}
60
- aria-valuemax={max}
61
- aria-valuenow={value}
62
- accessibilityValue={{ max, min, now: value }}
63
- {...props}
64
- />
65
- );
66
- }
67
- );
68
-
69
- Track.displayName = 'TrackNativeSlider';
70
-
71
- const Range = React.forwardRef<ViewRef, SlottableViewProps>(
72
- ({ asChild, ...props }, ref) => {
73
- const Component = asChild ? Slot.View : View;
74
- return <Component ref={ref} role='presentation' {...props} />;
75
- }
76
- );
77
-
78
- Range.displayName = 'RangeNativeSlider';
79
-
80
- const Thumb = React.forwardRef<ViewRef, SlottableViewProps>(
81
- ({ asChild, ...props }, ref) => {
82
- const Component = asChild ? Slot.View : View;
83
- return <Component accessibilityRole='adjustable' ref={ref} {...props} />;
84
- }
85
- );
86
-
87
- Thumb.displayName = 'ThumbNativeSlider';
88
-
89
- export { Range, Root, Thumb, Track };
@@ -1,67 +0,0 @@
1
- import * as Slider from '@radix-ui/react-slider';
2
- import * as React from 'react';
3
- import { View } from 'react-native';
4
- import * as Slot from '@rnr/slot';
5
- import type { SlottableViewProps, ViewRef } from '@rnr/types';
6
- import type { SliderRootProps } from './types';
7
-
8
- const Root = React.forwardRef<ViewRef, SlottableViewProps & SliderRootProps>(
9
- (
10
- { asChild, value, disabled, min, max, dir, inverted, step = 1, onValueChange, ...props },
11
- ref
12
- ) => {
13
- const Component = asChild ? Slot.View : View;
14
- return (
15
- <Slider.Root
16
- dir={dir}
17
- inverted={inverted}
18
- value={[value]}
19
- disabled={disabled}
20
- min={min}
21
- max={max}
22
- step={step}
23
- onValueChange={onValueChange}
24
- asChild
25
- >
26
- <Component ref={ref} {...props} />
27
- </Slider.Root>
28
- );
29
- }
30
- );
31
-
32
- Root.displayName = 'RootWebSlider';
33
-
34
- const Track = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
35
- const Component = asChild ? Slot.View : View;
36
- return (
37
- <Slider.Track asChild>
38
- <Component ref={ref} {...props} />
39
- </Slider.Track>
40
- );
41
- });
42
-
43
- Track.displayName = 'TrackWebSlider';
44
-
45
- const Range = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
46
- const Component = asChild ? Slot.View : View;
47
- return (
48
- <Slider.Range asChild>
49
- <Component ref={ref} {...props} />
50
- </Slider.Range>
51
- );
52
- });
53
-
54
- Range.displayName = 'RangeWebSlider';
55
-
56
- const Thumb = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
57
- const Component = asChild ? Slot.View : View;
58
- return (
59
- <Slider.Thumb asChild>
60
- <Component ref={ref} {...props} />
61
- </Slider.Thumb>
62
- );
63
- });
64
-
65
- Thumb.displayName = 'ThumbWebSlider';
66
-
67
- export { Range, Root, Thumb, Track };
@@ -1,24 +0,0 @@
1
- interface SliderRootProps {
2
- value: number;
3
- disabled?: boolean;
4
- min?: number;
5
- max?: number;
6
- /**
7
- * Platform: WEB ONLY
8
- */
9
- dir?: 'ltr' | 'rtl';
10
- /**
11
- * Platform: WEB ONLY
12
- */
13
- inverted?: boolean;
14
- /**
15
- * Platform: WEB ONLY
16
- */
17
- step?: number;
18
- /**
19
- * Platform: WEB ONLY
20
- */
21
- onValueChange?: (value: number[]) => void;
22
- }
23
-
24
- export type { SliderRootProps };