@sqrzro/ui 4.0.0-alpha.77 → 4.0.0-alpha.79

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

@@ -1,9 +1,9 @@
 '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/classnames/utility/tw';
-import { useClassNames, useIcon } from '../../../styles/context';
+import Popover from '../../../components/utility/Popover/index.js';
+import useClickOutside from '../../../hooks/useClickOutside.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import { useClassNames, useIcon } from '../../../styles/context.js';
 import DropdownList from '../DropdownList';
 import StaticTextInput from '../StaticTextInput';
 function findByValue(options, value) {

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

@@ -1,5 +1,5 @@
-import type { DropdownObject } from '../../../forms/interfaces';
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { DropdownObject } from '../../interfaces.js';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { DropdownClassNames } from '../Dropdown';
 interface DropdownItemProps<T> extends ClassNameProps<DropdownClassNames>, DropdownObject<T> {
     isSelected: boolean;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function DropdownItem({ $data, classNameProps, classNames, details, isDisabled, isSelected, label, onChange, value, }) {
     const componentClassNames = useClassNames('dropdown', { props: classNameProps, states: { isSelected } }, classNames);
     return (_jsx("li", { "aria-selected": isSelected, role: "option", children: _jsxs("button", { className: tw('relative w-full text-left', componentClassNames?.item, isDisabled ? 'pointer-events-none opacity-30' : null), onClick: onChange({ $data, value }), tabIndex: -1, type: "button", children: [_jsx("span", { className: tw('whitespace-nowrap', componentClassNames?.title), children: label }), details ? (_jsx("small", { className: tw(componentClassNames?.details), children: details })) : null] }) }));

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

@@ -1,5 +1,5 @@
-import type { DropdownObject, InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { DropdownObject, InputProps } from '../../interfaces.js';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { DropdownClassNames } from '../Dropdown';
 export interface DropdownListProps<T> extends ClassNameProps<DropdownClassNames>, InputProps<T | null> {
     options: DropdownObject<T>[];

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
+import { useClassNames } from '../../../styles/context.js';
 import DropdownItem from '../DropdownItem';
 function DropdownList({ classNames, classNameProps, name, onChange, options, value, }) {
     const componentClassNames = useClassNames('dropdown', { props: classNameProps }, classNames);

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

@@ -1,5 +1,5 @@
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
-import type { SimpleActionObject } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
+import type { SimpleActionObject } from '../../../utility/interfaces.js';
 import type { EditingStatus } from '../../interfaces';
 import type { FormProps } from '../Form';
 export interface EditableFormClassNames {
@@ -15,11 +15,12 @@ export interface EditableFormProps extends ClassNameProps<EditableFormClassNames
     actions?: SimpleActionObject[] | false;
     children: React.ReactNode;
     formProps: Omit<FormProps, 'children'>;
+    isEditable?: boolean;
     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;
+declare function EditableForm({ classNameProps, classNames, children, formProps, isEditable, onCancel, onEdit, setStatus, status, title, }: Readonly<EditableFormProps>): React.ReactElement;
 export default EditableForm;

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

@@ -1,23 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ActionList from '../../../components/utility/ActionList';
-import { useClassNames } from '../../../styles/context';
+import ActionList from '../../../components/utility/ActionList/index.js';
+import { useClassNames } from '../../../styles/context.js';
 import Form from '../Form';
-function EditableForm({ classNameProps, classNames, children, formProps, onCancel, onEdit, setStatus, status, title, }) {
-    const componentClassNames = useClassNames('editableForm', { props: classNameProps }, classNames);
+function EditableForm({ classNameProps, classNames, children, formProps, isEditable = true, onCancel, onEdit, setStatus, status, title, }) {
+    const componentClassNames = useClassNames('editableForm', { props: { ...classNameProps, hasTitle: Boolean(title), isEditable } }, classNames);
     function setCancelled() {
-        onCancel?.();
-        setStatus?.('CANCELLED');
+        if (isEditable) {
+            onCancel?.();
+            setStatus?.('CANCELLED');
+        }
     }
     function setEditing() {
-        onEdit?.();
-        setStatus?.('EDITING');
+        if (isEditable) {
+            onEdit?.();
+            setStatus?.('EDITING');
+        }
     }
-    return (_jsxs(Form, { ...formProps, classNames: { root: componentClassNames?.root, errors: componentClassNames?.errors }, children: [title ? (_jsx("header", { className: componentClassNames?.header, children: _jsx("legend", { className: componentClassNames?.title, children: title }) })) : null, _jsxs("div", { className: componentClassNames?.content, children: [children, _jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: status === 'EDITING'
+    return (_jsxs(Form, { ...formProps, classNames: { root: componentClassNames?.root, errors: componentClassNames?.errors }, children: [title ? (_jsx("header", { className: componentClassNames?.header, children: _jsx("legend", { className: componentClassNames?.title, children: title }) })) : null, _jsxs("div", { className: componentClassNames?.content, children: [children, isEditable ? (_jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: status === 'EDITING'
                                 ? [
                                     { label: 'Cancel', onClick: setCancelled },
                                     { isSubmittable: true, label: 'Save' },
                                 ]
-                                : [{ label: 'Edit', onClick: setEditing }] }) })] })] }));
+                                : [{ label: 'Edit', onClick: setEditing }] }) })) : null] })] }));
 }
 export default EditableForm;

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import { FormFieldProps } from '../FormField';
 import { EditingStatus } from '../../interfaces';
 export interface EditableFormFieldClassNames {

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement, useEffect, useRef } from 'react';
 import FormField from '../FormField';
-import { useClassNames } from '../../../styles/context';
+import { useClassNames } from '../../../styles/context.js';
 function getRenderedValue(value, renderValue) {
     if (renderValue) {
         if (typeof renderValue === 'function') {

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { formatMoney, formatPoints } from '@sqrzro/utility';
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 import extractEditableInputProps from '../../utility/extract-editable-input-props';
 import CheckboxInput from '../CheckboxInput';
 import ColorInput from '../ColorInput';
@@ -14,6 +14,7 @@ import PointsInput from '../PointsInput';
 import Switch from '../Switch';
 import TextArea from '../TextArea';
 import TextInput from '../TextInput';
+import ChkRad from '../ChkRad';
 export function EditableCheckboxFormField(props) {
     const classNames = useClassNames('checkboxInput');
     const { fieldProps, inputProps } = extractEditableInputProps(props);
@@ -24,7 +25,7 @@ export function EditableCheckboxFormField(props) {
         }
         return (_jsx("ul", { className: classNames?.root, role: "listbox", children: props.options
                 ?.filter((option) => value.includes(option.value))
-                .map((option) => (_jsx("li", { className: classNames?.item, children: option.label }, String(option.value)))) }));
+                .map((option) => (_jsx("li", { className: classNames?.item, children: _jsx(ChkRad, { isReadOnly: true, label: option.label, name: props.name, value: true }) }, String(option.value)))) }));
     }, [fieldProps.value]);
     return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
 }

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 export interface FormClassNames {
     root: string;
     errors: string;

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
-import { InfoPanel } from '../../../components';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import { InfoPanel } from '../../../components/index.js';
 function Form({ action, children, classNames, classNameProps, id, onSubmit, uncaughtErrors, ref, }) {
     const componentClassNames = useClassNames('form', { props: classNameProps }, classNames);
     return (_jsxs("form", { ref: ref, action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: [uncaughtErrors && Object.keys(uncaughtErrors).length ? (_jsx("div", { className: tw(componentClassNames?.errors), children: _jsx(InfoPanel, { variant: "error", children: Object.values(uncaughtErrors).map((item, index) => (_jsx("p", { children: item }, index))) }) })) : null, children] }));

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { FormFieldClassNames } from '../FormField';
 export interface FormErrorProps extends ClassNameProps<FormFieldClassNames> {
     children: React.ReactNode;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames, useIcon } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function FormError({ children, classNames, classNameProps, id, isAssistive, }) {
     const componentClassNames = useClassNames('formField', { props: classNameProps }, classNames);
     const Icon = useIcon('formField.error');

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

@@ -1,6 +1,6 @@
-import type { InputEvent, InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
-import { SimpleActionObject } from '../../../utility/interfaces';
+import type { InputEvent, InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
+import { SimpleActionObject } from '../../../utility/interfaces.js';
 export interface FormFieldClassNames {
     root: ErrorableClassName;
     label: string;

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

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 import FormError from '../FormError';
 import FormLabel from '../FormLabel';
-import ActionButton from '../../../components/buttons/ActionButton';
+import ActionButton from '../../../components/buttons/ActionButton/index.js';
 function checkHasError(error) {
     return Boolean(error &&
         Object.keys(error).length > 0 &&

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { FormFieldClassNames } from '../FormField';
 interface FormLabelProps extends ClassNameProps<FormFieldClassNames> {
     children: React.ReactNode;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function FormLabel({ children, classNames, classNameProps, htmlFor, isAssistive, isOptional, }) {
     const componentClassNames = useClassNames('formField', { props: classNameProps }, classNames);
     return (_jsxs("label", { className: tw(componentClassNames?.label, isAssistive ? 'sr-only' : null), htmlFor: htmlFor, children: [children, isOptional ? _jsx("small", { className: componentClassNames?.optional, children: "Optional" }) : null] }));

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

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '../../../components/buttons/Button';
+import type { ButtonProps } from '../../../components/buttons/Button/index.js';
 export type FormSubmitProps = Omit<ButtonProps, 'href' | 'isNewWindow' | 'isText'>;
 declare function FormSubmit({ isLoading, ...props }: Readonly<FormSubmitProps>): React.ReactElement;
 export default FormSubmit;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormStatus } from 'react-dom';
-import Button from '../../../components/buttons/Button';
+import Button from '../../../components/buttons/Button/index.js';
 function FormSubmit({ isLoading, ...props }) {
     const { pending } = useFormStatus();
     return _jsx(Button, { ...props, isLoading: isLoading || pending, type: "submit", variant: "primary" });

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

@@ -1,6 +1,6 @@
-import type { ImageTypeKey } from '../../../forms/utility/preprocess-image';
-import type { FormResponse, InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
+import type { ImageTypeKey } from '../../utility/preprocess-image.js';
+import type { FormResponse, InputProps } from '../../interfaces.js';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces.js';
 export interface ImageInputClassNames {
     description: string;
     icon: HighlightableClassName;

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import preprocessImage from '../../../forms/utility/preprocess-image';
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import preprocessImage from '../../utility/preprocess-image.js';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 import ImageInputPanel from '../ImageInputPanel';
 function ImageInput({ accept, classNames, classNameProps, format, id, isDisabled, maxSize, minSize, name, onChange, onUpload, value, }) {
     const [error, setError] = useState(null);

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { ImageInputClassNames } from '../ImageInput';
 interface ImageInputPanelProps extends ClassNameProps<ImageInputClassNames> {
     error?: string | null;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames, useIcon } from '../../../styles/context';
+import { useClassNames, useIcon } from '../../../styles/context.js';
 function renderMinSize(minSize) {
     if (!minSize) {
         return null;

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

@@ -1,4 +1,4 @@
-import type { ModalProps } from '../../../components/modals/Modal';
+import type { ModalProps } from '../../../components/modals/Modal/index.js';
 import type { FormProps } from '../Form';
 export interface ModalFormProps {
     children: React.ReactNode;

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

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Modal from '../../../components/modals/Modal';
-import ModalActions from '../../../components/modals/ModalActions';
-import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
+import Modal from '../../../components/modals/Modal/index.js';
+import ModalActions from '../../../components/modals/ModalActions/index.js';
+import useSearchParamsHref from '../../../hooks/useSearchParamsHref.js';
 import Form from '../Form';
-import { InfoPanel } from '../../../components';
+import { InfoPanel } from '../../../components/index.js';
 function ModalForm({ children, formProps, hasSubmit = true, isDisabled, modalProps, serverError, submitLabel, validationErrors, }) {
     const { setSearchParamsHref } = useSearchParamsHref();
     function handleCancel() {

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

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { InputProps } from '../../interfaces';
 import type { TextInputClassNames, TextInputComponentProps } from '../TextInput';
 export type NumberInputComponentProps = TextInputComponentProps;

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

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles';
+import { ClassNameProps } from '../../../styles/index.js';
 export interface PasswordComplexityClassNames {
     root: string;
     list: string;

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles';
+import { useClassNames } from '../../../styles/index.js';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import PasswordComplexityItem from '../PasswordComplexityItem';
 function PasswordComplexity({ classNameProps, classNames, data, onComplexity, }) {

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

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles';
+import { ClassNameProps } from '../../../styles/index.js';
 import type { PasswordComplexityClassNames } from '../PasswordComplexity';
 interface PasswordComplexityItemProps extends ClassNameProps<PasswordComplexityClassNames> {
     isValid: boolean;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames, useIcon } from '../../../styles';
+import { useClassNames, useIcon } from '../../../styles/index.js';
 function PasswordComplexityItem({ classNameProps, classNames, isValid, value, }) {
     const componentClassNames = useClassNames('passwordComplexity', { props: { ...classNameProps, isValid } }, classNames);
     const InvalidIcon = useIcon('passwordComplexity.invalid');

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

@@ -1,5 +1,5 @@
-import { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, SelectableClassName } from '../../../styles/classnames/interfaces';
+import { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, SelectableClassName } from '../../../styles/classnames/interfaces.js';
 import type { TextInputComponentProps } from '../TextInput';
 export interface PasswordInputClassNames {
     action: string;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { useClassNames, useIcon } from '../../../styles/context';
+import { useClassNames, useIcon } from '../../../styles/context.js';
 import TextInput from '../TextInput';
 function PasswordInput({ classNameProps, classNames, ...props }) {
     const [isVisible, setIsVisible] = useState(false);

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import Calendar from '../../../components/utility/Calendar';
+import Calendar from '../../../components/utility/Calendar/index.js';
 import BaseCalendarInput from '../BaseCalendarInput';
 function RangeCalendarInput({ name, onChange, value, ...baseProps }) {
     function handleChange(eventValue) {

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

@@ -1,5 +1,5 @@
-import type { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+import type { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
 export interface StaticTextInputClassNames {
     root: ErrorableClassName;
     placeholder: string;

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import Assistive from '../../../components/utility/Assistive';
-import { useClassNames, useIcon } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import Assistive from '../../../components/utility/Assistive/index.js';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function hasValue(value) {
     if (Array.isArray(value)) {
         return Boolean(value.filter((item) => Boolean(item)).length);

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

@@ -1,5 +1,5 @@
-import type { InputProps } from '../../../forms/interfaces';
-import { CheckableClassName, ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { InputProps } from '../../interfaces.js';
+import { CheckableClassName, ClassNameProps } from '../../../styles/classnames/interfaces.js';
 export interface SwitchClassNames {
     root: string;
     control: string;

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import Assistive from '../../../components/utility/Assistive';
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import Assistive from '../../../components/utility/Assistive/index.js';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function Switch({ classNameProps, classNames, details, id, isDisabled, label, name, onChange, value, }) {
     const componentClassNames = useClassNames('switch', { props: classNameProps, states: { isChecked: Boolean(value) } }, classNames);
     function handleChange(event) {

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

@@ -1,5 +1,5 @@
-import type { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+import type { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
 export interface TextAreaClassNames {
     root: ErrorableClassName;
 }

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function TextArea({ classNames, classNameProps, hasError, id, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, rows = 4, value, }) {
     const componentClassNames = useClassNames('textArea', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
     function handleChange(event) {

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

@@ -1,5 +1,5 @@
-import type { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+import type { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
 export interface TextInputClassNames {
     loading: string;
     prefix: ErrorableClassName;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 /**
  *
  * ## ClassNames

package/dist/forms/hooks/useEditableForm.d.ts

@@ -6,6 +6,7 @@ export interface EditableFieldPropsReturn<Request, K extends keyof Request = key
 }
 export type UseEditableFormArgs<Request, Response> = UseFormArgs<Request, Response> & {
     defaultStatus?: EditingStatus;
+    isEditable?: boolean;
     onCancel?: () => void;
     onEdit?: () => void;
     title?: string;
@@ -20,5 +21,5 @@ export interface UseEditableFormReturn<Request> extends Omit<UseFormReturn<Reque
     setStatus: React.Dispatch<React.SetStateAction<EditingStatus | null>>;
     status: EditingStatus | null;
 }
-declare function useEditableForm<Request extends object, Response = Request>({ defaultStatus, onCancel, onEdit, onSuccess, title, ...args }: UseEditableFormArgs<Request, Response>): UseEditableFormReturn<Request>;
+declare function useEditableForm<Request extends object, Response = Request>({ defaultStatus, isEditable, onCancel, onEdit, onSuccess, title, ...args }: UseEditableFormArgs<Request, Response>): UseEditableFormReturn<Request>;
 export default useEditableForm;

package/dist/forms/hooks/useEditableForm.js

@@ -1,8 +1,11 @@
 import { useState } from 'react';
 import useForm from './useForm';
-function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ...args }) {
-    const [status, setStatus] = useState(defaultStatus ?? null);
+function useEditableForm({ defaultStatus, isEditable = true, onCancel, onEdit, onSuccess, title, ...args }) {
+    const [status, setStatus] = useState(isEditable ? (defaultStatus ?? null) : null);
     async function onEditableSuccess(response) {
+        if (!isEditable) {
+            return;
+        }
         if (onSuccess) {
             await onSuccess(response);
         }
@@ -15,7 +18,7 @@ function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ..
     });
     function editableFieldProps(name, label) {
         const fieldProps = useFormReturn.fieldProps(name, label);
-        return { ...fieldProps, status };
+        return { ...fieldProps, status: isEditable ? status : null };
     }
     function handleCancel() {
         if (onCancel) {
@@ -29,6 +32,7 @@ function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ..
         fieldProps: editableFieldProps,
         formProps: {
             formProps: useFormReturn.formProps,
+            isEditable,
             onCancel: handleCancel,
             onEdit,
             status,

package/dist/forms/hooks/useForm.d.ts

@@ -1,5 +1,5 @@
-import type { Default, FormResponse, InputEvent } from '../../forms/interfaces';
-import type { UseSuccessArgs } from '../../hooks/useSuccess';
+import type { Default, FormResponse, InputEvent } from '../interfaces.js';
+import type { UseSuccessArgs } from '../../hooks/useSuccess.js';
 import type { FormProps } from '../components/Form';
 export interface FieldPropsReturn<Request, K extends keyof Request = keyof Request> {
     error: Record<string, string> | null;

package/dist/forms/hooks/useForm.js

@@ -2,8 +2,8 @@
 import { useRef, useState, useTransition } from 'react';
 import { formatTitle } from '@sqrzro/utility';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import useSuccess from '../../hooks/useSuccess';
-import useToast from '../../hooks/useToast';
+import useSuccess from '../../hooks/useSuccess.js';
+import useToast from '../../hooks/useToast.js';
 export const DEFAULT_TOAST_MESSAGES = {
     server: 'There was a problem submitting your request. Please try again later.',
     success: 'Your request was submitted successfully.',

package/dist/forms/hooks/useModalForm.d.ts

@@ -1,4 +1,4 @@
-import type { SimpleActionObject } from '../../utility/interfaces';
+import type { SimpleActionObject } from '../../utility/interfaces.js';
 import type { ModalFormProps } from '../components/ModalForm';
 import type { UseFormArgs, UseFormReturn } from './useForm';
 export interface UseModalFormArgs<Request, Response> extends UseFormArgs<Request, Response> {

package/dist/forms/hooks/useModalForm.js

@@ -1,7 +1,7 @@
 'use client';
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import useSearchParamsHref from '../../hooks/useSearchParamsHref';
+import useSearchParamsHref from '../../hooks/useSearchParamsHref.js';
 import useForm, { DEFAULT_TOAST_MESSAGES } from './useForm';
 function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
     const [serverError, setServerError] = useState(null);

package/dist/forms/interfaces.d.ts

@@ -31,6 +31,7 @@ export interface InputProps<V, T extends V = V> {
     hasError?: boolean;
     id?: string;
     isDisabled?: boolean;
+    isReadOnly?: boolean;
     name: string;
     ref?: React.Ref<HTMLInputElement>;
     onChange?: (event: InputEvent<T>) => void;

package/dist/hooks/useConfirmable.d.ts

@@ -1,4 +1,4 @@
-import type { ActionEvent } from '../utility/interfaces';
+import type { ActionEvent } from '../utility/interfaces.js';
 interface UseConfirmableArgs {
     isLoading?: boolean;
     onBeforeConfirm?: () => void;

package/dist/hooks/useSelected.d.ts

@@ -1,4 +1,4 @@
-import type { InputEvent } from '../forms/interfaces';
+import type { InputEvent } from '../forms/interfaces.js';
 interface UseSelectedReturn {
     checkSelected: (id: string) => boolean;
     isAllSelected: boolean;