@ultraviolet/ui 1.6.1 → 1.8.0

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

@@ -1,180 +1,135 @@
 import _styled from '@emotion/styled/base';
 import { forwardRef, useId } from 'react';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
+const SIZE = 24;
 const InnerCircleRing = /*#__PURE__*/_styled("circle", {
-  target: "ehkrmld4"
-})("fill:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.borderStrong;
-}, ";");
+  target: "ehkrmld5"
+})();
 const RadioMark = /*#__PURE__*/_styled("circle", {
-  target: "ehkrmld3"
+  target: "ehkrmld4"
 })();
 const RadioMarkedIcon = () => jsxs("g", {
   children: [jsx("circle", {
     cx: "12",
     cy: "12",
-    r: "8",
+    r: "10",
     strokeWidth: "2"
   }), jsx(InnerCircleRing, {
     cx: "12",
     cy: "12",
-    r: "6"
+    r: "8"
   }), jsx(RadioMark, {
     cx: "12",
     cy: "12",
-    r: "4"
+    r: "5"
   })]
 });
-const StyledIcon = /*#__PURE__*/_styled("svg", {
-  target: "ehkrmld2"
-})("height:", _ref2 => {
+const Ring = /*#__PURE__*/_styled("svg", {
+  target: "ehkrmld3"
+})("height:", SIZE, "px;width:", SIZE, "px;min-width:", SIZE, "px;min-height:", SIZE, "px;border-radius:", _ref => {
   let {
-    size
+    theme
+  } = _ref;
+  return theme.radii.circle;
+}, ";fill:", _ref2 => {
+  let {
+    theme
   } = _ref2;
-  return size;
-}, "px;width:", _ref3 => {
+  return theme.colors.neutral.border;
+}, ";", InnerCircleRing, "{fill:", _ref3 => {
   let {
-    size
+    theme
   } = _ref3;
-  return size;
-}, "px;min-width:", _ref4 => {
+  return theme.colors.neutral.background;
+}, ";}");
+const RadioInput = /*#__PURE__*/_styled("input", {
+  target: "ehkrmld2"
+})("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:", _ref4 => {
   let {
-    size
+    theme
   } = _ref4;
-  return size;
-}, "px;min-height:", _ref5 => {
+  return theme.colors.primary.backgroundStrong;
+}, ";}&[aria-invalid='true']:not([aria-disabled='true'])+", Ring, "{fill:", _ref5 => {
   let {
-    size
+    theme
   } = _ref5;
-  return size;
-}, "px;border-radius:", _ref6 => {
+  return theme.colors.danger.backgroundStrong;
+}, ";}&[aria-disabled='false']:active+", Ring, "{background-color:#5e127e40;fill:", _ref6 => {
   let {
     theme
   } = _ref6;
-  return theme.radii.circle;
-}, ";fill:", _ref7 => {
+  return theme.colors.primary.backgroundStrong;
+}, ";", InnerCircleRing, "{fill:", _ref7 => {
   let {
     theme
   } = _ref7;
-  return theme.colors.neutral.borderStrong;
-}, ";", InnerCircleRing, "{fill:", _ref8 => {
+  return 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:", _ref8 => {
   let {
     theme
   } = _ref8;
-  return theme.colors.neutral.backgroundWeak;
-}, ";}");
-const RadioInput = /*#__PURE__*/_styled('input', {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "ehkrmld1"
-})("cursor:pointer;position:absolute;height:", _ref9 => {
+  return theme.colors.danger.backgroundStrong;
+}, ";", InnerCircleRing, "{fill:", _ref9 => {
   let {
-    size
+    theme
   } = _ref9;
-  return size;
-}, "px;width:", _ref10 => {
+  return theme.colors.danger.background;
+}, ";}}");
+const RadioContainer = /*#__PURE__*/_styled("div", {
+  target: "ehkrmld1"
+})("position:relative;display:flex;align-items:flex-start;gap:", _ref10 => {
   let {
-    size
+    theme
   } = _ref10;
-  return size;
-}, "px;opacity:0;white-space:nowrap;border-width:0;&+", StyledIcon, "{", 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']+", StyledIcon, "{fill:", _ref11 => {
+  return theme.space['1'];
+}, ";&[aria-disabled='false'],&[aria-disabled='false']>label{cursor:pointer;}&[aria-disabled='true'][data-checked='false']{color:", _ref11 => {
   let {
     theme
   } = _ref11;
-  return theme.colors.primary.backgroundStrong;
-}, ";}&[aria-invalid='true']:not([aria-disabled='true'])+", StyledIcon, "{fill:", _ref12 => {
+  return theme.colors.neutral.textDisabled;
+}, ";}:hover[aria-disabled='false']{", RadioInput, "+", Ring, "{fill:", _ref12 => {
   let {
     theme
   } = _ref12;
-  return theme.colors.danger.text;
-}, ";}&:focus+", StyledIcon, "{background-color:", _ref13 => {
+  return theme.colors.primary.border;
+}, ";", InnerCircleRing, "{fill:", _ref13 => {
   let {
     theme
   } = _ref13;
-  return theme.colors.primary.background;
-}, ";fill:", _ref14 => {
+  return theme.colors.primary.backgroundHover;
+}, ";}}", RadioInput, "[aria-invalid='true']+", Ring, "{fill:", _ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.colors.primary.backgroundStrong;
+  return theme.colors.danger.border;
 }, ";", InnerCircleRing, "{fill:", _ref15 => {
   let {
     theme
   } = _ref15;
-  return theme.colors.primary.background;
-}, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", _ref16 => {
+  return theme.colors.danger.backgroundHover;
+}, ";}}}&[aria-disabled='true']{cursor:not-allowed;&>label,", RadioInput, "{cursor:not-allowed;}", Ring, "{fill:", _ref16 => {
   let {
     theme
   } = _ref16;
-  return theme.colors.danger.background;
-}, ";fill:", _ref17 => {
+  return theme.colors.neutral.borderDisabled;
+}, ";cursor:not-allowed;", InnerCircleRing, "{fill:", _ref17 => {
   let {
     theme
   } = _ref17;
-  return theme.colors.danger.text;
-}, ";", InnerCircleRing, "{fill:", _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.colors.danger.background;
-}, ";}}");
-const RadioContainer = /*#__PURE__*/_styled("div", {
+  return theme.colors.neutral.backgroundDisabled;
+}, ";}}}");
+const MargedText = /*#__PURE__*/_styled(Text, {
   target: "ehkrmld0"
-})("position:relative;display:flex;align-items:flex-start;gap:", _ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return theme.space['1'];
-}, ";&[aria-disabled='false'],&[aria-disabled='false']>label{cursor:pointer;}:hover[aria-disabled='false']{", RadioInput, "+", StyledIcon, "{background-color:", _ref20 => {
-  let {
-    theme
-  } = _ref20;
-  return theme.colors.primary.background;
-}, ";fill:", _ref21 => {
+})("margin-left:", _ref18 => {
   let {
     theme
-  } = _ref21;
-  return theme.colors.primary.backgroundStrong;
-}, ";", InnerCircleRing, "{fill:", _ref22 => {
-  let {
-    theme
-  } = _ref22;
-  return theme.colors.primary.background;
-}, ";}}", RadioInput, "[aria-invalid='true']+", StyledIcon, "{background-color:", _ref23 => {
-  let {
-    theme
-  } = _ref23;
-  return theme.colors.danger.background;
-}, ";fill:", _ref24 => {
-  let {
-    theme
-  } = _ref24;
-  return theme.colors.danger.text;
-}, ";", InnerCircleRing, "{fill:", _ref25 => {
-  let {
-    theme
-  } = _ref25;
-  return theme.colors.danger.background;
-}, ";}}}&[aria-disabled='true']{cursor:not-allowed;color:", _ref26 => {
-  let {
-    theme
-  } = _ref26;
-  return theme.colors.neutral.textDisabled;
-}, ";&>label{cursor:not-allowed;}", StyledIcon, "{fill:", _ref27 => {
-  let {
-    theme
-  } = _ref27;
-  return theme.colors.neutral.borderStrongDisabled;
-}, ";", InnerCircleRing, "{fill:", _ref28 => {
-  let {
-    theme
-  } = _ref28;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";}}}");
-const Radio = /*#__PURE__*/forwardRef((_ref29, ref) => {
+  } = _ref18;
+  return theme.space['4'];
+}, ";");
+const Radio = /*#__PURE__*/forwardRef((_ref19, ref) => {
   let {
     checked = false,
     onChange,
@@ -184,46 +139,52 @@ const Radio = /*#__PURE__*/forwardRef((_ref29, ref) => {
     error,
     name,
     value,
-    size = 24,
-    children,
+    label,
+    helper,
     className,
     autoFocus,
     onKeyDown,
     'aria-label': ariaLabel,
     'data-testid': dataTestId
-  } = _ref29;
+  } = _ref19;
   const id = useId();
   const computedName = name ?? id;
-  return jsxs(RadioContainer, {
-    "aria-disabled": disabled,
-    className: className,
-    "data-checked": checked,
-    "data-error": error,
-    "data-testid": dataTestId,
-    children: [jsx(RadioInput, {
-      type: "radio",
-      "aria-invalid": !!error,
+  return jsxs(Stack, {
+    gap: 0.5,
+    children: [jsxs(RadioContainer, {
       "aria-disabled": disabled,
-      "aria-label": ariaLabel,
-      checked: checked,
-      id: `${computedName}-${value}`,
-      onChange: onChange,
-      onFocus: onFocus,
-      onKeyDown: onKeyDown,
-      onBlur: onBlur,
-      value: value,
-      disabled: disabled,
-      name: computedName,
-      autoFocus: autoFocus,
-      ref: ref,
-      size: size
-    }), jsx(StyledIcon, {
-      size: size,
-      viewBox: "0 0 24 24",
-      children: jsx(RadioMarkedIcon, {})
-    }), children ? jsx("label", {
-      htmlFor: `${computedName}-${value}`,
-      children: children
+      className: className,
+      "data-checked": checked,
+      "data-error": error,
+      "data-testid": dataTestId,
+      children: [jsx(RadioInput, {
+        type: "radio",
+        "aria-invalid": !!error,
+        "aria-disabled": disabled,
+        "aria-label": ariaLabel,
+        checked: checked,
+        id: `${computedName}-${value}`,
+        onChange: onChange,
+        onFocus: onFocus,
+        onKeyDown: onKeyDown,
+        onBlur: onBlur,
+        value: value,
+        disabled: disabled,
+        name: computedName,
+        autoFocus: autoFocus,
+        ref: ref
+      }), jsx(Ring, {
+        viewBox: "0 0 24 24",
+        children: jsx(RadioMarkedIcon, {})
+      }), label ? jsx("label", {
+        htmlFor: `${computedName}-${value}`,
+        children: label
+      }) : null]
+    }), helper ? jsx(MargedText, {
+      as: "p",
+      variant: "bodySmall",
+      prominence: "weak",
+      children: helper
     }) : null]
   });
 });

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

@@ -1,5 +1,5 @@
 import _styled from '@emotion/styled/base';
-import { forwardRef, useMemo, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Checkbox } from '../Checkbox/index.js';
 import { Radio } from '../Radio/index.js';
 import { Tooltip } from '../Tooltip/index.js';
@@ -68,7 +68,7 @@ const Container = /*#__PURE__*/_styled("div", {
   } = _ref12;
   return theme.shadows.hoverPrimary;
 }, ";}}}");
-const StyledElement = element => /*#__PURE__*/_styled(element, {
+const StyledElement = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['showTick', 'hasLabel'].includes(prop),
   target: "e1s5n3hj0"
 })("display:inline-flex;align-items:start;&[data-checked='true']{color:", _ref13 => {
@@ -98,6 +98,12 @@ const StyledElement = element => /*#__PURE__*/_styled(element, {
   } = _ref17;
   return !showTick && !hasLabel ? `display: none;` : null;
 }, ";}");
+const StyledRadio = /*#__PURE__*/StyledElement.withComponent(Radio, {
+  target: "e1s5n3hj2"
+});
+const StyledCheckbox = /*#__PURE__*/StyledElement.withComponent(Checkbox, {
+  target: "e1s5n3hj3"
+});
 const SelectableCard = /*#__PURE__*/forwardRef((_ref18, ref) => {
   let {
     name,
@@ -117,7 +123,6 @@ const SelectableCard = /*#__PURE__*/forwardRef((_ref18, ref) => {
     label,
     'data-testid': dataTestId
   } = _ref18;
-  const Element = useMemo(() => StyledElement(type === 'radio' ? Radio : Checkbox), [type]);
   const innerRef = useRef(null);
   return jsx(Tooltip, {
     text: tooltip,
@@ -133,7 +138,22 @@ const SelectableCard = /*#__PURE__*/forwardRef((_ref18, ref) => {
       "data-error": isError,
       "data-testid": dataTestId,
       ref: ref,
-      children: [jsx(Element, {
+      children: [type === 'radio' ? jsx(StyledRadio, {
+        name: name,
+        value: value,
+        onChange: onChange,
+        showTick: showTick,
+        checked: checked,
+        disabled: disabled,
+        error: isError,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        hasLabel: !!label,
+        id: id,
+        ref: innerRef,
+        "data-error": isError,
+        label: label
+      }) : jsx(StyledCheckbox, {
         name: name,
         value: value,
         onChange: onChange,

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

@@ -17,6 +17,7 @@ const PROMINENCES = {
  */
 const generateStyles = _ref => {
   let {
+    placement,
     prominence,
     color,
     variant,
@@ -40,6 +41,7 @@ const generateStyles = _ref => {
     line-height: ${theme.typography[variant].lineHeight};
     text-transform: ${theme.typography[variant].textCase};
     text-decoration: ${theme.typography[variant].textDecoration};
+    ${placement ? ` text-align: ${placement};` : ''}
 
     ${oneLine ? `white-space: nowrap;
     text-overflow: ellipsis;
@@ -49,7 +51,7 @@ const generateStyles = _ref => {
   `;
 };
 const StyledText = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['as', 'variant', 'color', 'prominence', 'oneLine', 'disabled', 'italic', 'underline'].includes(prop),
+  shouldForwardProp: prop => !['as', 'placement', 'variant', 'color', 'prominence', 'oneLine', 'disabled', 'italic', 'underline'].includes(prop),
   target: "e13y3mga0"
 })(generateStyles);
 const Text = _ref2 => {
@@ -59,6 +61,7 @@ const Text = _ref2 => {
     as,
     color = 'neutral',
     oneLine = false,
+    placement,
     prominence = 'default',
     className,
     disabled = false,
@@ -86,6 +89,7 @@ const Text = _ref2 => {
     children: jsx(StyledText, {
       ref: elementRef,
       as: as,
+      placement: placement,
       prominence: prominence,
       color: color,
       variant: variant,