@tempots/ui 0.1.0

package/components/Stack/Stack.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, 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 Stack = (props) => {
+    const { children, align, justify, spacing } = props;
+    return (_jsx(Consumer, { mark: StyleMarker, 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

@@ -0,0 +1,37 @@
+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 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

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
+import { css } from '@emotion/css';
+import { Portal, Prop, OnRemove, Provider, makeProviderMark, When } 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 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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,31 @@
+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 { onTargetOverMount } from '../Popover/UnstyledPopover';
+import { StyleMarker } from '../StyleProvider/StyleProvider';
+import { Sx } from '../styling/Sx';
+const ARROW_SIZE = 8;
+export function Tooltip({ children }) {
+    return (_jsx(_Fragment, { children: _jsx(Consumer, { mark: StyleMarker, 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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
+import { Signal, ClassName, Consumer } from '@tempots/dom';
+import { getSizeOrNull } from '../../styles/size';
+import { objectOfPropertiesToSignalOfObject, sxToClassProp } from '../../styles/sx';
+import { StyleMarker } 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(Consumer, { mark: StyleMarker, 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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,20 @@
+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/package.json

@@ -0,0 +1,46 @@
+{
+  "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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fponticelli/tempots-ui.git"
+  },
+  "author": "Franco Ponticelli",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/fponticelli/tempots-ui/issues"
+  },
+  "homepage": "https://github.com/fponticelli/tempots-ui#readme"
+}

package/styles/color.d.ts

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

package/styles/color.js

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

package/styles/reset.d.ts

@@ -0,0 +1 @@
+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";