@sqrzro/ui 4.0.0-alpha.59 → 4.0.0-alpha.60

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

@@ -0,0 +1,16 @@
+import { InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+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,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Assistive from '../../../components/utility/Assistive';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+function ColorInput({ classNames, classNameProps, hasError, name, onChange, placeholder, value, }) {
+    const componentClassNames = useClassNames('colorInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
+    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 ? (_jsx("button", { className: tw('flex-none', componentClassNames?.clear), onClick: handleClear, type: "button", children: _jsx(Assistive, { children: "Clear" }) })) : null })] }));
+}
+export default ColorInput;

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

@@ -1,7 +1,10 @@
 import type { EditableFormFieldComponentProps } from '../../interfaces';
+import type { ColorInputComponentProps } from '../ColorInput';
 import type { DropdownComponentProps } from '../Dropdown';
 import type { TextAreaComponentProps } from '../TextArea';
 import type { TextInputComponentProps } from '../TextInput';
+export type EditableColorFormFieldProps = EditableFormFieldComponentProps<string | undefined> & ColorInputComponentProps;
+export declare function EditableColorFormField(props: Readonly<EditableColorFormFieldProps>): React.ReactElement;
 export type EditableDropdownFormFieldProps<T> = EditableFormFieldComponentProps<T | null> & DropdownComponentProps<T>;
 export declare function EditableDropdownFormField<T>(props: Readonly<EditableDropdownFormFieldProps<T>>): React.ReactElement;
 export type EditableTextAreaFormFieldProps = EditableFormFieldComponentProps<string> & TextAreaComponentProps;

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

@@ -1,10 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import extractEditableInputProps from '../../utility/extract-editable-input-props';
+import ColorInput from '../ColorInput';
 import Dropdown from '../Dropdown';
 import EditableFormField from '../EditableFormField';
 import TextArea from '../TextArea';
 import TextInput from '../TextInput';
+export function EditableColorFormField(props) {
+    const classNames = useClassNames('colorInput');
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(ColorInput, { ...renderProps, ...inputProps })), [inputProps]);
+    const renderValue = useCallback((value) => {
+        if (!value) {
+            return '-';
+        }
+        return (_jsxs("div", { className: "relative flex items-center gap-2", children: [_jsx("span", { className: tw(classNames?.icon), style: { backgroundColor: value || 'transparent' } }), _jsx("span", { className: tw(classNames?.label), children: value.toUpperCase() })] }));
+    }, [fieldProps.value]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
+}
 export function EditableDropdownFormField(props) {
     const { fieldProps, inputProps } = extractEditableInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(Dropdown, { ...renderProps, ...inputProps })), [inputProps]);

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

@@ -1,5 +1,6 @@
 import type { FormFieldComponentProps } from '../../interfaces';
 import type { AutocompleteComponentProps } from '../Autocomplete';
+import type { ColorInputComponentProps } from '../ColorInput';
 import type { CalendarInputComponentProps } from '../CalendarInput';
 import type { DropdownComponentProps } from '../Dropdown';
 import type { PointsInputComponentProps } from '../PointsInput';
@@ -13,6 +14,8 @@ export type AutocompleteFormFieldProps<T> = FormFieldComponentProps<T | null> &
 export declare function AutocompleteFormField<T>(props: Readonly<AutocompleteFormFieldProps<T>>): React.ReactElement;
 export type CalendarFormFieldProps = FormFieldComponentProps<Date | null> & CalendarInputComponentProps;
 export declare function CalendarFormField(props: Readonly<CalendarFormFieldProps>): React.ReactElement;
+export type ColorFormFieldProps = FormFieldComponentProps<string> & ColorInputComponentProps;
+export declare function ColorFormField(props: Readonly<ColorFormFieldProps>): React.ReactElement;
 export type CSVFormFieldProps = FormFieldComponentProps<string>;
 export declare function CSVFormField(props: Readonly<CSVFormFieldProps>): React.ReactElement;
 export type DropdownFormFieldProps<T> = FormFieldComponentProps<T | null> & DropdownComponentProps<T>;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import extractInputProps from '../../utility/extract-input-props';
 import Autocomplete from '../Autocomplete';
+import ColorInput from '../ColorInput';
 import CSVInput from '../CSVInput';
 import CalendarInput from '../CalendarInput';
 import Dropdown from '../Dropdown';
@@ -23,6 +24,11 @@ export function CalendarFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(CalendarInput, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function ColorFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(ColorInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function CSVFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(CSVInput, { ...renderProps, ...inputProps })), [inputProps]);

package/dist/styles/classnames/config.d.ts

@@ -27,6 +27,7 @@ import type { FilterClearButtonClassNames } from '../../filters/components/Filte
 import type { FilterItemClassNames } from '../../filters/components/FilterItem';
 import type { FilterPanelClassNames } from '../../filters/components/FilterPanel';
 import type { SearchFilterClassNames } from '../../filters/filters/SearchFilter';
+import type { ColorInputClassNames } from '../../forms/components/ColorInput';
 import type { CSVInputClassNames } from '../../forms/components/CSVInput';
 import type { DropdownClassNames } from '../../forms/components/Dropdown';
 import type { EditableFormClassNames } from '../../forms/components/EditableForm';
@@ -49,6 +50,7 @@ export interface UIClassNames {
     badge?: ComponentClassNames<BadgeClassNames>;
     button?: ComponentClassNames<ButtonClassNames>;
     calendar?: ComponentClassNames<CalendarClassNames>;
+    colorInput?: ComponentClassNames<ColorInputClassNames>;
     container?: ComponentClassNames<ContainerClassNames>;
     csvInput?: ComponentClassNames<CSVInputClassNames>;
     dataTable?: ComponentClassNames<DataTableClassNames>;

package/package.json

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