@quen-ui/components 0.0.14

package/dist/Textarea/types.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { TQuenSize } from '../types/size';
+export interface ITextareaProps {
+    /** Visual size */
+    size?: TQuenSize;
+    /** Field label */
+    label?: string;
+    /** Marks as required */
+    required?: boolean;
+    /** Error state/message */
+    error?: string | boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Left adornment */
+    leftContent?: React.ReactNode;
+    /** Right adornment */
+    rightContent?: React.ReactNode;
+    /** Disables interaction */
+    disabled?: boolean;
+    /** DOM ID for textarea  */
+    id?: string;
+    /** Form textarea name */
+    name?: string;
+    /** Container class */
+    className?: string;
+    /** Blur event handler */
+    onBlur?: React.FocusEventHandler;
+    /** Focus event handler */
+    onFocus?: React.FocusEventHandler;
+    /** Value change handler */
+    onChange?: (value: string, event: React.ChangeEvent) => void;
+    /** Clear button handler */
+    onClear?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Controlled value */
+    value?: string;
+    /** Shows clear button */
+    clearable?: boolean;
+    /** Textarea-specific class */
+    classNameTextarea?: string;
+    /** Auto-adjusts height */
+    autosize?: boolean;
+    /** Maximum visible rows */
+    maxRows?: number;
+    /**	Minimum visible rows */
+    minRows?: number;
+    [key: string]: any;
+}

package/dist/Tooltip/Tooltip.cjs.js

@@ -0,0 +1,69 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactTransitionState = require("react-transition-state");
+const styles = require("./styles.cjs.js");
+const Tooltip = ({
+  children,
+  text,
+  position = "top",
+  open: controlledOpen,
+  show = true,
+  zIndex = 1e3,
+  color = "grayViolet",
+  width,
+  className,
+  ...props
+}) => {
+  const [hovered, setHovered] = React.useState(false);
+  const controlled = typeof controlledOpen !== "undefined";
+  const shouldShow = controlled ? controlledOpen : hovered;
+  const [{ status }, toggle] = reactTransitionState.useTransition({
+    enter: true,
+    exit: true,
+    preEnter: true,
+    preExit: true,
+    timeout: 200
+  });
+  React.useEffect(() => {
+    toggle(shouldShow && show);
+  }, [show, toggle, shouldShow]);
+  const handleMouseEnter = () => {
+    if (!controlled) {
+      setHovered(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (!controlled) {
+      setHovered(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.TooltipContainer,
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...props,
+      children: [
+        children,
+        show && /* @__PURE__ */ jsxRuntime.jsxs(
+          styles.TooltipContent,
+          {
+            className,
+            width,
+            state: status,
+            zIndex,
+            color,
+            position,
+            role: "tooltip",
+            children: [
+              text,
+              /* @__PURE__ */ jsxRuntime.jsx(styles.TooltipArrowStyled, { color, position })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+module.exports = Tooltip;

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ITooltipProps } from './types';
+declare const Tooltip: ({ children, text, position, open: controlledOpen, show, zIndex, color, width, className, ...props }: ITooltipProps) => React.ReactElement;
+export default Tooltip;

package/dist/Tooltip/Tooltip.es.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTransition } from "react-transition-state";
+import { TooltipContainer, TooltipContent, TooltipArrowStyled } from "./styles.es.js";
+const Tooltip = ({
+  children,
+  text,
+  position = "top",
+  open: controlledOpen,
+  show = true,
+  zIndex = 1e3,
+  color = "grayViolet",
+  width,
+  className,
+  ...props
+}) => {
+  const [hovered, setHovered] = useState(false);
+  const controlled = typeof controlledOpen !== "undefined";
+  const shouldShow = controlled ? controlledOpen : hovered;
+  const [{ status }, toggle] = useTransition({
+    enter: true,
+    exit: true,
+    preEnter: true,
+    preExit: true,
+    timeout: 200
+  });
+  useEffect(() => {
+    toggle(shouldShow && show);
+  }, [show, toggle, shouldShow]);
+  const handleMouseEnter = () => {
+    if (!controlled) {
+      setHovered(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (!controlled) {
+      setHovered(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    TooltipContainer,
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...props,
+      children: [
+        children,
+        show && /* @__PURE__ */ jsxs(
+          TooltipContent,
+          {
+            className,
+            width,
+            state: status,
+            zIndex,
+            color,
+            position,
+            role: "tooltip",
+            children: [
+              text,
+              /* @__PURE__ */ jsx(TooltipArrowStyled, { color, position })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Tooltip as default
+};

package/dist/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip';
+export type { ITooltipProps } from './types';

package/dist/Tooltip/styles.cjs.js

@@ -0,0 +1,232 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const getColor = (theme, color) => {
+  return color in theme.colors ? theme.colors[color]["5"] : color;
+};
+const getPosition = (position, state) => {
+  switch (position) {
+    case "top":
+      return styled.css`
+        bottom: 100%;
+        left: 50%;
+        transform-origin: bottom center;
+        margin-bottom: 8px;
+        transform: translateX(-50%) scale(${state === "entered" ? 1 : 0.9});
+      `;
+    case "bottom":
+      return styled.css`
+        top: 100%;
+        left: 50%;
+        transform-origin: top center;
+        margin-top: 8px;
+        transform: translateX(-50%) scale(${state === "entered" ? 1 : 0.9});
+      `;
+    case "left":
+      return styled.css`
+        top: 50%;
+        right: 100%;
+        transform-origin: center right;
+        margin-right: 8px;
+        transform: translateY(-50%) scale(${state === "entered" ? 1 : 0.9});
+      `;
+    case "right":
+      return styled.css`
+        top: 50%;
+        left: 100%;
+        transform-origin: center left;
+        margin-left: 8px;
+        transform: translateY(-50%) scale(${state === "entered" ? 1 : 0.9});
+      `;
+    case "topLeft":
+      return styled.css`
+        bottom: 100%;
+        left: 0;
+        transform-origin: bottom left;
+        margin-bottom: 8px;
+      `;
+    case "topRight":
+      return styled.css`
+        bottom: 100%;
+        right: 0;
+        transform-origin: bottom right;
+        margin-bottom: 8px;
+      `;
+    case "bottomLeft":
+      return styled.css`
+        top: 100%;
+        left: 0;
+        transform-origin: top left;
+        margin-top: 8px;
+      `;
+    case "bottomRight":
+      return styled.css`
+        top: 100%;
+        right: 0;
+        transform-origin: top right;
+        margin-top: 8px;
+      `;
+    case "leftTop":
+      return styled.css`
+        top: 0;
+        right: 100%;
+        transform-origin: top right;
+        margin-right: 8px;
+      `;
+    case "leftBottom":
+      return styled.css`
+        bottom: 0;
+        right: 100%;
+        transform-origin: bottom right;
+        margin-right: 8px;
+      `;
+    case "rightTop":
+      return styled.css`
+        top: 0;
+        left: 100%;
+        transform-origin: top left;
+        margin-left: 8px;
+      `;
+    case "rightBottom":
+      return styled.css`
+        bottom: 0;
+        left: 100%;
+        transform-origin: bottom left;
+        margin-left: 8px;
+      `;
+    default:
+      return styled.css``;
+  }
+};
+const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+const TooltipContent = styled.div.withConfig({
+  shouldForwardProp: (props) => !["position", "color", "zIndex", "state", "width"].includes(props)
+})`
+  position: absolute;
+  padding: ${({ theme }) => theme.space.xs};
+  border-radius: ${({ theme }) => theme.control.radius};
+  background-color: ${({ color, theme }) => getColor(theme, color)};
+  color: ${({ theme }) => theme.colors.gray["9"]};
+  z-index: ${({ zIndex }) => zIndex};
+  pointer-events: none;
+  white-space: nowrap;
+  opacity: ${({ state }) => state === "entered" ? 1 : 0};
+  transform: ${({ state }) => state === "entered" ? "scale(1)" : "scale(0.9)"};
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+  width: ${({ width }) => width ? `${width}px` : "max-content"};
+  text-wrap: wrap;
+
+  ${({ state, position }) => getPosition(position, state)};
+`;
+const TooltipArrowStyled = styled.div.withConfig({
+  shouldForwardProp: (props) => !["position", "color"].includes(props)
+})`
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+
+  ${({ position, color, theme }) => {
+  const _color = getColor(theme, color);
+  switch (position) {
+    case "top":
+      return styled.css`
+          left: 50%;
+          top: 100%;
+          margin-left: -5px;
+          border-width: 5px 5px 0 5px;
+          border-color: ${_color} transparent transparent transparent;
+        `;
+    case "bottom":
+      return styled.css`
+          bottom: 100%;
+          left: 50%;
+          margin-left: -5px;
+          border-width: 0 5px 5px 5px;
+          border-color: transparent transparent ${_color} transparent;
+        `;
+    case "left":
+      return styled.css`
+          top: 50%;
+          left: 100%;
+          margin-top: -5px;
+          border-width: 5px 0 5px 5px;
+          border-color: transparent transparent transparent ${_color};
+        `;
+    case "right":
+      return styled.css`
+          top: 50%;
+          right: 100%;
+          margin-top: -5px;
+          border-width: 5px 5px 5px 0;
+          border-color: transparent ${_color} transparent transparent;
+        `;
+    case "topLeft":
+      return styled.css`
+          top: 100%;
+          left: 10px;
+          border-width: 5px 5px 0 5px;
+          border-color: ${_color} transparent transparent transparent;
+        `;
+    case "topRight":
+      return styled.css`
+          top: 100%;
+          right: 10px;
+          border-width: 5px 5px 0 5px;
+          border-color: ${_color} transparent transparent transparent;
+        `;
+    case "bottomLeft":
+      return styled.css`
+          bottom: 100%;
+          left: 10px;
+          border-width: 0 5px 5px 5px;
+          border-color: transparent transparent ${_color} transparent;
+        `;
+    case "bottomRight":
+      return styled.css`
+          bottom: 100%;
+          right: 10px;
+          border-width: 0 5px 5px 5px;
+          border-color: transparent transparent ${_color} transparent;
+        `;
+    case "leftTop":
+      return styled.css`
+          top: 10px;
+          left: 100%;
+          border-width: 5px 0 5px 5px;
+          border-color: transparent transparent transparent ${_color};
+        `;
+    case "leftBottom":
+      return styled.css`
+          bottom: 10px;
+          left: 100%;
+          border-width: 5px 0 5px 5px;
+          border-color: transparent transparent transparent ${_color};
+        `;
+    case "rightBottom":
+      return styled.css`
+          bottom: 10px;
+          right: 100%;
+          border-width: 5px 5px 5px 0;
+          border-color: transparent ${_color} transparent transparent;
+        `;
+    case "rightTop":
+      return styled.css`
+          top: 10px;
+          right: 100%;
+          border-width: 5px 5px 5px 0;
+          border-color: transparent ${_color} transparent transparent;
+        `;
+    default:
+      return "";
+  }
+}}
+`;
+exports.TooltipArrowStyled = TooltipArrowStyled;
+exports.TooltipContainer = TooltipContainer;
+exports.TooltipContent = TooltipContent;

package/dist/Tooltip/styles.d.ts

@@ -0,0 +1,13 @@
+import { ITooltipProps } from './types';
+export declare const TooltipContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TooltipContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color: string;
+    position: ITooltipProps["position"];
+    zIndex: number;
+    state: string;
+    width?: number;
+}>> & string;
+export declare const TooltipArrowStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color: string;
+    position: ITooltipProps["position"];
+}>> & string;

package/dist/Tooltip/styles.es.js

@@ -0,0 +1,232 @@
+import styled, { css } from "styled-components";
+const getColor = (theme, color) => {
+  return color in theme.colors ? theme.colors[color]["5"] : color;
+};
+const getPosition = (position, state) => {
+  switch (position) {
+    case "top":
+      return css`
+        bottom: 100%;
+        left: 50%;
+        transform-origin: bottom center;
+        margin-bottom: 8px;
+        transform: translateX(-50%) scale(${state === "entered" ? 1 : 0.9});
+      `;
+    case "bottom":
+      return css`
+        top: 100%;
+        left: 50%;
+        transform-origin: top center;
+        margin-top: 8px;
+        transform: translateX(-50%) scale(${state === "entered" ? 1 : 0.9});
+      `;
+    case "left":
+      return css`
+        top: 50%;
+        right: 100%;
+        transform-origin: center right;
+        margin-right: 8px;
+        transform: translateY(-50%) scale(${state === "entered" ? 1 : 0.9});
+      `;
+    case "right":
+      return css`
+        top: 50%;
+        left: 100%;
+        transform-origin: center left;
+        margin-left: 8px;
+        transform: translateY(-50%) scale(${state === "entered" ? 1 : 0.9});
+      `;
+    case "topLeft":
+      return css`
+        bottom: 100%;
+        left: 0;
+        transform-origin: bottom left;
+        margin-bottom: 8px;
+      `;
+    case "topRight":
+      return css`
+        bottom: 100%;
+        right: 0;
+        transform-origin: bottom right;
+        margin-bottom: 8px;
+      `;
+    case "bottomLeft":
+      return css`
+        top: 100%;
+        left: 0;
+        transform-origin: top left;
+        margin-top: 8px;
+      `;
+    case "bottomRight":
+      return css`
+        top: 100%;
+        right: 0;
+        transform-origin: top right;
+        margin-top: 8px;
+      `;
+    case "leftTop":
+      return css`
+        top: 0;
+        right: 100%;
+        transform-origin: top right;
+        margin-right: 8px;
+      `;
+    case "leftBottom":
+      return css`
+        bottom: 0;
+        right: 100%;
+        transform-origin: bottom right;
+        margin-right: 8px;
+      `;
+    case "rightTop":
+      return css`
+        top: 0;
+        left: 100%;
+        transform-origin: top left;
+        margin-left: 8px;
+      `;
+    case "rightBottom":
+      return css`
+        bottom: 0;
+        left: 100%;
+        transform-origin: bottom left;
+        margin-left: 8px;
+      `;
+    default:
+      return css``;
+  }
+};
+const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+const TooltipContent = styled.div.withConfig({
+  shouldForwardProp: (props) => !["position", "color", "zIndex", "state", "width"].includes(props)
+})`
+  position: absolute;
+  padding: ${({ theme }) => theme.space.xs};
+  border-radius: ${({ theme }) => theme.control.radius};
+  background-color: ${({ color, theme }) => getColor(theme, color)};
+  color: ${({ theme }) => theme.colors.gray["9"]};
+  z-index: ${({ zIndex }) => zIndex};
+  pointer-events: none;
+  white-space: nowrap;
+  opacity: ${({ state }) => state === "entered" ? 1 : 0};
+  transform: ${({ state }) => state === "entered" ? "scale(1)" : "scale(0.9)"};
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+  width: ${({ width }) => width ? `${width}px` : "max-content"};
+  text-wrap: wrap;
+
+  ${({ state, position }) => getPosition(position, state)};
+`;
+const TooltipArrowStyled = styled.div.withConfig({
+  shouldForwardProp: (props) => !["position", "color"].includes(props)
+})`
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+
+  ${({ position, color, theme }) => {
+  const _color = getColor(theme, color);
+  switch (position) {
+    case "top":
+      return css`
+          left: 50%;
+          top: 100%;
+          margin-left: -5px;
+          border-width: 5px 5px 0 5px;
+          border-color: ${_color} transparent transparent transparent;
+        `;
+    case "bottom":
+      return css`
+          bottom: 100%;
+          left: 50%;
+          margin-left: -5px;
+          border-width: 0 5px 5px 5px;
+          border-color: transparent transparent ${_color} transparent;
+        `;
+    case "left":
+      return css`
+          top: 50%;
+          left: 100%;
+          margin-top: -5px;
+          border-width: 5px 0 5px 5px;
+          border-color: transparent transparent transparent ${_color};
+        `;
+    case "right":
+      return css`
+          top: 50%;
+          right: 100%;
+          margin-top: -5px;
+          border-width: 5px 5px 5px 0;
+          border-color: transparent ${_color} transparent transparent;
+        `;
+    case "topLeft":
+      return css`
+          top: 100%;
+          left: 10px;
+          border-width: 5px 5px 0 5px;
+          border-color: ${_color} transparent transparent transparent;
+        `;
+    case "topRight":
+      return css`
+          top: 100%;
+          right: 10px;
+          border-width: 5px 5px 0 5px;
+          border-color: ${_color} transparent transparent transparent;
+        `;
+    case "bottomLeft":
+      return css`
+          bottom: 100%;
+          left: 10px;
+          border-width: 0 5px 5px 5px;
+          border-color: transparent transparent ${_color} transparent;
+        `;
+    case "bottomRight":
+      return css`
+          bottom: 100%;
+          right: 10px;
+          border-width: 0 5px 5px 5px;
+          border-color: transparent transparent ${_color} transparent;
+        `;
+    case "leftTop":
+      return css`
+          top: 10px;
+          left: 100%;
+          border-width: 5px 0 5px 5px;
+          border-color: transparent transparent transparent ${_color};
+        `;
+    case "leftBottom":
+      return css`
+          bottom: 10px;
+          left: 100%;
+          border-width: 5px 0 5px 5px;
+          border-color: transparent transparent transparent ${_color};
+        `;
+    case "rightBottom":
+      return css`
+          bottom: 10px;
+          right: 100%;
+          border-width: 5px 5px 5px 0;
+          border-color: transparent ${_color} transparent transparent;
+        `;
+    case "rightTop":
+      return css`
+          top: 10px;
+          right: 100%;
+          border-width: 5px 5px 5px 0;
+          border-color: transparent ${_color} transparent transparent;
+        `;
+    default:
+      return "";
+  }
+}}
+`;
+export {
+  TooltipArrowStyled,
+  TooltipContainer,
+  TooltipContent
+};

package/dist/Tooltip/types.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface ITooltipProps {
+    /** Tooltip content */
+    text: React.ReactNode;
+    /** Trigger element */
+    children: React.ReactNode;
+    /** Background color */
+    color?: string;
+    /** Controlled visibility state */
+    open?: boolean;
+    /** Position relative to trigger */
+    position?: "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightBottom" | "rightTop";
+    /** Stacking context */
+    zIndex?: number;
+    /** Uncontrolled visibility (always show if true) */
+    show?: boolean;
+    /** Maximum width (px) */
+    width?: number;
+    /** Custom CSS class */
+    className?: string;
+    [key: string]: any;
+}