@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.
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/package.json +70 -102
- package/dist/chunk-DH3YP4ZC.cjs +0 -2
- package/dist/chunk-DH3YP4ZC.cjs.map +0 -1
- package/dist/chunk-DTSAQICV.js +0 -2
- package/dist/chunk-DTSAQICV.js.map +0 -1
- package/dist/chunk-NH6X3FON.js +0 -2
- package/dist/chunk-NH6X3FON.js.map +0 -1
- package/dist/chunk-P563ILDJ.cjs +0 -2
- package/dist/chunk-P563ILDJ.cjs.map +0 -1
- package/dist/chunk-VVA2EE5V.js +0 -2
- package/dist/chunk-VVA2EE5V.js.map +0 -1
- package/dist/chunk-VZ6P3BCB.cjs +0 -2
- package/dist/chunk-VZ6P3BCB.cjs.map +0 -1
- package/dist/hooks/use-media-query.cjs +0 -2
- package/dist/hooks/use-media-query.cjs.map +0 -1
- package/dist/hooks/use-media-query.d.cts +0 -3
- package/dist/hooks/use-media-query.d.ts +0 -3
- package/dist/hooks/use-media-query.js +0 -2
- package/dist/hooks/use-media-query.js.map +0 -1
- package/dist/hooks/use-mutation-observer.cjs +0 -2
- package/dist/hooks/use-mutation-observer.cjs.map +0 -1
- package/dist/hooks/use-mutation-observer.d.cts +0 -5
- package/dist/hooks/use-mutation-observer.d.ts +0 -5
- package/dist/hooks/use-mutation-observer.js +0 -2
- package/dist/hooks/use-mutation-observer.js.map +0 -1
- package/dist/lib/colors.cjs +0 -2
- package/dist/lib/colors.cjs.map +0 -1
- package/dist/lib/colors.d.cts +0 -1759
- package/dist/lib/colors.d.ts +0 -1759
- package/dist/lib/colors.js +0 -2
- package/dist/lib/colors.js.map +0 -1
- package/dist/plugin/animate.plugin.cjs +0 -2
- package/dist/plugin/animate.plugin.cjs.map +0 -1
- package/dist/plugin/animate.plugin.js +0 -2
- package/dist/plugin/animate.plugin.js.map +0 -1
- package/dist/plugin/base.plugin.cjs +0 -2
- package/dist/plugin/base.plugin.cjs.map +0 -1
- package/dist/plugin/base.plugin.js +0 -2
- package/dist/plugin/base.plugin.js.map +0 -1
- package/dist/plugin/perspective.plugin.cjs +0 -2
- package/dist/plugin/perspective.plugin.cjs.map +0 -1
- package/dist/plugin/perspective.plugin.js +0 -2
- package/dist/plugin/perspective.plugin.js.map +0 -1
- package/dist/tailwind.config.cjs +0 -2
- package/dist/tailwind.config.cjs.map +0 -1
- package/dist/tailwind.config.js +0 -2
- package/dist/tailwind.config.js.map +0 -1
- package/plugin/animate.plugin.ts +0 -319
- package/plugin/base.plugin.ts +0 -21
- package/plugin/perspective.plugin.ts +0 -11
- package/src/hooks/use-media-query.ts +0 -22
- package/src/hooks/use-mutation-observer.ts +0 -26
- package/src/lib/colors.ts +0 -1757
- package/src/lib/utils.ts +0 -6
- package/src/react/accordion.tsx +0 -88
- package/src/react/alert-dialog.tsx +0 -185
- package/src/react/alert.tsx +0 -73
- package/src/react/aspect-ratio.tsx +0 -17
- package/src/react/avatar.tsx +0 -60
- package/src/react/badge.tsx +0 -39
- package/src/react/blockquote.tsx +0 -26
- package/src/react/box.tsx +0 -34
- package/src/react/breadcrumb.tsx +0 -154
- package/src/react/button.tsx +0 -94
- package/src/react/calendar.tsx +0 -79
- package/src/react/card.tsx +0 -109
- package/src/react/carousel.tsx +0 -299
- package/src/react/checkbox-cards.tsx +0 -61
- package/src/react/checkbox-group.primitive.tsx +0 -206
- package/src/react/checkbox-group.tsx +0 -55
- package/src/react/checkbox.tsx +0 -36
- package/src/react/code.tsx +0 -26
- package/src/react/collapsible.tsx +0 -54
- package/src/react/command.tsx +0 -209
- package/src/react/container.tsx +0 -29
- package/src/react/context-menu.tsx +0 -306
- package/src/react/data-table.tsx +0 -249
- package/src/react/dialog.tsx +0 -160
- package/src/react/drawer.tsx +0 -136
- package/src/react/dropdown-menu.tsx +0 -290
- package/src/react/em.tsx +0 -26
- package/src/react/form.tsx +0 -234
- package/src/react/heading.tsx +0 -29
- package/src/react/hover-card.tsx +0 -75
- package/src/react/input-otp.tsx +0 -120
- package/src/react/input.tsx +0 -145
- package/src/react/kbd.tsx +0 -36
- package/src/react/label.tsx +0 -31
- package/src/react/menubar.tsx +0 -322
- package/src/react/navigation-menu.tsx +0 -192
- package/src/react/pagination.tsx +0 -150
- package/src/react/popover.tsx +0 -84
- package/src/react/pre.tsx +0 -26
- package/src/react/progress.tsx +0 -35
- package/src/react/quote.tsx +0 -26
- package/src/react/radio-cards.tsx +0 -48
- package/src/react/radio-group.tsx +0 -50
- package/src/react/radio.tsx +0 -40
- package/src/react/resizable.tsx +0 -62
- package/src/react/scroll-area.tsx +0 -106
- package/src/react/section.tsx +0 -26
- package/src/react/select.tsx +0 -219
- package/src/react/separator.tsx +0 -32
- package/src/react/sheet.tsx +0 -178
- package/src/react/skeleton.tsx +0 -18
- package/src/react/slider.tsx +0 -41
- package/src/react/sonner.tsx +0 -40
- package/src/react/spinner.tsx +0 -68
- package/src/react/strong.tsx +0 -26
- package/src/react/switch.tsx +0 -33
- package/src/react/table.tsx +0 -148
- package/src/react/tabs.tsx +0 -87
- package/src/react/text-input.tsx +0 -36
- package/src/react/text.tsx +0 -34
- package/src/react/textarea.tsx +0 -30
- package/src/react/toggle-group.tsx +0 -84
- package/src/react/toggle.tsx +0 -49
- package/src/react/tooltip.tsx +0 -83
- package/src/styles/styles.css +0 -3
- package/tailwind.config.ts +0 -126
package/src/react/input-otp.tsx
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { DotFilledIcon } from '@radix-ui/react-icons';
|
|
5
|
-
import {
|
|
6
|
-
OTPInput,
|
|
7
|
-
OTPInputContext,
|
|
8
|
-
REGEXP_ONLY_CHARS,
|
|
9
|
-
REGEXP_ONLY_DIGITS,
|
|
10
|
-
REGEXP_ONLY_DIGITS_AND_CHARS,
|
|
11
|
-
} from 'input-otp';
|
|
12
|
-
import { cn } from '../lib/utils';
|
|
13
|
-
|
|
14
|
-
/* -----------------------------------------------------------------------------
|
|
15
|
-
* Component: InputOtp
|
|
16
|
-
* -------------------------------------------------------------------------- */
|
|
17
|
-
|
|
18
|
-
type InputOTPElement = React.ElementRef<typeof OTPInput>;
|
|
19
|
-
type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
|
|
20
|
-
|
|
21
|
-
const InputOTP = React.forwardRef<InputOTPElement, InputOTPProps>(
|
|
22
|
-
({ className, containerClassName, ...props }, forwardedRef) => (
|
|
23
|
-
<OTPInput
|
|
24
|
-
ref={forwardedRef}
|
|
25
|
-
className={cn('disabled:cursor-default', className)}
|
|
26
|
-
containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
|
|
27
|
-
{...props}
|
|
28
|
-
/>
|
|
29
|
-
),
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
InputOTP.displayName = 'InputOTP';
|
|
33
|
-
|
|
34
|
-
/* -----------------------------------------------------------------------------
|
|
35
|
-
* Component: InputOTPGroup
|
|
36
|
-
* -------------------------------------------------------------------------- */
|
|
37
|
-
|
|
38
|
-
type InputOTPGroupElement = HTMLDivElement;
|
|
39
|
-
type InputOTPGroupProps = React.HTMLAttributes<HTMLDivElement>;
|
|
40
|
-
|
|
41
|
-
const InputOTPGroup = React.forwardRef<InputOTPGroupElement, InputOTPGroupProps>(
|
|
42
|
-
({ className, ...props }, forwardedRef) => (
|
|
43
|
-
<div ref={forwardedRef} className={cn('flex items-center', className)} {...props} />
|
|
44
|
-
),
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
InputOTPGroup.displayName = 'InputOTPGroup';
|
|
48
|
-
|
|
49
|
-
/* -----------------------------------------------------------------------------
|
|
50
|
-
* Component: InputOTPSlot
|
|
51
|
-
* -------------------------------------------------------------------------- */
|
|
52
|
-
|
|
53
|
-
type InputOTPSlotElement = HTMLDivElement;
|
|
54
|
-
|
|
55
|
-
interface InputOTPSlotProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
56
|
-
index: number;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(
|
|
60
|
-
({ index, className, ...props }, forwardedRef) => {
|
|
61
|
-
const inputOTPContext = React.useContext(OTPInputContext);
|
|
62
|
-
const slot = inputOTPContext.slots[index];
|
|
63
|
-
|
|
64
|
-
return (
|
|
65
|
-
<div
|
|
66
|
-
ref={forwardedRef}
|
|
67
|
-
className={cn(
|
|
68
|
-
'border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
|
|
69
|
-
slot?.isActive && 'z-10 outline outline-2',
|
|
70
|
-
className,
|
|
71
|
-
)}
|
|
72
|
-
{...props}
|
|
73
|
-
>
|
|
74
|
-
{slot?.char}
|
|
75
|
-
{slot?.hasFakeCaret ? (
|
|
76
|
-
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
|
77
|
-
<div className="animate-caret-blink bg-foreground animate-duration-1000 h-4 w-px" />
|
|
78
|
-
</div>
|
|
79
|
-
) : null}
|
|
80
|
-
</div>
|
|
81
|
-
);
|
|
82
|
-
},
|
|
83
|
-
);
|
|
84
|
-
|
|
85
|
-
InputOTPSlot.displayName = 'InputOTPSlot';
|
|
86
|
-
|
|
87
|
-
/* -----------------------------------------------------------------------------
|
|
88
|
-
* Component: InputOTPSeparator
|
|
89
|
-
* -------------------------------------------------------------------------- */
|
|
90
|
-
|
|
91
|
-
type InputOTPSeparatorElement = HTMLDivElement;
|
|
92
|
-
type InputOTPSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
|
|
93
|
-
|
|
94
|
-
const InputOTPSeparator = React.forwardRef<InputOTPSeparatorElement, InputOTPSeparatorProps>(
|
|
95
|
-
({ ...props }, forwardedRef) => (
|
|
96
|
-
<div ref={forwardedRef} role="separator" {...props}>
|
|
97
|
-
<DotFilledIcon />
|
|
98
|
-
</div>
|
|
99
|
-
),
|
|
100
|
-
);
|
|
101
|
-
|
|
102
|
-
InputOTPSeparator.displayName = 'InputOTPSeparator';
|
|
103
|
-
|
|
104
|
-
/* -----------------------------------------------------------------------------
|
|
105
|
-
* Exports
|
|
106
|
-
* -------------------------------------------------------------------------- */
|
|
107
|
-
|
|
108
|
-
export {
|
|
109
|
-
InputOTP,
|
|
110
|
-
InputOTPGroup,
|
|
111
|
-
InputOTPSlot,
|
|
112
|
-
InputOTPSeparator,
|
|
113
|
-
type InputOTPProps,
|
|
114
|
-
type InputOTPGroupProps,
|
|
115
|
-
type InputOTPSlotProps,
|
|
116
|
-
type InputOTPSeparatorProps,
|
|
117
|
-
REGEXP_ONLY_DIGITS_AND_CHARS,
|
|
118
|
-
REGEXP_ONLY_CHARS,
|
|
119
|
-
REGEXP_ONLY_DIGITS,
|
|
120
|
-
};
|
package/src/react/input.tsx
DELETED
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { tv, type VariantProps } from 'tailwind-variants';
|
|
5
|
-
import { createContextScope, type Scope } from '@radix-ui/react-context';
|
|
6
|
-
import { useComposedRefs } from '@radix-ui/react-compose-refs';
|
|
7
|
-
import { Spinner } from './spinner';
|
|
8
|
-
|
|
9
|
-
/* -----------------------------------------------------------------------------
|
|
10
|
-
* Variant: Input
|
|
11
|
-
* -------------------------------------------------------------------------- */
|
|
12
|
-
|
|
13
|
-
const inputVariants = tv({
|
|
14
|
-
slots: {
|
|
15
|
-
root: 'border-input inline-flex w-full cursor-text items-center gap-3 rounded-md border bg-transparent px-3 shadow-sm transition focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 has-[input[disabled]]:cursor-default has-[input[disabled]]:opacity-50 [&_svg]:size-4',
|
|
16
|
-
slot: 'placeholder:text-muted-foreground size-full flex-1 bg-transparent text-sm outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-default',
|
|
17
|
-
},
|
|
18
|
-
variants: {
|
|
19
|
-
inputSize: {
|
|
20
|
-
default: {
|
|
21
|
-
root: 'h-10',
|
|
22
|
-
},
|
|
23
|
-
xs: {
|
|
24
|
-
root: 'h-8',
|
|
25
|
-
},
|
|
26
|
-
sm: {
|
|
27
|
-
root: 'h-9',
|
|
28
|
-
},
|
|
29
|
-
lg: {
|
|
30
|
-
root: 'h-11',
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
defaultVariants: {
|
|
35
|
-
inputSize: 'default',
|
|
36
|
-
},
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
type InputVariantsProps = VariantProps<typeof inputVariants>;
|
|
40
|
-
|
|
41
|
-
const { root, slot } = inputVariants();
|
|
42
|
-
|
|
43
|
-
/* -----------------------------------------------------------------------------
|
|
44
|
-
* Context: Input
|
|
45
|
-
* -------------------------------------------------------------------------- */
|
|
46
|
-
|
|
47
|
-
const INPUT_NAME = 'Input';
|
|
48
|
-
|
|
49
|
-
type ScopedProps<P> = P & { __scopeInput?: Scope };
|
|
50
|
-
const [createInputContext, createInputScope] = createContextScope(INPUT_NAME);
|
|
51
|
-
|
|
52
|
-
interface InputContextValue {
|
|
53
|
-
inputRef: React.RefObject<HTMLInputElement>;
|
|
54
|
-
disabled?: boolean;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
const [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);
|
|
58
|
-
|
|
59
|
-
/* -----------------------------------------------------------------------------
|
|
60
|
-
* Component: Input
|
|
61
|
-
* -------------------------------------------------------------------------- */
|
|
62
|
-
|
|
63
|
-
interface InputProps extends React.PropsWithChildren, InputVariantsProps {
|
|
64
|
-
className?: string | undefined;
|
|
65
|
-
loaderPosition?: 'prefix' | 'suffix';
|
|
66
|
-
loading?: boolean;
|
|
67
|
-
prefix?: React.ReactNode;
|
|
68
|
-
suffix?: React.ReactNode;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
function Input({
|
|
72
|
-
__scopeInput,
|
|
73
|
-
className,
|
|
74
|
-
prefix,
|
|
75
|
-
suffix,
|
|
76
|
-
loading,
|
|
77
|
-
loaderPosition,
|
|
78
|
-
inputSize,
|
|
79
|
-
children,
|
|
80
|
-
...props
|
|
81
|
-
}: ScopedProps<InputProps>): React.JSX.Element {
|
|
82
|
-
const inputRef = React.useRef<HTMLInputElement>(null);
|
|
83
|
-
|
|
84
|
-
const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = (event) => {
|
|
85
|
-
const target = event.target as HTMLElement;
|
|
86
|
-
|
|
87
|
-
if (target.closest('input, a, button')) {
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
const inputElement = inputRef.current;
|
|
92
|
-
|
|
93
|
-
if (!inputElement) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
requestAnimationFrame(() => {
|
|
98
|
-
inputElement.focus();
|
|
99
|
-
});
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
return (
|
|
103
|
-
<InputProvider inputRef={inputRef} scope={__scopeInput}>
|
|
104
|
-
<div className={root({ inputSize, className })} {...props} role="presentation" onPointerDown={handlePointerDown}>
|
|
105
|
-
{loading && loaderPosition === 'prefix' ? <Spinner /> : prefix}
|
|
106
|
-
{children}
|
|
107
|
-
{loading && loaderPosition === 'suffix' ? <Spinner /> : suffix}
|
|
108
|
-
</div>
|
|
109
|
-
</InputProvider>
|
|
110
|
-
);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
/* -----------------------------------------------------------------------------
|
|
114
|
-
* Component: InputSlot
|
|
115
|
-
* -------------------------------------------------------------------------- */
|
|
116
|
-
|
|
117
|
-
const INPUT_SLOT_NAME = 'InputSlot';
|
|
118
|
-
|
|
119
|
-
type InputSlotElement = HTMLInputElement;
|
|
120
|
-
type InputSlotProps = React.InputHTMLAttributes<HTMLInputElement>;
|
|
121
|
-
|
|
122
|
-
const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>(
|
|
123
|
-
({ __scopeInput, className, ...props }: ScopedProps<InputSlotProps>, forwardedRef) => {
|
|
124
|
-
const context = useInputContext(INPUT_SLOT_NAME, __scopeInput);
|
|
125
|
-
const composedInputRef = useComposedRefs(forwardedRef, context.inputRef);
|
|
126
|
-
|
|
127
|
-
return <input ref={composedInputRef} className={slot({ className })} type="text" {...props} />;
|
|
128
|
-
},
|
|
129
|
-
);
|
|
130
|
-
|
|
131
|
-
InputSlot.displayName = 'Input';
|
|
132
|
-
|
|
133
|
-
/* -----------------------------------------------------------------------------
|
|
134
|
-
* Exports
|
|
135
|
-
* -------------------------------------------------------------------------- */
|
|
136
|
-
|
|
137
|
-
export {
|
|
138
|
-
createInputScope,
|
|
139
|
-
Input,
|
|
140
|
-
InputSlot,
|
|
141
|
-
inputVariants,
|
|
142
|
-
type InputProps,
|
|
143
|
-
type InputSlotProps,
|
|
144
|
-
type InputVariantsProps,
|
|
145
|
-
};
|
package/src/react/kbd.tsx
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
3
|
-
import { cn } from '../lib/utils';
|
|
4
|
-
|
|
5
|
-
/* -----------------------------------------------------------------------------
|
|
6
|
-
* Component: Kbd
|
|
7
|
-
* -------------------------------------------------------------------------- */
|
|
8
|
-
|
|
9
|
-
type KbdElement = HTMLElement;
|
|
10
|
-
|
|
11
|
-
interface KbdProps extends React.HTMLAttributes<HTMLElement> {
|
|
12
|
-
asChild?: boolean;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const Kbd = React.forwardRef<KbdElement, KbdProps>(({ asChild, className, ...props }, forwardedRef) => {
|
|
16
|
-
const Component = asChild ? Slot : 'kbd';
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<Component
|
|
20
|
-
ref={forwardedRef}
|
|
21
|
-
className={cn(
|
|
22
|
-
'bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium',
|
|
23
|
-
className,
|
|
24
|
-
)}
|
|
25
|
-
{...props}
|
|
26
|
-
/>
|
|
27
|
-
);
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
Kbd.displayName = 'Kbd';
|
|
31
|
-
|
|
32
|
-
/* -----------------------------------------------------------------------------
|
|
33
|
-
* Exports
|
|
34
|
-
* -------------------------------------------------------------------------- */
|
|
35
|
-
|
|
36
|
-
export { Kbd, type KbdProps };
|
package/src/react/label.tsx
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
5
|
-
import { cn } from '../lib/utils';
|
|
6
|
-
|
|
7
|
-
/* -----------------------------------------------------------------------------
|
|
8
|
-
* Component: Label
|
|
9
|
-
* -------------------------------------------------------------------------- */
|
|
10
|
-
|
|
11
|
-
type LabelElement = React.ElementRef<typeof LabelPrimitive.Root>;
|
|
12
|
-
type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
|
|
13
|
-
|
|
14
|
-
const Label = React.forwardRef<LabelElement, LabelProps>(({ className, ...props }, forwardedRef) => (
|
|
15
|
-
<LabelPrimitive.Root
|
|
16
|
-
ref={forwardedRef}
|
|
17
|
-
className={cn(
|
|
18
|
-
'text-sm font-medium leading-none peer-disabled:pointer-events-none peer-disabled:opacity-70',
|
|
19
|
-
className,
|
|
20
|
-
)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
));
|
|
24
|
-
|
|
25
|
-
Label.displayName = LabelPrimitive.Root.displayName;
|
|
26
|
-
|
|
27
|
-
/* -----------------------------------------------------------------------------
|
|
28
|
-
* Exports
|
|
29
|
-
* -------------------------------------------------------------------------- */
|
|
30
|
-
|
|
31
|
-
export { Label, type LabelProps };
|
package/src/react/menubar.tsx
DELETED
|
@@ -1,322 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
|
|
5
|
-
import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
|
6
|
-
import { cn } from '../lib/utils';
|
|
7
|
-
|
|
8
|
-
/* -----------------------------------------------------------------------------
|
|
9
|
-
* Component: MenubarMenu
|
|
10
|
-
* -------------------------------------------------------------------------- */
|
|
11
|
-
|
|
12
|
-
type MenubarMenuProps = React.ComponentProps<typeof MenubarPrimitive.Menu>;
|
|
13
|
-
const MenubarMenu = MenubarPrimitive.Menu;
|
|
14
|
-
|
|
15
|
-
/* -----------------------------------------------------------------------------
|
|
16
|
-
* Component: MenubarGroup
|
|
17
|
-
* -------------------------------------------------------------------------- */
|
|
18
|
-
|
|
19
|
-
type MenubarGroupProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Group>;
|
|
20
|
-
const MenubarGroup = MenubarPrimitive.Group;
|
|
21
|
-
|
|
22
|
-
/* -----------------------------------------------------------------------------
|
|
23
|
-
* Component: MenubarSub
|
|
24
|
-
* -------------------------------------------------------------------------- */
|
|
25
|
-
|
|
26
|
-
type MenubarSubProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Sub>;
|
|
27
|
-
const MenubarSub = MenubarPrimitive.Sub;
|
|
28
|
-
|
|
29
|
-
/* -----------------------------------------------------------------------------
|
|
30
|
-
* Component: MenubarRadioGroup
|
|
31
|
-
* -------------------------------------------------------------------------- */
|
|
32
|
-
|
|
33
|
-
type MenubarRadioGroupProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioGroup>;
|
|
34
|
-
const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
|
|
35
|
-
|
|
36
|
-
/* -----------------------------------------------------------------------------
|
|
37
|
-
* Component: Menubar
|
|
38
|
-
* -------------------------------------------------------------------------- */
|
|
39
|
-
|
|
40
|
-
type MenubarElement = React.ElementRef<typeof MenubarPrimitive.Root>;
|
|
41
|
-
type MenubarProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>;
|
|
42
|
-
|
|
43
|
-
const Menubar = React.forwardRef<MenubarElement, MenubarProps>(({ className, ...props }, forwardedRef) => (
|
|
44
|
-
<MenubarPrimitive.Root
|
|
45
|
-
ref={forwardedRef}
|
|
46
|
-
className={cn('bg-background flex h-10 items-center space-x-1 rounded-md border p-1 shadow-sm', className)}
|
|
47
|
-
{...props}
|
|
48
|
-
/>
|
|
49
|
-
));
|
|
50
|
-
|
|
51
|
-
Menubar.displayName = MenubarPrimitive.Root.displayName;
|
|
52
|
-
|
|
53
|
-
/* -----------------------------------------------------------------------------
|
|
54
|
-
* Component: MenubarTrigger
|
|
55
|
-
* -------------------------------------------------------------------------- */
|
|
56
|
-
|
|
57
|
-
type MenubarTriggerElement = React.ElementRef<typeof MenubarPrimitive.Trigger>;
|
|
58
|
-
type MenubarTriggerProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>;
|
|
59
|
-
|
|
60
|
-
const MenubarTrigger = React.forwardRef<MenubarTriggerElement, MenubarTriggerProps>(
|
|
61
|
-
({ className, ...props }, forwardedRef) => (
|
|
62
|
-
<MenubarPrimitive.Trigger
|
|
63
|
-
ref={forwardedRef}
|
|
64
|
-
className={cn(
|
|
65
|
-
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer select-none items-center rounded-sm px-3 py-1 text-sm font-medium focus:outline-none',
|
|
66
|
-
className,
|
|
67
|
-
)}
|
|
68
|
-
{...props}
|
|
69
|
-
/>
|
|
70
|
-
),
|
|
71
|
-
);
|
|
72
|
-
|
|
73
|
-
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
|
|
74
|
-
|
|
75
|
-
/* -----------------------------------------------------------------------------
|
|
76
|
-
* Component: MenubarSubTrigger
|
|
77
|
-
* -------------------------------------------------------------------------- */
|
|
78
|
-
|
|
79
|
-
type MenubarSubTriggerElement = React.ElementRef<typeof MenubarPrimitive.SubTrigger>;
|
|
80
|
-
|
|
81
|
-
interface MenubarSubTriggerProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> {
|
|
82
|
-
inset?: boolean;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
const MenubarSubTrigger = React.forwardRef<MenubarSubTriggerElement, MenubarSubTriggerProps>(
|
|
86
|
-
({ children, className, inset, ...props }, forwardedRef) => (
|
|
87
|
-
<MenubarPrimitive.SubTrigger
|
|
88
|
-
ref={forwardedRef}
|
|
89
|
-
className={cn(
|
|
90
|
-
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none',
|
|
91
|
-
inset && 'pl-8',
|
|
92
|
-
className,
|
|
93
|
-
)}
|
|
94
|
-
{...props}
|
|
95
|
-
>
|
|
96
|
-
{children}
|
|
97
|
-
<ChevronRightIcon className="ml-auto size-4" />
|
|
98
|
-
</MenubarPrimitive.SubTrigger>
|
|
99
|
-
),
|
|
100
|
-
);
|
|
101
|
-
|
|
102
|
-
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
|
|
103
|
-
|
|
104
|
-
/* -----------------------------------------------------------------------------
|
|
105
|
-
* Component: MenubarSubContent
|
|
106
|
-
* -------------------------------------------------------------------------- */
|
|
107
|
-
|
|
108
|
-
type MenubarSubContentElement = React.ElementRef<typeof MenubarPrimitive.SubContent>;
|
|
109
|
-
type MenubarSubContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>;
|
|
110
|
-
|
|
111
|
-
const MenubarSubContent = React.forwardRef<MenubarSubContentElement, MenubarSubContentProps>(
|
|
112
|
-
({ className, ...props }, forwardedRef) => (
|
|
113
|
-
<MenubarPrimitive.Portal>
|
|
114
|
-
<MenubarPrimitive.SubContent
|
|
115
|
-
ref={forwardedRef}
|
|
116
|
-
className={cn(
|
|
117
|
-
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
|
|
118
|
-
className,
|
|
119
|
-
)}
|
|
120
|
-
{...props}
|
|
121
|
-
/>
|
|
122
|
-
</MenubarPrimitive.Portal>
|
|
123
|
-
),
|
|
124
|
-
);
|
|
125
|
-
|
|
126
|
-
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
|
|
127
|
-
|
|
128
|
-
/* -----------------------------------------------------------------------------
|
|
129
|
-
* Component: MenubarContent
|
|
130
|
-
* -------------------------------------------------------------------------- */
|
|
131
|
-
|
|
132
|
-
type MenubarContentElement = React.ElementRef<typeof MenubarPrimitive.Content>;
|
|
133
|
-
type MenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>;
|
|
134
|
-
|
|
135
|
-
const MenubarContent = React.forwardRef<MenubarContentElement, MenubarContentProps>(
|
|
136
|
-
({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, forwardedRef) => (
|
|
137
|
-
<MenubarPrimitive.Portal>
|
|
138
|
-
<MenubarPrimitive.Content
|
|
139
|
-
ref={forwardedRef}
|
|
140
|
-
align={align}
|
|
141
|
-
alignOffset={alignOffset}
|
|
142
|
-
className={cn(
|
|
143
|
-
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
|
|
144
|
-
className,
|
|
145
|
-
)}
|
|
146
|
-
sideOffset={sideOffset}
|
|
147
|
-
{...props}
|
|
148
|
-
/>
|
|
149
|
-
</MenubarPrimitive.Portal>
|
|
150
|
-
),
|
|
151
|
-
);
|
|
152
|
-
|
|
153
|
-
MenubarContent.displayName = MenubarPrimitive.Content.displayName;
|
|
154
|
-
|
|
155
|
-
/* -----------------------------------------------------------------------------
|
|
156
|
-
* Component: MenubarItem
|
|
157
|
-
* -------------------------------------------------------------------------- */
|
|
158
|
-
|
|
159
|
-
type MenubarItemElement = React.ElementRef<typeof MenubarPrimitive.Item>;
|
|
160
|
-
|
|
161
|
-
interface MenubarItemProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> {
|
|
162
|
-
inset?: boolean;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
const MenubarItem = React.forwardRef<MenubarItemElement, MenubarItemProps>(
|
|
166
|
-
({ className, inset, ...props }, forwardedRef) => (
|
|
167
|
-
<MenubarPrimitive.Item
|
|
168
|
-
ref={forwardedRef}
|
|
169
|
-
className={cn(
|
|
170
|
-
'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
|
|
171
|
-
inset && 'pl-8',
|
|
172
|
-
className,
|
|
173
|
-
)}
|
|
174
|
-
{...props}
|
|
175
|
-
/>
|
|
176
|
-
),
|
|
177
|
-
);
|
|
178
|
-
|
|
179
|
-
MenubarItem.displayName = MenubarPrimitive.Item.displayName;
|
|
180
|
-
|
|
181
|
-
/* -----------------------------------------------------------------------------
|
|
182
|
-
* Component: MenubarCheckboxItem
|
|
183
|
-
* -------------------------------------------------------------------------- */
|
|
184
|
-
|
|
185
|
-
type MenubarCheckboxItemElement = React.ElementRef<typeof MenubarPrimitive.CheckboxItem>;
|
|
186
|
-
type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>;
|
|
187
|
-
|
|
188
|
-
const MenubarCheckboxItem = React.forwardRef<MenubarCheckboxItemElement, MenubarCheckboxItemProps>(
|
|
189
|
-
({ children, className, checked, ...props }, forwardedRef) => (
|
|
190
|
-
<MenubarPrimitive.CheckboxItem
|
|
191
|
-
ref={forwardedRef}
|
|
192
|
-
checked={checked}
|
|
193
|
-
className={cn(
|
|
194
|
-
'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
|
|
195
|
-
className,
|
|
196
|
-
)}
|
|
197
|
-
{...props}
|
|
198
|
-
>
|
|
199
|
-
<span className="absolute left-2 flex size-3.5 items-center justify-center">
|
|
200
|
-
<MenubarPrimitive.ItemIndicator>
|
|
201
|
-
<CheckIcon className="size-4" />
|
|
202
|
-
</MenubarPrimitive.ItemIndicator>
|
|
203
|
-
</span>
|
|
204
|
-
{children}
|
|
205
|
-
</MenubarPrimitive.CheckboxItem>
|
|
206
|
-
),
|
|
207
|
-
);
|
|
208
|
-
|
|
209
|
-
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
|
|
210
|
-
|
|
211
|
-
/* -----------------------------------------------------------------------------
|
|
212
|
-
* Component: MenubarRadioItem
|
|
213
|
-
* -------------------------------------------------------------------------- */
|
|
214
|
-
|
|
215
|
-
type MenubarRadioItemElement = React.ElementRef<typeof MenubarPrimitive.RadioItem>;
|
|
216
|
-
type MenubarRadioItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>;
|
|
217
|
-
|
|
218
|
-
const MenubarRadioItem = React.forwardRef<MenubarRadioItemElement, MenubarRadioItemProps>(
|
|
219
|
-
({ children, className, ...props }, forwardedRef) => (
|
|
220
|
-
<MenubarPrimitive.RadioItem
|
|
221
|
-
ref={forwardedRef}
|
|
222
|
-
className={cn(
|
|
223
|
-
'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
|
|
224
|
-
className,
|
|
225
|
-
)}
|
|
226
|
-
{...props}
|
|
227
|
-
>
|
|
228
|
-
<span className="absolute left-2 flex size-3.5 items-center justify-center">
|
|
229
|
-
<MenubarPrimitive.ItemIndicator>
|
|
230
|
-
<DotFilledIcon className="size-4 fill-current" />
|
|
231
|
-
</MenubarPrimitive.ItemIndicator>
|
|
232
|
-
</span>
|
|
233
|
-
{children}
|
|
234
|
-
</MenubarPrimitive.RadioItem>
|
|
235
|
-
),
|
|
236
|
-
);
|
|
237
|
-
|
|
238
|
-
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
|
|
239
|
-
|
|
240
|
-
/* -----------------------------------------------------------------------------
|
|
241
|
-
* Component: MenubarLabel
|
|
242
|
-
* -------------------------------------------------------------------------- */
|
|
243
|
-
|
|
244
|
-
type MenubarLabelElement = React.ElementRef<typeof MenubarPrimitive.Label>;
|
|
245
|
-
|
|
246
|
-
interface MenubarLabelProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> {
|
|
247
|
-
inset?: boolean;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
const MenubarLabel = React.forwardRef<MenubarLabelElement, MenubarLabelProps>(
|
|
251
|
-
({ className, inset, ...props }, forwardedRef) => (
|
|
252
|
-
<MenubarPrimitive.Label
|
|
253
|
-
ref={forwardedRef}
|
|
254
|
-
className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
|
|
255
|
-
{...props}
|
|
256
|
-
/>
|
|
257
|
-
),
|
|
258
|
-
);
|
|
259
|
-
|
|
260
|
-
MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
|
|
261
|
-
|
|
262
|
-
/* -----------------------------------------------------------------------------
|
|
263
|
-
* Component: MenubarSeparator
|
|
264
|
-
* -------------------------------------------------------------------------- */
|
|
265
|
-
|
|
266
|
-
type MenubarSeparatorElement = React.ElementRef<typeof MenubarPrimitive.Separator>;
|
|
267
|
-
type MenubarSeparatorProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>;
|
|
268
|
-
|
|
269
|
-
const MenubarSeparator = React.forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(
|
|
270
|
-
({ className, ...props }, forwardedRef) => (
|
|
271
|
-
<MenubarPrimitive.Separator ref={forwardedRef} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
|
|
272
|
-
),
|
|
273
|
-
);
|
|
274
|
-
|
|
275
|
-
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
|
|
276
|
-
|
|
277
|
-
/* -----------------------------------------------------------------------------
|
|
278
|
-
* Component: MenubarShortcut
|
|
279
|
-
* -------------------------------------------------------------------------- */
|
|
280
|
-
|
|
281
|
-
type MenubarShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
282
|
-
|
|
283
|
-
function MenubarShortcut({ className, ...props }: MenubarShortcutProps): React.JSX.Element {
|
|
284
|
-
return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
/* -----------------------------------------------------------------------------
|
|
288
|
-
* Exports
|
|
289
|
-
* -------------------------------------------------------------------------- */
|
|
290
|
-
|
|
291
|
-
export {
|
|
292
|
-
Menubar,
|
|
293
|
-
MenubarMenu,
|
|
294
|
-
MenubarTrigger,
|
|
295
|
-
MenubarContent,
|
|
296
|
-
MenubarItem,
|
|
297
|
-
MenubarSeparator,
|
|
298
|
-
MenubarLabel,
|
|
299
|
-
MenubarCheckboxItem,
|
|
300
|
-
MenubarRadioGroup,
|
|
301
|
-
MenubarRadioItem,
|
|
302
|
-
MenubarSubContent,
|
|
303
|
-
MenubarSubTrigger,
|
|
304
|
-
MenubarGroup,
|
|
305
|
-
MenubarSub,
|
|
306
|
-
MenubarShortcut,
|
|
307
|
-
type MenubarProps,
|
|
308
|
-
type MenubarMenuProps,
|
|
309
|
-
type MenubarTriggerProps,
|
|
310
|
-
type MenubarContentProps,
|
|
311
|
-
type MenubarItemProps,
|
|
312
|
-
type MenubarSeparatorProps,
|
|
313
|
-
type MenubarLabelProps,
|
|
314
|
-
type MenubarCheckboxItemProps,
|
|
315
|
-
type MenubarRadioGroupProps,
|
|
316
|
-
type MenubarRadioItemProps,
|
|
317
|
-
type MenubarSubContentProps,
|
|
318
|
-
type MenubarSubTriggerProps,
|
|
319
|
-
type MenubarGroupProps,
|
|
320
|
-
type MenubarSubProps,
|
|
321
|
-
type MenubarShortcutProps,
|
|
322
|
-
};
|