@vritti/quantum-ui 0.1.11 → 0.1.15

package/dist/Form.d.ts

@@ -0,0 +1,263 @@
+import { Controller } from 'react-hook-form';
+import { default as default_2 } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { JSX } from 'react/jsx-runtime';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as React_2 from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { VariantProps } from 'class-variance-authority';
+
+export { Controller }
+
+export declare function Field({
+    className,
+    orientation = "vertical",
+    ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+    return (
+    <div
+    role="group"
+    data-slot="field"
+    data-orientation={orientation}
+    className={cn(fieldVariants({ orientation }), className)}
+        {...props}
+    />
+    )
+}
+
+export declare function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+    <div
+    data-slot="field-content"
+    className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+        )}
+        {...props}
+    />
+    )
+}
+
+export declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+    return (
+    <p
+    data-slot="field-description"
+    className={cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+        )}
+        {...props}
+    />
+    )
+}
+
+export declare function FieldError({
+    className,
+    children,
+    errors,
+    ...props
+}: React.ComponentProps<"div"> & {
+    errors?: Array<{ message?: string } | undefined>
+}) {
+    const content = useMemo(() => {
+        if (children) {
+            return children
+        }
+
+        if (!errors?.length) {
+            return null
+        }
+
+        if (errors?.length == 1) {
+            return errors[0]?.message
+        }
+
+        return (
+        <ul className="ml-4 flex list-disc flex-col gap-1">
+            {errors.map(
+            (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+            )}
+        </ul>
+        )
+    }, [children, errors])
+
+    if (!content) {
+        return null
+    }
+
+    return (
+    <div
+    role="alert"
+    data-slot="field-error"
+    className={cn("text-destructive text-sm font-normal", className)}
+        {...props}
+    >
+        {content}
+    </div>
+    )
+}
+
+export declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+    <div
+    data-slot="field-group"
+    className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+        )}
+        {...props}
+    />
+    )
+}
+
+export declare function FieldLabel({
+    className,
+    ...props
+}: React.ComponentProps<typeof Label>) {
+    return (
+    <Label
+    data-slot="field-label"
+    className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+        )}
+        {...props}
+    />
+    )
+}
+
+export declare function FieldLegend({
+    className,
+    variant = "legend",
+    ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+    return (
+    <legend
+    data-slot="field-legend"
+    data-variant={variant}
+    className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+        )}
+        {...props}
+    />
+    )
+}
+
+export declare function FieldSeparator({
+    children,
+    className,
+    ...props
+}: React.ComponentProps<"div"> & {
+    children?: React.ReactNode
+}) {
+    return (
+    <div
+    data-slot="field-separator"
+    data-content={!!children}
+    className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+        )}
+        {...props}
+    >
+    <Separator className="absolute inset-0 top-1/2" />
+        {children && (
+        <span
+        className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+        data-slot="field-separator-content"
+        >
+            {children}
+        </span>
+        )}
+    </div>
+    )
+}
+
+export declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+    return (
+    <fieldset
+    data-slot="field-set"
+    className={cn(
+        "flex flex-col gap-4",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+        )}
+        {...props}
+    />
+    )
+}
+
+export declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+    <div
+    data-slot="field-label"
+    className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+        )}
+        {...props}
+    />
+    )
+}
+
+declare const fieldVariants = cva(
+"group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+    {
+    variants: {
+        orientation: {
+            vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+            horizontal: [
+            "flex-row items-center",
+            "[&>[data-slot=field-label]]:flex-auto",
+            "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            ],
+            responsive: [
+            "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+            "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+            "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            ],
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+}
+);
+
+export declare function Form<TFieldValues extends FieldValues = FieldValues>({ form, onSubmit, children, showRootError, rootErrorPosition, rootErrorClassName, ...props }: FormProps<TFieldValues>): JSX.Element;
+
+export declare namespace Form {
+    var displayName: string;
+}
+
+export declare interface FormProps<TFieldValues extends FieldValues = FieldValues> extends Omit<default_2.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+    form: UseFormReturn<TFieldValues>;
+    onSubmit: (data: TFieldValues) => void | Promise<void>;
+    children: default_2.ReactNode;
+    showRootError?: boolean;
+    rootErrorPosition?: 'top' | 'bottom';
+    rootErrorClassName?: string;
+}
+
+declare function Label({ className, ...props }: React_2.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 { }