@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,231 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef, useId } from 'react';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const InnerCircleRing = /*#__PURE__*/_styled("circle", {
+  target: "ehkrmld4"
+})("fill:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundWeak;
+}, ";");
+const RadioMark = /*#__PURE__*/_styled("circle", {
+  target: "ehkrmld3"
+})();
+const RadioMarkedIcon = () => jsxs("g", {
+  children: [jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "8",
+    strokeWidth: "2"
+  }), jsx(InnerCircleRing, {
+    cx: "12",
+    cy: "12",
+    r: "6"
+  }), jsx(RadioMark, {
+    cx: "12",
+    cy: "12",
+    r: "4"
+  })]
+});
+const StyledIcon = /*#__PURE__*/_styled("svg", {
+  target: "ehkrmld2"
+})("height:", _ref2 => {
+  let {
+    size
+  } = _ref2;
+  return size;
+}, "px;width:", _ref3 => {
+  let {
+    size
+  } = _ref3;
+  return size;
+}, "px;min-width:", _ref4 => {
+  let {
+    size
+  } = _ref4;
+  return size;
+}, "px;min-height:", _ref5 => {
+  let {
+    size
+  } = _ref5;
+  return size;
+}, "px;border-radius:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.radii.circle;
+}, ";fill:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.neutral.textWeak;
+}, ";", InnerCircleRing, "{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 => {
+  let {
+    size
+  } = _ref9;
+  return size;
+}, "px;width:", _ref10 => {
+  let {
+    size
+  } = _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 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colors.primary.backgroundStrong;
+}, ";}&[aria-invalid='true']:not([aria-disabled='true'])+", StyledIcon, "{fill:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.danger.text;
+}, ";}&:focus+", StyledIcon, "{background-color:", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.primary.background;
+}, ";fill:", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.primary.backgroundStrong;
+}, ";", InnerCircleRing, "{fill:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.primary.background;
+}, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.colors.danger.background;
+}, ";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", {
+  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 => {
+  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.textDisabled;
+}, ";", InnerCircleRing, "{fill:", _ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.colors.neutral.backgroundStrong;
+}, ";}}}");
+const Radio = /*#__PURE__*/forwardRef((_ref29, ref) => {
+  let {
+    checked = false,
+    onChange,
+    onFocus,
+    onBlur,
+    disabled = false,
+    error,
+    name,
+    value,
+    size = 24,
+    children,
+    className,
+    autoFocus,
+    onKeyDown,
+    'aria-label': ariaLabel,
+    'data-testid': dataTestId
+  } = _ref29;
+  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,
+      "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
+    }) : null]
+  });
+});
+
+export { Radio };

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

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