@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/src/components/Checkbox/index.js

@@ -1,316 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useTheme } from '@emotion/react';
-import { Icon } from '@ultraviolet/icons';
-import { forwardRef, useState, useId, useEffect, useCallback } from 'react';
-import { Loader } from '../Loader/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const ErrorText = /*#__PURE__*/_styled(Text, {
-  target: "eqr7bqq7"
-})("padding-top:", ({
-  theme
-}) => `${theme.space['0.5']}`, ";");
-const InnerCheckbox = /*#__PURE__*/_styled("rect", {
-  target: "eqr7bqq6"
-})("fill:", ({
-  theme
-}) => theme.colors.neutral.background, ";stroke:", ({
-  theme
-}) => theme.colors.neutral.border, ";");
-const CheckMixedMark = /*#__PURE__*/_styled("rect", {
-  target: "eqr7bqq5"
-})();
-const CheckboxIconContainer = ({
-  children
-}) => {
-  const theme = useTheme();
-  return jsxs("g", {
-    children: [jsx(InnerCheckbox, {
-      x: "4",
-      y: "4",
-      width: "16",
-      height: "16",
-      rx: theme.radii.small,
-      strokeWidth: "2"
-    }), children]
-  });
-};
-const StyledIcon = /*#__PURE__*/_styled('svg', {
-  target: "eqr7bqq4"
-})("border-radius:", ({
-  theme
-}) => theme.radii.default, ";height:", ({
-  size
-}) => size, "px;width:", ({
-  size
-}) => size, "px;min-width:", ({
-  size
-}) => size, "px;min-height:", ({
-  size
-}) => size, "px;& path{fill:", ({
-  theme
-}) => theme.colors.neutral.background, ";transform:translate(2px, 2px);transform:scale(0);}");
-const StyledLabel = /*#__PURE__*/_styled('label', {
-  target: "eqr7bqq3"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1d3w5wq",
-  styles: "width:100%"
-} : {
-  name: "1d3w5wq",
-  styles: "width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const CheckboxInput = /*#__PURE__*/_styled('input', {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "eqr7bqq2"
-})("position:absolute;white-space:nowrap;height:", ({
-  size
-}) => size, "px;width:", ({
-  size
-}) => size, "px;opacity:0;border-width:0;&:not(:disabled){cursor:pointer;}&:disabled{cursor:not-allowed;}&:not(:disabled){&:checked+", StyledIcon, ",&[aria-checked='mixed']+", StyledIcon, "{fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.primary.borderStrong, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", ({
-  theme
-}) => theme.colors.danger.background, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.danger.border, ";}}}&:focus+", StyledIcon, "{background-color:", ({
-  theme
-}) => theme.colors.primary.background, ";fill:", ({
-  theme
-}) => theme.colors.danger.background, ";outline:1px solid ", ({
-  theme
-}) => theme.shadows.focusPrimary, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.primary.borderHover, ";fill:", ({
-  theme
-}) => theme.colors.primary.backgroundHover, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", ({
-  theme
-}) => theme.colors.danger.background, ";fill:", ({
-  theme
-}) => theme.colors.danger.background, ";outline:1px solid ", ({
-  theme
-}) => theme.shadows.focusDanger, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.danger.borderHover, ";fill:", ({
-  theme
-}) => theme.colors.danger.backgroundHover, ";}}");
-const CheckboxContainer = /*#__PURE__*/_styled("div", {
-  target: "eqr7bqq1"
-})("position:relative;display:inline-flex;align-items:start;gap:", ({
-  theme
-}) => theme.space['1'], ";", StyledLabel, "{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";", StyledLabel, "{cursor:not-allowed;}", StyledIcon, "{fill:", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.neutral.borderStrongDisabled, ";fill:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";}}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, "{fill:", ({
-  theme
-}) => theme.colors.danger.backgroundStrongDisabled, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.danger.borderStrongDisabled, ";fill:", ({
-  theme
-}) => theme.colors.danger.backgroundStrongDisabled, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", ({
-  theme
-}) => theme.colors.danger.background, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.danger.borderDisabled, ";fill:", ({
-  theme
-}) => theme.colors.danger.background, ";}}", CheckboxInput, ":checked+", StyledIcon, "{fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongDisabled, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.primary.borderDisabled, ";fill:", ({
-  theme
-}) => theme.colors.primary.borderDisabled, ";}}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongDisabled, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.primary.borderStrongDisabled, ";fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongDisabled, ";}}}", CheckboxInput, ":checked+", StyledIcon, " path{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(1);transform:translate(2px, 2px);}", CheckboxInput, ":checked+", StyledIcon, " ", InnerCheckbox, "{fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";stroke:", ({
-  theme
-}) => theme.colors.primary.borderStrong, ";}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, " ", InnerCheckbox, "{fill:", ({
-  theme
-}) => theme.colors.danger.backgroundStrong, ";stroke:", ({
-  theme
-}) => theme.colors.danger.borderStrong, ";}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{", CheckMixedMark, "{fill:", ({
-  theme
-}) => theme.colors.neutral.iconStronger, ";}", InnerCheckbox, "{fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";stroke:", ({
-  theme
-}) => theme.colors.primary.borderStrong, ";}}&:hover[aria-disabled='false']{", CheckboxInput, "[aria-invalid='false']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.primary.borderHover, ";fill:", ({
-  theme
-}) => theme.colors.primary.backgroundHover, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.primary.borderStrongHover, ";fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongHover, ";}&[aria-checked='mixed']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.primary.borderStrongHover, ";fill:", ({
-  theme
-}) => theme.colors.primary.backgroundStrongHover, ";}}", CheckboxInput, "[aria-invalid='true']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.danger.borderHover, ";fill:", ({
-  theme
-}) => theme.colors.danger.backgroundHover, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.danger.borderStrongHover, ";fill:", ({
-  theme
-}) => theme.colors.danger.backgroundStrongHover, ";}}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", ({
-  theme
-}) => theme.colors.danger.backgroundStrong, ";", InnerCheckbox, "{stroke:", ({
-  theme
-}) => theme.colors.danger.backgroundStrong, ";fill:", ({
-  theme
-}) => theme.colors.danger.background, ";}}");
-const StyledActivityContainer = /*#__PURE__*/_styled("div", {
-  target: "eqr7bqq0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-/**
- * Checkbox is an input component used to select or deselect an option.
- */
-const Checkbox = /*#__PURE__*/forwardRef(({
-  id,
-  checked = false,
-  onChange,
-  onFocus,
-  onBlur,
-  error,
-  name,
-  helper,
-  value,
-  size = 24,
-  children,
-  progress = false,
-  disabled = false,
-  autoFocus = false,
-  className,
-  'data-visibility': dataVisibility,
-  'aria-label': ariaLabel,
-  required,
-  'data-testid': dataTestId,
-  tooltip,
-  tabIndex
-}, ref) => {
-  const [state, setState] = useState(checked);
-  const uniqId = useId();
-  const localId = id ?? uniqId;
-  useEffect(() => {
-    setState(checked);
-  }, [checked]);
-  const onLocalChange = useCallback(event => {
-    if (!progress) onChange?.(event);
-    setState(current => current === 'indeterminate' ? false : event.target.checked);
-  }, [onChange, progress, setState]);
-  return jsx(Tooltip, {
-    text: tooltip,
-    children: jsxs(CheckboxContainer, {
-      className: className,
-      "aria-disabled": disabled,
-      "data-visibility": dataVisibility,
-      "data-checked": state,
-      "data-error": !!error,
-      "data-testid": dataTestId,
-      children: [progress ? jsx(StyledActivityContainer, {
-        children: jsx(Loader, {
-          active: true,
-          size: size
-        })
-      }) : null, jsx(CheckboxInput, {
-        id: localId,
-        type: "checkbox",
-        "aria-invalid": !!error,
-        "aria-describedby": error ? `${localId}-hint` : undefined,
-        "aria-checked": state === 'indeterminate' ? 'mixed' : state,
-        "aria-label": ariaLabel,
-        checked: state === 'indeterminate' ? false : state,
-        size: size,
-        onChange: onLocalChange,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        disabled: disabled,
-        value: value,
-        name: name,
-        autoFocus: autoFocus,
-        ref: ref,
-        required: required,
-        tabIndex: tabIndex
-      }), !progress ? jsx(StyledIcon, {
-        size: size,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        children: jsx(CheckboxIconContainer, {
-          children: state !== 'indeterminate' ? jsx("path", {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            width: 12,
-            height: 9,
-            x: "5",
-            y: "4",
-            d: "M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z",
-            fill: "white"
-          }) : jsx(CheckMixedMark, {
-            x: "6",
-            y: "11",
-            rx: "1",
-            width: "12",
-            height: "2"
-          })
-        })
-      }) : null, jsxs(Stack, {
-        gap: 0.25,
-        flex: 1,
-        children: [jsxs(Stack, {
-          gap: 0.5,
-          direction: "row",
-          alignItems: "center",
-          flex: 1,
-          children: [children ? jsx(StyledLabel, {
-            htmlFor: localId,
-            children: children
-          }) : null, required ? jsx("sup", {
-            children: jsx(Icon, {
-              name: "asterisk",
-              size: 10,
-              color: "danger"
-            })
-          }) : null]
-        }), helper ? jsx(Text, {
-          variant: "caption",
-          as: "span",
-          prominence: "weak",
-          sentiment: "neutral",
-          children: helper
-        }) : null, error ? jsx(ErrorText, {
-          variant: "caption",
-          as: "span",
-          sentiment: "danger",
-          children: error
-        }) : null]
-      })]
-    })
-  });
-});
-
-export { Checkbox };

package/dist/src/components/CheckboxGroup/index.js

@@ -1,143 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useContext, useMemo, createContext } from 'react';
-import { Checkbox } from '../Checkbox/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const CheckboxGroupContext = /*#__PURE__*/createContext(undefined);
-const StyledCheckbox = /*#__PURE__*/_styled(Checkbox, {
-  target: "e1k5uyng2"
-})(process.env.NODE_ENV === "production" ? {
-  name: "6vgcqf",
-  styles: "label{width:fit-content;}"
-} : {
-  name: "6vgcqf",
-  styles: "label{width:fit-content;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const CheckboxGroupCheckbox = ({
-  onFocus,
-  onBlur,
-  disabled,
-  error,
-  name,
-  value,
-  children,
-  helper,
-  className,
-  autoFocus,
-  'data-testid': dataTestId,
-  required
-}) => {
-  const context = useContext(CheckboxGroupContext);
-  if (!context) {
-    throw new Error('CheckboxGroup.Checkbox can only be used inside a CheckboxGroup');
-  }
-  const {
-    groupName,
-    onChange,
-    groupValues
-  } = context;
-  const checkboxName = `${groupName}.${name ?? ''}`;
-  const checkboxValue = `${value}`;
-  return jsx(StyledCheckbox, {
-    onChange: onChange,
-    checked: groupValues?.includes(checkboxValue),
-    onFocus: onFocus,
-    onBlur: onBlur,
-    disabled: disabled,
-    error: error,
-    name: checkboxName,
-    value: checkboxValue,
-    helper: helper,
-    className: className,
-    autoFocus: autoFocus,
-    "data-testid": dataTestId,
-    required: required,
-    children: children
-  });
-};
-const FieldSet = /*#__PURE__*/_styled("fieldset", {
-  target: "e1k5uyng1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "7o2an9",
-  styles: "border:none;padding:0;margin:0"
-} : {
-  name: "7o2an9",
-  styles: "border:none;padding:0;margin:0",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
-  target: "e1k5uyng0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1nglpc5",
-  styles: "vertical-align:super"
-} : {
-  name: "1nglpc5",
-  styles: "vertical-align:super",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-/**
- * CheckboxGroup is a component that groups a set of checkboxes together with a legend and helper/error text.
- */
-const CheckboxGroup = ({
-  legend,
-  value,
-  className,
-  helper,
-  error,
-  direction = 'column',
-  children,
-  onChange,
-  name,
-  required = false
-}) => {
-  const contextValue = useMemo(() => ({
-    groupName: name,
-    groupValues: value ?? [],
-    onChange,
-    required
-  }), [name, value, onChange, required]);
-  return jsx(CheckboxGroupContext.Provider, {
-    value: contextValue,
-    children: jsxs(Stack, {
-      gap: 1,
-      children: [jsx(FieldSet, {
-        className: className,
-        children: jsxs(Stack, {
-          gap: 1.5,
-          children: [jsxs(Text, {
-            as: "legend",
-            variant: "bodyStrong",
-            children: [legend, "\xA0", required ? jsx(StyledRequiredIcon, {
-              name: "asterisk",
-              color: "danger",
-              size: 8
-            }) : null]
-          }), jsx(Stack, {
-            gap: direction === 'column' ? 1 : 2,
-            direction: direction,
-            children: children
-          })]
-        })
-      }), helper ? jsx(Text, {
-        as: "span",
-        variant: "caption",
-        prominence: "weak",
-        sentiment: "neutral",
-        children: helper
-      }) : null, error ? jsx(Text, {
-        as: "span",
-        variant: "caption",
-        sentiment: "danger",
-        children: error
-      }) : null]
-    })
-  });
-};
-CheckboxGroup.Checkbox = CheckboxGroupCheckbox;
-
-export { CheckboxGroup, CheckboxGroupCheckbox };

package/dist/src/components/CopyButton/index.js

@@ -1,37 +0,0 @@
-import useClipboard from 'react-use-clipboard';
-import { Button } from '../Button/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const COPY_DURATION = 2500;
-/**
- * CopyButton is a button that copies a given value to the clipboard.
- */
-const CopyButton = ({
-  size = 'small',
-  value,
-  copyText = 'Copy',
-  copiedText = 'Copied!',
-  sentiment = 'primary',
-  noBorder,
-  bordered,
-  className,
-  'data-testid': dataTestId
-}) => {
-  const [isCopied, setCopied] = useClipboard(value, {
-    successDuration: COPY_DURATION
-  });
-  return jsx(Button, {
-    type: "button",
-    onClick: setCopied,
-    size: size,
-    sentiment: sentiment,
-    variant: noBorder || !bordered ? 'ghost' : 'outlined',
-    className: className,
-    "data-testid": dataTestId,
-    "aria-label": "Copy",
-    icon: isCopied ? 'check' : 'copy-content',
-    tooltip: isCopied ? copiedText : copyText
-  });
-};
-
-export { CopyButton };