@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -0,0 +1,14 @@
+export declare const progressBarSentiments: readonly ["primary", "success", "warning", "info", "danger"];
+type ProgressBarProps = {
+    sentiment?: (typeof progressBarSentiments)[number];
+    value?: number;
+    /** Put ProgressBar in a loading state */
+    progress?: boolean;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * Progress bar component to display progress of a task. Can be used to display progress of a form or a loading state.
+ */
+export declare const ProgressBar: ({ progress, value, sentiment, className, "data-testid": dataTestId, }: ProgressBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ProgressBar/index.js

@@ -0,0 +1,71 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+const shineAnimation = keyframes`
+  from {
+    left: -25%;
+  }
+
+  to {
+    left: 100%;
+  }
+`;
+const StyledProgressContainer = styled.div`
+  overflow: hidden;
+  position: relative;
+  height: 4px;
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: ${({ theme }) => theme.radii.default};
+  background-color: ${({ theme }) => theme.colors.neutral.backgroundStrong};
+`;
+const StyledProgress = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 25%;
+  opacity: 0.8;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 0.3),
+    rgba(255, 255, 255, 0.4),
+    rgba(255, 255, 255, 0.3),
+    rgba(255, 255, 255, 0)
+  );
+  animation: ${shineAnimation} 1s linear infinite;
+`;
+const StyledFilled = styled("div", {
+  shouldForwardProp: (prop) => !["sentiment", "value"].includes(prop)
+})`
+  border-radius: ${({ theme }) => theme.radii.default};
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: ${({ theme, sentiment }) => theme.colors[sentiment].backgroundStrong ?? "inherit"};
+  transition: 0.3s width;
+  width: ${({ value }) => Math.max(0, Math.min(100, value))}%;
+`;
+const ProgressBar = ({
+  progress = false,
+  value = 0,
+  sentiment = "primary",
+  className,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsx(
+  StyledProgressContainer,
+  {
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    className,
+    "data-testid": dataTestId,
+    children: progress ? /* @__PURE__ */ jsx(StyledProgress, {}) : /* @__PURE__ */ jsx(StyledFilled, { sentiment, value })
+  }
+);
+export {
+  ProgressBar
+};

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

@@ -0,0 +1,21 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+type RadioProps = {
+    error?: ReactNode;
+    checked?: boolean;
+    value: string | number;
+    helper?: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+    tooltip?: string;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'disabled' | 'autoFocus' | 'onKeyDown' | 'id' | 'name' | 'required'> & ({
+    'aria-label': string;
+    label?: never;
+} | {
+    'aria-label'?: never;
+    label: ReactNode;
+});
+/**
+ * Radio component is used to select a single option from a list of options. It is a type of input component.
+ */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/Radio/index.js

@@ -0,0 +1,202 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef, useId } from "react";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const SIZE = 24;
+const InnerCircleRing = styled.circle``;
+const RadioMark = styled.circle``;
+const RadioMarkedIcon = () => /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "2" }),
+  /* @__PURE__ */ jsx(InnerCircleRing, { cx: "12", cy: "12", r: "8" }),
+  /* @__PURE__ */ jsx(RadioMark, { cx: "12", cy: "12", r: "5" })
+] });
+const Ring = styled.svg`
+  height: ${SIZE}px;
+  width: ${SIZE}px;
+  min-width: ${SIZE}px;
+  min-height: ${SIZE}px;
+  border-radius: ${({ theme }) => theme.radii.circle};
+  fill: ${({ theme }) => theme.colors.neutral.border};
+  ${InnerCircleRing} {
+    fill: ${({ theme }) => theme.colors.neutral.background};
+  }
+`;
+const RadioInput = styled.input`
+  cursor: pointer;
+  position: absolute;
+  height: ${SIZE}px;
+  width: ${SIZE}px;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+  & + ${Ring} {
+    ${RadioMark} {
+      transform-origin: center;
+      transition: 200ms transform ease-in-out;
+      transform: scale(0);
+    }
+  }
+
+  &:checked + svg {
+    ${RadioMark} {
+      transform: scale(1);
+    }
+  }
+
+  &:checked[aria-disabled='false'][aria-invalid='false'] + ${Ring} {
+    fill: ${({ theme }) => theme.colors.primary.backgroundStrong};
+  }
+
+  &[aria-invalid='true']:not([aria-disabled='true']) + ${Ring} {
+    fill: ${({ theme }) => theme.colors.danger.backgroundStrong};
+  }
+
+  &[aria-disabled='false']:active + ${Ring} {
+    background-color: #5e127e40;
+    fill: ${({ theme }) => theme.colors.primary.backgroundStrong};
+    ${InnerCircleRing} {
+      fill: ${({ theme }) => theme.colors.primary.background};
+    }
+  }
+
+  &[aria-disabled='false']:focus-visible + ${Ring} {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+
+  &[aria-invalid='true']:focus + ${Ring} {
+    background-color: #f91b6c40;
+    fill: ${({ theme }) => theme.colors.danger.backgroundStrong};
+    ${InnerCircleRing} {
+      fill: ${({ theme }) => theme.colors.danger.background};
+    }
+  }
+`;
+const RadioContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: flex-start;
+  gap: ${({ theme }) => theme.space["1"]};
+
+  &[aria-disabled='false'],
+  &[aria-disabled='false'] > label {
+    cursor: pointer;
+  }
+
+  &[aria-disabled='true'][data-checked='false'] {
+    color: ${({ theme }) => theme.colors.neutral.textDisabled};
+  }
+
+  :hover[aria-disabled='false'] {
+    ${RadioInput} + ${Ring} {
+      fill: ${({ theme }) => theme.colors.primary.border};
+      ${InnerCircleRing} {
+        fill: ${({ theme }) => theme.colors.primary.backgroundHover};
+      }
+    }
+
+    ${RadioInput}[aria-invalid='true'] + ${Ring} {
+      fill: ${({ theme }) => theme.colors.danger.border};
+      ${InnerCircleRing} {
+        fill: ${({ theme }) => theme.colors.danger.backgroundHover};
+      }
+    }
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    & > label,
+    ${RadioInput} {
+      cursor: not-allowed;
+    }
+
+    ${Ring} {
+      fill: ${({ theme }) => theme.colors.neutral.borderDisabled};
+      cursor: not-allowed;
+      ${InnerCircleRing} {
+        fill: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+      }
+    }
+  }
+`;
+const StyledLabel = styled.label`
+  flex: 1;
+`;
+const MargedText = styled(Text)`
+  margin-left: ${({ theme }) => theme.space["4"]};
+`;
+const Radio = forwardRef(
+  ({
+    checked = false,
+    onChange,
+    onFocus,
+    onBlur,
+    disabled = false,
+    error,
+    name,
+    value,
+    label,
+    helper,
+    className,
+    autoFocus,
+    onKeyDown,
+    tooltip,
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId
+  }, ref) => {
+    const id = useId();
+    const computedName = name ?? id;
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
+      /* @__PURE__ */ jsxs(
+        RadioContainer,
+        {
+          "aria-disabled": disabled,
+          className,
+          "data-checked": checked,
+          "data-error": error,
+          "data-testid": dataTestId,
+          children: [
+            /* @__PURE__ */ jsx(
+              RadioInput,
+              {
+                type: "radio",
+                "aria-invalid": !!error,
+                "aria-disabled": disabled,
+                "aria-label": ariaLabel,
+                checked,
+                id: `${computedName}-${value}`,
+                onChange,
+                onFocus,
+                onKeyDown,
+                onBlur,
+                value,
+                disabled,
+                name: computedName,
+                autoFocus,
+                ref
+              }
+            ),
+            /* @__PURE__ */ jsx(Ring, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(RadioMarkedIcon, {}) }),
+            label ? /* @__PURE__ */ jsx(StyledLabel, { htmlFor: `${computedName}-${value}`, children: label }) : null
+          ]
+        }
+      ),
+      helper ? /* @__PURE__ */ jsx(
+        MargedText,
+        {
+          as: "span",
+          variant: "caption",
+          prominence: "weak",
+          sentiment: "neutral",
+          children: helper
+        }
+      ) : null
+    ] }) });
+  }
+);
+export {
+  Radio
+};

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

@@ -0,0 +1,25 @@
+import { type ComponentProps, type InputHTMLAttributes, type ReactNode } from 'react';
+import { Radio } from '../Radio';
+type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'> & {
+    /**
+     * @deprecated you don't need to use `name` anymore, the name will be passed from the parent `RadioGroup`.
+     */
+    name?: string;
+};
+type RadioGroupProps = {
+    legend: string;
+    value: string | number;
+    className?: string;
+    helper?: ReactNode;
+    error?: ReactNode;
+    direction?: 'row' | 'column';
+    children: ReactNode;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+/**
+ * RadioGroup is a component that allows users to select one option from a list of options using radio.
+ */
+export declare const RadioGroup: {
+    ({ legend, value, className, helper, error, direction, children, onChange, name, required, }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: RadioGroupRadioProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { createContext, useMemo, useContext } from "react";
+import { Radio } from "../Radio/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const RadioGroupContext = createContext(
+  void 0
+);
+const RadioGroupRadio = ({
+  onFocus,
+  onBlur,
+  disabled,
+  error,
+  name,
+  value,
+  label,
+  helper,
+  className,
+  autoFocus,
+  onKeyDown,
+  "data-testid": dataTestId
+}) => {
+  const context = useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error("RadioGroup.Radio can only be used inside a RadioGroup");
+  }
+  const { groupName, onChange, groupValue } = context;
+  return /* @__PURE__ */ jsx(
+    Radio,
+    {
+      onChange,
+      checked: groupValue === value,
+      onFocus,
+      onBlur,
+      disabled,
+      error,
+      name: groupName ?? name,
+      value,
+      label,
+      helper,
+      className,
+      autoFocus,
+      onKeyDown,
+      "data-testid": dataTestId
+    }
+  );
+};
+const FieldSet = styled.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+`;
+const StyledRequiredIcon = styled(Icon)`
+  vertical-align: super;
+`;
+const RadioGroup = ({
+  legend,
+  value,
+  className,
+  helper,
+  error,
+  direction = "column",
+  children,
+  onChange,
+  name,
+  required = false
+}) => {
+  const contextValue = useMemo(
+    () => ({
+      groupName: name,
+      groupValue: value,
+      onChange,
+      required
+    }),
+    [name, value, onChange, required]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+    /* @__PURE__ */ jsx(FieldSet, { className, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+      /* @__PURE__ */ jsxs(Text, { as: "legend", variant: "bodyStrong", children: [
+        legend,
+        " ",
+        required ? /* @__PURE__ */ jsx(StyledRequiredIcon, { name: "asterisk", color: "danger", size: 8 }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { gap: direction === "column" ? 1 : 2, direction, children })
+    ] }) }),
+    helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        variant: "caption",
+        prominence: "weak",
+        sentiment: "neutral",
+        children: helper
+      }
+    ) : null,
+    error ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "caption", sentiment: "danger", children: error }) : null
+  ] }) });
+};
+RadioGroup.Radio = RadioGroupRadio;
+export {
+  RadioGroup
+};

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

@@ -0,0 +1,22 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { UltravioletUITheme } from '../../theme';
+type StyledRowProps = Pick<RowProps, 'gap' | 'templateColumns' | 'alignItems' | 'justifyContent'>;
+export declare const StyledRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & StyledRowProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+type RowProps = {
+    className?: string;
+    'data-testid'?: string;
+    children: ReactNode;
+    templateColumns: string;
+    gap?: keyof UltravioletUITheme['space'] | number;
+    alignItems?: CSSProperties['alignItems'];
+    justifyContent?: CSSProperties['justifyContent'];
+};
+/**
+ * Row component is a wrapper for grid layout.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Row/index.js

@@ -0,0 +1,43 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+const StyledRow = styled("div", {
+  shouldForwardProp: (prop) => !["templateColumns", "gap", "alignItems", "justifyContent"].includes(prop)
+})`
+  display: grid;
+  ${({
+  theme,
+  gap,
+  alignItems = "normal",
+  templateColumns,
+  justifyContent = "normal"
+}) => `
+    grid-template-columns: ${templateColumns};
+    ${gap ? `gap: ${theme.space[gap]};` : ""}
+    align-items: ${alignItems};
+    justify-content: ${justifyContent};
+  `}
+`;
+const Row = ({
+  className,
+  "data-testid": dataTestId,
+  children,
+  templateColumns,
+  alignItems,
+  justifyContent,
+  gap
+}) => /* @__PURE__ */ jsx(
+  StyledRow,
+  {
+    className,
+    "data-testid": dataTestId,
+    gap,
+    templateColumns,
+    alignItems,
+    justifyContent,
+    children
+  }
+);
+export {
+  Row,
+  StyledRow
+};

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

@@ -0,0 +1,75 @@
+import type { CSSObject, Theme } from '@emotion/react';
+import { css } from '@emotion/react';
+import type { ComponentProps, ForwardRefExoticComponent, ForwardedRef, JSX, ReactNode } from 'react';
+import type { CommonProps, GroupBase, OptionProps, Props } from 'react-select';
+import Select from 'react-select';
+export type SelectOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    description?: string;
+    inlineDescription?: string;
+};
+type SelectStyleProps = {
+    error?: string;
+    /**
+     * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles)
+     */
+    customStyle: (state: SelectProps & WithSelectProps) => Record<string, CSSObject>;
+    animation?: string;
+    /**
+     * Time of the animation
+     */
+    animationDuration: number;
+    /**
+     * Show/hide the label inside the component
+     */
+    noTopLabel?: boolean;
+    theme: Theme;
+};
+type WithSelectProps = {
+    selectProps: SelectProps;
+};
+type SelectProps = StyledContainerProps & Omit<Props<SelectOption>, 'value'> & CommonProps<SelectOption, boolean, GroupBase<SelectOption>> & {
+    value?: string | SelectOption;
+    checked?: boolean;
+    error?: string;
+    labelId?: string;
+    required?: boolean;
+    time?: boolean;
+};
+type StyledContainerProps = {
+    isDisabled?: boolean;
+    additionalStyles?: Parameters<typeof css>[0];
+};
+type StateManagedSelect = typeof Select;
+type SelectInputProps = SelectProps & SelectStyleProps & {
+    /**
+     * Name of the animation
+     */
+    animation?: string;
+    /**
+     * Play the animation when the value change
+     */
+    animationOnChange?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    innerRef?: ForwardedRef<StateManagedSelect>;
+    /**
+     * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
+     */
+    customComponents?: SelectProps['components'];
+    children: ReactNode;
+    emptyState?: ComponentProps<Select>['noOptionsMessage'];
+    'data-testid'?: string;
+};
+type OptionComponent = (props: Partial<OptionProps<SelectOption> & SelectOption>) => JSX.Element;
+/**
+ * SelectInput component is a wrapper around [react-select](https://react-select.com) component.
+ * It provides a styled select input with a label and an error message.
+ * @deprecated use SelectInputV2 component instead
+ */
+export declare const SelectInput: ForwardRefExoticComponent<Partial<SelectInputProps>> & {
+    Option: OptionComponent;
+};
+export {};