@tempots/ui 0.2.0 → 0.3.1

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/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";

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;