@tempots/ui 0.1.0 → 0.3.1

package/package.json

@@ -1,46 +1,23 @@
 {
   "name": "@tempots/ui",
-  "version": "0.1.0",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "scripts": {
-    "watch": "tsc --watch",
-    "build": "tsc",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "coverage": "jest --coverage",
-    "npm:prep": "yarn build && cp README.md package.json dist",
-    "npm:publish": "yarn npm:prep && (cd dist && yarn publish --access public)"
-  },
-  "dependencies": {
-    "@emotion/css": "^11.10.6",
-    "@floating-ui/dom": "^1.2.6",
-    "@tempots/dom": "^5.0.2",
-    "@tempots/std": "^0.9.7"
-  },
-  "devDependencies": {
-    "@happy-dom/jest-environment": "^9.1.7",
-    "@types/jest": "^29.5.0",
-    "@types/node": "^18.15.11",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "eslint": "^8.0.1",
-    "eslint-config-standard-with-typescript": "^34.0.1",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "happy-dom": "^9.1.0",
-    "jest": "^29.5.0",
-    "ts-jest": "^29.1.0",
-    "typescript": "^5.0.3"
+  "version": "0.3.1",
+  "type": "module",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
   },
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/fponticelli/tempots-ui.git"
+    "url": "git+https://github.com/fponticelli/tempots.git"
   },
-  "author": "Franco Ponticelli",
-  "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/fponticelli/tempots-ui/issues"
+    "url": "https://github.com/fponticelli/tempots/issues"
   },
-  "homepage": "https://github.com/fponticelli/tempots-ui#readme"
-}
+  "homepage": "https://github.com/fponticelli/tempots#readme"
+}

package/components/Box/Box.d.ts

@@ -1,8 +0,0 @@
-import { type JSX } from '@tempots/dom';
-import { type SizingProps } from '../styling/Sizing';
-import { type SpacingProps } from '../styling/Spacing';
-import { type SxProps } from '../styling/Sx';
-export interface BoxProps extends SxProps, SpacingProps, SizingProps {
-    children?: JSX.DOMNode;
-}
-export declare const Box: (props: BoxProps) => JSX.DOMNode;

package/components/Box/Box.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Sizing } from '../styling/Sizing';
-import { Spacing } from '../styling/Spacing';
-import { Sx } from '../styling/Sx';
-export const Box = (props) => {
-    const { children, sx, ...rest } = props;
-    return (_jsxs("div", { children: [_jsx(Sx, { sx: sx }), _jsx(Spacing, { ...rest }), _jsx(Sizing, { ...rest }), children] }));
-};

package/components/Button/Button.d.ts

@@ -1,12 +0,0 @@
-import { type JSX, Signal } from '@tempots/dom';
-import { type Size } from '../../styles/size';
-import { type ButtonVariant } from '../StyleProvider/StyleProvider';
-export interface ButtonProps {
-    children?: JSX.DOMNode;
-    disabled?: Signal<boolean>;
-    onClick?: () => void;
-    size?: Signal<Size>;
-    variant?: Signal<ButtonVariant>;
-    compact?: Signal<boolean>;
-}
-export declare function Button({ children, size, disabled, onClick, variant, compact }: ButtonProps): JSX.DOMNode;

package/components/Button/Button.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal, ClassName } from '@tempots/dom';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
-export function Button({ children, size, disabled, onClick, variant, compact }) {
-    return (_jsx(Consumer, { mark: StyleMarker, children: (theme) => {
-            const cls = Signal.combine([
-                theme.styles,
-                size ?? Signal.of('md'),
-                variant ?? Signal.of('primary'),
-                compact ?? Signal.of(false)
-            ], ({ components: { button: { root, content } } }, size, variant, compact) => {
-                return [
-                    root({ size, variant, compact }),
-                    content({ size, variant, compact })
-                ];
-            });
-            return _jsxs("button", { disabled: disabled, type: "button", onClick: onClick, children: [_jsx(ClassName, { value: cls.at(0) }), _jsxs("span", { children: [_jsx(ClassName, { value: cls.at(1) }), children] })] });
-        } }));
-}

package/components/Control/Control.d.ts

@@ -1,8 +0,0 @@
-import { type JSX, Signal } from '@tempots/dom';
-import { type Size } from '../../styles/size';
-export interface ControlProps {
-    size?: Signal<Size>;
-    spacing?: Signal<Size>;
-    children?: JSX.DOMNode;
-}
-export declare const Control: (props: ControlProps) => JSX.DOMNode;

package/components/Control/Control.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal } from '@tempots/dom';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
-export const Control = (props) => {
-    const { children, size, spacing } = props;
-    return (_jsx(Consumer, { mark: StyleMarker, children: ({ styles }) => {
-            const cls = Signal.combine([
-                styles,
-                size ?? Signal.of('md'),
-                spacing ?? Signal.of('md')
-            ], (styles, size, spacing) => {
-                return styles.components.control.root({ size, spacing });
-            });
-            return (_jsx("div", { className: cls, children: children }));
-        } }));
-};

package/components/Field/Field.d.ts

@@ -1,11 +0,0 @@
-import { type JSX, Signal } from '@tempots/dom';
-import { type FieldLayout } from './field-layout';
-export interface FieldProps {
-    children?: JSX.DOMNode;
-    description?: JSX.DOMNode;
-    error?: JSX.DOMNode;
-    label?: JSX.DOMNode;
-    layout?: Signal<FieldLayout>;
-    required?: Signal<boolean>;
-}
-export declare const Field: ({ children, ...props }: FieldProps) => JSX.DOMNode;

package/components/Field/Field.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Consumer, HiddenWhenEmpty, Signal, When } from '@tempots/dom';
-import { Box } from '../Box/Box';
-import { FieldsetMark } from '../Fieldset/fieldset-context';
-const layoutToFlexDirection = (layout) => {
-    // TODO: any
-    switch (layout) {
-        case 'horizontal':
-            return 'row';
-        case 'vertical':
-            return 'column';
-    }
-};
-export const Field = ({ children, ...props }) => {
-    return (_jsx(Consumer, { mark: FieldsetMark, children: ({ layout: fsLayout }) => {
-            const required = props.required ?? Signal.of(false);
-            const layout = props.layout ?? fsLayout;
-            const error = props.error;
-            const label = Signal.of(props.label);
-            const description = props.description;
-            const isHorizontal = layout.map(v => v === 'horizontal');
-            return (
-            // TODO force vertical layout if there is not enough space
-            _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: layout.map(layoutToFlexDirection)
-                }, children: [_jsxs(Box, { width: isHorizontal.map(v => v ? 200 : undefined), children: [_jsxs(Box
-                            // sx={{
-                            //   minHeight: isHorizontal.map(v => (v ? ('36px' as any) : undefined)) // TODO
-                            // }}
-                            , { children: [label, _jsx(When, { is: required, children: _jsx("span", { children: " *" }) })] }), _jsxs(Box, { sx: {
-                                    fontSize: '0.8em' // TODO
-                                }, children: [_jsx(HiddenWhenEmpty, {}), description] })] }), _jsxs(Box, { sx: {
-                            flex: isHorizontal.map(v => (v ? '1 1 auto' : undefined))
-                        }, children: [_jsx(Box, { children: children }), _jsxs(Box, { children: [_jsx(HiddenWhenEmpty, {}), error] })] })] }));
-        } }));
-};

package/components/Field/field-layout.d.ts

@@ -1 +0,0 @@
-export type FieldLayout = 'horizontal' | 'vertical';

package/components/Field/field-layout.js

@@ -1 +0,0 @@
-export {};

package/components/Fieldset/Fieldset.d.ts

@@ -1,8 +0,0 @@
-import { type JSX, Signal } from '@tempots/dom';
-import { type FieldLayout } from '../Field/field-layout';
-export interface FieldsetProps {
-    children?: JSX.DOMNode;
-    layout?: FieldLayout | Signal<FieldLayout>;
-    title?: JSX.DOMNode;
-}
-export declare const Fieldset: ({ children, layout, title }: FieldsetProps) => JSX.DOMNode;

package/components/Fieldset/Fieldset.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Signal, Provider } from '@tempots/dom';
-import { Sx } from '../styling/Sx';
-import { FIELDSET_DEFAULT_LAYOUT, FieldsetMark } from './fieldset-context';
-export const Fieldset = ({ children, layout, title }) => {
-    const payload = { layout: layout == null ? Signal.of(FIELDSET_DEFAULT_LAYOUT) : Signal.wrap(layout) };
-    return (_jsxs("fieldset", { children: [_jsx(Sx, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 10 // TODO
-                } }), title && _jsx("legend", { children: title }), _jsx(Provider, { mark: FieldsetMark, value: payload, children: children })] }));
-};

package/components/Fieldset/fieldset-context.d.ts

@@ -1,7 +0,0 @@
-import { type Signal } from '@tempots/dom';
-import { type FieldLayout } from '../Field/field-layout';
-export declare const FIELDSET_DEFAULT_LAYOUT: FieldLayout;
-export interface FieldsetProvider {
-    layout: Signal<FieldLayout>;
-}
-export declare const FieldsetMark: symbol;

package/components/Fieldset/fieldset-context.js

@@ -1,3 +0,0 @@
-import { makeProviderMark } from '@tempots/dom/types/idom-context';
-export const FIELDSET_DEFAULT_LAYOUT = 'horizontal';
-export const FieldsetMark = makeProviderMark();

package/components/Group/Group.d.ts

@@ -1,13 +0,0 @@
-import { type JSX, Signal } from '@tempots/dom';
-import { type Size } from '../../styles/size';
-import { type AlignItems } from '../Stack/Stack';
-export type Position = 'left' | 'right' | 'center' | 'apart';
-export interface GroupProps {
-    align?: Signal<AlignItems>;
-    grow?: Signal<boolean>;
-    noWrap?: Signal<boolean>;
-    position?: Signal<Position>;
-    spacing?: Signal<number> | Signal<Size>;
-    children?: JSX.DOMNode;
-}
-export declare const Group: (props: GroupProps) => JSX.DOMNode;

package/components/Group/Group.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal } from '@tempots/dom';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
-import { Sx } from '../styling/Sx';
-export const Group = (props) => {
-    const { children, align, grow, noWrap, position, spacing } = props;
-    return (_jsx(Consumer, { mark: StyleMarker, children: ({ styles }) => {
-            return (_jsxs("div", { children: [_jsx(Sx, { sx: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: align,
-                            flexWrap: (noWrap ?? Signal.of(false)).map(v => v ? 'nowrap' : 'wrap'),
-                            justifyContent: position?.map(v => {
-                                switch (v) {
-                                    case 'left': return 'flex-start';
-                                    case 'right': return 'flex-end';
-                                    case 'center': return 'center';
-                                    case 'apart': return 'space-between';
-                                    default: return 'flex-start';
-                                }
-                            }),
-                            flexGrow: grow?.map(v => v ? 1 : 0),
-                            gap: (spacing ?? Signal.of('md')).combine(styles, (sp, st) => {
-                                return (typeof sp === 'number' ? sp : st.styles.spacing[sp]);
-                            })
-                        } }), _jsx(_Fragment, { children: children })] }));
-        } }));
-};

package/components/Input/BaseInput.d.ts

@@ -1,10 +0,0 @@
-import { type JSX, type Signal } from '@tempots/dom';
-export interface BaseInputProps {
-    max?: Signal<number>;
-    min?: Signal<number>;
-    type: string;
-    value: Signal<string>;
-    step?: Signal<number>;
-    onChange: (value: string) => void;
-}
-export declare const BaseInput: ({ max, min, value, onChange, step, type }: BaseInputProps) => JSX.DOMNode;

package/components/Input/BaseInput.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { Sx } from '../styling/Sx';
-export const BaseInput = ({ max, min, value, onChange, step, type }) => {
-    return (_jsx("input", { min: min, max: max, type: type, value: value, step: step, onInput: e => {
-            const target = e.target;
-            onChange(target.value);
-        }, children: _jsx(Sx, { sx: {
-                width: '100%',
-                backgroundColor: 'transparent',
-                flexGrow: '1 1 auto',
-                textAlign: type === 'number' ? 'right' : undefined,
-                padding: '0 8px',
-                ':focus': {
-                    outline: 'none'
-                }
-            } }) }));
-};

package/components/Input/FloatInput.d.ts

@@ -1,10 +0,0 @@
-import { type JSX, type Signal } from '@tempots/dom';
-export interface FloatInputProps {
-    min?: Signal<number>;
-    max?: Signal<number>;
-    step?: Signal<number>;
-    value: Signal<number>;
-    onChange: (value: number) => void;
-}
-export declare const FloatInput: ({ min, max, value, onChange, step }: FloatInputProps) => JSX.DOMNode;
-export declare const BaseFloatInput: ({ min, max, value, onChange, step }: FloatInputProps) => JSX.DOMNode;

package/components/Input/FloatInput.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { Control } from '../Control/Control';
-import { BaseInput } from './BaseInput';
-export const FloatInput = ({ min, max, value, onChange, step }) => {
-    return (_jsx(Control, { children: _jsx(BaseFloatInput, { min: min, max: max, value: value, onChange: onChange, step: step }) }));
-};
-export const BaseFloatInput = ({ min, max, value, onChange, step }) => {
-    return (_jsx(BaseInput, { min: min, max: max, type: "number", step: step, value: value.map(String), onChange: value => {
-            const newValue = parseFloat(value);
-            if (!isNaN(newValue)) {
-                onChange(newValue);
-            }
-        } }));
-};

package/components/Input/IntInput.d.ts

@@ -1,9 +0,0 @@
-import { type JSX, Signal } from '@tempots/dom';
-export interface IntInputProps {
-    max?: Signal<number>;
-    min?: Signal<number>;
-    value: Signal<number>;
-    onChange: (value: number) => void;
-}
-export declare const IntInput: ({ value, onChange, max, min }: IntInputProps) => JSX.DOMNode;
-export declare const BaseIntInput: ({ value, onChange, max, min }: IntInputProps) => JSX.DOMNode;

package/components/Input/IntInput.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { Signal } from '@tempots/dom';
-import { Control } from '../Control/Control';
-import { BaseInput } from './BaseInput';
-export const IntInput = ({ value, onChange, max, min }) => {
-    return (_jsx(Control, { children: _jsx(BaseIntInput, { value: value, onChange: onChange, max: max, min: min }) }));
-};
-export const BaseIntInput = ({ value, onChange, max, min }) => {
-    const minSignal = (min ?? Signal.of(null));
-    const maxSignal = (max ?? Signal.of(null));
-    return (_jsx(BaseInput, { type: "number", min: min, max: max, step: Signal.of(1), value: Signal.combine([value, minSignal, maxSignal], (v, mi, ma) => {
-            if (mi !== null && v < mi) {
-                return mi;
-            }
-            if (ma !== null && v > ma) {
-                return ma;
-            }
-            return v;
-        }).map(String), onChange: (value) => {
-            const newValue = Math.round(Number(value));
-            if (isFinite(newValue)) {
-                onChange(Math.round(newValue));
-            }
-        } }));
-};

package/components/Input/NativeSelect.d.ts

@@ -1,11 +0,0 @@
-import { type JSX, type Signal } from '@tempots/dom';
-export interface NativeSelectProps<T> {
-    value: Signal<T>;
-    options: Signal<T[]>;
-    onChange?: (value: T) => void;
-    display?: (value: T) => string;
-    equality?: (a: T, b: T) => boolean;
-    disabled?: (value: T) => boolean;
-}
-export declare function NativeSelect<T>({ value, onChange, options, display, equality, disabled }: NativeSelectProps<T>): JSX.DOMNode;
-export declare function BaseNativeSelect<T>(props: NativeSelectProps<T>): JSX.DOMNode;

package/components/Input/NativeSelect.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { For } from '@tempots/dom';
-import { strictEqual } from '@tempots/std/equals';
-import { Control } from '../Control/Control';
-import { Spacing } from '../styling/Spacing';
-import { Sx } from '../styling/Sx';
-export function NativeSelect({ value, onChange, options, display, equality, disabled }) {
-    return (_jsx(Control, { children: _jsx(BaseNativeSelect, { value: value, onChange: onChange, options: options, display: display, equality: equality, disabled: disabled }) }));
-}
-export function BaseNativeSelect(props) {
-    const options = props.options;
-    const equality = props.equality ?? strictEqual;
-    const display = props.display ?? String;
-    const disabled = props.disabled ?? (() => false);
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const onChange = props.onChange ?? (() => { });
-    return (_jsxs("select", { onChange: e => {
-            const target = e.target;
-            const index = Number(target.value);
-            onChange(options.get()[index]);
-        }, children: [_jsx(Sx, { sx: {
-                    ':focus': {
-                        outline: 'none',
-                        background: 'rgba(10%, 10%, 100%, 0.2)' // TODO
-                    }
-                } }), _jsx(Spacing, { ph: 8 }), _jsx(For, { of: options, children: (option, index) => (_jsx("option", { disabled: option.map(disabled), selected: option.combine(props.value, equality), value: String(index), children: option.map(display) })) })] }));
-}

package/components/Input/TextInput.d.ts

@@ -1,7 +0,0 @@
-import { type JSX, type Signal } from '@tempots/dom';
-export interface TextInputProps {
-    value: Signal<string>;
-    onChange: (value: string) => void;
-}
-export declare const TextInput: ({ value, onChange }: TextInputProps) => JSX.DOMNode;
-export declare const BaseTextInput: ({ value, onChange }: TextInputProps) => JSX.DOMNode;

package/components/Input/TextInput.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { Control } from '../Control/Control';
-import { BaseInput } from './BaseInput';
-export const TextInput = ({ value, onChange }) => {
-    return (_jsx(Control, { children: _jsx(BaseTextInput, { value: value, onChange: onChange }) }));
-};
-export const BaseTextInput = ({ value, onChange }) => {
-    return _jsx(BaseInput, { type: "text", value: value, onChange: onChange });
-};

package/components/Input/UnitInput.d.ts

@@ -1,10 +0,0 @@
-import { type JSX, type Signal } from '@tempots/dom';
-export interface UnitInputProps<T> {
-    step?: Signal<number>;
-    value: Signal<number>;
-    unit: Signal<T>;
-    units: Signal<T[]>;
-    onChange: (value: number, unit: T) => void;
-    convert?: (from: T, to: T, value: number) => number;
-}
-export declare function UnitInput<T>({ value, onChange, step, unit, units, ...props }: UnitInputProps<T>): JSX.DOMNode;

package/components/Input/UnitInput.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Control } from '../Control/Control';
-import { BaseFloatInput } from './FloatInput';
-import { BaseNativeSelect } from './NativeSelect';
-export function UnitInput({ value, onChange, step, unit, units, ...props }) {
-    const convert = props.convert ?? ((from, to, value) => value);
-    const onChangeValue = (value) => {
-        onChange(value, unit.get());
-    };
-    const onChangeUnit = (newUnit) => {
-        onChange(convert(unit.get(), newUnit, value.get()), newUnit);
-    };
-    return (_jsxs(Control, { children: [_jsx(BaseFloatInput, { value: value, onChange: onChangeValue, step: step }), _jsx(BaseNativeSelect, { value: unit, onChange: onChangeUnit, options: units })] }));
-}

package/components/Popover/Popover.d.ts

@@ -1,9 +0,0 @@
-import { type JSX, Signal, type Prop } from '@tempots/dom';
-export type OpenStrategy = 'click' | 'hover';
-export interface PopoverProps {
-    children?: JSX.DOMNode;
-    openStrategy?: OpenStrategy;
-    maxWidth?: Signal<number>;
-    opened?: Prop<boolean>;
-}
-export declare function Popover({ children, openStrategy, maxWidth, opened }: PopoverProps): JSX.DOMNode;

package/components/Popover/Popover.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal, Attribute } from '@tempots/dom';
-import { UnstyledPopover } from '../Popover';
-import { onTargetClickMount, onTargetOverMount } from '../Popover/UnstyledPopover';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
-import { Sx } from '../styling/Sx';
-const ARROW_SIZE = 8;
-export function Popover({ children, openStrategy, maxWidth, opened }) {
-    return (_jsx(_Fragment, { children: _jsx(Consumer, { mark: StyleMarker, children: ({ styles }) => {
-                const at = styles.at('styles').at;
-                return (_jsxs(UnstyledPopover, { opened: opened, arrowOver: true, onTargetMount: openStrategy === 'hover' ? onTargetOverMount : onTargetClickMount, placement: Signal.of('bottom'), offset: Signal.of(ARROW_SIZE), arrow: _jsx("div", { children: _jsx(Sx, { sx: {
-                                backgroundColor: at('background').at('color'),
-                                // boxShadow: at('shadow').at('md') as Signal<any>,
-                                border: at('control').map(v => `1px solid ${v.borderColor}`),
-                                borderRight: 'none',
-                                borderBottom: 'none',
-                                marginTop: -ARROW_SIZE / 2,
-                                transform: 'rotate(45deg)',
-                                width: ARROW_SIZE,
-                                height: ARROW_SIZE
-                            } }) }), children: [_jsx(Attribute, { name: "role", value: Signal.of('dialog') }), _jsx(Sx, { sx: {
-                                maxWidth: (maxWidth ?? Signal.of(240)),
-                                height: 'auto',
-                                lineHeight: '1em',
-                                textAlign: 'center',
-                                whiteSpace: 'normal',
-                                backgroundColor: at('background').at('color'),
-                                color: at('font').at('color'),
-                                padding: at('spacing').map(v => `${v.xs}px ${v.md}px`),
-                                border: at('control').map(v => `1px solid ${v.borderColor}`),
-                                borderRadius: at('border').at('radius').at('md'),
-                                boxShadow: at('shadow').at('md')
-                            } }), children] }));
-            } }) }));
-}

package/components/Popover/UnstyledPopover.d.ts

@@ -1,19 +0,0 @@
-import { type JSX, Signal, Prop } from '@tempots/dom';
-export type Alignment = 'start' | 'end';
-export type Side = 'top' | 'right' | 'bottom' | 'left';
-export type AlignedPlacement = `${Side}-${Alignment}`;
-export type Placement = Side | AlignedPlacement;
-export interface UnstyledPopoverProps {
-    children?: JSX.DOMNode;
-    placement?: Signal<Placement>;
-    shiftPadding?: Signal<number>;
-    offset?: Signal<number>;
-    arrow?: JSX.DOMNode;
-    arrowOver?: boolean;
-    arrowPadding?: Signal<number>;
-    onTargetMount?: (el: HTMLElement, open: () => void, close: () => void) => () => void;
-    opened?: Prop<boolean>;
-}
-export declare function onTargetOverMount(el: HTMLElement, open: () => void, close: () => void): () => void;
-export declare function onTargetClickMount(el: HTMLElement, open: () => void, close: () => void): () => void;
-export declare function UnstyledPopover({ children, placement: maybePlacement, shiftPadding: maybeShiftPadding, offset: maybeOffset, arrow: maybeArrow, arrowOver, arrowPadding: maybeArrowPadding, onTargetMount, opened: passedOpened }: UnstyledPopoverProps): JSX.DOMNode;

package/components/Popover/UnstyledPopover.js

@@ -1,97 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@tempots/dom/jsx-runtime";
-import { Lifecycle, Signal, Prop, FadeIn, FadeOut, When } from '@tempots/dom';
-import { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';
-import { Sx } from '../styling/Sx';
-export function onTargetOverMount(el, open, close) {
-    el.addEventListener('mouseenter', open);
-    el.addEventListener('mouseleave', close);
-    el.addEventListener('focus', open);
-    el.addEventListener('blur', close);
-    return () => {
-        el.removeEventListener('mouseenter', open);
-        el.removeEventListener('mouseleave', close);
-        el.removeEventListener('focus', open);
-        el.removeEventListener('blur', close);
-    };
-}
-export function onTargetClickMount(el, open, close) {
-    el.addEventListener('click', open);
-    function clickOutside(e) {
-        if (!el.contains(e.target)) {
-            close();
-        }
-    }
-    document.addEventListener('click', clickOutside);
-    return () => {
-        el.removeEventListener('click', open);
-        document.removeEventListener('click', clickOutside);
-    };
-}
-export function UnstyledPopover({ children, placement: maybePlacement, shiftPadding: maybeShiftPadding, offset: maybeOffset, arrow: maybeArrow, arrowOver, arrowPadding: maybeArrowPadding, onTargetMount, opened: passedOpened }) {
-    let target = null;
-    let dropdown = null;
-    let arrowElement = null;
-    const placement = maybePlacement ?? Signal.of('bottom');
-    const shiftPadding = maybeShiftPadding ?? Signal.of(5);
-    const offsetValue = maybeOffset ?? Signal.of(5);
-    const arrowPadding = maybeArrowPadding ?? Signal.of(0);
-    const opened = passedOpened ?? Prop.of(false);
-    const placementTop = Prop.of(false);
-    function open() { opened.set(true); }
-    function close() { opened.set(false); }
-    function execute() {
-        if ((target == null) || (dropdown == null))
-            return;
-        const middleware = [];
-        if (maybeArrow == null) {
-            middleware.push(flip());
-        }
-        middleware.push(shift({ padding: shiftPadding.get() }), offset(offsetValue.get()));
-        if (arrowElement != null) {
-            middleware.push(arrow({
-                element: arrowElement,
-                padding: arrowPadding.get()
-            }));
-        }
-        computePosition(target, dropdown, {
-            placement: placement.get(),
-            middleware
-        }).then(({ x, y, middlewareData, placement }) => {
-            if (dropdown == null)
-                return;
-            placementTop.set(placement.includes('top'));
-            dropdown.style.top = `${String(y)}px`;
-            dropdown.style.left = `${String(x)}px`;
-            if (arrowElement != null && middlewareData.arrow != null) {
-                const { x, y } = middlewareData.arrow;
-                arrowElement.style.top = y != null ? `${String(y)}px` : '';
-                arrowElement.style.left = x != null ? `${String(x)}px` : '';
-            }
-        });
-    }
-    let unmountTarget;
-    function onMountTarget(element) {
-        target = element;
-        unmountTarget = onTargetMount?.(element, open, close);
-    }
-    function onUnmountTarget() {
-        target = null;
-        unmountTarget?.();
-    }
-    function onMountArrow(element) {
-        arrowElement = element;
-    }
-    function onUnmountArrow() {
-        arrowElement = null;
-    }
-    function onMountDropdown(element) {
-        dropdown = element;
-        window.addEventListener('resize', execute);
-        execute();
-    }
-    function onUnmountDropdown() {
-        dropdown = null;
-        window.removeEventListener('resize', execute);
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(When, { is: opened, children: _jsxs("div", { children: [_jsx(FadeIn, { start: { opacity: 0, translateY: 12 }, opacity: 1, translateY: 0, duration: 250 }), _jsx(FadeOut, { opacity: 0, translateY: 12, duration: 250 }), _jsx(Sx, { sx: { position: 'absolute' } }), _jsx(When, { is: placementTop.map(v => !v && maybeArrow != null), children: _jsxs("div", { children: [_jsx(Sx, { sx: { position: 'absolute', zIndex: (arrowOver ?? false) ? 1 : 0 } }), _jsx(Lifecycle, { onMount: onMountArrow, onUnmount: onUnmountArrow }), maybeArrow] }) }), _jsxs("div", { children: [_jsx(Sx, { sx: { zIndex: (arrowOver ?? false) ? 0 : 1, position: 'relative' } }), children] }), _jsx(When, { is: placementTop.map(v => v && maybeArrow != null), children: _jsxs("div", { children: [_jsx(Sx, { sx: { position: 'absolute', zIndex: (arrowOver ?? false) ? 1 : 0 } }), _jsx(Lifecycle, { onMount: onMountArrow, onUnmount: onUnmountArrow }), maybeArrow] }) }), _jsx(Lifecycle, { onMount: onMountDropdown, onUnmount: onUnmountDropdown })] }) }), _jsx(Lifecycle, { onMount: onMountTarget, onUnmount: onUnmountTarget })] }));
-}

package/components/Popover/index.d.ts

@@ -1,2 +0,0 @@
-export { UnstyledPopover, type Placement, type UnstyledPopoverProps } from './UnstyledPopover';
-export { Popover, type PopoverProps, type OpenStrategy } from './Popover';