@vritti/quantum-ui 0.1.23 → 0.2.0

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 import { AxiosInstance } from 'axios';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { ClassValue } from 'clsx';
-import { ColumnDef } from '@tanstack/react-table';
-import { ColumnFiltersState } from '@tanstack/react-table';
 import { Controller } from 'react-hook-form';
 import { Country } from 'react-phone-number-input';
 import { DayPicker } from 'react-day-picker';
@@ -13,10 +11,9 @@ import { JSX } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { Value as PhoneValue } from 'react-phone-number-input';
 import * as React_2 from 'react';
-import { SortingState } from '@tanstack/react-table';
 import { UseFormReturn } from 'react-hook-form';
+import { UseMutationResult } from '@tanstack/react-query';
 import { VariantProps } from 'class-variance-authority';
-import { VisibilityState } from '@tanstack/react-table';
 
 export declare interface AuthConfig {
     tokenHeaderName: string;
@@ -32,7 +29,9 @@ export declare interface AxiosConfig {
     headers?: Record<string, string>;
 }
 
-export declare function Button({
+export declare const Button: React_2.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
+
+declare function Button_2({
     className,
     variant,
     size,
@@ -44,7 +43,12 @@ VariantProps<typeof buttonVariants> & {
 }) {
     const Comp = asChild ? Slot : 'button';
 
-    return <Comp data-slot='button' className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+    return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+}
+
+export declare interface ButtonProps extends React_2.ComponentProps<typeof Button_2> {
+    isLoading?: boolean;
+    loadingText?: string;
 }
 
 export declare const buttonVariants = cva(
@@ -72,19 +76,19 @@ export declare const buttonVariants = cva(
         variant: 'default',
         size: 'default',
     },
-}
+},
 );
 
 declare type CalendarProps = React_2.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React_2.ComponentProps<typeof Button>["variant"]
-}
+    buttonVariant?: React_2.ComponentProps<typeof Button_2>['variant'];
+};
 
 export declare function cancelTokenRefresh(): void;
 
 export declare function Card({ className, ...props }: React_2.ComponentProps<'div'>) {
     return (
     <div
-    data-slot='card'
+    data-slot="card"
     className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)}
         {...props}
     />
@@ -92,26 +96,26 @@ export declare function Card({ className, ...props }: React_2.ComponentProps<'di
 }
 
 export declare function CardContent({ className, ...props }: React_2.ComponentProps<'div'>) {
-    return <div data-slot='card-content' className={cn('px-6', className)} {...props} />;
+    return <div data-slot="card-content" className={cn('px-6', className)} {...props} />;
 }
 
 export declare function CardDescription({ className, ...props }: React_2.ComponentProps<'div'>) {
-    return <div data-slot='card-description' className={cn('text-muted-foreground text-sm', className)} {...props} />;
+    return <div data-slot="card-description" className={cn('text-muted-foreground text-sm', className)} {...props} />;
 }
 
 export declare function CardFooter({ className, ...props }: React_2.ComponentProps<'div'>) {
     return (
-    <div data-slot='card-footer' className={cn('flex items-center px-6 [.border-t]:pt-6', className)} {...props} />
+    <div data-slot="card-footer" className={cn('flex items-center px-6 [.border-t]:pt-6', className)} {...props} />
     );
 }
 
 export declare function CardHeader({ className, ...props }: React_2.ComponentProps<'div'>) {
     return (
     <div
-    data-slot='card-header'
+    data-slot="card-header"
     className={cn(
         '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
-        className
+        className,
         )}
         {...props}
     />
@@ -119,21 +123,18 @@ export declare function CardHeader({ className, ...props }: React_2.ComponentPro
 }
 
 export declare function CardTitle({ className, ...props }: React_2.ComponentProps<'div'>) {
-    return <div data-slot='card-title' className={cn('leading-none font-semibold', className)} {...props} />;
+    return <div data-slot="card-title" className={cn('leading-none font-semibold', className)} {...props} />;
 }
 
 export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLButtonElement>>;
 
-declare function Checkbox_2({
-    className,
-    ...props
-}: React_2.ComponentProps<typeof CheckboxPrimitive.Root>) {
+declare function Checkbox_2({ className, ...props }: React_2.ComponentProps<typeof CheckboxPrimitive.Root>) {
     return (
     <CheckboxPrimitive.Root
     data-slot="checkbox"
     className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
         )}
         {...props}
     >
@@ -144,7 +145,7 @@ declare function Checkbox_2({
     <CheckIcon className="size-3.5" />
     </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-    )
+    );
 }
 
 declare interface CheckboxProps extends default_2.ComponentPropsWithoutRef<typeof Checkbox_2> {
@@ -177,29 +178,6 @@ declare let currentConfig: {
     auth: AuthConfig;
 };
 
-export declare function DataTable<TData, TValue>({ columns, data, enablePagination, enableSorting, enableFiltering, filterColumn, filterPlaceholder, enableColumnVisibility, initialSorting, initialColumnFilters, initialColumnVisibility, pageSize, emptyMessage, className, }: DataTableProps<TData, TValue>): JSX.Element;
-
-export declare namespace DataTable {
-    var displayName: string;
-}
-
-export declare interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
-    data: TData[];
-    enablePagination?: boolean;
-    enableSorting?: boolean;
-    enableFiltering?: boolean;
-    filterColumn?: string;
-    filterPlaceholder?: string;
-    enableColumnVisibility?: boolean;
-    initialSorting?: SortingState;
-    initialColumnFilters?: ColumnFiltersState;
-    initialColumnVisibility?: VisibilityState;
-    pageSize?: number;
-    emptyMessage?: React_2.ReactNode;
-    className?: string;
-}
-
 export declare const DatePicker: React_2.ForwardRefExoticComponent<DatePickerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface DatePickerProps {
@@ -220,9 +198,9 @@ export declare function defineConfig(config: QuantumUIConfig): QuantumUIConfig;
 
 export declare function Field({
     className,
-    orientation = "vertical",
+    orientation = 'vertical',
     ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
     return (
     <div
     role="group"
@@ -231,35 +209,32 @@ export declare function Field({
     className={cn(fieldVariants({ orientation }), className)}
         {...props}
     />
-    )
+    );
 }
 
-export declare function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+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
-        )}
+    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">) {
+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
+        '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({
@@ -267,97 +242,86 @@ export declare function FieldError({
     children,
     errors,
     ...props
-}: React.ComponentProps<"div"> & {
-    errors?: Array<{ message?: string } | undefined>
+}: React.ComponentProps<'div'> & {
+    errors?: Array<{ message?: string } | undefined>;
 }) {
     const content = useMemo(() => {
         if (children) {
-            return children
+            return children;
         }
 
         if (!errors?.length) {
-            return null
+            return null;
         }
 
-        if (errors?.length == 1) {
-            return errors[0]?.message
+        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>
-            )}
+            {errors.map((error) => error?.message && <li key={error.message}>{error.message}</li>)}
         </ul>
-        )
-    }, [children, errors])
+        );
+    }, [children, errors]);
 
     if (!content) {
-        return null
+        return null;
     }
 
     return (
     <div
     role="alert"
     data-slot="field-error"
-    className={cn("text-destructive text-sm font-normal", className)}
+    className={cn('text-destructive text-sm font-normal', className)}
         {...props}
     >
         {content}
     </div>
-    )
+    );
 }
 
-export declare function FieldGroup({ className, ...props }: React.ComponentProps<"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-2 data-[slot=checkbox-group]:gap-1 [&>[data-slot=field-group]]:gap-2",
-        className
+        'group/field-group @container/field-group flex w-full flex-col gap-2 data-[slot=checkbox-group]:gap-1 [&>[data-slot=field-group]]:gap-2',
+        className,
         )}
         {...props}
     />
-    )
+    );
 }
 
-export declare function FieldLabel({
-    className,
-    ...props
-}: React.ComponentProps<typeof Label>) {
+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
+        '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",
+    variant = 'legend',
     ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+}: 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
-        )}
+    className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}
         {...props}
     />
-    )
+    );
 }
 
 declare interface FieldMapping {
@@ -368,17 +332,14 @@ export declare function FieldSeparator({
     children,
     className,
     ...props
-}: React.ComponentProps<"div"> & {
-    children?: React.ReactNode
+}: 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
-        )}
+    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" />
@@ -391,74 +352,73 @@ export declare function FieldSeparator({
         </span>
         )}
     </div>
-    )
+    );
 }
 
-export declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+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
+        '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">) {
+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
+        '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",
-    {
+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"],
+            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",
+            '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",
+            '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",
+        orientation: 'vertical',
     },
-}
-);
+});
 
-export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = TFieldValues>({ form, onSubmit, children, showRootError, rootErrorPosition, rootErrorClassName, fieldMapping, ...props }: FormProps<TFieldValues, TContext, TTransformedValues>): JSX.Element;
+export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = TFieldValues, TMutationData = unknown, TMutationError = Error, TMutationVariables = any>({ form, onSubmit, children, showRootError, rootErrorPosition, rootErrorClassName, fieldMapping, mutation, transformSubmit, ...props }: FormProps<TFieldValues, TContext, TTransformedValues, TMutationData, TMutationError, TMutationVariables>): JSX.Element;
 
 export declare namespace Form {
     var displayName: string;
 }
 
-export declare interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = TFieldValues> extends Omit<default_2.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+export declare interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = TFieldValues, TMutationData = unknown, TMutationError = Error, TMutationVariables = any> extends Omit<React_2.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
     form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
-    onSubmit: Parameters<UseFormReturn<TFieldValues, TContext, TTransformedValues>['handleSubmit']>[0];
-    children: default_2.ReactNode;
+    onSubmit?: Parameters<UseFormReturn<TFieldValues, TContext, TTransformedValues>['handleSubmit']>[0];
+    children: React_2.ReactNode;
     showRootError?: boolean;
     rootErrorPosition?: 'top' | 'bottom';
     rootErrorClassName?: string;
     fieldMapping?: FieldMapping;
+    mutation?: UseMutationResult<TMutationData, TMutationError, TMutationVariables, unknown>;
+    transformSubmit?: (data: TTransformedValues extends undefined ? TFieldValues : TTransformedValues) => TMutationVariables;
 }
 
 export declare function getConfig(): typeof currentConfig;
@@ -472,10 +432,10 @@ export { isValidPhoneNumber }
 declare function Label({ className, ...props }: React_2.ComponentProps<typeof LabelPrimitive.Root>) {
     return (
     <LabelPrimitive.Root
-    data-slot='label'
+    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
+        className,
         )}
         {...props}
     />
@@ -527,7 +487,7 @@ export declare interface QuantumUIConfig {
     auth?: Partial<AuthConfig>;
 }
 
-export declare function recoverSession(): Promise<{
+export declare function recoverToken(): Promise<{
     success: boolean;
     expiresIn: number;
 }>;
@@ -542,6 +502,19 @@ export declare const setToken: (token: string) => void;
 
 export declare function Skeleton({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX.Element;
 
+export declare const Spinner: typeof Spinner_2;
+
+declare function Spinner_2({ className, ...props }: React.ComponentProps<'svg'>) {
+    return (
+    <Loader2Icon
+    role="status"
+    aria-label="Loading"
+    className={cn('size-4 animate-spin', className)}
+        {...props}
+    />
+    );
+}
+
 export declare const TextArea: default_2.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & default_2.RefAttributes<HTMLTextAreaElement>>;
 
 export declare interface TextAreaProps extends default_2.ComponentProps<'textarea'> {

package/dist/index.js

@@ -1,9 +1,9 @@
 export { c as cn } from './utils.js';
-export { a as axios, i as cancelTokenRefresh, l as clearCsrfToken, e as clearToken, c as configureQuantumUI, d as defineConfig, g as getConfig, k as getCsrfToken, b as getToken, f as recoverSession, r as resetConfig, h as scheduleTokenRefresh, j as setCsrfToken, s as setToken } from './axios.js';
-export { B as Button, b as buttonVariants } from './Button.js';
+export { a as axios, b as cancelTokenRefresh, e as clearCsrfToken, f as clearToken, c as configureQuantumUI, d as defineConfig, g as getConfig, h as getCsrfToken, i as getToken, j as recoverToken, r as resetConfig, s as scheduleTokenRefresh, k as setCsrfToken, l as setToken } from './axios.js';
+export { B as Button } from './Button.js';
+export { b as buttonVariants } from './Button2.js';
 export { C as Card, a as CardContent, b as CardDescription, c as CardFooter, d as CardHeader, e as CardTitle } from './Card.js';
 export { C as Checkbox } from './Checkbox.js';
-export { D as DataTable } from './DataTable.js';
 export { D as DatePicker } from './DatePicker.js';
 export { F as Field, a as FieldContent, b as FieldDescription, c as FieldError, d as FieldGroup, e as FieldLabel, f as FieldLegend, g as FieldSeparator, h as FieldSet, i as FieldTitle } from './field.js';
 export { C as Controller, F as Form } from './Form.js';
@@ -11,6 +11,7 @@ export { O as OTPField } from './OTPField.js';
 export { P as PasswordField } from './PasswordField.js';
 export { P as PhoneField, i as isValidPhoneNumber } from './PhoneField.js';
 export { S as Skeleton } from './Skeleton.js';
+export { S as Spinner } from './Spinner.js';
 export { T as TextArea } from './TextArea.js';
 export { T as TextField } from './TextField.js';
 export { T as ThemeToggle } from './ThemeToggle.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}