@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/Stepper/index.js

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { keyframes, css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Children, Fragment } from "react";
+import { Bullet } from "../Bullet/index.js";
+import { Text } from "../Text/index.js";
+const LINE_HEIGHT_SIZES = {
+  small: 2,
+  medium: 4
+};
+const loadingAnimation = keyframes`
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+`;
+const StyledStepContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+`;
+const StyledText = styled(Text)`
+  margin-top: ${({ theme }) => theme.space["1"]};
+`;
+const StyledBullet = styled(Bullet)`
+  margin-top: ${({ theme, size }) => size === "small" ? theme.space["0.5"] : 0};
+`;
+const loadingStyle = css`
+  animation: ${loadingAnimation} 1s linear infinite;
+`;
+const StyledLine = styled.div`
+  border-radius: ${({ theme }) => theme.radii.default};
+  flex-grow: 1;
+  border-radius: ${({ theme }) => theme.radii.default};
+  background-color: ${({ theme }) => theme.colors.neutral.backgroundStrong};
+  position: relative;
+
+  ::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-radius: ${({ theme }) => theme.radii.default};
+    background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
+    ${({ temporal }) => temporal === "previous" && `width: 100%;`}
+    ${({ temporal, animated }) => temporal === "current" && animated && loadingStyle}
+  }
+`;
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0 ${({ theme }) => theme.space["1"]};
+  gap: ${({ theme, labelPosition, size }) => size === "medium" && labelPosition === "bottom" ? theme.space["0"] : theme.space["1"]};
+
+  ${StyledStepContainer} {
+    display: flex;
+    flex-direction: ${({ labelPosition }) => labelPosition === "bottom" ? "column" : "row"};
+    align-items: ${({ labelPosition }) => labelPosition === "bottom" ? "center" : "baseline"};
+    gap: ${({ theme, labelPosition }) => labelPosition === "bottom" ? theme.space["0.5"] : theme.space["1"]};
+    white-space: nowrap;
+  }
+
+  ${StyledLine} {
+    height: ${({ size }) => LINE_HEIGHT_SIZES[size]}px;
+    margin-top: ${({ theme }) => theme.space["2"]};
+    margin-bottom: ${({ theme }) => theme.space["2"]};
+  }
+`;
+const StepperNumbers = ({
+  temporal,
+  children,
+  CurrentStep,
+  size = "medium"
+}) => /* @__PURE__ */ jsxs(StyledStepContainer, { children: [
+  /* @__PURE__ */ jsx(
+    StyledBullet,
+    {
+      sentiment: temporal === "next" ? "neutral" : "primary",
+      ...temporal === "previous" ? {
+        icon: "check"
+      } : {
+        text: CurrentStep.toString()
+      },
+      prominence: temporal !== "current" ? "default" : "strong",
+      size
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    StyledText,
+    {
+      as: "span",
+      variant: size === "medium" ? "body" : "bodySmall",
+      prominence: temporal === "next" ? "weak" : "default",
+      children
+    }
+  )
+] });
+const Stepper = ({
+  children,
+  selected = 0,
+  animated = false,
+  className,
+  labelPosition = "bottom",
+  size = "medium",
+  "data-testid": dataTestId
+}) => {
+  const cleanChildren = Children.toArray(children);
+  const lastStep = Children.count(cleanChildren) - 1;
+  return /* @__PURE__ */ jsx(
+    StyledContainer,
+    {
+      className,
+      "data-testid": dataTestId,
+      labelPosition,
+      size,
+      children: Children.map(cleanChildren, (child, index) => {
+        const getTemporal = () => {
+          if (selected > index)
+            return "previous";
+          if (selected === index)
+            return "current";
+          return "next";
+        };
+        const isNotLast = index < lastStep;
+        const temporal = getTemporal();
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              StepperNumbers,
+              {
+                CurrentStep: index + 1,
+                temporal,
+                size,
+                children: child
+              }
+            ),
+            isNotLast ? /* @__PURE__ */ jsx(StyledLine, { temporal, animated }) : null
+          ] }, `creation-progress-${index}`)
+        );
+      })
+    }
+  );
+};
+export {
+  Stepper
+};

package/dist/components/SwitchButton/FocusOverlay.d.ts

@@ -0,0 +1,8 @@
+type FocusOverlayProps = {
+    focusPosition: 'left' | 'right';
+    rightCardWidth: number;
+    leftCardWidth: number;
+    hasMouseDown: boolean;
+};
+export declare const FocusOverlay: ({ focusPosition, rightCardWidth, leftCardWidth, hasMouseDown, }: FocusOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SwitchButton/FocusOverlay.js

@@ -0,0 +1,47 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useMemo } from "react";
+const FOCUS_OVERLAY_SCALE_RATIO = 6;
+const FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET = 8;
+const StyledDiv = styled.div`
+  position: absolute;
+  height: calc(100% - ${({ theme }) => theme.space["1"]});
+  border-radius: ${({ theme }) => theme.radii.default};
+  background: ${({ theme }) => theme.colors.primary.backgroundStrong};
+  transform-origin: left center;
+  transition: all 200ms ease-in-out;
+
+  &[data-focusposition='right'] {
+    transform-origin: right center;
+  }
+`;
+const FocusOverlay = ({
+  focusPosition,
+  rightCardWidth,
+  leftCardWidth,
+  hasMouseDown
+}) => {
+  const translateXValue = useMemo(
+    () => focusPosition === "left" ? 0 : leftCardWidth + FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET,
+    [focusPosition, leftCardWidth]
+  );
+  const getScaleXValue = () => {
+    if (!hasMouseDown || !leftCardWidth || !rightCardWidth)
+      return 1;
+    const currentWidth = focusPosition === "left" ? leftCardWidth : rightCardWidth;
+    return 1 + FOCUS_OVERLAY_SCALE_RATIO / currentWidth;
+  };
+  return /* @__PURE__ */ jsx(
+    StyledDiv,
+    {
+      "data-focusposition": focusPosition,
+      style: {
+        transform: `translate3d(${translateXValue}px, 0, 0) scale3d(${getScaleXValue()}, 1, 1)`,
+        width: `${focusPosition === "left" ? leftCardWidth : rightCardWidth}px`
+      }
+    }
+  );
+};
+export {
+  FocusOverlay
+};

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

@@ -0,0 +1,26 @@
+import type { ChangeEventHandler, FocusEventHandler } from 'react';
+type SwitchButtonProps = {
+    name: string;
+    onBlur?: FocusEventHandler;
+    onChange: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
+    tooltip?: string;
+    value?: string | number;
+    leftButton: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    };
+    rightButton: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    };
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * SwitchButton is a component that allows the user to select between two options.
+ */
+export declare const SwitchButton: ({ value, onChange, onFocus, onBlur, name, leftButton, rightButton, tooltip, className, "data-testid": dataTestId, }: SwitchButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SwitchButton/index.js

@@ -0,0 +1,140 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef, useState, useEffect } from "react";
+import { SelectableCard } from "../SelectableCard/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { FocusOverlay } from "./FocusOverlay.js";
+const StyledBorderedBox = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  border-radius: ${({ theme }) => theme.radii.default};
+  padding: ${({ theme }) => theme.space["0.5"]};
+  display: flex;
+  gap: ${({ theme }) => theme.space["1"]};
+  position: relative;
+`;
+const StyledSelectableCard = styled(SelectableCard)`
+  border: none;
+  height: 40px;
+  padding: ${({ theme }) => theme.space["1"]} ${({ theme }) => theme.space["2"]};
+  font-weight: ${({ theme }) => theme.typography.bodyStrong.weight};
+  justify-content: center;
+  align-items: center;
+  transition: all 200ms ease-in-out;
+  white-space: nowrap;
+
+  &:hover,
+  &:focus-within,
+  &:active {
+    box-shadow: none;
+    border: none;
+    &:not([data-error='true'][data-disabled='true']) {
+      border: none;
+    }
+  }
+
+  &[data-checked='true'] {
+    border: none;
+  }
+
+  &[data-checked='true'] label {
+    color: ${({ theme }) => theme.colors.primary.textStrong};
+  }
+
+  &:not([data-checked='true']) label {
+    &:hover {
+      color: ${({ theme }) => theme.colors.primary.text};
+    }
+  }
+`;
+const SwitchButton = ({
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  name,
+  leftButton,
+  rightButton,
+  tooltip,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const leftButtonRef = useRef(null);
+  const rightButtonRef = useRef(null);
+  const [leftCardWidth, setLeftCardWidth] = useState();
+  const [rightCardWidth, setRightCardWidth] = useState();
+  const [hasMouseDown, setHasMouseDown] = useState(false);
+  const [localValue, setLocalValue] = useState(
+    value === leftButton.value ? leftButton.value : rightButton.value
+  );
+  const handleOnChange = (event) => {
+    onChange?.(event);
+    setLocalValue(event.target.value);
+  };
+  useEffect(() => {
+    if (!leftButtonRef.current || !rightButtonRef.current)
+      return;
+    setLeftCardWidth(leftButtonRef.current.getBoundingClientRect().width);
+    setRightCardWidth(rightButtonRef.current.getBoundingClientRect().width);
+  }, [leftButton.value, leftButtonRef, localValue, rightButtonRef]);
+  const setMouseDown = (isMouseDown) => () => setHasMouseDown(isMouseDown);
+  return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { display: "inline-flex" },
+      className,
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsxs(
+        StyledBorderedBox,
+        {
+          onMouseDown: setMouseDown(true),
+          onMouseUp: setMouseDown(false),
+          onMouseLeave: setMouseDown(false),
+          children: [
+            rightCardWidth && leftCardWidth ? /* @__PURE__ */ jsx(
+              FocusOverlay,
+              {
+                focusPosition: localValue === leftButton.value ? "left" : "right",
+                rightCardWidth,
+                leftCardWidth,
+                hasMouseDown
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              StyledSelectableCard,
+              {
+                ref: leftButtonRef,
+                name,
+                value: leftButton.value,
+                checked: localValue === leftButton.value,
+                onChange: handleOnChange,
+                onBlur,
+                onFocus,
+                "data-checked": localValue === leftButton.value,
+                label: leftButton.label,
+                "data-testid": dataTestId ? `${dataTestId}-left` : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              StyledSelectableCard,
+              {
+                ref: rightButtonRef,
+                name,
+                value: rightButton.value,
+                checked: localValue === rightButton.value,
+                onChange: handleOnChange,
+                onBlur,
+                onFocus,
+                "data-checked": localValue === rightButton.value,
+                label: rightButton.label,
+                "data-testid": dataTestId ? `${dataTestId}-right` : void 0
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+export {
+  SwitchButton
+};

package/dist/components/Table/Body.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type BodyProps = {
+    children: ReactNode;
+};
+export declare const Body: ({ children }: BodyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/Body.js

@@ -0,0 +1,5 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+const Body = ({ children }) => /* @__PURE__ */ jsx("tbody", { children });
+export {
+  Body
+};

package/dist/components/Table/Cell.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type CellProps = {
+    children?: ReactNode;
+    className?: string;
+    colSpan?: number;
+    rowSpan?: number;
+};
+export declare const Cell: ({ children, className, colSpan, rowSpan }: CellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/Cell.js

@@ -0,0 +1,10 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+const StyledCell = styled("td")`
+  padding: ${({ theme }) => theme.space["1"]};
+  font-size: 14px;
+`;
+const Cell = ({ children, className, colSpan, rowSpan }) => /* @__PURE__ */ jsx(StyledCell, { className, colSpan, rowSpan, children });
+export {
+  Cell
+};

package/dist/components/Table/Header.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type HeaderProps = {
+    children: ReactNode;
+};
+export declare const Header: ({ children }: HeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/Header.js

@@ -0,0 +1,9 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+const StyledHeader = styled("thead")`
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral.border};
+`;
+const Header = ({ children }) => /* @__PURE__ */ jsx(StyledHeader, { children });
+export {
+  Header
+};

package/dist/components/Table/HeaderCell.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+type HeaderCellProps = {
+    children: ReactNode;
+    className?: string;
+    isOrdered?: boolean;
+    orderDirection?: 'asc' | 'desc' | 'none';
+    onOrder?: (newOrder: 'asc' | 'desc') => void;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    info?: string;
+};
+export declare const HeaderCell: ({ children, className, isOrdered, onOrder, orderDirection, width, maxWidth, minWidth, info, }: HeaderCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/HeaderCell.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const StyledIconContainer = styled(Stack)`
+  color: ${({ theme }) => theme.colors.neutral.textWeak};
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  &[role*='button'] {
+    cursor: pointer;
+    user-select: none;
+  }
+`;
+const SortIcon = ({ order }) => /* @__PURE__ */ jsxs(StyledIconContainer, { children: [
+  /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: "arrow-up",
+      size: 10,
+      color: order === "ascending" ? "primary" : "neutral",
+      prominence: "weak"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: "arrow-down",
+      size: 10,
+      color: order === "descending" ? "primary" : "neutral",
+      prominence: "weak"
+    }
+  )
+] });
+const StyledHeaderCell = styled("th", {
+  shouldForwardProp: (prop) => !["width", "maxWidth", "minWidth"].includes(prop)
+})`
+  ${({ width, maxWidth, minWidth }) => `
+    ${width ? `width: ${width};` : ""}
+    ${maxWidth ? `max-width: ${maxWidth};` : ""}
+    ${minWidth ? `min-width: ${minWidth};` : ""}
+  `}
+  padding: ${({ theme }) => theme.space["1"]};
+
+  &[role*='button'] {
+    cursor: pointer;
+    user-select: none;
+  }
+`;
+const StyledText = styled(Text)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${({ theme }) => theme.space["1"]};
+`;
+const HeaderCell = ({
+  children,
+  className,
+  isOrdered,
+  onOrder,
+  orderDirection,
+  width,
+  maxWidth,
+  minWidth,
+  info
+}) => {
+  let order;
+  if (isOrdered && orderDirection === "asc") {
+    order = "ascending";
+  } else if (isOrdered && orderDirection === "desc") {
+    order = "descending";
+  }
+  const handleOrder = onOrder ? () => onOrder(order === "ascending" ? "desc" : "asc") : void 0;
+  return /* @__PURE__ */ jsx(
+    StyledHeaderCell,
+    {
+      className,
+      onClick: handleOrder,
+      onKeyDown: handleOrder ? (event) => {
+        if (event.key === " " || event.key === "Enter") {
+          handleOrder();
+          if (event.key === " ") {
+            event.preventDefault();
+          }
+        }
+      } : void 0,
+      role: onOrder ? "button columnheader" : void 0,
+      width,
+      maxWidth,
+      minWidth,
+      tabIndex: handleOrder ? 0 : -1,
+      "aria-sort": order,
+      children: /* @__PURE__ */ jsxs(
+        StyledText,
+        {
+          as: "div",
+          variant: "bodySmall",
+          color: order !== void 0 ? "primary" : "neutral",
+          children: [
+            children,
+            info ? /* @__PURE__ */ jsx(Tooltip, { text: info, children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "information-outline",
+                size: 20,
+                prominence: "weak",
+                color: "neutral"
+              }
+            ) }) : null,
+            orderDirection !== void 0 && isOrdered !== void 0 ? /* @__PURE__ */ jsx(SortIcon, { "aria-disabled": !onOrder, order }) : null
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  HeaderCell
+};

package/dist/components/Table/HeaderRow.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type HeaderRowProps = {
+    children: ReactNode;
+    hasSelectAllColumn: boolean;
+};
+export declare const HeaderRow: ({ children, hasSelectAllColumn }: HeaderRowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/HeaderRow.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Checkbox } from "../Checkbox/index.js";
+import { HeaderCell } from "./HeaderCell.js";
+import { useTableContext } from "./TableContext.js";
+const HeaderRow = ({ children, hasSelectAllColumn }) => {
+  const { allRowSelectValue, selectAll, unselectAll, selectedRowIds } = useTableContext();
+  const selectableRowCount = Object.keys(selectedRowIds).length;
+  return /* @__PURE__ */ jsxs("tr", { children: [
+    hasSelectAllColumn ? /* @__PURE__ */ jsx(HeaderCell, { width: "24px", children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        name: "table-select-all-checkbox",
+        value: "all",
+        "aria-label": "select all",
+        checked: allRowSelectValue,
+        onChange: allRowSelectValue === false ? selectAll : unselectAll,
+        disabled: selectableRowCount === 0
+      }
+    ) }) : null,
+    children
+  ] });
+};
+export {
+  HeaderRow
+};

package/dist/components/Table/Row.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+type RowProps = {
+    children: ReactNode;
+    className?: string;
+    id: string;
+    'data-testid'?: string;
+    /**
+     * Row cannot be selected if this prop is provided. boolean true disabled selection, a string disable selection and a tooltip will be displayed on checkbox hover.
+     * */
+    selectDisabled?: boolean | string;
+    highlightAnimation?: boolean;
+};
+export declare const Row: ({ children, className, id, selectDisabled, highlightAnimation, "data-testid": dataTestid, }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};