@sqrzro/ui 4.0.0-alpha.55 → 4.0.0-alpha.56

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

@@ -11,9 +11,10 @@ export interface FormFieldClassNames {
 }
 export interface FormFieldProps<T, V extends T> extends ClassNameProps<FormFieldClassNames>, InputProps<T, V> {
     action?: SimpleActionObject | null;
-    details?: string | null;
+    details?: React.ReactNode;
     error?: Record<string, string> | null;
     hasAssistiveError?: boolean;
+    hasAssistiveDetails?: boolean;
     hasAssistiveLabel?: boolean;
     isContentOnly?: boolean;
     isOptional?: boolean;
@@ -21,5 +22,5 @@ export interface FormFieldProps<T, V extends T> extends ClassNameProps<FormField
     onChange?: (event: InputEvent<T>) => void;
     render: (props: InputProps<T>) => React.ReactElement | null;
 }
-declare function FormField<T, V extends T>({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
+declare function FormField<T, V extends T>({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
 export default FormField;

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

@@ -2,6 +2,7 @@
 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 FormError from '../FormError';
 import FormLabel from '../FormLabel';
 import ActionButton from '../../../components/buttons/ActionButton';
@@ -10,7 +11,7 @@ function checkHasError(error) {
         Object.keys(error).length > 0 &&
         Object.values(error).some((item) => typeof item === 'string'));
 }
-function FormField({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }) {
+function FormField({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }) {
     const componentClassNames = useClassNames('formField', { props: classNameProps, states: { isError: checkHasError(error) } }, classNames);
     const inputId = id || `ff_${name}`;
     const [inputError, setInputError] = useState(null);
@@ -19,6 +20,7 @@ function FormField({ action, classNameProps, classNames, details, error, hasAssi
     }
     const renderProps = {
         classNameProps,
+        details,
         error,
         hasError: checkHasError(error),
         id: inputId,
@@ -34,6 +36,6 @@ function FormField({ action, classNameProps, classNames, details, error, hasAssi
     if (isContentOnly) {
         return render(renderProps);
     }
-    return (_jsxs("div", { className: componentClassNames?.root, children: [label ? (_jsx(FormLabel, { classNameProps: classNameProps, htmlFor: inputId, isAssistive: hasAssistiveLabel, isOptional: isOptional, children: label })) : null, details && label ? (_jsx("div", { className: componentClassNames?.details, children: details })) : null, _jsx("div", { className: componentClassNames?.field, children: render(renderProps) }), action ? (_jsx("div", { children: _jsx(ActionButton, { ...action, isDisabled: Boolean(isDisabled || action.isDisabled) }) })) : null, inputError || error?.[name] ? (_jsx(FormError, { classNameProps: classNameProps, id: inputId, isAssistive: hasAssistiveError, children: inputError || error?.[name] })) : null] }));
+    return (_jsxs("div", { className: componentClassNames?.root, children: [label ? (_jsx(FormLabel, { classNameProps: classNameProps, htmlFor: inputId, isAssistive: hasAssistiveLabel, isOptional: isOptional, children: label })) : null, details && label ? (_jsx("div", { className: tw(componentClassNames?.details, hasAssistiveDetails ? 'sr-only' : null), children: details })) : null, _jsx("div", { className: componentClassNames?.field, children: render(renderProps) }), action ? (_jsx("div", { children: _jsx(ActionButton, { ...action, isDisabled: Boolean(isDisabled || action.isDisabled) }) })) : null, inputError || error?.[name] ? (_jsx(FormError, { classNameProps: classNameProps, id: inputId, isAssistive: hasAssistiveError, children: inputError || error?.[name] })) : null] }));
 }
 export default FormField;

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

@@ -4,6 +4,7 @@ import type { DropdownComponentProps } from '../Dropdown';
 import type { PointsInputComponentProps } from '../PointsInput';
 import type { NumberInputComponentProps } from '../NumberInput';
 import type { PasswordInputComponentProps } from '../PasswordInput';
+import type { SwitchComponentProps } from '../Switch';
 import type { TextAreaComponentProps } from '../TextArea';
 import type { TextInputComponentProps } from '../TextInput';
 export type AutocompleteFormFieldProps<T> = FormFieldComponentProps<T | null> & AutocompleteComponentProps<T>;
@@ -18,6 +19,8 @@ export type NumberFormFieldProps = FormFieldComponentProps<number> & NumberInput
 export declare function NumberFormField(props: Readonly<NumberFormFieldProps>): React.ReactElement;
 export type PasswordFormFieldProps = FormFieldComponentProps<string> & PasswordInputComponentProps;
 export declare function PasswordFormField(props: Readonly<PasswordFormFieldProps>): React.ReactElement;
+export type SwitchFormFieldProps = FormFieldComponentProps<boolean> & SwitchComponentProps;
+export declare function SwitchFormField(props: SwitchFormFieldProps): React.ReactElement;
 export type TextFormFieldProps = FormFieldComponentProps<string> & TextInputComponentProps;
 export declare function TextFormField(props: Readonly<TextFormFieldProps>): React.ReactElement;
 export type TextAreaFormFieldProps = FormFieldComponentProps<string> & TextAreaComponentProps;

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

@@ -8,6 +8,7 @@ import FormField from '../FormField';
 import PointsInput from '../PointsInput';
 import NumberInput from '../NumberInput';
 import PasswordInput from '../PasswordInput';
+import Switch from '../Switch';
 import TextArea from '../TextArea';
 import TextInput from '../TextInput';
 export function AutocompleteFormField(props) {
@@ -40,6 +41,11 @@ export function PasswordFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(PasswordInput, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function SwitchFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(Switch, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, hasAssistiveLabel: true, hasAssistiveDetails: true, render: renderInput });
+}
 export function TextFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(TextInput, { ...renderProps, ...inputProps })), [inputProps]);

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

@@ -5,7 +5,13 @@ export interface SwitchClassNames {
     control: string;
     input: CheckableClassName;
     icon: CheckableClassName;
+    label: string;
+    details: string;
 }
-export type SwitchProps = ClassNameProps<SwitchClassNames> & InputProps<boolean>;
-declare function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }: Readonly<SwitchProps>): React.ReactElement;
+export type SwitchComponentProps = {
+    details?: React.ReactNode;
+    label?: React.ReactNode;
+};
+export type SwitchProps = ClassNameProps<SwitchClassNames> & InputProps<boolean> & SwitchComponentProps;
+declare function Switch({ classNameProps, classNames, details, id, isDisabled, label, name, onChange, value, }: Readonly<SwitchProps>): React.ReactElement;
 export default Switch;

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

@@ -1,9 +1,10 @@
 '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';
-function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }) {
+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) {
         if (onChange) {
@@ -13,6 +14,6 @@ function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, va
             onChange(inputEvent);
         }
     }
-    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsx("div", { className: tw('block', componentClassNames?.root), children: _jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: componentClassNames?.icon })] }) })] }));
+    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsxs("div", { className: tw('block', componentClassNames?.root), children: [_jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: componentClassNames?.icon })] }), label ? (_jsxs("label", { htmlFor: id || name, children: [_jsx("span", { className: tw('', componentClassNames?.label), children: label }), details ? (_jsx("small", { className: tw('', componentClassNames?.details), children: details })) : null] })) : (_jsx(Assistive, { children: "Yes?" }))] })] }));
 }
 export default Switch;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.55",
+  "version": "4.0.0-alpha.56",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",