blunt-ui 0.3.1 → 0.3.3

package/README.md

@@ -1,6 +1,6 @@
 # blunt-ui
 
-React + TypeScript + styled-components. Thick borders, offset shadows, no fluff. 9 components, 2 hooks.
+React + TypeScript + styled-components. Thick borders, offset shadows, no fluff. 11 components, 3 hooks.
 
 **Live demo:** https://blunt-ui.vercel.app/
 
@@ -179,6 +179,106 @@ const { values, errors, handleChange, handleBlur, handleSubmit, reset } =
 
 The `name` on each input needs to match the key in `initialValues`. Use `reset()` to clear everything back to the start.
 
+## Table
+
+Read-only table with sorting and pagination. You define columns, pass data, done. Sorting and pagination work in both uncontrolled mode (component handles state internally) and controlled mode (you own the state, useful when data comes from an API).
+
+Sizes: `sm`, `md`, `lg`.
+
+```tsx
+const columns = [
+  { key: "name", header: "Name", sortable: true },
+  { key: "role", header: "Role" },
+  { key: "status", header: "Status", render: (v) => <Badge>{v}</Badge> },
+];
+
+<Table
+  columns={columns}
+  data={rows}
+  rowKey="id"
+  striped
+  bordered
+  pageSize={10}
+  emptyMessage="No results"
+/>;
+```
+
+**Sorting** — add `sortable: true` to any column. By default the table sorts client-side. If you want to handle it yourself (e.g. send a query param to your backend), pass `sort` + `onSortChange` and it becomes controlled — the table just shows the sort indicator and tells you when it changed, you bring the sorted data.
+
+**Pagination** — set `pageSize` and the table slices the data automatically. For server-side pagination, also pass `totalRows` so it knows how many pages there are, and control `page` + `onPageChange` yourself. If you need both sort and page in one callback, use `onChange` instead.
+
+**Other stuff** — `loading` replaces rows with skeleton cells while data is loading. `stickyHeader` keeps the header in view when the table scrolls. `caption` adds a proper `<caption>` for accessibility.
+
+Color props: `borderColor`, `headerColor`, `rowColor`, `stripeColor`.
+
+## DataTable
+
+Editable table — good for things like spreadsheet-style input or inline CRUD. Each column can be editable or not, and you can mix text inputs with dropdowns.
+
+```tsx
+const columns = [
+  { key: "name", header: "Name", editable: true },
+  { key: "qty", header: "Qty", editable: true, width: "80px" },
+  {
+    key: "status",
+    header: "Status",
+    editable: true,
+    options: [
+      { value: "todo", label: "To do" },
+      { value: "in_progress", label: "In progress" },
+      { value: "done", label: "Done" },
+    ],
+  },
+];
+
+<DataTable
+  columns={columns}
+  defaultData={[{ name: "Widget", qty: "1", status: "todo" }]}
+  onChange={(rows) => console.log(rows)}
+  deletable
+  addRowLabel="Add item"
+/>;
+```
+
+**Editing** — click a text cell to start editing, Enter to confirm, Escape to cancel. For select cells (columns with `options`), one click opens the dropdown directly; picking an option saves immediately. Tab and Shift+Tab move between editable cells. Tab past the last cell adds a new row automatically.
+
+**Select columns** — add `options: [{ value, label }]` to a column. The cell stores the `value` but displays the `label`. The column still needs `editable: true`.
+
+**Controlled vs uncontrolled** — same pattern as the rest of the library. Pass `defaultData` and forget about it, or pass `data` + `onChange` if you need to keep the data in your own state.
+
+**Per-cell editability** — `editable` can be a function `(row, rowIndex) => boolean` if you need some cells to be editable based on row content.
+
+`deletable` adds a remove button per row. `newRowFactory` lets you control what an empty new row looks like (useful if you need generated IDs or default values).
+
+Color props: `borderColor`, `headerColor`.
+
+## useTable
+
+Helper hook for when your table data comes from a server. It keeps track of the current sort and page so you can use them in a fetch call, and passes them back to `<Table>` as controlled props.
+
+```tsx
+const { sort, page, onSortChange, onPageChange } = useTable({
+  defaultPage: 1,
+});
+
+useEffect(() => {
+  fetchProducts({ sort, page });
+}, [sort, page]);
+
+<Table
+  columns={columns}
+  data={serverData}
+  sort={sort}
+  onSortChange={onSortChange}
+  page={page}
+  onPageChange={onPageChange}
+  pageSize={20}
+  totalRows={totalCount}
+/>;
+```
+
+When the user changes the sort column, the page resets to 1 automatically — that's usually what you want so you don't end up on page 5 of a different sort order. Pass `defaultSort` if you need a column sorted on first load.
+
 ## Design tokens
 
 Colors, spacing, font sizes, and border radius live in `src/consts.ts`. All components pull from there, so changing a token updates everything at once.

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

@@ -0,0 +1,5 @@
+import { ConfirmDialogProps } from './ConfirmDialog.types';
+export declare function ConfirmDialog({ open, title, message, confirmLabel, cancelLabel, variant, size, onConfirm, onCancel, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ConfirmDialog {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,13 @@
+import { ModalSizes } from '../Modal';
+export type ConfirmVariant = "default" | "danger";
+export interface ConfirmDialogProps {
+    open: boolean;
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: ConfirmVariant;
+    size?: ModalSizes;
+    onConfirm: () => void;
+    onCancel: () => void;
+}

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

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

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { ConfirmFn } from './useConfirm.types';
+export declare function ConfirmProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useConfirm(): ConfirmFn;

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

@@ -0,0 +1,14 @@
+import { ConfirmVariant } from './ConfirmDialog.types';
+import { ModalSizes } from '../Modal';
+export interface ConfirmOptions {
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: ConfirmVariant;
+    size?: ModalSizes;
+}
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+export interface ConfirmContextValue {
+    confirm: ConfirmFn;
+}

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

@@ -0,0 +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 namespace DatePicker {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,14 @@
+export type DatePickerSizes = "sm" | "md" | "lg";
+export interface DatePickerProps {
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    placeholder?: string;
+    size?: DatePickerSizes;
+    disabled?: boolean;
+    clearable?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    formatDate?: (date: Date) => string;
+    id?: string;
+    error?: boolean | string;
+}

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

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

package/dist/components/Editable/Editable.d.ts

@@ -0,0 +1,5 @@
+import { EditableProps } from './Editable.types';
+export declare function Editable({ value, defaultValue, onChange, onSubmit, onCancel, placeholder, disabled, }: EditableProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Editable {
+    var displayName: string;
+}

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Editable } from './Editable';
+declare const meta: Meta<typeof Editable>;
+export default meta;
+type Story = StoryObj<typeof Editable>;
+export declare const Default: Story;
+export declare const Placeholder: Story;
+export declare const Controlled: Story;
+export declare const Disabled: Story;
+export declare const InTable: Story;

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

@@ -0,0 +1,9 @@
+export interface EditableProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onCancel?: (previousValue: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}

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

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

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,5 @@
+import { FieldProps } from './Field.types';
+export declare function Field({ label, value, href }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Field {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface FieldProps {
+    label: string;
+    value?: ReactNode;
+    href?: string;
+}

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

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

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

@@ -1,3 +1,5 @@
 export { Form } from './Form';
 export { FormField } from './FormField';
 export type { FormProps, FormFieldProps } from './Form.types';
+export { useForm } from './useForm';
+export type { UseFormOptions, UseFormReturn } from './useForm.types';

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

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

package/dist/components/Form/useForm.test.d.ts

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

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

@@ -0,0 +1,20 @@
+import { ChangeEvent, FocusEvent, FormEvent } from 'react';
+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/Input/Input.types.d.ts

@@ -1,7 +1,7 @@
 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" | "filled";
+export type InputVariants = "default" | "outlined";
 export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size" | "type"> {
     type?: InputTypes;
     size?: InputSizes;

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

@@ -1,7 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
-import { InputSizes, InputVariants } from '../Input/Input.types';
-export type SelectSizes = InputSizes;
-export type SelectVariants = InputVariants;
+export type SelectSizes = "sm" | "md" | "lg";
+export type SelectVariants = "default" | "outlined";
 export interface SelectOption {
     value: string;
     label: string;

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,5 @@
+import { SpinnerProps } from './Spinner.types';
+export declare function Spinner({ size, weight, color, label, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Spinner {
+    var displayName: string;
+}

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './Spinner';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Weights: Story;
+export declare const CustomColor: Story;

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

@@ -0,0 +1,8 @@
+export type SpinnerSizes = "sm" | "md" | "lg";
+export type SpinnerWeights = "thin" | "normal" | "bold";
+export interface SpinnerProps {
+    size?: SpinnerSizes;
+    weight?: SpinnerWeights;
+    color?: string;
+    label?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSizes, SpinnerWeights, } from './Spinner.types';

package/dist/components/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ columns, data, rowKey, size, striped, bordered, stickyHeader, caption, emptyMessage, loading, sort, defaultSort, onSortChange, pageSize, page, defaultPage, totalRows, onPageChange, onChange, borderColor, headerColor, rowColor, stripeColor, className, style, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ columns, data, rowKey, size, striped, bordered, stickyHeader, caption, emptyMessage, loading, sort, defaultSort, onSortChange, pageSize, page, defaultPage, totalRows, onPageChange, onChange, onRowClick, borderColor, headerColor, rowColor, stripeColor, className, style, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var displayName: string;
 }

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

@@ -4,22 +4,14 @@ declare const meta: Meta<typeof Table>;
 export default meta;
 type Story = StoryObj<typeof Table>;
 export declare const Default: Story;
-export declare const Striped: Story;
-export declare const Bordered: Story;
 export declare const StripedAndBordered: Story;
-export declare const Small: Story;
-export declare const Large: Story;
-export declare const WithCaption: Story;
 export declare const WithCustomRender: Story;
 export declare const Sortable: Story;
 export declare const SortableControlled: Story;
+export declare const WithUseTable: Story;
 export declare const Loading: Story;
 export declare const Empty: Story;
 export declare const Paginated: Story;
-export declare const PaginatedSortable: Story;
 export declare const StickyHeader: Story;
-export declare const ColumnWidths: Story;
-export declare const CustomBorderColor: Story;
-export declare const CustomHeaderColor: Story;
-export declare const CustomRowColors: Story;
+export declare const WithRowClick: Story;
 export declare const FullyCustomized: Story;

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

@@ -27,7 +27,7 @@ export interface TableProps<T extends Record<string, unknown> = Record<string, u
     caption?: string;
     emptyMessage?: string;
     loading?: boolean;
-    sort?: SortState;
+    sort?: SortState | null;
     defaultSort?: SortState;
     onSortChange?: (sort: SortState | null) => void;
     pageSize?: number;
@@ -40,6 +40,7 @@ export interface TableProps<T extends Record<string, unknown> = Record<string, u
     headerColor?: string;
     rowColor?: string;
     stripeColor?: string;
+    onRowClick?: (row: T) => void;
     className?: string;
     style?: CSSProperties;
 }

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

@@ -1,2 +1,4 @@
 export { Table } from './Table';
 export type { TableProps, TableColumn, TableSizes, SortState, SortDirection, TableChangeState, } from './Table.types';
+export { useTable } from './useTable';
+export type { UseTableOptions, UseTableReturn } from './useTable';

package/dist/components/Table/useTable.d.ts

@@ -0,0 +1,12 @@
+import { SortState } from './Table.types';
+export interface UseTableOptions {
+    defaultSort?: SortState;
+    defaultPage?: number;
+}
+export interface UseTableReturn {
+    sort: SortState | null;
+    page: number;
+    onSortChange: (sort: SortState | null) => void;
+    onPageChange: (page: number) => void;
+}
+export declare function useTable({ defaultSort, defaultPage, }?: UseTableOptions): UseTableReturn;

package/dist/components/Table/useTableSort.d.ts

@@ -1,7 +1,7 @@
 import { SortState } from './Table.types';
 interface UseTableSortProps<T> {
     data: T[];
-    sort?: SortState;
+    sort?: SortState | null;
     defaultSort?: SortState;
     onSortChange?: (sort: SortState | null) => void;
 }

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,5 @@
+import { TextareaProps } from './Textarea.types';
+export declare function Textarea({ ref, size, variant, label, helperText, error, fullWidth, id, value, defaultValue, onChange, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Textarea {
+    var displayName: string;
+}

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from './Textarea';
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+export declare const Default: Story;
+export declare const Error: Story;
+export declare const WithHelperText: Story;

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

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef } from 'react';
+export type TextareaSizes = "sm" | "md" | "lg";
+export type TextareaVariants = "default" | "outlined";
+export interface TextareaProps extends Omit<ComponentPropsWithRef<"textarea">, "size"> {
+    size?: TextareaSizes;
+    variant?: TextareaVariants;
+    label?: string;
+    helperText?: string;
+    error?: boolean | string;
+    fullWidth?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps, TextareaSizes, TextareaVariants, } from './Textarea.types';

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

@@ -1,2 +1,4 @@
 export { Toast } from './Toast';
 export type { ToastProps, ToastVariants, ToastPosition } from './Toast.types';
+export { useToast, ToastProvider } from './useToast';
+export type { ToastOptions, ToastFn, ToastContextValue, } from './useToast.types';

package/dist/components/Toast/useToast.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { ToastContextValue } from './useToast.types';
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useToast(): ToastContextValue;

package/dist/components/Toast/useToast.types.d.ts

@@ -0,0 +1,17 @@
+import { ToastVariants, ToastPosition } from './Toast.types';
+export interface ToastOptions {
+    message: string;
+    variant?: ToastVariants;
+    duration?: number;
+    position?: ToastPosition;
+}
+export interface ToastFn {
+    (options: ToastOptions): void;
+    success: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => void;
+    error: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => void;
+    warning: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => void;
+    info: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => void;
+}
+export interface ToastContextValue {
+    toast: ToastFn;
+}