@tempots/ui 0.2.0 → 0.4.0

package/styles/reset.js

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

package/styles/side.d.ts

@@ -1 +0,0 @@
-export type Side = 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';

package/styles/side.js

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

package/styles/size.d.ts

@@ -1,5 +0,0 @@
-export type Size = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-export declare const getSize: <T>(size: Size | number | undefined | null, defaultSize: Size, sizes: Record<Size, T>) => number | T;
-export declare const getSizeOrNull: <T>(size: Size | number | undefined | null, sizes: Record<Size, T>) => number | T | null;
-export declare const getRadiusSize: (size: Size | 'full' | number | undefined | null, defaultSize: Size | 'full', sizes: Record<Size, number>) => string | number;
-export declare const getSizeT: <T>(size: Size | number | undefined | null, defaultSize: Size, sizes: Record<Size, T>) => T;

package/styles/size.js

@@ -1,44 +0,0 @@
-export const getSize = (size, defaultSize, sizes) => {
-    if (size == null) {
-        return sizes[defaultSize];
-    }
-    else if (typeof size === 'string' && sizes[size] != null) {
-        return sizes[size];
-    }
-    else {
-        return size;
-    }
-};
-export const getSizeOrNull = (size, sizes) => {
-    if (size == null) {
-        return null;
-    }
-    else if (typeof size === 'string' && sizes[size] != null) {
-        return sizes[size];
-    }
-    else {
-        return size;
-    }
-};
-export const getRadiusSize = (size, defaultSize, sizes) => {
-    if (size === 'full') {
-        return '100%';
-    }
-    else if (size == null) {
-        return defaultSize === 'full' ? '100%' : sizes[defaultSize];
-    }
-    else if (typeof size === 'string' && sizes[size] != null) {
-        return sizes[size];
-    }
-    else {
-        return size;
-    }
-};
-export const getSizeT = (size, defaultSize, sizes) => {
-    if (typeof size === 'string' && sizes[size] != null) {
-        return sizes[size];
-    }
-    else {
-        return sizes[defaultSize];
-    }
-};

package/styles/sx.d.ts

@@ -1,9 +0,0 @@
-import { type CSSObject } from '@emotion/css';
-import { Signal } from '@tempots/dom';
-export type CSSObjectOfProperties = {
-    [K in keyof CSSObject]: Signal<CSSObject[K]> | CSSObject[K];
-};
-export type SX = Signal<CSSObject> | CSSObjectOfProperties;
-export declare const objectOfPropertiesToSignalOfObject: (sx: CSSObjectOfProperties) => Signal<CSSObject>;
-export declare const sxToSignal: (sx: SX) => Signal<CSSObject>;
-export declare const sxToClassProp: (sx: SX) => Signal<string | undefined>;

package/styles/sx.js

@@ -1,28 +0,0 @@
-import { css } from '@emotion/css';
-import { Signal } from '@tempots/dom';
-export const objectOfPropertiesToSignalOfObject = (sx) => {
-    const keys = Object.keys(sx);
-    const values = keys.map(k => sx[k]);
-    return keys.reduce((acc, k, i) => {
-        const field = values[i];
-        if (field == null)
-            return acc;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const value = Signal.wrap(field);
-        return acc.combine(value, (a, v) => ({ ...a, [k]: v }));
-    }, Signal.of({}));
-};
-export const sxToSignal = (sx) => {
-    if (typeof sx === 'object' && Signal.isSignal(sx)) {
-        return sx;
-    }
-    else {
-        sx = Signal.isSignal(sx)
-            ? sx.get()
-            : sx;
-        return objectOfPropertiesToSignalOfObject(sx);
-    }
-};
-export const sxToClassProp = (sx) => {
-    return sxToSignal(sx).map(v => css(v));
-};

package/styles/ui-styles.d.ts

@@ -1,67 +0,0 @@
-import { type Size } from './size';
-export interface Heading {
-    fontSize: number;
-    lineHeight: number;
-    fontWeight: number;
-}
-export interface UIStyles {
-    dir: 'ltr' | 'rtl';
-    defaultRadius: Size;
-    lineHeight: number;
-    background: {
-        color: string;
-        mutedColor: string;
-        inverseColor: string;
-        inverseMutedColor: string;
-        accentColor: string;
-        inverseAccentColor: string;
-    };
-    spacing: {
-        [key in Size]: number;
-    };
-    font: {
-        family: {
-            heading: string;
-            sans: string;
-            control: string;
-            mono: string;
-        };
-        size: {
-            [key in Size]: number;
-        };
-        color: string;
-        mutedColor: string;
-        inverseColor: string;
-        inverseMutedColor: string;
-    };
-    border: {
-        radius: {
-            [key in Size]: number;
-        };
-    };
-    shadow: {
-        [key in Size]: string;
-    };
-    breakpoint: {
-        [key in Size]: number;
-    };
-    heading: {
-        h1: Heading;
-        h2: Heading;
-        h3: Heading;
-        h4: Heading;
-        h5: Heading;
-        h6: Heading;
-    };
-    control: {
-        height: {
-            [key in Size]: number;
-        };
-        focusColor: string;
-        borderColor: string;
-        accentTextShadow: string;
-        shadow: string;
-    };
-}
-export declare const defaultLightStyles: UIStyles;
-export declare const defaultDarkStyles: UIStyles;

package/styles/ui-styles.js

@@ -1,118 +0,0 @@
-export const defaultLightStyles = {
-    dir: 'ltr',
-    defaultRadius: 'sm',
-    lineHeight: 1.45,
-    background: {
-        color: '#fff',
-        mutedColor: '#f5f5f5',
-        inverseColor: '#333',
-        inverseMutedColor: '#666',
-        accentColor: '#0074d9',
-        inverseAccentColor: '#7fdbff'
-    },
-    spacing: {
-        xxs: 4,
-        xs: 8,
-        sm: 12,
-        md: 16,
-        lg: 20,
-        xl: 24,
-        xxl: 32
-    },
-    font: {
-        family: {
-            heading: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
-            control: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
-            sans: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
-            mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace'
-        },
-        size: {
-            xxs: 10,
-            xs: 12,
-            sm: 14,
-            md: 16,
-            lg: 18,
-            xl: 20,
-            xxl: 24
-        },
-        color: '#333',
-        mutedColor: '#666',
-        inverseColor: '#fff',
-        inverseMutedColor: '#ccc'
-    },
-    border: {
-        radius: {
-            xxs: 1,
-            xs: 2,
-            sm: 4,
-            md: 8,
-            lg: 16,
-            xl: 24,
-            xxl: 32
-        }
-    },
-    shadow: {
-        xxs: '0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.1)',
-        xs: '0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)',
-        sm: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 10px 15px -5px, rgba(0, 0, 0, 0.04) 0px 7px 7px -5px',
-        md: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px',
-        lg: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 28px 23px -7px, rgba(0, 0, 0, 0.04) 0px 12px 12px -7px',
-        xl: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 36px 28px -7px, rgba(0, 0, 0, 0.04) 0px 17px 17px -7px',
-        xxl: '0 1px 5px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 44x 44px -9px, rgba(0, 0, 0, 0.04) 0px 22px 22px -9px'
-    },
-    breakpoint: {
-        xxs: 384,
-        xs: 576,
-        sm: 768,
-        md: 992,
-        lg: 1200,
-        xl: 1400,
-        xxl: 1800
-    },
-    heading: {
-        h1: { fontSize: 34, lineHeight: 1.3, fontWeight: 700 },
-        h2: { fontSize: 26, lineHeight: 1.35, fontWeight: 700 },
-        h3: { fontSize: 22, lineHeight: 1.4, fontWeight: 700 },
-        h4: { fontSize: 18, lineHeight: 1.45, fontWeight: 700 },
-        h5: { fontSize: 16, lineHeight: 1.5, fontWeight: 700 },
-        h6: { fontSize: 14, lineHeight: 1.5, fontWeight: 700 }
-    },
-    control: {
-        height: {
-            xxs: 20,
-            xs: 24,
-            sm: 28,
-            md: 32,
-            lg: 36,
-            xl: 40,
-            xxl: 44
-        },
-        focusColor: '#007bff',
-        borderColor: '#ccc',
-        accentTextShadow: '0 0 1px #0074d9',
-        shadow: '0px 1px 1px 0px rgba(0, 0, 0, 0.2)'
-    }
-};
-export const defaultDarkStyles = {
-    ...defaultLightStyles,
-    background: {
-        ...defaultLightStyles.background,
-        color: '#333',
-        mutedColor: '#666',
-        inverseColor: '#fff',
-        inverseMutedColor: '#ccc'
-    },
-    font: {
-        ...defaultLightStyles.font,
-        color: '#fff',
-        mutedColor: '#ccc',
-        inverseColor: '#333',
-        inverseMutedColor: '#666'
-    },
-    control: {
-        ...defaultLightStyles.control,
-        borderColor: '#666',
-        accentTextShadow: '0 0 1px #7fdbff',
-        shadow: '0px 0px 1px 1px rgba(255, 255, 255, 0.15)'
-    }
-};