Socket
Socket
Sign inDemoInstall

@os-design/core

Package Overview
Dependencies
Maintainers
1
Versions
478
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@os-design/core - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

3

lib/Alert/AlertContainer.d.ts
/// <reference types="react" />
/// <reference types="@emotion/core" />
import { AlertProps } from './index';
/**
* The wrapper of the alert.
*/
declare const AlertContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<AlertProps, "type" | "sizing">, {

@@ -8,0 +5,0 @@ colorPrimary: string;

3

lib/Alert/AlertContainer.js

@@ -13,5 +13,2 @@ "use strict";

};
/**
* The wrapper of the alert.
*/
const AlertContainer = styled_1.default('div', utils_1.omitProps(['type', 'sizing'])) `

@@ -18,0 +15,0 @@ display: flex;

9

lib/Alert/index.d.ts

@@ -5,16 +5,7 @@ import React from 'react';

export interface AlertProps extends BaseProps, WithSizing {
/**
* Type of styles.
*/
type: 'info' | 'success' | 'error';
/**
* Whether to show icon.
*/
showIcon?: boolean;
}
/**
* The component for feedback.
*/
declare const Alert: React.FC<AlertProps>;
export default Alert;
//# sourceMappingURL=index.d.ts.map

3

lib/Alert/index.js

@@ -9,5 +9,2 @@ "use strict";

const AlertIcon_1 = __importDefault(require("./AlertIcon"));
/**
* The component for feedback.
*/
const Alert = props => (react_1.default.createElement(AlertContainer_1.default, { type: props.type, sizing: props.sizing, className: props.className },

@@ -14,0 +11,0 @@ props.showIcon && react_1.default.createElement(AlertIcon_1.default, { type: props.type }),

19

lib/Button/index.d.ts

@@ -5,28 +5,9 @@ import React from 'react';

export interface ButtonProps extends BaseProps, WithDarkMode, WithSizing {
/**
* Sets the background color transparent.
* @default false
*/
ghost?: boolean;
/**
* Sets the button shape.
* @default rounded
*/
shape?: 'rounded' | 'round' | 'circle';
/**
* Shows the loading status and disable the button.
* @default false
*/
loading?: boolean;
/**
* Sets the handler to handle the click event.
* @default undefined
*/
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
/**
* Allows to trigger corresponding business logic.
*/
declare const Button: React.FC<ButtonProps>;
export default Button;
//# sourceMappingURL=index.d.ts.map

18

lib/Button/index.js

@@ -11,5 +11,2 @@ "use strict";

const icons_1 = require("@os-design/icons");
/**
* Resets default button styles.
*/
const reset = core_1.css `

@@ -22,11 +19,5 @@ border: 0;

`;
/**
* Sets the text color.
*/
const color = p => core_1.css `
color: rgb(${p.darkMode ? p.theme.colorPrimary : '255,255,255'});
`;
/**
* Sets the background color.
*/
const backgroundColor = p => !p.ghost && core_1.css `

@@ -40,5 +31,2 @@ background-color: rgb(${p.darkMode ? '255,255,255' : p.theme.colorPrimary});

`;
/**
* Sets the ghost button styles.
*/
const ghost = p => p.ghost && core_1.css `

@@ -59,5 +47,2 @@ background-color: transparent;

`;
/**
* Sets 100% width on small screens.
*/
const responsive = p => p.shape !== 'circle' && core_1.css `

@@ -96,7 +81,4 @@ width: 100%;

`;
/**
* Allows to trigger corresponding business logic.
*/
const Button = props => (react_1.default.createElement(StyledButton, { darkMode: props.darkMode, ghost: props.ghost, shape: props.shape || 'rounded', sizing: props.sizing, loading: props.loading, disabled: props.loading, onClick: props.onClick, className: props.className }, props.loading ? react_1.default.createElement(icons_1.Loading, null) : props.children));
exports.default = Button;
//# sourceMappingURL=index.js.map

6

lib/Drawer/bodyScroll.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Disables the body scroll.
*/
const disable = () => {

@@ -10,5 +7,2 @@ document.body.style.overflow = 'hidden';

};
/**
* Enables the body scroll.
*/
const enable = () => {

@@ -15,0 +9,0 @@ document.body.removeAttribute('style');

3

lib/Drawer/DrawerContainer.d.ts
/// <reference types="react" />
/// <reference types="@emotion/core" />
import { DrawerProps } from './index';
/**
* The wrapper of the drawer.
*/
declare const DrawerContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<DrawerProps, "visible">, {

@@ -8,0 +5,0 @@ colorPrimary: string;

3

lib/Drawer/DrawerContainer.js

@@ -16,5 +16,2 @@ "use strict";

`;
/**
* The wrapper of the drawer.
*/
const DrawerContainer = styled_1.default('div', utils_1.omitProps(['visible'])) `

@@ -21,0 +18,0 @@ position: fixed;

3

lib/Drawer/DrawerContent.d.ts
/// <reference types="react" />
/// <reference types="@emotion/core" />
import { DrawerProps } from './index';
/**
* The content of the drawer.
*/
declare const DrawerContent: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<DrawerProps, "visible" | "width" | "placement">, {

@@ -8,0 +5,0 @@ colorPrimary: string;

6

lib/Drawer/DrawerContent.js

@@ -13,5 +13,2 @@ "use strict";

`;
/**
* Sets the position of the drawer.
*/
const placement = (p) => core_1.css `

@@ -23,5 +20,2 @@ ${p.placement === 'left' && core_1.css `left: 0;`};

`;
/**
* The content of the drawer.
*/
const DrawerContent = styled_1.default('div', utils_1.omitProps(['visible', 'placement', 'width'])) `

@@ -28,0 +22,0 @@ position: absolute;

3

lib/Drawer/DrawerMask.d.ts
/// <reference types="react" />
/// <reference types="@emotion/core" />
import { DrawerProps } from './index';
/**
* Darkens the background color.
*/
declare const DrawerMask: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<DrawerProps, "visible">, {

@@ -8,0 +5,0 @@ colorPrimary: string;

3

lib/Drawer/DrawerMask.js

@@ -19,5 +19,2 @@ "use strict";

`;
/**
* Darkens the background color.
*/
const DrawerMask = styled_1.default('div', utils_1.omitProps(['visible'])) `

@@ -24,0 +21,0 @@ position: absolute;

21

lib/Drawer/index.d.ts
import React from 'react';
import { BaseProps } from '@os-design/styled';
export interface DrawerProps extends BaseProps {
/**
* Whether the drawer is visible or not.
* @default false
*/
visible?: boolean;
/**
* The placement of the drawer.
* @default left
*/
placement?: 'left' | 'right';
/**
* The width of the drawer.
* @default 15em
*/
width?: string;
/**
* Specifies a callback that will be called when a user clicks mask.
* Callback should be sets the visible state to false.
* @default undefined
*/
onClose?: () => void;
}
/**
* The side panel which slides in from the edge of the screen.
* Used by mobile navigation, etc.
*/
declare const Drawer: React.FC<DrawerProps>;
export default Drawer;
//# sourceMappingURL=index.d.ts.map

5

lib/Drawer/index.js

@@ -19,8 +19,3 @@ "use strict";

const bodyScroll_1 = __importDefault(require("./bodyScroll"));
/**
* The side panel which slides in from the edge of the screen.
* Used by mobile navigation, etc.
*/
const Drawer = props => {
// Disables the body scroll if the drawer is visible
react_1.useEffect(props.visible ? bodyScroll_1.default.disable : bodyScroll_1.default.enable, [props.visible]);

@@ -27,0 +22,0 @@ return (react_1.default.createElement(Portal_1.default, null,

3

lib/Form/index.d.ts
import React from 'react';
/**
* Sets the indent between the form children.
*/
declare const Form: React.FC;
export default Form;
//# sourceMappingURL=index.d.ts.map

3

lib/Form/index.js

@@ -13,7 +13,4 @@ "use strict";

`;
/**
* Sets the indent between the form children.
*/
const Form = props => react_1.default.createElement(StyledForm, Object.assign({}, props));
exports.default = Form;
//# sourceMappingURL=index.js.map

4

lib/GlobalStyles/typography.js

@@ -9,6 +9,2 @@ "use strict";

const utils_1 = require("@os-design/utils");
/**
* Returns the base font size of headings.
* @param fontSizeDiff
*/
const hFontSizeStyle = (fontSizeDiff) => {

@@ -15,0 +11,0 @@ const h = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

31

lib/Input/index.d.ts

@@ -5,43 +5,12 @@ import React from 'react';

export interface InputProps extends BaseProps, WithDarkMode, WithSizing {
/**
* Defines the input type.
* @default text
*/
type?: 'text' | 'password';
/**
* Sets the placeholder text and the aria-label to give the input an accessible name.
* @default undefined
*/
placeholder?: string;
/**
* Sets the input value.
* @default undefined
*/
value?: string;
/**
* Places the InputIcon component to the left side.
* @default undefined
*/
left?: React.ReactNode;
/**
* Places the InputIcon component to the right side.
* @default undefined
*/
right?: React.ReactNode;
/**
* Sets the loading status.
* @default false
*/
loading?: boolean;
/**
* Sets the handler to handle the change event.
* @default undefined
*/
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
/**
* The basic user input component.
*/
declare const Input: React.FC<InputProps>;
export default Input;
//# sourceMappingURL=index.d.ts.map

3

lib/Input/index.js

@@ -11,5 +11,2 @@ "use strict";

const InputField_1 = __importDefault(require("./InputField"));
/**
* The basic user input component.
*/
const Input = props => {

@@ -16,0 +13,0 @@ const addons = {

3

lib/Input/InputAddon.d.ts

@@ -7,5 +7,2 @@ /// <reference types="react" />

}
/**
* Used to render the left or right component inside the input.
*/
declare const InputAddon: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, InputAddonProps, {

@@ -12,0 +9,0 @@ colorPrimary: string;

9

lib/Input/InputAddon.js

@@ -10,5 +10,2 @@ "use strict";

exports.INPUT_ADDON_ICON_PADDING_HORIZONTAL_EM = 0.5;
/**
* Sets styles to the inner icon.
*/
const innerIcon = (p) => core_1.css `

@@ -21,5 +18,2 @@ & > svg {

`;
/**
* Sets styles to the inner button with icon.
*/
const innerButton = core_1.css `

@@ -30,5 +24,2 @@ & > button {

`;
/**
* Used to render the left or right component inside the input.
*/
const InputAddon = styled_1.default('div', utils_1.omitProps(['position'])) `

@@ -35,0 +26,0 @@ position: absolute;

3

lib/Input/InputContainer.d.ts

@@ -5,5 +5,2 @@ /// <reference types="react" />

declare type InputContainer = Pick<InputProps, 'sizing'>;
/**
* The wrapper of the input field.
*/
declare const InputContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<InputProps, "sizing">, {

@@ -10,0 +7,0 @@ colorPrimary: string;

3

lib/Input/InputContainer.js

@@ -8,5 +8,2 @@ "use strict";

const utils_1 = require("@os-design/utils");
/**
* The wrapper of the input field.
*/
const InputContainer = styled_1.default('div', utils_1.omitProps(['sizing'])) `

@@ -13,0 +10,0 @@ position: relative;

12

lib/Input/InputField.js

@@ -11,5 +11,2 @@ "use strict";

exports.INPUT_PADDING_HORIZONTAL_EM = InputAddon_1.INPUT_ADDON_ICON_PADDING_HORIZONTAL_EM * 2.4 + 1;
/**
* Resets default input styles.
*/
const reset = core_1.css `

@@ -20,5 +17,2 @@ &:focus {

`;
/**
* Sets the default color styles.
*/
const color = (p) => !p.darkMode && core_1.css `

@@ -36,5 +30,2 @@ border: 1px solid rgb(${p.theme.colorBorder});

`;
/**
* Sets the background color dark and the text color white.
*/
const darkMode = (p) => p.darkMode && core_1.css `

@@ -54,5 +45,2 @@ border: 0;

`;
/**
* Sets the padding for the left or right component.
*/
const addonPadding = (p) => core_1.css `

@@ -59,0 +47,0 @@ ${p.left && core_1.css `padding-left: ${exports.INPUT_PADDING_HORIZONTAL_EM}em;`};

3

lib/InputPassword/index.d.ts
import React from 'react';
import { InputProps } from '../Input';
export declare type InputPasswordProps = Omit<InputProps, 'type' | 'right'>;
/**
* User can switch between hide and view password by clicking to the eye icon on the right side.
*/
declare const InputPassword: React.FC<InputPasswordProps>;
export default InputPassword;
//# sourceMappingURL=index.d.ts.map

4

lib/InputPassword/index.js

@@ -17,8 +17,4 @@ "use strict";

const Button_1 = __importDefault(require("../Button"));
/**
* User can switch between hide and view password by clicking to the eye icon on the right side.
*/
const InputPassword = props => {
const [securely, setSecurely] = react_1.useState(true);
// The switcher placed on the right side
const securelySwitcher = (react_1.default.createElement(Button_1.default, { darkMode: !props.darkMode, ghost: true, onClick: () => setSecurely(!securely) }, securely ? react_1.default.createElement(icons_1.EyeInvisible, null) : react_1.default.createElement(icons_1.Eye, null)));

@@ -25,0 +21,0 @@ return (react_1.default.createElement(Input_1.default, Object.assign({}, props, { type: securely ? 'password' : 'text', right: securelySwitcher })));

4

lib/Label/index.d.ts
import React from 'react';
import { BaseProps } from '@os-design/styled';
export interface LabelProps extends BaseProps {
/** Sets the text. */
value: string;
}
/**
* The text placed over the children component (e.g. over the input component).
*/
declare const Label: React.FC<LabelProps>;
export default Label;
//# sourceMappingURL=index.d.ts.map

7

lib/Label/index.js

@@ -15,8 +15,3 @@ "use strict";

`;
/**
* The text placed over the children component (e.g. over the input component).
*/
const Label = props => (
// eslint-disable-next-line jsx-a11y/label-has-associated-control
react_1.default.createElement(LabelContainer, { className: props.className },
const Label = props => (react_1.default.createElement(LabelContainer, { className: props.className },
react_1.default.createElement(LabelText, null, props.value),

@@ -23,0 +18,0 @@ props.children));

18

lib/Link/index.d.ts

@@ -5,11 +5,3 @@ import { BaseProps } from '@os-design/styled';

export interface LinkProps extends BaseProps, WithDarkMode, WithSizing {
/**
* The link of the destination.
* @default undefined
*/
href?: string;
/**
* Sets the handler to handle the click event.
* @default undefined
*/
onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;

@@ -20,13 +12,7 @@ }

colorBorder: string;
colorPlaceholder: string; /**
* The link of the destination.
* @default undefined
*/
colorPlaceholder: string;
fontSize: number[];
sizing: {
small: number;
medium: number; /**
* Sets the handler to handle the click event.
* @default undefined
*/
medium: number;
large: number;

@@ -33,0 +19,0 @@ };

41

lib/Link/index.js

@@ -9,5 +9,2 @@ "use strict";

const core_1 = require("@emotion/core");
/**
* Sets the default color styles.
*/
const color = (p) => !p.darkMode && core_1.css `

@@ -18,5 +15,26 @@ &, &:active, &:focus {

`;
/**
* Sets the white color.
*/
const UNDERLINE_HEIGHT_EM = 0.1;
const underline = (p) => core_1.css `
position: relative;
padding-bottom: 0.02em;
display: inline-block;
&::after {
position: absolute;
bottom: 0;
left: 0;
content: "";
background-color: rgb(${p.theme.colorPrimary});
height: ${UNDERLINE_HEIGHT_EM}em;
width: 0;
opacity: 0;
${utils_1.transition('width', 'opacity')(p)};
}
&:hover::after {
width: 100%;
opacity: 1;
}
`;
const darkMode = (p) => p.darkMode && core_1.css `

@@ -27,4 +45,5 @@ &, &:active, &:focus, &:hover {

&, &:active, &:focus {
opacity: 1;
// Underline color
&::after {
background-color: #fff;
}

@@ -36,12 +55,10 @@ `;

&:hover {
text-decoration: underline;
}
${color};
${underline};
${darkMode};
${utils_1.sizing};
${utils_1.transition('opacity')};
`;
exports.default = Link;
//# sourceMappingURL=index.js.map

4

lib/Portal/index.d.ts
import React from 'react';
/**
* Renders the children at the end of the body. Support SSR.
* Should be used to render drawers, modals, etc.
*/
declare const Portal: React.FC;
export default Portal;
//# sourceMappingURL=index.d.ts.map

4

lib/Portal/index.js

@@ -5,6 +5,2 @@ "use strict";

const react_dom_1 = require("react-dom");
/**
* Renders the children at the end of the body. Support SSR.
* Should be used to render drawers, modals, etc.
*/
const Portal = props => {

@@ -11,0 +7,0 @@ const ref = react_1.useRef();

4

package.json
{
"name": "@os-design/core",
"version": "0.0.18",
"version": "0.0.19",
"license": "MIT",

@@ -31,3 +31,3 @@ "main": "lib/index.js",

},
"gitHead": "92aa4f2a9918bc352793c02965d457a8d5199004"
"gitHead": "6f1f4f5a4862329e47c123f91d827d4ba839d95f"
}
lib/Alert/AlertContainer.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Alert/AlertContainer.js.map

Sorry, the diff of this file is not supported yet

lib/Alert/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Alert/index.js.map

Sorry, the diff of this file is not supported yet

lib/Button/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Button/index.js.map

Sorry, the diff of this file is not supported yet

lib/Drawer/bodyScroll.js.map

Sorry, the diff of this file is not supported yet

lib/Drawer/DrawerContainer.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Drawer/DrawerContainer.js.map

Sorry, the diff of this file is not supported yet

lib/Drawer/DrawerContent.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Drawer/DrawerContent.js.map

Sorry, the diff of this file is not supported yet

lib/Drawer/DrawerMask.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Drawer/DrawerMask.js.map

Sorry, the diff of this file is not supported yet

lib/Drawer/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Drawer/index.js.map

Sorry, the diff of this file is not supported yet

lib/Form/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Form/index.js.map

Sorry, the diff of this file is not supported yet

lib/GlobalStyles/typography.js.map

Sorry, the diff of this file is not supported yet

lib/Input/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Input/index.js.map

Sorry, the diff of this file is not supported yet

lib/Input/InputAddon.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Input/InputAddon.js.map

Sorry, the diff of this file is not supported yet

lib/Input/InputContainer.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Input/InputContainer.js.map

Sorry, the diff of this file is not supported yet

lib/Input/InputField.js.map

Sorry, the diff of this file is not supported yet

lib/InputPassword/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/InputPassword/index.js.map

Sorry, the diff of this file is not supported yet

lib/Label/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Label/index.js.map

Sorry, the diff of this file is not supported yet

lib/Link/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Link/index.js.map

Sorry, the diff of this file is not supported yet

lib/Portal/index.d.ts.map

Sorry, the diff of this file is not supported yet

lib/Portal/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc