@vectara/vectara-ui 0.0.2

package/lib/components/tabs/_index.scss

@@ -0,0 +1,103 @@
+.vuiTabs {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid $borderColorLight;
+  justify-content: space-between;
+  column-gap: $sizeXxs;
+}
+
+.vuiTabs--fullWidth {
+  .vuiTabs__tabs {
+    flex-grow: 1;
+  }
+
+  .vuiTab {
+    display: flex;
+    flex: 1 1 0;
+    justify-content: stretch;
+
+    .vuiTab__inner {
+      display: flex;
+      flex: 1 1 0;
+      justify-content: center;
+    }
+  }
+}
+
+.vuiTab__inner {
+  border-radius: $sizeXxs;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vuiTabs--s {
+  .vuiTab {
+    .vuiTab__inner {
+      padding: $sizeXs $sizeS;
+      font-size: $fontSizeStandard;
+    }
+  }
+}
+
+.vuiTabs--m {
+  .vuiTab {
+    .vuiTab__inner {
+      padding: $sizeXs $sizeS;
+      font-size: $fontSizeMedium;
+    }
+  }
+}
+
+.vuiTabs__tabs {
+  display: flex;
+  align-items: center;
+}
+
+.vuiTabs__appendedContent {
+  flex-basis: auto;
+  flex-grow: 0;
+}
+
+.vuiTab {
+  padding: $sizeXxs;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 0;
+  flex-shrink: 0;
+  color: $colorSubdued;
+  text-decoration: none;
+  box-shadow: transparent 0px 1px 0px, transparent 0px -1px 0px inset;
+  cursor: pointer;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &:hover {
+    .vuiTab__inner {
+      color: $colorPrimary;
+      background-color: $colorPrimaryLighterShade;
+      text-decoration: underline;
+
+      .vuiIcon__inner {
+        color: $colorPrimary !important;
+      }
+    }
+  }
+
+  &.vuiTab-isActive {
+    pointer-events: none;
+    color: $colorFullShade;
+    box-shadow: $borderColor 0px 1px 0px;
+
+    .vuiTab__inner {
+      background-color: $colorMediumLightShade;
+    }
+  }
+}

package/lib/components/tabs/types.d.ts

@@ -0,0 +1,2 @@
+export declare const TAB_SIZE: readonly ["s", "m"];
+export type TabSize = (typeof TAB_SIZE)[number];

package/lib/components/tabs/types.js

@@ -0,0 +1 @@
+export const TAB_SIZE = ["s", "m"];

package/lib/components/toggle/Toggle.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    id?: string;
+    checked?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+};
+export declare const VuiToggle: ({ id, checked, onChange, label, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/toggle/Toggle.js

@@ -0,0 +1,25 @@
+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 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createId } from "../../utils/createId";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+export const VuiToggle = (_a) => {
+    var { id, checked, onChange, label } = _a, rest = __rest(_a, ["id", "checked", "onChange", "label"]);
+    let labelId;
+    const inputProps = {};
+    if (label) {
+        labelId = createId();
+        inputProps["aria-labelledby"] = labelId;
+    }
+    return (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs("label", Object.assign({ className: "vuiToggle" }, { children: [_jsx("input", Object.assign({ className: "vuiToggle__input", type: "checkbox", checked: checked, onChange: onChange, id: id }, inputProps, rest)), _jsx("span", { className: "vuiToggle__button" })] })) })), label && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ id: labelId }, { children: label })) })))] })));
+};

package/lib/components/toggle/_index.scss

@@ -0,0 +1,55 @@
+$toggleWidth: $sizeL * 1.5;
+$toggleHeight: $sizeM * 1.25;
+$buttonOffset: 2px;
+$buttonSize: $toggleHeight - ($buttonOffset * 2);
+
+.vuiToggle {
+  position: relative;
+  display: inline-block;
+  width: $toggleWidth;
+  height: $toggleHeight;
+}
+
+.vuiToggle__input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + .vuiToggle__button {
+    background-color: $colorPrimary;
+  }
+
+  &:focus-visible + .vuiToggle__button {
+    outline: 2px solid transparentize($colorPrimary, 0.25);
+    outline-offset: 2px;
+  }
+
+  &:checked + .vuiToggle__button:before {
+    transform: translateX($toggleWidth - $buttonSize - ($buttonOffset * 2));
+  }
+}
+
+.vuiToggle__button {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $colorMediumShade;
+  transition: $transitionSpeed;
+  border-radius: $buttonSize;
+  box-shadow: inset rgba(0, 0, 0, 0.1) 0px 2px 2px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: $buttonSize;
+    width: $buttonSize;
+    left: $buttonOffset;
+    bottom: $buttonOffset;
+    background-color: $colorEmptyShade;
+    transition: $transitionSpeed;
+    border-radius: 50%;
+  }
+}

package/lib/components/topicButton/TopicButton.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    href?: string;
+    onClick?: () => void;
+    title?: string;
+    fullWidth?: boolean;
+};
+export declare const VuiTopicButton: ({ children, className, href, onClick, title, fullWidth, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/topicButton/TopicButton.js

@@ -0,0 +1,30 @@
+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 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiTextColor } from "../typography/TextColor";
+import { VuiTitle } from "../typography/Title";
+import { useVuiContext } from "../context/Context";
+export const VuiTopicButton = (_a) => {
+    var { children, className, href, onClick, title, fullWidth } = _a, rest = __rest(_a, ["children", "className", "href", "onClick", "title", "fullWidth"]);
+    const { createLink } = useVuiContext();
+    const classes = classNames("vuiTopicButton", className, {
+        "vuiTopicButton--fullWidth": fullWidth
+    });
+    const content = (_jsxs(_Fragment, { children: [title && (_jsxs(_Fragment, { children: [_jsx(VuiTitle, Object.assign({ size: "s" }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "primary" }, { children: title })) }) })), children && _jsx(VuiSpacer, { size: "xxs" })] })), children] }));
+    if (href) {
+        return createLink(Object.assign({ className: classes, href,
+            onClick, children: content }, rest));
+    }
+    return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: content })));
+};

package/lib/components/topicButton/_index.scss

@@ -0,0 +1,21 @@
+.vuiTopicButton {
+  display: inline-block;
+  text-decoration: none;
+  background-color: $colorEmptyShade;
+  border-radius: $sizeXs;
+  box-shadow: $shadowLargeStart;
+  transition: box-shadow $transitionSpeed, border-color $transitionSpeed;
+  overflow: hidden;
+  padding: $sizeM $sizeL;
+  text-align: left;
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: $shadowLargeEnd, $colorPrimary 0 0 1px 1px;
+    z-index: 1;
+  }
+}
+
+.vuiTopicButton--fullWidth {
+  width: 100%;
+}

package/lib/components/typography/Text.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { TEXT_SIZE } from "./types";
+declare const TEXT_ALIGN: readonly ["left", "center", "right"];
+type Props = {
+    className?: string;
+    id?: string;
+    children?: ReactNode;
+    size?: (typeof TEXT_SIZE)[number];
+    align?: (typeof TEXT_ALIGN)[number];
+    truncate?: boolean;
+};
+export declare const VuiText: ({ children, className, id, truncate, size, align, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/typography/Text.js

@@ -0,0 +1,24 @@
+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 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const TEXT_ALIGN = ["left", "center", "right"];
+export const VuiText = (_a) => {
+    var { children, className, id, truncate, size = "s", align } = _a, rest = __rest(_a, ["children", "className", "id", "truncate", "size", "align"]);
+    const classes = classNames("vuiText", `vuiText--${size}`, {
+        // Don't default to left alignment, so that the component inherits
+        // whatever has been defined by an ancestor.
+        [`vuiText--${align}`]: align,
+        "vuiText--truncate": truncate
+    }, className);
+    return (_jsx("div", Object.assign({ className: classes, id: id }, rest, { children: children })));
+};

package/lib/components/typography/TextColor.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { TextColor } from "./types";
+type Props = {
+    children?: ReactNode;
+    color: TextColor;
+    className?: string;
+};
+export declare const VuiTextColor: ({ children, color, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/typography/TextColor.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+export const VuiTextColor = ({ children, color, className }) => {
+    const classes = classNames(className, "vuiTextColor", `vuiTextColor--${color}`);
+    return _jsx("span", Object.assign({ className: classes }, { children: children }));
+};

package/lib/components/typography/Title.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from "react";
+import { TITLE_SIZE } from "./types";
+declare const TEXT_ALIGN: readonly ["left", "center", "right"];
+interface Props {
+    children: ReactElement<any>;
+    className?: string;
+    size: (typeof TITLE_SIZE)[number];
+    align?: (typeof TEXT_ALIGN)[number];
+}
+export declare const VuiTitle: ({ children, className, size, align, ...rest }: Props) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};

package/lib/components/typography/Title.js

@@ -0,0 +1,20 @@
+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 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from "classnames";
+import { cloneElement } from "react";
+const TEXT_ALIGN = ["left", "center", "right"];
+export const VuiTitle = (_a) => {
+    var { children, className, size, align } = _a, rest = __rest(_a, ["children", "className", "size", "align"]);
+    return cloneElement(children, Object.assign({ className: classNames("vuiTitle", `vuiTitle--${size}`, {
+            [`vuiTitle--${align}`]: align
+        }, className, children.props.className) }, rest));
+};

package/lib/components/typography/_index.scss

@@ -0,0 +1,3 @@
+@import "./title";
+@import "./text";
+@import "./textColor";

package/lib/components/typography/_text.scss

@@ -0,0 +1,150 @@
+@use "sass:map";
+
+.vuiText {
+  overflow-wrap: break-word;
+  word-break: break-word;
+
+  a {
+    color: $colorPrimary !important;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: auto;
+  }
+
+  ul,
+  ol {
+    margin-left: $sizeM;
+    margin-bottom: $sizeXs;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  code {
+    border: 1px solid $borderColorLight;
+    padding: $sizeXxxs $sizeXs;
+  }
+
+  table {
+    width: 100%;
+    table-layout: fixed;
+    border: 1px solid $borderColorLight;
+
+    thead {
+      background-color: $colorLightShade;
+      border-bottom: 1px solid $borderColorLight;
+    }
+
+    tbody tr {
+      border-bottom: 1px solid $borderColorLight;
+    }
+
+    th {
+      font-size: $fontSizeSmall;
+      font-weight: $fontWeightBold;
+      padding: $sizeXs $sizeS;
+      text-align: left;
+    }
+
+    td {
+      font-size: $fontSizeStandard;
+      vertical-align: middle;
+      padding: $sizeS $sizeS;
+    }
+  }
+}
+
+.vuiText--truncate {
+  @include truncateText;
+}
+
+@mixin defineTextStyles($fontSize, $fontWeight) {
+  color: $colorText;
+  font-size: $fontSize;
+  line-height: 1.4;
+
+  p,
+  ul,
+  ol {
+    font-size: $fontSize;
+    line-height: 1.4;
+    margin-bottom: $sizeXs;
+    font-weight: $fontWeight;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1 {
+    font-size: $fontSize * 2;
+    line-height: 1.4;
+    font-weight: $fontWeightBold;
+    margin-bottom: $sizeXs;
+  }
+
+  h2 {
+    font-size: $fontSize * 1.5;
+    line-height: 1.4;
+    margin-bottom: $sizeXs;
+  }
+
+  h3 {
+    font-size: $fontSize * 1.25;
+    line-height: 1.4;
+    font-weight: $fontWeightBold;
+    margin-bottom: $sizeXs;
+    color: $colorSubdued;
+  }
+
+  h4 {
+    font-size: $fontSize;
+    line-height: 1.4;
+    font-weight: $fontWeightBold;
+    margin-bottom: $sizeXs;
+  }
+}
+
+$size: (
+  xs: (
+    size: $fontSizeSmall,
+    weight: $fontWeightStrong
+  ),
+  s: (
+    size: $fontSizeStandard,
+    weight: $fontWeightNormal
+  ),
+  m: (
+    size: $fontSizeMedium,
+    weight: $fontWeightNormal
+  ),
+  l: (
+    size: $fontSizeLarge,
+    weight: $fontWeightNormal
+  )
+);
+
+@each $sizeName, $sizeValue in $size {
+  .vuiText--#{$sizeName} {
+    @include defineTextStyles(map.get($sizeValue, "size"), map.get($sizeValue, "weight"));
+  }
+}
+
+$align: left, center, right;
+
+@each $alignValue in $align {
+  .vuiText--#{$alignValue} {
+    text-align: #{$alignValue};
+  }
+}

package/lib/components/typography/_textColor.scss

@@ -0,0 +1,15 @@
+$color: (
+  accent: $colorAccent,
+  primary: $colorPrimary,
+  success: $colorSuccess,
+  warning: $colorWarning,
+  danger: $colorDanger,
+  subdued: $colorSubdued,
+  neutral: $colorText
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiTextColor--#{$colorName} {
+    color: $colorValue !important;
+  }
+}

package/lib/components/typography/_title.scss

@@ -0,0 +1,68 @@
+@use "sass:map";
+
+.vuiTitle {
+  color: $colorText;
+  margin-bottom: 0;
+}
+
+$size: (
+  xxs: (
+    size: $fontSizeSmall,
+    line-height: 1.4,
+    weight: $fontWeightStrong,
+    color: $colorText
+  ),
+  xs: (
+    size: $labelFontSize,
+    line-height: 1.4,
+    weight: $labelFontWeight,
+    color: $labelColor
+  ),
+  s: (
+    size: $fontSizeLarge,
+    line-height: 1.3,
+    weight: $fontWeightBold,
+    color: $colorSubdued
+  ),
+  m: (
+    size: $fontSizeXLarge,
+    weight: $fontWeightBold,
+    line-height: 1.2,
+    color: $colorText
+  ),
+  l: (
+    size: $fontSizeXxLarge,
+    weight: $fontWeightNormal,
+    line-height: 1.1,
+    color: $colorText
+  ),
+  xl: (
+    size: $fontSizeXxxLarge,
+    weight: $fontWeightNormal,
+    line-height: 1,
+    color: $colorText
+  ),
+  xxl: (
+    size: $fontSizeXxxLarge,
+    line-height: 1,
+    weight: $fontWeightBold,
+    color: $colorText
+  )
+);
+
+@each $sizeName, $sizeValue in $size {
+  .vuiTitle--#{$sizeName} {
+    font-size: #{map.get($sizeValue, "size")};
+    line-height: #{map.get($sizeValue, "line-height")};
+    font-weight: #{map.get($sizeValue, "weight")};
+    color: #{map.get($sizeValue, "color")};
+  }
+}
+
+$align: left, center, right;
+
+@each $alignValue in $align {
+  .vuiTitle--#{$alignValue} {
+    text-align: #{$alignValue};
+  }
+}

package/lib/components/typography/types.d.ts

@@ -0,0 +1,4 @@
+export declare const TITLE_SIZE: readonly ["xxs", "xs", "s", "m", "l", "xl", "xxl"];
+export declare const TEXT_COLOR: readonly ["accent", "primary", "success", "warning", "danger", "subdued", "neutral"];
+export type TextColor = (typeof TEXT_COLOR)[number];
+export declare const TEXT_SIZE: readonly ["xs", "s", "m", "l"];

package/lib/components/typography/types.js

@@ -0,0 +1,3 @@
+export const TITLE_SIZE = ["xxs", "xs", "s", "m", "l", "xl", "xxl"];
+export const TEXT_COLOR = ["accent", "primary", "success", "warning", "danger", "subdued", "neutral"];
+export const TEXT_SIZE = ["xs", "s", "m", "l"];

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/lib/index.js

@@ -0,0 +1 @@
+export * from "./components";

package/lib/sassUtils/_animation.scss

@@ -0,0 +1 @@
+$transitionSpeed: 0.2s;

package/lib/sassUtils/_app.scss

@@ -0,0 +1 @@
+$appHeaderHeight: 46px;

package/lib/sassUtils/_borders.scss

@@ -0,0 +1,2 @@
+$borderColor: $colorMediumShade;
+$borderColorLight: #e3e4f3;

package/lib/sassUtils/_colors.scss

@@ -0,0 +1,24 @@
+// Semantic colors
+$colorAccent: #551edf !default;
+$colorPrimary: #264cd6 !default;
+$colorSuccess: #04821f !default;
+$colorWarning: #965a15 !default;
+$colorDanger: #c41535 !default;
+
+// Semantic shades
+$colorAccentLightShade: #eadfff !default;
+$colorPrimaryLightShade: #d9e2ff !default;
+$colorPrimaryLighterShade: #edf5ff !default;
+$colorSuccessLightShade: #e9f2e9 !default;
+$colorWarningLightShade: #f4eee8 !default;
+$colorDangerLightShade: #fae9eb !default;
+$colorDangerLighterShade: #fdeff0 !default;
+
+// Neutral colors
+$colorEmptyShade: #ffffff !default;
+$colorLightShade: #f3f7fb !default;
+$colorMediumLightShade: #e8eff5 !default;
+$colorMediumShade: #cbcdde !default;
+$colorDarkShade: #69707d !default;
+$colorDarkerShade: #2c313a !default;
+$colorFullShade: #000 !default;

package/lib/sassUtils/_depth.scss

@@ -0,0 +1,8 @@
+$appHeaderZIndex: 8;
+$chatZIndex: 9;
+$screenBlockZIndex: 10;
+$drawerZIndex: 11;
+$modalZIndex: 12;
+// Enable popovers to be placed inside of modals and drawers.
+$popoverZIndex: 13;
+$notificationsZIndex: 1000;

package/lib/sassUtils/_mixins.scss

@@ -0,0 +1,11 @@
+@mixin truncateText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  & * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/lib/sassUtils/_shadows.scss

@@ -0,0 +1,5 @@
+$shadowSmallStart: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px;
+$shadowSmallEnd: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+
+$shadowLargeStart: rgba(50, 50, 93, 0.25) 0px 0 0 0, rgba(0, 0, 0, 0.16) 0px 1px 4px;
+$shadowLargeEnd: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;