@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/Skeleton/Square.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Square: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Skeleton/Square.js

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+const Square = styled.div`
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  background-color: ${({ theme }) => theme.colors.neutral.borderWeak};
+`;
+export {
+  Square
+};

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+declare const variants: {
+    readonly block: ({ length }: {
+        length?: number | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    readonly blocks: ({ col, length, }: {
+        col?: number | undefined;
+        length?: number | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    readonly box: ({ col, length, }: {
+        col?: number | undefined;
+        length?: number | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    readonly donut: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    readonly line: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    readonly list: ({ length, col, }: {
+        length?: number | undefined;
+        col?: number | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    readonly slider: ({ length }: {
+        length?: number | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    readonly square: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+type SkeletonVariant = keyof typeof variants;
+type SkeletonProps = {
+    variant?: SkeletonVariant;
+    length?: number;
+    col?: number;
+    className?: string;
+    'aria-label'?: string;
+    'data-testid'?: string;
+};
+/**
+ * Skeleton component is used to indicate that the data is loading.
+ * It is used to provide a better user experience by showing a temporary placeholder reflecting the dimensions of the
+ * content that will eventually be loaded on the screen.
+ */
+export declare const Skeleton: ({ variant, length, col, className, "aria-label": ariaLabel, "data-testid": dataTestId, }: SkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const skeletonTypes: ("line" | "list" | "slider" | "square" | "block" | "blocks" | "box" | "donut")[];
+export {};

package/dist/components/Skeleton/index.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Block } from "./Block.js";
+import { Blocks } from "./Blocks.js";
+import { BoxWithIcon } from "./BoxWithIcon.js";
+import { Donut } from "./Donut.js";
+import { Line } from "./Line.js";
+import { List } from "./List.js";
+import { Slider } from "./Slider.js";
+import { Square } from "./Square.js";
+const shineAnimation = keyframes`
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+`;
+const StyledContainer = styled.div`
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  cursor: progress;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+`;
+const StyledDiv = styled.div`
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 25%;
+  opacity: 0.8;
+  background: linear-gradient(
+    90deg,
+    ${({ theme }) => theme.colors.neutral.backgroundWeak}00,
+    ${({ theme }) => theme.colors.neutral.backgroundWeak}4D,
+    ${({ theme }) => theme.colors.neutral.backgroundWeak}66,
+    ${({ theme }) => theme.colors.neutral.backgroundWeak}4D,
+    ${({ theme }) => theme.colors.neutral.backgroundWeak}00
+  );
+  animation: ${shineAnimation} 1s linear infinite;
+  animation-direction: alternate;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: unset;
+  }
+`;
+const variants = {
+  block: Block,
+  blocks: Blocks,
+  box: BoxWithIcon,
+  donut: Donut,
+  line: Line,
+  list: List,
+  slider: Slider,
+  square: Square
+};
+const Skeleton = ({
+  variant = "blocks",
+  length,
+  col,
+  className,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId
+}) => {
+  const Component = variants[variant];
+  return /* @__PURE__ */ jsxs(
+    StyledContainer,
+    {
+      className,
+      "aria-busy": true,
+      "aria-live": "polite",
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx(Component, { length, col }),
+        /* @__PURE__ */ jsx(StyledDiv, {})
+      ]
+    }
+  );
+};
+export {
+  Skeleton
+};

package/dist/components/Snippet/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+import { CopyButton } from '../CopyButton';
+type Prefixes = 'lines' | 'command';
+type SnippetProps = {
+    className?: string;
+    children: string;
+    /**
+     * prefix display an element at the beginning of the snippet that is not copiable or selectable.
+     * For `lines` prefix it will display the line number.
+     * For `command` prefix it will display a `$` sign.
+     */
+    prefix?: Prefixes;
+    showText?: string;
+    hideText?: string;
+    'data-testid'?: string;
+    initiallyExpanded?: boolean;
+} & Pick<ComponentProps<typeof CopyButton>, 'copyText' | 'copiedText'>;
+/**
+ * Snippet component is used to display code snippets with the ability to copy the code.
+ * It also has the ability to show/hide the code snippet if it has more than 4 lines.
+ */
+export declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, }: SnippetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Snippet/index.js

@@ -0,0 +1,171 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { useReducer, Children } from "react";
+import { CopyButton } from "../CopyButton/index.js";
+import { Expandable } from "../Expandable/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const LINES_BREAK_REGEX = /\r\n|\r|\n/;
+const PreText = styled(Text, {
+  shouldForwardProp: (prop) => !["multiline", "hasShowMoreButton", "showMore"].includes(prop)
+})`
+  margin: 0;
+  padding: ${({ theme }) => theme.space["2"]};
+  padding-right: ${({ theme }) => theme.space["9"]};
+  overflow-x: ${({ hasShowMoreButton, showMore }) => hasShowMoreButton && !showMore ? "hidden" : "auto"};
+  overflow-y: hidden;
+  ${({ multiline }) => !multiline ? "white-space: nowrap;" : ""}
+  height: auto;
+  counter-reset: section;
+`;
+const StyledSpan = styled("span", {
+  shouldForwardProp: (prop) => !["linePrefix", "multiline", "prefix"].includes(prop)
+})`
+  display: block;
+
+  &:after {
+    content: '';
+    ${({ theme, multiline }) => multiline ? `padding: ${theme.space["4"]}` : `padding-right: ${theme.space["8"]}`};
+  }
+
+  ${({ prefix, theme }) => prefix ? `
+    &:before {
+      color: ${theme.colors.neutral.textWeak};
+      width: ${prefix === "lines" ? "35px" : ""};
+      display: inline-flex;
+      justify-content: flex-end;
+      counter-increment: section;
+      content: ${prefix === "lines" ? "counter(section)" : "'$'"};
+      padding-right: ${theme.space["1"]};
+    }
+  ` : null}
+`;
+const Container = styled("div", {
+  shouldForwardProp: (prop) => !["multiline"].includes(prop)
+})`
+  position: relative;
+  display: flex;
+  justify-content: start;
+  max-width: 100%;
+  ${({ multiline }) => multiline ? "width: 100%;" : ""}
+  background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  border-radius: ${({ theme }) => theme.radii.default};
+`;
+const StyledStack = styled(Stack)`
+  width: 100%;
+`;
+const ButtonContainer = styled("div", {
+  shouldForwardProp: (prop) => !["multiline"].includes(prop)
+})`
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: ${({ theme, multiline }) => `${theme.space[multiline ? "2" : "1"]} ${theme.space["2"]} 0 0`};
+  background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  border-radius: ${({ theme }) => theme.radii.default};
+  border: 2px solid transparent;
+  ${({ multiline, theme }) => !multiline ? `box-shadow: -27px 0 19px -11px ${theme.colors.neutral.backgroundWeak}` : ""};
+`;
+const ShowMoreContainer = styled("div", {
+  shouldForwardProp: (prop) => !["showMore"].includes(prop)
+})`
+  width: 100%;
+  box-shadow: ${({ theme, showMore }) => !showMore ? `0px -22px 19px -6px
+    ${theme.colors.neutral.backgroundWeak}` : "none"};
+`;
+const StyledButton = styled.button`
+  width: 100%;
+  background: none;
+  border: none;
+  padding: ${({ theme }) => theme.space["2"]};
+  padding-top: ${({ theme }) => theme.space["1"]};
+  cursor: pointer;
+`;
+const AlignCenterText = styled(Text)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const AnimatedArrowIcon = styled(Icon, {
+  shouldForwardProp: (prop) => !["showMore"].includes(prop)
+})`
+  transform: ${({ showMore }) => showMore ? "rotate(180deg)" : "rotate(0deg)"};
+  transform-origin: center;
+  transition: transform 300ms ease-in-out;
+`;
+const CodeContent = ({
+  children,
+  prefix,
+  multiline,
+  showMore,
+  hasShowMoreButton,
+  lines
+}) => /* @__PURE__ */ jsx(
+  PreText,
+  {
+    as: "pre",
+    variant: "code",
+    multiline,
+    hasShowMoreButton,
+    showMore,
+    children: multiline ? Children.map(lines, (child) => /* @__PURE__ */ jsx(StyledSpan, { multiline: true, prefix, children: child })) : /* @__PURE__ */ jsx(StyledSpan, { prefix, children })
+  }
+);
+const Snippet = ({
+  children,
+  copyText,
+  copiedText,
+  showText = "Show",
+  hideText = "Hide",
+  prefix,
+  className,
+  "data-testid": dataTestId,
+  initiallyExpanded
+}) => {
+  const [showMore, setShowMore] = useReducer(
+    (value) => !value,
+    initiallyExpanded ?? false
+  );
+  const lines = children.split(LINES_BREAK_REGEX).filter(Boolean);
+  const numberOfLines = lines.length;
+  const multiline = numberOfLines > 1;
+  const hasShowMoreButton = numberOfLines > 4 && multiline;
+  return /* @__PURE__ */ jsx(
+    Container,
+    {
+      multiline,
+      className,
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsxs(StyledStack, { children: [
+        hasShowMoreButton ? /* @__PURE__ */ jsx(Expandable, { minHeight: 120, opened: showMore, children: /* @__PURE__ */ jsx(CodeContent, { prefix, multiline, lines, children }) }) : /* @__PURE__ */ jsx(CodeContent, { prefix, multiline, lines, children }),
+        /* @__PURE__ */ jsx(ButtonContainer, { multiline: multiline && numberOfLines > 1, children: /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            value: children,
+            copyText,
+            copiedText,
+            noBorder: true,
+            sentiment: "neutral"
+          }
+        ) }),
+        hasShowMoreButton ? /* @__PURE__ */ jsx(ShowMoreContainer, { showMore, children: /* @__PURE__ */ jsx(
+          StyledButton,
+          {
+            type: "button",
+            onClick: setShowMore,
+            "aria-expanded": showMore,
+            children: /* @__PURE__ */ jsxs(AlignCenterText, { as: "span", variant: "bodySmallStrong", children: [
+              showMore ? hideText : showText,
+              " ",
+              /* @__PURE__ */ jsx(AnimatedArrowIcon, { name: "arrow-down", showMore })
+            ] })
+          }
+        ) }) : null
+      ] })
+    }
+  );
+};
+export {
+  Snippet
+};

package/dist/components/Stack/index.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { UltravioletUITheme } from '../../theme';
+type StackProps = {
+    gap?: keyof UltravioletUITheme['space'] | number;
+    direction?: 'row' | 'column';
+    alignItems?: CSSProperties['alignItems'];
+    justifyContent?: CSSProperties['justifyContent'];
+    wrap?: boolean | CSSProperties['flexWrap'];
+    width?: CSSProperties['width'];
+    flex?: CSSProperties['flex'];
+    className?: string;
+    children: ReactNode;
+    'data-testid'?: string;
+};
+/**
+ * A Stack is a widget that organize children in a vertical or horizontal layout based on css Flex,
+ * it accepts few props to deal with spacing and align.
+ */
+export declare const Stack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & StackProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/dist/components/Stack/index.js

@@ -0,0 +1,36 @@
+import styled from "@emotion/styled";
+const Stack = styled("div", {
+  shouldForwardProp: (prop) => ![
+    "gap",
+    "direction",
+    "alignItems",
+    "justifyContent",
+    "wrap",
+    "width",
+    "flex"
+  ].includes(prop)
+})`
+  display: flex;
+
+  ${({
+  theme,
+  gap = 0,
+  direction = "column",
+  alignItems = "normal",
+  justifyContent = "normal",
+  wrap = "nowrap",
+  width,
+  flex
+}) => `
+    gap: ${theme.space[gap]};
+    flex-direction: ${direction};
+    align-items: ${alignItems};
+    justify-content: ${justifyContent};
+    flex-wrap: ${typeof wrap === "boolean" ? "wrap" : wrap};
+    ${flex ? `flex: ${flex};` : ""}
+    ${width ? `width: ${width};` : ""}
+  `}
+`;
+export {
+  Stack
+};

package/dist/components/Status/index.d.ts

@@ -0,0 +1,32 @@
+import type { Theme } from '@emotion/react';
+declare const sentiments: {
+    readonly danger: ({ theme }: {
+        theme: Theme;
+    }) => string;
+    readonly info: ({ theme }: {
+        theme: Theme;
+    }) => string;
+    readonly neutral: ({ theme }: {
+        theme: Theme;
+    }) => string;
+    readonly success: ({ theme }: {
+        theme: Theme;
+    }) => string;
+    readonly warning: ({ theme }: {
+        theme: Theme;
+    }) => string;
+};
+type StatusSentiment = keyof typeof sentiments;
+export declare const statusSentiments: ("neutral" | "success" | "danger" | "warning" | "info")[];
+type StatusProps = {
+    animated?: boolean;
+    className?: string;
+    sentiment: StatusSentiment;
+    tooltip?: string;
+    'data-testid'?: string;
+};
+/**
+ * Status component used to display a colored circle with a tooltip for additional information.
+ */
+export declare const Status: ({ animated, className, tooltip, sentiment, "data-testid": dataTestId, }: StatusProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Status/index.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Tooltip } from "../Tooltip/index.js";
+import { ping } from "../../utils/animations.js";
+const HEIGHT = "10px";
+const WIDTH = "10px";
+const sentiments = {
+  danger: ({ theme }) => `
+      background-color: ${theme.colors.danger.backgroundStrong};
+    `,
+  info: ({ theme }) => `
+      background-color: ${theme.colors.info.backgroundStrong};
+    `,
+  neutral: ({ theme }) => `
+      background-color: ${theme.colors.neutral.backgroundStronger};
+    `,
+  success: ({ theme }) => `
+      background-color: ${theme.colors.success.backgroundStrong};
+    `,
+  warning: ({ theme }) => `
+      background-color: ${theme.colors.warning.backgroundStrong};
+    `
+};
+const StyledCircle = styled.span`
+  display: inline-block;
+  width: ${WIDTH};
+  height: ${HEIGHT};
+  border-radius: ${({ theme }) => theme.radii.circle};
+  ${({ sentiment }) => sentiments[sentiment]};
+`;
+const StyledAnimatedCircle = styled.span`
+  position: absolute;
+  width: ${WIDTH};
+  height: ${HEIGHT};
+  opacity: 0.75;
+  border-radius: ${({ theme }) => theme.radii.circle};
+  animation: ${ping} 1.1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  ${({ sentiment }) => sentiments[sentiment]};
+`;
+const Container = styled.span`
+  display: flex;
+  width: ${WIDTH};
+  height: ${HEIGHT};
+`;
+const Status = ({
+  animated = false,
+  className,
+  tooltip,
+  sentiment,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(Container, { className, "data-testid": dataTestId, children: [
+  animated ? /* @__PURE__ */ jsx(StyledAnimatedCircle, { sentiment }) : null,
+  /* @__PURE__ */ jsx(StyledCircle, { sentiment })
+] }) });
+export {
+  Status
+};

package/dist/components/StepList/index.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Bullet } from '../Bullet';
+export type Sizes = 'small' | 'medium';
+type ContentProps = {
+    bulletIcon: ComponentProps<typeof Bullet>['icon'];
+    bulletText?: never;
+} | {
+    bulletIcon?: never;
+    bulletText: string;
+};
+type ItemProps = {
+    sentiment?: ComponentProps<typeof Bullet>['sentiment'];
+    prominence?: ComponentProps<typeof Bullet>['prominence'];
+    size?: Sizes;
+    disabled?: boolean;
+    children: ReactNode;
+    onClick?: () => void;
+    className?: string;
+} & ContentProps;
+type StepListProps = {
+    children: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * StepList component is used to display a list of steps.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export declare const StepList: {
+    ({ children, className, "data-testid": dataTestId, }: StepListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Item: ({ bulletText, bulletIcon, sentiment, prominence, children, onClick, size, disabled, className, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/StepList/index.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Bullet } from "../Bullet/index.js";
+const Steps = styled.ul`
+  list-style: none;
+  padding-left: 0;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space["3"]};
+  font-size: 16px;
+`;
+const Step = styled("li", {
+  shouldForwardProp: (prop) => !["disabled"].includes(prop)
+})`
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  justify-content: center;
+  color: ${({ theme, disabled }) => disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.textStrong};
+`;
+const StyledDiv = styled("div", {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  flex: 1;
+  margin: auto;
+  line-height: ${({ size }) => size === "medium" ? "32px" : "24px"};
+  font-size: ${({ size }) => size === "medium" ? "24px" : "16px"};
+`;
+const Item = ({
+  bulletText,
+  bulletIcon,
+  sentiment,
+  prominence,
+  children,
+  onClick,
+  size = "medium",
+  disabled = false,
+  className
+}) => /* @__PURE__ */ jsxs(Step, { disabled, className, onClick, children: [
+  bulletIcon ? /* @__PURE__ */ jsx(
+    Bullet,
+    {
+      icon: bulletIcon,
+      size,
+      sentiment: disabled ? "disabled" : sentiment,
+      prominence
+    }
+  ) : null,
+  bulletText ? /* @__PURE__ */ jsx(
+    Bullet,
+    {
+      text: bulletText,
+      size,
+      sentiment: disabled ? "disabled" : sentiment,
+      prominence
+    }
+  ) : null,
+  /* @__PURE__ */ jsx(StyledDiv, { size, children })
+] });
+const StepList = ({
+  children,
+  className,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsx(Steps, { className, "data-testid": dataTestId, children });
+StepList.Item = Item;
+export {
+  StepList
+};

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+type StepperProps = {
+    animated?: boolean;
+    selected?: number;
+    children: ReactNode[];
+    className?: string;
+    labelPosition?: 'bottom' | 'right';
+    size?: 'small' | 'medium';
+    'data-testid'?: string;
+};
+/**
+ * Stepper component to show the progress of a process in a linear way.
+ */
+export declare const Stepper: ({ children, selected, animated, className, labelPosition, size, "data-testid": dataTestId, }: StepperProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};