You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@mirohq/design-system-base-input

Package Overview
Dependencies
Maintainers
2
Versions
120
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mirohq/design-system-base-input - npm Package Compare versions

Comparing version

0.0.3-forms.0
to
0.1.0-forms.1

66

dist/main.js

@@ -6,2 +6,4 @@ 'use strict';

var designSystemUtils = require('@mirohq/design-system-utils');
var designSystemStitches = require('@mirohq/design-system-stitches');
var designSystemPrimitive = require('@mirohq/design-system-primitive');

@@ -92,4 +94,68 @@ const styles = {

const FloatingLabel = designSystemStitches.styled(designSystemPrimitive.Primitive.label, {
transitionProperty: "transform, left, top, font-size",
transitionDuration: "200ms",
transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
variants: {
floating: {
true: {
transform: "translate(2px, -8px)",
fontSize: "$150",
lineHeight: 1.5,
height: "1.5em",
color: "$text-neutrals-subtle",
padding: "0 2px",
backgroundColor: "$background-neutrals-container"
},
false: {
transform: "translate(0, 0)",
fontSize: "$200",
lineHeight: 1.5,
height: "1.5em",
...styles.base.placeholder
}
},
size: {
large: {},
"x-large": {}
}
},
compoundVariants: [
{
size: "large",
floating: false,
css: {
top: "7px"
}
},
{
size: "x-large",
floating: false,
css: {
top: "11px",
left: "$200"
}
}
],
defaultVariants: {
size: "large"
}
});
const inputSymbol = Symbol.for("input");
const isInputComponent = (inputComponent) => {
var _a, _b;
return Boolean(
(_b = inputComponent[inputSymbol]) != null ? _b : (
// @ts-expect-error
(_a = inputComponent == null ? void 0 : inputComponent.type) == null ? void 0 : _a[inputSymbol]
)
);
};
exports.FloatingLabel = FloatingLabel;
exports.inputSymbol = inputSymbol;
exports.isInputComponent = isInputComponent;
exports.styles = styles;
exports.useAriaDisabled = useAriaDisabled;
//# sourceMappingURL=main.js.map

65

dist/module.js
import { booleanify, removeEventProps } from '@mirohq/design-system-utils';
import { styled } from '@mirohq/design-system-stitches';
import { Primitive } from '@mirohq/design-system-primitive';

@@ -87,3 +89,64 @@ const styles = {

export { styles, useAriaDisabled };
const FloatingLabel = styled(Primitive.label, {
transitionProperty: "transform, left, top, font-size",
transitionDuration: "200ms",
transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
variants: {
floating: {
true: {
transform: "translate(2px, -8px)",
fontSize: "$150",
lineHeight: 1.5,
height: "1.5em",
color: "$text-neutrals-subtle",
padding: "0 2px",
backgroundColor: "$background-neutrals-container"
},
false: {
transform: "translate(0, 0)",
fontSize: "$200",
lineHeight: 1.5,
height: "1.5em",
...styles.base.placeholder
}
},
size: {
large: {},
"x-large": {}
}
},
compoundVariants: [
{
size: "large",
floating: false,
css: {
top: "7px"
}
},
{
size: "x-large",
floating: false,
css: {
top: "11px",
left: "$200"
}
}
],
defaultVariants: {
size: "large"
}
});
const inputSymbol = Symbol.for("input");
const isInputComponent = (inputComponent) => {
var _a, _b;
return Boolean(
(_b = inputComponent[inputSymbol]) != null ? _b : (
// @ts-expect-error
(_a = inputComponent == null ? void 0 : inputComponent.type) == null ? void 0 : _a[inputSymbol]
)
);
};
export { FloatingLabel, inputSymbol, isInputComponent, styles, useAriaDisabled };
//# sourceMappingURL=module.js.map

511

dist/types.d.ts

@@ -0,3 +1,8 @@

import * as react from 'react';
import { InputHTMLAttributes } from 'react';
import { Booleanish } from '@mirohq/design-system-types';
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';

@@ -71,2 +76,506 @@ declare const styles: {

export { styles, useAriaDisabled };
declare const FloatingLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"label">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
'border-widths': {
readonly none: 0;
readonly sm: "1px";
readonly md: "2px";
readonly lg: "4px";
};
colors: {
readonly black: any;
readonly 'blue-100': any;
readonly 'blue-200': any;
readonly 'blue-300': any;
readonly 'blue-400': any;
readonly 'blue-500': any;
readonly 'blue-600': any;
readonly 'blue-700': any;
readonly 'blue-800': any;
readonly 'blue-900': any;
readonly 'blue-1000': any;
readonly 'gray-100': any;
readonly 'gray-200': any;
readonly 'gray-300': any;
readonly 'gray-400': any;
readonly 'gray-500': any;
readonly 'gray-600': any;
readonly 'gray-700': any;
readonly 'gray-800': any;
readonly 'gray-900': any;
readonly 'green-100': any;
readonly 'green-200': any;
readonly 'green-300': any;
readonly 'green-400': any;
readonly 'green-500': any;
readonly 'green-600': any;
readonly 'green-700': any;
readonly 'green-800': any;
readonly 'green-900': any;
readonly 'indigo-100': any;
readonly 'indigo-200': any;
readonly 'indigo-300': any;
readonly 'indigo-400': any;
readonly 'indigo-500': any;
readonly 'indigo-600': any;
readonly 'indigo-700': any;
readonly 'indigo-800': any;
readonly 'indigo-900': any;
readonly 'red-100': any;
readonly 'red-200': any;
readonly 'red-300': any;
readonly 'red-400': any;
readonly 'red-500': any;
readonly 'red-600': any;
readonly 'red-700': any;
readonly 'red-800': any;
readonly 'red-900': any;
readonly transparent: any;
readonly white: any;
readonly 'yellow-100': any;
readonly 'yellow-200': any;
readonly 'yellow-300': any;
readonly 'yellow-400': any;
readonly 'yellow-500': any;
readonly 'yellow-600': any;
readonly 'yellow-700': any;
readonly 'yellow-800': any;
readonly 'yellow-900': any;
"background-alpha-active"?: any;
"background-alpha-hover"?: any;
"background-danger-prominent"?: any;
"background-danger-prominent-active"?: any;
"background-danger-prominent-hover"?: any;
"background-danger-subtle"?: any;
"background-danger-subtle-active"?: any;
"background-danger-subtle-hover"?: any;
"background-neutrals"?: any;
"background-neutrals-active"?: any;
"background-neutrals-container"?: any;
"background-neutrals-controls-disabled"?: any;
"background-neutrals-disabled"?: any;
"background-neutrals-hover"?: any;
"background-neutrals-inactive"?: any;
"background-neutrals-inactive-hover"?: any;
"background-neutrals-inverted"?: any;
"background-neutrals-inverted-subtle"?: any;
"background-neutrals-page"?: any;
"background-neutrals-page-subtle"?: any;
"background-neutrals-scrolls"?: any;
"background-neutrals-scrolls-expanded"?: any;
"background-neutrals-scrolls-hover"?: any;
"background-neutrals-scrolls-pressed"?: any;
"background-neutrals-scrolls-pressed-hover"?: any;
"background-neutrals-subtle"?: any;
"background-neutrals-subtle-active"?: any;
"background-neutrals-subtle-hover"?: any;
"background-primary-prominent"?: any;
"background-primary-prominent-active"?: any;
"background-primary-prominent-expanded"?: any;
"background-primary-prominent-hover"?: any;
"background-primary-prominent-pressed"?: any;
"background-primary-prominent-pressed-hover"?: any;
"background-primary-prominent-selected"?: any;
"background-primary-subtle"?: any;
"background-primary-subtle-active"?: any;
"background-primary-subtle-expanded"?: any;
"background-primary-subtle-hover"?: any;
"background-primary-subtle-pressed"?: any;
"background-primary-subtle-pressed-hover"?: any;
"background-primary-subtle-selected"?: any;
"background-success"?: any;
"background-success-prominent"?: any;
"background-success-prominent-active"?: any;
"background-success-prominent-hover"?: any;
"background-warning-prominent"?: any;
"background-warning-subtle"?: any;
"border-danger"?: any;
"border-danger-active"?: any;
"border-danger-hover"?: any;
"border-focus-inner"?: any;
"border-focus-middle"?: any;
"border-focus-outer"?: any;
"border-neutrals"?: any;
"border-neutrals-active"?: any;
"border-neutrals-controls"?: any;
"border-neutrals-controls-disabled"?: any;
"border-neutrals-disabled"?: any;
"border-neutrals-hover"?: any;
"border-neutrals-inverted"?: any;
"border-neutrals-subtle"?: any;
"border-neutrals-text"?: any;
"border-neutrals-text-active"?: any;
"border-neutrals-text-hover"?: any;
"border-neutrals-text-subtle"?: any;
"border-neutrals-text-subtle-active"?: any;
"border-neutrals-text-subtle-hover"?: any;
"border-neutrals-transparent"?: any;
"border-primary"?: any;
"border-primary-active"?: any;
"border-primary-hover"?: any;
"border-primary-inverted"?: any;
"border-success"?: any;
"border-success-active"?: any;
"border-success-hover"?: any;
"border-warning"?: any;
"icon-danger"?: any;
"icon-danger-active"?: any;
"icon-danger-hover"?: any;
"icon-danger-inverted"?: any;
"icon-neutrals"?: any;
"icon-neutrals-disabled"?: any;
"icon-neutrals-inactive"?: any;
"icon-neutrals-inactive-hover"?: any;
"icon-neutrals-inverted"?: any;
"icon-neutrals-search"?: any;
"icon-neutrals-subtle"?: any;
"icon-neutrals-text"?: any;
"icon-primary"?: any;
"icon-primary-active"?: any;
"icon-primary-hover"?: any;
"icon-primary-inverted"?: any;
"icon-primary-selected"?: any;
"icon-success"?: any;
"icon-success-active"?: any;
"icon-success-hover"?: any;
"icon-success-inverted"?: any;
"icon-warning"?: any;
"icon-warning-prominent"?: any;
"icon-warning-subtle"?: any;
"text-danger"?: any;
"text-danger-active"?: any;
"text-danger-hover"?: any;
"text-danger-inverted"?: any;
"text-neutrals"?: any;
"text-neutrals-active"?: any;
"text-neutrals-disabled"?: any;
"text-neutrals-hover"?: any;
"text-neutrals-inverted"?: any;
"text-neutrals-placeholder"?: any;
"text-neutrals-placeholder-only"?: any;
"text-neutrals-subtle"?: any;
"text-neutrals-subtle-active"?: any;
"text-neutrals-subtle-hover"?: any;
"text-primary"?: any;
"text-primary-active"?: any;
"text-primary-hover"?: any;
"text-primary-inverted"?: any;
"text-primary-inverted-subtle"?: any;
"text-primary-selected"?: any;
"text-success"?: any;
"text-success-active"?: any;
"text-success-hover"?: any;
"text-success-inverted"?: any;
"text-warning"?: any;
"text-warning-subtle"?: any;
};
'font-sizes': {
readonly 150: "0.75rem";
readonly 175: "0.875rem";
readonly 200: "1rem";
readonly 225: "1.125rem";
readonly 250: "1.25rem";
readonly 300: "1.5rem";
readonly 400: "2rem";
readonly 500: "2.5rem";
readonly 600: "3rem";
readonly 800: "4rem";
readonly 900: "4.5rem";
};
fonts: {
readonly heading: "Roobert, sans-serif";
readonly body: "Open Sans, sans-serif";
};
radii: {
readonly none: 0;
readonly half: "999em";
readonly 25: "2px";
readonly 50: "4px";
readonly 75: "6px";
readonly 100: "8px";
readonly 200: "16px";
};
shadows: {
readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
readonly 'focus-controls-success': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$background-success-prominent, 0 0 0 5px $colors$background-success";
};
sizes: {
readonly number: string;
readonly 'icon-200': "16px";
readonly 'icon-300': "24px";
readonly 'icon-400': "32px";
};
space: {
readonly 0: "0px";
readonly 25: "2px";
readonly 50: "4px";
readonly 100: "8px";
readonly 150: "12px";
readonly 200: "16px";
readonly 300: "24px";
readonly 400: "32px";
readonly 500: "40px";
readonly 600: "48px";
readonly 700: "56px";
readonly 800: "64px";
readonly 1200: "96px";
readonly 1600: "128px";
};
'space-gap': {
readonly 0: any;
readonly 50: any;
readonly 100: any;
readonly 200: any;
readonly 300: any;
};
'space-inset': {
readonly 0: any;
readonly 50: any;
readonly 100: any;
readonly 150: any;
readonly 200: any;
readonly 300: any;
readonly 400: any;
readonly 500: any;
readonly 600: any;
readonly 700: any;
readonly 800: any;
readonly 1200: any;
readonly 1600: any;
};
'space-offset': {
readonly 0: any;
readonly 50: any;
readonly 100: any;
readonly 150: any;
readonly 200: any;
readonly 300: any;
readonly 400: any;
readonly 600: any;
readonly 800: any;
readonly 1200: any;
readonly 1600: any;
readonly 'stacking-0': any;
readonly 'stacking-100': any;
readonly 'stacking-200': any;
readonly 'stacking-300': any;
readonly 'stacking-400': any;
readonly 'stacking-500': any;
readonly 'stacking-800': any;
};
'stroke-width': {
readonly thin: "1.5px";
readonly normal: "2px";
readonly bold: "4px";
};
'z-indices': {
readonly dropdownMenu: 100;
readonly select: 200;
readonly popover: 300;
readonly tooltip: 400;
};
}, {
readonly background: "colors";
readonly backgroundColor: "colors";
readonly backgroundImage: "colors";
readonly blockSize: "sizes";
readonly border: "colors";
readonly borderBlock: "colors";
readonly borderBlockEnd: "colors";
readonly borderBlockStart: "colors";
readonly borderBottom: "colors";
readonly borderBottomColor: "colors";
readonly borderBottomLeftRadius: "radii";
readonly borderBottomRightRadius: "radii";
readonly borderBottomStyle: "border-styles";
readonly borderBottomWidth: "border-widths";
readonly borderColor: "colors";
readonly borderImage: "colors";
readonly borderInline: "colors";
readonly borderInlineEnd: "colors";
readonly borderInlineStart: "colors";
readonly borderLeft: "colors";
readonly borderLeftColor: "colors";
readonly borderLeftStyle: "border-styles";
readonly borderLeftWidth: "border-widths";
readonly borderRadius: "radii";
readonly borderRight: "colors";
readonly borderRightColor: "colors";
readonly borderRightStyle: "border-styles";
readonly borderRightWidth: "border-widths";
readonly borderSpacing: "space-offset";
readonly borderStyle: "border-styles";
readonly borderTop: "colors";
readonly borderTopColor: "colors";
readonly borderTopLeftRadius: "radii";
readonly borderTopRightRadius: "radii";
readonly borderTopStyle: "border-styles";
readonly borderTopWidth: "border-widths";
readonly borderWidth: "border-widths";
readonly bottom: "space";
readonly boxShadow: "shadows";
readonly caretColor: "colors";
readonly color: "colors";
readonly columnGap: "space-gap";
readonly columnRuleColor: "colors";
readonly fill: "colors";
readonly flexBasis: "sizes";
readonly fontFamily: "fonts";
readonly fontSize: "font-sizes";
readonly fontWeight: "font-weights";
readonly gap: "space-gap";
readonly gridColumnGap: "space-gap";
readonly gridGap: "space-gap";
readonly gridRowGap: "space-gap";
readonly gridTemplateColumns: "sizes";
readonly gridTemplateRows: "sizes";
readonly height: "sizes";
readonly inlineSize: "sizes";
readonly inset: "space-inset";
readonly insetBlock: "space-inset";
readonly insetBlockEnd: "space-inset";
readonly insetBlockStart: "space-inset";
readonly insetInline: "space-inset";
readonly insetInlineEnd: "space-inset";
readonly insetInlineStart: "space-inset";
readonly left: "space";
readonly letterSpacing: "letter-spacings";
readonly lineHeight: "line-heights";
readonly margin: "space-offset";
readonly marginBlock: "space-offset";
readonly marginBlockEnd: "space-offset";
readonly marginBlockStart: "space-offset";
readonly marginBottom: "space-offset";
readonly marginInline: "space-offset";
readonly marginInlineEnd: "space-offset";
readonly marginInlineStart: "space-offset";
readonly marginLeft: "space-offset";
readonly marginRight: "space-offset";
readonly marginTop: "space-offset";
readonly maxBlockSize: "sizes";
readonly maxHeight: "sizes";
readonly maxInlineSize: "sizes";
readonly maxWidth: "sizes";
readonly minBlockSize: "sizes";
readonly minHeight: "sizes";
readonly minInlineSize: "sizes";
readonly minWidth: "sizes";
readonly outline: "colors";
readonly outlineColor: "colors";
readonly padding: "space-inset";
readonly paddingBlock: "space-inset";
readonly paddingBlockEnd: "space-inset";
readonly paddingBlockStart: "space-inset";
readonly paddingBottom: "space-inset";
readonly paddingInline: "space-inset";
readonly paddingInlineEnd: "space-inset";
readonly paddingInlineStart: "space-inset";
readonly paddingLeft: "space-inset";
readonly paddingRight: "space-inset";
readonly paddingTop: "space-inset";
readonly right: "space";
readonly rowGap: "space-gap";
readonly scrollMargin: "space-offset";
readonly scrollMarginBlock: "space-offset";
readonly scrollMarginBlockEnd: "space-offset";
readonly scrollMarginBlockStart: "space-offset";
readonly scrollMarginBottom: "space-offset";
readonly scrollMarginInline: "space-offset";
readonly scrollMarginInlineEnd: "space-offset";
readonly scrollMarginInlineStart: "space-offset";
readonly scrollMarginLeft: "space-offset";
readonly scrollMarginRight: "space-offset";
readonly scrollMarginTop: "space-offset";
readonly scrollPadding: "space-inset";
readonly scrollPaddingBlock: "space-inset";
readonly scrollPaddingBlockEnd: "space-inset";
readonly scrollPaddingBlockStart: "space-inset";
readonly scrollPaddingBottom: "space-inset";
readonly scrollPaddingInline: "space-inset";
readonly scrollPaddingInlineEnd: "space-inset";
readonly scrollPaddingInlineStart: "space-inset";
readonly scrollPaddingLeft: "space-inset";
readonly scrollPaddingRight: "space-inset";
readonly scrollPaddingTop: "space-inset";
readonly stroke: "colors";
readonly strokeWidth: "stroke-width";
readonly textDecorationColor: "colors";
readonly textShadow: "shadows";
readonly top: "space";
readonly transition: "transitions";
readonly width: "sizes";
readonly zIndex: "z-indices";
}, {
paddingX: (value: {
readonly [$$PropertyValue]: "padding";
}) => {
paddingLeft: {
readonly [$$PropertyValue]: "padding";
};
paddingRight: {
readonly [$$PropertyValue]: "padding";
};
};
paddingY: (value: {
readonly [$$PropertyValue]: "padding";
}) => {
paddingTop: {
readonly [$$PropertyValue]: "padding";
};
paddingBottom: {
readonly [$$PropertyValue]: "padding";
};
};
marginX: (value: {
readonly [$$PropertyValue]: "margin";
}) => {
marginLeft: {
readonly [$$PropertyValue]: "margin";
};
marginRight: {
readonly [$$PropertyValue]: "margin";
};
};
marginY: (value: {
readonly [$$PropertyValue]: "margin";
}) => {
marginTop: {
readonly [$$PropertyValue]: "margin";
};
marginBottom: {
readonly [$$PropertyValue]: "margin";
};
};
square: (value: {
readonly [$$PropertyValue]: "width";
}) => {
width: {
readonly [$$PropertyValue]: "width";
};
height: {
readonly [$$PropertyValue]: "width";
};
};
_hover: (css: _stitches_react_types_css_util.CSSProperties) => {
'&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
};
}>>>, "size" | "floating"> & _stitches_react_types_styled_component.TransformProps<{
floating?: boolean | "false" | "true" | undefined;
size?: "large" | "x-large" | undefined;
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLLabelElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"label">>, {
floating?: boolean | "false" | "true" | undefined;
size?: "large" | "x-large" | undefined;
}, {}>;
declare const inputSymbol: unique symbol;
declare type InputReactElement = React.ReactElement & {
[inputSymbol]?: boolean;
};
declare const isInputComponent: <T>(inputComponent: T & {
[inputSymbol]?: boolean | undefined;
}) => boolean;
export { FloatingLabel, InputReactElement, inputSymbol, isInputComponent, styles, useAriaDisabled };

4

package.json
{
"name": "@mirohq/design-system-base-input",
"version": "0.0.3-forms.0",
"version": "0.1.0-forms.1",
"description": "",

@@ -29,2 +29,4 @@ "author": "Miro",

"dependencies": {
"@mirohq/design-system-primitive": "^1.1.2-forms.0",
"@mirohq/design-system-stitches": "^2.6.0",
"@mirohq/design-system-types": "^0.6.2",

@@ -31,0 +33,0 @@ "@mirohq/design-system-utils": "^0.15.0-forms.0"

dist/main.js.map

Sorry, the diff of this file is not supported yet

dist/module.js.map

Sorry, the diff of this file is not supported yet