@superdispatch/ui-lab 0.13.0 → 0.16.0-alpha.0

package/dist-src/v5/sidebar/SidebarMenuItemContext.js

@@ -0,0 +1,21 @@
+import { createContext, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var context = /*#__PURE__*/createContext({});
+export function useSidebarMenuItemContext() {
+  return useContext(context);
+}
+export function SidebarMenuItemContextProvider(_ref) {
+  var {
+    children,
+    hovered = false,
+    disabled = false
+  } = _ref;
+  var ctx = useMemo(() => ({
+    hovered,
+    disabled
+  }), [hovered, disabled]);
+  return /*#__PURE__*/_jsx(context.Provider, {
+    value: ctx,
+    children: children
+  });
+}

package/dist-src/v5/sidebar/SidebarSubheader.js

@@ -0,0 +1,41 @@
+import { v5 } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { TextBox } from "../text-box/TextBox.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var {
+  Column,
+  Columns
+} = v5;
+var SidebarSubheaderRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarSubheader__SidebarSubheaderRoot",
+  componentId: "SD__sc-7njpmq-0"
+})(["display:flex;align-items:center;height:40px;max-height:40px;padding-left:24px;padding-right:24px;"]);
+export var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    id,
+    action,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(SidebarSubheaderRoot, {
+    ref: ref,
+    children: /*#__PURE__*/_jsxs(Columns, {
+      space: "xsmall",
+      align: "center",
+      children: [/*#__PURE__*/_jsx(Column, {
+        children: /*#__PURE__*/_jsx(TextBox, {
+          id: id,
+          variant: "heading-6",
+          color: "secondary",
+          noWrap: true,
+          children: children
+        })
+      }), !!action && /*#__PURE__*/_jsx(Column, {
+        width: "content",
+        children: action
+      })]
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";

package/dist-src/v5/text-box/TextBox.js

@@ -0,0 +1,133 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
+import { v5 } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { mergeStyles } from "../utils/mergeStyles.js";
+import { createRuleNormalizer } from "../utils/RuleNormalizer.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+var {
+  Color,
+  parseResponsiveProp
+} = v5;
+var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
+  inherit: 'inherit',
+  primary: Color.Dark500,
+  secondary: Color.Dark200,
+  white: Color.White,
+  blue: Color.Blue300,
+  green: Color.Green300,
+  purple: Color.Purple500,
+  red: Color.Red300,
+  teal: Color.Teal300,
+  yellow: Color.Yellow300
+});
+var VARIANT_TYPE_MAPPING = {
+  'heading-1': 'h1',
+  'heading-2': 'h2',
+  'heading-3': 'h3',
+  'heading-4': 'h4',
+  'heading-5': 'h5',
+  'heading-6': 'h6',
+  body: 'span',
+  'body-block': 'p',
+  'body-semibold': 'span',
+  caption: 'span'
+};
+
+function variantMixin(_ref, variant) {
+  var {
+    typography,
+    breakpoints
+  } = _ref;
+
+  switch (variant) {
+    case 'heading-1':
+      return typography.h1;
+
+    case 'heading-2':
+      return typography.h2;
+
+    case 'heading-3':
+      return typography.h3;
+
+    case 'heading-4':
+      return typography.h4;
+
+    case 'heading-5':
+      return typography.h5;
+
+    case 'heading-6':
+      return typography.h6;
+
+    case 'body':
+    default:
+      return typography.body2;
+
+    case 'body-block':
+      {
+        return mergeStyles({}, typography.body2, {
+          lineHeight: '24px',
+          [breakpoints.only('xs')]: {
+            lineHeight: '28px'
+          }
+        });
+      }
+
+    case 'body-semibold':
+      return typography.body1;
+
+    case 'caption':
+      return typography.caption;
+  }
+}
+
+function textBoxMixin(noWrap, align, color, display, wrapOverflow) {
+  return css(["text-align:", ";color:", ";display:", ";overflow:", ";white-space:", ";overflow-wrap:", ";"], align, normalizeTextColor(color), display === 'initial' && (noWrap || align !== 'left') ? 'block' : display, noWrap ? 'hidden' : 'visible', noWrap ? 'nowrap' : 'normal', wrapOverflow ? 'break-word' : 'normal');
+}
+
+var TextBoxRoot = /*#__PURE__*/styled.span.withConfig({
+  displayName: "TextBox__TextBoxRoot",
+  componentId: "SD__sc-1geakdj-0"
+})(_ref2 => {
+  var {
+    theme,
+    $noWrap,
+    $variant,
+    $align,
+    $color,
+    $display,
+    $wrapOverflow
+  } = _ref2;
+  return css(["margin:0;padding:0;text-overflow:ellipsis;", ";", ";", "{", ";}", "{", ";}"], variantMixin(theme, $variant), textBoxMixin($noWrap[0], $align[0], $color[0], $display[0], $wrapOverflow[0]), theme.breakpoints.up('sm'), textBoxMixin($noWrap[1], $align[1], $color[1], $display[1], $wrapOverflow[1]), theme.breakpoints.up('md'), textBoxMixin($noWrap[2], $align[2], $color[2], $display[2], $wrapOverflow[2]));
+});
+export var TextBox = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  var {
+    variant: $variant = 'body',
+    as = VARIANT_TYPE_MAPPING[$variant],
+    align = 'left',
+    color = 'primary',
+    display = 'initial',
+    noWrap = false,
+    wrapOverflow = false
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded);
+
+  var $align = parseResponsiveProp(align);
+  var $color = parseResponsiveProp(color);
+  var $noWrap = parseResponsiveProp(noWrap);
+  var $display = parseResponsiveProp(display);
+  var $wrapOverflow = parseResponsiveProp(wrapOverflow);
+  return /*#__PURE__*/_jsx(TextBoxRoot, _objectSpread(_objectSpread({}, props), {}, {
+    as: as,
+    ref: ref,
+    $align: $align,
+    $color: $color,
+    $noWrap: $noWrap,
+    $display: $display,
+    $variant: $variant,
+    $wrapOverflow: $wrapOverflow
+  }));
+});
+if (process.env.NODE_ENV !== "production") TextBox.displayName = "TextBox";

package/dist-src/v5/utils/RuleNormalizer.js

@@ -0,0 +1,17 @@
+export function createRuleNormalizer(rules) {
+  return input => {
+    if (typeof input == 'string') {
+      var value = rules[input];
+
+      if (typeof value == 'number') {
+        return "".concat(value, "px");
+      }
+
+      if (typeof value == 'string') {
+        return value;
+      }
+    }
+
+    return undefined;
+  };
+}

package/dist-src/v5/utils/mergeStyles.js

@@ -0,0 +1,24 @@
+export function mergeStyles(styles) {
+  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    sources[_key - 1] = arguments[_key];
+  }
+
+  for (var source of sources) {
+    if (source) {
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          var stylesValue = styles[key];
+          var sourceValue = source[key];
+
+          if (typeof stylesValue == 'object' && typeof sourceValue == 'object') {
+            mergeStyles(stylesValue, sourceValue);
+          } else {
+            styles[key] = source[key];
+          }
+        }
+      }
+    }
+  }
+
+  return styles;
+}