@teamturing/react-kit 2.5.0 → 2.6.1

package/esm/_virtual/index.js

@@ -0,0 +1,3 @@
+var reactIs = {exports: {}};
+
+export { reactIs as __module };

package/esm/_virtual/react-is.development.js

@@ -0,0 +1,3 @@
+var reactIs_development = {};
+
+export { reactIs_development as __exports };

package/esm/_virtual/react-is.production.min.js

@@ -0,0 +1,3 @@
+var reactIs_production_min = {};
+
+export { reactIs_production_min as __exports };

package/esm/core/TextInput/index.js

@@ -0,0 +1,220 @@
+import color from '../../packages/token-studio/esm/token/color/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
+import { forwardRef, cloneElement } from 'react';
+import { r as reactIsExports } from '../../node_modules/react-is/index.js';
+import styled, { css } from 'styled-components';
+import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { isFunction } from '../../utils/isFunction.js';
+import { isNullable } from '../../utils/isNullable.js';
+import View from '../View/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const TextInput = /*#__PURE__*/forwardRef(({
+  type = 'text',
+  disabled,
+  validationStatus,
+  leadingVisual: LeadingVisual,
+  trailingVisual: TrailingVisual,
+  trailingAction,
+  ...props
+}, ref) => {
+  const inputRef = useProvidedOrCreatedRef(ref);
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+    disabled: disabled,
+    onClick: focusInput,
+    hasLeadingVisual: !isNullable(LeadingVisual),
+    hasTrailingVisual: !isNullable(TrailingVisual),
+    hasTrailingAction: !isNullable(trailingAction),
+    validationStatus: validationStatus,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      sx: {
+        'flexShrink': 0,
+        'fontSize': 'xxs',
+        'fontWeight': 'medium',
+        'color': color['text/neutral'],
+        '& > svg': {
+          display: 'block',
+          width: 24,
+          height: 24,
+          color: color['icon/neutral/bold']
+        }
+      },
+      children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
+      ref: e => {
+        isFunction(ref) ? ref(e) : null;
+        inputRef.current = e;
+      },
+      type: type,
+      disabled: disabled,
+      ...props
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      sx: {
+        'display': 'flex',
+        'alignItems': 'center',
+        'columnGap': 2,
+        'flexShrink': 0,
+        'fontSize': 'xxs',
+        'fontWeight': 'medium',
+        'color': color['text/neutral'],
+        '& > svg': {
+          display: 'block',
+          width: 24,
+          height: 24,
+          color: color['icon/neutral/bold']
+        }
+      },
+      children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/cloneElement(trailingAction, {
+        disabled: disabled
+      }) : null]
+    })]
+  });
+});
+const TextInputWrapper = styled.div`
+  position: relative;
+  width: ${forcePixelValue('100%')};
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+  border-color: ${({
+  theme
+}) => theme.colors['border/input']};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/input']};
+  cursor: text;
+  display: inline-flex;
+  align-items: center;
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+  input::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
+
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+    pointer-events: none;
+  }
+
+  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+      &:hover:not(:focus-within) {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/hovered']};
+        }
+      }
+    `}
+
+  ${props => props.validationStatus === 'error' && css`
+      &:after {
+        border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+      }
+    `}
+
+  ${props => props.validationStatus !== 'error' && css`
+      &:focus-within {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+        }
+      }
+    `}
+
+  ${props => props.disabled && css`
+      border-color: ${props.theme.colors['border/input']};
+      background-color: ${props.theme.colors['bg/disabled']};
+      color: ${props.theme.colors['text/disabled']};
+
+      input::placeholder {
+        color: ${props.theme.colors['text/disabled']};
+      }
+
+      input {
+        cursor: not-allowed;
+      }
+    `};
+
+  ${props => props.hasLeadingVisual && css`
+      padding-left: ${forcePixelValue(props.theme.space[5])};
+      input {
+        padding-left: ${forcePixelValue(props.theme.space[3])};
+      }
+    `}
+
+  ${props => (props.hasTrailingVisual || props.hasTrailingAction) && css`
+      padding-right: ${forcePixelValue(props.theme.space[3])};
+      input {
+        padding-right: ${forcePixelValue(props.theme.space[3])};
+      }
+    `}
+
+  transition: color 100ms, background-color 100ms;
+  &:after {
+    transition: border-color 100ms;
+  }
+`;
+const UnstyledInput = styled.input`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
+
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+`;
+const BaseInput = styled(UnstyledInput)`
+  padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+`;
+
+export { TextInput as default };

package/esm/core/Textarea/index.js

@@ -0,0 +1,158 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { isFunction } from '../../utils/isFunction.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Textarea = /*#__PURE__*/forwardRef(({
+  disabled,
+  ...props
+}, ref) => {
+  const inputRef = useProvidedOrCreatedRef(ref);
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsx(TextareaWrapper, {
+    disabled: disabled,
+    onClick: focusInput,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextarea, {
+      ref: e => {
+        isFunction(ref) ? ref(e) : null;
+        inputRef.current = e;
+      },
+      disabled: disabled,
+      ...props
+    })
+  });
+});
+const TextareaWrapper = styled.div`
+  position: relative;
+  width: ${forcePixelValue('100%')};
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+  border-color: ${({
+  theme
+}) => theme.colors['border/input']};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/input']};
+  cursor: text;
+  display: inline-flex;
+  align-items: center;
+
+  padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+  input::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+
+  height: 74px;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
+
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+    pointer-events: none;
+  }
+
+  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+      &:hover:not(:focus-within) {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/hovered']};
+        }
+      }
+    `}
+
+  ${props => props.validationStatus === 'error' && css`
+      &:after {
+        border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+      }
+    `}
+
+  ${props => props.validationStatus !== 'error' && css`
+      &:focus-within {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+        }
+      }
+    `}
+
+  ${props => props.disabled && css`
+      border-color: ${props.theme.colors['border/input']};
+      background-color: ${props.theme.colors['bg/disabled']};
+      color: ${props.theme.colors['text/disabled']};
+
+      textarea::placeholder {
+        color: ${props.theme.colors['text/disabled']};
+      }
+
+      &,
+      textarea {
+        cursor: not-allowed;
+      }
+    `};
+`;
+const UnstyledTextarea = styled.textarea`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
+
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+`;
+const BaseTextarea = styled(UnstyledTextarea)`
+  resize: none;
+`;
+
+export { Textarea as default };

package/esm/enigma/View/ImageView/index.js

@@ -7,6 +7,7 @@ const ImageView = ({
   }
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(Image, {
   loading: 'lazy',
+  display: 'block',
   ...props
 });
 

package/esm/index.js

@@ -14,6 +14,8 @@ export { default as Spinner } from './core/Spinner/index.js';
 export { default as Stack } from './core/Stack/index.js';
 export { default as StyledIcon } from './core/StyledIcon/index.js';
 export { default as Text } from './core/Text/index.js';
+export { default as Textarea } from './core/Textarea/index.js';
+export { default as TextInput } from './core/TextInput/index.js';
 export { default as ThemeProvider } from './core/ThemeProvider/index.js';
 export { default as View } from './core/View/index.js';
 export { default as UnstyledButton } from './core/_UnstyledButton.js';

package/esm/node_modules/react-is/cjs/react-is.development.js

@@ -0,0 +1,211 @@
+import { __exports as reactIs_development } from '../../../_virtual/react-is.development.js';
+
+/**
+ * @license React
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactIs_development;
+function requireReactIs_development() {
+  if (hasRequiredReactIs_development) return reactIs_development;
+  hasRequiredReactIs_development = 1;
+  if (process.env.NODE_ENV !== "production") {
+    (function () {
+
+      // ATTENTION
+      // When adding new symbols to this file,
+      // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+      // The Symbol used to tag the ReactElement-like types.
+      var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+      var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+      var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+      var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+      var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+      var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+      var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+      var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+      var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+      var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+      var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+      var REACT_MEMO_TYPE = Symbol.for('react.memo');
+      var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+      var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+
+      // -----------------------------------------------------------------------------
+
+      var enableScopeAPI = false; // Experimental Create Event Handle API.
+      var enableCacheElement = false;
+      var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+      var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+      // stuff. Intended to enable React core members to more easily debug scheduling
+      // issues in DEV builds.
+
+      var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+      var REACT_MODULE_REFERENCE;
+      {
+        REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+      }
+      function isValidElementType(type) {
+        if (typeof type === 'string' || typeof type === 'function') {
+          return true;
+        } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+        if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
+          return true;
+        }
+        if (typeof type === 'object' && type !== null) {
+          if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE ||
+          // This needs to include all possible module reference object
+          // types supported by any Flight configuration anywhere since
+          // we don't know which Flight build this will end up being used
+          // with.
+          type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+            return true;
+          }
+        }
+        return false;
+      }
+      function typeOf(object) {
+        if (typeof object === 'object' && object !== null) {
+          var $$typeof = object.$$typeof;
+          switch ($$typeof) {
+            case REACT_ELEMENT_TYPE:
+              var type = object.type;
+              switch (type) {
+                case REACT_FRAGMENT_TYPE:
+                case REACT_PROFILER_TYPE:
+                case REACT_STRICT_MODE_TYPE:
+                case REACT_SUSPENSE_TYPE:
+                case REACT_SUSPENSE_LIST_TYPE:
+                  return type;
+                default:
+                  var $$typeofType = type && type.$$typeof;
+                  switch ($$typeofType) {
+                    case REACT_SERVER_CONTEXT_TYPE:
+                    case REACT_CONTEXT_TYPE:
+                    case REACT_FORWARD_REF_TYPE:
+                    case REACT_LAZY_TYPE:
+                    case REACT_MEMO_TYPE:
+                    case REACT_PROVIDER_TYPE:
+                      return $$typeofType;
+                    default:
+                      return $$typeof;
+                  }
+              }
+            case REACT_PORTAL_TYPE:
+              return $$typeof;
+          }
+        }
+        return undefined;
+      }
+      var ContextConsumer = REACT_CONTEXT_TYPE;
+      var ContextProvider = REACT_PROVIDER_TYPE;
+      var Element = REACT_ELEMENT_TYPE;
+      var ForwardRef = REACT_FORWARD_REF_TYPE;
+      var Fragment = REACT_FRAGMENT_TYPE;
+      var Lazy = REACT_LAZY_TYPE;
+      var Memo = REACT_MEMO_TYPE;
+      var Portal = REACT_PORTAL_TYPE;
+      var Profiler = REACT_PROFILER_TYPE;
+      var StrictMode = REACT_STRICT_MODE_TYPE;
+      var Suspense = REACT_SUSPENSE_TYPE;
+      var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+      var hasWarnedAboutDeprecatedIsAsyncMode = false;
+      var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
+
+      function isAsyncMode(object) {
+        {
+          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+          }
+        }
+        return false;
+      }
+      function isConcurrentMode(object) {
+        {
+          if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
+            hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
+
+            console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+          }
+        }
+        return false;
+      }
+      function isContextConsumer(object) {
+        return typeOf(object) === REACT_CONTEXT_TYPE;
+      }
+      function isContextProvider(object) {
+        return typeOf(object) === REACT_PROVIDER_TYPE;
+      }
+      function isElement(object) {
+        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+      }
+      function isForwardRef(object) {
+        return typeOf(object) === REACT_FORWARD_REF_TYPE;
+      }
+      function isFragment(object) {
+        return typeOf(object) === REACT_FRAGMENT_TYPE;
+      }
+      function isLazy(object) {
+        return typeOf(object) === REACT_LAZY_TYPE;
+      }
+      function isMemo(object) {
+        return typeOf(object) === REACT_MEMO_TYPE;
+      }
+      function isPortal(object) {
+        return typeOf(object) === REACT_PORTAL_TYPE;
+      }
+      function isProfiler(object) {
+        return typeOf(object) === REACT_PROFILER_TYPE;
+      }
+      function isStrictMode(object) {
+        return typeOf(object) === REACT_STRICT_MODE_TYPE;
+      }
+      function isSuspense(object) {
+        return typeOf(object) === REACT_SUSPENSE_TYPE;
+      }
+      function isSuspenseList(object) {
+        return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+      }
+      reactIs_development.ContextConsumer = ContextConsumer;
+      reactIs_development.ContextProvider = ContextProvider;
+      reactIs_development.Element = Element;
+      reactIs_development.ForwardRef = ForwardRef;
+      reactIs_development.Fragment = Fragment;
+      reactIs_development.Lazy = Lazy;
+      reactIs_development.Memo = Memo;
+      reactIs_development.Portal = Portal;
+      reactIs_development.Profiler = Profiler;
+      reactIs_development.StrictMode = StrictMode;
+      reactIs_development.Suspense = Suspense;
+      reactIs_development.SuspenseList = SuspenseList;
+      reactIs_development.isAsyncMode = isAsyncMode;
+      reactIs_development.isConcurrentMode = isConcurrentMode;
+      reactIs_development.isContextConsumer = isContextConsumer;
+      reactIs_development.isContextProvider = isContextProvider;
+      reactIs_development.isElement = isElement;
+      reactIs_development.isForwardRef = isForwardRef;
+      reactIs_development.isFragment = isFragment;
+      reactIs_development.isLazy = isLazy;
+      reactIs_development.isMemo = isMemo;
+      reactIs_development.isPortal = isPortal;
+      reactIs_development.isProfiler = isProfiler;
+      reactIs_development.isStrictMode = isStrictMode;
+      reactIs_development.isSuspense = isSuspense;
+      reactIs_development.isSuspenseList = isSuspenseList;
+      reactIs_development.isValidElementType = isValidElementType;
+      reactIs_development.typeOf = typeOf;
+    })();
+  }
+  return reactIs_development;
+}
+
+export { requireReactIs_development as __require };