maquinaweb-ui 2.17.1 → 2.19.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.
- package/dist/container-animation.d.ts +2 -2
- package/dist/input-COsbbKgj.js +16 -0
- package/dist/input-COsbbKgj.js.map +1 -0
- package/dist/{input-help-BJr1B5ZZ.js → input-help-C9Himejv.js} +3 -14
- package/dist/input-help-C9Himejv.js.map +1 -0
- package/dist/input-suggest.d.ts +2 -2
- package/dist/input-suggest.js +3 -42
- package/dist/input-suggest.js.map +1 -1
- package/dist/remote-selector.d.ts +58 -0
- package/dist/remote-selector.d.ts.map +1 -0
- package/dist/remote-selector.js +242 -0
- package/dist/remote-selector.js.map +1 -0
- package/dist/scroll-area-C2WadzN5.js +47 -0
- package/dist/scroll-area-C2WadzN5.js.map +1 -0
- package/dist/text-field.d.ts +9 -7
- package/dist/text-field.d.ts.map +1 -1
- package/dist/text-field.js +9 -7
- package/dist/text-field.js.map +1 -1
- package/dist/toggle-field.d.ts +2 -2
- package/package.json +8 -2
- package/dist/input-help-BJr1B5ZZ.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentProps, ElementType } from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime5 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/container-animation/container-animation.d.ts
|
|
5
5
|
type ContainerAnimationProps<T extends ElementType = 'div'> = ComponentProps<'div'> & ComponentProps<T> & {
|
|
@@ -23,7 +23,7 @@ declare const ContainerAnimation: <T extends ElementType = "div">({
|
|
|
23
23
|
distance,
|
|
24
24
|
hideNotInView,
|
|
25
25
|
...props
|
|
26
|
-
}: ContainerAnimationProps<T>) =>
|
|
26
|
+
}: ContainerAnimationProps<T>) => react_jsx_runtime5.JSX.Element;
|
|
27
27
|
//#endregion
|
|
28
28
|
export { ContainerAnimation, type ContainerAnimationProps };
|
|
29
29
|
//# sourceMappingURL=container-animation.d.ts.map
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { cn } from "./utils-C0f9Ma6r.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/ui/input.tsx
|
|
5
|
+
function Input({ className, type,...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx("input", {
|
|
7
|
+
className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/75 focus-visible:ring-[2px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive ring-offset-[2px] transition-all duration-300", className),
|
|
8
|
+
"data-slot": "input",
|
|
9
|
+
type,
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
//#endregion
|
|
15
|
+
export { Input };
|
|
16
|
+
//# sourceMappingURL=input-COsbbKgj.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-COsbbKgj.js","names":[],"sources":["../src/components/ui/input.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n return (\n <input\n className={cn(\n 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n 'focus-visible:border-ring focus-visible:ring-ring/75 focus-visible:ring-[2px]',\n 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive ring-offset-[2px] transition-all duration-300',\n className\n )}\n data-slot=\"input\"\n type={type}\n {...props}\n />\n );\n}\n\nexport { Input };\n"],"mappings":";;;;AAIA,SAAS,MAAM,EAAE,WAAW,KAAM,GAAG,SAAwC;AAC3E,QACE,oBAAC;EACC,WAAW,GACT,mcACA,iFACA,wJACA,UACD;EACD,aAAU;EACJ;EACN,GAAI;GACJ"}
|
|
@@ -4,7 +4,7 @@ import { Controller, useFormContext, useFormState } from "react-hook-form";
|
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { Info } from "lucide-react";
|
|
7
|
-
import "@radix-ui/react-slot";
|
|
7
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
8
8
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
9
9
|
import { Portal } from "@radix-ui/react-tooltip";
|
|
10
10
|
|
|
@@ -74,17 +74,6 @@ function FormMessage({ className,...props }) {
|
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
//#endregion
|
|
78
|
-
//#region src/components/ui/input.tsx
|
|
79
|
-
function Input({ className, type,...props }) {
|
|
80
|
-
return /* @__PURE__ */ jsx("input", {
|
|
81
|
-
className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/75 focus-visible:ring-[2px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive ring-offset-[2px] transition-all duration-300", className),
|
|
82
|
-
"data-slot": "input",
|
|
83
|
-
type,
|
|
84
|
-
...props
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
|
|
88
77
|
//#endregion
|
|
89
78
|
//#region src/components/ui/tooltip.tsx
|
|
90
79
|
function TooltipProvider({ delayDuration = 0,...props }) {
|
|
@@ -153,5 +142,5 @@ const InputHelp = ({ help, name, className }) => {
|
|
|
153
142
|
};
|
|
154
143
|
|
|
155
144
|
//#endregion
|
|
156
|
-
export { FormField, FormItem, FormLabel, FormMessage,
|
|
157
|
-
//# sourceMappingURL=input-help-
|
|
145
|
+
export { FormField, FormItem, FormLabel, FormMessage, InputHelp };
|
|
146
|
+
//# sourceMappingURL=input-help-C9Himejv.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-help-C9Himejv.js","names":["ContentHelp: React.FC<{\n children: React.ReactNode;\n help?: React.ReactNode | string;\n className?: string;\n side?: 'top' | 'right' | 'bottom' | 'left';\n sideOffset?: number;\n}>","TooltipPortal","InputHelp: React.FC<{\n help?: string;\n name?: string;\n className?: string;\n}>"],"sources":["../src/components/ui/form.tsx","../src/components/ui/tooltip.tsx","../src/components/ui/content-help.tsx","../src/components/ui/input-help.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport {\n Controller,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n FormProvider,\n useFormContext,\n useFormState,\n} from 'react-hook-form';\n\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport { Label } from '@/components/ui/label';\n\nimport { cn } from '@/lib/utils';\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n);\n\nconst FormContext = React.createContext<{\n onSubmit?: (data?: FieldValues) => void;\n helper?: Record<string, string>;\n}>({});\n\nexport const useFormContextSubmit = () => {\n const context = React.useContext(FormContext);\n if (!context) {\n return {};\n }\n return context;\n};\n\nconst Form: React.FC<\n React.ComponentProps<typeof FormProvider<FieldValues>> & {\n onSubmit?: (data?: FieldValues) => void;\n helper?: Record<string, string>;\n }\n> = ({ onSubmit, helper, ...props }) => {\n return (\n <FormContext.Provider value={{ onSubmit, helper }}>\n <FormProvider {...props} />\n </FormContext.Provider>\n );\n};\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n );\n};\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext);\n const itemContext = React.useContext(FormItemContext);\n const { getFieldState } = useFormContext();\n const formState = useFormState({ name: fieldContext.name });\n const fieldState = getFieldState(fieldContext.name, formState);\n\n if (!fieldContext) {\n throw new Error('useFormField should be used within <FormField>');\n }\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n };\n};\n\ntype FormItemContextValue = {\n id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n const id = React.useId();\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div\n className={cn('flex flex-col gap-1', className)}\n data-slot=\"form-item\"\n {...props}\n />\n </FormItemContext.Provider>\n );\n}\n\nfunction FormLabel({\n className,\n ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n const { error, formItemId } = useFormField();\n\n return (\n <Label\n className={cn('data-[error=true]:text-destructive', className)}\n data-error={!!error}\n data-slot=\"form-label\"\n htmlFor={formItemId}\n {...props}\n />\n );\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n const { error, formItemId, formDescriptionId, formMessageId } =\n useFormField();\n\n return (\n <Slot\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n data-slot=\"form-control\"\n id={formItemId}\n {...props}\n />\n );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n const { formDescriptionId } = useFormField();\n\n return (\n <p\n className={cn('text-muted-foreground text-sm', className)}\n data-slot=\"form-description\"\n id={formDescriptionId}\n {...props}\n />\n );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<'p'>) {\n const { error, formMessageId } = useFormField();\n const body = error ? String(error?.message ?? '') : props.children;\n\n if (!body) {\n return null;\n }\n\n return (\n <p\n className={cn('text-destructive text-xs', className)}\n data-slot=\"form-message\"\n id={formMessageId}\n {...props}\n >\n {body}\n </p>\n );\n}\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n};\n","'use client';\n\nimport * as React from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nimport { cn } from '@/lib/utils';\n\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delayDuration={delayDuration}\n {...props}\n />\n );\n}\n\nfunction Tooltip({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n className,\n sideOffset = 0,\n children,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n className={cn(\n 'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n className\n )}\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","import { Portal as TooltipPortal } from '@radix-ui/react-tooltip';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\nconst ContentHelp: React.FC<{\n children: React.ReactNode;\n help?: React.ReactNode | string;\n className?: string;\n side?: 'top' | 'right' | 'bottom' | 'left';\n sideOffset?: number;\n}> = ({ children, help, className, side = 'top', sideOffset = 10 }) => {\n return help ? (\n <Tooltip delayDuration={250}>\n <TooltipTrigger asChild>{children as any}</TooltipTrigger>\n <TooltipPortal>\n <TooltipContent\n className={cn('flex items-center px-2 leading-none', className)}\n side={side}\n sideOffset={10}\n >\n <p className=\"w-full text-wrap whitespace-break-spaces\">{help}</p>\n </TooltipContent>\n </TooltipPortal>\n </Tooltip>\n ) : (\n children\n );\n};\n\nexport { ContentHelp };\n","'use client';\n\nimport { ContentHelp } from '@/components/ui/content-help';\n\nimport { Info } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { useFormContextSubmit } from './form';\n\nconst InputHelp: React.FC<{\n help?: string;\n name?: string;\n className?: string;\n}> = ({ help, name, className }) => {\n const { helper } = useFormContextSubmit();\n const helpText = (name && helper?.[name]) || help;\n\n return (\n helpText && (\n <ContentHelp\n className={cn(\n 'whitespace-pre-line leading-relaxed max-w-96 text-[13px]'\n )}\n help={helpText}\n >\n <button\n className={cn(\n 'mb-0.5 size-fit p-1 hover:bg-muted rounded-sm',\n className\n )}\n type=\"button\"\n >\n <Info className=\"size-3.5\" />\n </button>\n </ContentHelp>\n )\n );\n};\nexport { InputHelp };\n"],"mappings":"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"}
|
package/dist/input-suggest.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FieldPath, FieldValues, UseControllerProps } from "react-hook-form";
|
|
2
2
|
import { Dispatch, SetStateAction } from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime4 from "react/jsx-runtime";
|
|
4
4
|
import { Mask, Options } from "use-mask-input";
|
|
5
5
|
import { PopoverProps } from "@radix-ui/react-popover";
|
|
6
6
|
|
|
@@ -64,7 +64,7 @@ declare function InputSuggest<TFieldValues extends FieldValues = FieldValues, TF
|
|
|
64
64
|
children,
|
|
65
65
|
initialParams,
|
|
66
66
|
...props
|
|
67
|
-
}: InputSuggestProps<TFieldValues, TFieldName> & PopoverProps):
|
|
67
|
+
}: InputSuggestProps<TFieldValues, TFieldName> & PopoverProps): react_jsx_runtime4.JSX.Element;
|
|
68
68
|
//#endregion
|
|
69
69
|
export { InputSuggest, type InputSuggestProps };
|
|
70
70
|
//# sourceMappingURL=input-suggest.d.ts.map
|
package/dist/input-suggest.js
CHANGED
|
@@ -3,55 +3,16 @@
|
|
|
3
3
|
|
|
4
4
|
import { cn } from "./utils-C0f9Ma6r.js";
|
|
5
5
|
import "./label-BqtcCyMj.js";
|
|
6
|
-
import { FormItem, FormLabel, FormMessage,
|
|
6
|
+
import { FormItem, FormLabel, FormMessage, InputHelp } from "./input-help-C9Himejv.js";
|
|
7
|
+
import { Input } from "./input-COsbbKgj.js";
|
|
8
|
+
import { Popover, PopoverContent, PopoverTrigger, ScrollBar } from "./scroll-area-C2WadzN5.js";
|
|
7
9
|
import { useController, useFormContext } from "react-hook-form";
|
|
8
10
|
import { useCallback, useEffect, useState } from "react";
|
|
9
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
12
|
import { Check } from "lucide-react";
|
|
11
13
|
import { withMask } from "use-mask-input";
|
|
12
|
-
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
13
14
|
import { ScrollArea, ScrollAreaViewport } from "@radix-ui/react-scroll-area";
|
|
14
|
-
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
15
15
|
|
|
16
|
-
//#region src/components/ui/popover.tsx
|
|
17
|
-
function Popover({ ...props }) {
|
|
18
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
|
|
19
|
-
"data-slot": "popover",
|
|
20
|
-
...props
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
function PopoverTrigger({ ...props }) {
|
|
24
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
|
|
25
|
-
"data-slot": "popover-trigger",
|
|
26
|
-
...props
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
function PopoverContent({ className, align = "center", sideOffset = 4,...props }) {
|
|
30
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
|
|
31
|
-
align,
|
|
32
|
-
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
|
|
33
|
-
"data-slot": "popover-content",
|
|
34
|
-
sideOffset,
|
|
35
|
-
...props
|
|
36
|
-
}) });
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
//#endregion
|
|
40
|
-
//#region src/components/ui/scroll-area.tsx
|
|
41
|
-
function ScrollBar({ className, orientation = "vertical",...props }) {
|
|
42
|
-
return /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
|
|
43
|
-
className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
|
|
44
|
-
"data-slot": "scroll-area-scrollbar",
|
|
45
|
-
orientation,
|
|
46
|
-
...props,
|
|
47
|
-
children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, {
|
|
48
|
-
className: "bg-border relative flex-1 rounded-full",
|
|
49
|
-
"data-slot": "scroll-area-thumb"
|
|
50
|
-
})
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
//#endregion
|
|
55
16
|
//#region src/components/input-suggest/input-suggest.tsx
|
|
56
17
|
function InputSuggest({ name, nameSearch, fieldValue = "name", label, className, placeholder, useData, setValue, required, disabled, updateSearchOnBlur = true, value, extra, extraOnClick, withPortal = false, counter, help, prefix, refineValue, refineSuggest, limit = 10, mask, maskOptions, children, initialParams,...props }) {
|
|
57
18
|
const form = useFormContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-suggest.js","names":["item"],"sources":["../src/components/ui/popover.tsx","../src/components/ui/scroll-area.tsx","../src/components/input-suggest/input-suggest.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { cn } from '@/lib/utils';\n\nfunction Popover({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverContent({\n className,\n align = 'center',\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n align={align}\n className={cn(\n 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n className\n )}\n data-slot=\"popover-content\"\n sideOffset={sideOffset}\n {...props}\n />\n </PopoverPrimitive.Portal>\n );\n}\n\nfunction PopoverAnchor({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n","'use client';\n\nimport * as React from 'react';\n\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\n\nimport { cn } from '@/lib/utils';\n\nfunction ScrollArea({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n return (\n <ScrollAreaPrimitive.Root\n className={cn('relative', className)}\n data-slot=\"scroll-area\"\n {...props}\n >\n <ScrollAreaPrimitive.Viewport\n className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n data-slot=\"scroll-area-viewport\"\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n );\n}\n\nfunction ScrollBar({\n className,\n orientation = 'vertical',\n ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n return (\n <ScrollAreaPrimitive.ScrollAreaScrollbar\n className={cn(\n 'flex touch-none p-px transition-colors select-none',\n orientation === 'vertical' &&\n 'h-full w-2.5 border-l border-l-transparent',\n orientation === 'horizontal' &&\n 'h-2.5 flex-col border-t border-t-transparent',\n className\n )}\n data-slot=\"scroll-area-scrollbar\"\n orientation={orientation}\n {...props}\n >\n <ScrollAreaPrimitive.ScrollAreaThumb\n className=\"bg-border relative flex-1 rounded-full\"\n data-slot=\"scroll-area-thumb\"\n />\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\n );\n}\n\nexport { ScrollArea, ScrollBar };\n","'use client';\n\nimport {\n Dispatch,\n SetStateAction,\n useCallback,\n useEffect,\n useState,\n} from 'react';\n\nimport {\n FieldPath,\n FieldValues,\n UseControllerProps,\n useController,\n useFormContext,\n} from 'react-hook-form';\nimport { Mask, type Options as MaskOptions, withMask } from 'use-mask-input';\n\nimport type { PopoverProps } from '@radix-ui/react-popover';\nimport { ScrollArea, ScrollAreaViewport } from '@radix-ui/react-scroll-area';\nimport { Input } from '@/components/ui/input';\nimport { FormItem, FormLabel, FormMessage } from '@/ui/form';\nimport { InputHelp } from '@/ui/input-help';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';\nimport { ScrollBar } from '../ui/scroll-area';\n\nimport { Check } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InputSuggestProps<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> extends UseControllerProps<TFieldValues, TFieldName> {\n label: string;\n search?: string;\n onSearch?: (search: string) => void;\n setValue?: Dispatch<SetStateAction<string>>;\n value?: string;\n placeholder?: string;\n className?: string;\n useData: (\n search?: string,\n initialParams?: Object\n ) => {\n data?: {\n id: string | number;\n [key: string]: any;\n }[];\n refresh?: any;\n };\n required?: boolean;\n extra?: string;\n updateSearchOnBlur?: boolean;\n extraOnClick?: () => void;\n withPortal?: boolean;\n counter?: number;\n help?: string;\n nameSearch: string;\n prefix?: string;\n refineValue?: (value: any) => any;\n refineSuggest?: (suggest: any) => any;\n limit?: number;\n fieldValue?: string;\n mask?: Mask;\n maskOptions?: MaskOptions;\n initialParams?: Object;\n}\n\nfunction InputSuggest<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n name,\n nameSearch,\n fieldValue = 'name',\n label,\n className,\n placeholder,\n useData,\n setValue,\n required,\n disabled,\n updateSearchOnBlur = true,\n value,\n extra,\n extraOnClick,\n withPortal = false,\n counter,\n help,\n prefix,\n refineValue,\n refineSuggest,\n limit = 10,\n mask,\n maskOptions,\n children,\n initialParams,\n ...props\n}: InputSuggestProps<TFieldValues, TFieldName> & PopoverProps) {\n const form = useFormContext();\n const inputName = prefix ? `${prefix}.${name}` : name;\n const searchName = prefix ? `${prefix}.${nameSearch}` : nameSearch;\n\n const { field: searchField } = useController({\n name: searchName,\n control: form.control,\n });\n const { field, fieldState } = useController({\n name: inputName,\n control: form.control,\n });\n\n const [ariaSelected, setAriaSelected] = useState(-1);\n\n const [open, setOpen] = useState(false);\n\n const { data } = useData?.(searchField.value, initialParams);\n\n const onChange = useCallback(\n (item: any) => {\n searchField.onChange(item?.[fieldValue as keyof typeof item]);\n field.onChange(refineValue?.(item) || item);\n setOpen(false);\n },\n [field.value, refineValue, fieldValue]\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.value === '') {\n field.onChange(null);\n }\n searchField.onChange(e.target.value);\n setOpen(true);\n const item = data?.find((item) => item[fieldValue] === e.target.value);\n if (item) {\n onChange(item);\n setOpen(false);\n }\n },\n [field, searchField]\n );\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'ArrowDown') {\n setAriaSelected((prev) => prev + 1);\n }\n if (e.key === 'ArrowUp') {\n setAriaSelected((prev) => prev - 1);\n }\n if (e.key === 'Enter' && data && data[ariaSelected]) {\n onChange(data[ariaSelected]);\n e.stopPropagation();\n e.preventDefault();\n }\n },\n []\n );\n\n useEffect(() => {\n if (\n field?.value?.[fieldValue as keyof typeof field.value] !==\n searchField.value &&\n updateSearchOnBlur\n ) {\n searchField.onChange(\n field?.value?.[fieldValue as keyof typeof field.value]\n );\n }\n }, [field.value]);\n\n return (\n <FormItem\n className={cn('w-full flex flex-col', className)}\n id={`input-suggest-${inputName}`}\n >\n <div className=\"flex items-end gap-1.5\">\n <FormLabel htmlFor={inputName}>\n {label}:\n {required && (\n <span className=\"text-red-500 text-lg leading-[1px]\">*</span>\n )}\n </FormLabel>\n\n <InputHelp help={help} name={inputName} />\n </div>\n <Popover onOpenChange={setOpen} open={open} {...props}>\n <PopoverTrigger className=\"outline-hidden w-full relative\">\n <Input\n autoComplete=\"off\"\n className={cn(fieldState.error && 'border-destructive')}\n disabled={disabled}\n name={name}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n ref={\n mask\n ? withMask(mask, { autoUnmask: true, ...maskOptions })\n : (undefined as any)\n }\n value={searchField.value}\n />\n {children}\n </PopoverTrigger>\n {fieldState.error && <FormMessage />}\n <PopoverContent\n className={cn(\n 'mt-1 w-(--radix-popover-trigger-width) max-w-2xl p-0 z-50',\n data?.length === 0 && 'hidden'\n )}\n onOpenAutoFocus={(e) => e.preventDefault()}\n >\n <ScrollArea className=\"h-fit max-h-[300px]\" id=\"scroll\">\n <ScrollAreaViewport className=\"w-full h-fit max-h-[300px]\">\n <ul className=\"p-1\">\n {data?.slice(0, limit)?.map((item) => (\n <li\n aria-selected={data[ariaSelected]?.id === item.id}\n className={cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/50 aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-all hover:bg-accent/50 hover:text-accent-foreground',\n field?.value?.id === item.id &&\n 'bg-accent! text-accent-foreground'\n )}\n key={item.id}\n onMouseDown={(e) => {\n onChange(item);\n e.preventDefault();\n }}\n >\n <span className=\"line-clamp-1 flex-1\">\n {refineSuggest\n ? refineSuggest(item)\n : item?.[fieldValue as keyof typeof item]}\n </span>\n {field?.value?.id == item.id && (\n <Check className=\"ml-auto h-4 w-4 shrink-0\" />\n )}\n </li>\n ))}\n\n {extra && (\n <li\n className={cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/50 aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-all hover:text-accent-foreground sticky bottom-0.5 bg-white hover:bg-accent'\n )}\n onMouseDown={(e) => {\n e.preventDefault();\n extraOnClick?.();\n }}\n >\n <span className=\"line-clamp-1\">{extra}</span>\n </li>\n )}\n\n {(data?.length === 0 || !data) && !extra && (\n <p className=\"text-sm text-center text-accent-foreground/50 py-2\">\n Nenhum resultado encontrado.\n </p>\n )}\n </ul>\n </ScrollAreaViewport>\n <ScrollBar />\n </ScrollArea>\n </PopoverContent>\n </Popover>\n </FormItem>\n );\n}\n\nexport { InputSuggest };\n"],"mappings":";;;;;;;;;;;;;;;;AAQA,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QAAO,oBAAC,iBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS;;AAGjE,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,oBAAC,iBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,EACb,GAAG,SACqD;AACxD,QACE,oBAAC,iBAAiB,oBAChB,oBAAC,iBAAiB;EACT;EACP,WAAW,GACT,keACA,UACD;EACD,aAAU;EACE;EACZ,GAAI;GACJ,GACsB;;;;;ACP9B,SAAS,UAAU,EACjB,WACA,cAAc,WACd,GAAG,SACoE;AACvE,QACE,oBAAC,oBAAoB;EACnB,WAAW,GACT,sDACA,gBAAgB,cACd,8CACF,gBAAgB,gBACd,gDACF,UACD;EACD,aAAU;EACG;EACb,GAAI;YAEJ,oBAAC,oBAAoB;GACnB,WAAU;GACV,aAAU;IACV;GACsC;;;;;ACgB9C,SAAS,aAGP,EACA,MACA,YACA,aAAa,QACb,OACA,WACA,aACA,SACA,UACA,UACA,UACA,qBAAqB,MACrB,OACA,OACA,cACA,aAAa,OACb,SACA,MACA,QACA,aACA,eACA,QAAQ,IACR,MACA,aACA,UACA,cACA,GAAG,SAC0D;CAC7D,MAAM,OAAO,gBAAgB;CAC7B,MAAM,YAAY,SAAS,GAAG,OAAO,GAAG,SAAS;CACjD,MAAM,aAAa,SAAS,GAAG,OAAO,GAAG,eAAe;CAExD,MAAM,EAAE,OAAO,gBAAgB,cAAc;EAC3C,MAAM;EACN,SAAS,KAAK;EACf,CAAC;CACF,MAAM,EAAE,OAAO,eAAe,cAAc;EAC1C,MAAM;EACN,SAAS,KAAK;EACf,CAAC;CAEF,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CAEpD,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CAEvC,MAAM,EAAE,SAAS,UAAU,YAAY,OAAO,cAAc;CAE5D,MAAM,WAAW,aACd,SAAc;AACb,cAAY,SAAS,OAAO,YAAiC;AAC7D,QAAM,SAAS,cAAc,KAAK,IAAI,KAAK;AAC3C,UAAQ,MAAM;IAEhB;EAAC,MAAM;EAAO;EAAa;EAAW,CACvC;CAED,MAAM,eAAe,aAClB,MAA2C;AAC1C,MAAI,EAAE,OAAO,UAAU,GACrB,OAAM,SAAS,KAAK;AAEtB,cAAY,SAAS,EAAE,OAAO,MAAM;AACpC,UAAQ,KAAK;EACb,MAAM,OAAO,MAAM,MAAM,WAASA,OAAK,gBAAgB,EAAE,OAAO,MAAM;AACtE,MAAI,MAAM;AACR,YAAS,KAAK;AACd,WAAQ,MAAM;;IAGlB,CAAC,OAAO,YAAY,CACrB;CAED,MAAM,gBAAgB,aACnB,MAA6C;AAC5C,MAAI,EAAE,QAAQ,YACZ,kBAAiB,SAAS,OAAO,EAAE;AAErC,MAAI,EAAE,QAAQ,UACZ,kBAAiB,SAAS,OAAO,EAAE;AAErC,MAAI,EAAE,QAAQ,WAAW,QAAQ,KAAK,eAAe;AACnD,YAAS,KAAK,cAAc;AAC5B,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;;IAGtB,EAAE,CACH;AAED,iBAAgB;AACd,MACE,OAAO,QAAQ,gBACb,YAAY,SACd,mBAEA,aAAY,SACV,OAAO,QAAQ,YAChB;IAEF,CAAC,MAAM,MAAM,CAAC;AAEjB,QACE,qBAAC;EACC,WAAW,GAAG,wBAAwB,UAAU;EAChD,IAAI,iBAAiB;aAErB,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAU,SAAS;;KACjB;KAAM;KACN,YACC,oBAAC;MAAK,WAAU;gBAAqC;OAAQ;;KAErD,EAEZ,oBAAC;IAAgB;IAAM,MAAM;KAAa;IACtC,EACN,qBAAC;GAAQ,cAAc;GAAe;GAAM,GAAI;;IAC9C,qBAAC;KAAe,WAAU;gBACxB,oBAAC;MACC,cAAa;MACb,WAAW,GAAG,WAAW,SAAS,qBAAqB;MAC7C;MACJ;MACN,UAAU;MACV,WAAW;MACE;MACb,KACE,OACI,SAAS,MAAM;OAAE,YAAY;OAAM,GAAG;OAAa,CAAC,GACnD;MAEP,OAAO,YAAY;OACnB,EACD;MACc;IAChB,WAAW,SAAS,oBAAC,gBAAc;IACpC,oBAAC;KACC,WAAW,GACT,6DACA,MAAM,WAAW,KAAK,SACvB;KACD,kBAAkB,MAAM,EAAE,gBAAgB;eAE1C,qBAAC;MAAW,WAAU;MAAsB,IAAG;iBAC7C,oBAAC;OAAmB,WAAU;iBAC5B,qBAAC;QAAG,WAAU;;SACX,MAAM,MAAM,GAAG,MAAM,EAAE,KAAK,SAC3B,qBAAC;UACC,iBAAe,KAAK,eAAe,OAAO,KAAK;UAC/C,WAAW,GACT,+SACA,OAAO,OAAO,OAAO,KAAK,MACxB,oCACH;UAED,cAAc,MAAM;AAClB,oBAAS,KAAK;AACd,aAAE,gBAAgB;;qBAGpB,oBAAC;WAAK,WAAU;qBACb,gBACG,cAAc,KAAK,GACnB,OAAO;YACN,EACN,OAAO,OAAO,MAAM,KAAK,MACxB,oBAAC,SAAM,WAAU,6BAA6B;YAZ3C,KAAK,GAcP,CACL;SAED,SACC,oBAAC;UACC,WAAW,GACT,6TACD;UACD,cAAc,MAAM;AAClB,aAAE,gBAAgB;AAClB,2BAAgB;;oBAGlB,oBAAC;WAAK,WAAU;qBAAgB;YAAa;WAC1C;UAGL,MAAM,WAAW,KAAK,CAAC,SAAS,CAAC,SACjC,oBAAC;UAAE,WAAU;oBAAqD;WAE9D;;SAEH;QACc,EACrB,oBAAC,cAAY;OACF;MACE;;IACT;GACD"}
|
|
1
|
+
{"version":3,"file":"input-suggest.js","names":["item"],"sources":["../src/components/input-suggest/input-suggest.tsx"],"sourcesContent":["'use client';\n\nimport {\n Dispatch,\n SetStateAction,\n useCallback,\n useEffect,\n useState,\n} from 'react';\n\nimport {\n FieldPath,\n FieldValues,\n UseControllerProps,\n useController,\n useFormContext,\n} from 'react-hook-form';\nimport { Mask, type Options as MaskOptions, withMask } from 'use-mask-input';\n\nimport type { PopoverProps } from '@radix-ui/react-popover';\nimport { ScrollArea, ScrollAreaViewport } from '@radix-ui/react-scroll-area';\nimport { Input } from '@/components/ui/input';\nimport { FormItem, FormLabel, FormMessage } from '@/ui/form';\nimport { InputHelp } from '@/ui/input-help';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';\nimport { ScrollBar } from '../ui/scroll-area';\n\nimport { Check } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InputSuggestProps<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> extends UseControllerProps<TFieldValues, TFieldName> {\n label: string;\n search?: string;\n onSearch?: (search: string) => void;\n setValue?: Dispatch<SetStateAction<string>>;\n value?: string;\n placeholder?: string;\n className?: string;\n useData: (\n search?: string,\n initialParams?: Object\n ) => {\n data?: {\n id: string | number;\n [key: string]: any;\n }[];\n refresh?: any;\n };\n required?: boolean;\n extra?: string;\n updateSearchOnBlur?: boolean;\n extraOnClick?: () => void;\n withPortal?: boolean;\n counter?: number;\n help?: string;\n nameSearch: string;\n prefix?: string;\n refineValue?: (value: any) => any;\n refineSuggest?: (suggest: any) => any;\n limit?: number;\n fieldValue?: string;\n mask?: Mask;\n maskOptions?: MaskOptions;\n initialParams?: Object;\n}\n\nfunction InputSuggest<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n name,\n nameSearch,\n fieldValue = 'name',\n label,\n className,\n placeholder,\n useData,\n setValue,\n required,\n disabled,\n updateSearchOnBlur = true,\n value,\n extra,\n extraOnClick,\n withPortal = false,\n counter,\n help,\n prefix,\n refineValue,\n refineSuggest,\n limit = 10,\n mask,\n maskOptions,\n children,\n initialParams,\n ...props\n}: InputSuggestProps<TFieldValues, TFieldName> & PopoverProps) {\n const form = useFormContext();\n const inputName = prefix ? `${prefix}.${name}` : name;\n const searchName = prefix ? `${prefix}.${nameSearch}` : nameSearch;\n\n const { field: searchField } = useController({\n name: searchName,\n control: form.control,\n });\n const { field, fieldState } = useController({\n name: inputName,\n control: form.control,\n });\n\n const [ariaSelected, setAriaSelected] = useState(-1);\n\n const [open, setOpen] = useState(false);\n\n const { data } = useData?.(searchField.value, initialParams);\n\n const onChange = useCallback(\n (item: any) => {\n searchField.onChange(item?.[fieldValue as keyof typeof item]);\n field.onChange(refineValue?.(item) || item);\n setOpen(false);\n },\n [field.value, refineValue, fieldValue]\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.value === '') {\n field.onChange(null);\n }\n searchField.onChange(e.target.value);\n setOpen(true);\n const item = data?.find((item) => item[fieldValue] === e.target.value);\n if (item) {\n onChange(item);\n setOpen(false);\n }\n },\n [field, searchField]\n );\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'ArrowDown') {\n setAriaSelected((prev) => prev + 1);\n }\n if (e.key === 'ArrowUp') {\n setAriaSelected((prev) => prev - 1);\n }\n if (e.key === 'Enter' && data && data[ariaSelected]) {\n onChange(data[ariaSelected]);\n e.stopPropagation();\n e.preventDefault();\n }\n },\n []\n );\n\n useEffect(() => {\n if (\n field?.value?.[fieldValue as keyof typeof field.value] !==\n searchField.value &&\n updateSearchOnBlur\n ) {\n searchField.onChange(\n field?.value?.[fieldValue as keyof typeof field.value]\n );\n }\n }, [field.value]);\n\n return (\n <FormItem\n className={cn('w-full flex flex-col', className)}\n id={`input-suggest-${inputName}`}\n >\n <div className=\"flex items-end gap-1.5\">\n <FormLabel htmlFor={inputName}>\n {label}:\n {required && (\n <span className=\"text-red-500 text-lg leading-[1px]\">*</span>\n )}\n </FormLabel>\n\n <InputHelp help={help} name={inputName} />\n </div>\n <Popover onOpenChange={setOpen} open={open} {...props}>\n <PopoverTrigger className=\"outline-hidden w-full relative\">\n <Input\n autoComplete=\"off\"\n className={cn(fieldState.error && 'border-destructive')}\n disabled={disabled}\n name={name}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n ref={\n mask\n ? withMask(mask, { autoUnmask: true, ...maskOptions })\n : (undefined as any)\n }\n value={searchField.value}\n />\n {children}\n </PopoverTrigger>\n {fieldState.error && <FormMessage />}\n <PopoverContent\n className={cn(\n 'mt-1 w-(--radix-popover-trigger-width) max-w-2xl p-0 z-50',\n data?.length === 0 && 'hidden'\n )}\n onOpenAutoFocus={(e) => e.preventDefault()}\n >\n <ScrollArea className=\"h-fit max-h-[300px]\" id=\"scroll\">\n <ScrollAreaViewport className=\"w-full h-fit max-h-[300px]\">\n <ul className=\"p-1\">\n {data?.slice(0, limit)?.map((item) => (\n <li\n aria-selected={data[ariaSelected]?.id === item.id}\n className={cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/50 aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-all hover:bg-accent/50 hover:text-accent-foreground',\n field?.value?.id === item.id &&\n 'bg-accent! text-accent-foreground'\n )}\n key={item.id}\n onMouseDown={(e) => {\n onChange(item);\n e.preventDefault();\n }}\n >\n <span className=\"line-clamp-1 flex-1\">\n {refineSuggest\n ? refineSuggest(item)\n : item?.[fieldValue as keyof typeof item]}\n </span>\n {field?.value?.id == item.id && (\n <Check className=\"ml-auto h-4 w-4 shrink-0\" />\n )}\n </li>\n ))}\n\n {extra && (\n <li\n className={cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/50 aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-all hover:text-accent-foreground sticky bottom-0.5 bg-white hover:bg-accent'\n )}\n onMouseDown={(e) => {\n e.preventDefault();\n extraOnClick?.();\n }}\n >\n <span className=\"line-clamp-1\">{extra}</span>\n </li>\n )}\n\n {(data?.length === 0 || !data) && !extra && (\n <p className=\"text-sm text-center text-accent-foreground/50 py-2\">\n Nenhum resultado encontrado.\n </p>\n )}\n </ul>\n </ScrollAreaViewport>\n <ScrollBar />\n </ScrollArea>\n </PopoverContent>\n </Popover>\n </FormItem>\n );\n}\n\nexport { InputSuggest };\n"],"mappings":"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"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { ControllerFieldState } from "react-hook-form";
|
|
2
|
+
import * as react_jsx_runtime3 from "react/jsx-runtime";
|
|
3
|
+
import { PopoverProps } from "@radix-ui/react-popover";
|
|
4
|
+
|
|
5
|
+
//#region src/components/ui/selector.d.ts
|
|
6
|
+
type SelectorOption = {
|
|
7
|
+
id: string | number;
|
|
8
|
+
name: string;
|
|
9
|
+
value?: any;
|
|
10
|
+
children?: SelectorOption[];
|
|
11
|
+
};
|
|
12
|
+
type SelectorProps = {
|
|
13
|
+
value?: SelectorOption;
|
|
14
|
+
onChange?: (item: SelectorOption | undefined | null) => void;
|
|
15
|
+
search?: string;
|
|
16
|
+
onSearch?: (search: string) => void;
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
empty?: React.ReactNode;
|
|
19
|
+
items: SelectorOption[];
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
searchPlaceholder?: string;
|
|
22
|
+
label?: string;
|
|
23
|
+
name: string;
|
|
24
|
+
className?: string;
|
|
25
|
+
required?: boolean;
|
|
26
|
+
fieldState?: ControllerFieldState;
|
|
27
|
+
selectFirstIsOne?: boolean;
|
|
28
|
+
help?: string;
|
|
29
|
+
extra?: string;
|
|
30
|
+
extraOnClick?: (onChange?: (item: SelectorOption | undefined | null) => void) => Promise<void> | void;
|
|
31
|
+
open?: boolean;
|
|
32
|
+
setOpen?: (open: boolean) => void;
|
|
33
|
+
withPortal?: boolean;
|
|
34
|
+
} & PopoverProps;
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region src/components/remote-selector/remote-selector.d.ts
|
|
37
|
+
type TUseData = (search?: string, initialParams?: any, disabled?: boolean) => {
|
|
38
|
+
data: {
|
|
39
|
+
id: string;
|
|
40
|
+
name: string;
|
|
41
|
+
}[];
|
|
42
|
+
};
|
|
43
|
+
type RemoteSelectorProps = {
|
|
44
|
+
useData: TUseData;
|
|
45
|
+
initialParams?: Parameters<TUseData>[1];
|
|
46
|
+
initialRequest?: boolean;
|
|
47
|
+
forceToggle?: boolean;
|
|
48
|
+
} & Omit<SelectorProps, 'items'>;
|
|
49
|
+
declare function RemoteSelector({
|
|
50
|
+
useData,
|
|
51
|
+
initialParams,
|
|
52
|
+
initialRequest,
|
|
53
|
+
forceToggle,
|
|
54
|
+
...props
|
|
55
|
+
}: RemoteSelectorProps): react_jsx_runtime3.JSX.Element;
|
|
56
|
+
//#endregion
|
|
57
|
+
export { RemoteSelector, type RemoteSelectorProps, type TUseData };
|
|
58
|
+
//# sourceMappingURL=remote-selector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"remote-selector.d.ts","names":[],"sources":["../src/components/ui/selector.tsx","../src/components/remote-selector/remote-selector.tsx"],"sourcesContent":[],"mappings":";;;;;KA0BY,cAAA;;;EAAA,KAAA,CAAA,EAAA,GAAA;EAOA,QAAA,CAAA,EAHC,cAGY,EAAA;CAAA;AACf,KADE,aAAA,GACF;OACU,CAAA,EADV,cACU;UAIV,CAAM,EAAA,CAAA,IAAA,EAJI,cAIJ,GAAA,SAAA,GAAA,IAAA,EAAA,GAAA,IAAA;QACP,CAAA,EAAA,MAAA;UAOM,CAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,GAAA,IAAA;aAKO,CAAA,EAAA,MAAA;OACf,CAAA,EAdG,KAAA,CAAM,SAcT;OAIH,EAjBK,cAiBL,EAAA;EAAY,QAAA,CAAA,EAAA,OAAA;;;;EChDJ,SAAA,CAAA,EAAQ,MAAA;EAWR,QAAA,CAAA,EAAA,OAAA;EAAmB,UAAA,CAAA,ED2BhB,oBC3BgB;kBACpB,CAAA,EAAA,OAAA;MACkB,CAAA,EAAA,MAAA;OAAX,CAAA,EAAA,MAAA;cAGT,CAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,IAAA,ED2Ba,cC3Bb,GAAA,SAAA,GAAA,IAAA,EAAA,GAAA,IAAA,EAAA,GD4BF,OC5BE,CAAA,IAAA,CAAA,GAAA,IAAA;MAAL,CAAA,EAAA,OAAA;EAAI,OAAA,CAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EAEQ,UAAA,CAAA,EAAA,OAAc;CAAA,GD8B1B,YC9B0B;;;KAlBlB,QAAA;;;;EDiBA,CAAA,EAAA;AAOZ,CAAA;AAAyB,KCbb,mBAAA,GDaa;SACf,ECbC,QDaD;eACU,CAAA,ECbF,UDaE,CCbS,QDaT,CAAA,CAAA,CAAA,CAAA;gBAIJ,CAAA,EAAA,OAAA;aACP,CAAA,EAAA,OAAA;ICfL,IDsBW,CCtBN,aDsBM,EAAA,OAAA,CAAA;AAKO,iBCzBN,cAAA,CDyBM;EAAA,OAAA;EAAA,aAAA;EAAA,cAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,ECnBnB,mBDmBmB,CAAA,ECnBA,kBAAA,CAAA,GAAA,CAAA,ODmBA"}
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
import { cn } from "./utils-C0f9Ma6r.js";
|
|
5
|
+
import "./label-BqtcCyMj.js";
|
|
6
|
+
import { FormItem, FormLabel, FormMessage, InputHelp } from "./input-help-C9Himejv.js";
|
|
7
|
+
import { Popover, PopoverContent, PopoverTrigger, ScrollBar } from "./scroll-area-C2WadzN5.js";
|
|
8
|
+
import { useController, useFormContext } from "react-hook-form";
|
|
9
|
+
import { createElement, useEffect, useState } from "react";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
import { Check, ChevronsUpDown, SearchIcon, X } from "lucide-react";
|
|
12
|
+
import { cva } from "class-variance-authority";
|
|
13
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
14
|
+
import { useDebounce } from "use-debounce";
|
|
15
|
+
import { ScrollArea, ScrollAreaViewport } from "@radix-ui/react-scroll-area";
|
|
16
|
+
import { Command } from "cmdk";
|
|
17
|
+
|
|
18
|
+
//#region src/components/ui/button.tsx
|
|
19
|
+
const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
20
|
+
variants: {
|
|
21
|
+
variant: {
|
|
22
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
23
|
+
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
24
|
+
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
25
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
26
|
+
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
27
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
28
|
+
},
|
|
29
|
+
size: {
|
|
30
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
31
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
32
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
33
|
+
icon: "size-9"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
defaultVariants: {
|
|
37
|
+
variant: "default",
|
|
38
|
+
size: "default"
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
function Button({ className, variant, size, asChild = false,...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
|
|
43
|
+
className: cn(buttonVariants({
|
|
44
|
+
variant,
|
|
45
|
+
size,
|
|
46
|
+
className
|
|
47
|
+
})),
|
|
48
|
+
"data-slot": "button",
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
//#endregion
|
|
54
|
+
//#region src/components/ui/command.tsx
|
|
55
|
+
function Command$1({ className,...props }) {
|
|
56
|
+
return /* @__PURE__ */ jsx(Command, {
|
|
57
|
+
className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
|
|
58
|
+
"data-slot": "command",
|
|
59
|
+
...props
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function CommandInput({ className,...props }) {
|
|
63
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
64
|
+
className: "flex h-9 items-center gap-2 border-b px-3",
|
|
65
|
+
"data-slot": "command-input-wrapper",
|
|
66
|
+
children: [/* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command.Input, {
|
|
67
|
+
className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
68
|
+
"data-slot": "command-input",
|
|
69
|
+
...props
|
|
70
|
+
})]
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
function CommandList({ className,...props }) {
|
|
74
|
+
return /* @__PURE__ */ jsx(Command.List, {
|
|
75
|
+
className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
|
|
76
|
+
"data-slot": "command-list",
|
|
77
|
+
...props
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
function CommandEmpty({ ...props }) {
|
|
81
|
+
return /* @__PURE__ */ jsx(Command.Empty, {
|
|
82
|
+
className: "py-6 text-center text-sm",
|
|
83
|
+
"data-slot": "command-empty",
|
|
84
|
+
...props
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
function CommandGroup({ className,...props }) {
|
|
88
|
+
return /* @__PURE__ */ jsx(Command.Group, {
|
|
89
|
+
className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
|
|
90
|
+
"data-slot": "command-group",
|
|
91
|
+
...props
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
function CommandItem({ className,...props }) {
|
|
95
|
+
return /* @__PURE__ */ jsx(Command.Item, {
|
|
96
|
+
className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
97
|
+
"data-slot": "command-item",
|
|
98
|
+
...props
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
//#endregion
|
|
103
|
+
//#region src/components/ui/selector.tsx
|
|
104
|
+
function Selector({ value, onChange, search, onSearch, items, label, placeholder, searchPlaceholder, name, empty = "Nenhuma opção encontrada...", disabled = false, className, required, fieldState, selectFirstIsOne, help, extra, extraOnClick, open, setOpen, withPortal = true,...props }) {
|
|
105
|
+
useEffect(() => {
|
|
106
|
+
if (selectFirstIsOne && items && items.length === 1 && !value) onChange?.(items[0]);
|
|
107
|
+
}, [items]);
|
|
108
|
+
return /* @__PURE__ */ jsxs(FormItem, {
|
|
109
|
+
className: cn("w-full", className),
|
|
110
|
+
id: `selector-${name}`,
|
|
111
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
112
|
+
className: "flex items-end gap-1.5",
|
|
113
|
+
children: [/* @__PURE__ */ jsxs(FormLabel, {
|
|
114
|
+
htmlFor: name,
|
|
115
|
+
children: [
|
|
116
|
+
label,
|
|
117
|
+
":",
|
|
118
|
+
required && /* @__PURE__ */ jsx("span", {
|
|
119
|
+
className: "text-red-500 text-lg leading-[1px]",
|
|
120
|
+
children: "*"
|
|
121
|
+
})
|
|
122
|
+
]
|
|
123
|
+
}), /* @__PURE__ */ jsx(InputHelp, {
|
|
124
|
+
help,
|
|
125
|
+
name
|
|
126
|
+
})]
|
|
127
|
+
}), /* @__PURE__ */ jsxs(Popover, {
|
|
128
|
+
onOpenChange: setOpen,
|
|
129
|
+
open,
|
|
130
|
+
...props,
|
|
131
|
+
children: [
|
|
132
|
+
/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
133
|
+
asChild: true,
|
|
134
|
+
children: /* @__PURE__ */ jsxs(Button, {
|
|
135
|
+
"aria-expanded": open,
|
|
136
|
+
"aria-label": "Carregando opções...",
|
|
137
|
+
className: cn("mt-0! justify-between w-full h-10! hover:bg-transparent cursor-pointer", !value && "text-muted-foreground", fieldState?.error && "border-destructive"),
|
|
138
|
+
disabled,
|
|
139
|
+
id: name,
|
|
140
|
+
role: "combobox",
|
|
141
|
+
variant: "outline",
|
|
142
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
143
|
+
className: "truncate",
|
|
144
|
+
children: value ? value.name : placeholder || `Selecione a ${label?.toLowerCase()}`
|
|
145
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
146
|
+
className: "flex items-center",
|
|
147
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
148
|
+
className: "relative size-4",
|
|
149
|
+
children: value !== void 0 && /* @__PURE__ */ jsx("button", {
|
|
150
|
+
className: "absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
|
|
151
|
+
onClick: (e) => {
|
|
152
|
+
e.preventDefault();
|
|
153
|
+
e.stopPropagation();
|
|
154
|
+
onChange?.(null);
|
|
155
|
+
},
|
|
156
|
+
type: "button",
|
|
157
|
+
children: /* @__PURE__ */ jsx(X, { className: "size-4" })
|
|
158
|
+
})
|
|
159
|
+
}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
|
|
160
|
+
})]
|
|
161
|
+
})
|
|
162
|
+
}),
|
|
163
|
+
fieldState?.error && /* @__PURE__ */ jsx(FormMessage, {}),
|
|
164
|
+
/* @__PURE__ */ jsx(PopoverContent, {
|
|
165
|
+
className: "w-(--radix-popover-trigger-width) max-w-2xl p-0",
|
|
166
|
+
children: /* @__PURE__ */ jsxs(Command$1, {
|
|
167
|
+
shouldFilter: false,
|
|
168
|
+
children: [/* @__PURE__ */ jsx(CommandInput, {
|
|
169
|
+
onValueChange: onSearch,
|
|
170
|
+
placeholder: searchPlaceholder || `Pesquise por uma ${label?.toLowerCase()}`,
|
|
171
|
+
value: search
|
|
172
|
+
}), /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsxs(ScrollArea, {
|
|
173
|
+
className: "h-fit max-h-[300px]",
|
|
174
|
+
id: "scroll",
|
|
175
|
+
children: [/* @__PURE__ */ jsxs(ScrollAreaViewport, {
|
|
176
|
+
className: "w-full h-fit max-h-[300px] relative",
|
|
177
|
+
children: [
|
|
178
|
+
/* @__PURE__ */ jsx(CommandEmpty, {
|
|
179
|
+
className: "text-sm p-3 text-foreground/60",
|
|
180
|
+
children: empty
|
|
181
|
+
}),
|
|
182
|
+
/* @__PURE__ */ jsx(CommandGroup, { children: items.map((item) => /* @__PURE__ */ jsxs(CommandItem, {
|
|
183
|
+
className: cn("transition-all p-2", value?.id === item.id && "bg-accent! text-accent-foreground"),
|
|
184
|
+
onSelect: () => {
|
|
185
|
+
onChange?.(item);
|
|
186
|
+
setOpen?.(false);
|
|
187
|
+
},
|
|
188
|
+
value: String(item.id),
|
|
189
|
+
children: [item.name, value?.id === item.id && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-4 w-4" })]
|
|
190
|
+
}, item.id)) }),
|
|
191
|
+
extra && /* @__PURE__ */ jsx(CommandItem, {
|
|
192
|
+
className: cn("transition-all p-2 sticky bottom-0 bg-white hover:!bg-accent aria-selected:!bg-accent"),
|
|
193
|
+
onSelect: () => {
|
|
194
|
+
extraOnClick?.(onChange);
|
|
195
|
+
setOpen?.(false);
|
|
196
|
+
},
|
|
197
|
+
children: extra
|
|
198
|
+
})
|
|
199
|
+
]
|
|
200
|
+
}), /* @__PURE__ */ jsx(ScrollBar, {})]
|
|
201
|
+
}) })]
|
|
202
|
+
})
|
|
203
|
+
})
|
|
204
|
+
]
|
|
205
|
+
})]
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
//#endregion
|
|
210
|
+
//#region src/components/remote-selector/remote-selector.tsx
|
|
211
|
+
function RemoteSelector({ useData, initialParams, initialRequest = false, forceToggle = false,...props }) {
|
|
212
|
+
const { control } = useFormContext();
|
|
213
|
+
const { field, fieldState } = useController({
|
|
214
|
+
control,
|
|
215
|
+
name: props.name
|
|
216
|
+
});
|
|
217
|
+
const [open, setOpen] = useState(false);
|
|
218
|
+
const [search, setSearch] = useState("");
|
|
219
|
+
const [searchDebounced] = useDebounce(search, 100, { maxWait: 200 });
|
|
220
|
+
const { data } = useData(searchDebounced, initialParams, !open && !initialRequest);
|
|
221
|
+
useEffect(() => {
|
|
222
|
+
setOpen(forceToggle);
|
|
223
|
+
}, [forceToggle]);
|
|
224
|
+
return /* @__PURE__ */ createElement(Selector, {
|
|
225
|
+
...props,
|
|
226
|
+
fieldState,
|
|
227
|
+
items: data,
|
|
228
|
+
key: `selector-${field.name}-${field.value}`,
|
|
229
|
+
onChange: (value) => {
|
|
230
|
+
field.onChange(value);
|
|
231
|
+
},
|
|
232
|
+
onSearch: setSearch,
|
|
233
|
+
open,
|
|
234
|
+
search,
|
|
235
|
+
setOpen,
|
|
236
|
+
value: field.value
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
//#endregion
|
|
241
|
+
export { RemoteSelector };
|
|
242
|
+
//# sourceMappingURL=remote-selector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"remote-selector.js","names":["Command","CommandPrimitive","Command"],"sources":["../src/components/ui/button.tsx","../src/components/ui/command.tsx","../src/components/ui/selector.tsx","../src/components/remote-selector/remote-selector.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n outline:\n 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n icon: 'size-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n ...props\n}: React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean;\n }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n data-slot=\"button\"\n {...(props as any)}\n />\n );\n}\n\nexport { Button, buttonVariants };\n","'use client';\n\nimport * as React from 'react';\n\nimport { SearchIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nfunction Command({\n className,\n ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n return (\n <CommandPrimitive\n className={cn(\n 'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',\n className\n )}\n data-slot=\"command\"\n {...props}\n />\n );\n}\n\nfunction CommandInput({\n className,\n ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n return (\n <div\n className=\"flex h-9 items-center gap-2 border-b px-3\"\n data-slot=\"command-input-wrapper\"\n >\n <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n <CommandPrimitive.Input\n className={cn(\n 'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n className\n )}\n data-slot=\"command-input\"\n {...props}\n />\n </div>\n );\n}\n\nfunction CommandList({\n className,\n ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n return (\n <CommandPrimitive.List\n className={cn(\n 'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',\n className\n )}\n data-slot=\"command-list\"\n {...props}\n />\n );\n}\n\nfunction CommandEmpty({\n ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n return (\n <CommandPrimitive.Empty\n className=\"py-6 text-center text-sm\"\n data-slot=\"command-empty\"\n {...props}\n />\n );\n}\n\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n return (\n <CommandPrimitive.Group\n className={cn(\n 'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n className\n )}\n data-slot=\"command-group\"\n {...props}\n />\n );\n}\n\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n return (\n <CommandPrimitive.Separator\n className={cn('bg-border -mx-1 h-px', className)}\n data-slot=\"command-separator\"\n {...props}\n />\n );\n}\n\nfunction CommandItem({\n className,\n ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n return (\n <CommandPrimitive.Item\n className={cn(\n \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n data-slot=\"command-item\"\n {...props}\n />\n );\n}\n\nfunction CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<'span'>) {\n return (\n <span\n className={cn(\n 'text-muted-foreground ml-auto text-xs tracking-widest',\n className\n )}\n data-slot=\"command-shortcut\"\n {...props}\n />\n );\n}\n\nexport {\n Command,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n};\n","'use client';\n\nimport { useEffect } from 'react';\n\nimport type { ControllerFieldState } from 'react-hook-form';\n\nimport type { PopoverProps } from '@radix-ui/react-popover';\nimport { ScrollArea, ScrollAreaViewport } from '@radix-ui/react-scroll-area';\n\nimport { Check, ChevronsUpDown, X } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from './button';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from './command';\nimport { FormItem, FormLabel, FormMessage } from './form';\nimport { InputHelp } from './input-help';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { ScrollBar } from './scroll-area';\n\nexport type SelectorOption = {\n id: string | number;\n name: string;\n value?: any;\n children?: SelectorOption[];\n};\n\nexport type SelectorProps = {\n value?: SelectorOption;\n onChange?: (item: SelectorOption | undefined | null) => void;\n search?: string;\n onSearch?: (search: string) => void;\n placeholder?: string;\n empty?: React.ReactNode;\n items: SelectorOption[];\n disabled?: boolean;\n searchPlaceholder?: string;\n label?: string;\n name: string;\n className?: string;\n required?: boolean;\n fieldState?: ControllerFieldState;\n selectFirstIsOne?: boolean;\n help?: string;\n extra?: string;\n extraOnClick?: (\n onChange?: (item: SelectorOption | undefined | null) => void\n ) => Promise<void> | void;\n open?: boolean;\n setOpen?: (open: boolean) => void;\n withPortal?: boolean;\n} & PopoverProps;\n\nexport function Selector({\n value,\n onChange,\n search,\n onSearch,\n items,\n label,\n placeholder,\n searchPlaceholder,\n name,\n empty = 'Nenhuma opção encontrada...',\n disabled = false,\n className,\n required,\n fieldState,\n selectFirstIsOne,\n help,\n extra,\n extraOnClick,\n open,\n setOpen,\n withPortal = true,\n ...props\n}: SelectorProps) {\n useEffect(() => {\n if (selectFirstIsOne && items && items.length === 1 && !value) {\n onChange?.(items[0] as any);\n }\n }, [items]);\n\n return (\n <FormItem className={cn('w-full', className)} id={`selector-${name}`}>\n <div className=\"flex items-end gap-1.5\">\n <FormLabel htmlFor={name}>\n {label}:\n {required && (\n <span className=\"text-red-500 text-lg leading-[1px]\">*</span>\n )}\n </FormLabel>\n\n <InputHelp help={help} name={name} />\n </div>\n <Popover onOpenChange={setOpen} open={open} {...props}>\n <PopoverTrigger asChild>\n <Button\n aria-expanded={open}\n aria-label=\"Carregando opções...\"\n className={cn(\n 'mt-0! justify-between w-full h-10! hover:bg-transparent cursor-pointer',\n !value && 'text-muted-foreground',\n fieldState?.error && 'border-destructive'\n )}\n disabled={disabled}\n id={name}\n role=\"combobox\"\n variant=\"outline\"\n >\n <span className=\"truncate\">\n {value\n ? value.name\n : placeholder || `Selecione a ${label?.toLowerCase()}`}\n </span>\n <div className=\"flex items-center\">\n <div className=\"relative size-4\">\n {value !== undefined && (\n <button\n className=\"absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n onChange?.(null);\n }}\n type=\"button\"\n >\n <X className=\"size-4\" />\n </button>\n )}\n </div>\n <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n </div>\n </Button>\n </PopoverTrigger>\n {fieldState?.error && <FormMessage />}\n <PopoverContent className=\"w-(--radix-popover-trigger-width) max-w-2xl p-0\">\n <Command shouldFilter={false}>\n <CommandInput\n onValueChange={onSearch}\n placeholder={\n searchPlaceholder || `Pesquise por uma ${label?.toLowerCase()}`\n }\n value={search}\n />\n <CommandList>\n <ScrollArea className=\"h-fit max-h-[300px]\" id=\"scroll\">\n <ScrollAreaViewport className=\"w-full h-fit max-h-[300px] relative\">\n <CommandEmpty className=\"text-sm p-3 text-foreground/60\">\n {empty}\n </CommandEmpty>\n <CommandGroup>\n {items.map((item) => (\n <CommandItem\n className={cn(\n 'transition-all p-2',\n value?.id === item.id &&\n 'bg-accent! text-accent-foreground'\n )}\n key={item.id}\n onSelect={() => {\n onChange?.(item);\n setOpen?.(false);\n }}\n value={String(item.id)}\n >\n {item.name}\n {value?.id === item.id && (\n <Check className=\"ml-auto h-4 w-4\" />\n )}\n </CommandItem>\n ))}\n </CommandGroup>\n {extra && (\n <CommandItem\n className={cn(\n 'transition-all p-2 sticky bottom-0 bg-white hover:!bg-accent aria-selected:!bg-accent'\n )}\n onSelect={() => {\n extraOnClick?.(onChange);\n setOpen?.(false);\n }}\n >\n {extra}\n </CommandItem>\n )}\n </ScrollAreaViewport>\n <ScrollBar />\n </ScrollArea>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </FormItem>\n );\n}\n","'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport { useController, useFormContext } from 'react-hook-form';\nimport { useDebounce } from 'use-debounce';\n\nimport { Selector, SelectorProps } from '../ui/selector';\n\nexport type TUseData = (\n search?: string,\n initialParams?: any,\n disabled?: boolean\n) => {\n data: {\n id: string;\n name: string;\n }[];\n};\n\nexport type RemoteSelectorProps = {\n useData: TUseData;\n initialParams?: Parameters<TUseData>[1];\n initialRequest?: boolean;\n forceToggle?: boolean;\n} & Omit<SelectorProps, 'items'>;\n\nexport function RemoteSelector({\n useData,\n initialParams,\n initialRequest = false,\n forceToggle = false,\n ...props\n}: RemoteSelectorProps) {\n type T = NonNullable<ReturnType<TUseData>['data']>[number];\n\n const { control } = useFormContext();\n const { field, fieldState } = useController({\n control,\n name: props.name,\n });\n\n const [open, setOpen] = useState(false);\n const [search, setSearch] = useState('');\n const [searchDebounced] = useDebounce(search, 100, {\n maxWait: 200,\n });\n const { data } = useData(\n searchDebounced,\n initialParams,\n !open && !initialRequest\n );\n\n useEffect(() => {\n setOpen(forceToggle);\n }, [forceToggle]);\n\n return (\n <Selector\n {...props}\n fieldState={fieldState}\n items={data as T[]}\n key={`selector-${field.name}-${field.value}`}\n onChange={(value: any) => {\n field.onChange(value as T);\n }}\n onSearch={setSearch}\n open={open}\n search={search}\n setOpen={setOpen}\n value={field.value as T}\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAOA,MAAM,iBAAiB,IACrB,+bACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SACE;GACF,WACE;GACF,OACE;GACF,MAAM;GACP;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,SAAS,OAAO,EACd,WACA,SACA,MACA,UAAU,MACV,GAAG,SAIA;AAGH,QACE,oBAHW,UAAU,OAAO;EAI1B,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC3D,aAAU;EACV,GAAK;GACL;;;;;AC7CN,SAASA,UAAQ,EACf,UACA,GAAG,SAC6C;AAChD,QACE,oBAACC;EACC,WAAW,GACT,6FACA,UACD;EACD,aAAU;EACV,GAAI;GACJ;;AAIN,SAAS,aAAa,EACpB,UACA,GAAG,SACmD;AACtD,QACE,qBAAC;EACC,WAAU;EACV,aAAU;aAEV,oBAAC,cAAW,WAAU,+BAA+B,EACrD,oBAACA,QAAiB;GAChB,WAAW,GACT,4JACA,UACD;GACD,aAAU;GACV,GAAI;IACJ;GACE;;AAIV,SAAS,YAAY,EACnB,UACA,GAAG,SACkD;AACrD,QACE,oBAACA,QAAiB;EAChB,WAAW,GACT,+DACA,UACD;EACD,aAAU;EACV,GAAI;GACJ;;AAIN,SAAS,aAAa,EACpB,GAAG,SACmD;AACtD,QACE,oBAACA,QAAiB;EAChB,WAAU;EACV,aAAU;EACV,GAAI;GACJ;;AAIN,SAAS,aAAa,EACpB,UACA,GAAG,SACmD;AACtD,QACE,oBAACA,QAAiB;EAChB,WAAW,GACT,0NACA,UACD;EACD,aAAU;EACV,GAAI;GACJ;;AAiBN,SAAS,YAAY,EACnB,UACA,GAAG,SACkD;AACrD,QACE,oBAACA,QAAiB;EAChB,WAAW,GACT,uYACA,UACD;EACD,aAAU;EACV,GAAI;GACJ;;;;;ACzDN,SAAgB,SAAS,EACvB,OACA,UACA,QACA,UACA,OACA,OACA,aACA,mBACA,MACA,QAAQ,+BACR,WAAW,OACX,WACA,UACA,YACA,kBACA,MACA,OACA,cACA,MACA,SACA,aAAa,KACb,GAAG,SACa;AAChB,iBAAgB;AACd,MAAI,oBAAoB,SAAS,MAAM,WAAW,KAAK,CAAC,MACtD,YAAW,MAAM,GAAU;IAE5B,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC;EAAS,WAAW,GAAG,UAAU,UAAU;EAAE,IAAI,YAAY;aAC5D,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAU,SAAS;;KACjB;KAAM;KACN,YACC,oBAAC;MAAK,WAAU;gBAAqC;OAAQ;;KAErD,EAEZ,oBAAC;IAAgB;IAAY;KAAQ;IACjC,EACN,qBAAC;GAAQ,cAAc;GAAe;GAAM,GAAI;;IAC9C,oBAAC;KAAe;eACd,qBAAC;MACC,iBAAe;MACf,cAAW;MACX,WAAW,GACT,0EACA,CAAC,SAAS,yBACV,YAAY,SAAS,qBACtB;MACS;MACV,IAAI;MACJ,MAAK;MACL,SAAQ;iBAER,oBAAC;OAAK,WAAU;iBACb,QACG,MAAM,OACN,eAAe,eAAe,OAAO,aAAa;QACjD,EACP,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAI,WAAU;kBACZ,UAAU,UACT,oBAAC;SACC,WAAU;SACV,UAAU,MAAM;AACd,YAAE,gBAAgB;AAClB,YAAE,iBAAiB;AACnB,qBAAW,KAAK;;SAElB,MAAK;mBAEL,oBAAC,KAAE,WAAU,WAAW;UACjB;SAEP,EACN,oBAAC,kBAAe,WAAU,qCAAqC;QAC3D;OACC;MACM;IAChB,YAAY,SAAS,oBAAC,gBAAc;IACrC,oBAAC;KAAe,WAAU;eACxB,qBAACC;MAAQ,cAAc;iBACrB,oBAAC;OACC,eAAe;OACf,aACE,qBAAqB,oBAAoB,OAAO,aAAa;OAE/D,OAAO;QACP,EACF,oBAAC,yBACC,qBAAC;OAAW,WAAU;OAAsB,IAAG;kBAC7C,qBAAC;QAAmB,WAAU;;SAC5B,oBAAC;UAAa,WAAU;oBACrB;WACY;SACf,oBAAC,0BACE,MAAM,KAAK,SACV,qBAAC;UACC,WAAW,GACT,sBACA,OAAO,OAAO,KAAK,MACjB,oCACH;UAED,gBAAgB;AACd,sBAAW,KAAK;AAChB,qBAAU,MAAM;;UAElB,OAAO,OAAO,KAAK,GAAG;qBAErB,KAAK,MACL,OAAO,OAAO,KAAK,MAClB,oBAAC,SAAM,WAAU,oBAAoB;YATlC,KAAK,GAWE,CACd,GACW;SACd,SACC,oBAAC;UACC,WAAW,GACT,wFACD;UACD,gBAAgB;AACd,0BAAe,SAAS;AACxB,qBAAU,MAAM;;oBAGjB;WACW;;SAEG,EACrB,oBAAC,cAAY;QACF,GACD;OACN;MACK;;IACT;GACD;;;;;AC5Kf,SAAgB,eAAe,EAC7B,SACA,eACA,iBAAiB,OACjB,cAAc,MACd,GAAG,SACmB;CAGtB,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EAAE,OAAO,eAAe,cAAc;EAC1C;EACA,MAAM,MAAM;EACb,CAAC;CAEF,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CACxC,MAAM,CAAC,mBAAmB,YAAY,QAAQ,KAAK,EACjD,SAAS,KACV,CAAC;CACF,MAAM,EAAE,SAAS,QACf,iBACA,eACA,CAAC,QAAQ,CAAC,eACX;AAED,iBAAgB;AACd,UAAQ,YAAY;IACnB,CAAC,YAAY,CAAC;AAEjB,QACE,8BAAC;EACC,GAAI;EACQ;EACZ,OAAO;EACP,KAAK,YAAY,MAAM,KAAK,GAAG,MAAM;EACrC,WAAW,UAAe;AACxB,SAAM,SAAS,MAAW;;EAE5B,UAAU;EACJ;EACE;EACC;EACT,OAAO,MAAM;GACb"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { cn } from "./utils-C0f9Ma6r.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
5
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
|
+
|
|
7
|
+
//#region src/components/ui/popover.tsx
|
|
8
|
+
function Popover({ ...props }) {
|
|
9
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
|
|
10
|
+
"data-slot": "popover",
|
|
11
|
+
...props
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function PopoverTrigger({ ...props }) {
|
|
15
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
|
|
16
|
+
"data-slot": "popover-trigger",
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function PopoverContent({ className, align = "center", sideOffset = 4,...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
|
|
22
|
+
align,
|
|
23
|
+
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
|
|
24
|
+
"data-slot": "popover-content",
|
|
25
|
+
sideOffset,
|
|
26
|
+
...props
|
|
27
|
+
}) });
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
//#endregion
|
|
31
|
+
//#region src/components/ui/scroll-area.tsx
|
|
32
|
+
function ScrollBar({ className, orientation = "vertical",...props }) {
|
|
33
|
+
return /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
|
|
34
|
+
className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
|
|
35
|
+
"data-slot": "scroll-area-scrollbar",
|
|
36
|
+
orientation,
|
|
37
|
+
...props,
|
|
38
|
+
children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, {
|
|
39
|
+
className: "bg-border relative flex-1 rounded-full",
|
|
40
|
+
"data-slot": "scroll-area-thumb"
|
|
41
|
+
})
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
//#endregion
|
|
46
|
+
export { Popover, PopoverContent, PopoverTrigger, ScrollBar };
|
|
47
|
+
//# sourceMappingURL=scroll-area-C2WadzN5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scroll-area-C2WadzN5.js","names":[],"sources":["../src/components/ui/popover.tsx","../src/components/ui/scroll-area.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { cn } from '@/lib/utils';\n\nfunction Popover({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverContent({\n className,\n align = 'center',\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n align={align}\n className={cn(\n 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n className\n )}\n data-slot=\"popover-content\"\n sideOffset={sideOffset}\n {...props}\n />\n </PopoverPrimitive.Portal>\n );\n}\n\nfunction PopoverAnchor({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n","'use client';\n\nimport * as React from 'react';\n\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\n\nimport { cn } from '@/lib/utils';\n\nfunction ScrollArea({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n return (\n <ScrollAreaPrimitive.Root\n className={cn('relative', className)}\n data-slot=\"scroll-area\"\n {...props}\n >\n <ScrollAreaPrimitive.Viewport\n className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n data-slot=\"scroll-area-viewport\"\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n );\n}\n\nfunction ScrollBar({\n className,\n orientation = 'vertical',\n ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n return (\n <ScrollAreaPrimitive.ScrollAreaScrollbar\n className={cn(\n 'flex touch-none p-px transition-colors select-none',\n orientation === 'vertical' &&\n 'h-full w-2.5 border-l border-l-transparent',\n orientation === 'horizontal' &&\n 'h-2.5 flex-col border-t border-t-transparent',\n className\n )}\n data-slot=\"scroll-area-scrollbar\"\n orientation={orientation}\n {...props}\n >\n <ScrollAreaPrimitive.ScrollAreaThumb\n className=\"bg-border relative flex-1 rounded-full\"\n data-slot=\"scroll-area-thumb\"\n />\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\n );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":";;;;;;;AAQA,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QAAO,oBAAC,iBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS;;AAGjE,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,oBAAC,iBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,EACb,GAAG,SACqD;AACxD,QACE,oBAAC,iBAAiB,oBAChB,oBAAC,iBAAiB;EACT;EACP,WAAW,GACT,keACA,UACD;EACD,aAAU;EACE;EACZ,GAAI;GACJ,GACsB;;;;;ACP9B,SAAS,UAAU,EACjB,WACA,cAAc,WACd,GAAG,SACoE;AACvE,QACE,oBAAC,oBAAoB;EACnB,WAAW,GACT,sDACA,gBAAgB,cACd,8CACF,gBAAgB,gBACd,gDACF,UACD;EACD,aAAU;EACG;EACb,GAAI;YAEJ,oBAAC,oBAAoB;GACnB,WAAU;GACV,aAAU;IACV;GACsC"}
|
package/dist/text-field.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FieldPath, FieldPathValue, FieldValues, UseControllerProps } from "react-hook-form";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
3
|
import { Options } from "use-mask-input";
|
|
4
4
|
import { Options as Options$1 } from "nuqs";
|
|
5
5
|
|
|
@@ -25,8 +25,10 @@ interface InputTextProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
25
25
|
detailClassName?: string;
|
|
26
26
|
inputClassName?: string;
|
|
27
27
|
help?: string;
|
|
28
|
-
moneyConfig?: Intl.NumberFormatOptions
|
|
29
|
-
|
|
28
|
+
moneyConfig?: Intl.NumberFormatOptions & {
|
|
29
|
+
prefix?: string;
|
|
30
|
+
suffix?: string;
|
|
31
|
+
};
|
|
30
32
|
}
|
|
31
33
|
declare function InputText({
|
|
32
34
|
label,
|
|
@@ -53,7 +55,7 @@ declare function InputText({
|
|
|
53
55
|
name,
|
|
54
56
|
onChange,
|
|
55
57
|
...props
|
|
56
|
-
}: InputTextProps):
|
|
58
|
+
}: InputTextProps): react_jsx_runtime0.JSX.Element;
|
|
57
59
|
interface TextFieldProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends UseControllerProps<TFieldValues, TFieldName> {
|
|
58
60
|
disabled?: boolean;
|
|
59
61
|
required?: boolean;
|
|
@@ -70,7 +72,7 @@ declare function TextField<TFieldValues extends FieldValues = FieldValues, TFiel
|
|
|
70
72
|
onChange,
|
|
71
73
|
transform,
|
|
72
74
|
...props
|
|
73
|
-
}: TextFieldProps<TFieldValues, TFieldName> & Omit<InputTextProps, 'onChange'>):
|
|
75
|
+
}: TextFieldProps<TFieldValues, TFieldName> & Omit<InputTextProps, 'onChange'>): react_jsx_runtime0.JSX.Element;
|
|
74
76
|
interface QueryTextFieldProps extends Omit<InputTextProps, 'onChange'> {
|
|
75
77
|
name: string;
|
|
76
78
|
defaultValue?: string;
|
|
@@ -82,7 +84,7 @@ declare function QueryTextField({
|
|
|
82
84
|
defaultValue,
|
|
83
85
|
options,
|
|
84
86
|
...props
|
|
85
|
-
}: QueryTextFieldProps):
|
|
87
|
+
}: QueryTextFieldProps): react_jsx_runtime0.JSX.Element;
|
|
86
88
|
interface CookieTextFieldProps extends InputTextProps {
|
|
87
89
|
name: string;
|
|
88
90
|
maxAge?: number;
|
|
@@ -91,7 +93,7 @@ declare function CookieTextField({
|
|
|
91
93
|
name,
|
|
92
94
|
maxAge,
|
|
93
95
|
...inputProps
|
|
94
|
-
}: CookieTextFieldProps):
|
|
96
|
+
}: CookieTextFieldProps): react_jsx_runtime0.JSX.Element;
|
|
95
97
|
//#endregion
|
|
96
98
|
export { CookieTextField, type CookieTextFieldProps, InputText, type InputTextProps, QueryTextField, type QueryTextFieldProps, TextField, type TextFieldProps };
|
|
97
99
|
//# sourceMappingURL=text-field.d.ts.map
|
package/dist/text-field.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","names":[],"sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":[],"mappings":";;;;;;KAuBK,MAAA;UAmBY,cAAA,SACP,KAAA,CAAM,oBAAoB;QAC5B,KAAA,CAAM,aAAa;EArBtB,KAAA,CAAA,EAAA,MAAI;EAmBQ,WAAA,CAAA,EAAA,MACf;EAAA,WAAA,CAAA,EAAA,MAAA;WAAkC,CAAA,EAAA,MAAA;UACT,CAAA,EAAA,OAAA;WAAb,CAAA,EAAA,SAAA,GAAA,OAAA;MASF,CAAA,EAAA,MAAM;UACL,CAAM,EAAA,OAAA;SACV,CAAA,EAFG,KAAA,CAAM,YAET,CAAA,GAAA,CAAA;UACO,CAAA,EAFH,KAAA,CAAM,SAEH;MACN,CAAA,EAFD,MAEO;aAMK,CAAA,EAPL,OAOK;OApBX,CAAA,EAcA,KAAA,CAAM,SAdA;EAAmB,EAAA,CAAA,EAAA,MAAA;
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","names":[],"sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":[],"mappings":"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"}
|
package/dist/text-field.js
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
import { cn } from "./utils-C0f9Ma6r.js";
|
|
5
5
|
import { Label } from "./label-BqtcCyMj.js";
|
|
6
|
-
import { FormField, FormItem, FormMessage,
|
|
6
|
+
import { FormField, FormItem, FormMessage, InputHelp } from "./input-help-C9Himejv.js";
|
|
7
|
+
import { Input } from "./input-COsbbKgj.js";
|
|
7
8
|
import { useFormContext } from "react-hook-form";
|
|
8
9
|
import { useEffect, useId, useState } from "react";
|
|
9
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -20,19 +21,21 @@ const defaultConfig = {
|
|
|
20
21
|
minimumFractionDigits: 2,
|
|
21
22
|
maximumFractionDigits: 2
|
|
22
23
|
};
|
|
23
|
-
const useMoneyInput = ({ config = defaultConfig, onChange,
|
|
24
|
+
const useMoneyInput = ({ config = defaultConfig, onChange, value }) => {
|
|
25
|
+
const prefix = config?.prefix || "";
|
|
26
|
+
const suffix = config?.suffix || "";
|
|
24
27
|
const divider = Math.pow(10, config?.maximumFractionDigits || 2);
|
|
25
28
|
const moneyFormatter = Intl.NumberFormat("pt-BR", config);
|
|
26
|
-
const [displayValue, setDisplayValue] = useState(() => value ? `${prefix}${moneyFormatter.format(value)}` : "");
|
|
29
|
+
const [displayValue, setDisplayValue] = useState(() => value ? `${prefix}${moneyFormatter.format(value)}${suffix}` : "");
|
|
27
30
|
const handleChange = (e) => {
|
|
28
31
|
const digits = e.target.value.replace(/\D/g, "");
|
|
29
32
|
const realValue = digits ? Number(digits) / divider : void 0;
|
|
30
|
-
const formattedValue = digits && realValue ? `${prefix}${moneyFormatter.format(realValue)}` : "";
|
|
33
|
+
const formattedValue = digits && realValue ? `${prefix}${moneyFormatter.format(realValue)}${suffix}` : "";
|
|
31
34
|
setDisplayValue(formattedValue);
|
|
32
35
|
onChange?.(realValue);
|
|
33
36
|
};
|
|
34
37
|
useEffect(() => {
|
|
35
|
-
const formatted = value ? `${prefix}${moneyFormatter.format(value)}` : "";
|
|
38
|
+
const formatted = value ? `${prefix}${moneyFormatter.format(value)}${suffix}` : "";
|
|
36
39
|
setDisplayValue(formatted);
|
|
37
40
|
}, [value]);
|
|
38
41
|
return {
|
|
@@ -50,8 +53,7 @@ function InputText({ label, description, placeholder, className, children, disab
|
|
|
50
53
|
onChange(value$1) {
|
|
51
54
|
onChange?.({ target: { value: value$1 } });
|
|
52
55
|
},
|
|
53
|
-
value: Number(value)
|
|
54
|
-
prefix: props.prefix
|
|
56
|
+
value: Number(value)
|
|
55
57
|
});
|
|
56
58
|
return /* @__PURE__ */ jsxs("div", {
|
|
57
59
|
className: cn("w-full flex flex-col gap-1", className),
|
package/dist/text-field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.js","names":["defaultConfig: Intl.NumberFormatOptions","useMoneyInput","value"],"sources":["../src/hooks/use-money-input.ts","../src/components/text-field/TextField.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\ntype useMoneyInputProps = {\n config?: Intl.NumberFormatOptions;\n prefix?: string;\n value?: number;\n onChange?: (value?: number) => void;\n};\n\nconst defaultConfig: Intl.NumberFormatOptions = {\n currency: 'BRL',\n currencyDisplay: 'symbol',\n currencySign: 'standard',\n style: 'currency',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n};\n\nconst useMoneyInput = ({\n config = defaultConfig,\n onChange,\n prefix = '',\n value,\n}: useMoneyInputProps) => {\n const divider = Math.pow(10, config?.maximumFractionDigits || 2);\n const moneyFormatter = Intl.NumberFormat('pt-BR', config);\n const [displayValue, setDisplayValue] = useState(() =>\n value ? `${prefix}${moneyFormatter.format(value)}` : ''\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const digits = e.target.value.replace(/\\D/g, '');\n const realValue = digits ? Number(digits) / divider : undefined;\n const formattedValue =\n digits && realValue ? `${prefix}${moneyFormatter.format(realValue)}` : '';\n\n setDisplayValue(formattedValue);\n onChange?.(realValue);\n };\n\n useEffect(() => {\n const formatted = value ? `${prefix}${moneyFormatter.format(value)}` : '';\n setDisplayValue(formatted);\n }, [value]);\n\n return { displayValue, handleChange };\n};\n\nexport default useMoneyInput;\n","'use client';\n\nimport { useEffect, useId, useState } from 'react';\n\nimport {\n type FieldPath,\n type FieldPathValue,\n type FieldValues,\n type UseControllerProps,\n useFormContext,\n} from 'react-hook-form';\nimport { type Options as MaskOptions, withMask } from 'use-mask-input';\nimport useMoneyInput from '@/hooks/use-money-input';\n\nimport { FormField, FormItem, FormMessage } from '@/components/ui/form';\nimport { Input } from '@/components/ui/input';\nimport { InputHelp } from '@/components/ui/input-help';\nimport { Label } from '@/components/ui/label';\n\nimport { cn } from '@/lib/utils';\nimport { useCookiesNext } from 'cookies-next';\nimport { type Options, parseAsString, useQueryState } from 'nuqs';\n\ntype Mask =\n | 'datetime'\n | 'email'\n | 'numeric'\n | 'currency'\n | 'decimal'\n | 'integer'\n | 'percentage'\n | 'url'\n | 'ip'\n | 'mac'\n | 'ssn'\n | 'brl-currency'\n | 'cpf'\n | 'cnpj'\n | (string & {})\n | (string[] & {})\n | null;\n\nexport interface InputTextProps\n extends React.InputHTMLAttributes<HTMLInputElement> {\n ref?: React.ForwardedRef<HTMLInputElement>;\n label?: string;\n placeholder?: string;\n description?: string;\n className?: string;\n disabled?: boolean;\n inputType?: 'default' | 'money';\n type?: string;\n required?: boolean;\n maskRef?: React.ForwardedRef<any>;\n children?: React.ReactNode;\n mask?: Mask;\n maskOptions?: MaskOptions;\n error?: React.ReactNode;\n id?: string;\n detail?: string;\n detailClassName?: string;\n inputClassName?: string;\n help?: string;\n moneyConfig?: Intl.NumberFormatOptions;\n prefix?: string;\n}\nfunction InputText({\n label,\n description,\n placeholder,\n className,\n children,\n disabled,\n type,\n required,\n maskRef,\n mask,\n inputType = 'default',\n maskOptions,\n error,\n id,\n ref,\n detail,\n detailClassName,\n inputClassName,\n help,\n value,\n moneyConfig,\n name,\n onChange,\n ...props\n}: InputTextProps) {\n const { displayValue, handleChange } = useMoneyInput({\n config: moneyConfig,\n onChange(value) {\n onChange?.({\n ...({} as React.ChangeEvent<HTMLInputElement>),\n target: { value: value as any },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n value: Number(value),\n prefix: props.prefix,\n });\n\n return (\n <div\n className={cn('w-full flex flex-col gap-1', className)}\n id={`input-${name?.replace('.', '-')}`}\n ref={ref}\n >\n <div className=\"flex items-end gap-1.5\">\n <div className={cn('flex !gap-0 flex-col', className)}>\n {label && (\n <Label\n className={cn(\n error && 'text-destructive',\n className,\n disabled && 'text-muted-foreground',\n 'inline-flex items-center flex-row gap-0.5 leading-none'\n )}\n htmlFor={id}\n >\n {label}:\n {required && (\n <span className=\"text-red-500 text-lg leading-[1px]\">*</span>\n )}\n </Label>\n )}\n {detail && (\n <Label\n className={cn(\n 'text-sm text-muted-foreground font-normal leading-none',\n detailClassName\n )}\n htmlFor={id}\n >\n {detail}\n </Label>\n )}\n </div>\n\n <InputHelp help={help} name={name} />\n </div>\n <div className=\"flex flex-col gap-1\">\n <div className=\"relative\">\n <Input\n className={cn(error && 'border-destructive', inputClassName)}\n disabled={disabled}\n id={id}\n onChange={inputType === 'money' ? handleChange : onChange}\n placeholder={placeholder}\n ref={\n maskRef ||\n ((mask\n ? withMask(mask, {\n autoUnmask: true,\n ...maskOptions,\n showMaskOnHover: false,\n showMaskOnFocus: false,\n clearMaskOnLostFocus: true,\n })\n : undefined) as any)\n }\n type={type}\n value={value && inputType === 'money' ? displayValue : value}\n {...props}\n />\n {children}\n </div>\n {description && (\n <p className={cn('text-sm text-muted-foreground', className)}>\n {description}\n </p>\n )}\n {error && error}\n </div>\n </div>\n );\n}\n\nexport interface TextFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> extends UseControllerProps<TFieldValues, TFieldName> {\n disabled?: boolean;\n required?: boolean;\n children?: React.ReactNode;\n defaultValue?: FieldPathValue<TFieldValues, TFieldName>;\n onChange?: (value: string) => Promise<void> | void;\n transform?: (value: string) => string;\n}\n\nconst defaultTransform = (value: string) => value;\n\nfunction TextField<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n name,\n className,\n required,\n defaultValue,\n onChange,\n transform = defaultTransform,\n ...props\n}: TextFieldProps<TFieldValues, TFieldName> &\n Omit<InputTextProps, 'onChange'>) {\n const { control } = useFormContext();\n const id = useId();\n\n return (\n <FormField\n control={control}\n defaultValue={defaultValue}\n name={name}\n render={({ field, fieldState }) => (\n <FormItem className={cn('w-full', className)}>\n <InputText\n {...field}\n {...props}\n disabled={props.disabled}\n error={fieldState?.error && <FormMessage />}\n id={`${id}-${name}`}\n name={name}\n onChange={(e) => {\n field.onChange(transform(e.target.value));\n onChange?.(transform(e.target.value));\n }}\n required={required}\n value={field.value || ''}\n />\n </FormItem>\n )}\n rules={{\n required: required ? 'Campo obrigatório' : false,\n }}\n />\n );\n}\n\nexport interface QueryTextFieldProps extends Omit<InputTextProps, 'onChange'> {\n name: string;\n defaultValue?: string;\n options?: Options;\n onChange?: (value: string) => void;\n}\n\nfunction QueryTextField({\n name,\n defaultValue,\n options,\n ...props\n}: QueryTextFieldProps) {\n const id = useId();\n const [filter, setFilter] = useQueryState(\n name,\n parseAsString\n .withOptions({\n clearOnDefault: true,\n shallow: false,\n limitUrlUpdates: {\n method: 'debounce',\n timeMs: 400,\n },\n ...options,\n })\n .withDefault(defaultValue ?? '')\n );\n\n return (\n <InputText\n id={`${id}-${name}`}\n name={name}\n value={filter}\n {...props}\n onChange={(e) => {\n setFilter(e.target.value);\n props.onChange?.(e.target.value);\n }}\n />\n );\n}\n\nexport interface CookieTextFieldProps extends InputTextProps {\n name: string;\n maxAge?: number;\n}\n\nfunction CookieTextField({\n name,\n maxAge = 60 * 60 * 24 * 7,\n ...inputProps\n}: CookieTextFieldProps) {\n const { getCookie, setCookie, deleteCookie } = useCookiesNext();\n const [value, setValue] = useState('');\n\n useEffect(() => {\n const stored = getCookie(`input-${name}`);\n if (stored && typeof stored === 'string') {\n setValue(stored);\n }\n }, [name, getCookie]);\n\n useEffect(() => {\n if (value !== '' && value !== undefined) {\n setCookie(`input-${name}`, value, { maxAge });\n } else {\n deleteCookie(`input-${name}`);\n }\n }, [name, value, setCookie]);\n\n return (\n <InputText\n {...inputProps}\n id={`cookie-${name}`}\n name={name}\n onChange={(e) => setValue(e.target.value)}\n value={value}\n />\n );\n}\n\nexport { InputText, TextField, QueryTextField, CookieTextField };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"text-field.js","names":["defaultConfig: Intl.NumberFormatOptions","useMoneyInput","value"],"sources":["../src/hooks/use-money-input.ts","../src/components/text-field/TextField.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\ntype useMoneyInputProps = {\n config?: Intl.NumberFormatOptions & { prefix?: string; suffix?: string };\n value?: number;\n onChange?: (value?: number) => void;\n};\n\nconst defaultConfig: Intl.NumberFormatOptions = {\n currency: 'BRL',\n currencyDisplay: 'symbol',\n currencySign: 'standard',\n style: 'currency',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n};\n\nconst useMoneyInput = ({\n config = defaultConfig,\n onChange,\n value,\n}: useMoneyInputProps) => {\n const prefix = config?.prefix || '';\n const suffix = config?.suffix || '';\n const divider = Math.pow(10, config?.maximumFractionDigits || 2);\n const moneyFormatter = Intl.NumberFormat('pt-BR', config);\n const [displayValue, setDisplayValue] = useState(() =>\n value ? `${prefix}${moneyFormatter.format(value)}${suffix}` : ''\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const digits = e.target.value.replace(/\\D/g, '');\n const realValue = digits ? Number(digits) / divider : undefined;\n const formattedValue =\n digits && realValue\n ? `${prefix}${moneyFormatter.format(realValue)}${suffix}`\n : '';\n\n setDisplayValue(formattedValue);\n onChange?.(realValue);\n };\n\n useEffect(() => {\n const formatted = value\n ? `${prefix}${moneyFormatter.format(value)}${suffix}`\n : '';\n setDisplayValue(formatted);\n }, [value]);\n\n return { displayValue, handleChange };\n};\n\nexport default useMoneyInput;\n","'use client';\n\nimport { useEffect, useId, useState } from 'react';\n\nimport {\n type FieldPath,\n type FieldPathValue,\n type FieldValues,\n type UseControllerProps,\n useFormContext,\n} from 'react-hook-form';\nimport { type Options as MaskOptions, withMask } from 'use-mask-input';\nimport useMoneyInput from '@/hooks/use-money-input';\n\nimport { FormField, FormItem, FormMessage } from '@/components/ui/form';\nimport { Input } from '@/components/ui/input';\nimport { InputHelp } from '@/components/ui/input-help';\nimport { Label } from '@/components/ui/label';\n\nimport { cn } from '@/lib/utils';\nimport { useCookiesNext } from 'cookies-next';\nimport { type Options, parseAsString, useQueryState } from 'nuqs';\n\ntype Mask =\n | 'datetime'\n | 'email'\n | 'numeric'\n | 'currency'\n | 'decimal'\n | 'integer'\n | 'percentage'\n | 'url'\n | 'ip'\n | 'mac'\n | 'ssn'\n | 'brl-currency'\n | 'cpf'\n | 'cnpj'\n | (string & {})\n | (string[] & {})\n | null;\n\nexport interface InputTextProps\n extends React.InputHTMLAttributes<HTMLInputElement> {\n ref?: React.ForwardedRef<HTMLInputElement>;\n label?: string;\n placeholder?: string;\n description?: string;\n className?: string;\n disabled?: boolean;\n inputType?: 'default' | 'money';\n type?: string;\n required?: boolean;\n maskRef?: React.ForwardedRef<any>;\n children?: React.ReactNode;\n mask?: Mask;\n maskOptions?: MaskOptions;\n error?: React.ReactNode;\n id?: string;\n detail?: string;\n detailClassName?: string;\n inputClassName?: string;\n help?: string;\n moneyConfig?: Intl.NumberFormatOptions & { prefix?: string; suffix?: string };\n}\nfunction InputText({\n label,\n description,\n placeholder,\n className,\n children,\n disabled,\n type,\n required,\n maskRef,\n mask,\n inputType = 'default',\n maskOptions,\n error,\n id,\n ref,\n detail,\n detailClassName,\n inputClassName,\n help,\n value,\n moneyConfig,\n name,\n onChange,\n ...props\n}: InputTextProps) {\n const { displayValue, handleChange } = useMoneyInput({\n config: moneyConfig,\n onChange(value) {\n onChange?.({\n ...({} as React.ChangeEvent<HTMLInputElement>),\n target: { value: value as any },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n value: Number(value),\n });\n\n return (\n <div\n className={cn('w-full flex flex-col gap-1', className)}\n id={`input-${name?.replace('.', '-')}`}\n ref={ref}\n >\n <div className=\"flex items-end gap-1.5\">\n <div className={cn('flex !gap-0 flex-col', className)}>\n {label && (\n <Label\n className={cn(\n error && 'text-destructive',\n className,\n disabled && 'text-muted-foreground',\n 'inline-flex items-center flex-row gap-0.5 leading-none'\n )}\n htmlFor={id}\n >\n {label}:\n {required && (\n <span className=\"text-red-500 text-lg leading-[1px]\">*</span>\n )}\n </Label>\n )}\n {detail && (\n <Label\n className={cn(\n 'text-sm text-muted-foreground font-normal leading-none',\n detailClassName\n )}\n htmlFor={id}\n >\n {detail}\n </Label>\n )}\n </div>\n\n <InputHelp help={help} name={name} />\n </div>\n <div className=\"flex flex-col gap-1\">\n <div className=\"relative\">\n <Input\n className={cn(error && 'border-destructive', inputClassName)}\n disabled={disabled}\n id={id}\n onChange={inputType === 'money' ? handleChange : onChange}\n placeholder={placeholder}\n ref={\n maskRef ||\n ((mask\n ? withMask(mask, {\n autoUnmask: true,\n ...maskOptions,\n showMaskOnHover: false,\n showMaskOnFocus: false,\n clearMaskOnLostFocus: true,\n })\n : undefined) as any)\n }\n type={type}\n value={value && inputType === 'money' ? displayValue : value}\n {...props}\n />\n {children}\n </div>\n {description && (\n <p className={cn('text-sm text-muted-foreground', className)}>\n {description}\n </p>\n )}\n {error && error}\n </div>\n </div>\n );\n}\n\nexport interface TextFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> extends UseControllerProps<TFieldValues, TFieldName> {\n disabled?: boolean;\n required?: boolean;\n children?: React.ReactNode;\n defaultValue?: FieldPathValue<TFieldValues, TFieldName>;\n onChange?: (value: string) => Promise<void> | void;\n transform?: (value: string) => string;\n}\n\nconst defaultTransform = (value: string) => value;\n\nfunction TextField<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n name,\n className,\n required,\n defaultValue,\n onChange,\n transform = defaultTransform,\n ...props\n}: TextFieldProps<TFieldValues, TFieldName> &\n Omit<InputTextProps, 'onChange'>) {\n const { control } = useFormContext();\n const id = useId();\n\n return (\n <FormField\n control={control}\n defaultValue={defaultValue}\n name={name}\n render={({ field, fieldState }) => (\n <FormItem className={cn('w-full', className)}>\n <InputText\n {...field}\n {...props}\n disabled={props.disabled}\n error={fieldState?.error && <FormMessage />}\n id={`${id}-${name}`}\n name={name}\n onChange={(e) => {\n field.onChange(transform(e.target.value));\n onChange?.(transform(e.target.value));\n }}\n required={required}\n value={field.value || ''}\n />\n </FormItem>\n )}\n rules={{\n required: required ? 'Campo obrigatório' : false,\n }}\n />\n );\n}\n\nexport interface QueryTextFieldProps extends Omit<InputTextProps, 'onChange'> {\n name: string;\n defaultValue?: string;\n options?: Options;\n onChange?: (value: string) => void;\n}\n\nfunction QueryTextField({\n name,\n defaultValue,\n options,\n ...props\n}: QueryTextFieldProps) {\n const id = useId();\n const [filter, setFilter] = useQueryState(\n name,\n parseAsString\n .withOptions({\n clearOnDefault: true,\n shallow: false,\n limitUrlUpdates: {\n method: 'debounce',\n timeMs: 400,\n },\n ...options,\n })\n .withDefault(defaultValue ?? '')\n );\n\n return (\n <InputText\n id={`${id}-${name}`}\n name={name}\n value={filter}\n {...props}\n onChange={(e) => {\n setFilter(e.target.value);\n props.onChange?.(e.target.value);\n }}\n />\n );\n}\n\nexport interface CookieTextFieldProps extends InputTextProps {\n name: string;\n maxAge?: number;\n}\n\nfunction CookieTextField({\n name,\n maxAge = 60 * 60 * 24 * 7,\n ...inputProps\n}: CookieTextFieldProps) {\n const { getCookie, setCookie, deleteCookie } = useCookiesNext();\n const [value, setValue] = useState('');\n\n useEffect(() => {\n const stored = getCookie(`input-${name}`);\n if (stored && typeof stored === 'string') {\n setValue(stored);\n }\n }, [name, getCookie]);\n\n useEffect(() => {\n if (value !== '' && value !== undefined) {\n setCookie(`input-${name}`, value, { maxAge });\n } else {\n deleteCookie(`input-${name}`);\n }\n }, [name, value, setCookie]);\n\n return (\n <InputText\n {...inputProps}\n id={`cookie-${name}`}\n name={name}\n onChange={(e) => setValue(e.target.value)}\n value={value}\n />\n );\n}\n\nexport { InputText, TextField, QueryTextField, CookieTextField };\n"],"mappings":"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"}
|
package/dist/toggle-field.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React$1 from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime7 from "react/jsx-runtime";
|
|
3
3
|
import { Item, Root } from "@radix-ui/react-toggle-group";
|
|
4
4
|
import { VariantProps } from "class-variance-authority";
|
|
5
5
|
import * as class_variance_authority_types0 from "class-variance-authority/types";
|
|
@@ -23,7 +23,7 @@ declare function ToggleGroup({
|
|
|
23
23
|
transition,
|
|
24
24
|
activeClassName,
|
|
25
25
|
...props
|
|
26
|
-
}: ToggleGroupProps):
|
|
26
|
+
}: ToggleGroupProps): react_jsx_runtime7.JSX.Element;
|
|
27
27
|
//#endregion
|
|
28
28
|
//#region src/components/toggle-field/ToggleField.d.ts
|
|
29
29
|
type ToggleFieldProps = Omit<React.ComponentProps<typeof ToggleGroup>, 'type'> & {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "maquinaweb-ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.19.0",
|
|
4
4
|
"description": "A minimal React component library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
"import": "./dist/container-animation.js",
|
|
18
18
|
"types": "./dist/container-animation.d.ts"
|
|
19
19
|
},
|
|
20
|
+
"./remote-selector": {
|
|
21
|
+
"import": "./dist/remote-selector.js",
|
|
22
|
+
"types": "./dist/remote-selector.d.ts"
|
|
23
|
+
},
|
|
20
24
|
"./split-text-poor": {
|
|
21
25
|
"import": "./dist/split-text-poor.js",
|
|
22
26
|
"types": "./dist/split-text-poor.d.ts"
|
|
@@ -81,7 +85,9 @@
|
|
|
81
85
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
82
86
|
"class-variance-authority": "^0.7.1",
|
|
83
87
|
"clsx": "^2.1.1",
|
|
84
|
-
"
|
|
88
|
+
"cmdk": "^1.1.1",
|
|
89
|
+
"tailwind-merge": "^3.3.1",
|
|
90
|
+
"use-debounce": "^10.0.6"
|
|
85
91
|
},
|
|
86
92
|
"devDependencies": {
|
|
87
93
|
"@biomejs/biome": "^2.3.2",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-help-BJr1B5ZZ.js","names":["ContentHelp: React.FC<{\n children: React.ReactNode;\n help?: React.ReactNode | string;\n className?: string;\n side?: 'top' | 'right' | 'bottom' | 'left';\n sideOffset?: number;\n}>","TooltipPortal","InputHelp: React.FC<{\n help?: string;\n name?: string;\n className?: string;\n}>"],"sources":["../src/components/ui/form.tsx","../src/components/ui/input.tsx","../src/components/ui/tooltip.tsx","../src/components/ui/content-help.tsx","../src/components/ui/input-help.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport {\n Controller,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n FormProvider,\n useFormContext,\n useFormState,\n} from 'react-hook-form';\n\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport { Label } from '@/components/ui/label';\n\nimport { cn } from '@/lib/utils';\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n);\n\nconst FormContext = React.createContext<{\n onSubmit?: (data?: FieldValues) => void;\n helper?: Record<string, string>;\n}>({});\n\nexport const useFormContextSubmit = () => {\n const context = React.useContext(FormContext);\n if (!context) {\n return {};\n }\n return context;\n};\n\nconst Form: React.FC<\n React.ComponentProps<typeof FormProvider<FieldValues>> & {\n onSubmit?: (data?: FieldValues) => void;\n helper?: Record<string, string>;\n }\n> = ({ onSubmit, helper, ...props }) => {\n return (\n <FormContext.Provider value={{ onSubmit, helper }}>\n <FormProvider {...props} />\n </FormContext.Provider>\n );\n};\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n );\n};\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext);\n const itemContext = React.useContext(FormItemContext);\n const { getFieldState } = useFormContext();\n const formState = useFormState({ name: fieldContext.name });\n const fieldState = getFieldState(fieldContext.name, formState);\n\n if (!fieldContext) {\n throw new Error('useFormField should be used within <FormField>');\n }\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n };\n};\n\ntype FormItemContextValue = {\n id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n const id = React.useId();\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div\n className={cn('flex flex-col gap-1', className)}\n data-slot=\"form-item\"\n {...props}\n />\n </FormItemContext.Provider>\n );\n}\n\nfunction FormLabel({\n className,\n ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n const { error, formItemId } = useFormField();\n\n return (\n <Label\n className={cn('data-[error=true]:text-destructive', className)}\n data-error={!!error}\n data-slot=\"form-label\"\n htmlFor={formItemId}\n {...props}\n />\n );\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n const { error, formItemId, formDescriptionId, formMessageId } =\n useFormField();\n\n return (\n <Slot\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n data-slot=\"form-control\"\n id={formItemId}\n {...props}\n />\n );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n const { formDescriptionId } = useFormField();\n\n return (\n <p\n className={cn('text-muted-foreground text-sm', className)}\n data-slot=\"form-description\"\n id={formDescriptionId}\n {...props}\n />\n );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<'p'>) {\n const { error, formMessageId } = useFormField();\n const body = error ? String(error?.message ?? '') : props.children;\n\n if (!body) {\n return null;\n }\n\n return (\n <p\n className={cn('text-destructive text-xs', className)}\n data-slot=\"form-message\"\n id={formMessageId}\n {...props}\n >\n {body}\n </p>\n );\n}\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n};\n","import type * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n return (\n <input\n className={cn(\n 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n 'focus-visible:border-ring focus-visible:ring-ring/75 focus-visible:ring-[2px]',\n 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive ring-offset-[2px] transition-all duration-300',\n className\n )}\n data-slot=\"input\"\n type={type}\n {...props}\n />\n );\n}\n\nexport { Input };\n","'use client';\n\nimport * as React from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nimport { cn } from '@/lib/utils';\n\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delayDuration={delayDuration}\n {...props}\n />\n );\n}\n\nfunction Tooltip({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n className,\n sideOffset = 0,\n children,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n className={cn(\n 'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n className\n )}\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","import { Portal as TooltipPortal } from '@radix-ui/react-tooltip';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\nconst ContentHelp: React.FC<{\n children: React.ReactNode;\n help?: React.ReactNode | string;\n className?: string;\n side?: 'top' | 'right' | 'bottom' | 'left';\n sideOffset?: number;\n}> = ({ children, help, className, side = 'top', sideOffset = 10 }) => {\n return help ? (\n <Tooltip delayDuration={250}>\n <TooltipTrigger asChild>{children as any}</TooltipTrigger>\n <TooltipPortal>\n <TooltipContent\n className={cn('flex items-center px-2 leading-none', className)}\n side={side}\n sideOffset={10}\n >\n <p className=\"w-full text-wrap whitespace-break-spaces\">{help}</p>\n </TooltipContent>\n </TooltipPortal>\n </Tooltip>\n ) : (\n children\n );\n};\n\nexport { ContentHelp };\n","'use client';\n\nimport { ContentHelp } from '@/components/ui/content-help';\n\nimport { Info } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { useFormContextSubmit } from './form';\n\nconst InputHelp: React.FC<{\n help?: string;\n name?: string;\n className?: string;\n}> = ({ help, name, className }) => {\n const { helper } = useFormContextSubmit();\n const helpText = (name && helper?.[name]) || help;\n\n return (\n helpText && (\n <ContentHelp\n className={cn(\n 'whitespace-pre-line leading-relaxed max-w-96 text-[13px]'\n )}\n help={helpText}\n >\n <button\n className={cn(\n 'mb-0.5 size-fit p-1 hover:bg-muted rounded-sm',\n className\n )}\n type=\"button\"\n >\n <Info className=\"size-3.5\" />\n </button>\n </ContentHelp>\n )\n );\n};\nexport { InputHelp };\n"],"mappings":"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"}
|