@minutemailer/kit 1.0.7 → 1.0.9

package/components/ui/form.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import { type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/components/ui/form.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { Controller, FormProvider, useFormContext, useFormState, } from 'react-hook-form';
+import { cn } from '../../utils/utils.js';
+import { Label } from '../../components/ui/label.js';
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = ({ ...props }) => {
+    return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, { ...props }) }));
+};
+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,
+    };
+};
+const FormItemContext = React.createContext({});
+function FormItem({ className, ...props }) {
+    const id = React.useId();
+    return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx("div", { "data-slot": "form-item", className: cn('grid gap-2', className), ...props }) }));
+}
+function FormLabel({ className, ...props }) {
+    const { error, formItemId } = useFormField();
+    return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn('data-[error=true]:text-destructive', className), htmlFor: formItemId, ...props }));
+}
+function FormControl({ ...props }) {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (_jsx(Slot, { "data-slot": "form-control", id: formItemId, "aria-describedby": !error
+            ? `${formDescriptionId}`
+            : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+}
+function FormDescription({ className, ...props }) {
+    const { formDescriptionId } = useFormField();
+    return (_jsx("p", { "data-slot": "form-description", id: formDescriptionId, className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+function FormMessage({ className, ...props }) {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? '') : props.children;
+    if (!body) {
+        return null;
+    }
+    return (_jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn('text-destructive text-sm', className), ...props, children: body }));
+}
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/components/ui/typography.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+export declare function TypographyH1({ children, className, ...props }: {
+    children?: ReactNode;
+    className?: string;
+    [key: string]: any;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TypographyH2({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TypographyLead({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TypographyMuted({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TypographyP({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TypographySmall({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/components/ui/typography.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/utils.js';
+export function TypographyH1({ children, className = '', ...props }) {
+    return (_jsx("h1", { className: cn('scroll-m-20 text-center text-4xl font-semibold tracking-tight text-balance', className), ...props, children: children }));
+}
+export function TypographyH2({ children, className = '', }) {
+    return (_jsx("h2", { className: cn('scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0', className), children: children }));
+}
+export function TypographyLead({ children, className = '', }) {
+    return (_jsx("p", { className: cn('text-muted-foreground text-xl text-pretty', className), children: children }));
+}
+export function TypographyMuted({ children, className = '', }) {
+    return (_jsx("div", { className: cn('text-muted-foreground text-sm', className), children: children }));
+}
+export function TypographyP({ children, className = '', }) {
+    return (_jsx("p", { className: cn('leading-7 [&:not(:first-child)]:mt-6', className), children: children }));
+}
+export function TypographySmall({ children, className = '', }) {
+    return (_jsx("small", { className: cn('text-sm leading-none font-medium', className), children: children }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@minutemailer/kit",
-    "version": "1.0.7",
+    "version": "1.0.9",
     "description": "Minutemailer UI Kit",
     "license": "MIT",
     "author": "Minutemailer",
@@ -41,6 +41,7 @@
         "vitest": "^3.2.4"
     },
     "dependencies": {
+        "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
@@ -54,9 +55,11 @@
         "clsx": "^2.1.1",
         "lucide-react": "^0.544.0",
         "next-themes": "^0.4.6",
+        "react-hook-form": "^7.63.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.14",
-        "tw-animate-css": "^1.4.0"
+        "tw-animate-css": "^1.4.0",
+        "zod": "^4.1.11"
     }
 }

package/styles.css

@@ -39,6 +39,7 @@
 }
 
 :root {
+    --font-sans: Inter, system-ui, sans-serif;
     --radius: 0.375rem;
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);