@homecode/ui 5.0.0 → 5.1.0

package/dist/esm/index.js

@@ -12,6 +12,7 @@ export { DatePickerInput } from './src/components/DatePickerInput/DatePickerInpu
 export { DateTime, formatDate } from './src/components/DateTime/DateTime.js';
 export { Dialogue } from './src/components/Dialogue/Dialogue.js';
 export { Draggable } from './src/components/Draggable/Draggable.js';
+export { DropZone } from './src/components/DropZone/DropZone.js';
 export { Expand } from './src/components/Expand/Expand.js';
 export { Flex } from './src/components/Flex/Flex.js';
 export { Form } from './src/components/Form/Form.js';
@@ -32,6 +33,8 @@ export { Portal } from './src/components/Portal/Portal.js';
 export { PopupMenu } from './src/components/PopupMenu/PopupMenu.js';
 export { Progress } from './src/components/Progress/Progress.js';
 export { ProgressCircular } from './src/components/ProgressCircular/ProgressCircular.js';
+export { RadioButton } from './src/components/RadioButton/RadioButton.js';
+export { RadioGroup } from './src/components/RadioGroup/RadioGroup.js';
 export { Router, RouterContext, RouterStore } from './src/components/Router/Router.js';
 export { RequiredStar } from './src/components/RequiredStar/RequiredStar.js';
 export { Select, SelectHelpers } from './src/components/Select/Select.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -36,6 +36,7 @@ import '../DatePickerInput/DatePickerInput.styl.js';
 import '../Dialogue/Dialogue.js';
 import '../../tools/queryParams.js';
 import '../Draggable/Draggable.styl.js';
+import '../DropZone/DropZone.styl.js';
 import '../Expand/Expand.styl.js';
 import '../Flex/Flex.styl.js';
 import '../Form/Form.styl.js';
@@ -55,6 +56,9 @@ import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
+import '../RadioGroup/RadioGroupContext.js';
+import '../RadioButton/RadioButton.styl.js';
+import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';

package/dist/esm/src/components/DropZone/DropZone.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { generateUID } from '../../tools/uid.js';
+import S from './DropZone.styl.js';
+
+function matchesAcceptPart(file, part) {
+    const p = part.trim().toLowerCase();
+    if (!p)
+        return false;
+    if (p.startsWith('.')) {
+        return file.name.toLowerCase().endsWith(p);
+    }
+    if (p.includes('/')) {
+        const t = file.type.toLowerCase();
+        if (p.endsWith('/*')) {
+            const prefix = p.slice(0, -1);
+            return t.startsWith(prefix);
+        }
+        return t === p;
+    }
+    return false;
+}
+function matchesAccept(file, accept) {
+    const trimmed = accept.trim();
+    if (!trimmed)
+        return true;
+    const parts = trimmed
+        .split(',')
+        .map(s => s.trim())
+        .filter(Boolean);
+    if (parts.length === 0)
+        return true;
+    return parts.some(part => matchesAcceptPart(file, part));
+}
+function DropZone(props) {
+    const { accept, label, error, disabled = false, ghost = false, id, className, } = props;
+    const [isDragging, setIsDragging] = useState(false);
+    const dropAreaRef = useRef(null);
+    const fallbackInputIdRef = useRef(generateUID());
+    const inputId = id ?? fallbackInputIdRef.current;
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        if (disabled)
+            return;
+        const list = Array.from(e.dataTransfer.files).filter(f => matchesAccept(f, accept));
+        if (props.multiple === true) {
+            if (list.length > 0) {
+                props.onFiles(list);
+            }
+        }
+        else {
+            const file = list[0];
+            if (file) {
+                props.onFile(file);
+            }
+        }
+    }, [accept, disabled, props]);
+    const handleFileInput = useCallback((e) => {
+        if (disabled)
+            return;
+        const raw = e.target.files;
+        if (!raw?.length)
+            return;
+        const list = Array.from(raw).filter(f => matchesAccept(f, accept));
+        if (props.multiple === true) {
+            if (list.length > 0) {
+                props.onFiles(list);
+            }
+        }
+        else {
+            const file = list[0];
+            if (file) {
+                props.onFile(file);
+            }
+        }
+        e.target.value = '';
+    }, [accept, disabled, props]);
+    useEffect(() => {
+        const dialog = dropAreaRef.current?.closest('[role="dialog"]');
+        const targetElement = dialog || document.body;
+        const handleGlobalDragOver = (e) => {
+            e.preventDefault();
+            setIsDragging(true);
+        };
+        const handleGlobalDragLeave = (e) => {
+            if (!e.relatedTarget ||
+                !targetElement.contains(e.relatedTarget)) {
+                setIsDragging(false);
+            }
+        };
+        const handleGlobalDrop = () => {
+            setIsDragging(false);
+        };
+        targetElement.addEventListener('dragover', handleGlobalDragOver);
+        targetElement.addEventListener('dragleave', handleGlobalDragLeave);
+        targetElement.addEventListener('drop', handleGlobalDrop);
+        return () => {
+            targetElement.removeEventListener('dragover', handleGlobalDragOver);
+            targetElement.removeEventListener('dragleave', handleGlobalDragLeave);
+            targetElement.removeEventListener('drop', handleGlobalDrop);
+        };
+    }, []);
+    const shouldShowDropArea = !ghost || isDragging;
+    const multiple = props.multiple === true;
+    return (jsxs("div", { className: cn(S.root, className), children: [shouldShowDropArea && (jsxs("div", { ref: dropAreaRef, className: cn(S.dropArea, isDragging && S.isDragging, disabled && S.disabled), onDrop: handleDrop, children: [jsx("input", { type: "file", accept: accept, multiple: multiple, onChange: handleFileInput, className: S.fileInput, id: inputId, disabled: disabled }), jsx("label", { htmlFor: inputId, className: S.label, style: {
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                        }, children: label })] })), error && jsx("div", { className: S.error, children: error })] }));
+}
+
+export { DropZone };

package/dist/esm/src/components/DropZone/DropZone.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".DropZone_root__gk-Ef{display:flex;flex-direction:column;gap:var(--p-2)}.DropZone_dropArea__u-8Ye{background-color:var(--accent-color-alpha-100);border:2px dashed var(--decent-color-alpha-200);border-radius:var(--p-4);cursor:pointer;padding:var(--p-4);position:relative;text-align:center;transition:all .2s ease}.DropZone_dropArea__u-8Ye label:before{border-radius:var(--p-4);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp,.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){border:2px dashed var(--active-color-alpha-500)}.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){background-color:var(--accent-color-alpha-50)}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:var(--decent-color-alpha-900)!important;display:flex;height:calc(100% - var(--p-2));justify-content:center;left:var(--p-1);position:fixed;top:var(--p-1);width:calc(100% - var(--p-2));z-index:9999}.DropZone_dropArea__u-8Ye.DropZone_disabled__qsAf6{cursor:not-allowed;opacity:.6}.DropZone_fileInput__E8DeE{display:none}.DropZone_label__u7-Pb{cursor:pointer}.DropZone_error__vSiwM{color:var(--danger-color);font-size:.875rem;padding:var(--p-1) var(--p-2)}";
+var S = {"root":"DropZone_root__gk-Ef","dropArea":"DropZone_dropArea__u-8Ye","disabled":"DropZone_disabled__qsAf6","isDragging":"DropZone_isDragging__S-aQp","fileInput":"DropZone_fileInput__E8DeE","label":"DropZone_label__u7-Pb","error":"DropZone_error__vSiwM"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/InputFile/InputFile.js

@@ -39,6 +39,7 @@ import 'moment';
 import '../DatePickerInput/DatePickerInput.styl.js';
 import '../Dialogue/Dialogue.js';
 import { Draggable } from '../Draggable/Draggable.js';
+import '../DropZone/DropZone.styl.js';
 import '../Expand/Expand.styl.js';
 import '../Flex/Flex.styl.js';
 import '../Form/Form.styl.js';
@@ -54,6 +55,9 @@ import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
+import '../RadioGroup/RadioGroupContext.js';
+import '../RadioButton/RadioButton.styl.js';
+import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';

package/dist/esm/src/components/RadioButton/RadioButton.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import 'react';
+import 'timen';
+import { useToggleState } from '../../hooks/useToggleState.js';
+import { useRadioGroup } from '../RadioGroup/RadioGroupContext.js';
+import S from './RadioButton.styl.js';
+
+const RadioButton = ({ className, label = '', size: sizeProp, variant: variantProp, error: errorProp, value, checked: checkedProp, disabled: disabledProp, name: nameProp, onChange, id, onFocus, onBlur, ...props }) => {
+    const group = useRadioGroup();
+    const size = sizeProp ?? group?.size ?? 'm';
+    const variant = variantProp ?? group?.variant ?? 'default';
+    const error = errorProp ?? group?.error;
+    const disabled = Boolean(disabledProp || group?.disabled);
+    const name = group ? group.name : nameProp;
+    const checked = group
+        ? group.value !== undefined && group.value === value
+        : Boolean(checkedProp);
+    const { id: componentId, isActive, isFocused, handlers, } = useToggleState({
+        id,
+        onFocus,
+        onBlur,
+    });
+    const handleChange = (e) => {
+        if (group)
+            group.onChange(value);
+        onChange?.(e);
+    };
+    const classes = cn(S.root, S[`size-${size}`], S[`variant-${variant}`], checked && S.checked, disabled && S.disabled, error && S.hasError, isActive && S.isActive, isFocused && S.isFocused, className);
+    return (jsxs("label", { className: classes, onPointerDown: handlers.onPointerDown, onPointerUp: handlers.onPointerUp, children: [jsxs("div", { className: S.controlWrapper, children: [jsx("input", { className: S.control, ...props, onChange: handleChange, onFocus: handlers.onFocus, onBlur: handlers.onBlur, id: componentId, type: "radio", name: name, value: String(value), checked: checked, disabled: disabled, tabIndex: 0 }), jsx("span", { className: S.dot, "aria-hidden": true })] }), label] }));
+};
+
+export { RadioButton };

package/dist/esm/src/components/RadioButton/RadioButton.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".RadioButton_root__-zReK{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.RadioButton_disabled__OuVm5{opacity:.4;pointer-events:none}.RadioButton_controlWrapper__xtZkJ{display:block;margin-right:1em;position:relative;transition:.2s ease-out;transition-property:opacity,box-shadow}.RadioButton_variant-default__r2D0X .RadioButton_controlWrapper__xtZkJ{background-color:var(--accent-color-alpha-100)}.RadioButton_variant-outlined__ZE2em .RadioButton_controlWrapper__xtZkJ{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.RadioButton_root__-zReK:hover .RadioButton_controlWrapper__xtZkJ{background-color:var(--active-color-alpha-100)}.RadioButton_isActive__hAdvm .RadioButton_controlWrapper__xtZkJ,.RadioButton_isFocused__pQaTx .RadioButton_controlWrapper__xtZkJ{box-shadow:inset 0 0 0 2px var(--active-color)!important}.RadioButton_hasError__SFhRz .RadioButton_controlWrapper__xtZkJ{box-shadow:inset 0 0 0 2px var(--danger-color)!important}.RadioButton_isActive__hAdvm .RadioButton_controlWrapper__xtZkJ{background-color:var(--active-color-alpha-100);opacity:.7}.RadioButton_control__RLcpz{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;transition:.1s ease-out;transition-property:background-color,color}.RadioButton_control__RLcpz:focus,.RadioButton_control__RLcpz:hover{background-color:var(--active-color-alpha-100)}.RadioButton_control__RLcpz[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.RadioButton_dot__m6MWL{background-color:var(--active-color);border-radius:50%;height:42%;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.4);transition:.1s ease-in;transition-property:transform,opacity;width:42%}.RadioButton_checked__X45GC .RadioButton_dot__m6MWL{opacity:1;transform:translate(-50%,-50%) scale(1.8)}.RadioButton_size-xs__gBuwV{font-size:14px}.RadioButton_size-xs__gBuwV .RadioButton_controlWrapper__xtZkJ{border-radius:4px;border-radius:12px;min-height:24px;min-width:24px}.RadioButton_size-s__2fKr7{font-size:16px}.RadioButton_size-s__2fKr7 .RadioButton_controlWrapper__xtZkJ{border-radius:4px;border-radius:16px;min-height:32px;min-width:32px}.RadioButton_size-m__cQ-gf{font-size:18px}.RadioButton_size-m__cQ-gf .RadioButton_controlWrapper__xtZkJ{border-radius:6px;border-radius:20px;min-height:40px;min-width:40px}.RadioButton_size-l__h3Alz{font-size:22px}.RadioButton_size-l__h3Alz .RadioButton_controlWrapper__xtZkJ{border-radius:8px;border-radius:24px;min-height:48px;min-width:48px}.RadioButton_size-xl__evU9a{font-size:26px}.RadioButton_size-xl__evU9a .RadioButton_controlWrapper__xtZkJ{border-radius:10px;border-radius:28px;min-height:56px;min-width:56px}";
+var S = {"root":"RadioButton_root__-zReK","disabled":"RadioButton_disabled__OuVm5","controlWrapper":"RadioButton_controlWrapper__xtZkJ","variant-default":"RadioButton_variant-default__r2D0X","variant-outlined":"RadioButton_variant-outlined__ZE2em","isActive":"RadioButton_isActive__hAdvm","isFocused":"RadioButton_isFocused__pQaTx","hasError":"RadioButton_hasError__SFhRz","control":"RadioButton_control__RLcpz","dot":"RadioButton_dot__m6MWL","checked":"RadioButton_checked__X45GC","size-xs":"RadioButton_size-xs__gBuwV","size-s":"RadioButton_size-s__2fKr7","size-m":"RadioButton_size-m__cQ-gf","size-l":"RadioButton_size-l__h3Alz","size-xl":"RadioButton_size-xl__evU9a"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useState, useCallback, useMemo } from 'react';
+import cn from 'classnames';
+import { RadioGroupContext } from './RadioGroupContext.js';
+import S from './RadioGroup.styl.js';
+
+const RadioGroup = ({ className, children, label, value, defaultValue, onChange, name: nameProp, size = 'm', variant = 'default', error, disabled, orientation = 'vertical', ...rest }) => {
+    const reactId = useId();
+    const name = nameProp ?? `radio${reactId.replace(/:/g, '')}`;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const selectedValue = isControlled ? value : uncontrolled;
+    const setValue = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    const contextValue = useMemo(() => ({
+        name,
+        value: selectedValue,
+        onChange: setValue,
+        size,
+        variant,
+        error,
+        disabled,
+    }), [name, selectedValue, setValue, size, variant, error, disabled]);
+    const inner = (jsx("div", { className: cn(S.inner, orientation === 'horizontal' && S.horizontal), children: jsx(RadioGroupContext.Provider, { value: contextValue, children: children }) }));
+    return (jsxs("fieldset", { className: cn(S.root, className), disabled: disabled, ...rest, children: [label != null && label !== '' && (jsx("legend", { className: S.legend, children: label })), inner] }));
+};
+
+export { RadioGroup };

package/dist/esm/src/components/RadioGroup/RadioGroup.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".RadioGroup_root__f0yTC{border:none;margin:0;min-width:0;padding:0}.RadioGroup_legend__Fq1Yg{margin:0 0 .5em;padding:0}.RadioGroup_inner__GZ2--{align-items:flex-start;display:flex;flex-direction:column;gap:.5em}.RadioGroup_inner__GZ2--.RadioGroup_horizontal__72oyb{align-items:center;flex-direction:row;flex-wrap:wrap}";
+var S = {"root":"RadioGroup_root__f0yTC","legend":"RadioGroup_legend__Fq1Yg","inner":"RadioGroup_inner__GZ2--","horizontal":"RadioGroup_horizontal__72oyb"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/RadioGroup/RadioGroupContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+const RadioGroupContext = createContext(null);
+function useRadioGroup() {
+    return useContext(RadioGroupContext);
+}
+
+export { RadioGroupContext, useRadioGroup };

package/dist/esm/types/src/components/DropZone/DropZone.d.ts

@@ -0,0 +1,3 @@
+import type * as T from './DropZone.types';
+export type DropZoneProps = T.Props;
+export declare function DropZone(props: T.Props): JSX.Element;

package/dist/esm/types/src/components/DropZone/DropZone.types.d.ts

@@ -0,0 +1,18 @@
+export interface DropZoneBaseProps {
+    accept: string;
+    label: string;
+    error?: string | null;
+    disabled?: boolean;
+    ghost?: boolean;
+    id?: string;
+    className?: string;
+}
+export interface DropZoneSingleProps extends DropZoneBaseProps {
+    multiple?: false;
+    onFile: (file: File) => void;
+}
+export interface DropZoneMultiProps extends DropZoneBaseProps {
+    multiple: true;
+    onFiles: (files: File[]) => void;
+}
+export type Props = DropZoneSingleProps | DropZoneMultiProps;

package/dist/esm/types/src/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import * as T from './RadioButton.types';
+export declare const RadioButton: FC<T.Props>;

package/dist/esm/types/src/components/RadioButton/RadioButton.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, InputHTMLAttributes } from 'react';
+import { Size, ComponentType } from '../../types';
+export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value'> & ComponentType & {
+    label?: ReactNode;
+    /** Option value; compared to the group’s `value` when inside `RadioGroup` */
+    value: string | number;
+    checked?: boolean;
+    disabled?: boolean;
+    error?: string | boolean;
+    size?: Size;
+    variant?: 'default' | 'outlined';
+};

package/dist/esm/types/src/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import type { Props } from './RadioGroup.types';
+export declare const RadioGroup: FC<Props>;

package/dist/esm/types/src/components/RadioGroup/RadioGroup.types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { Size, ComponentType } from '../../types';
+export type RadioGroupContextValue = {
+    name: string;
+    value: string | number | undefined;
+    onChange: (value: string | number) => void;
+    size: Size;
+    variant: 'default' | 'outlined';
+    error?: string | boolean;
+    disabled?: boolean;
+};
+export type Props = Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange'> & ComponentType & {
+    children: ReactNode;
+    /** Current value when controlled */
+    value?: string | number;
+    /** Initial value when uncontrolled */
+    defaultValue?: string | number;
+    /** Called when the selected option changes */
+    onChange?: (value: string | number) => void;
+    /** Shared `name` for native radio inputs; generated if omitted */
+    name?: string;
+    /** Group heading; renders as `legend` */
+    label?: ReactNode;
+    /** Size passed to `RadioButton` children via context */
+    size?: Size;
+    variant?: 'default' | 'outlined';
+    error?: string | boolean;
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+};

package/dist/esm/types/src/components/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupContextValue } from './RadioGroup.types';
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue>;
+export declare function useRadioGroup(): RadioGroupContextValue | null;

package/dist/esm/types/src/components/Scroll/Scroll.d.ts

@@ -13,7 +13,7 @@ export declare const Scroll: import("react").ForwardRefExoticComponent<import(".
     x?: boolean;
     y?: boolean;
     size?: import("../../types").Size;
-    fadeSize?: import("../../types").Size | "xl";
+    fadeSize?: import("../../types").Size;
     smooth?: boolean;
     autoHide?: boolean;
     offset?: {

package/dist/esm/types/src/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './DatePickerInput/DatePickerInput';
 export * from './DateTime/DateTime';
 export * from './Dialogue';
 export * from './Draggable/Draggable';
+export * from './DropZone/DropZone';
 export * from './Expand/Expand';
 export * from './Flex/Flex';
 export * from './Form/Form';
@@ -32,6 +33,8 @@ export * from './Portal/Portal';
 export * from './PopupMenu/PopupMenu';
 export * from './Progress/Progress';
 export * from './ProgressCircular/ProgressCircular';
+export * from './RadioButton/RadioButton';
+export * from './RadioGroup/RadioGroup';
 export * from './Router/Router';
 export * from './RequiredStar/RequiredStar';
 export * from './Select/Select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",