@codefast/ui 0.0.66 → 0.0.68

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 (122) hide show
  1. package/dist/styles.css +1 -1
  2. package/dist/styles.css.map +1 -1
  3. package/package.json +70 -102
  4. package/dist/chunk-DH3YP4ZC.cjs +0 -2
  5. package/dist/chunk-DH3YP4ZC.cjs.map +0 -1
  6. package/dist/chunk-DTSAQICV.js +0 -2
  7. package/dist/chunk-DTSAQICV.js.map +0 -1
  8. package/dist/chunk-NH6X3FON.js +0 -2
  9. package/dist/chunk-NH6X3FON.js.map +0 -1
  10. package/dist/chunk-P563ILDJ.cjs +0 -2
  11. package/dist/chunk-P563ILDJ.cjs.map +0 -1
  12. package/dist/chunk-VVA2EE5V.js +0 -2
  13. package/dist/chunk-VVA2EE5V.js.map +0 -1
  14. package/dist/chunk-VZ6P3BCB.cjs +0 -2
  15. package/dist/chunk-VZ6P3BCB.cjs.map +0 -1
  16. package/dist/hooks/use-media-query.cjs +0 -2
  17. package/dist/hooks/use-media-query.cjs.map +0 -1
  18. package/dist/hooks/use-media-query.d.cts +0 -3
  19. package/dist/hooks/use-media-query.d.ts +0 -3
  20. package/dist/hooks/use-media-query.js +0 -2
  21. package/dist/hooks/use-media-query.js.map +0 -1
  22. package/dist/hooks/use-mutation-observer.cjs +0 -2
  23. package/dist/hooks/use-mutation-observer.cjs.map +0 -1
  24. package/dist/hooks/use-mutation-observer.d.cts +0 -5
  25. package/dist/hooks/use-mutation-observer.d.ts +0 -5
  26. package/dist/hooks/use-mutation-observer.js +0 -2
  27. package/dist/hooks/use-mutation-observer.js.map +0 -1
  28. package/dist/lib/colors.cjs +0 -2
  29. package/dist/lib/colors.cjs.map +0 -1
  30. package/dist/lib/colors.d.cts +0 -1759
  31. package/dist/lib/colors.d.ts +0 -1759
  32. package/dist/lib/colors.js +0 -2
  33. package/dist/lib/colors.js.map +0 -1
  34. package/dist/plugin/animate.plugin.cjs +0 -2
  35. package/dist/plugin/animate.plugin.cjs.map +0 -1
  36. package/dist/plugin/animate.plugin.js +0 -2
  37. package/dist/plugin/animate.plugin.js.map +0 -1
  38. package/dist/plugin/base.plugin.cjs +0 -2
  39. package/dist/plugin/base.plugin.cjs.map +0 -1
  40. package/dist/plugin/base.plugin.js +0 -2
  41. package/dist/plugin/base.plugin.js.map +0 -1
  42. package/dist/plugin/perspective.plugin.cjs +0 -2
  43. package/dist/plugin/perspective.plugin.cjs.map +0 -1
  44. package/dist/plugin/perspective.plugin.js +0 -2
  45. package/dist/plugin/perspective.plugin.js.map +0 -1
  46. package/dist/tailwind.config.cjs +0 -2
  47. package/dist/tailwind.config.cjs.map +0 -1
  48. package/dist/tailwind.config.js +0 -2
  49. package/dist/tailwind.config.js.map +0 -1
  50. package/plugin/animate.plugin.ts +0 -319
  51. package/plugin/base.plugin.ts +0 -21
  52. package/plugin/perspective.plugin.ts +0 -11
  53. package/src/hooks/use-media-query.ts +0 -22
  54. package/src/hooks/use-mutation-observer.ts +0 -26
  55. package/src/lib/colors.ts +0 -1757
  56. package/src/lib/utils.ts +0 -6
  57. package/src/react/accordion.tsx +0 -88
  58. package/src/react/alert-dialog.tsx +0 -185
  59. package/src/react/alert.tsx +0 -73
  60. package/src/react/aspect-ratio.tsx +0 -17
  61. package/src/react/avatar.tsx +0 -60
  62. package/src/react/badge.tsx +0 -39
  63. package/src/react/blockquote.tsx +0 -26
  64. package/src/react/box.tsx +0 -34
  65. package/src/react/breadcrumb.tsx +0 -154
  66. package/src/react/button.tsx +0 -94
  67. package/src/react/calendar.tsx +0 -79
  68. package/src/react/card.tsx +0 -109
  69. package/src/react/carousel.tsx +0 -299
  70. package/src/react/checkbox-cards.tsx +0 -61
  71. package/src/react/checkbox-group.primitive.tsx +0 -206
  72. package/src/react/checkbox-group.tsx +0 -55
  73. package/src/react/checkbox.tsx +0 -36
  74. package/src/react/code.tsx +0 -26
  75. package/src/react/collapsible.tsx +0 -54
  76. package/src/react/command.tsx +0 -209
  77. package/src/react/container.tsx +0 -29
  78. package/src/react/context-menu.tsx +0 -306
  79. package/src/react/data-table.tsx +0 -249
  80. package/src/react/dialog.tsx +0 -160
  81. package/src/react/drawer.tsx +0 -136
  82. package/src/react/dropdown-menu.tsx +0 -290
  83. package/src/react/em.tsx +0 -26
  84. package/src/react/form.tsx +0 -234
  85. package/src/react/heading.tsx +0 -29
  86. package/src/react/hover-card.tsx +0 -75
  87. package/src/react/input-otp.tsx +0 -120
  88. package/src/react/input.tsx +0 -145
  89. package/src/react/kbd.tsx +0 -36
  90. package/src/react/label.tsx +0 -31
  91. package/src/react/menubar.tsx +0 -322
  92. package/src/react/navigation-menu.tsx +0 -192
  93. package/src/react/pagination.tsx +0 -150
  94. package/src/react/popover.tsx +0 -84
  95. package/src/react/pre.tsx +0 -26
  96. package/src/react/progress.tsx +0 -35
  97. package/src/react/quote.tsx +0 -26
  98. package/src/react/radio-cards.tsx +0 -48
  99. package/src/react/radio-group.tsx +0 -50
  100. package/src/react/radio.tsx +0 -40
  101. package/src/react/resizable.tsx +0 -62
  102. package/src/react/scroll-area.tsx +0 -106
  103. package/src/react/section.tsx +0 -26
  104. package/src/react/select.tsx +0 -219
  105. package/src/react/separator.tsx +0 -32
  106. package/src/react/sheet.tsx +0 -178
  107. package/src/react/skeleton.tsx +0 -18
  108. package/src/react/slider.tsx +0 -41
  109. package/src/react/sonner.tsx +0 -40
  110. package/src/react/spinner.tsx +0 -68
  111. package/src/react/strong.tsx +0 -26
  112. package/src/react/switch.tsx +0 -33
  113. package/src/react/table.tsx +0 -148
  114. package/src/react/tabs.tsx +0 -87
  115. package/src/react/text-input.tsx +0 -36
  116. package/src/react/text.tsx +0 -34
  117. package/src/react/textarea.tsx +0 -30
  118. package/src/react/toggle-group.tsx +0 -84
  119. package/src/react/toggle.tsx +0 -49
  120. package/src/react/tooltip.tsx +0 -83
  121. package/src/styles/styles.css +0 -3
  122. package/tailwind.config.ts +0 -126
@@ -1,299 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
5
- import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
6
- import { createContextScope, type Scope } from '@radix-ui/react-context';
7
- import { cn } from '../lib/utils';
8
- import { Button, type ButtonProps } from './button';
9
-
10
- /* -----------------------------------------------------------------------------
11
- * Context: Carousel
12
- * -------------------------------------------------------------------------- */
13
-
14
- const CAROUSEL_NAME = 'Carousel';
15
-
16
- type ScopedProps<P> = P & { __scopeCarousel?: Scope };
17
-
18
- const [createCarouselContext] = createContextScope(CAROUSEL_NAME);
19
-
20
- type CarouselApi = UseEmblaCarouselType[1];
21
- type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
22
- type CarouselOptions = UseCarouselParameters[0];
23
- type CarouselPlugin = UseCarouselParameters[1];
24
-
25
- interface BaseCarouselProps {
26
- opts?: CarouselOptions;
27
- orientation?: 'horizontal' | 'vertical';
28
- plugins?: CarouselPlugin;
29
- setApi?: (api: CarouselApi) => void;
30
- }
31
-
32
- type CarouselContextValue = {
33
- api: ReturnType<typeof useEmblaCarousel>[1];
34
- canScrollNext: boolean;
35
- canScrollPrev: boolean;
36
- carouselRef: ReturnType<typeof useEmblaCarousel>[0];
37
- scrollNext: () => void;
38
- scrollPrev: () => void;
39
- } & BaseCarouselProps;
40
-
41
- const [CarouselProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
42
-
43
- /* -----------------------------------------------------------------------------
44
- * Component: Carousel
45
- * -------------------------------------------------------------------------- */
46
-
47
- type CarouselElement = HTMLDivElement;
48
- type CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;
49
-
50
- const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
51
- (
52
- { __scopeCarousel, children, orientation, opts, setApi, plugins, className, ...props }: ScopedProps<CarouselProps>,
53
- forwardedRef,
54
- ) => {
55
- const [carouselRef, api] = useEmblaCarousel(
56
- {
57
- ...opts,
58
- axis: orientation === 'vertical' ? 'y' : 'x',
59
- },
60
- plugins,
61
- );
62
-
63
- const [canScrollPrev, setCanScrollPrev] = React.useState(false);
64
- const [canScrollNext, setCanScrollNext] = React.useState(false);
65
-
66
- const onSelect = React.useCallback((carouselApi: CarouselApi) => {
67
- if (!carouselApi) {
68
- return;
69
- }
70
-
71
- setCanScrollPrev(carouselApi.canScrollPrev());
72
- setCanScrollNext(carouselApi.canScrollNext());
73
- }, []);
74
-
75
- const scrollPrev = React.useCallback(() => {
76
- api?.scrollPrev();
77
- }, [api]);
78
-
79
- const scrollNext = React.useCallback(() => {
80
- api?.scrollNext();
81
- }, [api]);
82
-
83
- const handleKeyDown = React.useCallback(
84
- (event: React.KeyboardEvent<HTMLDivElement>) => {
85
- if (event.key === 'ArrowLeft') {
86
- event.preventDefault();
87
- scrollPrev();
88
- } else if (event.key === 'ArrowRight') {
89
- event.preventDefault();
90
- scrollNext();
91
- }
92
- },
93
- [scrollPrev, scrollNext],
94
- );
95
-
96
- React.useEffect(() => {
97
- if (!api || !setApi) {
98
- return;
99
- }
100
-
101
- setApi(api);
102
- }, [api, setApi]);
103
-
104
- React.useEffect(() => {
105
- if (!api) {
106
- return;
107
- }
108
-
109
- onSelect(api);
110
- api.on('reInit', onSelect);
111
- api.on('select', onSelect);
112
-
113
- return () => {
114
- api.off('select', onSelect);
115
- };
116
- }, [api, onSelect]);
117
-
118
- return (
119
- <CarouselProvider
120
- api={api}
121
- canScrollNext={canScrollNext}
122
- canScrollPrev={canScrollPrev}
123
- carouselRef={carouselRef}
124
- opts={opts}
125
- orientation={orientation ?? (opts?.axis === 'y' ? 'vertical' : 'horizontal')}
126
- scope={__scopeCarousel}
127
- scrollNext={scrollNext}
128
- scrollPrev={scrollPrev}
129
- >
130
- <div
131
- ref={forwardedRef}
132
- aria-roledescription="carousel"
133
- className={cn('relative', className)}
134
- role="region"
135
- onKeyDownCapture={handleKeyDown}
136
- {...props}
137
- >
138
- {children}
139
- </div>
140
- </CarouselProvider>
141
- );
142
- },
143
- );
144
-
145
- Carousel.displayName = CAROUSEL_NAME;
146
-
147
- /* -----------------------------------------------------------------------------
148
- * Component: CarouselContent
149
- * -------------------------------------------------------------------------- */
150
-
151
- const CAROUSEL_CONTENT_NAME = 'CarouselContent';
152
-
153
- type CarouselContentElement = HTMLDivElement;
154
- type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
155
-
156
- const CarouselContent = React.forwardRef<CarouselContentElement, CarouselContentProps>(
157
- ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselContentProps>, forwardedRef) => {
158
- const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
159
-
160
- return (
161
- <div ref={carouselRef} className="overflow-hidden">
162
- <div
163
- ref={forwardedRef}
164
- className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
165
- {...props}
166
- />
167
- </div>
168
- );
169
- },
170
- );
171
-
172
- CarouselContent.displayName = CAROUSEL_CONTENT_NAME;
173
-
174
- /* -----------------------------------------------------------------------------
175
- * Component: CarouselItem
176
- * -------------------------------------------------------------------------- */
177
-
178
- const CAROUSEL_ITEM_NAME = 'CarouselItem';
179
-
180
- type CarouselItemElement = HTMLDivElement;
181
- type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
182
-
183
- const CarouselItem = React.forwardRef<CarouselItemElement, CarouselItemProps>(
184
- ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>, forwardedRef) => {
185
- const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
186
-
187
- return (
188
- <div
189
- ref={forwardedRef}
190
- aria-roledescription="slide"
191
- className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
192
- role="group"
193
- {...props}
194
- />
195
- );
196
- },
197
- );
198
-
199
- CarouselItem.displayName = CAROUSEL_ITEM_NAME;
200
-
201
- /* -----------------------------------------------------------------------------
202
- * Component: CarouselPrevious
203
- * -------------------------------------------------------------------------- */
204
-
205
- const CAROUSEL_PREVIOUS_NAME = 'CarouselPrevious';
206
-
207
- type CarouselPreviousElement = HTMLButtonElement;
208
- type CarouselPreviousProps = ButtonProps;
209
-
210
- const CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPreviousProps>(
211
- (
212
- { __scopeCarousel, className, variant = 'outline', size = 'icon', ...props }: ScopedProps<CarouselPreviousProps>,
213
- forwardedRef,
214
- ) => {
215
- const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
216
-
217
- return (
218
- <Button
219
- ref={forwardedRef}
220
- className={cn(
221
- 'absolute size-8 rounded-full',
222
- orientation === 'horizontal'
223
- ? '-left-12 top-1/2 -translate-y-1/2'
224
- : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
225
- className,
226
- )}
227
- disabled={!canScrollPrev}
228
- size={size}
229
- variant={variant}
230
- onClick={scrollPrev}
231
- {...props}
232
- >
233
- <ArrowLeftIcon className="size-4" />
234
- <span className="sr-only">Previous slide</span>
235
- </Button>
236
- );
237
- },
238
- );
239
-
240
- CarouselPrevious.displayName = CAROUSEL_PREVIOUS_NAME;
241
-
242
- /* -----------------------------------------------------------------------------
243
- * Component: CarouselNext
244
- * -------------------------------------------------------------------------- */
245
-
246
- const CAROUSEL_NEXT_NAME = 'CarouselNext';
247
-
248
- type CarouselNextElement = HTMLButtonElement;
249
- type CarouselNextProps = ButtonProps;
250
-
251
- const CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(
252
- (
253
- { __scopeCarousel, className, variant = 'outline', size = 'icon', ...props }: ScopedProps<CarouselNextProps>,
254
- forwardedRef,
255
- ) => {
256
- const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
257
-
258
- return (
259
- <Button
260
- ref={forwardedRef}
261
- className={cn(
262
- 'absolute size-8 rounded-full',
263
- orientation === 'horizontal'
264
- ? '-right-12 top-1/2 -translate-y-1/2'
265
- : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
266
- className,
267
- )}
268
- disabled={!canScrollNext}
269
- size={size}
270
- variant={variant}
271
- onClick={scrollNext}
272
- {...props}
273
- >
274
- <ArrowRightIcon className="size-4" />
275
- <span className="sr-only">Next slide</span>
276
- </Button>
277
- );
278
- },
279
- );
280
-
281
- CarouselNext.displayName = CAROUSEL_NEXT_NAME;
282
-
283
- /* -----------------------------------------------------------------------------
284
- * Exports
285
- * -------------------------------------------------------------------------- */
286
-
287
- export {
288
- type CarouselApi,
289
- Carousel,
290
- CarouselContent,
291
- CarouselItem,
292
- CarouselPrevious,
293
- CarouselNext,
294
- type CarouselProps,
295
- type CarouselContentProps,
296
- type CarouselItemProps,
297
- type CarouselPreviousProps,
298
- type CarouselNextProps,
299
- };
@@ -1,61 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import { CheckIcon } from '@radix-ui/react-icons';
5
- import { cn } from '../lib/utils';
6
- import * as CheckboxGroupPrimitive from './checkbox-group.primitive';
7
-
8
- /* -----------------------------------------------------------------------------
9
- * Component: CheckboxCards
10
- * -------------------------------------------------------------------------- */
11
-
12
- type CheckboxCardsElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
13
- type CheckboxCardsProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
14
-
15
- const CheckboxCards = React.forwardRef<CheckboxCardsElement, CheckboxCardsProps>(
16
- ({ className, ...props }, forwardedRef) => {
17
- return <CheckboxGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={forwardedRef} />;
18
- },
19
- );
20
-
21
- CheckboxCards.displayName = CheckboxGroupPrimitive.Root.displayName;
22
-
23
- /* -----------------------------------------------------------------------------
24
- * Component: CheckboxCardsItem
25
- * -------------------------------------------------------------------------- */
26
-
27
- type CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
28
-
29
- interface CheckboxCardsItemProps extends React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item> {
30
- checkboxClassName?: string;
31
- }
32
-
33
- const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCardsItemProps>(
34
- ({ children, className, checkboxClassName, ...props }, forwardedRef) => {
35
- return (
36
- <label className={cn('flex items-center justify-center gap-4 rounded-md border p-4', className)}>
37
- {children}
38
- <CheckboxGroupPrimitive.Item
39
- ref={forwardedRef}
40
- className={cn(
41
- 'border-input aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 cursor-pointer rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-50',
42
- checkboxClassName,
43
- )}
44
- {...props}
45
- >
46
- <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
47
- <CheckIcon className="size-3.5" />
48
- </CheckboxGroupPrimitive.CheckboxGroupIndicator>
49
- </CheckboxGroupPrimitive.Item>
50
- </label>
51
- );
52
- },
53
- );
54
-
55
- CheckboxCardsItem.displayName = CheckboxGroupPrimitive.Item.displayName;
56
-
57
- /* -----------------------------------------------------------------------------
58
- * Exports
59
- * -------------------------------------------------------------------------- */
60
-
61
- export { CheckboxCards, CheckboxCardsItem, type CheckboxCardsProps, type CheckboxCardsItemProps };
@@ -1,206 +0,0 @@
1
- import * as React from 'react';
2
- import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
3
- import { createCheckboxScope } from '@radix-ui/react-checkbox';
4
- import { createContextScope, type Scope } from '@radix-ui/react-context';
5
- import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
6
- import { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';
7
- import { useControllableState } from '@radix-ui/react-use-controllable-state';
8
- import { useDirection } from '@radix-ui/react-direction';
9
- import { Primitive } from '@radix-ui/react-primitive';
10
-
11
- /* -------------------------------------------------------------------------------------------------
12
- * Component: CheckboxGroup
13
- * -----------------------------------------------------------------------------------------------*/
14
-
15
- const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
16
-
17
- type ScopedProps<P> = P & { __scopeCheckboxGroup?: Scope };
18
-
19
- const [createCheckboxGroupContext, createCheckboxGroupScope] = createContextScope(CHECKBOX_GROUP_NAME, [
20
- createRovingFocusGroupScope,
21
- createCheckboxScope,
22
- ]);
23
-
24
- const useRovingFocusGroupScope = createRovingFocusGroupScope();
25
- const useCheckboxScope = createCheckboxScope();
26
-
27
- interface CheckboxGroupContextValue {
28
- disabled: boolean;
29
- onItemCheck: (value: string) => void;
30
- onItemUncheck: (value: string) => void;
31
- required: boolean;
32
- name?: string;
33
- value?: string[];
34
- }
35
-
36
- const [CheckboxGroupProvider, useCheckboxGroupContext] =
37
- createCheckboxGroupContext<CheckboxGroupContextValue>(CHECKBOX_GROUP_NAME);
38
-
39
- type CheckboxGroupElement = React.ElementRef<typeof Primitive.div>;
40
-
41
- interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
42
- defaultValue?: string[];
43
- dir?: RovingFocusGroup.RovingFocusGroupProps['dir'];
44
- disabled?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['disabled'];
45
- loop?: RovingFocusGroup.RovingFocusGroupProps['loop'];
46
- name?: CheckboxGroupContextValue['name'];
47
- onValueChange?: (value: string[]) => void;
48
- orientation?: RovingFocusGroup.RovingFocusGroupProps['orientation'];
49
- required?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['required'];
50
- value?: CheckboxGroupContextValue['value'];
51
- }
52
-
53
- const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(
54
- (
55
- {
56
- __scopeCheckboxGroup,
57
- name,
58
- defaultValue,
59
- value: valueProp,
60
- required = false,
61
- disabled = false,
62
- orientation,
63
- dir,
64
- loop = true,
65
- onValueChange,
66
- ...props
67
- }: ScopedProps<CheckboxGroupProps>,
68
- forwardedRef,
69
- ) => {
70
- const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
71
- const direction = useDirection(dir);
72
- const [value = [], setValue] = useControllableState({
73
- prop: valueProp,
74
- defaultProp: defaultValue,
75
- onChange: onValueChange,
76
- });
77
-
78
- const handleItemCheck = React.useCallback(
79
- (itemValue: string) => {
80
- setValue((prevValue = []) => [...prevValue, itemValue]);
81
- },
82
- [setValue],
83
- );
84
-
85
- const handleItemUncheck = React.useCallback(
86
- (itemValue: string) => {
87
- setValue((prevValue = []) => prevValue.filter((val) => val !== itemValue));
88
- },
89
- [setValue],
90
- );
91
-
92
- return (
93
- <CheckboxGroupProvider
94
- disabled={disabled}
95
- name={name}
96
- required={required}
97
- scope={__scopeCheckboxGroup}
98
- value={value}
99
- onItemCheck={handleItemCheck}
100
- onItemUncheck={handleItemUncheck}
101
- >
102
- <RovingFocusGroup.Root asChild {...rovingFocusGroupScope} dir={direction} loop={loop} orientation={orientation}>
103
- {/* eslint-disable-next-line react/jsx-pascal-case -- radix-ui */}
104
- <Primitive.div
105
- ref={forwardedRef}
106
- data-disabled={disabled ? '' : undefined}
107
- dir={direction}
108
- role="group"
109
- {...props}
110
- />
111
- </RovingFocusGroup.Root>
112
- </CheckboxGroupProvider>
113
- );
114
- },
115
- );
116
-
117
- CheckboxGroup.displayName = CHECKBOX_GROUP_NAME;
118
-
119
- /* -------------------------------------------------------------------------------------------------
120
- * Component: CheckboxGroupItem
121
- * -----------------------------------------------------------------------------------------------*/
122
-
123
- const ITEM_NAME = `${CHECKBOX_GROUP_NAME}Item`;
124
-
125
- type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
126
-
127
- interface CheckboxGroupItemProps
128
- extends Omit<
129
- React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
130
- 'checked' | 'defaultChecked' | 'onCheckedChange' | 'name'
131
- > {
132
- value: string;
133
- }
134
-
135
- const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
136
- ({ __scopeCheckboxGroup, disabled, ...props }: ScopedProps<CheckboxGroupItemProps>, forwardedRef) => {
137
- const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
138
- const isDisabled = context.disabled || disabled;
139
- const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
140
- const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
141
- const checked = context.value?.includes(props.value);
142
-
143
- return (
144
- <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} active={checked} focusable={!isDisabled}>
145
- <CheckboxPrimitive.Root
146
- ref={forwardedRef}
147
- checked={checked}
148
- disabled={isDisabled}
149
- name={context.name}
150
- required={context.required}
151
- {...checkboxScope}
152
- {...props}
153
- onCheckedChange={(checkedState) => {
154
- if (checkedState) {
155
- context.onItemCheck(props.value);
156
- } else {
157
- context.onItemUncheck(props.value);
158
- }
159
- }}
160
- />
161
- </RovingFocusGroup.Item>
162
- );
163
- },
164
- );
165
-
166
- CheckboxGroupItem.displayName = ITEM_NAME;
167
-
168
- /* -------------------------------------------------------------------------------------------------
169
- * Component: CheckboxGroupIndicator
170
- * -----------------------------------------------------------------------------------------------*/
171
-
172
- const INDICATOR_NAME = `${CHECKBOX_GROUP_NAME}Indicator`;
173
-
174
- type CheckboxGroupIndicatorElement = React.ElementRef<typeof CheckboxPrimitive.Indicator>;
175
- type CheckboxGroupIndicatorProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>;
176
-
177
- const CheckboxGroupIndicator = React.forwardRef<CheckboxGroupIndicatorElement, CheckboxGroupIndicatorProps>(
178
- ({ __scopeCheckboxGroup, ...props }: ScopedProps<CheckboxGroupIndicatorProps>, forwardedRef) => {
179
- const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
180
-
181
- return <CheckboxPrimitive.Indicator ref={forwardedRef} {...checkboxScope} {...props} />;
182
- },
183
- );
184
-
185
- CheckboxGroupIndicator.displayName = INDICATOR_NAME;
186
-
187
- /* -----------------------------------------------------------------------------
188
- * Exports
189
- * -------------------------------------------------------------------------- */
190
-
191
- const Root = CheckboxGroup;
192
- const Item = CheckboxGroupItem;
193
- const Indicator = CheckboxGroupIndicator;
194
-
195
- export {
196
- createCheckboxGroupScope,
197
- CheckboxGroup,
198
- CheckboxGroupItem,
199
- CheckboxGroupIndicator,
200
- Root,
201
- Item,
202
- Indicator,
203
- type CheckboxGroupProps,
204
- type CheckboxGroupItemProps,
205
- type CheckboxGroupIndicatorProps,
206
- };
@@ -1,55 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import { CheckIcon } from '@radix-ui/react-icons';
5
- import { cn } from '../lib/utils';
6
- import * as CheckboxGroupPrimitive from './checkbox-group.primitive';
7
-
8
- /* -----------------------------------------------------------------------------
9
- * Component: CheckboxGroup
10
- * -------------------------------------------------------------------------- */
11
-
12
- type CheckboxGroupElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
13
- type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
14
-
15
- const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(
16
- ({ className, ...props }, forwardedRef) => {
17
- return <CheckboxGroupPrimitive.Root ref={forwardedRef} className={cn('grid gap-2', className)} {...props} />;
18
- },
19
- );
20
-
21
- CheckboxGroup.displayName = 'CheckboxGroup';
22
-
23
- /* -----------------------------------------------------------------------------
24
- * Component: CheckboxGroupItem
25
- * -------------------------------------------------------------------------- */
26
-
27
- type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
28
- type CheckboxGroupItemProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item>;
29
-
30
- const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
31
- ({ className, ...props }, forwardedRef) => {
32
- return (
33
- <CheckboxGroupPrimitive.Item
34
- ref={forwardedRef}
35
- className={cn(
36
- 'border-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
37
- className,
38
- )}
39
- {...props}
40
- >
41
- <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
42
- <CheckIcon className="size-3.5" />
43
- </CheckboxGroupPrimitive.CheckboxGroupIndicator>
44
- </CheckboxGroupPrimitive.Item>
45
- );
46
- },
47
- );
48
-
49
- CheckboxGroupItem.displayName = 'CheckboxGroupItem';
50
-
51
- /* -----------------------------------------------------------------------------
52
- * Exports
53
- * -------------------------------------------------------------------------- */
54
-
55
- export { CheckboxGroup, CheckboxGroupItem, type CheckboxGroupProps, type CheckboxGroupItemProps };
@@ -1,36 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
5
- import { CheckIcon } from '@radix-ui/react-icons';
6
- import { cn } from '../lib/utils';
7
-
8
- /* -----------------------------------------------------------------------------
9
- * Component: Checkbox
10
- * -------------------------------------------------------------------------- */
11
-
12
- type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
13
- type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
14
-
15
- const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className, ...props }, forwardedRef) => (
16
- <CheckboxPrimitive.Root
17
- ref={forwardedRef}
18
- className={cn(
19
- 'border-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-50',
20
- className,
21
- )}
22
- {...props}
23
- >
24
- <CheckboxPrimitive.Indicator className="flex size-full items-center justify-center text-current">
25
- <CheckIcon className="size-3.5" />
26
- </CheckboxPrimitive.Indicator>
27
- </CheckboxPrimitive.Root>
28
- ));
29
-
30
- Checkbox.displayName = CheckboxPrimitive.Root.displayName;
31
-
32
- /* -----------------------------------------------------------------------------
33
- * Exports
34
- * -------------------------------------------------------------------------- */
35
-
36
- export { Checkbox, type CheckboxProps };
@@ -1,26 +0,0 @@
1
- import * as React from 'react';
2
- import { Slot } from '@radix-ui/react-slot';
3
-
4
- /* -----------------------------------------------------------------------------
5
- * Component: Code
6
- * -------------------------------------------------------------------------- */
7
-
8
- type CodeElement = HTMLElement;
9
-
10
- interface CodeProps extends React.HTMLAttributes<HTMLElement> {
11
- asChild?: boolean;
12
- }
13
-
14
- const Code = React.forwardRef<CodeElement, CodeProps>(({ asChild, ...props }, forwardedRef) => {
15
- const Component = asChild ? Slot : 'code';
16
-
17
- return <Component ref={forwardedRef} {...props} />;
18
- });
19
-
20
- Code.displayName = 'Code';
21
-
22
- /* -----------------------------------------------------------------------------
23
- * Exports
24
- * -------------------------------------------------------------------------- */
25
-
26
- export { Code, type CodeProps };