@dpocean/chatui 1.0.0

package/es/components/Avatar/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+export var Avatar = function Avatar(props) {
+  var className = props.className,
+    src = props.src,
+    alt = props.alt,
+    url = props.url,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'md' : _props$size,
+    _props$shape = props.shape,
+    shape = _props$shape === void 0 ? 'circle' : _props$shape,
+    children = props.children;
+  var Element = url ? 'a' : 'span';
+  return /*#__PURE__*/React.createElement(Element, {
+    className: clsx('Avatar', "Avatar--".concat(size), "Avatar--".concat(shape), className),
+    href: url
+  }, src ? /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt
+  }) : children);
+};

package/es/components/Avatar/style.less

@@ -0,0 +1,26 @@
+.Avatar {
+  --avatar-size: 32px;
+
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 50%;
+
+  img {
+    display: block;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    object-fit: cover;
+  }
+}
+
+.Avatar--sm {
+  --avatar-size: 18px;
+}
+
+.Avatar--lg {
+  --avatar-size: 40px;
+}
+
+.Avatar--square {
+  border-radius: var(--radius-md);
+}

package/es/components/BackBottom/index.js

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { useLocale } from '../ConfigProvider';
+export var BackBottom = function BackBottom(_ref) {
+  var count = _ref.count,
+    onClick = _ref.onClick,
+    onDidMount = _ref.onDidMount;
+  var _useLocale = useLocale('BackBottom'),
+    trans = _useLocale.trans;
+  var text = trans('bottom');
+  if (count) {
+    text = trans(count === 1 ? 'newMsgOne' : 'newMsgOther').replace('{n}', count);
+  }
+  useEffect(function () {
+    if (onDidMount) {
+      onDidMount();
+    }
+  }, [onDidMount]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "BackBottom"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "slide-in-right-item",
+    onClick: onClick
+  }, text, /*#__PURE__*/React.createElement(Icon, {
+    type: "chevron-double-down"
+  })));
+};

package/es/components/BackBottom/style.less

@@ -0,0 +1,15 @@
+.BackBottom {
+  position: absolute;
+  right: 0;
+  bottom: (20px + 48px);
+  z-index: 10;
+  overflow: hidden;
+
+  .Btn {
+    border-radius: 50px 0 0 50px;
+    border-right: 0;
+    background: rgba(255, 255, 255, 0.85);
+    color: var(--brand-1);
+    font-size: var(--font-size-sm);
+  }
+}

package/es/components/Backdrop/index.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "active", "onClick"];
+import React from 'react';
+import clsx from 'clsx';
+export var Backdrop = function Backdrop(props) {
+  var className = props.className,
+    active = props.active,
+    onClick = props.onClick,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('Backdrop', className, {
+      active: active
+    }),
+    onClick: onClick
+  }, rest));
+};

package/es/components/Backdrop/style.less

@@ -0,0 +1,17 @@
+.Backdrop {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: @zindex-backdrop;
+  transition: 0.3s;
+  width: 100vw;
+  height: 100vh;
+  background: var(--color-mask);
+  opacity: 0;
+  outline: 0;
+
+  &.active {
+    opacity: 1;
+  }
+}

package/es/components/Bubble/index.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "content", "children"];
+import React from 'react';
+export var Bubble = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? 'text' : _props$type,
+    content = props.content,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "Bubble ".concat(type),
+    "data-type": type
+  }, other, {
+    ref: ref
+  }), content && /*#__PURE__*/React.createElement("p", null, content), children);
+});

package/es/components/Bubble/style.less

@@ -0,0 +1,59 @@
+.Bubble {
+  max-width: 512px;
+  // min-width: 0;
+  min-width: 1Px; // for IE bug
+  background: var(--color-fill-1);
+  border-radius: var(--radius-md);
+
+  &.text,
+  &.typing,
+  &.richtext {
+    padding: 12px;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+  &.text {
+    min-width: 40px;
+    white-space: pre-wrap;
+  }
+  &.image {
+    img {
+      display: block;
+      max-width: 180px;
+      min-width: 80px;
+      max-height: 180px;
+      min-height: 80px;
+      object-fit: cover;
+      height: auto;
+      border-radius: inherit;
+    }
+  }
+  p {
+    margin: 0;
+  }
+}
+
+[data-effect='typing'] {
+  position: relative;
+  overflow: hidden;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ol:last-child li,
+  ul:last-child li {
+    &:last-child:after {
+      content: '';
+      width: 80px;
+      height: 1.5em;
+      background: linear-gradient(90deg, transparent, var(--color-fill-1));
+      position: absolute;
+      margin-left: -80px;
+    }
+  }
+}

package/es/components/Button/index.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "label", "color", "variant", "size", "icon", "loading", "block", "disabled", "children", "onClick"];
+import React from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+function composeClass(type) {
+  return type && "Btn--".concat(type);
+}
+export var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    label = props.label,
+    color = props.color,
+    variant = props.variant,
+    oSize = props.size,
+    oIcon = props.icon,
+    loading = props.loading,
+    block = props.block,
+    disabled = props.disabled,
+    children = props.children,
+    onClick = props.onClick,
+    other = _objectWithoutProperties(props, _excluded);
+  var icon = oIcon || loading && 'spinner';
+  var size = oSize || (block ? 'lg' : '');
+  function handleClick(e) {
+    if (!disabled && !loading && onClick) {
+      onClick(e);
+    }
+  }
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: clsx('Btn', composeClass(color), composeClass(variant), composeClass(size), {
+      'Btn--block': block
+    }, className),
+    type: "button",
+    disabled: disabled,
+    "data-loading": loading,
+    onClick: handleClick,
+    ref: ref
+  }, other), icon && /*#__PURE__*/React.createElement("span", {
+    className: "Btn-icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: icon,
+    spin: loading
+  })), label || children);
+});

package/es/components/Button/style.less

@@ -0,0 +1,114 @@
+.Btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  min-width: 80Px;
+  margin: 0;
+  padding: var(--btn-padding);
+  border: @btn-border-width solid var(--btn-border-color);
+  border-radius: var(--btn-border-radius);
+  background: var(--btn-bg);
+  background-origin: border-box;
+  color: var(--btn-color);
+  font-weight: var(--btn-font-weight);
+  font-size: var(--btn-font-size);
+  line-height: var(--btn-line-height);
+  font-family: @btn-font-family;
+  text-transform: none;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  transition: @btn-transition;
+  user-select: none;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+  &[data-loading="true"] {
+    cursor: default;
+  }
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+  &:active {
+    --btn-bg: var(--btn-active-bg);
+  }
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  &--primary:not(.Btn--outline) {
+    --btn-border-color: var(--btn-primary-border-color);
+    --btn-bg: var(--btn-primary-bg);
+    --btn-color: var(--btn-primary-color);
+
+    &:active {
+      opacity: 0.8;
+    }
+  }
+  &--outline&--primary {
+    --btn-border-color: var(--brand-1);
+    --btn-color: var(--brand-1);
+  }
+  &--sm {
+    --btn-padding: var(--btn-padding-sm);
+    // border-radius: @btn-border-radius-sm;
+    --btn-font-size: var(--btn-font-size-sm);
+  }
+  &--lg {
+    --btn-padding: var(--btn-padding-lg);
+    // border-radius: @btn-border-radius-lg;
+    --btn-font-size: var(--btn-font-size-lg);
+
+    .Btn-icon {
+      vertical-align: -2px;
+    }
+  }
+  &--block {
+    display: block;
+    width: 100%;
+  }
+  &-icon {
+    display: inline-flex;
+    align-self: center;
+    flex-shrink: 0;
+    margin-inline-end: 0.5rem;
+  }
+}
+
+.no-btn-flex .Btn:not(.Btn--block) {
+  display: inline-block;
+}
+
+@media (hover: hover) {
+  .Btn {
+    &:hover {
+      --btn-bg: var(--btn-hover-bg);
+    }
+    &--primary:not(.Btn--outline) {
+      &:hover {
+        --btn-bg: var(--btn-primary-bg);
+        opacity: 0.9;
+      }
+    }
+  }
+}
+
+.Btn--text {
+  --btn-line-height: 1.5;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--link-color);
+  font-size: inherit;
+  font-weight: inherit;
+
+  &:hover,
+  &:active {
+    background: transparent;
+  }
+}

package/es/components/Card/Card.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "size", "fluid", "children"];
+import React from 'react';
+import clsx from 'clsx';
+export var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    size = props.size,
+    fluid = props.fluid,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('Card', size && "Card--".concat(size), {
+      'Card--fluid': fluid
+    }, className),
+    "data-fluid": fluid
+  }, other, {
+    ref: ref
+  }), children);
+});

package/es/components/Card/CardActions.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "direction"];
+import React from 'react';
+import clsx from 'clsx';
+export var CardActions = function CardActions(props) {
+  var children = props.children,
+    className = props.className,
+    direction = props.direction,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('CardActions', className, direction && "CardActions--".concat(direction))
+  }, other), children);
+};

package/es/components/Card/CardContent.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import clsx from 'clsx';
+export var CardContent = function CardContent(props) {
+  var className = props.className,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('CardContent', className)
+  }, other), children);
+};

package/es/components/Card/CardHeader.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "icon", "iconColor", "logo", "title", "desc", "hasBg", "badge", "children"];
+import React from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { Flex, FlexItem } from '../Flex';
+import { Image } from '../Image';
+export var CardHeader = function CardHeader(props) {
+  var className = props.className,
+    icon = props.icon,
+    iconColor = props.iconColor,
+    logo = props.logo,
+    title = props.title,
+    desc = props.desc,
+    hasBg = props.hasBg,
+    badge = props.badge,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Flex, _extends({
+    className: clsx('CardHeader', className),
+    "data-has-bg": !!hasBg
+  }, other), icon && (icon.includes('//') ? /*#__PURE__*/React.createElement(Image, {
+    className: "CardHeader-icon",
+    src: icon
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    className: "CardHeader-icon",
+    style: {
+      color: iconColor
+    },
+    type: icon
+  })), /*#__PURE__*/React.createElement(FlexItem, null, logo ? /*#__PURE__*/React.createElement(Image, {
+    className: "CardHeader-logo",
+    src: logo
+  }) : /*#__PURE__*/React.createElement(Text, {
+    as: "h4",
+    className: "CardHeader-title",
+    truncate: 2
+  }, title), desc && /*#__PURE__*/React.createElement(Text, {
+    as: "h5",
+    className: "CardHeader-desc",
+    truncate: true
+  }, desc)), badge ? /*#__PURE__*/React.createElement("div", {
+    className: "CardHeader-badge",
+    style: {
+      backgroundImage: "url(".concat(badge, ")")
+    }
+  }) : children && /*#__PURE__*/React.createElement("div", {
+    className: "CardHeader-slot"
+  }, children));
+};

package/es/components/Card/CardMedia.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "aspectRatio", "color", "image", "children"];
+import React from 'react';
+import clsx from 'clsx';
+import { Flex } from '../Flex';
+export var CardMedia = function CardMedia(props) {
+  var className = props.className,
+    _props$aspectRatio = props.aspectRatio,
+    aspectRatio = _props$aspectRatio === void 0 ? 'square' : _props$aspectRatio,
+    color = props.color,
+    image = props.image,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var bgStyle = {
+    backgroundColor: color || undefined,
+    backgroundImage: typeof image === 'string' ? "url('".concat(image, "')") : undefined
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('CardMedia', {
+      'CardMedia--wide': aspectRatio === 'wide',
+      'CardMedia--square': aspectRatio === 'square'
+    }, className),
+    style: bgStyle
+  }, other), children && /*#__PURE__*/React.createElement(Flex, {
+    className: "CardMedia-content",
+    direction: "column",
+    center: true
+  }, children));
+};

package/es/components/Card/CardText.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import clsx from 'clsx';
+export var CardText = function CardText(props) {
+  var className = props.className,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('CardText', className)
+  }, other), typeof children === 'string' ? /*#__PURE__*/React.createElement("p", null, children) : children);
+};

package/es/components/Card/CardTitle.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "title", "subtitle", "center", "children"];
+import React from 'react';
+import clsx from 'clsx';
+export var CardTitle = function CardTitle(props) {
+  var className = props.className,
+    title = props.title,
+    subtitle = props.subtitle,
+    center = props.center,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('CardTitle', {
+      'CardTitle--center': center
+    }, className)
+  }, other), title && /*#__PURE__*/React.createElement("h5", {
+    className: "CardTitle-title"
+  }, title), children && typeof children === 'string' && /*#__PURE__*/React.createElement("h5", {
+    className: "CardTitle-title"
+  }, children), subtitle && /*#__PURE__*/React.createElement("p", {
+    className: "CardTitle-subtitle"
+  }, subtitle), children && typeof children !== 'string' && children);
+};

package/es/components/Card/index.js

@@ -0,0 +1,7 @@
+export { Card } from './Card';
+export { CardMedia } from './CardMedia';
+export { CardContent } from './CardContent';
+export { CardHeader } from './CardHeader';
+export { CardTitle } from './CardTitle';
+export { CardText } from './CardText';
+export { CardActions } from './CardActions';