@exivity/ui - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

Button/Button.js

@@ -21,10 +21,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import Icon from '../Icon';
-export var Button = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: 500;\n  font-size: ", "px;\n  color: ", ";\n  line-height: ", ";\n\n  text-transform: uppercase;\n  display: inline-flex;\n  position: relative;\n  appearance: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 2.5em;\n  height: ", "em; // 40px = 2.5 * 16\n  padding: 0 ", "em;\n  border: none;\n  border-radius: ", ";\n  flex: none;\n  user-select: none;\n  white-space: nowrap;\n  text-decoration: none;\n  outline: none;\n\n  background-color: ", ";\n  --focus-color: ", ";\n\n  &:hover {\n    box-shadow: inset 10px 10px 999em rgba(0,0,0,0.15);\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 999em rgba(0,0,0,0.15),\n      0 0 0 ", " rgba(var(--focus-color), 0.3);\n  }\n\n  &:active,\n  &.active {\n    box-shadow: inset 0 0 999em rgba(0,0,0,0.3),\n      0 0 0 ", " rgba(var(--focus-color), 0.3);\n  }\n\n  &:after {\n    display: none;\n    content: \"\";\n    position: absolute;\n    top: -", ";\n    right: -", ";\n    bottom: -", ";\n    left: -", ";\n    border-radius: inherit;\n    background-color: rgba(255, 255, 255, 0.5);\n  }\n\n  &[disabled] {\n    pointer-events: none;\n    &:after {\n      display: block;\n    }\n  }\n\n  ", "\n\n  ", " {\n    margin-right: ", "em;\n  }\n"], ["\n  font-family: ", ";\n  font-weight: 500;\n  font-size: ",
-    "px;\n  color: ", ";\n  line-height: ", ";\n\n  text-transform: uppercase;\n  display: inline-flex;\n  position: relative;\n  appearance: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 2.5em;\n  height: ", "em; // 40px = 2.5 * 16\n  padding: 0 ", "em;\n  border: none;\n  border-radius: ", ";\n  flex: none;\n  user-select: none;\n  white-space: nowrap;\n  text-decoration: none;\n  outline: none;\n\n  background-color: ", ";\n  --focus-color: ", ";\n\n  &:hover {\n    box-shadow: inset 10px 10px 999em rgba(0,0,0,0.15);\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 999em rgba(0,0,0,0.15),\n      0 0 0 ", " rgba(var(--focus-color), 0.3);\n  }\n\n  &:active,\n  &.active {\n    box-shadow: inset 0 0 999em rgba(0,0,0,0.3),\n      0 0 0 ", " rgba(var(--focus-color), 0.3);\n  }\n\n  &:after {\n    display: none;\n    content: \"\";\n    position: absolute;\n    top: -", ";\n    right: -", ";\n    bottom: -", ";\n    left: -", ";\n    border-radius: inherit;\n    background-color: rgba(255, 255, 255, 0.5);\n  }\n\n  &[disabled] {\n    pointer-events: none;\n    &:after {\n      display: block;\n    }\n  }\n\n  ",
+export var Button = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: 500;\n  font-size: ", "px;\n  color: ", ";\n  line-height: ", ";\n\n  text-transform: uppercase;\n  display: inline-flex;\n  position: relative;\n  appearance: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 2.5em;\n  height: ", "em; // 40px = 2.5 * 16\n  padding: 0 ", "em;\n  border: none;\n  border-radius: ", "px;\n  flex: none;\n  user-select: none;\n  white-space: nowrap;\n  text-decoration: none;\n  outline: none;\n\n  background-color: ", ";\n  --focus-color: ", ";\n\n  &:hover {\n    box-shadow: inset 10px 10px 999em rgba(0,0,0,", ");\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 999em rgba(0,0,0,", "),\n      0 0 0 ", "px rgba(var(--focus-color), ", ");\n  }\n\n  &:active,\n  &.active {\n    box-shadow: inset 0 0 999em rgba(0,0,0,", "),\n      0 0 0 ", "px rgba(var(--focus-color), ", ");\n  }\n\n  &:after {\n    display: none;\n    content: \"\";\n    position: absolute;\n    top: -", "px;\n    right: -", "px;\n    bottom: -", "px;\n    left: -", "px;\n    border-radius: inherit;\n    background-color: rgba(255, 255, 255, 0.5);\n  }\n\n  &[disabled] {\n    pointer-events: none;\n    &:after {\n      display: block;\n    }\n  }\n\n  ", "\n\n  ", " {\n    margin-right: ", "em;\n  }\n"], ["\n  font-family: ", ";\n  font-weight: 500;\n  font-size: ",
+    "px;\n  color: ", ";\n  line-height: ", ";\n\n  text-transform: uppercase;\n  display: inline-flex;\n  position: relative;\n  appearance: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 2.5em;\n  height: ", "em; // 40px = 2.5 * 16\n  padding: 0 ", "em;\n  border: none;\n  border-radius: ", "px;\n  flex: none;\n  user-select: none;\n  white-space: nowrap;\n  text-decoration: none;\n  outline: none;\n\n  background-color: ", ";\n  --focus-color: ", ";\n\n  &:hover {\n    box-shadow: inset 10px 10px 999em rgba(0,0,0,", ");\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 999em rgba(0,0,0,", "),\n      0 0 0 ", "px rgba(var(--focus-color), ", ");\n  }\n\n  &:active,\n  &.active {\n    box-shadow: inset 0 0 999em rgba(0,0,0,", "),\n      0 0 0 ", "px rgba(var(--focus-color), ", ");\n  }\n\n  &:after {\n    display: none;\n    content: \"\";\n    position: absolute;\n    top: -", "px;\n    right: -", "px;\n    bottom: -", "px;\n    left: -", "px;\n    border-radius: inherit;\n    background-color: rgba(255, 255, 255, 0.5);\n  }\n\n  &[disabled] {\n    pointer-events: none;\n    &:after {\n      display: block;\n    }\n  }\n\n  ",
     "\n\n  ", " {\n    margin-right: ", "em;\n  }\n"])), fromTheme(function (theme) { return theme.global.fontFamily; }), matchThemeProp(function (theme) { return theme.global.sizes; }, {
     modifier: function (em) { return em * 14; },
     defaultValue: 14
-}), fromTheme(function (theme) { return theme.colours.white; }), fromTheme(function (theme) { return theme.global.lineHeight; }), preciseEm(2.85, 14), preciseEm(1.5), fromTheme(function (theme) { return theme.global.borderRadius; }), matchThemeProp(function (theme) { return theme.global.purposes; }), matchThemeProp(function (theme) { return theme.global.purposes; }, { modifier: hexToString }), fromTheme(function (theme) { return theme.global.outlineWidth; }), fromTheme(function (theme) { return theme.global.outlineWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; }), function (props) { return props.outlined && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", ";\n\n    &:hover {\n      color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 ", " ", ",\n       0 0 0 5px rgba(var(--focus-color), 0.3);\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", ";\n\n    &:hover {\n      color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 ", " ", ",\n       0 0 0 5px rgba(var(--focus-color), 0.3);\n    }\n  "])), fromTheme(function (theme) { return theme.colours.white; }), matchThemeProp(function (theme) { return theme.global.purposes; }), fromTheme(function (theme) { return theme.global.borderWidth; }), matchThemeProp(function (theme) { return theme.global.purposes; }), fromTheme(function (theme) { return theme.global.textColor; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.textColor; }), fromTheme(function (theme) { return theme.global.borderWidth; }), matchThemeProp(function (theme) { return theme.global.purposes; })); }, Icon, fromTheme(function (theme) { return theme.global.spacing / 2; }));
+}), fromTheme(function (theme) { return theme.colours.white; }), fromTheme(function (theme) { return theme.global.lineHeight; }), preciseEm(2.85, 14), preciseEm(1.5), fromTheme(function (theme) { return theme.global.borderRadius; }), matchThemeProp(function (theme) { return theme.global.purposes; }), matchThemeProp(function (theme) { return theme.global.purposes; }, { modifier: hexToString }), fromTheme(function (theme) { return theme.global.shadowAlpha; }), fromTheme(function (theme) { return theme.global.shadowAlpha; }), fromTheme(function (theme) { return theme.global.outlineWidth; }), fromTheme(function (theme) { return theme.global.outlineAlpha; }), fromTheme(function (theme) { return theme.global.shadowAlpha * 2; }), fromTheme(function (theme) { return theme.global.outlineWidth; }), fromTheme(function (theme) { return theme.global.outlineAlpha; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; }), function (props) { return props.outlined && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", "px ", ";\n\n    &:hover {\n      color: ", ";\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 ", "px ", ",\n       0 0 0 ", "px rgba(var(--focus-color), ", ");\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", "px ", ";\n\n    &:hover {\n      color: ", ";\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 ", "px ", ",\n       0 0 0 ", "px rgba(var(--focus-color), ", ");\n    }\n  "])), fromTheme(function (theme) { return theme.colours.white; }), matchThemeProp(function (theme) { return theme.global.purposes; }), fromTheme(function (theme) { return theme.global.borderWidth; }), matchThemeProp(function (theme) { return theme.global.purposes; }), fromTheme(function (theme) { return theme.global.textColor; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.textColor; }), fromTheme(function (theme) { return theme.global.borderWidth; }), matchThemeProp(function (theme) { return theme.global.purposes; }), fromTheme(function (theme) { return theme.global.outlineWidth + 1; }), fromTheme(function (theme) { return theme.global.outlineAlpha; })); }, Icon, fromTheme(function (theme) { return theme.global.spacing / 2; }));
 Button.defaultProps = __assign({}, defaultStyledProps, { primary: true });
 export default Button;
 var templateObject_1, templateObject_2;

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+<a name="0.4.0"></a>
+# [0.4.0](https://github.com/exivity/ui/compare/v0.3.3...v0.4.0) (2019-03-05)
+
+
+### Features
+
+* field ([#17](https://github.com/exivity/ui/issues/17)) ([80b144b](https://github.com/exivity/ui/commit/80b144b))
+
+
+
 <a name="0.3.3"></a>
@@ -7,0 +17,0 @@ ## [0.3.3](https://github.com/exivity/ui/compare/v0.3.2...v0.3.3) (2019-03-05)

Checkbox/index.d.ts

@@ -1,10 +0,1 @@
-import * as React from 'react';
-export interface ICheckboxProps {
-    checked: boolean;
-    onClick?: (value: boolean) => void;
-    onChange?: (value: boolean) => void;
-    className?: string;
-}
-export declare const Checkbox: React.FC<ICheckboxProps>;
-declare const _default: import("styled-components").StyledComponent<React.FunctionComponent<ICheckboxProps>, any, {}, never>;
-export default _default;
+export { default } from './Checkbox';

Checkbox/index.js

@@ -1,40 +0,1 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-var CheckboxWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 20px;\n    width: 100px;\n    height: 100px;\n    overflow: hidden;\n\n    ", "\n"], ["\n    margin: 20px;\n    width: 100px;\n    height: 100px;\n    overflow: hidden;\n\n    ",
-    "\n"])), function (props) { return props.checked && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &:after {\n          position: relative;\n          left: 5px;\n          top: -30px;\n          transform: rotateZ(45deg);\n          border: solid #fff;\n          border-width: 0 3px 3px 0;\n          content: ' ';\n          display: block;\n          width: 6px;\n          height: 12px;\n          cursor: pointer;\n        }\n    "], ["\n        &:after {\n          position: relative;\n          left: 5px;\n          top: -30px;\n          transform: rotateZ(45deg);\n          border: solid #fff;\n          border-width: 0 3px 3px 0;\n          content: ' ';\n          display: block;\n          width: 6px;\n          height: 12px;\n          cursor: pointer;\n        }\n    "]))); });
-export var Checkbox = function (_a) {
-    var checked = _a.checked, onClick = _a.onClick, className = _a.className, onChange = _a.onChange, props = __rest(_a, ["checked", "onClick", "className", "onChange"]);
-    return (React.createElement(CheckboxWrapper, { checked: checked },
-        React.createElement("input", __assign({ className: className, type: 'checkbox', onClick: function (e) {
-                var checked = e.target.checked;
-                onClick && onClick(checked);
-            }, onChange: function (e) {
-                onChange && onChange(e.target.checked);
-            }, checked: checked }, props))));
-};
-export default styled(Checkbox)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  background: ", ";\n  color: black;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: none;\n  position: relative;\n  left: -5px;\n  top: -5px;\n\n  :focus {\n    outline:0;\n  }\n"], ["\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  background: ", ";\n  color: black;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: none;\n  position: relative;\n  left: -5px;\n  top: -5px;\n\n  :focus {\n    outline:0;\n  }\n"])), function (props) { return props.checked ? 'rgba(40,40,40,0.7)' : 'rgba(40,40,40,0.2)'; });
-var templateObject_1, templateObject_2, templateObject_3;
+export { default } from './Checkbox';

defaultTheme/theme.d.ts

@@ -20,5 +20,7 @@ import { DeepReadonly } from '../utils/types';
         lineHeight: number;
-        borderRadius: string;
-        borderWidth: string;
-        outlineWidth: string;
+        borderRadius: number;
+        borderWidth: number;
+        outlineWidth: number;
+        outlineAlpha: number;
+        shadowAlpha: number;
         spacing: number;
@@ -25,0 +27,0 @@ purposes: {

defaultTheme/theme.js

@@ -48,5 +48,7 @@ var __assign = (this && this.__assign) || function () {
         lineHeight: 1.5,
-        borderRadius: '4px',
-        borderWidth: '1px',
-        outlineWidth: '4px',
+        borderRadius: 4,
+        borderWidth: 1,
+        outlineWidth: 4,
+        outlineAlpha: 0.15,
+        shadowAlpha: 0.1,
         spacing: preciseEm(1.25),
@@ -53,0 +55,0 @@ purposes: {

package.json

 {
   "name": "@exivity/ui",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "A collection of components to build interfaces",
@@ -5,0 +5,0 @@ "keywords": [

TextInput/TextInput.d.ts

@@ -1,15 +0,11 @@
-import * as React from 'react';
-interface ITextInputProps {
+import React, { ChangeEvent, InputHTMLAttributes } from 'react';
+import { InputProps } from '../utils/theme';
+import { Omit } from '../utils/types';
+declare type OmitOnChange = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
+interface TextInputProps extends InputProps {
     value: string;
-    onChange: (value: string) => void;
-    outlined?: boolean;
-    primary?: boolean;
-    secondary?: boolean;
-    success?: boolean;
-    danger?: boolean;
-    small?: boolean;
-    large?: boolean;
+    onChange: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const TextInput: React.FC<ITextInputProps>;
-declare const StyledTextInput: import("styled-components").StyledComponent<React.FunctionComponent<ITextInputProps>, any, {}, never>;
+export declare const TextInput: React.FC<TextInputProps & OmitOnChange>;
+declare const StyledTextInput: import("styled-components").StyledComponent<React.FunctionComponent<TextInputProps & Pick<React.InputHTMLAttributes<HTMLInputElement>, "form" | "style" | "title" | "pattern" | "color" | "height" | "width" | "hidden" | "size" | "multiple" | "disabled" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "max" | "min" | "crossOrigin" | "alt" | "src" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "required">>, any, {}, never>;
 export default StyledTextInput;

TextInput/TextInput.js

@@ -25,18 +25,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 };
-import * as React from 'react';
-import styled, { css } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 import defaultStyledProps from '../utils/testing/defaultStyledProps';
-import { fromTheme, globalFont, hexToString, matchThemeProp } from '../utils/theme';
+import { globalInput } from '../utils/theme';
 export var TextInput = function (_a) {
-    var value = _a.value, onChange = _a.onChange, rest = __rest(_a, ["value", "onChange"]);
-    return (React.createElement("input", __assign({ type: 'text', value: value, onChange: function (event) { return onChange(event.target.value); } }, rest)));
+    var onChange = _a.onChange, rest = __rest(_a, ["onChange"]);
+    return (React.createElement("input", __assign({ type: 'text', onChange: function (event) { return onChange(event.target.value, event); } }, rest)));
 };
-var StyledTextInput = styled(TextInput)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  font-size: ", "px;\n\n  display: block;\n  width: 100%;\n  padding: 0 0.5em;\n  height: 2.5em;\n  background-color: ", ";\n  border-radius: ", ";\n  outline: 0;\n  border: 0;\n\n  ", "\n\n  --focus-color: ", ";\n\n  &:focus {\n    box-shadow: 0 0 0 ", " rgba(var(--focus-color), 0.3);\n  }\n\n  &[type=\"checkbox\"],\n  &[type=\"radio\"] {\n    display: inline-block;\n    width: auto;\n    height: auto;\n    padding: 0;\n  }\n\n  &::placeholder {\n    color: currentcolor;\n    opacity: 0.5;\n  }\n\n  textarea & {\n    padding: 0.5em;\n    height: auto;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    box-shadow: inset 0 0 999em rgba(128, 128, 128, 0.2);\n  }\n"], ["\n  ", ";\n  font-size: ",
-    "px;\n\n  display: block;\n  width: 100%;\n  padding: 0 0.5em;\n  height: 2.5em;\n  background-color: ", ";\n  border-radius: ", ";\n  outline: 0;\n  border: 0;\n\n  ",
-    "\n\n  --focus-color: ", ";\n\n  &:focus {\n    box-shadow: 0 0 0 ", " rgba(var(--focus-color), 0.3);\n  }\n\n  &[type=\"checkbox\"],\n  &[type=\"radio\"] {\n    display: inline-block;\n    width: auto;\n    height: auto;\n    padding: 0;\n  }\n\n  &::placeholder {\n    color: currentcolor;\n    opacity: 0.5;\n  }\n\n  textarea & {\n    padding: 0.5em;\n    height: auto;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    box-shadow: inset 0 0 999em rgba(128, 128, 128, 0.2);\n  }\n"])), globalFont, matchThemeProp(function (theme) { return theme.global.sizes; }, {
-    modifier: function (em) { return em * 16; },
-    defaultValue: 16
-}), fromTheme(function (theme) { return theme.colours.lightGray; }), fromTheme(function (theme) { return theme.global.borderRadius; }), function (props) { return props.outlined && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: ", " solid ", ";\n  "], ["\n    border: ", " solid ", ";\n  "])), fromTheme(function (theme) { return theme.global.borderWidth; }), matchThemeProp(function (theme) { return theme.global.purposes; })); }, matchThemeProp(function (theme) { return theme.global.purposes; }, { modifier: hexToString }), fromTheme(function (theme) { return theme.global.outlineWidth; }));
+var StyledTextInput = styled(TextInput)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), globalInput);
 StyledTextInput.defaultProps = __assign({}, defaultStyledProps, { value: '', secondary: true });
 export default StyledTextInput;
-var templateObject_1, templateObject_2;
+var templateObject_1;

utils/index.d.ts

@@ -0,1 +1,2 @@
+import { Omit } from './types';
 export interface MapItem {
@@ -9,2 +10,4 @@ key: string;
 export declare function createMap<T extends MapItem>(data: MapData<T>): Map<T>;
+export declare function omit<T, E extends keyof T>(obj: T, keys: E[]): Omit<T, E>;
+export declare const tuple: <T extends string[]>(...args: T) => T;
 export {};

utils/index.js

@@ -8,1 +8,20 @@ export function createMap(data) {
 }
+export function omit(obj, keys) {
+    return Object.entries(obj)
+        .filter(function (_a) {
+        var key = _a[0];
+        return !keys.includes(key);
+    })
+        .reduce(function (obj, _a) {
+        var key = _a[0], val = _a[1];
+        var _b;
+        return Object.assign(obj, (_b = {}, _b[key] = val, _b));
+    }, {});
+}
+export var tuple = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args;
+};

utils/testing/defaultStyledProps.d.ts

@@ -19,5 +19,7 @@ declare const defaultStyledProps: {
             lineHeight: number;
-            borderRadius: string;
-            borderWidth: string;
-            outlineWidth: string;
+            borderRadius: number;
+            borderWidth: number;
+            outlineWidth: number;
+            outlineAlpha: number;
+            shadowAlpha: number;
             spacing: number;
@@ -24,0 +26,0 @@ purposes: {

utils/theme.d.ts

@@ -10,2 +10,11 @@ import { Theme } from '../defaultTheme/theme';
 }
+export interface InputProps extends StyledProps {
+    outlined?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    success?: boolean;
+    danger?: boolean;
+    small?: boolean;
+    large?: boolean;
+}
 export declare const fromTheme: (themeResolver: ThemeResolver, options?: ThemeHelperOptions) => (props: StyledProps) => any;
@@ -15,2 +24,5 @@ export declare const matchThemeProp: (themeResolver: ThemeResolver, options?: ThemeHelperOptions) => (props: StyledProps) => any;
 export declare const globalFont: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const globalInput: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<InputProps & {
+    outlined?: boolean | undefined;
+}, any>>;
 export {};

utils/theme.js

@@ -39,2 +39,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 export var globalFont = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: normal;\n  font-size: ", "px;\n  color: ", ";\n  line-height: ", ";\n"], ["\n  font-family: ", ";\n  font-weight: normal;\n  font-size: ", "px;\n  color: ", ";\n  line-height: ", ";\n"])), fromTheme(function (theme) { return theme.global.fontFamily; }), fromTheme(function (theme) { return theme.global.baseSize; }), fromTheme(function (theme) { return theme.global.textColor; }), fromTheme(function (theme) { return theme.global.lineHeight; }));
-var templateObject_1;
+export var globalInput = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n\n  font-size: ", "px;\n\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: calc(0.5em - ", "px) 0.5em; // subtract border to get a height of exactly 2.5em for single line items\n\n  border-radius: ", "px;\n  outline: 0;\n  border: 0;\n\n  --focus-color: ", ";\n\n  ", "\n\n  --focus-color: ", ";\n\n  &::placeholder {\n    color: currentcolor;\n    opacity: 0.5;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    box-shadow: inset 0 0 999em rgba(128, 128, 128, 0.2);\n  }\n"], ["\n  ", ";\n\n  font-size: ",
+    "px;\n\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: calc(0.5em - ", "px) 0.5em; // subtract border to get a height of exactly 2.5em for single line items\n\n  border-radius: ", "px;\n  outline: 0;\n  border: 0;\n\n  --focus-color: ", ";\n\n  ",
+    "\n\n  --focus-color: ", ";\n\n  &::placeholder {\n    color: currentcolor;\n    opacity: 0.5;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    box-shadow: inset 0 0 999em rgba(128, 128, 128, 0.2);\n  }\n"])), globalFont, matchThemeProp(function (theme) { return theme.global.sizes; }, {
+    modifier: function (em) { return em * 16; },
+    defaultValue: 16
+}), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderRadius; }), matchThemeProp(function (theme) { return theme.global.purposes; }, { modifier: hexToString }), function (props) { return props.outlined
+    ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      border: ", "px solid ", ";\n      background-color: unset;\n\n      &:hover {\n        border: ", "px solid ", ";\n      }\n\n      &:focus {\n        border: ", "px solid ", ";\n      }\n    "], ["\n      border: ", "px solid ", ";\n      background-color: unset;\n\n      &:hover {\n        border: ", "px solid ", ";\n      }\n\n      &:focus {\n        border: ", "px solid ", ";\n      }\n    "])), fromTheme(function (theme) { return theme.global.borderWidth; }), matchThemeProp(function (theme) { return theme.global.purposes; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.colours.gray; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.colours.dark; })) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border: ", "px solid ", ";\n      background-color: ", ";\n\n      &:hover {\n        border-bottom: ", "px solid rgba(var(--focus-color), 0.5);\n      }\n\n      &:focus {\n        border-bottom: ", "px solid rgba(var(--focus-color), 1);\n      }\n    "], ["\n      border: ", "px solid ", ";\n      background-color: ", ";\n\n      &:hover {\n        border-bottom: ", "px solid rgba(var(--focus-color), 0.5);\n      }\n\n      &:focus {\n        border-bottom: ", "px solid rgba(var(--focus-color), 1);\n      }\n    "])), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.colours.lightGray; }), fromTheme(function (theme) { return theme.colours.lightGray; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; })); }, matchThemeProp(function (theme) { return theme.global.purposes; }, { modifier: hexToString }));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

utils/types.d.ts

@@ -9,1 +9,5 @@ export declare type primitive = string | number | boolean | undefined | null;
 }
+export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+export declare type ObjectOf<T> = {
+    [key: string]: T;
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70293

increased by40.27%

Number of package files

69

increased by21.05%

Lines of code

1009

increased by24.72%

No dependency changes