@tempots/ui 0.2.0 → 0.4.0

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';

package/components/Popover/index.js

@@ -1,2 +0,0 @@
-export { UnstyledPopover } from './UnstyledPopover';
-export { Popover } from './Popover';

package/components/SegmentedControl/SegmentedControl.d.ts

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

package/components/SegmentedControl/SegmentedControl.js

@@ -1,16 +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 { Box } from '../Box/Box';
-import { Control } from '../Control/Control';
-import { Sx } from '../styling/Sx';
-function Segment({ value, display, selected, onChange }) {
-    return (_jsx(Box, { children: _jsxs("button", { onClick: () => { onChange(value.get()); }, disabled: selected, children: [_jsx(Sx, { sx: { display: 'inline', fontWeight: selected.map(v => v ? 'bold' : 'normal') } }), value.map(display)] }) }));
-}
-export function SegmentedControl(props) {
-    const options = props.options;
-    const equality = props.equality ?? strictEqual;
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const onChange = props.onChange ?? (() => { });
-    return (_jsx(Control, { children: _jsx(For, { of: options, children: (option) => _jsx(Segment, { value: option, display: props.display ?? String, selected: option.combine(props.value, equality), onChange: onChange }) }) }));
-}

package/components/Stack/Stack.d.ts

@@ -1,11 +0,0 @@
-import { type JSX, Signal } from '@tempots/dom';
-import { type Size } from '../../styles/size';
-export type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'baseline' | 'stretch' | 'safe' | 'unsafe';
-export type JustifyContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
-export interface StackProps {
-    align?: Signal<AlignItems>;
-    justify?: Signal<JustifyContent>;
-    spacing?: Signal<number> | Signal<Size>;
-    children?: JSX.DOMNode;
-}
-export declare const Stack: (props: StackProps) => JSX.DOMNode;

package/components/Stack/Stack.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Signal } from '@tempots/dom';
-import { StyleConsumer } from '../StyleProvider/StyleProvider';
-import { Sx } from '../styling/Sx';
-export const Stack = (props) => {
-    const { children, align, justify, spacing } = props;
-    return (_jsx(StyleConsumer, { children: ({ styles }) => {
-            return (_jsxs("div", { children: [_jsx(Sx, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: align ?? Signal.of('normal'),
-                            justifyContent: justify,
-                            gap: (spacing ?? Signal.of('md')).combine(styles, (sp, st) => {
-                                return (typeof sp === 'number' ? sp : st.styles.spacing[sp]);
-                            })
-                        } }), children] }));
-        } }));
-};

package/components/StyleProvider/StyleProvider.d.ts

@@ -1,41 +0,0 @@
-import { type JSX, Prop, type Signal } from '@tempots/dom';
-import { type Size } from '../../styles/size';
-import { type UIStyles } from '../../styles/ui-styles';
-export interface Styles {
-    components: UIComponentStyles;
-    styles: UIStyles;
-}
-export interface UITheme {
-    styles: Signal<Styles>;
-    isLight: Prop<boolean>;
-}
-export interface StyleProviderProps {
-    children?: JSX.Element;
-}
-export declare const StyleMarker: symbol;
-export declare const StyleProvider: ({ children }: StyleProviderProps) => JSX.DOMNode;
-export interface StyleConsumerProps {
-    children?: (theme: UITheme) => JSX.DOMNode;
-}
-export declare function StyleConsumer({ children }: StyleConsumerProps): JSX.DOMNode;
-export type ComponentClasses<T> = (options: T) => string;
-export interface UIComponentStyles {
-    button: {
-        root: ComponentClasses<ButtonStyles>;
-        content: ComponentClasses<ButtonStyles>;
-    };
-    control: {
-        root: ComponentClasses<ControlStyles>;
-    };
-}
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
-export interface ButtonStyles {
-    size: Size | number;
-    compact: boolean;
-    variant: ButtonVariant;
-}
-export interface ControlStyles {
-    size: Size;
-    spacing: Size;
-}
-export declare const defaultComponentStyle: ({ font, border, spacing, background, control }: UIStyles) => UIComponentStyles;

package/components/StyleProvider/StyleProvider.js

@@ -1,106 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { css } from '@emotion/css';
-import { Portal, Prop, OnRemove, Provider, makeProviderMark, When, Consumer } from '@tempots/dom';
-import { resetCss } from '../../styles/reset';
-import { getRadiusSize, getSize } from '../../styles/size';
-import { defaultDarkStyles, defaultLightStyles } from '../../styles/ui-styles';
-import { Sx } from '../styling/Sx';
-export const StyleMarker = makeProviderMark();
-const counter = Prop.of(0);
-export const StyleProvider = ({ children }) => {
-    const isLight = Prop.of(true);
-    const styles = isLight.map(v => {
-        if (v) {
-            return {
-                components: defaultComponentStyle(defaultLightStyles),
-                styles: defaultLightStyles
-            };
-        }
-        else {
-            return {
-                components: defaultComponentStyle(defaultDarkStyles),
-                styles: defaultDarkStyles
-            };
-        }
-    });
-    counter.update(v => v + 1);
-    return (_jsxs(Provider, { value: { styles, isLight }, mark: StyleMarker, children: [_jsx(Sx, { sx: { backgroundColor: styles.map(v => v.styles.background.color) } }), _jsx(When, { is: counter.map(v => v > 0), children: _jsx(Portal, { selector: "head", children: _jsx("style", { children: resetCss }) }) }), children, _jsx(OnRemove, { clear: () => { counter.update(v => v - 1); } })] }));
-};
-export function StyleConsumer({ children }) {
-    return _jsx(Consumer, { mark: StyleMarker, children: children });
-}
-export const defaultComponentStyle = ({ font, border, spacing, background, control }) => {
-    return {
-        button: {
-            root: ({ size, variant, compact }) => {
-                const obj = {
-                    alignContent: 'center',
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    fontWeight: 500,
-                    fontSize: getSize(size, 'md', font.size),
-                    borderRadius: getRadiusSize('md', 'sm', border.radius),
-                    border: `1px solid ${control.borderColor}`,
-                    backgroundColor: background.color,
-                    color: font.color,
-                    padding: `0 ${spacing.md / (compact ? 2 : 1)}px`,
-                    textShadow: control.accentTextShadow,
-                    boxShadow: control.shadow,
-                    // minWidth: getSize(size, 'md', control.height),
-                    height: getSize(size, 'md', control.height),
-                    cursor: 'pointer',
-                    fontFamily: font.family.control
-                };
-                obj[':hover:not([disabled])'] = {
-                    backgroundColor: background.inverseColor,
-                    color: font.inverseColor
-                };
-                obj[':focus'] = {
-                    outline: `2px solid ${control.focusColor}`,
-                    outlineOffset: 0.5
-                };
-                obj[':active:not([disabled])'] = {
-                    transform: 'translateY(2px)'
-                };
-                obj[':disabled'] = {
-                    cursor: 'not-allowed',
-                    backgroundColor: background.mutedColor,
-                    color: font.mutedColor
-                };
-                return css(obj);
-            },
-            content: ({ size, variant, compact }) => {
-                return css({
-                    minWidth: '1.25em',
-                    margin: '0 auto'
-                });
-            }
-        },
-        control: {
-            root: ({ size, spacing: sp }) => {
-                const obj = {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    flexDirection: 'row',
-                    gap: getSize(sp, 'md', spacing),
-                    overflow: 'hidden',
-                    lineHeight: getSize(size, 'md', control.height),
-                    height: getSize(size, 'md', control.height),
-                    fontWeight: 500,
-                    padding: '0 2px',
-                    fontSize: getSize(size, 'md', font.size),
-                    fontFamily: font.family.control,
-                    borderRadius: getRadiusSize('md', 'sm', border.radius),
-                    border: `1px solid ${control.borderColor}`,
-                    backgroundColor: background.color,
-                    color: font.color,
-                    ':focus-within': {
-                        outline: `2px solid ${control.focusColor}`,
-                        outlineOffset: 0.5
-                    }
-                };
-                return css(obj);
-            }
-        }
-    };
-};

package/components/Tooltip/index.d.ts

@@ -1,5 +0,0 @@
-import { type JSX } from '@tempots/dom';
-export interface TooltipProps {
-    children?: JSX.DOMNode;
-}
-export declare function Tooltip({ children }: TooltipProps): JSX.DOMNode;

package/components/Tooltip/index.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@tempots/dom/jsx-runtime";
-import { Signal, Attribute } from '@tempots/dom';
-import { UnstyledPopover } from '../Popover';
-import { onTargetOverMount } from '../Popover/UnstyledPopover';
-import { StyleConsumer } from '../StyleProvider/StyleProvider';
-import { Sx } from '../styling/Sx';
-const ARROW_SIZE = 8;
-export function Tooltip({ children }) {
-    return (_jsx(_Fragment, { children: _jsx(StyleConsumer, { children: ({ styles }) => {
-                const at = styles.at('styles').at;
-                return (_jsxs(UnstyledPopover, { onTargetMount: onTargetOverMount, placement: Signal.of('top'), arrow: _jsx("div", { children: _jsx(Sx, { sx: {
-                                backgroundColor: at('background').at('inverseColor'),
-                                boxShadow: at('shadow').at('md'),
-                                marginTop: -ARROW_SIZE / 2,
-                                transform: 'rotate(45deg)',
-                                width: ARROW_SIZE,
-                                height: ARROW_SIZE
-                            } }) }), children: [_jsx(Attribute, { name: "role", value: Signal.of('tooltip') }), _jsx(Sx, { sx: {
-                                maxWidth: '200px',
-                                height: 'auto',
-                                lineHeight: '1em',
-                                textAlign: 'center',
-                                whiteSpace: 'normal',
-                                backgroundColor: at('background').at('inverseColor'),
-                                color: at('font').at('inverseColor'),
-                                padding: at('spacing').map(v => `${v.xs}px ${v.md}px`),
-                                borderRadius: at('border').at('radius').at('sm'),
-                                boxShadow: at('shadow').at('md')
-                            } }), children] }));
-            } }) }));
-}

package/components/styling/Sizing.d.ts

@@ -1,10 +0,0 @@
-import { type JSX } from '@tempots/dom';
-export interface SizingProps {
-    width?: JSX.VValue<string> | JSX.VValue<number>;
-    height?: JSX.VValue<string> | JSX.VValue<number>;
-    minWidth?: JSX.VValue<string> | JSX.VValue<number>;
-    minHeight?: JSX.VValue<string> | JSX.VValue<number>;
-    maxWidth?: JSX.VValue<string> | JSX.VValue<number>;
-    maxHeight?: JSX.VValue<string> | JSX.VValue<number>;
-}
-export declare const Sizing: ({ width, height, maxHeight, maxWidth, minHeight, minWidth }: SizingProps) => JSX.DOMNode;

package/components/styling/Sizing.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { Sx } from './Sx';
-export const Sizing = ({ width, height, maxHeight, maxWidth, minHeight, minWidth }) => {
-    return _jsx(Sx, { sx: { width, height, maxHeight, maxWidth, minHeight, minWidth } }); // TODO any
-};

package/components/styling/Spacing.d.ts

@@ -1,28 +0,0 @@
-import { type JSX } from '@tempots/dom';
-import { type Size } from '../../styles/size';
-export type Space = JSX.VValue<Size> | JSX.VValue<number>;
-export interface SpacingProps {
-    m?: Space;
-    mt?: Space;
-    mr?: Space;
-    mb?: Space;
-    ml?: Space;
-    mh?: Space;
-    mv?: Space;
-    ms?: Space;
-    me?: Space;
-    mis?: Space;
-    mie?: Space;
-    p?: Space;
-    pt?: Space;
-    pr?: Space;
-    pb?: Space;
-    pl?: Space;
-    ph?: Space;
-    pv?: Space;
-    ps?: Space;
-    pe?: Space;
-    pis?: Space;
-    pie?: Space;
-}
-export declare const Spacing: (props: SpacingProps) => JSX.DOMNode;

package/components/styling/Spacing.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { Signal, ClassName } from '@tempots/dom';
-import { getSizeOrNull } from '../../styles/size';
-import { objectOfPropertiesToSignalOfObject, sxToClassProp } from '../../styles/sx';
-import { StyleConsumer } from '../StyleProvider/StyleProvider';
-const map = {
-    m: ['margin'],
-    mt: ['marginTop'],
-    mr: ['marginRight'],
-    mb: ['marginBottom'],
-    ml: ['marginLeft'],
-    ms: ['marginBlockStart'],
-    me: ['marginBlockEnd'],
-    mis: ['marginInlineStart'],
-    mie: ['marginInlineEnd'],
-    p: ['padding'],
-    pt: ['paddingTop'],
-    pr: ['paddingRight'],
-    pb: ['paddingBottom'],
-    pl: ['paddingLeft'],
-    ps: ['paddingBlockStart'],
-    pe: ['paddingBlockEnd'],
-    pis: ['paddingInlineStart'],
-    pie: ['paddingInlineEnd'],
-    mh: ['marginStart', 'marginEnd'],
-    mv: ['marginTop', 'marginBottom'],
-    ph: ['paddingStart', 'paddingEnd'],
-    pv: ['paddingTop', 'paddingBottom']
-};
-export const Spacing = (props) => {
-    return (_jsx(StyleConsumer, { children: (theme) => {
-            const keys = Object.keys(props).filter(k => k !== 'children');
-            if (keys.length === 0)
-                return null;
-            const sx = keys.reduce((acc, k) => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const s = Signal.wrap(props[k]).combine(theme.styles, (s, { styles: { spacing } }) => [s, spacing]);
-                for (const kk of map[k]) {
-                    if (acc[kk] == null) {
-                        continue;
-                    }
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    acc[kk] = s.map(([v, spacing]) => getSizeOrNull(v, spacing));
-                }
-                return acc;
-            }, {});
-            return _jsx(ClassName, { value: sxToClassProp(objectOfPropertiesToSignalOfObject(sx)) });
-        } }));
-};

package/components/styling/Sx.d.ts

@@ -1,6 +0,0 @@
-import { type JSX } from '@tempots/dom';
-import { type SX } from '../../styles/sx';
-export interface SxProps {
-    sx?: SX;
-}
-export declare const Sx: ({ sx }: SxProps) => JSX.DOMNode;

package/components/styling/Sx.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { ClassName } from '@tempots/dom';
-import { sxToClassProp } from '../../styles/sx';
-export const Sx = ({ sx }) => {
-    return sx != null ? _jsx(ClassName, { value: sxToClassProp(sx) }) : null;
-};

package/index.d.ts

@@ -1,24 +0,0 @@
-export { Box, type BoxProps } from './components/Box/Box';
-export { Button, type ButtonProps } from './components/Button/Button';
-export { Control, type ControlProps } from './components/Control/Control';
-export { Sizing, type SizingProps } from './components/styling/Sizing';
-export { Spacing, type SpacingProps, type Space } from './components/styling/Spacing';
-export { Stack, type StackProps, type AlignItems, type JustifyContent } from './components/Stack/Stack';
-export { Group, type GroupProps, type Position } from './components/Group/Group';
-export { Sx, type SxProps as ElSxProps } from './components/styling/Sx';
-export { Field, type FieldProps } from './components/Field/Field';
-export type { FieldLayout } from './components/Field/field-layout';
-export { Fieldset, type FieldsetProps } from './components/Fieldset/Fieldset';
-export { FloatInput, type FloatInputProps, BaseFloatInput } from './components/Input/FloatInput';
-export { IntInput, type IntInputProps, BaseIntInput } from './components/Input/IntInput';
-export { SegmentedControl, type SegmentedControlProps } from './components/SegmentedControl/SegmentedControl';
-export { NativeSelect, type NativeSelectProps } from './components/Input/NativeSelect';
-export { Popover, type PopoverProps, type Placement, type OpenStrategy, UnstyledPopover, type UnstyledPopoverProps } from './components/Popover';
-export type { Side } from './styles/side';
-export type { Size } from './styles/size';
-export type { SX } from './styles/sx';
-export { TextInput, type TextInputProps, BaseTextInput } from './components/Input/TextInput';
-export { Tooltip, type TooltipProps } from './components/Tooltip';
-export { type UIStyles, defaultLightStyles as defaultStyles, type Heading } from './styles/ui-styles';
-export { UnitInput, type UnitInputProps } from './components/Input/UnitInput';
-export { StyleMarker, StyleProvider, type StyleProviderProps, type UITheme, type UIComponentStyles, defaultComponentStyle } from './components/StyleProvider/StyleProvider';

package/index.js

@@ -1,20 +0,0 @@
-export { Box } from './components/Box/Box';
-export { Button } from './components/Button/Button';
-export { Control } from './components/Control/Control';
-export { Sizing } from './components/styling/Sizing';
-export { Spacing } from './components/styling/Spacing';
-export { Stack } from './components/Stack/Stack';
-export { Group } from './components/Group/Group';
-export { Sx } from './components/styling/Sx';
-export { Field } from './components/Field/Field';
-export { Fieldset } from './components/Fieldset/Fieldset';
-export { FloatInput, BaseFloatInput } from './components/Input/FloatInput';
-export { IntInput, BaseIntInput } from './components/Input/IntInput';
-export { SegmentedControl } from './components/SegmentedControl/SegmentedControl';
-export { NativeSelect } from './components/Input/NativeSelect';
-export { Popover, UnstyledPopover } from './components/Popover';
-export { TextInput, BaseTextInput } from './components/Input/TextInput';
-export { Tooltip } from './components/Tooltip';
-export { defaultLightStyles as defaultStyles } from './styles/ui-styles';
-export { UnitInput } from './components/Input/UnitInput';
-export { StyleMarker, StyleProvider, defaultComponentStyle } from './components/StyleProvider/StyleProvider';

package/styles/color.d.ts

@@ -1 +0,0 @@
-export type Color = 'blue' | 'green' | 'red' | 'yellow' | 'orange' | 'purple' | 'pink' | 'gray' | 'black';

package/styles/color.js

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

package/styles/reset.d.ts

@@ -1 +0,0 @@
-export declare const resetCss = "\n  html {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    font-family: system-ui, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    text-rendering: optimizeLegibility;\n    -moz-osx-font-smoothing: grayscale;\n    touch-action: manipulation;\n  }\n\n  body {\n    position: relative;\n    min-height: 100%;\n    font-feature-settings: 'kern';\n  }\n\n  *,\n  *::before,\n  *::after {\n    border-width: 0;\n    border-style: solid;\n    box-sizing: border-box;\n  }\n\n  main {\n    display: block;\n  }\n\n  hr {\n    border-top-width: 1px;\n    box-sizing: content-box;\n    height: 0;\n    overflow: visible;\n  }\n\n  pre,\n  code,\n  kbd,\n  samp {\n    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: 1em;\n  }\n\n  a {\n    background-color: transparent;\n    color: inherit;\n    text-decoration: inherit;\n  }\n\n  abbr[title] {\n    border-bottom: none;\n    text-decoration: underline;\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n\n  b,\n  strong {\n    font-weight: bold;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n\n  sub {\n    bottom: -0.25em;\n  }\n\n  sup {\n    top: -0.5em;\n  }\n\n  img {\n    border-style: none;\n  }\n\n  button,\n  input,\n  optgroup,\n  select,\n  textarea {\n    font-family: inherit;\n    font-size: 100%;\n    line-height: 1.15;\n    margin: 0;\n  }\n\n  button,\n  input {\n    overflow: visible;\n  }\n\n  button,\n  select {\n    text-transform: none;\n  }\n\n  button::-moz-focus-inner,\n  [type='button']::-moz-focus-inner,\n  [type='reset']::-moz-focus-inner,\n  [type='submit']::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n\n  fieldset {\n    padding: 0.35em 0.75em 0.625em;\n  }\n\n  legend {\n    box-sizing: border-box;\n    color: inherit;\n    display: table;\n    max-width: 100%;\n    padding: 0;\n    white-space: normal;\n  }\n\n  progress {\n    vertical-align: baseline;\n  }\n\n  textarea {\n    overflow: auto;\n  }\n\n  [type='checkbox'],\n  [type='radio'] {\n    box-sizing: border-box;\n    padding: 0;\n  }\n\n  [type='number']::-webkit-inner-spin-button,\n  [type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none !important;\n  }\n\n  input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  [type='search'] {\n    -webkit-appearance: textfield;\n    outline-offset: -2px;\n  }\n\n  [type='search']::-webkit-search-decoration {\n    -webkit-appearance: none !important;\n  }\n\n  ::-webkit-file-upload-button {\n    -webkit-appearance: button;\n    font: inherit;\n  }\n\n  details {\n    display: block;\n  }\n\n  summary {\n    display: list-item;\n  }\n\n  template {\n    display: none;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  body,\n  blockquote,\n  dl,\n  dd,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  hr,\n  figure,\n  p,\n  pre {\n    margin: 0;\n  }\n\n  button {\n    background: transparent;\n    padding: 0;\n  }\n\n  fieldset {\n    margin: 0;\n    padding: 0;\n  }\n\n  ol,\n  ul {\n    margin: 0;\n    padding: 0;\n  }\n\n  textarea {\n    resize: vertical;\n  }\n\n  button,\n  [role='button'] {\n    cursor: pointer;\n  }\n\n  button::-moz-focus-inner {\n    border: 0 !important;\n  }\n\n  table {\n    border-collapse: collapse;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  button,\n  input,\n  optgroup,\n  select,\n  textarea {\n    padding: 0;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n  }\n\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  [data-js-focus-visible]\n    :focus:not([data-focus-visible-added]):not([data-focus-visible-disabled]) {\n    outline: none;\n    box-shadow: none;\n  }\n\n  select::-ms-expand {\n    display: none;\n  }\n";