blunt-ui 0.3.6 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # blunt-ui
 
-A React component library I built for myself and started using across projects. Neo-brutalism aesthetic — thick borders, offset shadows, high contrast. No animations, no gradients, no magic. Just components that do what they say.
+A React component library I built for myself and started using across projects. Neo-brutalism aesthetic - thick borders, offset shadows, high contrast. No animations, no gradients, no magic. Just components that do what they say.
 
 Built with React, TypeScript, and styled-components.
 
@@ -27,7 +27,7 @@ import { ThemeProvider, GlobalStyles } from "blunt-ui";
 </ThemeProvider>;
 ```
 
-If you're using `useToast` or `useConfirm`, add their providers here too — more on those below.
+If you're using `useToast` or `useConfirm`, add their providers here too - more on those below.
 
 ## Running locally
 
@@ -45,7 +45,7 @@ npm run build
 
 ### Badge
 
-Small inline label for statuses, tags, counts — wherever you need a bit of color-coded context.
+Small inline label for statuses, tags, counts - wherever you need a bit of color-coded context.
 
 Variants: `primary`, `neutral`, `success`, `error`, `warning`, `info`. Sizes: `sm` (default), `md`.
 
@@ -63,7 +63,7 @@ Three variants: `primary` (filled), `secondary` (muted fill), `outline` (border
 <Button variant="outline" isLoading={submitting}>Submit</Button>
 ```
 
-`isLoading` disables the button and swaps the label for "Loading..." — no spinner, keeps the layout stable. The `as` prop lets you swap the underlying element, which is useful when you want a `<Link>` from your router but with button styles.
+`isLoading` disables the button and swaps the label for "Loading..." - no spinner, keeps the layout stable. The `as` prop lets you swap the underlying element, which is useful when you want a `<Link>` from your router but with button styles.
 
 ### Input
 
@@ -78,16 +78,60 @@ Standard text input with a label, optional helper text, error state, left/right
 
 ### Textarea
 
-Multi-line input. Same props as Input — `label`, `helperText`, `error`, `fullWidth`. Variants: `default`, `outlined`. Sizes: `sm`, `md`, `lg`.
+Multi-line input. Same props as Input - `label`, `helperText`, `error`, `fullWidth`. Variants: `default`, `outlined`. Sizes: `sm`, `md`, `lg`.
 
 ```tsx
 <Textarea label="Notes" helperText="Max 500 chars" />
 <Textarea label="Bio" variant="outlined" error="Required" rows={4} />
 ```
 
+### Checkbox
+
+```tsx
+<Checkbox
+  label="Accept terms and conditions"
+  checked={checked}
+  onChange={(e) => setChecked(e.target.checked)}
+/>
+<Checkbox label="Required field" error="You must accept the terms" />
+```
+
+Sizes: `sm`, `md`. Shows an error message below when `error` is a string, turns the border red when `error` is a boolean.
+
+### Radio
+
+Same hidden-input pattern as Checkbox, but circular. Use multiple radios with the same `name` for a group, or manage `checked` yourself.
+
+```tsx
+{
+  ["remote", "hybrid", "on-site"].map((option) => (
+    <Radio
+      key={option}
+      name="workMode"
+      value={option}
+      label={option}
+      checked={value === option}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  ));
+}
+```
+
+### Switch
+
+A toggle. Same API as Checkbox - `checked` + `onChange`. Sizes: `sm`, `md`.
+
+```tsx
+<Switch
+  label="Enable notifications"
+  checked={enabled}
+  onChange={(e) => setEnabled(e.target.checked)}
+/>
+```
+
 ### Select
 
-Styled native `<select>`. I kept it native because custom dropdowns are more trouble than they're worth for most use cases. Same sizes and error handling as Input.
+Custom dropdown - full keyboard navigation (arrow keys, Enter, Escape, Home/End), styled to match the rest of the library. `onChange` fires a synthetic event with `name` and `value`, so it works with `useForm.handleChange` without any changes.
 
 ```tsx
 <Select
@@ -154,7 +198,7 @@ Opens in a portal on `document.body`. Traps focus, locks body scroll, closes on
 </Modal>
 ```
 
-The `footer` slot is where you put action buttons — it renders at the bottom of the modal, separated from the content.
+The `footer` slot is where you put action buttons - it renders at the bottom of the modal, separated from the content.
 
 ### Toast
 
@@ -171,11 +215,11 @@ Variants: `success`, `error`, `warning`, `info`. Positions: `bottom-right`, `bot
 />
 ```
 
-In practice you'll probably want `useToast` instead — see hooks below.
+In practice you'll probably want `useToast` instead - see hooks below.
 
 ### Form
 
-`Form` is a flex column wrapper that calls `e.preventDefault()` for you. `FormField` handles the label, error message, helper text, and `htmlFor` wiring — so you don't have to manage IDs manually.
+`Form` is a flex column wrapper that calls `e.preventDefault()` for you. `FormField` handles the label, error message, helper text, and `htmlFor` wiring - so you don't have to manage IDs manually.
 
 ```tsx
 <Form onSubmit={handleSubmit}>
@@ -192,7 +236,7 @@ In practice you'll probably want `useToast` instead — see hooks below.
 </Form>
 ```
 
-Pair with `useForm` for validation — they're designed to work together.
+Pair with `useForm` for validation - they're designed to work together.
 
 ### Link
 
@@ -205,7 +249,7 @@ Styled anchor. Variants: `default` and `subtle` (less prominent, for secondary l
 
 ### CollapsibleCard
 
-A card with a header you can click to show/hide the content. Works uncontrolled out of the box — just use `defaultOpen` and forget about it. For controlled mode, pass `open` + `onToggle`.
+A card with a header you can click to show/hide the content. Works uncontrolled out of the box - just use `defaultOpen` and forget about it. For controlled mode, pass `open` + `onToggle`.
 
 ```tsx
 <CollapsibleCard title="Details" subtitle="Optional subtitle" defaultOpen>
@@ -213,7 +257,7 @@ A card with a header you can click to show/hide the content. Works uncontrolled
 </CollapsibleCard>
 ```
 
-`accentColor` tints the left border and the chevron icon. `headerActions` is a slot for extra stuff in the header — a badge, a button, whatever.
+`accentColor` tints the left border and the chevron icon. `headerActions` is a slot for extra stuff in the header - a badge, a button, whatever.
 
 ```tsx
 <CollapsibleCard
@@ -240,7 +284,7 @@ Loading indicator. Sizes: `sm`, `md`, `lg`. Weights: `thin`, `normal`, `bold`. Y
 
 ### Table
 
-Read-only table with sorting and pagination built in. Define columns, pass data — that's the basic case.
+Read-only table with sorting and pagination built in. Define columns, pass data - that's the basic case.
 
 ```tsx
 const columns = [
@@ -260,11 +304,11 @@ const columns = [
 />;
 ```
 
-**Sorting** — add `sortable: true` to a column. Client-side by default. To sort server-side, pass `sort` + `onSortChange` — the table just shows the indicator and tells you what changed, you handle the data.
+**Sorting** - add `sortable: true` to a column. Client-side by default. To sort server-side, pass `sort` + `onSortChange` - the table just shows the indicator and tells you what changed, you handle the data.
 
-**Pagination** — set `pageSize` and the table slices the data automatically. For server-side pagination, also pass `totalRows` (so it knows how many pages exist) and control `page` + `onPageChange` yourself. Use `onChange` if you need both sort and page changes in one callback.
+**Pagination** - set `pageSize` and the table slices the data automatically. For server-side pagination, also pass `totalRows` (so it knows how many pages exist) and control `page` + `onPageChange` yourself. Use `onChange` if you need both sort and page changes in one callback.
 
-**Other props** — `loading` shows skeleton rows while data loads. `stickyHeader` keeps the header visible on scroll. `caption` adds an accessible `<caption>`.
+**Other props** - `loading` shows skeleton rows while data loads. `stickyHeader` keeps the header visible on scroll. `caption` adds an accessible `<caption>`.
 
 Color props if you need to match a specific theme: `borderColor`, `headerColor`, `rowColor`, `stripeColor`.
 
@@ -286,19 +330,39 @@ A specialized modal for destructive actions. Two variants: `default` and `danger
 
 ### DatePicker
 
-Calendar-based date input. Sizes: `sm`, `md`, `lg`. Supports `minDate`, `maxDate`, and `clearable`.
+Calendar date picker. Stores the value as an ISO string (`"YYYY-MM-DD"` or `""`) so it plays nicely with `useForm` without any conversion. `onChange` fires `(name, value)` - same as `setFieldValue`.
+
+Sizes: `sm`, `md`, `lg`. Supports `minDate`, `maxDate`, `clearable`, `label`, `error`, `helperText`.
 
 ```tsx
-<DatePicker value={date} onChange={setDate} placeholder="Pick a date" />
-<DatePicker value={date} onChange={setDate} minDate={new Date()} clearable />
+// Standalone
+const [date, setDate] = useState("");
+
+<DatePicker name="date" value={date} onChange={(_, v) => setDate(v)} />;
+```
+
+With `useForm`, just pass `setFieldValue` straight in:
+
+```tsx
+const { values, setFieldValue } = useForm({
+  initialValues: { dateApplied: "" },
+});
+
+<DatePicker
+  name="dateApplied"
+  label="Date applied"
+  value={values.dateApplied}
+  onChange={setFieldValue}
+/>;
 ```
 
-`formatDate` controls how the selected date is displayed in the input field:
+`formatDate` changes how the picked date shows in the trigger:
 
 ```tsx
 <DatePicker
+  name="date"
   value={date}
-  onChange={setDate}
+  onChange={(_, v) => setDate(v)}
   formatDate={(d) => d.toLocaleDateString("pl-PL")}
 />
 ```
@@ -329,7 +393,7 @@ toast.info("New version available.");
 
 ### useConfirm
 
-Same pattern as `useToast` — provider at the top, hook wherever you need it. Returns a promise so you can `await` the user's decision.
+Same pattern as `useToast` - provider at the top, hook wherever you need it. Returns a promise so you can `await` the user's decision.
 
 ```tsx
 <ConfirmProvider>
@@ -355,7 +419,7 @@ Much cleaner than managing open/close state for every confirm dialog in your app
 
 ### useForm
 
-Handles values, touched state, validation, and errors. Errors only show after a field has been touched or a submit was attempted — no red borders on page load.
+Handles values, touched state, validation, and errors. Errors only show after a field has been touched or a submit was attempted - no red borders on page load.
 
 ```tsx
 const { values, errors, handleChange, handleBlur, handleSubmit, reset } =
@@ -376,6 +440,26 @@ const { values, errors, handleChange, handleBlur, handleSubmit, reset } =
 
 Each input's `name` needs to match a key in `initialValues`. `reset()` puts everything back to the initial state.
 
+The library ships with validators you can use in the `validate` function:
+
+```tsx
+import {
+  required,
+  minLength,
+  isEmail,
+  isUrl,
+  composeValidators,
+} from "blunt-ui";
+
+validate: (v) => ({
+  email: composeValidators(required(), isEmail())(v.email),
+  password: minLength(8)(v.password),
+  website: isUrl()(v.website),
+});
+```
+
+`composeValidators` runs validators left to right and returns the first error. Available validators: `required`, `minLength`, `maxLength`, `isEmail`, `isUrl`, `pattern`.
+
 ### useTable
 
 A small helper for server-side table state. Tracks the current sort and page so you can pass them to a fetch call, then hands everything back to `<Table>` as controlled props.
@@ -399,10 +483,18 @@ useEffect(() => {
 />;
 ```
 
-Changing the sort resets the page to 1 automatically — saves you from ending up on page 5 of a different sort order. Pass `defaultSort` if you need a column pre-sorted on first load.
+Changing the sort resets the page to 1 automatically - saves you from ending up on page 5 of a different sort order. Pass `defaultSort` if you need a column pre-sorted on first load.
 
 ---
 
 ## Design tokens
 
-Everything lives in `src/consts.ts` — colors, spacing, font sizes, border radius. All components reference these, so updating a single token changes the look across the whole library.
+Everything lives in `src/themes/neo-brutal.ts` - colors, spacing, font sizes, font weights, border radius. All components pull from the theme, so changing a single token updates the look everywhere.
+
+The accent color is the only thing I designed to be easily swappable:
+
+```ts
+import { createNeoBrutalTheme } from "blunt-ui";
+
+const theme = createNeoBrutalTheme("#f97316"); // swap yellow for orange
+```

package/dist/components/Badge/Badge.types.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithRef } from 'react';
-export type BadgeVariants = "primary" | "neutral" | "success" | "error" | "warning" | "info";
-export type BadgeSizes = "sm" | "md";
+export type BadgeVariant = "primary" | "neutral" | "success" | "error" | "warning" | "info";
+export type BadgeSize = "sm" | "md";
 export type BadgeProps = ComponentPropsWithRef<"span"> & {
-    variant?: BadgeVariants;
-    size?: BadgeSizes;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
 };

package/dist/components/Badge/index.d.ts

@@ -1,2 +1,2 @@
 export { Badge } from './Badge';
-export type { BadgeProps, BadgeVariants, BadgeSizes } from './Badge.types';
+export type { BadgeVariant, BadgeSize, BadgeProps } from './Badge.types';

package/dist/components/Badge/{Badge.stories.d.ts → stories/Badge.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Badge } from './Badge';
+import { Badge } from '../Badge';
 declare const meta: Meta<typeof Badge>;
 export default meta;
 type Story = StoryObj<typeof Badge>;

package/dist/components/Button/Button.types.d.ts

@@ -1,9 +1,9 @@
 import { ComponentPropsWithRef, ElementType } from 'react';
-export type ButtonVariants = "primary" | "secondary" | "outline";
-export type ButtonSizes = "sm" | "md" | "lg";
+export type ButtonVariant = "primary" | "secondary" | "outline";
+export type ButtonSize = "sm" | "md" | "lg";
 type ButtonOwnProps = {
-    variant?: ButtonVariants;
-    size?: ButtonSizes;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     isLoading?: boolean;
     href?: string;
     target?: string;

package/dist/components/Button/index.d.ts

@@ -1,2 +1,2 @@
 export { Button } from './Button';
-export type { ButtonProps, ButtonVariants, ButtonSizes } from './Button.types';
+export type { ButtonVariant, ButtonSize, ButtonProps } from './Button.types';

package/dist/components/Button/{Button.stories.d.ts → stories/Button.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
+import { Button } from '../Button';
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxProps } from './Checkbox.types';
+export declare function Checkbox({ ref, label, size, error, helperText, disabled, checked, id, color, borderColor, checkColor, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Checkbox {
+    var displayName: string;
+}

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef } from 'react';
+export type CheckboxSize = "sm" | "md";
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<"input">, "type" | "size"> {
+    label?: string;
+    size?: CheckboxSize;
+    error?: boolean | string;
+    helperText?: string;
+    color?: string;
+    borderColor?: string;
+    checkColor?: string;
+}

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize } from './Checkbox.types';

package/dist/components/Checkbox/stories/Checkbox.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from '../Checkbox';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const WithError: Story;
+export declare const WithHelperText: Story;
+export declare const Disabled: Story;
+export declare const Small: Story;

package/dist/components/CollapsibleCard/{CollapsibleCard.stories.d.ts → stories/CollapsibleCard.stories.d.ts}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentProps } from 'react';
-import { CollapsibleCard } from './CollapsibleCard';
+import { CollapsibleCard } from '../CollapsibleCard';
 type StoryArgs = ComponentProps<typeof CollapsibleCard> & {
     text: string;
 };

package/dist/components/ConfirmDialog/ConfirmDialog.hooks.d.ts

@@ -0,0 +1,2 @@
+import { ConfirmFn } from './ConfirmDialog.types';
+export declare function useConfirm(): ConfirmFn;

package/dist/components/ConfirmDialog/{useConfirm.d.ts → ConfirmDialog.provider.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ConfirmFn } from './useConfirm.types';
+import { ConfirmContextValue } from './ConfirmDialog.types';
+export declare const ConfirmContext: import('react').Context<ConfirmContextValue | null>;
 export declare function ConfirmProvider({ children }: {
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function useConfirm(): ConfirmFn;

package/dist/components/ConfirmDialog/ConfirmDialog.types.d.ts

@@ -1,4 +1,4 @@
-import { ModalSizes } from '../Modal';
+import { ModalSize } from '../Modal';
 export type ConfirmVariant = "default" | "danger";
 export interface ConfirmDialogProps {
     open: boolean;
@@ -7,7 +7,19 @@ export interface ConfirmDialogProps {
     confirmLabel?: string;
     cancelLabel?: string;
     variant?: ConfirmVariant;
-    size?: ModalSizes;
+    size?: ModalSize;
     onConfirm: () => void;
     onCancel: () => void;
 }
+export interface ConfirmOptions {
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: ConfirmVariant;
+    size?: ModalSize;
+}
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+export interface ConfirmContextValue {
+    confirm: ConfirmFn;
+}

package/dist/components/ConfirmDialog/index.d.ts

@@ -1,4 +1,5 @@
 export { ConfirmDialog } from './ConfirmDialog';
-export type { ConfirmDialogProps, ConfirmVariant } from './ConfirmDialog.types';
-export { useConfirm, ConfirmProvider } from './useConfirm';
-export type { ConfirmOptions, ConfirmFn, ConfirmContextValue, } from './useConfirm.types';
+export type { ConfirmVariant } from './ConfirmDialog.types';
+export type { ConfirmDialogProps, ConfirmOptions, ConfirmFn, ConfirmContextValue, } from './ConfirmDialog.types';
+export { ConfirmProvider } from './ConfirmDialog.provider';
+export { useConfirm } from './ConfirmDialog.hooks';

package/dist/components/ConfirmDialog/{ConfirmDialog.stories.d.ts → stories/ConfirmDialog.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ConfirmDialog } from './ConfirmDialog';
+import { ConfirmDialog } from '../ConfirmDialog';
 declare const meta: Meta<typeof ConfirmDialog>;
 export default meta;
 type Story = StoryObj<typeof ConfirmDialog>;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 import { DatePickerProps } from './DatePicker.types';
-export declare function DatePicker({ value, onChange, placeholder, size, disabled, clearable, minDate, maxDate, formatDate, id, error, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ name, label, value, onChange, placeholder, size, disabled, clearable, minDate, maxDate, formatDate, error, required, helperText, mode, nameFrom, nameTo, valueFrom, valueTo, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DatePicker {
     var displayName: string;
 }

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -1,14 +1,22 @@
-export type DatePickerSizes = "sm" | "md" | "lg";
+export type DatePickerSize = "sm" | "md" | "lg";
 export interface DatePickerProps {
-    value?: Date | null;
-    onChange?: (date: Date | null) => void;
-    placeholder?: string;
-    size?: DatePickerSizes;
+    name?: string;
+    value?: string;
+    onChange: (name: string, value: string) => void;
+    label?: string;
+    size?: DatePickerSize;
     disabled?: boolean;
     clearable?: boolean;
     minDate?: Date;
     maxDate?: Date;
     formatDate?: (date: Date) => string;
-    id?: string;
+    placeholder?: string;
     error?: boolean | string;
+    required?: boolean;
+    helperText?: string;
+    mode?: "single" | "range";
+    nameFrom?: string;
+    nameTo?: string;
+    valueFrom?: string;
+    valueTo?: string;
 }

package/dist/components/DatePicker/index.d.ts

@@ -1,2 +1,3 @@
 export { DatePicker } from './DatePicker';
-export type { DatePickerProps, DatePickerSizes } from './DatePicker.types';
+export type { DatePickerSize } from './DatePicker.types';
+export type { DatePickerProps } from './DatePicker.types';

package/dist/components/DatePicker/{DatePicker.stories.d.ts → stories/DatePicker.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { DatePicker } from './DatePicker';
+import { DatePicker } from '../DatePicker';
 declare const meta: Meta<typeof DatePicker>;
 export default meta;
 type Story = StoryObj<typeof DatePicker>;
@@ -9,3 +9,4 @@ export declare const WithMinMax: Story;
 export declare const Sizes: Story;
 export declare const Disabled: Story;
 export declare const WithError: Story;
+export declare const WithLabel: Story;

package/dist/components/Editable/{Editable.stories.d.ts → stories/Editable.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Editable } from './Editable';
+import { Editable } from '../Editable';
 declare const meta: Meta<typeof Editable>;
 export default meta;
 type Story = StoryObj<typeof Editable>;

package/dist/components/Field/{Field.stories.d.ts → stories/Field.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Field } from './Field';
+import { Field } from '../Field';
 declare const meta: Meta<typeof Field>;
 export default meta;
 type Story = StoryObj<typeof Field>;

package/dist/components/Form/{useForm.d.ts → Form.hooks.d.ts}

@@ -1,2 +1,2 @@
-import { UseFormOptions, UseFormReturn } from './useForm.types';
+import { UseFormOptions, UseFormReturn } from './Form.types';
 export declare function useForm<T extends Record<string, string>>({ initialValues, validate, onSubmit, onError, }: UseFormOptions<T>): UseFormReturn<T>;

package/dist/components/Form/Form.types.d.ts

@@ -1,11 +1,23 @@
-import { ComponentPropsWithRef, FormEvent, ReactNode } from 'react';
+import { ChangeEvent, ComponentPropsWithRef, FocusEvent, FormEvent } from 'react';
 export interface FormProps extends Omit<ComponentPropsWithRef<"form">, "onSubmit"> {
     onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
 }
-export interface FormFieldProps {
-    label?: string;
-    error?: string | boolean;
-    helperText?: string;
-    required?: boolean;
-    children: ReactNode;
+type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export interface UseFormOptions<T extends Record<string, string>> {
+    initialValues: T;
+    validate?: (values: T) => Partial<Record<keyof T, string | undefined>>;
+    onSubmit?: (values: T) => void | Promise<void>;
+    onError?: (errors: Partial<Record<keyof T, string>>) => void;
 }
+export interface UseFormReturn<T extends Record<string, string>> {
+    values: T;
+    errors: Partial<Record<keyof T, string>>;
+    touched: Partial<Record<keyof T, boolean>>;
+    handleChange: (e: ChangeEvent<FieldElement>) => void;
+    handleBlur: (e: FocusEvent<FieldElement>) => void;
+    handleSubmit: (e?: FormEvent) => void;
+    setFieldValue: (field: keyof T, value: string) => void;
+    reset: (newValues?: T) => void;
+    isSubmitting: boolean;
+}
+export {};

package/dist/components/Form/{FormField.d.ts → FormField/FormField.d.ts}

@@ -1,4 +1,4 @@
-import { FormFieldProps } from './Form.types';
+import { FormFieldProps } from './FormField.types';
 export declare function FormField({ label, error, helperText, required, children, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace FormField {
     var displayName: string;

package/dist/components/Form/FormField/FormField.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface FormFieldProps {
+    label?: string;
+    error?: string | boolean;
+    helperText?: string;
+    required?: boolean;
+    children: ReactNode;
+}

package/dist/components/Form/FormField/index.d.ts

@@ -0,0 +1,2 @@
+export { FormField } from './FormField';
+export type { FormFieldProps } from './FormField.types';

package/dist/components/Form/index.d.ts

@@ -1,5 +1,6 @@
 export { Form } from './Form';
+export type { FormProps, UseFormOptions, UseFormReturn } from './Form.types';
 export { FormField } from './FormField';
-export type { FormProps, FormFieldProps } from './Form.types';
-export { useForm } from './useForm';
-export type { UseFormOptions, UseFormReturn } from './useForm.types';
+export type { FormFieldProps } from './FormField';
+export { useForm } from './Form.hooks';
+export { required, minLength, maxLength, isEmail, isUrl, pattern, composeValidators, } from './validators/Form.validators';

package/dist/components/Form/{Form.stories.d.ts → stories/Form.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Form } from './Form';
+import { Form } from '../Form';
 declare const meta: Meta<typeof Form>;
 export default meta;
 type Story = StoryObj<typeof Form>;

package/dist/components/Form/tests/Form.validators.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Form/validators/Form.validators.d.ts

@@ -0,0 +1,9 @@
+type Validator = (value: string) => string | undefined;
+export declare const required: (message?: string) => Validator;
+export declare const minLength: (n: number, message?: string) => Validator;
+export declare const maxLength: (n: number, message?: string) => Validator;
+export declare const isEmail: (message?: string) => Validator;
+export declare const isUrl: (message?: string) => Validator;
+export declare const pattern: (regex: RegExp, message: string) => Validator;
+export declare function composeValidators(...validators: Validator[]): Validator;
+export {};

package/dist/components/Input/Input.types.d.ts

@@ -1,11 +1,11 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
-export type InputTypes = "text" | "email" | "password" | "number" | "search" | "tel" | "url";
-export type InputSizes = "sm" | "md" | "lg";
-export type InputVariants = "default" | "outlined";
+export type InputType = "text" | "email" | "password" | "number" | "search" | "tel" | "url";
+export type InputSize = "sm" | "md" | "lg";
+export type InputVariant = "default" | "outlined";
 export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size" | "type"> {
-    type?: InputTypes;
-    size?: InputSizes;
-    variant?: InputVariants;
+    type?: InputType;
+    size?: InputSize;
+    variant?: InputVariant;
     label?: string;
     helperText?: string;
     error?: boolean | string;

package/dist/components/Input/index.d.ts

@@ -1,2 +1,2 @@
 export { Input } from './Input';
-export type { InputProps, InputTypes, InputSizes, InputVariants, } from './Input.types';
+export type { InputType, InputSize, InputVariant, InputProps, } from './Input.types';

package/dist/components/Input/{Input.stories.d.ts → stories/Input.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Input } from './Input';
+import { Input } from '../Input';
 declare const meta: Meta<typeof Input>;
 export default meta;
 type Story = StoryObj<typeof Input>;