@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -0,0 +1,39 @@
+import { Icon } from '@ultraviolet/icons';
+import type { ComponentProps } from 'react';
+import type { XOR } from '../../types';
+export declare const PROMINENCES: {
+    default: string;
+    strong: string;
+};
+type ProminenceType = keyof typeof PROMINENCES;
+declare const BULLET_SENTIMENTS: string[];
+type BulletSentiment = (typeof BULLET_SENTIMENTS)[number];
+declare const sizes: {
+    readonly medium: "\n    width: 32px;\n    height: 32px;\n    font-size: 16px;\n  ";
+    readonly small: "\n    width: 24px;\n    height: 24px;\n    font-size: 14px;\n  ";
+};
+type BulletSize = keyof typeof sizes;
+export declare const bulletSizes: ("small" | "medium")[];
+type ContentProps = XOR<[
+    {
+        icon: ComponentProps<typeof Icon>['name'];
+        iconVariant?: ComponentProps<typeof Icon>['variant'];
+    },
+    {
+        text: string;
+    }
+]>;
+type BulletProps = {
+    className?: string;
+    size?: BulletSize;
+    tooltip?: string;
+    tooltipBaseId?: string;
+    sentiment?: BulletSentiment;
+    'data-testid'?: string;
+    prominence?: ProminenceType;
+} & ContentProps;
+/**
+ * Bullet component is used to display a small icon or text with a colored background in a circle.
+ */
+export declare const Bullet: ({ className, sentiment, size, icon, iconVariant, text, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, }: BulletProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Bullet/index.js

@@ -0,0 +1,88 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { SENTIMENTS_WITHOUT_NEUTRAL } from "../../theme/index.js";
+import capitalize from "../../utils/capitalize.js";
+import { Tooltip } from "../Tooltip/index.js";
+const PROMINENCES = {
+  default: "default",
+  strong: "strong"
+};
+const sizes = {
+  medium: `
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+  `,
+  small: `
+    width: 24px;
+    height: 24px;
+    font-size: 14px;
+  `
+};
+const sentimentStyles = ({
+  theme,
+  prominence
+}) => {
+  const definedProminence = prominence === PROMINENCES.strong ? capitalize(PROMINENCES.strong) : "";
+  const text = `text${definedProminence}`;
+  const background = `background${definedProminence}`;
+  return {
+    ...SENTIMENTS_WITHOUT_NEUTRAL.reduce(
+      (reducer, sentiment) => ({
+        ...reducer,
+        [sentiment]: `
+      color: ${theme.colors[sentiment][text]};
+      background: ${theme.colors[sentiment][background]};
+      border: 1px solid ${theme.colors[sentiment][background]};
+    `
+      }),
+      {}
+    ),
+    neutral: `
+      color: ${prominence === PROMINENCES.strong ? theme.colors.neutral[text] : theme.colors.neutral.text};
+      background: ${theme.colors.neutral.background};
+      border: 1px solid ${theme.colors.neutral.border};
+    `,
+    disabled: `
+      color: ${theme.colors.neutral.textWeak};
+      background: ${theme.colors.neutral.backgroundStrong};
+      border: none;
+    `
+  };
+};
+const sizeStyles = ({ size }) => sizes[size];
+const StyledContainer = styled("div")`
+  display: inline-flex;
+  border-radius: ${({ theme }) => theme.radii.circle};
+  justify-content: center;
+  align-items: center;
+  ${({ theme, prominence, sentiment }) => sentimentStyles({ theme, prominence })[sentiment]}
+  ${sizeStyles}
+`;
+const Bullet = ({
+  className,
+  sentiment = "neutral",
+  size = "medium",
+  icon,
+  iconVariant,
+  text,
+  tooltip,
+  tooltipBaseId,
+  "data-testid": dataTestId,
+  prominence = "default"
+}) => /* @__PURE__ */ jsx(Tooltip, { id: tooltipBaseId, text: tooltip, children: /* @__PURE__ */ jsx(
+  StyledContainer,
+  {
+    sentiment,
+    size,
+    className,
+    "data-testid": dataTestId,
+    prominence,
+    children: icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "small", variant: iconVariant }) : text
+  }
+) });
+export {
+  Bullet,
+  PROMINENCES
+};

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

@@ -0,0 +1,120 @@
+import type { Theme } from '@emotion/react';
+import { Icon } from '@ultraviolet/icons';
+import type { AriaRole, ButtonHTMLAttributes, ComponentProps, MouseEventHandler, ReactNode } from 'react';
+import type { SENTIMENTS } from '../../theme';
+type SENTIMENT = (typeof SENTIMENTS)[number];
+export declare const SIZE_HEIGHT: {
+    readonly large: 48;
+    readonly medium: 40;
+    readonly small: 32;
+    readonly xsmall: 24;
+};
+type ButtonSize = keyof typeof SIZE_HEIGHT;
+export declare const buttonSizes: ("large" | "small" | "xsmall" | "medium")[];
+declare const VARIANTS_COMPONENTS: {
+    filled: {
+        button: import("@emotion/styled").StyledComponent<{
+            theme?: Theme | undefined;
+            as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+        } & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+        link: import("@emotion/styled").StyledComponent<{
+            theme?: Theme | undefined;
+            as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+        } & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+    };
+    outlined: {
+        button: import("@emotion/styled").StyledComponent<{
+            theme?: Theme | undefined;
+            as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+        } & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+        link: import("@emotion/styled").StyledComponent<{
+            theme?: Theme | undefined;
+            as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+        } & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+    };
+    ghost: {
+        button: import("@emotion/styled").StyledComponent<{
+            theme?: Theme | undefined;
+            as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+        } & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+        link: import("@emotion/styled").StyledComponent<{
+            theme?: Theme | undefined;
+            as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+        } & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+    };
+};
+type ButtonVariant = keyof typeof VARIANTS_COMPONENTS;
+export declare const buttonVariants: ("filled" | "outlined" | "ghost")[];
+type CommonProps = {
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    autoFocus?: ButtonHTMLAttributes<HTMLButtonElement>['autoFocus'];
+    variant?: ButtonVariant;
+    role?: AriaRole;
+    size?: ButtonSize;
+    className?: string;
+    'data-testid'?: string;
+    sentiment?: SENTIMENT;
+    disabled?: boolean;
+    iconPosition?: 'left' | 'right';
+    iconVariant?: ComponentProps<typeof Icon>['variant'];
+    fullWidth?: boolean;
+    isLoading?: boolean;
+    'aria-label'?: string;
+    'aria-current'?: boolean;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
+    'aria-haspopup'?: boolean;
+    onClick?: MouseEventHandler<HTMLElement>;
+    tooltip?: string;
+    tabIndex?: ButtonHTMLAttributes<HTMLButtonElement>['tabIndex'];
+    onMouseDown?: MouseEventHandler<HTMLElement>;
+    onMouseUp?: MouseEventHandler<HTMLElement>;
+    onMouseOut?: MouseEventHandler<HTMLElement>;
+};
+type FinalProps = CommonProps & ({
+    children: ReactNode;
+    icon?: ComponentProps<typeof Icon>['name'];
+    name?: string;
+    href?: never;
+    target?: never;
+    download?: never;
+} | {
+    children?: never;
+    icon: ComponentProps<typeof Icon>['name'];
+    name?: string;
+    href?: never;
+    target?: never;
+    download?: never;
+} | {
+    children: ReactNode;
+    icon?: ComponentProps<typeof Icon>['name'];
+    name?: never;
+    href: string;
+    target?: string;
+    download?: string;
+} | {
+    children?: never;
+    icon: ComponentProps<typeof Icon>['name'];
+    name?: never;
+    href: string;
+    target?: string;
+    download?: string;
+});
+/**
+ * Button component is used to trigger an action or event, such as submitting a form, opening a dialog,
+ * canceling an action, or performing a delete operation.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<FinalProps & import("react").RefAttributes<Element>>;
+export {};

package/dist/components/Button/index.js

@@ -0,0 +1,291 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { forwardRef } from "react";
+import { Loader } from "../Loader/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const SIZE_HEIGHT = {
+  large: 48,
+  medium: 40,
+  small: 32,
+  xsmall: 24
+};
+const SIZE_PADDING_KEY = {
+  large: 2,
+  medium: 1.5,
+  small: 1,
+  xsmall: 0.5
+};
+const SIZE_GAP_KEY = {
+  large: 1,
+  medium: 1,
+  small: 1,
+  xsmall: 0.5
+};
+const FOCUS_RING_KEY = {
+  danger: "focusDanger",
+  info: "focusInfo",
+  neutral: "focusNeutral",
+  primary: "focusPrimary",
+  // @note: no focusSecondary so far, it will be added later, so far focusPrimary sounds fine
+  secondary: "focusPrimary",
+  success: "focusSuccess",
+  warning: "focusWarning"
+};
+const coreStyle = ({
+  theme,
+  size,
+  sentiment,
+  iconPosition,
+  fullWidth,
+  disabled,
+  iconOnly
+}) => {
+  const font = size === "large" ? theme.typography.bodyStrong : theme.typography.bodySmallStrong;
+  let width = "auto";
+  if (fullWidth) {
+    width = "100%";
+  } else if (iconOnly) {
+    width = `${SIZE_HEIGHT[size]}px`;
+  }
+  return `display: inline-flex;
+  height: ${SIZE_HEIGHT[size]}px;
+  padding: 0 ${theme.space[SIZE_PADDING_KEY[size]]};
+  flex-direction: ${iconPosition === "right" ? "row-reverse" : "row"};
+  gap: ${theme.space[SIZE_GAP_KEY[size]]};
+  border-radius: ${theme.radii.default};
+  box-sizing: border-box;
+  width: ${width};
+  align-items: center;
+  cursor: ${disabled ? "not-allowed" : "pointer"};
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+
+
+  ${disabled ? "" : `
+          &:active {
+            box-shadow: ${theme.shadows[FOCUS_RING_KEY[sentiment]]};
+          }
+        `}
+
+  /* We can't use Text component because of button hover effect, so we need to duplicate */
+  font-size: ${font.fontSize};
+  font-family: ${font.fontFamily};
+  font-weight: ${font.weight};
+  letter-spacing: ${font.letterSpacing};
+  line-height: ${font.lineHeight};
+  paragraph-spacing: ${font.paragraphSpacing};
+  text-case: ${font.textCase};
+`;
+};
+const StyledFilledButton = styled("button", {
+  shouldForwardProp: (prop) => !["size", "sentiment", "iconPosition", "fullWidth", "iconOnly"].includes(
+    prop
+  )
+})`
+  ${(args) => coreStyle(args)}
+
+  background: ${({ theme, sentiment }) => theme.colors[sentiment].backgroundStrong};
+  border: none;
+  color: ${({ theme, sentiment }) => theme.colors[sentiment].textStrong};
+
+  ${({ theme, sentiment, disabled }) => disabled ? `
+            background: ${theme.colors[sentiment].backgroundStrongDisabled};
+            color:
+              ${theme.colors[sentiment].textStrongDisabled};
+        ` : `
+            &:hover, &:active
+            {
+                background: ${theme.colors[sentiment].backgroundStrongHover};
+                color:
+                ${theme.colors[sentiment].textStrongHover};
+            }
+  `}
+`;
+const StyledOutlinedButton = styled("button", {
+  shouldForwardProp: (prop) => !["size", "sentiment", "iconPosition", "fullWidth", "iconOnly"].includes(
+    prop
+  )
+})`
+  ${(args) => coreStyle(args)}
+
+  background: none;
+  border: 1px solid
+    ${({ theme, sentiment }) => theme.colors[sentiment][sentiment === "neutral" ? "borderStrong" : "border"]};
+  color: ${({ theme, sentiment }) => theme.colors[sentiment].text};
+
+  ${({ theme, sentiment, disabled }) => disabled ? `
+        color:
+          ${theme.colors[sentiment].textDisabled};
+        border: 1px solid ${theme.colors[sentiment][sentiment === "neutral" ? "borderStrongDisabled" : "borderDisabled"]};
+
+    ` : `
+        &:hover, &:active
+       {
+            background: ${theme.colors[sentiment].backgroundHover};
+            color:
+            ${theme.colors[sentiment].textHover};
+            border: 1px solid ${theme.colors[sentiment][sentiment === "neutral" ? "borderStrongHover" : "borderHover"]};
+
+        }
+`};
+`;
+const StyledGhostButton = styled("button", {
+  shouldForwardProp: (prop) => !["size", "sentiment", "iconPosition", "fullWidth", "iconOnly"].includes(
+    prop
+  )
+})`
+  ${(args) => coreStyle(args)}
+
+  background: none;
+  border: none;
+  color: ${({ theme, sentiment }) => theme.colors[sentiment].text};
+
+  ${({ theme, sentiment, disabled }) => disabled ? `
+        color:
+          ${theme.colors[sentiment].textDisabled};
+      ` : `
+        &:hover, &:active
+        {
+            background: ${theme.colors[sentiment].backgroundHover};
+            color:
+              ${theme.colors[sentiment].textHover};
+        }
+`}
+`;
+const VARIANTS_COMPONENTS = {
+  filled: {
+    button: StyledFilledButton,
+    link: StyledFilledButton.withComponent("a")
+  },
+  outlined: {
+    button: StyledOutlinedButton,
+    link: StyledOutlinedButton.withComponent("a")
+  },
+  ghost: {
+    button: StyledGhostButton,
+    link: StyledGhostButton.withComponent("a")
+  }
+};
+const Button = forwardRef(
+  ({
+    type = "button",
+    className,
+    "data-testid": dataTestId,
+    sentiment = "primary",
+    variant = "filled",
+    size = "large",
+    disabled = false,
+    icon,
+    iconPosition = "left",
+    iconVariant,
+    fullWidth = false,
+    isLoading = false,
+    children,
+    onClick,
+    onMouseDown,
+    onMouseUp,
+    onMouseOut,
+    name,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHaspopup,
+    href,
+    download,
+    target,
+    role,
+    tooltip,
+    tabIndex,
+    autoFocus
+  }, ref) => {
+    const computeIsDisabled = disabled || isLoading;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      !isLoading && icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "small", variant: iconVariant }) : null,
+      isLoading ? /* @__PURE__ */ jsx(
+        Loader,
+        {
+          active: true,
+          trailColor: "transparent",
+          size: "1em",
+          color: "currentColor"
+        }
+      ) : null,
+      children && typeof children !== "string" ? /* @__PURE__ */ jsx("div", { children }) : children
+    ] });
+    if (href && !computeIsDisabled) {
+      const Component2 = VARIANTS_COMPONENTS[variant].link;
+      return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, containerFullWidth: fullWidth, children: /* @__PURE__ */ jsx(
+        Component2,
+        {
+          role,
+          className,
+          "data-testid": dataTestId,
+          disabled: false,
+          fullWidth,
+          iconPosition,
+          sentiment,
+          size,
+          type,
+          onClick,
+          "aria-label": ariaLabel,
+          "aria-current": ariaCurrent,
+          "aria-controls": ariaControls,
+          "aria-expanded": ariaExpanded,
+          "aria-haspopup": ariaHaspopup,
+          href,
+          target,
+          download,
+          ref,
+          iconOnly: !!icon && !children,
+          tabIndex,
+          autoFocus,
+          onMouseDown,
+          onMouseUp,
+          onMouseOut,
+          children: content
+        }
+      ) });
+    }
+    const Component = VARIANTS_COMPONENTS[variant].button;
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, containerFullWidth: fullWidth, children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        role,
+        className,
+        "data-testid": dataTestId,
+        disabled: computeIsDisabled,
+        fullWidth,
+        iconPosition,
+        sentiment,
+        size,
+        type,
+        onClick,
+        ref,
+        name,
+        "aria-label": ariaLabel,
+        "aria-current": ariaCurrent,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup,
+        iconOnly: !!icon && !children,
+        tabIndex,
+        autoFocus,
+        onMouseDown,
+        onMouseUp,
+        onMouseOut,
+        children: content
+      }
+    ) });
+  }
+);
+export {
+  Button,
+  SIZE_HEIGHT
+};

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+type CardProps = {
+    children: ReactNode;
+    /**
+     * Header can be a string but also a component if you need more complex header.
+     */
+    header?: ReactNode;
+    /**
+     * isActive enable a primary style on Card component for when you need to highlight it.
+     */
+    isActive?: boolean;
+    disabled?: boolean;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * Card component is a simple component to display content in a box with a border.
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Card/index.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef } from "react";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const StyledStack = styled(Stack)`
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
+const BorderedBox = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  border-radius: ${({ theme }) => theme.radii.default};
+  padding: ${({ theme }) => theme.space["3"]};
+
+  &[data-is-active='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.primary.border};
+  }
+
+  &[data-disabled='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.neutral.borderDisabled};
+  }
+`;
+const Card = forwardRef(
+  ({
+    header,
+    disabled = false,
+    isActive = false,
+    children,
+    className,
+    "data-testid": dataTestId
+  }, ref) => header ? /* @__PURE__ */ jsxs(
+    StyledStack,
+    {
+      gap: 1,
+      className,
+      "data-testid": dataTestId,
+      "data-disabled": disabled,
+      ref,
+      children: [
+        typeof header === "string" ? /* @__PURE__ */ jsx(Text, { variant: "heading", as: "h2", disabled, children: header }) : header,
+        /* @__PURE__ */ jsx(BorderedBox, { "data-is-active": isActive, "data-disabled": disabled, children })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    BorderedBox,
+    {
+      "data-is-active": isActive,
+      "data-disabled": disabled,
+      className,
+      "data-testid": dataTestId,
+      ref,
+      children
+    }
+  )
+);
+export {
+  Card
+};

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+type CarouselItemProps = {
+    children: ReactNode;
+    width?: string;
+};
+export declare const CarouselItem: ({ children, width, }: CarouselItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+type CarouselProps = {
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+};
+/**
+ * Carousel component allows you to scroll horizontally through a list of items.
+ */
+export declare const Carousel: {
+    ({ children, className, "data-testid": dataTestId, }: CarouselProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Item: ({ children, width, }: CarouselItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};