@vendure/dashboard 3.2.0 → 3.2.2

package/src/lib/components/ui/form.tsx

@@ -1,141 +1,141 @@
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
-import {
-    Controller,
-    FormProvider,
-    useFormContext,
-    useFormState,
-    type ControllerProps,
-    type FieldPath,
-    type FieldValues,
-} from 'react-hook-form';
-
-import { cn } from '@/lib/utils.js';
-import { Label } from '@/components/ui/label.js';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-    name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
-const FormField = <
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-    ...props
-}: ControllerProps<TFieldValues, TName>) => {
-    return (
-        <FormFieldContext.Provider value={{ name: props.name }}>
-            <Controller {...props} />
-        </FormFieldContext.Provider>
-    );
-};
-
-const useFormField = () => {
-    const fieldContext = React.useContext(FormFieldContext);
-    const itemContext = React.useContext(FormItemContext);
-    const { getFieldState } = useFormContext();
-    const formState = useFormState({ name: fieldContext.name });
-    const fieldState = getFieldState(fieldContext.name, formState);
-
-    if (!fieldContext) {
-        throw new Error('useFormField should be used within <FormField>');
-    }
-
-    const { id } = itemContext;
-
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        formMessageId: `${id}-form-item-message`,
-        ...fieldState,
-    };
-};
-
-type FormItemContextValue = {
-    id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
-function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
-    const id = React.useId();
-
-    return (
-        <FormItemContext.Provider value={{ id }}>
-            <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
-        </FormItemContext.Provider>
-    );
-}
-
-function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-    const { error, formItemId } = useFormField();
-
-    return (
-        <Label
-            data-slot="form-label"
-            data-error={!!error}
-            className={cn('data-[error=true]:text-destructive', className)}
-            htmlFor={formItemId}
-            {...props}
-        />
-    );
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-    return (
-        <Slot
-            data-slot="form-control"
-            id={formItemId}
-            aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-            aria-invalid={!!error}
-            {...props}
-        />
-    );
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
-    const { formDescriptionId } = useFormField();
-
-    return (
-        <p
-            data-slot="form-description"
-            id={formDescriptionId}
-            className={cn('text-muted-foreground text-sm', className)}
-            {...props}
-        />
-    );
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
-    const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message ?? '') : props.children;
-
-    if (!body) {
-        return null;
-    }
-
-    return (
-        <p
-            data-slot="form-message"
-            id={formMessageId}
-            className={cn('text-destructive text-sm', className)}
-            {...props}
-        >
-            {body}
-        </p>
-    );
-}
-
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import {
+    Controller,
+    FormProvider,
+    useFormContext,
+    useFormState,
+    type ControllerProps,
+    type FieldPath,
+    type FieldValues,
+} from 'react-hook-form';
+
+import { cn } from '@/lib/utils.js';
+import { Label } from '@/components/ui/label.js';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+    name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+    ...props
+}: ControllerProps<TFieldValues, TName>) => {
+    return (
+        <FormFieldContext.Provider value={{ name: props.name }}>
+            <Controller {...props} />
+        </FormFieldContext.Provider>
+    );
+};
+
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState } = useFormContext();
+    const formState = useFormState({ name: fieldContext.name });
+    const fieldState = getFieldState(fieldContext.name, formState);
+
+    if (!fieldContext) {
+        throw new Error('useFormField should be used within <FormField>');
+    }
+
+    const { id } = itemContext;
+
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+
+type FormItemContextValue = {
+    id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+    const id = React.useId();
+
+    return (
+        <FormItemContext.Provider value={{ id }}>
+            <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
+        </FormItemContext.Provider>
+    );
+}
+
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+    const { error, formItemId } = useFormField();
+
+    return (
+        <Label
+            data-slot="form-label"
+            data-error={!!error}
+            className={cn('data-[error=true]:text-destructive', className)}
+            htmlFor={formItemId}
+            {...props}
+        />
+    );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+    return (
+        <Slot
+            data-slot="form-control"
+            id={formItemId}
+            aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+            aria-invalid={!!error}
+            {...props}
+        />
+    );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+    const { formDescriptionId } = useFormField();
+
+    return (
+        <p
+            data-slot="form-description"
+            id={formDescriptionId}
+            className={cn('text-muted-foreground text-sm', className)}
+            {...props}
+        />
+    );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? '') : props.children;
+
+    if (!body) {
+        return null;
+    }
+
+    return (
+        <p
+            data-slot="form-message"
+            id={formMessageId}
+            className={cn('text-destructive text-sm', className)}
+            {...props}
+        >
+            {body}
+        </p>
+    );
+}
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/src/lib/components/ui/hover-card.tsx

@@ -1,36 +1,36 @@
-import * as React from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-
-import { cn } from '@/lib/utils.js';
-
-function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-    return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
-}
-
-function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-    return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
-}
-
-function HoverCardContent({
-    className,
-    align = 'center',
-    sideOffset = 4,
-    ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-    return (
-        <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-            <HoverCardPrimitive.Content
-                data-slot="hover-card-content"
-                align={align}
-                sideOffset={sideOffset}
-                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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-                    className,
-                )}
-                {...props}
-            />
-        </HoverCardPrimitive.Portal>
-    );
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+
+import { cn } from '@/lib/utils.js';
+
+function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+    return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+    return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+}
+
+function HoverCardContent({
+    className,
+    align = 'center',
+    sideOffset = 4,
+    ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+    return (
+        <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+            <HoverCardPrimitive.Content
+                data-slot="hover-card-content"
+                align={align}
+                sideOffset={sideOffset}
+                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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+                    className,
+                )}
+                {...props}
+            />
+        </HoverCardPrimitive.Portal>
+    );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/src/lib/components/ui/input.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils.js';
-
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-    return (
-        <input
-            type={type}
-            data-slot="input"
-            className={cn(
-                'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground aria-invalid:outline-destructive/60 aria-invalid:ring-destructive/20 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive 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] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4',
-                className,
-            )}
-            {...props}
-        />
-    );
-}
-
-export { Input };
+import * as React from 'react';
+
+import { cn } from '@/lib/utils.js';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+    return (
+        <input
+            type={type}
+            data-slot="input"
+            className={cn(
+                'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground aria-invalid:outline-destructive/60 aria-invalid:ring-destructive/20 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive 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] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Input };

package/src/lib/components/ui/label.tsx

@@ -1,21 +1,21 @@
-'use client';
-
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-
-import { cn } from '@/lib/utils.js';
-
-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-    return (
-        <LabelPrimitive.Root
-            data-slot="label"
-            className={cn(
-                'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-                className,
-            )}
-            {...props}
-        />
-    );
-}
-
-export { Label };
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+import { cn } from '@/lib/utils.js';
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+    return (
+        <LabelPrimitive.Root
+            data-slot="label"
+            className={cn(
+                'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Label };