beez-ui 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/LICENSE.md +21 -0
  3. package/README.md +113 -0
  4. package/assets/fonts/geist-LICENSE.txt +93 -0
  5. package/assets/fonts/geist-latin-variable.woff2 +0 -0
  6. package/assets/fonts/ibm-plex-mono-latin-400.woff2 +0 -0
  7. package/assets/fonts/ibm-plex-mono-latin-500.woff2 +0 -0
  8. package/assets/fonts/ibmplexmono-LICENSE.txt +93 -0
  9. package/assets/fonts/poppins-LICENSE.txt +93 -0
  10. package/assets/fonts/poppins-latin-600.woff2 +0 -0
  11. package/dist/adapters/unpic-image.d.ts +3 -0
  12. package/dist/adapters/unpic-image.js +20 -0
  13. package/dist/components/alert-dialog.d.ts +18 -0
  14. package/dist/components/alert-dialog.js +42 -0
  15. package/dist/components/alert.d.ts +10 -0
  16. package/dist/components/alert.js +28 -0
  17. package/dist/components/animated-theme-toggler.d.ts +8 -0
  18. package/dist/components/animated-theme-toggler.js +88 -0
  19. package/dist/components/avatar.d.ts +16 -0
  20. package/dist/components/avatar.js +26 -0
  21. package/dist/components/badge.d.ts +9 -0
  22. package/dist/components/badge.js +24 -0
  23. package/dist/components/button.d.ts +10 -0
  24. package/dist/components/button.js +37 -0
  25. package/dist/components/calendar.d.ts +10 -0
  26. package/dist/components/calendar.js +77 -0
  27. package/dist/components/card.d.ts +11 -0
  28. package/dist/components/card.js +24 -0
  29. package/dist/components/carousel.d.ts +28 -0
  30. package/dist/components/carousel.js +98 -0
  31. package/dist/components/checkbox.d.ts +4 -0
  32. package/dist/components/checkbox.js +9 -0
  33. package/dist/components/data-table.d.ts +117 -0
  34. package/dist/components/data-table.js +612 -0
  35. package/dist/components/dialog.d.ts +17 -0
  36. package/dist/components/dialog.js +37 -0
  37. package/dist/components/dropdown-menu.d.ts +29 -0
  38. package/dist/components/dropdown-menu.js +51 -0
  39. package/dist/components/filter-query-bar.d.ts +21 -0
  40. package/dist/components/filter-query-bar.js +526 -0
  41. package/dist/components/filter-query-grammar.d.ts +188 -0
  42. package/dist/components/filter-query-grammar.js +830 -0
  43. package/dist/components/form.d.ts +24 -0
  44. package/dist/components/form.js +59 -0
  45. package/dist/components/highlighter.d.ts +15 -0
  46. package/dist/components/highlighter.js +91 -0
  47. package/dist/components/hover-card.d.ts +6 -0
  48. package/dist/components/hover-card.js +14 -0
  49. package/dist/components/input-group.d.ts +16 -0
  50. package/dist/components/input-group.js +57 -0
  51. package/dist/components/input.d.ts +3 -0
  52. package/dist/components/input.js +7 -0
  53. package/dist/components/label.d.ts +4 -0
  54. package/dist/components/label.js +8 -0
  55. package/dist/components/link.d.ts +9 -0
  56. package/dist/components/link.js +11 -0
  57. package/dist/components/pagination.d.ts +18 -0
  58. package/dist/components/pagination.js +28 -0
  59. package/dist/components/popover.d.ts +10 -0
  60. package/dist/components/popover.js +26 -0
  61. package/dist/components/radio-group.d.ts +5 -0
  62. package/dist/components/radio-group.js +11 -0
  63. package/dist/components/select.d.ts +15 -0
  64. package/dist/components/select.js +36 -0
  65. package/dist/components/separator.d.ts +3 -0
  66. package/dist/components/separator.js +8 -0
  67. package/dist/components/sheet.d.ts +14 -0
  68. package/dist/components/sheet.js +37 -0
  69. package/dist/components/sidebar.d.ts +71 -0
  70. package/dist/components/sidebar.js +221 -0
  71. package/dist/components/skeleton.d.ts +2 -0
  72. package/dist/components/skeleton.js +6 -0
  73. package/dist/components/svgs/whatsappIcon.d.ts +3 -0
  74. package/dist/components/svgs/whatsappIcon.js +3 -0
  75. package/dist/components/switch.d.ts +6 -0
  76. package/dist/components/switch.js +8 -0
  77. package/dist/components/table.d.ts +10 -0
  78. package/dist/components/table.js +28 -0
  79. package/dist/components/tabs.d.ts +11 -0
  80. package/dist/components/tabs.js +29 -0
  81. package/dist/components/textarea.d.ts +3 -0
  82. package/dist/components/textarea.js +6 -0
  83. package/dist/components/themed-toaster.d.ts +4 -0
  84. package/dist/components/themed-toaster.js +27 -0
  85. package/dist/components/tooltip.d.ts +7 -0
  86. package/dist/components/tooltip.js +17 -0
  87. package/dist/components/typing-animation.d.ts +34 -0
  88. package/dist/components/typing-animation.js +155 -0
  89. package/dist/constants/sidebar.d.ts +9 -0
  90. package/dist/constants/sidebar.js +20 -0
  91. package/dist/hooks/use-mobile.d.ts +1 -0
  92. package/dist/hooks/use-mobile.js +19 -0
  93. package/dist/hooks/use-sidebar-persistence.d.ts +4 -0
  94. package/dist/hooks/use-sidebar-persistence.js +45 -0
  95. package/dist/index.d.ts +48 -0
  96. package/dist/index.js +47 -0
  97. package/dist/lib/image-dimensions.d.ts +2 -0
  98. package/dist/lib/image-dimensions.js +7 -0
  99. package/dist/lib/utils.d.ts +2 -0
  100. package/dist/lib/utils.js +2 -0
  101. package/dist/lib/year-month-filter.d.ts +16 -0
  102. package/dist/lib/year-month-filter.js +48 -0
  103. package/dist/next.d.ts +14 -0
  104. package/dist/next.js +27 -0
  105. package/dist/providers/beez-ui-provider.d.ts +27 -0
  106. package/dist/providers/beez-ui-provider.js +18 -0
  107. package/dist/providers/native-provider.d.ts +4 -0
  108. package/dist/providers/native-provider.js +11 -0
  109. package/dist/sonner.d.ts +2 -0
  110. package/dist/sonner.js +3 -0
  111. package/dist/styles.css +2 -0
  112. package/dist/tanstack.d.ts +11 -0
  113. package/dist/tanstack.js +38 -0
  114. package/dist/theme.d.ts +3 -0
  115. package/dist/theme.js +1 -0
  116. package/dist/types/data-table.d.ts +27 -0
  117. package/dist/types/data-table.js +1 -0
  118. package/fonts.css +5 -0
  119. package/package.json +335 -0
  120. package/styles.css +4 -0
  121. package/theme.css +87 -0
@@ -0,0 +1,24 @@
1
+ import * as React from "react";
2
+ import type { Label as LabelPrimitive } from "radix-ui";
3
+ import { Slot } from "radix-ui";
4
+ import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
5
+ declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
6
+ declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
7
+ declare const useFormField: () => {
8
+ invalid: boolean;
9
+ isDirty: boolean;
10
+ isTouched: boolean;
11
+ isValidating: boolean;
12
+ error?: import("react-hook-form").FieldError | undefined;
13
+ id: string;
14
+ name: string;
15
+ formItemId: string;
16
+ formDescriptionId: string;
17
+ formMessageId: string;
18
+ };
19
+ declare function FormItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
20
+ declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
21
+ declare function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>): React.JSX.Element;
22
+ declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
23
+ declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element | null;
24
+ export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
@@ -0,0 +1,59 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import * as React from "react";
4
+ import { Slot } from "radix-ui";
5
+ import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form";
6
+ import { cn } from "../lib/utils.js";
7
+ import { Label } from "./label.js";
8
+ const Form = FormProvider;
9
+ const FormFieldContext = React.createContext({});
10
+ const FormField = ({ ...props }) => {
11
+ return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, { ...props }) }));
12
+ };
13
+ const useFormField = () => {
14
+ const fieldContext = React.useContext(FormFieldContext);
15
+ const itemContext = React.useContext(FormItemContext);
16
+ const { getFieldState } = useFormContext();
17
+ const formState = useFormState({ name: fieldContext.name });
18
+ const fieldState = getFieldState(fieldContext.name, formState);
19
+ if (!fieldContext) {
20
+ throw new Error("useFormField should be used within <FormField>");
21
+ }
22
+ const { id } = itemContext;
23
+ return {
24
+ id,
25
+ name: fieldContext.name,
26
+ formItemId: `${id}-form-item`,
27
+ formDescriptionId: `${id}-form-item-description`,
28
+ formMessageId: `${id}-form-item-message`,
29
+ ...fieldState,
30
+ };
31
+ };
32
+ const FormItemContext = React.createContext({});
33
+ function FormItem({ className, ...props }) {
34
+ const id = React.useId();
35
+ return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) }));
36
+ }
37
+ function FormLabel({ className, ...props }) {
38
+ const { error, formItemId } = useFormField();
39
+ return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props }));
40
+ }
41
+ function FormControl({ ...props }) {
42
+ const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
43
+ return (_jsx(Slot.Root, { "data-slot": "form-control", id: formItemId, "aria-describedby": !error
44
+ ? `${formDescriptionId}`
45
+ : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
46
+ }
47
+ function FormDescription({ className, ...props }) {
48
+ const { formDescriptionId } = useFormField();
49
+ return (_jsx("p", { "data-slot": "form-description", id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props }));
50
+ }
51
+ function FormMessage({ className, ...props }) {
52
+ const { error, formMessageId } = useFormField();
53
+ const body = error ? String(error?.message ?? "") : props.children;
54
+ if (!body) {
55
+ return null;
56
+ }
57
+ return (_jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-sm text-destructive", className), ...props, children: body }));
58
+ }
59
+ export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
@@ -0,0 +1,15 @@
1
+ import type React from "react";
2
+ type AnnotationAction = "highlight" | "underline" | "box" | "circle" | "strike-through" | "crossed-off" | "bracket";
3
+ interface HighlighterProps {
4
+ children: React.ReactNode;
5
+ action?: AnnotationAction;
6
+ color?: string;
7
+ strokeWidth?: number;
8
+ animationDuration?: number;
9
+ iterations?: number;
10
+ padding?: number;
11
+ multiline?: boolean;
12
+ isView?: boolean;
13
+ }
14
+ export declare function Highlighter({ children, action, color, strokeWidth, animationDuration, iterations, padding, multiline, isView, }: HighlighterProps): React.JSX.Element;
15
+ export {};
@@ -0,0 +1,91 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { useEffect, useRef, useState } from "react";
4
+ import { annotate } from "rough-notation";
5
+ export function Highlighter({ children, action = "highlight", color = "#ffd1dc", strokeWidth = 1.5, animationDuration = 600, iterations = 2, padding = 2, multiline = true, isView = false, }) {
6
+ const elementRef = useRef(null);
7
+ const annotationRef = useRef(null);
8
+ const [isInView, setIsInView] = useState(() => !isView || typeof IntersectionObserver === "undefined");
9
+ useEffect(() => {
10
+ if (!isView) {
11
+ return;
12
+ }
13
+ const element = elementRef.current;
14
+ if (!element || typeof IntersectionObserver === "undefined") {
15
+ return;
16
+ }
17
+ const observer = new IntersectionObserver(([entry]) => {
18
+ if (entry.isIntersecting) {
19
+ setIsInView(true);
20
+ observer.disconnect();
21
+ }
22
+ }, {
23
+ rootMargin: "-10%",
24
+ });
25
+ observer.observe(element);
26
+ return () => {
27
+ observer.disconnect();
28
+ };
29
+ }, [isView]);
30
+ // If isView is false, always show. If isView is true, wait for inView
31
+ const shouldShow = !isView || isInView;
32
+ useEffect(() => {
33
+ const element = elementRef.current;
34
+ let resizeObserver = null;
35
+ let redrawFrameId = null;
36
+ if (shouldShow && element) {
37
+ const annotationConfig = {
38
+ type: action,
39
+ color,
40
+ strokeWidth,
41
+ animationDuration,
42
+ iterations,
43
+ padding,
44
+ multiline,
45
+ };
46
+ const annotation = annotate(element, annotationConfig);
47
+ annotationRef.current = annotation;
48
+ annotation.show();
49
+ if (typeof ResizeObserver !== "undefined") {
50
+ // Solo se observa el elemento anotado, nunca `document.body`: redibujar
51
+ // la anotación inserta un SVG en el body, y observar el body provocaba
52
+ // un loop infinito (resize -> redibujo -> resize) que colgaba la página.
53
+ // El redibujo se difiere a un frame y se coalescen ráfagas para evitar
54
+ // el warning «ResizeObserver loop» y trabajo redundante.
55
+ resizeObserver = new ResizeObserver(() => {
56
+ if (redrawFrameId != null) {
57
+ return;
58
+ }
59
+ redrawFrameId = window.requestAnimationFrame(() => {
60
+ redrawFrameId = null;
61
+ annotation.hide();
62
+ annotation.show();
63
+ });
64
+ });
65
+ resizeObserver.observe(element);
66
+ }
67
+ }
68
+ return () => {
69
+ if (redrawFrameId != null) {
70
+ window.cancelAnimationFrame(redrawFrameId);
71
+ }
72
+ if (annotationRef.current) {
73
+ annotationRef.current.remove();
74
+ annotationRef.current = null;
75
+ }
76
+ if (resizeObserver) {
77
+ resizeObserver.disconnect();
78
+ }
79
+ };
80
+ }, [
81
+ shouldShow,
82
+ action,
83
+ color,
84
+ strokeWidth,
85
+ animationDuration,
86
+ iterations,
87
+ padding,
88
+ multiline,
89
+ ]);
90
+ return (_jsx("span", { ref: elementRef, className: "relative inline-block bg-transparent", children: children }));
91
+ }
@@ -0,0 +1,6 @@
1
+ import * as React from "react";
2
+ import { HoverCard as HoverCardPrimitive } from "radix-ui";
3
+ declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
4
+ declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
5
+ declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): React.JSX.Element;
6
+ export { HoverCard, HoverCardTrigger, HoverCardContent };
@@ -0,0 +1,14 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { HoverCard as HoverCardPrimitive } from "radix-ui";
4
+ import { cn } from "../lib/utils.js";
5
+ function HoverCard({ ...props }) {
6
+ return _jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
7
+ }
8
+ function HoverCardTrigger({ ...props }) {
9
+ return (_jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props }));
10
+ }
11
+ function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
12
+ return (_jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }));
13
+ }
14
+ export { HoverCard, HoverCardTrigger, HoverCardContent };
@@ -0,0 +1,16 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ import { Button } from "./button.js";
4
+ declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
5
+ declare const inputGroupAddonVariants: (props?: ({
6
+ align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
7
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
+ declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
9
+ declare const inputGroupButtonVariants: (props?: ({
10
+ size?: "icon-sm" | "icon-xs" | "sm" | "xs" | null | undefined;
11
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
12
+ declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
13
+ declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
14
+ declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
15
+ declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
16
+ export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
@@ -0,0 +1,57 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { cva } from "class-variance-authority";
4
+ import { cn } from "../lib/utils.js";
5
+ import { Button } from "./button.js";
6
+ import { Input } from "./input.js";
7
+ import { Textarea } from "./textarea.js";
8
+ function InputGroup({ className, ...props }) {
9
+ return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className), ...props }));
10
+ }
11
+ const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
12
+ variants: {
13
+ align: {
14
+ "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
15
+ "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
16
+ "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
17
+ "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
18
+ },
19
+ },
20
+ defaultVariants: {
21
+ align: "inline-start",
22
+ },
23
+ });
24
+ function InputGroupAddon({ className, align = "inline-start", ...props }) {
25
+ return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (event) => {
26
+ if (event.target.closest("button")) {
27
+ return;
28
+ }
29
+ event.currentTarget.parentElement?.querySelector("input")?.focus();
30
+ }, ...props }));
31
+ }
32
+ const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
33
+ variants: {
34
+ size: {
35
+ xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
36
+ sm: "",
37
+ "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
38
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0",
39
+ },
40
+ },
41
+ defaultVariants: {
42
+ size: "xs",
43
+ },
44
+ });
45
+ function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
46
+ return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
47
+ }
48
+ function InputGroupText({ className, ...props }) {
49
+ return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
50
+ }
51
+ function InputGroupInput({ className, ...props }) {
52
+ return (_jsx(Input, { "data-slot": "input-group-control", className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className), ...props }));
53
+ }
54
+ function InputGroupTextarea({ className, ...props }) {
55
+ return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className), ...props }));
56
+ }
57
+ export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
@@ -0,0 +1,3 @@
1
+ import * as React from "react";
2
+ declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
3
+ export { Input };
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Input as InputPrimitive } from "@base-ui/react/input";
3
+ import { cn } from "../lib/utils.js";
4
+ function Input({ className, type, ...props }) {
5
+ return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
6
+ }
7
+ export { Input };
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ import { Label as LabelPrimitive } from "radix-ui";
3
+ declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
4
+ export { Label };
@@ -0,0 +1,8 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { Label as LabelPrimitive } from "radix-ui";
4
+ import { cn } from "../lib/utils.js";
5
+ function Label({ className, ...props }) {
6
+ return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
7
+ }
8
+ export { Label };
@@ -0,0 +1,9 @@
1
+ /** Selects the configured routing adapter while keeping a native anchor fallback. */
2
+ import type { ComponentType } from "react";
3
+ import { type BeezLinkProps } from "../providers/beez-ui-provider.js";
4
+ /** Shares native link props and explicit per-link navigation overrides. */
5
+ export type LinkProps = BeezLinkProps & {
6
+ component?: ComponentType<BeezLinkProps> | "a";
7
+ };
8
+ /** Uses the provider's adapter and excludes framework hints from native DOM attributes. */
9
+ export declare function Link({ component, prefetch, ...props }: LinkProps): import("react").JSX.Element;
@@ -0,0 +1,11 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { useBeezUIComponents } from "../providers/beez-ui-provider.js";
4
+ /** Uses the provider's adapter and excludes framework hints from native DOM attributes. */
5
+ export function Link({ component, prefetch, ...props }) {
6
+ const adapters = useBeezUIComponents();
7
+ const Component = component ?? adapters.Link;
8
+ if (!Component || Component === "a")
9
+ return _jsx("a", { ...props });
10
+ return _jsx(Component, { ...props, prefetch: prefetch });
11
+ }
@@ -0,0 +1,18 @@
1
+ import * as React from "react";
2
+ import { type LinkProps } from "./link.js";
3
+ import { Button } from "./button.js";
4
+ declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
5
+ declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
6
+ declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
7
+ export type PaginationLinkProps = {
8
+ isActive?: boolean;
9
+ } & Pick<React.ComponentProps<typeof Button>, "size"> & LinkProps;
10
+ declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
11
+ declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
12
+ text?: string;
13
+ }): React.JSX.Element;
14
+ declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
15
+ text?: string;
16
+ }): React.JSX.Element;
17
+ declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
18
+ export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
@@ -0,0 +1,28 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { Link } from "./link.js";
4
+ import { cn } from "../lib/utils.js";
5
+ import { Button } from "./button.js";
6
+ import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
7
+ function Pagination({ className, ...props }) {
8
+ return (_jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
9
+ }
10
+ function PaginationContent({ className, ...props }) {
11
+ return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex items-center gap-1", className), ...props }));
12
+ }
13
+ function PaginationItem({ ...props }) {
14
+ return _jsx("li", { "data-slot": "pagination-item", ...props });
15
+ }
16
+ function PaginationLink({ className, isActive, size = "icon", ...props }) {
17
+ return (_jsx(Button, { asChild: true, variant: isActive ? "outline" : "ghost", size: size, className: cn(className), children: _jsx(Link, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, ...props }) }));
18
+ }
19
+ function PaginationPrevious({ className, text = "Previous", ...props }) {
20
+ return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("pl-2!", className), ...props, children: [_jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: text })] }));
21
+ }
22
+ function PaginationNext({ className, text = "Next", ...props }) {
23
+ return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("pr-2!", className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: text }), _jsx(ChevronRightIcon, { "data-icon": "inline-end" })] }));
24
+ }
25
+ function PaginationEllipsis({ className, ...props }) {
26
+ return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx(MoreHorizontalIcon, {}), _jsx("span", { className: "sr-only", children: "More pages" })] }));
27
+ }
28
+ export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
@@ -0,0 +1,10 @@
1
+ import * as React from "react";
2
+ import { Popover as PopoverPrimitive } from "radix-ui";
3
+ declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
4
+ declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
5
+ declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
6
+ declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
7
+ declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
8
+ declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
9
+ declare function PopoverDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
10
+ export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
@@ -0,0 +1,26 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { Popover as PopoverPrimitive } from "radix-ui";
4
+ import { cn } from "../lib/utils.js";
5
+ function Popover({ ...props }) {
6
+ return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
7
+ }
8
+ function PopoverTrigger({ ...props }) {
9
+ return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
10
+ }
11
+ function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
12
+ return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }));
13
+ }
14
+ function PopoverAnchor({ ...props }) {
15
+ return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
16
+ }
17
+ function PopoverHeader({ className, ...props }) {
18
+ return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-1 text-sm", className), ...props }));
19
+ }
20
+ function PopoverTitle({ className, ...props }) {
21
+ return (_jsx("div", { "data-slot": "popover-title", className: cn("font-medium", className), ...props }));
22
+ }
23
+ function PopoverDescription({ className, ...props }) {
24
+ return (_jsx("p", { "data-slot": "popover-description", className: cn("text-muted-foreground", className), ...props }));
25
+ }
26
+ export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
3
+ declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
4
+ declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element;
5
+ export { RadioGroup, RadioGroupItem };
@@ -0,0 +1,11 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
4
+ import { cn } from "../lib/utils.js";
5
+ function RadioGroup({ className, ...props }) {
6
+ return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn("grid w-full gap-2", className), ...props }));
7
+ }
8
+ function RadioGroupItem({ className, ...props }) {
9
+ return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex size-4 items-center justify-center", children: _jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" }) }) }));
10
+ }
11
+ export { RadioGroup, RadioGroupItem };
@@ -0,0 +1,15 @@
1
+ import * as React from "react";
2
+ import { Select as SelectPrimitive } from "radix-ui";
3
+ declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
4
+ declare function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
5
+ declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
6
+ declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
7
+ size?: "sm" | "default";
8
+ }): React.JSX.Element;
9
+ declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
10
+ declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
11
+ declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
12
+ declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
13
+ declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): React.JSX.Element;
14
+ declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): React.JSX.Element;
15
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
@@ -0,0 +1,36 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { Select as SelectPrimitive } from "radix-ui";
4
+ import { cn } from "../lib/utils.js";
5
+ import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
6
+ function Select({ ...props }) {
7
+ return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
8
+ }
9
+ function SelectGroup({ className, ...props }) {
10
+ return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn("scroll-my-1 p-1", className), ...props }));
11
+ }
12
+ function SelectValue({ ...props }) {
13
+ return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
14
+ }
15
+ function SelectTrigger({ className, size = "default", children, ...props }) {
16
+ return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
17
+ }
18
+ function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
19
+ return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn("z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-position": position, className: cn("data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", position === "popper" && ""), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
20
+ }
21
+ function SelectLabel({ className, ...props }) {
22
+ return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
23
+ }
24
+ function SelectItem({ className, children, ...props }) {
25
+ return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
26
+ }
27
+ function SelectSeparator({ className, ...props }) {
28
+ return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
29
+ }
30
+ function SelectScrollUpButton({ className, ...props }) {
31
+ return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronUpIcon, {}) }));
32
+ }
33
+ function SelectScrollDownButton({ className, ...props }) {
34
+ return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
35
+ }
36
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
@@ -0,0 +1,3 @@
1
+ import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
2
+ declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
3
+ export { Separator };
@@ -0,0 +1,8 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
4
+ import { cn } from "../lib/utils.js";
5
+ function Separator({ className, orientation = "horizontal", ...props }) {
6
+ return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
7
+ }
8
+ export { Separator };
@@ -0,0 +1,14 @@
1
+ import * as React from "react";
2
+ import { Dialog as SheetPrimitive } from "radix-ui";
3
+ declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): React.JSX.Element;
4
+ declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): React.JSX.Element;
5
+ declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
6
+ declare function SheetContent({ className, children, side, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
7
+ side?: "top" | "right" | "bottom" | "left";
8
+ showCloseButton?: boolean;
9
+ }): React.JSX.Element;
10
+ declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
11
+ declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
12
+ declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): React.JSX.Element;
13
+ declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): React.JSX.Element;
14
+ export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
@@ -0,0 +1,37 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { Dialog as SheetPrimitive } from "radix-ui";
4
+ import { cn } from "../lib/utils.js";
5
+ import { Button } from "./button.js";
6
+ import { XIcon } from "lucide-react";
7
+ function Sheet({ ...props }) {
8
+ return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
9
+ }
10
+ function SheetTrigger({ ...props }) {
11
+ return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
12
+ }
13
+ function SheetClose({ ...props }) {
14
+ return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
15
+ }
16
+ function SheetPortal({ ...props }) {
17
+ return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
18
+ }
19
+ function SheetOverlay({ className, ...props }) {
20
+ return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-md data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
21
+ }
22
+ function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
23
+ return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex flex-col gap-4 overflow-y-auto overscroll-contain bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10", className), ...props, children: [children, showCloseButton && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
24
+ }
25
+ function SheetHeader({ className, ...props }) {
26
+ return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className), ...props }));
27
+ }
28
+ function SheetFooter({ className, ...props }) {
29
+ return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
30
+ }
31
+ function SheetTitle({ className, ...props }) {
32
+ return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("font-heading font-medium text-foreground", className), ...props }));
33
+ }
34
+ function SheetDescription({ className, ...props }) {
35
+ return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className), ...props }));
36
+ }
37
+ export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };