@sqrzro/ui 4.0.0-alpha.8 → 4.0.0-alpha.80

package/dist/filters/filters/SearchFilter/index.js

@@ -1,11 +1,13 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState } from 'react';
-import FilterClearButton from '../../../filters/components/FilterClearButton';
-import TextInput from '../../../forms/components/TextInput';
-import { getIcon } from '../../../styles/icons';
-import tw from '../../../styles/tw';
-function SearchFilter({ onChange, value }) {
-    const Icon = getIcon('filter.search');
+import FilterClearButton from '../../components/FilterClearButton/index.js';
+import TextInput from '../../../forms/components/TextInput/index.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+function SearchFilter({ classNameProps, classNames, onChange, value, }) {
+    const componentClassNames = useClassNames('filterSearch', { props: classNameProps }, classNames);
+    const Icon = useIcon('filter.search');
     const [pendingValue, setPendingValue] = useState(value);
     function handleChange(event) {
         setPendingValue(event.target.value);
@@ -19,11 +21,9 @@ function SearchFilter({ onChange, value }) {
             onChange?.({ target: { name: 'search', value: pendingValue } });
         }
     }
-    //pointer-events-none absolute left-2 top-0 z-10 flex h-full items-center
-    //h-8 w-56 rounded-full border border-slate-400 pl-7 pr-3 text-xs text-white placeholder:text-slate-300
-    return (_jsxs(Fragment, { children: [_jsx("div", { className: "", children: Icon ? _jsx(Icon, { className: "h-4 w-4 text-white" }) : null }), _jsx(TextInput, { classNames: {
+    return (_jsxs(Fragment, { children: [_jsx("div", { className: componentClassNames?.icon, children: Icon ? _jsx(Icon, {}) : null }), _jsx(TextInput, { classNames: {
                     root: {
-                        default: tw('', value ? 'bg-slate-700' : 'bg-transparent focus:bg-slate-700'),
+                        default: tw(componentClassNames?.input, value ? 'bg-slate-700' : 'bg-transparent focus:bg-slate-700'),
                     },
                 }, name: "search", onChange: handleChange, onKeyDown: handleKeyDown, value: pendingValue }), value ? _jsx(FilterClearButton, { onClick: handleClear }) : null] }));
 }

package/dist/filters/filters/interfaces.d.ts

@@ -1,10 +1,8 @@
-import { InputProps } from '../../forms/interfaces';
+import { InputProps } from '../../forms/interfaces.js';
 import { ClientFilterObject, FilterType } from '../interfaces';
-export type FilterComponentSize = 'lg';
 export interface FilterComponentProps<F extends FilterType> extends Omit<ClientFilterObject<F>, 'type'>, InputProps<string> {
     icon?: React.ReactNode;
     isOpen: boolean;
     onApply: () => void;
-    size?: FilterComponentSize;
     title?: string;
 }

package/dist/filters/index.d.ts

@@ -1,2 +1,3 @@
 export * from './interfaces';
-export { default as filter } from './utility/filter';
+export { default as FilterBar } from './components/FilterBar';
+export { default as filter } from './filter';

package/dist/filters/index.js

@@ -1,2 +1,3 @@
 export * from './interfaces';
-export { default as filter } from './utility/filter';
+export { default as FilterBar } from './components/FilterBar';
+export { default as filter } from './filter';

package/dist/filters/interfaces.d.ts

@@ -1,4 +1,4 @@
-import type { DropdownObject } from '../forms/interfaces';
+import type { DropdownObject } from '../forms/interfaces.js';
 export type FilterType = 'assistive' | 'boolean' | 'calendar' | 'column' | 'date' | 'dropdown' | 'money' | 'multi' | 'range' | 'search' | 'sort' | 'switch';
 export interface FilterConfig {
     align?: 'left' | 'right';
@@ -6,10 +6,10 @@ export interface FilterConfig {
     title?: string;
 }
 export interface FilterConfigWithBooleanData extends FilterConfig {
-    data?: [string, string];
+    options?: [string, string];
 }
 export interface FilterConfigWithData extends FilterConfig {
-    data?: DropdownObject[];
+    options?: DropdownObject[];
     url?: string;
 }
 export interface ClientFilterObject<F extends FilterType> {

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

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

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

@@ -7,7 +7,7 @@ function getNamesFromIDs(ids, data) {
     const set = new Set(ids);
     return data
         .filter((item) => set.has(item.value))
-        .map((item) => item.$data?.label || item.label);
+        .map((item) => item.$data?.label || String(item.label));
 }
 const LENGTH_OF_YEAR = 4;
 const PAD = 2;
@@ -36,14 +36,14 @@ function renderValue(value, config) {
      * 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 (config && 'options' in config) {
+        // Try the entire value first (not array). See if it's in the options, a return the name if so:
+        const [item] = getNamesFromIDs([value], config.options);
         if (item) {
             return item;
         }
         // Now try the split values:
-        const items = getNamesFromIDs(values, config.data);
+        const items = getNamesFromIDs(values, config.options);
         if (items.length) {
             return formatMulti(items);
         }

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

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { DropdownObject, InputProps } from '../../interfaces';
 import { DropdownClassNames, DropdownComponentProps } from '../Dropdown';
 export interface AutocompleteComponentProps<T> extends DropdownComponentProps<T> {
@@ -7,5 +7,5 @@ export interface AutocompleteComponentProps<T> extends DropdownComponentProps<T>
     selected?: DropdownObject<T> | null;
 }
 export type AutocompleteProps<T> = ClassNameProps<DropdownClassNames> & InputProps<T | null> & AutocompleteComponentProps<T>;
-declare function Autocomplete<T>({ hasError, isDisabled, isLoading, isOptional, name, onChange, onSearch, options, selected, placeholder, value, }: Readonly<AutocompleteProps<T>>): React.ReactElement;
+declare function Autocomplete<T>({ hasError, isDisabled, name, onChange, onSearch, options, selected, placeholder, value, }: Readonly<AutocompleteProps<T>>): React.ReactElement;
 export default Autocomplete;

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useRef, useState } from 'react';
-import Popover from '../../../components/utility/Popover';
-import useClickOutside from '../../../hooks/useClickOutside';
-import DropdownList from '../DropdownList';
+import Popover from '../../../components/utility/Popover/index.js';
+import useClickOutside from '../../../hooks/useClickOutside.js';
 import StaticTextInput from '../StaticTextInput';
 import TextInput from '../TextInput';
-function Autocomplete({ hasError, isDisabled, isLoading, isOptional, name, onChange, onSearch, options, selected, placeholder, value, }) {
+import AutocompleteList from '../AutocompleteList';
+function Autocomplete({ hasError, isDisabled, name, onChange, onSearch, options, selected, placeholder, value, }) {
     const inputRef = useRef(null);
     const [search, setSearch] = useState('');
     const [isOpen, setIsOpen, ref] = useClickOutside();
@@ -32,6 +32,6 @@ function Autocomplete({ hasError, isDisabled, isLoading, isOptional, name, onCha
             inputRef.current?.focus();
         }, 10);
     }
-    return (_jsx("div", { ref: ref, className: "relative", children: selected ? (_jsx(StaticTextInput, { details: selected.details, hasError: hasError, isDisabled: isDisabled, isOptional: isOptional, label: selected.label, name: name, onClick: handleReset, placeholder: placeholder || 'Select...', value: value ? String(value) : '' })) : (_jsxs(Fragment, { children: [_jsx(TextInput, { ref: inputRef, hasError: hasError, isDisabled: isDisabled, name: `${name}_search`, onChange: handleSearch, onFocus: () => setIsOpen(Boolean(options?.length)), placeholder: "Start typing...", value: search }), _jsx(Popover, { align: "center", isOpen: isOpen, isScrollable: true, children: options?.length ? (_jsx(DropdownList, { name: name, onChange: handleChange, options: options ?? [], value: value })) : isLoading ? (_jsx("div", { children: "Loading..." })) : (_jsx("div", { children: "No results" })) })] })) }));
+    return (_jsx("div", { ref: ref, className: "relative", children: selected ? (_jsx(StaticTextInput, { details: selected.details, hasError: hasError, isDisabled: isDisabled, isOptional: true, label: selected.label, name: name, onClear: handleReset, placeholder: placeholder || 'Select...', value: value ? String(value) : '' })) : (_jsxs(Fragment, { children: [_jsx(TextInput, { ref: inputRef, hasError: hasError, isDisabled: isDisabled, name: `${name}_search`, onChange: handleSearch, onFocus: () => setIsOpen(true), placeholder: "Start typing...", value: search }), _jsx(Popover, { align: "center", isOpen: isOpen && search.length >= 3, isScrollable: true, children: _jsx(AutocompleteList, { name: name, onChange: handleChange, options: options, search: search, value: value }) })] })) }));
 }
 export default Autocomplete;

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

@@ -0,0 +1,7 @@
+import type { DropdownObject, InputProps } from '../../interfaces';
+interface AutocompleteListProps<T> extends InputProps<T | null> {
+    options?: DropdownObject<T>[];
+    search: string;
+}
+declare function AutocompleteList<T>({ name, onChange, options, search, value, }: AutocompleteListProps<T>): React.ReactElement | null;
+export default AutocompleteList;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import DropdownList from '../DropdownList';
+function AutocompleteList({ name, onChange, options, search, value, }) {
+    if (!options?.length) {
+        return (_jsx(DropdownList, { name: name, options: [
+                {
+                    label: (_jsxs(Fragment, { children: ["No results found for ", _jsx("strong", { children: search })] })),
+                    value: null,
+                },
+            ] }));
+    }
+    return _jsx(DropdownList, { name: name, onChange: onChange, options: options, value: value });
+}
+export default AutocompleteList;

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

@@ -0,0 +1,11 @@
+import { InputProps } from '../../interfaces';
+export interface BaseCalendarInputComponentProps {
+    isOptional?: boolean;
+    isPanelOnly?: boolean;
+}
+interface BaseCalendarInputProps extends InputProps<Date | [Date, Date] | null>, BaseCalendarInputComponentProps {
+    children: React.ReactElement;
+    onClear?: () => void;
+}
+declare function BaseCalendarInput({ children, hasError, isDisabled, isOptional, isPanelOnly, name, onClear, value, }: BaseCalendarInputProps): React.ReactElement;
+export default BaseCalendarInput;

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

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Popover from '../../../components/utility/Popover/index.js';
+import usePopover from '../../../hooks/usePopover.js';
+import formatDateValue from '../../utility/format-date-value';
+import StaticTextInput from '../StaticTextInput';
+function BaseCalendarInput({ children, hasError, isDisabled, isOptional, isPanelOnly, name, onClear, value, }) {
+    const [oldValue, setOldValue] = useState(value);
+    const { controlProps, ref, targetProps } = usePopover();
+    if (isPanelOnly) {
+        return children;
+    }
+    useEffect(() => {
+        if ((value && !oldValue) || (value && oldValue)) {
+            controlProps.onClick();
+        }
+        setOldValue(value);
+    }, [value]);
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsx(StaticTextInput, { hasError: hasError, isDisabled: isDisabled, label: formatDateValue(value), name: name, isOptional: isOptional, onClear: onClear, onClick: controlProps.onClick, value: value?.toString() }), _jsx(Popover, { ...targetProps, align: "center", children: children })] }));
+}
+export default BaseCalendarInput;

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

@@ -0,0 +1,11 @@
+import { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces.js';
+export interface CSVInputClassNames {
+    root: string;
+    icon: HighlightableClassName;
+    title: string;
+    description: string;
+}
+export type CSVInputProps = ClassNameProps<CSVInputClassNames> & InputProps<string>;
+declare function CSVInput({ classNames, classNameProps, id, isDisabled, name, onChange, value, }: Readonly<CSVInputProps>): React.ReactElement;
+export default CSVInput;

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

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { formatPlural } from '@sqrzro/utility';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import formatFileSize from '../../utility/format-file-size';
+function CSVInput({ classNames, classNameProps, id, isDisabled, name, onChange, value, }) {
+    const UploadIcon = useIcon('csvInput.upload');
+    const SuccessIcon = useIcon('csvInput.success');
+    const [fileData, setFileData] = useState(null);
+    const componentClassNames = useClassNames('csvInput', { props: classNameProps, states: { isHighlighted: Boolean(fileData) } }, classNames);
+    function handleChange(event) {
+        const { files } = event.target;
+        const reader = new FileReader();
+        reader.addEventListener('load', () => {
+            const text = reader.result?.toString() || '';
+            const lines = text.split('\n').filter((item) => item.trim() !== '').length;
+            setFileData({
+                lines,
+                name: files?.[0].name || '',
+                size: files?.[0].size || 0,
+            });
+            onChange?.({ target: { name, value: text } });
+        }, false);
+        if (files?.[0]) {
+            reader.readAsText(files[0]);
+        }
+    }
+    return (_jsxs("div", { className: tw('relative flex items-center justify-center', componentClassNames?.root), children: [_jsx("input", { name: name, type: "hidden", value: value || '' }), _jsx("input", { accept: "text/csv", className: "absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "file" }), fileData ? (_jsxs("div", { className: tw('text-center', isDisabled ? 'pointer-events-none opacity-20' : null), children: [_jsx("i", { className: componentClassNames?.icon, children: SuccessIcon ? _jsx(SuccessIcon, {}) : null }), _jsx("p", { className: componentClassNames?.title, children: fileData.name }), _jsxs("p", { className: componentClassNames?.description, children: [formatFileSize(fileData.size), " \u2022", ' ', formatPlural('line', fileData.lines)] })] })) : (_jsxs("div", { className: "text-center", children: [_jsx("i", { className: componentClassNames?.icon, children: UploadIcon ? _jsx(UploadIcon, {}) : null }), _jsx("p", { className: componentClassNames?.title, children: "Click to Upload" }), _jsx("p", { className: componentClassNames?.description, children: "(or drag a CSV file over this box)" })] }))] }));
+}
+export default CSVInput;

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

@@ -0,0 +1,6 @@
+import { InputProps } from '../../interfaces';
+import { BaseCalendarInputComponentProps } from '../BaseCalendarInput';
+export type CalendarInputComponentProps = BaseCalendarInputComponentProps;
+export type CalendarInputProps = InputProps<Date | null> & CalendarInputComponentProps;
+declare function CalendarInput({ name, onChange, value, ...baseProps }: CalendarInputProps): React.ReactElement;
+export default CalendarInput;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Calendar from '../../../components/utility/Calendar/index.js';
+import BaseCalendarInput from '../BaseCalendarInput';
+function CalendarInput({ name, onChange, value, ...baseProps }) {
+    function handleChange(eventValue) {
+        onChange?.({ target: { name, value: eventValue } });
+    }
+    function handleClear() {
+        onChange?.({ target: { name, value: null } });
+    }
+    return (_jsx(BaseCalendarInput, { ...baseProps, name: name, onClear: handleClear, value: value, children: _jsx(Calendar, { onChange: handleChange, value: value }) }));
+}
+export default CalendarInput;

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

@@ -0,0 +1,12 @@
+import type { DropdownObject, InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
+export interface CheckboxInputClassNames {
+    root: ErrorableClassName;
+    item: ErrorableClassName;
+}
+export interface CheckboxInputComponentProps<T> {
+    options?: DropdownObject<T>[];
+}
+export type CheckboxInputProps<T> = ClassNameProps<CheckboxInputClassNames> & InputProps<T[]> & CheckboxInputComponentProps<T>;
+declare function CheckboxInput<T>({ classNames, classNameProps, hasError, name, onChange, options, value, }: CheckboxInputProps<T>): React.ReactElement;
+export default CheckboxInput;

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toggleArrayItem } from '@sqrzro/utility';
+import { useClassNames } from '../../../styles/context.js';
+import ChkRad from '../ChkRad';
+function CheckboxInput({ classNames, classNameProps, hasError, name, onChange, options = [], value, }) {
+    const componentClassNames = useClassNames('checkboxInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
+    function handleChange(id) {
+        return () => {
+            onChange?.({ target: { name, value: toggleArrayItem(value || [], id) } });
+        };
+    }
+    return (_jsx("ul", { className: componentClassNames?.root, role: "listbox", children: options.map((item) => (_jsx("li", { children: _jsx(ChkRad, { classNameProps: classNameProps, label: item.label, name: `${name}[]`, onChange: handleChange(item.value), value: value?.includes(item.value) ?? false }) }, String(item.value)))) }));
+}
+export default CheckboxInput;

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

@@ -0,0 +1,19 @@
+import { InputProps } from '../../interfaces.js';
+import { CheckableClassName, ClassNameProps } from '../../../styles/classnames/interfaces.js';
+export interface ChkRadClassNames {
+    details: string;
+    icon: CheckableClassName;
+    label: string;
+    root: string;
+}
+export interface ChkRadProps extends ClassNameProps<ChkRadClassNames>, InputProps<boolean> {
+    details?: React.ReactNode;
+    label: React.ReactNode;
+    type?: 'checkbox' | 'radio';
+}
+/**
+ * Either a checkbox or a radio button. The onChange event will return a string of the value of
+ * the checked item.
+ */
+declare function ChkRad({ classNames, classNameProps, details, id, isDisabled, isReadOnly, name, label, onChange, type, value, }: Readonly<ChkRadProps>): React.ReactElement;
+export default ChkRad;

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

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import Assistive from '../../../components/utility/Assistive/index.js';
+/**
+ * Either a checkbox or a radio button. The onChange event will return a string of the value of
+ * the checked item.
+ */
+function ChkRad({ classNames, classNameProps, details, id, isDisabled, isReadOnly, name, label, onChange, type = 'checkbox', value, }) {
+    const componentClassNames = useClassNames('chkrad', {
+        props: { ...classNameProps, isReadOnly: isReadOnly ?? false },
+        states: { isChecked: value ?? false },
+    }, classNames);
+    const CheckedIcon = useIcon('chkrad.checked');
+    const ref = useRef(null);
+    function handleChange(event) {
+        if (onChange) {
+            onChange({ target: { name, value: event.target.checked } });
+        }
+    }
+    return (_jsxs("label", { className: tw(componentClassNames?.root, isDisabled ? 'pointer-events-none opacity-30' : null), children: [_jsx(Assistive, { children: _jsx("input", { checked: Boolean(value), disabled: isDisabled, id: id || name, name: name, readOnly: isReadOnly, onChange: handleChange, type: type }) }), _jsx("span", { className: componentClassNames?.icon, children: CheckedIcon && value ? _jsx(CheckedIcon, {}) : null }), _jsxs("div", { ref: ref, className: tw(componentClassNames?.label), children: [label, details ? _jsx("div", { className: tw(componentClassNames?.details), children: details }) : null] })] }));
+}
+export default ChkRad;

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

@@ -0,0 +1,16 @@
+import { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
+export interface ColorInputClassNames {
+    root: ErrorableClassName;
+    input: string;
+    icon: string;
+    label: string;
+    placeholder: string;
+    clear: string;
+}
+export interface ColorInputComponentProps {
+    placeholder?: string;
+}
+export type ColorInputProps = ClassNameProps<ColorInputClassNames> & InputProps<string | undefined, string> & ColorInputComponentProps;
+declare function ColorInput({ classNames, classNameProps, hasError, name, onChange, placeholder, value, }: Readonly<ColorInputProps>): React.ReactElement;
+export default ColorInput;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Assistive from '../../../components/utility/Assistive/index.js';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+function ColorInput({ classNames, classNameProps, hasError, name, onChange, placeholder, value, }) {
+    const componentClassNames = useClassNames('colorInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
+    const ClearIcon = useIcon('colorInput.clear');
+    function handleClear() {
+        onChange?.({ target: { name, value: '' } });
+    }
+    return (_jsxs("div", { className: tw('relative', componentClassNames?.root), children: [_jsx("input", { className: tw('absolute inset-0 h-full w-full cursor-pointer opacity-0', componentClassNames?.input), name: name, onChange: onChange, type: "color", value: value || '' }), _jsx("i", { className: tw(componentClassNames?.icon), style: { backgroundColor: value || 'transparent' } }), value ? (_jsx("span", { className: tw(componentClassNames?.label), children: value.toUpperCase() })) : (_jsx("span", { className: tw(componentClassNames?.placeholder), children: placeholder || 'Select...' })), _jsx("span", { className: "absolute bottom-0 right-0 top-0 flex w-0 items-center justify-end", children: value ? (_jsxs("button", { className: tw('flex-none', componentClassNames?.clear), onClick: handleClear, type: "button", children: [ClearIcon ? _jsx(ClearIcon, {}) : null, _jsx(Assistive, { children: "Clear" })] })) : null })] }));
+}
+export default ColorInput;

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps, ErrorableClassName, FocusableClassName, SelectableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, ErrorableClassName, FocusableClassName, SelectableClassName } from '../../../styles/classnames/interfaces.js';
 import type { DropdownObject, InputProps } from '../../interfaces';
 export interface DropdownClassNames {
     root: ErrorableClassName & FocusableClassName;

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

@@ -1,23 +1,27 @@
 '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 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) {
     return options.find((item) => item.value === value);
 }
 export function renderLabel(options, value) {
-    return findByValue(options, value)?.label || '';
+    return String(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 });
+    const componentClassNames = useClassNames('dropdown', {
+        props: classNameProps,
+        states: { isError: hasError ?? false, isFocused: isOpen && !isDisabled },
+    }, classNames);
+    const Icon = useIcon('dropdown.control');
     function toggleIsOpen() {
         setIsOpen(!isOpen);
     }
@@ -33,9 +37,6 @@ function Dropdown({ classNames, classNameProps, hasError, isDisabled, isOptional
     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, 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 }) })] }));
+    return (_jsxs("div", { ref: node, className: tw('relative', componentClassNames?.root), children: [_jsx(StaticTextInput, { classNameProps: classNameProps, details: renderDetails(options, value), hasError: hasError, icon: Icon ? _jsx(Icon, {}) : null, isDisabled: isDisabled || !options?.length, 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, { classNameProps: classNameProps, classNames: classNames, name: name, onChange: handleChange, options: options, value: value }) })] }));
 }
 export default Dropdown;

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

@@ -0,0 +1,9 @@
+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;
+    onChange: (item: Pick<DropdownObject<T>, '$data' | 'value'>) => () => void;
+}
+declare function DropdownItem<T>({ $data, classNameProps, classNames, details, isDisabled, isSelected, label, onChange, value, }: DropdownItemProps<T>): React.ReactElement;
+export default DropdownItem;

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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] }) }));
+}
+export default DropdownItem;

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

@@ -1,5 +1,5 @@
-import type { DropdownObject, InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps } from '../../../styles/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,12 +1,10 @@
-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;
-}
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context.js';
+import DropdownItem from '../DropdownItem';
 function DropdownList({ classNames, classNameProps, name, onChange, options, value, }) {
-    const componentClassNames = classNames || getClassNames('dropdown')?.(classNameProps);
-    // const checkboxClassNames = getClassNames('checkboxInput')?.(classNameProps);
+    const componentClassNames = useClassNames('dropdown', { props: classNameProps }, classNames);
+    // const checkboxClassNames = useClassNames('checkboxInput')?.(classNameProps);
     function handleChange(item) {
         return () => {
             onChange?.({
@@ -15,8 +13,6 @@ function DropdownList({ classNames, classNameProps, name, onChange, options, val
             });
         };
     }
-    return (_jsx("ul", { className: componentClassNames?.list, role: "listbox", children: options.map((item, index) => (_jsx("li", { "aria-selected": isSelected(item.value, value), role: "option", children: _jsxs("button", { className: tw('relative w-full text-left', item.isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames?.item?.default, isSelected(item.value, value)
-                    ? componentClassNames?.item?.selected
-                    : null), 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))) }));
+    return (_jsx("ul", { className: componentClassNames?.list, role: "listbox", children: options.map((item, index) => (_jsx(DropdownItem, { ...item, classNameProps: classNameProps, classNames: classNames, isSelected: Boolean(value) && value === item.value, onChange: handleChange }, index))) }));
 }
 export default DropdownList;

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

@@ -1,24 +1,26 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
-import type { Action } 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 {
-    actions: string;
     root: string;
+    errors: string;
+    actions: string;
     header: string;
     title: string;
     description: string;
     content: string;
 }
 export interface EditableFormProps extends ClassNameProps<EditableFormClassNames> {
-    actions?: Action[] | false;
+    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 { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+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 = classNames || getClassNames('editableForm')?.(classNameProps);
+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 (_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 }] }) })] })] }) }));
+    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 }] }) })) : null] })] }));
 }
 export default EditableForm;

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

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