@sqrzro/ui 4.0.0-alpha.0 → 4.0.0-alpha.2

package/dist/filters/utility/filter.d.ts

@@ -0,0 +1,16 @@
+import type { FilterConfig, FilterConfigWithBooleanData, FilterConfigWithData, FilterObject, FilterType } from '../interfaces';
+interface FilterReturn {
+    $dropdown: <T>(config: FilterConfigWithData, transformer: (value: string | null) => T) => FilterObject<T, 'dropdown'>;
+    $multi: <T>(config: FilterConfigWithData, transformer: (value: string | null) => T | null) => FilterObject<T[] | null, 'multi'>;
+    assistive: <T>(transformer: (value: string | null) => T | null) => FilterObject<T | null, 'assistive'>;
+    boolean: (label: string, config?: FilterConfigWithBooleanData) => FilterObject<boolean | null, 'boolean'>;
+    calendar: (label: string, config?: FilterConfig) => FilterObject<[Date, Date] | null, 'calendar'>;
+    custom: <T, F extends FilterType>(label: string, object: FilterObject<T, F>) => FilterObject<T, F>;
+    date: (label: string, config?: FilterConfig) => FilterObject<[Date, Date] | null, 'date'>;
+    dropdown: (label: string, config: FilterConfigWithData) => FilterObject<string | null, 'dropdown'>;
+    multi: (label: string, config: FilterConfigWithData) => FilterObject<string[] | null, 'multi'>;
+    search: () => FilterObject<string | null, 'search'>;
+    switch: (label: string) => FilterObject<boolean, 'switch'>;
+}
+declare function filter(): FilterReturn;
+export default filter;

package/dist/filters/utility/filter.js

@@ -0,0 +1,120 @@
+import { filterNull } from '@sqrzro/utility';
+import getQuickDates from './get-quick-dates';
+import { transformToBoolean } from './transform-boolean';
+import { transformToDate } from './transform-date';
+import { transformToMulti } from './transform-multi';
+function defaultTransformer(value) {
+    return value ? value : null;
+}
+function filter() {
+    function $dropdown(config, transformer) {
+        return {
+            config,
+            transformer,
+            type: 'dropdown',
+        };
+    }
+    function $multi(config, transformer) {
+        return {
+            config,
+            transformer: (value) => {
+                const values = value ? transformToMulti(value) : null;
+                if (!values) {
+                    return null;
+                }
+                return filterNull(values.map(transformer));
+            },
+            type: 'multi',
+        };
+    }
+    function assistive(transformer) {
+        return {
+            transformer,
+            type: 'assistive',
+        };
+    }
+    function boolean(label, config) {
+        return {
+            config: {
+                ...config,
+                data: [
+                    { label: config?.data?.[0] || 'No', value: '0' },
+                    { label: config?.data?.[1] || 'Yes', value: '1' },
+                ],
+            },
+            label,
+            transformer: transformToBoolean,
+            type: 'boolean',
+        };
+    }
+    function calendar(label, config) {
+        return {
+            config,
+            label,
+            transformer: transformToDate,
+            type: 'calendar',
+        };
+    }
+    function custom(label, object, config) {
+        return {
+            config: { ...object.config, ...config },
+            label,
+            transformer: object.transformer,
+            type: object.type,
+        };
+    }
+    function date(label, config) {
+        return {
+            config: {
+                ...config,
+                data: [...getQuickDates(), { label: 'Custom...', value: 'custom' }],
+            },
+            label,
+            transformer: transformToDate,
+            type: 'date',
+        };
+    }
+    function dropdown(label, config) {
+        return {
+            config,
+            label,
+            transformer: defaultTransformer,
+            type: 'dropdown',
+        };
+    }
+    function multi(label, config) {
+        return {
+            config,
+            label,
+            transformer: transformToMulti,
+            type: 'multi',
+        };
+    }
+    function search() {
+        return {
+            transformer: defaultTransformer,
+            type: 'search',
+        };
+    }
+    function switchFn(label) {
+        return {
+            label,
+            transformer: transformToBoolean,
+            type: 'switch',
+        };
+    }
+    return {
+        $dropdown,
+        $multi,
+        assistive,
+        boolean,
+        calendar,
+        custom,
+        date,
+        dropdown,
+        multi,
+        search,
+        switch: switchFn,
+    };
+}
+export default filter;

package/dist/filters/utility/get-quick-dates.d.ts

@@ -0,0 +1,3 @@
+import type { DropdownObject } from '../../forms/interfaces';
+declare function getQuickDates(): DropdownObject<string>[];
+export default getQuickDates;

package/dist/filters/utility/get-quick-dates.js

@@ -0,0 +1,90 @@
+import { transformFromDate } from './transform-date';
+const DAYS_IN_WEEK = 7;
+const DAYS_IN_30_DAYS = 30;
+const DAYS_IN_MONTH = 31;
+const NOON = 12;
+/*
+ * We should set the time to noon everytime, to avoid weird things with timezones.
+ * (The date filter transformer ensures the final dates are 00:00:00 and 23:59:59, respectively.)
+ */
+function normalizeTime(date) {
+    date.setHours(NOON, 0, 0, 0);
+    return date;
+}
+function normalizeTimes(dates) {
+    return [normalizeTime(dates[0]), normalizeTime(dates[1])];
+}
+function getToday() {
+    const today = new Date();
+    return normalizeTimes([today, today]);
+}
+function getYesterday() {
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    return normalizeTimes([yesterday, yesterday]);
+}
+function getLast7Days() {
+    const today = new Date();
+    const firstDate = new Date();
+    firstDate.setDate(today.getDate() - DAYS_IN_WEEK);
+    return normalizeTimes([firstDate, today]);
+}
+function getLast30Days() {
+    const today = new Date();
+    const firstDate = new Date();
+    firstDate.setDate(today.getDate() - DAYS_IN_30_DAYS);
+    return normalizeTimes([firstDate, today]);
+}
+function getThisMonth() {
+    const today = new Date();
+    const firstDate = new Date(today.getFullYear(), today.getMonth(), 1);
+    return normalizeTimes([firstDate, today]);
+}
+function getLastMonth() {
+    const today = new Date();
+    const firstDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+    const lastDate = new Date(today.getFullYear(), today.getMonth(), 0);
+    return normalizeTimes([firstDate, lastDate]);
+}
+function getQuickDates() {
+    const today = new Date();
+    const dates = [
+        {
+            label: 'Today',
+            value: getToday(),
+        },
+        {
+            value: getYesterday(),
+            label: 'Yesterday',
+        },
+        {
+            label: 'Last 7 Days',
+            value: getLast7Days(),
+        },
+        {
+            label: 'Last 30 Days',
+            value: getLast30Days(),
+        },
+    ];
+    /*
+     * If the date is the 8th or 31st of the month, it matches up with last 7 days or last 30 days,
+     * respectively, and causes duplicate key errors. So best just leave it out in these cases.
+     */
+    if (today.getDate() !== 1 &&
+        today.getDate() !== DAYS_IN_WEEK + 1 &&
+        today.getDate() !== DAYS_IN_MONTH) {
+        dates.push({
+            label: 'This Month',
+            value: getThisMonth(),
+        });
+    }
+    dates.push({
+        label: 'Last Month',
+        value: getLastMonth(),
+    });
+    return dates.map((item) => ({
+        label: item.label,
+        value: transformFromDate(item.value) || '-',
+    }));
+}
+export default getQuickDates;

package/dist/filters/utility/parse-filters.d.ts

@@ -0,0 +1,3 @@
+import type { FilterMap } from "../interfaces";
+declare function parseFilters<T>(searchParams: Record<string, string> | null, map?: FilterMap<T> | null): Partial<T> | null;
+export default parseFilters;

package/dist/filters/utility/parse-filters.js

@@ -0,0 +1,16 @@
+function parseFilters(searchParams, map) {
+    const out = {};
+    if (!searchParams || !map) {
+        return null;
+    }
+    for (const key in map) {
+        if (Object.hasOwn(map, key) && typeof map[key] !== 'undefined') {
+            const value = searchParams[key];
+            if (value) {
+                out[key] = map[key].transformer(value);
+            }
+        }
+    }
+    return out;
+}
+export default parseFilters;

package/dist/filters/utility/parse-page.d.ts

@@ -0,0 +1,2 @@
+declare function parsePage(searchParams: Record<string, string> | null): number | null;
+export default parsePage;

package/dist/filters/utility/parse-page.js

@@ -0,0 +1,8 @@
+function parsePage(searchParams) {
+    if (!searchParams) {
+        return null;
+    }
+    const { page } = searchParams;
+    return page ? parseInt(page, 10) : null;
+}
+export default parsePage;

package/dist/filters/utility/render-value.d.ts

@@ -0,0 +1,3 @@
+import type { FilterConfig, FilterConfigWithData } from '../interfaces';
+declare function renderValue(value: string, config?: FilterConfig | FilterConfigWithData): string | null;
+export default renderValue;

package/dist/filters/utility/render-value.js

@@ -0,0 +1,57 @@
+import { formatMulti } from '@sqrzro/utility';
+import { transformToMulti } from './transform-multi';
+function getNamesFromIDs(ids, data) {
+    if (!data || !ids) {
+        return [];
+    }
+    const set = new Set(ids);
+    return data
+        .filter((item) => set.has(item.value))
+        .map((item) => item.$data?.label || item.label);
+}
+const LENGTH_OF_YEAR = 4;
+const PAD = 2;
+function renderDateString(value, noYear) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return '';
+    }
+    const day = date.getDate().toString().padStart(PAD, '0');
+    const month = (date.getMonth() + 1).toString().padStart(PAD, '0');
+    const year = date.getFullYear();
+    return `${day}/${month}${noYear ? '' : `/${year}`}`;
+}
+function renderDateValue(value) {
+    const years = value.map((item) => parseInt(item.substring(0, LENGTH_OF_YEAR), 10));
+    const isThisYear = years.every((item) => item === new Date().getFullYear());
+    if (value[0] === value[1]) {
+        return renderDateString(value[0], isThisYear);
+    }
+    return value.map((item) => renderDateString(item, isThisYear)).join(' - ');
+}
+function renderValue(value, config) {
+    // Split the value into a multi-value. This will make formatting multis easier later
+    const values = transformToMulti(value);
+    /*
+     * If the config has data, extract the names from the data values
+     * This should work for boolean, dropdown, and multi filters
+     */
+    if (config && 'data' in config) {
+        // Try the entire value first (not array). See if it's in the data, a return the name if so:
+        const [item] = getNamesFromIDs([value], config.data);
+        if (item) {
+            return item;
+        }
+        // Now try the split values:
+        const items = getNamesFromIDs(values, config.data);
+        if (items.length) {
+            return formatMulti(items);
+        }
+    }
+    // If the value looks like dates, format them accordingly
+    if (values?.every((item) => /^\d{4}-\d{2}-\d{2}$/u.test(item))) {
+        return renderDateValue(values);
+    }
+    return null;
+}
+export default renderValue;

package/dist/filters/utility/transform-boolean.d.ts

@@ -0,0 +1,2 @@
+export declare function transformFromBoolean(value?: boolean): string;
+export declare function transformToBoolean(value?: string): boolean;

package/dist/filters/utility/transform-boolean.js

@@ -0,0 +1,10 @@
+export function transformFromBoolean(value) {
+    return value ? '1' : '0';
+}
+export function transformToBoolean(value) {
+    if (!value) {
+        return false;
+    }
+    const normalized = value.trim().toLowerCase();
+    return !['false', '0', 'no', 'off', 'null', 'undefined', 'n'].includes(normalized);
+}

package/dist/filters/utility/transform-date.d.ts

@@ -0,0 +1,2 @@
+export declare function transformFromDate(value?: [Date, Date] | null): string;
+export declare function transformToDate(value?: string): [Date, Date] | null;

package/dist/filters/utility/transform-date.js

@@ -0,0 +1,29 @@
+import { formatDate } from '@sqrzro/utility';
+export function transformFromDate(value) {
+    if (!value) {
+        return '';
+    }
+    return `${formatDate(value[0], 'YYYY-MM-DD')}|${formatDate(value[1], 'YYYY-MM-DD')}`;
+}
+function setToStartOfDay(date) {
+    date.setHours(0, 0, 0, 0);
+    return date;
+}
+function setToEndOfDay(date) {
+    date.setHours(23, 59, 59, 999); // eslint-disable-line @typescript-eslint/no-magic-numbers
+    return date;
+}
+function parseDate(value) {
+    const date = new Date(value);
+    return isNaN(date.getTime()) ? null : date;
+}
+export function transformToDate(value) {
+    if (!value?.includes('|')) {
+        return null;
+    }
+    const [start, end] = value.split('|').map((item) => parseDate(item));
+    if (start === null || end === null) {
+        return null;
+    }
+    return [setToStartOfDay(start), setToEndOfDay(end)];
+}

package/dist/filters/utility/transform-multi.d.ts

@@ -0,0 +1,2 @@
+export declare function transformFromMulti(value?: string[] | null): string;
+export declare function transformToMulti(value?: string): string[] | null;

package/dist/filters/utility/transform-multi.js

@@ -0,0 +1,9 @@
+export function transformFromMulti(value) {
+    if (!value) {
+        return '';
+    }
+    return value.filter(Boolean).join('|').replace(/^|/u, '').replace(/|$/u, '');
+}
+export function transformToMulti(value) {
+    return value ? value.split('|').filter(Boolean) : null;
+}

package/dist/forms/components/Dropdown/index.d.ts

@@ -0,0 +1,22 @@
+import type { ClassNameProps, ErrorableClassName, FocusableClassName, SelectableClassName } from '../../../styles/interfaces';
+import type { DropdownObject, InputProps } from '../../interfaces';
+export interface DropdownClassNames {
+    root: ErrorableClassName & FocusableClassName;
+    list: string;
+    item: SelectableClassName;
+    title: string;
+    details: string;
+    icon: string;
+    clear: string;
+}
+export interface DropdownComponentProps<T> {
+    isOptional?: boolean;
+    isPanelOnly?: boolean;
+    options?: DropdownObject<T>[];
+    placeholder?: string;
+}
+export type DropdownProps<T> = ClassNameProps<DropdownClassNames> & InputProps<T | null> & DropdownComponentProps<T>;
+export declare function renderLabel<T>(options: DropdownObject<T>[], value?: T | null): string;
+export declare function renderDetails<T>(options: DropdownObject<T>[], value?: T | null): string;
+declare function Dropdown<T>({ classNames, classNameProps, hasError, isDisabled, isOptional, isPanelOnly, name, onChange, options, placeholder, value, }: Readonly<DropdownProps<T>>): React.ReactElement;
+export default Dropdown;

package/dist/forms/components/Dropdown/index.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Popover from '../../../components/utility/Popover';
+import useClickOutside from '../../../hooks/useClickOutside';
+import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/config';
+import DropdownList from '../DropdownList';
+import StaticTextInput from '../StaticTextInput';
+function findByValue(options, value) {
+    return options.find((item) => item.value === value);
+}
+export function renderLabel(options, value) {
+    return findByValue(options, value)?.label || '';
+}
+export function renderDetails(options, value) {
+    return findByValue(options, value)?.details || '';
+}
+function Dropdown({ classNames, classNameProps, hasError, isDisabled, isOptional, isPanelOnly, name, onChange, options = [], placeholder, value, }) {
+    const componentClassNames = classNames || getClassNames('dropdown')?.(classNameProps);
+    const [isOpen, setIsOpen, node] = useClickOutside({ shouldHandleEnterKey: true });
+    function toggleIsOpen() {
+        setIsOpen(!isOpen);
+    }
+    function handleChange(event) {
+        if (onChange) {
+            onChange(event);
+        }
+        setIsOpen(false);
+    }
+    function handleClear() {
+        onChange?.({ $data: undefined, target: { name, value: null } }); // eslint-disable-line no-undefined
+    }
+    if (isPanelOnly) {
+        return _jsx(DropdownList, { name: name, onChange: handleChange, options: options, value: value });
+    }
+    return (_jsxs("div", { ref: node, className: tw('relative', componentClassNames?.root?.default, hasError ? componentClassNames?.root?.error : null, isOpen && !isDisabled ? componentClassNames?.root?.focused : null), children: [_jsx(StaticTextInput, { classNames: {
+                    clear: componentClassNames?.clear,
+                    icon: componentClassNames?.icon,
+                }, details: renderDetails(options, value), hasError: hasError, isDisabled: isDisabled || !options?.length, isOpen: isOpen, isOptional: isOptional, label: renderLabel(options, value), name: name, onClear: handleClear, onClick: toggleIsOpen, placeholder: placeholder || 'Select...', value: value ? String(value) : '' }), _jsx(Popover, { align: "center", isOpen: isOpen ? !isDisabled : false, isScrollable: true, children: _jsx(DropdownList, { name: name, onChange: handleChange, options: options, value: value }) })] }));
+}
+export default Dropdown;

package/dist/forms/components/DropdownList/index.d.ts

@@ -0,0 +1,8 @@
+import type { DropdownObject, InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps } from '../../../styles/interfaces';
+import type { DropdownClassNames } from '../Dropdown';
+export interface DropdownListProps<T> extends ClassNameProps<DropdownClassNames>, InputProps<T | null> {
+    options: DropdownObject<T>[];
+}
+declare function DropdownList<T>({ classNames, classNameProps, name, onChange, options, value, }: Readonly<DropdownListProps<T>>): React.ReactElement;
+export default DropdownList;

package/dist/forms/components/DropdownList/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+function isSelected(id, value) {
+    return Boolean(value) && value === id;
+}
+function DropdownList({ classNames, classNameProps, name, onChange, options, value, }) {
+    const componentClassNames = classNames || getClassNames('dropdown')?.(classNameProps);
+    // const checkboxClassNames = getClassNames('checkboxInput')?.(classNameProps);
+    function handleChange(item) {
+        return () => {
+            onChange?.({
+                $data: item.$data,
+                target: { name, value: item.value },
+            });
+        };
+    }
+    return (_jsx("ul", { className: componentClassNames?.list, role: "listbox", children: options.map((item, index) => (_jsx("li", { "aria-selected": isSelected(item.value, value), className: tw('relative', item.isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames?.item?.default, isSelected(item.value, value) ? componentClassNames?.item?.selected : null), role: "option", children: _jsxs("button", { onClick: handleChange(item), tabIndex: -1, type: "button", children: [_jsx("span", { className: tw('whitespace-nowrap' /*componentClassNames?.label*/), children: item.label }), item.details ? (_jsx("small", { className: tw(componentClassNames?.details), children: item.details })) : null] }) }, index))) }));
+}
+export default DropdownList;

package/dist/forms/components/EditableForm/index.d.ts

@@ -0,0 +1,24 @@
+import type { ClassNameProps } from '../../../styles/interfaces';
+import type { Action } from '../../../utility/interfaces';
+import type { EditingStatus } from '../../interfaces';
+import type { FormProps } from '../Form';
+export interface EditableFormClassNames {
+    actions: string;
+    root: string;
+    header: string;
+    title: string;
+    description: string;
+    content: string;
+}
+export interface EditableFormProps extends ClassNameProps<EditableFormClassNames> {
+    actions?: Action[] | false;
+    children: React.ReactNode;
+    formProps: Omit<FormProps, 'children'>;
+    onCancel?: () => void;
+    onEdit?: () => void;
+    setStatus?: (status: EditingStatus | null) => void;
+    status?: EditingStatus | null;
+    title?: string;
+}
+declare function EditableForm({ classNameProps, classNames, children, formProps, onCancel, onEdit, setStatus, status, title, }: Readonly<EditableFormProps>): React.ReactElement;
+export default EditableForm;

package/dist/forms/components/EditableForm/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ActionList from '../../../components/utility/ActionList';
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+import Form from '../Form';
+function EditableForm({ classNameProps, classNames, children, formProps, onCancel, onEdit, setStatus, status, title, }) {
+    const componentClassNames = classNames || getClassNames('editableForm')?.(classNameProps);
+    function setCancelled() {
+        onCancel?.();
+        setStatus?.('CANCELLED');
+    }
+    function setEditing() {
+        onEdit?.();
+        setStatus?.('EDITING');
+    }
+    return (_jsx(Form, { ...formProps, children: _jsxs("fieldset", { className: componentClassNames?.root, children: [title ? _jsx("header", { className: tw(componentClassNames?.header), children: _jsx("legend", { className: componentClassNames?.title, children: title }) }) : null, _jsxs("div", { className: tw(componentClassNames?.content), children: [children, _jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: status === 'EDITING'
+                                    ? [
+                                        { label: 'Cancel', onClick: setCancelled },
+                                        { isSubmittable: true, label: 'Save' },
+                                    ]
+                                    : [{ label: 'Edit', onClick: setEditing }] }) })] })] }) }));
+}
+export default EditableForm;

package/dist/forms/components/EditableFormField/index.d.ts

@@ -0,0 +1,14 @@
+import type { ClassNameProps } from '../../../styles/interfaces';
+import { FormFieldProps } from '../FormField';
+import { EditingStatus } from '../../interfaces';
+export interface EditableFormFieldClassNames {
+    root: string;
+    label: string;
+    field: string;
+}
+export interface EditableFormFieldProps<T, V extends T = T> extends ClassNameProps<EditableFormFieldClassNames>, Omit<FormFieldProps<T, V>, 'classNames'> {
+    renderValue?: React.ReactNode | ((value?: T) => React.ReactNode);
+    status?: EditingStatus | null;
+}
+declare function EditableFormField<T, V extends T = T>({ classNameProps, classNames, renderValue, status, ...props }: Readonly<EditableFormFieldProps<T, V>>): React.ReactElement;
+export default EditableFormField;

package/dist/forms/components/EditableFormField/index.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, useEffect, useRef } from 'react';
+import FormField from '../FormField';
+import { getClassNames } from '../../../styles/config';
+function getRenderedValue(value, renderValue) {
+    if (renderValue) {
+        if (typeof renderValue === 'function') {
+            return getRenderedValue(renderValue(value));
+        }
+        return getRenderedValue(renderValue);
+    }
+    if (typeof value === 'boolean') {
+        return value ? 'Yes' : 'No';
+    }
+    if (isValidElement(value)) {
+        return value;
+    }
+    return value ? String(value) : '-';
+}
+function EditableFormField({ classNameProps, classNames, renderValue, status, ...props }) {
+    const componentClassNames = classNames || getClassNames('editableFormField')(classNameProps);
+    const cachedValue = useRef(props.value);
+    useEffect(() => {
+        if (status === 'CANCELLED') {
+            props.onChange?.({ target: { name: props.name, value: cachedValue.current } });
+        }
+        if (status === 'SAVED') {
+            cachedValue.current = props.value;
+        }
+    }, [status]);
+    if (status === 'EDITING') {
+        return _jsx(FormField, { ...props });
+    }
+    return (_jsxs("div", { className: componentClassNames?.root, children: [_jsx("div", { className: componentClassNames?.label, children: props.label }), _jsx("div", { className: componentClassNames?.field, children: getRenderedValue(props.value, renderValue) })] }));
+}
+export default EditableFormField;

package/dist/forms/components/EditableFormFields/index.d.ts

@@ -0,0 +1,7 @@
+import type { EditableFormFieldComponentProps } from '../../interfaces';
+import type { DropdownComponentProps } from '../Dropdown';
+import type { TextInputComponentProps } from '../TextInput';
+export type EditableDropdownFormFieldProps<T> = EditableFormFieldComponentProps<T | null> & DropdownComponentProps<T>;
+export declare function EditableDropdownFormField<T>(props: Readonly<EditableDropdownFormFieldProps<T>>): React.ReactElement;
+export type EditableTextFormFieldProps = EditableFormFieldComponentProps<string> & TextInputComponentProps;
+export declare function EditableTextFormField(props: Readonly<EditableTextFormFieldProps>): React.ReactElement;

package/dist/forms/components/EditableFormFields/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import extractEditableInputProps from '../../utility/extract-editable-input-props';
+import Dropdown from '../Dropdown';
+import EditableFormField from '../EditableFormField';
+import TextInput from '../TextInput';
+export function EditableDropdownFormField(props) {
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(Dropdown, { ...renderProps, ...inputProps })), [inputProps]);
+    const renderValue = useCallback((value) => {
+        const displayValue = inputProps.options?.find((option) => option.value === value)?.label;
+        return _jsx("div", { children: displayValue ?? '' });
+    }, [inputProps]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
+}
+export function EditableTextFormField(props) {
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(TextInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput });
+}

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

@@ -0,0 +1,12 @@
+import type { ClassNameProps } from '../../../styles/interfaces';
+export interface FormClassNames {
+    root: string;
+}
+export interface FormProps extends ClassNameProps<FormClassNames> {
+    action?: (formData: FormData) => void;
+    children: React.ReactNode;
+    id?: string;
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+}
+declare function Form({ action, children, classNames, classNameProps, id, onSubmit, }: Readonly<FormProps>): React.ReactElement;
+export default Form;

package/dist/forms/components/Form/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+function Form({ action, children, classNames, classNameProps, id, onSubmit, }) {
+    const componentClassNames = classNames || getClassNames('form')?.(classNameProps);
+    return (_jsx("form", { action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: children }));
+}
+export default Form;