@spark-web/text-input 1.0.0

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput, useInput } from './TextInput';
+export type { TextInputProps, UseInputProps } from './TextInput';

package/dist/spark-web-text-input.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

package/dist/spark-web-text-input.cjs.dev.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/esm/slicedToArray');
+var _extends = require('@babel/runtime/helpers/esm/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var React = require('react');
+var css = require('@emotion/css');
+var a11y = require('@spark-web/a11y');
+var box = require('@spark-web/box');
+var field = require('@spark-web/field');
+var text = require('@spark-web/text');
+var theme = require('@spark-web/theme');
+var internal = require('@spark-web/utils/internal');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var _excluded = ["data"],
+    _excluded2 = ["disabled", "invalid"];
+var __jsx = React__default["default"].createElement;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** Organize and emphasize information quickly and effectively in a list of text elements. */
+var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var data = _ref.data,
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useFieldContext = field.useFieldContext(),
+      disabled = _useFieldContext.disabled,
+      invalid = _useFieldContext.invalid,
+      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+
+  var inputStyles = useInput({
+    disabled: disabled,
+    invalid: invalid
+  });
+  return __jsx(box.Box, _extends({
+    as: "input",
+    disabled: disabled,
+    ref: forwardedRef // styles
+    ,
+    background: disabled ? 'inputDisabled' : 'input',
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    height: "medium",
+    paddingX: "medium",
+    className: css.css(inputStyles)
+  }, data ? internal.buildDataAttributes(data) : null, a11yProps, consumerProps));
+});
+TextInput.displayName = 'TextInput'; // Styled components
+// ------------------------------
+
+function useInput(_ref2) {
+  var disabled = _ref2.disabled;
+  var theme$1 = theme.useTheme();
+  var focusRingStyles = a11y.useFocusRing({
+    always: true
+  });
+  var textStyles = text.useText({
+    baseline: false,
+    tone: disabled ? 'disabled' : 'neutral',
+    size: 'standard',
+    weight: 'regular'
+  });
+
+  var _textStyles = _slicedToArray(textStyles, 2),
+      typographyStyles = _textStyles[0],
+      responsiveStyles = _textStyles[1];
+
+  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
+    ':enabled': {
+      '&:hover': {
+        borderColor: theme$1.border.color.fieldHover
+      },
+      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+        borderColor: theme$1.border.color.fieldAccent
+      })
+    }
+  });
+}
+
+exports.TextInput = TextInput;
+exports.useInput = useInput;

package/dist/spark-web-text-input.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-text-input.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-text-input.cjs.dev.js");
+}

package/dist/spark-web-text-input.cjs.prod.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/esm/slicedToArray');
+var _extends = require('@babel/runtime/helpers/esm/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var React = require('react');
+var css = require('@emotion/css');
+var a11y = require('@spark-web/a11y');
+var box = require('@spark-web/box');
+var field = require('@spark-web/field');
+var text = require('@spark-web/text');
+var theme = require('@spark-web/theme');
+var internal = require('@spark-web/utils/internal');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var _excluded = ["data"],
+    _excluded2 = ["disabled", "invalid"];
+var __jsx = React__default["default"].createElement;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** Organize and emphasize information quickly and effectively in a list of text elements. */
+var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var data = _ref.data,
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useFieldContext = field.useFieldContext(),
+      disabled = _useFieldContext.disabled,
+      invalid = _useFieldContext.invalid,
+      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+
+  var inputStyles = useInput({
+    disabled: disabled,
+    invalid: invalid
+  });
+  return __jsx(box.Box, _extends({
+    as: "input",
+    disabled: disabled,
+    ref: forwardedRef // styles
+    ,
+    background: disabled ? 'inputDisabled' : 'input',
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    height: "medium",
+    paddingX: "medium",
+    className: css.css(inputStyles)
+  }, data ? internal.buildDataAttributes(data) : null, a11yProps, consumerProps));
+});
+TextInput.displayName = 'TextInput'; // Styled components
+// ------------------------------
+
+function useInput(_ref2) {
+  var disabled = _ref2.disabled;
+  var theme$1 = theme.useTheme();
+  var focusRingStyles = a11y.useFocusRing({
+    always: true
+  });
+  var textStyles = text.useText({
+    baseline: false,
+    tone: disabled ? 'disabled' : 'neutral',
+    size: 'standard',
+    weight: 'regular'
+  });
+
+  var _textStyles = _slicedToArray(textStyles, 2),
+      typographyStyles = _textStyles[0],
+      responsiveStyles = _textStyles[1];
+
+  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
+    ':enabled': {
+      '&:hover': {
+        borderColor: theme$1.border.color.fieldHover
+      },
+      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+        borderColor: theme$1.border.color.fieldAccent
+      })
+    }
+  });
+}
+
+exports.TextInput = TextInput;
+exports.useInput = useInput;

package/dist/spark-web-text-input.esm.js

@@ -0,0 +1,81 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _extends from '@babel/runtime/helpers/esm/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import React, { forwardRef } from 'react';
+import { css } from '@emotion/css';
+import { useFocusRing } from '@spark-web/a11y';
+import { Box } from '@spark-web/box';
+import { useFieldContext } from '@spark-web/field';
+import { useText } from '@spark-web/text';
+import { useTheme } from '@spark-web/theme';
+import { buildDataAttributes } from '@spark-web/utils/internal';
+
+var _excluded = ["data"],
+    _excluded2 = ["disabled", "invalid"];
+var __jsx = React.createElement;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** Organize and emphasize information quickly and effectively in a list of text elements. */
+var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var data = _ref.data,
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useFieldContext = useFieldContext(),
+      disabled = _useFieldContext.disabled,
+      invalid = _useFieldContext.invalid,
+      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+
+  var inputStyles = useInput({
+    disabled: disabled,
+    invalid: invalid
+  });
+  return __jsx(Box, _extends({
+    as: "input",
+    disabled: disabled,
+    ref: forwardedRef // styles
+    ,
+    background: disabled ? 'inputDisabled' : 'input',
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    height: "medium",
+    paddingX: "medium",
+    className: css(inputStyles)
+  }, data ? buildDataAttributes(data) : null, a11yProps, consumerProps));
+});
+TextInput.displayName = 'TextInput'; // Styled components
+// ------------------------------
+
+function useInput(_ref2) {
+  var disabled = _ref2.disabled;
+  var theme = useTheme();
+  var focusRingStyles = useFocusRing({
+    always: true
+  });
+  var textStyles = useText({
+    baseline: false,
+    tone: disabled ? 'disabled' : 'neutral',
+    size: 'standard',
+    weight: 'regular'
+  });
+
+  var _textStyles = _slicedToArray(textStyles, 2),
+      typographyStyles = _textStyles[0],
+      responsiveStyles = _textStyles[1];
+
+  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
+    ':enabled': {
+      '&:hover': {
+        borderColor: theme.border.color.fieldHover
+      },
+      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+        borderColor: theme.border.color.fieldAccent
+      })
+    }
+  });
+}
+
+export { TextInput, useInput };

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@spark-web/text-input",
+  "license": "MIT",
+  "version": "1.0.0",
+  "main": "dist/spark-web-text-input.cjs.js",
+  "module": "dist/spark-web-text-input.esm.js",
+  "devDependencies": {
+    "@types/react": "^17.0.12"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.14.6",
+    "@emotion/css": "^11.7.1",
+    "@spark-web/a11y": "^1.0.0",
+    "@spark-web/box": "^1.0.0",
+    "@spark-web/field": "^1.0.0",
+    "@spark-web/text": "^1.0.0",
+    "@spark-web/theme": "^1.0.0",
+    "@spark-web/utils": "^1.0.0",
+    "react": "^17.0.2"
+  },
+  "engines": {
+    "node": ">= 14.13"
+  }
+}

package/src/TextInput.stories.tsx

@@ -0,0 +1,35 @@
+import { Field } from '@spark-web/field';
+import { InformationCircleIcon } from '@spark-web/icon';
+import { Inline } from '@spark-web/inline';
+import { Stack } from '@spark-web/stack';
+import { Text } from '@spark-web/text';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import type { TextInputProps } from './TextInput';
+import { TextInput } from './TextInput';
+
+export default {
+  title: 'Forms / TextInput',
+  component: TextInput,
+} as ComponentMeta<typeof TextInput>;
+
+const TextInputStory: ComponentStory<typeof TextInput> = (
+  args: TextInputProps
+) => (
+  <Stack gap="large">
+    <Inline gap="xsmall" alignY="center">
+      <InformationCircleIcon tone="info" size="xsmall" />
+      <Text weight="medium" tone="info" baseline={false}>
+        {`Must be used inside of a <Field/>`}
+      </Text>
+    </Inline>
+    <Field label="Text input">
+      <TextInput {...args} />
+    </Field>
+  </Stack>
+);
+export const Default = TextInputStory.bind({});
+
+Default.args = {
+  displayName: 'Display name',
+} as TextInputProps;

package/src/TextInput.tsx

@@ -0,0 +1,95 @@
+import { css } from '@emotion/css';
+import { useFocusRing } from '@spark-web/a11y';
+import { Box } from '@spark-web/box';
+import type { FieldContextType } from '@spark-web/field';
+import { useFieldContext } from '@spark-web/field';
+import { useText } from '@spark-web/text';
+import { useTheme } from '@spark-web/theme';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import { buildDataAttributes } from '@spark-web/utils/internal';
+import type { AllHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+const validTypes = {
+  text: 'text',
+  password: 'password',
+  email: 'email',
+  search: 'search',
+  number: 'number',
+  tel: 'tel',
+  url: 'url',
+};
+
+type NativeInputProps = Pick<
+  AllHTMLAttributes<HTMLInputElement>,
+  'onBlur' | 'onFocus' | 'onChange' | 'placeholder' | 'value'
+>;
+
+export type TextInputProps = {
+  /** Map of data attributes. */
+  data?: DataAttributeMap;
+  /**
+   * How an input behaves varies considerably depending on the value of its type
+   * attribute. If this attribute is not specified, the default type "text".
+   */
+  type?: keyof typeof validTypes;
+} & NativeInputProps;
+
+/** Organize and emphasize information quickly and effectively in a list of text elements. */
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  ({ data, ...consumerProps }, forwardedRef) => {
+    const { disabled, invalid, ...a11yProps } = useFieldContext();
+    const inputStyles = useInput({ disabled, invalid });
+
+    return (
+      <Box
+        as="input"
+        disabled={disabled}
+        ref={forwardedRef}
+        // styles
+        background={disabled ? 'inputDisabled' : 'input'}
+        border={invalid ? 'critical' : 'field'}
+        borderRadius="small"
+        height="medium"
+        paddingX="medium"
+        className={css(inputStyles)}
+        {...(data ? buildDataAttributes(data) : null)}
+        {...a11yProps}
+        {...consumerProps}
+      />
+    );
+  }
+);
+TextInput.displayName = 'TextInput';
+
+// Styled components
+// ------------------------------
+
+export type UseInputProps = Pick<FieldContextType, 'disabled' | 'invalid'>;
+
+export function useInput({ disabled }: UseInputProps) {
+  const theme = useTheme();
+  const focusRingStyles = useFocusRing({ always: true });
+  const textStyles = useText({
+    baseline: false,
+    tone: disabled ? 'disabled' : 'neutral',
+    size: 'standard',
+    weight: 'regular',
+  });
+
+  const [typographyStyles, responsiveStyles] = textStyles;
+
+  return {
+    ...typographyStyles,
+    ...responsiveStyles,
+    ':enabled': {
+      '&:hover': {
+        borderColor: theme.border.color.fieldHover,
+      },
+      '&:focus': {
+        ...focusRingStyles,
+        borderColor: theme.border.color.fieldAccent,
+      },
+    },
+  };
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { TextInput, useInput } from './TextInput';
+
+// types
+
+export type { TextInputProps, UseInputProps } from './TextInput';